:root {
  --game-bg: #0d0b1f;
  --game-panel: #1b1733;
  --game-purple: #7657e8;
  --game-violet: #b06cff;
  --game-cyan: #50d5ff;
  --game-green: #63e6a6;
  --game-amber: #ffc65c;
  --game-red: #ff6b78;
  --game-text: #f7f3ff;
  --game-muted: #b8b0d0;
  --ink: #19152b;
  font-family: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  color: var(--game-text);
  background: var(--game-bg);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: radial-gradient(circle at 80% 0%, #2b2053, var(--game-bg) 50%); }
button, input, select { min-height: 44px; font: inherit; border-radius: 3px; }
button { border: 2px solid #0b3225; padding: .7rem 1rem; font-weight: 900; color: #0d0b1f; background: var(--game-green); box-shadow: 0 4px 0 #21875f; cursor: pointer; }
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #21875f; }
button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
button.secondary { color: var(--game-text); border-color: #514868; background: #393052; box-shadow: 0 4px 0 #211b35; }
button.danger { color: #21060a; border-color: #641b27; background: var(--game-red); box-shadow: 0 4px 0 #9d3140; }
input, select { width: 100%; padding: .65rem .75rem; color: var(--game-text); border: 1px solid #514868; background: #141126; }
label { display: grid; gap: .35rem; color: var(--game-muted); }
h1, h2, p { margin-top: 0; }
.eyebrow { margin-bottom: .35rem; color: var(--game-cyan); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.panel { border: 2px solid #514868; border-radius: 3px; background: color-mix(in srgb, var(--game-panel) 96%, transparent); box-shadow: 6px 6px 0 #07051099; }
.landing { display: grid; min-height: 100vh; place-items: center; padding: 2rem; }
.landing-card { width: min(900px, 100%); }
.landing-card > h1 { font-size: clamp(2.2rem, 7vw, 5rem); line-height: .95; }
.landing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.landing-grid .panel { display: grid; gap: 1rem; padding: 1.25rem; }
.landing-grid form label { margin-bottom: 1rem; }
.stage { min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: #09071a; image-rendering: pixelated; }
.stage-topbar { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; border: 2px solid #090713; border-bottom-color: var(--game-cyan); background: #0d0b1ff2; box-shadow: inset 0 -3px #272046; }
.stage-topbar strong { display: block; font-size: 1.05rem; }
.stage-stats { display: flex; align-items: center; gap: .55rem; font-weight: 900; }
.stage-stats > span { padding: .35rem .55rem; border: 1px solid #514868; background: #17132c; box-shadow: 3px 3px 0 #070510; }
.timer { min-width: 7ch; text-align: center; color: var(--game-bg); border: 0 !important; background: var(--game-amber) !important; font: 900 1.25rem ui-monospace, monospace; }
.stage-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .95fr); gap: .65rem; padding: .65rem; }
.broadcast { position: relative; isolation: isolate; overflow: hidden; min-height: 0; border: 2px solid #514868; background-image: linear-gradient(90deg, #08061722 0 42%, #08061788 66%, #080617d9 100%), url("/nkp-city-night.png"); background-size: cover; background-position: center; image-rendering: pixelated; }
.broadcast::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, #50d5ff22 3px 4px); }
.scene-motion { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.team-window { position: absolute; left: 2.2%; bottom: 3%; width: clamp(190px, 25vw, 320px); aspect-ratio: 16 / 7; overflow: hidden; border: 2px solid var(--game-cyan); background: #070510; box-shadow: 6px 6px 0 #070510cc, 0 0 18px #50d5ff33; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.scene-window-label { position: absolute; z-index: 3; top: 0; left: 0; padding: .18rem .38rem; color: #070510; background: var(--game-cyan); font: 1000 .55rem ui-monospace, monospace; letter-spacing: .08em; }
.team-floor { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; opacity: .94; image-rendering: pixelated; animation: team-live 4.5s steps(2) infinite; }
.team-window::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--game-cyan), var(--game-violet), transparent); box-shadow: 0 -8px 20px #50d5ff44; }
.work-pulse { position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: var(--game-cyan); box-shadow: 0 0 10px 3px #50d5ff99; animation: work-pulse 1.8s steps(2) infinite; }
.pulse-a { left: 20%; } .pulse-b { left: 64%; animation-delay: -.6s; } .pulse-c { left: 81%; animation-delay: -1.2s; background: var(--game-amber); box-shadow: 0 0 10px 3px #ffc65c99; }
.event-visuals { position: absolute; top: 4%; left: 2.2%; display: grid; width: clamp(200px, 29vw, 370px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.event-window { min-width: 0; margin: 0; overflow: hidden; border: 2px solid var(--game-violet); background: #070510e8; box-shadow: 5px 5px 0 #070510cc; }
.event-window:only-child { width: min(100%, 190px); }
.event-art { display: block; width: 100%; aspect-ratio: 1; background-image: url("/nkp-event-atlas.png"); background-repeat: no-repeat; background-size: 300% 300%; image-rendering: pixelated; animation: event-scan 3.2s steps(2) infinite; }
.event-o0 .event-art { background-position: 0 0; }
.event-e1 .event-art { background-position: 50% 0; }
.event-e2 .event-art { background-position: 100% 0; }
.event-o1 .event-art { background-position: 0 50%; }
.event-e3 .event-art { background-position: 50% 50%; }
.event-o2 .event-art { background-position: 100% 50%; }
.event-e4 .event-art { background-position: 0 100%; }
.event-e5 .event-art { background-position: 50% 100%; }
.event-e6 .event-art { background-position: 100% 100%; }
.event-window figcaption { min-height: 34px; padding: .3rem .4rem; overflow: hidden; color: var(--game-text); background: #17132cee; font-size: clamp(.58rem, .8vw, .72rem); font-weight: 900; line-height: 1.25; }
.broadcast-copy { position: absolute; z-index: 3; top: 5%; right: 3%; width: min(54%, 580px); max-height: 90%; overflow: auto; padding: 1rem 1.1rem; border: 2px solid var(--game-violet); border-left: 7px solid var(--game-cyan); border-radius: 2px; background: #0d0b1fe8; box-shadow: 7px 7px 0 #070510cc; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); animation: hud-glow 4s steps(2) infinite; }
.broadcast-copy h1 { margin-bottom: .55rem; font-size: clamp(1.45rem, 2.7vw, 3rem); line-height: 1.08; text-wrap: balance; }
.broadcast-copy > p:not(.eyebrow) { color: #ded7f5; line-height: 1.5; }
.stage-side { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .65rem; }
.stage-side .panel { min-height: 0; padding: .8rem; }
.join-card { display: grid; grid-template-columns: 84px 1fr; gap: .7rem; align-items: center; border-color: var(--game-cyan); }
.join-card img { width: 84px; border: 3px solid #fff; image-rendering: pixelated; }
.join-code { font: 900 clamp(1.65rem, 3.5vw, 2.7rem) ui-monospace, monospace; letter-spacing: .1em; color: var(--game-amber); text-shadow: 3px 3px #080713; }
.requirement-card { overflow: auto; border-color: var(--game-violet); background: linear-gradient(135deg, #1b1733, #111027); }
.requirement-card h2 { margin-bottom: .55rem; font-size: clamp(1.25rem, 2vw, 1.8rem); }
#requirement-narrative { color: var(--game-text); line-height: 1.45; }
#requirement-detail { margin-top: .7rem; color: var(--game-amber); font-size: .86rem; }
.capability-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.capability, .criterion { display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .55rem; border: 1px solid #50d5ff55; border-radius: 2px; background: #30294e; font-weight: 900; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.controls button { min-height: 40px; padding: .5rem .6rem; font-size: .8rem; }
.ticker { display: flex; min-height: 46px; align-items: center; overflow: hidden; border-top: 2px solid var(--game-red); background: #05040d; }
.ticker-label { position: relative; z-index: 2; flex: 0 0 auto; align-self: stretch; display: grid; place-items: center; padding: 0 1rem; color: #0d0b1f; background: var(--game-red); box-shadow: 4px 0 #2b0912; font-weight: 1000; }
.ticker-track { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ticker p { display: inline-block; min-width: max-content; margin: 0; padding-left: 1rem; white-space: nowrap; animation: ticker 18s linear infinite; }
dialog { width: min(480px, calc(100% - 2rem)); color: var(--game-text); border: 1px solid #514868; border-radius: 12px; background: var(--game-panel); }
dialog::backdrop { background: #05040dcc; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.player { padding-bottom: 86px; }
.player-header { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; background: #0d0b1ff2; border-bottom: 1px solid #393052; }
.player-header strong { display: block; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection { color: var(--game-green); font-size: .72rem; }
.player-metrics { display: flex; gap: .5rem; }
.player-metrics span { padding: .35rem .45rem; border-radius: 5px; background: #2b2545; font-weight: 800; }
.player-shell { width: min(1180px, 100%); margin: auto; padding: 1rem; }
.join-form { width: min(480px, 100%); margin: 3rem auto; padding: 1.25rem; }
.join-form form { display: grid; gap: 1rem; }
.situation-card { padding: 1.2rem; border-left: 6px solid var(--game-amber); }
.criteria { display: flex; flex-wrap: wrap; gap: .5rem; }
.personal-criteria { margin-bottom: .75rem; padding: .65rem .75rem; border-left: 4px solid var(--game-violet); background: #151229; }
.personal-criteria p { margin: .25rem 0 0; color: var(--game-muted); }
.criterion.ready { color: #08291c; background: var(--game-green); }
.criterion.missing { color: #31070c; background: var(--game-red); }
.goal-status { margin: .75rem 0 0; padding: .55rem .65rem; border-left: 4px solid var(--game-amber); background: #151229; font-weight: 800; }
.goal-status.met { color: var(--game-green); border-left-color: var(--game-green); background: #10251f; }
.goal-status.open { color: var(--game-amber); }
.player-columns { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr); gap: 1rem; margin-top: 1rem; }
.architecture-panel, .planner { padding: 1rem; }
.section-heading { display: flex; align-items: start; justify-content: space-between; }
.slot-list { display: grid; gap: .55rem; }
.slot-card { display: flex; align-items: center; gap: .8rem; padding: .7rem; border: 1px solid #393052; border-radius: 8px; background: #151229; }
.slot-card small, .action-card small { display: block; color: var(--game-muted); }
.slot-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--game-bg); background: var(--game-cyan); font-weight: 900; clip-path: polygon(0 0,100% 0,100% 75%,75% 75%,75% 100%,0 100%); }
.operations-team-card { border-color: var(--game-green); }
.architect-hint { margin: .25rem 0 .8rem; padding: .75rem .8rem; border: 1px solid #50d5ff55; border-left: 5px solid var(--game-cyan); background: linear-gradient(135deg, #132033, #151229); }
.architect-hint > p:not(.eyebrow) { margin: .25rem 0 .55rem; color: var(--game-muted); line-height: 1.4; }
.signal-list { display: grid; gap: .4rem; }
.signal-card { display: grid; gap: .2rem; padding: .55rem .65rem; border-left: 3px solid var(--game-red); background: #250f1a; }
.signal-card small { color: var(--game-muted); line-height: 1.35; }
.choice-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: .25rem 0 .8rem; }
.choice-dot { display: grid; min-height: 34px; place-items: center; color: var(--game-muted); border: 1px solid #514868; background: #151229; font: 900 .8rem ui-monospace, monospace; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.choice-dot.current { color: #0d0b1f; border-color: var(--game-amber); background: var(--game-amber); }
.choice-dot.complete { color: #08291c; border-color: var(--game-green); background: var(--game-green); }
.choice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.choice-heading span { color: var(--game-muted); font-size: .76rem; }
.action-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.action-card { position: relative; display: grid; align-content: start; gap: .45rem; min-height: 190px; padding: .9rem; overflow: hidden; text-align: left; color: var(--game-text); border: 2px solid #514868; background: linear-gradient(145deg, #30294e 0 55%, #17132c 55%); box-shadow: 5px 5px 0 #070510; clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,14px 100%,0 calc(100% - 14px)); scroll-snap-align: center; }
.action-card::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--game-violet); box-shadow: -12px 0 var(--game-cyan); }
.action-card.targeted { border-color: var(--game-green); background: radial-gradient(circle at 85% 15%, #63e6a633, transparent 32%), linear-gradient(145deg, #274b43 0 55%, #121f25 55%); }
.action-card.strategic { border-color: var(--game-cyan); background: radial-gradient(circle at 85% 15%, #50d5ff22, transparent 32%), linear-gradient(145deg, #243552 0 55%, #12192c 55%); }
.action-card.selected { outline: 3px solid var(--game-amber); outline-offset: -6px; transform: translateY(-2px); }
.action-card.unaffordable { filter: grayscale(.7); }
.plan-kind { color: var(--game-cyan); font-size: .68rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.plan-name { padding-right: 1rem; line-height: 1.25; }
.goal-fit { justify-self: start; padding: .25rem .45rem; font-size: .68rem; font-weight: 1000; }
.goal-fit.match { color: #08291c; background: var(--game-green); }
.goal-fit.neutral { color: var(--game-muted); border: 1px dashed #665b83; }
.plan-cost { color: var(--game-amber) !important; }
.plan-tradeoffs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .15rem; }
.tradeoff-column { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .45rem; border: 1px solid #514868; background: #100e20cc; }
.tradeoff-column > strong { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.tradeoff-column > small { position: relative; padding-left: .8rem; color: #d7d0e9; line-height: 1.3; }
.tradeoff-column > small::before { position: absolute; left: 0; content: "•"; }
.tradeoff-column.upside { border-color: #63e6a655; }
.tradeoff-column.upside > strong, .tradeoff-column.upside > small::before { color: var(--game-green); }
.tradeoff-column.downside { border-color: #ffc65c55; }
.tradeoff-column.downside > strong, .tradeoff-column.downside > small::before { color: var(--game-amber); }
.choice-insight { min-height: 66px; margin-top: .7rem; padding: .75rem .85rem; color: var(--game-muted); border-left: 5px solid #514868; background: #121023; clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); }
.choice-insight { min-height: 66px; margin-top: .7rem; padding: .75rem .85rem; color: var(--game-muted); border-left: 5px solid #514868; background: #121023; clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); }
.choice-insight p { margin: .25rem 0 0; }
.choice-insight.target-match { color: var(--game-text); border-left-color: var(--game-green); background: #10251f; }
.choice-insight.target-neutral { border-left-color: var(--game-amber); }
.confirm-choice { width: 100%; margin-top: .65rem; background: var(--game-amber); box-shadow: 0 4px 0 #9b6f19; }
.queue { display: grid; gap: .4rem; margin: .8rem 0; counter-reset: saved-choice; }
.queue-item { counter-increment: saved-choice; position: relative; padding: .65rem .7rem .65rem 2.2rem; color: var(--game-text); border-left: 4px solid var(--game-green); background: linear-gradient(90deg, #15352c, #151229); }
.queue-item::before { content: "✓"; position: absolute; left: .7rem; color: var(--game-green); font-weight: 1000; }
.choice-complete-message { margin: 0; padding: 1rem; color: var(--game-green); border: 1px solid #63e6a655; background: #10251f; }
fieldset { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 1rem; border: 1px solid #393052; border-radius: 8px; }
.commit-tray { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .7rem; padding: .75rem; background: #0d0b1ff5; border-top: 1px solid #514868; }
.commit-tray button { width: min(320px, 65vw); }
.commit-tray .secondary { width: auto; }
.is-paused .team-floor, .is-paused .work-pulse { animation-play-state: paused; opacity: .58; }
@keyframes team-live { 0%, 100% { transform: translateY(0); filter: brightness(.96) drop-shadow(0 -8px 14px #05040dcc); } 50% { transform: translateY(-2px); filter: brightness(1.06) drop-shadow(0 -8px 18px #50d5ff33); } }
@keyframes work-pulse { 0%, 45% { opacity: .25; transform: scale(.8); } 50%, 100% { opacity: 1; transform: scale(1.2); } }
@keyframes event-scan { 0%, 100% { filter: brightness(.96); } 50% { filter: brightness(1.08) saturate(1.08); } }
@keyframes hud-glow { 50% { box-shadow: 0 0 0 2px #50d5ff22, 7px 7px 0 #070510cc; } }
@keyframes ticker { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.resolution-board { max-height: 38vh; overflow: auto; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #514868; }
.resolution-events { display: grid; gap: .35rem; margin: .4rem 0 .8rem; padding-left: 1.2rem; color: var(--game-cyan); font-size: .85rem; }
.top-choice-list { display: grid; gap: .45rem; margin: .5rem 0; padding: 0; list-style: none; }
.top-choice { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .65rem; align-items: center; min-height: 48px; padding: .45rem .7rem .45rem .4rem; background: linear-gradient(90deg, #30294eee, #151229cc); clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); }
.top-choice-rank { display: grid; width: 34px; height: 34px; place-items: center; color: #0d0b1f; background: var(--game-amber); font: 1000 1rem ui-monospace, monospace; clip-path: polygon(50% 0,100% 28%,88% 88%,50% 100%,12% 88%,0 28%); }
.top-choice-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-choice-count { color: var(--game-green); font-weight: 900; }
.annual-city { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .8rem; }
.company-miniature { position: relative; display: grid; gap: .25rem; min-width: 0; text-align: center; font-size: .68rem; }
.company-tower { width: min(100%, 96px); height: 112px; margin: auto; object-fit: cover; object-position: center 72%; image-rendering: pixelated; filter: drop-shadow(0 0 8px #50d5ff44); }
.company-miniature.strained .company-tower { filter: sepia(.3) saturate(.8) drop-shadow(0 0 8px #ffc65c55); }
.company-miniature.crisis .company-tower { filter: hue-rotate(325deg) saturate(.8) brightness(.78); transform: rotate(-1deg); }
.company-miniature.excellent .company-tower { filter: brightness(1.18) saturate(1.2) drop-shadow(0 0 12px #63e6a688); }
.investor-sign { position: absolute; left: 8%; right: 8%; top: 40%; z-index: 2; color: #0d0b1f; background: var(--game-red); font-size: .52rem; font-weight: 1000; }
.health-drawer { padding: .8rem 1rem; max-height: 26vh; overflow: auto; }
.health-drawer summary { cursor: pointer; color: var(--game-cyan); font-weight: 900; }
.health-drawer ul { display: grid; gap: .45rem; padding: 0; list-style: none; }
.health-drawer li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.health-online { color: var(--game-green); }
.health-offline { color: var(--game-amber); }
.recovery-button { min-height: 34px; padding: .3rem .55rem; font-size: .72rem; }
.preview-summary { min-height: 48px; padding: .7rem; color: var(--game-cyan); border: 1px dashed #514868; border-radius: 8px; }
[data-broadcast-view="newsroom"] .broadcast-copy { border-left-color: var(--game-red); }
.turn-summary { margin-top: 1rem; padding: 1rem; border-left: 6px solid var(--game-green); }
.recovery-panel { margin-top: 1rem; color: var(--game-muted); }
.recovery-panel form { display: grid; gap: .7rem; padding-top: .7rem; }
@media (max-width: 760px) {
  .landing { padding: 1rem; }
  .landing-grid, .player-columns { grid-template-columns: 1fr; }
  .player-shell { padding: .65rem; }
  .player-header { align-items: flex-start; }
  .player-metrics { font-size: .78rem; }
  .situation-card h1 { font-size: 1.35rem; }
  .planner { overflow: hidden; }
  .action-catalog { grid-auto-flow: column; grid-auto-columns: minmax(84%, 1fr); grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: .25rem .25rem .75rem; }
  .action-card { min-height: 310px; }
  .plan-tradeoffs { grid-template-columns: 1fr; }
  .choice-heading span { max-width: 45%; text-align: right; }
  .commit-tray { justify-content: stretch; }
  .commit-tray button { width: 100%; }
  .commit-tray .secondary { width: 84px; flex: 0 0 84px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}