:root {
  --gold:#d0a36a !important;
  --gold-bright:#ead7b5 !important;
  --gold-deep:#8f5b38 !important;
  --gold-line:#6f8784 !important;
  --gold-dark:#152326 !important;
  --cream:#e8dfcf !important;
  --ink:#091214 !important;
  --muted:#9eadab !important;
  --panel-1:rgba(21,39,41,.97) !important;
  --panel-2:rgba(7,16,19,.98) !important;
}

/* One forged scrollbar treatment for the page and every scrollable game panel. */
html, body, * {
  scrollbar-width:thin;
  scrollbar-color:#557c7f #071114;
}
*::-webkit-scrollbar { width:11px;height:11px; }
*::-webkit-scrollbar-track {
  background:linear-gradient(90deg,#061014,#0b1c20 52%,#061014);
  border-left:1px solid #1f3b3f;
}
*::-webkit-scrollbar-thumb {
  min-height:42px;
  border:2px solid #071114;
  border-radius:8px;
  background:linear-gradient(90deg,#31585c,#6f9899 50%,#31585c);
  box-shadow:inset 0 0 0 1px rgba(205,234,230,.12);
}
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(90deg,#87623d,#d0a36a 50%,#87623d); }
*::-webkit-scrollbar-corner { background:#071114; }
*::-webkit-scrollbar-button { display:none;width:0;height:0; }

/* Keep every panel scrollable by wheel, keyboard and touch without drawing a
   browser rail over the game artwork. */
* { scrollbar-width:none !important; -ms-overflow-style:none; }
*::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }

body { background:#090c0a !important; }
#bg { background:transparent !important; filter:none; transform:none; }
#bg::after {
  background:
    radial-gradient(ellipse at 76% 45%,transparent 0 22%,rgba(4,7,7,.18) 58%,rgba(3,5,5,.64) 100%),
    linear-gradient(90deg,rgba(2,4,4,.08) 0 46%,rgba(2,5,5,.38) 68%,rgba(2,4,4,.9) 100%),
    linear-gradient(0deg,rgba(3,5,5,.66),transparent 42%) !important;
}

.panel {
  border-radius:5px !important;
  border-color:#587373 !important;
  background:linear-gradient(145deg,rgba(26,45,47,.98),rgba(8,17,20,.99)) !important;
  box-shadow:0 0 0 2px rgba(3,9,11,.82),0 24px 60px rgba(0,0,0,.55),inset 0 1px rgba(204,230,224,.11) !important;
}

.btn { border-radius:3px !important; letter-spacing:.12em !important; }
.btn-gold,.btn-play-square {
  color:#eef3ef !important;
  border-color:#769a9b !important;
  background:linear-gradient(180deg,#668f91 0%,#3a6467 50%,#24474b 57%,#142d31 100%) !important;
  box-shadow:0 0 0 2px #0a1d20,0 0 0 3px #688f91,0 12px 28px rgba(0,0,0,.58),inset 0 1px rgba(218,242,237,.28) !important;
}
.btn-stone {
  background:linear-gradient(180deg,#3c5252,#24383a 54%,#111e21) !important;
  box-shadow:0 0 0 1px #091215,0 0 0 2px #617f80,0 9px 23px rgba(0,0,0,.56),inset 0 1px rgba(205,233,226,.16) !important;
}
.btn-green { color:#eef5ee !important;background:linear-gradient(180deg,#668b8b,#365f62 55%,#1a3439) !important;box-shadow:0 0 0 2px #0b1e22,0 0 0 3px #789a98,0 10px 24px rgba(0,0,0,.55),inset 0 1px rgba(216,244,237,.3) !important; }
.btn-red { color:#f5e4dc !important;background:linear-gradient(180deg,#9f6657,#703e37 55%,#3d2424) !important;box-shadow:0 0 0 2px #241416,0 0 0 3px #9b685d,0 10px 24px rgba(0,0,0,.55) !important; }
.btn-play-square { border-radius:5px !important; }
.btn-play-square .tri { border-left-color:#382716 !important; }

#screen-menu {
  align-items:flex-end !important;
  justify-content:center !important;
  padding:clamp(24px,4.2vw,68px) max(4vw,env(safe-area-inset-right)) clamp(24px,4.2vw,68px) !important;
  background:transparent;
  isolation:isolate;
}
#screen-menu::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0 48%,rgba(5,8,8,.22) 63%,rgba(4,7,7,.8) 100%),linear-gradient(180deg,rgba(3,5,5,.24),transparent 30%,rgba(3,5,5,.54));
}
.war-council {
  position:relative;
  z-index:2;
  width:min(540px,42vw);
  min-width:410px;
  padding:clamp(22px,3.1vh,34px) clamp(24px,3.2vw,46px) clamp(20px,2.8vh,30px);
  border:1px solid rgba(111,135,132,.7);
  background:linear-gradient(145deg,rgba(19,37,39,.92),rgba(6,14,17,.88));
  box-shadow:0 0 0 1px rgba(2,8,10,.82),0 24px 80px rgba(0,0,0,.52),inset 0 1px rgba(202,229,222,.1);
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
  animation:council-enter .55s cubic-bezier(.2,.75,.25,1) both;
}
.war-council::before,.war-council::after {
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  height:1px;
  background:linear-gradient(90deg,transparent,#75918e,transparent);
  opacity:.64;
}
.war-council::before { top:8px; }
.war-council::after { bottom:8px; }
#screen-menu .logo {
  display:block;
  width:min(390px,100%) !important;
  max-height:clamp(78px,15vh,132px);
  object-fit:contain;
  object-position:left center;
  margin:4px 0 8px;
  filter:drop-shadow(0 13px 24px rgba(0,0,0,.58));
  animation:none !important;
}
.council-kicker {
  color:#c9a765;
  font:700 clamp(10px,1vw,12px)/1.3 var(--display);
  letter-spacing:.28em;
  text-transform:uppercase;
}
.council-copy {
  max-width:490px;
  margin:0 0 clamp(14px,2.2vh,23px);
  color:#b8b5a6;
  font:500 clamp(13px,1.2vw,15px)/1.45 var(--body);
}
.council-play {
  position:relative;
  width:100%;
  min-height:clamp(72px,11vh,94px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:17px;
  padding:13px 22px;
  border:1px solid #c9a06c;
  color:#f3e7d2;
  cursor:pointer;
  text-align:left;
  background:linear-gradient(110deg,#bf9665,#8b5838 56%,#4e3023);
  box-shadow:0 11px 30px rgba(0,0,0,.5),inset 0 1px rgba(255,237,204,.4),inset 0 -3px rgba(35,16,10,.4);
  transition:transform .16s ease,filter .2s ease;
  overflow:hidden;
}
.council-play::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.34) 42%,transparent 58%);
  transform:translateX(-110%);
  transition:transform .48s ease;
}
.council-play:hover { transform:translateY(-3px); filter:brightness(1.05); }
.council-play:hover::after { transform:translateX(110%); }
.council-play:active { transform:translateY(4px) scale(.985,.93);filter:brightness(.82) saturate(.88);box-shadow:0 8px 18px rgba(0,0,0,.48),inset 0 8px 12px rgba(45,25,10,.38);transition-duration:.045s; }
.council-play-mark {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(72,43,16,.55);
  transform:rotate(45deg);
  background:rgba(83,47,15,.12);
}
.council-play-mark span { width:0;height:0;border-left:15px solid #f0dfc5;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:rotate(-45deg) translateX(2px); }
.council-play small,.council-card small { display:block;font:700 9px/1.2 var(--display);letter-spacing:.19em;text-transform:uppercase;opacity:.68; }
.council-play strong { display:block;margin-top:4px;font:900 clamp(20px,2.2vw,28px)/1 var(--display);letter-spacing:.055em;text-transform:uppercase; }
.council-play-arrow { font:300 42px/1 var(--display);opacity:.55; }
.council-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.council-card {
  min-height:clamp(58px,8vh,70px);
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 14px;
  border:1px solid rgba(96,126,126,.72);
  color:#e7dcc1;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(135deg,rgba(48,70,70,.94),rgba(15,29,32,.97));
  box-shadow:inset 0 1px rgba(205,233,226,.11),0 5px 15px rgba(0,0,0,.3);
  transition:transform .14s ease,border-color .18s ease,background-color .18s ease;
}
.council-card:hover { transform:translateY(-2px);border-color:#c69b67;background:linear-gradient(135deg,rgba(62,86,85,.98),rgba(23,39,41,.99)); }
.council-card:active { transform:translateY(3px) scale(.98,.91);filter:brightness(.76) saturate(.84);box-shadow:inset 0 7px 10px rgba(0,0,0,.58);transition-duration:.045s; }
.card-rune { width:29px;height:29px;flex:none;display:grid;place-items:center;border:1px solid #78918e;color:#d0a36a;font:700 10px var(--display);transform:rotate(45deg); }
.card-rune + span { min-width:0; }
.card-rune + span strong { display:block;margin-top:3px;font:800 clamp(13px,1.15vw,16px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; }
.card-rune { text-indent:0; }
.council-card .card-rune { line-height:29px; }
.council-card .card-rune::first-letter { transform:rotate(-45deg); }
.council-account { width:100%;min-height:30px;margin-top:11px;border:0;color:#aaa89d;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font:700 10px var(--display);letter-spacing:.12em;text-transform:uppercase;transition:color .15s; }
.council-account:hover { color:#edd294; }
.council-account:active { transform:translateY(2px) scale(.98);color:#c99f54;filter:brightness(.78); }
.account-seal { width:8px;height:8px;border-radius:50%;background:#a65d39;box-shadow:0 0 0 3px rgba(166,93,57,.18); }
.siege-status { position:absolute;z-index:2;right:clamp(72px,6vw,108px);bottom:clamp(55px,8vh,96px);display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;padding:10px 15px;border-left:2px solid #c99c53;color:#e7dcc1;background:linear-gradient(90deg,rgba(7,11,8,.72),transparent);text-shadow:0 2px 8px #000; }
.siege-status > span { grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#b8613f;box-shadow:0 0 13px #d87e4f;animation:watch-pulse 2.4s ease-in-out infinite; }
.siege-status b { font:800 12px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase; }
.siege-status small { color:#b5b5aa;font:600 10px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase; }
@keyframes council-enter { from { opacity:0;transform:translateY(16px); } to { opacity:1;transform:none; } }
@keyframes watch-pulse { 50%{opacity:.55;transform:scale(.8)} }
.council-play:focus-visible,.council-card:focus-visible,.council-account:focus-visible { outline:2px solid #f2d58e;outline-offset:3px; }

#screen-mapselect #bg-ms { background:radial-gradient(circle at 50% 43%,#26322b 0,#111713 56%,#070907 100%) !important; }
#screen-mapselect #bg-ms::after { background:radial-gradient(ellipse at 50% 43%,transparent 0 30%,rgba(5,7,6,.78) 86%) !important; }
.ms-island-name,.screen-title { color:#ead8b5 !important; text-shadow:0 4px 24px #000 !important; }
.ms-island-sub,.eyebrow { color:#b99a5f !important; }
.ms-arrow,.icon-btn { border-radius:3px !important; background:linear-gradient(#333c35,#171c18) !important; border-color:#7c6840 !important; }

.shop-tab { border:1px solid #587b7d !important; border-radius:2px !important; background:linear-gradient(180deg,#304e50,#142a2d) !important; color:#b9c9c6 !important; box-shadow:inset 0 1px rgba(215,237,231,.07) !important; }
.shop-tab.on { border-color:#75999a !important; color:#eff4ee !important; background:linear-gradient(180deg,#638d8f,#315b5e 55%,#19393d) !important; box-shadow:inset 0 0 0 1px #10282b,inset 0 1px rgba(224,244,238,.2) !important; }
.perk,.bp-card,.mon-card { border-radius:4px !important; border-color:#4c7072 !important; background:linear-gradient(145deg,#1c3638,#091719) !important; }
.back-btn { border-radius:3px !important; }
.game-footer { background:rgba(15,11,7,.92) !important; border-color:rgba(200,162,74,.34) !important; }

@media (max-height:480px) and (orientation:landscape) {
  #screen-menu { padding:13px 28px !important;overflow:clip;overscroll-behavior:auto;touch-action:pan-y; }
  .war-council { width:min(660px,68vw);min-width:500px;padding:13px 22px; }
  #screen-menu .logo { width:min(250px,28vw) !important;max-height:60px;float:left;margin-right:16px; }
  .council-kicker { margin-top:2px; }
  .council-copy { margin-bottom:8px;font-size:11px; }
  .council-play { min-height:58px;padding:8px 15px; }
  .council-play-mark { width:35px;height:35px; }
  .council-grid { grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px; }
  .council-card { min-height:45px;padding:7px 9px;gap:8px; }
  .card-rune { display:none; }
  .council-card small { display:none; }
  .council-account { min-height:22px;margin-top:4px; }
  .siege-status { display:none; }
}

@media (max-width:760px) {
  #bg { background-position:68% center !important; }
  #screen-menu { align-items:center !important;padding:76px 15px 48px !important;justify-content:flex-start !important; }
  #screen-menu::before { background:linear-gradient(180deg,rgba(4,7,5,.62),rgba(4,7,5,.38) 42%,rgba(4,7,5,.82)); }
  .war-council { width:min(530px,100%);min-width:0;padding:22px 18px; }
  #screen-menu .logo { width:min(320px,88%) !important; }
  .council-copy { font-size:13px; }
  .council-grid { grid-template-columns:1fr 1fr; }
  .council-card { min-width:0;padding:10px; }
  .card-rune { width:25px;height:25px; }
  .card-rune + span strong { white-space:normal;font-size:12px; }
  .siege-status { display:none; }
}

@media (hover:none) { .council-play:hover,.council-card:hover { transform:none;filter:none; } }
@media (prefers-reduced-motion:reduce) { .war-council,.siege-status > span { animation:none !important; } }