@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap";:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;font-family:DM Mono,Courier New,monospace}*{box-sizing:border-box}body{background:#0a0a0a;min-width:320px;min-height:100svh;margin:0}button{font:inherit;border:0}.app-shell{flex-direction:column;align-items:center;width:min(560px,100%);min-height:100svh;margin:0 auto;padding:24px 16px;display:flex}.brand-header{z-index:1;justify-content:center;align-items:center;gap:14px;display:flex;position:relative}.brand-mark{filter:drop-shadow(0 0 22px #e8ff472e);width:clamp(42px,10vw,58px);height:clamp(42px,10vw,58px)}h1{letter-spacing:clamp(10px,4vw,18px);text-align:center;color:#fff;text-shadow:0 0 80px #e8ff4726;margin:0 clamp(-18px,-4vw,-10px) 0 0;font-family:Bebas Neue,Impact,sans-serif;font-size:clamp(56px,14vw,84px);line-height:1}.subtitle{letter-spacing:6px;color:#9a9a9a;text-transform:uppercase;text-align:center;margin:0;font-size:12px}.shape-tag{letter-spacing:5px;color:#9a9a9a;text-transform:uppercase;text-align:center;margin:14px 0 20px;font-size:12px}.game-area{aspect-ratio:1;flex-shrink:0;width:min(88vw,420px);position:relative}@media (width>=768px){.app-shell{width:min(840px,100%);padding:32px 24px}.game-area{width:min(72vmin,680px)}}.game-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.drag-hint{letter-spacing:3px;color:#a8a8a8;white-space:nowrap;font-size:12px;position:absolute;bottom:-28px;left:50%;transform:translate(-50%)}.score-panel{text-align:center;margin-top:44px;animation:.55s cubic-bezier(.22,1,.36,1) .85s both fadeUp}.grade-label{letter-spacing:8px;color:var(--accent-color);text-shadow:0 0 28px var(--accent-glow);margin-bottom:18px;margin-right:-8px;font-family:Bebas Neue,Impact,sans-serif;font-size:clamp(30px,7vw,44px)}.split-display{justify-content:center;align-items:center;gap:20px;margin-bottom:14px;display:flex}.split-display .piece{text-align:center}.split-display .piece:first-child{text-align:right}.split-display .piece:last-child{text-align:left}.split-number{color:#fff;font-family:Bebas Neue,Impact,sans-serif;font-size:clamp(46px,11vw,64px);line-height:1}.piece-label{letter-spacing:3px;color:#a0a0a0;font-size:11px}.split-divider{flex-direction:column;align-items:center;gap:5px;display:flex}.split-divider .line{background:#1e1e1e;width:1px;height:38px}.split-divider .vs{letter-spacing:2px;color:#9a9a9a;font-size:11px}.split-bar{background:#151515;border-radius:3px;width:270px;height:6px;margin:0 auto 8px;position:relative;overflow:hidden}.split-bar-fill{background:var(--accent-color);border-radius:3px;height:100%;transition:width 1s cubic-bezier(.22,1,.36,1) .1s;position:absolute;top:0;left:0}.split-bar-marker{background:#fff3;width:2px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.off-by{letter-spacing:3px;color:#a8a8a8;margin-bottom:26px;font-size:12px}.btn-next{background:var(--accent-color);border:1px solid var(--accent-color);color:#090909;letter-spacing:4px;cursor:pointer;text-transform:uppercase;box-shadow:0 0 28px var(--accent-glow);border-radius:999px;padding:13px 46px;font-family:Bebas Neue,Impact,sans-serif;font-size:28px;transition:transform .2s,box-shadow .2s,background-color .2s}.btn-next:hover{filter:brightness(1.08);box-shadow:0 0 36px var(--accent-glow);transform:translateY(-1px)}.stats-bar{justify-content:center;gap:clamp(24px,7vw,42px);margin-top:28px;animation:.4s both fadeUp;display:flex}.stats-bar .stat{text-align:center}.stats-bar .stat-value{color:#fff;font-family:Bebas Neue,Impact,sans-serif;font-size:28px;line-height:1}.stats-bar .stat-label{letter-spacing:2px;color:#9a9a9a;margin-top:5px;font-size:11px}@media (width<=600px){html,body,#root{overscroll-behavior:none;height:100svh;overflow:hidden}body{width:100%;position:fixed}.app-shell{height:100svh;min-height:100svh;padding:14px 16px 10px;overflow:hidden}.brand-header{gap:10px}.brand-mark{width:34px;height:34px}h1{letter-spacing:clamp(8px,3vw,12px);font-size:clamp(46px,12vw,56px)}.game-area{width:min(86vw,410px);margin-bottom:18px}.drag-hint{letter-spacing:2.4px;font-size:11px;bottom:-24px}.score-panel{margin-top:18px}.grade-label{letter-spacing:6px;margin-bottom:8px;font-size:clamp(24px,6.2vw,30px)}.split-display{gap:12px;margin-bottom:6px}.split-number{font-size:clamp(34px,9vw,44px)}.piece-label,.split-divider .vs,.off-by,.stats-bar .stat-label{letter-spacing:2px;font-size:9px}.split-divider{gap:3px}.split-divider .line{height:22px}.split-bar{width:min(230px,68vw);height:4px;margin-bottom:4px}.off-by{margin-bottom:10px}.btn-next{letter-spacing:3px;padding:8px 34px;font-size:22px}.stats-bar{gap:clamp(20px,6vw,32px);width:100%;margin-top:18px;padding-bottom:4px}.stats-bar .stat-value{font-size:24px}.stats-bar .stat-label{margin-top:5px}}.glow-bg{pointer-events:none;z-index:0;background:radial-gradient(circle,#e8ff470a 0%,#0000 65%);border-radius:50%;width:500px;height:500px;animation:4s ease-in-out infinite pulseGlow;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{opacity:.04}50%{opacity:.09}}
