:root{--page-bg: #d9dde3;--page-bg-deep: #c2c8d1;--card-bg: #f5f6f8;--card-border: #c8ced8;--ink: #1f242e;--muted: #5e6674;--accent: #1dad28;--panel-dark: #151923;--panel-dark-2: #232a38;--panel-line: #3a4357}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Trebuchet MS,Verdana,Tahoma,sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 12% -10%,#ffffffb8,#fff0),radial-gradient(900px 500px at 92% -20%,#c8d1e0cc,#c8d1e000),linear-gradient(180deg,var(--page-bg),var(--page-bg-deep))}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,#ffffff14 0 2px,#fff0 2px 14px);opacity:.28}#app{min-height:100vh;padding:clamp(14px,2.3vw,30px);position:relative;z-index:1}.game-page{max-width:1520px;margin:0 auto;display:grid;gap:clamp(12px,1.2vw,18px)}.game-card,.details-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:clamp(10px,1.2vw,16px);box-shadow:0 16px 34px #1219281f,inset 0 1px #fff9}.game-card{animation:rise-in .46s ease-out}.details-card{animation:rise-in .56s ease-out}.game-stage-layout{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(180px,.56fr);gap:clamp(8px,.8vw,12px);align-items:stretch}.game-stage-column{display:flex;flex-direction:column;gap:8px}.game-header{background:linear-gradient(180deg,#fff,#eceff4);border:1px solid #c9d0db;border-radius:14px;padding:11px 13px 10px}.game-kicker{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;color:#6c7483;font-weight:700}.game-header h1{margin:4px 0 2px;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;letter-spacing:.02em;font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.03;color:#1b212a}.game-subtitle{margin:0;color:#4f5665;font-size:clamp(.78rem,1vw,.9rem)}.game-stage-frame{border-radius:16px;overflow:hidden;border:1px solid #262c37;background:linear-gradient(180deg,#323946,#10151d 52%,#090b10);box-shadow:inset 0 0 0 1px #ffffff0d,0 10px 22px #06090f75}#game-canvas{width:100%;aspect-ratio:16 / 9;min-height:clamp(460px,66vh,760px);background:#000}#game-canvas canvas{display:block;width:100%;height:100%;image-rendering:auto}.controls-card{background:linear-gradient(180deg,#ffffff14,#fff0),linear-gradient(180deg,var(--panel-dark-2),var(--panel-dark));border:1px solid #313a4a;border-radius:12px;color:#ecf2ff;padding:10px 10px 9px;display:flex;flex-direction:column;gap:8px;animation:rise-in .52s ease-out}.controls-card h2,.details-card h2{margin:0;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;letter-spacing:.04em;font-size:1.2rem}.controls-card h2{text-transform:uppercase;letter-spacing:.06em;color:#f8fbff;text-shadow:0 1px 0 rgba(0,0,0,.26)}#controls-groups{width:100%}.controls-list{margin:0;padding:0;list-style:none;display:grid;gap:5px}.control-item{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:8px;align-items:center;padding:5px 6px;border:1px solid var(--panel-line);border-radius:8px;background:#121823d1}.control-keys{display:flex;flex-wrap:wrap;gap:6px}.control-key{min-width:34px;text-align:center;padding:3px 6px;border-radius:6px;border:1px solid #6f7c95;background:linear-gradient(180deg,#fdfefe,#dbe3ee);color:#1b2430;font-weight:800;font-size:.67rem;box-shadow:inset 0 1px #ffffffeb,0 1px #00000047}.control-label{margin:0;color:#f7faff;font-size:.8rem;font-weight:700}.details-card p{margin:10px 0 0;max-width:90ch;color:var(--muted);line-height:1.62}.npc-section{margin-top:14px;padding-top:14px;border-top:1px solid #ccd3dd}.npc-section h3{margin:0;color:#1f2632;font-size:1.05rem;letter-spacing:.02em}.npc-section-intro{margin-top:6px;font-size:.85rem;color:#5f6774}.npc-gallery{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:9px}.npc-card{border:1px solid #cfd6e0;border-radius:10px;background:linear-gradient(180deg,#fff,#f1f4f8);padding:8px 8px 10px;display:grid;gap:6px;justify-items:center;text-align:center}.npc-sprite-shell{width:100%;min-height:96px;display:flex;justify-content:center;align-items:flex-end;border:1px solid #dce3ed;border-radius:8px;background:linear-gradient(180deg,#fffffff2,#ecf0f6e6);padding:6px 4px}.npc-sprite-clip{overflow:hidden}.npc-sprite{display:block;image-rendering:pixelated}.npc-name{margin:0;font-size:.86rem;color:#1b2230;font-weight:800}.npc-role{margin:0;color:#2f3f63;font-size:.72rem;font-weight:700}.npc-desc{margin:0;color:#5a6271;font-size:.73rem;line-height:1.33}@media(max-width:1040px){.game-stage-layout{grid-template-columns:1fr}.controls-card{order:2}#game-canvas{min-height:clamp(320px,46vh,440px)}}@media(max-width:640px){#app{padding:10px}.game-card,.details-card{border-radius:16px;padding:12px}.game-header h1{font-size:clamp(1.55rem,8vw,2rem)}#game-canvas{min-height:clamp(220px,38vh,320px)}.control-item{grid-template-columns:minmax(72px,auto) minmax(0,1fr)}.npc-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}