/* ── Loy Krathong · mobile-only pixel UI ───────────────────────── */
:root{
  --gold:#f6cf7d;  --gold-deep:#c98b2e;  --ink:#2a1a12;
  --wood:#6b4230;  --paper:#f3e3c3;      --leaf:#5c8a4a;
  --night:#0b1226; --glow:rgba(255,206,128,.55);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#05070f}
body{
  font-family:'Mitr',system-ui,sans-serif;font-weight:300;color:#f5ead6;
  display:grid;place-items:center;
}
/* assets are hi-res pixel-art renders shown downscaled → smooth beats nearest */
img{display:block;user-select:none;-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.px{font-family:'Press Start 2P',monospace}

/* loading screen: spectacular night river experience */
#loading{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(135deg,#010101 0%,#0a0f20 25%,#1a0a15 50%,#0a0f20 75%,#010101 100%);
  overflow:hidden;padding:5cqw;
  grid-template-rows:1fr auto auto 1fr;
  gap:3vh;
}

/* stars twinkling background */
#loading::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1px 1px at 20% 30%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 60% 70%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 50% 50%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 80% 10%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 10% 90%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 90% 60%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 30% 80%, white, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 70% 40%, white, rgba(255,255,255,0));
  background-size:200% 200%;
  animation:twinkle 4s ease-in-out infinite;
  pointer-events:none;
  opacity:.6;
}

@keyframes twinkle{
  0%, 100%{opacity:.3}
  50%{opacity:.8}
}

/* river water effect (animated) */
#loading::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:25%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(30,80,120,.15) 30%,
    rgba(20,60,100,.25) 70%,
    rgba(10,40,80,.35) 100%);
  z-index:0;
  animation:wave 6s ease-in-out infinite;
}

@keyframes wave{
  0%, 100%{transform:translateY(0) scaleX(1)}
  25%{transform:translateY(-2vh) scaleX(1.05)}
  50%{transform:translateY(0) scaleX(1)}
  75%{transform:translateY(2vh) scaleX(0.95)}
}

/* floating lanterns - 12 of them with varied animations */
.load-lantern{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe8a8, #ffb84d, #ff8c00);
  box-shadow:
    0 0 8px rgba(255,180,80,.9),
    0 0 20px rgba(255,150,60,.7),
    0 0 40px rgba(255,100,40,.4),
    inset -2px -2px 4px rgba(0,0,0,.3),
    inset 2px 2px 4px rgba(255,255,200,.2);
  z-index:1;
  filter:drop-shadow(0 0 4px rgba(255,200,100,.6));
}

.load-lantern:nth-child(1){width:12px;height:12px;left:8%;top:15%;animation:float 9s ease-in-out infinite;animation-delay:0s}
.load-lantern:nth-child(2){width:8px;height:8px;left:18%;top:35%;animation:float 11s ease-in-out infinite;animation-delay:1s}
.load-lantern:nth-child(3){width:10px;height:10px;left:28%;top:25%;animation:float 8s ease-in-out infinite;animation-delay:2s}
.load-lantern:nth-child(4){width:9px;height:9px;left:72%;top:20%;animation:float 10s ease-in-out infinite;animation-delay:1.5s}
.load-lantern:nth-child(5){width:11px;height:11px;left:82%;top:40%;animation:float 9.5s ease-in-out infinite;animation-delay:2.5s}
.load-lantern:nth-child(6){width:7px;height:7px;left:92%;top:30%;animation:float 10.5s ease-in-out infinite;animation-delay:0.5s}
.load-lantern:nth-child(7){width:10px;height:10px;left:12%;top:70%;animation:float 11s ease-in-out infinite;animation-delay:3s}
.load-lantern:nth-child(8){width:9px;height:9px;left:35%;top:75%;animation:float 9s ease-in-out infinite;animation-delay:1.8s}
.load-lantern:nth-child(9){width:8px;height:8px;left:65%;top:72%;animation:float 10s ease-in-out infinite;animation-delay:2.2s}
.load-lantern:nth-child(10){width:11px;height:11px;left:88%;top:68%;animation:float 8.5s ease-in-out infinite;animation-delay:0.8s}
.load-lantern:nth-child(11){width:9px;height:9px;left:22%;top:60%;animation:float 9.5s ease-in-out infinite;animation-delay:3.2s}
.load-lantern:nth-child(12){width:10px;height:10px;left:78%;top:55%;animation:float 10.5s ease-in-out infinite;animation-delay:1.2s}

@keyframes float{
  0%{transform:translateY(0) scale(0.8);opacity:.4}
  20%{transform:translateY(-4vh) scale(1);opacity:.8}
  50%{transform:translateY(-8vh) scale(1.1);opacity:1}
  80%{transform:translateY(-4vh) scale(1);opacity:.8}
  100%{transform:translateY(0) scale(0.8);opacity:.4}
}

.load-text{
  font-family:'Press Start 2P',monospace;font-size:clamp(20px,6.5vw,42px);
  color:#ffd68a;font-weight:900;letter-spacing:.15em;
  text-shadow:
    0 0 8px rgba(255,214,138,.6),
    0 0 16px rgba(255,180,80,.5),
    0 0 32px rgba(255,140,60,.3),
    0 0 64px rgba(255,100,40,.15),
    2px 2px 4px rgba(0,0,0,.8);
  animation:title-glow 2.2s ease-in-out infinite;
  text-align:center;z-index:2;position:relative;
  transform:perspective(600px) rotateX(0deg);
  text-rendering:optimizeLegibility;
}

@keyframes title-glow{
  0%,100%{
    text-shadow:
      0 0 8px rgba(255,214,138,.6),
      0 0 16px rgba(255,180,80,.4),
      0 0 32px rgba(255,140,60,.2);
    transform:scale(1);
  }
  50%{
    text-shadow:
      0 0 12px rgba(255,214,138,.9),
      0 0 24px rgba(255,180,80,.7),
      0 0 48px rgba(255,140,60,.4),
      0 0 80px rgba(255,100,40,.2);
    transform:scale(1.02);
  }
}

.load-bar{
  width:clamp(100px,55vw,260px);height:4px;border-radius:4px;
  background:linear-gradient(90deg,
    rgba(255,214,138,.08),
    rgba(255,180,80,.12),
    rgba(255,214,138,.08));
  overflow:hidden;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.6),
    0 0 16px rgba(255,180,80,.2),
    0 0 8px rgba(255,140,60,.15);
  z-index:2;position:relative;
  border:1px solid rgba(255,180,80,.25);
}

.load-fill{
  height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg,
    rgba(255,214,138,.8),
    #ffb347,
    #ff9500,
    #ff8c00,
    rgba(255,140,60,.8));
  background-size:200% 100%;
  box-shadow:
    0 0 16px rgba(255,200,100,.9),
    0 0 8px rgba(255,150,60,.6),
    inset 0 0 6px rgba(255,255,200,.4),
    inset 0 -1px 2px rgba(0,0,0,.3);
  animation:fill-load 2.4s cubic-bezier(.32,.57,.46,.97) infinite;
}

@keyframes fill-load{
  0%{width:0%;opacity:.3;background-position:200% 0}
  30%{opacity:1;background-position:150% 0}
  60%{width:75%;opacity:1;background-position:100% 0}
  100%{width:100%;opacity:.9;background-position:50% 0}
}

body.ready #loading{
  animation:fadeOut .6s cubic-bezier(.4,.0,.2,1) forwards;
  pointer-events:none;
}

@keyframes fadeOut{
  0%{opacity:1;backdrop-filter:blur(0px)}
  100%{opacity:0;backdrop-filter:blur(10px)}
}

/* desktop = forced phone frame ------------------------------------ */
/* svh, not dvh: on iOS the layout viewport is the toolbars-hidden height, so dvh lets the
   stage run underneath Safari's bottom bar. svh is the always-visible height. */
#app{
  position:fixed;top:0;left:0;right:0;height:100vh;height:100svh;display:grid;place-items:center;
  background:#05070f url('assets/bg/river-night.webp') center/cover no-repeat;
}
#app::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(30px) saturate(1.15) brightness(.5);
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,170,80,.10),transparent 60%),rgba(4,6,14,.45);
}

#stage{
  position:relative;z-index:1;overflow:hidden;
  aspect-ratio:9/19.5;height:100vh;height:100svh;width:auto;max-width:100vw;
  container-type:size;
  border-radius:34px;
  box-shadow:0 0 0 6px #10131f,0 0 0 8px #2b3147,0 40px 90px -20px #000,0 0 120px -30px #4a7cff;
  background:#0b1226;
  font-size:4cqw;
  touch-action:none;
}
@media (max-width:620px){
  #stage{width:100vw;height:100vh;height:100svh;aspect-ratio:auto;border-radius:0;box-shadow:none}
  #app{background:#05070f}
  #app::after{display:none}
}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 8%,transparent 40%,rgba(4,8,22,.55) 100%),
    linear-gradient(180deg,rgba(6,10,26,.55) 0%,transparent 22%,transparent 62%,rgba(4,7,20,.7) 100%);
}

/* screens ---------------------------------------------------------- */
.screen{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 4cqw) 5cqw calc(env(safe-area-inset-bottom) + 4cqw);
  gap:2.5cqw;
  opacity:0;visibility:hidden;transform:translateY(3cqw) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
}
.screen.is-active{opacity:1;visibility:visible;transform:none}

/* shared bits ------------------------------------------------------ */
.hint{
  font-size:3.3cqw;font-weight:400;letter-spacing:.06em;color:#e8d5ab;
  text-shadow:0 .5cqw 0 rgba(0,0,0,.55);
}
.hint::before,.hint::after{content:'✦';opacity:.5;margin:0 1.6cqw;font-size:.8em;color:var(--gold)}
.stack{display:flex;flex-direction:column;align-items:center;gap:2cqw;width:100%}

.img-btn{position:relative;transition:transform .18s var(--ease),filter .18s}
.img-btn img{width:100%;filter:drop-shadow(0 1cqw 0 rgba(0,0,0,.45))}
.img-btn:active{transform:translateY(1cqw) scale(.98)}

.ghost-btn{
  font-size:3.1cqw;font-weight:400;color:#d9c39a;padding:1.4cqw 3cqw;border-radius:2cqw;
  background:rgba(12,18,38,.5);border:.4cqw solid rgba(246,207,125,.25);
  backdrop-filter:blur(6px);transition:.2s;
}
.ghost-btn:active{transform:scale(.95);background:rgba(246,207,125,.16)}
.ghost-btn.is-mute{opacity:0;pointer-events:none}

.bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:2cqw;flex:0 0 auto}
.bar h2{
  font-size:3.6cqw;font-weight:500;letter-spacing:.04em;color:var(--gold);
  text-shadow:0 .5cqw 0 #3a2412,0 0 4cqw rgba(255,190,90,.45);
}

/* ── 1. select ────────────────────────────────────────────────────── */
/* Every fixed-aspect block is capped in BOTH axes: cqw alone overflows a short viewport
   (a real phone with browser chrome is far wider than the 9:19.5 design), and .screen clips. */
#s-select{justify-content:space-between;padding-top:calc(env(safe-area-inset-top) + 5cqw)}
.title{
  width:min(88%,37cqh);filter:drop-shadow(0 1.2cqw 0 rgba(0,0,0,.4)) drop-shadow(0 0 6cqw rgba(255,186,92,.35));
  animation:float 5.5s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-1.6cqw) rotate(-.4deg)}}

.name-row{display:flex;justify-content:center;width:100%}
.name-frame{position:relative;width:min(58%,24cqh);filter:drop-shadow(0 1.2cqw .8cqw rgba(0,0,0,.5))}
.name-frame>img{width:100%}
#nameInput{                                  /* sits exactly on the painted cream field */
  position:absolute;left:7.4%;top:41%;width:85%;height:39.2%;
  background:none;border:0;outline:none;text-align:center;
  font-family:'Mitr';font-weight:500;font-size:4.3cqw;color:#4a3524;
}
#nameInput::placeholder{color:rgba(120,90,60,.42);font-weight:300}
.name-row.ok .name-frame{filter:drop-shadow(0 1.2cqw .8cqw rgba(0,0,0,.5)) drop-shadow(0 0 3cqw rgba(246,207,125,.65))}
.name-row.nope{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-1.6cqw)}75%{transform:translateX(1.6cqw)}}

/* name plaque — the river draws its own in WebGL; this one is for the draw-screen preview */
.sign{position:relative;display:block;container-type:inline-size}
.sign>img{width:100%;display:block;filter:drop-shadow(0 .5cqw .4cqw rgba(0,0,0,.5))}
.sign-name{
  position:absolute;left:16.2%;top:18.9%;width:68.9%;height:18.7%;
  display:grid;place-content:center;text-align:center;overflow:hidden;white-space:nowrap;
  font-size:var(--fs,13cqw);line-height:1;font-weight:500;color:#5a3a24;
}

.char{position:relative;display:grid;place-items:center}
.char-glow{
  position:absolute;width:46cqw;height:46cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,120,.30),rgba(255,150,60,.08) 45%,transparent 70%);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.12);opacity:.75}}
.char-sprite{
  height:min(48cqw,23cqh);width:auto;position:relative;
  filter:drop-shadow(0 2cqw 1.5cqw rgba(0,0,0,.5));
  animation:bob 3.2s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-1.2cqw)}}
.char-sprite.swap{animation:swapIn .45s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(2cqw) scale(.92)}}

.gender{display:flex;gap:3cqw}
.gender-btn{
  display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 3.4cqw 1.4cqw 1.6cqw;
  border-radius:3cqw;background:rgba(10,16,34,.55);border:.5cqw solid rgba(246,207,125,.22);
  font-size:3cqw;color:#c9b58e;transition:.25s var(--ease);backdrop-filter:blur(4px);
}
.gender-btn img{width:7cqw;height:auto}
.gender-btn.is-on{
  background:linear-gradient(180deg,rgba(246,207,125,.22),rgba(201,139,46,.18));
  border-color:var(--gold);color:#fff3d8;transform:translateY(-.6cqw);
  box-shadow:0 .8cqw 0 rgba(0,0,0,.35),0 0 5cqw rgba(255,190,90,.4);
}
.gender-btn:active{transform:scale(.94)}

.cards{display:flex;gap:2.2cqw;width:100%;justify-content:center}
.card{
  flex:0 0 min(21cqw,10cqh);position:relative;
  transition:transform .3s var(--ease),filter .3s;
  filter:brightness(.62) saturate(.7);transform:scale(.9);
}
.card img{width:100%;filter:drop-shadow(0 .8cqw 0 rgba(0,0,0,.4))}
.card.is-on{
  filter:none;transform:scale(1.06) translateY(-.8cqw);
  animation:pop .45s var(--ease);
}
.card.is-on img{filter:drop-shadow(0 .8cqw 0 rgba(0,0,0,.45)) drop-shadow(0 0 3.5cqw rgba(255,196,104,.85))}
.card.is-on::after{
  content:'';position:absolute;inset:-1.5cqw;border-radius:2cqw;pointer-events:none;
  box-shadow:inset 0 0 0 .5cqw rgba(246,207,125,.5);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes pop{40%{transform:scale(1.16) translateY(-1.6cqw)}}
.card:active{transform:scale(.98)}

.start{width:min(62%,26cqh);margin-bottom:2cqw;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.14) drop-shadow(0 0 4cqw rgba(255,200,110,.55))}}

/* ── 2. draw ──────────────────────────────────────────────────────── */
.panel{position:relative;width:100%;flex:0 0 auto}
.panel-art{width:100%;filter:drop-shadow(0 2cqw 2cqw rgba(0,0,0,.55))}

.draw-panel{margin:auto 0;width:min(100%,42cqh)}
.paper{
  position:absolute;left:6.9%;top:9%;width:87.1%;height:75.7%;
  overflow:hidden;background:#f3e3c3;
}
.paper #photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;image-rendering:auto}
.paper #paint{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.paper-hint{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-size:3.2cqw;color:#a98a63;pointer-events:none;line-height:1.9;transition:opacity .35s;
}
.paper-hint span{font-size:.82em;opacity:.7}
.paper-hint .ph-next{color:#b8863f;opacity:1}       /* warm gold: reads as "coming up next", not part of the draw tip */
.paper.dirty .paper-hint{opacity:0}

.hit{position:absolute;top:93.3%;left:var(--x);transform:translate(-50%,-50%);border-radius:50%}
.hit.swatch{width:9%;aspect-ratio:1}
.hit.tool{width:10.5%;aspect-ratio:1;border-radius:14%}

/* the painted save key doubles as "continue" — gold pulse + NEXT tag so nobody gets stranded here */
#doneBtn{animation:savePulse 1.8s ease-in-out infinite}
#doneBtn::after{
  content:'NEXT →';position:absolute;left:50%;bottom:112%;transform:translateX(-50%);
  font-size:2.3cqw;font-weight:500;letter-spacing:.08em;white-space:nowrap;
  color:var(--ink);background:var(--gold);padding:.6cqw 1.8cqw;border-radius:1.4cqw;
  box-shadow:0 .6cqw 0 rgba(0,0,0,.3);
}
/* soft halo, no crisp ring: a hard outline can never sit pixel-perfect on hand-painted keys */
@keyframes savePulse{
  0%,100%{box-shadow:0 0 2cqw .3cqw rgba(255,200,110,.35)}
  50%{box-shadow:0 0 5cqw 1.2cqw rgba(255,212,124,.8)}
}
.hit:active{transform:translate(-50%,-50%) scale(.86)}
.hit.swatch.is-on::after{
  content:'';position:absolute;inset:-4%;border-radius:24%;
  box-shadow:0 0 0 .45cqw #fff8e2,0 0 3cqw rgba(255,225,150,.85);
  animation:breathe 2s ease-in-out infinite;
}
.hit.send{top:77.6%;left:50%;width:36%;height:13%;border-radius:2cqw}

/* palette + brush */
/* row-reverse: palette+brush on the LEFT so a right-handed drawing arm never hides them */
.tools{position:relative;width:100%;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:space-between;gap:1cqw}
/* the river runs behind these — a soft scrim keeps the preview readable without boxing it in */
.tools::before{
  content:'';position:absolute;inset:-6cqw -8cqw -10cqw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,10,24,.5) 40%,rgba(6,10,24,.62));
}
.tool-col{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;flex:0 0 auto}

.topbar{width:100%;display:flex;justify-content:flex-end;margin-bottom:-1cqw}
.undo-redo{position:relative;width:min(34cqw,16cqh);flex:0 0 auto;filter:drop-shadow(0 1cqw .8cqw rgba(0,0,0,.5))}
.undo-redo>img{width:100%}
.ur{                                        /* hit area runs wider than the painted key — thumbs are blunt */
  position:absolute;top:46.3%;left:var(--x);transform:translate(-50%,-50%);
  width:36%;height:46%;border-radius:8%;
}
.ur:active{transform:translate(-50%,-50%) scale(.88)}
.ur[disabled]{cursor:default}
.ur[disabled]::after{content:'';position:absolute;inset:6% 10%;border-radius:6%;background:rgba(46,28,16,.55)}

/* live "this is what will float" vignette */
.final-preview{flex:0 0 auto;width:min(52cqw,24cqh);display:flex;flex-direction:column;align-items:center;gap:.5cqw}
.fp-cap{font-size:2.7cqw;color:rgba(240,222,190,.62);letter-spacing:.04em}
.fp-stage{position:relative;width:100%;aspect-ratio:1/.92}
.fp-krathong{
  position:absolute;right:0;bottom:0;width:58%;z-index:2;
  filter:drop-shadow(0 1cqw .8cqw rgba(0,0,0,.45)) drop-shadow(0 0 3cqw rgba(255,186,92,.35));
  animation:bob 3.6s ease-in-out infinite;
}
/* stands upright in the gap between card and krathong, on the back layer — nothing covers the name */
.fp-sign{position:absolute;left:27%;bottom:20%;width:42%;z-index:0}
.card-preview.mini{
  position:absolute;left:0;bottom:4%;width:34%;transform:rotate(-8deg);animation:none;z-index:1;
  filter:drop-shadow(0 .8cqw .6cqw rgba(0,0,0,.5));
}
.card-preview.mini .slot-msg{font-size:1.7cqw;color:#6b5238}
.palette{position:relative;width:min(40cqw,19cqh)}
.palette-art{width:100%;filter:drop-shadow(0 1.4cqw 1cqw rgba(0,0,0,.5))}
.dab{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:19%;aspect-ratio:1;border-radius:50%;
}
.dab.is-on{box-shadow:0 0 0 .5cqw #fff8e2,0 0 3cqw rgba(255,225,150,.8);animation:breathe 2s ease-in-out infinite}
.dab.erase.is-on{box-shadow:0 0 0 .5cqw #9fd7ff,0 0 3cqw rgba(150,215,255,.8)}
.brush{
  position:absolute;width:56%;left:52%;top:34%;
  transform-origin:12% 50%;transform:rotate(-32deg);
  transition:transform .3s var(--ease),left .3s var(--ease),top .3s var(--ease);
  filter:drop-shadow(0 1cqw .6cqw rgba(0,0,0,.45));pointer-events:none;
}
.brush.dip{animation:dip .45s var(--ease)}
@keyframes dip{50%{transform:rotate(-14deg) translate(-6%,10%)}}

.sizes{display:flex;gap:2.6cqw}
.size{
  width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,16,34,.55);border:.4cqw solid rgba(246,207,125,.25);transition:.2s;
}
.size::after{content:'';width:calc(var(--d,3cqw));aspect-ratio:1;border-radius:50%;background:#e8d5ab}
.size[data-size="6"]{--d:1.6cqw}.size[data-size="14"]{--d:3cqw}.size[data-size="28"]{--d:4.6cqw}
.size.is-on{border-color:var(--gold);background:rgba(246,207,125,.18)}
.size.is-on::after{background:#fff3d8}

.cursor-brush{                              /* pinned: without left/top it lands after .tools and stretches the screen */
  position:absolute;left:0;top:0;width:26cqw;pointer-events:none;opacity:0;z-index:9;
  /* scaleX(-1) mirrors the whole pose around the tip: handle sticks out up-LEFT,
     clear of a right-handed drawing hand instead of hiding under it */
  transform-origin:8% 50%;transform:scaleX(-1) rotate(38deg) translate(-6%,-46%);
  filter:drop-shadow(0 1cqw .8cqw rgba(0,0,0,.5));transition:opacity .18s;
}
.cursor-brush.on{opacity:1}

/* ── 3. wish ──────────────────────────────────────────────────────── */
.card-preview{position:relative;width:min(44%,19cqh);flex:0 0 auto;animation:float 6s ease-in-out infinite}
.card-preview .slot-img{
  position:absolute;left:22.7%;top:17.3%;width:55.7%;height:36.2%;
  object-fit:cover;background:#e7d3ad;image-rendering:auto;
}
.card-preview .slot-msg{
  position:absolute;left:16.5%;top:65.9%;width:68.1%;height:14.2%;
  display:grid;place-content:center;text-align:center;overflow:hidden;
  font-size:2.4cqw;line-height:1.35;color:#4a3524;font-weight:400;padding:0 1cqw;
}
.card-preview.big{width:70%}
.card-preview.big .slot-msg{font-size:2.9cqw;line-height:1.3}
.modal-owner{
  position:absolute;left:0;right:0;bottom:-8cqw;text-align:center;
  font-size:3.2cqw;color:#e8d5ab;text-shadow:0 .4cqw 0 rgba(0,0,0,.6);
}
/* whoever floated it, tucked into the bottom-left corner on top of the card */
.modal-char{
  position:absolute;left:-17%;bottom:-3%;height:40%;width:auto;z-index:3;
  filter:drop-shadow(0 1.4cqw 1cqw rgba(0,0,0,.6)) drop-shadow(0 0 3cqw rgba(255,190,90,.45));
  animation:bob 3.4s ease-in-out infinite;
}

.wish-float{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:1cqw}
.wish-float .hint{font-size:2.7cqw;opacity:.7}
.wish-krathong{
  width:min(34cqw,16cqh);filter:drop-shadow(0 1.4cqw 1cqw rgba(0,0,0,.5)) drop-shadow(0 0 5cqw rgba(255,186,92,.45));
  animation:float 4.5s ease-in-out infinite;
}
.wish-panel{margin-top:0;width:min(100%,42cqh)}
#wishText{
  position:absolute;left:12.6%;top:35%;width:74.8%;height:30%;
  background:none;border:0;resize:none;outline:none;
  font-family:'Mitr';font-weight:300;font-size:3.6cqw;line-height:1.55;
  color:#f7e6c4;text-shadow:0 .3cqw 0 rgba(0,0,0,.5);
}
#wishText::placeholder{color:rgba(230,200,150,.35)}
.counter{position:absolute;right:14.5%;top:64.5%;font-size:2.2cqw;color:rgba(230,200,150,.4)}

/* ── 4. world ─────────────────────────────────────────────────────── */
#s-world{justify-content:flex-start}
.world-bar{padding-top:1cqw}
.pill{
  font-size:2.9cqw;color:#f0dcae;padding:1.4cqw 3.4cqw;border-radius:5cqw;
  background:rgba(10,16,34,.55);border:.4cqw solid rgba(246,207,125,.25);backdrop-filter:blur(6px);
}
.world-bar{gap:1.5cqw}
.world-bar .pill{margin-right:auto}
.world-hint{
  margin-top:auto;margin-bottom:5cqw;font-size:3cqw;color:rgba(240,222,190,.8);text-align:center;
  text-shadow:0 .5cqw 0 rgba(0,0,0,.7);transition:opacity .6s,transform .6s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:.6cqw;
}
.world-hint em{font-style:normal;font-size:.82em;opacity:.6}
.world-hint .arrow{color:var(--gold);display:inline-block;animation:swipe 2.2s ease-in-out infinite}
.world-hint .arrow:last-of-type{animation-delay:.15s}
@keyframes swipe{40%{transform:translateX(-1.4cqw);opacity:.4}60%{transform:translateX(1.4cqw)}}
.world-hint.gone{opacity:0;transform:translateY(2cqw)}

.track{
  width:46%;height:.9cqw;border-radius:1cqw;background:rgba(255,236,200,.14);
  margin-bottom:calc(env(safe-area-inset-bottom) + 1cqw);position:relative;overflow:hidden;
}
.track-thumb{
  position:absolute;top:0;bottom:0;border-radius:1cqw;
  background:linear-gradient(90deg,rgba(246,207,125,.7),rgba(255,232,180,.95));
  box-shadow:0 0 2cqw rgba(255,200,110,.6);
}

/* blow mini-game ---------------------------------------------------- */
/* A numbered card, not a hint: the permission prompt is the step people get stuck on. */
.blow{
  position:absolute;left:4cqw;right:4cqw;bottom:7cqw;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:2cqw;
  padding:4cqw 4cqw 4.5cqw;border-radius:4cqw;
  background:linear-gradient(180deg,rgba(12,19,40,.72),rgba(8,13,30,.86));
  border:.4cqw solid rgba(246,207,125,.2);backdrop-filter:blur(10px);
  box-shadow:0 2cqw 6cqw rgba(0,0,0,.55);
  animation:riseIn .8s var(--ease);
}
.blow[hidden]{display:none}          /* display:flex above outranks the UA [hidden] rule */
@keyframes riseIn{from{opacity:0;transform:translateY(3cqw)}}
.blow-title{font-size:4.4cqw;font-weight:500;color:var(--gold);text-shadow:0 .4cqw 0 rgba(0,0,0,.5)}
.blow-sub{font-size:2.9cqw;text-align:center;line-height:1.45;color:rgba(242,226,196,.72);max-width:88%}

.blow-steps{list-style:none;display:flex;flex-direction:column;gap:1.6cqw;width:100%;margin:.5cqw 0}
.blow-steps li{display:flex;align-items:center;gap:2.4cqw;font-size:3cqw;line-height:1.35;color:#efe0c2}
.blow-steps li>b{
  flex:0 0 6cqw;height:6cqw;border-radius:50%;display:grid;place-items:center;
  font-size:2.9cqw;font-weight:500;color:#2a1a12;background:var(--gold);
}
.blow-steps b{color:var(--gold);font-weight:500}

.blow-bar{width:100%;height:2cqw;border-radius:2cqw;background:rgba(255,236,200,.12);overflow:hidden}
.blow-fill{
  height:100%;width:0%;border-radius:2cqw;transition:width .16s ease-out;
  background:linear-gradient(90deg,rgba(246,207,125,.6),rgba(255,236,180,1));
  box-shadow:0 0 2cqw rgba(255,200,110,.55);
}
.blow-actions{display:flex;align-items:center;gap:3cqw;margin-top:.5cqw}
.gold-btn{
  font-size:3.6cqw;font-weight:500;color:#2f1d0e;padding:2.4cqw 6cqw;border-radius:3cqw;
  background:linear-gradient(180deg,#f8d894,#e0a742);
  box-shadow:0 1cqw 0 #9c6a1c,0 0 5cqw rgba(255,200,110,.45);
  transition:transform .15s var(--ease),filter .2s;
}
.gold-btn:active{transform:translateY(.8cqw);box-shadow:0 .3cqw 0 #9c6a1c}
.gold-btn:disabled{filter:grayscale(.6) brightness(.75);box-shadow:0 1cqw 0 #6b4a17}
.blow-actions .ghost-btn{font-size:2.9cqw}

/* live: the steps are done, so the card becomes one big instruction + the bar */
.blow.live .blow-steps,.blow.live .blow-sub{display:none}
.blow.live .blow-title{font-size:5.4cqw;animation:breathe 1.4s ease-in-out infinite}
.blow:not(.live) .blow-bar{display:none}

/* reward sign ------------------------------------------------------- */
.big-sign{position:relative;width:92%;filter:drop-shadow(0 3cqw 3cqw rgba(0,0,0,.6))}
.big-sign>img{width:100%}
.bs-title{
  position:absolute;left:31%;top:4.4%;width:38%;height:10%;
  display:grid;place-content:center;font-size:2.4cqw;letter-spacing:.14em;color:var(--gold);
}
.bs-body{
  position:absolute;left:6%;top:20.2%;width:88%;height:48.3%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;
}
.bs-sub{font-size:2.6cqw;color:#8a5c30;letter-spacing:.06em}
.bs-nums{display:flex;align-items:flex-start;gap:6cqw;color:#7a4a22}
.bs-num{display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.bs-nums b{font-family:'Press Start 2P',monospace;font-size:7cqw;letter-spacing:.02em}
.bs-num small{font-size:2.3cqw;color:#8a5c30;letter-spacing:.08em}
.bs-msg{font-size:3cqw;color:#6b4a2c;text-align:center;padding:0 4cqw;line-height:1.4}

/* modal ------------------------------------------------------------ */
.modal{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(4,8,20,.72);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:.35s var(--ease);
}
.modal.on{opacity:1;visibility:visible}
.modal .card-preview{transform:scale(.85) rotate(-2deg);transition:.45s var(--ease);animation:none}
.modal.on .card-preview{transform:none}
.modal-close{
  position:absolute;bottom:10cqw;left:0;right:0;text-align:center;
  font-size:2.7cqw;color:rgba(240,222,190,.5);animation:breathe 3s ease-in-out infinite;
}

/* send flash ------------------------------------------------------- */
#flash{
  position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 62%,rgba(255,226,168,.95),rgba(255,180,80,.35) 30%,transparent 68%);
}
#flash.go{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}