:root{--bg:#05070f;--panel:#0b0f1c;--line:#232a3d;--amber:#ffa028;--amber2:#ffcf7a;--ink:#e8e8ee;--mute:#8d93a5;--hit:#ff4d4d}
*{box-sizing:border-box}html{background:#05070f}body{margin:0;background:radial-gradient(1200px 700px at 60% 0%,#121a33 0%,var(--bg) 60%) no-repeat,#05070f;color:var(--ink);font-family:'Pretendard','Malgun Gothic',system-ui,sans-serif}
a{color:var(--amber)}.mono{font-family:'Consolas','D2Coding','Menlo',monospace;font-variant-numeric:tabular-nums}
.top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#000c;backdrop-filter:blur(6px);z-index:5}
.top img{width:34px;height:34px}.top .t{font-weight:800}.top .t small{display:block;color:var(--amber);font-weight:600;font-size:11px;letter-spacing:.06em}
.top nav{margin-left:auto;display:flex;gap:14px;font-size:13px}.top nav a{color:var(--mute);text-decoration:none}
main{max-width:1100px;margin:0 auto;padding:16px}
.stage{display:grid;grid-template-columns:360px 1fr;gap:12px;align-items:center}
.host{text-align:center}.bongi{position:relative;display:inline-block;width:100%;max-width:340px}
.bongi img{width:100%;height:auto;display:block;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 70%,transparent 100%)}
.bongi canvas{position:absolute;left:55.18%;top:20.25%;width:17.97%;height:auto;border-radius:50%}
.say{background:#0e1426;border:1px solid #2c3550;border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.6;margin:8px 4px 0;min-height:66px}
.drum{position:relative;text-align:center}.drum canvas{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.tray{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;min-height:46px;margin-top:4px}
.drumbtn{display:flex;gap:8px;justify-content:center;margin-top:8px}
button,select{font:inherit;border-radius:10px;border:1px solid #3a4360;background:#141b30;color:var(--ink);padding:8px 14px;cursor:pointer}
button.main{background:var(--amber);border-color:var(--amber);color:#111;font-weight:800}button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent}
.motto{margin:14px 0;padding:12px 14px;border:1px solid #5a3a10;background:#140c00;color:var(--amber2);font-size:14px;line-height:1.6;border-radius:12px}
.panel{background:var(--panel);border:1px solid var(--line);padding:14px 16px;margin-top:10px;border-radius:12px}
.panel h2{font-size:15px;margin:0 0 8px;color:var(--amber)}
.note{font-size:12px;color:var(--mute);line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:8px 0;max-width:560px}
.grid button{padding:0;aspect-ratio:1;border-radius:50%;font-weight:800;font-size:15px;color:#111;border:none;opacity:.42}
.grid button.on{opacity:1;box-shadow:0 0 0 3px #fff,0 0 14px var(--amber)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row .main{margin-left:auto}
.ball{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-weight:800;font-size:15px;color:#111;background-image:radial-gradient(circle at 34% 30%,#fff9 0 12%,transparent 40%)}
.ball.s{width:28px;height:28px;font-size:12px}.ball.miss{opacity:.3}
.b1{background-color:#fbc400}.b2{background-color:#69c8f2}.b3{background-color:#ff7272}.b4{background-color:#aaa}.b5{background-color:#b0d840}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rank{display:flex;gap:12px;align-items:center}.rank img{width:110px;height:auto;border-radius:10px;background:#000}
.rname{font-size:20px;font-weight:800;color:var(--amber2)}.bar{height:10px;background:#1b2238;border-radius:6px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8c1a,#ffcf7a);width:0}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}td,th{padding:6px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--mute);font-weight:500}
.warn{margin-top:14px;border:1px solid #5a3a10;background:#140c00;color:var(--amber2);padding:10px 12px;font-size:13px;line-height:1.6;border-radius:10px}
.foot{text-align:center;margin-top:10px}
.modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal .box{max-width:420px;background:#0b0f1c;border:1px solid #5a3a10;border-radius:16px;padding:16px;text-align:center}
.modal img{width:100%;border-radius:12px}.modal h3{color:var(--amber);margin:10px 0 4px}.modal p{font-size:14px;line-height:1.7}
@media (max-width:820px){.stage{grid-template-columns:1fr}.host{order:2}.bongi{max-width:240px}.two{grid-template-columns:1fr}.grid{grid-template-columns:repeat(7,1fr)}.top nav a:not(:first-child){display:none}}
.modal[hidden]{display:none}