.game-page{--bg:var(--color-bg);--surface:var(--color-surface);--surface2:var(--color-bg-secondary);--border:var(--color-border);--accent:var(--color-secondary);--text:var(--color-text);--muted:var(--color-text-muted);--success:#22c55e;--danger:#f87171;max-width:800px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:var(--font-sans);color:var(--color-text);min-height:calc(100vh - var(--navbar-height, 60px) - var(--subnav-height, 40px))}.game-page h1{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem}.game-page .tagline{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}.game-page .btn{padding:8px 18px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-high);color:var(--text);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s}.game-page .btn:hover{border-color:transparent;background:var(--color-surface-bright);color:var(--color-secondary)}.game-page .btn-primary{background:var(--color-secondary-container);color:var(--color-secondary-on);border-color:transparent;border-radius:var(--radius-full)}.game-page .btn-primary:hover{box-shadow:0 4px 20px rgba(172,138,255,.2);color:var(--color-secondary-on)}.dpad{display:grid;grid-template-areas:".    up   ." "left .    right" ".    down .";grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);grid-gap:6px;gap:6px;margin-top:.5rem}.dpad,.dpad-btn{justify-content:center}.dpad-btn{display:flex;align-items:center;border:1px solid var(--color-border);background:var(--color-surface-high);color:var(--text);border-radius:var(--radius-lg);cursor:pointer;transition:background .1s,border-color .1s,transform 80ms,box-shadow .1s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dpad-btn svg{width:24px;height:24px}.dpad-btn:hover{border-color:transparent;background:var(--color-surface-bright);color:var(--color-secondary)}.dpad-btn:active{background:var(--color-secondary-container);border-color:transparent;color:var(--color-secondary-on);transform:scale(.92);box-shadow:0 0 16px rgba(172,138,255,.25)}.dpad-up{grid-area:up}.dpad-down{grid-area:down}.dpad-left{grid-area:left}.dpad-right{grid-area:right}@media (max-width:480px){.game-page{padding:1rem .75rem 2rem}.game-page .btn{padding:10px 14px;min-height:44px;font-size:.8rem}.dpad{grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px)}}[data-theme=light] .game-page{--surface:var(--color-surface-low);--surface2:var(--color-bg-secondary);--border:var(--color-border-ghost)}[data-theme=light] .game-page .btn{background:var(--color-surface-low)}[data-theme=light] .game-page .btn:hover{background:var(--color-secondary-container);color:var(--color-secondary-on)}[data-theme=light] .game-page .btn-primary{background:var(--color-secondary);color:var(--color-bg-secondary)}[data-theme=light] .dpad-btn{background:var(--color-surface)}[data-theme=light] .dpad-btn:hover{background:var(--color-secondary-container);color:var(--color-secondary-on)}[data-theme=light] .dpad-btn:active{background:var(--color-secondary);color:var(--color-bg-secondary)}.canvas-pannable{cursor:-webkit-grab;cursor:grab;position:relative}.canvas-pannable.is-dragging{cursor:-webkit-grabbing;cursor:grabbing}.canvas-pannable canvas,.pan-hint{pointer-events:none}.pan-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.72rem;color:rgba(255,255,255,.55);background:rgba(0,0,0,.45);padding:4px 14px;border-radius:20px;animation:panHintFade 4s ease-out forwards;white-space:nowrap;z-index:2}@keyframes panHintFade{0%,60%{opacity:1}to{opacity:0}}