:root{--bg:#fbf5ea;--ink:#2b1d14;--sub:#7a6150;--line:rgba(60,35,15,.12);--panel:#fffaf0;--red:#e3342b;--chip:rgba(60,35,15,.06);--card:#fffdf8}
body.dark{--bg:#16120f;--ink:#f3e9dc;--sub:#b9a38e;--line:rgba(255,235,210,.12);--panel:#231c16;--chip:rgba(255,235,210,.08);--card:#2a221b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.6;background-image:radial-gradient(rgba(120,80,40,.05) 1px,transparent 1px);background-size:18px 18px}
a{color:inherit}
kbd{font:700 11px/1 "Segoe UI",sans-serif;padding:2px 5px;border-radius:4px;border:1px solid var(--line);background:var(--chip)}
.mast{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:10px 16px 0}
.mast-brand{font-size:13px;color:var(--sub);text-decoration:none}.mast-brand b{color:var(--ink);letter-spacing:.02em}
.mast-tag{font-size:12px;color:var(--sub)}
.game{max-width:1080px;margin:0 auto;padding:4px 16px 18px;user-select:none;-webkit-user-select:none}
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.logo{margin:0;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:40px;line-height:1;color:var(--red);letter-spacing:-.01em;text-shadow:0 2px 0 rgba(120,20,10,.18)}
.modes{display:flex;gap:4px;background:var(--chip);padding:4px;border-radius:999px}
.modes button{border:0;background:transparent;color:var(--sub);font-family:inherit;font-weight:700;font-size:14px;line-height:1;padding:9px 14px;border-radius:999px;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.hud{margin-left:auto;display:flex;align-items:baseline;gap:18px}
.hud-score b{font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:34px;color:var(--red)}
.hud-score small{font-size:14px;color:var(--sub);margin-left:4px}
.hud-time{font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:28px;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.stagewrap{display:flex;gap:12px;align-items:stretch}
.crate{flex:1;min-width:0;padding:12px;border-radius:18px;background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 22px,rgba(110,60,20,.07) 22px 24px),linear-gradient(180deg,#ecca93,#d6a461);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(110,60,20,.25),0 10px 26px rgba(90,50,15,.18)}
body.dark .crate{background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 22px,rgba(0,0,0,.12) 22px 24px),linear-gradient(180deg,#6b4e33,#4d3725)}
.board{position:relative;width:100%;background:var(--panel);border-radius:12px;box-shadow:inset 0 2px 8px rgba(90,50,15,.12);display:flex;justify-content:center;overflow:hidden}
#aCanvas{display:block;touch-action:none;cursor:crosshair;transition:filter .35s}
#aCanvas.veil{filter:blur(8px) saturate(.75)}
.gauge{position:relative;width:20px;flex:0 0 20px;border-radius:12px;background:rgba(60,35,15,.1);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.gauge i{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,#8fd85f,#4c9a2a);border-radius:12px;transition:height .12s linear,width .12s linear}
.gauge.warn i{background:linear-gradient(180deg,#ffd76a,#ef9f1c)}
.gauge.danger i{background:linear-gradient(180deg,#ff8a74,#e3342b);animation:aPulse .5s ease-in-out infinite alternate}
.gauge.off{visibility:hidden}
@keyframes aPulse{from{opacity:1}to{opacity:.55}}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(255,250,240,.35)}
body.dark .overlay{background:rgba(20,15,10,.35)}
.overlay[hidden]{display:none}
.card{width:100%;max-width:380px;background:var(--card);border-radius:20px;padding:22px 24px 18px;text-align:center;box-shadow:0 18px 40px rgba(60,30,10,.28);animation:aIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes aIn{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.card-kick{margin:0;font-size:13px;font-weight:700;color:var(--sub)}
.card-title{margin:4px 0 6px;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:38px;line-height:1.15;color:var(--red)}
.card.end .card-title{font-size:30px;color:var(--ink)}
.card-desc{margin:0 0 14px;font-size:15px;color:var(--ink);word-break:keep-all}
.card-score{margin:2px 0 0;font-size:22px;font-weight:800}
.card-score b{font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:76px;line-height:1;color:var(--red);margin-right:4px}
.card-sub{margin:2px 0 6px;font-weight:800;color:var(--sub)}
.card-sub.hot{color:var(--red)}
.card-meta{margin:8px 0 0;font-size:13px;color:var(--sub);word-break:keep-all}
.card-key{margin:6px 0 0;font-size:12px;color:var(--sub)}
.card-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.btn-main{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:18px;line-height:1;color:#fff;background:linear-gradient(180deg,#f0514a,#d02a22);padding:15px 38px;border-radius:999px;box-shadow:0 5px 0 #9e1619,0 10px 18px rgba(160,20,20,.25);transition:transform .1s}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 #9e1619}
.card-btns .btn-main{padding:13px 22px;font-size:16px;width:100%}
.btn-sub{flex:1;border:1px solid var(--line);cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;line-height:1;color:var(--ink);background:var(--chip);padding:12px 10px;border-radius:999px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.tools .sp{flex:1}
.tools button{border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-weight:700;font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;cursor:pointer}
.tools button[aria-pressed="false"]{color:var(--sub);background:transparent;text-decoration:line-through;text-decoration-color:rgba(120,90,60,.45)}
.tools button[aria-pressed="true"]{border-color:rgba(227,52,43,.35)}
.tools #aRestart{background:var(--red);color:#fff;border-color:transparent}
.tools #aRestart kbd{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff;margin-left:4px}
.tools #aHint{background:#ffcf4a;border-color:transparent;color:#5a3a00}
.a-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2b1d14;color:#fff;font-size:14px;font-weight:700;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:50}
.a-toast.on{opacity:1;transform:translate(-50%,0)}
.rank-box{margin-top:12px;padding:12px;border-radius:14px;background:var(--chip)}
.rank-title{margin:0 0 8px;font-weight:800;font-size:14px}
.rank-form{display:flex;gap:6px}
.rank-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink);-webkit-user-select:text;user-select:text}
.rank-form .btn-sub{flex:0 0 auto;padding:10px 16px;background:var(--red);color:#fff;border-color:transparent}
.rank-form .btn-sub:disabled{opacity:.6}
.rank-line{margin:0;font-weight:800;color:var(--red)}
.btn-link{display:inline-block;border:0;background:none;color:var(--sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;margin-top:8px;padding:2px 4px}
.rank-card{max-width:420px}
.rank-list{max-height:min(50vh,430px);overflow:auto;text-align:left;margin-top:4px}
.rank-list ol{list-style:none;margin:0;padding:0}
.rank-list li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}
.rank-list li.me{background:rgba(227,52,43,.09);border-radius:8px}
.rank-list .rk{width:28px;text-align:center;font-family:"Black Han Sans","Segoe UI",sans-serif;color:var(--sub)}
.rank-list li:nth-child(-n+3) .rk{color:var(--red)}
.rank-list .nk{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-sum,.rank-mine,.rank-empty{margin:8px 0;font-size:13px;color:var(--sub);text-align:center}
.rank-mine{font-weight:800;color:var(--red)}
/* 세로 화면 */
.game.portrait{padding:2px 10px 14px}
.game.portrait .topbar{gap:8px;margin:2px 0 8px}
.game.portrait .logo{font-size:30px}
.game.portrait .modes button{padding:8px 10px;font-size:13px}
.game.portrait .hud{width:100%;margin-left:0;justify-content:space-between}
.game.portrait .stagewrap{flex-direction:column-reverse;gap:8px}
.game.portrait .gauge{width:100%;height:12px;flex:0 0 12px}
.game.portrait .gauge i{top:0;bottom:0;right:auto;height:auto;width:100%}
.game.portrait .crate{padding:7px;border-radius:14px}
.game.portrait .tools button{padding:8px 10px;font-size:12px}
/* 소개 글 */
.about{max-width:860px;margin:10px auto 0;padding:26px 18px 10px;border-top:1px solid var(--line)}
.about h2{font-size:21px;margin:28px 0 10px}
.about h2:first-child{margin-top:0}
.about p,.about li,.about dd{font-size:15.5px;word-break:keep-all}
.about ol,.about ul{padding-left:22px}
.about li{margin:4px 0}
.combo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0 4px;padding:0;list-style:none}
.combo li{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.combo b{display:block;font-size:13px;color:var(--sub)}
.about dt{font-weight:800;margin-top:16px}
.about dd{margin:4px 0 0;color:var(--ink)}
.about .more{margin-top:26px;font-size:14px;color:var(--sub)}
.foot{max-width:860px;margin:0 auto;padding:22px 18px 40px;text-align:center;font-size:12.5px;color:var(--sub)}
.foot a{margin:0 9px;text-decoration:none;border-bottom:1px solid var(--line)}
.foot p{margin:12px 0 0}
@media (max-width:760px){.logo{font-size:32px}.hud-score b{font-size:28px}.hud-time{font-size:24px}}
@media (prefers-reduced-motion:reduce){.card{animation:none}#aCanvas{transition:none}}