:root { --ink: #4a3b2f; --paper: #fffaf3; --edge: #d8c8b4; --accent: #ff8a5b; --accent-edge: #c9603a; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --top-extra: 0px; }
html, body { margin: 0; height: 100%; background: #f3ece2; overflow: hidden; font-family: system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
canvas { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }
button { font: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 0; border-radius: 14px; box-shadow: 0 3px 0 var(--edge); cursor: pointer; padding: 10px 16px; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
button.primary, button.on { background: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
button:disabled { opacity: .45; cursor: default; }
.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, #ffc93c 55%, #e0a020); box-shadow: inset 0 0 0 2px #e0a02088; vertical-align: -0.15em; margin-right: 4px; }

/* 화면 전환: body[data-screen] 과 같은 id 의 section 만 보인다 */
.screen { display: none; }
body[data-screen="title"] #s-title, body[data-screen="mission"] #s-mission, body[data-screen="result"] #s-result,
body[data-screen="free"] #s-free, body[data-screen="shop"] #s-shop, body[data-screen="draw"] #s-draw { display: block; }
body[data-screen="mission"] { --top-extra: 96px; }

#topbar { position: fixed; top: 0; left: 0; right: 0; padding: calc(var(--safe-t) + 8px) 10px 6px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
#back { width: 42px; height: 42px; padding: 0; font-size: 26px; line-height: 1; }
body[data-screen="title"] #back, body[data-screen="result"] #back { visibility: hidden; }
#top-title { flex: 1; font-weight: 800; font-size: 17px; text-align: center; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#coins { background: var(--paper); border-radius: 999px; padding: 8px 14px; font-size: 16px; box-shadow: 0 3px 0 var(--edge); white-space: nowrap; }
#coins.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.15); } }

#hint { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 60px + var(--top-extra)); text-align: center; font-size: 13px; color: #4a3b2fa0; pointer-events: none; padding: 0 12px; }
#hint:empty { display: none; }
#modes { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 82px + var(--top-extra)); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
#modes:empty { display: none; }
#modes button { pointer-events: auto; padding: 6px 14px; font-size: 14px; border-radius: 999px; }
body[data-screen="title"] #hint, body[data-screen="title"] #modes, body[data-screen="result"] #hint, body[data-screen="result"] #modes,
body[data-screen="draw"] #modes { display: none; }

/* 타이틀 */
.logo { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 64px); text-align: center; font-size: clamp(30px, 8vw, 48px); font-weight: 900; letter-spacing: -1px; text-shadow: 0 3px 0 #fff; pointer-events: none; }
.logo small { display: block; font-size: 14px; font-weight: 600; opacity: .6; letter-spacing: 0; }
.menu { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b) + 18px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; }
.menu button { width: min(340px, 100%); font-size: 19px; padding: 12px; }
.menu button small { display: block; font-size: 12px; font-weight: 600; opacity: .75; }

/* 미션 HUD */
#mhud { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 56px); padding: 0 14px; pointer-events: none; }
#mhud .row { display: flex; justify-content: space-between; align-items: baseline; max-width: 520px; margin: 0 auto; }
#m-time { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
#m-time.low { color: #e8433a; animation: bump .5s infinite; }
#m-score { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #fff; }
#m-name { text-align: center; font-weight: 800; font-size: 15px; margin-top: -2px; }
.bar { position: relative; max-width: 420px; height: 18px; margin: 4px auto 0; background: #fff8; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 2px #fff; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffb36b, #ff8a5b); border-radius: 999px; transition: width .08s; }
.bar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 800; line-height: 18px; }
#m-banner { position: fixed; left: 0; right: 0; top: 42%; text-align: center; font-size: clamp(44px, 14vw, 84px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--accent-edge), 0 0 30px #ff8a5b88; pointer-events: none; opacity: 0; }
#m-banner.show { animation: banner .6s ease-out forwards; }
#m-banner.count { color: var(--ink); text-shadow: 0 4px 0 #fff; }
#m-banner small { display: block; font-size: 22px; }
@keyframes banner { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1.12); } 45% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }

/* 결과 */
.panel { background: var(--paper); border-radius: 22px; box-shadow: 0 6px 0 var(--edge), 0 10px 40px #0002; padding: 16px 18px; }
#s-result { position: fixed; inset: 0; background: #f3ece2cc; overflow-y: auto; }
.result { max-width: 400px; margin: calc(var(--safe-t) + 20px) auto calc(var(--safe-b) + 20px); }
.result h2 { margin: 0 0 8px; text-align: center; font-size: 26px; }
.stats { display: flex; gap: 8px; }
.stats div { flex: 1; background: #fff; border-radius: 14px; padding: 8px 4px; text-align: center; }
.stats small { display: block; font-size: 12px; opacity: .7; }
.stats b { font-size: 24px; }
#r-best { text-align: center; font-size: 13px; margin: 6px 0; opacity: .75; }
.rank { background: #fff; border-radius: 14px; padding: 8px 10px; font-size: 14px; min-height: 60px; }
.rank ol { margin: 0; padding: 0; list-style: none; }
.rank li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px dashed #0001; }
.rank li.mine { color: var(--accent-edge); font-weight: 800; }
.rank li span:nth-child(1) { width: 26px; text-align: right; opacity: .6; }
.rank li span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li span:nth-child(3) { font-variant-numeric: tabular-nums; font-weight: 700; }
.rank .note { font-size: 12px; opacity: .65; margin-top: 4px; text-align: center; }
.nick { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 14px; font-weight: 700; }
.nick input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--edge); background: #fff; -webkit-user-select: text; user-select: text; }
.nick small { font-size: 11px; opacity: .6; font-weight: 600; }
.btns { display: flex; gap: 8px; }
.btns button { flex: 1; font-size: 17px; }

/* 프리 모드 피젯 고르기 */
#picker { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b) + 12px); display: flex; gap: 8px; padding: 4px 12px 6px; overflow-x: auto; scrollbar-width: none; }
#picker::-webkit-scrollbar { display: none; }
#picker button { flex: none; border-radius: 999px; padding: 10px 16px; }
#picker:not(:empty)::before, #picker:not(:empty)::after { content: ""; flex: 1 0 0; }

/* 상점 — 세로: 아래 시트, 가로: 오른쪽 패널 */
#shop { position: fixed; left: 0; right: 0; bottom: 0; max-height: 50vh; max-height: 50dvh; overflow-y: auto; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 30px #0002; padding: 12px 12px calc(var(--safe-b) + 14px); box-sizing: border-box; }
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  #shop { left: auto; top: calc(var(--safe-t) + 60px); bottom: 10px; right: 10px; width: 380px; max-height: none; border-radius: 22px; }
}
#shop-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
#shop-list::-webkit-scrollbar { display: none; }
#shop-list button { flex: none; padding: 8px 12px; border-radius: 12px; font-size: 14px; }
#shop-list button.locked { background: #eee5d8; }
#shop-list button small { display: block; font-size: 11px; font-weight: 600; }
.sec { margin-top: 10px; }
.sec h4 { margin: 0 0 6px; font-size: 14px; }
.sec .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sec .opts button { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.sec .opts button small { font-size: 11px; margin-left: 4px; font-weight: 600; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 320px; }
.palette button { aspect-ratio: 1; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px #0001, 0 2px 0 var(--edge); }
.palette button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.big-btn { width: 100%; font-size: 16px; padding: 12px; }
.desc { font-size: 13px; opacity: .75; margin: 4px 0 0; }
.cat-card { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px; margin-top: 10px; font-size: 13px; }
.cat-card b { font-size: 14px; }
.cat-card div { flex: 1; }

/* 그림 그리기 도구 */
#draw-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b) + 12px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; }
#pens { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#pens button { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
#pens button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
#pens .eraser { width: auto; padding: 0 14px; border-radius: 999px; font-size: 14px; }
#draw-bar .btns { width: min(340px, 100%); }

/* 떠오르는 숫자 · 꽃가루 */
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.plus { position: absolute; font-weight: 800; font-size: 20px; color: #ff6b3d; text-shadow: 0 1px 0 #fff; transform: translate(-50%, -50%); animation: rise .8s ease-out forwards; white-space: nowrap; }
.plus.big { font-size: 30px; color: #8a5cff; }
.plus.coinfx { color: #d99a00; font-size: 18px; }
.plus.cat { color: #e8914a; font-size: 22px; }
@keyframes rise { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -60px; } }
.confetti { position: absolute; width: 9px; height: 14px; border-radius: 2px; animation: fall 1.1s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--dx), 70vh) rotate(var(--r)); opacity: 0; } }

#modal { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: #0003; padding: 20px; }
#modal[hidden] { display: none; }
#modal .panel { max-width: 320px; text-align: center; }
#modal h3 { margin: 0 0 6px; }
#modal p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
#modal button { width: 100%; font-size: 17px; }

#build { position: fixed; right: 6px; bottom: 2px; font: 10px monospace; color: #0004; pointer-events: none; }