/* Warbound Atlas — game styles (extracted from index.html).
   Part 1: main game CSS. Part 2: brettspiele.fun site control-bar integration.
   Note: the small #wb-chrome-offset rules stay inline in index.html because they
   must cascade AFTER assets/game-chrome.css. */
:root{
  color-scheme:dark;
  --bg:#06080d;--bg2:#0c0f17;--panel:rgba(14,17,25,.88);
  --gold:#d6aa4d;--gold2:#f3d890;--gold-deep:#8a6a26;
  --text:#f3ecdd;--muted:#9a907c;--line:rgba(214,170,77,.22);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased;}
button{font-family:Georgia,serif;cursor:pointer;outline:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:8px;padding:8px 14px;transition:all .2s}
button:hover{border-color:var(--gold);background:rgba(214,170,77,.10)}
input:not([type="checkbox"]),select{font-family:Georgia,serif;outline:none;background:rgba(8,10,16,.7);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:7px 10px;font-size:13px;}
input:not([type="checkbox"]):focus,select:focus{border-color:var(--gold)}
input[type="checkbox"]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--gold);cursor:pointer}
.public-room-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;margin:10px 0 4px;font-size:13px;font-weight:700;color:var(--text)}
.public-rooms{margin-top:10px;padding:11px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.public-rooms-head{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.public-rooms-items{display:grid;gap:6px;max-height:180px;overflow-y:auto}
.public-rooms-empty{font-size:12px;padding:4px 2px;color:var(--muted)}
.public-room-row{display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);font-weight:700;text-align:left;cursor:pointer}
.public-room-row:hover{border-color:var(--gold);background:rgba(214,170,77,.10)}
.public-room-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%}
.public-room-row span{color:var(--muted);font-size:12px;font-weight:700}
.public-room-row strong{color:var(--text);font-size:13px}
.public-room-count{color:var(--gold)!important}
.public-room-meta{font-size:11px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.scene{position:fixed;inset:0;display:none;overflow-y:auto}
#mainMenu.active,#joinMenu.active,#loadScreen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:radial-gradient(ellipse at 20% 10%,rgba(214,170,77,.10),transparent 40%),radial-gradient(ellipse at 80% 90%,rgba(52,91,152,.08),transparent 40%),linear-gradient(160deg,#06080d 0%,#0c0f17 100%)}
#lobby.active{display:flex;flex-direction:column;align-items:center;padding:0;overflow-y:auto;background:radial-gradient(ellipse at 20% 10%,rgba(214,170,77,.10),transparent 40%),radial-gradient(ellipse at 80% 90%,rgba(52,91,152,.08),transparent 40%),linear-gradient(160deg,#06080d 0%,#0c0f17 100%)}
#howtoMenu.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:38px 18px 56px;background:radial-gradient(ellipse at 20% 10%,rgba(214,170,77,.10),transparent 40%),radial-gradient(ellipse at 80% 90%,rgba(52,91,152,.08),transparent 40%),linear-gradient(160deg,#06080d 0%,#0c0f17 100%)}
.howto-card{width:100%;max-width:680px;background:linear-gradient(180deg,rgba(20,23,32,.95),rgba(12,15,23,.95));border:1px solid var(--line);border-radius:18px;padding:24px 26px 28px;box-shadow:0 24px 64px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.howto-intro{color:var(--muted);font-size:13.5px;font-style:italic;text-align:center;line-height:1.6;margin:14px 0 22px}
.howto-sec{margin-bottom:20px}
.howto-sec h3{font-size:15px;color:var(--gold2);font-weight:800;letter-spacing:.02em;margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.howto-sec p{font-size:14px;line-height:1.62;color:var(--text);margin-bottom:8px}
.howto-sec ul{margin:0 0 8px 0;padding-left:20px}
.howto-sec li{font-size:14px;line-height:1.55;color:var(--text);margin-bottom:6px}
.howto-sec b{color:#f6d98b;font-weight:700}
.lobby-map{margin:12px 0 2px}
#game.active{display:flex;flex-direction:column}
.brand{text-align:center;margin-bottom:28px}
.brand .eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.brand h1{font-size:clamp(52px,8vw,90px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:.95;background:linear-gradient(180deg,#fff8e6 0%,#f3d890 50%,#8a6a26 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tagline{color:var(--muted);font-style:italic;font-size:13px;margin-top:8px}
.brand .divider{margin:16px auto 0;width:110px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.brand .divider::before{content:"⚔";position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--bg);padding:0 8px;color:var(--gold);font-size:13px}
.menu-card{width:100%;max-width:480px;background:linear-gradient(180deg,rgba(20,23,32,.95),rgba(12,15,23,.95));border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:0 24px 64px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.menu-credit{margin-top:20px;max-width:480px;font-size:11px;color:var(--muted);text-align:center;letter-spacing:.02em;line-height:1.5}
.menu-credit a{color:var(--gold2);text-decoration:none;border-bottom:1px dotted var(--gold2)}
.menu-card h2{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:700;text-align:center;display:flex;align-items:center;gap:14px}
.menu-card h2::before,.menu-card h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.menu-btn{display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;margin-bottom:9px;background:linear-gradient(180deg,rgba(243,216,144,.06),rgba(70,45,12,.10));border:1px solid var(--line);border-radius:11px;color:var(--gold2);font-size:15px;font-weight:700;letter-spacing:.04em;cursor:pointer;text-align:left;position:relative;overflow:hidden;transition:all .25s cubic-bezier(.16,1,.28,1)}
.menu-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:bottom;transition:transform .3s}
.menu-btn:hover{background:linear-gradient(180deg,rgba(243,216,144,.18),rgba(70,45,12,.22));border-color:var(--gold);transform:translateX(4px);box-shadow:0 6px 20px rgba(214,170,77,.18)}
.menu-btn:hover::before{transform:scaleY(1)}
.menu-btn.primary{background:linear-gradient(180deg,#f3d890,#c9a455);color:#0b0d14;border-color:#d6aa4d;font-weight:800;box-shadow:0 8px 22px rgba(214,170,77,.25)}
.menu-btn.primary:hover{background:linear-gradient(180deg,#fff0b8,#d6b266);transform:translateX(0) translateY(-2px);box-shadow:0 12px 30px rgba(214,170,77,.35)}
.menu-btn.back{margin-top:16px;padding:11px 16px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:transparent;border-color:transparent}
.menu-btn.back:hover{color:var(--gold2);transform:translateX(-4px) !important}
.menu-btn .btn-icon{width:32px;height:32px;display:grid;place-items:center;background:rgba(214,170,77,.12);border:1px solid var(--line);border-radius:8px;font-size:17px;flex-shrink:0}
.menu-btn.primary .btn-icon{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.2)}
.menu-btn .btn-info{flex:1}
.menu-btn .btn-sub{font-size:11px;color:var(--muted);font-weight:400;font-style:italic;margin-top:2px}
.menu-btn.primary .btn-sub{color:rgba(11,13,20,.65)}
.saves-list{max-height:55vh;overflow-y:auto;padding-right:4px}
.saves-list::-webkit-scrollbar{width:5px}
.saves-list::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.save-item{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:7px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:all .25s}
.save-item:hover{background:rgba(214,170,77,.08);border-color:var(--gold);transform:translateX(2px)}
.sv-seal{width:40px;height:40px;background:radial-gradient(circle at 35% 30%,#fff8e6,#a08850);color:#1a140a;border:2px solid #6b4f1a;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;flex-shrink:0}
.sv-info{flex:1;min-width:0}
.sv-name{font-size:14px;color:var(--gold2);font-weight:700}
.sv-meta{font-size:10px;color:var(--muted);font-style:italic;margin-top:2px}
.sv-rm{width:30px;height:30px;border-radius:50%;background:rgba(177,61,61,.15);border:1px solid rgba(177,61,61,.4);color:#ffb3b3;display:grid;place-items:center;font-size:12px;padding:0;transition:all .25s}
.sv-rm:hover{background:rgba(177,61,61,.3);transform:rotate(90deg)}
.saves-empty{text-align:center;padding:46px 20px;color:var(--muted);font-style:italic}
.sv-emoji{font-size:36px;display:block;opacity:.4;margin-bottom:12px}
.opt-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.opt-row:last-of-type{border-bottom:none}
.opt-label{font-size:13px;color:var(--text)}
.opt-sub{font-size:10px;color:var(--muted);font-style:italic;margin-top:2px}
.toggle{position:relative;width:44px;height:22px;background:rgba(15,18,26,.7);border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:all .3s;flex-shrink:0}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:all .3s}
.toggle.on{background:rgba(214,170,77,.18);border-color:var(--gold)}
.toggle.on::after{left:24px;background:var(--gold2)}
#toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:9999;background:linear-gradient(180deg,#f3d890,#8a6a26);color:#1a140a;padding:10px 20px;border-radius:10px;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#lobby{
  display:none;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0;overflow-y:auto;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(214,170,77,0.10), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(52,91,152,0.08), transparent 40%),
    linear-gradient(160deg,#06080d 0%, #0c0f17 100%);
}
#lobby.active{display:flex}

/* Lobby Header */
.lobby-header{
  width:100%;padding:24px 20px 28px;
  display:flex;align-items:flex-start;justify-content:center;position:relative;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(214,170,77,0.04),transparent);
}
.lobby-back-link{
  position:absolute;left:20px;top:24px;
  padding:8px 14px;background:rgba(8,10,16,.6);
  border:1px solid var(--line);border-radius:11px;
  color:var(--gold2);font-size:13px;text-decoration:none;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  transition:all .25s;
}
.lobby-back-link:hover{border-color:var(--gold);transform:translateX(-2px)}
.lobby-brand{text-align:center;flex:1}
.lobby-brand .eyebrow{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;font-weight:600;
}
.lobby-brand h1{
  font-size:clamp(38px,5vw,62px);font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff8e6,#f3d890 50%,#8a6a26);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:.95;
}
.lobby-brand .tagline{
  margin-top:8px;color:var(--muted);font-style:italic;font-size:13px;letter-spacing:.04em;
}

/* Lobby grid (3 cards) */
.lobby-grid{
  width:100%;max-width:1100px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:start;
  padding:24px 20px 100px;
}
/* Each column stacks its cards vertically: left = players + online,
   right = map + further settings. */
.lobby-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.lobby-card{
  background:linear-gradient(180deg,rgba(20,23,32,.95),rgba(12,15,23,.95));
  border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;
  backdrop-filter:blur(8px);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}
.lobby-card h2{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;
}
.lobby-card h2 small{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.08em}

/* Player slots */
.player-slot{
  display:flex;flex-direction:column;gap:8px;
  padding:12px;margin-bottom:10px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-left:3px solid var(--house-color, var(--gold));
  border-radius:10px;
  transition:all .25s;
}
.player-slot.host{
  background:linear-gradient(90deg,rgba(214,170,77,.08),rgba(255,255,255,.025));
}
.player-slot .slot-head{
  display:flex;align-items:center;gap:10px;
}
.player-slot .house-badge{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:7px;
  background:var(--house-color, #3a3a44);color:#0b0d14;
  font-weight:800;font-size:12px;letter-spacing:.04em;
  cursor:pointer;border:1px solid rgba(0,0,0,.2);
  transition:transform .2s, box-shadow .2s;
  font-family:Georgia,serif;
}
.player-slot .house-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.player-slot .house-badge .sig{font-size:14px}
.player-slot .house-badge .hb-caret{margin-left:3px;font-size:10px;opacity:.75}
.house-select{position:relative}
.house-dropdown{position:absolute;top:calc(100% + 5px);left:0;z-index:40;min-width:248px;max-height:320px;overflow:auto;
  background:#1a1410;border:1px solid rgba(214,170,77,.35);border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.55);
  padding:5px;display:none}
.house-dropdown.open{display:block}
.house-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 8px;border:0;border-radius:8px;
  background:transparent;color:#e8dcc0;cursor:pointer;font-family:inherit}
.house-opt:hover:not(.taken){background:rgba(255,255,255,.07)}
.house-opt.sel{background:rgba(214,170,77,.16)}
.house-opt.taken{opacity:.42;cursor:not-allowed}
.house-opt .ho-swatch{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex:none;color:#0b0d14;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.house-opt .ho-info{display:flex;flex-direction:column;flex:1;min-width:0}
.house-opt .ho-name{font-weight:700;font-size:13px;font-family:Georgia,serif}
.house-opt .ho-motto{font-size:10px;color:#9a8a66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.house-opt .ho-tag{font-size:10px;color:#9a8a66;flex:none;font-weight:700}
.player-slot .name-input{
  flex:1;background:rgba(8,10,16,.6);
  border:1px solid var(--line);border-radius:7px;
  color:var(--text);padding:6px 10px;font:inherit;font-size:13px;outline:none;
  min-width:0;
}
.player-slot .name-input:focus{border-color:var(--gold)}
.player-slot .rm-slot{
  width:28px;height:28px;border-radius:50%;
  background:rgba(177,61,61,.15);border:1px solid rgba(177,61,61,.4);
  color:#ffb3b3;display:grid;place-items:center;cursor:pointer;
  font-size:12px;flex-shrink:0;padding:0;
  transition:all .25s;
}
.player-slot .rm-slot:hover:not(:disabled){background:rgba(177,61,61,.3);transform:rotate(90deg)}
.player-slot .rm-slot:disabled{opacity:.3;cursor:not-allowed}
.player-slot .type-row{display:flex;gap:4px;flex-wrap:wrap}
.player-slot .type-btn{
  padding:5px 9px;font-size:11px;letter-spacing:.06em;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:6px;color:var(--muted);cursor:pointer;
  transition:all .2s;font-family:Georgia,serif;font-weight:600;
}
.player-slot .type-btn:hover{color:var(--gold2);border-color:var(--gold-deep)}
.player-slot .type-btn.active{
  background:linear-gradient(180deg,#f3d890,#c9a455);
  color:#0b0d14;border-color:#d6aa4d;
}

.add-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line);}
.add-btn{
  flex:1;min-width:115px;
  padding:9px 11px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:8px;color:var(--gold2);cursor:pointer;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:Georgia,serif;transition:all .25s;
}
.add-btn:hover{border-color:var(--gold);background:rgba(214,170,77,.08)}
.add-btn .ico{font-size:13px}

/* House grid */
.house-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.house-tile{
  position:relative;padding:12px;
  background:linear-gradient(180deg,var(--tile-color,#3a3a44) 0%,rgba(0,0,0,0.3) 100%);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  cursor:pointer;transition:transform .25s, box-shadow .25s, border-color .25s;
  overflow:hidden;
}
.house-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6));
  pointer-events:none;
}
.house-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  border-color:var(--gold);
}
.house-tile.taken{
  opacity:.45;cursor:not-allowed;
}
.house-tile.taken:hover{transform:none;box-shadow:none}
.house-tile .ht-sigil{
  font-size:24px;margin-bottom:4px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  position:relative;z-index:1;
}
.house-tile .ht-name{
  font-family:Georgia,serif;font-weight:800;
  font-size:13px;color:#fff;letter-spacing:.04em;
  text-shadow:0 2px 4px rgba(0,0,0,.7);
  position:relative;z-index:1;
}
.house-tile .ht-motto{
  font-size:9.5px;color:rgba(255,255,255,.78);
  font-style:italic;letter-spacing:.02em;margin-top:3px;
  position:relative;z-index:1;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.house-tile .ht-owner{
  position:absolute;top:6px;right:8px;
  font-size:10px;color:#fff;font-weight:700;
  background:rgba(0,0,0,.55);padding:2px 6px;border-radius:6px;
  letter-spacing:.04em;z-index:2;
  white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis;
}

/* Map + rules */
.map-select{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.map-tile{
  padding:14px 16px;background:rgba(214,170,77,.08);
  border:1px solid var(--gold-deep);border-radius:10px;
  transition:all .25s;cursor:pointer;
}
.map-tile:hover{border-color:var(--gold);background:rgba(214,170,77,.13)}
.map-tile.active{
  background:linear-gradient(180deg,rgba(214,170,77,.18),rgba(214,170,77,.06));
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(214,170,77,.18);
}
.map-tile .map-name{
  font-family:Georgia,serif;font-weight:800;font-size:16px;
  color:var(--gold2);letter-spacing:.06em;text-transform:uppercase;
}
.map-tile .map-info{
  font-size:11px;color:var(--muted);font-style:italic;margin-top:4px;
}
.rule-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px dashed var(--line);
  gap:10px;
}
.rule-row:last-of-type{border-bottom:none}
.rule-row label{
  font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;
}
.rule-row input,.rule-row select{
  background:rgba(8,10,16,.6);color:var(--text);
  border:1px solid var(--line);border-radius:7px;
  padding:7px 10px;font:inherit;font-size:13px;outline:none;
  min-width:120px;text-align:right;
}
.rule-row select{text-align:left;cursor:pointer}
.rule-row input:focus,.rule-row select:focus{border-color:var(--gold)}

/* Footer */
.lobby-footer{
  position:fixed;bottom:0;left:0;right:0;
  padding:14px 20px;
  background:linear-gradient(180deg,transparent,rgba(6,8,13,.95));
  display:flex;justify-content:center;z-index:5;
  pointer-events:none;
}
.start-btn{
  pointer-events:auto;
  padding:14px 42px;font-size:16px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(180deg,#f3d890,#c9a455);
  color:#0b0d14;border:1px solid #d6aa4d;border-radius:12px;
  cursor:pointer;font-family:Georgia,serif;
  box-shadow:0 12px 30px rgba(214,170,77,.32);
  transition:all .25s cubic-bezier(.16,1,.28,1);
}
.start-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(214,170,77,.42);
  background:linear-gradient(180deg,#fff0b8,#d6b266);
}
.start-btn:active{transform:translateY(0)}

@media (max-width:1100px){
  .lobby-grid{grid-template-columns:1fr;max-width:600px}
}
@media (max-width:540px){
  .lobby-grid{padding:14px 12px 100px}
  .lobby-card{padding:16px}
  .lobby-brand h1{font-size:36px}
  .lobby-back-link{position:static;align-self:flex-start;margin-bottom:14px}
  .lobby-header{flex-direction:column;align-items:flex-start;padding:14px 16px}
  .house-grid{grid-template-columns:1fr 1fr}
  .start-btn{padding:12px 26px;font-size:14px}
}

/* ============== GAME UI ============== */
#game{display:none;flex-direction:column}
#game.active{display:flex}

.topbar{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,rgba(7,8,13,.95),rgba(7,8,13,.75));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
}
.topbar .turn-info{display:flex;align-items:center;gap:10px;flex:1}
.topbar .player-tag{
  display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
}
.topbar .player-tag .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 10px currentColor}
.topbar .player-tag strong{font-size:14px;color:var(--gold2);letter-spacing:.04em}
.topbar .phase-pill{
  padding:5px 12px;border:1px solid var(--gold);border-radius:20px;
  color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.topbar .actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.topbar .actions button{padding:7px 12px;font-size:12px}
.stat-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);white-space:nowrap;flex-shrink:0}
.stat-chip b{color:var(--gold2);font-size:13px;font-weight:700}
.stat-chip-btn{cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.stat-chip-btn:hover{background:rgba(214,170,77,.1);border-color:var(--gold)}
.act-sep{width:1px;height:28px;background:var(--line);margin:0 4px;flex-shrink:0}

/* ===== IN-GAME QUICK MENU ===== */
.gm-wrap{position:relative;flex-shrink:0}
.gm-toggle{
  width:40px;height:40px;padding:0;
  display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:10px;color:var(--gold2);transition:all .2s;
  letter-spacing:0
}
.gm-toggle:hover,.gm-toggle.open{background:rgba(214,170,77,.15);border-color:var(--gold)}
.gm-panel{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:230px;
  background:linear-gradient(180deg,rgba(18,21,30,.97),rgba(10,13,20,.97));
  border:1px solid var(--line);border-radius:13px;
  box-shadow:0 16px 48px rgba(0,0,0,.65);backdrop-filter:blur(14px);
  overflow:hidden;z-index:200;
  animation:gm-open .18s cubic-bezier(.16,1,.28,1)
}
@keyframes gm-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.gm-section-label{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:700;padding:13px 16px 7px
}
.gm-opt-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;gap:16px;font-size:13px;color:var(--text);
  transition:background .15s;cursor:default
}
.gm-opt-row:hover{background:rgba(255,255,255,.04)}
.gm-sep{height:1px;background:var(--line);margin:5px 0}
.gm-item{
  display:block;width:100%;padding:11px 16px;
  text-align:left;font-size:13px;color:var(--text);
  background:transparent;border:none;border-radius:0;
  transition:background .15s
}
.gm-item:hover{background:rgba(255,255,255,.07);border-color:transparent}
.gm-item.gm-danger{color:#ff8888}
.gm-item.gm-danger:hover{background:rgba(220,60,60,.13);border-color:transparent}
.gm-slider-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;font-size:13px;color:var(--text)
}
.gm-slider-row span{min-width:82px;flex-shrink:0}
.gm-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:4px;background:rgba(214,170,77,.25);border:none;
  border-radius:2px;outline:none;cursor:pointer;padding:0;
  accent-color:var(--gold)
}
.gm-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--gold);cursor:pointer
}
.gm-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:none;cursor:pointer
}

/* ===== CUSTOM CONFIRM DIALOG ===== */
.gc-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center
}
.gc-overlay[hidden]{display:none!important}
.gc-modal{
  background:linear-gradient(180deg,rgba(20,23,32,.98),rgba(10,13,20,.98));
  border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 20px;min-width:280px;max-width:400px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  animation:gm-open .18s cubic-bezier(.16,1,.28,1)
}
.gc-msg{font-size:15px;color:var(--text);line-height:1.55;margin-bottom:22px;text-align:center}
.gc-actions{display:flex;gap:10px;justify-content:flex-end}
.gc-btn{padding:9px 22px;font-size:13px;border-radius:9px}
.gc-btn-danger{
  background:rgba(200,60,60,.18);border-color:rgba(200,60,60,.4);color:#ff9999
}
.gc-btn-danger:hover{background:rgba(200,60,60,.35);border-color:rgba(200,60,60,.6)}

/* ============== MAP ============== */
#map-wrap{
  position:absolute;top:64px;left:0;right:0;bottom:76px;
  overflow:visible;  /* canvas extends to fill viewport, clipped by z-index layers */
  cursor:default;
  transition:bottom .35s cubic-bezier(.16,1,.28,1);
}
/* The THREE.js canvas must fill the full viewport (UI layers sit on top via z-index) */
#canvas-wrap{
  position:fixed;
  inset:0;
  z-index:1;   /* below topbar(50) and bottom-panel(40) */
}
#canvas-wrap canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
/* Karten-Ladebildschirm (Spielstart / Laden, bis die 3D-Karte aufgebaut ist).
   position:fixed => deckt trotz Verschachtelung in #map-wrap den ganzen Screen. */
#mapLoader{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,var(--bg2) 0%,var(--bg) 72%);
  opacity:1;transition:opacity .5s ease;
}
#mapLoader[hidden]{display:none}
#mapLoader.ml-hide{opacity:0;pointer-events:none}
#mapLoader .ml-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
#mapLoader .ml-spin{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center}
#mapLoader .ml-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(214,170,77,.16);border-top-color:var(--gold);
  animation:mlSpin .9s linear infinite;
}
#mapLoader .ml-emblem{
  font-size:30px;color:var(--gold2);
  filter:drop-shadow(0 0 10px rgba(214,170,77,.45));
  animation:mlPulse 1.8s ease-in-out infinite;
}
#mapLoader .ml-text{
  color:var(--gold2);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;opacity:.85;
}
@keyframes mlSpin{to{transform:rotate(360deg)}}
@keyframes mlPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  #mapLoader .ml-ring,#mapLoader .ml-emblem{animation:none}
}
/* Zoom / camera hint overlay (fixed, above canvas, below UI) */
#mapZoomHint{
  position:fixed;bottom:88px;right:14px;
  font-size:10px;color:var(--muted);font-style:italic;
  pointer-events:none;opacity:.55;letter-spacing:.04em;
  z-index:2;
}
#mapZoomBtns{
  position:fixed;bottom:108px;right:10px;
  display:flex;flex-direction:column;gap:4px;
  z-index:5;
}
#mapZoomBtns button{
  width:32px;height:32px;padding:0;
  background:rgba(8,10,16,.82);border:1px solid var(--line);
  border-radius:8px;color:var(--gold2);font-size:17px;font-weight:700;
  display:grid;place-items:center;
  transition:all .2s;
}
#mapZoomBtns button:hover{border-color:var(--gold);background:rgba(214,170,77,.15)}

/* Einheitenmarker: Truppenzahl steht direkt auf dem Banner-Tuch (3D), kein
   HTML-Overlay mehr. Spezialeinheiten als 3D-Modelle neben dem Banner. */

.sov-outer{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  z-index:45;pointer-events:none;
}
.sov-inner{
  background:linear-gradient(180deg,rgba(10,12,20,.96),rgba(6,8,13,.96));
  border:1px solid var(--line);border-radius:14px;
  padding:14px 24px;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.6);backdrop-filter:blur(8px);
  min-width:240px;
}
.sov-eye{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
.sov-player{font-size:18px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.sov-count{font-size:14px;color:var(--text);margin-bottom:4px}
.sov-count b{font-size:22px;color:var(--gold2);margin-right:4px}
.sov-hint{font-size:11px;color:var(--muted);font-style:italic;margin-bottom:4px}
.sov-total{font-size:10px;color:var(--muted);letter-spacing:.06em}



.region-marker{
  position:absolute;transform:translate(-50%,-50%);
  pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
}
.region-marker .troops{
  background:radial-gradient(circle at 35% 30%,#fff8e6,#a08850);
  border:2px solid #1a140a;color:#1a140a;font-weight:900;font-size:14px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.4);
}
.region-marker .name{
  font-size:9px;color:var(--gold2);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-shadow:0 2px 4px #000,0 0 8px #000;white-space:nowrap;
}
.region-marker .specials{display:flex;gap:1px;font-size:11px}
.region-marker .specials span{
  background:rgba(0,0,0,.7);border-radius:4px;padding:1px 3px;
  border:1px solid rgba(214,170,77,.4);
}
.region-link{stroke:rgba(214,170,77,.35);stroke-width:1.2;stroke-dasharray:4 4;fill:none;pointer-events:none}
.region-link.sea{stroke:rgba(80,140,200,.4)}

/* ============== BOTTOM PANEL (info strip + action bar) ============== */
.bottom-panel{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:linear-gradient(180deg,rgba(7,8,13,.75),rgba(7,8,13,.96));
  border-top:1px solid var(--line);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
}
/* Quick stats strip — the whole info bar, no longer expandable */
.bp-strip{
  display:flex;align-items:center;gap:16px;
  padding:5px 18px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  background:rgba(7,8,13,.7);
  flex-shrink:0;overflow:visible;
}
.bp-strip #stripName{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-strip .bps-item{display:flex;align-items:center;gap:5px;color:var(--text);position:relative;white-space:nowrap}
.bp-strip .bps-item b{color:var(--gold2)}
/* Hoverable items get a subtle affordance + popover */
.bps-hover{cursor:default;border-radius:7px;padding:2px 6px;transition:background .15s}
.bps-hover:hover,.bps-hover:focus-visible{background:rgba(214,170,77,.12);outline:none}
.bps-btn{background:none;border:1px solid transparent;color:var(--text);font:inherit;cursor:pointer}
.bps-btn:hover{border-color:rgba(214,170,77,.4)}
.bps-eye{font-size:11px;opacity:.7;margin-left:2px}
/* Popover bubbles open upward from a strip icon */
.bps-pop{
  position:absolute;bottom:calc(100% + 9px);left:0;
  min-width:170px;padding:11px 13px;
  background:rgba(9,11,17,.98);border:1px solid var(--gold);border-radius:11px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:60;
  text-align:left;font-weight:500;letter-spacing:normal;
}
.bps-pop::after{
  content:"";position:absolute;top:100%;left:18px;
  border:7px solid transparent;border-top-color:var(--gold);
}
.bps-hover:hover .bps-pop,.bps-hover:focus-within .bps-pop{opacity:1;transform:translateY(0);pointer-events:auto}
.bps-pop-sm{min-width:0;white-space:nowrap;font-size:12px;color:var(--text)}
.bps-pop-right{left:auto;right:0}
.bps-pop-right::after{left:auto;right:18px}
.bps-pop-log{width:340px;max-width:82vw}
.bps-pop-log .log{max-height:210px}
.bps-pop-title{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;font-weight:700;display:flex;justify-content:space-between;align-items:center;
}
.bps-pop-title small{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.08em}
.bp-strip .bps-phase{
  margin-left:auto;padding:3px 10px;border-radius:6px;flex-shrink:0;
  background:rgba(214,170,77,.12);border:1px solid var(--line);
  color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}

/* Aktionsleiste — jetzt in der Topbar (.topbar .actions) */
.bp-act-gap{flex:1}
.topbar .actions button{padding:6px 11px;font-size:12px;flex-shrink:0}
.topbar .actions #endPhaseBtn{padding:6px 14px;font-size:12px;font-weight:700}
.topbar .actions .bp-act-gap{width:8px;flex:0}

/* Fraktion-Seitenleiste (linker Rand: kompakte Wappen-Spalte) */
/* overflow-y:auto + overflow-x:visible darf hier NICHT kombiniert werden: nach
   CSS-Spec wird "visible" für eine Achse automatisch zu "auto", sobald die
   andere Achse nicht "visible" ist — das Popup (das per "left:calc(100% + 10px)"
   bewusst nach rechts aus der 60px-Spalte herausragt) wurde dadurch unsichtbar
   weggeschnitten, obwohl es korrekt geöffnet wurde. Bei maximal 7 Spielern
   passen alle Wappen ohnehin ohne Scrollen in die Höhe, daher schlicht beide
   Achsen sichtbar lassen.
   z-index bleibt UNTER der .topbar (50): das Burger-Menü (Toggle + Panel) liegt
   im selben linken Bereich wie diese Spalte und muss beim Öffnen über den
   Wappen-Kreisen erscheinen, nicht darunter. Die Popups sind oben kartenbündig
   (siehe .fsi-popup) statt vertikal zentriert, ragen also nie in den
   Topbar-Streifen hinein — sie brauchen die Topbar daher nie zu überdecken. */
.faction-sidebar{
  position:fixed;left:0;top:68px;bottom:48px;width:60px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:8px 0 0 0;overflow:visible;
  pointer-events:none;
  scrollbar-width:none;
}
.faction-sidebar::-webkit-scrollbar{display:none}

/* Wappen-Karte: großes rundes Sigil */
.fsi-card{
  position:relative;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,8,13,.88);border:2px solid rgba(255,255,255,.12);
  pointer-events:auto;transition:border-color .2s,box-shadow .2s;
  flex-shrink:0;cursor:default;
}
.fsi-active{background:rgba(10,12,22,.95)}
.fsi-eliminated{opacity:.32;filter:grayscale(.7)}
.fsi-sigil{font-size:24px;line-height:1;user-select:none}

/* Hover-Popup erscheint rechts vom Wappen, oben kartenbündig (nicht vertikal
   zentriert) — so ragt es bei der obersten Karte nie nach oben in den
   Topbar-Streifen hinein. */
.fsi-popup{
  position:absolute;left:calc(100% + 10px);top:0;transform:translateX(-4px);
  min-width:178px;
  background:rgba(9,11,18,.97);border:1px solid var(--gold);border-radius:11px;
  padding:11px 13px;
  opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;
  z-index:200;white-space:nowrap;
}
.fsi-popup::before{
  content:"";position:absolute;right:100%;top:23px;transform:translateY(-50%);
  border:6px solid transparent;border-right-color:var(--gold);
}
/* Jede Karte (auch die aktive): Popup nur per Klick */
.fsi-clickable{cursor:pointer}
.fsi-clickable:hover .fsi-sigil{opacity:.75;transition:opacity .15s}
.fsi-open .fsi-popup{opacity:1!important;pointer-events:auto!important;transform:translateX(0)!important}
.fsi-popup-head{font-size:13px;font-weight:800;letter-spacing:.02em;margin-bottom:3px}
.fsi-popup-player{font-size:11px;color:var(--muted);margin-bottom:9px}
.fsi-popup-player em{font-style:normal;color:var(--gold)}
.fsi-popup-stats{display:flex;flex-direction:column;gap:4px}
.fsi-popup-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:12px}
.fsi-popup-row span{color:var(--text2)}
.fsi-popup-row b{color:var(--gold2);font-weight:700}

/* Charaktere-Button in der unteren Leiste */
.bps-char-btn{
  background:none;border:1px solid transparent;color:var(--text);
  font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;padding:2px 8px;border-radius:6px;
  transition:background .15s,border-color .15s;
  white-space:nowrap;flex-shrink:0;
}
.bps-char-btn:hover{background:rgba(214,170,77,.1);border-color:rgba(214,170,77,.4)}

/* Card viewer modal */
#cardsModal{z-index:990}
.cards-modal{max-width:760px;width:94%}
.cards-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.cards-modal-head h2{margin:0}
.cards-modal-tabs{display:flex;gap:2px;margin:10px 0 0;border-bottom:1px solid var(--line)}
.cmt-tab{
  padding:8px 16px;font-size:13px;font-weight:600;
  background:transparent;border:none;border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0;color:var(--text);cursor:pointer;
  margin-bottom:-1px;transition:color .15s,background .15s,border-color .15s
}
.cmt-tab:hover{background:rgba(255,255,255,.06);color:var(--gold2)}
.cmt-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(214,170,77,.08)}
.cmt-count{font-size:10px;font-weight:400;opacity:.7;margin-left:4px}
.cards-modal-close{
  background:rgba(214,170,77,.1);border:1px solid var(--line);color:var(--gold2);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:16px;line-height:1;
  transition:background .15s,color .15s;
}
.cards-modal-close:hover{background:rgba(214,170,77,.22);color:var(--gold)}
.cards-modal-body{display:grid;grid-template-columns:1fr;gap:14px}
.cards-modal .cards-panel{
  background:rgba(15,18,26,.6);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;min-height:180px;
}
/* The [hidden] attribute used by _switchCardsTab() has lower specificity than
   the rule above and was being overridden by it, so both panels stayed
   visible at once regardless of which tab was active. */
.cards-modal .cards-panel[hidden]{display:none}
.cards-modal .cards-panel h3{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;font-weight:700;display:flex;gap:6px;align-items:center;
}
.cards-modal .cards-panel h3 small{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.08em;margin-left:auto}
.cards-modal .cards-scroll{flex-wrap:wrap;overflow-x:visible}
.cards-empty{color:var(--muted);font-style:italic;font-size:12px;padding:30px 10px}

/* Player info / income */
.player-info{display:flex;flex-direction:column;gap:6px;font-size:13px}
.player-info .row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;gap:18px}
.player-info .row span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.player-info .row b{color:var(--gold2);font-size:15px}
.player-info .motto{font-style:italic;color:var(--muted);font-size:11px;border-top:1px dashed var(--line);padding-top:6px;margin-top:8px}

/* Cards panel */
.cards-panel{position:relative;overflow:hidden}
.cards-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 4px 6px;flex:1;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.cards-scroll::-webkit-scrollbar{height:5px}
.cards-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.mini-card{
  flex:0 0 130px;height:148px;background:linear-gradient(165deg,#efe1bf,#d2b67d);
  color:#251b12;border-radius:9px;padding:8px 9px;cursor:pointer;
  border:1px solid #b78a35;box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4);
  display:flex;flex-direction:column;font-family:Georgia,serif;
  transition:transform .2s, box-shadow .2s;
  position:relative;overflow:hidden;
}
.mini-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(214,170,77,.4)}
.mini-card.disabled{opacity:.45;cursor:not-allowed}
.mini-card.disabled:hover{transform:none;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.mini-card .mc-type{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#6d5737;font-weight:700}
.mini-card .mc-name{font-size:11px;font-weight:700;line-height:1.2;color:#251b12;margin-top:3px;letter-spacing:.02em}
.mini-card .mc-seal{font-size:24px;text-align:center;margin:6px 0 4px;color:#8e2f2f}
.mini-card .mc-effect{font-size:9px;line-height:1.3;color:#3a2e1d;flex:1;overflow:hidden}
.mini-card .mc-cost{position:absolute;top:6px;right:6px;background:#251b12;color:#f4d891;font-size:10px;font-weight:900;padding:2px 5px;border-radius:5px}
.mini-card.attack{border-color:#8e2f2f}
.mini-card.attack .mc-seal{color:#8e2f2f}
.mini-card.defense{border-color:#2d4f78}
.mini-card.defense .mc-seal{color:#2d4f78}
.mini-card.event{border-color:#3d6a45}
.mini-card.event .mc-seal{color:#3d6a45}
.mini-card.shadow{border-color:#56345f}
.mini-card.shadow .mc-seal{color:#56345f}
.mini-card.supply{border-color:#b78a35}
.mini-card.supply .mc-seal{color:#b78a35}
.mini-card.charakter{border-color:#5a3d8a}
.mini-card.charakter .mc-seal{color:#5a3d8a}

/* Right panel - log + actions */
.log{flex:1;overflow-y:auto;font-size:11.5px;color:var(--muted);scrollbar-width:thin;line-height:1.45}
.log::-webkit-scrollbar{width:4px}
.log::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
.log-entry{padding:4px 0;border-bottom:1px dashed rgba(214,170,77,.1)}
.log-entry b{color:var(--gold2)}

/* ============== MODALS ============== */
.modal-backdrop{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
  animation:fadeIn .3s ease;
}
.modal-backdrop.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(180deg,rgba(22,26,38,.97),rgba(12,15,23,.97));
  border:1px solid var(--gold);border-radius:18px;padding:24px;
  max-width:600px;width:90%;max-height:85vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.6);animation:slideUp .35s cubic-bezier(.16,1,.28,1);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal h2{color:var(--gold2);font-size:22px;margin-bottom:6px;letter-spacing:.04em}
.modal .sub{color:var(--muted);font-style:italic;margin-bottom:18px;font-size:14px}
.modal .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* Faction picker */
.faction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:14px 0}
.faction-tile{
  cursor:pointer;padding:14px;border-radius:13px;border:2px solid var(--line);
  background:rgba(255,255,255,.04);transition:all .25s;text-align:center;
}
.faction-tile:hover{transform:translateY(-3px);border-color:currentColor}
.faction-tile.selected{border-color:var(--gold);background:rgba(214,170,77,.1);box-shadow:0 0 24px rgba(214,170,77,.3)}
.faction-tile .sigil{font-size:32px;margin-bottom:6px}
.faction-tile .fac-name{font-size:14px;font-weight:700;letter-spacing:.04em;margin-bottom:3px}
.faction-tile .fac-style{font-size:11px;color:var(--muted);font-style:italic;line-height:1.35}

/* Character cards modal */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0}
.char-card{
  background:linear-gradient(165deg,#efe1bf,#d2b67d);color:#251b12;
  border:1px solid #b78a35;border-radius:11px;padding:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.4);position:relative;
}
.char-card .role{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#6d5737;font-weight:700}
.char-card .char-name{font-size:14px;font-weight:700;color:#251b12;margin:3px 0 6px}
.char-card .char-timing{font-size:10px;color:#56345f;font-style:italic;margin-bottom:6px;letter-spacing:.04em}
.char-card .char-effect{font-size:11px;line-height:1.35;color:#3a2e1d}
.char-card .char-cost{position:absolute;top:8px;right:8px;background:#251b12;color:#f4d891;font-size:11px;font-weight:900;padding:3px 7px;border-radius:6px}
.char-card .char-buy{margin-top:10px;width:100%;padding:7px;background:#251b12;color:#f4d891;border:0;border-radius:7px;font-weight:700;cursor:pointer}
.char-card .char-buy:disabled{opacity:.4;cursor:not-allowed}
.char-card .char-buy:hover:not(:disabled){background:#3a2510}

/* Reinforce / Battle dialog */
.deploy-dialog{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px}
.deploy-dialog .big-num{font-size:42px;font-weight:900;color:var(--gold2);font-family:Georgia,serif}
.deploy-dialog .controls{display:flex;gap:10px;align-items:center}
.deploy-dialog .controls button{font-size:18px;padding:8px 16px;font-weight:900}
.special-toggle{margin-top:10px}
.move-unit-toggle{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:var(--text);cursor:pointer;user-select:none}
.move-unit-toggle input[type="checkbox"]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.mu-blocked{font-size:11px;color:var(--text-dim,#888);font-style:italic}
/* Einlöse-UI für Spezialeinheiten */
.exchange-header{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.exchange-hint{font-size:11px;color:var(--gold2);margin-bottom:7px;padding:5px 8px;background:rgba(214,170,77,.08);border-radius:6px;border:1px solid rgba(214,170,77,.2)}
/* ── Hoher Rat Shop Modal ─── */
.council-card{padding:11px 12px;border-radius:10px;border:1px solid var(--line);margin-bottom:9px;transition:.15s}
.council-card:last-child{margin-bottom:0}
.cc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cc-type{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cc-cost{font-size:13px;font-weight:900;color:var(--gold)}
.cc-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.cc-effect{font-size:11px;color:var(--text2);line-height:1.45;margin-bottom:8px}
.cc-buy{padding:5px 14px;border-radius:7px;font-size:11px;font-weight:700;background:rgba(214,170,77,.15);border:1px solid rgba(214,170,77,.4);color:var(--gold);cursor:pointer;transition:.15s}
.cc-buy:hover:not([disabled]){background:var(--gold);color:#0d0a06}
.cc-buy[disabled]{opacity:.35;cursor:not-allowed}
/* Hoher-Rat-Karten in der Kartenleiste */
.terr-card.council .tc-type{font-size:8px;color:var(--gold2)}
.tc-action-btn{display:block;width:100%;margin-top:5px;padding:3px 0;border-radius:5px;font-size:9px;font-weight:700;letter-spacing:.05em;border:1px solid rgba(214,170,77,.4);background:rgba(214,170,77,.1);color:var(--gold);cursor:pointer;transition:.15s}
.tc-action-btn:hover{background:rgba(214,170,77,.25)}
.tc-action-btn.play{border-color:rgba(80,200,120,.4);background:rgba(80,200,120,.1);color:#6fd98c}
.tc-action-btn.play:hover{background:rgba(80,200,120,.25)}
.terr-card.hidden{opacity:.75;border-style:dashed}
.exchange-units{display:flex;gap:6px;margin-bottom:9px}
.exchange-unit-btn{flex:1;padding:8px 4px 6px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;text-align:center;transition:.15s}
.exchange-unit-btn .eu-icon{font-size:20px;display:block;margin-bottom:3px}
.exchange-unit-btn .eu-name{font-size:11px;font-weight:700;display:block}
.exchange-unit-btn .eu-cost{font-size:10px;color:var(--muted);display:block;margin-top:1px}
.exchange-unit-btn.active{border-color:var(--gold);background:rgba(214,170,77,.12);color:var(--gold)}
.exchange-unit-btn.active .eu-cost{color:var(--gold2)}
.exchange-unit-btn:disabled{opacity:.22;cursor:not-allowed}
.card-pick-label{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.card-pick-row{display:flex;gap:5px;flex-wrap:wrap}
.card-pick-opt{flex:1;min-width:55px;max-width:120px;padding:5px 6px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:10px;color:var(--muted);cursor:pointer;text-align:center;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-pick-opt.active{border-color:var(--gold2);background:rgba(214,170,77,.1);color:var(--text)}
.exchange-no-cards{font-size:11px;color:var(--muted);font-style:italic;padding:6px 0}
.exch-deploy-row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.exch-deploy-row:last-child{border-bottom:none}
.exch-deploy-row.locked{opacity:.5}
.edr-unit{font-weight:700;font-size:12px;min-width:70px}
.edr-cost{font-size:11px;color:var(--muted);flex:1}
.edr-card-pick{padding:3px 5px;border-radius:5px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:11px;max-width:130px}
.edr-buy-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;background:rgba(214,170,77,.15);border:1px solid rgba(214,170,77,.4);color:var(--gold);cursor:pointer;transition:.15s;white-space:nowrap}
.edr-buy-btn.active{background:var(--gold);color:#0d0a06}
.edr-buy-btn:hover{background:rgba(214,170,77,.25)}
.edr-locked{font-size:10px;color:var(--muted);font-style:italic}

/* ============== BATTLE OVERLAY ============== */
#battle-overlay{
  position:fixed;inset:0;z-index:1500;
  background:transparent;   /* Karte vollständig sichtbar */
  display:none;
  pointer-events:none;   /* nur das Battle-Panel selbst fängt Klicks; die untere
                            Spielerleiste (Gebiets-/Rats-/Charakterkarten) bleibt
                            während eines Kampfes bedienbar und zeigt weiterhin
                            durchgehend den aktiven Spieler. */
}
#battle-overlay.show{display:block}
.battle-panel{
  pointer-events:auto;
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%) scale(.85);transform-origin:bottom center;
  width:min(700px,96vw);background:linear-gradient(180deg,rgba(20,15,8,.98),rgba(12,8,4,1));
  border:2px solid var(--gold);border-radius:16px;padding:10px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(214,170,77,.18);
  animation:battlePanelUp .4s cubic-bezier(.16,1,.28,1);
}
@keyframes battlePanelUp{
  from{transform:translateX(-50%) translateY(40px) scale(.85);opacity:0}
  to{transform:translateX(-50%) translateY(0) scale(.85);opacity:1}
}
/* Desktop: flacher bauen, damit die kämpfenden Gebiete über dem Panel sichtbar bleiben */
.battle-panel .battle-head{margin-bottom:6px;padding-bottom:5px}
.battle-panel .battle-head h2{font-size:15px}
.battle-panel .battle-body{gap:8px}
.battle-panel .battle-side{padding:6px 10px}
.battle-panel .battle-side .troops{font-size:19px}
.battle-panel .dice-row{min-height:34px;margin-top:5px}
.battle-panel .battle-result{margin:5px 0}
.battle-panel .dice-choose{margin:5px 0 3px}
.battle-panel .sel-btn{padding:5px 9px}
.battle-panel .auto-divider{margin:5px 0}
.battle-panel .auto-btn{padding:6px 9px;font-size:11px}
.battle-panel .main-btns button{padding:8px 12px}

/* === Smartphone: Bottom-Sheet mit dunklem Hintergrund === */
@media(max-width:760px){
  /* Hier ist der dunkle Hintergrund eine bewusste Modal-Abdeckung (kein
     "Karte vollständig sichtbar" wie auf Desktop) — Klicks bleiben blockiert. */
  #battle-overlay{background:rgba(4,2,1,.78);pointer-events:auto;}
  #battle-overlay.show{display:flex;align-items:flex-end;}
  .battle-panel{
    position:relative;transform:none;width:100%;left:auto;bottom:auto;
    border-radius:16px 16px 0 0;border-bottom:none;
    max-height:88vh;overflow-y:auto;
    animation:battleSheetUp .38s cubic-bezier(.16,1,.28,1);
  }
  @keyframes battleSheetUp{
    from{transform:translateY(60px);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
}
.battle-head{
  text-align:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px;
}
.battle-head h2{color:var(--gold2);font-size:17px;letter-spacing:.06em;margin-bottom:3px}
.battle-head .battle-phase{color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.battle-body{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.battle-side{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.battle-side.a{box-shadow:inset 5px 0 0 var(--atk-color,#6e98ff)}
.battle-side.d{box-shadow:inset -5px 0 0 var(--def-color,#f05050)}
.battle-side.a .side-name{color:var(--atk-color,var(--gold2))}
.battle-side.d .side-name{color:var(--def-color,var(--gold2))}
.battle-side{position:relative}
.dmg-float{position:absolute;top:38%;left:50%;transform:translateX(-50%);font-size:42px;font-weight:800;
  color:#ff5a5a;text-shadow:0 2px 8px rgba(0,0,0,.8);pointer-events:none;z-index:5;
  animation:dmgFloat 1.05s ease-out forwards}
@keyframes dmgFloat{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.battle-side .side-head{display:flex;justify-content:space-between;margin-bottom:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.battle-side .side-name{color:var(--gold2);font-size:13px;font-weight:700;margin-bottom:3px}
.battle-side .troops{font-size:26px;font-weight:900;color:var(--gold2);font-family:Georgia,serif}
.battle-side .troops small{color:var(--muted);font-size:12px;font-weight:500;margin-left:4px}
.battle-side .specials-line{margin-top:4px;font-size:11px;color:var(--gold)}
.dice-row{min-height:46px;display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
/* 3D-Würfel (6 Flächen) — f7/f8 entfernt, da rotateX(180deg) auf mobilen
   Chromium-Browsern durch die Front-Fläche schimmert (backface-bug).
   Alle Flächen bekommen beim Endergebnis denselben Wert, sodass selbst
   ein bleed-through die korrekte Zahl zeigt. */
.die{
  width:44px;height:44px;position:relative;perspective:500px;
  transition:opacity .3s, filter .3s;
}
.die.unused{opacity:.35;filter:grayscale(.5)}
.die .cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.28,1)}
.die .face{
  position:absolute;inset:0;border-radius:10px;display:grid;place-items:center;
  font-size:20px;font-weight:900;backface-visibility:hidden;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.18),inset 0 -4px 8px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
}
.die.black .face{background:linear-gradient(145deg,#252833,#07080d);color:#f7f1e6}
.die.white .face{background:linear-gradient(145deg,#fff6df,#bdb39f);color:#151515;border-color:rgba(0,0,0,.18)}
.die.gold  .face{
  background:linear-gradient(145deg,#f3d890,#8a6a26);color:#1a140a;
  border-radius:0;border-color:rgba(0,0,0,.28);
  /* Bipyramid silhouette (real d8 shape) instead of a relabelled cube face */
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.die.gold .face::after{
  content:"";position:absolute;left:9%;right:9%;top:50%;height:1px;
  background:rgba(0,0,0,.32);transform:translateY(-.5px);pointer-events:none;
}
.face.f1{transform:rotateY(  0deg) translateZ(22px)}
.face.f2{transform:rotateY( 90deg) translateZ(22px)}
.face.f3{transform:rotateY(180deg) translateZ(22px)}
.face.f4{transform:rotateY(-90deg) translateZ(22px)}
.face.f5{transform:rotateX( 90deg) translateZ(22px)}
.face.f6{transform:rotateX(-90deg) translateZ(22px)}
.die.v1 .cube{transform:rotateX(  0deg) rotateY(  0deg)}
.die.v2 .cube{transform:rotateX(  0deg) rotateY(-90deg)}
.die.v3 .cube{transform:rotateX(  0deg) rotateY(180deg)}
.die.v4 .cube{transform:rotateX(  0deg) rotateY( 90deg)}
.die.v5 .cube{transform:rotateX(-90deg) rotateY(  0deg)}
.die.v6 .cube{transform:rotateX( 90deg) rotateY(  0deg)}
.die.roll .cube{animation:tumble .6s linear infinite}
.die.roll{animation:hop .6s cubic-bezier(.16,.9,.2,1) infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes tumble{0%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(360deg) rotateY(180deg)}100%{transform:rotateX(720deg) rotateY(360deg)}}
.die.win .face{box-shadow:inset 0 2px 4px rgba(255,255,255,.2),0 0 18px rgba(120,255,120,.6)}
.die.lose{opacity:.45;filter:saturate(.4)}
.vs{font-family:Georgia,serif;font-size:26px;font-weight:900;color:var(--gold);text-align:center}
.battle-result{
  margin-top:18px;padding:14px;text-align:center;border-radius:12px;
  background:rgba(214,170,77,.08);border:1px solid var(--line);
}
.battle-result .res-text{font-size:16px;color:var(--gold2);margin-bottom:6px}
.battle-result .res-pill{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.battle-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* Würfelauswahl Angreifer */
.dice-choose{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.dice-choose-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.dice-choose-btns{display:flex;gap:5px}
.sel-btn{flex:1;padding:8px 4px 6px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:2px}
.sel-btn .dcb-num{font-size:20px;font-weight:900;font-family:Georgia,serif;line-height:1}
.sel-btn .dcb-sub{font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.sel-btn.active{background:var(--gold);color:#0d0a06;border-color:var(--gold)}
.sel-btn.active .dcb-num,.sel-btn.active .dcb-sub{color:#0d0a06}
.sel-btn:disabled{opacity:.22;cursor:not-allowed}
.sel-btn:not(:disabled):not(.active):hover{background:rgba(255,255,255,.09);color:var(--text)}
/* Haupt-Aktionen */
.main-btns{display:flex;gap:8px}
.main-btns>button{flex:1}
.def-btn{background:rgba(80,130,200,.25)!important;border-color:rgba(80,130,200,.6)!important}
.def-btn.ready{background:rgba(80,200,120,.2)!important;border-color:rgba(80,200,120,.5)!important;color:#6fd98c!important}
/* Auto-Kampf Trenner */
.auto-divider{display:flex;align-items:center;gap:8px}
.auto-divider::before,.auto-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auto-divider span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* Auto-Roll */
.auto-roll-row{display:flex;gap:5px}
.auto-btn{flex:1;padding:7px 0;border-radius:8px;font-size:11px;font-weight:700;border:1px solid rgba(214,170,77,.3);background:rgba(214,170,77,.07);color:var(--gold);cursor:pointer;transition:.15s}
.auto-btn:not(:disabled):hover{background:rgba(214,170,77,.16);border-color:var(--gold)}
.auto-btn:disabled{opacity:.22;cursor:not-allowed}
.auto-btn.stop{border-color:rgba(220,60,60,.4);background:rgba(220,60,60,.12);color:#ff7070;flex:none;padding:7px 12px}
.auto-btn.stop:hover{background:rgba(220,60,60,.24)}

/* ===== Kinematische Kampfeffekte (innerhalb des Panels) ===== */
.battle-clash{
  position:absolute;left:50%;top:46%;width:150px;height:150px;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:8;
}
.battle-clash.show{animation:battleClash .6s cubic-bezier(.18,.9,.22,1) forwards}
.battle-clash .ring{
  position:absolute;inset:18px;border-radius:50%;
  border:2px solid rgba(243,216,144,.85);box-shadow:0 0 36px rgba(243,216,144,.5);
}
.battle-clash .swords{
  position:absolute;inset:0;display:grid;place-items:center;font-size:80px;
  color:var(--gold2);text-shadow:0 0 22px rgba(243,216,144,.9),0 4px 0 #000;
}
@keyframes battleClash{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}
  25%{transform:translate(-50%,-50%) scale(1.15) rotate(4deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.8);opacity:0}
}
.battle-flash{
  position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;border-radius:20px;
  background:radial-gradient(circle at 50% 46%,rgba(255,240,185,.38),transparent 44%);
}
.battle-flash.on{animation:battleFlash .5s forwards}
@keyframes battleFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.battle-slash{
  position:absolute;left:28%;top:44%;width:230px;height:5px;border-radius:999px;
  z-index:8;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(243,216,144,.95),transparent);
  box-shadow:0 0 14px rgba(243,216,144,.7);transform:rotate(-20deg) scaleX(.2);
}
.battle-slash.on{animation:battleSlash .62s cubic-bezier(.16,1,.28,1) forwards}
@keyframes battleSlash{
  0%{opacity:0;transform:translate(0,0) rotate(-20deg) scaleX(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(200px,-78px) rotate(-20deg) scaleX(1.2)}
}
.battle-side.a.advance{animation:battleAdvance .92s cubic-bezier(.16,1,.28,1)}
.battle-side.d.hit{animation:battleHit .78s cubic-bezier(.18,.9,.22,1)}
@keyframes battleAdvance{
  0%{transform:translate(0,0)}45%{transform:translate(24px,-8px) scale(1.04)}
  72%{transform:translate(14px,-4px) scale(1.02)}100%{transform:translate(0,0)}
}
@keyframes battleHit{
  0%{transform:translate(0,0)}22%{transform:translate(-16px,8px) scale(.94)}
  55%{transform:translate(-4px,2px) scale(.99)}100%{transform:translate(0,0)}
}

/* Conquer banner */
.conquer-banner{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  z-index:2000;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#f3d890,#8a6a26);color:#1a140a;
  padding:24px 50px;border-radius:18px;border:3px solid #fff8e6;
  font-size:30px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  font-family:Georgia,serif;text-shadow:0 2px 0 rgba(255,255,255,.4);
  box-shadow:0 0 80px rgba(214,170,77,.8), 0 20px 60px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.16,1,.28,1), opacity .4s;
}
.conquer-banner.show{transform:translate(-50%,-50%) scale(1);opacity:1}
/* ── Gebietskarten in der Seitenleiste ─── */
.terr-card{display:flex;flex-direction:column;align-items:center;padding:8px 6px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:default;text-align:center;min-width:60px;flex-shrink:0}
.tc-symbol{font-size:22px;line-height:1;margin-bottom:2px}
.tc-type{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tc-name{font-size:10px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.exchange-trigger{margin-top:8px;padding:7px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--gold);font-size:11px;cursor:pointer;text-align:center;transition:.15s}
.exchange-trigger:hover{background:rgba(214,170,77,.08);border-color:var(--gold)}
.exchange-trigger.has-combo{border-style:solid;border-color:var(--gold);color:var(--gold2);
  background:rgba(214,170,77,.14);font-weight:700;animation:comboPulse 1.6s ease-in-out infinite}
@keyframes comboPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,170,77,.0)}50%{box-shadow:0 0 10px 1px rgba(214,170,77,.45)}}
/* ── Exchange Modal ──────────────────── */
.exch-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.exch-section:last-child{border-bottom:none;margin-bottom:0}
.exch-sect-title{font-size:12px;font-weight:700;color:var(--gold2);letter-spacing:.04em;margin-bottom:4px}
.exch-sub{font-size:10px;color:var(--muted);margin-bottom:8px}
.exch-cards-row{display:flex;gap:7px;flex-wrap:wrap}
.exch-card{padding:8px 8px 6px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;text-align:center;min-width:70px;transition:.15s}
.exch-card:hover{border-color:var(--gold)}
.exch-card.active{border-color:var(--gold);background:rgba(214,170,77,.14);box-shadow:0 0 8px rgba(214,170,77,.2)}
.ec-icon{font-size:20px;line-height:1;margin-bottom:2px}
.ec-type{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.ec-name{font-size:10px;color:var(--text2)}
.eui-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:13px;font-weight:700}
.eui-cost{color:var(--gold)}
.exch-troops-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.exch-troop-btn{padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center}
.exch-troop-btn.ok{border-color:rgba(80,200,120,.4);background:rgba(80,200,120,.07)}
.etb-label{font-size:11px;font-weight:700;color:var(--text);margin-bottom:2px}
.etb-reward{font-size:13px;font-weight:900;color:var(--gold);margin-bottom:6px}
.etb-confirm{padding:5px 12px;border-radius:7px;font-size:11px;font-weight:700;background:var(--gold);color:#0d0a06;border:none;cursor:pointer}
.etb-locked{font-size:10px;color:var(--muted);font-style:italic}
/* ── Hoher Rat Phase Overlay ─────────────────────────────────── */
.cpo-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;background:rgba(8,6,2,.88);backdrop-filter:blur(5px)}
.cpo-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 22px;max-width:320px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cpo-title{font-size:22px;font-weight:900;color:var(--gold);margin-bottom:4px;letter-spacing:.04em}
.cpo-sub{font-size:11px;color:var(--muted);margin-bottom:20px}
/* 3-D Karten-Flip */
.cpo-card-area{perspective:700px;margin-bottom:22px}
.cpo-card{width:150px;height:210px;margin:0 auto;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.cpo-card.flipped{transform:rotateY(180deg)}
.cpo-back,.cpo-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}
.cpo-back{background:linear-gradient(145deg,#1c1408 0%,#2e1e08 100%);border-color:var(--gold)}
.cpo-back-icon{font-size:44px;opacity:.55;margin-bottom:8px}
.cpo-back-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.6}
.cpo-front{transform:rotateY(180deg);background:rgba(255,255,255,.04);text-align:center}
.cpof-type{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cpof-name{font-size:15px;font-weight:900;color:var(--text);margin-bottom:8px;line-height:1.2}
.cpof-effect{font-size:10px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.cpof-cost{font-size:22px;font-weight:900;color:var(--gold)}
.cpo-actions{display:flex;flex-direction:column;gap:6px}
.cpo-actions button{padding:10px 16px;border-radius:9px;font-size:13px;font-weight:700}

/* Tooltip */
.tooltip{
  position:fixed;z-index:3000;background:rgba(8,10,16,.95);border:1px solid var(--gold);
  border-radius:10px;padding:8px 12px;font-size:12px;color:var(--gold2);
  pointer-events:none;opacity:0;transition:opacity .2s;max-width:240px;line-height:1.4;
}
.tooltip.show{opacity:1}

/* Toast */
#toast{
  position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:3500;background:linear-gradient(180deg,#f3d890,#8a6a26);color:#1a140a;
  padding:10px 20px;border-radius:11px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 8px 22px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s; max-width:90vw; text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Responsive */
@media (max-width:760px){
  .cards-modal-body{grid-template-columns:1fr}
  #map-wrap{bottom:76px;height:auto}
  .bp-strip{gap:9px;padding:5px 10px;font-size:11px}
  .bp-strip #stripName{max-width:90px}
  .bps-pop-log{width:260px}
  .topbar{flex-wrap:wrap;height:auto;padding:8px}
  .stat-chip{display:none}
  .bp-actions{gap:5px;padding:5px 8px}
  .bp-actions button{padding:6px 9px;font-size:11px}
  .bp-actions #endPhaseBtn{padding:6px 12px;font-size:11px}
  .battle-body{grid-template-columns:1fr 1fr;gap:8px}
  .vs{display:none}
  .battle-side .troops{font-size:22px}
  .dice-row{min-height:40px;gap:5px}
}
/* ── Karten-Einflug-Animation (gezogene/erhaltene Karte) ───────── */
@keyframes cardFlyIn{
  0%   { transform: translate(-50%, 55vh) scale(.35) rotate(-10deg); opacity: 0; }
  14%  { transform: translate(-50%, -50%) scale(1.08) rotate(0deg);  opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: 1; }
  68%  { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: 1; }
  100% { transform: translate(-50%, 48vh) scale(.18)  rotate(7deg);  opacity: 0; }
}
.card-flyin{ position:fixed; left:50%; top:50%; z-index:400; pointer-events:none;
  animation: cardFlyIn 1.8s cubic-bezier(.18,.7,.2,1) forwards; }
.card-flyin .cfi-card{
  width:172px; min-height:228px; border-radius:14px; padding:16px 14px;
  background:linear-gradient(160deg,#2a2114,#1a140b); border:2px solid #c8a24a;
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 22px rgba(200,162,74,.35);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  color:#f3e6c8; font-family:inherit; }
.card-flyin .cfi-icon{ font-size:54px; line-height:1; margin-top:8px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.card-flyin .cfi-name{ font-size:16px; font-weight:700; letter-spacing:.02em; color:#f6d98b; }
.card-flyin .cfi-sub{ font-size:11.5px; line-height:1.35; color:#cdbb93; opacity:.9; }
.card-flyin .cfi-back{ width:172px; min-height:228px; border-radius:14px;
  background:repeating-linear-gradient(45deg,#241a0e,#241a0e 8px,#2d2110 8px,#2d2110 16px);
  border:2px solid #c8a24a; box-shadow:0 22px 60px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; font-size:44px; color:#c8a24a; }

/* ── Karte vergrößern (anklicken → einfliegen, groß & lesbar) ──── */
.card-zoom-backdrop{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,2,.74);backdrop-filter:blur(3px);animation:czFade .2s ease;cursor:pointer;}
.card-zoom-backdrop.closing{animation:czFadeOut .25s ease forwards}
.card-zoom{width:min(340px,84vw);border-radius:20px;padding:26px 24px;
  background:linear-gradient(165deg,#2c2316,#181109);border:2.5px solid #c8a24a;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 44px rgba(200,162,74,.4);
  display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;color:#f3e6c8;
  animation:czPop .4s cubic-bezier(.2,.8,.2,1);}
@keyframes czPop{from{transform:scale(.28) translateY(46vh);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes czFade{from{opacity:0}to{opacity:1}}
@keyframes czFadeOut{to{opacity:0}}
.card-zoom .cz-icon{font-size:70px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.card-zoom .cz-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cdbb93}
.card-zoom .cz-name{font-size:23px;font-weight:800;color:#f6d98b;line-height:1.2}
.card-zoom .cz-effect{font-size:15px;line-height:1.5;color:#e8dcc0}
.card-zoom .cz-meta{font-size:12px;color:#b7a780;letter-spacing:.03em}
.card-zoom .cz-hint{margin-top:4px;font-size:11px;color:#9a8a66}
.card-zoom .cz-action{margin-top:10px;padding:10px 24px;background:linear-gradient(180deg,#5b9a55,#3f7a3a);
  color:#fff;border:0;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;
  box-shadow:0 5px 16px rgba(91,154,85,.45)}
.card-zoom .cz-action:hover{filter:brightness(1.12)}

/* ── Gebietsform auf Karten ─────────────────────────────────────── */
.terr-card .terr-shape{width:100%;height:46px;display:block;margin:2px 0 3px}
.terr-card .tc-mini-sym{position:absolute;top:4px;right:6px;font-size:13px;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.card-zoom .cz-shape{width:150px;height:110px;display:flex;align-items:center;justify-content:center}
.card-zoom .cz-shape .terr-shape{width:100%;height:100%}

/* ── Verteidigungs-Optionen im Kampf (Charaktere/Ratskarten) ────── */
#defensePanel{margin:6px 0 2px;padding:8px 10px;border:1px solid rgba(91,154,85,.4);
  border-radius:10px;background:rgba(91,154,85,.08)}
#defensePanel .def-opts-label{font-size:11px;letter-spacing:.06em;color:#9fd49a;margin-bottom:6px;font-weight:700}
#defensePanel .def-opts-row{display:flex;flex-wrap:wrap;gap:6px}
#defensePanel .def-chip{font-size:11px;padding:5px 9px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--muted);cursor:default}
#defensePanel .def-chip.char.active{border-color:#5b9a55;color:#bfe6ba;background:rgba(91,154,85,.16)}
#defensePanel .def-chip.char-arm{border-color:#5b9a55;color:#bfe6ba;background:rgba(91,154,85,.08);cursor:pointer}
#defensePanel .def-chip.char-arm:hover{background:rgba(91,154,85,.24)}
#defensePanel .def-chip.char-hire{border-color:#c9a227;color:#f6d98b;background:rgba(201,162,39,.10);cursor:pointer}
#defensePanel .def-chip.char-hire:hover{background:rgba(201,162,39,.26)}
#defensePanel .def-chip.card.suitable{border-color:#d6aa4d;color:#f6d98b;background:rgba(214,170,77,.16);
  cursor:pointer;box-shadow:0 0 10px rgba(214,170,77,.3);font-weight:700}
#defensePanel .def-chip.card.suitable:hover{background:rgba(214,170,77,.28)}
#defensePanel .def-chip.card[disabled]{opacity:.4}
#defensePanel .def-opts-none{font-size:10.5px;color:var(--muted);font-style:italic;margin-top:5px}

/* ── Kombi-Hervorhebung im Kartentausch ─────────────────────────── */
.exch-card.combo{box-shadow:0 0 0 2px #f6d98b, 0 0 16px rgba(214,170,77,.6);transform:translateY(-3px);position:relative}
.exch-card.combo::after{content:"★";position:absolute;top:-8px;right:-6px;font-size:14px;color:#f6d98b;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.combo-hint{font-size:11px;color:#f6d98b;font-weight:600}

/* ── Boni-Overlay: kontinentgefärbte Karte mit Name + Bonus ─────── */
#bonusOverlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 38%,rgba(10,16,26,.86),rgba(4,6,10,.95));backdrop-filter:blur(3px);
  padding:56px 18px 26px;cursor:pointer}
#bonusOverlay .bo-title{font-weight:800;color:#f6d98b;font-size:19px;letter-spacing:.04em;margin-bottom:3px}
#bonusOverlay .bo-hint{color:var(--muted);font-size:12px;margin-bottom:14px}
#bonusOverlay .bo-map{width:min(94vw,1120px);max-height:78vh;height:auto;display:block;
  background:rgba(10,16,26,.5);border-radius:12px;border:1px solid rgba(214,170,77,.25)}
.bo-map-name{font-weight:800;fill:#ffffff;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:2px;stroke-linejoin:round;pointer-events:none}
.bo-map-bonus{font-weight:800;fill:#ffe27a;paint-order:stroke;stroke:rgba(0,0,0,.8);stroke-width:2px;stroke-linejoin:round;pointer-events:none}
/* Truppen-Übersicht (alle Häuser) */
#overviewOverlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 38%,rgba(10,16,26,.86),rgba(4,6,10,.95));backdrop-filter:blur(3px);
  padding:56px 18px 26px;cursor:pointer}
#overviewOverlay .ov-panel{width:min(94vw,560px);max-height:80vh;overflow:auto;background:var(--panel);
  border:1px solid rgba(214,170,77,.28);border-radius:14px;padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,.5);cursor:default}
#overviewOverlay .ov-title{font-weight:800;color:#f6d98b;font-size:18px;letter-spacing:.03em;text-align:center;margin-bottom:14px}
#overviewOverlay .ov-rows{display:flex;flex-direction:column;gap:7px}
#overviewOverlay .ov-row{display:grid;grid-template-columns:26px minmax(90px,1fr) minmax(70px,2fr) auto auto;align-items:center;gap:10px;
  padding:7px 10px;border-radius:9px;background:rgba(10,16,26,.5);border:1px solid rgba(214,170,77,.10)}
#overviewOverlay .ov-you{border-color:rgba(214,170,77,.55);background:rgba(214,170,77,.09)}
#overviewOverlay .ov-dead{opacity:.5}
#overviewOverlay .ov-sigil{font-size:18px;text-align:center}
#overviewOverlay .ov-name{font-weight:700;color:#e8e2d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overviewOverlay .ov-name em{color:var(--gold2);font-style:normal;font-size:11px;opacity:.85}
#overviewOverlay .ov-bar-wrap{height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
#overviewOverlay .ov-bar{display:block;height:100%;border-radius:5px;min-width:2px;transition:width .3s ease}
#overviewOverlay .ov-troops{font-weight:800;color:#f6d98b;white-space:nowrap;text-align:right;min-width:52px}
#overviewOverlay .ov-regions{color:#cfd6e6;white-space:nowrap;text-align:right;min-width:44px}
#overviewOverlay .ov-troops .muted,#overviewOverlay .ov-regions .muted{color:var(--muted);font-weight:600;font-size:11px}
#overviewOverlay .ov-hint{color:var(--muted);font-size:12px;text-align:center;margin-top:14px}
@media(max-width:520px){#overviewOverlay .ov-row{grid-template-columns:24px 1fr auto auto;}#overviewOverlay .ov-bar-wrap{display:none}}
/* Hauptmenü-Kontinentkarte */
/* Kontinentkarte (Lobby / Boni-Overlay) */
.menu-map{width:100%;height:auto;display:block;border-radius:12px;border:1px solid rgba(214,170,77,.22);background:rgba(10,16,26,.4)}
#bonusBtn.active{background:var(--gold);color:#1a1208}

/* ── Ratskarten-Kauf: einfliegen, aufdecken (Flip), in die Hand schrumpfen ── */
.card-purchase{position:fixed;left:50%;top:50%;z-index:450;pointer-events:none;
  perspective:1000px;animation:cpFly 2.3s ease forwards;}
.card-purchase .cp-inner{position:relative;width:176px;height:240px;transform-style:preserve-3d;
  animation:cpFlip 2.3s ease forwards;}
.card-purchase .cp-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:15px;
  border:2.5px solid #c8a24a;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:16px;box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 26px rgba(200,162,74,.35);}
.card-purchase .cp-back{background:repeating-linear-gradient(45deg,#241a0e,#241a0e 8px,#2d2110 8px,#2d2110 16px);
  color:#c8a24a;font-size:50px;}
.card-purchase .cp-front{background:linear-gradient(160deg,#2a2114,#1a140b);color:#f3e6c8;transform:rotateY(180deg);}
@keyframes cpFly{
  0%{transform:translate(-50%,55vh) scale(.4);opacity:0}
  13%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  72%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  100%{transform:translate(-50%,52vh) scale(.16);opacity:0}
}
@keyframes cpFlip{
  0%,20%{transform:rotateY(0deg)}      /* Rückseite */
  46%,100%{transform:rotateY(180deg)}  /* aufgedeckt */
}

/* ===== site control bar integration ===== */
/* ===== brettspiele.fun integration: site control bar ===== */
#wb-sitebar{position:fixed;top:10px;right:12px;z-index:600;display:flex;gap:8px;align-items:center;
  background:rgba(10,12,18,.62);border:1px solid var(--line);border-radius:12px;padding:6px 8px;backdrop-filter:blur(10px)}
#wb-sitebar select,#wb-sitebar button,#wb-sitebar a{font-family:Georgia,serif;font-size:12px;border:1px solid var(--line);
  border-radius:8px;background:rgba(255,255,255,.05);color:var(--gold2);padding:6px 9px;cursor:pointer;text-decoration:none;
  line-height:1;white-space:nowrap;transition:all .2s}
#wb-sitebar select{color:var(--text)}
#wb-sitebar button:hover,#wb-sitebar a:hover,#wb-sitebar select:hover{border-color:var(--gold);background:rgba(214,170,77,.12)}
#wb-sitebar a.wb-shelf{display:inline-flex;align-items:center;gap:5px}
/* while a match is running, sit just under the 64px in-game topbar (right side has action buttons) */
body:has(#game.active) #wb-sitebar{top:72px}
/* the global "back to shelf" button (game-chrome.js) is only shown on the main
   menu (see index.html #wb-chrome-offset) — once inside the lobby or an active
   match, players exit via the in-game ☰ quick-menu instead. */
@media(max-width:680px){#wb-sitebar{top:auto;bottom:10px;right:8px;left:8px;justify-content:center;flex-wrap:wrap}
  body:has(#game.active) #wb-sitebar{top:auto}}
/* keep the in-game topbar clear of the control bar on small screens */
@media(max-width:680px){#game .topbar{padding-top:6px}}

/* ===== fix: #joinMenu was never given a display rule in the original ===== */
#joinMenu.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;
  background:radial-gradient(ellipse at 20% 10%,rgba(214,170,77,.10),transparent 40%),
  radial-gradient(ellipse at 80% 90%,rgba(52,91,152,.08),transparent 40%),
  linear-gradient(160deg,#06080d 0%,#0c0f17 100%)}

/* ===== LIGHT THEME (parchment / manuscript) ===== */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#efe6d2;--bg2:#e6dabf;--panel:rgba(252,248,238,.94);
  --gold:#9a6f1e;--gold2:#73510f;--gold-deep:#b8923f;
  --text:#2a2114;--text2:#5c513c;--muted:#6f6347;--line:rgba(120,90,30,.32);--ink:#2a2114;
}
html[data-theme="light"] body{background:#efe6d2}
html[data-theme="light"] #mainMenu.active,html[data-theme="light"] #spMenu.active,
html[data-theme="light"] #mpMenu.active,html[data-theme="light"] #loadScreen.active,
html[data-theme="light"] #optMenu.active,html[data-theme="light"] #lobby.active,
html[data-theme="light"] #howtoMenu.active,html[data-theme="light"] #joinMenu.active{
  background:radial-gradient(ellipse at 20% 10%,rgba(214,170,77,.20),transparent 44%),
  radial-gradient(ellipse at 80% 90%,rgba(52,91,152,.12),transparent 44%),
  linear-gradient(160deg,#f4ecd9 0%,#e6dabd 100%)!important}
html[data-theme="light"] .menu-card,html[data-theme="light"] .howto-card,
html[data-theme="light"] .lobby-card,html[data-theme="light"] .modal{
  background:linear-gradient(180deg,#fdfbf4,#f3ebd7)!important;
  box-shadow:0 18px 48px rgba(120,90,30,.20)!important}
html[data-theme="light"] .brand h1,html[data-theme="light"] .conquer-banner{
  background:linear-gradient(180deg,#9a6f1e 0%,#73510f 55%,#4a3408 100%)!important;
  -webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .conquer-banner{-webkit-text-fill-color:initial;color:#2a2114;
  background:linear-gradient(180deg,#f3d890,#c9a455)!important;border-color:#9a6f1e!important}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea,
html[data-theme="light"] .name-input,html[data-theme="light"] .rule-row input,
html[data-theme="light"] .rule-row select,html[data-theme="light"] #joinCode{
  background:rgba(255,255,255,.72)!important;color:var(--text)!important}
html[data-theme="light"] .topbar,html[data-theme="light"] .bottom-panel,
html[data-theme="light"] .bp-strip,html[data-theme="light"] .bp-actions{
  background:linear-gradient(180deg,rgba(252,248,238,.96),rgba(244,236,217,.92))!important}
html[data-theme="light"] .bps-pop{background:rgba(252,248,238,.99)!important;color:#2a2114!important}
html[data-theme="light"] .cards-modal .cards-panel{background:rgba(255,255,255,.55)!important}
html[data-theme="light"] .topbar .player-tag{background:rgba(120,90,30,.08)!important}
html[data-theme="light"] .lobby-back-link,html[data-theme="light"] #mapZoomBtns button,
html[data-theme="light"] #wb-sitebar{background:rgba(255,255,255,.7)!important}
html[data-theme="light"] .house-dropdown{background:#fdfaf0!important}
html[data-theme="light"] .house-opt{color:#2a2114!important}
html[data-theme="light"] .house-opt .ho-motto,html[data-theme="light"] .house-opt .ho-tag{color:#7a6c4c!important}
html[data-theme="light"] .modal-backdrop{background:rgba(60,45,18,.42)!important}
html[data-theme="light"] .battle-panel{background:linear-gradient(180deg,#fdfaf0,#f0e6cf)!important}
html[data-theme="light"] .sov-inner,html[data-theme="light"] .tooltip{
  background:linear-gradient(180deg,#fdfaf0,#f0e6cf)!important;color:var(--text)}
html[data-theme="light"] .cpo-overlay{background:rgba(60,45,18,.5)!important}
html[data-theme="light"] #turnBanner{background:#fdfaf0!important}
html[data-theme="light"] button{color:var(--text)}
html[data-theme="light"] .menu-btn,html[data-theme="light"] .menu-btn .btn-icon{color:var(--gold2)}
html[data-theme="light"] .menu-btn.primary{color:#0b0d14}