:root{--ink:#2b1d14;--paper:#fff8ec;--red:#d8412d;--gold:#ffcf4d;--green:#2f8a55;--hud:52px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-r:env(safe-area-inset-right,0px);--safe-l:env(safe-area-inset-left,0px);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#2b1d14;color:#fff8ec;font:16px/1.5 system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body[data-playing]{overflow:hidden;touch-action:none}
button,a.primary,a.secondary{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.primary,.secondary,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border-radius:14px;border:0;font-weight:800;text-decoration:none;touch-action:manipulation}
.primary{background:linear-gradient(#ff6a48,#d8412d);color:#fff;box-shadow:0 4px 0 #8f2516,0 8px 22px #0006;font-size:19px}
.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #8f2516}
.secondary{background:#fff8ec;color:#2b1d14;box-shadow:0 3px 0 #b9a68c}
.ghost{background:#0000;color:#fff8ec;border:1px solid #fff8ec55;min-height:44px;padding:8px 14px;font-weight:700;font-size:14px}
.icon{width:44px;height:44px;border-radius:12px;border:1px solid #fff4;background:#2b1d14b0;color:#fff;font-size:18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}
:focus-visible{outline:3px solid #ffdc8a;outline-offset:2px}
kbd{display:inline-block;padding:0 6px;border-radius:5px;background:#fff2;border:1px solid #fff3;font:700 12px/1.6 system-ui}

/* ---------- 첫 화면 ---------- */
#entry{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:calc(10px + var(--safe-t)) 16px calc(16px + var(--safe-b))}
.poster{position:absolute;inset:0;z-index:0}
.poster svg{width:100%;height:100%;display:block}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(#2b1d1400 30%,#2b1d14cc 64%,#2b1d14 88%)}
.steam{animation:steam 3.2s ease-in-out infinite}.steam.s2{animation-delay:1.4s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}30%{opacity:.6}100%{opacity:0;transform:translateY(-22px)}}
@media (prefers-reduced-motion:reduce){.steam{animation:none}}
.topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand{color:#fff;font-weight:900;text-decoration:none;letter-spacing:.02em;padding:8px 4px;min-height:44px;display:inline-flex;align-items:center}
.top-actions{display:flex;gap:8px}
.hero{position:relative;z-index:1;margin-top:auto;max-width:560px;width:100%;align-self:center;text-align:center;padding-bottom:4px}
.kicker{margin:0 0 4px;color:#ffcf4d;font-weight:800;font-size:13px;letter-spacing:.04em}
h1{margin:0;line-height:1.05;font-size:clamp(40px,12vw,64px);font-weight:900;color:#fff8ec;text-shadow:0 3px 0 #8f2516,0 8px 30px #000a}
h1 small{display:block;font-size:.3em;letter-spacing:.32em;color:#ffcf4d;text-shadow:none;margin-top:6px}
.lede{margin:12px auto 16px;max-width:30em;color:#f3e6d2;font-size:15px}
.actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.actions .primary{min-width:min(320px,100%);min-height:58px}
.actions .secondary{min-width:min(240px,100%)}
.note{margin:10px 0 0;color:#e9d9c2;font-size:13px}
.keys-note{display:none}
@media (pointer:fine){.keys-note{display:block}}
.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
body:has(#gamenow-exit-launcher) #entry{padding-right:max(16px,calc(140px + var(--safe-r)))}
@media (max-width:720px){body:has(#gamenow-exit-launcher) #entry{padding-right:16px}}
body.gamenow-mobile-mode #entry,body.gamenow-mobile-mode:has(#gamenow-exit-launcher) #entry{padding-right:calc(52px + var(--safe-r))}

/* ---------- 게임 화면 ---------- */
#game{position:fixed;inset:0;overflow:hidden;background:#1b130d;touch-action:none;user-select:none;-webkit-user-select:none}
#view{position:absolute;inset:0;display:block;width:100%;height:100%}
#stick-zone{position:absolute;left:0;right:0;top:calc(var(--hud) + var(--safe-t));bottom:0;touch-action:none}
#stick-ring{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #fff8;background:#fff1;pointer-events:none;opacity:0;transition:opacity .12s}
#stick-ring.on{opacity:1}
#stick-ring i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff8ecd8;box-shadow:0 3px 10px #0006}
#hud{position:absolute;left:0;right:0;top:0;height:calc(var(--hud) + var(--safe-t));padding:calc(4px + var(--safe-t)) calc(8px + var(--safe-r)) 4px calc(8px + var(--safe-l));display:flex;align-items:center;gap:8px;background:linear-gradient(#2b1d14ee,#2b1d1400);pointer-events:none}
#hud>*{pointer-events:auto}
#hud .day{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#hud-shop{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
#hud .clock{height:7px;border-radius:4px;background:#0006;overflow:hidden}
#hud .clock i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ff8a4a);border-radius:4px}
#hud .clock.rush i{background:linear-gradient(90deg,#ff8a4a,#ff4a4a)}
#hud-day{font-size:11px;color:#e9d9c2;line-height:1}
.money{min-width:96px;height:40px;padding:0 12px;border-radius:20px;background:#2b1d14d8;border:1px solid #ffcf4d88;display:flex;align-items:center;gap:6px;font-weight:900;font-size:16px;color:#ffe9a8;font-variant-numeric:tabular-nums}
.money b{width:22px;height:22px;border-radius:50%;background:#f2c230;color:#7a4a00;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.money.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.12)}}
#hint{position:absolute;left:50%;top:calc(var(--hud) + var(--safe-t) + 6px);transform:translateX(-50%);max-width:min(92vw,520px);padding:8px 14px;border-radius:14px;background:#fff8ecf0;color:#2b1d14;font-weight:800;font-size:14px;text-align:center;box-shadow:0 4px 14px #0005;pointer-events:none;opacity:0;transition:opacity .2s}
#hint.show{opacity:1}
#banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);padding:12px 22px;border-radius:18px;background:#d8412de8;color:#fff;font-weight:900;font-size:18px;text-align:center;box-shadow:0 8px 30px #0007;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;max-width:90vw}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner.gold{background:#ffcf4de8;color:#5a3a00}
.hand-btn{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(22px + var(--safe-b));width:84px;height:84px;border-radius:50%;border:3px solid #fff8ec;background:radial-gradient(circle at 35% 30%,#ff8a68,#d8412d 70%);color:#fff;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 5px 0 #8f2516,0 10px 24px #0007;touch-action:none;padding:0}
.hand-btn .glyph{font-size:28px;line-height:1}
.hand-btn #hand-label{font-size:13px;line-height:1.2}
.hand-btn.held{transform:translateY(3px) scale(.96);box-shadow:0 2px 0 #8f2516}
.hand-btn.assist{background:radial-gradient(circle at 35% 30%,#ffd86a,#e89a1e 70%);box-shadow:0 5px 0 #8a5a10,0 10px 24px #0007}
.hand-btn.pay{background:radial-gradient(circle at 35% 30%,#7fe09a,#2f8a55 70%);box-shadow:0 5px 0 #1d5a36,0 10px 24px #0007}
.hand-btn.wait{filter:saturate(.4) brightness(.85)}
.hand-btn .cool{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none}
.hand-btn .cool circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:113;stroke-dashoffset:113;opacity:.85}
@media (pointer:fine) and (hover:hover){.hand-btn{width:72px;height:72px}}
#coach{position:absolute;left:calc(10px + var(--safe-l));bottom:calc(14px + var(--safe-b));max-width:min(270px,60vw);padding:10px 12px;border-radius:14px;background:#2b1d14e8;border:1px solid #fff3;color:#fff8ec;font-size:13px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#coach.show{opacity:1;transform:none}
#coach b{display:block;color:#ffcf4d;margin-bottom:4px}
#coach ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
#coach li{display:flex;align-items:center;gap:8px}
#coach li kbd{min-width:62px;text-align:center}
#coach li em{font-style:normal;font-weight:700}
#coach li small{display:block;color:#d9c8b0;font-size:11px;line-height:1.2}
#coach li.done{opacity:.45}
#coach li.done em{text-decoration:line-through}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1b130d}
#loading i{width:42px;height:42px;border-radius:50%;border:4px solid #fff3;border-top-color:#ffcf4d;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
#gamepad-status{position:fixed;left:50%;bottom:calc(10px + var(--safe-b));transform:translateX(-50%);padding:6px 12px;border-radius:10px;background:#2b1d14d8;color:#fff;font-size:12px;z-index:5}
body[data-playing] #gamepad-status{display:none}

/* ---------- 창 ---------- */
dialog#sheet{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px 18px 18px;border:0;border-radius:22px;background:#fff8ec;color:#2b1d14;box-shadow:0 20px 70px #000a;overflow:auto;overscroll-behavior:contain}
dialog#sheet::backdrop{background:#120c08b8}
#sheet .close{position:absolute;right:10px;top:10px;background:#2b1d1410;color:#2b1d14;border-color:#2b1d1422}
#sheet h2{margin:0 36px 10px 0;font-size:22px;line-height:1.25}
#sheet h3{margin:16px 0 8px;font-size:16px}
#sheet p{margin:8px 0}
#sheet .small{font-size:13px;color:#6a5a48}
#sheet .primary,#sheet .secondary,#sheet .ghost{width:100%;margin-top:10px}
#sheet .ghost{color:#2b1d14;border-color:#2b1d1433}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.stats div{background:#2b1d140c;border-radius:12px;padding:8px 10px}
.stats strong{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:#6a5a48}
.stats .total{grid-column:1/-1;background:#ffcf4d40}
.stars{font-size:30px;letter-spacing:4px;text-align:center;color:#e8a21e;margin:4px 0}
.stars i{font-style:normal;opacity:.25}.stars i.on{opacity:1}
.goal{background:#2f8a5518;border-radius:12px;padding:8px 12px;font-size:14px}
.book{display:grid;gap:8px}
.book button{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 12px;border-radius:14px;border:1px solid #2b1d1422;background:#fff;color:#2b1d14;text-align:left}
.book button:disabled{opacity:.55;cursor:default}
.book .gi{font-size:24px;width:30px;text-align:center}
.book .gt{flex:1;min-width:0}
.book .gt b{display:block;font-size:14px}
.book .gt small{display:block;font-size:12px;color:#6a5a48}
.book .gc{font-weight:900;font-variant-numeric:tabular-nums;color:#7a4a00;white-space:nowrap}
.book button.can{border-color:#e8a21e;background:#fff7dc}
.map{display:grid;gap:8px}
.map button{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border-radius:14px;border:1px solid #2b1d1422;background:#fff;color:#2b1d14;text-align:left}
.map button.here{border:2px solid #d8412d}
.map button:disabled{opacity:.6;cursor:default}
.map .swatch{width:38px;height:38px;border-radius:10px;flex:none}
.map .mt{flex:1;min-width:0}
.map .mt b{display:block}
.map .mt small{display:block;font-size:12px;color:#6a5a48}
dl.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0}
dl.keys dt{font-weight:800}
dl.keys dd{margin:0;color:#4a3a2a}
#toast{position:fixed;left:50%;top:calc(var(--hud) + var(--safe-t) + 52px);transform:translate(-50%,-10px);max-width:min(92vw,480px);padding:10px 16px;border-radius:14px;background:#2b1d14f0;color:#fff8ec;font-weight:700;font-size:14px;text-align:center;box-shadow:0 6px 20px #0007;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}
#toast.show{opacity:1;transform:translate(-50%,0)}
body:not([data-playing]) #toast{top:calc(16px + var(--safe-t))}
@media (orientation:landscape) and (max-height:500px){
 :root{--hud:46px}
 .hand-btn{width:74px;height:74px;bottom:calc(14px + var(--safe-b))}
 #coach{max-width:240px}
 #entry .lede{display:none}
 h1{font-size:40px}
}
body[data-playing] #gamenow-share-launcher{display:none!important}
#entry .foot{padding-bottom:56px}
@media (max-width:360px){#coach{max-width:210px;font-size:12px;padding:8px 10px}#coach li kbd{min-width:52px;font-size:11px}}
h1.same small{display:none}