/* ════════════════════════════════════════════════════════════
   FETİH — Imperial Strategy · Single dark theme
   Layout: sticky topbar + three-column game view
   ════════════════════════════════════════════════════════════ */

:root {
  /* Palette — Ottoman imperial dark */
  --bg:        #07091a;
  --bg2:       #0c1226;
  --surface:   #111930;
  --surf2:     #162040;
  --border:    #1e2f52;
  --border2:   #2d4478;
  --text:      #ddd8c4;
  --muted:     #6878a0;
  --faint:     #2d3f60;

  --gold:      #c9a030;
  --gold-l:    #e2b840;
  --gold-d:    #7a6018;
  --crimson:   #e03848;
  --crimson-bg:#1a060c;
  --emerald:   #25c47a;
  --sapph:     #4a80ff;

  /* Compat aliases (used by inline styles in app.js) */
  --line:      #1e2f52;
  --accent:    #c9a030;
  --accent2:   #25c47a;
  --warn:      #c9a030;
  --danger:    #e03848;

  /* Typography */
  --f-display: 'Cinzel', 'Times New Roman', serif;
  --f-ui:      'DM Sans', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Geometry */
  --r:    10px;
  --r-lg: 18px;
  --shadow: 0 24px 64px #00000090;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--f-ui); font-size: 14px; line-height: 1.5;
}
.hidden { display: none !important; }
.mono   { font-family: var(--f-mono); letter-spacing: .05em; }
.mt-12  { margin-top: 12px; }
.screen { min-height: 100%; }

/* ════════════════════════════════════════════════════════════
   LOBBY
   ════════════════════════════════════════════════════════════ */
#screen-lobby {
  position: relative;
  display: grid; place-items: center;
  min-height: 100vh; padding: 24px;
  overflow: hidden;
}

.lobby-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 130% 80% at 10% 0%,  #1b2c6b28, transparent),
    radial-gradient(ellipse 110% 70% at 90% 100%, #0d3d2818, transparent),
    var(--bg);
}
.lobby-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--faint) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .18;
}

.lobby-card {
  position: relative; z-index: 1;
  width: min(430px, 100%);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px 24px;
  box-shadow: var(--shadow), inset 0 1px 0 #c9a03015;
}

/* — Lobby header / emblem — */
.lobby-header {
  text-align: center;
  margin-bottom: 28px;
}
.lobby-crest {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  font-size: 34px;
  border: 1.5px dashed var(--gold-d);
  border-radius: 50%;
  color: var(--gold);
  margin-bottom: 18px;
  animation: crest-glow 4s ease-in-out infinite;
}
@keyframes crest-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--gold-d); }
  50%       { box-shadow: 0 0 28px 4px #c9a03028; border-color: var(--gold); }
}
.game-title {
  margin: 0 0 8px;
  font-family: var(--f-display); font-size: 34px; font-weight: 900;
  letter-spacing: .35em;
  color: var(--gold);
  text-shadow: 0 2px 40px #c9a03050;
}
.game-sub {
  margin: 0;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* — Form elements — */
.field-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 7px;
}
label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin: 14px 0 6px;
}
input {
  width: 100%; padding: 11px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  font: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  border-color: var(--gold-d);
  box-shadow: 0 0 0 3px #c9a03020;
}
input::placeholder { color: var(--faint); }

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--border); border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  background: var(--surface); color: var(--text);
  transition: .15s transform, .15s background, .15s border-color, .15s box-shadow;
  white-space: nowrap; text-decoration: none;
}
.btn:hover:not(:disabled) {
  background: var(--surf2); border-color: var(--border2);
  transform: translateY(-1px); box-shadow: 0 4px 16px #00000050;
}
.btn:active:not(:disabled) { transform: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn.primary {
  background: linear-gradient(135deg, #9a7a18, var(--gold));
  border-color: var(--gold-d);
  color: #06040a;
  font-family: var(--f-display); letter-spacing: .08em;
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #b08a20, var(--gold-l));
  box-shadow: 0 4px 24px #c9a03045;
}
.btn.ghost {
  background: transparent; border-color: var(--border); color: var(--muted);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--surface); color: var(--text);
}
.btn.danger {
  background: var(--crimson-bg); border-color: #3a1020; color: #ff8090;
}
.btn.danger:hover:not(:disabled) {
  background: #250810; box-shadow: 0 4px 16px #e0384830;
}
.btn.small  { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn.wide   { width: 100%; }
.icon-btn   { padding: 10px 14px; font-size: 18px; }

/* — Lobby layout — */
.btn-row { display: flex; gap: 10px; }

.divider-label {
  display: flex; align-items: center; gap: 10px;
  text-align: center;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0;
}
.divider-label::before,
.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.join-row { display: flex; gap: 10px; }
.join-code-input {
  text-align: center; text-transform: uppercase;
  font-size: 16px; font-weight: 700; letter-spacing: .22em;
}

.room-list {
  display: grid; gap: 6px;
  max-height: 196px; overflow-y: auto;
  margin-top: 16px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.room-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; font-size: 13px;
  transition: .12s border-color, .12s background;
}
.room-item:hover { border-color: var(--gold-d); background: var(--surf2); }

.err         { color: var(--crimson); min-height: 18px; font-size: 12px; margin: 8px 0 0; }
.hint        { color: var(--muted); font-size: 12px; line-height: 1.5; }
.lobby-hint  { margin-top: 18px; text-align: center; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; background: var(--surface);
  color: var(--muted); border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════
   GAME SCREEN
   ════════════════════════════════════════════════════════════ */
#screen-game { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* — Topbar — */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 52px; flex: 0 0 52px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.topbar-brand {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.brand-icon {
  font-size: 17px; color: var(--gold);
}
.brand-name {
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  letter-spacing: .22em; color: var(--gold);
  text-shadow: 0 0 24px #c9a03040;
}
.room-code-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); letter-spacing: .12em;
}

.topbar-mid { flex: 1; display: flex; justify-content: center; }
.badge {
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--emerald);
}

.topbar-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.stats { display: flex; align-items: center; gap: 10px; }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stat-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); line-height: 1;
}
.stat-val { font-size: 14px; font-weight: 600; color: var(--gold); line-height: 1.2; }
.stat-sep { width: 1px; height: 28px; background: var(--border); }
.top-actions { display: flex; gap: 7px; }

/* — Three-column layout — */
.main {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 252px 1fr 268px;
  overflow: hidden;
}

/* — Panels — */
.panel {
  display: flex; flex-direction: column;
  background: var(--bg2); overflow: hidden;
}
.panel.left  { border-right: 1px solid var(--border); overflow-y: auto; }
.panel.right { border-left:  1px solid var(--border); }

.panel-section {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
}
.panel-section:last-child { border-bottom: 0; }
.panel-section-grow { flex: 1; min-height: 0; overflow-y: auto; }

.section-hd {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-display); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.sh-icon { font-size: 12px; }

/* — Player list — */
#player-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
}
#player-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 12px; line-height: 1.4;
  border-left: 3px solid var(--border);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* — Selection / action — */
.sel-info {
  font-size: 13px; line-height: 1.65; color: var(--muted); margin-bottom: 10px;
}
.sel-info b { color: var(--text); font-weight: 600; }

.action-box { display: grid; gap: 8px; }
.action-box input[type=number] { padding: 8px 10px; }
.action-box .btn { width: 100%; }

.alliance-box { font-size: 13px; }

/* — Map — */
.map-wrap {
  position: relative;
  background: #05080f;
  overflow: hidden;
}
.map-wrap::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at 25% 20%, #0f1e4840, transparent 55%),
    radial-gradient(ellipse at 80% 85%, #0d2e1828, transparent 55%);
}

#map { width: 100%; height: 100%; display: block; cursor: grab; }
#map:active { cursor: grabbing; }

.country {
  stroke: #05080f; stroke-width: .5;
  transition: fill .22s;
}
.country:hover         { stroke: #ffffff70; stroke-width: 1; }
.country.selected      { stroke: #fff; stroke-width: 1.8; filter: brightness(1.15); }
.country.neighbor-hl   { stroke: var(--gold); stroke-width: 1.5; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 8;
  background: #0b1022f0; border: 1px solid var(--border2);
  border-radius: 10px; padding: 9px 13px;
  font-size: 12px; line-height: 1.55;
  box-shadow: 0 8px 32px #00000070; max-width: 220px;
}

.march-banner {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  background: #0f0818ee; border: 1px solid #5040aa;
  padding: 8px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #c8b8ff;
  z-index: 5;
  animation: banner-drop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes banner-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.map-hint {
  position: absolute; bottom: 10px; right: 12px; z-index: 2;
  font-size: 11px; color: var(--faint); letter-spacing: .06em;
  pointer-events: none;
}

/* — Right panel chat/events — */
.panel-chat {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.panel-chat #chat-log {
  flex: 1; min-height: 0; overflow-y: auto;
}

#chat-log {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px;
  font-size: 12px; line-height: 1.55;
  margin-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#event-log {
  max-height: 160px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px;
  font-size: 12px; line-height: 1.6; color: var(--muted);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#event-log > div { padding: 1px 0; }

#chat-form { display: flex; gap: 6px; }
#chat-form input { flex: 1; padding: 8px 10px; font-size: 12px; }

.chat-line { margin-bottom: 5px; word-break: break-word; }
.chat-line b { font-weight: 700; }

.panel-events { flex: 0 0 auto; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  #screen-game { height: auto; overflow: visible; }
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }
  .panel.left, .panel.right {
    border: 0; border-bottom: 1px solid var(--border);
    max-height: 240px; overflow-y: auto;
  }
  .panel-section-grow { flex: none; }
  .panel-chat { flex: none; }
  .panel-chat #chat-log { flex: none; min-height: 120px; }
  .map-wrap { min-height: 55vw; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .topbar-mid { order: 3; width: 100%; justify-content: flex-start; }
  .stats { gap: 8px; }
  .stat-lbl { display: none; }
}