/* =========================================================================
   Ali Arcade - shared "navy glass" overlay theme
   Loaded after each game's own CSS. Restyles start / rules / pause / win / lose
   cards to match Power Walk: translucent navy, blurred game behind, Impact title.
   Leaves bespoke screens alone (comic end cards, marquees, flight boards, menus).
   ========================================================================= */
:root{--glass-bg:rgba(17,26,56,.74);--glass-edge:rgba(23,33,61,.9);--glass-tile:rgba(255,255,255,.07);--glass-text:#c8d3ec;--glass-eyebrow:#9fb6e6;--glass-yellow:#ffd36b;--glass-orange:#efa066;--glass-blue:#5e7fc4;--glass-ink:#172033}

/* backdrop: let the game show through, softly blurred */
.game-overlay:has(> .overlay-card),
.overlay:has(> .overlay-card),
.overlay:has(> .card){background:rgba(12,19,42,.35)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}

/* the card */
html body :is(.game-overlay,.overlay) > :is(.overlay-card,.card){
  border:2px solid var(--glass-edge)!important;border-radius:22px!important;
  background:var(--glass-bg)!important;color:#fff!important;
  backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 18px 50px rgba(8,14,34,.45),inset 0 0 0 1px rgba(185,221,237,.16)!important;
  outline:0!important}

/* eyebrow / kicker */
html body :is(.overlay-card,.card) :is(.overlay-eyebrow,.overlay-kicker,.card-eyebrow){color:var(--glass-eyebrow)!important;letter-spacing:.18em!important;text-shadow:none!important}

/* big Impact title with the yellow drop */
html body :is(.overlay-card,.card) h2{
  font-family:Impact,Haettenschweiler,"Arial Black",sans-serif!important;font-weight:400!important;
  color:var(--glass-blue)!important;letter-spacing:.03em!important;line-height:1!important;
  font-size:clamp(24px,3vw,40px)!important;text-transform:uppercase;
  text-shadow:2px 2px 0 var(--glass-yellow),4px 4px 0 var(--glass-ink)!important;
  -webkit-text-stroke:0!important;margin:.25em 0 .25em!important}

/* body copy */
html body :is(.overlay-card,.card) :is(p,.overlay-intro,.consequence-copy,.controls-copy,.small-copy,.fine,.fine-print,.start-note,.space-note,.controls-hint,.mistake-note,.loss-quote,.loss-second-line,.end-copy){
  color:var(--glass-text)!important;text-shadow:none!important}
html body :is(.overlay-card,.card) p strong,html body :is(.overlay-card,.card) p b{color:var(--glass-yellow)!important}
html body :is(.overlay-card,.card) a{color:var(--glass-yellow)!important}

/* rule / stat tiles */
html body :is(.overlay-card,.card) :is(.rules > *,.rules-grid > *,.condition-card,.rule-card,.controls-card,.results > *,.result-stats,.score-summary,.win-results,.final-budget,.girl-math-total,.final-score,.end-score,.guessing-notes,.ending-bubble,.end-notes){
  background:var(--glass-tile)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;color:#fff!important}
html body :is(.overlay-card,.card) :is(.rules,.rules-grid,.condition-grid){gap:clamp(6px,1vw,12px)!important}
html body :is(.overlay-card,.card) :is(.rules > *,.rules-grid > *,.condition-card,.rule-card,.controls-card,.results > *,.result-stats,.score-summary,.win-results,.final-budget,.girl-math-total,.final-score,.end-score) :is(strong,b,.value){color:var(--glass-yellow)!important;text-shadow:none!important}
html body :is(.overlay-card,.card) :is(.rules > *,.rules-grid > *,.condition-card,.rule-card,.controls-card,.results > *,.result-stats,.score-summary,.win-results) :is(span,small,em){color:var(--glass-text)!important}
html body :is(.overlay-card,.card) :is(.guessing-notes,.ending-bubble) *{color:var(--glass-text)!important}
html body :is(.overlay-card,.card) :is(.guessing-notes,.ending-bubble) :is(strong,b,em){color:var(--glass-yellow)!important}

/* result lines */
html body :is(.overlay-card,.card) :is(.tier-title,#win-tier,#endTier,#result-tier){color:var(--glass-orange)!important;background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important}
html body :is(.overlay-card,.card) :is(.leaderboard-status,.leaderboard-copy,.end-board,.ending-joke){color:var(--glass-yellow)!important;background:transparent!important;border:0!important;box-shadow:none!important}

/* buttons: same orange pill, softer corners */
html body :is(.overlay-card,.card) :is(.overlay-button,.primary-button,.primary-btn,.big-button){border-radius:14px!important}
html body :is(.overlay-card,.card) .link-btn{color:#b9dded!important}

/* coffee craze party picker */
html body .overlay-card .lvl{background:var(--glass-tile)!important;border:1px solid rgba(185,221,237,.22)!important;box-shadow:none!important;color:#fff!important;border-radius:14px!important}
html body .overlay-card .lvl b{color:#fff!important}
html body .overlay-card .lvl:not(:disabled):hover{background:rgba(255,255,255,.14)!important}
html body .overlay-card .lvl:disabled{background:rgba(255,255,255,.03)!important}

/* control hints / key pills inside cards */
html body :is(.overlay-card,.card) :is(.controls-copy,.mistake-note,.space-note,.start-note,.controls-hint){background:transparent!important;border:0!important;box-shadow:none!important}
html body :is(.overlay-card,.card) :is(.controls-copy.desktop-copy,.controls-copy.mobile-copy){background:var(--glass-tile)!important;border-radius:12px!important;padding:6px 10px!important}
html body :is(.overlay-card,.card) :is(kbd,code,.key){background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(185,221,237,.3)!important;box-shadow:none!important;border-radius:6px!important}
/* keep tall cards inside the screen */
html body :is(.game-overlay,.overlay) > :is(.overlay-card,.card){max-height:96%;overflow:auto;scrollbar-width:none;padding-top:clamp(12px,2.2vh,26px)!important;padding-bottom:clamp(12px,2.2vh,26px)!important}
html body :is(.game-overlay,.overlay) > :is(.overlay-card,.card)::-webkit-scrollbar{display:none}
html body :is(.overlay-card,.card) :is(.overlay-emoji,.overlay-icon){margin:0!important;line-height:1.1!important}
html body :is(.overlay-card,.card) :is(.rules,.rules-grid,.condition-grid){margin-top:8px!important;margin-bottom:8px!important}

/* "< ALI ARCADE" back button: navy glass pill in every game */
html body a.arcade-back{display:inline-flex!important;align-items:center;gap:6px;padding:7px 14px!important;border-radius:999px!important;border:2px solid rgba(23,33,61,.9)!important;background:rgba(17,26,56,.72)!important;color:#ffd36b!important;backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);box-shadow:0 4px 14px rgba(8,14,34,.35),inset 0 0 0 1px rgba(185,221,237,.16)!important;font:900 12px/1 Consolas,"Courier New",monospace!important;letter-spacing:.1em!important;text-decoration:none!important;text-shadow:none!important;transform:none!important;min-height:0!important;z-index:2400}
html body a.arcade-back:hover,html body a.arcade-back:focus-visible{background:rgba(30,44,90,.86)!important;color:#fff3c4!important;outline:none}
@media (max-height:520px) and (orientation:landscape){html body a.arcade-back{padding:5px 10px!important;font-size:10px!important}}

/* "< ALI ARCADE": lives inside the cabinet and matches the arcade floor's "< MENU" exactly
   (plain sky-blue text, yellow on hover, same font, size and spot). Short landscape phones keep the pill above. */
@media (min-height:521px),(orientation:portrait){
  html body main{position:relative}
  html body main > a.arcade-back{position:absolute!important;top:20px!important;left:24px!important;right:auto!important;bottom:auto!important;z-index:700!important;
    display:inline-flex!important;align-items:center;min-height:44px!important;padding:5px 0!important;margin:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    color:#b9dded!important;font:900 16px/1 Consolas,"Lucida Console",Monaco,"Courier New",monospace!important;letter-spacing:.06em!important;text-transform:none!important}
  html body main > a.arcade-back:hover,html body main > a.arcade-back:focus-visible{background:transparent!important;color:#ffd36b!important;outline:none}
  /* the link used to sit above the cabinet; give that space back */
  html body{padding-top:clamp(10px,3vw,28px)!important}
  html body main .game-header,html body main > header{padding-top:max(26px,var(--hdr-pad,0px))!important}
}
@media (max-width:760px) and (orientation:portrait){
  html body main > a.arcade-back{top:12px!important;left:14px!important;font-size:14px!important;min-height:36px!important}
  html body{padding-top:10px!important}
}


/* mobile cabinet fit v7 */
html.arcade-touch,html.arcade-touch body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.arcade-touch button,html.arcade-touch [role="button"],html.arcade-touch .hud-card.btn,html.arcade-touch .overlay-button,html.arcade-touch .primary-button,html.arcade-touch .primary-btn,html.arcade-touch .big-button,html.arcade-touch .pad-button,html.arcade-touch .control-button{min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.arcade-touch :is(.stage,.living-room,#game-area,canvas){touch-action:none}
.arcade-rotate-prompt{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,rgba(94,127,196,.34),rgba(5,6,10,.96) 62%);color:#fff;text-align:center;font-family:Consolas,"Lucida Console",Monaco,"Courier New",monospace}
.arcade-rotate-prompt[hidden]{display:none!important}.arcade-rotate-prompt div{max-width:360px;padding:24px;border:2px solid rgba(185,221,237,.35);border-radius:22px;background:rgba(17,26,56,.82);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12)}
.arcade-rotate-prompt b{display:block;color:#ffd36b;font:400 clamp(30px,9vw,48px)/1 Impact,Haettenschweiler,"Arial Black",sans-serif;letter-spacing:.03em;text-transform:uppercase;text-shadow:2px 2px 0 #172033}.arcade-rotate-prompt span{display:block;margin-top:10px;color:#c8d3ec;font-weight:900;line-height:1.35}
html.arcade-orientation-blocked body>main{display:none!important}
@media (max-height:520px) and (orientation:landscape){
  html.arcade-touch,html.arcade-touch body{width:100%;height:100dvh;max-height:100dvh;overflow:hidden!important;position:fixed;inset:0}
  html.arcade-touch body{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;padding:max(3px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) 3px max(4px,env(safe-area-inset-left))!important;margin:0!important}
  html.arcade-touch.arcade-fill body{padding-bottom:max(3px,env(safe-area-inset-bottom))!important}
  html.arcade-touch main.game-shell,html.arcade-touch main.game-wrapper{box-sizing:border-box!important;width:100%!important;max-width:none!important;height:100%!important;max-height:100%!important;margin:0 auto!important;padding:4px!important;border-width:2px!important;border-radius:14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;box-shadow:0 0 0 1px var(--blue,#5e7fc4),inset 0 0 45px rgba(0,0,0,.55)!important}
  html.arcade-touch main.game-shell::after,html.arcade-touch main.game-wrapper::after{inset:0!important;border-radius:inherit!important;box-shadow:inset 0 0 50px rgba(0,0,0,.45)!important}
  html.arcade-touch main.game-shell>.game-header,html.arcade-touch main.game-wrapper>.game-header,html.arcade-touch .game-header,html.arcade-touch .subtitle,html.arcade-touch .eyebrow,html.arcade-touch .instruction,html.arcade-touch .keys,html.arcade-touch .turn-hint{display:none!important}
  html.arcade-touch main>.hud,html.arcade-touch main>.game-info{position:relative!important;inset:auto!important;width:100%!important;flex:none!important;margin:0 0 4px!important;gap:4px!important;z-index:85!important;pointer-events:auto!important}
  html.arcade-touch .hud-card,html.arcade-touch .info-box{min-height:44px!important;padding:4px 5px!important;border-width:2px!important;border-radius:10px!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;line-height:1.05!important}
  html.arcade-touch .hud-card span,html.arcade-touch .info-label{font-size:8px!important;letter-spacing:.05em!important;margin:0!important;line-height:1.05!important} html.arcade-touch .hud-card strong,html.arcade-touch .info-box strong{font-size:12px!important;line-height:1.05!important}
  html.arcade-touch :is(.stage,.living-room,#game-area){flex:0 1 auto!important;width:var(--arcade-fit-w,min(100%,calc((100dvh - 76px)*16/9)))!important;height:var(--arcade-fit-h,auto)!important;max-width:100%!important;max-height:100%!important;margin:0 auto!important;border-width:2px!important;border-radius:12px!important;min-width:0!important;min-height:0!important;line-height:0!important}
  :where(html.arcade-touch :is(.stage,.living-room,#game-area)>:not(canvas):not(:has(canvas))){line-height:normal}
  /* only the main playfield canvas (a direct child of the stage); nested canvases/imgs (album photos, x-rays, previews) keep their own sizing */
  html.arcade-touch :is(.stage,.living-room,#game-area)>canvas{width:100%!important;height:100%!important;object-fit:contain!important}
  html.arcade-touch :is(.game-overlay,.overlay){position:absolute!important;inset:0!important;padding:8px!important;overflow:hidden!important} html.arcade-touch :is(.game-overlay,.overlay)>:is(.overlay-card,.card,.glass-card){max-height:96%!important;overflow:auto!important;padding:12px 14px!important} html.arcade-touch :is(.overlay-card,.card,.glass-card) :is(.overlay-emoji,.overlay-icon){display:none!important}
  /* fill v1: full-height playfield, HUD + back link in a slim column beside it (fit.js sets the classes and sizes) */
  html.arcade-touch.arcade-side-col main.game-shell,html.arcade-touch.arcade-side-col main.game-wrapper{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:6px!important;position:relative!important}
  html.arcade-touch.arcade-side-col main>a.arcade-back{position:absolute!important;top:var(--arcade-link-y,4px)!important;left:var(--arcade-side-x,4px)!important;right:auto!important;bottom:auto!important;width:var(--arcade-side-w,104px)!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;justify-content:center!important;padding:6px 4px!important;font-size:10px!important;letter-spacing:.03em!important;white-space:nowrap!important;z-index:2400!important}
  html.arcade-touch.arcade-side-col main>:is(.hud,.game-info){order:0!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:stretch!important;align-self:stretch!important;flex:none!important;width:var(--arcade-side-w,104px)!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:100%!important;box-sizing:border-box!important;margin:0!important;padding:34px 0 2px!important;gap:5px!important;overflow:hidden!important;grid-template-columns:none!important;grid-template-rows:none!important;background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important}
  html.arcade-touch.arcade-side-col main>:is(.hud,.game-info)>*{width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;min-height:40px!important;margin:0!important;box-sizing:border-box!important;text-align:center!important;grid-column:auto!important;grid-row:auto!important}
  html.arcade-touch.arcade-side-col main>:is(.hud,.game-info) :is(.hud-card,.info-box) strong{font-size:13px!important;white-space:normal!important;overflow-wrap:anywhere}
  html.arcade-touch.arcade-side-col main>:is(.stage,.living-room,#game-area){order:1!important;flex:none!important;margin:0!important;max-width:none!important;max-height:100%!important}
  html.arcade-touch.arcade-side-col.arcade-side-linkonly main>:is(.stage,.living-room,#game-area){margin-left:calc(var(--arcade-side-w,82px) + 6px)!important}
  html.arcade-touch .aa-music{top:max(6px,env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important}
  html.arcade-touch.arcade-side-col .aa-music{top:auto!important;right:auto!important;left:var(--arcade-music-x,8px)!important;bottom:var(--arcade-music-y,8px)!important}
  html.arcade-touch.arcade-side-col main>:is(.hud,.game-info){padding-bottom:38px!important}
  html.arcade-touch.arcade-fill-top main.game-shell,html.arcade-touch.arcade-fill-top main.game-wrapper{justify-content:flex-end!important}
}
@media (max-width:760px) and (orientation:portrait){html.arcade-needs-landscape body{overflow:hidden!important} html.arcade-needs-landscape body>main{display:none!important}}


/* control hints: keyboard text on PCs, gesture text on phones */
.phone-only{display:none}
@media (hover:none) and (pointer:coarse){.pc-only{display:none!important}.phone-only{display:inline}p.phone-only,div.phone-only,li.phone-only{display:block}}