/* 임시 그림 단계 — 도형과 이모지로 손맛부터 확인한다 */
:root{
  --bg:#12141a; --panel:#1b1f27; --panel2:#232833; --line:#2f3642;
  --tx:#eef2f7; --tx2:#9aa5b4; --tx3:#6b7684;
  --pt:#ff6b35; --ok:#2dd4a7; --bad:#ff5c5c; --gold:#ffc53d;
  --gut:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--tx);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;border:0;cursor:pointer;border-radius:12px;color:inherit}
.hide{display:none!important}

/* ── HUD ── */
#hud{padding:10px var(--gut) 8px;flex:0 0 auto}
.hud-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.goal{flex:1;min-width:0}
.goal .lab{font-size:10.5px;color:var(--tx3);font-weight:700;letter-spacing:.3px}
.goal .num{font-size:15px;font-weight:800;margin-top:1px}
.goal .num b{color:var(--pt)}
.timer{flex:0 0 auto;text-align:right}
.timer .t{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.timer.warn .t{color:var(--bad);animation:pulse .5s infinite}
@keyframes pulse{50%{opacity:.45}}
.tracks{display:flex;gap:8px}
.track{flex:1;height:7px;border-radius:4px;background:var(--panel2);overflow:hidden;position:relative}
.track i{display:block;height:100%;width:0;border-radius:4px;transition:width .45s cubic-bezier(.2,.9,.3,1)}
.track.money i{background:linear-gradient(90deg,#ff8a5c,var(--pt))}
.track.clean i{background:linear-gradient(90deg,#5ce0bd,var(--ok))}
.track .mark{position:absolute;top:-3px;width:2px;height:13px;background:rgba(255,255,255,.45)}
.tracklabs{display:flex;gap:8px;margin-top:4px}
.tracklabs span{flex:1;font-size:10px;color:var(--tx3);font-weight:600}

/* ── 방 ── */
#room{flex:1;position:relative;margin:4px var(--gut) 0;border-radius:18px;overflow:hidden;
  background:
    linear-gradient(180deg,#2a2016 0%,#241c14 52%,#1d160f 52.1%,#181209 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
#room::before{content:'';position:absolute;left:0;right:0;top:52%;height:1px;background:rgba(255,255,255,.07)}
.furn{position:absolute;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:6px}
.obj{position:absolute;width:62px;height:62px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;font-size:27px;
  transition:transform .16s cubic-bezier(.2,1.4,.4,1),opacity .3s;will-change:transform}
.obj:active{transform:scale(.9)!important}
.obj .love{position:absolute;top:-6px;right:-6px;font-size:14px;filter:drop-shadow(0 1px 2px #000)}
.obj .set{position:absolute;bottom:-6px;left:-6px;font-size:10px;font-weight:800;background:var(--gold);
  color:#3a2a00;border-radius:6px;padding:1px 5px}
.obj.gone{transform:scale(.2) translateY(-60px)!important;opacity:0;pointer-events:none}
.obj.stay{animation:nudge .4s}
@keyframes nudge{30%{transform:translateY(6px) rotate(-4deg)}70%{transform:translateY(0) rotate(3deg)}}

/* 날아가는 숫자 */
.fly{position:absolute;font-weight:800;font-size:17px;pointer-events:none;z-index:30;
  animation:fly 1s cubic-bezier(.2,.8,.3,1) forwards;text-shadow:0 2px 6px rgba(0,0,0,.6)}
@keyframes fly{0%{opacity:0;transform:translateY(6px) scale(.8)}
  18%{opacity:1;transform:translateY(-6px) scale(1.15)}
  100%{opacity:0;transform:translateY(-62px) scale(1)}}

/* ── 아래 시트 (선택/퀴즈) ── */
#sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:20px 20px 0 0;
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));z-index:40;
  box-shadow:0 -12px 40px rgba(0,0,0,.6);transform:translateY(102%);transition:transform .26s cubic-bezier(.2,.9,.3,1)}
#sheet.on{transform:none}
.sh-name{font-size:17px;font-weight:800;line-height:1.3}
.sh-cat{font-size:11.5px;color:var(--tx3);margin-top:2px}
.acts{display:flex;gap:8px;margin-top:14px}
.acts button{flex:1;padding:14px 6px;background:var(--panel2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12.5px;font-weight:700}
.acts button .e{font-size:21px}
.acts button.sell{background:linear-gradient(135deg,#ff7b45,#ff5a1f);border-color:transparent;color:#fff}
.q-title{font-size:13px;color:var(--tx2);margin:14px 0 8px;font-weight:600}
.q-opts{display:flex;flex-direction:column;gap:8px}
.q-opts button{padding:15px;background:var(--panel2);border:1px solid var(--line);
  font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.q-opts button.right{background:rgba(45,212,167,.22);border-color:var(--ok);color:var(--ok)}
.q-opts button.wrong{background:rgba(255,92,92,.18);border-color:var(--bad);color:var(--bad)}
.q-src{font-size:10.5px;color:var(--tx3);margin-top:9px;text-align:center}

/* 콤보 */
#combo{position:absolute;top:8px;right:14px;z-index:35;font-weight:800;font-size:15px;color:var(--gold);
  opacity:0;transform:scale(.7);transition:.2s}
#combo.on{opacity:1;transform:none}

/* ── 전체 화면 ── */
.screen{position:absolute;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));overflow:auto}
.cli{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.cli .face{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#3b4351,#272d38);
  display:flex;align-items:center;justify-content:center;font-size:32px;flex:0 0 auto;
  border:2px solid var(--line)}
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:4px 16px 16px 16px;
  padding:12px 14px;font-size:14.5px;line-height:1.55}
.bubble b{color:var(--pt)}
h1{font-size:21px;font-weight:800;margin:0 0 4px}
.sub{color:var(--tx3);font-size:12.5px;margin:0 0 18px}
.goals{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px}
.goals .g{display:flex;align-items:center;gap:10px;padding:7px 0}
.goals .g .e{font-size:19px;width:24px;text-align:center}
.goals .g .t{flex:1;font-size:13.5px}
.goals .g .v{font-weight:800}
.big{padding:16px;background:var(--pt);color:#fff;font-size:16px;font-weight:800;width:100%;margin-top:auto}
.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--tx);padding:13px;width:100%;
  font-size:14px;font-weight:700;margin-top:8px}
.stars{font-size:40px;letter-spacing:6px;text-align:center;margin:10px 0 4px}
.star{opacity:.18}
.star.on{opacity:1;animation:pop .45s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.res{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin:12px 0}
.res .r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.res .r:last-child{border:0}
.res .r span{color:var(--tx2)}
.res .r b{font-weight:800}
.coin{text-align:center;font-size:30px;font-weight:800;color:var(--gold);margin:6px 0 2px}
.miss{font-size:12.5px;color:var(--tx3);line-height:1.7;background:var(--panel2);border-radius:12px;padding:11px 13px}
.miss b{color:var(--tx2)}

/* 판정 한 줄 */
.verdict{margin-top:11px;padding:11px 13px;border-radius:12px;font-size:13px;font-weight:700;text-align:center}
.v-ok{background:rgba(45,212,167,.16);color:var(--ok)}
.v-low{background:rgba(255,197,61,.14);color:var(--gold)}
.v-high{background:rgba(255,92,92,.14);color:var(--bad)}
.obj .tag{position:absolute;bottom:-7px;right:-7px;font-size:9.5px;font-weight:800;background:var(--bad);
  color:#fff;border-radius:6px;padding:1px 5px;white-space:nowrap}

/* 임시 그림 단계에서만 — 이모지로는 뭔지 모르니 이름을 붙인다 */
.obj{flex-direction:column;gap:1px;width:70px;height:70px;font-size:24px}
.obj .nm{font-size:8.5px;font-weight:700;color:var(--tx2);line-height:1.1;text-align:center;
  max-width:64px;overflow:hidden;white-space:nowrap}