:root{--bg:#f7efe1;--ink:#2a1e16;--sub:#7b6553;--line:rgba(70,40,15,.13);--acc:#e25b2a;--me:#2563eb;--chip:rgba(70,40,15,.06);--card:#fffcf6}
*{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,.06) 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 16px;user-select:none;-webkit-user-select:none}
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 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(--acc);letter-spacing:-.01em;text-shadow:0 2px 0 rgba(140,50,10,.18)}
.hud{margin-left:auto;display:flex;align-items:center;gap:8px}
.hud-item{display:flex;align-items:baseline;gap:5px;padding:7px 14px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 3px rgba(70,40,15,.08);white-space:nowrap}
.hud-item small{font-size:12px;font-weight:700;color:var(--sub)}
.hud-item b{font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:24px;line-height:1;color:var(--me);font-variant-numeric:tabular-nums}
.hud-item i{font-style:normal;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:15px;color:var(--me)}
.hud-kill b{color:var(--acc)}
.hud-time{font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:30px;line-height:1;min-width:66px;text-align:right;font-variant-numeric:tabular-nums}
.hud-time.hurry{color:#d6302a;animation:lPulse .5s ease-in-out infinite alternate}
@keyframes lPulse{from{opacity:1}to{opacity:.5}}
.stage{position:relative;height:600px;border-radius:18px;overflow:hidden;background:#dcbc88;box-shadow:0 0 0 4px #f3e2c4,0 0 0 5px rgba(90,55,20,.16),0 14px 30px rgba(90,50,15,.2);touch-action:none;-webkit-tap-highlight-color:transparent}
#lCanvas{position:absolute;left:0;top:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}
.rank{position:absolute;top:10px;right:10px;margin:0;padding:7px 10px 6px;list-style:none;min-width:142px;background:rgba(255,251,243,.88);border-radius:12px;box-shadow:0 4px 12px rgba(70,40,10,.16);font-size:12.5px;line-height:1.3;pointer-events:none}
.rank li{display:flex;align-items:center;gap:6px;padding:2px 0}
.rank em{font-style:normal;font-weight:800;color:var(--sub);font-size:11px;min-width:12px;text-align:right}
.rank i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:0 0 10px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.rank span{flex:1;font-weight:700;white-space:nowrap}
.rank b{font-variant-numeric:tabular-nums;font-weight:800}
.rank li.me{color:var(--me)}
.rank li.out{opacity:.45}
.rank li.out b{font-weight:600;font-size:11px}
.mini{position:absolute;right:12px;bottom:12px;width:112px;height:112px;border-radius:10px;box-shadow:0 0 0 3px rgba(255,251,243,.92),0 4px 12px rgba(70,40,10,.22);pointer-events:none;opacity:.95}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(255,246,230,.3)}
.overlay[hidden]{display:none}
.card{width:100%;max-width:380px;max-height:100%;overflow:auto;background:var(--card);border-radius:20px;padding:22px 24px 18px;text-align:center;box-shadow:0 18px 40px rgba(60,30,10,.3);animation:lIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes lIn{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-kick.hot{color:var(--acc);font-weight:800}
.card-title{margin:4px 0 10px;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:44px;line-height:1.15;color:var(--acc)}
.card.end .card-title{font-size:28px;color:var(--ink);word-break:keep-all;margin-bottom:4px}
.card-rules{list-style:none;margin:0 0 12px;padding:0;text-align:left;display:grid;gap:6px}
.card-rules li{display:flex;align-items:center;gap:10px;background:var(--chip);border-radius:12px;padding:8px 12px;font-size:14.5px;font-weight:700;word-break:keep-all;line-height:1.35}
.card-rules b{flex:0 0 24px;height:24px;border-radius:50%;background:var(--me);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.card-desc{margin:0 0 14px;font-size:15px;word-break:keep-all}
.card-label{margin:8px 0 0;font-size:13px;font-weight:800;color:var(--sub)}
.card-score{margin:0;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:34px;line-height:1.05;color:var(--me)}
.card-score b{font-weight:400;font-size:76px;line-height:1;margin-right:2px}
.card-sub{margin:6px 0 4px;font-weight:800;color:var(--sub)}
.card-sub.hot{color:var(--acc)}
.card-meta{margin:6px 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:#fff;background:linear-gradient(180deg,#f2773f,#d6481b);padding:15px 42px;border-radius:999px;box-shadow:0 5px 0 #a23510,0 10px 18px rgba(170,60,20,.25);transition:transform .1s}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 #a23510}
.btn-main:focus-visible,.btn-sub:focus-visible,.tools button:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:3px}
.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:disabled{opacity:.45;cursor:default}
.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(226,91,42,.35)}
.tools #lRestart{background:var(--acc);color:#fff;border-color:transparent}
.tools #lRestart kbd{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff;margin-left:4px}
.tools #lPause kbd{margin-left:4px}
.tools .tip{font-size:12px;color:var(--sub)}
.l-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2a1e16;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;white-space:nowrap}
.l-toast.on{opacity:1;transform:translate(-50%,0)}
/* 세로 화면 */
.game.portrait{padding:2px 10px 12px}
.game.portrait .topbar{gap:6px 8px;margin:2px 0 8px}
.game.portrait .logo{font-size:27px}
.game.portrait .hud{gap:5px}
.game.portrait .hud-item{padding:5px 9px 4px;gap:4px}
.game.portrait .hud-item small{font-size:11px}
.game.portrait .hud-item b{font-size:19px}
.game.portrait .hud-item i{font-size:12px}
.game.portrait .hud-time{font-size:23px;min-width:50px}
.game.portrait .stage{border-radius:14px}
.game.portrait .rank{top:8px;right:8px;min-width:118px;padding:5px 8px 4px;font-size:11px}
.game.portrait .mini{width:80px;height:80px;right:9px;bottom:9px}
.game.portrait .tools{margin-top:9px;gap:6px}
.game.portrait .tools button{padding:8px 10px;font-size:12px}
.game.portrait .tools .tip,.game.portrait .tools kbd{display:none}
.game.portrait .card{padding:18px 18px 14px}
.game.portrait .card-title{font-size:38px}
/* 소개 글 */
.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}
.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-item b{font-size:21px}.hud-time{font-size:26px}}
@media (max-width:360px){.game.portrait .hud-item small{display:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}.hud-time.hurry{animation:none}}