/* ════════════════════════════════════════
   Звериное Королевство — стили
   Палитра: ночь #0b1622 / глубина #122436
   золото #d9a94c / пергамент #e8d9b0
   крысы #c0392b / бобры #c87f2a / капибары #4caf6d
   ════════════════════════════════════════ */
:root {
  --night:   #0b1622;
  --deep:    #122436;
  --panel:   #182d42;
  --line:    #2a4258;
  --gold:    #d9a94c;
  --gold-hi: #f3cf7e;
  --parch:   #e8d9b0;
  --text:    #d7e2ea;
  --muted:   #7e93a5;
  --rat:     #c0392b;
  --beaver:  #c87f2a;
  --capy:    #4caf6d;
  --r: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}
button:focus, button:focus-visible {
  outline: none;
}
html, body {
  height: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body {
  font-family: 'Rubik', sans-serif;
  background: var(--night);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
}
img, svg {
  -webkit-user-drag: none;
  user-select: none;
}
.hidden { display: none !important; }
h1, h2, h3, .race-name, .big-btn, .nav-btn { font-family: 'Russo One', sans-serif; }

/* ── выбор расы ───────────────────────── */
#screen-race {
  min-height: 100dvh;
  padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
  position: relative; overflow: hidden;
  background: radial-gradient(120% 70% at 50% -10%, #1d3b58 0%, var(--night) 65%);
}
.race-sky::before, .race-sky::after {
  content: ''; position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,207,126,.18), transparent 70%);
  pointer-events: none;
}
.race-sky::before { width: 320px; height: 320px; top: -120px; left: -80px; }
.race-sky::after  { width: 260px; height: 260px; top: 40px; right: -100px; }
.race-head { text-align: center; margin-bottom: 22px; position: relative; }
.race-head h1 {
  font-size: 30px; line-height: 1.15; letter-spacing: .04em;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 #6e4f15, 0 6px 22px rgba(217,169,76,.35);
}
.race-head p { margin-top: 10px; color: var(--muted); font-size: 14px; }

.race-cards { display: grid; gap: 14px; max-width: 420px; margin: 0 auto; position: relative; }
.race-card {
  display: grid; grid-template-columns: 64px 1fr; grid-auto-rows: min-content;
  gap: 2px 14px; align-items: center; text-align: left;
  padding: 16px; border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel), var(--deep));
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, var(--gold));
  color: var(--text); cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.race-card:active { transform: scale(.97); }
.race-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.race-rats   { --accent: var(--rat); }
.race-beavers{ --accent: var(--beaver); }
.race-capy   { --accent: var(--capy); }
.crest {
  grid-row: span 4; width: 64px; height: 72px;
  display: grid; place-items: center; font-size: 34px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, var(--deep)), var(--deep));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); /* щит */
}
.race-name { font-size: 19px; color: var(--parch); letter-spacing: .03em; }
.race-tag  { font-size: 12px; font-weight: 700; width: fit-content; padding: 3px 9px; border-radius: 999px; }
.tag-atk  { background: rgba(192,57,43,.22);  color: #ff9a8a; }
.tag-def  { background: rgba(200,127,42,.22); color: #ffc97e; }
.tag-heal { background: rgba(76,175,109,.22); color: #8fe5ae; }
.race-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.race-bars { display: grid; gap: 5px; margin-top: 6px; }
.bar {
  display: block; height: 6px; border-radius: 3px; background: var(--line);
  position: relative; overflow: hidden;
}
.bar::after {
  content: ''; position: absolute; inset: 0; width: var(--v); border-radius: 3px;
}
.bar-atk::after { background: linear-gradient(90deg, #8e2d22, #ff7a5c); }
.bar-def::after { background: linear-gradient(90deg, #1f5d8a, #6fc2ff); }

/* ── каркас игры ──────────────────────── */
#game { min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
/* остров-фон тянется под чёлку — никакой тёмной "брови" */
#tab-city { position: relative; }
.island-viewport { margin-top: 0 !important; }
/* верхняя панель ресурсов — плавающая поверх карты */
.res-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
  padding: calc(54px + env(safe-area-inset-top)) 12px 10px;
  background: linear-gradient(180deg, rgba(8,18,28,.82), rgba(8,18,28,0));
  pointer-events: none;       /* клики проходят к карте... */
}
.res-bar > * { pointer-events: auto; }   /* ...но не сквозь сами плашки */
.res {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 46px; flex: 1 1 54px;
  background: rgba(18,36,54,.72); border: 1px solid rgba(217,169,76,.35);
  border-radius: 999px; padding: 5px 7px 5px 5px; font-size: 11.5px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.res b { color: var(--parch); min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-ic { font-size: 15px; }
.res-emoji {
  width: 17px; height: 17px; flex: 0 0 17px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-size: 15px;
}
.coin-ic {
  display: inline-block; flex: 0 0 17px;
  width: 17px; height: 17px; max-width: 17px; max-height: 17px;
  border-radius: 50%;
  background: url('../img/coin-small.png?v=56-main') center / cover no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  overflow: hidden;
}
.race-chip { display: none; }

/* кнопки «назад» и «выйти» — прозрачные на 90% */
.ghost-btn {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; border: 1px solid var(--gold);
  background: var(--deep); color: var(--parch);
  font-size: 15px; line-height: 1; cursor: pointer;
  opacity: .1;                       /* 90% прозрачности */
  transition: opacity .2s;
}
.ghost-btn:active, .ghost-btn:focus-visible { opacity: .85; } /* проявляется при нажатии */

.stat-bar {
  position: absolute; top: calc(90px + env(safe-area-inset-top)); left: 8px; z-index: 20;
  display: none; grid-template-columns: repeat(2, auto); gap: 6px;
  pointer-events: none; width: fit-content;
}
.stat {
  pointer-events: auto;
  background: rgba(18,36,54,.7); border: 1px solid rgba(217,169,76,.28);
  border-radius: 12px; padding: 6px 4px; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.stat span { display: block; font-size: 10px; color: var(--muted); letter-spacing: .03em; }
.stat b { font-size: 14px; color: var(--gold); }

@media (max-width: 520px) {
  .res-bar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .res { flex-basis: 48px; min-width: 42px; padding: 5px 5px 5px 4px; font-size: 11px; }
  .race-chip { display: none; }
  .ghost-btn { width: 30px; height: 30px; }
  .profile-btn { width: 42px; height: 42px; }
  .stat-bar { top: calc(86px + env(safe-area-inset-top)); }
}

.tab { flex: 1; position: relative; overflow-y: auto; padding-bottom: 76px; }

/* ── остров (псевдо-3D, зум и перетаскивание) ── */
.island-viewport {
  position: relative; overflow: hidden;
  height: calc(100dvh - 56px); min-height: 440px;
  margin-top: calc(-1 * (50px + env(safe-area-inset-top)));
  padding-top: calc(50px + env(safe-area-inset-top));
  background: radial-gradient(120% 90% at 50% 20%, #1a4a68, #0a1f31);
  touch-action: none; cursor: grab;
}
.island-viewport.dragging { cursor: grabbing; }
/* контейнер с перспективой — наклоняем остров как в изометрии */
.island-persp { position: absolute; inset: 0; overflow: hidden; }
.island-stage {
  position: absolute; left: 50%; top: 50%;
  width: 4000px; height: 3077px; margin: -1538px 0 0 -2000px;
  transform: translate3d(0,0,0) scale(0.32);
  will-change: auto; transform-origin: center center;
  background: #0b2f48;
  backface-visibility: hidden;
  contain: layout paint size;
}
.island-canvas { position: absolute; inset: 0; width: 2400px; height: 1800px; pointer-events: none; image-rendering: auto; }
.island-svg { display: block; width: 100%; height: 100%; }
.slots { position: absolute; inset: 0; z-index: 2; }
.deco { position: absolute; pointer-events: none; transform-origin: center bottom; }

.slot {
  position: absolute; width: 200px; height: 200px;
  transform: translate(-50%, -50%) scale(var(--depth, 1));
  display: grid; place-items: center; border: 0; background: none; cursor: pointer;
}
.slot .b-ico { font-size: 40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.slot .b-lvl {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--parch);
  background: rgba(10,20,30,.8); border: 1px solid var(--gold);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.slot.empty .b-ico { font-size: 26px; opacity: .9; }
.slot.empty .plus {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(60,90,70,.5), rgba(10,22,34,.45));
  border: 2px dashed rgba(243,207,126,.7);
  box-shadow: inset 0 0 12px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.3);
  color: var(--gold-hi); font-size: 24px; font-weight: 700;
  transition: transform .15s, box-shadow .15s;
  animation: slotPulse 2.4s ease-in-out infinite;
}
@keyframes slotPulse {
  0%,100% { box-shadow: inset 0 0 12px rgba(0,0,0,.4), 0 0 0 rgba(243,207,126,0); }
  50%     { box-shadow: inset 0 0 12px rgba(0,0,0,.4), 0 0 12px rgba(243,207,126,.4); }
}
.slot.empty:active .plus { transform: scale(.9); }
.slot.building .b-ico { animation: hammer 1s infinite alternate; }
@keyframes hammer { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .slot.building .b-ico { animation: none; } }
.slot .timer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #ffd98a; background: rgba(10,20,30,.85);
  border-radius: 6px; padding: 1px 6px;
}

.side-btns { position: absolute; top: calc(150px + env(safe-area-inset-top)); z-index: 5; display: grid; gap: 10px; }
.side-btns.left { left: 10px; } .side-btns.right { right: 10px; top: calc(150px + env(safe-area-inset-top)); }
.side-btn {
  width: 64px; padding: 8px 4px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(133,86,47,.74), rgba(72,41,20,.82));
  border: 1px solid var(--gold);
  color: #f2dfb7; text-align: center; cursor: pointer;
}
.side-btn span { display: block; font-size: 20px; }
.side-btn b { display: block; font-size: 10px; margin-top: 2px; color: var(--parch); }
.builder-side b { color: var(--gold-hi); }

/* ── панели / бой / задания ───────────── */
.tab-title { padding: 16px 16px 6px; color: var(--gold-hi); font-size: 18px; }
.panel {
  margin: 10px 14px; padding: 14px; border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel), var(--deep));
  border: 1px solid var(--line);
}
.panel h3 { color: var(--parch); font-size: 14px; margin-bottom: 10px; }
.unit-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--line); font-size: 13px;
}
.unit-row:last-child { border-bottom: 0; }
.unit-row .u-stats { color: var(--muted); font-size: 12px; }
.unit-row .spacer { flex: 1; }
.mini-btn {
  font-family: 'Rubik'; font-weight: 700; font-size: 12px;
  background: linear-gradient(#e3b85e, #b8862e); color: #261a05;
  border: 0; border-radius: 9px; padding: 7px 12px; cursor: pointer;
}
.mini-btn:disabled { filter: grayscale(.8); opacity: .6; }
.big-btn {
  display: block; width: calc(100% - 28px); margin: 14px auto;
  padding: 14px; font-size: 15px; letter-spacing: .02em;
  background: linear-gradient(#e3b85e, #a87a26); color: #241804;
  border: 1px solid var(--gold-hi); border-radius: var(--r); cursor: pointer;
  box-shadow: 0 6px 18px rgba(217,169,76,.25);
}
.big-btn:active { transform: scale(.98); }

.quest {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 14px; padding: 12px; border-radius: 12px;
  background: var(--deep); border: 1px solid var(--line); font-size: 13px;
}
.quest.done { opacity: .55; }
.quest .q-rew { margin-left: auto; color: var(--gold); font-size: 12px; white-space: nowrap; }

/* результат боя */
#battle-result .vs { text-align: center; font-size: 22px; color: var(--gold-hi); margin: 4px 0 10px; font-family: 'Russo One'; }
#battle-result .row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
#battle-result .win  { color: #8fe5ae; } #battle-result .lose { color: #ff9a8a; }
#battle-result .heal { color: #8fe5ae; }

/* ── навигация ────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(#0e1d2d, #0a141f);
  border-top: 1px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  background: none; border: 0; color: var(--muted);
  padding: 8px 0 9px; font-size: 11px; cursor: pointer;
}
.nav-btn span { display: block; font-size: 20px; margin-bottom: 2px; }
.nav-btn.active { color: var(--gold-hi); }

/* ── модалка / тост ───────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4,10,16,.7); display: grid; place-items: end center;
}
.modal-box {
  position: relative; width: 100%; max-width: 430px; max-height: 75dvh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--gold);
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.modal-box h3 { color: var(--gold-hi); margin-bottom: 12px; }
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border-radius: 8px; border: 1px solid rgba(235,190,103,.78);
  background: linear-gradient(180deg, rgba(139,88,44,.78), rgba(75,40,18,.86));
  color: #ffe6aa; font-size: 14px; cursor: pointer;
}
.modal.modal-barracks {
  background: #06101a;
  place-items: stretch;
}
.modal.modal-barracks .modal-box {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #07111c;
}
.modal.modal-barracks #modal-title {
  position: absolute;
  left: 58px;
  right: 58px;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 20;
  margin: 0;
  text-align: center;
  color: var(--gold-hi);
  font-size: 16px;
  line-height: 1.15;
  text-shadow: 0 2px 4px rgba(0,0,0,.85);
}
.modal.modal-barracks #modal-body {
  height: 100%;
}
.modal.modal-barracks .modal-close {
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  z-index: 25;
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, rgba(139,88,44,.80), rgba(75,40,18,.88));
  border-color: rgba(243,207,126,.72);
  color: #fff7d7;
  font-size: 18px;
}
.build-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px; margin-bottom: 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(145,92,49,.76), rgba(75,40,18,.84));
  border: 1px solid rgba(220,166,82,.72);
  color: #f5dfae; font-size: 14px; text-align: left; cursor: pointer;
}
.build-opt:disabled { opacity: .45; }
.build-opt > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.build-opt .bo-ico { font-size: 26px; }
.build-opt .bo-cost { flex: 0 0 auto; max-width: 96px; text-align: right; font-size: 12px; color: var(--gold); white-space: normal; line-height: 1.15; }
.build-opt small { display: block; color: #d3b887; font-size: 11px; }
.market-offer { opacity: .72; }
.res-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: -6px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.res-emoji { display: inline-block; min-width: 1.2em; text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%);
  z-index: 60; background: rgba(12,24,36,.95); border: 1px solid var(--gold);
  color: var(--parch); padding: 10px 18px; border-radius: 999px; font-size: 13px;
  max-width: 90%; text-align: center;
}

/* ════ ВЕКТОРНАЯ ГРАФИКА И АНИМАЦИИ ════ */
.b-art { width: 120px; height: 120px; filter: drop-shadow(0 7px 9px rgba(0,0,0,.5)); }
.b-art svg, .crest svg, .deco svg { width: 100%; height: 100%; display: block; }
.crest { font-size: 0; padding: 6px; }

/* появление здания на острове */
.slot.built .b-art { animation: none; }
@keyframes pop { from { transform: scale(0) translateY(14px); opacity: 0; }
                 to   { transform: scale(1) translateY(0);    opacity: 1; } }

/* флаг машет */
.anim-flag { animation: flag 1.6s ease-in-out infinite; }
@keyframes flag { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-7deg); } }

/* дым поднимается */
.anim-smoke { animation: smoke 2.6s ease-out infinite; }
.anim-smoke.d2 { animation-delay: 1.3s; }
@keyframes smoke { 0% { transform: translateY(0); opacity: .8; }
                   100% { transform: translateY(-16px); opacity: 0; } }

/* кирка / молот стучат */
.anim-pick { animation: pick 1.1s ease-in-out infinite; }
@keyframes pick { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-24deg); } 55% { transform: rotate(6deg); } }

/* лёгкое покачивание (колосья, листик, хвост, кинжал) */
.anim-sway { animation: sway 2.8s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.anim-tail { animation: sway 2.2s ease-in-out infinite; }

/* пульс зелёного креста */
.anim-pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }

/* свечение фонаря / посоха */
.anim-glow { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* вода мерцает */
.anim-water { animation: water 3.5s ease-in-out infinite; }
@keyframes water { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(1.05); opacity: .7; } }

/* облака плывут над островом */
.cloud { display: none; position: absolute; pointer-events: none; opacity: .85; z-index: 3; }
.cloud-1 { top: 3%;  left: -18%; width: 110px; animation: drift 40s linear infinite; }
.cloud-2 { top: 11%; left: -18%; width: 76px;  animation: drift 58s linear infinite; animation-delay: -24s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(880px); } }

/* волны у берега */
.wave { position: absolute; border: 2px solid rgba(190,225,255,.35); border-radius: 50%; pointer-events: none; }
.wave-1 { left: 6%; right: 6%; top: 6%; bottom: 6%; animation: waveExpand 5s ease-out infinite; }
.wave-2 { left: 6%; right: 6%; top: 6%; bottom: 6%; animation: waveExpand 5s ease-out infinite; animation-delay: 2.5s; }
@keyframes waveExpand { 0% { transform: scale(.96); opacity: .8; } 100% { transform: scale(1.06); opacity: 0; } }

/* сундук готов — подпрыгивает */
.side-btn.ready { animation: none; border-color: var(--gold-hi); }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* победа в бою */
#battle-result.show { animation: pop .4s cubic-bezier(.34,1.56,.64,1) both; }

@media (prefers-reduced-motion: reduce) {
  .anim-flag, .anim-smoke, .anim-pick, .anim-sway, .anim-tail, .anim-pulse,
  .anim-glow, .anim-water, .cloud, .wave, .side-btn.ready, .slot.built .b-art { animation: none; }
}


/* ════ ЭКРАН ЗАГРУЗКИ ════ */
#loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 25%, #1a4a68, #08131f);
  transition: opacity .5s ease;
}
#loader.hide { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; padding: 24px; }
.loader-crest { font-size: 64px; animation: loaderBob 1.6s ease-in-out infinite; }
@keyframes loaderBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.loader-title {
  margin: 14px 0 22px; font-size: 30px; line-height: 1.15; letter-spacing: .04em;
  color: var(--gold-hi); text-shadow: 0 2px 0 #6e4f15, 0 6px 22px rgba(217,169,76,.4);
}
.loader-bar {
  width: 220px; max-width: 70vw; height: 8px; margin: 0 auto;
  background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden;
}
.loader-bar i {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, #e3b85e, #f3cf7e);
  animation: loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.loader-hint { margin-top: 16px; color: var(--muted); font-size: 13px; }


/* ════ ИКОНКИ ИНТЕРФЕЙСА ════ */
.res-ic { width: 18px; height: 18px; display: inline-flex; }
.res-ic svg { width: 100%; height: 100%; }
.stat-ic { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
.stat-ic svg { width: 100%; height: 100%; }
.side-btn span[data-icon] { display: inline-flex; width: 24px; height: 24px; }
.side-btn span[data-icon] svg { width: 100%; height: 100%; }
.nav-btn span[data-icon] { display: inline-flex; width: 24px; height: 24px; margin: 0 auto 2px; }
.nav-btn span[data-icon] svg { width: 100%; height: 100%; }
.nav-btn.active span[data-icon] svg { filter: drop-shadow(0 0 4px rgba(243,207,126,.6)); }


/* ════ ОПТИМИЗАЦИЯ: во время перетаскивания отключаем тяжёлое ════ */
body.dragging .res, body.dragging .stat {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.dragging .anim-flag, body.dragging .anim-smoke, body.dragging .anim-pick,
body.dragging .anim-sway, body.dragging .anim-tail, body.dragging .anim-pulse,
body.dragging .anim-glow, body.dragging .anim-water, body.dragging .cloud,
body.dragging .slot.empty .plus {
  animation-play-state: paused !important;
}
body.dragging .island-stage * {
  animation-play-state: paused !important;
  transition: none !important;
}
.island-stage { backface-visibility: hidden; }
/* меньше слоёв перерисовки */
.island-svg { pointer-events: none; }


/* ════ ТАЙМЕР УЛУЧШЕНИЯ НАД ЗДАНИЕМ ════ */
.build-timer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  z-index: 700;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10,20,30,.92); border: 1.5px solid var(--gold);
  color: #ffe09a; font-size: 18px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.build-timer .bt-ic { font-size: 16px; font-style: normal; }
.slot .b-lvl { font-size: 17px; padding: 2px 12px; }


/* ════ КНОПКА И ПАНЕЛЬ ПРОФИЛЯ ════ */
.profile-btn {
  position: relative; width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 2px solid var(--gold);
  background: var(--deep); cursor: pointer; padding: 0; overflow: visible;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.pf-ava { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.pf-ava svg { width: 130%; height: 130%; margin: -15% 0 0 -15%; }
.pf-lvl {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(#e3b85e,#b8862e); color: #261a05;
  min-width: 28px; text-align: center;
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  border: 1.5px solid #fff3cf;
}
.pf-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.pf-bigava { width: 72px; height: 72px; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--gold); background: var(--deep); flex: none; }
.pf-bigava svg { width: 130%; height: 130%; margin: -15% 0 0 -15%; }
.pf-race { color: var(--gold-hi); font-size: 13px; margin-top: 4px; }
.pf-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pf-stat {
  display: flex; align-items: center; gap: 8px;
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.pf-stat span[data-icon] { width: 22px; height: 22px; display: inline-flex; }
.pf-stat span[data-icon] svg { width: 100%; height: 100%; }
.pf-stat b { color: var(--gold-hi); font-size: 17px; }
.pf-stat i { color: var(--muted); font-size: 11px; font-style: normal; margin-left: auto; }


/* ════ 3D-ЗДАНИЯ (canvas img) ════ */
.b3d { width: 240px; height: 240px; transform: translateY(-40px); display: block;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.4));
  transform: translateY(4px); image-rendering: auto; }
.slot.built .b3d { animation: none; }

/* сломанный корабль у причала */
.broken-ship { position: absolute; width: 150px; height: 150px;
  transform: translate(-50%, -78%);
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.4));
  animation: shipRock 3.5s ease-in-out infinite; }
@keyframes shipRock { 0%,100% { transform: translate(-50%,-78%) rotate(-1.5deg); }
                      50% { transform: translate(-50%,-76%) rotate(1.5deg); } }

/* ════ СТРОЙКА: леса + пыль + таймер ════ */
.slot.under-build .b3d { opacity: .45; filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)) grayscale(.4); }
/* строительные леса — крупные, поверх здания */
.slot.under-build::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px; transform: translate(-50%, -55%);
  background:
    repeating-linear-gradient(45deg, rgba(217,169,76,0) 0 14px, rgba(243,207,126,.45) 14px 18px);
  border: 3px dashed rgba(243,207,126,.85); border-radius: 14px;
  pointer-events: none; z-index: 600;
}
/* облачка пыли стройки — поверх всего */
.slot.under-build::after {
  content: ''; position: absolute; left: 50%; top: 32%;
  width: 44px; height: 44px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(230,220,190,.95), rgba(230,220,190,0) 70%);
  border-radius: 50%; animation: dust 1.5s ease-out infinite; pointer-events: none; z-index: 601;
}
@keyframes dust { 0% { transform: translateX(-50%) translateY(0) scale(.5); opacity: .9; }
                  100% { transform: translateX(-50%) translateY(-34px) scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .broken-ship, .slot.under-build::after { animation: none; }
}

.bo-ico3d { width: 52px; height: 52px; display: block; object-fit: contain; background: transparent; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }


/* ════ ПРОФИЛЬ (улучшенный) ════ */
.pf-box { max-width: 440px; }
.pf-head-info h3 { color: var(--gold-hi); font-size: 18px; }
.pf-lvline { color: var(--muted); font-size: 13px; margin-top: 4px; }
.pf-lvline b { color: var(--gold); }
.pf-xpbar {
  position: relative; height: 22px; margin: 14px 0; border-radius: 999px;
  background: var(--deep); border: 1px solid var(--line); overflow: hidden;
}
.pf-xpbar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #e3b85e, #f3cf7e); border-radius: 999px;
  transition: width .5s ease;
}
.pf-xpbar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.pf-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pf-stat {
  display: flex; align-items: center; gap: 10px;
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.pf-stat.atk { border-color: rgba(192,57,43,.4); }
.pf-stat.def { border-color: rgba(63,111,158,.4); }
.pf-stat span[data-icon] { width: 26px; height: 26px; display: inline-flex; flex: none; }
.pf-stat span[data-icon] svg { width: 100%; height: 100%; }
.pf-stat b { color: var(--gold-hi); font-size: 17px; display: block; }
.pf-stat i { color: var(--muted); font-size: 11px; font-style: normal; }

/* кнопка починки причала на корабле */
.broken-ship-btn {
  position: absolute; transform: translate(-50%, -78%);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.broken-ship-btn .broken-ship { position: static; transform: none; animation: shipRock 3.5s ease-in-out infinite; }
.ship-fix {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: rgba(10,20,30,.92); border: 1.5px solid var(--gold);
  color: #ffe09a; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: none;
}
.pier-hammer {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
  animation: hammerHit .8s ease-in-out infinite;
}
.pier-work-btn, .world-boat-btn {
  position: absolute; transform: translate(-50%, -76%);
  width: 170px; height: 170px; border: 0; background: none; padding: 0;
  cursor: pointer; overflow: visible;
}
.pier-work-base {
  position: absolute; inset: 20px;
  border: 3px dashed rgba(243,207,126,.8); border-radius: 18px;
  background: repeating-linear-gradient(45deg, rgba(217,169,76,0) 0 14px, rgba(243,207,126,.38) 14px 18px);
  box-shadow: 0 8px 14px rgba(0,0,0,.35);
}
.pier-build-hammer { top: 28%; left: 58%; }
.pier-build-dust { top: 52%; }
.pier-timer { top: 4px; }
.world-boat-img {
  width: 170px; height: 170px; display: block; object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(0,0,0,.42));
  animation: boatRock 3.4s ease-in-out infinite;
  transform-origin: 50% 72%;
}
.boat-lvl {
  position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%);
  color: var(--parch); background: rgba(10,20,30,.86);
  border: 1.5px solid var(--gold); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
@keyframes boatRock {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-4px) rotate(1.5deg); }
}
.world-boat-btn.sailing {
  animation: boatSailAway 2.4s ease-in forwards;
  pointer-events: none;
}
.port-expedition-btn {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 190px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid rgba(239,198,111,.86);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(137,82,39,.90), rgba(64,31,12,.94));
  color: #fff0bd;
  box-shadow: 0 7px 16px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,232,174,.15);
  text-align: left;
}
.port-away-icon { grid-row: 1 / 3; font-size: 25px; text-align: center; }
.port-away-label { font-size: 12px; font-weight: 800; line-height: 1.15; }
.port-away-time { color: #ffe395; font-size: 16px; font-weight: 900; }
.port-expedition-btn.status-battle_ready { border-color: #f4d15d; }
.port-home-badge {
  position: absolute; top: 8px; left: 50%; transform: translate(-50%, -100%);
  padding: 4px 10px; border: 1px solid #ffe296; border-radius: 999px;
  background: linear-gradient(180deg, #8a5628, #44220d); color: #fff0b9;
  font-size: 12px; font-weight: 900; white-space: nowrap;
}
@keyframes boatSailAway {
  0% { opacity: 1; transform: translate(-50%, -76%) translate3d(0,0,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -76%) translate3d(640px, 360px, 0) scale(.72); }
}
body.dragging .world-boat-img, body.dragging .pier-hammer { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .world-boat-img, .pier-hammer, .world-boat-btn.sailing { animation: none !important; }
}


/* ════ ФОН-КАРТИНКА ОСТРОВА ════ */
#island-bg { position: absolute; inset: 0; z-index: 0; display: block;
  width: 4000px; height: 3077px; object-fit: fill;
  pointer-events: none; user-select: none; -webkit-user-drag: none; }
#paths-canvas { position: absolute; inset: 0; z-index: 1; width: 4000px; height: 3077px; pointer-events: none; }

/* красивый маркер места под стройку (плюсик уже на картинке, добавим лёгкое свечение по тапу) */
.slot.empty {
  width: 190px; height: 190px;
  transform: translate(-50%, -50%) scale(var(--depth, 1));
  z-index: 500 !important;   /* пустые слоты всегда кликабельны поверх всего */
}
.plus-marker {
  display: block; width: 110px; height: 110px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.45);
  background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);
  animation: slotPulse 2.4s ease-in-out infinite;
}
.slot.empty:active .plus-marker { transform: scale(.92); border-color: rgba(243,207,126,.9); }
/* заблокированный слот (нужно сначала построить ниже) */
.slot.locked-slot { pointer-events: none; }
.slot.locked-slot .plus-marker {
  border-color: rgba(255,255,255,.2);
  background: radial-gradient(circle, rgba(40,40,50,.3), transparent 70%);
  animation: none;
}
.slot.locked-slot::after {
  content: "🔒"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); font-size: 28px; opacity: .7;
}


/* ════ ЖИВОТНЫЕ ФЕРМЫ (пасутся в загоне) ════ */
.farm-cow, .farm-sheep {
  position: absolute; pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
.farm-cow { width: 50px; height: 42px; left: 24%; top: 52%;
  animation: graze-walk-cow 9s ease-in-out infinite; }
.farm-sheep { width: 44px; height: 38px; left: 18%; top: 60%;
  animation: graze-walk-sheep 7.5s ease-in-out infinite; }
.farm-cow svg, .farm-sheep svg { width: 100%; height: 100%; }

/* корова бродит влево-вправо по загону */
@keyframes graze-walk-cow {
  0%, 100% { transform: translateX(0) scaleX(1); }
  25% { transform: translateX(9px) scaleX(1); }
  27% { transform: translateX(9px) scaleX(-1); }
  72% { transform: translateX(-7px) scaleX(-1); }
  74% { transform: translateX(-7px) scaleX(1); }
}
@keyframes graze-walk-sheep {
  0%, 100% { transform: translateX(0) scaleX(1); }
  30% { transform: translateX(-8px) scaleX(1); }
  32% { transform: translateX(-8px) scaleX(-1); }
  70% { transform: translateX(8px) scaleX(-1); }
  72% { transform: translateX(8px) scaleX(1); }
}
/* голова опускается-поднимается (жуёт траву) */
.cow-head { animation: nibble 2.2s ease-in-out infinite; }
.sheep-head { animation: nibble 1.8s ease-in-out infinite; }
@keyframes nibble {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(12deg) translateY(2px); }
}

/* оптимизация: при перетаскивании карты животные замирают */
body.dragging .farm-cow, body.dragging .farm-sheep,
body.dragging .cow-head, body.dragging .sheep-head { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .farm-cow, .farm-sheep, .cow-head, .sheep-head { animation: none; }
}


/* ════ КАРТИНКИ-ЗДАНИЯ + ХОДЯЧИЕ ЖИВОТНЫЕ ════ */
/* если у стройки своя картинка — не рисуем леса/штриховку */
.slot.under-build.has-build-img::before { display: none; }
.slot.under-build.has-build-img .b3d { opacity: 1; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }

/* загон с ходячими животными поверх картинки фермы */
.farm-pen { position: absolute; left: 60%; top: 62%; width: 80px; height: 40px;
  transform: translateX(-50%); pointer-events: none; }
.farm-pen .pen-cow { width: 38px; height: 30px; }
.farm-pen .pen-sheep { width: 32px; height: 26px; }
.pen-cow, .pen-sheep { position: absolute; bottom: 0; }
.pen-cow { width: 42px; height: 34px; left: 10%;
  animation: penWalkCow 11s linear infinite; }
.pen-sheep { width: 36px; height: 30px; left: 40%;
  animation: penWalkSheep 9s linear infinite; }
.pen-cow svg, .pen-sheep svg { width: 100%; height: 100%; }
/* убрать тени-эллипсы у животных в загоне (первый ellipse в svg) */
.pen-cow svg > ellipse:first-of-type,
.pen-sheep svg > ellipse:first-of-type { display: none; }

@keyframes penWalkCow {
  0% { transform: translateX(0) scaleX(1); }
  44% { transform: translateX(46px) scaleX(1); }
  48% { transform: translateX(46px) scaleX(-1); }
  94% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes penWalkSheep {
  0% { transform: translateX(0) scaleX(-1); }
  44% { transform: translateX(-34px) scaleX(-1); }
  48% { transform: translateX(-34px) scaleX(1); }
  94% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(0) scaleX(-1); }
}
.pen-cow, .pen-sheep { animation: none !important; }


/* ════ ОБЛАЧКО СБОРА РЕСУРСА ════ */
.collect-bubble {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: none; border-radius: 999px;
  padding: 5px 12px 5px 8px; cursor: pointer; z-index: 720;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  animation: none;
}
.collect-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}
.collect-bubble .cb-ic { font-size: 18px; line-height: 1; }
.collect-bubble b { color: #2a2018; font-size: 15px; font-weight: 800; }
.collect-bubble .cb-part { display: inline-flex; align-items: center; gap: 2px; }
.collect-bubble .cb-more { color: #7a5b1c; font-weight: 900; margin-left: -1px; }
.collect-bubble.full { animation: none; }
@keyframes bubbleFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}
@keyframes bubbleFull {
  0%,100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-5px) scale(1.08); }
}
body.dragging .collect-bubble { animation: none; }
.gain-float {
  position: absolute; left: 50%; top: -62px; z-index: 780;
  transform: translateX(calc(-50% + var(--x, 0px)));
  color: #fff7d7; font-size: 16px; font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,.65);
  pointer-events: none; animation: gainFloat .9s ease-out forwards;
}
@keyframes gainFloat {
  from { opacity: 0; transform: translateX(calc(-50% + var(--x, 0px))) translateY(8px) scale(.9); }
  18% { opacity: 1; }
  to { opacity: 0; transform: translateX(calc(-50% + var(--x, 0px))) translateY(-34px) scale(1.08); }
}

.slot,
.slot:active,
.slot:focus,
.slot:focus-visible,
.broken-ship-btn,
.broken-ship-btn:active,
.broken-ship-btn:focus,
.broken-ship-btn:focus-visible {
  background: transparent !important;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.slot *,
.broken-ship-btn * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.slot.empty:active .plus-marker {
  transform: none;
  border-color: rgba(255,255,255,.45);
}


/* ════ АНИМАЦИЯ СТРОЙКИ: молоток + пыль ════ */
.build-hammer {
  position: absolute; top: 20%; left: 58%; font-size: 28px;
  z-index: 710; pointer-events: none; transform-origin: bottom left;
  animation: hammerHit 0.7s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
@keyframes hammerHit {
  0%, 100% { transform: rotate(-35deg); }
  50% { transform: rotate(10deg); }
}
.build-dust {
  position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
  transform: translate(-50%, -30%); z-index: 705; pointer-events: none;
  background: radial-gradient(circle, rgba(235,225,195,.95), rgba(235,225,195,0) 70%);
  border-radius: 50%; animation: dustPuff 1.4s ease-out infinite;
}
@keyframes dustPuff {
  0% { transform: translate(-50%, -10%) scale(.4); opacity: .9; }
  100% { transform: translate(-50%, -60%) scale(1.5); opacity: 0; }
}
body.dragging .build-hammer, body.dragging .build-dust { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce){ .build-hammer, .build-dust { animation: none; } }


/* ════ МЕНЮ ЗДАНИЯ / СНОС ════ */
.bm-info { color: var(--muted); font-size: 14px; margin-bottom: 14px; text-align: center; }
.bm-stats {
  display: grid; gap: 8px; margin-bottom: 14px;
}
.bm-stats div {
  display: grid; grid-template-columns: minmax(92px, .8fr) minmax(0, 1.4fr);
  gap: 10px; align-items: center;
  background: rgba(10,20,30,.45); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px;
}
.bm-stats span { color: var(--muted); font-size: 12px; }
.bm-stats b { color: var(--parch); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.bm-actions { display: grid; gap: 9px; }
.bm-action {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(180deg, rgba(145,91,45,.78), rgba(76,40,17,.86)); color: #fff0ca;
  border: 1.5px solid rgba(222,172,87,.76); border-radius: 10px; padding: 13px 12px;
  cursor: pointer; font-size: 15px; font-weight: 700;
}
.bm-action small { color: #d1b486; font-size: 12px; font-weight: 500; }
.bm-action:disabled { opacity: .55; cursor: default; }
.king-send-toggle.active {
  border-color: rgba(255,226,145,.94);
  background: linear-gradient(180deg, rgba(160,101,48,.86), rgba(88,45,18,.92));
  box-shadow: inset 0 2px 0 rgba(255,237,178,.17), 0 0 18px rgba(255,198,91,.20);
}
.bm-collect { border-color: rgba(76,175,109,.65); }
.ship-menu { display: grid; gap: 12px; }
.ship-menu-img {
  width: 150px; height: 150px; object-fit: contain; justify-self: center;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
.ship-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ship-stats div {
  background: rgba(10,20,30,.45); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; text-align: center;
}
.ship-stats span { display: block; color: var(--muted); font-size: 11px; }
.ship-stats b { display: block; margin-top: 3px; color: var(--gold-hi); font-size: 13px; }
.world-map-wrap {
  position: relative; aspect-ratio: 1448 / 1086; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(217,169,76,.55);
  background: #061525;
}
.world-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 94px; max-width: 140px; padding: 7px 9px;
  border-radius: 999px; border: 1.5px solid rgba(243,207,126,.86);
  background: linear-gradient(180deg, rgba(139,86,44,.76), rgba(70,37,17,.84)); color: #f8e8c5;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  text-align: center; cursor: pointer;
}
.world-hotspot b, .world-hotspot small { display: block; line-height: 1.1; }
.world-hotspot b { font-size: 11px; color: var(--gold-hi); }
.world-hotspot small { margin-top: 3px; font-size: 9px; color: var(--muted); }
.world-hotspot.home { left: 50%; top: 76%; }
.world-hotspot.exile { left: 78%; top: 38%; }
.world-hotspot.north { left: 37%; top: 21%; }
.world-hotspot.west { left: 18%; top: 42%; }
.world-hotspot.locked { opacity: .58; border-color: rgba(126,147,165,.55); }
.mob-map-wrap {
  position: relative; aspect-ratio: 1448 / 1086; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(217,169,76,.55);
  background: #071927;
}
.mob-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mob-map-grid {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
}
.mob-sector {
  position: relative; display: grid; align-content: end; justify-items: start;
  padding: 8px; text-align: left; border: 1px solid rgba(255,255,255,.16);
  background: rgba(4,8,12,.48); color: #d8e2e8; cursor: pointer;
}
.mob-sector.locked { background: rgba(2,4,8,.72); color: rgba(216,226,232,.5); }
.mob-sector.locked::before {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.42);
}
.mob-sector b, .mob-sector small { position: relative; z-index: 1; }
.mob-sector b { font-size: 12px; color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.mob-sector small { font-size: 10px; color: inherit; }
.mob-sector.open {
  background: linear-gradient(0deg, rgba(66,115,50,.55), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 2px rgba(243,207,126,.75);
}
.mob-map-note { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.landing-zone { display: grid; gap: 12px; }
.landing-zone img {
  width: 100%; border-radius: 10px; border: 1px solid rgba(217,169,76,.55);
}
.landing-info {
  background: rgba(10,20,30,.55); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.landing-info b { display: block; color: var(--gold-hi); margin-bottom: 4px; }
.landing-info span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.ship-load-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid rgba(226,170,83,.78);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(126,76,34,.68), rgba(52,26,10,.78));
  box-shadow: inset 0 2px 0 rgba(255,231,174,.12);
}
.ship-load-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ffe2a0;
  font-size: 13px;
  font-weight: 800;
}
.ship-load-head span { color: #fff3c8; }
.ship-load-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(92px, 1fr) 34px 38px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(235,188,100,.42);
  border-radius: 9px;
  background: rgba(35,18,7,.40);
}
.ship-load-unit {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ship-load-unit img {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.ship-load-unit span { min-width: 0; display: grid; gap: 1px; }
.ship-load-unit b {
  color: #fff0bd;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ship-load-unit small { color: #d5b786; font-size: 9px; }
.ship-load-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,206,126,.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(158,99,45,.82), rgba(76,38,14,.90));
  color: #fff0bd;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
.ship-load-range {
  width: 100%;
  accent-color: #e3ad56;
}
.ship-load-count {
  color: #ffe49a;
  font-size: 14px;
  text-align: right;
}
.ship-load-empty {
  padding: 12px;
  border: 1px dashed rgba(224,170,88,.48);
  border-radius: 8px;
  color: #d2b181;
  text-align: center;
}
.ship-load-summary {
  padding-top: 2px;
  color: #e8c58d;
  font-size: 12px;
  text-align: center;
}
.ship-king-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(239,190,98,.56);
  border-radius: 9px;
  background: rgba(38,18,8,.43);
  color: #f5dba8;
  font-weight: 800;
}
.ship-king-toggle.active {
  border-color: rgba(255,226,145,.96);
  background: linear-gradient(180deg, rgba(158,96,39,.84), rgba(79,35,12,.90));
  box-shadow: 0 0 14px rgba(245,193,84,.20);
}
.ship-king-toggle b { color: #ffe49a; font-size: 12px; }
.expedition-menu { display: grid; gap: 12px; }
.expedition-rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.expedition-rosters section {
  min-width: 0; padding: 9px; border: 1px solid rgba(210,153,75,.68); border-radius: 9px;
  background: linear-gradient(180deg, rgba(130,78,37,.55), rgba(61,31,12,.68));
}
.expedition-rosters h4 { margin: 0 0 7px; color: #ffe09a; font-size: 12px; text-align: center; }
.exp-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.exp-unit-card {
  position: relative; min-width: 0; min-height: 94px; padding: 5px 4px 6px;
  display: grid; justify-items: center; align-content: end;
  border: 1px solid rgba(238,190,102,.58); border-radius: 8px;
  background: rgba(36,19,7,.42); overflow: hidden;
}
.exp-unit-card.enemy { border-color: rgba(183,116,93,.64); background: rgba(48,20,17,.48); }
.exp-unit-model { width: 66px !important; height: 66px !important; object-fit: contain; border: 0 !important; border-radius: 0 !important; }
.exp-unit-model.enemy { filter: grayscale(.34) sepia(.24) brightness(.82); }
.exp-axe-model {
  display: block; background-repeat: no-repeat; background-size: 300% 200%; background-position: 0 0;
}
.exp-unit-card span:not(.exp-unit-model) {
  max-width: 100%; color: #f3d9a6; font-size: 9px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exp-unit-card b {
  position: absolute; top: 4px; right: 4px; min-width: 22px; padding: 2px 5px;
  border-radius: 999px; background: #3d1f0a; border: 1px solid #e1ae58;
  color: #fff0bd; font-size: 10px; text-align: center;
}
.exp-empty { grid-column: 1 / -1; padding: 18px 4px; color: #c5a77d; font-size: 11px; text-align: center; }
.exp-travel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1.5px solid rgba(233,184,93,.76); border-radius: 9px;
  background: linear-gradient(180deg, rgba(143,87,41,.68), rgba(70,35,13,.78));
}
.exp-travel span { color: #e4c18c; font-size: 12px; }
.exp-travel b { color: #ffe49a; font-size: 20px; }
.exp-report { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.exp-report h3 { grid-column: 1 / -1; margin: 0; color: #ffd977; text-align: center; }
.exp-report div {
  display: grid; gap: 3px; min-width: 0; padding: 8px;
  border: 1px solid rgba(203,145,68,.62); border-radius: 8px; background: rgba(49,25,9,.52);
}
.exp-report span { color: #d9bd8e; font-size: 10px; }
.exp-report b { color: #fff0bd; font-size: 12px; overflow-wrap: anywhere; }
.exp-report.win h3 { color: #bde78e; }
.exp-report.lose h3 { color: #f2a092; }
.landing-rosters { margin-top: -2px; }

.unit-roster-title {
  margin: 5px 0 2px; color: #ffe09a; font-size: 13px; font-weight: 800; text-align: center;
}
.unit-roster-list { display: grid; gap: 7px; }
.unit-roster-card {
  min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 9px; align-items: center; padding: 7px 8px;
  border: 1px solid rgba(209,151,74,.68); border-radius: 9px;
  background: linear-gradient(180deg, rgba(132,78,36,.62), rgba(63,32,12,.74));
}
.unit-roster-card.wounded { border-color: rgba(185,91,69,.72); }
.unit-roster-card.healing { border-color: rgba(101,169,100,.74); }
.unit-roster-card.away { opacity: .82; border-color: rgba(103,151,175,.65); }
.unit-roster-icon { position: relative; width: 50px; height: 50px; display: grid; place-items: center; }
.unit-roster-icon img { position: relative; z-index: 2; width: 50px; height: 50px; object-fit: contain; }
.unit-roster-icon i { position: absolute; font-style: normal; font-size: 25px; }
.unit-roster-info { min-width: 0; display: grid; gap: 3px; }
.unit-roster-info b { color: #fff0bd; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-roster-info small { color: #d3b484; font-size: 10px; line-height: 1.2; }
.unit-roster-action {
  min-width: 64px; padding: 8px 9px; border: 1px solid #deb05c; border-radius: 8px;
  background: linear-gradient(180deg, #8b5729, #4a260f); color: #ffe7aa;
  font-size: 11px; font-weight: 800;
}
.unit-roster-action.danger { border-color: #bd6755; background: linear-gradient(180deg, #844033, #4f2019); }
.unit-roster-state { font-size: 20px; }
.unit-roster-empty {
  padding: 14px; border: 1px dashed rgba(205,155,83,.48); border-radius: 8px;
  color: #c9aa7c; font-size: 12px; text-align: center;
}

@media (max-width: 420px) {
  .expedition-rosters { grid-template-columns: 1fr; }
  .exp-unit-card { min-height: 84px; }
}
.bm-demolish {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(#7a2c24, #5c201a); color: #ffd9d2;
  border: 1.5px solid #a84236; border-radius: 14px; padding: 14px; cursor: pointer;
  font-size: 16px; font-weight: 700;
}
.bm-demolish small { color: #f0b8b0; font-size: 12px; font-weight: 500; }
.bm-demolish:active { transform: scale(.97); }

/* ════ ВНУТРЕННЯЯ КАЗАРМА ════ */
.barracks-room {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background-color: #111a24;
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 -160px 100px rgba(12,20,28,.34);
}
.barracks-room::before {
  display: none;
}
.barracks-room.br-selected-axe::before {
  opacity: 1;
  left: 15%;
  top: 38.5%;
  width: 34%;
  height: 31%;
}
.barracks-room.br-selected-archer::before {
  opacity: 1;
  left: 51%;
  top: 38.5%;
  width: 34%;
  height: 31%;
}
.br-side {
  position: absolute; z-index: 21; top: calc(62px + env(safe-area-inset-top));
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(148,94,47,.74), rgba(77,41,17,.82));
  border: 1.5px solid rgba(255,218,139,.82);
  color: #ffe4a3; font-size: 24px; font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,234,173,.18), 0 5px 12px rgba(0,0,0,.35);
}
.br-side:disabled { opacity: .45; filter: grayscale(.8); cursor: default; }
.br-hammer, .br-back { left: 12px; }
.br-next { right: 12px; }
.br-next::after {
  content: "🔒";
  position: absolute; right: -7px; bottom: -8px;
  font-size: 13px;
}
.br-unit-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 84px);
  justify-content: center;
  gap: 18px;
  z-index: 5;
  margin: 0 auto -2px;
}
.br-unit {
  position: relative;
  height: 76px; padding: 4px 4px 5px;
  border-radius: 12px;
  border: 2px solid rgba(227,184,103,.64);
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%, rgba(0,0,0,.12) 70%),
    linear-gradient(180deg, rgba(153,96,46,.70), rgba(78,42,18,.80));
  color: var(--parch); cursor: pointer;
  display: grid; justify-items: center; align-content: center;
  box-shadow: inset 0 2px 0 rgba(255,226,154,.18), inset 0 -5px 10px rgba(0,0,0,.24), 0 7px 15px rgba(0,0,0,.38);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.br-unit.active {
  border-color: #ffe69c;
  transform: translateY(-5px);
  box-shadow: inset 0 2px 0 rgba(255,245,196,.25), 0 0 0 3px rgba(255,226,144,.28), 0 0 22px rgba(255,206,92,.34), 0 10px 19px rgba(0,0,0,.45);
}
.br-unit.active::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 16px;
  border: 1px solid rgba(255,230,156,.78);
  box-shadow: inset 0 0 12px rgba(255,226,144,.18);
  pointer-events: none;
}
.br-unit img {
  position: relative;
  z-index: 2;
  width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.42));
}
.br-fallback {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-style: normal;
  font-size: 34px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.br-unit span {
  position: absolute; left: 5px; right: 5px; bottom: 5px;
  font-size: 10px; font-weight: 800; text-align: center;
  color: #ffe6a7; text-shadow: 0 1px 2px #000;
}
.br-unit b {
  position: absolute; right: -5px; top: -6px;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid #ffe69c;
  background: linear-gradient(180deg, #5e340f, #251006); color: #fff7d7;
  font-size: 11px;
}
.br-board {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 4;
  padding: 0 6px 4px;
  display: grid;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.br-board::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -22px -18px -16px;
  background: linear-gradient(180deg, rgba(48,22,6,0) 0%, rgba(42,18,5,.20) 24%, rgba(30,12,3,.38) 100%);
}
.br-board-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1.5px solid rgba(229,177,94,.76);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0) 22%, rgba(0,0,0,.16) 72%),
    linear-gradient(180deg, rgba(151,94,43,.74), rgba(75,38,15,.82));
  box-shadow: inset 0 2px 0 rgba(255,231,169,.18), 0 5px 12px rgba(0,0,0,.32);
}
.br-board-head span {
  color: #ffe49d; font-family: 'Russo One', sans-serif;
  font-size: 19px;
  text-shadow: 0 2px 3px rgba(0,0,0,.72);
}
.br-board-head b { color: #fff2c4; font-size: 13px; text-align: right; text-shadow: 0 1px 2px #000; }
.br-stat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
}
.br-stat-grid div {
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  min-width: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%, rgba(0,0,0,.13) 78%),
    linear-gradient(180deg, rgba(132,79,37,.70), rgba(64,32,12,.80));
  border: 1px solid rgba(204,145,70,.72);
  border-radius: 9px; padding: 7px 8px;
  box-shadow: inset 0 1px 0 rgba(255,221,147,.12), 0 3px 8px rgba(0,0,0,.24);
}
.br-stat-grid span { color: #e4c792; font-size: 11px; text-shadow: 0 1px 2px #000; }
.br-stat-grid b { color: #fff1bd; font-size: 12px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.br-capline {
  margin: 0; color: #f0d39c; font-size: 12px; text-align: center;
  text-shadow: 0 1px 2px #000;
}
.br-train {
  border-color: rgba(154,214,118,.82);
  background: linear-gradient(180deg, rgba(72,126,75,.82), rgba(35,75,46,.88));
  box-shadow: inset 0 2px 0 rgba(210,255,184,.16), 0 6px 14px rgba(0,0,0,.32);
}
.br-upgrade-room {
  display: grid; align-items: end;
  padding: calc(112px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
}
.br-upgrade-card {
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(129,77,35,.78), rgba(58,29,10,.86));
  border: 1.5px solid rgba(229,177,94,.78);
  box-shadow: inset 0 2px 0 rgba(255,231,169,.14), 0 -8px 24px rgba(0,0,0,.34);
}
.br-upgrade-card h3 {
  margin: 0 0 10px;
  color: var(--gold-hi);
  font-size: 17px;
  text-align: center;
}

@media (max-height: 720px) {
  .br-unit-row { grid-template-columns: repeat(2, 76px); gap: 12px; }
  .br-unit { height: 68px; }
  .br-unit img { width: 52px; height: 52px; }
  .br-board { gap: 6px; padding-left: 4px; padding-right: 4px; }
  .br-stat-grid { gap: 6px; }
  .br-stat-grid div { padding: 6px 7px; }
}

/* ════ ВНУТРЕННЯЯ ФЕРМА ════ */
.farm-room {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #25170d;
  background-size: cover;
  background-position: center top;
}
.farm-board {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-height: 48%;
  overflow-y: auto;
  padding: 8px 4px 4px;
  display: grid;
  gap: 8px;
  scrollbar-width: none;
}
.farm-board::-webkit-scrollbar { display: none; }
.farm-section-title {
  justify-self: center;
  min-width: 210px;
  padding: 8px 18px;
  border: 1.5px solid rgba(244,201,112,.78);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(148,94,48,.76), rgba(76,40,17,.84));
  color: #ffe5a7;
  font-family: 'Russo One', sans-serif;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 2px 3px #271306;
  box-shadow: inset 0 2px 0 rgba(255,233,174,.14), 0 4px 10px rgba(0,0,0,.28);
}
.farm-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}

/* ═════ ВНУТРЕННИЙ РЫНОК ═════ */
.market-room {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1c1109;
  background-size: cover;
  background-position: center top;
}
.market-board {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-height: 44%;
  overflow-y: auto;
  padding: 6px 4px 4px;
  scrollbar-width: none;
}
.market-board::-webkit-scrollbar { display: none; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.market-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-rows: 34px auto auto 1fr;
  align-content: start;
  justify-items: center;
  gap: 4px;
  padding: 9px 7px;
  border: 1.5px solid rgba(214,154,75,.70);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(117,69,31,.72), rgba(46,23,9,.84));
  color: #f3d8a5;
  box-shadow: inset 0 2px 0 rgba(255,230,172,.11), 0 5px 12px rgba(0,0,0,.24);
}
.market-card.clickable {
  border-color: rgba(255,216,132,.92);
  cursor: pointer;
}
.market-card:disabled { opacity: .62; }
.market-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 25px;
}
.market-icon .res-img { width: 34px; height: 34px; vertical-align: 0; }
.market-card b {
  max-width: 100%;
  color: #ffe49a;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-card small {
  color: #e0c18e;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.market-card small .res-img {
  width: 18px;
  height: 18px;
  vertical-align: -5px;
}
.market-card em {
  align-self: end;
  color: #fff2c3;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

/* ═════ ВНУТРЕННИЙ ЗАМОК ═════ */
.castle-room {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #130d0b;
  background-size: cover;
  background-position: center top;
}
.castle-room::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12,7,5,0), rgba(12,7,5,.20) 42%, rgba(8,4,3,.34));
}
.castle-room-tabs {
  position: absolute;
  z-index: 8;
  top: calc(58px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.castle-room-tab {
  min-height: 42px;
  border: 1.5px solid rgba(211,157,79,.68);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(119,66,29,.75), rgba(52,25,10,.84));
  color: #e7c58d;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px #1d0b04;
  box-shadow: inset 0 2px 0 rgba(255,227,166,.10), 0 4px 10px rgba(0,0,0,.28);
}
.castle-room-tab.active {
  border-color: #ffe19a;
  color: #fff0b7;
  background: linear-gradient(180deg, rgba(159,96,42,.82), rgba(76,37,14,.90));
  box-shadow: inset 0 2px 0 rgba(255,239,190,.18), 0 0 14px rgba(226,165,71,.22);
}
.castle-board {
  position: absolute;
  z-index: 9;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-height: 47%;
  overflow-y: auto;
  padding: 8px 4px 4px;
  display: grid;
  gap: 8px;
  scrollbar-width: none;
}
.castle-board::-webkit-scrollbar { display: none; }
.castle-board-title {
  justify-self: center;
  min-width: 210px;
  padding: 8px 18px;
  border: 1.5px solid rgba(219,165,84,.78);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(128,72,31,.80), rgba(56,27,11,.88));
  color: #ffe2a0;
  font-family: 'Russo One', sans-serif;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 2px 3px #190803;
  box-shadow: inset 0 2px 0 rgba(255,233,174,.13), 0 5px 12px rgba(0,0,0,.34);
}
.castle-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}
.castle-stat-grid div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(186,128,59,.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(105,55,24,.76), rgba(47,21,8,.84));
  box-shadow: inset 0 1px 0 rgba(255,222,148,.10), 0 3px 8px rgba(0,0,0,.24);
}
.castle-stat-grid div.wide { grid-column: 1 / -1; }
.castle-stat-grid span { color: #d9b77e; font-size: 10px; }
.castle-stat-grid b { color: #fff0b8; font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.castle-actions { display: grid; gap: 7px; }
.castle-action {
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1.5px solid rgba(222,169,83,.78);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(139,82,35,.84), rgba(64,30,11,.90));
  color: #ffe4a1;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px #1d0b04;
  box-shadow: inset 0 2px 0 rgba(255,233,174,.13), 0 5px 12px rgba(0,0,0,.30);
}
.castle-action small { color: #d7b57e; font-size: 10px; font-weight: 600; }
.castle-action:disabled { opacity: .54; filter: grayscale(.22); }
.castle-finish { border-color: rgba(224,192,102,.85); }
.castle-equipment-board { max-height: 44%; }
.castle-equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.castle-equipment-slot {
  min-width: 0;
  min-height: 76px;
  padding: 8px 5px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 7px;
  border: 1.5px solid rgba(202,146,68,.76);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(116,63,27,.80), rgba(48,21,8,.90));
  color: #ffe5a5;
  box-shadow: inset 0 2px 0 rgba(255,229,167,.11), 0 4px 10px rgba(0,0,0,.30);
}
.castle-equipment-slot i {
  grid-row: 1 / 3;
  font-style: normal;
  font-size: 28px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.castle-equipment-slot span { min-width: 0; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.castle-equipment-slot b { color: #d8b476; font-size: 10px; text-align: left; }
.castle-equipment-slot small {
  grid-column: 2;
  color: #caa46c;
  font-size: 9px;
  text-align: left;
}
.castle-equipment-slot.active {
  border-color: rgba(255,225,144,.95);
  background: linear-gradient(180deg, rgba(151,88,37,.82), rgba(66,31,12,.92));
  box-shadow: inset 0 2px 0 rgba(255,236,179,.16), 0 0 16px rgba(226,165,71,.22);
}
.castle-note { color: #c8a472; font-size: 10px; text-align: center; text-shadow: 0 1px 2px #000; }
.castle-board-title.small {
  min-width: 132px;
  padding: 5px 12px;
  font-size: 12px;
}
.king-figure {
  position: absolute;
  z-index: 7;
  top: calc(98px + env(safe-area-inset-top));
  left: 50%;
  width: min(64vw, 330px);
  height: min(54vh, 570px);
  transform: translateX(-50%);
  animation: kingIdle 3.4s ease-in-out infinite;
  pointer-events: none;
}
.king-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform-origin: center center;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.50));
}
.king-body {
  width: 72%;
  transform: translate(-50%, -46%);
  z-index: 2;
}
.king-spear {
  width: 108%;
  z-index: 3;
  transform: translate(-47%, -43%) rotate(-4deg);
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.45));
}
.king-spear.old {
  width: 86%;
  transform: translate(-50%, -44%) rotate(43deg);
}
.king-hand {
  width: 20%;
  z-index: 4;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.42));
}
.king-hand-left { transform: translate(-160%, -1%) rotate(-12deg); }
.king-hand-right { transform: translate(70%, -2%) rotate(10deg); }
.king-inventory {
  display: grid;
  gap: 7px;
}
.king-item-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px 1fr 70px 78px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(210,153,75,.70);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(97,53,23,.72), rgba(39,18,8,.82));
  box-shadow: inset 0 1px 0 rgba(255,229,167,.10), 0 4px 9px rgba(0,0,0,.25);
}
.king-item-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.45));
}
.king-item-card div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.king-item-card b {
  color: #ffe6a8;
  font-size: 11px;
}
.king-item-card span,
.king-item-card small {
  color: #d3b27d;
  font-size: 9px;
}
.king-item-equip,
.king-item-break {
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid rgba(222,174,94,.74);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(132,78,35,.74), rgba(61,30,12,.84));
  color: #ffe6a8;
  font-size: 10px;
  font-weight: 800;
}
.king-item-break {
  background: linear-gradient(180deg, rgba(93,60,35,.72), rgba(38,22,12,.84));
  color: #e8c99c;
}

@keyframes kingIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-3px) scale(1.012); }
}

@media (max-height: 720px) {
  .castle-room-tabs { top: calc(52px + env(safe-area-inset-top)); }
  .castle-board { max-height: 50%; gap: 6px; }
  .castle-equipment-slot { min-height: 65px; }
  .king-figure { top: calc(82px + env(safe-area-inset-top)); width: min(58vw, 285px); height: min(48vh, 480px); }
  .king-item-card { grid-template-columns: 40px 1fr 58px 66px; gap: 5px; }
}
.farm-stat-grid div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(210,153,75,.68);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(132,78,35,.70), rgba(66,34,13,.80));
  box-shadow: inset 0 1px 0 rgba(255,224,151,.11), 0 3px 8px rgba(0,0,0,.23);
}
.farm-stat-grid span {
  min-width: 0;
  color: #e4c28d;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.farm-stat-grid b {
  color: #fff0bc;
  font-size: 12px;
  white-space: nowrap;
}
.farm-work-line {
  color: #ffe2a0;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.farm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.farm-action {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1.5px solid rgba(225,176,91,.78);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(151,96,50,.80), rgba(78,42,19,.88));
  color: #ffe6aa;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,234,172,.14), 0 4px 9px rgba(0,0,0,.27);
}
.farm-action small {
  color: #d8bd8e;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
.farm-action:disabled { opacity: .5; }
.farm-action:active:not(:disabled) { transform: scale(.97); }
.farm-collect {
  grid-column: 1 / -1;
  border-color: rgba(151,199,103,.82);
  background: linear-gradient(180deg, rgba(92,137,62,.82), rgba(48,83,32,.88));
}
.farm-demolish {
  border-color: rgba(189,91,71,.78);
  background: linear-gradient(180deg, rgba(137,65,49,.82), rgba(76,34,24,.88));
}

@media (max-height: 760px) {
  .farm-board { max-height: 55%; gap: 6px; }
  .farm-section-title { padding: 6px 14px; font-size: 14px; }
  .farm-stat-grid div { padding: 6px 7px; }
  .farm-action { min-height: 50px; padding: 7px 8px; }
}

/* ════ МОБИЛЬНЫЙ PERFORMANCE MODE ════ */
html.perf-paused * {
  animation-play-state: paused !important;
  transition: none !important;
}

html.perf-mobile .slot.empty .plus,
html.perf-mobile .plus-marker,
html.perf-mobile .collect-bubble.full {
  animation: none !important;
}

html.perf-mobile .b3d,
html.perf-mobile .bo-ico3d,
html.perf-mobile .ship-menu-img,
html.perf-mobile .world-boat-img,
html.perf-mobile .broken-ship,
html.perf-mobile .build-hammer,
html.perf-mobile .pier-hammer {
  filter: none !important;
}

html.perf-mobile .build-hammer,
html.perf-mobile .pier-hammer {
  animation-duration: 1.35s !important;
}

html.perf-mobile .build-dust,
html.perf-mobile .slot.under-build::after {
  animation-duration: 2.4s !important;
}

html.perf-mobile .world-boat-img,
html.perf-mobile .broken-ship,
html.perf-mobile .broken-ship-btn .broken-ship {
  animation: none !important;
}

html.perf-mobile .res,
html.perf-mobile .stat,
html.perf-mobile .side-btn,
html.perf-mobile .collect-bubble {
  box-shadow: none !important;
}

html.perf-mobile .gain-float {
  animation-duration: .55s !important;
}

html.perf-mobile .world-hotspot,
html.perf-mobile .mob-sector.open,
html.perf-mobile .slot.empty .plus {
  box-shadow: none !important;
}

/* ════ PIXI: ТЕСТОВЫЙ БОЙ 50 × 50 ════ */
.battle-test-launch {
  border-color: #d94f3f;
  background: linear-gradient(180deg, rgba(157,73,59,.82), rgba(91,38,29,.88));
}
.battle-test-overlay {
  position: fixed;
  z-index: 5000;
  inset: 0;
  overflow: hidden;
  background: #102b24;
  color: #fff4cf;
  touch-action: none;
  user-select: none;
}
.battle-test-stage,
.battle-test-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.battle-test-hud {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  top: calc(8px + env(safe-area-inset-top));
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(68px, 1fr) minmax(116px, 1.35fr) minmax(68px, 1fr);
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(245,202,109,.75);
  border-radius: 8px;
  background: rgba(11,24,29,.88);
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
.battle-test-close,
.battle-test-restart {
  border: 1px solid rgba(245,202,109,.72);
  color: #ffe29a;
  background: linear-gradient(rgba(145,91,45,.80), rgba(76,40,17,.88));
  font-weight: 800;
  cursor: pointer;
}
.battle-test-close {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  font-size: 18px;
}
.battle-test-score,
.battle-test-title,
.battle-test-fps {
  min-width: 0;
  text-align: center;
}
.battle-test-fps {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 44px;
  padding: 6px 4px;
  border: 1px solid rgba(245,202,109,.72);
  border-radius: 7px;
  background: rgba(11,24,29,.88);
  box-shadow: 0 4px 10px rgba(0,0,0,.30);
}
.battle-test-score span,
.battle-test-title span,
.battle-test-fps span {
  display: block;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.15;
  color: #c8d3d3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-test-score b {
  display: block;
  font-size: 22px;
  line-height: 1;
}
.battle-test-score.team-home b { color: #9ef19a; }
.battle-test-score.team-exile b { color: #ff8a75; }
.battle-test-title b {
  display: block;
  overflow: hidden;
  color: #ffe29a;
  font-family: 'Russo One', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.battle-test-title span { margin-top: 3px; }
.battle-test-fps b {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.battle-test-controls {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}
.battle-test-restart {
  min-width: 164px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.36);
}
.battle-test-close:active,
.battle-test-restart:active { transform: scale(.96); }

.battle-reward-chest {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(76vw, 330px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: auto;
}
.battle-reward-box {
  position: relative;
  width: 168px;
  height: 132px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
}
.battle-reward-glow {
  position: absolute;
  width: 136px;
  height: 76px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,230,132,.85), rgba(255,177,48,.30) 48%, rgba(255,177,48,0) 72%);
  filter: blur(8px);
  opacity: .78;
  animation: chestPulse 1.1s ease-in-out infinite alternate;
}
.battle-reward-img {
  position: absolute;
  width: 158px;
  height: 122px;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.48));
  transition: opacity .22s ease, transform .22s ease;
}
.battle-reward-img.open { opacity: 0; transform: translateY(-4px) scale(.94); }
.battle-reward-box b {
  position: absolute;
  bottom: -4px;
  padding: 5px 12px;
  border: 1px solid rgba(255,218,126,.85);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(105,59,24,.88), rgba(45,23,10,.92));
  color: #ffe6a2;
  font-size: 12px;
  text-shadow: 0 1px 2px #1b0903;
}
.battle-reward-panel {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(255,217,128,.80);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(78,43,18,.92), rgba(26,15,8,.94));
  color: #ffe7a8;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,238,183,.12), 0 8px 18px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
}
.battle-reward-panel strong {
  display: block;
  margin-bottom: 6px;
  color: #fff0b8;
  font-size: 15px;
}
.battle-reward-panel div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.battle-reward-panel span {
  padding: 4px 8px;
  border: 1px solid rgba(219,167,85,.44);
  border-radius: 999px;
  background: rgba(28,16,8,.45);
  font-size: 12px;
  font-weight: 800;
}
.battle-reward-panel .reward-item {
  flex-basis: 100%;
  border-color: rgba(255,217,128,.78);
  color: #fff2ba;
}
.battle-reward-chest.opened .battle-reward-img.closed { opacity: 0; transform: translateY(5px) scale(.90); }
.battle-reward-chest.opened .battle-reward-img.open { opacity: 1; transform: translateY(-12px) scale(1.05); }
.battle-reward-chest.opened .battle-reward-glow {
  width: 210px;
  height: 126px;
  opacity: .95;
  filter: blur(12px);
}
.battle-reward-chest.opened .battle-reward-panel {
  opacity: 1;
  transform: translateY(0);
}
.battle-reward-panel.battle-reward-floating {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: min(78vw, 340px);
  transform: translate(-50%, 8px);
}
.battle-reward-panel.battle-reward-floating.shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes chestPulse {
  from { transform: scale(.88); opacity: .55; }
  to { transform: scale(1.08); opacity: .90; }
}

@media (max-width: 430px) {
  .battle-test-hud {
    grid-template-columns: 38px minmax(54px, 1fr) minmax(98px, 1.4fr) minmax(54px, 1fr);
  }
  .battle-test-close { width: 36px; height: 36px; }
  .battle-test-score b { font-size: 19px; }
  .battle-test-title b { font-size: 11px; }
}