:root {
    --parchment:#f2e8c9; --parchment-dark:#e0d0a0;
    --gold:#c8960a; --gold-light:#e8b820;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:#0f0a04; font-family:Georgia,'Times New Roman',serif; color:var(--parchment); height:100vh; overflow:hidden; display:flex; flex-direction:column; }

  #header { background:linear-gradient(135deg,#1a0a02,#2d1206,#1a0a02); border-bottom:2px solid var(--gold); padding:5px 14px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
  #header h1 { font-family:Georgia,'Times New Roman',serif; font-size:20px; font-weight:900; letter-spacing:.15em; color:var(--gold-light); text-shadow:0 0 20px rgba(200,150,10,.5); }
  #phase-banner { flex:1; text-align:center; font-family:Georgia,'Times New Roman',serif; font-size:12px; letter-spacing:.08em; color:var(--parchment-dark); }
  #phase-banner span { color:var(--gold-light); font-weight:700; }
  #turn-armies { font-family:'Courier New',monospace; font-size:12px; color:var(--parchment-dark); }
  #turn-armies span { color:var(--gold-light); font-size:15px; font-weight:700; }

  #main { flex:1; display:flex; overflow:hidden; }

  #left-panel { width:165px; flex-shrink:0; background:linear-gradient(180deg,#1a0c04,#120802); border-right:1px solid rgba(200,150,10,.3); display:flex; flex-direction:column; overflow:hidden; }
  .panel-title { font-family:Georgia,'Times New Roman',serif; font-size:9px; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; padding:7px 10px 3px; border-bottom:1px solid rgba(200,150,10,.2); }
  #players-list { flex:1; overflow-y:auto; padding:5px; }
  .player-card { border-radius:3px; padding:5px 7px; margin-bottom:3px; border:1px solid transparent; transition:all .2s; }
  .player-card.active { border-color:var(--gold); background:rgba(200,150,10,.1); box-shadow:0 0 8px rgba(200,150,10,.2); }
  .player-card.eliminated { opacity:.35; }
  .player-name-row { display:flex; align-items:center; gap:5px; margin-bottom:2px; }
  .player-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.3); }
  .player-name { font-family:Georgia,'Times New Roman',serif; font-size:10px; font-weight:700; }
  .player-stats { font-family:'Courier New',monospace; font-size:8px; color:var(--parchment-dark); display:flex; gap:6px; padding-left:14px; }
  .player-stats .stat { display:flex; flex-direction:column; align-items:center; }
  .player-stats .stat-val { color:var(--gold-light); font-size:10px; }
  .player-stats .stat-lbl { color:#888; font-size:7px; }
  #continent-bonuses { border-top:1px solid rgba(200,150,10,.2); padding:5px; }
  .cont-row { display:flex; justify-content:space-between; padding:1px 3px; font-size:9px; }
  .cont-name { font-family:Georgia,'Times New Roman',serif; font-size:8px; }
  .cont-bonus { font-family:'Courier New',monospace; color:var(--gold-light); font-size:9px; }

  #map-container { flex:1; position:relative; overflow:hidden; background:#1a3040; }
  #map-svg { position:absolute; top:0; left:0; width:100%; height:100%; }

  /* Territory overlay circles — invisible click targets with army markers */
  .t-hit { cursor:pointer; fill:transparent; stroke:none; }
  .t-hit:hover ~ .t-ring { display:block; }

  .t-ring { pointer-events:none; fill:none; stroke:rgba(255,255,255,0.5); stroke-width:1.5; }
  .t-ring.selected { stroke:#f8e060; stroke-width:3; display:block; }
  .t-ring.atk-source { stroke:#f8e060; stroke-width:3; display:block; }
  .t-ring.atk-target { stroke:#ff4444; stroke-width:2.5; display:block; animation:pulsered .7s ease-in-out infinite alternate; }
  .t-ring.attack-selected { stroke:#ffcc33; stroke-width:5; display:block; filter:drop-shadow(0 0 5px #ff5533); }
  .t-ring.fort-target { stroke:#44ff88; stroke-width:2.5; display:block; animation:pulsegreen .7s ease-in-out infinite alternate; }
  @keyframes pulsered { to { stroke-width:4px; } }
  @keyframes pulsegreen { to { stroke-width:4px; } }

  .army-bg { pointer-events:none; }
  .army-txt { font-family:'Courier New',monospace; font-size:11px; font-weight:700; fill:#fff; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
  .wrap-line { stroke:rgba(255,220,80,.7); stroke-width:1.5; stroke-dasharray:6,4; pointer-events:none; }

  #right-panel { width:210px; flex-shrink:0; background:linear-gradient(180deg,#1a0c04,#120802); border-left:1px solid rgba(200,150,10,.3); display:flex; flex-direction:column; }
  #selected-info { padding:7px 9px; min-height:56px; flex-shrink:0; border-bottom:1px solid rgba(200,150,10,.2); }
  .sel-name { font-family:Georgia,'Times New Roman',serif; font-size:12px; color:var(--gold-light); margin-bottom:2px; }
  .sel-detail { font-size:10px; color:var(--parchment-dark); line-height:1.5; }
  #action-area { padding:8px 9px; border-bottom:1px solid rgba(200,150,10,.2); flex-shrink:0; }
  .btn { width:100%; padding:7px; font-family:Georgia,'Times New Roman',serif; font-size:10px; letter-spacing:.08em; border:1px solid var(--gold); background:linear-gradient(135deg,#2a1506,#1a0a02); color:var(--gold-light); cursor:pointer; border-radius:3px; margin-bottom:5px; transition:all .15s; text-transform:uppercase; }
  .btn:hover:not(:disabled) { background:linear-gradient(135deg,#3a2010,#2a1206); box-shadow:0 0 8px rgba(200,150,10,.3); }
  .btn:disabled { opacity:.3; cursor:not-allowed; }
  .btn.danger { border-color:#8b2222; color:#ff7777; }
  .btn.danger:hover:not(:disabled) { background:linear-gradient(135deg,#3a0a0a,#200606); }
  .btn.primary { border-color:var(--gold-light); background:linear-gradient(135deg,#3a2010,#2a1206); }
  #attack-count-select { font-size:9px; font-family:Georgia,'Times New Roman',serif; background:#0e0802; border:1px solid rgba(200,150,10,.4); color:var(--parchment); border-radius:3px; padding:4px 5px; width:100%; margin-bottom:5px; outline:none; }
  #dice-area { padding:8px 9px; border-bottom:1px solid rgba(200,150,10,.2); flex-shrink:0; }
  #dice-area .panel-title { padding:0 0 5px; border:none; }
  .dice-row { display:flex; gap:5px; margin-bottom:5px; align-items:center; }
  .dice-label { font-family:Georgia,'Times New Roman',serif; font-size:8px; color:var(--parchment-dark); width:40px; }
  .dice { width:26px; height:26px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-family:'Courier New',monospace; font-size:13px; font-weight:700; border:1px solid rgba(255,255,255,.2); flex-shrink:0; }
  .dice.atk { background:linear-gradient(135deg,#6b0000,#3a0000); color:#ff8888; border-color:#8b2222; }
  .dice.def { background:linear-gradient(135deg,#003366,#001a33); color:#88aaff; border-color:#224488; }
  .dice.win { box-shadow:0 0 8px 2px currentColor; }
  #battle-result { font-family:Georgia,'Times New Roman',serif; font-size:10px; text-align:center; min-height:16px; color:var(--gold-light); }
  #tactical-preview{display:none;margin:5px 0 7px;padding:7px;border:1px solid rgba(200,150,10,.35);border-radius:4px;background:rgba(0,0,0,.22);font-size:9px;line-height:1.45;color:var(--parchment-dark)}#tactical-preview.show{display:block}#tactical-preview b{color:var(--gold-light)}.odds-good{color:#66dd88}.odds-even{color:#ffcc55}.odds-bad{color:#ff7777}
  #log-area { flex:1; overflow:hidden; display:flex; flex-direction:column; }
  #log { flex:1; overflow-y:auto; padding:5px 7px; font-size:9px; line-height:1.6; color:#b0a080; }
  #log .log-entry { margin-bottom:1px; padding:1px 0; border-bottom:1px solid rgba(200,150,10,.05); }
  #log .log-battle { color:#ff9966; }
  #log .log-conquer { color:var(--gold-light); font-weight:600; }
  #log .log-phase { color:#aaccff; font-style:italic; }
  #log .log-ai { color:#ccaaff; }
  #cards-area { padding:5px 9px; border-top:1px solid rgba(200,150,10,.2); flex-shrink:0; }
  #cards-area .panel-title { padding:0 0 3px; border:none; }
  #hand-display { display:flex; gap:3px; flex-wrap:wrap; }
  .card-mini { width:24px; height:34px; border-radius:3px; border:1px solid rgba(200,150,10,.4); background:linear-gradient(135deg,#1a0f04,#0e0802); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; transition:all .15s; }
  .card-mini.selected { border-color:var(--gold-light); box-shadow:0 0 6px rgba(200,150,10,.5); }
  .card-mini .card-sym { font-size:11px; }
  .card-mini .card-type { font-size:6px; color:var(--gold); font-family:Georgia,'Times New Roman',serif; }

  #modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:100; }
  #modal-overlay.show { display:flex; }
  .modal { background:linear-gradient(135deg,#1e0e04,#140a02); border:2px solid var(--gold); border-radius:8px; padding:22px; min-width:300px; max-width:440px; box-shadow:0 0 40px rgba(200,150,10,.3); text-align:center; }
  .modal h2 { font-family:Georgia,'Times New Roman',serif; font-size:18px; color:var(--gold-light); margin-bottom:10px; }
  .modal p { color:var(--parchment-dark); font-size:13px; margin-bottom:14px; line-height:1.6; }
  .modal-buttons { display:flex; gap:10px; justify-content:center; }
  .modal-buttons .btn { width:auto; padding:7px 18px; }
  #army-slider-wrap { margin:10px 0; }
  #army-slider { width:100%; accent-color:var(--gold); cursor:pointer; }
  #army-count-display { font-family:'Courier New',monospace; font-size:18px; color:var(--gold-light); margin:5px 0; }

  #setup-screen { position:fixed; inset:0; background:radial-gradient(ellipse at center,#1a0a02,#0a0400); display:flex; align-items:center; justify-content:center; z-index:200; }
  .setup-box { background:linear-gradient(135deg,#1e0e04,#140a02); border:2px solid var(--gold); border-radius:10px; padding:28px; width:380px; text-align:center; box-shadow:0 0 60px rgba(200,150,10,.35); }
  .setup-box h1 { font-family:Georgia,'Times New Roman',serif; font-size:32px; font-weight:900; color:var(--gold-light); letter-spacing:.2em; text-shadow:0 0 30px rgba(200,150,10,.6); margin-bottom:4px; }
  .setup-box .subtitle { font-style:italic; color:var(--parchment-dark); font-size:13px; margin-bottom:20px; }
  .setup-row { margin-bottom:12px; text-align:left; }
  .setup-row label { display:block; font-family:Georgia,'Times New Roman',serif; font-size:9px; letter-spacing:.15em; color:var(--gold); text-transform:uppercase; margin-bottom:3px; }
  .setup-row select,.setup-row input { width:100%; background:#0e0802; border:1px solid rgba(200,150,10,.4); color:var(--parchment); padding:6px 9px; border-radius:3px; font-family:Georgia,'Times New Roman',serif; font-size:13px; outline:none; }
  .setup-row select option { background:#1a0802; }

  #tooltip { position:fixed; background:rgba(20,10,2,.95); border:1px solid var(--gold); border-radius:4px; padding:5px 9px; font-size:10px; color:var(--parchment); pointer-events:none; z-index:50; display:none; }
  #tooltip.show { display:block; }
  ::-webkit-scrollbar { width:3px; }
  ::-webkit-scrollbar-track { background:#0a0502; }
  ::-webkit-scrollbar-thumb { background:rgba(200,150,10,.4); border-radius:2px; }
  .setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.setup-actions .btn{margin:0}.header-actions{display:flex;gap:5px}.header-actions .btn{width:auto;margin:0;padding:5px 8px;font-size:8px}.hint{font-size:9px;color:var(--parchment-dark);line-height:1.3;margin:4px 0 7px}
  @media(max-width:900px){body{height:auto;min-height:100vh;overflow:auto}#header{position:sticky;top:0;z-index:20;flex-wrap:wrap;height:auto;min-height:42px}#phase-banner{order:3;flex-basis:100%;padding:3px}#main{display:grid;grid-template-columns:150px minmax(500px,1fr) 190px;min-height:620px;overflow:auto}#map-container{min-width:500px}.header-actions .btn{padding:4px 6px}}

  #strategy-panel { border-top:1px solid rgba(200,150,10,.25); padding:7px 8px; font-family:'Courier New',monospace; font-size:9px; color:var(--parchment-dark); }
  .strategy-row { display:flex; justify-content:space-between; gap:6px; margin:3px 0; }
  .strategy-row strong { color:var(--gold-light); font-weight:700; }
  .strategy-alert { color:#e8a080; }

  #continent-status { border-top:1px solid rgba(200,150,10,.22); padding:6px 8px; }
  .continent-meter { margin:4px 0; font:8px 'Courier New',monospace; }
  .continent-meter-head { display:flex; justify-content:space-between; margin-bottom:2px; }
  .continent-meter-bar { height:4px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
  .continent-meter-fill { height:100%; background:var(--gold); }
  .continent-owned .continent-meter-head { color:var(--gold-light); font-weight:bold; }

.route-line{stroke:rgba(230,220,175,.28);stroke-width:1.4;stroke-dasharray:4 4;pointer-events:none}
.continent-label{fill:rgba(255,235,180,.42);font:700 12px Georgia,serif;letter-spacing:2px;pointer-events:none}
.wrap-label{fill:rgba(255,235,180,.55);font:700 8px Georgia,serif;pointer-events:none}