:root{--bg:#1d100c;--ink:#f7ecd8;--dim:#cdb89a;--accent:#f0a33a;--accent2:#e2463b;--panel:#2b1912;--line:#5a3624;--toast-top:64px;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Hiragino Sans","Microsoft YaHei",sans-serif;-webkit-text-size-adjust:100%}
body[data-playing]{overflow:hidden;overscroll-behavior:none}
button,a.primary,a.secondary,a.ghost{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #ffd36a;outline-offset:2px}
kbd{display:inline-block;min-width:1.6em;padding:0 .4em;border:1px solid #8d6a50;border-bottom-width:2px;border-radius:5px;background:#3a2318;font:600 .82em/1.5 ui-monospace,monospace;text-align:center;color:#ffe6c2}
.primary,.secondary,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border-radius:14px;border:0;text-decoration:none;font-weight:700}
.primary{background:linear-gradient(#f6b24a,#e0832a);color:#2a1206;box-shadow:0 3px 0 #9a4f16,0 8px 20px #0006}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #9a4f16}
.secondary{background:#3a2318;border:1px solid #7a5038;color:var(--ink)}
.ghost{background:transparent;border:1px solid #5a3a28;color:var(--dim);font-weight:600}
.icon{width:44px;height:44px;min-width:44px;border-radius:12px;border:1px solid #6a4430;background:#2e1b13cc;font-size:18px;display:inline-flex;align-items:center;justify-content:center;padding:0}

/* ---------- 첫 화면 ---------- */
#entry{position:relative;min-height:100dvh;padding:0 16px 40px;overflow-x:hidden}
@media (min-width:900px){body:has(#gamenow-exit-launcher) #entry{padding-right:150px;padding-left:150px}}
.poster{position:absolute;inset:0 0 auto 0;height:min(58vh,500px);opacity:.78;overflow:hidden;z-index:0;mask-image:linear-gradient(#000 55%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent)}
.poster svg{width:100%;height:100%;display:block}
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 0 0}
.brand{color:#ffe6c2;font-weight:800;letter-spacing:.02em;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.top-actions{display:flex;gap:8px}
.hero{position:relative;z-index:1;max-width:640px;margin:min(26vh,230px) auto 0;text-align:center}
.hero::before{content:"";position:absolute;inset:-30px -40px -10px;z-index:-1;background:radial-gradient(closest-side,#1d100ccc,#1d100c00);pointer-events:none}
.kicker{margin:0;color:#ffd9a0;letter-spacing:.18em;font-size:.72rem;font-weight:700;text-transform:uppercase;text-shadow:0 1px 4px #000}
h1{margin:.1em 0 .2em;font-size:clamp(2.6rem,11vw,4.4rem);line-height:1;font-weight:900;color:#fff4dc;text-shadow:0 3px 0 #7a3a16,0 8px 30px #000a}
h1 small{display:block;margin-top:.35em;font-size:.32em;letter-spacing:.42em;color:#f6c27a;font-weight:800}
.lede{margin:.6em auto 1.1em;max-width:30em;color:#f3e2c8;text-shadow:0 1px 6px #000;font-size:1rem}
.modes{display:inline-flex;gap:6px;padding:5px;border-radius:16px;background:#2b1912e6;border:1px solid #5a3624;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.mode{min-height:44px;padding:8px 14px;border-radius:11px;border:0;background:transparent;color:var(--dim);font-weight:700}
.mode[aria-pressed="true"]{background:#f0a33a;color:#2a1206}
.actions{display:flex;justify-content:center;gap:10px}
#start{min-width:220px;min-height:56px;font-size:1.15rem}
.note{margin:.7em auto 0;color:var(--dim);font-size:.86rem;max-width:32em}
.keys-note{font-size:.8rem}
@media (pointer:coarse){.keys-note{display:none}}
.stats{position:relative;z-index:1;max-width:640px;margin:22px auto 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.stats div{min-width:92px;padding:8px 12px;border-radius:12px;background:#2b1912;border:1px solid #4a2c1e;text-align:center}
.stats strong{display:block;font-size:1.15rem}
.stats span{font-size:.75rem;color:var(--dim)}
.levels{position:relative;z-index:1;max-width:900px;margin:26px auto 0}
.levels h2{font-size:1rem;margin:0 0 8px;color:#ffd9a0}
.zone{margin:0 0 16px}
.zone h3{margin:0 0 6px;font-size:.9rem;color:var(--dim);font-weight:700}
.zone ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.zone button{width:100%;min-height:48px;border-radius:10px;border:1px solid #5a3624;background:#2e1b13;font-weight:800;position:relative;padding:0}
.zone button.done{background:#4a2e1a;border-color:#b07a47;color:#ffe2b0}
.zone button.done::after{content:"✓";position:absolute;right:4px;top:1px;font-size:.62rem;color:#9fdc7a}
.zone button.here{outline:2px solid #f0a33a}
.zone button:disabled{opacity:.38;cursor:default}
.zone[data-zone="1"] button.done{background:#1f3a2c;border-color:#5f8e4a}
.zone[data-zone="2"] button.done{background:#2e2a44;border-color:#7a76a8}
.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px auto 0;max-width:640px}

/* ---------- 게임 ---------- */
#game{position:fixed;inset:0;background:#120906;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#hud{position:absolute;left:0;right:0;top:0;height:48px;display:flex;align-items:center;gap:6px;padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));z-index:3;background:linear-gradient(#0009,#0000)}
#hud .where{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;overflow:hidden}
#hud .where small{font-size:.68rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .where span{font-weight:800;white-space:nowrap}
#hud .meter{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums;font-size:.78rem;color:#ffe2b0;min-width:66px}
#hud .meter span:last-child{font-size:.95rem;font-weight:800}
@media (min-width:900px){body:has(#gamenow-exit-launcher) #hud{padding-right:150px}}
#frame{position:absolute;left:var(--frame-x,0);top:var(--frame-y,48px);width:var(--frame-w,100vw);height:var(--frame-h,75vw);border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px #3a2318,0 10px 40px #000a}
#view{display:block;width:100%;height:100%}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#120906cc}
#loading i{width:34px;height:34px;border-radius:50%;border:4px solid #f0a33a44;border-top-color:#f0a33a;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
#coach{position:absolute;left:8px;top:56px;z-index:2;max-width:260px;padding:8px 10px;border-radius:12px;background:#1a0d08e6;border:1px solid #f0a33a88;font-size:.8rem;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
#coach.show{opacity:1;transform:none}
#coach b{display:block;color:#ffd36a;font-size:.78rem;letter-spacing:.06em;margin-bottom:3px}
#coach ul{list-style:none;margin:0;padding:0}
#coach li{display:flex;gap:6px;align-items:center;margin:3px 0;transition:opacity .3s}
#coach li.done{opacity:.45}
#coach li.done em::after{content:" ✓";color:#9fdc7a}
#coach kbd{font-size:.72rem;white-space:nowrap}
#coach em{font-style:normal;font-weight:700}
#coach small{display:block;color:var(--dim);font-size:.68rem}
#coach p{margin:4px 0 0;color:var(--dim);font-size:.7rem}
#coach .p2 kbd{border-color:#2f7de1}
#taunt{position:absolute;right:8px;top:56px;z-index:2;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .18s,transform .18s;pointer-events:none}
#taunt.show{opacity:1;transform:none}
#taunt svg{width:42px;height:42px;filter:drop-shadow(0 2px 4px #000a)}
#taunt span{padding:6px 10px;border-radius:12px 12px 2px 12px;background:#fff4dc;color:#2a1206;font-weight:800;font-size:.82rem;min-width:0;order:-1}
.calm #taunt,#taunt.calm{transition:opacity .18s}
#banner{position:absolute;left:50%;top:56px;z-index:2;text-align:center;padding:6px 14px;border-radius:16px;background:#1a0d08d9;border:1px solid #f0a33a88;font-weight:800;font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none}
#banner.show{opacity:1}
#pad{display:none}
#game.touch #pad{display:block}
.cluster{position:absolute;inset:0;pointer-events:none}
.cluster.two{display:none}
#game.two .cluster.two{display:block}
.stick{position:absolute;width:var(--stick,140px);height:var(--stick,140px);border-radius:50%;background:radial-gradient(#ffffff14,#ffffff08 60%,#ffffff03);border:2px solid #ffffff2e;touch-action:none;pointer-events:auto}
.stick .knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:#f7ecd8cc;box-shadow:0 2px 8px #0008;transform:translate(var(--kx,0),var(--ky,0))}
.cluster[data-player="1"] .knob{background:#cfe3ffcc}
.cluster[data-player="0"].p .knob{background:#ffd8cc}
.pad-btn{position:absolute;width:var(--btn,84px);height:var(--btn,84px);border-radius:50%;border:2px solid #ffffff40;background:#ffffff18;pointer-events:auto;touch-action:none;display:grid;place-items:center;padding:0}
.pad-btn svg{width:56%;height:56%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pad-btn.held{background:#f0a33a66;border-color:#f0a33a}
#game.two .cluster[data-player="0"] .pad-btn{border-color:#e2463b88}
#game.two .cluster[data-player="1"] .pad-btn{border-color:#2f7de188}
#game.two .cluster[data-player="0"] .stick{border-color:#e2463b66}
#game.two .cluster[data-player="1"] .stick{border-color:#2f7de166}

/* ---------- 창 ---------- */
dialog#sheet{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:22px 18px 18px;border-radius:18px;border:1px solid #6a4430;background:#24140e;color:var(--ink);box-shadow:0 20px 60px #000c}
dialog#sheet::backdrop{background:#0009;backdrop-filter:blur(2px)}
#sheet .close{position:absolute;right:10px;top:10px}
#sheet h2{margin:0 40px 6px 0;font-size:1.3rem}
#sheet p{margin:.4em 0;color:#efdcc0}
#sheet .small{font-size:.84rem;color:var(--dim)}
#sheet button.primary,#sheet button.secondary,#sheet button.ghost,#sheet a.primary,#sheet a.secondary{display:flex;width:100%;margin-top:10px}
#sheet .row{display:flex;gap:8px}
#sheet .row>*{flex:1}
#sheet dl.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:10px 0}
#sheet dl.keys dt{font-weight:800;color:#ffd9a0}
#sheet dl.keys dd{margin:0;font-size:.9rem}
#sheet .big{font-size:2.2rem;font-weight:900;text-align:center;margin:.1em 0;color:#ffd36a}
#sheet .stat3{display:flex;gap:8px;margin:10px 0}
#sheet .stat3 div{flex:1;padding:8px;border-radius:12px;background:#341f15;text-align:center}
#sheet .stat3 strong{display:block;font-size:1.2rem}
#sheet .stat3 span{font-size:.72rem;color:var(--dim)}
#sheet .tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#f0a33a;color:#2a1206;font-weight:800;font-size:.75rem}
#sheet .vs{display:flex;justify-content:center;align-items:center;gap:18px;font-size:2rem;font-weight:900;margin:8px 0}
#sheet .vs .a{color:#ff8a7a}#sheet .vs .b{color:#8ab8ff}
#toast{position:fixed;left:50%;top:var(--toast-top);transform:translate(-50%,-10px);max-width:calc(100vw - 32px);padding:8px 14px;border-radius:12px;background:#1a0d08f0;border:1px solid #6a4430;font-size:.86rem;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#coach,#taunt,#toast,#banner{transition:opacity .15s}}
/* 가로 휴대폰처럼 낮은 화면: 시작 단추가 첫 화면 안에 들어오게 줄인다 */
@media (max-height:520px){
 .poster{height:100vh}
 .topbar{padding-top:4px}
 .hero{margin-top:0}
 .kicker{display:none}
 h1{font-size:2.1rem;margin:0}
 h1 small{margin-top:.2em}
 .lede{font-size:.85rem;margin:.3em auto .6em}
 .lede br{display:none}
 .modes{margin-bottom:8px}
 #start{min-height:48px}
 .note{margin-top:.4em}
}
body[data-playing] #gamenow-share-launcher{display:none!important}
/* 좁거나 낮은 세로 화면(320×568 등): 긴 제목 언어에서도 시작 단추가 첫 화면에 들어오게 */
@media (max-width:380px),(max-height:700px) and (orientation:portrait){
 .hero{margin-top:min(16vh,120px)}
 .kicker{display:none}
 h1{font-size:clamp(2rem,10vw,2.6rem)}
 h1 small{font-size:.36em;letter-spacing:.2em}
 .lede{font-size:.88rem;margin:.4em auto .7em}
 .mode{padding:6px 10px;font-size:.9rem}
}
#game[data-slots="pad"] #coach{font-size:.72rem;padding:5px 8px;overflow:hidden}
#game[data-slots="pad"] #coach li{margin:1px 0}
#game[data-slots="pad"] #taunt svg{width:34px;height:34px}
#game[data-slots="pad"] #taunt span{font-size:.76rem}
#coach li{flex-wrap:wrap}
#coach li span{min-width:0}
/* 좁은 카드: 글쇠 상자가 넘치지 않게 줄바꿈을 허용하고, 설명이 모자라면 글쇠 아래로 내린다 */
#coach kbd{white-space:normal;max-width:100%;overflow-wrap:anywhere}
#coach li span{flex:1 1 7.5em}
#coach{min-width:150px}
#game[data-slots="pad"] #coach small{display:none}
#game[data-slots="pad"] #coach p{margin-top:2px}
#game[data-slots="pad"] #coach b{display:none}
/* 좁은 세로 화면: 도깨비 말풍선이 뜨는 동안 안내 카드는 잠깐 숨긴다(둘이 겹치지 않게) */
@media (max-width:380px){#game.taunting #coach{opacity:0!important}}
#game[data-slots="gutter-touch"] #coach{font-size:.72rem;padding:6px 8px;overflow:hidden}
#game[data-slots="gutter-touch"] #coach b,#game[data-slots="gutter-touch"] #coach small{display:none}
#game[data-slots="gutter-touch"] #coach li{margin:1px 0}
#game[data-slots="pad"] #coach li span{flex-basis:3.5em}