/* Minimal HUD in the ZEN SEED voice: quiet, warm, out of the way.
     The canvas is the design; the HUD only whispers. */
  html,body{margin:0;height:100%;overflow:hidden;background:#bfd9ea;
    font-family:'Avenir Next','Segoe UI',system-ui,sans-serif;}
  /* light text on a soft dark shadow: readable on the day sky AND at night
     (the light journey ends in a violet dark where #2c3e46 vanished) */
  #hud{position:fixed;top:14px;left:16px;color:#f4f8fb;user-select:none;
    pointer-events:none;text-shadow:0 1px 3px rgba(20,30,40,.55);}
  #hud h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;opacity:.82;}
  #hud p{margin:3px 0 0;font-size:12.5px;opacity:.66;letter-spacing:.02em;}
  #toast{position:fixed;top:38%;left:50%;transform:translateX(-50%);
    color:#ffffff;font-size:26px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;opacity:0;transition:opacity .8s;
    text-shadow:0 2px 14px rgba(20,30,40,.55);pointer-events:none;}
  #fade{position:fixed;inset:0;background:#eef6fb;opacity:0;
    pointer-events:none;transition:opacity .35s;}
  #loading{position:fixed;inset:0;display:flex;align-items:center;
    justify-content:center;background:#cfe3f0;color:#3a5260;
    font-size:14px;letter-spacing:.2em;text-transform:uppercase;
    transition:opacity .5s;}

  /* ── Dev tuning panel ──────────────────────────────────────────────────
     Utilitarian by design — this is an instrument panel, not part of the
     game's own visual language. Monospace, high-contrast, always legible
     over any sky color. */
  /* the SEED BAG (garden/seeds.js): one glossy seed per seed carried */
  #pouch{position:fixed;top:56px;right:16px;z-index:6;display:flex;gap:5px;align-items:center;
    background:rgba(24,34,40,0.42);padding:7px 10px;border-radius:999px;user-select:none;
    border:1px solid rgba(255,255,255,0.14);pointer-events:none;}
  #pouch .seedIcon,.seedFly{display:block;width:11px;height:14px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
    box-shadow:inset -2px -2px 3px rgba(0,0,0,.18),0 0 6px rgba(255,255,255,.35);position:relative;}
  #pouch .seedIcon::after,.seedFly::after{content:'';position:absolute;left:5px;top:-5px;width:7px;height:5px;
    border-radius:0 80% 0 80%;background:#7bd36b;}
  @keyframes pouchPulse{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
  #pouch.pulse{animation:pouchPulse .45s ease;}
  .seedFly{position:fixed;left:0;top:0;z-index:7;pointer-events:none;
    transition:transform .7s cubic-bezier(.5,-0.3,.6,1),opacity .7s ease;will-change:transform;}
  /* HOME (player/cloud.js): the cloud carries Momo back to her garden */
  #homeBtn{position:fixed;top:96px;right:16px;z-index:6;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    background:rgba(24,34,40,0.42);color:#dfe8ee;padding:8px 14px;
    border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;user-select:none;
    border:1px solid rgba(255,255,255,0.14);
    transition:all .25s ease;}
  #homeBtn svg{width:13px;height:13px;flex:none;}
  #homeBtn:hover{background:rgba(38,52,46,0.62);border-color:rgba(255,217,122,0.4);}
  @keyframes homeNudge{0%,100%{transform:none}20%{transform:scale(1.12)}40%{transform:scale(.97)}60%{transform:scale(1.08)}}
  #homeBtn.nudge{animation:homeNudge 1.1s ease 2;border-color:rgba(255,224,130,.75);color:#fff3cf;}
  .spendFloat{position:absolute;left:50%;top:100%;transform:translateX(-50%);
    color:#ff8d97;font-weight:700;font-size:14px;pointer-events:none;
    animation:spendFloat .95s ease forwards;}
  @keyframes spendFloat{0%{opacity:1;margin-top:2px;}
    100%{opacity:0;margin-top:28px;}}

  /* ═══ TESTER JOURNAL + INSTRUCTION CARD (designer's claymorphism) ═══ */
  :root{ --stone-grey:#8d98a0; --stone-shadow:#7a848c; --panel-peach:#ffb8a7;
    --input-sand:#eaddce; --button-submit:#fb6362; --text-dark:#4a3e3d;
    --title-color:#2d7879; }
  .modal-overlay{position:fixed;inset:0;display:flex;align-items:center;
    justify-content:center;gap:20px;background:rgba(0,0,0,0.25);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    transition:opacity .3s ease;}
  .matte-3d-modal{position:relative;width:100%;max-width:520px;max-height:85vh;max-height:85dvh;
    display:flex;flex-direction:column;background:var(--stone-grey);
    border-radius:40px 35px 42px 38px;padding:25px;
    box-shadow:15px 25px 35px rgba(0,0,0,0.25),
      inset -8px -8px 15px rgba(0,0,0,0.15),
      inset 8px 8px 15px rgba(255,255,255,0.6);
    transform:scale(0.95);opacity:0;
    transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .4s ease;}
  .modal-show{transform:scale(1);opacity:1;}
  .inner-panel{background:var(--panel-peach);border-radius:25px 28px 24px 26px;
    padding:30px;text-align:center;
    box-shadow:inset -4px -4px 10px rgba(0,0,0,0.05),
      inset 4px 4px 10px rgba(255,255,255,0.4);}
  .scrollable-panel{overflow-y:auto;flex-grow:1;margin-bottom:10px;}
  .scrollable-panel::-webkit-scrollbar{width:10px;}
  .scrollable-panel::-webkit-scrollbar-thumb{background:var(--stone-shadow);border-radius:10px;}
  .quiz-title{color:var(--title-color);font-size:2.2rem;font-weight:900;
    margin:0 0 15px 0;letter-spacing:-0.5px;
    text-shadow:2px 2px 0 #1a5253,3px 3px 6px rgba(0,0,0,0.1);}
  .quiz-question{color:var(--text-dark);font-size:1.15rem;font-weight:700;
    margin-bottom:22px;line-height:1.45;}
  .intro-lines{list-style:none;text-align:left;margin:0 0 14px;padding:0;}
  .intro-lines li{color:var(--text-dark);font-size:1.02rem;font-weight:600;
    line-height:1.5;padding:6px 0 6px 24px;position:relative;}
  .intro-lines li::before{content:'✦';position:absolute;left:2px;
    color:var(--button-submit);font-size:0.75rem;top:9px;}
  .textarea-wrapper{position:relative;width:100%;}
  .clay-input{width:100%;min-height:140px;max-height:200px;
    background:var(--input-sand);border:none;border-radius:15px;
    padding:15px 15px 35px 15px;font-family:inherit;font-size:1.05rem;
    font-weight:600;color:var(--text-dark);box-sizing:border-box;
    resize:vertical;outline:none;
    box-shadow:inset 6px 6px 12px rgba(0,0,0,0.15),
      inset -6px -6px 12px rgba(255,255,255,0.5);}
  .clay-input::placeholder{color:#9c8a7c;opacity:0.8;}
  .char-counter{position:absolute;bottom:12px;right:15px;font-size:0.85rem;
    font-weight:700;color:#9c8a7c;pointer-events:none;}
  .clay-checkbox-label{display:inline-flex;align-items:center;gap:12px;
    font-weight:700;color:var(--text-dark);cursor:pointer;margin-top:10px;}
  .hidden-checkbox{display:none;}
  .custom-clay-check{width:28px;height:28px;background:var(--input-sand);
    border-radius:8px;display:flex;align-items:center;justify-content:center;
    box-shadow:inset 3px 3px 6px rgba(0,0,0,0.15),
      inset -3px -3px 6px rgba(255,255,255,0.5);transition:transform .1s ease;}
  .custom-clay-check::after{content:"✔";color:var(--button-submit);
    font-size:1.2rem;font-weight:900;transform:scale(0);
    transition:transform .2s cubic-bezier(.175,.885,.32,1.275);}
  .hidden-checkbox:checked + .custom-clay-check::after{transform:scale(1);}
  .button-container{position:absolute;bottom:-25px;left:50%;
    transform:translateX(-50%);display:flex;}
  .action-btn{border:6px solid var(--stone-shadow);
    border-radius:18px 22px 16px 20px;padding:12px 45px;font-family:inherit;
    font-weight:800;font-size:1.2rem;cursor:pointer;letter-spacing:0.5px;
    box-shadow:0 10px 15px rgba(0,0,0,0.2),
      inset -4px -6px 6px rgba(0,0,0,0.15),
      inset 4px 4px 6px rgba(255,255,255,0.5);transition:transform .1s ease;}
  .submit-btn{background:var(--button-submit);color:#fff;}
  .action-btn:active{transform:translateY(6px);}
  .modal-close-btn{position:absolute;top:15px;right:15px;background:#cdd6dc;
    color:#7b8893;border:none;border-radius:8px;width:35px;height:35px;
    font-size:1.2rem;font-weight:bold;cursor:pointer;
    box-shadow:inset -2px -2px 5px rgba(0,0,0,0.1),
      inset 2px 2px 5px rgba(255,255,255,0.6),2px 2px 5px rgba(0,0,0,0.15);
    transition:transform .1s ease;}
  .modal-close-btn:active{transform:translateY(3px);}
  .nav-arrow{background:var(--stone-grey);color:#fff;border:none;
    border-radius:12px 16px 14px 15px;width:55px;height:55px;font-size:1.5rem;
    cursor:pointer;box-shadow:0 8px 12px rgba(0,0,0,0.2),
      inset -3px -4px 6px rgba(0,0,0,0.15),
      inset 3px 3px 6px rgba(255,255,255,0.5);
    transition:transform .1s ease,opacity .2s ease;}
  .nav-arrow:active{transform:scale(0.95);}
  .nav-hidden{opacity:0;pointer-events:none;}
  .progress-track{width:100%;height:12px;background:#727d85;border-radius:10px;
    margin-bottom:20px;box-shadow:inset 3px 3px 6px rgba(0,0,0,0.2),
      inset -2px -2px 4px rgba(255,255,255,0.2);}
  .journal-progress-fill{height:100%;width:100%;background:var(--button-submit);
    border-radius:10px;transition:transform .5s cubic-bezier(.4,0,.2,1);
    transform-origin:left;transform:scaleX(0.03);}
  #tuneTab, #tunePanel{ display:none !important; }   /* TESTER BUILD: no dev tools */
  #journalBtn{position:fixed;top:146px;right:16px;z-index:6;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    background:rgba(24,34,40,0.42);color:#dfe8ee;padding:8px 14px;
    border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;user-select:none;
    border:1px solid rgba(255,255,255,0.14);transition:all .25s ease;}
  #journalBtn:hover{background:rgba(38,52,46,0.62);border-color:rgba(255,217,122,0.4);}
  #muteBtn{position:fixed;top:196px;right:16px;z-index:6;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    background:rgba(24,34,40,0.42);color:#dfe8ee;padding:8px 14px;
    border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;user-select:none;
    border:1px solid rgba(255,255,255,0.14);transition:all .25s ease;}
  #muteBtn.muted{color:#f2b8b8;border-color:rgba(240,150,150,0.4);}
  #tuneTab{position:fixed;top:14px;right:16px;z-index:10;
    background:rgba(30,42,48,.86);color:#eaf3f7;border:1px solid rgba(255,255,255,.16);
    border-radius:8px;padding:8px 14px;font:600 12px/1.2 'SF Mono',Menlo,Consolas,monospace;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer;user-select:none;}
  #tuneTab:hover{background:rgba(30,42,48,.96);}
  #tunePanel{position:fixed;top:0;right:0;bottom:0;width:300px;z-index:9;
    background:rgba(22,30,35,.94);color:#eaf3f7;overflow-y:auto;
    font:12px/1.3 'SF Mono',Menlo,Consolas,monospace;
    padding:56px 16px 20px;box-sizing:border-box;
    transform:translateX(100%);transition:transform .25s ease;
    border-left:1px solid rgba(255,255,255,.12);}
  #tunePanel.open{transform:translateX(0);}
  #tunePanel h2{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:#8fd0e8;margin:20px 0 8px;opacity:.85;}
  #tunePanel h2:first-of-type{margin-top:0;}
  .trow{display:flex;align-items:center;justify-content:space-between;
    padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);gap:8px;}
  .trow .tlabel{opacity:.78;flex:1;}
  .trow .tval{width:52px;text-align:right;color:#ffd479;font-weight:600;}
  .trow button{width:22px;height:22px;border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.06);color:#eaf3f7;border-radius:4px;
    font:600 13px/1 monospace;cursor:pointer;}
  .trow button:hover{background:rgba(255,255,255,.16);}
  .trow button:active{background:rgba(255,255,255,.26);}
  #tunePanel .actionRow{display:flex;gap:8px;margin-top:16px;}
  #tunePanel .actionBtn{flex:1;padding:8px 6px;text-align:center;
    background:rgba(143,208,232,.16);border:1px solid rgba(143,208,232,.4);
    color:#eaf3f7;border-radius:6px;cursor:pointer;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;}
  #tunePanel .actionBtn:hover{background:rgba(143,208,232,.28);}
  #tunePanel .actionBtn.wide{flex:1 1 100%;}
  #camPresetLabel{color:#ffd479;font-weight:600;}

  /* ═══ TOUCH / MOBILE ═════════════════════════════════════════════════════
     body.touch is set by player/touch.js on a phone (or on the first touch
     anywhere). Keyboard hints hide, thumb controls appear, the HUD shrinks
     into the corners and respects the notch (safe-area insets). */
  html,body{touch-action:none;-webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
    overscroll-behavior:none;position:fixed;inset:0;}
  canvas{touch-action:none;display:block;}
  .touchOnly{display:none;}
  body.touch .touchOnly{display:block;}
  body.touch .keysOnly{display:none;}
  #touchUI{position:fixed;inset:0;pointer-events:none;z-index:5;display:none;}
  body.touch #touchUI{display:block;}
  #stickBase{position:absolute;left:0;top:0;width:112px;height:112px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.22) 70%,rgba(255,255,255,.30) 100%);
    border:1.5px solid rgba(255,255,255,.55);box-shadow:0 4px 18px rgba(30,50,70,.18);
    transition:opacity .18s ease;will-change:transform;}
  #stickRing{position:absolute;inset:11px;border-radius:50%;
    border:1.5px dashed rgba(255,255,255,.35);transition:border-color .15s ease;}
  #stickBase.sprint #stickRing{border-color:rgba(255,224,130,.95);border-style:solid;}
  #stickKnob{position:absolute;left:34px;top:34px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.88);box-shadow:0 3px 10px rgba(30,50,70,.28);will-change:transform;}
  #jumpBtn{position:absolute;pointer-events:auto;
    right:calc(22px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));
    width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.24);border:2px solid rgba(255,255,255,.7);
    box-shadow:0 6px 20px rgba(30,50,70,.2);color:#fff;font:700 12px/1 'Avenir Next',system-ui,sans-serif;
    letter-spacing:.18em;text-shadow:0 1px 3px rgba(30,50,70,.4);
    transition:transform .08s ease,background .12s ease;}
  #jumpBtn.down{transform:scale(.92);background:rgba(255,255,255,.42);}
  /* ribbon brake: the stick ring warms when a downward pull is slowing her */
  #stickBase.brake #stickRing{border-color:rgba(255,170,150,.95);border-style:solid;}
  /* RUN-LOCK (islands): appears above the thumb as it pulls up; lights when
     a release will lock the run; stays lit while she runs on her own */
  #runLock{position:absolute;left:0;top:0;width:52px;height:30px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;opacity:0;
    background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);
    color:#fff;font:700 10px/1 'Avenir Next',system-ui,sans-serif;letter-spacing:.16em;
    text-shadow:0 1px 3px rgba(30,50,70,.4);transition:opacity .15s ease,background .15s ease;
    will-change:transform;}
  #runLock.show{opacity:.75;}
  #runLock.armed{opacity:1;background:rgba(255,224,130,.55);border-color:rgba(255,232,160,.95);}
  #runLock.locked{opacity:.85;}
  /* the hint whisper: bottom-centre, never under a thumb */
  #runHint{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));
    transform:translateX(-50%);padding:7px 14px;border-radius:14px;white-space:nowrap;
    background:rgba(30,50,70,.28);color:#fff;font:600 11px/1 'Avenir Next',system-ui,sans-serif;
    letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .35s ease;
    text-shadow:0 1px 3px rgba(30,50,70,.35);}
  #runHint.on{opacity:.92;}
  body.touch #hud{top:calc(8px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));}
  body.touch #hud p#fps{font-size:10px;}
  body.touch #pouch{top:calc(10px + env(safe-area-inset-top));right:auto;
    left:50%;transform:translateX(-50%);}
  body.touch #homeBtn,body.touch #journalBtn,body.touch #muteBtn{
    padding:7px 10px;font-size:10px;letter-spacing:.08em;
    right:calc(10px + env(safe-area-inset-right));}
  body.touch #homeBtn{top:calc(10px + env(safe-area-inset-top));}
  body.touch #journalBtn{top:calc(46px + env(safe-area-inset-top));}
  body.touch #muteBtn{top:calc(82px + env(safe-area-inset-top));}
  .matte-3d-modal{max-width:min(520px,calc(100vw - 32px));box-sizing:border-box;}
  @media (max-width:600px), (max-height:500px){
    .matte-3d-modal{padding:16px;border-radius:28px;}
    .inner-panel{padding:18px;}
    .quiz-title{font-size:1.6rem;margin-bottom:8px;}
    .intro-lines li{font-size:.9rem;padding:3px 0 3px 22px;}
    .action-btn{padding:10px 34px;font-size:1.05rem;}
    .nav-arrow{width:44px;height:44px;}
    #journalModalWrapper{gap:6px;}
  }
  @media (max-height:500px){
    .matte-3d-modal{max-height:92vh;max-height:92dvh;}
    .intro-lines li{font-size:.82rem;line-height:1.35;}
  }
  /* the game owns every gesture EXCEPT scrolling a card and typing in it */
  .scrollable-panel,.clay-input{touch-action:pan-y;-webkit-user-select:text;user-select:text;}

  /* ═══ FLOW + PROGRESS ════════════════════════════════════════════════════
     Same whisper as the rest of the HUD: small, warm, and gone when there is
     nothing to say. */
  #progress{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;
    transform:translateX(-50%);display:flex;gap:5px;z-index:4;pointer-events:none;
    padding:5px 9px;border-radius:999px;background:rgba(24,34,40,.22);}
  #progress i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);
    transition:background .4s ease,transform .4s ease,box-shadow .4s ease;}
  #progress i.done{background:rgba(255,255,255,.9);}
  #progress i.here{background:#ffe082;transform:scale(1.35);box-shadow:0 0 8px rgba(255,224,130,.9);}
  /* touch: tucked top-left under the HUD line — centred, the 20 pips ran
     under the right-hand button column on a 375px-wide phone */
  body.touch #progress{top:calc(44px + env(safe-area-inset-top));gap:3px;padding:4px 7px;
    left:calc(10px + env(safe-area-inset-left));transform:none;}
  body.touch #progress i{width:5px;height:5px;}
  #isleCard{position:fixed;top:22%;left:50%;transform:translate(-50%,8px);
    color:#fff;font-size:15px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
    text-shadow:0 2px 12px rgba(30,50,70,.55);opacity:0;pointer-events:none;
    transition:opacity .7s ease,transform .7s ease;z-index:4;white-space:nowrap;}
  #isleCard.on{opacity:.92;transform:translate(-50%,0);}
  #flowPill{position:fixed;top:96px;left:16px;z-index:4;pointer-events:none;
    display:flex;flex-direction:column;gap:4px;padding:7px 12px 8px;border-radius:12px;
    background:rgba(24,34,40,.32);color:#fff;font-size:11.5px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateX(-8px);
    transition:opacity .45s ease,transform .45s ease;}
  #flowPill.on{opacity:1;transform:none;}
  #flowPill[data-level="3"],#flowPill[data-level="4"]{color:#ffe7a8;
    box-shadow:0 0 16px rgba(255,214,120,.35);}
  #flowPill .flowBar{display:block;width:72px;height:3px;border-radius:2px;
    background:rgba(255,255,255,.2);overflow:hidden;}
  #flowPill .flowBar i{display:block;height:100%;background:currentColor;
    transform-origin:left;transition:transform .1s linear;}
  @keyframes flowPulse{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
  #flowPill.pulse{animation:flowPulse .45s ease;}
  body.touch #flowPill{top:auto;left:calc(14px + env(safe-area-inset-left));
    bottom:calc(14px + env(safe-area-inset-bottom));}

  /* ═══ IMMERSIVE — played sideways, edge to edge (ui/immersive.js) ═══════ */
  [hidden]{display:none !important;}

  /* the portrait gate: shown by CSS on touch-first devices before any script
     runs, then owned by immersive.js (html.js-orient / html.portrait-block) */
  #rotate{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
    text-align:center;color:#2b4757;touch-action:none;
    padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
            calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
    background:radial-gradient(130% 90% at 50% 18%,#eef7fc 0%,#c4e1f3 52%,#93c2e3 100%);
    font-family:'Avenir Next','Segoe UI',system-ui,sans-serif;}
  @media (orientation:portrait) and (pointer:coarse){ html:not(.js-orient) #rotate{display:flex;} }
  html.portrait-block #rotate{display:flex;}
  .rotCard{max-width:330px;}
  .rotBrand{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
    opacity:.55;margin-bottom:34px;}
  .rotPhone{position:relative;width:52px;height:90px;margin:0 auto 30px;border-radius:12px;
    border:3px solid #2b4757;box-shadow:0 10px 24px rgba(43,71,87,.18);
    animation:rotPhone 2.8s cubic-bezier(.6,.05,.3,1) infinite;}
  .rotPhone::before{content:'';position:absolute;left:50%;top:6px;width:14px;height:3px;
    margin-left:-7px;border-radius:2px;background:#2b4757;opacity:.55;}
  .rotPhone::after{content:'';position:absolute;inset:14px 6px;border-radius:4px;
    background:linear-gradient(#9fd0ef,#e3f2fb);}
  @keyframes rotPhone{0%,16%{transform:rotate(0)}44%,82%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
  .rotTitle{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
  .rotSub{margin:0 0 22px;font-size:14px;line-height:1.5;opacity:.72;}
  .rotBtn{display:block;margin:0 auto 10px;padding:13px 26px;border:none;border-radius:999px;
    background:#2b4757;color:#fff;font:700 13px/1 'Avenir Next','Segoe UI',system-ui,sans-serif;
    letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 20px rgba(43,71,87,.25);cursor:pointer;}
  .rotBtn.ghost{background:rgba(255,255,255,.55);color:#2b4757;box-shadow:none;}
  .rotTip{margin:16px 0 0;font-size:12.5px;line-height:1.6;opacity:.7;}

  /* full screen again, after the player left it (Android) */
  #fsBtn{position:fixed;top:246px;right:16px;z-index:6;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    background:rgba(24,34,40,0.42);color:#dfe8ee;padding:8px 14px;
    border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;user-select:none;
    border:1px solid rgba(255,255,255,0.14);}
  #fsBtn svg{width:12px;height:12px;flex:none;}
  body.touch #fsBtn{padding:7px 10px;font-size:10px;letter-spacing:.08em;
    top:calc(118px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));}

  /* ribbon: a back-pull that is stepping her BACKWARD reads cool, not warm */
  #stickBase.reverse #stickRing{border-color:rgba(150,205,255,.95);border-style:solid;}

  /* the flow pill moves out from under the steering thumb */
  body.touch #flowPill{top:calc(62px + env(safe-area-inset-top));bottom:auto;
    left:calc(12px + env(safe-area-inset-left));}

  /* intro card: install (Android) / Home Screen tip (iOS) */
  #immersiveRow{margin-top:10px;}
  .install-btn{border:none;border-radius:12px;padding:10px 14px;cursor:pointer;
    background:var(--title-color);color:#fff;font:800 .85rem/1.2 system-ui,-apple-system,sans-serif;
    box-shadow:0 4px 10px rgba(0,0,0,.18);}
  .tipLine{margin:6px 0 0;color:var(--text-dark);font-size:.85rem;font-weight:600;line-height:1.5;opacity:.85;}
  .shareGlyph{width:.9em;height:1.05em;vertical-align:-.15em;color:var(--title-color);}

  /* ── LANDSCAPE PHONE: the instruction card lies down too ──
     Title, controls and the BEGIN button on the left; the story on the right,
     scrolling on its own. Sized to the visible height, so BEGIN is always on
     screen — even under Safari's bars on a 390px-tall phone. */
  @media (orientation:landscape) and (max-height:520px){
    #introCard{max-width:min(800px,calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
      max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);padding:12px 14px 14px;border-radius:26px;}
    #introCard .inner-panel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      grid-template-rows:auto auto auto 1fr;grid-template-areas:"title lines" "how lines" "check lines" "extra lines";
      column-gap:20px;padding:14px 18px;text-align:left;overflow:hidden;min-height:0;margin-bottom:6px;}
    #introCard .quiz-title{grid-area:title;font-size:1.45rem;margin:0 0 6px;}
    #introCard .intro-lines{grid-area:lines;overflow-y:auto;min-height:0;margin:0;padding-right:4px;
      touch-action:pan-y;}
    #introCard .intro-lines li{font-size:.8rem;line-height:1.35;padding:3px 0 3px 20px;}
    #introCard .intro-lines li::before{top:5px;}
    #introCard .quiz-question.touchOnly{grid-area:how;font-size:.78rem;line-height:1.45;
      margin:0 0 6px;font-weight:600;}
    #introCard .clay-checkbox-label{grid-area:check;margin-top:2px;font-size:.8rem;gap:8px;}
    #introCard .custom-clay-check{width:22px;height:22px;}
    #introCard #immersiveRow{grid-area:extra;margin-top:6px;}
    #introCard .tipLine{font-size:.75rem;}
    #introCard .install-btn{font-size:.75rem;padding:8px 12px;}
    #introCard .modal-close-btn{top:8px;right:8px;width:30px;height:30px;font-size:1rem;}
    #introCard .action-btn{padding:9px 38px;font-size:1rem;border-width:5px;}
    #introCard .button-container{bottom:-22px;}
  }

  /* ═══ STRICT CSP: no inline styles anywhere (style-src 'self') ═══════════
     What index.html used to carry in style="" attributes lives here, and the
     notices built by ui/dom.js use classes. JS still moves things through
     the CSSOM (el.style.x = …), which a strict style-src permits. */
  #fps{font-weight:600;}
  #introModalWrapper{z-index:60;}
  #journalModalWrapper{z-index:50;display:none;opacity:0;}
  .introHow{font-size:.92rem;margin-bottom:12px;}
  #loading.notice{opacity:1;z-index:100;cursor:pointer;pointer-events:auto;}
  .loadMsg{display:flex;flex-direction:column;align-items:center;gap:6px;
    text-align:center;line-height:1.6;padding:0 24px;}
  .loadMsg small{opacity:.6;font-size:11px;letter-spacing:.04em;text-transform:none;}

  /* Quicksand, self-hosted (OFL — fonts/OFL.txt). It used to come from
     Google Fonts, which handed every player's IP address to Google. */
  @font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;
    src:url(fonts/quicksand-500-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  @font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;
    src:url(fonts/quicksand-500-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

  /* ═══ REST — Momo sits down in the grass; the screen empties to the view ═══
     (player/rest.js). Desktop: a pill in the right-hand column. Phone: a
     round button up and to the left of JUMP, in the right thumb's arc —
     28px of clear air between the two circles, so a small finger aiming
     for one never lands on the other. */
  #restBtn{position:fixed;top:246px;right:16px;z-index:6;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    background:rgba(24,34,40,0.42);color:#dfe8ee;padding:8px 14px;
    border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;user-select:none;
    border:1px solid rgba(255,255,255,0.14);transition:all .25s ease;}
  #restBtn svg{width:13px;height:13px;flex:none;}
  #restBtn:hover{background:rgba(38,52,46,0.62);border-color:rgba(150,230,170,0.45);}
  #restBtn.on{background:rgba(38,52,46,0.66);color:#d9f2df;border-color:rgba(150,230,170,0.6);
    box-shadow:0 0 16px rgba(143,230,168,.35);}
  body.touch #restBtn{top:auto;right:calc(116px + env(safe-area-inset-right));
    bottom:calc(124px + env(safe-area-inset-bottom));width:64px;height:64px;padding:0;
    box-sizing:border-box;border-radius:50%;flex-direction:column;justify-content:center;gap:4px;
    background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.62);color:#fff;
    font:700 9.5px/1 'Avenir Next',system-ui,sans-serif;letter-spacing:.16em;
    text-shadow:0 1px 3px rgba(30,50,70,.4);box-shadow:0 6px 18px rgba(30,50,70,.18);}
  body.touch #restBtn svg{width:20px;height:20px;}
  body.touch #restBtn.on{background:rgba(143,230,168,.34);border-color:rgba(214,255,224,.95);
    box-shadow:0 0 18px rgba(143,230,168,.5);}

  /* resting: everything but the Rest button (and a dimmed journal) steps
     aside, so nothing stands between the player and the view */
  #hud,#progress,#pouch{transition:opacity .6s ease;}
  #jumpBtn{transition:transform .08s ease,background .12s ease,opacity .5s ease;}
  body.resting #hud,body.resting #pouch,body.resting #homeBtn,body.resting #muteBtn,
  body.resting #fsBtn,body.resting #progress,body.resting #flowPill,body.resting #isleCard,
  body.resting #jumpBtn,body.resting #runHint,body.resting #stickBase{opacity:0;pointer-events:none;}
  body.resting #journalBtn{opacity:.5;}
  body.resting canvas{cursor:grab;}
  body.resting.looking canvas{cursor:grabbing;}

  /* the rest's own whisper (the first few rests): bottom-centre, both schemes */
  #restHint{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));
    transform:translateX(-50%);padding:7px 14px;border-radius:14px;white-space:nowrap;z-index:6;
    background:rgba(30,50,70,.28);color:#fff;font:600 11px/1 'Avenir Next',system-ui,sans-serif;
    letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .6s ease;
    text-shadow:0 1px 3px rgba(30,50,70,.35);pointer-events:none;}
  #restHint.on{opacity:.92;}

  /* WHISPER (ui/whisper.js): one quiet line, said only the first few times;
     above the touch hint so the two never sit on each other */
  #whisper{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));
    transform:translateX(-50%);padding:8px 16px;border-radius:14px;white-space:nowrap;z-index:6;
    background:rgba(30,50,70,.34);color:#fff;font:600 11.5px/1 'Avenir Next',system-ui,sans-serif;
    letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .6s ease;
    text-shadow:0 1px 3px rgba(30,50,70,.35);pointer-events:none;max-width:calc(100vw - 32px);
    overflow:hidden;text-overflow:ellipsis;}
  #whisper.on{opacity:.95;}
  body.resting #whisper{opacity:0;}