/* Y2K look: chunky pixel-font UI, hard borders, CRT scanlines over the pixelated canvas */
html, body { height: 100%; overflow: hidden; }
body { background: #14141f; color: #fff; font-family: "Courier New", monospace; margin: 0; text-align: center; }
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }   /* the 1024x768 frame is scaled by transform, which does not shrink its layout box: the stage clips it so a phone's layout viewport stays the screen width (BUG-0042) */
#racer { position: absolute; left: 50%; top: 8px; transform-origin: 0 0; overflow: hidden; width: 1024px; height: 768px; margin: 0; border: 6px solid #000; box-sizing: content-box; background: #000; }
#canvas { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; image-rendering: pixelated; }
#hud { position: absolute; left: 0; top: 0; width: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hud { background: #000; border: 4px solid #fff; padding: 4px 12px; font-size: 26px; font-weight: bold; letter-spacing: 2px; }
#controls { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 12px; box-sizing: border-box; display: flex; justify-content: space-between; gap: 36px; pointer-events: none; z-index: 4; font-size: 26px; font-weight: bold; letter-spacing: 2px; text-shadow: 3px 3px #000; transition: opacity 1.2s ease-out 2.5s; }
#controls b { color: #ffe260; }
#controls.gone { opacity: 0; }
#hint { position: absolute; left: 0; right: 0; bottom: 18px; font-size: 28px; font-weight: bold; text-shadow: 3px 3px #000; }
#tycoon { position: absolute; inset: 0; background: #1a1a4e; border: 8px double #ffd700; box-sizing: border-box; padding-top: 70px; z-index: 2; }
#paused { position: absolute; inset: 0; background: rgba(8,8,32,0.62); z-index: 4; padding-top: 200px; box-sizing: border-box; } #paused h1 { font-size: 96px; letter-spacing: 10px; color: #ffe260; text-shadow: 6px 6px #000; margin: 0; } #paused p { font-size: 30px; animation: blink 1s steps(2) infinite; } #paused[hidden] { display: none; } .pausebanner { color: #ffe260; font-size: 34px; text-shadow: 3px 3px #000; }
#tycoon[hidden], #gameover[hidden], #nameentry[hidden], #tyrest[hidden], #title[hidden] { display: none; }
#tycoon h1 { font-size: 64px; letter-spacing: 6px; color: #ffd700; text-shadow: 5px 5px #000; margin: 0 0 8px; }
#tycoon table { margin: 40px auto; font-size: 44px; border: 6px solid #fff; background: #000; padding: 20px 40px; }
#tycoon th { text-align: right; padding-right: 30px; color: #7fe; }
#tycoon td { text-align: left; font-weight: bold; }
#tycoon .press { font-size: 28px; animation: pulse 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes pulse { 0%, 49% { text-shadow: 3px 3px #000; } 50%, 100% { text-shadow: 3px 3px #000, 0 0 12px #ffe260, 0 0 3px #ffe260; } }   /* CRUISE-0180: the PRESS line keeps a blink cue as a gold glow, but its text never dims (the old opacity 0.2 floor read p98 129; the dimmest phase must stay within one Weber JND of the brightest text) */
/* CRUISE-0226 (BUG-0072): ONE CRT scanline overlay over the whole 1024x768 canvas, so the stripe contrast, period and phase are identical in the top and the bottom half
   (the old build split it at row 384: alpha .08 over the sky, .28 over the water, a 3.5x contrast jump the eye reads as "different in the bottom half"). The single alpha is the geometric mean of the two. */
#scan { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 5;
        background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px); }
#keys-removed { position: fixed; left: 0; right: 0; bottom: 0; height: 24px; line-height: 24px; margin: 0; padding: 0 8px; font-size: 14px; color: #9ab; background: #14141f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; z-index: 1; }

#gameover { position: absolute; inset: 0; background: rgba(40,0,20,0.85); border: 8px double #ff6060; box-sizing: border-box; padding-top: 110px; z-index: 3; }
#gameover h1 { font-size: 88px; letter-spacing: 8px; color: #ff6060; text-shadow: 6px 6px #000; margin: 0 0 8px; }
#gameover table { margin: 30px auto; font-size: 44px; border: 6px solid #fff; background: #000; padding: 20px 40px; }
#gameover th { text-align: right; padding-right: 30px; color: #7fe; } #gameover td { text-align: left; font-weight: bold; }
#gameover .press { font-size: 32px; animation: pulse 1s steps(2) infinite; }
#popups { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.pop { position: absolute; top: 300px; font-size: 34px; font-weight: bold; color: #ffe260; text-shadow: 3px 3px #000; animation: rise 1.1s steps(8) forwards; white-space: nowrap; }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120px); opacity: 0; } }
#flash { position: absolute; inset: 0; pointer-events: none; z-index: 4; border: 0 solid #fff; } #flash.on { border: 14px solid #ffe260; }

#tycoon h2 { font-size: 40px; color: #7fe; margin: 10px 0 0; text-shadow: 3px 3px #000; }
#nameentry p { font-size: 30px; } #nameinput { font: bold 36px "Courier New", monospace; width: 640px; background: #000; color: #ffe260; border: 6px solid #fff; padding: 10px 16px; text-align: center; }
#nameerr { color: #ff6060; min-height: 36px; } .co { max-width: 420px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.hud.meters { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; font-size: 16px; }
.m { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bar { display: inline-block; width: 130px; height: 14px; border: 3px solid #fff; background: #000; }
.bar u { display: block; height: 100%; width: 0; background: #e8f6fa; text-decoration: none; }
#momfill { background: #6ed6e8; } #shipfill { background: #ffe260; } #speedfill { background: #7fe84a; } #speedfill.low { background: #ff6060; }
#title { position: absolute; inset: 0; background: rgba(20,20,40,0.55); z-index: 3; padding-top: 124px; box-sizing: border-box; }   /* text sits between the HUD boxes and the ship/surfer: measured by play_surf_to_boat.py */
#title h1 { font-size: 80px; line-height: 80px; letter-spacing: 8px; color: #ffe260; text-shadow: 6px 6px #000; margin: 0; }
#title .sub { font-size: 28px; line-height: 32px; text-shadow: 3px 3px #000; margin: 8px 0 0; } #title .press { font-size: 30px; line-height: 34px; margin: 8px 0 0; animation: pulse 1s steps(2) infinite; }
#title .tm { right: auto; left: 14px; max-width: 330px; text-align: left; background: rgba(0,0,0,0.6); padding: 4px 8px; }   /* bottom-left, clear of the surfer and board in the centre */
#title .vmnote { position: absolute; right: 14px; bottom: 14px; max-width: 420px; margin: 0; padding: 6px 10px; background: #ffe260; color: #222; font-size: 20px; line-height: 24px; text-align: left; transform: rotate(-1.5deg); box-shadow: 3px 3px #000; }
#title .vmnote[hidden] { display: none; }
.tm { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 18px; color: #cde; margin: 0; }
#marker { position: absolute; left: 0; right: 0; top: 215px; pointer-events: none; z-index: 4; font-size: 40px; font-weight: bold; color: #ff9a60; text-shadow: 4px 4px #000; letter-spacing: 3px; }
#marker:not(.on) { display: none; }
#caught.tick { background: #ffe260; color: #000; padding: 0 6px; }
#gameover .bigcash { font-size: 140px; line-height: 150px; font-weight: bold; color: #ffe260; text-shadow: 8px 8px #000; margin: 50px 0 10px; } #gameover .bankline { font-size: 26px; color: #7fe; margin: 0 0 40px; } #gameover .bankline #o_why { font-size: 20px; color: #cde; }
.pop.bank { color: #7fe; }

/* ---- Cruise Tycoon loop (tycoon.js) ---- */
#typlay { margin: 0 24px; } #typlay[hidden] { display: none; }
#typlay h2 { font-size: 34px; color: #7fe; margin: 0 0 6px; text-shadow: 3px 3px #000; } #typlay h2.bad { font-size: 64px; color: #ff6060; }
#typlay .info { font-size: 20px; margin: 4px 0 8px; } #typlay .msg { font-size: 22px; color: #ffe260; min-height: 28px; margin: 6px 0; } #typlay .press { font-size: 26px; animation: pulse 1s steps(2) infinite; }
#typlay .menu { text-align: left; display: inline-block; font-size: 24px; } #typlay .menu p { margin: 4px 0; } #typlay b { color: #ffe260; }
#typlay .cards { display: flex; justify-content: center; gap: 16px; } #typlay .cards.one { margin: 8px 0; }
.card { position: relative; width: 290px; background: #000; border: 4px solid #fff; padding: 8px 10px; text-align: left; font-size: 16px; } .card.sel { border-color: #ffe260; background: #1b1b00; }
.card h3 { font-size: 22px; margin: 4px 0 2px; } .card .slot { float: right; width: 58px; height: 58px; border: 3px solid #9ab; background: #26264f; color: #cfe; font-size: 26px; font-weight: bold; letter-spacing: 1px; text-align: center; line-height: 58px; margin-left: 8px; }   /* a monogram frame until portrait art lands; the slot id lives in data-slot */
.card .role { color: #7fe; margin: 0 0 4px; } .card .blurb { margin: 4px 0; } .card .extra { color: #ffe260; font-weight: bold; margin: 4px 0 0; clear: both; } .ckey { position: absolute; left: -10px; top: -14px; background: #ffe260; color: #000 !important; padding: 0 8px; font-size: 24px; }
#typlay .ledger { margin: 8px auto; font-size: 26px; border: 5px solid #fff; background: #000; padding: 8px 24px; } #typlay .ledger th { text-align: right; padding-right: 24px; color: #7fe; } #typlay .ledger td { text-align: left; font-weight: bold; }

/* ---- Career ladder (career.js): placeholder tiles and labelled art slots ---- */
#tycoon.career > h1, #tycoon.career > p:not(.tm) { display: none; } #tycoon.career { padding-top: 14px; }
#carplay { margin: 0 24px; } #carplay[hidden] { display: none; }
#carplay h2 { font-size: 34px; color: #7fe; margin: 0 0 4px; text-shadow: 3px 3px #000; } #carplay .info { font-size: 19px; margin: 4px 0 6px; } #carplay .msg { font-size: 22px; color: #ffe260; min-height: 28px; margin: 4px 0; }
#carplay .press { font-size: 26px; animation: pulse 1s steps(2) infinite; } #carplay b { color: #ffe260; } #carplay .speech { font-size: 22px; max-width: 760px; margin: 10px auto; color: #e8f6fa; }
#carplay .menu { text-align: left; font-size: 20px; } #carplay .menu p { margin: 3px 0; } #carplay .menu.small { font-size: 16px; } #carplay[data-stage=hub] .menu p { margin: 2px 0; }   /* the job board grew to 14 lines and overflowed its frame by 3 px at 1024x768 (play_fit job-board failures, CRUISE-0429) */
#carplay .menu .sel { background: #1b1b00; outline: 2px solid #ffe260; } #carplay .locked, #carplay .soon { color: #8fa3b5; } #carplay .hot { color: #7fe; }
#carplay .split { display: flex; justify-content: center; gap: 24px; align-items: flex-start; } #carplay .cards { display: flex; justify-content: center; gap: 16px; } #carplay .cards.one { margin: 6px 0; }
#carplay .ledger { margin: 8px auto; font-size: 24px; border: 5px solid #fff; background: #000; padding: 8px 24px; } #carplay .ledger th { text-align: right; padding-right: 24px; color: #7fe; } #carplay .ledger td { text-align: left; font-weight: bold; }
.deck .grid { display: grid; grid-template-columns: repeat(6, 56px); grid-template-rows: repeat(4, 56px); gap: 2px; background: #123; border: 4px solid #fff; padding: 2px; } .deck .info { margin: 0 0 4px; }
.gc { background: #0a2a40; } .gc.used { background: #0a2a40; } .gc.ghost { background: #2a6a2a; } .gc.bad { background: #7a2020; }
.gb { background: #c89030; color: #000; font-size: 12px; font-weight: bold; display: flex; flex-direction: column; justify-content: center; border: 2px solid #ffe260; z-index: 1; } .gb small { font-size: 8px; font-weight: normal; }
.beats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 720px; margin: 8px auto; } .beat { width: 78px; border: 3px solid #fff; background: #000; font-size: 26px; font-weight: bold; padding: 4px 0; } .beat small { display: block; font-size: 16px; color: #9ab; }
.beat.next { border-color: #ffe260; color: #ffe260; } .beat.great { background: #1a5a1a; } .beat.good { background: #4a5a1a; } .beat.miss { background: #5a1a1a; }
.sweep { width: 420px; height: 18px; border: 3px solid #fff; background: #000; margin: 6px auto; position: relative; } .sweep u { display: block; height: 100%; background: #6ed6e8; text-decoration: none; }
.sweepbar { width: 600px; height: 30px; border: 4px solid #fff; background: #000; margin: 12px auto; position: relative; } .sweepbar .zone { position: absolute; top: 0; bottom: 0; background: #2a7a2a; } .sweepbar u { position: absolute; top: -6px; width: 6px; height: 36px; background: #ffe260; text-decoration: none; }

/* ---- pixel type (pxfont.js): every game string is a 5x7 bitmap-font word; the plain text stays in a visually hidden span for readers and drivers ---- */
body { -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
.pxw { --m: 2px; --h: 14px; display: inline-block; overflow: hidden; vertical-align: baseline; white-space: nowrap; box-sizing: content-box; height: var(--h); padding: var(--m) calc(2*var(--m)) calc(2*var(--m)) var(--m); margin: calc(-1*var(--m)) calc(-2*var(--m)) calc(-2*var(--m)) calc(-1*var(--m)); font-size: 0; line-height: 0; }   /* FEAT-0014/15: a menu word is a box as tall as the 5x7 word was (7k) and never wider; its pixels are the fine face drawn by ::before (m px per font pixel); the plain text stays in .pxt */
.pxw::before { content: attr(data-w); display: block; height: var(--h); position: relative; top: calc(var(--h)/2 - 6.104*var(--m)); font-family: "DotGothic16 Sub", monospace; font-size: calc(14*var(--m)); line-height: var(--h); font-weight: normal; font-style: normal; letter-spacing: 0; font-synthesis: none; text-shadow: calc(-1*var(--m)) calc(-1*var(--m)) 0 #040305, 0 calc(-1*var(--m)) 0 #040305, var(--m) calc(-1*var(--m)) 0 #040305, calc(-1*var(--m)) 0 0 #040305, var(--m) 0 0 #040305, calc(-1*var(--m)) var(--m) 0 #040305, 0 var(--m) 0 #040305, var(--m) var(--m) 0 #040305, calc(2*var(--m)) 0 0 #1a1635, calc(2*var(--m)) var(--m) 0 #1a1635, calc(2*var(--m)) calc(2*var(--m)) 0 #1a1635, 0 calc(2*var(--m)) 0 #1a1635, var(--m) calc(2*var(--m)) 0 #1a1635; }   /* the baseline sits on the bottom edge of the box like the bitmap word's; the studio text pass is kept: 1 font-pixel ink outline, navy shadow (+1,+1); the colour is inherited */
.pxt { font-size: 0; line-height: 0; color: transparent; text-shadow: none; }   /* in flow (not absolute) so innerText keeps the words on one line, in their own case */
.pxsp { font-family: "Courier New", monospace; line-height: 0; white-space: pre; }   /* CRUISE-0595: a whitespace-only flex item (a word gap inside #smenu li) collapses to 0 px unless the space is preserved */
.gb small { display: none; }
/* the company-name input is typed text: the embedded OFL pixel font (DotGothic16, ASCII subset, see DotGothic16-OFL.txt), 32 px = 2 x its native 16 px grid */
@font-face { font-family: "DotGothic16 Sub"; src: url(data:font/woff2;base64,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) format("woff2"); font-display: block; }
#nameinput { font-family: "DotGothic16 Sub", monospace; font-weight: normal; font-size: 32px; -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }

/* ---- difficulty line on the title, surf hint, loading screen ---- */
#title .levels { font-size: 28px; margin: 8px 0 0; color: #cde; } #title .levels b { color: #ffe260; }
#surfhint { position: absolute; right: 14px; bottom: 64px; font-size: 20px; color: #faf7e4; background: #14141f; border: 2px solid #ffe066; padding: 2px 8px; box-shadow: 3px 3px 0 #000; z-index: 4; pointer-events: none; }   /* readable over the waves: bright text on a solid chip (GX replay 49040ad) */ #surfhint[hidden] { display: none; }
#loading { position: absolute; inset: 0; background: #14141f; z-index: 9; padding-top: 250px; box-sizing: border-box; } #loading[hidden] { display: none; }
#loading h1 { font-size: 80px; color: #ffe260; margin: 0; } #loading p { font-size: 30px; margin: 22px 0 0; animation: blink 1s steps(2) infinite; }
.lbar { width: 528px; height: 38px; border: 6px solid #fff; background: #000; margin: 26px auto; padding: 4px; box-sizing: content-box; } .lbar u { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ffe260 0, #ffe260 20px, #000 20px, #000 24px); text-decoration: none; }

/* ---- mouse hover (hover.js, FEAT-0013): the keyboard focus style, applied by :hover; only when the mouse is the input (html[data-hover]); outline and colours only, so nothing moves; no transition: instant ---- */
html[data-hover] #racer .menu p:has(> b:first-child):hover { background: #1b1b00; outline: 2px solid #ffe260; cursor: pointer; }
html[data-hover] #racer .card:has(> .ckey):hover, html[data-hover] #racer .card[data-key]:not([data-key="-"]):hover { border-color: #ffe260; background: #1b1b00; cursor: pointer; }   /* CRUISE-0276: a port card is a button too */
html[data-hover] #racer [data-keydown] { cursor: pointer; }   /* CRUISE-0285: the comedy sweep bar and its prompt take the press */
html[data-hover] #title .press:hover, html[data-hover] #gameover .press:hover, html[data-hover] #tyrest .press:hover, html[data-hover] #typlay .press:hover, html[data-hover] #carplay:not([data-stage=shift]) .press:hover, html[data-hover] #pmenu li:hover { background: #1b1b00; outline: 2px solid #ffe260; cursor: pointer; animation: none; opacity: 1; }
html[data-hover] #paused:hover { cursor: pointer; }

/* CRUISE-0177: restart (keeps the saved career) and start over (erases it) are two separate, labelled lines; both ask first */
#pmenu { list-style: none; margin: 34px 0 0; padding: 0; } #pmenu li { font-size: 34px; color: #cde; margin: 10px 0; padding: 4px 0; letter-spacing: 3px; } #pmenu li.erase { font-size: 22px; letter-spacing: 1px; color: #ffd9d9; } #pmenu li.sel { color: #ffe260; background: #1b1b00; outline: 2px solid #ffe260; text-shadow: 3px 3px #000; } #pmenu li.sel.erase { color: #ffb0b0; outline-color: #ff6060; background: #2a0808; } #pmenu li.sel::before { content: '> '; } #pmenu li.sel::after { content: ' <'; }
#paused[hidden], #confirm[hidden] { display: none; }
/* CRUISE-0198 / 0199: surf missions. #mhud = the objective chip (top centre, under the HUD boxes); #mresult = the gentle result card (never a game over). Ship meters are hidden: no ship in a mission. */
#mhud { position: absolute; top: 98px; left: 50%; transform: translateX(-50%); font-size: 22px; color: #faf7e4; background: #14141f; border: 2px solid #ffe066; padding: 2px 12px; box-shadow: 3px 3px 0 #000; z-index: 4; pointer-events: none; white-space: nowrap; }
#mhud[hidden], #mresult[hidden], #rbar[hidden] { display: none; }
.inmission .meters .m:nth-child(2), .inmission .meters .m:nth-child(3) { display: none; }
#mresult { position: absolute; inset: 0; background: rgba(8,24,40,0.85); border: 8px double #7fe; box-sizing: border-box; padding-top: 150px; z-index: 3; }
#mresult h1 { font-size: 96px; letter-spacing: 8px; color: #7fe; text-shadow: 6px 6px #000; margin: 0 0 8px; } #mresult p { font-size: 30px; margin: 10px 0; text-shadow: 3px 3px #000; } #mresult #mr_name { color: #ffe260; font-size: 38px; } #mresult #mr_reward { font-size: 44px; color: #ffe260; margin: 26px 0; }
#mresult .press { font-size: 26px; animation: pulse 1s steps(2) infinite; }
html[data-hover] #mresult .press:hover { background: #1b1b00; outline: 2px solid #ffe260; cursor: pointer; animation: none; opacity: 1; }
#confirm { position: absolute; inset: 0; background: rgba(8,8,32,0.88); z-index: 6; padding-top: 250px; box-sizing: border-box; } #confirm h1 { font-size: 72px; letter-spacing: 6px; color: #ffe260; text-shadow: 6px 6px #000; margin: 0 0 24px; } #confirm.erase h1 { color: #ff6060; } #confirm p { font-size: 26px; color: #cde; margin: 10px 60px; } #confirm .cf_keys { font-size: 36px; color: #fff; margin-top: 40px; }
html[data-small] #pmenu li { font-size: 46px; } html[data-small] #pmenu li.erase { font-size: 30px; } html[data-small] #confirm p { font-size: 38px; } html[data-small] #confirm .cf_keys { font-size: 48px; }

/* Ralph's ASCII face (CRUISE-0353): monospace, 7 lines x 13 cols, fits 390px wide */
.ralphface { font-family: monospace; font-size: 14px; line-height: 1.05; margin: 6px auto; text-align: center; white-space: pre; color: #9fe; }
#ralphsay { width: 100%; box-sizing: border-box; font: inherit; }

/* Ralph's shared say component (CRUISE-0353): PLAY button is a 44px touch target; the spoken word is highlighted */
.rsaybtn { min-width: 44px; min-height: 44px; font: inherit; cursor: pointer; margin-right: 6px; }
.rsay .rsaytxt span.on { background: #9fe; color: #000; text-decoration: underline; text-underline-offset: 3px; }   /* underline, not colour only */
.rsay-dev { cursor: help; }
/* CRUISE-0202: the surf race. #rbar = the gap bar under the objective chip (position only, no score): you (gold) and the three rivals (cyan) on the out-and-back, the marker at the middle. #mresult.race = the judging card. */
#rbar { position: absolute; top: 134px; left: 50%; width: 320px; margin-left: -160px; height: 10px; background: #14141f; border: 2px solid #ffe066; z-index: 4; pointer-events: none; }
#rbar i { position: absolute; top: -5px; width: 6px; height: 16px; margin-left: -3px; background: #5fd8ff; border: 1px solid #000; } #rbar i#rb_me { background: #ffe260; top: -7px; height: 20px; z-index: 1; }
#rbar b { position: absolute; left: 50%; top: -2px; width: 2px; height: 10px; background: #faf7e4; }
#mresult.race { padding-top: 58px; } #mresult.race h1 { font-size: 64px; letter-spacing: 6px; margin: 0 0 2px; } #mresult.race p { font-size: 22px; margin: 4px 0; } #mresult.race #mr_name { font-size: 28px; } #mresult.race #mr_reward { font-size: 28px; margin: 10px 0; } #mresult.race .press { font-size: 22px; }
#mr_judge { display: none; } #mresult.race #mr_judge { display: block; width: 640px; margin: 6px auto; font-size: 21px; text-align: left; text-shadow: 2px 2px #000; }
#mresult.race #mr_judge div { display: flex; justify-content: space-between; padding: 1px 0; } #mresult.race #mr_judge b { color: #ffe260; font-weight: normal; } #mresult.race #mr_judge hr { border: 0; border-top: 2px dashed #7fe; margin: 6px 0; }
/* CRUISE-0175: the title screen shows no HUD (an empty company box and idle meters mean nothing before play); the HUD returns the moment the title is dismissed */
#stage:has(#title:not([hidden])) #hud { display: none; }

/* CRUISE-0526: visible close controls (X on the pause menu, NO on confirms, CONTINUE on the mission result). Size is in frame px: --tap is set by fit() so the SCREEN target is >= 48 px. */
.ccx { font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 34px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 4px solid #ffe066; box-shadow: 4px 4px 0 #000; cursor: pointer; min-width: var(--tap, 48px); min-height: var(--tap, 48px); padding: 0 14px; box-sizing: border-box; z-index: 2; }
.ccx:hover, .ccx:focus-visible { background: #ffe066; color: #14141f; outline: none; }
#paused > .ccx { position: absolute; top: 14px; right: 14px; }
#confirm > .ccbtn, #mresult > .ccbtn { position: relative; display: block; margin: 18px auto 0; }

/* CRUISE-0526 packet B: visible BACK / HANG UP / DECLINE / CONTINUE on the career sub-screens and the tycoon views (they fire the same key the view already answers to) */
.cbkbar { display: flex; gap: 12px; justify-content: flex-start; margin: 0 0 6px; }
.cbk { font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 24px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; min-width: 48px; min-height: 48px; padding: 0 16px; box-sizing: border-box; }
.cbk:hover, .cbk:focus-visible { background: #ffe066; color: #14141f; outline: none; }

/* CRUISE-0527: the shift PAUSE / KEEP PLAYING / FORFEIT bar sits at the top of the career overlay; long labels wrap on a phone, targets stay >= 44 px */
.cbkbar { flex-wrap: wrap; }
.cbkbar .cbk { white-space: nowrap; }

/* CRUISE-0531 (D4/D7/D8): close-control polish.
   D4: the pxw text-shadow smeared the dark label on the yellow hover fill; labels are crisp (no shadow) and the pair is #14141f on #ffe066 (contrast ~13:1), the focus ring is a visible 3 px white outline.
   D7: the offer's ACCEPT / COUNTER / DECLINE strip sits directly under the offer text, centred.
   D8: the pause X sits bottom-right (the HUD gauges own the top-right); CONTINUE is >= 120 screen px wide; the two result hints are two lines. */
.cbk, .ccx { text-shadow: none; }
.cbk:hover, .cbk:focus-visible, .ccx:hover, .ccx:focus-visible { background: #ffe066; color: #14141f; text-shadow: none; }
.cbk:focus-visible, .ccx:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cbkbar.offerbar { justify-content: center; margin: 8px 0 6px; }
#paused > .ccx { top: auto; bottom: 14px; right: 14px; }
#mresult > .ccbtn { min-width: calc(var(--tap, 48px) * 2.5); white-space: nowrap; }
#mresult .press .mrk { display: block; }

/* CRUISE-0534: the .cbk / .cbkbar buttons (career, tycoon, captain's offer) are sized in SCREEN px: --tap (set by game.js tapSync from the scale the frame is actually drawn at) replaces the fixed 48 frame px, so a scaled stage (0.376 on a 390 px phone = 18 px) never shrinks the tap target below 44 px. */
.cbk { min-height: var(--tap, 48px); min-width: var(--tap, 48px); }

/* CRUISE-0515: the SWAMP TOUR job-board entry. .gigbtn wears the .cbk look (it is not .cbk: the job-board root must keep "no BACK control"), sized in screen px by --tap (CRUISE-0534). */
.gig1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gigbtn { font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 20px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; min-height: var(--tap, 48px); min-width: var(--tap, 48px); padding: 0 12px; box-sizing: border-box; }
.gigbtn:hover, .gigbtn:focus-visible { background: #ffe066; color: #14141f; outline: none; }

/* CRUISE-0531 D6 (#tycoon half, phone layout only = #racer.ptext, so desktop is unchanged): detoil, do not scroll.
   (a) the BACK / HANG UP bar is pinned to the top of the ONE scroll region (#tycoon) so it never scrolls away; the offer strip keeps its place under the offer text.
   (b) trailing rows of the long lists (job board, build, plan, ports) collapse behind a visible MORE button (js: career.js CruiseMore); .mhide is the collapsed state, MORE/LESS toggles it.
   Hidden rows still answer to their keys; the same information is one tap away. The MORE button is >= 44 px and wears the .cbk look (it is not .cbk: the BACK/CONTINUE sweeps count .cbk only). */
#racer.ptext .cbkbar:not(.offerbar) { position: sticky; top: 0; z-index: 4; background: #1a1a4e; padding: 2px 0; }
#racer.ptext .mhide { display: none !important; }
.morebtn { display: none; }
#racer.ptext .morebtn { display: block; width: 100%; min-height: 48px; margin: 4px 0 6px; box-sizing: border-box; font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 22px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; text-shadow: none; }
#racer.ptext .morebtn:hover, #racer.ptext .morebtn:focus-visible { background: #ffe066; color: #14141f; outline: none; }
#racer.ptext .morebtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* CRUISE-0535 d7 (career tail): the swamp tour is the FIRST GIG on the job board. Text-safe marker (FIRST GIG tag + a left rule), not colour only; one-line row on desktop, 48 px tap on phones. */
.gig1 { border-left: 4px solid #ffe066; padding-left: 6px; }
.gigtag { font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #14141f; background: #ffe066; padding: 0 5px; white-space: nowrap; }
.gigtxt { flex: 1 1 auto; min-width: 0; }
@media (min-width: 700px) {
  .gig1 { flex-wrap: nowrap; }
  .gigtxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gigbtn { min-height: 0; min-width: 0; font-size: 13px; letter-spacing: 1px; border-width: 2px; padding: 0 8px; line-height: 15px; box-shadow: 2px 2px 0 #000; flex: 0 0 auto; }
}

/* CRUISE-0536: the narrow NON-touch window (desktop browser resized to <= 700 px wide) gets the same MORE collapse as the phone layout; career.js marks the career panel .nmore. The button is --tap (screen px) high like the other close controls. Desktop >= 700 px never gets the class. */
#carplay.nmore .mhide { display: none !important; }
#carplay.nmore .morebtn { display: block; width: 100%; min-height: var(--tap, 48px); margin: 4px 0 6px; box-sizing: border-box; font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 22px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; text-shadow: none; }
#carplay.nmore .morebtn:hover, #carplay.nmore .morebtn:focus-visible { background: #ffe066; color: #14141f; outline: none; }
#carplay.nmore .morebtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* CRUISE-0536: like the phone layout (touch.js hides the captain card on the job board), the narrow window drops the portrait card so the protected rows (V, 1-6, W, B) fit the frame. */
#carplay.nmore[data-stage=hub] .cards.one { display: none; }

/* CRUISE-0539: the job board never clips its menu. Root cause: the FIRST GIG row (.gig1, nowrap, CRUISE-0515/0535) is wider than the room beside the deck grid; the .menu flex item sized to its max-content (678 px) and, with no min-width:0, refused to shrink, so the centred .split overflowed EQUALLY on both sides and the left edge (row numbers, FIRST GIG tag) was cut off. Fix: the menu column may shrink (min-width:0), the deck column may not (flex:none), the .split is bounded by its container, and the gig description truncates with an ellipsis instead of widening the column (full text kept in title/aria-label by JS). */
#carplay { box-sizing: border-box; max-width: 100%; }
#carplay .split { max-width: 100%; min-width: 0; box-sizing: border-box; }
#carplay .split > .menu { flex: 1 1 0; min-width: 0; }
#carplay .split > .deck { flex: 0 0 auto; }
#carplay .gig1, #carplay .gig1 .gigtxt { min-width: 0; max-width: 100%; }
@media (min-width: 700px) { #carplay .gig1 .gigtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* CRUISE-0539: the compact one-line desktop row (min-width:700px block above) must not reach a touch device in landscape (844x390 phone): there the entry wraps and GO keeps its --tap (>= 44 screen px) size. */
html[data-touch] #carplay .gig1 { flex-wrap: wrap; }
html[data-touch] #carplay .gig1 .gigtxt { white-space: normal; overflow: visible; text-overflow: clip; }
html[data-touch] #carplay .gigbtn { min-height: var(--tap, 48px); min-width: var(--tap, 48px); font-size: 20px; letter-spacing: 2px; border-width: 3px; padding: 0 12px; line-height: normal; box-shadow: 3px 3px 0 #000; }
/* CRUISE-0539 hardening (2026-10-17, correction): robust against any DOM shape. The live failure was a STALE game.css (238 rules = pre-fix) in the founder's window, not a selector miss; these rules make the fixed layout independent of one flex child and keep overflow from ever spilling LEFT. */
#carplay .split { justify-content: safe center; }
#carplay .split > * { min-width: 0; }
#carplay .split > .menu { flex: 1 1 0; min-width: 0; max-width: 100%; }
#carplay .split > .deck { flex: 0 0 auto; max-width: 100%; }
#carplay .menu p { min-width: 0; max-width: 100%; }
@media (min-width: 700px) { html:not([data-touch]) #carplay[data-stage=hub] .menu p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not([data-touch]) #carplay[data-stage=hub] .menu p.locked { overflow: visible; text-overflow: clip; white-space: normal; } }   /* the one-line ellipsis is for the job board's long TAILS only (b6943c0); every other menu (screening answers, build rows, jokes, rooms) wraps, and a locked row wraps so its state is never cut (2026-10-20 playtest) */
/* CRUISE-0539 follow-up: (a) the FIRST GIG tag is dark ink on gold (#14141f on #ffe066, contrast ~13:1); the pixel-font outline shadow smeared it into a black blob, so the tag draws no shadow. (b) Atomic pixel words never get text-overflow's ellipsis, so a truncated description draws its own "..." (pixel font) in a reserved right gutter, only while the row is scrollable (scroll-state query). */
.gigtag .pxw::before { text-shadow: none; } #carplay .gigtag { display: inline-block; vertical-align: middle; line-height: 14px; padding: 2px 3px 0; }
@media (min-width: 700px) { html:not([data-touch]) #carplay .gig1 { position: relative; }
  html:not([data-touch]) #carplay .gigbtn { width: 64px; box-sizing: border-box; padding: 0; }
  /* play_board_clip: the shared .gbtn restyle (buttons.css: min-height --tap 56, line-height tap-14, !important) made the mouse-board GO 56 px tall, so the FIRST GIG row was 60 px beside 23 px rows. A pointer row keeps the compact GO (rows stay one line); touch keeps the big --tap target. */
  html:not([data-touch]) #carplay .gigbtn.gbtn { min-height: 42px !important; min-width: 64px !important; line-height: 36px !important; padding: 0 !important; }
  /* CRUISE-0654: a mouse GO is a real click target (>= 36 screen px tall at the smallest desktop scale); the FIRST GIG row grows to hold it instead of squeezing GO to 14 px. */
  html:not([data-touch]) #carplay .gig1 { align-items: center; min-height: 44px; }
  html:not([data-touch]) #carplay .gigtxt { container-type: scroll-state; margin-right: 16px; }
  @container scroll-state(scrollable: inline) { html:not([data-touch]) #carplay .gigtxt > .gigtag::after { content: "..."; position: absolute; right: 68px; top: 0; font-family: "DotGothic16 Sub", monospace; font-size: 20px; line-height: 20px; color: #ffe260; letter-spacing: 1px; } } }

/* CRUISE-0552 (BUG-0161): tycoon text never flows off the frame. Once the tycoon is past the welcome screen the big CRUISE TYCOON title and its subtitle are redundant chrome (the career overlay already hides them the same way), so the plan gets ~110 px back; any screen that is still taller than the frame scrolls inside #tycoon instead of being cut by #racer. */
#tycoon.typlaying > h1, #tycoon.typlaying > p:not(.tm) { display: none; } #tycoon.typlaying { padding-top: 14px; }
#tycoon { overflow-x: hidden; overflow-y: auto; }
.tymenu { font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; font-size: 24px; letter-spacing: 2px; color: #ffe066; background: #14141f; border: 3px solid #ffe066; box-shadow: 3px 3px 0 #000; cursor: pointer; min-height: var(--tap, 48px); min-width: var(--tap, 48px); padding: 0 16px; box-sizing: border-box; text-shadow: none; }
.tymenu:hover, .tymenu:focus-visible { background: #ffe066; color: #14141f; outline: none; }
.tymenu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* CRUISE-0511: voyage ticker and the review's causes (compact, wraps, never wider than the panel) */
#typlay .ticker, #typlay .causes { list-style: none; margin: 6px auto; padding: 4px 12px; max-width: 94%; font-size: 18px; line-height: 1.25; text-align: left; overflow-wrap: anywhere; }
#typlay .causes { border: 3px solid #7fe; background: #000; }
#typlay .causes li b { color: #7fe; }
@media (max-width: 480px) { #typlay .ticker, #typlay .causes { font-size: 14px; } }
/* CRUISE-0512: the failure warning line and the FINAL NOTICE recovery menu */
#typlay .warn { color: #fd5; font-weight: bold; margin: 6px auto; max-width: 94%; font-size: 20px; overflow-wrap: anywhere; }
@media (max-width: 480px) { #typlay .warn { font-size: 15px; } }

/* features/settings_menu.feature (CRUISE-0561): the Settings screen, same palette / pixel font as the pause menu; rows are real >=44px tap targets */
#settings { position: absolute; inset: 0; background: rgba(8,8,32,0.97); z-index: 6; padding-top: 200px; box-sizing: border-box; } #settings[hidden] { display: none; }
#settings h1 { font-size: 96px; letter-spacing: 10px; color: #ffe260; text-shadow: 6px 6px #000; margin: 0; }
#smenu { list-style: none; margin: 34px 0 0; padding: 0; } #smenu li { font-size: 30px; color: #cde; margin: 10px auto; padding: 4px 12px; letter-spacing: 3px; min-height: var(--tap, 48px); box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#smenu li.sel { color: #ffe260; background: #1b1b00; outline: 2px solid #ffe260; text-shadow: 3px 3px #000; } #smenu li.sel::before { content: '> '; } #smenu li.sel::after { content: ' <'; }
#settings > .ccx { position: absolute; top: auto; bottom: 14px; right: 14px; } html[data-touch] #settings > .ccx { display: none; }   /* CRUISE-0699: on touch the pad's BACK is the single way out */
html[data-small] #smenu li { font-size: 40px; }

#smenu li.mixrow { flex-wrap: wrap; font-size: 22px; } #smenu li.mixrow input { flex: 1 1 100%; width: 100%; max-width: 560px; height: 40px; accent-color: #ffe260; } #smenu li.mixrow.sel::before, #smenu li.mixrow.sel::after { content: ''; }
/* CRUISE-0603: Settings now has up to six lines (MUSIC, RALPH, SOUND, MIX slider, BACK): pack them so they fit the 1024x768 frame at any scale, phone included */
#settings { padding-top: 8px; } #settings h1 { font-size: 56px; line-height: 1.1; } #smenu { margin-top: 6px; } #smenu li { margin: 2px auto; } html[data-small] #smenu li { font-size: 34px; }
#smenu li.mixrow { flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px; } #smenu li.mixrow input { flex: 0 0 auto !important; width: 70% !important; height: 30px !important; }

/* CRUISE-0605 (features/pause_menu.feature): every pause-side action is a labelled button >= 44 px; the keyboard default (Enter) shows a focus ring; no key wording on screen */
#pmenu { margin-top: 8px; } #pmenu li { min-height: calc(var(--tap, 48px) * 0.92); box-sizing: border-box; width: max-content; max-width: 100%; margin: 3px auto; padding: 0 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#confirm .cf_btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 18px; max-width: 100%; box-sizing: border-box; padding: 0 12px; } #confirm .cf_btns > .ccbtn { margin: 0; min-width: calc(var(--tap, 48px) * 2.5); min-height: var(--tap, 48px); max-width: 100%; box-sizing: border-box; height: auto; white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }   /* long labels wrap onto two lines and the pair stacks on a narrow frame instead of overflowing it */
#confirm .cf_btns > .foc { outline: 4px solid #fff; outline-offset: 3px; background: #ffe066; color: #14141f; }
#mresult .mrk, #gameover #go_retry { min-height: var(--tap, 48px); } #gameover #go_retry { min-width: calc(var(--tap, 48px) * 2.5); }

/* CRUISE-0641: the key hints (#controls) wrap on a narrow window and the ENTER: PAUSE chip sits ABOVE them, never on top of SPEED / BAIL */
@media (max-width: 900px) { #controls { flex-wrap: wrap; gap: 6px 20px; } #surfhint { bottom: 120px; } #controls .alt { display: none; } }
#controls .alt { font-style: normal; }
#title .press { color: #fffbe0 !important; }   /* CRUISE-0641: with the bigger print the white subtitle outshines the gold prompt at phone size (p98 190 vs 246); a lighter gold keeps the prompt within the 10% JND */
#title .press { margin-top: 0; position: relative; top: 0; }   /* playtest 2026-10-20: the -12px lift put the start box over the DIFFICULTY line at every size (geometry_sweep title overlap rule) */   /* CRUISE-0641 D7: keep the prompt clear of the title ship sprite (ship top y=331) */
/* the print floor made the HUD meters 91 px tall; the SKILLS line on the job board touched them by 0.2 px (T2:missions L1 hudOverlap): clear them by a few px */
#carplay[data-stage=hub] h2 { margin-bottom: 8px; }
#carplay[data-stage=hub] .info, #carplay[data-stage=missions] .info { max-width: 590px; margin-right: auto; text-align: left; } @media (max-width: 700px) { #carplay[data-stage=hub] .split { margin-top: 40px; } #carplay[data-stage=hub] .info { margin: 2px 0 2px; } }   /* narrow windows: keep the board's header lines left of the right-hand meters (they are drawn on the frame at x >= 651) instead of under them; MORE folds the rows the extra wrapped line costs */
/* landscape print lane: the job board's rows flow in two columns in landscape so the bigger print (PxFont floor, fitted per panel) still fits without folding the protected rows */
@media (orientation: landscape) { #carplay[data-stage=hub] .menu { column-count: 2; column-gap: 18px; } #carplay[data-stage=hub] .menu > p { break-inside: avoid; } #carplay[data-stage=hub] .menu > .gig1, #carplay[data-stage=hub] .menu > .morebtn { column-span: all; } }
#carplay[data-stage=missions] .menu p { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }   /* the mission rows wrap instead of running past the frame at the bigger print */
/* play_gameover_exit: on a phone the 1024x768 frame is drawn at ~0.38, so the two --tap buttons (RETRY, BACK TO THE DOCK) cost ~190 frame px each and the card's title, cash and margins pushed BACK TO THE DOCK below the frame (clipped, unreachable). Compact the card's own spacing in frame px; the buttons keep their screen-px tap size. */
@media (max-width: 900px) { #gameover { padding-top: 20px; } #gameover h1 { font-size: 64px; margin: 0; } #gameover .bigcash { font-size: 90px; line-height: 96px; margin: 6px 0 2px; } #gameover .bankline { margin: 0 0 4px; } #gameover > .ccbtn { margin-top: 8px; } }
/* CRUISE-0108: ship design screen (tycoon, after the company has earned). Print 20 frame px and up; slots wrap, never scroll sideways. */
#typlay .dgrid { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 6px 0; } #typlay .dlab { font-size: 20px; color: #7fe; width: 100%; text-align: left; }
#typlay .dslot { flex: 1 1 110px; min-width: 100px; font-size: 20px; padding: 6px 4px; border: 3px solid #5a5ad0; background: #0a0a22; color: #fff; text-align: center; }
#typlay .dslot.dopen { color: #8fa3b5; border-style: dashed; } #typlay .dslot.dlock { border-color: #7fe; background: #14283a; } #typlay .dslot.dsel { outline: 4px solid #ffe260; outline-offset: 1px; }
#typlay .dbar { margin: 6px 0; } #typlay .ledger { font-size: 24px; }
/* CRUISE-0018 PUMP THE HOLD: text and board side by side when there is room, stacked on a phone */
#typlay .floodwrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 4px 0; } #typlay .floodtxt { flex: 1 1 280px; max-width: 460px; } #typlay #floodcv { flex: none; width: 248px; height: 248px; image-rendering: pixelated; border: 4px solid #fff; background: #0b1530; touch-action: manipulation; max-width: 100%; }
/* a phone on its side has no room for the intro line: the board, the counters and LEAVE IT stay on screen */
html[data-small=landscape] #typlay .floodtxt .fintro { display: none; } html[data-small=landscape] #typlay .floodwrap { margin: 0; gap: 8px; }
/* landscape phone: the text column and the board stay SIDE BY SIDE (nowrap) because the frame is only 373-640 px wide; stacking pushed the board and LEAVE IT below the viewport at 844x390 once 2aa4781 widened the side columns (CRUISE-0018). The board size is set by floodCell() in tycoon.js (inline, so no CSS size here). */
html[data-small=landscape] #typlay .floodtxt .fmore { display: none; } @media (max-width: 780px) { html[data-small=landscape] #typlay .floodtxt .fhint { display: none; } }   /* the long tails would wrap a 137-190 px text column taller than the frame */
@media (max-height: 700px) { html[data-small=portrait] #typlay .floodtxt .fintro, html[data-small=portrait] #typlay .floodtxt .fmore { display: none; } }   /* 360x640: the intro and the bill tail cost 122 px the frame does not have */
html[data-small=landscape] #typlay .floodwrap { flex-wrap: nowrap; } html[data-small=landscape] #typlay .floodtxt { flex: 1 1 0; min-width: 0; }

/* 2026-10-20 playtest (desktop 1280x720): the office/job board and the build list ran 68 / 32 frame px past the frame once locked rows wrap. The captain card on the board keeps its name and role (the blurb is flavour the board has no room for), and the build rows sit tight. */
#carplay[data-stage=hub] .card .blurb { display: none; }
#carplay[data-stage=build] .menu p { margin: 0; }
@media (min-width: 700px) { html:not([data-touch]) #carplay[data-stage=hub] .split { gap: 18px; } }   /* 1280x720: the FIRST GIG title (SWAMP TOUR: YOUR FIRST TOUR) and the two-column titles lost their last letters by 5-21 px; GO is 56 wide (spec floor), its gutter marker sits left of it, the split and column gaps give the room back */
@media (orientation: landscape) { #carplay[data-stage=hub] .menu { column-gap: 12px; } }
#carplay .beat, #racer.ptext #carplay .beat { width: auto; min-width: 70px; box-sizing: border-box; padding: 4px 8px; }   /* (touch.js pins .beat to 70 px on phones with a #racer.ptext selector, so the phone rule carries the same weight) */   /* PILLOWS and TOWELS (16 px caption) overflowed the fixed 78 px box on the housekeeping shift */
/* 2026-10-20 playtest: the voyage result ran ~200 px past a 1280x720 frame (WHY THIS REVIEW, the review card and the NEXT VOYAGE prompt below the fold). The card and the causes share a row, the ledger prints a size down. */
#typlay .resrow { display: flex; justify-content: center; align-items: flex-start; gap: 12px; flex-wrap: wrap; } #typlay .resrow .cards.one { margin: 4px 0; } #typlay .resrow .causes { flex: 1 1 300px; max-width: 640px; margin: 4px 0; }
#typlay[data-stage=result] .ledger { font-size: 20px; margin: 4px auto; padding: 4px 20px; } #typlay[data-stage=result] .ledger th { padding-right: 16px; }
#typlay[data-stage=result] .card .blurb { display: none; }   /* the review card keeps the cruiser's name, role and the review line; the flavour blurb is the first thing to go when the explanation needs the room */
html:not([data-touch]) #typlay[data-stage=result] .ledger th { white-space: nowrap; } html:not([data-touch]) #typlay[data-stage=result] .causes { font-size: 16px; }
html[data-touch] #typlay[data-stage=result] > .press { display: none; }   /* a phone has CONTINUE in the pinned top bar and on the pad; the third, at the foot of a screen that scrolls, was the 'two CONTINUE buttons' of the 2026-10-20 playtest */
/* scroll cue: a screen that scrolls says so (pinned to the foot of the scroll region, gone once the end is in view) */
#typlay .scrollcue { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 4px 8px; text-align: center; font-size: 18px; color: #14141f; background: #ffe260; border-top: 3px solid #fff; pointer-events: none; } #typlay .scrollcue[hidden] { display: none; }
/* geometry_sweep: on a landscape phone (844x390) the pad's CONTINUE wrapped its arrow icon under the word and the icon sat 4 px on it; the pad button says what it does, so the arrow is dropped there */
@media (max-width: 380px), (max-height: 500px) and (orientation: landscape) { #touchpad .gbtn[data-gbpad] > .pxi { display: none !important; } }   /* (also the 360x640 RIGHT / PLACE pad buttons, same wrap) */
@media (max-width: 380px) { #touchpad .gbtn[data-gbpad] { letter-spacing: 0 !important; padding: 4px 3px !important; } }   /* 360x640: six-letter pad captions (PILLOW) broke mid-word at 1 px tracking */
@media (min-width: 700px) { html:not([data-touch]) #carplay .gig1 { gap: 4px; padding-left: 4px; } }

/* CRUISE (playtest 2026-10-20, upright phone surf HUD): at the 16 px print floor the HUD row (company 320 + cash + meters in a 1024 frame drawn at 0.38) no longer fits, so in a mission the flex squeezed the company box (words spilled out of it), wrapped CASH $ onto three lines and the objective chip landed on SPEED. On an upright phone the company name leaves the surf HUD (it stays on the job board, pause and result screens), CASH stays on one line, and the objective chip and race bar sit BELOW the meters in the sky band, clear of the surfer and the waves. Desktop and landscape are untouched. */
html[data-small=portrait] #hud .hud.co { display: none; }
html[data-small=portrait] #hud .hud { white-space: nowrap; flex: 0 0 auto; }
html[data-small=portrait] #hud { justify-content: space-between; }
html[data-small=portrait] #mhud { top: 252px; }
html[data-small=portrait] #rbar { top: 336px; }