:root{
    --st: env(safe-area-inset-top, 0px);
    --sb: env(safe-area-inset-bottom, 0px);
    --sl: env(safe-area-inset-left, 0px);
    --sr: env(safe-area-inset-right, 0px);
    --paper:rgba(20,28,20,.78); --paper2:rgba(24,32,26,.94);
    --edge:rgba(255,235,170,.22); --gold:#ffce4f; --red:#ff5a5a; --green:#6fe07a;
    --fnt: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Quicksand', system-ui, -apple-system, sans-serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;
     user-select:none; -webkit-user-select:none; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#8fc3e8; touch-action:none;
     font-family:var(--fnt); color:#fff; }
  #c{ position:fixed; inset:0; width:100%; height:100%; display:block; }
  #bootMsg{ display:none; position:fixed; left:50%; top:40%; transform:translate(-50%,-50%);
     background:var(--paper2); padding:14px 18px; border-radius:16px; font-size:14px; max-width:80vw; z-index:99; }

  #vig{ position:fixed; inset:0; pointer-events:none; z-index:2;
     background:radial-gradient(ellipse at 50% 44%, transparent 56%, rgba(18,26,16,.36) 100%); }
  #flash{ position:fixed; inset:0; pointer-events:none; z-index:6; background:#fff; opacity:0; }
  #hurt{ position:fixed; inset:0; pointer-events:none; z-index:6; opacity:0;
     background:radial-gradient(ellipse at 50% 60%, transparent 52%, rgba(255,40,40,.5) 100%); }

  #hud{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  .card{ background:var(--paper); border:1.5px solid var(--edge); border-radius:14px;
     box-shadow:0 3px 12px rgba(8,18,10,.35); backdrop-filter:blur(3px); }

  /* passive HUD — left column, BELOW the platform top band */
  #leftCol{ position:absolute; top:calc(var(--st) + 64px); left:calc(var(--sl) + 12px);
     display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
  .hudRow{ padding:6px 11px 6px 9px; display:flex; align-items:center; gap:7px; font-weight:800; }
  #coinChip{ font-size:19px; color:#fff2c8; padding:7px 13px 7px 9px; }
  #coinChip .ic{ width:22px; height:22px; border-radius:50%; position:relative; flex:0 0 auto;
     background:radial-gradient(circle at 35% 30%, #fff3c2 0 16%, #ffce4f 52%, #c07f1e 100%);
     box-shadow:0 0 8px rgba(255,206,79,.75), inset 0 -2px 3px rgba(140,80,10,.5); }
  #coinChip .ic::after{ content:''; position:absolute; left:5px; top:6px; width:12px; height:9px;
     background:#8a5a10; clip-path:polygon(0 100%,0 25%,25% 55%,50% 0,75% 55%,100% 25%,100% 100%); }
  #coinChip b{ font-size:20px; letter-spacing:.4px; }
  #waveChip{ font-size:13.5px; letter-spacing:.5px; color:#e8ecda; }
  #waveChip b{ color:var(--gold); }
  #waveChip .foes{ color:#ff9a8a; font-size:12px; }
  #heartsChip{ padding:6px 10px; gap:3.5px; }
  .hrt{ width:15px; height:14px; position:relative; flex:0 0 auto;
     background:radial-gradient(circle at 30% 30%, #ff8f83 0 20%, #e6392e 70%, #a01f18 100%);
     clip-path:path('M7.5 13.5 C2 9 0 6.4 0 4.1 C0 1.8 1.8 0 4 0 C5.5 0 6.9 0.9 7.5 2.2 C8.1 0.9 9.5 0 11 0 C13.2 0 15 1.8 15 4.1 C15 6.4 13 9 7.5 13.5 Z'); }
  .hrt.off{ background:radial-gradient(circle at 30% 30%, #4a4f47 0 20%, #33372f 70%, #23261f 100%); }
  .hrt.half{ background:linear-gradient(90deg,#e6392e 0 50%, #33372f 50% 100%); }
  #nextChip{ font-size:12px; color:#d8e2c8; padding:6px 11px; }
  #nextChip b{ color:var(--gold); }
  #nextChip.can{ color:#fff0be; box-shadow:0 0 12px rgba(255,206,79,.35), 0 3px 12px rgba(8,18,10,.35); }
  #bestChip{ font-size:11.5px; color:#cfd8bd; padding:5px 10px; opacity:.92; }
  /* interactive control: lives in the lower-left thumb arc, NOT the passive top column */
  #muteBtn{ pointer-events:auto; cursor:pointer; font-size:18px; padding:10px 13px;
     position:absolute; left:calc(var(--sl) + 14px); bottom:calc(var(--sb) + 92px); }

  /* center banners (middle third) */
  #banner{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%) scale(0.6);
     opacity:0; text-align:center; pointer-events:none; width:max-content; max-width:94vw; }
  #banner .big{ font-size:min(11.5vw,52px); font-weight:900; letter-spacing:1.5px; color:#fff;
     text-shadow:0 3px 0 rgba(60,30,0,.55), 0 0 26px rgba(255,200,60,.55), 2px 0 0 rgba(60,30,0,.4), -2px 0 0 rgba(60,30,0,.4); }
  #banner .sub{ font-size:min(5vw,21px); font-weight:800; color:#ffe9a8; margin-top:4px;
     text-shadow:0 2px 0 rgba(60,30,0,.5); }
  #banner.on{ animation:bannerPop 2.4s cubic-bezier(.2,1.4,.4,1) forwards; }
  #banner.hold{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  @keyframes bannerPop{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
    10%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
    16%{ transform:translate(-50%,-50%) scale(1); }
    78%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%,-46%) scale(.98); }
  }
  #toast{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
     font-size:15px; font-weight:800; color:#fff; opacity:0; pointer-events:none; text-align:center;
     width:max-content; max-width:92vw; text-shadow:0 2px 3px rgba(20,20,10,.7); }
  #toast.on{ animation:toastUp 1.6s ease-out forwards; }
  @keyframes toastUp{ 0%{opacity:0; transform:translate(-50%,-40%);} 15%{opacity:1;}
     80%{opacity:1; transform:translate(-50%,-64%);} 100%{opacity:0; transform:translate(-50%,-72%);} }

  #hintMove{ position:absolute; left:50%; top:66%; transform:translateX(-50%); text-align:center;
     font-size:15px; font-weight:800; color:rgba(255,255,255,.95); text-shadow:0 2px 4px rgba(20,26,14,.8);
     pointer-events:none; transition:opacity .5s; }
  #hintMove .fing{ font-size:26px; animation:fingDrift 1.6s ease-in-out infinite; display:block; margin-top:5px; }
  @keyframes fingDrift{ 0%,100%{ transform:translateX(-16px);} 50%{ transform:translateX(16px);} }

  /* floating joystick */
  #joyBase{ position:fixed; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
     border:2.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.10);
     pointer-events:none; z-index:4; display:none; }
  #joyKnob{ position:fixed; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
     background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(210,220,200,.8));
     box-shadow:0 2px 8px rgba(20,26,14,.4); pointer-events:none; z-index:4; display:none; }

  /* intro / how-to card. Same paper, trim and button as the result card, so the two read as
     one game. `safe center` plus the scroll are for a short landscape phone, where the copy
     is taller than the viewport and plain centring parks the overflow above the scroll
     origin where it can never be reached — and body{touch-action:none} would otherwise
     swallow the drag that would scroll it. */
  #introWrap{ position:fixed; inset:0; z-index:9; display:none; align-items:center;
     justify-content:center; justify-content:safe center; overflow-y:auto; touch-action:pan-y;
     padding:20px 0; background:rgba(14,18,12,.5); backdrop-filter:blur(2px); }
  #introWrap.on{ display:flex; }
  #introCard{ width:min(86vw,360px); text-align:center; padding:22px 20px 18px; border-radius:22px;
     background:linear-gradient(180deg, rgba(30,38,28,.97), rgba(20,26,18,.97));
     border:2px solid rgba(255,220,140,.28); box-shadow:0 12px 40px rgba(8,12,6,.6); }
  #introCard .tit{ font-size:30px; font-weight:900; letter-spacing:1.5px; color:var(--gold);
     text-shadow:0 3px 0 rgba(90,50,0,.45); }
  #introCard .ln{ font-size:13.5px; font-weight:700; color:#d8e2c8; line-height:1.5; margin-top:11px; }
  #introCard .ln b{ color:#ffe9a8; }
  #introCard .hint{ font-size:11px; font-weight:700; color:#94a487; margin-top:14px; }
  #playBtn{ cursor:pointer; margin-top:18px; display:inline-block;
     font-size:17px; font-weight:900; letter-spacing:.6px; color:#3a2a08; padding:13px 26px; border-radius:16px;
     background:linear-gradient(180deg,#ffe184,#ffc43d 60%,#e89c1e);
     box-shadow:0 4px 0 #a86a10, 0 8px 18px rgba(10,14,8,.5); }
  #playBtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #a86a10, 0 4px 10px rgba(10,14,8,.5); }

  /* a landscape phone is ~390 tall: the card has to fit rather than hand the player a
     scrollbar on the first screen of the game */
  @media (max-height:470px){
    #introCard{ padding:15px 18px 13px; }
    #introCard .tit{ font-size:23px; }
    #introCard .ln{ font-size:12px; margin-top:7px; line-height:1.4; }
    #playBtn{ margin-top:12px; padding:10px 22px; font-size:15px; }
    #introCard .hint{ margin-top:9px; }
  }

  /* defeat / result card */
  #resWrap{ position:fixed; inset:0; z-index:8; display:none; align-items:center; justify-content:center;
     background:rgba(14,18,12,.45); backdrop-filter:blur(2px); }
  #resWrap.on{ display:flex; }
  #resCard{ width:min(84vw,340px); text-align:center; padding:22px 20px 18px; border-radius:22px;
     background:linear-gradient(180deg, rgba(30,38,28,.96), rgba(20,26,18,.96));
     border:2px solid rgba(255,220,140,.28); box-shadow:0 12px 40px rgba(8,12,6,.6);
     transform:scale(.8); opacity:0; transition:transform .35s cubic-bezier(.2,1.5,.4,1), opacity .3s; }
  #resWrap.on #resCard{ transform:scale(1); opacity:1; }
  #resCard .tit{ font-size:25px; font-weight:900; letter-spacing:1px; color:#ffd9c0;
     text-shadow:0 2px 0 rgba(60,20,0,.5); }
  #resCard .wv{ font-size:44px; font-weight:900; color:var(--gold); margin:6px 0 2px;
     text-shadow:0 3px 0 rgba(90,50,0,.45); }
  #resCard .sub{ font-size:13.5px; font-weight:700; color:#cfd8bd; margin-bottom:6px; }
  #resCard .best{ font-size:14px; font-weight:900; color:#9fe8a8; margin-bottom:2px; }
  #resCard .best.nb{ color:var(--gold); font-size:17px; animation:nbPulse 1s ease-in-out infinite alternate; }
  @keyframes nbPulse{ from{ transform:scale(1);} to{ transform:scale(1.07);} }
  #resCard .leg{ font-size:12.5px; font-weight:800; color:#ffe9a8; margin-top:5px; min-height:16px; }
  #retryBtn{ pointer-events:auto; cursor:pointer; margin-top:14px; display:inline-block;
     font-size:17px; font-weight:900; letter-spacing:.6px; color:#3a2a08; padding:13px 26px; border-radius:16px;
     background:linear-gradient(180deg,#ffe184,#ffc43d 60%,#e89c1e);
     box-shadow:0 4px 0 #a86a10, 0 8px 18px rgba(10,14,8,.5); }
  #retryBtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #a86a10, 0 4px 10px rgba(10,14,8,.5); }

  /* DOM coin fly (pickup → counter) */
  .flyCoin{ position:fixed; width:20px; height:20px; border-radius:50%; z-index:6; pointer-events:none;
     background:radial-gradient(circle at 35% 30%, #fff3c2 0 16%, #ffce4f 52%, #c07f1e 100%);
     box-shadow:0 0 8px rgba(255,206,79,.8); opacity:0; }

  @media (min-width:700px){
    #coinChip{ font-size:22px; } #coinChip b{ font-size:24px; }
  }

  /* Back to the hub. Every game page shipped without a single <a>, which made each one
     a dead end for crawlers and for anyone who landed here from search rather than the
     shelf. Top-left because #leftCol starts at --st + 64px, leaving the strip above it
     free. Above the intro and result cards (z 9 / 8) so it stays reachable from both. */
  .home-link{ position:fixed; z-index:30; pointer-events:auto;
     top:calc(var(--st) + 10px); left:calc(var(--sl) + 14px);
     padding:6px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:1.5px;
     text-decoration:none; color:var(--gold); background:rgba(20,28,20,.7);
     border:1px solid var(--edge); opacity:.62; transition:opacity .2s; }
  .home-link:hover, .home-link:focus-visible{ opacity:1; }