/* harbor.css - AT THE DOCK (CRUISE-0540 slice 1). Own file so game.css stays untouched. Sizes: --tap is the 48 SCREEN px floor game.js sets on #racer (CRUISE-0534). */
.hbr { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; }
.hbr-pic { position: relative; width: 720px; max-width: 100%; aspect-ratio: 4 / 3; background: #1a1a4e; border: 0; }
.hbr-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.hbr-hs { position: absolute; transform: translate(-50%, -50%); min-width: var(--tap, 48px); min-height: var(--tap, 48px); box-sizing: border-box; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hbr-hs:hover, .hbr-hs:focus-visible { background: rgba(255, 224, 102, .22); outline: 3px solid #ffe066; outline-offset: -3px; }
.hbr-hs:focus-visible { outline-color: #fff; box-shadow: inset 0 0 0 6px #14141f; }
.hbr-panel { position: absolute; inset: 3%; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 10px; background: #14141f; border: 4px solid #ffe066; box-shadow: 4px 4px 0 #000; overflow: hidden; }
#carplay .hbr-panel h3 { margin: 0; font-size: 28px; color: #7fe; text-align: center; }
#carplay .hbr-say { margin: 0 0 4px; font-size: 18px; color: #e8f6fa; text-align: center; }
.hbr-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.hbr-btn { font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 18px; letter-spacing: 1px; line-height: 1.1; color: #ffe066; background: #1a1a4e; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; min-height: var(--tap, 48px); min-width: var(--tap, 48px); padding: 4px 8px; box-sizing: border-box; text-align: center; touch-action: manipulation; }
.hbr-btn b { color: #fff; margin-right: 4px; }
.hbr-btn:hover, .hbr-btn:focus-visible { background: #ffe066; color: #14141f; outline: none; } .hbr-btn:hover b, .hbr-btn:focus-visible b { color: #14141f; }
.hbr-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hbr-btn.locked { color: #9ab; border-color: #789; } .hbr-btn.hot { color: #7fe; border-color: #7fe; }
.hbr-back { background: #000; }
.hbr-tipbar { margin: 6px 0 0; width: 100%; min-height: 1.3em; font-size: 16px; color: #7fe; text-align: center; line-height: 1.2; overflow: hidden; max-height: 2.5em; }
.hbr-soon { opacity: .8; cursor: default; }
.hbr-foot { margin: 6px 0 0; width: 100%; font-size: 18px; color: #e8f6fa; text-align: center; line-height: 1.25; max-height: 2.6em; overflow: hidden; }
.hbr-msg { color: #ffe260; }
@media (max-width: 700px) { #carplay .hbr-panel h3 { font-size: 22px; } .hbr-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .hbr-btn { font-size: 15px; padding: 2px 4px; } #carplay .hbr-say { font-size: 14px; } .hbr-panel { inset: 1%; padding: 4px 6px; gap: 2px; } .hbr-foot { font-size: 15px; } }
@media (max-height: 500px) { .hbr-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); } #carplay .hbr-panel h3 { font-size: 18px; } #carplay .hbr-say { font-size: 13px; margin: 0; } }