:root{
  --ink:#3a2418;
  --ink-dark:#1a1230;
  --cream:#fff6e5;
  --sun:#ffd86b;
  --sky-top:#f7c590;
  --sky-low:#ffeed2;
  --font:"Pixelify Sans","Silkscreen","Courier New",ui-monospace,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sky-low);overscroll-behavior:none}
body{background:linear-gradient(var(--sky-top),var(--sky-low));font-family:var(--font);color:var(--ink);-webkit-text-size-adjust:100%}

#stage{position:fixed;left:0;top:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#app{position:fixed;inset:0;pointer-events:none}

.hud{position:fixed;inset:0;pointer-events:none;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.title{position:absolute;left:max(24px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));margin:0;font-weight:600;font-size:clamp(26px,3.2vw,44px);line-height:1;letter-spacing:.02em;color:var(--ink);text-shadow:3px 3px 0 rgba(255,246,229,.85)}
.sub{position:absolute;left:max(24px,env(safe-area-inset-left));top:calc(max(20px,env(safe-area-inset-top)) + clamp(26px,3.2vw,44px) + 14px);margin:0;font-size:clamp(14px,1.5vw,18px);line-height:1.3;max-width:24em;color:var(--ink)}


/* portrait / phones: all text stacks at the bottom */
@media (max-aspect-ratio:1/1){
  .hud{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .title,.sub{position:static}
  .title{font-size:clamp(28px,9vw,44px)}
  .sub{font-size:15px}
}

/* ---------- game layer ---------- */
#flash{position:fixed;inset:0;background:#3df0e0;opacity:0;pointer-events:none;z-index:6}
.hint{position:fixed;left:0;right:0;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 4px);margin:0;text-align:center;font-size:14px;color:var(--ink);opacity:0;transition:opacity 1.2s;pointer-events:none;z-index:4}
.hint.on{opacity:.55}
@media (max-aspect-ratio:1/1){.hint{bottom:auto;top:max(18px,env(safe-area-inset-top));left:auto;right:64px;text-align:right}}
.tag{position:fixed;transform:translate(-50%,-100%);z-index:5;pointer-events:none;opacity:0;white-space:pre;text-align:center;font:600 12px/1.25 var(--font);letter-spacing:.03em;color:#3a2a10;background:#d9a441;padding:4px 7px;
  box-shadow:-2px 0 0 0 #7a5a20,2px 0 0 0 #7a5a20,0 -2px 0 0 #7a5a20,0 2px 0 0 #7a5a20}
.tag.on{opacity:1}
.mute{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:7;width:40px;height:34px;padding:0;border:0;cursor:pointer;color:var(--cream);background:var(--ink);display:flex;align-items:center;justify-content:center;opacity:.55;
  box-shadow:-3px 0 0 0 var(--ink-dark),3px 0 0 0 var(--ink-dark),0 -3px 0 0 var(--ink-dark),0 3px 0 0 var(--ink-dark)}
.mute:hover,.mute:focus-visible{opacity:1;outline:none}
.mute .x{display:none}.mute.off .wave{display:none}.mute.off .x{display:block}
@media (prefers-reduced-motion:reduce){.hint{transition:none}}