:root{--bg: #0c0b0f;--bg-elevated: #16151b;--bg-card: #1c1b23;--bg-hover: #232230;--surface: #2a2937;--border: #35344280;--border-strong: #4a496060;--text: #f0ede6;--text-secondary: #a8a4b4;--text-muted: #8c889a;--accent: #ff6b3d;--accent-glow: #ff6b3d40;--accent-soft: #ff6b3d15;--purple: #a78bfa;--purple-glow: #a78bfa40;--green: #4ade80;--green-glow: #4ade8040;--yellow: #facc15;--pink: #f472b6;--cyan: #22d3ee;--red: #ef4444;--focus-ring: #60a5fa;--font-display: "Bricolage Grotesque", system-ui, sans-serif;--font-body: "Bricolage Grotesque", system-ui, sans-serif;--font-mono: "DM Mono", monospace;--font-serif: "Instrument Serif", Georgia, serif;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow-sm: 0 2px 8px rgba(0,0,0,.3);--shadow-md: 0 4px 20px rgba(0,0,0,.4);--shadow-glow: 0 0 30px var(--accent-glow);--page-pad: 1rem;--card-pad: 1.25rem}@media (min-width: 640px){:root{--page-pad: 1.5rem;--card-pad: 1.75rem}}@media (min-width: 1024px){:root{--page-pad: 2rem;--card-pad: 2rem}}*{margin:0;padding:0;box-sizing:border-box}html{height:100%;overscroll-behavior:none}body{min-height:100%;min-height:100dvh;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#root{min-height:100%;min-height:100dvh}*:focus{outline:none}*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}button,input,[role=button]{min-height:44px;min-width:44px}.skip-link{position:absolute;top:-100px;left:0;background:var(--accent);color:#fff;padding:.75rem 1.5rem;z-index:99999;font-family:var(--font-body);font-weight:600;text-decoration:none;border-radius:0 0 var(--radius-md) 0}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-select{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface);border-radius:3px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.game-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative;z-index:1;overflow:hidden}.game-topbar{flex-shrink:0;display:flex;align-items:center;padding:.3rem .5rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);gap:.4rem;min-height:36px}.game-body{flex:1;display:flex;flex-direction:column;padding:.3rem;gap:.3rem;overflow-y:auto;overflow-x:hidden;min-height:0}.game-canvas-area{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%;flex-shrink:0}.game-canvas-wrap{width:100%;max-width:720px;position:relative;display:flex;flex-direction:column;align-items:center}.game-canvas{width:auto;max-width:100%;max-height:38vh;aspect-ratio:720 / 480}.game-sidebar{width:100%;flex:1;min-height:150px;max-height:250px;display:flex;flex-direction:column}@media (min-width: 768px){.game-body{flex-direction:row;overflow:hidden;padding:.4rem .5rem;gap:.5rem}.game-canvas-area{flex:1;min-width:0;overflow:hidden}.game-canvas{max-height:55vh}.game-sidebar{width:260px;flex-shrink:0;flex:0 0 260px;min-height:0;max-height:none;overflow:hidden}}@media (min-width: 1024px){.game-body{padding:.4rem .75rem}.game-canvas{max-height:60vh}.game-sidebar{width:300px;flex:0 0 300px}}@media (min-width: 1440px){.game-canvas{max-height:68vh}.game-sidebar{width:340px;flex:0 0 340px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}#root:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}