:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #14171e;
  --panel-raised: #1a1e27;
  --line: #2a303b;
  --line-soft: #20252e;
  --text: #f5f7fb;
  --muted: #9ca5b5;
  --muted-2: #70798a;
  --red: #f0475f;
  --red-bg: #29141a;
  --blue: #5b8cff;
  --blue-bg: #111c38;
  --green: #42d392;
  --amber: #f6ba54;
  --radius: 14px;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
input, textarea { color: var(--text); }
.hidden { display: none !important; }
.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; }
.eyebrow, .step-kicker { margin: 0 0 5px; color: var(--muted-2); font-size: 10px; font-weight: 900; letter-spacing: .16em; }

/* Landing */
.landing-shell { min-height: 100dvh; display: grid; place-items: center; padding: 34px 22px; background: radial-gradient(circle at 50% 0%, rgba(91,140,255,.10), transparent 35%), radial-gradient(circle at 20% 90%, rgba(240,71,95,.08), transparent 28%), var(--bg); }
.landing-card { width: min(820px, 100%); animation: enter .45s ease-out both; }
.brand-lockup { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.brand-mark, .mini-mark { display: inline-flex; gap: 4px; transform: skewX(-10deg); }
.brand-mark { margin-bottom: 15px; }
.brand-mark span, .mini-mark span { display: block; background: var(--text); border-radius: 2px; }
.brand-mark span { width: 14px; height: 34px; }
.brand-mark span:last-child { background: var(--red); }
.mini-mark span { width: 6px; height: 18px; }
.mini-mark span:last-child { background: var(--red); }
.brand-lockup h1 { margin: 0; font-size: clamp(42px, 8vw, 78px); letter-spacing: -.055em; line-height: .95; }
.landing-copy { margin: 16px auto 0; max-width: 590px; color: #c4cad4; font-size: 17px; line-height: 1.55; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.how-grid article { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #11141a; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.how-grid article > b { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #242a34; font-size: 12px; }
.how-grid article div { display: grid; gap: 4px; }
.how-grid article strong { font-size: 13px; }
.how-grid article span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.join-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.field-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: #cdd3dc; }
.large-input, .join-line input, .location-controls input, .chat-form input, textarea { border: 1px solid #343b48; background: #0f1217; border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.large-input:focus, .join-line input:focus, .location-controls input:focus, .chat-form input:focus, textarea:focus { border-color: #61708a; box-shadow: 0 0 0 3px rgba(91,140,255,.11); background: #11151b; }
.large-input { width: 100%; min-height: 50px; padding: 0 14px; font-size: 16px; }
.landing-actions { display: grid; gap: 12px; margin-top: 14px; }
.join-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-line input { min-width: 0; padding: 0 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.or-divider { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 11px; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; background: var(--line-soft); flex: 1; }
.landing-footnote { margin: 14px 0 0; text-align: center; color: var(--muted-2); font-size: 12px; }

/* Buttons */
.btn { border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; color: var(--text); background: #252b36; font-weight: 850; transition: transform .12s, background .12s, opacity .12s, border-color .12s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { background: var(--text); color: #0b0d12; }
.btn-primary:hover:not(:disabled) { background: #dde2ea; }
.btn-secondary { border-color: #3a4250; background: #20252e; }
.btn-secondary:hover:not(:disabled) { background: #282e39; }
.btn-large { min-height: 50px; font-size: 14px; }
.text-btn { border: 0; background: transparent; color: #b9c1ce; font-size: 11px; font-weight: 800; padding: 7px 0; }
.text-btn:hover { color: #fff; }

/* Game chrome */
.game-shell { min-height: 100dvh; }
.topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; background: #0f1116; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 30; }
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand > div:last-child { display: grid; gap: 2px; }
.topbar-brand strong { font-size: 13px; letter-spacing: .05em; }
.topbar-brand small { color: var(--muted-2); font-size: 9px; letter-spacing: .11em; }
.room-meta { display: flex; align-items: center; gap: 8px; }
.room-code { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 9px; border: 1px solid #343b47; background: #191d24; color: var(--text); border-radius: 10px; padding: 7px 11px; text-align: left; }
.room-code span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.room-code strong { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; letter-spacing: .11em; }
.room-code em { font-style: normal; color: var(--muted); font-size: 9px; }
.status-pill { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #14171d; color: #c3cad4; font-size: 11px; }
#connectionDot { width: 7px; height: 7px; border-radius: 50%; background: #697283; }
#connectionDot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(66,211,146,.10); }
.ai-dot { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: #242a34; font-size: 9px; font-weight: 900; }
.ai-lanes.warning b { color: var(--amber); }

.room-steps { display: flex; align-items: stretch; max-width: 1100px; margin: 14px auto 0; padding: 0 18px; }
.room-step { flex: 1; display: flex; gap: 9px; align-items: center; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-soft); background: #101319; color: #747e8f; transition: border-color .18s, background .18s, color .18s; }
.room-step:first-child { border-radius: 10px 0 0 10px; }
.room-step:last-child { border-radius: 0 10px 10px 0; }
.room-step > b { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #222833; font-size: 11px; }
.room-step span { display: grid; gap: 1px; min-width: 0; }
.room-step strong { font-size: 11px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-step small { font-size: 9px; color: #667081; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-step.active { color: #fff; background: #171b22; border-color: #3c4554; }
.room-step.active > b { background: #fff; color: #111; }
.room-step.complete { color: #b8c0cc; }
.room-step.complete > b { background: rgba(66,211,146,.15); color: var(--green); }
.room-steps > i { display: none; }

.game-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(420px, 1fr) minmax(270px, 340px); gap: 12px; padding: 14px 18px 22px; max-width: 1600px; margin: 0 auto; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.left-panel, .right-panel { padding: 15px; position: sticky; top: 83px; max-height: calc(100dvh - 98px); overflow: hidden; display: flex; flex-direction: column; }
.center-stage { display: grid; gap: 12px; }
.scene-panel, .turn-panel { padding: 17px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.count-chip { padding: 6px 8px; border-radius: 8px; background: #20252e; color: #c7ced9; font-size: 10px; font-weight: 800; }
.microcopy { margin: 8px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }

/* Teams and players */
.team-zones { display: grid; gap: 9px; overflow-y: auto; padding-right: 2px; }
.team-zone { border: 1px solid var(--line-soft); border-radius: 11px; padding: 10px; background: #101319; transition: border-color .14s, background .14s; }
.team-zone > p { margin: 4px 0 9px 17px; color: #737d8d; font-size: 9px; }
.team-zone.drag-over { border-color: #8791a1; background: #171c24; }
.team-title { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.team-title > span:last-child { margin-left: auto; color: var(--muted-2); font-size: 10px; }
.team-dot { width: 8px; height: 8px; border-radius: 50%; background: #777; }
.red-zone .team-dot { background: var(--red); }
.blue-zone .team-dot { background: var(--blue); }
.free-zone .team-dot { background: #adb5c2; }
.team-drop { display: grid; gap: 7px; min-height: 6px; }
.player-card { border: 1px solid #2b313d; background: #191d24; border-radius: 10px; padding: 10px; transition: transform .14s, border-color .14s, opacity .14s; animation: cardIn .22s ease-out both; }
.player-card[draggable="true"] { cursor: grab; }
.player-card.dragging { opacity: .42; transform: scale(.985); }
.player-card.current-turn { border-color: #e6e9ef; box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.player-card.ko { opacity: .55; }
.player-card-top { display: flex; align-items: center; gap: 8px; }
.avatar { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #242a34; }
.avatar span { width: 10px; height: 10px; border-radius: 50%; background: #929baa; box-shadow: 0 8px 0 3px #929baa; }
.player-ident { min-width: 0; display: grid; gap: 1px; flex: 1; }
.player-ident strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-ident small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.challenge-btn { border: 1px solid #4a3340; background: #2a171e; color: #ffb8c3; border-radius: 8px; padding: 6px 8px; font-size: 9px; font-weight: 900; }
.challenge-btn:hover { background: #3a1b25; }
.hp-block { margin-top: 9px; }
.hp-label { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--muted-2); font-size: 8px; font-weight: 800; }
.hp-label strong { color: #dfe4eb; }
.hp-track { height: 7px; border-radius: 999px; background: #282e38; overflow: hidden; }
.hp-fill { width: 100%; height: 100%; background: var(--green); border-radius: inherit; transition: width .7s cubic-bezier(.2,.8,.2,1), background .2s; }
.hp-fill.low { background: var(--amber); }
.hp-fill.critical { background: var(--red); animation: criticalPulse 1s ease-in-out infinite; }
.team-quick { margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.team-quick > span { margin-right: 2px; color: var(--muted-2); font-size: 8px; }
.team-quick button { border: 1px solid #333a46; background: #20252e; color: #9ea7b5; border-radius: 6px; padding: 4px 6px; font-size: 8px; font-weight: 800; }
.team-quick button.selected { border-color: #6f7b8e; color: #fff; background: #2b323e; }

/* Scene */
.scene-heading { margin-bottom: 14px; }
.phase-badge, .round-badge { border: 1px solid #343c48; background: #1e232b; color: #b9c2cf; border-radius: 8px; padding: 6px 8px; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.phase-badge.live { border-color: rgba(66,211,146,.34); color: var(--green); background: rgba(66,211,146,.08); }
.location-editor { display: grid; grid-template-columns: minmax(155px, .7fr) minmax(260px, 1.3fr); gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: #101319; }
.location-editor label { display: block; font-size: 12px; font-weight: 850; }
.location-editor span { display: block; margin-top: 4px; color: var(--muted-2); font-size: 9px; line-height: 1.35; }
.location-controls { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.location-controls input { min-width: 0; height: 38px; padding: 0 10px; font-size: 11px; }
.scene-visual { position: relative; height: 180px; overflow: hidden; margin-top: 12px; border-radius: 11px; border: 1px solid #262c36; background: linear-gradient(#161a22, #0d1015); }
.scene-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; transform: perspective(500px) rotateX(62deg) scale(1.5) translateY(34%); transform-origin: bottom; }
.scene-figures { position: absolute; left: 50%; bottom: 47px; display: flex; align-items: end; justify-content: center; gap: 14px; transform: translateX(-50%); }
.scene-person { width: 22px; height: 45px; border-radius: 12px 12px 6px 6px; background: #b6bdc9; position: relative; animation: personIn .35s ease-out both; }
.scene-person::before { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: inherit; left: 2.5px; top: -10px; }
.scene-person.team-A { background: var(--red); }
.scene-person.team-B { background: var(--blue); }
.scene-person.current { filter: drop-shadow(0 0 9px rgba(255,255,255,.55)); transform: translateY(-5px); }
.scene-label { position: absolute; left: 13px; bottom: 11px; display: grid; gap: 2px; }
.scene-label span { color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.scene-label strong { font-size: 13px; }
.scene-narrative { margin-top: 10px; border: 1px solid #303743; border-left: 3px solid #7f8999; border-radius: 9px; padding: 12px 13px; background: #11151b; }
.scene-narrative.empty { opacity: .8; }
.narrative-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.narrative-kicker { color: #b8c0cc; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.narrative-heading small { color: var(--muted-2); font-size: 8px; }
.scene-narrative p { margin: 7px 0 0; color: #d2d7df; line-height: 1.5; font-size: 12px; }
.challenge-explainer { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 10px; border-radius: 8px; background: #1a1e25; color: #aab3c0; font-size: 10px; }
.challenge-explainer b { color: #fff; }

/* Turn */
.turn-panel { border-color: #343b47; }
.turn-heading { align-items: center; }
.turn-order-wrap { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; }
.turn-order-wrap > span { padding-top: 6px; flex: 0 0 auto; color: var(--muted-2); font-size: 9px; font-weight: 800; }
.turn-order { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.turn-chip { padding: 5px 7px; border-radius: 7px; border: 1px solid #303743; background: #1b2028; color: #8f99a8; font-size: 9px; }
.turn-chip.active { border-color: #dfe3e9; color: #fff; background: #292f39; }
.turn-chip.ko { opacity: .45; text-decoration: line-through; }
.action-box { margin-top: 12px; padding: 12px; border: 1px solid #313946; border-radius: 11px; background: #101319; }
.action-box > label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 850; }
.action-box textarea { width: 100%; resize: vertical; min-height: 86px; padding: 11px; line-height: 1.45; font-size: 12px; }
.action-box textarea:disabled { opacity: .55; cursor: not-allowed; }
.action-examples { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 7px; }
.action-examples > span { color: var(--muted-2); font-size: 8px; }
.action-examples button { border: 1px solid #303743; background: #191e26; color: #9fa8b7; border-radius: 999px; padding: 4px 7px; font-size: 8px; }
.action-examples button:hover { color: #fff; border-color: #4a5464; }
.action-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 9px; }
.voice-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voice-btn { display: flex; align-items: center; gap: 7px; border: 1px solid #343c49; border-radius: 9px; background: #222833; color: #e6e9ee; padding: 8px 10px; font-size: 10px; font-weight: 800; touch-action: none; }
.voice-btn:disabled { opacity: .4; cursor: not-allowed; }
.voice-btn.recording { border-color: var(--red); background: rgba(240,71,95,.13); color: #ffc6ce; animation: recordPulse 1.15s ease-in-out infinite; }
.mic-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--red); color: transparent; }
.voice-status { color: var(--muted); font-size: 9px; white-space: nowrap; }
.submit-wrap { display: flex; align-items: center; gap: 8px; }
.submit-wrap > span { color: var(--muted-2); font-size: 8px; }
.turn-note { margin: 9px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.turn-note strong { color: #c8ced7; }

/* Join / feed */
.join-fight-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-color: rgba(246,186,84,.35); }
.join-fight-bar > div:first-child { display: grid; gap: 2px; }
.join-fight-bar strong { font-size: 11px; }
.join-fight-bar span { color: var(--muted); font-size: 9px; }
.join-team-picker { display: flex; gap: 5px; }
.join-team-picker button { border: 1px solid #363e4b; background: #20252e; color: #d5dae2; border-radius: 7px; padding: 7px 8px; font-size: 9px; font-weight: 800; }
.right-panel { min-height: 500px; }
.feed-help { margin-top: 6px; }
.winner-card { margin-bottom: 8px; border: 1px solid rgba(66,211,146,.35); background: rgba(66,211,146,.08); color: #8ce8b9; border-radius: 9px; padding: 10px; text-align: center; font-size: 11px; font-weight: 900; }
.fight-log { min-height: 180px; overflow-y: auto; flex: 1; padding-right: 3px; }
.log-item { padding: 9px 0; border-bottom: 1px solid var(--line-soft); animation: logIn .2s ease-out both; }
.log-item:last-child { border-bottom: 0; }
.log-meta { display: flex; justify-content: space-between; gap: 8px; }
.log-meta strong { font-size: 8px; letter-spacing: .07em; color: #aeb6c2; }
.log-meta span { color: #596272; font-size: 8px; }
.log-item p { margin: 4px 0 0; color: #c9cfd8; line-height: 1.45; font-size: 10px; }
.log-item.action p { color: #fff; }
.log-item.result { border-left: 2px solid #778394; padding-left: 8px; }
.log-item.scene { border-left: 2px solid var(--blue); padding-left: 8px; }
.log-item.ko { border-left: 2px solid var(--red); padding-left: 8px; }
.log-item.winner { border-left: 2px solid var(--green); padding-left: 8px; }
.log-item.error p { color: #ff9bab; }
.log-delta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.delta-pill { padding: 3px 5px; border-radius: 5px; background: rgba(240,71,95,.10); color: #ff9aaa; font-size: 8px; font-weight: 800; }
.delta-pill.heal { background: rgba(66,211,146,.10); color: #83e5b3; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.chat-form input { min-width: 0; height: 36px; padding: 0 10px; font-size: 10px; }
.chat-send { border: 1px solid #383f4b; border-radius: 8px; background: #232933; color: #fff; padding: 0 10px; font-size: 9px; font-weight: 850; }

.toast-stack { position: fixed; right: 14px; top: 78px; z-index: 100; display: grid; gap: 7px; pointer-events: none; }
.toast { width: min(340px, calc(100vw - 28px)); padding: 10px 12px; border-radius: 9px; background: #20252e; border: 1px solid #3b4451; box-shadow: var(--shadow); color: #eef1f5; font-size: 10px; animation: toastIn .22s ease-out both; }
.toast.error { border-color: rgba(240,71,95,.5); color: #ffc2cb; }

@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes personIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes recordPulse { 50% { box-shadow: 0 0 0 5px rgba(240,71,95,.08); } }
@keyframes criticalPulse { 50% { opacity: .65; } }

@media (max-width: 1160px) {
  .game-layout { grid-template-columns: minmax(235px, 290px) 1fr; }
  .right-panel { grid-column: 1 / -1; position: static; max-height: none; min-height: 330px; }
  .fight-log { max-height: 360px; }
}
@media (max-width: 780px) {
  .landing-shell { padding: 24px 14px; }
  .how-grid { grid-template-columns: 1fr; }
  .topbar { position: static; align-items: flex-start; flex-direction: column; }
  .room-meta { width: 100%; flex-wrap: wrap; }
  .room-code { flex: 1; }
  .room-steps { padding: 0 10px; overflow-x: auto; }
  .room-step { min-width: 170px; }
  .game-layout { grid-template-columns: 1fr; padding: 10px; }
  .left-panel, .right-panel { position: static; max-height: none; }
  .location-editor { grid-template-columns: 1fr; }
  .scene-visual { height: 155px; }
  .action-footer, .join-fight-bar { align-items: stretch; flex-direction: column; }
  .submit-wrap { justify-content: space-between; }
  .submit-wrap .btn { flex: 1; }
  .join-team-picker { display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .brand-lockup h1 { font-size: 44px; }
  .join-line { grid-template-columns: 1fr; }
  .location-controls { grid-template-columns: 1fr; }
  .narrative-heading { display: grid; }
  .challenge-explainer { align-items: flex-start; flex-direction: column; }
  .action-examples { display: grid; grid-template-columns: repeat(2, 1fr); }
  .action-examples > span { grid-column: 1 / -1; }
  .voice-wrap { justify-content: space-between; }
  .room-meta .status-pill { flex: 1; }
}