/* 단청 — 화면 */
:root{
  --bg:#14110d;
  --panel:#1e1a14;
  --line:#3a3229;
  --ink:#f0e9dc;
  --dim:#9c9184;
  --gold:#d69a1e;
  --cell:#2a251d;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  overflow:hidden;user-select:none;
}
#app{max-width:520px;margin:0 auto;height:100%;position:relative}
.screen{display:none;position:absolute;inset:0;overflow-y:auto;padding:20px 18px 28px}
.screen.on{display:block}

/* ── 홈 ─────────────────────────────────────────────── */
.hero{text-align:center;padding:34px 0 22px}
.hero .jp{font-size:13px;letter-spacing:.9em;color:var(--gold);opacity:.85;margin-left:.9em}
.hero h1{font-size:46px;letter-spacing:.22em;margin:6px 0 4px;margin-left:.22em;font-weight:800}
.hero .tag{font-size:13px;color:var(--dim);letter-spacing:.06em}

.stats{display:flex;gap:10px;margin:14px 0 20px}
.st{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 8px;text-align:center}
.st b{display:block;font-size:20px;font-weight:800}
.st span{font-size:11px;color:var(--dim)}

.big{
  display:block;width:100%;margin-bottom:11px;padding:17px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  color:var(--ink);font:inherit;font-size:17px;font-weight:700;text-align:left;cursor:pointer;
}
.big small{display:block;font-size:12px;font-weight:400;color:var(--dim);margin-top:3px}
.big.play{background:linear-gradient(135deg,#c8382f,#8f2820);border-color:#c8382f}
.big.daily{background:linear-gradient(135deg,#2a5d8f,#1d4266);border-color:#2a5d8f}
.big.daily.done{background:var(--panel);border-color:var(--line);opacity:.72}
.big.resume{background:var(--panel);border-color:var(--gold)}
.big:active{transform:scale(.985)}

.cal{display:flex;gap:6px;justify-content:center;margin:16px 0}
.cal .day{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);font-size:12px;color:var(--dim)
}
.cal .day.got{background:var(--gold);color:#241a04;border-color:var(--gold);font-weight:800}

.boosters{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.bs{font-size:11px;color:var(--dim);background:var(--panel);border:1px solid var(--line);padding:5px 9px;border-radius:999px}

/* ── 게임 ───────────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.bar .lvl{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .mv{margin-left:auto;margin-right:2px;font-size:19px;font-weight:800;white-space:nowrap}
.bar .mv i{font-style:normal;font-size:13px;color:var(--dim);font-weight:500}
.bar .mv.over{color:#e0574c}
.ic{
  flex:0 0 auto;
  width:36px;height:36px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-size:16px;cursor:pointer;
  display:grid;place-items:center;padding:0;line-height:1
}
.ic:disabled{opacity:.3}

.grid{
  display:grid;gap:3px;margin:0 auto 16px;
  grid-template-columns:repeat(var(--w),1fr);
  width:min(100%,420px);
}
.grid .c{
  aspect-ratio:1;border-radius:7px;cursor:pointer;
  border:2px solid var(--line);
  background:var(--cell);
  position:relative;transition:background .18s,transform .12s,box-shadow .15s;
}
/* 빈 칸 — 목표색이 한눈에 읽혀야 한다. 색 맞추기 게임의 생명이다.
 * 채워진 칸(진한 단색)과 구분되도록 빈 칸은 '옅은 색 + 굵은 고리'로 그린다. */
.grid .c:not(.f):not(.m){
  background:color-mix(in srgb, var(--tc) 22%, var(--cell)) !important;
}
.grid .c:not(.f):not(.m)::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:46%;height:46%;border-radius:50%;
  border:3px solid var(--tc);opacity:.75
}
/* 지금 부을 수 있는 칸 — 테두리를 목표색으로 세우고 살짝 띄운다 */
.grid .c.r{
  border-color:var(--tc);
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35);
}
.grid .c.r::after{opacity:1}
/* 아직 못 닿는 칸은 눌러 죽인다 */
.grid .c:not(.f):not(.m):not(.r){opacity:.42}
.grid .c.f{border-color:transparent}
.grid .c.m{border-color:#6b6152;background:#5b5348 !important}
.grid .c.m::after{content:"濁";width:auto;height:auto;font-size:11px;color:#c9c0ae;opacity:.9;
  display:grid;place-items:center;background:none}
.grid .c.pv{transform:scale(.9);box-shadow:0 0 0 3px var(--tc)}

/* ── 팔레트 ─────────────────────────────────────────── */
.pal{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.blob{
  width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  position:relative;cursor:pointer;color:#fff;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.28);
}
.blob span{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:19px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6)
}
.blob.sel{outline:3px solid var(--gold);outline-offset:2px;transform:translateY(-4px)}
.blob.empty{background:var(--panel);border:2px dashed var(--line);box-shadow:none}

/* ── 컨베이어 ───────────────────────────────────────── */
.conv{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.track{display:flex;gap:6px;overflow:hidden;margin-bottom:11px;min-height:40px;align-items:center}
.cb{
  flex:0 0 auto;width:38px;height:38px;border-radius:9px;position:relative;
  border:1px solid rgba(255,255,255,.16);opacity:.55
}
.cb span{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:800;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cb.head{opacity:1;outline:2px solid var(--gold);outline-offset:1px}
.cb.none{width:auto;padding:0 14px;background:none;border-style:dashed;color:var(--dim);
  display:grid;place-items:center;font-size:12px;opacity:.7}

.cact{display:flex;gap:8px}
.act{
  flex:1;padding:12px;border-radius:11px;border:1px solid var(--line);
  background:#2f2820;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer
}
.act.gold{background:var(--gold);color:#241a04;border-color:var(--gold)}
.act.ghost{background:transparent;color:var(--dim)}
.act:disabled{opacity:.32}
.act small{font-weight:400;font-size:11px;opacity:.75}

.stuck{
  margin-top:14px;padding:14px;border-radius:13px;
  background:#3a2420;border:1px solid #7a3a30;text-align:center
}
.stuck b{display:block;margin-bottom:10px;font-size:15px}
.row{display:flex;gap:8px}

/* ── 결과 ───────────────────────────────────────────── */
.res{text-align:center;padding:70px 0 0}
.rt{font-size:34px;font-weight:800;letter-spacing:.16em;margin-bottom:14px}
.stars{font-size:40px;letter-spacing:.1em;margin-bottom:10px}
.stars .s{color:#3a3229}
.stars .s.on{color:var(--gold)}
.mv2{color:var(--dim);font-size:14px;margin-bottom:6px}
.res .row{margin-top:26px}

@media (max-height:680px){
  .hero{padding:18px 0 12px}
  .hero h1{font-size:36px}
  .blob{width:46px;height:46px}
}

/* ══ 첫 판 안내 ═══════════════════════════════════════════
 * 설명 없는 퍼즐은 퍼즐이 아니라 수수께끼다. 처음 들어온 사람이
 * 읽지 않고도 손이 먼저 움직이게 만드는 게 목적이다. */
#coach{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  max-width:520px;margin:0 auto;padding:16px 18px 20px;
  background:linear-gradient(180deg,rgba(20,17,13,.86),var(--panel) 32%);
  border-top:2px solid var(--gold);
  box-shadow:0 -10px 30px rgba(0,0,0,.55)}
#coach.on{display:block;animation:coachUp .26s ease-out}
@keyframes coachUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
#coach .step{font-size:11px;color:var(--gold);letter-spacing:.14em;margin-bottom:7px}
#coach .msg{font-size:15.5px;line-height:1.65;margin-bottom:13px}
#coach .msg b{color:var(--gold)}
#coach .row{display:flex;gap:8px}
#coach .skip{flex:0 0 auto;padding:11px 15px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--dim);font:inherit;font-size:13px;cursor:pointer}
#coach .go{flex:1;padding:11px;border-radius:10px;border:none;
  background:var(--gold);color:#241a04;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
#coach .wait{flex:1;padding:11px;text-align:center;font-size:13px;color:var(--gold);
  border:1px dashed var(--gold);border-radius:10px;opacity:.9}

/* 지금 눌러야 할 곳을 짚어 준다 */
.coach-hi{position:relative;z-index:61}
.coach-hi::before{content:"";position:absolute;inset:-7px;border-radius:14px;
  border:3px solid var(--gold);pointer-events:none;animation:coachPulse 1.15s ease-in-out infinite}
@keyframes coachPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
/* 안내 카드가 화면 아래를 덮으므로, 안내 중에는 판이 그만큼 위로 스크롤될 수 있게 여백을 준다.
 * 안 그러면 작은 화면에서 "아래 줄을 보세요"라고 말하면서 그 줄을 가린다. */
#app.coaching #game{position:relative;padding-bottom:230px}

/* 판 안 상시 힌트 한 줄 */
.hintline{margin:-6px 0 12px;text-align:center;font-size:12.5px;color:var(--dim)}
.hintline b{color:var(--gold)}

/* ══ 규칙 카드 ═══════════════════════════════════════════ */
#rules{display:none;position:fixed;inset:0;z-index:70;background:rgba(10,8,6,.9);
  overflow-y:auto;padding:22px 18px}
#rules.on{display:block}
#rules .card{max-width:480px;margin:0 auto;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:22px 20px 24px}
#rules h2{font-size:20px;letter-spacing:.08em;margin-bottom:4px}
#rules .sub{font-size:12.5px;color:var(--dim);margin-bottom:18px}
#rules .sec{margin-bottom:17px}
#rules .sec h3{font-size:13px;color:var(--gold);letter-spacing:.1em;margin-bottom:7px}
#rules .sec p{font-size:14px;line-height:1.75}
#rules .sec p b{color:var(--ink)}
#rules ol{margin:0 0 0 18px;font-size:14px;line-height:1.9}
#rules .close{display:block;width:100%;margin-top:6px;padding:13px;border-radius:11px;
  border:none;background:var(--gold);color:#241a04;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
#rules .demo{display:flex;gap:5px;align-items:center;margin:8px 0 2px}
#rules .dc{width:26px;height:26px;border-radius:6px;border:2px solid;position:relative}
#rules .dc.on{border-color:transparent}
#rules .arrow{color:var(--dim);font-size:13px;margin:0 3px}