:root {
  --bg: #090f1b;
  --panel: #111b2c;
  --panel-soft: #162238;
  --line: #2b3a55;
  --text: #edf2ff;
  --muted: #8f9bb6;
  --gold: #f1b85b;
  --cyan: #68d8dc;
  --danger: #ef7770;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .14; background-image: radial-gradient(#fff 0.5px, transparent .5px); background-size: 6px 6px; mix-blend-mode: soft-light; }
.screen { min-height: 100vh; position: relative; }
.lobby-screen { padding: 36px clamp(18px, 6vw, 100px); background: radial-gradient(circle at 12% 25%, #19375c 0, transparent 33%), radial-gradient(circle at 82% 90%, #342448 0, transparent 31%), linear-gradient(135deg, #081321, #0d1425 52%, #170f21); }
.brand-mark { position: absolute; top: 34px; left: clamp(20px, 6vw, 100px); display: flex; gap: 3px; color: var(--gold); font-weight: 900; letter-spacing: -4px; font-size: 22px; }
.brand-mark span:nth-child(2) { color: var(--cyan); }.brand-mark span:nth-child(3) { color: #cf83d7; }
.lobby-grid { max-width: 1260px; min-height: calc(100vh - 72px); margin: auto; display: grid; grid-template-columns: 1fr minmax(390px, 510px); gap: clamp(45px, 8vw, 130px); align-items: center; }
.intro-panel { padding-top: 20px; }.eyebrow, .panel-kicker { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 2.3px; }
h1 { margin: 18px 0 22px; line-height: .88; font-size: clamp(58px, 8.5vw, 112px); letter-spacing: -6px; font-weight: 900; text-shadow: 7px 7px 0 #1a253c; }
h1 em { color: var(--cyan); font-style: normal; font-size: .64em; letter-spacing: -3px; }.intro-copy { max-width: 460px; color: #b7c4dd; font-size: 18px; line-height: 1.55; }
.feature-list { margin-top: 48px; border-top: 1px solid #2d3b56; max-width: 500px; }.feature-list div { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid #202e46; color: #cbd6e9; }.feature-list b { color: var(--gold); font-size: 11px; letter-spacing: 1px; }.feature-list span { font-size: 14px; }
.setup-card { padding: 30px; border: 1px solid #354666; background: rgba(17, 27, 44, .94); box-shadow: 20px 20px 0 rgba(4, 8, 17, .35), inset 0 1px 0 rgba(255,255,255,.04); }.card-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }.card-heading h2 { margin: 8px 0 0; font-size: 29px; }.version { color: var(--cyan); border: 1px solid #32646b; padding: 6px 8px; font-size: 9px; letter-spacing: 1px; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin: 26px 0 22px; background: #0b1424; }.mode-tab { border: 0; background: transparent; color: var(--muted); padding: 12px 8px; font-size: 12px; font-weight: 800; }.mode-tab.active { background: #273753; color: var(--text); }
label { display: block; color: #c8d4e8; font-size: 12px; font-weight: 700; margin-bottom: 14px; } label input { display: block; width: 100%; margin-top: 7px; border: 1px solid #354766; background: #0b1526; color: var(--text); padding: 12px 13px; outline: none; border-radius: 0; } label input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(104,216,220,.12); }
.label-line { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 10px; color: #c8d4e8; font-size: 12px; font-weight: 700; }.label-line small { color: var(--muted); font-weight: 400; font-size: 10px; }
.race-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }.race-card { min-width: 0; padding: 9px 4px 10px; border: 1px solid #2b3d5b; background: #101c30; color: var(--muted); }.race-card.selected { border-color: var(--gold); background: #24324b; color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }.race-icon { display: block; font-size: 22px; height: 26px; line-height: 26px; }.race-card strong, .race-card small { display: block; }.race-card strong { font-size: 11px; margin-top: 5px; }.race-card small { font-size: 9px; margin-top: 3px; color: #8495b5; }.human-icon { color: var(--gold); }.elf-icon { color: #70dfa9; }.orc-icon { color: #eb7770; }.dwarf-icon { color: #83a9f0; }.undead-icon { color: #c28ce7; }
.form-error { min-height: 18px; color: var(--danger); font-size: 11px; margin: 13px 0 0; }.primary-button { display: flex; justify-content: space-between; width: 100%; padding: 15px 17px; border: 0; background: var(--gold); color: #161b25; font-weight: 900; letter-spacing: .5px; }.primary-button:hover { background: #ffd276; }.setup-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; color: #72829e; font-size: 9px; }
.game-screen { background: #0a111f; }.game-header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid #273753; background: #0d1728; }.game-brand, .profile-row { display: flex; align-items: center; gap: 11px; }.mini-mark { padding: 9px 7px; background: linear-gradient(135deg, var(--gold), #cb6c69); color: #121827; font-size: 11px; font-weight: 900; letter-spacing: -1px; }.game-brand strong, .game-brand small { display: block; }.game-brand strong { font-size: 13px; letter-spacing: 1px; }.game-brand small { color: var(--muted); font-size: 8px; letter-spacing: 2px; margin-top: 4px; }.world-status { display: flex; align-items: center; gap: 9px; color: #aab8d0; font-size: 10px; letter-spacing: 1px; }.world-status b { color: var(--gold); }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #66dfa1; box-shadow: 0 0 10px #66dfa1; }.divider { height: 15px; width: 1px; background: var(--line); }.room-chip { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }.room-chip strong { color: var(--cyan); font-size: 14px; letter-spacing: 2px; }.room-chip button { border: 1px solid #38516f; background: #14223a; color: var(--cyan); padding: 5px 7px; }
.game-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr) 235px; gap: 12px; max-width: 1600px; margin: 0 auto; padding: 16px; min-height: calc(100vh - 72px); }.left-rail, .right-rail { display: flex; flex-direction: column; gap: 12px; }.panel-block { padding: 15px; border: 1px solid #263752; background: #101a2c; }.panel-title { color: #c1cce0; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; margin-bottom: 13px; }.panel-title span { float: right; color: var(--cyan); }.profile-block { border-top: 2px solid var(--gold); }.profile-icon { width: 37px; height: 37px; display: grid; place-items: center; background: #253955; color: var(--gold); font-size: 19px; }.profile-row strong, .profile-row small { display: block; }.profile-row strong { font-size: 14px; }.profile-row small { margin-top: 4px; color: var(--gold); font-size: 10px; }.stat-line { border-top: 1px solid #263752; margin-top: 14px; padding-top: 12px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.stat-line b { color: var(--text); }.speed-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }.speed-buttons button { border: 1px solid #304563; background: #14223a; color: var(--muted); padding: 8px 2px; font-size: 11px; }.speed-buttons button.selected { background: #31455f; color: var(--gold); border-color: var(--gold); }.hint { display: block; color: #6d7e9e; font-size: 9px; margin-top: 10px; }.legend-item { display: flex; align-items: center; gap: 8px; color: #9dabc3; font-size: 10px; margin: 9px 0; }.legend-swatch { width: 11px; height: 11px; display: block; }.grass { background: #6caa6b; }.forest { background: #2d705f; }.stone { background: #8791a1; }.water { background: #295c86; }.settlement { background: var(--gold); border: 2px solid #ffe8aa; }.objective { margin-top: auto; border-left: 2px solid var(--cyan); }.objective p { color: #9dabc3; font-size: 11px; line-height: 1.5; margin: 0; }
.world-panel { min-width: 0; display: flex; flex-direction: column; background: #0d1728; border: 1px solid #263752; }.world-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; padding: 16px 19px; border-bottom: 1px solid #263752; }.world-toolbar h2 { margin: 6px 0 0; font-size: 21px; }.toolbar-help { color: var(--muted); font-size: 10px; }.canvas-wrap { position: relative; flex: 1; min-height: 400px; padding: 10px; background: #070d18; }.canvas-wrap canvas { width: 100%; height: 100%; min-height: 400px; display: block; image-rendering: pixelated; cursor: crosshair; }.canvas-message { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; pointer-events: none; }.canvas-message.ready { display: none; }
.players-block { flex: 0 0 auto; }.player-list { display: flex; flex-direction: column; gap: 8px; }.player-row { display: flex; align-items: center; gap: 8px; min-width: 0; }.player-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }.player-row div:last-child { min-width: 0; }.player-row strong, .player-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.player-row strong { font-size: 11px; }.player-row small { color: var(--muted); font-size: 9px; margin-top: 2px; }.host-badge { color: var(--gold); font-size: 9px; margin-left: 3px; }.chat-block { display: flex; flex-direction: column; min-height: 260px; flex: 1; }.chat-list { overflow-y: auto; flex: 1; min-height: 100px; padding-right: 3px; }.chat-line { margin: 0 0 9px; color: #aab8d0; font-size: 10px; line-height: 1.35; word-break: break-word; }.chat-line strong { color: var(--cyan); }.chat-line.system { color: #687895; font-style: italic; }.chat-form { display: flex; gap: 4px; margin-top: 10px; }.chat-form input { min-width: 0; flex: 1; border: 1px solid #304563; background: #0b1526; color: var(--text); padding: 9px; font-size: 10px; }.chat-form button { border: 0; background: var(--cyan); color: #12202c; width: 33px; }.leave-button { border: 1px solid #633b48; background: transparent; color: #d58183; padding: 11px; font-size: 10px; }.leave-button:hover { background: #271725; }.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); padding: 11px 15px; background: #283a56; color: var(--text); border: 1px solid #4b6589; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; z-index: 10; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1000px) { .lobby-grid { grid-template-columns: 1fr; max-width: 590px; padding: 80px 0 35px; }.intro-panel { text-align: center; }.intro-copy { margin-left: auto; margin-right: auto; }.feature-list { margin-left: auto; margin-right: auto; text-align: left; }.game-layout { grid-template-columns: 180px minmax(0, 1fr); }.right-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; align-items: stretch; }.chat-block { min-height: 180px; }.leave-button { align-self: end; } }

.settlement-block { border-left: 2px solid var(--gold); }.settlement-block > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.settlement-level { color: var(--cyan); font-size: 9px; margin-top: 5px; }.stock-grid { display: grid; gap: 6px; border-top: 1px solid #263752; margin-top: 12px; padding-top: 10px; color: var(--muted); font-size: 9px; }.stock-grid span { display: flex; justify-content: space-between; }.stock-grid b { color: var(--text); }.job-status { color: #8292ad; font-size: 9px; line-height: 1.45; margin-top: 11px; }.farm { background: #d9b25c; }
.toolbar-side { display: flex; align-items: center; gap: 12px; }.toolbar-help small { color: #73839e; font-size: 9px; }.map-controls { display: flex; align-items: center; gap: 3px; }.map-controls button { border: 1px solid #38516f; background: #14223a; color: var(--cyan); min-width: 28px; height: 27px; }.map-controls span { min-width: 42px; text-align: center; color: var(--gold); font-size: 10px; }.command-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.command-buttons button, .attack-button { border: 1px solid #38516f; background: #14223a; color: #cbd6e9; padding: 8px 4px; font-size: 10px; }.command-buttons button:hover { border-color: var(--cyan); color: var(--cyan); }.target-label { margin-top: 12px; margin-bottom: 0; font-size: 10px; }.target-label select { width: 100%; margin-top: 6px; border: 1px solid #354766; background: #0b1526; color: var(--text); padding: 8px 5px; font-size: 9px; }.attack-button { width: 100%; margin-top: 8px; background: #3a1f36; border-color: #814c78; color: #f09ddd; }.attack-button:hover { background: #542748; }.kingdom-list, .event-list { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }.kingdom-row { display: flex; align-items: center; gap: 8px; min-width: 0; }.kingdom-row.mine { border-left: 2px solid var(--gold); padding-left: 5px; }.kingdom-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 7px currentColor; }.kingdom-row div { min-width: 0; }.kingdom-row strong, .kingdom-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.kingdom-row strong { font-size: 10px; }.kingdom-row small { color: var(--muted); font-size: 8px; margin-top: 2px; }.event-item { padding: 7px 7px 7px 9px; border-left: 2px solid #596b87; background: #0d1728; }.event-item strong, .event-item small { display: block; }.event-item strong { color: #e6c77c; font-size: 9px; }.event-item small { color: #9aaac3; font-size: 8px; line-height: 1.35; margin-top: 3px; }.event-battle { border-color: #e780d4; }.event-undead_horde, .event-mutant_invasion { border-color: #d85ed3; }.event-meteor, .event-hell_continent { border-color: #ef7770; }.villager { background: #f6d67a; border-radius: 50%; }
@media (max-width: 680px) { .setup-card { padding: 20px; }.race-grid { grid-template-columns: repeat(3, 1fr); }.race-card:last-child { grid-column: span 1; }.setup-foot { flex-direction: column; }.game-header { padding: 0 12px; }.world-status { display: none; }.game-layout { grid-template-columns: 1fr; padding: 8px; }.left-rail { display: grid; grid-template-columns: 1fr 1fr; }.objective, .legend-block { display: none; }.world-panel { grid-row: 1; }.canvas-wrap, .canvas-wrap canvas { min-height: 350px; }.right-rail { grid-column: auto; display: flex; }.players-block { order: 0; }.chat-block { min-height: 220px; }.room-chip { gap: 4px; }.room-chip strong { font-size: 11px; } }
.soldier { background: #ef7770; border-radius: 2px; }
.event-invasion_battle { border-color: #d85ed3; }
.minimap-panel { position: absolute; right: 20px; bottom: 20px; z-index: 3; width: 190px; padding: 7px; border: 1px solid #607492; background: rgba(8, 15, 28, .92); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.minimap-panel > span { display: block; margin: 0 0 5px 2px; color: #c8d4e8; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.minimap-panel canvas { width: 176px !important; height: 106px !important; min-height: 0 !important; border: 1px solid #304563; cursor: crosshair; image-rendering: pixelated; }
@media (max-width: 680px) { .minimap-panel { right: 12px; bottom: 12px; width: 138px; padding: 5px; }.minimap-panel canvas { width: 126px !important; height: 76px !important; } }
.structure { background: #68d8dc; border-radius: 2px; }