:root{color-scheme:dark;font-family:'Courier New',monospace;color:#eee7ce;background:#080e15;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#21342d 0,transparent 65%),#080e15}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ffae61;outline-offset:3px}[hidden]{display:none!important}.cabinet{width:min(100%,1100px);height:100dvh;min-height:480px;margin:auto;padding: max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px}.masthead{display:flex;align-items:center;gap:22px;font-size:12px;min-height:32px}.wordmark{font-weight:900;font-size:19px;letter-spacing:-1px}.wordmark span{color:#ff9a55}.cabinet-number{color:#8b9f94;font-size:10px;letter-spacing:2px}.masthead button{margin-left:auto;background:transparent;border:1px solid #42534c;padding:10px 14px;font-size:10px;min-height:40px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}h1{font-size:clamp(20px,3.3vw,34px);letter-spacing:-1.4px;margin:0;line-height:1}h1 span{color:#86edb0}.session-light{font-size:10px;letter-spacing:2px;color:#7ca58c}.machine{border:1px solid #536052;border-top:3px solid #e4d5ae;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:0 15px 70px #0006}.hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 20px;background:#101c21;border-bottom:1px solid #36483f}.hud span{display:block;font-size:10px;color:#95a79b;letter-spacing:2px;margin-bottom:4px}.hud strong{font-size:27px;font-variant-numeric:tabular-nums;letter-spacing:1px}.clock{text-align:center}.clock strong{color:#ffcb79}.wave{text-align:right}.playfield{position:relative;flex:1;min-height:0;overflow:hidden;background:#070e18}canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;cursor:crosshair}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#061019bf;padding:16px;overflow:auto}.intro{width:min(410px,100%);text-align:center}.eyebrow{color:#ffae61;letter-spacing:2px;font-size:11px;font-weight:bold}h2{font-size:clamp(32px,5vw,57px);line-height:.98;letter-spacing:-3px;margin:18px 0}h2 span{color:#83efac}#description{font-size:12px;color:#b1c3b4;line-height:1.7}.instructions{display:grid;text-align:left;gap:12px;width:fit-content;margin:24px auto;font-size:11px;letter-spacing:1px}.instructions b{color:#81dca7;margin-right:13px}.start{width:100%;border:0;background:#f1dcae;box-shadow:4px 4px 0 #896640;color:#17271f;font-size:16px;letter-spacing:2px;font-weight:900;min-height:52px;padding:14px 20px}.start:hover{background:#ffebb9}.start span{float:right}.dev-note{font-size:9px;line-height:1.8;color:#8fa796;margin:15px 0 0}.status-bar{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;background:#142323;font-size:11px;color:#a5bba8;letter-spacing:1px;border-top:1px solid #344e43}.status-bar strong{color:#85edac;font-size:20px;margin-left:9px}.status-bar i{display:inline-block;width:7px;height:7px;background:#85edac;margin-right:7px}.status-bar .empty{color:#ff6b6b}.page-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#899d90;padding:0 2px}.close-panel{position:absolute;left:0;right:0;top:22%;padding:24px 10px;text-align:center;background:#0b181bf0;border-block:1px solid #92d7a5}.close-panel h2{font-size:38px;color:#aff8bd;letter-spacing:-2px}.close-panel>p:last-child{font-size:11px;color:#d9d8b8}#results{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}#results dt{font-size:9px;color:#9bae9e}#results dd{font-size:24px;margin:4px 0;color:#e7d9b1}.intro:has(#results:not([hidden])) .instructions{display:none}.intro:has(#results:not([hidden])) h2{font-size:37px}#market-canvas:focus{outline-offset:-3px}
@media(max-width:600px){.cabinet{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:10px}.cabinet-number{font-size:9px;letter-spacing:0}.masthead{gap:12px}.wordmark{font-size:16px}.session-light{font-size:8px;letter-spacing:0}h1{font-size:22px}.hud{padding:12px}.hud span{font-size:8px;letter-spacing:1px}.hud strong{font-size:23px}.status-bar{padding:10px;font-size:9px}.page-footer{font-size:8px}.page-footer span:last-child{display:none}.intro{max-width:290px}h2{font-size:47px}.instructions{margin:20px auto}.close-panel h2{font-size:29px}}
@media(max-height:580px){.cabinet{min-height:320px;gap:5px}.masthead{min-height:27px}.masthead button{min-height:28px;padding:6px 12px}.game-heading{display:none}.hud{padding:6px 16px}.hud strong{font-size:20px}.hud span{font-size:8px;margin:0}.status-bar{padding:4px 14px}.intro{max-width:450px}.intro h2{font-size:29px;letter-spacing:-1px;margin:8px}.intro h2 br{display:none}.eyebrow{margin:4px}.instructions{display:flex;gap:10px;margin:10px auto;font-size:8px}.instructions b{margin-right:4px}#description{margin:5px}.start{min-height:40px;padding:10px}.dev-note{margin-top:7px;font-size:8px}#results{margin:10px 0;grid-template-columns:repeat(5,1fr);gap:8px}#results dd{font-size:17px}#results dt{font-size:8px}.intro:has(#results:not([hidden])) h2{font-size:27px}}

.cinematic{position:absolute;inset:0;pointer-events:none;text-align:center;padding:clamp(18px,6vh,70px) 16px;background:linear-gradient(#07121acd,transparent 48%);display:flex;align-items:center;flex-direction:column}.cinematic h2{font-size:clamp(27px,4.5vw,48px);letter-spacing:-1.5px;line-height:1.1;color:#b0ffca;max-width:600px;text-shadow:0 3px 18px #000;margin:10px 0}.cinematic .eyebrow{color:#ff8392}.cinematic button{pointer-events:auto;margin-top:auto;min-height:44px;padding:10px 18px;border:1px solid #789d86;background:#07121ae6;font-size:11px;letter-spacing:1px}.wave-notice{position:absolute;top:10%;left:10px;right:10px;text-align:center;pointer-events:none;text-shadow:0 2px 9px #000}.wave-notice strong{display:block;font-size:clamp(20px,3vw,30px);color:#ff8d9c;letter-spacing:1px}.wave-notice span{display:block;margin-top:8px;font-size:10px;color:#c6e5cd;letter-spacing:1px}.session-light.bear{color:#ff8294}#pause-panel{z-index:3}.close-panel{z-index:2}
@media(max-height:580px){.cinematic{padding:12px}.cinematic h2{font-size:25px;margin:3px}.cinematic .eyebrow{font-size:9px}.cinematic button{min-height:36px;padding:8px 14px}.wave-notice{top:5%}}

/* Keep HUD columns stable and let the playfield, rather than the page, own overlays. */
.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.hud>div{min-width:0}.hud strong{white-space:nowrap;font-size:clamp(20px,2.5vw,27px)}
.playfield{container-type:size;isolation:isolate}.playfield>canvas{position:absolute;inset:0}
.overlay{display:flex;align-items:safe center;justify-content:center}.intro{flex:none;margin:auto}
.close-panel{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto}
.close-panel>p:last-child{line-height:1.6;margin-bottom:0}.close-panel h2{margin:12px 0}
#results>div{min-width:0}#results dd{overflow-wrap:anywhere}

/* Shallow windows and phone landscape: prioritize the board and touch targets. */
@media(max-height:580px) and (min-aspect-ratio:1/1){
  .cabinet{min-height:0;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));gap:4px}
  .masthead{min-height:44px}.masthead button{min-height:44px;min-width:64px}
  .game-heading,.page-footer{display:none}.hud{padding:5px 14px}.hud strong{font-size:20px}
  .status-bar{padding:5px 14px;font-size:10px}.status-bar strong{font-size:17px}
}
@container (max-height:340px) and (min-width:500px){
  .overlay{padding:12px 20px}
  .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.85fr);column-gap:28px;row-gap:8px;width:min(680px,100%);max-width:680px;text-align:left}
  .intro>.eyebrow{grid-column:1;grid-row:1;margin:0;font-size:9px}
  .intro>h2{grid-column:1;grid-row:2;font-size:30px;letter-spacing:-1px;margin:0;line-height:1.05}
  .intro>h2 br{display:none}.intro>#description{grid-column:1;grid-row:3;margin:0;font-size:10px;line-height:1.4}
  .intro>.instructions{grid-column:1;grid-row:4;display:grid;gap:5px;margin:0;font-size:8px;letter-spacing:0}
  .intro>.start{grid-column:2;grid-row:2 / span 2;align-self:center;min-height:44px;font-size:13px;padding:12px}
  .intro>.dev-note{grid-column:2;grid-row:4;align-self:start;margin:0;font-size:8px;line-height:1.5}
  .intro>#results{grid-column:2;grid-row:1 / span 3;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;align-self:center}
  #results dt{font-size:8px;line-height:1.3}#results dd{font-size:19px;margin:3px 0}
  .intro:has(#results:not([hidden]))>.start{grid-row:4;align-self:end}
  .intro:has(#results:not([hidden]))>.dev-note{display:none}
  .intro:has(#results:not([hidden]))>h2{font-size:28px}
  #pause-panel .intro{display:block;width:min(320px,100%);text-align:center}
  #pause-panel h2{margin:10px 0 14px}
  .cinematic{padding:10px 150px 10px 16px;align-items:flex-start;text-align:left}
  .cinematic .eyebrow{font-size:9px;margin:0 0 5px}
  .cinematic h2{font-size:23px;margin:0;letter-spacing:-1px}
  .cinematic button{position:absolute;right:16px;top:10px;margin:0;min-height:44px;padding:10px 12px}
  .wave-notice{top:8px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:14px;row-gap:4px}
  .wave-notice strong{font-size:17px;letter-spacing:0}.wave-notice span{font-size:9px;margin:0;letter-spacing:0}
  .close-panel{padding:12px 16px}.close-panel .eyebrow{font-size:9px;margin:0}.close-panel h2{font-size:28px;margin:8px 0}.close-panel>p:last-child{font-size:10px;margin-top:0}
}

.overlay{background:#061019ed}
@container (max-height:340px) and (min-width:500px){
  .intro>#results{gap:6px 10px}
  #results>div:first-child{grid-column:1/-1}
  #results dd{font-size:15px;white-space:nowrap}
  #results>div:first-child dd{font-size:21px}
}

.dev-note strong{color:#bdd0be;font-size:inherit;letter-spacing:.5px}
@container (max-height:220px) and (min-width:500px){
  .overlay{padding:8px 16px}.intro{column-gap:18px;row-gap:6px}
  .intro:has(#results:not([hidden]))>h2{font-size:26px}
}

/* Display the full supplied portrait cabinet without cropping or stretching. */
.market-cabinet-art{display:block;position:relative;overflow:hidden;aspect-ratio:941/1672;width:84px;flex:none}
.market-cabinet-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.opening-identity{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0}
.opening-identity h2{margin:0;text-align:left}
.intro:has(#results:not([hidden])) .market-cabinet-art{display:none}
.intro:has(#results:not([hidden])) .opening-identity{justify-content:center}
@media(max-width:600px){.market-cabinet-art{width:66px}.opening-identity{gap:14px}}
@container (max-height:340px) and (min-width:500px){
  .intro>.opening-identity{grid-column:1;grid-row:2;margin:0;justify-content:flex-start;gap:12px}
  .opening-identity .market-cabinet-art{width:29px}
  .opening-identity h2{font-size:27px;letter-spacing:-1px;line-height:1.05;margin:0}
  .intro:has(#results:not([hidden])) .opening-identity{justify-content:flex-start}
  .intro:has(#results:not([hidden])) .opening-identity h2{font-size:26px}
}
@container (max-height:220px) and (min-width:500px){
  .intro:has(#results:not([hidden])){row-gap:4px}
  .intro>#results{gap:4px 8px}
  #results dt{font-size:7px;line-height:1.15}
  #results dd{font-size:14px;margin:1px 0 0}
  #results>div:first-child dd{font-size:20px}
}

#stats-dialog,#market-help-dialog{max-width:min(90vw,520px);background:#101d19;color:#ecdfbe;border:1px solid #80c7a2;padding:24px;line-height:1.8}#stats-dialog::backdrop,#market-help-dialog::backdrop{background:#000b}#stats-dialog h2,#market-help-dialog h2{font-size:24px}#stats-dialog button,#market-help-dialog button,#retry-save{padding:8px 12px;border:1px solid #80c7a2}.dev-note a{color:#ffc466}.page-footer #save-status{display:inline;font-size:10px;letter-spacing:0}.page-footer{gap:8px}.intro a{color:#ffc466}

@media(max-height:580px) and (min-aspect-ratio:1/1){.page-footer:has(#retry-save:not([hidden])){display:flex}}

.market-board-link{font-size:10px;color:#f1ddb1;text-decoration:none}.masthead{gap:10px}@media(max-width:600px){.market-board-link{font-size:8px}.masthead button{padding:8px;font-size:9px}.wordmark{font-size:13px}}

.status-bar .landing-sound{min-height:32px;padding:4px 8px;font-size:10px;white-space:nowrap}@media(max-width:400px){.status-bar{gap:5px}.status-bar .landing-sound{font-size:9px;padding:4px}}

/* Earned Whale Buys live beside ammo, outside the tappable sky. */
.status-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:6px 16px}
.order-status{min-width:0}.order-status>div{white-space:nowrap}.order-status #buildings{display:block;margin-top:3px;font-size:9px;letter-spacing:0}
.whale-buy{min-width:82px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 8px;border:1px solid #347451;background:#102d21;color:#5bff9e;font-size:9px;letter-spacing:0}
.whale-icon-count{display:flex;align-items:center;gap:6px}.whale-icon-count b{font-size:15px}.whale-buy[aria-pressed=true]{background:#92ffb7;color:#09311c;border-color:#dcffe6;box-shadow:0 0 14px #39ff8a99;outline:2px solid #d2ffe1;outline-offset:1px}
.whale-buy:disabled{opacity:.4}.status-bar .landing-sound{min-height:44px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){.status-bar{gap:7px;padding:5px 9px;letter-spacing:0}.status-bar strong{margin-left:4px;font-size:18px}.status-bar i{margin-right:4px}.whale-buy{min-width:72px;padding:3px 5px;font-size:8px}.order-status #buildings{font-size:8px}}

/* Keep the opening screen clear below Start Game; show live counters during play. */
body:has(#overlay:not([hidden]) #results[hidden]) .status-bar>div,
body:has(#overlay:not([hidden]) #results[hidden]) #buildings,
body:has(#overlay:not([hidden]) #results[hidden]) .page-footer{display:none}

body:has(#overlay:not([hidden]) #results[hidden]) .status-bar{justify-content:center}

/* Score and shared controls live in the same cabinet header as Coffee Run. */
.hud{grid-template-columns:repeat(2,minmax(0,1fr))}.hud .clock{text-align:left}
.status-bar:has(>div[hidden]){display:none}
body:has(#overlay:not([hidden]) #results[hidden]) .status-bar{display:none}

.status-bar{grid-template-columns:minmax(0,1fr) auto}

/* Use the full desktop window instead of a narrow centered cabinet. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){.cabinet{width:100%;max-width:none;padding-inline:14px}.game-heading,.page-footer{display:none}.cabinet{gap:8px}.hud{padding:7px 16px}}

/* PC-only compact controls: keep touch/mobile sizing unchanged. */
@media (hover:hover) and (pointer:fine){
 body.market-theme #arcade-game-header{padding:2px 10px;gap:8px}
 body.market-theme #arcade-game-header .game-brand{font-size:14px;line-height:1.2}
 body.market-theme #arcade-game-header .game-brand strong{display:inline}
 body.market-theme #arcade-game-header .game-brand img{width:26px;height:30px}
 body.market-theme #arcade-game-header .game-toolbar{min-height:30px;gap:12px}
 body.market-theme #arcade-game-header .toolbar-actions{gap:6px}
 body.market-theme #arcade-game-header .toolbar-actions button,
 body.market-theme #arcade-game-header summary{min-height:30px;padding:3px 5px}
 body.market-theme #arcade-game-header>.arcade-home-logo{width:30px;height:30px}
 body.market-theme .hud{padding:4px 12px;gap:10px}
 body.market-theme .hud>div{display:flex;align-items:center;gap:9px}
 body.market-theme .hud .wave{justify-content:flex-end}
 body.market-theme .hud span{margin:0;font-size:10px;line-height:1.2}
 body.market-theme .hud strong{font-size:18px;line-height:1.2}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 body.market-theme .cabinet{padding-top:8px;gap:5px}
}