:root{
    --ink:#0f3b4a; --ink-deep:#0a2a36; --sand:#f6dcab; --cream:#ffe9b8;
    --coral:#ff6b4a; --coral-dark:#c74a2e; --yellow:#ffc93c; --teal:#5fd4e6;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{
    font-family:'Nunito',sans-serif; background:var(--sand);
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    touch-action:manipulation;
  }

  /* ---------- the game screen ----------
     The map fills the window. Extra space past the authored 16:9 frame still shows
     the level; a dotted line marks the edge the ball cannot cross. */
  #stage{
    position:fixed; inset:0; overflow:hidden; background:var(--sand);
  }
  #game{position:absolute;left:0;top:0;display:block;touch-action:none;cursor:crosshair}
  #game.aiming{cursor:grabbing}

  /* ---------- HUD ----------
     The play chrome uses the same zoom as the main page (--ui). On a narrow
     phone the play circles are 32px and the main-page circles are 36px, so
     --play grows the whole HUD by 36/32. The box is drawn at 1/--play and
     scaled back, which keeps the bars pinned to the screen edges. */
  #hud{
    position:absolute;top:0;left:0;pointer-events:none;z-index:5;
    --play:var(--ui, 1);
    width:calc(100% / var(--play));
    height:calc(100% / var(--play));
    transform:scale(var(--play));
    transform-origin:top left;
  }
  #topbar{
    position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
    justify-content:space-between;
    padding:calc(8px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px));
    background:transparent;box-shadow:none;
    pointer-events:none;
  }
  /* Playtest already has its own bar. Keep sound, settings and help as a corner cluster. */
  html.play-draft #topbar{
    background:transparent;box-shadow:none;justify-content:flex-end;pointer-events:none;
  }
  html.play-draft #topbar .logo,
  html.play-draft #topbar .chip,
  html.play-draft #menuBtn,
  html.play-draft #eMenu{display:none}
  html.play-draft #topbar .top-right{pointer-events:auto}
  /* Playtest must not paint the main page first. The class is set in the head,
     before the body, so the home screen never gets a frame. */
  html.play-draft #homeOv,
  html.play-draft #titleOv{
    display:none !important;transition:none !important;animation:none !important;
  }
  .logo{
    font-family:'Lilita One';font-size:26px;letter-spacing:1px;
    color:var(--ink);display:flex;align-items:center;gap:10px;
    text-shadow:0 1px 0 rgba(255,246,232,.9);
  }
  #topbar .logo{
    color:#fff;background:var(--ink);border:none;border-radius:15px;
    padding:8px 18px 10px;box-shadow:0 4px 0 rgba(8,30,40,.35);text-shadow:none;
  }
  .logo .mark em{color:var(--coral);font-style:normal}
  .logo-ball{
    width:18px;height:18px;border-radius:50%;flex:0 0 18px;
    background:conic-gradient(#ff5a4e 0 45deg,#fff 45deg 90deg,#ffc93c 90deg 135deg,#fff 135deg 180deg,#2f9dff 180deg 225deg,#fff 225deg 270deg,#3ec46d 270deg 315deg,#fff 315deg);
    box-shadow:inset -3px -3px 4px rgba(0,0,0,.18);
    animation:spin 5s linear infinite;
  }
  /* The play bar paints the map's own ball into this canvas. The editor keeps the
     beach-ball disc above. */
  #logoBall{
    display:block;background:none;box-shadow:none;animation:none;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .top-right{display:flex;gap:10px;align-items:center}
  .chip{
    background:var(--ink);color:var(--cream);font-weight:800;font-size:13px;
    letter-spacing:1.5px;padding:9px 14px;border-radius:999px;
    box-shadow:0 3px 0 rgba(8,30,40,.35);
  }
  .chip .st{color:var(--yellow)}
  .icon-btn{
    pointer-events:auto;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:var(--ink);color:var(--cream);display:grid;place-items:center;
    box-shadow:0 4px 0 rgba(8,30,40,.35);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
    font-family:'Lilita One';font-size:19px;
  }
  .icon-btn:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 7px 0 rgba(8,30,40,.35);animation:iconHop .34s cubic-bezier(.22,1.5,.36,1)}
  .icon-btn:active{transform:translateY(2px) scale(.88);box-shadow:0 1px 0 rgba(8,30,40,.35);animation:none}
  .icon-btn svg{width:22px;height:22px;display:block;transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
  .icon-btn:hover svg{transform:rotate(-10deg) scale(1.06)}
  .icon-btn:active svg{transform:rotate(8deg) scale(.92)}
  #sndBtn .sOff,#homeMus .sOff{opacity:0;transition:opacity .15s}
  #sndBtn .sOn,#homeMus .sOn{transition:opacity .15s}
  #sndBtn.muted .sOn,#homeMus.muted .sOn{opacity:0}
  #sndBtn.muted .sOff,#homeMus.muted .sOff{opacity:1}
  #fsBtn .fsIn,#homeFs .fsIn{opacity:0;transition:opacity .15s}
  #fsBtn .fsOut,#homeFs .fsOut{transition:opacity .15s}
  #fsBtn.fs .fsOut,#homeFs.fs .fsOut{opacity:0}
  #fsBtn.fs .fsIn,#homeFs.fs .fsIn{opacity:1}
  .icon-btn[hidden]{display:none}

  /* ---------- Settings: the two volume sliders ---------- */
  .vols{display:flex;flex-direction:column;gap:16px;margin:4px 0 20px;text-align:left}
  .vol{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;
       font-family:'Lilita One';font-size:17px;color:var(--ink)}
  .vol b{font-size:14px;opacity:.65;min-width:46px;text-align:right;font-family:'Nunito';font-weight:800}
  .vol input[type=range]{
    grid-column:1/3;-webkit-appearance:none;appearance:none;width:100%;height:24px;
    background:transparent;outline:none;cursor:pointer;margin:0;
  }
  .vol input[type=range]::-webkit-slider-runnable-track{
    height:12px;border-radius:7px;background:var(--cream);border:2px solid rgba(15,59,74,.3);
  }
  .vol input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;
    background:var(--coral);border:2.5px solid var(--ink);box-shadow:0 2px 0 rgba(8,30,40,.3);
  }
  .vol input[type=range]::-moz-range-track{
    height:12px;border-radius:7px;background:var(--cream);border:2px solid rgba(15,59,74,.3);
  }
  .vol input[type=range]::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink);
  }
  .vol input[type=range]:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:8px}
  .vol.off{opacity:.45}

  /* Dev mode: coral chip so it reads as "on", and clickable despite the HUD's pointer-events:none. */
  #topbar .chip:not(#devChip){background:#1b5566;box-shadow:none}
  #srvChip{letter-spacing:1.2px}
  #srvChip .st,#homeOnline .st{color:#e07070}
  #srvChip.wait .st,#homeOnline.wait .st{color:var(--yellow)}
  #srvChip.on .st,#homeOnline.on .st{color:#3ec46d}
  #devChip{
    pointer-events:auto;cursor:pointer;background:var(--coral);color:#fff;letter-spacing:2px;
  }
  #devChip:hover{transform:translateY(-2px)}
  .btn.dev-on,.btn.ghost.dev-on{background:var(--coral);box-shadow:0 5px 0 var(--coral-dark);color:#fff}
  .btn.dev-on:hover,.btn.ghost.dev-on:hover{box-shadow:0 7px 0 var(--coral-dark)}

  #bottombar{
    position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:flex-end;
    padding:14px calc(18px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
    flex-wrap:wrap;
  }
  .stat{
    background:var(--ink);border-radius:15px;padding:8px 18px 10px;text-align:center;
    box-shadow:0 4px 0 rgba(8,30,40,.35);min-width:88px;
  }
  .stat label{display:block;font-size:10px;font-weight:800;letter-spacing:2.5px;color:#8fd7e4}
  .stat b{display:inline-block;font-family:'Lilita One';font-size:27px;color:#fff;line-height:1.05;font-weight:400}
  .stat b small{font-size:14px;color:#8fb9c6}
  /* spans ignore transform, so a popping number has to be a box */
  #pushNum,#lvlNum,#totStars,#homeStars,#pgStars,#gPush,#gPar,#gLeftNum,#eStars{display:inline-block}
  .bump{animation:juiceBump .38s cubic-bezier(.34,1.56,.64,1);transform-origin:center center}
  @keyframes juiceBump{
    0%{transform:scale(1)}
    35%{transform:scale(1.42) rotate(-6deg)}
    68%{transform:scale(.9) rotate(3deg)}
    100%{transform:scale(1) rotate(0)}
  }
  .chip.stars-chip{align-self:center}
  .hint{
    margin-left:auto;align-self:center;background:rgba(15,59,74,.82);color:#d9f2f7;
    font-size:12.5px;font-weight:700;letter-spacing:.4px;padding:9px 14px;border-radius:999px;
  }
  .hint b{color:var(--yellow)}

  #tourOv{position:absolute;inset:0;z-index:8;pointer-events:none}
  #tourOv[hidden]{display:none}
  #tourSpot{
    position:absolute;border-radius:14px;border:3px solid var(--yellow);
    box-shadow:0 0 0 9999px rgba(8,36,47,.62);
    transition:left .2s, top .2s, width .2s, height .2s;
  }
  .tour-bubble{
    position:absolute;pointer-events:auto;width:min(300px, calc(100% - 24px));
    background:#fff9ec;border:4px solid var(--ink);border-radius:18px;
    box-shadow:0 8px 0 rgba(15,59,74,.35);padding:14px 16px;text-align:left;
  }
  .tour-bubble h3{font-family:'Lilita One';font-weight:400;font-size:22px;margin:0 0 6px;letter-spacing:.4px;color:var(--ink)}
  .tour-bubble p{margin:0 0 12px;font-size:13px;font-weight:700;color:#3a4a42;line-height:1.4}
  .tour-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
  .tour-row .btn{flex:1;min-width:0;font-size:13px;padding:8px 10px;letter-spacing:.8px}

  #toast{
    position:absolute;left:50%;bottom:96px;transform:translate(-50%,16px);
    background:var(--coral);color:#fff;font-family:'Lilita One';font-size:17px;letter-spacing:1px;
    padding:11px 22px;border-radius:999px;box-shadow:0 5px 0 var(--coral-dark);
    opacity:0;transition:opacity .2s;white-space:nowrap;
  }
  #toast.on{opacity:1;transform:translate(-50%,0);animation:toastPop .46s cubic-bezier(.22,1.45,.36,1)}
  #toast.on.bad{animation:toastBad .5s cubic-bezier(.22,1.2,.36,1)}

  /* ---------- Overlays (child of the stage, so panels centre on the game screen) ---------- */
  .overlay{
    position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 130% at 50% 15%, rgba(10,45,58,.30), rgba(8,36,47,.62));
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s ease, visibility .4s ease;
  }
  .overlay.on{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .overlay.leaving{
    opacity:0;visibility:visible;pointer-events:auto;
  }
  /* Dropped after it closes, so the home path and its postcards leave the render tree. */
  .overlay.gone{display:none !important}
  /* The overlay stays pinned to the stage (inset: 0). Scaling that box made a tall
     window either shove the play buttons off the bottom or leave the game showing
     underneath. The painting and the menu are drawn at 1/--ui and scaled back to
     fill the frame. The painting grows from the top-left so it stays flush. The
     menu grows from its own centre, so the open and close zoom stays on screen
     instead of sliding toward the bottom-right. */
  #homeOv{overflow:hidden}
  #homeOv .home-scenes{
    top:0;left:0;right:auto;bottom:auto;
    width:calc(100% / var(--ui, 1));
    height:calc(100% / var(--ui, 1));
    transform:scale(var(--ui, 1));
    transform-origin:top left;
  }
  /* Insets, not width/height. The ad script sets height:auto !important on this
     box, which dropped a percentage height and left the postcard showing under
     the news on a tall phone. Top and bottom still stretch an auto height. */
  #homeOv > .home-screen{
    position:absolute;flex:none;
    top:calc(50% - 50% / var(--ui, 1));
    right:calc(50% - 50% / var(--ui, 1));
    bottom:calc(50% - 50% / var(--ui, 1));
    left:calc(50% - 50% / var(--ui, 1));
    width:auto;height:auto;
    transform-origin:center center;
  }
  #setOv,#helpOv,#aboutOv,#newsOv{z-index:20}
  .panel{
    background:#fff9ec;border:4px solid var(--ink);border-radius:24px;
    box-shadow:0 10px 0 rgba(15,59,74,.35), 0 30px 60px rgba(6,26,36,.45);
    padding:20px 30px 22px;width:545px;text-align:center;
    transform:translateY(28px) scale(.94);opacity:0;
    transform-origin:center center;
    transition:transform .28s ease, opacity .28s ease;
    max-height:calc(100% - 20px);overflow-y:auto;
  }
  /* Title stays at the top and the buttons stay at the bottom. Only the middle scrolls. */
  .panel:has(> .panel-body){
    display:flex;flex-direction:column;overflow:hidden;
  }
  .panel:has(> .panel-body) > .kicker,
  .panel:has(> .panel-body) > .gtitle,
  .panel:has(> .panel-body) > .row{flex:0 0 auto}
  .panel-body{
    flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
    --fade:26px;
  }
  .panel-body.fade-top{
    -webkit-mask-image:linear-gradient(#0000,#000 var(--fade));
            mask-image:linear-gradient(#0000,#000 var(--fade));
  }
  .panel-body.fade-bottom{
    -webkit-mask-image:linear-gradient(#000 calc(100% - var(--fade)), #0000);
            mask-image:linear-gradient(#000 calc(100% - var(--fade)), #0000);
  }
  .panel-body.fade-top.fade-bottom{
    -webkit-mask-image:linear-gradient(#0000,#000 var(--fade), #000 calc(100% - var(--fade)), #0000);
            mask-image:linear-gradient(#0000,#000 var(--fade), #000 calc(100% - var(--fade)), #0000);
  }
  .overlay.on .panel{transform:none;opacity:1;animation:panelIn .58s cubic-bezier(.22,1.15,.36,1) both}
  /* AdSense rails in the gutter beside the pause menu. ads.js unhides them only when that gutter can hold an ad. */
  .side-ad{
    position:absolute;top:72px;bottom:88px;z-index:2;
    width:min(300px, max(0px, calc((100% - min(96%, 1080px)) / 2 - 16px)));
    display:flex;align-items:center;justify-content:center;
    pointer-events:auto;
  }
  .side-ad[hidden],
  #titleOv:not(.on) .side-ad{display:none !important}
  #adLeft{left:8px}
  #adRight{right:8px}
  .side-ad .adsbygoogle{
    display:block;width:100%;max-height:100%;
    background:transparent;border-radius:16px;overflow:hidden;
    clip-path:inset(0 round 16px);
  }
  .side-ad iframe{
    border-radius:0;
    background:transparent !important;background-color:transparent !important;
  }
  /* Vertical units in the empty beach beside a help, settings, or about panel. */
  .pop-ad{
    position:absolute;top:36px;bottom:36px;z-index:25;
    width:min(300px, max(0px, calc((100% - 545px) / 2 - 28px)));
    display:flex;align-items:center;justify-content:center;
    pointer-events:auto;
    background:transparent !important;
    border-radius:12px;overflow:hidden;
    clip-path:inset(0 round 12px);
  }
  .pop-ad[hidden]{display:none !important}
  #popAdLeft{left:12px}
  #popAdRight{right:12px}
  .pop-ad .adsbygoogle{
    display:block;width:100%;max-height:100%;
    background:transparent !important;background-color:transparent !important;
    border-radius:16px;overflow:hidden;
    clip-path:inset(0 round 16px);
  }
  .pop-ad iframe{
    display:block;width:100%;max-height:100%;
    background:transparent !important;background-color:transparent !important;
    border-radius:0;
  }
  .kicker{font-size:11px;font-weight:800;letter-spacing:3.5px;color:var(--coral);margin-bottom:4px}
  .gtitle{
    font-family:'Lilita One';font-weight:400;font-size:56px;line-height:.92;
    color:var(--ink);margin:2px 0 4px;
  }
  .gtitle .t2{display:inline-block;color:var(--coral);transform:rotate(-1.5deg)}
  .gtitle .ball-o{
    display:inline-block;width:.78em;height:.78em;margin:0 .03em;
    vertical-align:-.06em;box-shadow:inset -4px -5px 8px rgba(0,0,0,.18);
  }
  .wave-line{display:block;margin:2px auto 8px}
  .tag{font-size:15px;font-weight:600;color:#3d5a66;margin:0 0 12px;line-height:1.45}
  .big-ball{
    width:48px;height:48px;border-radius:50%;margin:0 auto 6px;position:relative;
    background:conic-gradient(#ff5a4e 0 45deg,#fff 45deg 90deg,#ffc93c 90deg 135deg,#fff 135deg 180deg,#2f9dff 180deg 225deg,#fff 225deg 270deg,#3ec46d 270deg 315deg,#fff 315deg);
    box-shadow:inset -6px -8px 12px rgba(0,0,0,.18), 0 10px 16px rgba(90,55,10,.3);
    animation:spin 7s linear infinite;
  }
  .big-ball::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 31% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 36%);
  }
  .rules{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:8px;text-align:left}
  .rules li{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:#33535f;line-height:1.4}
  .rules .ic{
    flex:0 0 26px;height:26px;border-radius:50%;background:var(--ink);color:var(--cream);
    display:grid;place-items:center;font-size:14px;margin-top:1px;
  }
  .credits{list-style:none;margin:2px 0 10px;padding:0;display:grid;text-align:left}
  .credits li{
    display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    padding:7px 0;border-bottom:2px dashed rgba(15,59,74,.12);
    font-size:14px;font-weight:700;color:#33535f;
  }
  .credits b{color:var(--ink);font-weight:800;letter-spacing:.3px}
  .credits span{text-align:right}
  .credit-note{font-size:13px;font-weight:600;color:#3d5a66;line-height:1.5;margin:0}
  .credit-note a{color:var(--coral);font-weight:800}
  /* the map name heading the level card; the .lv-label.th-* rules below tint it per map */
  .lv-label{
    font-family:'Lilita One';font-weight:400;font-size:28px;letter-spacing:1px;line-height:1.05;
    color:var(--ink);margin:0;
  }
  .lv-label.th-sea{color:#2b7f96}
  .home-map{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    width:min(100%,1160px);
  }
  .pg-head{
    text-align:center;background:#fff9ec;border:4px solid var(--ink);border-radius:18px;
    padding:8px 34px 10px;box-shadow:0 5px 0 rgba(15,59,74,.3);
  }
  /* The main page and the pause menu sit on the map painting, so the title and the level path have no card. */
  #homeOv .pg-head,
  #homeOv .home-board,
  #titleOv .pg-head,
  #titleOv .home-board{
    background:transparent;border:none;box-shadow:none;
  }
  #homeOv.home-dark .pg-head .lv-label,
  #titleOv.home-dark .pg-head .lv-label{color:#fff6e8;text-shadow:0 3px 0 rgba(0,0,0,.4)}
  #homeOv.home-dark .pg-meta,
  #titleOv.home-dark .pg-meta{color:rgba(255,246,232,.86)}
  #homeOv .path-line path,
  #titleOv .path-line path{stroke:rgba(15,59,74,.42)}
  #homeOv.home-dark .path-line path,
  #titleOv.home-dark .path-line path{stroke:rgba(255,246,232,.62)}
  .pg-head[hidden]{display:none}
  .pg-meta{margin-top:3px;font-size:12px;font-weight:800;letter-spacing:2px;color:#5b7a80}
  .lv-pick{
    margin:2px 0 0;text-align:center;
    font-family:'Lilita One';font-weight:400;font-size:18px;letter-spacing:.6px;
    color:var(--ink);
  }
  #homeOv.home-dark .lv-pick,
  #titleOv.home-dark .lv-pick{color:#fff6e8;text-shadow:0 3px 0 rgba(0,0,0,.4)}
  .board-row{display:flex;align-items:center;gap:16px;width:100%}
  .home-board{
    flex:1;min-width:0;
    background:#fff9ec;border:4px solid var(--ink);border-radius:24px;
    box-shadow:0 8px 0 rgba(15,59,74,.35), 0 24px 48px rgba(6,26,36,.28);
    padding:12px 14px 14px;
  }
  .pg-btn{
    width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    display:grid;place-items:center;padding:0;
    background:var(--ink);color:var(--cream);font-size:16px;
    box-shadow:0 4px 0 rgba(8,30,40,.35);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
  }
  .pg-btn[hidden]{display:none}
  .pg-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.1);box-shadow:0 7px 0 rgba(8,30,40,.35);animation:iconHop .34s cubic-bezier(.22,1.5,.36,1)}
  .pg-btn:active:not(:disabled){transform:translateY(2px) scale(.88);box-shadow:0 1px 0 rgba(8,30,40,.35);animation:none}
  .pg-btn:disabled{opacity:.3;cursor:default;box-shadow:none}
  .path-well{overflow:hidden}
  .path-map{
    height:142px;padding:14px 20px 0;overflow-x:auto;overflow-y:hidden;border:none;background:transparent;
    scrollbar-width:none;cursor:grab;touch-action:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  }
  .path-map.dragging{cursor:grabbing}
  .path-map::-webkit-scrollbar{display:none;height:0}
  .path-world{position:relative;height:124px;background:transparent}
  .path-line{position:absolute;left:0;top:0;display:block;pointer-events:none}
  .path-node{
    position:absolute;transform:translate(-50%,0);width:74px;border:none;background:none;
    padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
    font-family:inherit;outline:none;
  }
  .path-stars{
    display:flex;gap:3px;justify-content:center;align-items:flex-end;height:18px;
  }
  .path-stars .medal{width:17px;height:17px}
  .star-defs{position:absolute;width:0;height:0;overflow:hidden}
  .medal{display:block;overflow:visible}
  .medal .shade{fill:transparent}
  .medal .face{
    fill:#f4ead2;stroke:#0f3b4a;
    stroke-width:1.7;stroke-linejoin:round;
  }
  .medal .shine{fill:transparent}
  .medal.on .shade{fill:#a35a10}
  .medal.on .face{fill:url(#medalGold);stroke:#0f3b4a}
  .medal.on .shine{fill:rgba(255,255,255,.88)}
  .path-stone{
    width:46px;height:46px;border-radius:12px;border:3px solid var(--ink);
    background:var(--stone, #ffe9b8);color:var(--ink);
    display:grid;place-items:center;box-shadow:0 4px 0 rgba(15,59,74,.35);
    transition:transform .15s, box-shadow .15s;
  }
  .path-stone b{font-family:'Lilita One';font-weight:400;font-size:18px;line-height:1}
  .path-node.cur .path-stone{
    background:var(--stone, #ffd9c4);border-color:var(--coral);transform:translateY(-3px);
    box-shadow:0 0 0 5px rgba(255,107,74,.22), 0 5px 0 rgba(199,74,46,.45);
    animation:stonePop .42s cubic-bezier(.34,1.56,.64,1), stoneIdle 1.7s ease-in-out .42s infinite;
  }
  .path-node.cur .medal.on{animation:medalPop .4s cubic-bezier(.34,1.56,.64,1) backwards}
  .path-node.cur .path-stars .medal:nth-child(2){animation-delay:.06s}
  .path-node.cur .path-stars .medal:nth-child(3){animation-delay:.12s}
  .path-node:not(.locked):hover .path-stone{
    transform:translateY(-6px) scale(1.07);
    animation:btnHop .38s cubic-bezier(.22,1.5,.36,1);
  }
  .path-node:not(.locked):active .path-stone{
    transform:translateY(3px) scale(.88);
    box-shadow:0 1px 0 rgba(15,59,74,.35);
    animation:none;
  }
  .path-node.locked{cursor:not-allowed}
  .path-node.locked .path-stone{
    background:#efe6d2;border-color:rgba(15,59,74,.22);color:#9a8d78;
    box-shadow:none;opacity:.55;
  }
  .path-node.locked .path-stars{opacity:.4}
  .path-node:focus-visible .path-stone{outline:3px solid var(--yellow);outline-offset:3px}
  #titleOv .panel{width:min(96%,1080px);padding:46px 22px 16px}
  #titleOv{
    background:rgba(8,28,40,.46);
  }
  #titleOv .menu-panel{
    overflow:hidden;border:none;
    background:rgba(255,249,236,.18);
    box-shadow:0 22px 50px rgba(6,26,36,.28);
  }
  #titleOv .home-scenes{opacity:.5}
  #titleOv #menuMap,#titleOv .menu-level,#titleOv .menu-actions{position:relative;z-index:1}
  #titleOv .home-map{width:100%}
  #titleOv .menu-actions{width:min(100%,460px);margin:16px auto 0}
  #titleOv .menu-actions .btn{white-space:nowrap}
  @media (max-width:520px){
    #titleOv .menu-actions{grid-template-columns:1fr}
  }
  /* Phone pause menu matches the other popups: one banner at the top, card in the middle. */
  html.phone #titleOv.on{
    box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;
    padding:calc(116px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html.phone #titleOv.on #adLeft{
    position:absolute;
    top:calc(8px + env(safe-area-inset-top, 0px));
    left:12px;right:12px;bottom:auto;
    width:auto;height:100px;max-height:100px;flex:none;
    background:transparent;border-radius:12px;overflow:hidden;
    clip-path:inset(0 round 12px);z-index:3;
  }
  html.phone #titleOv.on #adRight{display:none !important}
  html.phone #titleOv.on .menu-panel{
    flex:0 1 auto;min-height:0;width:min(100%,545px);
    max-height:100%;overflow:hidden;
  }
  html.phone #titleOv.on #adLeft .adsbygoogle,
  html.phone #titleOv.on #adLeft iframe{
    height:100px !important;max-height:100px !important;
    background:transparent !important;background-color:transparent !important;
  }
  html.phone #stage:has(#titleOv.on) #hud{visibility:hidden}
  /* Wide card, no side gutter: the two menu slots sit in the sand above and below it. */
  #titleOv.on.menu-bands{
    flex-direction:column;justify-content:space-between;align-items:center;gap:10px;
    box-sizing:border-box;
    padding:72px 16px 96px;
  }
  #titleOv.on.menu-bands #adLeft,
  #titleOv.on.menu-bands #adRight{
    position:relative;top:auto;right:auto;bottom:auto;left:auto;
    width:min(100%,728px);height:90px;flex:0 0 90px;max-height:90px;
    background:transparent;border-radius:14px;overflow:hidden;z-index:3;
    clip-path:inset(0 round 14px);
  }
  #titleOv.on.menu-bands #adLeft{order:0}
  #titleOv.on.menu-bands #adRight{order:2}
  #titleOv.on.menu-bands .menu-panel{
    order:1;flex:0 1 auto;min-height:0;
    width:min(96%,1080px);
    max-height:calc(100% - 200px);
    overflow-y:auto;
  }
  #titleOv.on.menu-bands .side-ad .adsbygoogle,
  #titleOv.on.menu-bands .side-ad iframe{
    height:90px !important;max-height:90px !important;
  }
  /* Every dialog on a phone gets one banner on the top edge and one on the
     bottom edge. 50px is the mobile banner, so the slot is not taller than the ad. */
  /* Same slot as the main page: one rounded banner under the top edge, not a bar glued to the screen. */
  html.phone #popAdLeft{
    position:absolute;left:12px;right:12px;width:auto;
    top:calc(8px + env(safe-area-inset-top, 0px));bottom:auto;
    height:100px;max-height:100px;z-index:30;
    border-radius:12px;
    background:transparent !important;overflow:hidden;
    clip-path:inset(0 round 12px);
    align-items:stretch;justify-content:stretch;
  }
  html.phone #popAdRight{display:none !important}
  html.phone #popAdLeft .adsbygoogle,
  html.phone #popAdLeft iframe{
    display:block;width:100% !important;height:100px !important;max-height:100px !important;margin:0;
    background:transparent !important;background-color:transparent !important;
    border-radius:0;
  }
  html.phone #helpOv.on,
  html.phone #setOv.on,
  html.phone #aboutOv.on,
  html.phone #newsOv.on,
  html.phone #goalOv.on,
  html.phone #endOv.on,
  html.phone #dryOv.on{
    box-sizing:border-box;flex-direction:column;justify-content:center;
    padding:calc(116px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* The score bar stays off these cards, the way the main page has no play HUD behind them. */
  html.phone #stage:has(#helpOv.on) #hud,
  html.phone #stage:has(#setOv.on) #hud,
  html.phone #stage:has(#aboutOv.on) #hud,
  html.phone #stage:has(#newsOv.on) #hud{
    visibility:hidden;
  }
  /* Stay as tall as the text. A long manual can still grow until it meets the ads. */
  html.phone #helpOv .panel,
  html.phone #setOv .panel,
  html.phone #aboutOv .panel,
  html.phone #newsOv .panel,
  html.phone #goalOv .panel,
  html.phone #endOv .panel,
  html.phone #dryOv .panel{
    flex:0 1 auto;min-height:0;max-height:100%;width:min(100%,545px);
  }
  #titleOv.home-dark .menu-level{color:rgba(255,246,232,.86);text-shadow:none}
  /* The run cannot change level, but the path still shows the one you are on. */
  #titleOv.server-play .path-node{pointer-events:none;cursor:default}
  #titleOv.server-play .menu-level{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 0;
    margin:8px 0 2px;
  }
  #titleOv.server-play .menu-level span{white-space:nowrap}
  #titleOv.server-play .menu-level span:not(:last-child)::after{content:'·';margin:0 .42em;opacity:.55}
  .menu-level{margin:8px 0 2px;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;letter-spacing:2px;line-height:1.3;color:#5b7a80}
  #homeMapSlot{width:min(100%,1160px)}
  #titleOv .menu-hero .big-ball{width:42px;height:42px;margin-bottom:2px}
  #titleOv .menu-hero .gtitle{font-size:48px;margin:0}
  #titleOv .menu-hero .wave-line{margin:0 auto 2px}
  .menu-panel{position:relative}
  .menu-board{
    background:#fff3d4;border:3px solid var(--ink);border-radius:18px;
    padding:8px 8px 8px;margin:6px 0 12px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.65);
  }
  #titleOv #lvSelect{margin:0 auto}
  /* ---------- Home screen ----------
     Top row: news | title | controls. The level path is centred in the space above
     the play buttons, which sit directly above the ad. The grid scrolls if a window is too short. */
  #homeOv{
    z-index:12;flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#7ec8e3;
  }
  .home-scenes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .home-scene{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;pointer-events:none;transform-origin:center center;
  }
  .home-screen{
    position:relative;z-index:1;flex:1;width:100%;min-height:0;align-self:stretch;
    display:grid;gap:12px 24px;
    --home-pad:22px;
    padding:18px var(--home-pad) 0;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto 1fr auto 90px;
    grid-template-areas:
      "news topic tools"
      "main main main"
      "play play play"
      "ad ad ad";
    overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
    opacity:0;transform:scale(calc(var(--ui, 1) * 1.04));
    transition:transform .52s cubic-bezier(.22,1,.36,1), opacity .42s ease;
  }
  #homeOv.on > .home-screen{opacity:1;transform:scale(var(--ui, 1))}
  /* A phone skips the open zoom. That zoom composites the whole main page on the
     same frames the postcard is first drawn. */
  html.phone #homeOv .home-screen{opacity:1;transform:scale(var(--ui, 1));transition:none}
  html.phone #homeOv.on .home-topic,
  html.phone #homeOv.on .home-side,
  html.phone #homeOv.on .home-tools,
  html.phone #homeOv.on .home-main,
  html.phone #homeOv.on .home-actions{animation:none}
  html.phone #stage:not(:has(#homeOv.on)) #topbar,
  html.phone #stage:not(:has(#homeOv.on)) #bottombar{animation:none}
  .home-side{
    grid-area:news;justify-self:start;align-self:start;
    display:flex;align-items:flex-start;gap:12px;
  }
  /* The side row is news plus the star and online chips. Below this width that
     row runs into the title, so the chips sit above the news card instead. */
  @media (max-width:1600px){
    .home-side{flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
    .home-links{order:-1;max-width:100%}
    .home-news{flex-basis:auto;width:min(270px,100%);max-width:100%}
  }
  .home-links{display:flex;gap:8px;flex:0 0 auto;align-items:center}
  .home-editor{flex:0 0 auto;align-self:flex-start;text-decoration:none;white-space:nowrap}
  .home-news{
    flex:0 0 auto;width:270px;height:auto;
    background:rgba(255,249,236,.94);border:3px solid var(--ink);border-radius:16px;
    box-shadow:0 5px 0 rgba(15,59,74,.3);
    padding:10px 14px 6px;text-align:left;
    display:flex;flex-direction:column;min-height:0;
  }
  /* Extra stories scroll inside the card. A wide desktop shows more before that starts. */
  .news-feed{
    min-height:0;max-height:250px;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;
    scrollbar-color:rgba(15,59,74,.4) transparent;
  }
  .news-feed::-webkit-scrollbar{width:6px}
  .news-feed::-webkit-scrollbar-thumb{background:rgba(15,59,74,.4);border-radius:99px}
  .news-head{
    display:flex;align-items:center;gap:7px;margin-bottom:2px;
    font-size:11px;font-weight:800;letter-spacing:3px;color:var(--coral);
  }
  .news-head::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--coral)}
  .news-card{display:grid;gap:1px;padding:7px 0;border-top:2px dashed rgba(15,59,74,.14)}
  .news-card:first-of-type{border-top:none}
  .news-card b{font-size:13px;letter-spacing:.3px;color:var(--ink)}
  .news-card span{font-size:12.5px;font-weight:700;line-height:1.35;color:#5d767c}
  .home-topic{grid-area:topic;align-self:start;text-align:center;padding-top:2px}
  .home-gap{display:none}
  /* A wide desktop keeps one bar along the bottom.
     The stacked main page is the mobile layout, so that bar sits above the controls.
     A short window keeps a thin bar at the bottom. */
  .home-ad-top{display:none}
  #homeOv .gtitle{
    font-size:clamp(44px,5.4vw,76px);margin:0;text-shadow:0 5px 0 rgba(255,255,255,.55);
    transition:color .45s ease, text-shadow .45s ease;
  }
  #homeOv .gtitle .topic-ball{
    display:inline-block;width:.82em;height:.82em;margin:0 .03em;vertical-align:-.08em;
    transition:opacity .24s ease, transform .24s ease;
  }
  #homeOv .gtitle .topic-ball.out{opacity:0;transform:scale(.84)}
  #homeOv.home-dark .gtitle{color:#fff6e8;text-shadow:0 5px 0 rgba(0,0,0,.38)}
  #homeOv.home-dark .home-copy{color:rgba(255,246,232,.82)}
  #homeOv.home-dark button.home-copy:hover{color:#ff6b4a}
  @media (prefers-reduced-motion:reduce){
    #homeOv .gtitle,#homeOv .gtitle .topic-ball{transition:none}
  }
  #homeOv .wave-line{margin:4px auto 0}
  .home-blurb{
    margin:8px auto 0;max-width:28em;
    font-size:14px;font-weight:700;line-height:1.35;letter-spacing:0;
    color:rgba(15,59,74,.88);
  }
  #homeOv.home-dark .home-blurb{color:rgba(255,246,232,.9)}
  .home-copy{
    margin:6px 0 0;max-width:34em;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.4;
    color:rgba(15,59,74,.72);transition:color .45s ease;
    background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  }
  button.home-copy:hover{color:var(--coral)}
  .home-copy .copy-short{display:none}
  html.phone .home-copy .copy-wide{display:none}
  html.phone .home-copy .copy-short{display:inline}
  .home-tools{
    grid-area:tools;justify-self:end;align-self:start;
    display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;gap:8px 10px;
  }
  .tool-group{display:flex;gap:8px;align-items:center}
  .home-links .chip,.home-tools .chip,.home-btns .btn{white-space:nowrap}
  .home-main{
    grid-area:main;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  /* Centered horizontal unit. The row stays 90px so the page does not jump when the ad arrives. */
  .home-ads{
    grid-area:ad;display:grid;grid-template-columns:minmax(0,1fr);
    align-items:end;justify-items:center;width:100%;min-width:0;min-height:0;
  }
  .home-ad{
    justify-self:center;align-self:end;
    width:min(100%,728px);height:90px;
    background:transparent !important;border:none;border-radius:12px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;
    clip-path:inset(0 round 12px);
  }
  .home-ad .adsbygoogle,
  .home-ad iframe{
    display:block;width:100% !important;height:90px !important;max-height:90px;
    background:transparent !important;background-color:transparent !important;
    border-radius:0;
  }
  .home-actions{
    grid-area:play;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;
  }
  .home-btns{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;width:min(100%,480px)}
  .home-btns .btn{width:100%;padding:15px 16px}
  #homePlay{font-size:22px}
  .menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .menu-actions .btn{width:100%;padding:14px 12px}
  .menu-link{
    margin-top:10px;border:none;background:none;cursor:pointer;
    font-family:inherit;font-weight:800;font-size:12px;letter-spacing:1.6px;
    color:#7a8f7d;
  }
  .menu-link:hover{color:var(--coral)}
  .menu-link.dev-on{color:var(--coral)}
  #titleOv .foot{margin-top:8px}
  .lv{
    width:40px;height:44px;border-radius:9px;border:3px solid var(--ink);background:#ffe9b8;
    cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
    box-shadow:0 4px 0 rgba(15,59,74,.35);transition:transform .15s, box-shadow .15s;font-family:inherit;
  }
  .lv b{font-family:'Lilita One';font-weight:400;font-size:15px;color:var(--ink)}
  .lv .mini{font-size:7.5px;color:#c77b2e;letter-spacing:.5px}
  .lv:not(.locked):hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(15,59,74,.35)}
  .lv:not(.locked):active{transform:translateY(1px);box-shadow:0 2px 0 rgba(15,59,74,.35)}
  .lv.locked{background:#e9dcb8;opacity:.5;cursor:not-allowed;box-shadow:none}
  .lv.locked .mini{color:#9a8c6a}
  .lv.cur{border-color:var(--coral);background:#ffd9c4}
  /* each map's tiles wear that map's colours, so the wall reads as three maps at a glance:
     warm cream for sand, cool shallow water for the deep, concrete and amber for the city */
  .lv.th-sea{background:#bfe6ef}
  .lv.th-sea .mini{color:#2b7f96}
  .lv.th-sea.locked{background:#c3d6da}
  .lv.th-sea.locked .mini{color:#7e949a}
  .lv.th-sea.cur{border-color:var(--teal);background:#8fd7e4}
  .lv-label.th-city{color:#8a8577}
  .lv.th-city{background:#d9d6cc}
  .lv.th-city .mini{color:#9a7b2e}
  .lv.th-city.locked{background:#d5d2c9}
  .lv.th-city.locked .mini{color:#9c9a92}
  .lv.th-city.cur{border-color:var(--yellow);background:#ffe0a0}
.lv-label.th-bowl{color:#8a5a2b}
.lv.th-bowl{background:#e8d3a8}
.lv.th-bowl .mini{color:#a8702e}
.lv.th-bowl.locked{background:#dcd3c0}
.lv.th-bowl.locked .mini{color:#9c9a92}
.lv.th-bowl.cur{border-color:var(--coral);background:#f3dcae}
.lv-label.th-room{color:#8a5a7a}
.lv.th-room{background:#f0d9e6}
.lv.th-room .mini{color:#a8608c}
.lv.th-room.locked{background:#ded2d8}
.lv.th-room.locked .mini{color:#9c9298}
.lv.th-room.cur{border-color:#d96b9e;background:#f6c9dd}
.lv-label.th-garden{color:#4e8a3f}
.lv.th-garden{background:#cfe9a8}
.lv.th-garden .mini{color:#5d8a2e}
.lv.th-garden.locked{background:#d8dfc6}
.lv.th-garden.locked .mini{color:#93a087}
.lv.th-garden.cur{border-color:#6cbb57;background:#b6e08a}
.lv-label.th-farm{color:#8a6a2b}
.lv.th-farm{background:#f0dda6}
.lv.th-farm .mini{color:#a8802c}
.lv.th-farm.locked{background:#e0d8c4}
.lv.th-farm.locked .mini{color:#9c9a92}
.lv.th-farm.cur{border-color:#e0b654;background:#f7e6b0}
.lv-label.th-sky{color:#3f6fa8}
.lv.th-sky{background:#cbe4f7}
.lv.th-sky .mini{color:#3f6fa8}
.lv.th-sky.locked{background:#d3dde6}
.lv.th-sky.locked .mini{color:#8f9aa6}
.lv.th-sky.cur{border-color:#b07ad8;background:#dcc4f2}
.lv.th-forest{background:#bfd9a6}
.lv.th-forest .mini{color:#4d7a2c}
.lv.th-forest.locked{background:#d3dcc4}
.lv.th-forest.locked .mini{color:#8e9a84}
.lv.th-forest.cur{border-color:#3f7a34;background:#a3cf84}
.lv.th-polar{background:#d6eaf6}
.lv.th-polar .mini{color:#3c6f92}
.lv.th-polar.locked{background:#dae1e6}
.lv.th-polar.locked .mini{color:#8f9aa2}
.lv.th-polar.cur{border-color:#4a8fb8;background:#b6dcf0}
.lv-label.th-china{color:#c74a2e}.lv.th-china{background:#efc4b4}.lv.th-china .mini{color:#c74a2e}.lv.th-china.locked{background:#e2d2c8}.lv.th-china.locked .mini{color:#9a8a80}.lv.th-china.cur{border-color:#c74a2e;background:#f6d0c0}
.lv-label.th-snow{color:#3c6f92}.lv.th-snow{background:#e2f0f8}.lv.th-snow .mini{color:#3c6f92}.lv.th-snow.locked{background:#dde6ec}.lv.th-snow.locked .mini{color:#8f9aa2}.lv.th-snow.cur{border-color:#2f7f96;background:#cfe6f4}
.lv-label.th-old{color:#8a6a4a}.lv.th-old{background:#e8d8bc}.lv.th-old .mini{color:#8a6a4a}.lv.th-old.locked{background:#e2dace}.lv.th-old.locked .mini{color:#9a9080}.lv.th-old.cur{border-color:#c98a4b;background:#f2e2c4}
.lv-label.th-isle{color:#c77b2e}.lv.th-isle{background:#f6e2b4}.lv.th-isle .mini{color:#c77b2e}.lv.th-isle.locked{background:#ece0c4}.lv.th-isle.locked .mini{color:#a89a80}.lv.th-isle.cur{border-color:#ff6b4a;background:#ffe0c8}
.lv-label.th-mart{color:#2f7f96}.lv.th-mart{background:#f2eee6}.lv.th-mart .mini{color:#2f7f96}.lv.th-mart.locked{background:#e4e2dc}.lv.th-mart.locked .mini{color:#9aa0a0}.lv.th-mart.cur{border-color:#ff5a4e;background:#ffe8e0}
.lv-label.th-office{color:#4a5157}.lv.th-office{background:#dde3ea}.lv.th-office .mini{color:#2f3a42}.lv.th-office.locked{background:#e0e4e8}.lv.th-office.locked .mini{color:#98a0a8}.lv.th-office.cur{border-color:#ffc93c;background:#fff0c8}
.lv-label.th-circus{color:#c74a2e}.lv.th-circus{background:#f8d8b0}.lv.th-circus .mini{color:#c74a2e}.lv.th-circus.locked{background:#eadcc8}.lv.th-circus.locked .mini{color:#a8988a}.lv.th-circus.cur{border-color:#2f9dff;background:#dcecff}
.lv-label.th-island{color:#2f7f96}.lv.th-island{background:#d6ecd0}.lv.th-island .mini{color:#2f7f96}.lv.th-island.locked{background:#dfe8dc}.lv.th-island.locked .mini{color:#8fa29a}.lv.th-island.cur{border-color:#ff6b4a;background:#ffe4d0}
.lv-label.th-harbour{color:#1d6478}.lv.th-harbour{background:#d4e2ea}.lv.th-harbour .mini{color:#1d6478}.lv.th-harbour.locked{background:#dde4e8}.lv.th-harbour.locked .mini{color:#8f9aa2}.lv.th-harbour.cur{border-color:#ff5a4e;background:#ffe0dc}
.lv-label.th-venice{color:#1d6478}.lv.th-venice{background:#e8dcc8}.lv.th-venice .mini{color:#1d6478}.lv.th-venice.locked{background:#e4ded4}.lv.th-venice.locked .mini{color:#9a968c}.lv.th-venice.cur{border-color:#c74a2e;background:#f4dcd0}
.lv-label.th-night{color:#33507e}.lv.th-night{background:#9fb2c8}.lv.th-night .mini{color:#101d33}.lv.th-night.locked{background:#b8c2cc}.lv.th-night.locked .mini{color:#6f7a86}.lv.th-night.cur{border-color:#ffc93c;background:#ffe7a8}
.lv-label.th-jungle{color:#2c6128}.lv.th-jungle{background:#c4dcb0}.lv.th-jungle .mini{color:#2c6128}.lv.th-jungle.locked{background:#d2dcc8}.lv.th-jungle.locked .mini{color:#8a9a80}.lv.th-jungle.cur{border-color:#ffc93c;background:#f0e8b0}
.lv-label.th-castle{color:#5a5248}.lv.th-castle{background:#dcd8ce}.lv.th-castle .mini{color:#5a5248}.lv.th-castle.locked{background:#e0ddd6}.lv.th-castle.locked .mini{color:#9a968e}.lv.th-castle.cur{border-color:#ffc93c;background:#f4ecd0}
.lv-label.th-road{color:#6e5a44}.lv.th-road{background:#e8dcc0}.lv.th-road .mini{color:#6e5a44}.lv.th-road.locked{background:#e4ddd0}.lv.th-road.locked .mini{color:#9a9080}.lv.th-road.cur{border-color:#3ec46d;background:#dcf0cc}
.lv-label.th-cave{color:#2f7f96}.lv.th-cave{background:#b8c4cc}.lv.th-cave .mini{color:#0a2a36}.lv.th-cave.locked{background:#c8ced2}.lv.th-cave.locked .mini{color:#7a868e}.lv.th-cave.cur{border-color:#5fd4e6;background:#d0f0f6}
.lv-label.th-dragon{color:#8c2f1c}.lv.th-dragon{background:#d8b8a8}.lv.th-dragon .mini{color:#8c2f1c}.lv.th-dragon.locked{background:#dccdc4}.lv.th-dragon.locked .mini{color:#9a8a80}.lv.th-dragon.cur{border-color:#ffc93c;background:#f8e4b0}
.lv-label.th-volcano{color:#c74a2e}.lv.th-volcano{background:#e0b8a0}.lv.th-volcano .mini{color:#8c2f1c}.lv.th-volcano.locked{background:#dccbc0}.lv.th-volcano.locked .mini{color:#9a8a80}.lv.th-volcano.cur{border-color:#ff6b4a;background:#ffd8c0}
.lv-label.th-dungeon{color:#4a5157}.lv.th-dungeon{background:#c0c2c8}.lv.th-dungeon .mini{color:#2f3a42}.lv.th-dungeon.locked{background:#cdced2}.lv.th-dungeon.locked .mini{color:#8a8e94}.lv.th-dungeon.cur{border-color:#ff6b4a;background:#f4d8c8}
.lv-label.th-boss{color:#8f5cb8}.lv.th-boss{background:#c8b8d0}.lv.th-boss .mini{color:#8f5cb8}.lv.th-boss.locked{background:#d0cad4}.lv.th-boss.locked .mini{color:#8e8896}.lv.th-boss.cur{border-color:#ffc93c;background:#f4e4b8}
.lv-label.th-forge{color:#8c2f1c}.lv.th-forge{background:#e0c0a8}.lv.th-forge .mini{color:#5a3e2c}.lv.th-forge.locked{background:#ddd0c6}.lv.th-forge.locked .mini{color:#9a8a80}.lv.th-forge.cur{border-color:#ff6b4a;background:#ffd8b8}
  .row{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
  .btn{
    font-family:'Lilita One';font-size:18px;letter-spacing:1.5px;color:#fff;border:none;cursor:pointer;
    background:var(--coral);border-radius:999px;padding:13px 30px;
    box-shadow:0 5px 0 var(--coral-dark);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
  }
  .btn:hover:not(:disabled){transform:translateY(-6px) scale(1.07);box-shadow:0 10px 0 var(--coral-dark);animation:btnHop .38s cubic-bezier(.22,1.5,.36,1)}
  .btn:active:not(:disabled){transform:translateY(3px) scale(.92);box-shadow:0 1px 0 var(--coral-dark);animation:none}
  .btn.ghost{background:var(--ink);box-shadow:0 5px 0 var(--ink-deep);color:var(--cream)}
  .btn.ghost:hover:not(:disabled){box-shadow:0 8px 0 var(--ink-deep)}
  .btn.ghost:active:not(:disabled){box-shadow:0 1px 0 var(--ink-deep)}
  .btn.ghost.home-editor{
    box-sizing:border-box;height:42px;padding:0 14px;font-size:15px;letter-spacing:1px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 4px 0 rgba(8,30,40,.35);
  }
  .home-editor .lbl-short{display:none}
  .btn.ghost.home-editor:hover{box-shadow:0 6px 0 rgba(8,30,40,.35)}
  .btn.ghost.home-editor:active{box-shadow:0 1px 0 rgba(8,30,40,.35)}
  .star-row{margin:6px 0 2px}
  .star{font-size:44px;display:inline-block;margin:0 7px;color:#e6d9ba;line-height:1}
  .star.on{color:var(--yellow);text-shadow:0 3px 0 rgba(165,115,0,.3);animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
  @keyframes pop{0%{transform:scale(0) rotate(-45deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
  .score-line{font-size:16px;font-weight:700;color:#33535f;margin:6px 0 2px}
  .score-line b{color:var(--ink);font-family:'Lilita One';font-weight:400;font-size:20px}
  .best-tag{
    display:inline-block;margin-top:6px;background:var(--yellow);color:var(--ink);
    font-weight:800;font-size:12px;letter-spacing:1.5px;padding:5px 12px;border-radius:999px;
    animation:pop .5s cubic-bezier(.34,1.56,.64,1) .2s both;
  }
  .total-big{font-family:'Lilita One';font-size:44px;color:var(--ink);margin:4px 0 2px}
  .total-big span{color:var(--yellow);-webkit-text-stroke:2px var(--ink)}
  #dryTime{color:var(--coral);font-size:64px;line-height:1;margin:8px 0 14px}
  .foot{font-size:12px;font-weight:700;color:#9aa78d;margin-top:12px;letter-spacing:1px}
  .foot a{color:var(--coral);text-decoration:none}
  .foot a:hover{text-decoration:underline}

  /* narrow windows: stack the home screen and trim the HUD so nothing runs off the edge */
  @media (max-width:860px){
    .home-screen{
      --home-pad:14px;
      gap:14px;padding:12px var(--home-pad) 0;
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:auto 1fr auto auto auto auto 90px;
      grid-template-areas:"tools" "." "topic" "main" "play" "news" "ad";
    }
    .home-tools{justify-self:stretch;justify-content:space-between;flex-wrap:nowrap}
    .home-tools .tool-chips{order:0}
    .home-side{justify-self:center;flex-direction:column;align-items:stretch;width:100%}
    .home-links{order:-1}
    .home-news{flex-basis:auto;width:100%;max-width:none;align-self:stretch}
    html.phone .home-screen{grid-template-rows:auto 1fr auto auto auto auto 0px}
  }
  /* Same stacked page as above, with room for a banner. The bottom bar belongs to the
     wide desktop grid; here the one bar is the mobile slot above the controls. */
  @media (max-width:860px) and (min-height:561px){
    .home-screen{
      grid-template-rows:100px auto minmax(0,1fr) auto auto auto auto 0px;
      grid-template-areas:"banner" "tools" "." "topic" "main" "play" "news" "ad";
    }
    .home-ad-top{
      display:flex;grid-area:banner;align-self:stretch;align-items:center;justify-content:center;
      width:100%;height:100px;min-height:100px;max-height:100px;
      background:transparent;border-radius:12px;overflow:hidden;
      clip-path:inset(0 round 12px);
    }
    .home-ad-top .adsbygoogle,
    .home-ad-top iframe{
      height:100px !important;max-height:100px !important;
      background:transparent !important;background-color:transparent !important;
      border-radius:0;
    }
    .home-ads,
    .home-ad{
      display:none !important;height:0 !important;min-height:0 !important;max-height:0 !important;
    }
  }
  /* short windows (phones on their side, small laptop windows): the play button must fit without scrolling */
  @media (max-height:560px) and (min-width:561px){
    .home-screen{
      --home-pad:16px;
      gap:8px 18px;padding:10px var(--home-pad) 0;
      grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
      grid-template-rows:auto 1fr auto 50px;
      grid-template-areas:"news topic tools" "main main main" "play play play" "ad ad ad";
    }
    .home-side,#homeStarsChip,#homeOv .wave-line,.home-copy,.home-blurb{display:none}
    .home-ad,.home-ad .adsbygoogle{height:50px !important;max-height:50px}
    .home-tools{justify-self:end;flex-wrap:nowrap}
    #homeOv .gtitle{font-size:38px}
    .home-tools .icon-btn{width:36px;height:36px;font-size:17px}
    .home-tools .icon-btn svg{width:18px;height:18px}
    .home-main{gap:10px}
    .home-map{gap:6px}
    .board-row{gap:10px}
    .home-board{padding:8px 10px 10px;border-radius:20px}
    .lv-label{font-size:22px}
    .path-map{height:128px;padding-top:6px}
    .home-actions{flex-direction:row;justify-content:center;gap:12px}
    .home-btns{width:auto;grid-template-columns:auto auto}
    .home-btns .btn{padding:11px 26px}
    #homePlay{font-size:19px}
  }
  @media (max-height:560px) and (min-width:561px) and (max-width:760px){
    .home-screen{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"topic tools" "main main" "play play" "ad ad"}
    .home-topic{text-align:left}
  }
  @media (max-width:620px){
    #topbar{padding:calc(6px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 6px calc(10px + env(safe-area-inset-left, 0px))}
    .logo{font-size:18px;gap:7px}
    #topbar .logo{padding:6px 12px 8px}
    .logo-ball{width:14px;height:14px;flex:0 0 14px}
    .top-right{gap:6px}
    .top-right .chip:not(#srvChip){display:none}          /* the level's own stars still show bottom-left */
    .icon-btn{width:36px;height:36px;font-size:17px}
    .icon-btn svg{width:18px;height:18px}
    .btn.ghost.home-editor{height:36px;padding:0 12px;font-size:14px}
    #bottombar{padding:10px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));gap:7px}
    .hint{display:none}
    .stat{min-width:66px;padding:6px 11px 8px}
    .stat label{font-size:9px;letter-spacing:1.6px}
    .stat b{font-size:20px}
    .chip{font-size:12px;padding:8px 11px}
    .panel{width:min(94%,545px);padding:18px 18px 20px}
    .home-map{gap:8px}
    .board-row{gap:8px}
    .home-board{padding:10px 10px 12px;border-radius:20px}
    .lv-label{font-size:23px}
    .pg-meta,.menu-level{font-size:11px;letter-spacing:1.5px}
    .home-btns{grid-template-columns:1fr;width:min(100%,360px)}
    #titleOv .panel{width:min(94%,545px)}
    .pg-btn{width:36px;height:36px;font-size:14px}
    .lv{width:28px;height:33px;border-radius:8px}
    .lv b{font-size:14px}
    .lv .mini{font-size:6.5px}
  }
  /* Phones: the extra full-screen button has to stay on screen with Menu. Drop the
     connection chip (the main page still shows it) and tighten the icon row. */
  @media (max-width:520px){
    #srvChip{display:none}
    #topbar{padding:calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 6px calc(8px + env(safe-area-inset-left, 0px))}
    #topbar .logo{font-size:16px;padding:5px 10px 6px;gap:6px}
    .top-right{gap:4px}
    .icon-btn{width:34px;height:34px;font-size:16px}
    .icon-btn svg{width:16px;height:16px}
    .home-tools .tool-group{gap:4px}
    .home-tools .icon-btn{width:30px;height:30px}
    .home-tools .icon-btn svg{width:15px;height:15px}
  }

  /* Phone play: canvas.js fits the 16:9 course in the screen and sets html.phone.
     Reset stands in for the R key. Portrait keeps the hint above the bar, in the
     margin around the course. A phone on its side has no margin, so the hint
     sits in the bar and the extra chips stay off the course. */
  #resetBtn{display:none}
  html.phone #game{box-shadow:0 14px 36px rgba(8,30,40,.28)}
  html.phone #topbar .logo{font-size:16px;padding:5px 10px 6px;gap:6px}
  html.phone .logo-ball{width:14px;height:14px;flex-basis:14px}
  html.phone #topbar .icon-btn{width:36px;height:36px;font-size:16px}
  html.phone #topbar .icon-btn svg{width:18px;height:18px}
  html.phone #topbar .chip:not(#devChip){display:none}
  /* The map arrows sit beside the name, so the level path can use the full width. */
  html.phone .home-map{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 36px;
    grid-template-areas:"prev title next" "path path path" "info info info";
    align-items:center;justify-items:center;
    column-gap:6px;row-gap:14px;width:100%;
  }
  html.phone .pg-head{grid-area:title;width:100%;padding:0 2px}
  html.phone .board-row{display:contents}
  html.phone .home-board{grid-area:path;width:100%;min-width:0}
  html.phone #pgPrev{grid-area:prev}
  html.phone #pgNext{grid-area:next}
  html.phone .lv-pick{grid-area:info;margin-top:0;font-size:16px}
  html.phone .path-map{height:130px;padding-top:4px;padding-bottom:0}
  html.phone .home-board{padding-top:0;padding-bottom:0}
  html.phone #resetBtn{
    display:grid;margin-left:auto;align-self:center;pointer-events:auto;
    width:40px;height:40px;font-size:22px;
  }
  html.phone.server-run #resetBtn{display:none}
  html.phone #missionHint{display:none}
  html.phone .home-news{display:block;flex:0 1 auto;width:min(100%,520px)}
  html.phone #homeNews{display:none}
  #homeNews{display:none}
  html.phone .home-ads,
  html.phone .home-ad{
    display:none !important;height:0 !important;min-height:0 !important;max-height:0 !important;
  }
  #newsOv .news-list{text-align:left;margin:2px 0 6px}
  #newsOv .news-card{padding:10px 0}
  html.phone #bottombar{
    flex-wrap:nowrap;gap:6px;
    padding:8px calc(10px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
  }
  html.phone #bottombar .chip{min-width:0}
  html.phone .stat{min-width:62px;padding:5px 10px 6px}
  html.phone .stat label{font-size:9px;letter-spacing:1.4px}
  html.phone .stat b{font-size:20px}
  /* Narrow phones keep Full screen beside Menu. Shrink the logo and the icon row
     so both stay on screen with sound, settings, and help. */
  @media (max-width:400px){
    /* 32px play circles vs 36px main-page circles. Grow the whole play HUD.
       Tighter bar spacing keeps that larger row on a narrow phone, and the
       circles do not squash into ovals when the row is tight. */
    #hud{--play:calc(var(--ui, 1) * 36 / 32)}
    html.phone #bottombar{
      gap:4px;
      padding:8px calc(6px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));
    }
    html.phone #resetBtn,
    html.phone #topbar .icon-btn{flex-shrink:0}
    html.phone #bottombar .chip,
    html.phone .stat label,
    html.phone .stat b{white-space:nowrap}
    html.phone #topbar .logo{font-size:15px;padding:4px 9px 5px;letter-spacing:.4px}
    html.phone #topbar .top-right{gap:3px}
    html.phone #topbar .icon-btn{width:32px;height:32px;font-size:15px}
    html.phone #topbar .icon-btn svg{width:16px;height:16px}
    html.phone .home-tools{column-gap:6px}
    html.phone .home-links .chip{padding:7px 8px;letter-spacing:.8px}
  }
  @media (max-width:340px){
    html.phone #topbar .logo{font-size:13px;padding:4px 7px 5px;gap:4px}
    html.phone #topbar .logo-ball{width:12px;height:12px;flex-basis:12px}
  }
  /* The magnified bar is one line on a 340px screen. Below that, give the
     logo a gap and let the level boxes share width so PAR and the stars stay readable. */
  @media (max-width:334px){
    html.phone #topbar .logo{font-size:12px;padding:4px 5px 5px}
    html.phone .stat{min-width:56px}
    html.phone #bottombar .chip{letter-spacing:.5px;padding:7px 8px}
  }
  @media (max-height:560px) and (min-width:561px){
    html.phone .home-screen{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-rows:auto minmax(0,1fr) auto auto 0px;
      grid-template-areas:"topic tools" "main main" "play play" "news news" "ad ad";
      column-gap:16px;
    }
    html.phone #homeOv .gtitle{font-size:clamp(26px, 4.5vw, 40px);white-space:nowrap}
    html.phone .home-topic{justify-self:start;text-align:left;min-width:0;overflow:visible}
    html.phone .home-tools{justify-self:end}
    html.phone .home-side{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}
  }
  html.phone .panel{
    width:min(94vw,545px);
    max-height:calc(100% - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  html.phone .home-screen{
    padding-top:calc(12px + env(safe-area-inset-top, 0px));
    padding-right:calc(12px + env(safe-area-inset-right, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    padding-left:calc(12px + env(safe-area-inset-left, 0px));
  }
  /* Tall narrow windows, including the band just under 860px: the same stacked
     page as a phone. The title, the level path, and the play button share one
     gap, so those three stay evenly spaced as the phone gets taller. Spare
     space above the title and below the buttons keeps the news card at the bottom.
     When a banner plus a short screen pushes the news past the fold, the page
     scrolls so the card can still be read. */
  @media (max-width:860px) and (min-height:561px){
    .home-screen{
      display:flex;flex-direction:column;align-items:stretch;gap:0;
      overflow-x:hidden;overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    .home-screen::before,
    .home-screen::after{content:'';flex:1 1 0px;min-height:0}
    .home-ad-top{
      display:flex;order:0;align-self:stretch;align-items:center;justify-content:center;
      flex:0 0 100px;width:100%;height:100px;min-height:100px;max-height:100px;margin-bottom:8px;
      background:transparent;border-radius:12px;overflow:hidden;z-index:1;
      clip-path:inset(0 round 12px);
    }
    .home-ad-top .adsbygoogle,
    .home-ad-top iframe{
      height:100px !important;max-height:100px !important;
      background:transparent !important;background-color:transparent !important;
      border-radius:0;overflow:hidden;
    }
    .home-tools{
      order:1;align-self:stretch;width:100%;min-width:0;
      justify-content:flex-end;
    }
    .home-tools > .tool-group:not(.tool-chips){margin-left:auto;flex-shrink:0}
    .home-tools .tool-chips{min-width:0}
    .home-screen::before{order:2;flex:2 1 36px;min-height:24px}
    .home-topic{order:3;justify-self:center;text-align:center;align-self:center;padding-top:0;margin-bottom:0}
    .home-gap{display:block;order:4;flex:1 1 14px;min-height:8px}
    .home-gap-play{order:6}
    .home-main{order:5}
    .home-actions{order:7;margin:0;flex:0 0 auto;justify-content:flex-start;padding:0}
    .home-screen::after{order:8;flex:1 1 14px;min-height:14px}
    .home-side{order:9}
    #homeOv .gtitle{
      font-size:clamp(34px, 11vw, 48px);line-height:.9;
      text-shadow:0 3px 0 rgba(255,255,255,.55);
    }
    #homeOv .wave-line{margin:1px auto 0;width:110px;height:10px}
    .home-copy{margin-top:2px}
    .home-main{justify-content:center;align-items:center;flex-shrink:0}
    #homeOv.on .home-main{animation:none}
    #homeMapSlot{
      position:relative;left:auto;right:auto;top:auto;transform:none;
      width:100%;z-index:1;
    }
    .home-side{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;gap:8px}
    .home-side{flex-shrink:0}
    .home-news,
    html.phone .home-news{
      display:flex;flex:0 0 auto;height:auto;width:100%;max-width:none;align-self:stretch;
    }
    .news-feed{max-height:none;overflow:visible}
    .home-map{row-gap:14px}
    .pg-head{padding:0 8px}
    .lv-label{font-size:28px;text-shadow:0 2px 0 rgba(255,255,255,.35)}
    .pg-meta{margin-top:1px}
    .home-btns{grid-template-columns:1fr;width:min(100%,360px);gap:14px}
    .home-btns .btn{padding:12px 16px}
    .home-links{justify-content:center;width:100%}
    .home-actions,.home-side{position:relative;z-index:2}
    .home-side{margin-bottom:8px}
  }
  @media (max-width:860px){
    .home-editor .lbl-wide{display:none}
    .home-editor .lbl-short{display:inline}
    .btn.ghost.home-editor{padding:0 10px}
  }
  @media (max-width:480px){
    #aboutBtn{display:none}
    .home-tools .icon-btn{width:36px;height:36px}
    .home-tools .icon-btn svg{width:18px;height:18px}
  }
  @media (max-width:340px){
    #homeOnlineLabel{display:none}
    #homeOnline{padding-left:10px;padding-right:10px}
    .home-tools{flex-wrap:wrap;row-gap:6px}
  }

  /* ---------- game juice: springs, pops, and the little hits on every control ---------- */
  #juiceFx{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
  .spark{
    position:absolute;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:2px;
    opacity:1;animation:spark .48s ease-out forwards;
  }
  .spark.dot{border-radius:50%}
  @keyframes spark{
    to{transform:translate(var(--dx), var(--dy)) scale(.15) rotate(50deg);opacity:0}
  }
  @keyframes panelIn{
    0%{transform:translateY(34px) scale(.88) rotate(-.8deg);opacity:0}
    62%{transform:translateY(-7px) scale(1.025) rotate(.35deg);opacity:1}
    100%{transform:none;opacity:1}
  }
  @keyframes dryShake{
    0%,100%{transform:none}
    22%{transform:translateX(-7px) rotate(-.5deg)}
    44%{transform:translateX(6px) rotate(.45deg)}
    66%{transform:translateX(-3px)}
    84%{transform:translateX(2px)}
  }
  #dryOv.on .panel{animation:panelIn .5s cubic-bezier(.22,1.15,.36,1) both, dryShake .42s linear .4s}
  #dryOv.on #dryTime{animation:dryGlow 1s ease-in-out infinite}
  #dryOv.on #dryTime.bump{animation:juiceBump .38s cubic-bezier(.34,1.56,.64,1)}
  @keyframes dryGlow{
    0%,100%{text-shadow:0 0 0 transparent}
    50%{text-shadow:0 8px 0 rgba(199,74,46,.28)}
  }
  @keyframes juiceRise{
    0%{opacity:0;transform:translateY(14px) scale(.94)}
    100%{opacity:1;transform:none}
  }
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars){
    animation:juiceRise .46s cubic-bezier(.22,1.4,.36,1) both;
  }
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(2){animation-delay:.05s}
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(3){animation-delay:.1s}
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(4){animation-delay:.15s}
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(5){animation-delay:.2s}
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(6){animation-delay:.25s}
  .overlay.on .panel > *:not(.home-scenes):not(.rules):not(.vols):not(.credits):not(#gStars):nth-child(7){animation-delay:.3s}
  .overlay.on .rules li,
  .overlay.on .vol{animation:juiceRise .4s cubic-bezier(.22,1.4,.36,1) both}
  .overlay.on .rules li:nth-child(1),.overlay.on .vol:nth-child(1){animation-delay:.08s}
  .overlay.on .rules li:nth-child(2),.overlay.on .vol:nth-child(2){animation-delay:.12s}
  .overlay.on .rules li:nth-child(3),.overlay.on .vol:nth-child(3){animation-delay:.16s}
  .overlay.on .rules li:nth-child(4),.overlay.on .vol:nth-child(4){animation-delay:.2s}
  .overlay.on .rules li:nth-child(5){animation-delay:.24s}
  .overlay.on .rules li:nth-child(6){animation-delay:.28s}
  .overlay.on .rules li:nth-child(7){animation-delay:.32s}
  .overlay.on .rules li:nth-child(8){animation-delay:.36s}
  .overlay.on .rules li:nth-child(9){animation-delay:.4s}
  .overlay.on .rules li:nth-child(10){animation-delay:.44s}
  .overlay.on .credits{animation:juiceRise .42s cubic-bezier(.22,1.4,.36,1) .14s both}
  #homeOv.on .home-topic,
  #homeOv.on .home-side,
  #homeOv.on .home-tools,
  #homeOv.on .home-main,
  #homeOv.on .home-actions{animation:juiceRise .5s cubic-bezier(.22,1.35,.36,1) both}
  #homeOv.on .home-side,#homeOv.on .home-tools{animation-delay:.06s}
  #homeOv.on .home-main{animation-delay:.12s}
  #homeOv.on .home-actions{animation-delay:.2s}
  /* The news card makes the top row taller than the play row, so centering the
     path inside that row leaves it below the middle of the page. On a desktop
     window the path sits on the page center instead. A nudge only applies when
     that would cover the title or the play buttons. */
  @media (min-width:861px) and (min-height:561px){
    #homeOv.on .home-main{animation:homeMainIn .42s ease .12s both}
    #homeMapSlot{
      position:absolute;left:50%;top:50%;z-index:1;
      width:min(calc(100% - 48px),1160px);
      transform:translate(-50%, calc(-50% + var(--map-nudge, 0px)));
    }
  }
  @keyframes homeMainIn{from{opacity:0}to{opacity:1}}
  @keyframes btnHop{
    0%{transform:translateY(0) scale(1,1)}
    22%{transform:translateY(3px) scale(1.08,.86)}
    58%{transform:translateY(-11px) scale(.96,1.14) rotate(-2deg)}
    80%{transform:translateY(-3px) scale(1.05,.97) rotate(1deg)}
    100%{transform:translateY(-6px) scale(1.07)}
  }
  @keyframes iconHop{
    0%{transform:translateY(0) scale(1,1)}
    22%{transform:translateY(2px) scale(1.14,.82)}
    58%{transform:translateY(-8px) scale(.94,1.16) rotate(-8deg)}
    100%{transform:translateY(-4px) scale(1.1)}
  }
  @keyframes ctaBreath{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.045)}
  }
  #homeOv.on #homePlay:not(:hover):not(:active),
  #goalOv.on #gNext:not(:hover):not(:active),
  #titleOv.on #menuResume:not(:hover):not(:active),
  #endOv.on #eAgain:not(:hover):not(:active),
  #tourOv:not([hidden]) #tourNext:not(:hover):not(:active){
    animation:ctaBreath 1.7s ease-in-out infinite;
  }
  @keyframes toastPop{
    0%{transform:translate(-50%,18px) scale(.82)}
    55%{transform:translate(-50%,-8px) scale(1.06)}
    100%{transform:translate(-50%,0) scale(1)}
  }
  @keyframes toastBad{
    0%{transform:translate(-50%,16px) scale(.9)}
    18%{transform:translate(calc(-50% - 8px),0) rotate(-2deg)}
    36%{transform:translate(calc(-50% + 7px),-2px) rotate(1.5deg)}
    54%{transform:translate(calc(-50% - 4px),0) rotate(-1deg)}
    72%{transform:translate(calc(-50% + 2px),0)}
    100%{transform:translate(-50%,0) scale(1)}
  }
  @keyframes juiceNudge{
    0%{transform:scale(1)}
    40%{transform:scale(1.12) translateY(-2px)}
    100%{transform:none}
  }
  .chip.bump,.lv-label.bump,.hint.bump,.menu-level.bump{animation-name:juiceNudge}
  @keyframes hudIn{
    0%{opacity:0;transform:translateY(-16px)}
    100%{opacity:1;transform:none}
  }
  @keyframes hudUp{
    0%{opacity:0;transform:translateY(18px)}
    100%{opacity:1;transform:none}
  }
  #stage:not(:has(#homeOv.on)) #topbar{animation:hudIn .42s cubic-bezier(.22,1.3,.36,1) both}
  #stage:not(:has(#homeOv.on)) #bottombar{animation:hudUp .48s cubic-bezier(.22,1.3,.36,1) .05s both}
  @keyframes stonePop{
    0%{transform:translateY(5px) scale(.7)}
    60%{transform:translateY(-8px) scale(1.12)}
    100%{transform:translateY(-3px) scale(1)}
  }
  @keyframes stoneIdle{
    0%,100%{box-shadow:0 0 0 5px rgba(255,107,74,.2), 0 5px 0 rgba(199,74,46,.45)}
    50%{box-shadow:0 0 0 9px rgba(255,107,74,.05), 0 5px 0 rgba(199,74,46,.45)}
  }
  @keyframes medalPop{
    0%{transform:scale(0) rotate(-18deg)}
    100%{transform:none}
  }
  @keyframes titleWobble{
    0%,100%{transform:rotate(-2deg) translateY(0)}
    50%{transform:rotate(2.5deg) translateY(-3px)}
  }
  #homeOv .gtitle .t2{animation:titleWobble 3.1s ease-in-out infinite}
  .wave-line{animation:waveBob 2.4s ease-in-out infinite}
  @keyframes waveBob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(3px)}
  }
  .news-head::before{animation:liveDot 1.25s ease-in-out infinite}
  @keyframes liveDot{
    0%,100%{transform:scale(1);opacity:1}
    50%{transform:scale(1.55);opacity:.45}
  }
  #devChip:hover{transform:translateY(-3px) scale(1.06)}
  button.home-copy:hover{transform:scale(1.06)}
  button.home-copy:active{transform:scale(.94)}
  .path-stone{transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s}
  .vol input[type=range]::-webkit-slider-thumb{transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
  .vol input[type=range]:active::-webkit-slider-thumb{transform:scale(1.28)}
  .vol input[type=range]::-moz-range-thumb{transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
  .vol input[type=range]:active::-moz-range-thumb{transform:scale(1.28)}
  .btn.dev-on:hover:not(:disabled),
  .btn.ghost.dev-on:hover:not(:disabled){box-shadow:0 8px 0 var(--coral-dark)}
  /* A phone keeps :hover after a tap, so the hop would stay up. Rest the control
     once the finger is gone. :active still presses in while it is held. */
  html.touch {
    .icon-btn:hover:not(:active),
    .icon-btn:hover:not(:active) svg,
    .pg-btn:hover:not(:disabled):not(:active),
    .btn:hover:not(:disabled):not(:active),
    .lv:not(.locked):hover:not(:active),
    .path-node:not(.locked):not(.cur):hover:not(:active) .path-stone,
    #devChip:hover:not(:active),
    button.home-copy:hover:not(:active) {
      transform: none;
      animation: none;
    }
    .icon-btn:hover:not(:active) { box-shadow: 0 4px 0 rgba(8,30,40,.35); }
    .pg-btn:hover:not(:disabled):not(:active) { box-shadow: 0 4px 0 rgba(8,30,40,.35); }
    .btn:hover:not(:disabled):not(:active) { box-shadow: 0 5px 0 var(--coral-dark); }
    .btn.ghost:hover:not(:disabled):not(:active) { box-shadow: 0 5px 0 var(--ink-deep); }
    .btn.ghost.home-editor:hover:not(:active) { box-shadow: 0 4px 0 rgba(8,30,40,.35); }
    .btn.dev-on:hover:not(:disabled):not(:active),
    .btn.ghost.dev-on:hover:not(:disabled):not(:active) { box-shadow: 0 5px 0 var(--coral-dark); }
    .lv:not(.locked):hover:not(:active) { box-shadow: 0 4px 0 rgba(15,59,74,.35); }
    .path-node:not(.locked):not(.cur):hover:not(:active) .path-stone {
      box-shadow: 0 4px 0 rgba(15,59,74,.35);
    }
    .path-node.cur:hover:not(:active) .path-stone {
      transform: translateY(-3px);
      animation: stoneIdle 1.7s ease-in-out infinite;
      box-shadow: 0 0 0 5px rgba(255,107,74,.22), 0 5px 0 rgba(199,74,46,.45);
    }
    #homeOv.on #homePlay:not(:active),
    #goalOv.on #gNext:not(:active),
    #titleOv.on #menuResume:not(:active),
    #endOv.on #eAgain:not(:active),
    #tourOv:not([hidden]) #tourNext:not(:active) {
      animation: ctaBreath 1.7s ease-in-out infinite;
    }
  }
  .tour-bubble.juice{animation:bubbleIn .36s cubic-bezier(.22,1.45,.36,1)}
  @keyframes bubbleIn{
    0%{transform:translateY(12px) scale(.92)}
    100%{transform:none}
  }
  @media (prefers-reduced-motion: reduce){
    .overlay,.panel,#homeOv .home-screen{transition:none}
    .overlay.on .panel,
    .overlay.on .panel > *,
    .overlay.on .rules li,
    .overlay.on .vol,
    .overlay.on .credits,
    #homeOv.on .home-topic,
    #homeOv.on .home-side,
    #homeOv.on .home-tools,
    #homeOv.on .home-main,
    #homeOv.on .home-actions,
    #homePlay,#gNext,#menuResume,#eAgain,#tourNext,
    .btn:hover,.icon-btn:hover,.pg-btn:hover,
    .path-node:not(.locked):hover .path-stone,
    #toast.on,.star.on,.best-tag,.bump,
    .path-node.cur .path-stone,
    .path-node.cur .medal.on,
    .news-head::before,.wave-line,#homeOv .gtitle .t2,
    .tour-bubble.juice,
    #stage:not(:has(#homeOv.on)) #topbar,
    #stage:not(:has(#homeOv.on)) #bottombar,
    #dryOv.on #dryTime,
    .spark{animation:none !important}
  }