:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}:root{--belt-white: #f0f0f0;--belt-yellow: #f5c518;--belt-orange: #e87422;--belt-green: #3ba55d;--belt-blue: #5865f2;--belt-brown: #8b5e3c;--belt-black: #1a1a1a;--accent: #e74c3c}.shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at 50% 0%,rgba(231,76,60,.08) 0%,transparent 60%),#0a0a0a}.header{text-align:center;margin-bottom:2.5rem}.header h1{font-size:3rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0;background:linear-gradient(135deg,var(--accent),#ff6b6b,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{color:#ffffff80;font-size:.95rem;margin-top:.25rem}.belt-strip{display:flex;gap:6px;margin-bottom:2rem;align-items:center}.belt{width:48px;height:14px;border-radius:3px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.1);position:relative}.belt:hover{transform:scaleY(1.3)}.belt.active{transform:scaleY(1.4);box-shadow:0 0 12px #ffffff4d;border-color:#ffffff80}.belt-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#fff9;margin-left:8px}.board-area{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.boards-row{display:flex;gap:1rem;perspective:600px}.board-container{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.board{width:100px;height:140px;border-radius:6px;background:linear-gradient(135deg,#c8a86e,#a0824a,#c8a86e);border:2px solid #8b7040;display:flex;align-items:center;justify-content:center;font-size:2.5rem;transition:transform .3s,opacity .3s;box-shadow:inset 0 2px 4px #ffffff26,0 4px 12px #0006;position:relative;overflow:hidden}.board:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(0,0,0,.06) 18px,rgba(0,0,0,.06) 20px)}.board:hover{transform:scale(1.05)}.board.breaking{animation:board-break .5s ease-out forwards}.board.broken{opacity:0;transform:scale(.5);pointer-events:none}@keyframes board-break{0%{transform:scale(1) rotateX(0);opacity:1}30%{transform:scale(1.08) rotateX(-5deg)}60%{transform:scale(.9) rotateX(10deg);opacity:.7}to{transform:scale(.3) rotateX(30deg) translateY(40px);opacity:0}}.split-halves{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.half{position:absolute;width:50%;height:100%;background:linear-gradient(135deg,#c8a86e,#a0824a);border-radius:6px;opacity:0}.half.left{left:0;transform-origin:left center}.half.right{right:0;transform-origin:right center}.board.breaking .half.left{animation:split-left .6s ease-out forwards;opacity:1}.board.breaking .half.right{animation:split-right .6s ease-out forwards;opacity:1}@keyframes split-left{0%{transform:rotate(0) translate(0)}to{transform:rotate(-25deg) translate(-30px) translateY(20px);opacity:0}}@keyframes split-right{0%{transform:rotate(0) translate(0)}to{transform:rotate(25deg) translate(30px) translateY(20px);opacity:0}}.strike-flash{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(231,76,60,.6),transparent 70%);pointer-events:none;animation:flash .4s ease-out forwards;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%) scale(0)}@keyframes flash{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.score-bar{display:flex;align-items:center;gap:1.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:#ffffffb3}.score-value{font-size:1.5rem;font-weight:700;color:var(--accent)}.combo{color:#f5c518;font-weight:600}.reset-btn{margin-top:1.5rem;padding:.6rem 1.5rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;color:#ffffffb3;font-size:.85rem;cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit}.reset-btn:hover{background:#ffffff14;border-color:#ffffff4d}.kiai{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:5rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 40px rgba(231,76,60,.5);pointer-events:none;animation:kiai-pop .7s ease-out forwards;z-index:100}@keyframes kiai-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.chip{position:absolute;width:8px;height:12px;background:#c8a86e;border-radius:2px;pointer-events:none;animation:chip-fly var(--dur, .6s) ease-out forwards;animation-delay:var(--delay, 0s);opacity:0}@keyframes chip-fly{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--tx, 30px),var(--ty, -40px)) rotate(var(--rot, 180deg));opacity:0}}
