:root { --game-max: 92rem; --game-line: rgb(255 255 255 / 18%); }
.ark-game-body { min-height: 100svh; background: #080a0b; color: #f4f6f6; }
.game-shell, .ark-game-shell { min-height: 100svh; background: #080a0b; }
.game-topbar, .ark-game-topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; padding: .75rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--game-line); background: rgb(8 10 11 / 88%); backdrop-filter: blur(.7rem); }
.game-brand, .game-back, .ark-game-back { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; font: 700 .72rem var(--ark-mono); letter-spacing: .1em; text-transform: uppercase; }
.game-brand::before, .game-back::before, .ark-game-back::before { content: ""; width: 1.5rem; height: .38rem; background: var(--ark-signal); clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); }
.game-node-state { display: flex; align-items: center; gap: .5rem; color: rgb(255 255 255 / 58%); font: .64rem var(--ark-mono); letter-spacing: .08em; }
.game-node-state::before { content: ""; width: .45rem; height: .45rem; background: var(--ark-state); }
.game-main, .ark-game-main { width: min(100%, var(--game-max)); margin-inline: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3.5rem) 5rem; }
.game-heading, .ark-game-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); padding-bottom: 1.4rem; border-bottom: 1px solid var(--game-line); }
.game-kicker { margin: 0 0 .8rem; color: var(--ark-signal); font: .68rem var(--ark-mono); letter-spacing: .14em; }
.game-heading h1, .ark-game-heading h1 { margin: 0; font: 900 clamp(3.2rem, 9vw, 8rem)/.78 var(--ark-display); letter-spacing: -.07em; text-transform: uppercase; }
.game-heading p { max-width: 40rem; color: rgb(255 255 255 / 66%); line-height: 1.65; }
.game-status-strip, .ark-game-status-strip { display: flex; flex-wrap: wrap; gap: .75rem 1.6rem; padding: .7rem 0; color: rgb(255 255 255 / 58%); font: .65rem var(--ark-mono); letter-spacing: .08em; }
.game-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--game-line); background: var(--game-line); }
.game-card { position: relative; min-height: 26rem; display: flex; flex-direction: column; padding: 1.4rem; overflow: hidden; background: #0f1213; color: inherit; text-decoration: none; isolation: isolate; transition: background var(--ark-direct), transform var(--ark-direct); }
.game-card::after { content: ""; position: absolute; inset: auto -12% -24% 35%; z-index: -1; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 20%); transform: rotate(18deg); }
.game-card:hover { z-index: 2; background: #151a1c; transform: translateY(-.35rem); }
.game-card-index { color: var(--ark-signal); font: .68rem var(--ark-mono); }
.game-card-visual { min-height: 9rem; display: grid; place-items: center; margin: 2rem 0; color: var(--ark-signal); font: 900 4.5rem/.8 var(--ark-display); letter-spacing: -.08em; }
.game-card h2 { margin: auto 0 .5rem; font: 900 clamp(2rem, 3.3vw, 3.6rem)/.88 var(--ark-display); letter-spacing: -.055em; text-transform: uppercase; }
.game-card p { min-height: 3.2rem; color: rgb(255 255 255 / 62%); line-height: 1.5; }
.game-card-meta { display: flex; justify-content: space-between; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--game-line); font: .62rem var(--ark-mono); letter-spacing: .05em; }

.ark-game-layout, .game-play-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.ark-game-stage, .game-stage { position: relative; min-width: 0; display: grid; place-items: center; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--game-line); background: #050606; overflow: hidden; }
.ark-game-stage::before, .game-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(rgb(24 209 255 / 12%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px); background-size: 3rem 3rem; }
.ark-game-stage canvas, .game-stage canvas { position: relative; display: block; max-width: 100%; max-height: min(70svh, 48rem); touch-action: none; image-rendering: pixelated; }
.ark-game-dossier, .game-dossier { padding: 1.25rem; border: 1px solid var(--game-line); background: #0e1112; }
.ark-game-hud, .game-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 1rem; background: var(--game-line); border: 1px solid var(--game-line); }
.ark-game-stat, .game-stat { min-width: 0; padding: .9rem; background: #0e1112; }
.ark-game-stat span, .game-stat span { display: block; margin-bottom: .35rem; color: rgb(255 255 255 / 54%); font: .58rem var(--ark-mono); letter-spacing: .1em; text-transform: uppercase; }
.ark-game-stat strong, .game-stat strong { font: 700 1.25rem var(--ark-mono); font-variant-numeric: tabular-nums; }
.ark-game-actions, .game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.ark-game-button, .game-button, .control-button { min-height: 2.8rem; padding: .65rem .8rem; border: 1px solid rgb(255 255 255 / 36%); background: transparent; color: inherit; cursor: pointer; font-weight: 700; }
.ark-game-button:hover, .game-button:hover, .control-button:hover { border-color: var(--ark-signal); background: rgb(24 209 255 / 8%); }
.ark-game-button.primary, .game-button.primary { background: var(--ark-signal); border-color: var(--ark-signal); color: var(--ark-ink); }
.ark-game-dpad, .game-dpad { display: grid; grid-template-columns: repeat(3, 3.2rem); grid-template-rows: repeat(2, 3.2rem); justify-content: center; gap: .4rem; margin-top: 1rem; }
.ark-game-dpad button, .game-dpad button { border: 1px solid rgb(255 255 255 / 32%); background: #111516; color: inherit; touch-action: manipulation; }
.ark-game-dpad button[data-dir="up"] { grid-column: 2; }
.ark-game-dpad button[data-dir="left"] { grid-column: 1; grid-row: 2; }
.ark-game-dpad button[data-dir="down"] { grid-column: 2; grid-row: 2; }
.ark-game-dpad button[data-dir="right"] { grid-column: 3; grid-row: 2; }
.game-help { margin-top: 1rem; color: rgb(255 255 255 / 58%); font-size: .85rem; line-height: 1.6; }
.game-help kbd { padding: .1rem .35rem; border: 1px solid rgb(255 255 255 / 25%); background: #080a0b; font: .75rem var(--ark-mono); }
.game-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 2rem; background: rgb(8 10 11 / 82%); text-align: center; }
.game-overlay[hidden] { display: none; }
.game-overlay h2 { margin: 0 0 .7rem; font: 900 clamp(2.5rem, 7vw, 6rem)/.85 var(--ark-display); letter-spacing: -.06em; }
.game-live { min-height: 1.4rem; color: var(--ark-signal); font: .7rem var(--ark-mono); }

.mc-dashboard { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: 1px; border: 1px solid var(--game-line); background: var(--game-line); }
.mc-stage { position: relative; min-height: 33rem; display: flex; flex-direction: column; justify-content: end; padding: clamp(1.5rem, 5vw, 4rem); overflow: hidden; background: linear-gradient(140deg, #121617, #080a0b 62%); isolation: isolate; }
.mc-stage::before { content: ""; position: absolute; inset: 8% 2% -25% 34%; z-index: -1; border: 1px solid rgb(255 255 255 / 18%); background-image: linear-gradient(rgb(24 209 255 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px); background-size: 3rem 3rem; transform: skewY(-9deg); }
.mc-stage h2 { margin: 0; font: 900 clamp(4rem, 10vw, 10rem)/.75 var(--ark-display); letter-spacing: -.08em; }
.mc-stage p { max-width: 42rem; color: rgb(255 255 255 / 66%); line-height: 1.7; }
.mc-panel { padding: 1.5rem; background: #0e1112; }
.mc-state-line { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid var(--game-line); font: 700 .75rem var(--ark-mono); letter-spacing: .08em; }
.mc-state-dot { width: .65rem; height: .65rem; background: #6f7476; }
.mc-state-dot.online { background: var(--ark-state); box-shadow: 0 0 0 .4rem rgb(200 235 33 / 10%); }
.mc-facts { margin: 1rem 0; }
.mc-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--game-line); }
.mc-facts dt { color: rgb(255 255 255 / 54%); }
.mc-facts dd { margin: 0; font: 700 .82rem var(--ark-mono); text-align: end; }
.address-box { margin: 1.2rem 0; padding: 1rem; border-left: .35rem solid var(--ark-signal); background: #080a0b; }
.address-box span { display: block; color: rgb(255 255 255 / 48%); font: .58rem var(--ark-mono); letter-spacing: .1em; }
.address-box code { display: block; margin-top: .35rem; overflow-wrap: anywhere; color: var(--ark-paper); font: 700 .9rem var(--ark-mono); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1px; background: var(--game-line); border: 1px solid var(--game-line); }
.info-panel { min-height: 18rem; padding: 1.5rem; background: #0e1112; }
.info-panel h2 { margin: 0 0 1rem; font: 900 2rem/.9 var(--ark-display); letter-spacing: -.04em; }
.info-panel ol, .info-panel ul { padding-left: 1.2rem; color: rgb(255 255 255 / 70%); line-height: 1.8; }
.legal-note { margin-top: 1px; padding: 1rem; border: 1px solid var(--game-line); color: rgb(255 255 255 / 48%); font: .62rem/1.6 var(--ark-mono); letter-spacing: .05em; }

@media (max-width: 1100px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-dashboard { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .ark-game-layout, .game-play-layout, .info-grid { grid-template-columns: 1fr; } .game-heading, .ark-game-heading { display: block; } }
@media (max-width: 560px) { .game-grid { grid-template-columns: 1fr; } .game-card { min-height: 20rem; } .game-topbar, .ark-game-topbar { align-items: flex-start; } .game-node-state { display: none; } .ark-game-actions, .game-actions { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .game-card:hover { transform: none; } }