/* VANTA Mini App — premium dark strategy UI.
   Palette: deep navy glass, gold edges, jewel accents. Animations use only
   transform/opacity; everything respects prefers-reduced-motion. */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg0: rgb(var(--sk-060a13, 6, 10, 19));
  --bg1: rgb(var(--sk-0b1220, 11, 18, 32));
  --bg2: rgb(var(--sk-111b2e, 17, 27, 46));
  --panel1: rgba(var(--sk-1d2942, 29, 41, 66), 0.94);
  --panel2: rgba(var(--sk-0e1525, 14, 21, 37), 0.95);
  --glass1: rgba(var(--sk-18233a, 24, 35, 58), 0.9);
  --glass2: rgba(var(--sk-0a101d, 10, 16, 29), 0.92);
  --edge: rgba(var(--sk-ffd68c, 255, 214, 140), 0.22);
  --edge-2: rgba(255, 255, 255, 0.08);
  --gold: rgb(var(--sk-f5c152, 245, 193, 82));
  --gold-hi: rgb(var(--sk-ffe49a, 255, 228, 154));
  --gold-lo: rgb(var(--sk-b7791a, 183, 121, 26));
  --text: rgb(var(--sk-eef2fa, 238, 242, 250));
  --text-2: rgb(var(--sk-b3bfd4, 179, 191, 212));
  --text-3: rgb(var(--sk-74829b, 116, 130, 155));
  --green: #3ddc7d;
  --red: #ff5d52;
  --blue: rgb(var(--sk-4ea9ff, 78, 169, 255));
  --cyan: rgb(var(--sk-3fd8d0, 63, 216, 208));
  --purple: #ac7cff;
  --radius: 18px;
  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  --hud-h: calc(var(--safe-top) + 64px);
  --tab-h: calc(var(--safe-bottom) + 70px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg0);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; }
bdi, .ltr { unicode-bidi: isolate; }
/* tabular digits only where a number ticks in place (Persian "۰" is a dot: tnum spaces it out) */
[data-clock] { font-feature-settings: "tnum" 1; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--text-3); }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }

/* ------------------------------------------------------------------ map */
.map { position: absolute; inset: 0; touch-action: none; background: rgb(var(--sk-07101d, 7, 16, 29)); }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-ov { pointer-events: none; }
.map-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--sk-040810, 4, 8, 16), 0.78) 0, rgba(var(--sk-040810, 4, 8, 16), 0) calc(var(--hud-h) + 26px)),
    linear-gradient(0deg, rgba(var(--sk-040810, 4, 8, 16), 0.72) 0, rgba(var(--sk-040810, 4, 8, 16), 0) calc(var(--tab-h) + 30px));
}
.map-dim {
  position: absolute; inset: 0; pointer-events: none; background: rgba(var(--sk-03060c, 3, 6, 12), 0.55);
  opacity: 0; transition: opacity 0.35s ease;
}
.app-screen-open .map-dim { opacity: 1; }

.map-fab {
  position: absolute; left: calc(12px + var(--safe-left)); bottom: calc(var(--tab-h) + 14px);
  display: flex; flex-direction: column; gap: 10px; z-index: 5;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.app-screen-open .map-fab { opacity: 0; transform: translateY(12px); pointer-events: none; }
.fab {
  width: 48px; height: 48px; border-radius: 16px; border: 0; padding: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgb(var(--sk-34466a, 52, 70, 106)), rgb(var(--sk-1c2842, 28, 40, 66)));
  box-shadow: 0 4px 0 rgb(var(--sk-0d1526, 13, 21, 38)), 0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.fab .ic { width: 30px; height: 30px; }
.fab:active { transform: translateY(3px); box-shadow: 0 1px 0 rgb(var(--sk-0d1526, 13, 21, 38)), 0 3px 8px rgba(var(--sk-000000, 0, 0, 0), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

.season-chip {
  position: absolute; right: calc(12px + var(--safe-right)); bottom: calc(var(--tab-h) + 16px); z-index: 5;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 14px;
  background: linear-gradient(180deg, var(--glass1), var(--glass2)); border: 1px solid var(--edge);
  box-shadow: 0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.45); font-size: 12px; color: var(--text-2);
  transition: opacity 0.3s ease;
}
.season-chip b { color: var(--gold-hi); font-weight: 800; }
.season-chip .sep { display: inline-block; width: 1px; height: 11px; margin: 0 5px; vertical-align: -1px; background: rgba(255, 255, 255, 0.25); }
.season-chip .ic { width: 22px; height: 22px; }
.season-bar { width: 58px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.season-bar i { display: block; height: 100%; width: 100%; transform-origin: right; background: linear-gradient(90deg, rgb(var(--sk-ffd66b, 255, 214, 107)), rgb(var(--sk-f09a2a, 240, 154, 42))); }
.app-screen-open .season-chip { opacity: 0; pointer-events: none; }

.war-pending {
  position:absolute; z-index:30; top:calc(var(--hud-h) + 7px); left:50%; transform:translateX(-50%);
  max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right)); min-height:38px;
  padding:6px 14px; border:1px solid rgba(var(--sk-ffd68c, 255, 214, 140), .42); border-radius:22px;
  color:rgb(var(--sk-fff2ca, 255, 242, 202)); background:linear-gradient(145deg,rgba(var(--sk-774b1a, 119, 75, 26), .94),rgba(48,34,23,.95));
  box-shadow:0 5px 18px rgba(var(--sk-000000, 0, 0, 0), 0.4),inset 0 1px #fff3; font-weight:800; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.war-pending[hidden] { display:none!important; }
#app.has-war-pending .screen { top:calc(var(--hud-h) + 50px); }

/* ------------------------------------------------------------------ HUD */
.hud {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  padding: calc(var(--safe-top) + 8px) calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left));
  display: flex; align-items: center; gap: 7px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.badge {
  position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgb(var(--sk-3b4f78, 59, 79, 120)), rgb(var(--sk-121b30, 18, 27, 48)) 70%);
  box-shadow: 0 0 0 2.5px var(--nation, #888), 0 0 0 4.5px rgb(var(--sk-0b1120, 11, 17, 32)), 0 0 0 6px rgba(var(--sk-f5c152, 245, 193, 82), 0.8),
    0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.25);
}
.badge .rank {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  min-width: 26px; padding: 0 6px; height: 17px; border-radius: 9px; font-size: 10.5px; font-weight: 900; line-height: 17px;
  color: rgb(var(--sk-3a2104, 58, 33, 4)); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 2px 0 var(--gold-lo), 0 3px 6px rgba(var(--sk-000000, 0, 0, 0), .4);
  white-space: nowrap;
}
.stats { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
.stat {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px 0 5px;
  border-radius: 14px; background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border: 1px solid var(--edge-2); border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 -2px 0 rgba(var(--sk-000000, 0, 0, 0), 0.25);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--gold)), transparent); opacity: 0.55;
}
.stat .ic { flex: 0 0 auto; width: 25px; height: 25px; }
.stat .v { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.stat .v b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.treasury { flex: 1.2 1 0; --accent: var(--gold); }
.stat.pop { --accent: var(--blue); }
.stat.power { --accent: var(--green); flex: 0.92 1 0; }
.stat.power.low { --accent: var(--red); }
.stat.power.low .ic { animation: blink 1.2s ease-in-out infinite; }
.stat.flash { animation: statFlash 0.7s ease; }
@keyframes statFlash { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0.45; } }
.hud-title {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 14px;
  border-radius: 14px; background: linear-gradient(180deg, var(--glass1), var(--glass2)); border: 1px solid var(--edge);
  box-shadow: 0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.45); min-width: 0;
}
.hud-title b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-title small { font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------------------ tab bar */
.tabbar {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--tab-h);
  padding: 0 calc(6px + var(--safe-right)) var(--safe-bottom) calc(6px + var(--safe-left));
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, rgba(var(--sk-141d31, 20, 29, 49), 0.97), rgba(var(--sk-070b14, 7, 11, 20), 0.99));
  border-top: 1px solid rgba(var(--sk-ffd68c, 255, 214, 140), 0.28);
  box-shadow: 0 -10px 30px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tab {
  flex: 1 1 0; border: 0; background: none; padding: 6px 0 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; position: relative; color: var(--text-3);
  font-size: 11px; font-weight: 700; transition: color 0.25s ease;
}
.tab .plate {
  width: 50px; height: 38px; display: grid; place-items: center; border-radius: 14px; position: relative;
  transition: transform 0.35s var(--ease-spring);
}
.tab .plate::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; opacity: 0; transform: scale(0.6);
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--sk-ffcd64, 255, 205, 100), 0.42), rgba(var(--sk-ffaa32, 255, 170, 50), 0.08) 60%, transparent 72%);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-spring);
}
.tab .ic { width: 31px; height: 31px; position: relative; transition: transform 0.35s var(--ease-spring), filter 0.3s ease; filter: saturate(0.45) brightness(0.8); }
.tab.on { color: var(--gold-hi); }
.tab.on .plate { transform: translateY(-5px); }
.tab.on .plate::before { opacity: 1; transform: scale(1); }
.tab.on .ic { transform: scale(1.14); filter: none; }
.tab.on::after {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tab:active .plate { transform: translateY(-2px) scale(0.92); }
.tab .dot {
  position: absolute; top: 4px; right: calc(50% - 26px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px rgb(var(--sk-0b1220, 11, 18, 32)), 0 0 8px var(--red);
}

/* ------------------------------------------------------------------ screens */
.screens { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.screen {
  position: absolute; left: 0; right: 0; top: calc(var(--hud-h) + 4px); bottom: var(--tab-h);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 16px calc(14px + var(--safe-right)) 28px calc(14px + var(--safe-left));
  background: linear-gradient(180deg, rgba(var(--sk-0c1322, 12, 19, 34), 0.97), rgba(var(--sk-060a13, 6, 10, 19), 0.985) 40%);
  border-radius: 24px 24px 0 0; border-top: 1px solid rgba(var(--sk-ffd68c, 255, 214, 140), 0.2);
  box-shadow: 0 -12px 40px rgba(var(--sk-000000, 0, 0, 0), 0.5);
  opacity: 0; transform: translateY(26px); visibility: hidden;
  transition: opacity 0.28s ease, transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
  pointer-events: auto; contain: layout paint;
  touch-action: pan-x pan-y; /* pan-y alone left nested chip rows unscrollable in some WebViews */
}
.screen.on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.28s ease, transform 0.42s var(--ease-out), visibility 0s; }
.screen::-webkit-scrollbar { display: none; }
.scr-head { display: flex; align-items: center; gap: 12px; margin: 2px 2px 16px; }
.scr-head .ic { width: 44px; height: 44px; flex: 0 0 auto; }
.scr-head h2 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.2; }
.scr-head p { margin: 0; font-size: 12.5px; color: var(--text-3); }
.scr-head p b { color: var(--text-2); }
.sep-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); margin: 0 7px; vertical-align: 2px; }
.sec-title { display: flex; align-items: center; gap: 8px; margin: 22px 4px 10px; font-size: 14px; font-weight: 800; color: var(--text-2); }
.sec-title .ic { width: 22px; height: 22px; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--sk-ffd68c, 255, 214, 140), .0), rgba(var(--sk-ffd68c, 255, 214, 140), 0.25)); }
.sec-title .count { font-size: 11px; color: var(--text-3); font-weight: 700; }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative; border-radius: var(--radius); padding: 14px;
  background: linear-gradient(180deg, var(--panel1), var(--panel2));
  border: 1px solid rgba(255, 255, 255, 0.06); border-top-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 10px 24px rgba(var(--sk-000000, 0, 0, 0), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card + .card { margin-top: 10px; }
.card.gold {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--sk-2c261a, 44, 38, 26), 0.96), rgba(var(--sk-14141a, 20, 20, 26), 0.97)) padding-box,
    linear-gradient(135deg, rgb(var(--sk-ffe7a0, 255, 231, 160)), rgb(var(--sk-b8791a, 184, 121, 26)) 35%, rgb(var(--sk-ffd76a, 255, 215, 106)) 60%, rgb(var(--sk-6d4209, 109, 66, 9))) border-box;
  box-shadow: 0 12px 30px rgba(var(--sk-000000, 0, 0, 0), 0.45), 0 0 26px rgba(var(--sk-f5c152, 245, 193, 82), 0.16);
  overflow: hidden;
}
.card.gold::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--sk-ffecb4, 255, 236, 180), 0.13), transparent);
  animation: shine 4.2s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(380%); } }
.pressable { transition: transform 0.12s ease; }
.pressable:active { transform: scale(0.975); }

.stagger > * { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.ttl { font-weight: 800; font-size: 15.5px; line-height: 1.35; }
.sub { font-size: 12.5px; color: var(--text-3); }
.desc { font-size: 13px; color: var(--text-2); margin: 6px 0 0; line-height: 1.7; }
.ic-lg { width: 46px; height: 46px; flex: 0 0 auto; }
.ic-md { width: 30px; height: 30px; flex: 0 0 auto; }
.ic-sm { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: -4px; }
.ic-wrap {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 70%), linear-gradient(180deg, rgb(var(--sk-243352, 36, 51, 82)), rgb(var(--sk-121b2e, 18, 27, 46)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 0 rgba(var(--sk-000000, 0, 0, 0), 0.3), 0 4px 10px rgba(var(--sk-000000, 0, 0, 0), 0.35);
}
.ic-wrap .ic { width: 38px; height: 38px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px;
  font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.07); color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.07); white-space: nowrap;
}
.pill .ic { width: 17px; height: 17px; }
.pill.gold { color: rgb(var(--sk-3a2104, 58, 33, 4)); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
.pill.green { color: #baffd2; background: rgba(61, 220, 125, 0.14); border-color: rgba(61, 220, 125, 0.25); }
.pill.red { color: #ffc9c3; background: rgba(255, 93, 82, 0.14); border-color: rgba(255, 93, 82, 0.28); }
.pill.blue { color: rgb(var(--sk-cfe6ff, 207, 230, 255)); background: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.14); border-color: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.25); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.swatch { width: 14px; height: 14px; border-radius: 5px; flex: 0 0 auto; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6), 0 2px 5px rgba(var(--sk-000000, 0, 0, 0), .4); }

/* ------------------------------------------------------------------ 3D buttons */
.btn {
  --f1: rgb(var(--sk-3b4c6b, 59, 76, 107)); --f2: rgb(var(--sk-243150, 36, 49, 80)); --edge: rgb(var(--sk-111a2b, 17, 26, 43)); --fg: rgb(var(--sk-e8eef8, 232, 238, 248));
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--fg); white-space: nowrap;
  background: linear-gradient(180deg, var(--f1), var(--f2));
  box-shadow: 0 5px 0 var(--edge), 0 9px 16px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(var(--sk-000000, 0, 0, 0), 0.14);
  text-shadow: 0 1px 1px rgba(var(--sk-000000, 0, 0, 0), 0.3);
  transform: translateY(0); transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.2s ease;
  -webkit-user-select: none; user-select: none; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 48%; border-radius: 12px 12px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); pointer-events: none; z-index: -1;
}
.btn .ic { width: 24px; height: 24px; margin: -4px 0; filter: drop-shadow(0 1px 0 rgba(var(--sk-000000, 0, 0, 0), .25)); }
.btn:active:not(:disabled), .btn.pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--edge), 0 3px 6px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(var(--sk-000000, 0, 0, 0), 0.14);
}
.btn:disabled { cursor: default; filter: grayscale(0.8) brightness(0.74); box-shadow: 0 3px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(2px); }
.btn.primary { --f1: rgb(var(--sk-ffe58a, 255, 229, 138)); --f2: rgb(var(--sk-f2a62a, 242, 166, 42)); --edge: rgb(var(--sk-9a5808, 154, 88, 8)); --fg: rgb(var(--sk-3b2004, 59, 32, 4)); text-shadow: 0 1px 0 rgba(var(--sk-fff4c8, 255, 244, 200), 0.6); }
.btn.success { --f1: #7cf3a5; --f2: #1eab52; --edge: #0b642b; --fg: #fff; }
.btn.danger { --f1: #ff8f7e; --f2: #de2f27; --edge: #85120f; --fg: #fff; }
.btn.neutral { --f1: rgb(var(--sk-3f5175, 63, 81, 117)); --f2: rgb(var(--sk-26324f, 38, 50, 79)); --edge: rgb(var(--sk-111a2b, 17, 26, 43)); }
.btn.ghost { --f1: rgba(255,255,255,.08); --f2: rgba(255,255,255,.03); --edge: rgba(var(--sk-000000, 0, 0, 0), .35); box-shadow: 0 3px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.lg { min-height: 56px; font-size: 17px; border-radius: 17px; padding: 0 22px; }
.btn.sm { min-height: 36px; font-size: 13px; border-radius: 11px; padding: 0 12px; box-shadow: 0 3px 0 var(--edge), 0 6px 10px rgba(var(--sk-000000, 0, 0, 0), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn.sm:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.sm .ic { width: 19px; height: 19px; }
.btn.icon { width: 46px; padding: 0; }
.btn.sm.icon { width: 36px; }
.btn.block { display: flex; width: 100%; }
.btn.busy { color: transparent !important; text-shadow: none; pointer-events: none; }
.btn.busy .ic { opacity: 0; }
.btn.busy::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; left: calc(50% - 11px); top: calc(50% - 11px);
  border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: var(--fg, #fff); animation: spin 0.7s linear infinite;
}
.btn.primary.busy::after { border-color: rgba(var(--sk-3b2004, 59, 32, 4), 0.25); border-top-color: rgb(var(--sk-3b2004, 59, 32, 4)); }
@keyframes spin { to { transform: rotate(360deg); } }
.btns { display: flex; gap: 10px; margin-top: 14px; }
.btns > .btn { flex: 1 1 0; }

/* ------------------------------------------------------------------ chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -14px; padding-inline: 14px; scrollbar-width: none; touch-action: pan-x pan-y; }
.chips::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .chips { scrollbar-width: thin; scrollbar-color: rgba(var(--sk-ffd68c, 255, 214, 140), 0.35) transparent; } }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 12px;
  border-radius: 19px; border: 0; font-size: 13px; font-weight: 800; color: var(--text-2);
  background: linear-gradient(180deg, rgb(var(--sk-27354f, 39, 53, 79)), rgb(var(--sk-182238, 24, 34, 56)));
  box-shadow: 0 3px 0 rgb(var(--sk-0b1322, 11, 19, 34)), 0 6px 12px rgba(var(--sk-000000, 0, 0, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.08s ease, box-shadow 0.08s ease, color 0.2s;
}
.chip .ic { width: 22px; height: 22px; }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(var(--sk-0b1322, 11, 19, 34)), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.chip.on { color: rgb(var(--sk-3b2004, 59, 32, 4)); background: linear-gradient(180deg, rgb(var(--sk-ffe58a, 255, 229, 138)), rgb(var(--sk-f0a52a, 240, 165, 42))); box-shadow: 0 3px 0 rgb(var(--sk-9a5808, 154, 88, 8)), 0 6px 14px rgba(var(--sk-f0a52a, 240, 165, 42), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------------ progress */
.bar { position: relative; height: 12px; border-radius: 7px; overflow: hidden; background: rgba(var(--sk-000000, 0, 0, 0), 0.4); box-shadow: inset 0 1px 3px rgba(var(--sk-000000, 0, 0, 0), 0.6), 0 1px 0 rgba(255, 255, 255, 0.06); }
.bar > i {
  position: absolute; inset: 0; border-radius: 7px; transform-origin: right center; transform: scaleX(var(--p, 0));
  background: linear-gradient(180deg, rgb(var(--sk-ffe89c, 255, 232, 156)), rgb(var(--sk-f3a82c, 243, 168, 44)) 55%, rgb(var(--sk-c9780f, 201, 120, 15))); transition: transform 1s linear; overflow: hidden;
}
.bar.green > i { background: linear-gradient(180deg, #9dffbd, #2fc864 55%, #148a3d); }
.bar.purple > i { background: linear-gradient(180deg, #e3cdff, #9c68ff 55%, #5d25c7); }
.bar.blue > i { background: linear-gradient(180deg, rgb(var(--sk-bfe7ff, 191, 231, 255)), rgb(var(--sk-3f9bff, 63, 155, 255)) 55%, rgb(var(--sk-1d4fd0, 29, 79, 208))); }
.bar > i::after {
  content: ""; position: absolute; inset: 0 -40px 0 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
  animation: stripes 0.9s linear infinite;
}
@keyframes stripes { to { transform: translateX(-22.6px); } }
.bar-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ------------------------------------------------------------------ nation */
.hero { display: flex; align-items: center; gap: 14px; }
.medal {
  width: 70px; height: 70px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 36px;
  background: radial-gradient(circle at 35% 30%, rgb(var(--sk-43598a, 67, 89, 138)), rgb(var(--sk-111a2e, 17, 26, 46)) 72%);
  box-shadow: 0 0 0 3px var(--nation, #888), 0 0 0 6px rgb(var(--sk-0b1120, 11, 17, 32)), 0 0 0 8px rgba(var(--sk-f5c152, 245, 193, 82), 0.85), 0 10px 20px rgba(var(--sk-000000, 0, 0, 0), 0.5), inset 0 3px 5px rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px var(--nation, #888), 0 0 0 6px rgb(var(--sk-0b1120, 11, 17, 32)), 0 0 0 8px rgba(var(--sk-f5c152, 245, 193, 82), 0.85),
    0 0 26px color-mix(in srgb, var(--nation, #888) 45%, transparent), 0 10px 20px rgba(var(--sk-000000, 0, 0, 0), 0.5), inset 0 3px 5px rgba(255, 255, 255, 0.25);
}
.hero h3 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.25; }
.hero .pills { margin-top: 6px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  border-radius: 16px; padding: 12px; min-height: 84px;
  background: linear-gradient(180deg, rgba(var(--sk-212e49, 33, 46, 73), 0.92), rgba(var(--sk-101829, 16, 24, 41), 0.94));
  border: 1px solid rgba(255, 255, 255, 0.06); border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(var(--sk-000000, 0, 0, 0), 0.3);
}
.tile .row { gap: 8px; }
.tile .ic { width: 30px; height: 30px; }
.tile .k { font-size: 12px; color: var(--text-3); font-weight: 700; }
.tile .val { font-size: 19px; font-weight: 900; margin-top: 6px; line-height: 1.2; }
.tile .hint { font-size: 12px; margin-top: 2px; }
.next-card .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: var(--gold-hi); letter-spacing: 0; }
.next-card .kicker .ic { width: 20px; height: 20px; }
.next-card .ttl { font-size: 18px; margin-top: 6px; }
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05);
}
.check-item .box { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
.check-item .box .ic { width: 30px; height: 30px; }
.check-item .box .ring { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 2px 4px rgba(var(--sk-000000, 0, 0, 0), .4); }
.check-item.done .ttl { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); font-weight: 700; }
.check-item.next { background: rgba(var(--sk-f5c152, 245, 193, 82), 0.08); border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.3); }
.check-item.next .ring { border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--sk-f5c152, 245, 193, 82), 0.5); }
.check-item .ttl { font-size: 14px; }
.check-item .sub { font-size: 12px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.res {
  border-radius: 14px; padding: 9px 8px 8px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--sk-212e49, 33, 46, 73), 0.9), rgba(var(--sk-101829, 16, 24, 41), 0.92)); border: 1px solid rgba(255, 255, 255, 0.06);
}
.res .ic { width: 32px; height: 32px; }
.res .n { font-size: 11.5px; color: var(--text-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .a { font-size: 15px; font-weight: 900; line-height: 1.3; }
.res .r { font-size: 11px; font-weight: 700; }
.res .u { font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.city-card .ic-wrap { width: 50px; height: 50px; }

/* ------------------------------------------------------------------ build */
.queue-item + .queue-item { margin-top: 10px; }
.bld .head { display: flex; gap: 12px; align-items: flex-start; }
.bld .cost { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bld .out { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.bld .missing { margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 93, 82, 0.09); border: 1px solid rgba(255, 93, 82, 0.2); font-size: 12.5px; color: #ffc2bb; }
.bld .missing div + div { margin-top: 2px; }
.bld.locked .ic-wrap { filter: grayscale(0.7) brightness(0.8); }
.bld .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.empty { text-align: center; padding: 26px 14px; color: var(--text-3); font-size: 13.5px; }
.empty .ic { width: 64px; height: 64px; display: block; margin: 0 auto 8px; opacity: 0.9; }

/* ------------------------------------------------------------------ research */
.ring-prog { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.ring-prog svg.rp { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring-prog .track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
.ring-prog .fill { fill: none; stroke: url(#rp-grad); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring-prog .ic { position: absolute; inset: 20px; width: 52px; height: 52px; }
.tier { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: 11.5px; font-weight: 900; color: #e8dcff; background: linear-gradient(180deg, #7b4fd8, #4a2a95); box-shadow: 0 2px 0 #2d1766, inset 0 1px 0 rgba(255,255,255,.3); }

/* ------------------------------------------------------------------ market */
.mkt { padding: 12px; }
.mkt .top { display: flex; align-items: center; gap: 12px; }
.mkt .prices { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.price { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 4px; font-size: 13px; font-weight: 800; padding: 3px 9px 4px; border-radius: 11px; line-height: 1.25; min-width: 64px; }
.price small { grid-column: 1 / -1; font-size: 10px; font-weight: 700; opacity: 0.75; }
.price .ic { width: 17px; height: 17px; }
.price.buy { color: #aaf5c4; background: rgba(61, 220, 125, 0.1); }
.price.sell { color: #ffc0b8; background: rgba(255, 93, 82, 0.1); }
.mkt .drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out); }
.mkt .drawer > div { overflow: hidden; }
.mkt.open .drawer { grid-template-rows: 1fr; }
.mkt.open { border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.35); }
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.stepper .qty {
  flex: 1 1 auto; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; font-weight: 900;
  background: rgba(var(--sk-000000, 0, 0, 0), 0.35); box-shadow: inset 0 2px 6px rgba(var(--sk-000000, 0, 0, 0), 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.presets { display: flex; gap: 6px; margin-top: 10px; }
.presets .btn { flex: 1 1 0; }
.trade-sum { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-3); margin-top: 10px; }
.trade-sum b { color: var(--text); }
.treasury-card { display: flex; align-items: center; gap: 12px; }
.treasury-card .big { font-size: 24px; font-weight: 900; line-height: 1.2; }

/* ------------------------------------------------------------------ sheets */
.backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(var(--sk-02050b, 2, 5, 11), 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.backdrop.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px calc(16px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(16px + var(--safe-left));
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgba(var(--sk-1b263e, 27, 38, 62), 0.985), rgba(var(--sk-090e1a, 9, 14, 26), 0.995) 55%);
  border-top: 1.5px solid rgba(var(--sk-ffd68c, 255, 214, 140), 0.4);
  box-shadow: 0 -18px 50px rgba(var(--sk-000000, 0, 0, 0), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(105%); transition: transform 0.44s var(--ease-out); will-change: transform;
}
.sheet.on { transform: translateY(0); }
.sheet .handle { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 0 auto 12px; }
.sheet .x { position: absolute; top: 12px; left: calc(12px + var(--safe-left)); }
.sheet h3 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.3; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.kv .k .ic { width: 24px; height: 24px; }
.kv .v { font-weight: 800; display: flex; align-items: center; gap: 8px; text-align: left; }
.confirm-big { text-align: center; padding: 6px 0 2px; }
.confirm-big .ic-wrap { margin: 0 auto 10px; width: 78px; height: 78px; border-radius: 24px; }
.confirm-big .ic-wrap .ic { width: 56px; height: 56px; }

/* skeleton shimmer while a sheet loads */
.skel { border-radius: 10px; height: 16px; margin: 10px 0; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: skel 1.1s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ toast */
.toasts { position: fixed; z-index: 80; top: calc(var(--hud-h) + 8px); left: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  max-width: 460px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--sk-1f2b44, 31, 43, 68), 0.98), rgba(var(--sk-0e1525, 14, 21, 37), 0.98)); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(var(--sk-000000, 0, 0, 0), 0.55); font-size: 13.5px; font-weight: 700; line-height: 1.6;
  animation: toastIn 0.42s var(--ease-spring) both;
}
.toast .ic { width: 30px; height: 30px; flex: 0 0 auto; }
.toast.err { border-color: rgba(255, 93, 82, 0.45); box-shadow: 0 14px 30px rgba(var(--sk-000000, 0, 0, 0), 0.55), 0 0 18px rgba(255, 93, 82, 0.18); }
.toast.ok { border-color: rgba(61, 220, 125, 0.45); }
.toast.out { animation: toastOut 0.3s ease forwards; }
.toast-list { margin: 4px 0 0; padding: 0 16px 0 0; font-size: 12.5px; font-weight: 600; color: #ffd0c9; }
.toast-list li + li { margin-top: 1px; }
.card.target { border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.7); box-shadow: 0 0 0 2px rgba(var(--sk-f5c152, 245, 193, 82), 0.35), 0 12px 30px rgba(var(--sk-000000, 0, 0, 0), 0.45); animation: targetPulse 1.4s ease-in-out 3; }
@keyframes targetPulse { 50% { box-shadow: 0 0 0 5px rgba(var(--sk-f5c152, 245, 193, 82), 0.15), 0 0 26px rgba(var(--sk-f5c152, 245, 193, 82), 0.35); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(0.94); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(0.96); } }

/* ------------------------------------------------------------------ success burst */
.burst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; width: 9px; height: 9px; left: -4.5px; top: -4.5px; border-radius: 2px;
  background: linear-gradient(135deg, rgb(var(--sk-fff5c8, 255, 245, 200)), rgb(var(--sk-ffc23a, 255, 194, 58))); box-shadow: 0 0 8px rgba(var(--sk-ffc850, 255, 200, 80), 0.8);
  animation: burst 0.75s var(--ease-out) forwards;
}
.burst i:nth-child(3n) { background: linear-gradient(135deg, #d6ffe4, #3ddc7d); box-shadow: 0 0 8px rgba(61, 220, 125, 0.8); border-radius: 50%; }
.burst b {
  position: absolute; width: 90px; height: 90px; left: -45px; top: -45px; border-radius: 50%;
  border: 3px solid rgba(var(--sk-ffdc78, 255, 220, 120), 0.9); animation: ringOut 0.6s var(--ease-out) forwards;
}
@keyframes burst { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(260deg) scale(0.3); opacity: 0; } }
@keyframes ringOut { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ------------------------------------------------------------------ onboarding */
.onboard { text-align: center; padding: 22px 16px 18px; }
.onboard .globe { width: 118px; height: 118px; margin: 0 auto 6px; display: block; animation: floaty 4s ease-in-out infinite; filter: drop-shadow(0 12px 22px rgba(var(--sk-288cff, 40, 140, 255), 0.35)); }
@keyframes floaty { 50% { transform: translateY(-6px); } }
.onboard h2 { margin: 6px 0 6px; font-size: 22px; font-weight: 900; }
.onboard p { margin: 0 auto; max-width: 330px; color: var(--text-2); font-size: 14px; line-height: 1.8; }
.steps { text-align: right; margin: 18px 0 16px; display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.step .n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; font-weight: 900; color: rgb(var(--sk-3b2004, 59, 32, 4)); background: linear-gradient(180deg, rgb(var(--sk-ffe58a, 255, 229, 138)), rgb(var(--sk-f0a52a, 240, 165, 42))); box-shadow: 0 3px 0 rgb(var(--sk-9a5808, 154, 88, 8)), inset 0 1px 0 rgba(255,255,255,.6); }
.kbd { display: inline-block; padding: 0 8px; border-radius: 8px; font-weight: 900; color: var(--gold-hi); background: rgba(var(--sk-f5c152, 245, 193, 82), 0.12); border: 1px solid rgba(var(--sk-f5c152, 245, 193, 82), 0.35); }

/* ------------------------------------------------------------------ small screens / tablets */
@media (max-width: 370px) {
  .stat { padding: 0 5px 0 4px; gap: 3px; }
  .stat .ic { width: 22px; height: 22px; }
  .stat .v b { font-size: 12.5px; }
  .stat .v small { font-size: 9px; }
  .badge { width: 42px; height: 42px; font-size: 21px; }
  .hud { gap: 5px; }
  .stats { gap: 4px; }
  .tab .plate { width: 44px; }
  .tab .ic { width: 28px; height: 28px; }
  .scr-head h2 { font-size: 19px; }
  .btn.lg { min-height: 52px; font-size: 16px; }
}
@media (max-height: 680px) {
  :root { --tab-h: calc(var(--safe-bottom) + 62px); --hud-h: calc(var(--safe-top) + 60px); }
  .tab .plate { height: 34px; }
}
@media (min-width: 700px) {
  .screen { left: 50%; right: auto; width: 640px; margin-left: -320px; }
  .hud { max-width: 760px; margin: 0 auto; }
  .tabbar { justify-content: center; }
  .tab { flex: 0 0 110px; }
  .sheet { left: 50%; right: auto; width: 560px; margin-left: -280px; }
}

.fab.fab-notices { display:flex; align-items:center; justify-content:center; width:auto; min-width:100px; min-height:48px; padding:0 12px; gap:6px; font-size:12px; font-weight:600; border-color:#8260aa; }
.fab-notices .ic { width:23px; height:23px; }
.fab-notices b { border-radius:12px; background:#cdb2f4; color:#251436; padding:1px 5px; font-size:11px; }
.fab-notices [hidden], .notification-sheet [hidden] { display:none!important; }
.notice-live { min-height:24px; color:#c6acd9; }
.notice-row { width:100%; display:flex; align-items:center; gap:10px; min-height:72px; text-align:right; padding:12px; margin:8px 0; border:1px solid #4b375f; border-radius:15px; background:linear-gradient(145deg,#302139,#211828); color:var(--text); box-shadow:0 3px #110c19,inset 0 1px #ffffff0c; }
.notice-row.read { background:#1b1524; border-color:#352a43; }
.notice-row b { display:block; line-height:1.8; overflow-wrap:anywhere; }
.notice-row small { display:block; color:#c1afce; margin-top:4px; font-size:11px; }
.notice-symbol { align-self:flex-start; padding-top:4px; flex:0 0 30px; }
.notice-symbol .ic { width:30px; height:30px; }
.notice-row .grow { min-width:0; }
.map-action-heading { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.map-action-heading>.ic, [data-city-forces] .ar-drow>.ic { width:30px; height:30px; flex:none; }
.notice-dot { flex:none; width:7px; height:7px; border-radius:50%; background:#d7adff; }
.notice-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:2; margin:18px 0; }
.city-name-label { display:flex; flex-direction:column; gap:8px; margin:18px 0; }
.city-name-label input { width:100%; min-height:48px; border-radius:12px; padding:10px 12px; color:inherit; background:#17111f; border:1px solid #665078; font:inherit; }
.city-action-reason { padding:10px 12px; border-right:2px solid #b08bcf; }

.screen [hidden], .sheet [hidden] { display:none!important; }
.list-search { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.list-search input { flex:1; min-width:0; min-height:48px; border:1px solid #645176; border-radius:13px; padding:10px 12px; background:#17111f; color:var(--text); font:inherit; font-size:14px; }
.list-search input:focus, .display-setting select:focus { outline:2px solid #bc94ed; outline-offset:2px; }
.search-clear { min-width:48px; min-height:48px; border:1px solid #705086; border-radius:12px; background:#352440; color:#e7d6f6; }
.search-status { flex-basis:100%; color:#beaccb; font-size:11px; }
.search-status:empty { display:none; }
.search-empty { color:#c5b3d3; padding:16px 8px; text-align:center; }
.display-setting { display:flex; flex-direction:column; gap:10px; margin:22px 0 10px; font-weight:700; }
.display-setting select { width:100%; min-height:48px; border:1px solid #6c5180; border-radius:12px; padding:8px 12px; background:#21172c; color:#f0e4fa; font:inherit; }
.home-tools { display:flex; gap:6px; align-items:center; }
.home-tools .home-account { display:flex; gap:4px; align-items:center; min-height:44px; padding:6px; font-size:11px; }
.home-tools .ic { width:20px; height:20px; flex:none; }
.country-creator { display:block; color:#c2aed2; font-size:11px; font-weight:400; line-height:1.8; overflow-wrap:anywhere; max-width:100%; }
.dp-bname { min-width:0; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}