:root{--bg:#fbf5ea;--ink:#2b1d14;--sub:#7a6150;--line:rgba(60,35,15,.12);--panel:#fffaf0;--gold:#c27c0e;--gold-hi:#f6c445;--chip:rgba(60,35,15,.06);--card:#fffdf8}
body.dark{--bg:#16120f;--ink:#f3e9dc;--sub:#b9a38e;--line:rgba(255,235,210,.12);--panel:#211a14;--gold:#f0b43a;--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;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(--gold);letter-spacing:-.01em;text-shadow:0 2px 0 rgba(120,70,0,.18);white-space:nowrap}
.tagline{margin:0;font-size:14px;font-weight:700;color:var(--sub);word-break:keep-all}
.stage{display:flex;justify-content:center;align-items:flex-start;gap:18px}
.side{flex:0 0 200px;width:200px;display:flex;flex-direction:column;gap:12px}
.panel,.side .hud,.side .next,.side .tools{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 4px 14px rgba(90,50,15,.07)}
.panel-h{margin:0 0 6px;font-size:12.5px;font-weight:800;color:var(--sub);letter-spacing:.02em}
.hud{display:flex;gap:16px;align-items:flex-end}
.hud-item{display:flex;flex-direction:column;line-height:1}
.hud-item small{font-size:12px;font-weight:800;color:var(--sub);margin-bottom:5px}
.hud-item b{display:inline-block;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums;transform-origin:left bottom}
.hud-item b.bump{animation:cBump .22s ease-out}
@keyframes cBump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.hud-best b{color:var(--ink);font-size:22px}
.side .hud{flex-direction:column;align-items:stretch;gap:14px}
.side .hud-item b{font-size:42px}
.side .hud-best b{font-size:24px}
.next{display:flex;align-items:center;gap:8px}
.next small{font-size:12px;font-weight:800;color:var(--sub)}
#cNext{display:block;width:40px;height:40px}
.side .next{flex-direction:column;align-items:stretch;gap:2px}
.side #cNext{width:100px;height:100px;align-self:center}
.crate{flex:0 0 auto;padding:12px;border-radius:20px;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;background:var(--panel);border-radius:12px;box-shadow:inset 0 2px 8px rgba(90,50,15,.12);overflow:hidden;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#cCanvas{display:block;touch-action:none;cursor:pointer}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(255,250,240,.46)}
body.dark .overlay{background:rgba(20,15,10,.5)}
.overlay[hidden]{display:none}
.card{width:100%;max-width:360px;max-height:100%;overflow:auto;background:var(--card);border-radius:20px;padding:20px 22px 16px;text-align:center;box-shadow:0 18px 40px rgba(60,30,10,.28);animation:cIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes cIn{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.card-kick{margin:0;font-size:13px;font-weight:700;color:var(--sub);word-break:keep-all}
.card-title{margin:4px 0 6px;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:40px;line-height:1.1;color:var(--gold)}
.card.end .card-title{font-size:28px;color:var(--ink)}
.card-chain{display:block;width:300px;max-width:100%;height:92px;margin:4px auto 8px}
.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:64px;line-height:1;color:var(--gold);margin-right:4px}
.card-sub{margin:2px 0 4px;font-weight:800;color:var(--sub)}
.card-sub.hot{color:#e8590c}
.card-big{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px auto 0;padding:6px 14px 6px 8px;border-radius:999px;background:var(--chip);width:max-content;max-width:100%}
.card-big canvas{width:46px;height:46px;flex:0 0 46px}
.card-big span{font-size:13px;font-weight:700;color:var(--sub);text-align:left;line-height:1.25}
.card-big b{display:block;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:22px;color:var(--ink)}
.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);word-break:keep-all}
.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:#3b2504;background:linear-gradient(180deg,#ffd666,#f0a91f);padding:15px 40px;border-radius:999px;box-shadow:0 5px 0 #b06f08,0 10px 18px rgba(160,100,10,.28);transition:transform .1s}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 #b06f08}
.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(214,140,20,.45)}
.tools #cRestart{background:linear-gradient(180deg,#ffd666,#f0a91f);color:#3b2504;border-color:transparent}
.tools #cRestart kbd{background:rgba(255,255,255,.35);border-color:rgba(120,70,0,.25);color:#3b2504;margin-left:4px}
.side .tools{flex-direction:column;align-items:stretch;margin:0;gap:6px}
.side .tools .sp{display:none}
.side .tools button{text-align:left;padding:10px 12px}
.side .tools #cRestart{text-align:center}
.tips p{margin:0;font-size:12.5px;line-height:1.55;color:var(--sub);word-break:keep-all}
.tips p+p{margin-top:6px}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ladder li{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--sub);transition:background .3s}
.ladder li canvas{width:26px;height:26px;flex:0 0 26px;opacity:.45;filter:grayscale(.75)}
.ladder li.got{color:var(--ink)}
.ladder li.got canvas{opacity:1;filter:none}
.ladder li.top{background:rgba(240,180,58,.2)}
.ladder em{margin-left:auto;font-style:normal;font-size:12px;color:var(--sub);font-weight:700}
.ladder-note{margin:8px 0 0;font-size:12px;color:var(--sub);word-break:keep-all;line-height:1.5}
.banner{position:absolute;left:50%;top:21%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:2;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:28px;line-height:1.1;color:#fff;padding:.42em .9em;border-radius:999px;background:linear-gradient(180deg,#7fd08a,#2f8f4a);box-shadow:0 5px 0 #1f6b35,0 12px 24px rgba(20,80,40,.3);text-shadow:0 2px 0 rgba(0,60,20,.45);white-space:nowrap}
.banner.gold{background:linear-gradient(180deg,#ffdc6e,#e39a12);box-shadow:0 5px 0 #a5650a,0 12px 24px rgba(120,70,0,.35);text-shadow:0 2px 0 rgba(120,60,0,.5)}
.banner.on{animation:cBanner 2s ease forwards}
@keyframes cBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.c-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;max-width:calc(100% - 32px);text-align:center}
.c-toast.on{opacity:1;transform:translate(-50%,0)}
/* 좁은 화면 (휴대폰) */
.game.narrow{padding:2px 10px 14px}
.game.narrow .topbar{gap:10px;margin:2px 0 8px}
.game.narrow .logo{font-size:29px}
.game.narrow .tagline,.game.narrow .tips,.game.narrow #cLeft{display:none}
.game.narrow .hud{margin-left:auto;gap:12px}
.game.narrow .hud-item small{font-size:11px;margin-bottom:3px}
.game.narrow .hud-item b{font-size:25px}
.game.narrow .hud-best b{font-size:18px}
.game.narrow .next{flex-direction:column;gap:1px}
.game.narrow .next small{font-size:11px;line-height:1}
.game.narrow #cNext{width:36px;height:36px}
.game.narrow .stage{flex-direction:column;align-items:center;gap:8px}
.game.narrow .crate{padding:7px;border-radius:14px}
.game.narrow .tools{width:100%;margin-top:0;gap:6px}
.game.narrow .tools button{padding:8px 10px;font-size:12px}
.game.narrow #cRight{width:100%;flex:none}
.game.narrow .ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px}
.game.narrow .ladder li{font-size:12.5px;padding:3px 4px;gap:6px}
.game.narrow .ladder em{display:none}
/* 소개 글 */
.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}
.about .combo{padding:0}
.combo.nine{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.combo.nine{grid-template-columns:repeat(2,minmax(0,1fr))}}
.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:420px){.game.narrow .logo{font-size:27px}.game.narrow .hud{gap:10px}.game.narrow .hud-item b{font-size:23px}.game.narrow .hud-best b{font-size:17px}}
@media (max-width:350px){.game.narrow .logo{font-size:23px}.game.narrow .hud-item b{font-size:20px}.game.narrow .hud-best b{font-size:15px}.mast-tag{display:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}.hud-item b.bump{animation:none}}