/* Layout: one-hand phone table. Sticky question on top, card row reads left→right (small→big), actions pinned to the thumb zone. */
:root{
  --table:#16121f;
  --glow:#2a2140;
  --felt:#221b31;
  --line:#3b3152;
  --fg:#f0ebf8;
  --muted:#a59dbf;
  --paper:#f8f5fc;
  --ink:#1e1929;
  --thread:#ff566c;
  --thread-deep:#d93a52;
  --gold:#ffc94d;
  --bad:#ff4040;
  --bad-soft:#ffe1e1;
  --ok:#4fd18b;
  --hot:#ff566c;
  --cold:#5b7fe6;
  --on-card:#ffffff;
  --q-bg:#ffffff;
  --q-soft:#f2eef8;
  --q-line:#e2dcec;
  --q-muted:#6a6280;
  --scrim:rgba(8,6,14,.72);
  --display:"Black Han Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{background:var(--table);color:var(--fg)}
body{
  margin:0;min-height:100%;
  font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  background:radial-gradient(140% 55% at 50% -8%, var(--glow) 0%, var(--table) 62%) fixed, var(--table);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--table)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:0;border-radius:14px;
  min-height:52px;padding:0 18px;
  font-family:var(--display);font-size:18px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease, filter .12s ease, opacity .2s;
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-primary{background:var(--thread);color:var(--on-card);box-shadow:0 6px 0 var(--thread-deep)}
.btn-primary:active{box-shadow:0 2px 0 var(--thread-deep);transform:translateY(3px)}
.btn-ghost{background:var(--felt);border:1px solid var(--line);color:var(--fg)}
.btn-small{min-height:36px;padding:0 12px;font-size:14px;border-radius:999px}

/* ---------- setup ---------- */
#setup{max-width:520px;margin:0 auto;padding-block:28px 40px;display:flex;flex-direction:column;gap:20px}
.hero{display:flex;flex-direction:column;gap:6px}
.hero h1{font-family:var(--display);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.01em}
.hero h1 .r{color:var(--thread)}
.hero svg{width:180px;height:18px;display:block}
.hero p{margin:0;color:var(--muted)}
.panel{background:var(--felt);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.label{font-size:13px;color:var(--muted);letter-spacing:.06em}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--table);font-size:22px;line-height:1}
.stepper output{min-width:64px;text-align:center;font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums}
.stepper output small{font-family:var(--body);font-size:14px;color:var(--muted);margin-left:2px}
#plist{display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px}
.swatch{width:40px;height:40px;border-radius:12px;background:var(--c);display:grid;place-items:center;font-family:var(--display);color:var(--on-card);text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.prow input{
  width:100%;min-width:0;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--table);color:var(--fg);padding:0 12px;font:inherit;font-size:16px;
}
.prow input::placeholder{color:var(--muted);opacity:.7}
.rules{color:var(--muted);font-size:14px}
.rules summary{cursor:pointer;color:var(--fg);font-size:15px}
.rules ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rules b{color:var(--fg);font-weight:400;border-bottom:1px solid var(--thread)}

/* ---------- game ---------- */
#game{max-width:640px;margin:0 auto;padding-block:10px 120px;display:flex;flex-direction:column;gap:14px}
.qbar{
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;
  background:var(--q-bg);color:var(--ink);border:1px solid var(--q-line);border-radius:18px;
  padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
}
.qtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.eyebrow{font-size:12px;color:var(--q-muted);letter-spacing:.08em}
.eyebrow b{color:var(--thread-deep);font-weight:400}
.qbar .btn-ghost{background:var(--q-soft);border-color:var(--q-line);color:var(--ink)}
#qtext{font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.scale{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:12px;color:var(--q-muted)}
.scale .bar{height:4px;border-radius:4px;background:linear-gradient(90deg, var(--q-line), var(--thread))}
.scale b{font-family:var(--display);font-weight:400;color:var(--ink);font-size:14px;margin:0 3px;font-variant-numeric:tabular-nums}
.hint{margin:0;font-size:13px;color:var(--muted);text-align:center}
.rank{display:flex;align-items:baseline;gap:8px;width:100%;max-width:520px;margin:0 auto;padding-left:2px}
.rank span{font-family:var(--display);font-size:16px;letter-spacing:.02em}
.rank small{font-size:12px;color:var(--muted)}
.rank-top span{color:var(--hot)}
.rank-bottom span{color:var(--cold)}

#grid{
  --rowh:56px;
  display:flex;flex-direction:column;gap:6px;
  width:100%;max-width:520px;margin:0 auto;position:relative;
}
/* heat rail behind the row numbers: hot (high) at the top, cold (low) at the bottom */
#grid::before{content:"";position:absolute;left:20.5px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--hot), var(--cold));opacity:.55}
.card{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 36px;align-items:center;gap:8px;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.slot{
  position:relative;z-index:1;height:26px;border-radius:999px;
  background:var(--heat, var(--line));color:var(--on-card);font-size:12px;line-height:26px;text-align:center;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.stage{position:relative;perspective:900px;min-width:0}
.flip{
  position:relative;height:var(--rowh);width:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
.card.holding .flip{transform:scale(.97)}
.card.open .flip{transform:rotateX(180deg)}
.card.fast .flip{transition-duration:.16s}
.face{
  position:absolute;inset:0;border-radius:12px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;
}
.back{
  background:
    radial-gradient(circle at calc(100% - 30px) 50%, transparent 0 7px, rgba(255,255,255,.24) 7px 9px, transparent 9px 13px, rgba(255,255,255,.17) 13px 15px, transparent 15px 19px, rgba(255,255,255,.1) 19px 21px, transparent 21px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px),
    var(--c);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.3), 0 4px 10px -5px rgba(0,0,0,.6);
  color:var(--on-card);
}
.bname{
  flex:0 1 auto;min-width:0;max-width:50%;
  font-family:var(--display);font-size:clamp(16px, calc(var(--rowh) * .38), 26px);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.ans{
  flex:1 1 auto;min-width:0;margin-right:44px;padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.2);
  font-size:clamp(12px, calc(var(--rowh) * .3), 16px);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ans:empty{display:none}
.card.has-ans .bhint{display:none}
.bhint{flex:0 0 auto;margin-left:auto;margin-right:46px;font-size:11px;opacity:.85;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:opacity .2s}
.timer{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:calc(var(--rowh) - 10px);height:calc(var(--rowh) - 10px);max-width:48px;max-height:48px;
  display:grid;place-items:center;opacity:0;transition:opacity .15s;
}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .track{stroke:rgba(0,0,0,.28)}
.ring .prog{stroke:var(--on-card);stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38}
.count{position:relative;font-family:var(--display);font-size:clamp(15px, calc(var(--rowh) * .36), 22px);text-shadow:0 1px 4px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.card.holding .timer{opacity:1}
.card.holding .bhint{opacity:0}
.front{
  transform:rotateX(180deg);
  background:var(--paper);color:var(--ink);padding-left:22px;
  box-shadow:inset 0 0 0 2px var(--c), 0 4px 10px -5px rgba(0,0,0,.6);
}
.front::before{content:"";position:absolute;inset:0 auto 0 0;width:9px;background:var(--c)}
.ftext{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.fans{font-size:clamp(11px, calc(var(--rowh) * .26), 15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.6}
.fans:empty{display:none}
.fname{min-width:0;font-size:clamp(13px, calc(var(--rowh) * .3), 18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.num{font-family:var(--display);font-size:clamp(26px, calc(var(--rowh) * .64), 46px);line-height:1;font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.tag{
  position:absolute;left:60%;top:50%;transform:translate(-50%,-50%) scale(0);z-index:2;
  background:var(--bad);color:var(--on-card);font-family:var(--display);font-size:13px;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
  box-shadow:0 4px 10px -2px rgba(0,0,0,.5);
}
.edit{
  width:36px;height:36px;border-radius:50%;padding:0;border:1px solid var(--line);
  background:var(--felt);color:var(--fg);font-size:16px;line-height:1;display:grid;place-items:center;
  touch-action:manipulation;
}
.edit.filled{border-color:var(--gold);color:var(--gold)}
#grid.locked .edit{visibility:hidden}
.dialog input{
  width:100%;height:48px;border-radius:12px;border:1px solid var(--line);
  background:var(--table);color:var(--fg);padding:0 12px;font:inherit;font-size:16px;
}
.dialog input::placeholder{color:var(--muted);opacity:.7}
.card.placeholder .stage{opacity:.22}
.ghost{position:fixed;z-index:60;pointer-events:none;margin:0;will-change:transform}
.ghost .flip{box-shadow:0 18px 26px -10px rgba(0,0,0,.75);border-radius:12px}
.card.pop .stage{animation:pop .35s ease}
.card.nudge .stage{animation:nudge .35s ease}

/* result states */
.card.culprit .front{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 0 0 3px var(--bad), 0 0 0 2px var(--bad), 0 0 18px 1px rgba(255,64,64,.55)}
.card.culprit .front::before{background:var(--bad)}
.card.culprit .slot{background:var(--bad)}
.card.culprit .tag{transform:translate(-50%,-50%) scale(1)}
.card.culprit .stage{animation:shake .5s ease 2}
.card.cleared .stage{opacity:.7}
.card.win .front{box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold), 0 0 16px rgba(255,201,77,.45)}
.card.toss{animation:toss 1s cubic-bezier(.3,0,.4,1) 3;animation-delay:var(--d,0s)}

@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-7px) rotate(-1deg)}40%{transform:translateX(7px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes toss{0%,100%{transform:translateY(0)}15%{transform:translateY(3px) scaleY(.96)}45%{transform:translateY(-24px) rotate(-1.5deg)}60%{transform:translateY(-26px) rotate(1.5deg)}85%{transform:translateY(2px)}}

/* result panel */
#result{background:var(--felt);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
#result.win{border-color:var(--gold)}
#result.lose{border-color:var(--bad)}
#rtitle{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.15}
#result.win #rtitle{color:var(--gold)}
#result.lose #rtitle{color:var(--bad)}
#rsub{margin:0;color:var(--muted)}
.tlabel{font-size:12px;color:var(--muted);letter-spacing:.06em}
.thread{display:flex;align-items:flex-start;width:100%;padding-top:2px}
.bead{flex:0 0 auto;width:30px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bead b{width:30px;height:30px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:13px;color:var(--on-card);text-shadow:0 1px 2px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.bead i{font-style:normal;font-size:10px;color:var(--muted);max-width:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bead.bad b{box-shadow:0 0 0 2px var(--table), 0 0 0 4px var(--bad)}
.bead.bad i{color:var(--bad)}
.seg{flex:1 1 4px;min-width:3px;height:3px;margin-top:13.5px;background:var(--thread);border-radius:2px}
#result.win .seg{background:var(--gold)}
.seg.bad{background:repeating-linear-gradient(90deg, var(--bad) 0 3px, transparent 3px 6px);height:3px}

/* actions */
.actions{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;gap:10px;
  padding:14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background:linear-gradient(to top, var(--table) 62%, transparent);
}
.actions-inner{display:flex;gap:10px;width:100%;max-width:640px;margin:0 auto}
.actions .btn{flex:1}
.actions .btn-ghost{flex:0 0 auto}

/* overlays */
.modal{position:fixed;inset:0;z-index:80;background:var(--scrim);display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px))}
.dialog{width:100%;max-width:360px;background:var(--felt);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}
.dialog h3{font-family:var(--display);font-weight:400;font-size:22px}
.dialog p{margin:0;color:var(--muted)}
.dialog .row{display:flex;gap:10px;margin-top:8px}
.dialog .row .btn{flex:1}
#toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom, 0px));z-index:90;
  transform:translate(-50%, 10px);opacity:0;pointer-events:none;
  background:var(--fg);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;white-space:nowrap;
  transition:opacity .2s, transform .2s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
#cheer{
  position:fixed;left:0;right:0;top:26%;z-index:75;pointer-events:none;text-align:center;
  font-family:var(--display);font-size:clamp(52px, 17vw, 96px);color:var(--gold);
  text-shadow:0 4px 0 var(--thread-deep), 0 10px 30px rgba(0,0,0,.6);
  animation:cheer 3.2s ease forwards;
}
#cheer small{display:block;font-size:.32em;color:var(--fg);text-shadow:0 2px 8px rgba(0,0,0,.6)}
@keyframes cheer{
  0%{transform:translateY(40px) scale(.6);opacity:0}
  10%{transform:translateY(0) scale(1);opacity:1}
  22%{transform:translateY(-34px)}32%{transform:translateY(0)}
  44%{transform:translateY(-34px)}54%{transform:translateY(0)}
  66%{transform:translateY(-34px)}76%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-10px);opacity:0}
}
#flash{position:fixed;inset:0;z-index:65;pointer-events:none;background:radial-gradient(circle, transparent 35%, rgba(255,40,40,.5));animation:flash .9s ease forwards}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .flip{transition-duration:.01s}
  .card.toss,.card.culprit .stage,#cheer{animation-duration:.01s;animation-iteration-count:1}
}