:root {
    --forest-950: #13251a;
    --forest-900: #1c3525;
    --forest-800: #274f36;
    --forest-700: #356646;
    --forest-600: #477d57;
    --forest-100: #eaf1e8;
    --forest-50: #f4f8f2;
    --gold-600: #b7862e;
    --gold-500: #c99a43;
    --gold-100: #f5ead1;
    --ink: #1c2a20;
    --muted: #68746b;
    --line: #dfe6dc;
    --surface: #ffffff;
    --canvas: #f1f4ef;
    --danger: #b64136;
    --success: #2e7845;
    --shadow-sm: 0 4px 16px rgba(26, 48, 31, .07);
    --shadow: 0 16px 45px rgba(26, 48, 31, .11);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --header-height: 76px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

/* ==========================================================================
   Travia.lt V1.9.8.58 — Daily, hero, city rings and real timed queues
   ========================================================================== */

/* Karžygio valdiklis abiejuose kaimo vaizduose. */
.game-hero-hud-v58 {
  position: absolute;
  z-index: 44;
  top: 14px;
  left: 14px;
  width: 126px;
  height: 112px;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(41,29,16,.34));
}
.game-hero-rings-v58 {
  position: absolute;
  top: 0;
  left: 9px;
  width: 94px;
  height: 94px;
  border: 3px solid #755632;
  border-radius: 50%;
  background: conic-gradient(from 205deg,#80b6d9 0 25%,#d8c070 25% 62%,#6b9841 62% 88%,#80b6d9 88%);
  box-shadow: 0 0 0 3px #eadba9, inset 0 0 0 7px #f4ead0, inset 0 0 0 10px #715335;
}
.game-hero-portrait-v58 {
  position: absolute;
  top: 13px;
  left: 22px;
  display: block;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 2px solid #efe2bb;
  border-radius: 50%;
  background: #5d4938;
  pointer-events: auto;
}
.game-hero-portrait-v58 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.game-hero-level-v58 {
  position: absolute;
  z-index: 3;
  top: -5px;
  left: 76px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 3px solid #644927;
  border-radius: 50%;
  color: #fff8d7;
  background: linear-gradient(#7ca847,#486d27);
  box-shadow: inset 0 1px rgba(255,255,255,.32);
  font: 900 13px/1 Georgia,serif;
}
.game-hero-action-v58 {
  position: absolute;
  z-index: 4;
  top: 69px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #6c502e;
  border-radius: 50%;
  background: linear-gradient(#fff8e7,#d9bf8e);
  box-shadow: 0 2px 5px rgba(46,31,15,.35), inset 0 1px #fff;
  pointer-events: auto;
}
.game-hero-action-v58:hover,
.game-hero-action-v58:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.game-hero-action-v58.is-adventure { left: 0; }
.game-hero-action-v58.is-auction { left: 79px; }
.game-hero-action-v58 img { width: 21px; height: 21px; object-fit: contain; }

/* Miesto vietos visada lieka dviejuose žieduose; centras paliekamas laisvas. */
body.game-route-city .city-map-slot.is-built {
  width: clamp(56px,5.8vw,82px) !important;
  transform: translate(-50%,-62%) scale(var(--slot-scale,1)) !important;
}
body.game-route-city .city-map-slot.is-constructing {
  width: clamp(61px,6.2vw,88px) !important;
  transform: translate(-50%,-62%) scale(var(--slot-scale,1)) !important;
}
body.game-route-city .city-map-slot.is-built img,
body.game-route-city .city-map-slot.is-constructing img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 312 / 316;
  object-fit: contain !important;
}
body.game-route-city .city-map-slot.is-empty {
  width: clamp(22px,1.9vw,28px) !important;
  aspect-ratio: 1;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 42% 35%,rgba(123,157,61,.72),rgba(58,101,30,.62) 68%,rgba(42,75,24,.25)) !important;
  box-shadow: inset 0 2px 4px rgba(28,66,18,.35),0 1px 2px rgba(255,255,255,.34) !important;
}
body.game-route-city .city-map-slot.is-empty i { display: none !important; }
body.game-route-city .city-map-slot.is-empty::before,
body.game-route-city .city-map-slot.is-empty::after { content: none !important; }
body.game-route-city .city-premium-hud { display: none !important; }

/* Momentinės statybos mygtukas yra pačioje statybos juostoje. */
.floating-build-stack-v58 {
  position: fixed;
  z-index: 76;
  bottom: 16px;
  left: 50%;
  display: grid;
  width: min(560px,calc(100% - 32px));
  gap: 6px;
  transform: translateX(-50%);
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-queue {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  width: 100% !important;
  min-height: 68px !important;
  grid-template-columns: minmax(0,1fr) auto 38px !important;
  overflow: hidden;
  margin: 0 !important;
  border: 1px solid #71593c !important;
  border-radius: 8px !important;
  background: rgba(255,253,245,.97) !important;
  box-shadow: 0 5px 14px rgba(40,29,18,.3),inset 0 1px #fff !important;
  transform: none !important;
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-main {
  display: flex !important;
  min-width: 0;
  align-items: center;
  padding: 9px 12px 12px !important;
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-copy { display: grid; min-width: 0; gap: 2px; }
body.game-page-immersive .floating-build-stack-v58 .floating-build-copy small {
  color: #73695d;
  font-size: 9px;
  font-weight: 650;
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-copy strong {
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  color: #503a24;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-copy > span {
  position: static !important;
  margin: 0 !important;
  color: #877c6d;
  font-size: 8px;
}
body.game-page-immersive .floating-build-stack-v58 .floating-build-copy time { color: #574f46; font-size: 10px; font-weight: 800; }
.floating-build-stack-v58 .floating-build-instant-v58,
.floating-build-stack-v58 .floating-build-cancel-v58 {
  display: grid !important;
  align-items: center;
  margin: 0 !important;
  border-left: 1px solid rgba(104,78,43,.2) !important;
}
.floating-build-stack-v58 .floating-build-instant-v58 button {
  display: flex !important;
  width: auto !important;
  min-width: 126px;
  height: 34px !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 8px;
  padding: 0 10px;
  border: 1px solid #9c7924 !important;
  border-radius: 6px !important;
  color: #4e3a17 !important;
  background: linear-gradient(#fff8bc,#dfbd4f) !important;
  box-shadow: inset 0 1px #fff9d9,0 1px 3px rgba(67,47,13,.2);
  font-size: 9px;
  font-weight: 850;
}
.floating-build-stack-v58 .floating-build-instant-v58 button b {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #8c681c;
  border-radius: 50%;
  color: #694a0f;
  background: radial-gradient(circle at 38% 32%,#fff8b7,#dba930 72%);
  font-size: 9px;
}
.floating-build-stack-v58 .floating-build-instant-v58 button:disabled { opacity: .5; cursor: not-allowed; }
.floating-build-stack-v58 .floating-build-cancel-v58 button {
  width: 28px !important;
  height: 28px !important;
  margin: 0 5px;
  border-radius: 6px !important;
}
.floating-build-stack-v58 .floating-build-progress { right: 0; bottom: 0; left: 0; height: 5px !important; }

/* Kasdienių užduočių lenta pagal Travian kompoziciją. */
body.game-path-daily-quests .game-shell { display: block; width: 100%; }
body.game-path-daily-quests .game-sidebar { display: none; }
body.game-path-daily-quests .game-content { width: 100%; max-width: none; padding: 18px 12px 100px; }
.daily-page-v58 { width: min(940px,100%); margin: 0 auto; color: #51422e; }
.daily-board-v58 {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 18px;
  border: 3px solid #80643e;
  border-radius: 9px;
  background:
    linear-gradient(rgba(255,252,241,.97),rgba(240,229,203,.98)),
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(109,79,39,.035) 8px);
  box-shadow: 0 8px 24px rgba(45,31,16,.3),inset 0 0 0 3px rgba(255,255,255,.65);
}
.daily-board-v58::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(114,82,44,.25);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}
.daily-close-v58 {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #62492b;
  border-radius: 4px;
  color: #fff8dc;
  background: linear-gradient(#759d43,#486b29);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
  font: 900 24px/1 Georgia,serif;
}
.daily-head-v58 { position: relative; z-index: 1; padding: 7px 44px 16px; text-align: center; }
.daily-head-v58 h1 { margin: 0; color: #56432d; font: 700 clamp(21px,3vw,31px)/1.2 Georgia,serif; }
.daily-head-v58 p { margin: 8px 0 0; color: #786c5b; font-size: 11px; }
.daily-rewards-v58 {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 146px;
  grid-template-columns: repeat(4,minmax(0,1fr)) 116px;
  align-items: start;
  gap: 4px;
  padding: 8px 12px 10px;
  border: 2px solid #77572f;
  border-radius: 6px;
  background: linear-gradient(180deg,#58636c 0 62%,#eaddbd 62% 100%);
  box-shadow: inset 0 0 0 3px #caae73,inset 0 0 0 5px rgba(45,35,25,.28);
}
.daily-track-v58 {
  position: absolute;
  z-index: -1;
  top: 71px;
  right: 100px;
  left: 8%;
  height: 12px;
  border: 2px solid #62492e;
  border-radius: 999px;
  background: #a9a28e;
  box-shadow: inset 0 2px 3px rgba(35,29,23,.28);
}
.daily-track-v58 i {
  display: block;
  width: var(--daily-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(#78a74a,#4e7c2b);
}
.daily-reward-v58 {
  position: relative;
  display: grid;
  min-width: 0;
  justify-items: center;
  align-content: start;
  padding-top: 2px;
}
.daily-reward-v58 span,
.daily-reward-v58 form,
.daily-reward-v58 button { display: grid; width: 86px; height: 78px; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; }
.daily-reward-v58 button { cursor: pointer; }
.daily-reward-v58 img { display: block; width: 80px; height: 72px; object-fit: contain; filter: drop-shadow(0 5px 3px rgba(25,20,15,.35)); }
.daily-reward-v58 > b {
  display: grid;
  min-width: 46px;
  height: 23px;
  place-items: center;
  margin-top: -4px;
  padding: 0 8px;
  border: 2px solid #634828;
  border-radius: 4px;
  color: #fff5d6;
  background: linear-gradient(#8f7551,#5b4531);
  font: 800 12px/1 Georgia,serif;
}
.daily-reward-v58 > small {
  overflow: hidden;
  max-width: 100%;
  margin-top: 5px;
  color: #5b4b35;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-reward-v58.is-locked img { opacity: .68; filter: grayscale(.45) drop-shadow(0 4px 3px rgba(25,20,15,.28)); }
.daily-reward-v58.is-claimed img { opacity: .52; filter: grayscale(.8); }
.daily-reward-v58.is-claimable img { animation: daily-reward-ready-v58 1.25s ease-in-out infinite alternate; }
@keyframes daily-reward-ready-v58 { to { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 9px rgba(255,226,104,.9)); } }
.daily-score-v58 {
  position: relative;
  align-self: center;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  align-content: center;
  margin: 4px auto 0;
  border: 6px double #a57526;
  border-radius: 50%;
  color: #513a20;
  background: radial-gradient(circle,#fff8de 0 55%,#d3a653 56% 64%,#f4df9f 65%);
  box-shadow: 0 2px 6px rgba(44,29,14,.4);
}
.daily-score-v58::before,
.daily-score-v58::after {
  position: absolute;
  top: 17px;
  width: 19px;
  height: 57px;
  border: 5px dotted #9d6b21;
  border-top-color: transparent;
  border-radius: 50%;
  content: "";
}
.daily-score-v58::before { left: -16px; transform: rotate(-10deg); }
.daily-score-v58::after { right: -16px; transform: rotate(10deg); }
.daily-score-v58 strong { font: 800 29px/1 Georgia,serif; }
.daily-score-v58 span { margin-top: 3px; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.daily-list-v58 { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 10px; }
.daily-row-v58 {
  display: grid;
  min-height: 62px;
  grid-template-columns: minmax(220px,1.2fr) minmax(250px,1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid #846234;
  border-radius: 5px;
  background: linear-gradient(90deg,#fffdf5,#efe4ca);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.66);
}
.daily-row-v58.is-complete { border-color: #5f8238; background: linear-gradient(90deg,#f8fced,#e5efd2); }
.daily-title-v58 { display: grid; min-width: 0; gap: 4px; }
.daily-title-v58 strong { color: #54412c; font-size: 13px; line-height: 1.22; }
.daily-title-v58 small { color: #817361; font-size: 9px; }
.daily-segments-v58 { display: flex; min-width: 0; gap: 5px; }
.daily-segments-v58 > span {
  position: relative;
  display: grid;
  min-width: 0;
  height: 28px;
  flex: 1 1 0;
  place-items: center;
  border: 1px solid #a59b84;
  border-radius: 8px;
  color: #6d6558;
  background: linear-gradient(#d8d3c5,#bcb5a2);
}
.daily-segments-v58 > span::before {
  position: absolute;
  left: 8px;
  width: 7px;
  height: 12px;
  border: 2px solid currentColor;
  border-width: 0 0 2px 2px;
  border-radius: 50%;
  opacity: .55;
  content: "";
  transform: rotate(35deg);
}
.daily-segments-v58 > span.is-done { border-color: #4d7b2c; color: #fff; background: linear-gradient(#42a43f,#16852d); }
.daily-segments-v58 b { font-size: 10px; }
.daily-progress-v58 {
  position: relative;
  display: grid;
  width: 76px;
  height: 48px;
  place-items: center;
  justify-self: center;
  color: #624b2d;
}
.daily-progress-v58 i {
  position: absolute;
  inset: 0;
  border: 5px dotted #9a6c2b;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: .72;
}
.daily-progress-v58 strong { position: relative; font: 800 13px/1 Georgia,serif; }
.daily-footer-v58 { position: relative; z-index: 1; display: grid; place-items: center; padding-top: 14px; }
.daily-footer-v58 form { margin: 0; }
.daily-footer-v58 button {
  min-width: 190px;
  min-height: 40px;
  padding: 8px 18px;
  border: 2px solid #614d35;
  border-radius: 5px;
  color: #fff8e7;
  background: linear-gradient(#709746,#456b2b);
  box-shadow: inset 0 1px rgba(255,255,255,.25);
  font-size: 11px;
  font-weight: 850;
}
.daily-footer-v58 button:disabled { color: #ddd8cc; background: linear-gradient(#9b9a91,#77776f); }

/* Akademijos aktyvi eilė ir neišrastų karių sąrašas. */
.academy-active { margin-bottom: 18px; padding: 18px; }
.academy-active-unit { display: flex; align-items: center; gap: 14px; }
.academy-active-unit .unit-avatar { width: 76px; height: 76px; }
.academy-active-unit small { color: #7a6e5b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.academy-active-unit h2 { margin: 4px 0; color: #394b30; font: 700 24px/1.1 Georgia,serif; }
.academy-active-unit p { margin: 0; color: #786e60; font-size: 11px; }
.academy-active-progress { display: block; height: 8px; margin: 14px 0; overflow: hidden; border-radius: 99px; background: #d7d0c0; }
.academy-active-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#527d32,#83a94f); }
.academy-research-time { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 10px; padding: 9px 11px; border: 1px solid #d4c7aa; border-radius: 7px; background: #f8f2e3; }
.academy-research-time small { color: #7e715c; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.academy-research-time strong { color: #4c6039; font-size: 12px; }
.academy-complete-state { padding: 34px; text-align: center; }

/* Karžygio vidiniai puslapiai. */
.hero-page-actions { display: flex; gap: 8px; }
.hero-page-actions a,
.hero-auction-tabs span { padding: 9px 14px; border: 1px solid #a28a61; border-radius: 7px; color: #564125; background: #f6ecd5; font-size: 11px; font-weight: 800; }
.hero-profile-grid { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(360px,1.2fr); gap: 18px; }
.hero-identity-card,.hero-inventory-card { padding: 20px; }
.hero-large-portrait { width: 150px; height: 150px; overflow: hidden; margin: 0 auto 14px; border: 5px double #9b783e; border-radius: 50%; }
.hero-large-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.hero-identity-card > div:nth-child(2) { text-align: center; }
.hero-identity-card h2 { margin: 4px 0 16px; color: #3d5033; font-family: Georgia,serif; }
.hero-stat-list { display: grid; gap: 6px; margin: 0; }
.hero-stat-list div { display: flex; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #ded3bc; }
.hero-stat-list dt { color: #776b59; font-size: 10px; }
.hero-stat-list dd { margin: 0; color: #4a6037; font-size: 11px; font-weight: 850; }
.hero-inventory-card > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.hero-inventory-card h2 { margin: 3px 0 0; color: #3d5033; font-family: Georgia,serif; }
.hero-inventory-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.hero-inventory-slot { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 2px solid #a88c5e; border-radius: 8px; color: #9b8c73; background: radial-gradient(circle,#f9f2df,#d9c7a5); box-shadow: inset 0 0 0 3px rgba(255,255,255,.4); }
.hero-inventory-slot span { font: 700 15px/1 Georgia,serif; opacity: .55; }
.hero-inventory-slot b { position: absolute; right: 4px; bottom: 3px; }
.hero-inventory-note { margin: 14px 0 0; color: #7d715f; font-size: 10px; }
.hero-module-page { max-width: 900px; }
.hero-module-card { display: flex; align-items: center; gap: 20px; min-height: 180px; padding: 26px; }
.hero-module-card img { width: 88px; height: 88px; }
.hero-module-card h2 { margin: 5px 0; color: #3d5033; font: 700 25px/1.1 Georgia,serif; }
.hero-module-card p { margin: 0; color: #776d5d; font-size: 12px; }
.hero-auction-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.hero-auction-tabs span.active { color: #fff; background: #58753a; }

.admin-toggle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.admin-toggle-grid label { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #d6c8aa; border-radius: 8px; background: #faf5e9; }
.admin-toggle-grid input { width: 19px; height: 19px; }
.admin-toggle-grid span { display: grid; gap: 3px; }
.admin-toggle-grid strong { color: #415337; font-size: 11px; }
.admin-toggle-grid small { color: #7a7062; font-size: 9px; }

@media (max-width: 780px) {
  .game-hero-hud-v58 { top: 9px; left: 9px; width: 103px; height: 92px; }
  .game-hero-rings-v58 { left: 7px; width: 78px; height: 78px; border-width: 2px; box-shadow: 0 0 0 2px #eadba9,inset 0 0 0 6px #f4ead0,inset 0 0 0 8px #715335; }
  .game-hero-portrait-v58 { top: 11px; left: 18px; width: 56px; height: 56px; }
  .game-hero-level-v58 { top: -4px; left: 62px; width: 27px; height: 27px; border-width: 2px; font-size: 11px; }
  .game-hero-action-v58 { top: 57px; width: 29px; height: 29px; }
  .game-hero-action-v58.is-auction { left: 63px; }
  .game-hero-action-v58 img { width: 18px; height: 18px; }

  body.game-route-city .city-map-slot.is-built { width: 10.4% !important; }
  body.game-route-city .city-map-slot.is-constructing { width: 11.2% !important; }
  body.game-route-city .city-map-slot.is-empty { width: 4.3% !important; min-width: 18px; }
  body.game-route-city .city-map-slot.is-built > b,
  body.game-route-city .city-map-slot.is-constructing > b { min-width: 16px; height: 16px; font-size: 7px; }

  .floating-build-stack-v58 {
    bottom: calc(var(--game-bottom-nav-height) + 8px + env(safe-area-inset-bottom));
    width: min(520px,calc(100% - 16px));
    gap: 4px;
  }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-queue {
    min-height: 62px !important;
    grid-template-columns: minmax(0,1fr) 116px 34px !important;
  }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-main { padding: 7px 9px 10px !important; }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-copy small { font-size: 7px; }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-copy strong { font-size: 10px; }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-copy > span { font-size: 7px; }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-copy time { font-size: 8px; }
  .floating-build-stack-v58 .floating-build-instant-v58 button { min-width: 104px; height: 31px !important; margin-inline: 5px; padding-inline: 6px; font-size: 7px; }
  .floating-build-stack-v58 .floating-build-instant-v58 button b { min-width: 17px; height: 17px; font-size: 8px; }

  body.game-path-daily-quests .game-content { padding: 0 0 calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
  .daily-page-v58 { width: 100%; }
  .daily-board-v58 { min-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)); padding: 14px 8px 14px; border-width: 2px; border-radius: 0; }
  .daily-head-v58 { padding: 7px 36px 11px; }
  .daily-head-v58 h1 { font-size: 15px; }
  .daily-head-v58 p { margin-top: 5px; font-size: 8px; }
  .daily-close-v58 { top: 7px; right: 7px; width: 30px; height: 30px; font-size: 20px; }
  .daily-rewards-v58 { min-height: 104px; grid-template-columns: repeat(4,minmax(0,1fr)) 66px; gap: 1px; padding: 5px 5px 7px; }
  .daily-track-v58 { top: 50px; right: 59px; left: 8%; height: 8px; }
  .daily-reward-v58 span,
  .daily-reward-v58 form,
  .daily-reward-v58 button { width: 53px; height: 52px; }
  .daily-reward-v58 img { width: 52px; height: 47px; }
  .daily-reward-v58 > b { min-width: 34px; height: 17px; margin-top: -2px; padding-inline: 5px; border-width: 1px; font-size: 8px; }
  .daily-reward-v58 > small { margin-top: 3px; font-size: 6px; }
  .daily-score-v58 { width: 53px; height: 53px; margin-top: 9px; border-width: 4px; }
  .daily-score-v58::before,
  .daily-score-v58::after { top: 8px; width: 12px; height: 37px; border-width: 3px; }
  .daily-score-v58::before { left: -10px; }
  .daily-score-v58::after { right: -10px; }
  .daily-score-v58 strong { font-size: 18px; }
  .daily-score-v58 span { font-size: 6px; }
  .daily-list-v58 { gap: 5px; margin-top: 7px; }
  .daily-row-v58 { min-height: 52px; grid-template-columns: minmax(0,1.15fr) minmax(126px,.9fr) 49px; gap: 5px; padding: 5px 6px; border-width: 1px; }
  .daily-title-v58 { gap: 2px; }
  .daily-title-v58 strong { font-size: 8px; line-height: 1.16; }
  .daily-title-v58 small { font-size: 6px; }
  .daily-segments-v58 { gap: 2px; }
  .daily-segments-v58 > span { height: 21px; border-radius: 6px; }
  .daily-segments-v58 > span::before { left: 4px; width: 4px; height: 8px; border-width: 0 0 1px 1px; }
  .daily-segments-v58 b { font-size: 7px; }
  .daily-progress-v58 { width: 45px; height: 34px; }
  .daily-progress-v58 i { border-width: 3px; }
  .daily-progress-v58 strong { font-size: 8px; }
  .daily-footer-v58 { padding-top: 9px; }
  .daily-footer-v58 button { min-width: 150px; min-height: 34px; padding: 6px 12px; font-size: 9px; }

  .academy-active { padding: 13px; }
  .academy-active-unit .unit-avatar { width: 58px; height: 58px; }
  .academy-active-unit h2 { font-size: 18px; }
  .hero-profile-grid { grid-template-columns: 1fr; }
  .hero-page-actions { margin-top: 10px; }
  .hero-inventory-grid { grid-template-columns: repeat(4,1fr); gap: 6px; }
  .hero-module-card { min-height: 140px; padding: 18px; }
  .hero-module-card img { width: 64px; height: 64px; }
  .admin-toggle-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .daily-row-v58 { grid-template-columns: minmax(0,1fr) 118px 44px; }
  .daily-title-v58 strong { font-size: 7.4px; }
  .daily-segments-v58 b { font-size: 6.5px; }
  body.game-page-immersive .floating-build-stack-v58 .floating-build-queue { grid-template-columns: minmax(0,1fr) 104px 31px !important; }
  .floating-build-stack-v58 .floating-build-instant-v58 button span { max-width: 63px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--forest-700); text-decoration: none; }
a:hover { color: var(--forest-900); }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
p { line-height: 1.65; }
.site-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.eyebrow { display: block; margin-bottom: 9px; color: var(--gold-600); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.muted { color: var(--muted); }
.negative { color: var(--danger) !important; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 750; line-height: 1.15; text-align: center; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled, .button-disabled { cursor: not-allowed; filter: grayscale(.4); opacity: .52; transform: none; }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--forest-700), var(--forest-900)); box-shadow: 0 8px 20px rgba(35, 83, 50, .2); }
.button-primary:hover { color: #fff; background: linear-gradient(135deg, var(--forest-600), var(--forest-800)); }
.button-secondary { color: var(--forest-800); background: var(--forest-50); border-color: #cbd9c8; }
.button-secondary:hover { background: var(--forest-100); }
.button-ghost { color: var(--forest-900); background: rgba(255,255,255,.7); border-color: rgba(38,77,51,.25); }
.button-disabled { color: #707970; background: #e3e7e1; }
.button-small { min-height: 36px; padding: 8px 13px; font-size: 13px; }
.button-large { min-height: 52px; padding: 14px 24px; font-size: 15px; }
.button-block { width: 100%; }
.link-button { padding: 0; border: 0; color: var(--forest-700); background: none; cursor: pointer; font-weight: 700; }
.link-button.danger { color: var(--danger); }

.alert { padding: 13px 16px; border: 1px solid; border-radius: 11px; font-size: 14px; line-height: 1.5; }
.alert-error { color: #8b3028; background: #fff0ed; border-color: #efc6bf; }
.alert-success { color: #246039; background: #edf8ef; border-color: #c5e4cb; }
.alert-info { color: #315d71; background: #edf7fb; border-color: #c4dde7; }
.flash-stack { display: grid; gap: 8px; margin-block: 16px; }

.site-header { position: sticky; z-index: 30; top: 0; height: var(--header-height); border-bottom: 1px solid rgba(39,79,54,.12); background: rgba(250,252,248,.92); backdrop-filter: blur(18px); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 28px; }
.site-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--forest-900); }
.site-brand:hover { color: var(--forest-900); }
.site-brand > span:last-child { display: grid; line-height: 1; }
.site-brand strong { font-family: Georgia, serif; font-size: 21px; letter-spacing: .11em; }
.site-brand small { margin-top: 5px; color: var(--gold-600); font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid #d7b86c; border-radius: 11px 11px 17px 17px; color: #f6e7b8; background: linear-gradient(145deg, #426b4e, #183522); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 5px 14px rgba(22,53,31,.18); font-family: Georgia, serif; font-size: 24px; font-weight: 800; }
.guest-nav { display: flex; align-items: center; gap: 24px; }
.guest-nav > a:not(.button) { color: #47544a; font-size: 14px; font-weight: 650; }

.hero { position: relative; overflow: hidden; padding: 86px 0 78px; background: radial-gradient(circle at 80% 20%, rgba(225,195,118,.23), transparent 30%), linear-gradient(155deg, #f9faf5 0%, #e8efe4 100%); }
.hero::before { position: absolute; inset: auto 0 0; height: 110px; background: linear-gradient(175deg, transparent 48%, rgba(70,103,75,.08) 49%); content: ""; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 64px; }
.hero-copy h1 { max-width: 700px; margin-bottom: 24px; color: var(--forest-950); font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 5.5vw, 78px); font-weight: 650; line-height: .98; }
.hero-copy > p { max-width: 640px; margin-bottom: 29px; color: #58655b; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.world-totals { display: flex; gap: 34px; margin-top: 38px; padding-top: 25px; border-top: 1px solid rgba(39,79,54,.14); }
.world-totals div { display: grid; }
.world-totals strong { color: var(--forest-900); font-family: Georgia, serif; font-size: 26px; }
.world-totals span { color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(64,92,66,.18); border-radius: 46% 46% 26px 26px; background: linear-gradient(#cbd9c6 0 52%, #7c9b6e 52% 70%, #5d774f 70%); box-shadow: 0 30px 70px rgba(38,70,43,.2); }
.hero-visual::after { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.28), transparent 35%), radial-gradient(circle at 50% 100%, rgba(25,52,30,.25), transparent 55%); content: ""; }
.sun-disc { position: absolute; top: 58px; right: 68px; width: 92px; height: 92px; border-radius: 50%; background: #e6c676; box-shadow: 0 0 60px #edda9e; }
.mountain { position: absolute; bottom: 153px; width: 0; height: 0; border-right: 160px solid transparent; border-bottom: 230px solid #789176; border-left: 160px solid transparent; opacity: .7; }
.mountain-one { left: -90px; }.mountain-two { right: -60px; transform: scale(.8); border-bottom-color: #69856c; }
.village-scene { position: absolute; z-index: 2; right: 12%; bottom: 15%; left: 12%; height: 265px; }
.keep, .tower { position: absolute; bottom: 45px; border: 4px solid #765f42; background: linear-gradient(90deg,#cab68d,#e0cda5 45%,#bca77f); box-shadow: inset -10px 0 rgba(91,74,50,.13); }
.keep { right: 28%; left: 28%; height: 178px; }.keep::before { position: absolute; top: -26px; right: -4px; left: -4px; height: 28px; background: repeating-linear-gradient(90deg,#8b7758 0 22px,transparent 22px 35px); content: ""; }
.tower { width: 87px; height: 145px; border-radius: 7px 7px 0 0; }.tower::before { position: absolute; top: -33px; right: -11px; left: -11px; height: 38px; background: #765f42; clip-path: polygon(50% 0,100% 100%,0 100%); content: ""; }
.tower-left { left: 11%; }.tower-right { right: 11%; }
.field-lines { position: absolute; right: -10%; bottom: 0; left: -10%; height: 80px; border-radius: 50%; background: repeating-linear-gradient(168deg, transparent 0 14px, rgba(227,204,126,.65) 15px 20px); transform: perspective(160px) rotateX(30deg); }
.hero-seal { position: absolute; z-index: 4; right: 20px; bottom: 18px; display: grid; width: 84px; height: 84px; place-content: center; border: 2px solid #e1c373; border-radius: 50%; color: #f8ecd0; background: #274f36; text-align: center; box-shadow: 0 8px 20px rgba(26,52,31,.3); }
.hero-seal strong { font-family: Georgia,serif; font-size: 29px; line-height: 1; }.hero-seal span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.feature-strip { padding: 25px 0; color: #eef5eb; background: var(--forest-900); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.feature-grid article { display: flex; gap: 17px; padding: 8px 30px; border-right: 1px solid rgba(255,255,255,.12); }.feature-grid article:last-child { border: 0; }
.feature-grid article > span { color: #d2b86d; font-family: Georgia,serif; font-size: 22px; }.feature-grid article div { display: grid; gap: 4px; }.feature-grid strong { font-size: 14px; }.feature-grid p { margin: 0; color: #aebdaf; font-size: 12px; line-height: 1.45; }
.section { padding: 88px 0; }
.section-heading { max-width: 700px; margin: 0 auto 42px; text-align: center; }.section-heading h1,.section-heading h2 { margin-bottom: 14px; color: var(--forest-950); font-family: Georgia,serif; font-size: clamp(34px,4vw,48px); }.section-heading p { color: var(--muted); }
.tribes-section { background: #f7f9f5; }
.tribe-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.tribe-card { position: relative; overflow: hidden; min-height: 330px; padding: 25px 21px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }.tribe-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.tribe-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: var(--tribe-color); content: ""; }
.tribe-emblem { display: grid; width: 66px; height: 66px; margin-bottom: 22px; place-items: center; border: 1px solid color-mix(in srgb,var(--tribe-color),#fff 60%); border-radius: 50%; color: #fff; background: var(--tribe-color); box-shadow: inset 0 0 0 5px rgba(255,255,255,.14); font-family: Georgia,serif; font-size: 28px; font-weight: 800; }
.tribe-card > span { color: var(--tribe-color); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.tribe-card h3 { margin: 7px 0 10px; font-family: Georgia,serif; font-size: 25px; }.tribe-card p { min-height: 96px; color: var(--muted); font-size: 13px; }.tribe-card a { font-size: 13px; font-weight: 800; }
.final-cta { padding-top: 24px; }.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 42px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg,#1b3825,#315c3e); box-shadow: var(--shadow); }.cta-card h2 { margin: 0; font-family: Georgia,serif; font-size: 36px; }.cta-card .eyebrow { color: #dabd72; }
.site-footer { padding: 38px 0; border-top: 1px solid var(--line); background: #e9eee6; }.footer-inner { display: flex; align-items: center; justify-content: space-between; }.footer-inner p { margin: 0; color: var(--muted); font-size: 12px; }.site-brand-muted { filter: grayscale(.5); opacity: .75; }

.auth-main { min-height: calc(100vh - var(--header-height)); padding: 70px 0 90px; background: radial-gradient(circle at 18% 30%,rgba(189,211,184,.4),transparent 32%),linear-gradient(145deg,#edf2e9,#f9faf7); }
.auth-grid { display: grid; grid-template-columns: 1fr 480px; align-items: center; gap: 90px; }.auth-story h1 { max-width: 550px; color: var(--forest-950); font-family: Georgia,serif; font-size: clamp(44px,5vw,68px); line-height: 1; }.auth-story > p { max-width: 550px; color: var(--muted); font-size: 17px; }.story-quote { display: flex; max-width: 520px; gap: 13px; margin-top: 40px; padding: 22px; border-left: 3px solid var(--gold-500); background: rgba(255,255,255,.55); }.story-quote span { color: var(--gold-600); font-family: Georgia,serif; font-size: 38px; }.story-quote p { margin: 0; color: #566259; font-family: Georgia,serif; font-style: italic; }
.auth-card { padding: 38px; box-shadow: var(--shadow); }.auth-card h2 { margin-bottom: 26px; font-family: Georgia,serif; font-size: 35px; }
.stack-form { display: grid; gap: 18px; }.stack-form fieldset { display: grid; gap: 16px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }.stack-form legend { padding: 0 7px; color: var(--forest-800); font-size: 13px; font-weight: 800; }
label { display: grid; gap: 7px; color: #475248; font-size: 13px; font-weight: 700; }label small { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd8cc; border-radius: 9px; outline: none; color: var(--ink); background: #fbfcfa; transition: border-color .15s, box-shadow .15s; }input:focus,select:focus,textarea:focus { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(63,119,78,.13); }
.form-grid { display: grid; gap: 16px; }.two-columns { grid-template-columns: repeat(2,1fr); }.form-footnote { margin: 20px 0 0; color: var(--muted); font-size: 13px; text-align: center; }.field-error { color: var(--danger) !important; font-weight: 650 !important; }
.registration-main { padding-top: 55px; }.register-shell { max-width: 1040px; }.compact-heading { margin-bottom: 30px; }.register-form { display: grid; gap: 18px; }.form-section { padding: 30px; }.form-section-title { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; }.form-section-title > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--forest-700); font-family: Georgia,serif; font-weight: 800; }.form-section-title h2 { margin-bottom: 4px; font-family: Georgia,serif; font-size: 25px; }.form-section-title p { margin: 0; color: var(--muted); font-size: 13px; }
.tribe-choice-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }.choice-card { position: relative; display: flex; min-height: 290px; align-items: center; padding: 18px 14px; border: 2px solid var(--line); border-radius: 13px; cursor: pointer; text-align: center; transition: border .15s, transform .15s; }.choice-card:hover { transform: translateY(-2px); }.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }.choice-card:has(input:checked) { border-color: var(--tribe-color); box-shadow: 0 0 0 3px color-mix(in srgb,var(--tribe-color),transparent 85%); }.choice-card .choice-check { position: absolute; top: 10px; right: 10px; display: none; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: var(--tribe-color); font-size: 11px; }.choice-card:has(input:checked) .choice-check { display: grid; }.choice-card .tribe-emblem { width: 55px; height: 55px; margin: 8px auto; font-size: 23px; }.choice-card strong { color: var(--ink); font-family: Georgia,serif; font-size: 20px; }.choice-card > small { color: var(--tribe-color); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.choice-card p { margin: 8px 0 0; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.quadrant-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }.quadrant-choice { cursor: pointer; }.quadrant-choice input { position: absolute; width: 1px; opacity: 0; }.quadrant-choice span { display: grid; min-height: 54px; place-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; text-align: center; }.quadrant-choice:has(input:checked) span { border-color: var(--forest-600); color: var(--forest-900); background: var(--forest-100); box-shadow: inset 0 0 0 1px var(--forest-600); }

.installer-page { min-height: 100vh; padding: 50px 20px; background: linear-gradient(140deg,#e4ece1,#f7f9f5); }.installer-shell { width: min(720px,100%); margin: auto; }.installer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px; }.installer-brand > div { display: grid; }.installer-brand strong { font-family: Georgia,serif; font-size: 20px; letter-spacing: .11em; }.installer-brand small { color: var(--gold-600); font-size: 8px; font-weight: 900; letter-spacing: .17em; }.installer-card { padding: 35px; }.installer-card h1 { font-family: Georgia,serif; font-size: 35px; }

/* Game shell */
.game-body { padding-top: var(--header-height); background: var(--canvas); }
.game-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; height: var(--header-height); border-bottom: 1px solid #dbe3d8; background: rgba(255,255,255,.95); backdrop-filter: blur(16px); }
.game-header-inner { display: flex; width: min(1500px,100%); height: 100%; align-items: center; gap: 25px; margin: auto; padding: 0 24px; }.compact-brand { flex: 0 0 210px; }.compact-brand .brand-mark { width: 38px; height: 38px; font-size: 21px; }.compact-brand strong { font-size: 18px; }
.resource-bar { display: grid; flex: 1; grid-template-columns: repeat(4,minmax(125px,1fr)); gap: 8px; }.resource-item { position: relative; display: flex; min-width: 0; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf7; }.resource-symbol { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #fff; background: #5e7d57; font-family: Georgia,serif; font-size: 13px; font-style: normal; font-weight: 850; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }.resource-clay .resource-symbol { background: #a85f3d; }.resource-iron .resource-symbol { background: #64747b; }.resource-crop .resource-symbol { background: #b28c30; }.resource-item > div { display: grid; min-width: 0; }.resource-item small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }.resource-item strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }.resource-item strong i { margin: 0 2px; color: #9ca59d; font-style: normal; font-weight: 400; }.resource-item em { position: absolute; top: 5px; right: 7px; color: var(--success); font-size: 9px; font-style: normal; font-weight: 750; }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }.header-actions form { display: contents; }.header-icon { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #526055; background: #f8faf7; font-size: 18px; }.header-icon b { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 9px; color: #fff; background: var(--danger); font-size: 9px; }.logout-button { cursor: pointer; }.player-pill { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 11px; }.player-pill i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #fff; background: var(--forest-700); font-size: 12px; font-style: normal; font-weight: 800; }.player-pill span { max-width: 100px; overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; }
.mobile-resource-scroll { display: none; }
.game-shell { display: grid; width: min(1500px,100%); min-height: calc(100vh - var(--header-height)); grid-template-columns: 230px minmax(0,1fr); margin: auto; }.game-sidebar { position: sticky; top: var(--header-height); align-self: start; height: calc(100vh - var(--header-height)); padding: 20px 14px; border-right: 1px solid #dbe3d8; background: #e9eee6; }.sidebar-label { color: #89948a; font-size: 9px; font-weight: 850; letter-spacing: .13em; }.village-panel { padding: 14px; border: 1px solid #d2ddd0; border-radius: 12px; background: rgba(255,255,255,.65); }.village-panel strong,.village-panel small { display: block; }.village-panel strong { margin-top: 8px; font-family: Georgia,serif; font-size: 17px; }.village-panel small { margin-top: 4px; color: var(--muted); font-size: 10px; }.village-panel select { min-height: 35px; margin-top: 10px; padding: 7px; font-size: 11px; }
.desktop-game-nav { display: grid; gap: 5px; margin-top: 17px; }.desktop-game-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; color: #536055; font-size: 12px; }.desktop-game-nav a span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.55); font-size: 16px; }.desktop-game-nav a.active { color: #fff; background: var(--forest-800); box-shadow: 0 7px 16px rgba(39,79,54,.18); }.desktop-game-nav a.active span { background: rgba(255,255,255,.13); }
.sidebar-shortcuts { display: grid; gap: 2px; margin-top: 22px; padding: 0 8px; }.sidebar-shortcuts .sidebar-label { margin-bottom: 7px; }.sidebar-shortcuts a { display: flex; justify-content: space-between; padding: 7px 5px; color: #687369; font-size: 11px; }.sidebar-shortcuts a b { color: #89948a; }
.game-content { min-width: 0; padding: 30px clamp(20px,3vw,48px) 70px; }.game-flashes { margin-top: 0; }.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.page-heading h1 { margin: 0 0 5px; color: var(--forest-950); font-family: Georgia,serif; font-size: clamp(31px,3.4vw,45px); }.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }.back-link { display: block; margin-bottom: 12px; color: var(--forest-700); font-size: 12px; font-weight: 750; }.tribe-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--tribe-color); background: #fff; font-size: 12px; font-weight: 800; }.tribe-badge i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: var(--tribe-color); font-family: Georgia,serif; font-style: normal; }.coordinate-pill,.level-pill { display: inline-flex; padding: 8px 12px; border: 1px solid #d8c9a0; border-radius: 9px; color: #82621e; background: var(--gold-100); font-family: ui-monospace,monospace; font-size: 12px; font-weight: 800; }.level-pill { color: var(--forest-800); border-color: #c8d7c4; background: var(--forest-100); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.card-heading h2 { margin: 0; font-family: Georgia,serif; font-size: 23px; }.card-heading .eyebrow { margin-bottom: 4px; }.card-heading > a { font-size: 12px; font-weight: 750; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr); gap: 18px; }.village-overview-card { overflow: hidden; padding: 24px; }.village-mini-scene { position: relative; height: 250px; overflow: hidden; margin: 20px -24px; border-block: 1px solid #d7e0d4; background: radial-gradient(circle at 50% 30%,#d6e2ce,transparent 45%),linear-gradient(#c7d6c1 0 52%,#78926a 52%); }.village-mini-scene::after { position: absolute; right: -10%; bottom: -45px; left: -10%; height: 125px; border-radius: 50%; background: repeating-linear-gradient(168deg,#77905d 0 13px,#bca65d 14px 18px); content: ""; }.mini-house,.mini-keep { position: absolute; z-index: 2; bottom: 56px; border: 3px solid #725e42; background: #d7c298; box-shadow: inset -7px 0 rgba(70,58,38,.15); }.mini-house { width: 72px; height: 67px; }.mini-house::before,.mini-keep::before { position: absolute; right: -8px; left: -8px; height: 28px; background: #795b3d; clip-path: polygon(50% 0,100% 100%,0 100%); content: ""; }.house-a { left: 20%; }.house-b { right: 20%; transform: scale(.84); }.mini-keep { right: calc(50% - 55px); bottom: 50px; width: 110px; height: 120px; }.mini-field { position: absolute; z-index: 2; bottom: 20px; width: 100px; height: 50px; border-radius: 50%; background: repeating-linear-gradient(90deg,#b99b3c 0 7px,#d3bd68 7px 12px); transform: rotate(-10deg); }.field-a { left: 3%; }.field-b { right: 2%; transform: rotate(11deg); }.field-c { right: 35%; bottom: 2px; transform: scale(.7); }
.overview-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.overview-metrics > div { display: grid; grid-template-columns: 36px 1fr; align-items: center; padding: 12px; border-radius: 10px; background: #f5f8f3; }.overview-metrics span { grid-row: 1/3; font-size: 19px; }.overview-metrics strong { font-size: 18px; }.overview-metrics small { color: var(--muted); font-size: 9px; }.card-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.dashboard-side-stack { display: grid; align-content: start; gap: 18px; }.queue-card,.credit-card { padding: 21px; }.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd1cb; }.status-dot.active { background: #4c9a61; box-shadow: 0 0 0 4px #e5f3e7; }.queue-active { display: flex; align-items: center; gap: 11px; margin: 18px 0 14px; }.queue-icon { display: grid; flex: 0 0 39px; height: 39px; place-items: center; border-radius: 10px; color: #fff; background: #7e6848; font-size: 20px; }.queue-active > div:last-child { display: grid; gap: 4px; }.queue-active strong { font-size: 13px; }.queue-active span { color: var(--muted); font-size: 11px; }.progress-track { overflow: hidden; height: 7px; border-radius: 4px; background: #e4e8e2; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--forest-600),#82a569); transition: width .3s linear; }.queue-card form { margin-top: 11px; text-align: right; }.credit-card { color: #eef5eb; background: linear-gradient(145deg,#22432e,#315d3d); border-color: #244a31; }.credit-card .eyebrow { color: #dfc47d; }.credit-count { display: flex; align-items: center; gap: 15px; }.credit-count strong { font-family: Georgia,serif; font-size: 52px; }.credit-count span { max-width: 120px; color: #c1d0c2; font-size: 11px; }.credit-card p { margin: 7px 0; font-size: 12px; }.credit-card > small { color: #9eb0a1; font-size: 10px; }
.section-block { margin-top: 30px; }.section-block > .card-heading { margin-bottom: 14px; }.production-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.production-card { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }.production-card > div { display: grid; grid-template-columns: 1fr auto; }.production-card small { grid-column: 1/3; color: var(--muted); font-size: 9px; text-transform: uppercase; }.production-card strong { font-size: 18px; }.production-card em { align-self: end; color: var(--muted); font-size: 9px; font-style: normal; }.production-card > i { grid-column: 1/3; padding-top: 8px; border-top: 1px solid #edf0ec; color: var(--muted); font-size: 9px; font-style: normal; }.shortcut-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.shortcut-card { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }.shortcut-card:hover { border-color: #becfbb; transform: translateY(-2px); box-shadow: var(--shadow); }.shortcut-card > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--forest-800); background: var(--forest-100); font-size: 20px; }.shortcut-card div { display: grid; min-width: 0; flex: 1; }.shortcut-card strong { font-size: 12px; }.shortcut-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.shortcut-card > b { color: #a1aaa2; }
.empty-state { display: grid; justify-items: center; padding: 50px 24px; text-align: center; }.empty-state > span { display: grid; width: 55px; height: 55px; margin-bottom: 13px; place-items: center; border-radius: 50%; color: var(--forest-700); background: var(--forest-100); font-size: 25px; }.empty-state h2 { margin-bottom: 6px; font-family: Georgia,serif; }.empty-state p { max-width: 430px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }.empty-state.compact { padding: 25px 15px; }.empty-state.compact > span { width: 40px; height: 40px; font-size: 17px; }.empty-state.compact p { margin: 0; }.max-level,.researched-label { display: inline-flex; padding: 7px 10px; border-radius: 8px; color: #2f6f43; background: #e7f4e9; font-size: 11px; font-weight: 800; }
.production-mini { display: grid; justify-items: end; }.production-mini span { color: var(--muted); font-size: 9px; text-transform: uppercase; }.production-mini strong { color: var(--forest-700); font-size: 15px; }.inline-queue { display: grid; grid-template-columns: 40px auto minmax(150px,1fr); align-items: center; gap: 14px; margin-bottom: 17px; padding: 12px 15px; }.inline-queue > div:nth-child(2) { display: grid; }.inline-queue strong { font-size: 12px; }.inline-queue small { color: var(--muted); font-size: 10px; }
.field-board { padding: 18px; }.field-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }.field-card { display: grid; align-content: start; min-width: 0; min-height: 210px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(#f9fbf8,#fff); }.field-top { display: flex; justify-content: space-between; margin-bottom: 9px; }.level-badge { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--forest-800); font-size: 11px; font-weight: 800; }.field-card > strong { min-height: 34px; font-size: 12px; }.field-card > small { margin-bottom: 10px; color: var(--muted); font-size: 9px; }.field-card form { margin-top: auto; }.field-card .button { min-height: 34px; padding: 6px; font-size: 9px; }
.cost-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }.cost-row span { padding: 5px 7px; border-radius: 7px; color: #576158; background: #f0f3ee; font-size: 10px; font-weight: 750; }.cost-row .cost-wood { color: #3f703b; background: #e9f2e6; }.cost-row .cost-clay { color: #974f32; background: #f8e9e1; }.cost-row .cost-iron { color: #53666e; background: #e9eef0; }.cost-row .cost-crop { color: #82671f; background: #f7f0d9; }.compact-costs { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; margin: 8px 0; }.compact-costs span { padding: 4px; font-size: 8px; }
.city-board { position: relative; overflow: hidden; min-height: 650px; padding: 30px; background: radial-gradient(circle at center,#dce7d7 0 18%,#bdcfae 19% 42%,#93aa7e 43% 70%,#738d62 71%); }.city-board::after { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(18deg,transparent 0 44px,rgba(255,255,255,.08) 45px 47px); content: ""; }.city-ring { position: absolute; top: 50%; left: 50%; width: 440px; height: 440px; border: 26px solid rgba(122,99,66,.38); border-radius: 50%; transform: translate(-50%,-50%); }.building-grid { position: relative; z-index: 2; display: grid; max-width: 930px; grid-template-columns: repeat(6,1fr); gap: 13px; margin: auto; }.building-slot { position: relative; display: grid; min-height: 130px; align-content: center; justify-items: center; padding: 12px 8px; border: 2px solid rgba(255,255,255,.48); border-radius: 48% 48% 18px 18px; color: var(--ink); background: rgba(250,252,247,.86); box-shadow: 0 9px 20px rgba(40,65,38,.15); text-align: center; backdrop-filter: blur(4px); }.building-slot:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(40,65,38,.22); }.building-slot i { display: grid; width: 45px; height: 45px; place-items: center; border: 2px solid #d6bb75; border-radius: 12px 12px 18px 18px; color: #f4e3b5; background: linear-gradient(#385f43,#1d3a27); font-family: Georgia,serif; font-size: 20px; font-style: normal; font-weight: 800; }.building-slot strong { margin-top: 7px; font-size: 10px; }.building-slot small { color: var(--muted); font-size: 9px; }.building-slot.empty { opacity: .8; }.building-slot.empty i { color: var(--forest-700); border: 1px dashed var(--forest-600); background: var(--forest-100); }.slot-number { position: absolute; top: 7px; left: 8px; color: #89958a; font-size: 8px; }
.building-detail { display: grid; grid-template-columns: 250px 1fr; gap: 30px; padding: 30px; }.building-hero-icon { display: grid; min-height: 260px; place-content: center; justify-items: center; border-radius: 18px; background: radial-gradient(circle,#dfe9da,#b7c9ae); }.building-hero-icon > span { display: grid; width: 115px; height: 115px; place-items: center; border: 5px solid #cfb46e; border-radius: 28px 28px 46px 46px; color: #f4e4ba; background: linear-gradient(#426d4d,#193723); box-shadow: 0 17px 30px rgba(30,57,35,.25); font-family: Georgia,serif; font-size: 54px; font-weight: 800; }.building-hero-icon small { margin-top: 13px; padding: 6px 10px; border-radius: 8px; color: #fff; background: var(--forest-800); font-weight: 800; }.building-detail-copy h2 { font-family: Georgia,serif; font-size: 32px; }.building-detail-copy p { color: var(--muted); }.building-detail-copy h3 { margin-top: 25px; font-size: 15px; }.building-special-actions { display: flex; gap: 8px; margin-top: 20px; }.building-catalog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.catalog-building { display: grid; grid-template-columns: 70px 1fr; gap: 15px; padding: 18px; }.catalog-building.locked { opacity: .62; }.catalog-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 15px; color: #f3e2b5; background: linear-gradient(#426d4d,#1a3825); font-family: Georgia,serif; font-size: 28px; font-weight: 800; }.catalog-copy h2 { margin-bottom: 5px; font-family: Georgia,serif; font-size: 20px; }.catalog-copy p { margin-bottom: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }.requirement { display: block; color: var(--danger); font-size: 10px; font-weight: 700; }
.sub-tabs { display: flex; gap: 6px; margin-bottom: 17px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.sub-tabs a { flex: 1; padding: 9px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; }.sub-tabs a.active { color: #fff; background: var(--forest-800); }.training-queue { margin-bottom: 17px; padding: 20px; }.training-queue-row { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0ec; }.training-queue-row:last-child { border: 0; }.training-queue-row > div { display: grid; }.training-queue-row small,.training-queue-row > span:last-child { color: var(--muted); font-size: 10px; }.unit-avatar { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(#92774f,#665136); font-size: 18px; }.unit-grid,.research-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.unit-card,.research-card { padding: 19px; }.unit-head { display: flex; align-items: center; gap: 11px; }.unit-head > div { flex: 1; }.unit-head h2 { margin: 0 0 3px; font-family: Georgia,serif; font-size: 20px; }.unit-head small { color: var(--muted); }.time-pill { padding: 5px 8px; border-radius: 7px; color: var(--forest-800); background: var(--forest-100); font-size: 9px; font-weight: 800; }.unit-meta { display: flex; gap: 15px; color: var(--muted); font-size: 9px; }.train-form { display: flex; align-items: end; gap: 8px; margin-top: 14px; }.train-form label { flex: 1; }.train-form input { min-height: 40px; }.train-form .button { min-height: 40px; }.max-fill { margin-top: 8px; font-size: 9px; }.research-card.researched { background: #f5faf4; border-color: #cce0ca; }.researched-label { margin-top: 18px; }
.coordinate-search { display: flex; align-items: center; gap: 5px; }.coordinate-search input { width: 68px; min-height: 36px; padding: 6px; text-align: center; }.map-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 14px; }.map-card { overflow: auto; padding: 15px; }.map-controls { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }.map-controls a { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #f8faf7; }.world-map { display: grid; min-width: 660px; grid-template-columns: repeat(var(--map-size),1fr); gap: 3px; padding: 4px; border-radius: 11px; background: #758b68; }.map-tile { position: relative; display: grid; min-width: 52px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(56,82,48,.25); border-radius: 7px; color: #607156; background: #a9bd94; }.map-tile:nth-child(3n) { background: #b1c29b; }.map-tile:hover { z-index: 2; color: var(--forest-900); transform: scale(1.12); box-shadow: 0 5px 13px rgba(25,47,27,.25); }.map-tile.occupied { color: #f4e9cc; background: #6d5036; }.map-tile.own { outline: 3px solid #ebcf76; }.map-tile > span { font-size: 22px; }.map-tile small { position: absolute; right: 3px; bottom: 2px; color: rgba(255,255,255,.75); font-size: 7px; }.map-tile.empty small { color: rgba(39,61,35,.65); }.map-detail { display: grid; align-content: start; justify-items: center; padding: 22px; text-align: center; }.map-village-icon { display: grid; width: 85px; height: 85px; margin: 20px 0 13px; place-items: center; border-radius: 50%; color: #f2e4bf; background: #70523a; font-size: 40px; }.map-detail h2 { margin-bottom: 3px; font-family: Georgia,serif; }.map-detail p { color: var(--muted); font-size: 11px; }.map-detail .button { margin-top: 25px; }
.stats-totals { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }.stats-totals article { display: grid; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.stats-totals strong { color: var(--forest-800); font-family: Georgia,serif; font-size: 25px; }.stats-totals span { color: var(--muted); font-size: 10px; }.ranking-card { overflow: hidden; }.table-scroll { overflow-x: auto; }.ranking-table { width: 100%; border-collapse: collapse; font-size: 12px; }.ranking-table th { padding: 12px 16px; color: var(--muted); background: #f4f7f2; font-size: 9px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }.ranking-table td { padding: 13px 16px; border-top: 1px solid #edf0ec; }.ranking-table tr.current-player td { background: #edf5eb; }.rank-number { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #edf1eb; font-weight: 850; }.ranking-table tr:nth-child(-n+3) .rank-number { color: #815f16; background: #f5eacb; }
.list-card { overflow: hidden; }.report-row,.movement-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid #edf0ec; }.report-row:last-child,.movement-row:last-child { border: 0; }.report-row.unread { background: #f1f7ef; }.report-icon,.movement-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--forest-800); background: var(--forest-100); }.report-row > div,.movement-row > div { display: grid; }.report-row small,.movement-row small,.report-row > span:last-child,.movement-row > span:last-child { color: var(--muted); font-size: 10px; }
.mobile-bottom-nav { display: none; }

@media (max-width: 1180px) {
    .tribe-grid { grid-template-columns: repeat(3,1fr); }.tribe-choice-grid { grid-template-columns: repeat(3,1fr); }.resource-item em { display: none; }.player-pill span { display: none; }.player-pill { padding-right: 5px; }.field-grid { grid-template-columns: repeat(4,1fr); }.shortcut-grid { grid-template-columns: repeat(2,1fr); }.building-grid { grid-template-columns: repeat(5,1fr); }
}

@media (max-width: 900px) {
    :root { --header-height: 62px; }
    .site-container { width: min(100% - 28px,760px); }.guest-nav > a:not(.button) { display: none; }.hero { padding: 58px 0; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy > p { margin-inline: auto; }.hero-actions,.world-totals { justify-content: center; }.hero-visual { min-height: 410px; }.feature-grid { grid-template-columns: 1fr; }.feature-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }.tribe-grid { grid-template-columns: repeat(2,1fr); }.auth-grid { grid-template-columns: 1fr; gap: 35px; }.auth-story { text-align: center; }.auth-story > p,.story-quote { margin-inline: auto; }.auth-card { width: min(500px,100%); margin: auto; }.quadrant-grid { grid-template-columns: repeat(3,1fr); }
    .game-header-inner { padding: 0 12px; }.compact-brand { flex-basis: auto; }.compact-brand > span:last-child { display: none; }.game-header .resource-bar { display: none; }.header-actions { margin-left: auto; }.header-actions .player-pill { display: none; }.mobile-resource-scroll { position: sticky; z-index: 35; top: var(--header-height); display: block; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; scrollbar-width: none; }.mobile-resource-scroll::-webkit-scrollbar { display: none; }.mobile-resource-bar { display: flex; width: max-content; min-width: 100%; padding: 6px 10px; }.mobile-resource-bar .resource-item { flex: 0 0 145px; }.mobile-resource-bar .resource-item em { display: block; }
    .game-shell { display: block; min-height: auto; }.game-sidebar { display: none; }.game-content { padding: 20px 15px 95px; }.mobile-bottom-nav { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: grid; height: calc(64px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5,1fr); padding: 5px 5px env(safe-area-inset-bottom); border-top: 1px solid #d7dfd5; background: rgba(255,255,255,.96); backdrop-filter: blur(15px); box-shadow: 0 -8px 25px rgba(25,47,28,.1); }.mobile-bottom-nav a { display: grid; align-content: center; justify-items: center; gap: 2px; border-radius: 9px; color: #768078; }.mobile-bottom-nav a span { font-size: 20px; line-height: 1; }.mobile-bottom-nav a small { font-size: 8px; }.mobile-bottom-nav a.active { color: #fff; background: var(--forest-800); }
    .dashboard-grid { grid-template-columns: 1fr; }.production-grid { grid-template-columns: repeat(2,1fr); }.field-grid { grid-template-columns: repeat(3,1fr); }.building-grid { grid-template-columns: repeat(4,1fr); }.city-board { min-height: auto; padding: 18px; }.city-ring { display: none; }.building-detail { grid-template-columns: 190px 1fr; }.map-layout { grid-template-columns: 1fr; }.map-detail { min-height: 230px; }.game-body { padding-top: var(--header-height); }
}

@media (max-width: 620px) {
    .site-container { width: min(100% - 22px,520px); }.brand-mark { width: 37px; height: 37px; }.site-brand strong { font-size: 18px; }.guest-nav .button { min-height: 37px; padding: 8px 11px; font-size: 11px; }.hero { padding: 43px 0; }.hero-copy h1 { font-size: 43px; }.hero-copy > p { font-size: 15px; }.hero-actions .button { width: 100%; }.world-totals { gap: 23px; }.world-totals strong { font-size: 22px; }.hero-visual { min-height: 330px; border-radius: 40% 40% 20px 20px; }.village-scene { right: 1%; left: 1%; transform: scale(.8); }.tribe-grid,.tribe-choice-grid { grid-template-columns: 1fr; }.tribe-card { min-height: auto; }.tribe-card p { min-height: auto; }.section { padding: 60px 0; }.cta-card { align-items: stretch; flex-direction: column; padding: 28px; text-align: center; }.cta-card h2 { font-size: 28px; }.footer-inner { gap: 20px; flex-direction: column; }.auth-main { padding: 40px 0 70px; }.auth-story h1 { font-size: 42px; }.auth-card,.form-section,.installer-card { padding: 23px 18px; }.two-columns { grid-template-columns: 1fr; }.quadrant-grid { grid-template-columns: repeat(2,1fr); }.choice-card { min-height: 235px; }
    .header-actions .header-icon:nth-child(1) { display: none; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading h1 { font-size: 33px; }.tribe-badge,.level-pill,.coordinate-pill { align-self: flex-start; }.dashboard-grid { gap: 12px; }.village-overview-card { padding: 18px; }.village-mini-scene { height: 205px; margin-inline: -18px; }.overview-metrics { grid-template-columns: 1fr; }.overview-metrics > div { grid-template-columns: 35px 1fr; }.card-actions { display: grid; grid-template-columns: 1fr 1fr; }.production-grid,.shortcut-grid { grid-template-columns: 1fr 1fr; }.production-card { padding: 10px; }.shortcut-card { padding: 11px; }.shortcut-card small { display: none; }.inline-queue { grid-template-columns: 38px 1fr; }.inline-queue .progress-track { grid-column: 1/3; }.field-board { padding: 9px; }.field-grid { grid-template-columns: repeat(2,1fr); gap: 7px; }.field-card { min-height: 202px; padding: 10px; }.building-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }.building-slot { min-height: 115px; }.building-detail { grid-template-columns: 1fr; padding: 18px; }.building-hero-icon { min-height: 190px; }.building-catalog-grid,.unit-grid,.research-grid { grid-template-columns: 1fr; }.catalog-building { grid-template-columns: 55px 1fr; padding: 14px; }.catalog-icon { width: 52px; height: 52px; }.training-queue-row { grid-template-columns: 38px 1fr; }.training-queue-row > span:last-child { grid-column: 2; }.train-form { align-items: stretch; flex-direction: column; }.coordinate-search { width: 100%; }.coordinate-search input { flex: 1; }.stats-totals { grid-template-columns: 1fr; }.report-row,.movement-row { grid-template-columns: 38px 1fr; }.report-row > span:last-child,.movement-row > span:last-child { grid-column: 2; }.mobile-resource-bar .resource-item { flex-basis: 135px; }.resource-item strong { font-size: 11px; }
}

/* Administrator */
.admin-body { min-height: 100vh; padding-left: 245px; background: #eef1ec; }
.admin-sidebar { position: fixed; z-index: 80; inset: 0 auto 0 0; display: flex; width: 245px; flex-direction: column; padding: 24px 17px; color: #dce7dd; background: linear-gradient(180deg,#182d20,#102018); box-shadow: 8px 0 30px rgba(18,38,23,.15); }
.admin-brand,.admin-brand:hover { color: #fff; }
.admin-nav-label { margin: 36px 10px 10px; color: #758d7b; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.admin-nav { display: grid; gap: 5px; }
.admin-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #aebeb0; font-size: 12px; }
.admin-nav a span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 16px; }
.admin-nav a.active { color: #fff; background: #315a3d; box-shadow: inset 3px 0 #d6b664; }
.admin-profile { display: flex; align-items: center; gap: 10px; margin-top: auto; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.04); }
.admin-profile > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: #fff; background: #466f50; font-weight: 850; }
.admin-profile div { display: grid; }.admin-profile strong { color: #fff; font-size: 12px; }.admin-profile small { color: #8fa191; font-size: 9px; }
.admin-sidebar > form .button { color: #d7e3d8; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.admin-main { min-height: 100vh; }.admin-mobile-header { display: none; }
.admin-content { width: min(1250px,100%); margin: auto; padding: 38px 38px 70px; }
.admin-live-badge { padding: 8px 11px; border: 1px solid #bedbc4; border-radius: 9px; color: #2f7144; background: #e6f5e9; font-size: 10px; font-weight: 800; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-bottom: 18px; }
.admin-metric-grid article { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-metric-grid article > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 11px; color: var(--forest-800); background: var(--forest-100); font-size: 21px; }
.admin-metric-grid article div { display: grid; }.admin-metric-grid strong { font-family: Georgia,serif; font-size: 25px; }.admin-metric-grid small { color: var(--muted); font-size: 9px; }
.admin-dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.admin-status-card,.queue-health-card,.admin-table-card,.admin-form-section,.cron-card { padding: 22px; }
.settings-summary { display: grid; margin: 18px 0 0; }.settings-summary div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid #edf0ec; }.settings-summary dt { color: var(--muted); font-size: 11px; }.settings-summary dd { margin: 0; font-size: 11px; font-weight: 800; }
.status-value { padding: 3px 7px; border-radius: 6px; }.status-open { color: #2b7040; background: #e5f4e8; }.status-closed { color: #8b352c; background: #f9e8e5; }.status-scheduled { color: #80611f; background: #f7efd9; }
.health-indicator { display: flex; align-items: center; gap: 12px; margin: 22px 0 15px; padding: 14px; border-radius: 11px; }.health-indicator.healthy { color: #2d6e40; background: #e8f5e9; }.health-indicator.warning { color: #8a5b1e; background: #fbf1df; }.health-indicator > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: currentColor; font-weight: 900; }.health-indicator > div { display: grid; }.health-indicator small { opacity: .72; font-size: 9px; }.queue-health-card > p { color: var(--muted); font-size: 11px; }
.admin-table-card { margin-top: 14px; }.admin-table-card > .card-heading { margin-bottom: 14px; }
.status-tag { display: inline-flex; padding: 4px 7px; border-radius: 6px; color: #59635b; background: #edf0ec; font-size: 9px; font-weight: 800; }.status-tag.status-active { color: #2d7041; background: #e5f4e8; }.status-tag.status-blocked { color: #8c342c; background: #f9e7e4; }
.admin-settings-form { display: grid; gap: 14px; }.admin-form-section > .card-heading { margin-bottom: 19px; }
.admin-radio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.admin-radio-grid label { cursor: pointer; }.admin-radio-grid input { position: absolute; width: 1px; opacity: 0; }.admin-radio-grid label > span { display: grid; min-height: 86px; padding: 15px; border: 2px solid var(--line); border-radius: 10px; }.admin-radio-grid label:has(input:checked) > span { border-color: var(--forest-600); background: var(--forest-50); box-shadow: 0 0 0 3px rgba(55,105,70,.1); }.admin-radio-grid small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 500; }
.scheduled-field { max-width: 420px; margin-top: 15px; }.four-columns { grid-template-columns: repeat(4,1fr); }
.cron-card { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 35px; margin-top: 17px; }.cron-card h2 { margin-bottom: 5px; font-family: Georgia,serif; }.cron-card p { margin: 0; color: var(--muted); font-size: 11px; }
.admin-search { display: flex; gap: 7px; }.admin-search input { min-width: 260px; }.table-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.payload-code { display: inline-block; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    .admin-body { padding-left: 0; }.admin-sidebar { width: min(280px,86vw); transform: translateX(-105%); transition: transform .2s; }.admin-menu-open .admin-sidebar { transform: translateX(0); }.admin-mobile-header { position: sticky; z-index: 70; top: 0; display: flex; height: 62px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fff; }.admin-mobile-header button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #f6f8f5; }.admin-content { padding: 25px 16px 60px; }.admin-metric-grid { grid-template-columns: repeat(2,1fr); }.admin-dashboard-grid { grid-template-columns: 1fr; }.four-columns { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
    .admin-metric-grid,.admin-radio-grid,.four-columns { grid-template-columns: 1fr; }.cron-card { grid-template-columns: 1fr; gap: 15px; }.admin-search { width: 100%; }.admin-search input { min-width: 0; }.admin-search .button { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Travia 1.1 — premium emerald / bronze visual system
   -------------------------------------------------------------------------- */

:root {
    --forest-950: #040b08;
    --forest-900: #07140f;
    --forest-800: #0d251b;
    --forest-700: #174531;
    --forest-600: #26704e;
    --forest-100: #173226;
    --forest-50: #10261c;
    --gold-600: #c38a35;
    --gold-500: #e0b45d;
    --gold-100: #3a2b17;
    --bronze-dark: #4a2c16;
    --bronze: #91602d;
    --bronze-light: #d4a75a;
    --ivory: #f4ead4;
    --ink: #f2ead9;
    --muted: #9eaa9f;
    --line: rgba(214, 168, 87, .22);
    --surface: #101d17;
    --surface-raised: #15261e;
    --canvas: #06110d;
    --danger: #e47567;
    --success: #75d39b;
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, .24);
    --shadow: 0 24px 60px rgba(0, 0, 0, .38);
    --header-height: 76px;
    --game-header-height: 132px;
    color-scheme: dark;
}

body {
    background:
        radial-gradient(circle at 15% -10%, rgba(40, 106, 73, .18), transparent 32%),
        radial-gradient(circle at 95% 20%, rgba(150, 92, 34, .1), transparent 28%),
        var(--canvas);
    color: var(--ink);
}

a { color: var(--gold-500); }
a:hover { color: #f2ce7d; }

h1, h2, h3 { color: var(--ivory); }

.card {
    position: relative;
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 42%),
        linear-gradient(160deg, #14251d, #0b1712);
    box-shadow: inset 0 1px rgba(255, 235, 190, .04), var(--shadow-sm);
}

.eyebrow { color: var(--gold-500); text-shadow: 0 1px 8px rgba(224, 180, 93, .2); }
.muted { color: var(--muted); }

.button {
    border-radius: 10px;
    letter-spacing: .015em;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.button-primary {
    color: #211508;
    border-color: #e8c36e;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34), transparent 38%),
        linear-gradient(135deg, #edc66e, #b5782d 58%, #79501f);
    box-shadow: inset 0 1px #fff2bd, inset 0 -2px rgba(63, 33, 9, .42), 0 8px 22px rgba(178, 111, 37, .24);
    text-shadow: 0 1px rgba(255, 243, 194, .35);
}

.button-primary:hover {
    color: #140d05;
    background:
        linear-gradient(180deg, rgba(255,255,255,.4), transparent 38%),
        linear-gradient(135deg, #f5d480, #c58a36 58%, #885a23);
    box-shadow: inset 0 1px #fff4c9, inset 0 -2px rgba(63, 33, 9, .42), 0 11px 28px rgba(201, 135, 50, .32);
}

.button-secondary,
.button-ghost {
    color: #ecd6a7;
    border-color: rgba(214, 168, 87, .36);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 45%),
        linear-gradient(135deg, #183126, #0c1c15);
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.2);
}

.button-secondary:hover,
.button-ghost:hover { color: #ffe8af; border-color: rgba(236, 196, 111, .58); background: linear-gradient(135deg, #214331, #10251b); }
.button:disabled, .button-disabled { color: #6f766e; border-color: rgba(255,255,255,.07); background: #17201b; }
.link-button { color: var(--gold-500); }

input, select, textarea {
    color: var(--ivory);
    border-color: rgba(214, 168, 87, .23);
    background: #08140f;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.34);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(224, 180, 93, .12), inset 0 2px 6px rgba(0,0,0,.3);
}

label { color: #d6d5c8; }

.alert-error { color: #ffc0b8; background: #321612; border-color: #713229; }
.alert-success { color: #a9e5bd; background: #102a1b; border-color: #285e3b; }
.alert-info { color: #b7d9e5; background: #10252b; border-color: #28505c; }

/* Public pages */
.site-header {
    border-bottom-color: rgba(214, 168, 87, .22);
    background: rgba(5, 15, 11, .9);
    box-shadow: 0 10px 35px rgba(0,0,0,.24);
}

.site-brand, .site-brand:hover { color: var(--ivory); }
.site-brand small { color: var(--gold-500); }
.brand-mark {
    position: relative;
    border-color: #d4a75a;
    color: #ffe6a5;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 25%),
        linear-gradient(145deg, #245b41, #071710 68%);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.18), 0 7px 18px rgba(0,0,0,.35);
}

.guest-nav > a:not(.button) { color: #b9c3b9; }
.guest-nav > a:not(.button):hover { color: #f3d991; }

.hero {
    padding: 90px 0 82px;
    background:
        radial-gradient(circle at 15% 5%, rgba(45, 114, 79, .21), transparent 30%),
        radial-gradient(circle at 78% 30%, rgba(176, 107, 36, .13), transparent 34%),
        linear-gradient(150deg, #07130e, #0b1c15 56%, #040a07);
}

.hero::before {
    inset: 0;
    height: auto;
    opacity: .32;
    background-image:
        linear-gradient(30deg, rgba(218, 173, 91, .035) 12%, transparent 12.5%, transparent 87%, rgba(218, 173, 91, .035) 87.5%),
        linear-gradient(150deg, rgba(218, 173, 91, .035) 12%, transparent 12.5%, transparent 87%, rgba(218, 173, 91, .035) 87.5%);
    background-size: 42px 72px;
}

.hero-grid { gap: clamp(38px, 5vw, 76px); }
.hero-copy h1 { color: #f6ecd6; text-shadow: 0 4px 26px rgba(0,0,0,.42); }
.hero-copy > p { color: #abb7ac; }
.world-totals { border-top-color: rgba(214, 168, 87, .2); }
.world-totals strong { color: #f1d38b; }
.world-totals span { color: #89998c; }

.hero-visual {
    min-height: 540px;
    border: 2px solid #8f642f;
    border-radius: 28px;
    background: #07110d;
    box-shadow: inset 0 0 0 1px rgba(255,226,159,.14), 0 34px 76px rgba(0,0,0,.5), 0 0 70px rgba(126, 80, 28, .12);
}

.hero-visual::after {
    z-index: 1;
    background: linear-gradient(180deg, transparent 48%, rgba(2,8,5,.86)), linear-gradient(110deg, rgba(255,220,146,.12), transparent 36%);
}

.hero-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-visual-caption { position: absolute; z-index: 3; right: 108px; bottom: 28px; left: 28px; display: grid; gap: 4px; }
.hero-visual-caption span { color: #dcaf5a; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.hero-visual-caption strong { color: #fff1d3; font-family: Georgia,serif; font-size: 20px; }
.hero-seal { z-index: 4; border-color: #d9ae5a; color: #ffedc1; background: linear-gradient(145deg,#24573e,#071810); box-shadow: inset 0 0 0 4px rgba(0,0,0,.22), 0 10px 25px rgba(0,0,0,.45); }

.feature-strip { border-block: 1px solid rgba(214,168,87,.16); background: #081711; box-shadow: inset 0 8px 26px rgba(0,0,0,.32); }
.feature-grid article { border-color: rgba(214,168,87,.13); }
.feature-grid article > span { color: var(--gold-500); }
.feature-grid p { color: #89988c; }
.section { background: #07110d; }
.tribes-section { background: linear-gradient(180deg,#07110d,#0a1912); }
.section-heading h1, .section-heading h2 { color: var(--ivory); }
.section-heading p { color: var(--muted); }
.tribe-card {
    border-color: rgba(214,168,87,.19);
    background: linear-gradient(155deg,#15271f,#0b1712);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 15px 34px rgba(0,0,0,.25);
}
.tribe-card:hover { border-color: rgba(224,180,93,.42); box-shadow: 0 20px 44px rgba(0,0,0,.38); }
.tribe-card h3 { color: var(--ivory); }
.tribe-card p { color: #99a79b; }
.tribe-emblem { box-shadow: inset 0 0 0 5px rgba(255,255,255,.1), 0 9px 20px rgba(0,0,0,.3); }
.final-cta { background: #07110d; }
.cta-card { border: 1px solid #8c612c; background: radial-gradient(circle at 80% 15%,rgba(214,168,87,.16),transparent 32%),linear-gradient(130deg,#173b2b,#091710); box-shadow: inset 0 1px rgba(255,255,255,.06), var(--shadow); }
.site-footer { border-color: rgba(214,168,87,.16); background: #040b08; }

.auth-main,
.installer-page {
    background:
        linear-gradient(rgba(4,12,8,.74),rgba(4,12,8,.92)),
        url("images/village-starter-scene-v1.jpg") center/cover fixed;
}
.auth-story h1 { color: var(--ivory); text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.auth-story > p { color: #b1bcb2; }
.story-quote { border-left-color: var(--gold-500); background: rgba(6,18,13,.72); box-shadow: 0 12px 34px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.story-quote p { color: #c8cabb; }
.auth-card, .installer-card { background: rgba(10,25,18,.9); backdrop-filter: blur(18px); }
.stack-form fieldset { border-color: var(--line); }
.stack-form legend { color: #e2bd6f; }
.form-section { background: linear-gradient(145deg,rgba(21,39,30,.97),rgba(8,20,14,.97)); }
.form-section-title > span { color: #241608; background: linear-gradient(#efd27f,#a9712d); box-shadow: inset 0 1px #fff1b9; }
.choice-card { border-color: rgba(214,168,87,.18); background: #0a1812; }
.choice-card:has(input:checked) { background: linear-gradient(145deg,rgba(36,83,59,.56),#0a1812); }
.choice-card strong { color: var(--ivory); }
.choice-card p { color: #92a095; }
.quadrant-choice span { border-color: var(--line); color: #c4cabf; background: #08150f; }
.quadrant-choice:has(input:checked) span { border-color: var(--gold-500); color: #ffe4a5; background: #223720; box-shadow: inset 0 0 0 1px #6b5026; }

/* Game chrome */
.game-body {
    padding-top: var(--game-header-height);
    background:
        radial-gradient(circle at 70% 0, rgba(35,94,65,.15), transparent 34%),
        linear-gradient(135deg,#07120e,#040a07);
}

.game-header {
    height: var(--game-header-height);
    border-bottom: 1px solid #765026;
    background:
        linear-gradient(180deg,rgba(255,255,255,.025),transparent 50%),
        linear-gradient(180deg,rgba(7,20,15,.98),rgba(4,12,9,.98));
    box-shadow: 0 13px 36px rgba(0,0,0,.38), inset 0 -1px rgba(236,190,103,.08);
    backdrop-filter: blur(18px);
}

.game-header-inner {
    display: grid;
    width: min(1600px,100%);
    height: 100%;
    grid-template-columns: 230px minmax(470px,1fr) auto;
    grid-template-rows: 75px 56px;
    gap: 0 24px;
    padding: 0 24px;
}

.game-header .compact-brand { grid-row: 1 / 3; grid-column: 1; align-self: center; }
.game-header .compact-brand .brand-mark { width: 48px; height: 48px; border-radius: 14px 14px 21px 21px; font-size: 26px; }
.game-header .compact-brand strong { font-size: 20px; }

.header-game-nav {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    gap: clamp(8px,1.3vw,18px);
    min-width: 0;
}

.header-game-nav a {
    display: grid;
    min-width: 62px;
    justify-items: center;
    gap: 3px;
    color: #819087;
    font-size: 9px;
    transition: color .16s ease, transform .16s ease;
}

.header-game-nav a:hover { color: #edd38f; transform: translateY(-1px); }
.header-game-nav a span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #594323;
    border-radius: 50%;
    color: #b4b5a8;
    background:
        radial-gradient(circle at 34% 25%,rgba(255,255,255,.1),transparent 28%),
        linear-gradient(145deg,#1d3027,#09150f);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 7px 14px rgba(0,0,0,.3);
    font-size: 20px;
}
.header-game-nav a b { font-weight: 750; }
.header-game-nav a.active { color: #f4d995; }
.header-game-nav a.active span {
    border-color: #dfa950;
    color: #ffe7aa;
    background: radial-gradient(circle at 36% 24%,rgba(255,236,178,.25),transparent 28%),linear-gradient(145deg,#356249,#11291d);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 0 0 2px rgba(187,126,48,.2), 0 8px 20px rgba(0,0,0,.38), 0 0 20px rgba(212,167,90,.12);
}

.game-header .resource-bar { grid-row: 2; grid-column: 2 / 4; align-self: start; }
.resource-bar { gap: 9px; }
.resource-item {
    overflow: hidden;
    min-height: 45px;
    padding: 6px 11px 9px 8px;
    border-color: rgba(214,168,87,.2);
    border-radius: 11px;
    color: var(--ivory);
    background: linear-gradient(180deg,#16271f,#0b1712);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 13px rgba(0,0,0,.26);
}
.resource-symbol {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,221,155,.32);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%,#7cb16a,#274d2c 62%,#152819);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.3);
}
.resource-clay .resource-symbol { background: radial-gradient(circle at 35% 28%,#d08455,#6f321d 62%,#391a10); }
.resource-iron .resource-symbol { background: radial-gradient(circle at 35% 28%,#aeb9b7,#4f5f5f 62%,#263030); }
.resource-crop .resource-symbol { background: radial-gradient(circle at 35% 28%,#e4c36a,#8c6420 62%,#4c3512); }
.resource-item small { color: #89978d; }
.resource-item strong { color: #eee5d0; }
.resource-item strong i { color: #657269; }
.resource-item em { color: #77d39c; }
.resource-gauge { position: absolute; right: 0; bottom: 0; left: 0; display: block; height: 3px; background: rgba(0,0,0,.34); }
.resource-gauge i { display: block; width: var(--resource-fill,0%); height: 100%; background: linear-gradient(90deg,#8a5929,#f0c66c); box-shadow: 0 0 8px rgba(230,180,84,.35); transition: width .3s linear; }

.header-actions { grid-row: 1; grid-column: 3; }
.header-icon {
    border-color: rgba(214,168,87,.23);
    border-radius: 50%;
    color: #d1c6aa;
    background: linear-gradient(145deg,#192b22,#09150f);
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 12px rgba(0,0,0,.28);
}
.header-icon:hover { color: #ffdfa0; border-color: rgba(224,180,93,.55); }
.player-pill { border-color: rgba(214,168,87,.23); background: #0a1711; }
.player-pill i { color: #211407; background: linear-gradient(#e4bf6c,#8f5f28); }
.player-pill span { color: #e5ddca; }

.game-shell { width: min(1600px,100%); min-height: calc(100vh - var(--game-header-height)); grid-template-columns: 245px minmax(0,1fr); }
.game-sidebar {
    top: var(--game-header-height);
    height: calc(100vh - var(--game-header-height));
    padding: 24px 16px;
    border-right-color: rgba(214,168,87,.18);
    background:
        linear-gradient(180deg,rgba(255,255,255,.02),transparent 32%),
        #08150f;
    box-shadow: inset -8px 0 28px rgba(0,0,0,.2);
}
.sidebar-label { color: #7f8d83; }
.village-panel {
    padding: 17px;
    border-color: rgba(214,168,87,.24);
    background: linear-gradient(145deg,#183025,#0c1d16);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.24);
}
.village-panel strong { color: #f1dfb9; font-size: 19px; }
.village-panel small { color: #8d9b91; }

.sidebar-resource-panel { display: grid; gap: 8px; margin-top: 20px; }
.sidebar-resource-panel > .sidebar-label { margin: 0 5px 2px; }
.sidebar-resource-row { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid rgba(214,168,87,.12); border-radius: 11px; background: rgba(255,255,255,.018); }
.sidebar-resource-row .resource-symbol { flex-basis: 31px; }
.sidebar-resource-row > div { display: grid; }
.sidebar-resource-row small { color: #7d8c81; font-size: 9px; text-transform: uppercase; }
.sidebar-resource-row strong { color: #cfd7cc; font-size: 11px; }

.sidebar-shortcuts { margin-top: 24px; padding: 0; }
.sidebar-shortcuts a { padding: 9px 7px; border-bottom: 1px solid rgba(255,255,255,.035); color: #9aa79d; }
.sidebar-shortcuts a:hover { color: #f0cf84; }

.game-content { padding: 34px clamp(20px,3vw,50px) 76px; }
.page-heading h1 { color: #f3ead6; text-shadow: 0 3px 18px rgba(0,0,0,.34); }
.page-heading p { color: #92a096; }
.back-link { color: #cfa65a; }
.tribe-badge {
    color: #ffe6a6;
    border-color: rgba(214,168,87,.3);
    background: linear-gradient(145deg,#182d23,#0a1711);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.22);
}
.tribe-badge i { box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); }
.coordinate-pill, .level-pill {
    color: #f3d78e;
    border-color: rgba(214,168,87,.42);
    background: rgba(11,25,18,.82);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 15px rgba(0,0,0,.22);
}
.card-heading h2 { color: #eee4cf; }

/* Central 3D village */
.dashboard-grid { grid-template-columns: minmax(0,1.9fr) minmax(285px,.68fr); gap: 20px; }
.village-overview-card { min-width: 0; padding: 0; overflow: visible; }
.village-scene-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border: 2px solid #8f622d;
    border-radius: 22px;
    background: #07110d;
    box-shadow: inset 0 0 0 1px rgba(255,228,165,.12), 0 24px 56px rgba(0,0,0,.48), 0 0 48px rgba(126,83,31,.1);
}
.village-scene-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-vignette { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(1,7,4,.2),transparent 32%,rgba(2,7,5,.12) 55%,rgba(2,8,5,.9)), linear-gradient(90deg,rgba(1,6,4,.24),transparent 28%,transparent 72%,rgba(1,6,4,.22)); pointer-events: none; }
.scene-topline { position: absolute; top: 18px; right: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-world-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(225,188,108,.38); border-radius: 9px; color: #f0dcaa; background: rgba(5,15,10,.73); box-shadow: 0 7px 18px rgba(0,0,0,.3); backdrop-filter: blur(10px); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.live-world-badge i { width: 7px; height: 7px; border-radius: 50%; background: #7fe1a6; box-shadow: 0 0 0 4px rgba(92,205,139,.14), 0 0 12px rgba(92,205,139,.7); }
.scene-topline .coordinate-pill { background: rgba(5,15,10,.73); backdrop-filter: blur(10px); }
.scene-caption { position: absolute; right: 24px; bottom: 103px; left: 24px; max-width: 630px; }
.scene-caption .eyebrow { margin-bottom: 5px; color: #f1c76f; }
.scene-caption h2 { margin: 0 0 5px; color: #fff2d4; font-family: Georgia,serif; font-size: clamp(25px,2.4vw,39px); line-height: 1.05; text-shadow: 0 3px 18px #000; }
.scene-caption p { max-width: 560px; margin: 0; color: #c6c9bc; font-size: 12px; line-height: 1.5; text-shadow: 0 2px 8px #000; }
.scene-metrics { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-width: 610px; }
.scene-metrics > div { display: grid; grid-template-columns: 35px 1fr; align-items: center; min-width: 0; padding: 9px 11px; border: 1px solid rgba(225,188,108,.24); border-radius: 11px; background: rgba(5,15,10,.76); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.26); backdrop-filter: blur(12px); }
.scene-metrics span { grid-row: 1 / 3; color: #e0b45d; font-size: 18px; }
.scene-metrics strong { color: #f7edd7; font-size: 16px; }
.scene-metrics small { overflow: hidden; color: #91a095; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.scene-command-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 13px; }
.scene-command-row .button { min-height: 49px; }
.scene-command-row .button span { font-size: 18px; }

.dashboard-side-stack { gap: 16px; }
.queue-card, .credit-card { padding: 22px; border-radius: 17px; }
.status-dot { background: #4d554f; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.status-dot.active { background: #6ee096; box-shadow: 0 0 0 4px rgba(92,205,139,.12),0 0 14px rgba(92,205,139,.5); }
.queue-icon { border: 1px solid #b57d39; color: #ffe8b0; background: radial-gradient(circle at 35% 25%,#9f733e,#3f2a17 68%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.16),0 7px 14px rgba(0,0,0,.28); }
.queue-active span { color: var(--muted); }
.progress-track { background: #06100b; box-shadow: inset 0 1px 4px rgba(0,0,0,.7); }
.progress-track span { background: linear-gradient(90deg,#95602a,#ecc66d); box-shadow: 0 0 10px rgba(224,180,93,.3); }
.credit-card { border-color: #7e592a; background: radial-gradient(circle at 90% 10%,rgba(224,180,93,.18),transparent 35%),linear-gradient(145deg,#214b37,#0b1c14); }
.credit-card .eyebrow { color: #f0ca75; }
.credit-count strong { color: #f4d889; text-shadow: 0 3px 18px rgba(0,0,0,.4); }
.credit-count span, .credit-card > small { color: #9faea2; }

.production-card, .shortcut-card {
    border-color: rgba(214,168,87,.18);
    color: var(--ink);
    background: linear-gradient(145deg,#14261e,#0a1711);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 23px rgba(0,0,0,.22);
}
.production-card small, .production-card em, .production-card > i, .shortcut-card small { color: #87958b; }
.production-card > i { border-color: rgba(255,255,255,.055); }
.shortcut-card:hover { border-color: rgba(224,180,93,.42); color: #ffe7ae; box-shadow: 0 15px 30px rgba(0,0,0,.34); }
.shortcut-card > span { border: 1px solid rgba(214,168,87,.26); color: #e1b65e; background: radial-gradient(circle at 35% 25%,#28543c,#0d2117 70%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.18); }
.shortcut-card > b { color: #936d36; }

/* Gameplay panels */
.empty-state > span { border: 1px solid rgba(214,168,87,.32); color: #e7bd67; background: linear-gradient(145deg,#234431,#0b1c14); box-shadow: inset 0 0 0 3px rgba(0,0,0,.18); }
.empty-state p { color: var(--muted); }
.max-level, .researched-label { color: #9ae0b4; background: rgba(43,119,72,.2); border: 1px solid rgba(95,189,126,.23); }
.production-mini span { color: var(--muted); }
.production-mini strong { color: #efc970; }
.inline-queue { background: linear-gradient(145deg,#15271f,#0a1711); }
.inline-queue small { color: var(--muted); }

.field-board {
    border-color: #604522;
    background:
        radial-gradient(circle at 16% 12%,rgba(64,126,78,.18),transparent 28%),
        radial-gradient(circle at 88% 80%,rgba(143,91,35,.17),transparent 34%),
        linear-gradient(145deg,#10251a,#07130e);
}
.field-card { border-color: rgba(214,168,87,.17); background: linear-gradient(155deg,#172b22,#0b1812); box-shadow: inset 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.21); }
.field-card.resource-wood { background: linear-gradient(155deg,#1a3325,#0a1811); }
.field-card.resource-clay { background: linear-gradient(155deg,#332117,#15110d); }
.field-card.resource-iron { background: linear-gradient(155deg,#28302e,#101615); }
.field-card.resource-crop { background: linear-gradient(155deg,#332b17,#15140d); }
.level-badge { color: #211608; background: linear-gradient(#e7c36f,#98652a); box-shadow: inset 0 1px #fff0b4; }
.field-card > small { color: var(--muted); }
.cost-row span { color: #c9d0c7; background: #101c17; border: 1px solid rgba(255,255,255,.055); }
.cost-row .cost-wood { color: #a6d497; background: #13271a; }
.cost-row .cost-clay { color: #e3a17b; background: #2a1812; }
.cost-row .cost-iron { color: #b9c6c5; background: #1b2221; }
.cost-row .cost-crop { color: #e3c875; background: #292311; }

.city-board {
    border-color: #765126;
    background:
        linear-gradient(rgba(3,10,6,.46),rgba(3,10,6,.72)),
        url("images/village-starter-scene-v1.jpg") center/cover;
    box-shadow: inset 0 0 85px rgba(0,0,0,.55),var(--shadow);
}
.city-board::after { background: radial-gradient(circle at center,transparent 22%,rgba(2,8,5,.12) 60%,rgba(2,7,4,.62)); }
.city-ring { border-color: rgba(188,132,59,.35); box-shadow: 0 0 0 4px rgba(255,218,145,.05),inset 0 0 28px rgba(0,0,0,.34); }
.building-slot { border-color: rgba(225,184,100,.36); color: #eee4cf; background: rgba(7,20,14,.78); box-shadow: inset 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.4); }
.building-slot:hover { color: #fff0c5; border-color: #d0a154; background: rgba(17,46,32,.9); box-shadow: 0 15px 32px rgba(0,0,0,.5),0 0 18px rgba(206,156,72,.11); }
.building-slot i, .catalog-icon, .building-hero-icon > span { border-color: #c49346; color: #ffe4a5; background: radial-gradient(circle at 35% 24%,#43795a,#11291d 66%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.34); }
.building-slot small, .catalog-copy p { color: var(--muted); }
.building-slot.empty { opacity: .88; }
.building-slot.empty i { color: #e2b65f; border-color: rgba(225,181,96,.5); background: rgba(28,48,36,.85); }
.slot-number { color: #9d8a67; }
.building-detail { background: linear-gradient(145deg,#15281f,#091610); }
.building-hero-icon { background: radial-gradient(circle,#244633,#0a1811); box-shadow: inset 0 0 40px rgba(0,0,0,.28); }
.building-hero-icon small { color: #281908; background: linear-gradient(#e7c16b,#966127); }
.building-detail-copy p, .catalog-copy p { color: var(--muted); }
.catalog-building { background: linear-gradient(145deg,#15271f,#0a1711); }
.catalog-building.locked { filter: saturate(.7); }

.sub-tabs { border-color: rgba(214,168,87,.2); background: #08150f; }
.sub-tabs a { color: #8e9b91; }
.sub-tabs a.active { color: #261707; background: linear-gradient(#e5bf6a,#98642a); box-shadow: inset 0 1px #ffedb0; }
.training-queue, .unit-card, .research-card { background: linear-gradient(145deg,#15271f,#0a1711); }
.training-queue-row { border-color: rgba(255,255,255,.055); }
.training-queue-row small, .training-queue-row > span:last-child, .unit-head small, .unit-meta { color: var(--muted); }
.unit-avatar { border: 1px solid #a67538; color: #ffe8ad; background: radial-gradient(circle at 35% 24%,#a47a44,#422a17 68%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.16); }
.time-pill { color: #f1d58c; background: #273b25; border: 1px solid rgba(214,168,87,.16); }
.research-card.researched { border-color: rgba(88,184,119,.28); background: linear-gradient(145deg,#173323,#0b1a12); }

.coordinate-search span { color: #89795d; }
.map-card, .map-detail { background: linear-gradient(145deg,#14261e,#08150f); }
.map-controls a { border-color: rgba(214,168,87,.24); color: #e5c479; background: #0d1e16; }
.world-map { border: 1px solid #6e4b24; background: #172a1d; box-shadow: inset 0 0 28px rgba(0,0,0,.38); }
.map-tile { border-color: rgba(13,33,20,.55); color: #7f9a76; background: linear-gradient(145deg,#53734b,#334e32); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.map-tile:nth-child(3n) { background: linear-gradient(145deg,#5d784f,#385538); }
.map-tile.occupied { color: #f7dda0; background: linear-gradient(145deg,#845d32,#3c2817); }
.map-tile.own { outline-color: #efc76b; box-shadow: 0 0 18px rgba(236,193,96,.28); }
.map-tile.empty small { color: rgba(220,232,213,.55); }
.map-village-icon { border: 2px solid #c69448; color: #ffe5a5; background: radial-gradient(circle at 35% 25%,#9c7541,#3b2716 67%); box-shadow: inset 0 0 0 4px rgba(0,0,0,.18),0 10px 28px rgba(0,0,0,.35); }
.map-detail p { color: var(--muted); }

.stats-totals article { border-color: rgba(214,168,87,.18); background: linear-gradient(145deg,#14261e,#0a1711); box-shadow: var(--shadow-sm); }
.stats-totals strong { color: #e6c16e; }
.stats-totals span { color: var(--muted); }
.ranking-table th { color: #9a9f93; background: #08150f; }
.ranking-table td { border-color: rgba(255,255,255,.055); }
.ranking-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.ranking-table tr.current-player td { background: rgba(51,120,78,.18); }
.rank-number { color: #b8c1b8; background: #16251e; }
.ranking-table tr:nth-child(-n+3) .rank-number { color: #f0d17e; background: #352a16; }
.report-row, .movement-row { border-color: rgba(255,255,255,.055); }
.report-row.unread { background: rgba(40,105,67,.16); }
.report-icon, .movement-icon { border: 1px solid rgba(214,168,87,.24); color: #e2b863; background: #173024; }
.report-row small, .movement-row small, .report-row > span:last-child, .movement-row > span:last-child { color: var(--muted); }

/* Admin follows the same world */
.admin-body { background: #06110d; }
.admin-sidebar { border-right: 1px solid #694823; background: radial-gradient(circle at 30% 0,rgba(44,101,72,.2),transparent 28%),linear-gradient(180deg,#0b1d15,#040b08); box-shadow: 10px 0 34px rgba(0,0,0,.34); }
.admin-nav a { color: #95a398; }
.admin-nav a span { border: 1px solid rgba(214,168,87,.12); background: rgba(255,255,255,.035); }
.admin-nav a.active { color: #ffe5a8; background: linear-gradient(90deg,#214c37,#10271c); box-shadow: inset 3px 0 #d6a857,0 8px 18px rgba(0,0,0,.18); }
.admin-profile { border-color: rgba(214,168,87,.17); background: rgba(255,255,255,.025); }
.admin-profile > span { color: #241607; background: linear-gradient(#e2bd68,#956129); }
.admin-content { color: var(--ink); }
.admin-live-badge { color: #a5dfb8; border-color: rgba(87,180,116,.28); background: rgba(40,113,66,.18); }
.admin-metric-grid article, .admin-status-card, .queue-health-card, .admin-table-card, .admin-form-section, .cron-card { border-color: rgba(214,168,87,.18); background: linear-gradient(145deg,#14261e,#091610); box-shadow: var(--shadow-sm); }
.admin-metric-grid article > span { color: #e4bc63; background: #1b3527; border: 1px solid rgba(214,168,87,.18); }
.admin-metric-grid small, .queue-health-card > p, .cron-card p { color: var(--muted); }
.settings-summary div { border-color: rgba(255,255,255,.055); }
.settings-summary dt { color: var(--muted); }
.status-open, .status-tag.status-active { color: #9cdeb3; background: rgba(44,125,72,.2); }
.status-closed, .status-tag.status-blocked { color: #f0aaa1; background: rgba(133,48,39,.22); }
.status-scheduled { color: #ead088; background: rgba(130,91,28,.2); }
.status-tag { color: #aeb8af; background: #18231e; }
.health-indicator.healthy { color: #9bdeb2; background: rgba(38,112,64,.2); }
.health-indicator.warning { color: #e9c679; background: rgba(134,86,24,.2); }
.admin-radio-grid label > span { border-color: var(--line); background: #091711; }
.admin-radio-grid label:has(input:checked) > span { border-color: var(--gold-500); background: #183022; box-shadow: 0 0 0 3px rgba(224,180,93,.08); }

/* Responsive */
@media (max-width: 1240px) {
    .game-header-inner { grid-template-columns: 190px minmax(410px,1fr) auto; gap: 0 14px; padding-inline: 16px; }
    .game-shell { grid-template-columns: 215px minmax(0,1fr); }
    .game-header .compact-brand { flex-basis: auto; }
    .game-header .compact-brand small { display: none; }
    .header-game-nav { gap: 7px; }
    .header-game-nav a { min-width: 55px; }
    .header-game-nav a b { display: none; }
    .resource-item em { display: none; }
    .dashboard-grid { grid-template-columns: minmax(0,1.55fr) minmax(270px,.65fr); }
    .scene-caption { max-width: 520px; }
}

@media (max-width: 900px) {
    :root { --game-header-height: 64px; }
    .game-body { padding-top: var(--game-header-height); }
    .game-header { height: var(--game-header-height); }
    .game-header-inner { display: flex; height: 100%; padding: 0 12px; }
    .game-header .compact-brand { display: inline-flex; }
    .game-header .compact-brand .brand-mark { width: 42px; height: 42px; font-size: 22px; }
    .header-game-nav, .game-header .resource-bar { display: none; }
    .header-actions { margin-left: auto; }
    .mobile-resource-scroll { top: var(--game-header-height); border-bottom-color: #61451f; background: rgba(5,15,11,.97); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
    .mobile-resource-bar { padding: 7px 9px; }
    .mobile-resource-bar .resource-item { flex-basis: 155px; min-height: 47px; }
    .mobile-resource-bar .resource-item em { display: block; }
    .game-shell { min-height: auto; }
    .game-content { padding: 23px 15px 104px; }
    .mobile-bottom-nav { height: calc(70px + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); border-top-color: #795226; background: rgba(5,15,11,.96); box-shadow: 0 -10px 30px rgba(0,0,0,.42); }
    .mobile-bottom-nav a { color: #77867b; }
    .mobile-bottom-nav a span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 50%; font-size: 18px; }
    .mobile-bottom-nav a small { font-size: 8px; font-weight: 700; }
    .mobile-bottom-nav a.active { color: #f0d58e; background: transparent; }
    .mobile-bottom-nav a.active span { border-color: #d09d4a; color: #ffe7a7; background: radial-gradient(circle at 35% 25%,#37644a,#10281c); box-shadow: inset 0 0 0 3px rgba(0,0,0,.2),0 0 16px rgba(210,163,78,.14); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-side-stack { grid-template-columns: 1fr 1fr; }
    .hero-visual { min-height: 460px; }
    .admin-mobile-header { border-bottom-color: #694823; background: #07150f; }
    .admin-mobile-header button { color: #eed18a; border-color: rgba(214,168,87,.28); background: #10231a; }
}

@media (max-width: 620px) {
    .hero { padding: 48px 0 55px; }
    .hero-copy h1 { font-size: 42px; }
    .hero-visual { min-height: 380px; border-radius: 20px; }
    .hero-visual-caption { right: 82px; bottom: 19px; left: 18px; }
    .hero-visual-caption strong { font-size: 16px; }
    .hero-seal { right: 13px; bottom: 13px; width: 66px; height: 66px; }
    .hero-seal strong { font-size: 23px; }
    .page-heading { margin-bottom: 18px; }
    .page-heading h1 { font-size: 32px; }
    .dashboard-heading p { font-size: 12px; }
    .village-overview-card { padding: 0; }
    .village-scene-frame { aspect-ratio: 4 / 3; border-radius: 17px; }
    .scene-topline { top: 11px; right: 11px; left: 11px; }
    .live-world-badge { padding: 7px 8px; font-size: 8px; }
    .scene-topline .coordinate-pill { padding: 7px 9px; font-size: 10px; }
    .scene-caption { right: 14px; bottom: 82px; left: 14px; }
    .scene-caption h2 { max-width: 330px; font-size: 22px; }
    .scene-caption p { display: none; }
    .scene-metrics { right: 10px; bottom: 10px; left: 10px; gap: 5px; }
    .scene-metrics > div { grid-template-columns: 24px 1fr; padding: 7px 6px; }
    .scene-metrics span { font-size: 13px; }
    .scene-metrics strong { font-size: 13px; }
    .scene-metrics small { font-size: 6px; }
    .scene-command-row { gap: 7px; padding-top: 9px; }
    .scene-command-row .button { min-height: 44px; padding-inline: 10px; font-size: 11px; }
    .dashboard-side-stack { grid-template-columns: 1fr; gap: 10px; }
    .queue-card, .credit-card { padding: 18px; }
    .production-grid, .shortcut-grid { grid-template-columns: 1fr 1fr; }
    .production-card { padding: 11px; }
    .shortcut-card { padding: 11px; }
    .field-board { padding: 9px; }
    .field-card { min-height: 205px; }
    .city-board { padding: 12px; background-position: center; }
    .building-slot { min-height: 120px; }
    .building-slot i { width: 42px; height: 42px; }
    .catalog-building { grid-template-columns: 55px 1fr; }
    .auth-main, .installer-page { background-attachment: scroll; }
}

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

/* --------------------------------------------------------------------------
   Travia 1.2 — illustrated public portal, metal login and parchment register
   -------------------------------------------------------------------------- */

.guest-body {
    background: #030b09;
}

.guest-body .site-header {
    height: 72px;
    border-bottom: 2px solid #7d592b;
    background:
        linear-gradient(180deg,rgba(255,255,255,.025),transparent 48%),
        linear-gradient(90deg,#07110f,#0c1715 50%,#050d0b);
    box-shadow: inset 0 -1px rgba(242,200,111,.16),0 9px 28px rgba(0,0,0,.44);
}

.guest-body .header-inner { gap: 22px; }
.guest-body .site-brand { flex: 0 0 auto; }
.guest-body .site-brand strong { color: #e0b765; font-size: 25px; letter-spacing: .08em; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.guest-body .site-brand small { color: #89734a; font-size: 7px; }
.guest-body .brand-mark { width: 43px; height: 47px; border-radius: 8px 8px 15px 15px; color: #edc974; background: radial-gradient(circle at 38% 25%,rgba(255,255,255,.16),transparent 25%),linear-gradient(145deg,#263f34,#08120f); }
.guest-body .guest-nav { gap: clamp(12px,1.8vw,28px); }
.guest-body .guest-nav > a:not(.button) { color: #c2c3b9; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.guest-body .guest-nav > a:not(.button):hover { color: #f1cf80; }
.guest-body .guest-nav .button { min-height: 36px; padding: 8px 16px; border-radius: 4px; font-family: Georgia,serif; font-size: 11px; text-transform: uppercase; }
.guest-login-button { border-color: #92703a; }

/* Landing hero */
.portal-hero {
    position: relative;
    min-height: clamp(620px,72vh,790px);
    overflow: hidden;
    border-bottom: 2px solid #7a5528;
    background: #07110e url("images/travia-public-hero-v3.jpg") center 47% / cover no-repeat;
    box-shadow: inset 0 -24px 70px rgba(0,0,0,.66);
}

.portal-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,rgba(1,7,5,.93) 0%,rgba(2,10,7,.76) 29%,rgba(3,10,7,.18) 62%,rgba(1,6,4,.1)),
        linear-gradient(180deg,rgba(3,9,7,.2),transparent 55%,rgba(2,8,6,.82));
}

.portal-hero-inner { position: relative; display: flex; min-height: inherit; align-items: center; padding-block: 62px 86px; }
.portal-hero-copy { width: min(650px,55%); }
.portal-kicker { display: block; margin-bottom: 16px; color: #d9b263; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-shadow: 0 2px 9px #000; }
.portal-hero-copy h1 { margin-bottom: 20px; color: #e9c878; font-family: Georgia,"Times New Roman",serif; font-size: clamp(48px,5vw,76px); letter-spacing: -.02em; line-height: .91; text-transform: uppercase; text-shadow: 0 4px 3px rgba(0,0,0,.75),0 0 28px rgba(197,139,55,.1); }
.portal-hero-copy h1 em { color: #f1d891; font-style: normal; }
.portal-hero-copy > p { max-width: 545px; margin-bottom: 25px; color: #c6c7bd; font-family: Georgia,serif; font-size: 15px; line-height: 1.6; text-shadow: 0 2px 8px #000; }
.portal-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-hero-actions .button { min-width: 150px; border-radius: 4px; font-family: Georgia,serif; text-transform: uppercase; }

.server-scroll {
    display: grid;
    max-width: 610px;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    margin-top: 19px;
    border: 1px solid #6f512b;
    border-radius: 5px;
    background: rgba(4,13,10,.8);
    box-shadow: inset 0 1px rgba(255,226,164,.06),0 10px 25px rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
}
.server-scroll > div { position: relative; display: grid; grid-template-columns: 25px 1fr; align-items: center; min-width: 0; padding: 11px 9px; border-right: 1px solid rgba(210,162,77,.18); }
.server-scroll > div:last-child { border: 0; }
.server-scroll span { grid-row: 1/3; color: #cda458; font-size: 17px; }
.server-scroll small { color: #8c9187; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.server-scroll strong { overflow: hidden; color: #e7d7ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.server-scroll strong.is-open { color: #8bd3a0; }

/* Public content */
.portal-section { position: relative; padding: 48px 0; border-bottom: 1px solid rgba(180,126,48,.2); background: radial-gradient(circle at 50% -20%,rgba(37,83,62,.16),transparent 42%),#06100e; }
.portal-section::before { position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(30deg,rgba(215,170,84,.05) 12%,transparent 12.5%,transparent 87%,rgba(215,170,84,.05) 87.5%),linear-gradient(150deg,rgba(215,170,84,.05) 12%,transparent 12.5%,transparent 87%,rgba(215,170,84,.05) 87.5%); background-size: 44px 76px; content: ""; }
.portal-section > .site-container { position: relative; }
.portal-section-title { display: grid; grid-template-columns: minmax(35px,1fr) auto minmax(35px,1fr); align-items: center; gap: 15px; max-width: 720px; margin: 0 auto; }
.portal-section-title > span { height: 1px; background: linear-gradient(90deg,transparent,#9d7137); }
.portal-section-title > span:last-child { background: linear-gradient(90deg,#9d7137,transparent); }
.portal-section-title h2 { margin: 0; color: #dcb661; font-family: Georgia,serif; font-size: clamp(25px,3vw,35px); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.portal-section-lead { max-width: 760px; margin: 9px auto 25px; color: #8f9b91; font-family: Georgia,serif; font-size: 12px; text-align: center; }

.game-feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.game-feature-card { overflow: hidden; border: 2px solid #735129; border-radius: 5px; background: #091510; box-shadow: inset 0 0 0 1px rgba(244,207,127,.08),0 12px 28px rgba(0,0,0,.3); }
.feature-art { position: relative; display: grid; min-height: 158px; place-items: center; overflow: hidden; border-bottom: 1px solid #8b6230; background-position: center; background-size: cover; }
.feature-art::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.05),rgba(2,8,5,.65)); content: ""; }
.feature-art span { position: relative; z-index: 2; display: grid; width: 59px; height: 59px; place-items: center; border: 2px solid #c99a4c; border-radius: 50%; color: #ffe4a4; background: rgba(5,15,11,.7); box-shadow: inset 0 0 0 4px rgba(0,0,0,.3),0 7px 18px rgba(0,0,0,.55); font-size: 27px; }
.feature-resources .feature-art { background-image: url("images/village-starter-scene-v1.jpg"); background-position: 4% 78%; }
.feature-village .feature-art { background-image: url("images/village-starter-scene-v1.jpg"); background-position: 50% 53%; }
.feature-army .feature-art { background-image: url("images/travia-public-hero-v3.jpg"); background-position: 84% 76%; }
.feature-conquest .feature-art { background-image: url("images/travia-public-hero-v3.jpg"); background-position: 59% 45%; }
.game-feature-card > div:last-child { min-height: 112px; padding: 14px 15px 16px; text-align: center; }
.game-feature-card h3 { margin-bottom: 7px; color: #d9af59; font-family: Georgia,serif; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.game-feature-card p { margin: 0; color: #8d998f; font-size: 10px; line-height: 1.5; }

.portal-tribes { background: radial-gradient(circle at 50% 20%,rgba(46,93,67,.2),transparent 45%),#07120f; }
.portal-tribe-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 13px; }
.portal-tribe { display: grid; justify-items: center; min-width: 0; padding: 4px 8px 0; color: #c8c3ad; text-align: center; }
.portal-tribe:hover { color: #f0d28b; transform: translateY(-4px); }
.portal-tribe-portrait { position: relative; display: grid; width: clamp(104px,11vw,148px); height: clamp(104px,11vw,148px); margin-bottom: 12px; place-items: center; border: 3px solid #a5783d; border-radius: 50%; background: radial-gradient(circle at 40% 30%,rgba(255,255,255,.13),transparent 25%),linear-gradient(rgba(5,14,10,.35),rgba(4,10,8,.7)),url("images/travia-public-hero-v3.jpg") center/cover; box-shadow: inset 0 0 0 5px rgba(0,0,0,.52),0 0 0 1px #3d2b18,0 14px 25px rgba(0,0,0,.35); }
.portal-tribe-portrait::before,.portal-tribe-portrait::after { position: absolute; bottom: -8px; color: #a87d42; font-family: Georgia,serif; font-size: 38px; content: "❧"; }
.portal-tribe-portrait::before { left: -5px; transform: rotate(-45deg); }
.portal-tribe-portrait::after { right: -5px; transform: scaleX(-1) rotate(-45deg); }
.portal-tribe-portrait i { display: grid; width: 72%; height: 72%; place-items: center; border: 1px solid rgba(246,211,137,.35); border-radius: 50%; color: #ffe4a0; background: radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--tribe-color),#fff 20%),color-mix(in srgb,var(--tribe-color),#050b08 64%)); box-shadow: inset 0 0 0 4px rgba(0,0,0,.24),0 7px 20px rgba(0,0,0,.4); font-family: Georgia,serif; font-size: clamp(37px,4vw,58px); font-style: normal; font-weight: 800; text-shadow: 0 3px 5px rgba(0,0,0,.6); }
.portal-tribe h3 { margin: 0 0 3px; color: #d8ae58; font-family: Georgia,serif; font-size: 17px; text-transform: uppercase; }
.portal-tribe strong { color: #89968d; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.portal-tribe p { max-width: 190px; margin: 7px 0 0; color: #77857c; font-size: 8px; line-height: 1.45; }

.portal-seasons { background: linear-gradient(rgba(5,14,11,.88),rgba(4,12,9,.94)),url("images/travia-public-hero-v3.jpg") center 70%/cover fixed; }
.season-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.season-card { position: relative; display: grid; min-height: 176px; align-content: end; justify-items: center; overflow: hidden; padding: 18px 15px; border: 2px solid #745129; border-radius: 5px; color: #c8c9be; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,221,153,.07),0 12px 26px rgba(0,0,0,.3); text-align: center; }
.season-card::before { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(2,8,5,.05),rgba(2,8,5,.9)); content: ""; }
.season-card > * { position: relative; z-index: 1; }
.season-card > span { color: #f0cb72; font-size: 34px; text-shadow: 0 4px 9px #000; }
.season-card h3 { margin: 3px 0 4px; color: #dec071; font-family: Georgia,serif; font-size: 18px; text-transform: uppercase; }
.season-card p { margin: 0; color: #a5aba1; font-size: 9px; }
.season-card b { position: absolute; z-index: 3; top: 10px; right: -32px; width: 130px; padding: 6px; color: #e8e4d8; background: #33465a; box-shadow: 0 3px 8px rgba(0,0,0,.38); font-size: 7px; letter-spacing: .05em; text-transform: uppercase; transform: rotate(35deg); }
.season-card.spring { background-image: linear-gradient(rgba(69,123,69,.06),rgba(0,0,0,.08)),url("images/season-spring-v1.jpg"); background-position: center; }
.season-card.summer { background-image: linear-gradient(rgba(220,168,60,.04),rgba(0,0,0,.1)),url("images/season-summer-v1.jpg"); background-position: center; }
.season-card.autumn { background-image: linear-gradient(rgba(159,75,24,.12),rgba(0,0,0,.12)),url("images/season-autumn-v1.jpg"); background-position: center; }
.season-card.winter { background-image: linear-gradient(rgba(106,149,184,.22),rgba(9,25,35,.26)),url("images/season-winter-v1.jpg"); background-position: center; }

.portal-benefits { padding-top: 40px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-top: 24px; }
.benefit-grid article { display: flex; align-items: center; gap: 13px; min-height: 100px; padding: 15px; border: 1px solid #5e4325; border-radius: 4px; background: linear-gradient(145deg,#0f1d18,#07110e); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.benefit-grid article > span { display: grid; flex: 0 0 43px; height: 43px; place-items: center; color: #d3aa59; font-size: 25px; }
.benefit-grid article div { display: grid; }
.benefit-grid h3 { margin: 0 0 4px; color: #cba455; font-family: Georgia,serif; font-size: 12px; text-transform: uppercase; }
.benefit-grid p { margin: 0; color: #7f8c83; font-size: 9px; line-height: 1.45; }

.portal-final-cta { padding: 35px 0; border-block: 1px solid #725029; background: radial-gradient(circle at 75% 10%,rgba(206,155,70,.13),transparent 30%),linear-gradient(120deg,#173728,#081511); }
.portal-final-cta > div { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.portal-final-cta span { color: #927a4d; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.portal-final-cta h2 { margin: 4px 0 0; color: #e3c272; font-family: Georgia,serif; font-size: 30px; }
.portal-final-cta .button { border-radius: 4px; font-family: Georgia,serif; text-transform: uppercase; }

.guest-body .site-footer { padding: 32px 0; border-top-color: #5f4324; background: linear-gradient(180deg,#07110e,#030807); }
.guest-body .site-brand-muted { filter: none; opacity: .88; }
.footer-copy { display: grid; justify-items: end; gap: 5px; text-align: right; }
.footer-copy strong { color: #a7884d; font-family: Georgia,serif; font-size: 11px; font-weight: 500; }
.footer-copy p { color: #5e6b63; }

/* Login: black forged-metal panel */
.login-main,
.registration-main {
    min-height: calc(100vh - 72px);
    padding: 74px 0 0;
    background:
        linear-gradient(90deg,rgba(2,8,6,.16),rgba(2,8,6,.03) 55%,rgba(2,8,6,.15)),
        url("images/travia-auth-valley-v1.jpg") center/cover fixed;
}
.login-stage { display: grid; min-height: 630px; place-items: center; padding-bottom: 75px; }
.login-metal-card { position: relative; width: min(520px,100%); padding: 72px 47px 40px; border: 3px solid #815a2d; border-radius: 7px; background: radial-gradient(circle at 50% 0,rgba(45,75,61,.19),transparent 35%),linear-gradient(145deg,rgba(13,27,22,.98),rgba(4,12,10,.98)); box-shadow: inset 0 0 0 1px rgba(247,213,139,.12),inset 0 0 70px rgba(0,0,0,.44),0 26px 70px rgba(0,0,0,.58); text-align: center; }
.login-metal-card::before,.parchment-card::before { position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(211,164,79,.28); border-radius: 3px; content: ""; }
.auth-crest { position: absolute; z-index: 4; top: -59px; left: 50%; display: grid; width: 105px; height: 118px; place-items: center; border: 4px solid #b68742; border-radius: 20px 20px 35px 35px; color: #f1c96f; background: radial-gradient(circle at 38% 24%,rgba(255,255,255,.12),transparent 24%),linear-gradient(145deg,#263c33,#07100e); box-shadow: inset 0 0 0 5px rgba(0,0,0,.45),0 12px 26px rgba(0,0,0,.56); font-family: Georgia,serif; font-size: 65px; font-weight: 800; line-height: 1; text-shadow: 0 4px 4px #000; transform: translateX(-50%); }
.login-metal-card > .eyebrow { margin-bottom: 8px; }
.login-metal-card h1 { margin: 0; color: #f0eadc; font-family: Georgia,serif; font-size: 31px; letter-spacing: .02em; text-transform: uppercase; }
.ornament-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; width: min(250px,80%); margin: 17px auto 27px; }
.ornament-divider span { height: 1px; background: linear-gradient(90deg,transparent,#8f6a36); }
.ornament-divider span:last-child { background: linear-gradient(90deg,#8f6a36,transparent); }
.ornament-divider i { color: #b88a43; font-size: 9px; font-style: normal; }
.auth-fields { gap: 15px; text-align: left; }
.auth-fields label > span { color: #a6aea6; font-size: 10px; letter-spacing: .04em; }
.auth-input { position: relative; }
.auth-input i { position: absolute; z-index: 1; top: 50%; left: 14px; color: #b8a47a; font-size: 17px; font-style: normal; transform: translateY(-50%); }
.auth-input input { height: 50px; padding-left: 44px; border: 1px solid #655234; border-radius: 4px; color: #eee9dd; background: rgba(2,9,7,.74); }
.auth-input input:focus { border-color: #c1944a; }
.auth-fields .button { margin-top: 5px; border-radius: 4px; font-family: Georgia,serif; font-size: 18px; text-transform: uppercase; }
.auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 25px 0 8px; }
.auth-or span { height: 1px; background: linear-gradient(90deg,transparent,#5d4a2e); }
.auth-or span:last-child { background: linear-gradient(90deg,#5d4a2e,transparent); }
.auth-or b { color: #7f887f; font-size: 9px; letter-spacing: .12em; }
.login-metal-card .form-footnote { margin-top: 18px; color: #a3aba3; }
.login-metal-card .form-footnote a { color: #d9b35f; text-transform: uppercase; }

.auth-benefit-strip { width: 100%; padding: 24px 0 28px; border-top: 2px solid #6d4d28; background: rgba(3,11,8,.96); box-shadow: 0 -12px 35px rgba(0,0,0,.35); }
.auth-benefit-strip > div { display: grid; grid-template-columns: repeat(4,1fr); }
.auth-benefit-strip article { display: grid; justify-items: center; padding: 0 22px; border-right: 1px solid rgba(207,158,75,.16); text-align: center; }
.auth-benefit-strip article:last-child { border: 0; }
.auth-benefit-strip article > span { color: #d8ac58; font-size: 31px; }
.auth-benefit-strip h3 { margin: 7px 0 5px; color: #d1a958; font-family: Georgia,serif; font-size: 12px; text-transform: uppercase; }
.auth-benefit-strip p { margin: 0; color: #818e85; font-size: 9px; }

/* Register: old parchment over the same illustrated world */
.registration-main { padding: 96px 0 90px; }
.register-shell { max-width: 900px; }
.parchment-card { position: relative; display: grid; gap: 0; padding: 72px 54px 42px; border: 4px solid #8d693d; border-radius: 6px; color: #332b1d; background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.32),transparent 22%),radial-gradient(circle at 88% 84%,rgba(116,74,31,.1),transparent 26%),repeating-linear-gradient(0deg,rgba(102,67,30,.018) 0 1px,transparent 1px 4px),#eadfc7; box-shadow: inset 0 0 0 2px #c3a674,inset 0 0 75px rgba(94,57,24,.16),0 28px 75px rgba(0,0,0,.55); color-scheme: light; }
.parchment-card::before { border-color: rgba(86,57,28,.32); }
.parchment-crest { top: -62px; color: #e4bb61; }
.parchment-heading { position: relative; z-index: 2; text-align: center; }
.parchment-heading > span { color: #8a642e; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.parchment-heading h1 { margin: 7px 0 0; color: #2e291f; font-family: Georgia,serif; font-size: clamp(31px,4vw,45px); text-transform: uppercase; }
.parchment-heading .ornament-divider { margin: 12px auto 10px; }
.parchment-heading .ornament-divider span { background: linear-gradient(90deg,transparent,#8b6537); }
.parchment-heading .ornament-divider span:last-child { background: linear-gradient(90deg,#8b6537,transparent); }
.parchment-heading p { margin: 0 0 20px; color: #756b58; font-size: 11px; }
.parchment-card .alert { position: relative; z-index: 2; margin-bottom: 14px; }
.parchment-section { position: relative; z-index: 2; padding: 20px 0; border-top: 1px solid rgba(95,65,32,.25); }
.parchment-section h2 { color: #3a3122; font-family: Georgia,serif; font-size: 20px; text-align: center; text-transform: uppercase; }
.account-section h2 { margin-bottom: 14px; }
.parchment-card label { color: #514837; }
.parchment-card input,.parchment-card select { color: #362f24; border-color: #a89473; background: rgba(250,245,232,.57); box-shadow: inset 0 2px 5px rgba(74,47,21,.09); }
.parchment-card input:focus { border-color: #755c35; box-shadow: 0 0 0 3px rgba(113,82,39,.12); }
.parchment-title-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 15px; }
.parchment-title-row span { height: 1px; background: linear-gradient(90deg,transparent,#8b6537); }
.parchment-title-row span:last-child { background: linear-gradient(90deg,#8b6537,transparent); }
.parchment-title-row h2 { margin: 0; }

.tapestry-grid { gap: 8px; }
.tapestry-choice { position: relative; display: grid; min-height: 205px; align-content: end; justify-items: center; overflow: hidden; padding: 18px 8px 13px; border: 2px solid #907044; border-radius: 5px 5px 12px 12px; color: #f4e5c2; background: linear-gradient(180deg,rgba(255,255,255,.13),transparent 25%,rgba(0,0,0,.28)),var(--tribe-color); box-shadow: inset 0 0 0 2px rgba(255,224,157,.13),0 8px 15px rgba(68,43,19,.2); text-align: center; }
.tapestry-choice::before { position: absolute; inset: 7px 7px 33px; border: 1px solid rgba(255,225,161,.22); border-radius: 3px; content: ""; }
.tapestry-choice::after { position: absolute; top: 14px; color: rgba(255,227,170,.32); font-family: Georgia,serif; font-size: 36px; content: "✦"; }
.tapestry-choice .tribe-emblem { position: relative; z-index: 2; width: 73px; height: 73px; margin: 0 0 14px; border: 2px solid #c8a460; color: #ffe4a6; background: rgba(20,17,12,.67); box-shadow: inset 0 0 0 4px rgba(255,255,255,.06),0 7px 14px rgba(0,0,0,.3); font-size: 32px; }
.tapestry-choice strong { position: relative; z-index: 2; color: #fff0c7; font-family: Georgia,serif; font-size: 13px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.tapestry-choice > small { position: relative; z-index: 2; color: rgba(255,240,203,.7); font-size: 7px; text-transform: uppercase; }
.tapestry-choice .choice-check { z-index: 4; top: auto; right: 50%; bottom: 7px; display: grid; width: 19px; height: 19px; border: 2px solid #e9d5a7; color: transparent; background: rgba(18,14,9,.42); transform: translateX(50%); }
.tapestry-choice:has(input:checked) { border-color: #f1ce7d; box-shadow: inset 0 0 0 2px rgba(255,231,174,.2),0 0 0 3px rgba(118,83,39,.23),0 8px 16px rgba(68,43,19,.25); }
.tapestry-choice:has(input:checked) .choice-check { color: #fff0bd; background: #4f6b2c; }
.parchment-help { margin: -5px 0 13px; color: #756b58; font-size: 10px; text-align: center; }
.parchment-quadrants span { min-height: 49px; color: #4f4738; border-color: #aa9470; background: rgba(248,242,228,.55); }
.parchment-quadrants .quadrant-choice:has(input:checked) span { color: #f6e7bc; border-color: #5d6e36; background: linear-gradient(#5d7c36,#344c24); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.rules-check { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 7px 0 19px; padding: 12px; border: 1px solid rgba(105,72,34,.22); border-radius: 4px; background: rgba(255,250,237,.34); }
.rules-check input { width: 19px; min-height: 19px; flex: 0 0 19px; margin: 0; accent-color: #4e6c2e; }
.rules-check span { color: #645a48; font-size: 10px; font-weight: 600; }
.parchment-card > .button { position: relative; z-index: 2; width: min(430px,100%); margin-inline: auto; border-radius: 4px; font-family: Georgia,serif; font-size: 18px; text-transform: uppercase; }
.parchment-card .form-footnote { position: relative; z-index: 2; color: #6d624f; }
.parchment-card .form-footnote a { color: #486328; font-weight: 800; text-transform: uppercase; }

@media (max-width: 1000px) {
    .portal-hero-copy { width: min(620px,67%); }
    .game-feature-grid,.season-grid,.benefit-grid { grid-template-columns: repeat(2,1fr); }
    .portal-tribe-grid { grid-template-columns: repeat(5,minmax(110px,1fr)); overflow-x: auto; padding: 5px 3px 14px; scrollbar-color: #6f502a transparent; }
    .portal-tribe { min-width: 145px; }
}

@media (max-width: 900px) {
    .guest-body .site-header { height: var(--header-height); }
    .guest-body .guest-nav { gap: 6px; }
    .guest-body .guest-nav > a:not(.button) { display: none; }
    .guest-body .guest-nav .button { padding-inline: 12px; }
    .portal-hero { min-height: 690px; background-position: 61% center; }
    .portal-hero-shade { background: linear-gradient(90deg,rgba(1,7,5,.9),rgba(2,8,6,.63) 63%,rgba(2,8,6,.25)),linear-gradient(180deg,rgba(2,8,6,.15),transparent 45%,rgba(2,8,6,.9)); }
    .portal-hero-copy { width: min(600px,82%); }
    .portal-hero-copy h1 { font-size: clamp(45px,8vw,67px); }
    .login-main,.registration-main { min-height: calc(100vh - var(--header-height)); padding-top: 72px; background-attachment: scroll; }
    .login-stage { min-height: 600px; }
}

@media (max-width: 620px) {
    .guest-body .header-inner { gap: 8px; }
    .guest-body .site-brand { gap: 7px; }
    .guest-body .site-brand strong { font-size: 17px; }
    .guest-body .site-brand small { display: none; }
    .guest-body .brand-mark { width: 34px; height: 37px; font-size: 20px; }
    .guest-body .guest-nav .button { min-height: 33px; padding: 7px 9px; font-size: 9px; }
    .portal-hero { min-height: 650px; background-position: 61% center; }
    .portal-hero-inner { align-items: flex-start; padding-top: 47px; padding-bottom: 56px; }
    .portal-hero-copy { width: 100%; }
    .portal-kicker { max-width: 290px; font-size: 8px; line-height: 1.5; }
    .portal-hero-copy h1 { max-width: 360px; font-size: clamp(40px,12vw,56px); line-height: .92; }
    .portal-hero-copy > p { max-width: 330px; font-size: 12px; }
    .portal-hero-actions { display: grid; max-width: 330px; grid-template-columns: 1fr 1fr; }
    .portal-hero-actions .button { width: auto; min-width: 0; min-height: 43px; padding: 10px; font-size: 10px; }
    .server-scroll { max-width: 330px; grid-template-columns: repeat(2,1fr); }
    .server-scroll > div:nth-child(2) { border-right: 0; }
    .server-scroll > div:nth-child(-n+2) { border-bottom: 1px solid rgba(210,162,77,.18); }
    .portal-section { padding: 39px 0; }
    .portal-section-title { gap: 9px; }
    .portal-section-title h2 { font-size: 21px; letter-spacing: .05em; }
    .portal-section-lead { margin-bottom: 19px; font-size: 10px; }
    .game-feature-grid,.season-grid,.benefit-grid { gap: 8px; }
    .feature-art { min-height: 116px; }
    .feature-art span { width: 46px; height: 46px; font-size: 20px; }
    .game-feature-card > div:last-child { min-height: 116px; padding: 12px 9px; }
    .game-feature-card h3 { font-size: 11px; }
    .game-feature-card p { font-size: 8px; }
    .portal-tribe-grid { margin-right: -11px; margin-left: -11px; padding-inline: 11px; }
    .season-card { min-height: 152px; padding: 13px 8px; }
    .season-card h3 { font-size: 13px; }
    .season-card p { font-size: 8px; }
    .benefit-grid article { min-height: 100px; gap: 6px; padding: 10px 8px; }
    .benefit-grid article > span { flex-basis: 30px; height: 30px; font-size: 20px; }
    .benefit-grid h3 { font-size: 9px; }
    .benefit-grid p { font-size: 7px; }
    .portal-final-cta > div { align-items: stretch; flex-direction: column; text-align: center; }
    .portal-final-cta h2 { font-size: 24px; }
    .footer-inner { align-items: center; flex-direction: column; }
    .footer-copy { justify-items: center; text-align: center; }
    .login-main { padding-top: 62px; }
    .login-stage { min-height: 590px; padding-bottom: 58px; }
    .login-metal-card { padding: 65px 20px 30px; }
    .auth-crest { top: -50px; width: 87px; height: 98px; font-size: 53px; }
    .login-metal-card h1 { font-size: 24px; }
    .auth-benefit-strip > div { grid-template-columns: repeat(2,1fr); gap: 20px 0; }
    .auth-benefit-strip article:nth-child(2) { border-right: 0; }
    .registration-main { padding: 86px 0 70px; }
    .parchment-card { padding: 63px 18px 29px; }
    .parchment-heading h1 { font-size: 29px; }
    .parchment-card .two-columns { grid-template-columns: 1fr; }
    .tapestry-grid { display: flex; overflow-x: auto; padding: 3px 3px 12px; scrollbar-color: #806039 rgba(255,255,255,.18); }
    .tapestry-choice { flex: 0 0 128px; min-height: 190px; }
    .parchment-quadrants { grid-template-columns: repeat(2,1fr); }
    .parchment-quadrants > label:first-child { grid-column: 1 / 3; }
}

/* --------------------------------------------------------------------------
   Travia 1.3 — reference-match pass
   Keeps the game shell intact and tightens only the public/auth experience.
   -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.guest-body,
.guest-body main,
.guest-body section,
.guest-body .site-container {
    min-width: 0;
}

.guest-body .site-container {
    width: min(1220px, calc(100% - 32px));
}

.guest-body .site-header {
    height: 68px;
}

.guest-body .site-brand strong {
    font-size: 23px;
    letter-spacing: .055em;
}

.guest-body .site-brand small {
    letter-spacing: .12em;
}

.guest-body .brand-mark {
    width: 42px;
    height: 46px;
    border-width: 2px;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.06), 0 5px 16px rgba(0,0,0,.48);
}

.portal-hero {
    min-height: clamp(540px, 68vh, 680px);
    background-position: 52% 48%;
}

.portal-hero-shade {
    background:
        linear-gradient(90deg,rgba(1,7,5,.95) 0%,rgba(2,10,7,.79) 31%,rgba(3,10,7,.28) 58%,rgba(1,6,4,.05) 78%),
        linear-gradient(180deg,rgba(3,9,7,.12),transparent 48%,rgba(2,8,6,.86));
}

.portal-hero-inner {
    padding-block: 44px 58px;
}

.portal-hero-copy {
    width: min(610px, 53%);
}

.portal-kicker {
    margin-bottom: 12px;
    font-size: 9px;
}

.portal-hero-copy h1 {
    display: grid;
    gap: 0;
    max-width: none;
    margin-bottom: 15px;
    font-size: clamp(40px, 4.2vw, 61px);
    line-height: .92;
}

.portal-hero-copy h1 span {
    display: block;
    white-space: nowrap;
}

.portal-hero-copy h1 span:last-child {
    color: #f1d891;
}

.portal-hero-copy > p {
    max-width: 505px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
}

.portal-hero-actions .button {
    min-width: 142px;
    min-height: 43px;
    padding-block: 10px;
    font-size: 11px;
}

.server-scroll {
    max-width: 560px;
    margin-top: 14px;
}

.server-scroll > div {
    padding-block: 9px;
}

.portal-section {
    padding: 40px 0;
}

.portal-section-title h2 {
    font-size: clamp(23px, 2.4vw, 31px);
}

.portal-section-lead {
    margin-bottom: 21px;
}

.feature-art {
    isolation: isolate;
    background: #0b1511;
}

.feature-art img {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1.015);
    transition: transform .35s ease;
}

.game-feature-card:hover .feature-art img {
    transform: scale(1.055);
}

.feature-resources .feature-art,
.feature-village .feature-art,
.feature-army .feature-art,
.feature-conquest .feature-art {
    background-image: none;
    background-position: center;
}

.feature-art::after {
    z-index: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.02),rgba(2,8,5,.56));
}

.feature-art span {
    z-index: 1;
}

.portal-tribe-grid {
    align-items: start;
}

.portal-tribe {
    transition: color .18s ease, transform .18s ease;
}

.portal-tribe-portrait {
    isolation: isolate;
    overflow: visible;
    background: #08120f;
}

.portal-tribe-portrait img {
    position: absolute;
    z-index: -1;
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 28%;
    filter: saturate(.86) contrast(1.03) brightness(.9);
}

.portal-tribe-portrait::before,
.portal-tribe-portrait::after {
    z-index: 2;
}

.portal-tribe-portrait i {
    display: none;
}

.portal-seasons {
    background-attachment: scroll;
}

/* Auth pages: fixed-width panels without page-level horizontal overflow. */
.login-main,
.registration-main {
    overflow: hidden;
}

.login-stage,
.register-shell {
    min-width: 0;
}

.login-stage {
    width: min(1180px, calc(100% - 32px));
}

.login-metal-card {
    width: min(500px, 100%);
    max-width: 100%;
    min-width: 0;
}

.register-shell {
    width: min(900px, calc(100% - 28px));
    max-width: 900px;
    min-width: 0;
}

.parchment-card,
.parchment-section,
.parchment-card .form-grid,
.parchment-card label,
.parchment-card input,
.parchment-card select,
.tapestry-grid,
.parchment-quadrants {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.parchment-card > * {
    max-width: 100%;
    min-width: 0;
}

.parchment-card > .auth-crest {
    width: 105px;
    max-width: 105px;
    min-width: 105px;
}

.parchment-card .two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parchment-section {
    overflow: hidden;
}

.tapestry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
    padding: 0;
}

.tapestry-choice {
    width: 100%;
    min-width: 0;
    min-height: 220px;
    align-content: end;
    padding: 8px 7px 22px;
}

.tapestry-choice::before {
    inset: 6px 6px 34px;
}

.tapestry-choice::after {
    content: none;
}

.tapestry-portrait {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% - 8px);
    max-width: 112px;
    aspect-ratio: 4 / 5;
    margin: 0 auto 10px;
    overflow: hidden;
    border: 1px solid rgba(255,225,161,.48);
    border-radius: 3px;
    background: rgba(8,12,9,.35);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 6px 13px rgba(0,0,0,.24);
}

.tapestry-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 22%;
    filter: saturate(.78) contrast(1.04) brightness(.82);
}

.tapestry-choice strong,
.tapestry-choice > small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parchment-card input,
.parchment-card select {
    display: block;
}

@media (max-width: 1000px) {
    .portal-hero-copy {
        width: min(560px, 64%);
    }

    .portal-tribe-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
        padding: 0;
    }

    .portal-tribe {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .portal-hero {
        min-height: 590px;
        background-position: 61% center;
    }

    .portal-hero-copy {
        width: min(510px, 76%);
    }

    .portal-hero-copy h1 {
        font-size: clamp(37px, 6.7vw, 55px);
    }
}

@media (max-width: 620px) {
    .guest-body .site-container {
        width: min(100% - 20px, 1220px);
    }

    .guest-body .site-header {
        height: 64px;
    }

    .guest-body .header-inner {
        gap: 6px;
    }

    .guest-body .site-brand {
        gap: 6px;
    }

    .guest-body .site-brand strong {
        font-size: clamp(13px, 4.15vw, 16px);
        letter-spacing: .035em;
    }

    .guest-body .brand-mark {
        width: 32px;
        height: 37px;
        font-size: 20px;
    }

    .guest-body .guest-nav {
        gap: 4px;
    }

    .guest-body .guest-nav .button {
        min-height: 32px;
        padding: 6px clamp(6px, 2.2vw, 9px);
        font-size: clamp(7px, 2.3vw, 9px);
    }

    .portal-hero {
        min-height: 470px;
        background-position: 62% center;
    }

    .portal-hero-inner {
        align-items: flex-start;
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .portal-hero-copy {
        width: 100%;
    }

    .portal-kicker {
        max-width: 280px;
        margin-bottom: 12px;
        font-size: 7px;
    }

    .portal-hero-copy h1 {
        width: fit-content;
        max-width: 100%;
        margin-bottom: 14px;
        font-size: clamp(28px, 8.75vw, 36px);
        line-height: .94;
        letter-spacing: -.035em;
    }

    .portal-hero-copy > p {
        max-width: 315px;
        margin-bottom: 16px;
        font-size: 10.5px;
        line-height: 1.48;
    }

    .portal-hero-actions {
        max-width: 315px;
        gap: 7px;
    }

    .portal-hero-actions .button {
        min-height: 40px;
        font-size: 9px;
    }

    .server-scroll {
        max-width: 315px;
        margin-top: 12px;
    }

    .server-scroll > div {
        padding: 8px 7px;
    }

    .portal-section {
        padding: 32px 0;
    }

    .portal-section-title h2 {
        font-size: clamp(18px, 5.7vw, 22px);
        letter-spacing: .045em;
    }

    .portal-section-lead {
        margin-top: 7px;
        margin-bottom: 16px;
        font-size: 9px;
    }

    .game-feature-grid,
    .season-grid,
    .benefit-grid {
        gap: 7px;
    }

    .feature-art {
        min-height: 108px;
    }

    .feature-art span {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }

    .game-feature-card > div:last-child {
        min-height: 104px;
        padding: 11px 7px 12px;
    }

    .game-feature-card h3 {
        margin-bottom: 5px;
        font-size: 10px;
        line-height: 1.15;
    }

    .game-feature-card p {
        font-size: 7.5px;
        line-height: 1.45;
    }

    .portal-tribe-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        margin: 0;
        overflow: visible;
        padding: 0;
    }

    .portal-tribe {
        min-width: 0;
        padding: 2px 1px 0;
    }

    .portal-tribe-portrait {
        width: min(15.5vw, 58px);
        height: min(15.5vw, 58px);
        margin-bottom: 7px;
        border-width: 2px;
    }

    .portal-tribe-portrait img {
        inset: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

    .portal-tribe-portrait::before,
    .portal-tribe-portrait::after {
        bottom: -4px;
        font-size: 18px;
    }

    .portal-tribe-portrait::before {
        left: -2px;
    }

    .portal-tribe-portrait::after {
        right: -2px;
    }

    .portal-tribe h3 {
        margin-bottom: 2px;
        font-size: clamp(7px, 2.25vw, 9px);
        letter-spacing: -.02em;
    }

    .portal-tribe strong {
        font-size: 5.8px;
        letter-spacing: .025em;
    }

    .portal-tribe p {
        display: none;
    }

    .season-card {
        min-height: 142px;
    }

    .login-main {
        padding-top: 72px;
    }

    .login-stage {
        width: calc(100% - 20px);
        min-height: 560px;
        place-items: start center;
    }

    .login-metal-card {
        padding-inline: 18px;
    }

    .registration-main {
        padding: 80px 0 55px;
    }

    .register-shell {
        width: calc(100% - 16px);
        margin-inline: auto;
    }

    .parchment-card {
        width: 100%;
        padding: 58px 13px 25px;
        border-width: 3px;
    }

    .parchment-card > .auth-crest {
        width: 87px;
        max-width: 87px;
        min-width: 87px;
    }

    .parchment-card::before {
        inset: 6px;
    }

    .parchment-heading h1 {
        font-size: clamp(22px, 7.4vw, 29px);
        line-height: 1;
    }

    .parchment-heading p {
        font-size: 9px;
    }

    .parchment-card .two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .parchment-section {
        padding: 16px 0;
    }

    .parchment-section h2 {
        font-size: 16px;
    }

    .tapestry-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        overflow: hidden;
        padding: 0;
    }

    .tapestry-choice {
        flex: initial;
        min-height: 133px;
        padding: 4px 2px 18px;
        border-width: 1px;
    }

    .tapestry-choice::before {
        inset: 3px 3px 25px;
    }

    .tapestry-portrait {
        width: calc(100% - 4px);
        max-width: none;
        margin-bottom: 5px;
        border-radius: 2px;
    }

    .tapestry-choice strong {
        font-size: clamp(5.5px, 1.8vw, 7px);
        letter-spacing: -.02em;
    }

    .tapestry-choice > small {
        display: none;
    }

    .tapestry-choice .choice-check {
        bottom: 3px;
        width: 15px;
        height: 15px;
        border-width: 1px;
        font-size: 8px;
    }

    .parchment-quadrants {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parchment-card > .button {
        font-size: 16px;
    }
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   Travia 1.4 — compact reference composition
   Public pages deliberately use a 1180px presentation canvas on phones so the
   complete medieval portal keeps the dense proportions of the supplied art.
   The authenticated game shell remains responsive and is not affected.
   -------------------------------------------------------------------------- */

body.guest-body {
    min-width: 1080px;
    color: #d5c8aa;
    background: #020a08;
}

.guest-body .site-container {
    width: min(1120px, calc(100% - 44px));
}

.guest-body .site-header {
    height: 70px;
    border-bottom: 2px solid #6f4c24;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 54%),
        linear-gradient(90deg, #050d0c, #0c1715 46%, #050c0b);
}

.guest-body .header-inner {
    gap: 28px;
}

.guest-body .site-brand {
    gap: 10px;
}

.guest-body .site-brand strong {
    color: #d9ad59;
    font-size: 25px;
    letter-spacing: .07em;
}

.guest-body .site-brand small {
    display: block;
    color: #7b6741;
    font-size: 7px;
}

.guest-body .brand-mark {
    width: 44px;
    height: 49px;
    border: 2px solid #ae7d38;
    border-radius: 9px 9px 17px 17px;
    color: #e8c36d;
    background: radial-gradient(circle at 35% 22%, rgba(255,255,255,.13), transparent 25%), linear-gradient(145deg, #243d33, #06100e);
    font-size: 27px;
}

.guest-body .guest-nav {
    gap: 23px;
}

.guest-body .guest-nav > a:not(.button) {
    display: inline-flex;
    color: #b6b7ad;
    font-size: 10px;
    letter-spacing: .04em;
}

.guest-body .guest-nav .button {
    min-height: 33px;
    padding: 7px 15px;
    border-radius: 3px;
    font-size: 10px;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #73522d;
    border-radius: 4px;
    color: #a99d84;
    font-family: Georgia, serif;
    font-size: 10px;
}

.language-switch b,
.language-switch i {
    padding: 8px 7px;
    font-style: normal;
}

.language-switch b {
    color: #efc96f;
    background: rgba(184, 126, 43, .15);
}

.portal-hero {
    min-height: 470px;
    border-bottom: 2px solid #765128;
    background: #050d0a url("images/travia-public-hero-v3.jpg") center 49% / cover no-repeat;
}

.portal-hero-shade {
    background:
        linear-gradient(90deg, rgba(1,7,5,.93) 0%, rgba(2,9,7,.72) 30%, rgba(2,8,6,.16) 57%, transparent 78%),
        linear-gradient(180deg, rgba(2,8,6,.06), transparent 60%, rgba(1,7,5,.72));
}

.portal-hero-inner {
    min-height: 470px;
    align-items: center;
    padding: 34px 0 28px;
}

.portal-hero-copy {
    width: 515px;
}

.portal-kicker {
    margin-bottom: 10px;
    color: #caa054;
    font-size: 9px;
    letter-spacing: .19em;
}

.portal-hero-copy h1 {
    gap: 0;
    margin-bottom: 13px;
    color: #ddb45e;
    font-size: 47px;
    line-height: .9;
    letter-spacing: -.018em;
}

.portal-hero-copy h1 span:last-child {
    color: #e8c66f;
}

.portal-hero-copy > p {
    max-width: 455px;
    margin-bottom: 16px;
    color: #c2bda9;
    font-size: 12px;
    line-height: 1.48;
}

.portal-hero-actions {
    gap: 9px;
}

.portal-hero-actions .button {
    min-width: 154px;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 10px;
}

.server-scroll {
    max-width: 535px;
    margin-top: 12px;
    grid-template-columns: repeat(4, 1fr);
    border-color: #684822;
    background: rgba(3, 12, 9, .84);
}

.server-scroll > div {
    min-height: 47px;
    grid-template-columns: 23px 1fr;
    padding: 7px 8px;
}

.server-scroll span {
    font-size: 15px;
}

.server-scroll small {
    font-size: 6px;
}

.server-scroll strong {
    font-size: 8px;
}

.portal-section {
    border-bottom: 1px solid rgba(177, 124, 49, .25);
}

.portal-features {
    padding: 17px 0 18px;
}

.game-feature-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.game-feature-card {
    border-color: #745027;
    border-radius: 3px;
}

.feature-art {
    min-height: 124px;
}

.feature-art span {
    width: 49px;
    height: 49px;
    border-width: 2px;
    font-size: 21px;
}

.game-feature-card > div:last-child {
    min-height: 68px;
    padding: 10px 10px 11px;
}

.game-feature-card h3 {
    margin-bottom: 4px;
    font-size: 12px;
}

.game-feature-card p {
    font-size: 8px;
    line-height: 1.38;
}

.portal-tribes {
    padding: 13px 0 15px;
}

.portal-section-title {
    gap: 13px;
    max-width: 640px;
}

.portal-section-title h2 {
    font-size: 24px;
    letter-spacing: .085em;
}

.portal-tribes .portal-section-lead {
    display: none;
}

.portal-tribe-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 980px;
    margin: 10px auto 0;
    overflow: visible;
    padding: 0;
}

.portal-tribe {
    min-width: 0;
    padding: 0 7px;
}

.portal-tribe-portrait {
    width: 106px;
    height: 106px;
    margin-bottom: 8px;
    border-width: 3px;
}

.portal-tribe-portrait img {
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.portal-tribe-portrait::before,
.portal-tribe-portrait::after {
    bottom: -7px;
    font-size: 31px;
}

.portal-tribe h3 {
    margin-bottom: 2px;
    font-size: 13px;
}

.portal-tribe strong {
    font-size: 7px;
}

.portal-tribe p {
    max-width: 160px;
    margin-top: 5px;
    font-size: 7px;
    line-height: 1.35;
}

.portal-seasons {
    padding: 15px 0 17px;
    background: linear-gradient(rgba(4,13,10,.85), rgba(3,10,8,.93)), url("images/travia-public-hero-v3.jpg") center 70% / cover no-repeat;
}

.portal-section-lead {
    margin: 6px auto 14px;
    font-size: 9px;
}

.season-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.season-card {
    min-height: 139px;
    padding: 12px 10px;
    border-radius: 3px;
}

.season-card > span {
    font-size: 27px;
}

.season-card h3 {
    margin: 1px 0 3px;
    font-size: 14px;
}

.season-card p {
    font-size: 8px;
}

.portal-benefits {
    padding: 14px 0 16px;
}

.portal-benefits .portal-section-title h2 {
    font-size: 22px;
}

.benefit-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    margin-top: 13px;
}

.benefit-grid article {
    min-height: 74px;
    gap: 9px;
    padding: 10px 11px;
    border-radius: 3px;
}

.benefit-grid article > span {
    flex-basis: 34px;
    height: 34px;
    font-size: 21px;
}

.benefit-grid h3 {
    margin-bottom: 3px;
    font-size: 10px;
}

.benefit-grid p {
    font-size: 7px;
    line-height: 1.35;
}

.guest-body .site-footer {
    padding: 18px 0 8px;
    border-top: 1px solid #5f4121;
    background: linear-gradient(180deg, #07110e, #020706);
}

.guest-body .footer-inner {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr .8fr;
    align-items: start;
    gap: 40px;
}

.footer-brand-block p {
    margin: 8px 0 0;
    color: #806e4d;
    font-family: Georgia, serif;
    font-size: 9px;
    line-height: 1.45;
}

.footer-nav,
.footer-social {
    display: grid;
    align-content: start;
    gap: 5px;
}

.footer-nav b,
.footer-social b {
    margin-bottom: 2px;
    color: #b18a47;
    font-family: Georgia, serif;
    font-size: 9px;
    text-transform: uppercase;
}

.footer-nav a {
    color: #718078;
    font-size: 7px;
}

.footer-social {
    grid-template-columns: repeat(3, 24px);
}

.footer-social b {
    grid-column: 1 / 4;
}

.footer-social span {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid #6d5939;
    border-radius: 50%;
    color: #c4a25e;
    font-size: 9px;
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 7px;
    border-top: 1px solid rgba(156, 111, 49, .14);
    color: #4e5a53;
    font-size: 6px;
}

/* Authentication pages */
.login-main,
.registration-main {
    min-height: 760px;
    padding: 83px 0 58px;
    background:
        linear-gradient(90deg, rgba(3,9,7,.12), rgba(3,9,7,.02) 55%, rgba(3,9,7,.1)),
        url("images/travia-auth-valley-v1.jpg") center / cover no-repeat;
}

.login-stage {
    width: min(1120px, calc(100% - 44px));
    min-height: 620px;
    place-items: center;
    padding: 0;
}

.login-metal-card {
    width: 580px;
    padding: 76px 48px 38px;
    border-color: #835c2e;
    border-radius: 3px;
    background: radial-gradient(circle at 50% 0, rgba(49,84,66,.17), transparent 35%), linear-gradient(145deg, rgba(15,28,24,.985), rgba(4,11,10,.99));
}

.login-metal-card h1 {
    font-size: 30px;
}

.login-metal-card .button-primary,
.parchment-card .button-primary {
    color: #f1e0ae;
    background: linear-gradient(#466f29, #254615);
}

.auth-benefit-strip {
    padding: 23px 0 25px;
}

.auth-benefit-strip > div {
    grid-template-columns: repeat(4, 1fr);
}

.registration-main {
    padding-top: 92px;
}

.register-shell {
    width: 740px;
    max-width: 740px;
}

.parchment-card {
    width: 740px;
    padding: 67px 37px 27px;
    border-width: 4px;
}

.parchment-card > .auth-crest {
    width: 105px;
    max-width: 105px;
    min-width: 105px;
}

.parchment-heading h1 {
    font-size: 34px;
}

.parchment-heading p {
    margin-bottom: 15px;
    font-size: 9px;
}

.parchment-section {
    padding: 14px 0;
}

.parchment-section h2 {
    font-size: 17px;
}

.account-section h2 {
    margin-bottom: 10px;
}

.parchment-card .two-columns {
    grid-template-columns: 1fr;
    gap: 8px;
}

.parchment-card label {
    gap: 4px;
    font-size: 10px;
}

.parchment-card input,
.parchment-card select {
    min-height: 42px;
    padding-block: 8px;
    font-size: 11px;
}

.parchment-title-row {
    margin-bottom: 10px;
}

.tapestry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 0;
}

.tapestry-choice {
    min-height: 177px;
    padding: 7px 5px 20px;
    border-width: 2px;
    border-radius: 3px 3px 9px 9px;
}

.tapestry-choice::before {
    inset: 5px 5px 29px;
}

.tapestry-portrait {
    width: 87px;
    height: 105px;
    max-width: 87px;
    aspect-ratio: auto;
    margin-bottom: 8px;
}

.tapestry-choice strong {
    font-size: 9px;
}

.tapestry-choice > small {
    display: block;
    font-size: 6px;
}

.tapestry-choice .choice-check {
    bottom: 4px;
    width: 16px;
    height: 16px;
    font-size: 8px;
}

.parchment-help {
    margin-bottom: 10px;
    font-size: 8px;
}

.parchment-quadrants {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.parchment-quadrants > label:first-child {
    grid-column: 1 / 3;
}

.parchment-quadrants span {
    min-height: 39px;
    font-size: 10px;
}

.rules-check {
    margin: 5px 0 13px;
    padding: 10px;
}

.rules-check span {
    font-size: 9px;
}

.parchment-card > .button {
    width: 430px;
    min-height: 47px;
    font-size: 16px;
}

.parchment-card .form-footnote {
    margin-top: 13px;
    font-size: 9px;
}

/* --------------------------------------------------------------------------
   Travia 1.5 — responsive public portal
   Desktop keeps the approved compact composition. Tablet and phone layouts
   reflow the same visual system instead of shrinking a fixed desktop canvas.
   -------------------------------------------------------------------------- */

body.guest-body {
    min-width: 0;
}

@media (max-width: 1050px) {
    .guest-body .site-container {
        width: min(920px, calc(100% - 32px));
    }

    .guest-body .guest-nav {
        margin-left: auto;
        gap: 8px;
    }

    .guest-body .guest-nav > a:not(.button),
    .guest-body .language-switch {
        display: none;
    }

    .portal-hero,
    .portal-hero-inner {
        min-height: 600px;
    }

    .portal-hero {
        background-position: 62% center;
    }

    .portal-hero-shade {
        background:
            linear-gradient(90deg, rgba(1,7,5,.94) 0%, rgba(2,9,7,.73) 42%, rgba(2,8,6,.2) 76%),
            linear-gradient(180deg, rgba(2,8,6,.08), transparent 58%, rgba(1,7,5,.82));
    }

    .portal-hero-copy {
        width: min(535px, 66%);
    }

    .game-feature-grid,
    .season-grid,
    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-tribe-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .portal-tribe-portrait {
        width: 94px;
        height: 94px;
    }

    .guest-body .footer-inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 28px;
    }

    .footer-social {
        grid-column: 3;
    }

    .login-stage {
        width: min(920px, calc(100% - 32px));
    }

    .register-shell,
    .parchment-card {
        width: min(740px, 100%);
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .guest-body .site-container {
        width: min(100% - 24px, 620px);
    }

    .guest-body .site-header {
        height: 72px;
    }

    .guest-body .header-inner {
        gap: 7px;
    }

    .guest-body .site-brand {
        gap: 6px;
    }

    .guest-body .brand-mark {
        width: 35px;
        height: 40px;
        border-width: 2px;
        border-radius: 7px 7px 13px 13px;
        font-size: 21px;
    }

    .guest-body .site-brand strong {
        font-size: clamp(15px, 4.5vw, 19px);
        letter-spacing: .035em;
    }

    .guest-body .site-brand small {
        display: none;
    }

    .guest-body .guest-nav {
        gap: 5px;
    }

    .guest-body .guest-nav .button {
        min-height: 35px;
        padding: 7px clamp(7px, 2.2vw, 11px);
        font-size: clamp(8px, 2.35vw, 10px);
    }

    .portal-hero,
    .portal-hero-inner {
        min-height: 590px;
    }

    .portal-hero {
        background-position: 65% center;
    }

    .portal-hero-shade {
        background:
            linear-gradient(90deg, rgba(1,7,5,.96) 0%, rgba(2,9,7,.78) 56%, rgba(2,8,6,.24) 100%),
            linear-gradient(180deg, rgba(2,8,6,.12), transparent 46%, rgba(1,7,5,.9));
    }

    .portal-hero-inner {
        align-items: flex-start;
        padding: 40px 0 30px;
    }

    .portal-hero-copy {
        width: 100%;
    }

    .portal-kicker {
        max-width: 330px;
        margin-bottom: 13px;
        font-size: 11px;
        line-height: 1.45;
    }

    .portal-hero-copy h1 {
        max-width: 440px;
        margin-bottom: 17px;
        font-size: clamp(39px, 11.4vw, 52px);
        line-height: .91;
    }

    .portal-hero-copy > p {
        max-width: 440px;
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.5;
    }

    .portal-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 440px;
        gap: 8px;
    }

    .portal-hero-actions .button {
        width: auto;
        min-width: 0;
        min-height: 45px;
        padding: 10px 8px;
        font-size: 12px;
    }

    .server-scroll {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 440px;
        margin-top: 14px;
    }

    .server-scroll > div {
        min-height: 63px;
        grid-template-columns: 29px 1fr;
        padding: 9px 10px;
    }

    .server-scroll > div:nth-child(2) {
        border-right: 0;
    }

    .server-scroll > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(210,162,77,.18);
    }

    .server-scroll span {
        font-size: 19px;
    }

    .server-scroll small {
        font-size: 9px;
    }

    .server-scroll strong {
        font-size: 12px;
    }

    .portal-features {
        padding: 18px 0 20px;
    }

    .game-feature-grid {
        gap: 9px;
    }

    .feature-art {
        min-height: 122px;
    }

    .feature-art span {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .game-feature-card > div:last-child {
        min-height: 116px;
        padding: 13px 10px 14px;
    }

    .game-feature-card h3 {
        margin-bottom: 7px;
        font-size: 14px;
        line-height: 1.15;
    }

    .game-feature-card p {
        font-size: 12px;
        line-height: 1.42;
    }

    .portal-tribes,
    .portal-seasons,
    .portal-benefits {
        padding: 34px 0 38px;
    }

    .portal-section-title {
        gap: 10px;
    }

    .portal-section-title h2,
    .portal-benefits .portal-section-title h2 {
        font-size: clamp(24px, 7vw, 31px);
        line-height: 1.1;
        letter-spacing: .045em;
        text-align: center;
    }

    .portal-tribes .portal-section-lead {
        display: block;
    }

    .portal-section-lead {
        margin: 9px auto 21px;
        font-size: 13px;
        line-height: 1.45;
    }

    .portal-tribe-grid {
        grid-auto-columns: minmax(134px, 41%);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 11px;
        max-width: none;
        margin: 18px -12px 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 12px 14px;
        scroll-snap-type: inline mandatory;
        scrollbar-color: #74532d transparent;
    }

    .portal-tribe {
        min-width: 0;
        padding: 2px 4px 0;
        scroll-snap-align: start;
    }

    .portal-tribe-portrait {
        width: 96px;
        height: 96px;
        margin-bottom: 10px;
    }

    .portal-tribe h3 {
        margin-bottom: 3px;
        font-size: 15px;
    }

    .portal-tribe strong {
        font-size: 9px;
    }

    .portal-tribe p {
        display: none;
    }

    .season-grid,
    .benefit-grid {
        gap: 9px;
    }

    .season-card {
        min-height: 174px;
        padding: 16px 10px;
    }

    .season-card > span {
        font-size: 33px;
    }

    .season-card h3 {
        margin: 4px 0 5px;
        font-size: 18px;
    }

    .season-card p {
        font-size: 12px;
        line-height: 1.42;
    }

    .benefit-grid {
        margin-top: 21px;
    }

    .benefit-grid article {
        min-height: 125px;
        gap: 8px;
        padding: 13px 11px;
    }

    .benefit-grid article > span {
        flex-basis: 35px;
        height: 35px;
        font-size: 22px;
    }

    .benefit-grid h3 {
        margin-bottom: 5px;
        font-size: 13px;
        line-height: 1.2;
    }

    .benefit-grid p {
        font-size: 11px;
        line-height: 1.4;
    }

    .guest-body .site-footer {
        padding: 28px 0 18px;
    }

    .guest-body .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 20px;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }

    .footer-brand-block p {
        margin-top: 11px;
        font-size: 13px;
    }

    .footer-nav,
    .footer-social {
        gap: 8px;
    }

    .footer-nav b,
    .footer-social b {
        font-size: 12px;
    }

    .footer-nav a {
        font-size: 12px;
    }

    .footer-social {
        grid-column: auto;
        grid-template-columns: repeat(3, 30px);
    }

    .footer-social b {
        grid-column: 1 / 4;
    }

    .footer-social span {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .footer-legal {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        margin-top: 22px;
        padding-top: 13px;
        font-size: 10px;
    }

    /* Login */
    .login-main,
    .registration-main {
        min-height: auto;
        background-attachment: scroll;
    }

    .login-main {
        padding: 76px 0 38px;
    }

    .login-stage {
        width: min(100% - 24px, 560px);
        min-height: 0;
        padding: 0;
    }

    .login-metal-card {
        width: 100%;
        padding: 70px 21px 31px;
    }

    .auth-crest,
    .parchment-card > .auth-crest {
        top: -50px;
        width: 88px;
        max-width: 88px;
        min-width: 88px;
        height: 99px;
        font-size: 53px;
    }

    .login-metal-card > .eyebrow {
        font-size: 11px;
    }

    .login-metal-card h1 {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.08;
    }

    .login-metal-card .ornament-divider {
        margin-bottom: 24px;
    }

    .auth-fields {
        gap: 17px;
    }

    .auth-fields label > span {
        font-size: 14px;
    }

    .auth-input input {
        height: 54px;
        padding-left: 46px;
        font-size: 16px;
    }

    .auth-fields .button {
        min-height: 52px;
        font-size: 18px;
    }

    .login-metal-card .form-footnote {
        font-size: 14px;
    }

    .auth-benefit-strip {
        padding: 28px 0 31px;
    }

    .auth-benefit-strip > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 0;
    }

    .auth-benefit-strip article {
        padding: 0 13px;
    }

    .auth-benefit-strip article:nth-child(2) {
        border-right: 0;
    }

    .auth-benefit-strip article > span {
        font-size: 30px;
    }

    .auth-benefit-strip h3 {
        font-size: 13px;
    }

    .auth-benefit-strip p {
        font-size: 11px;
        line-height: 1.4;
    }

    /* Registration */
    .registration-main {
        padding: 78px 0 40px;
    }

    .register-shell {
        width: min(100% - 16px, 620px);
        max-width: 620px;
    }

    .parchment-card {
        width: 100%;
        padding: 62px 14px 25px;
        border-width: 3px;
    }

    .parchment-card::before {
        inset: 6px;
    }

    .parchment-heading > span {
        font-size: 10px;
    }

    .parchment-heading h1 {
        font-size: clamp(28px, 8.5vw, 36px);
        line-height: 1;
    }

    .parchment-heading p {
        margin-bottom: 18px;
        font-size: 12px;
        line-height: 1.45;
    }

    .parchment-section {
        padding: 18px 0;
    }

    .parchment-section h2 {
        font-size: 20px;
    }

    .account-section h2 {
        margin-bottom: 14px;
    }

    .parchment-card .two-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .parchment-card label {
        gap: 6px;
        font-size: 14px;
    }

    .parchment-card input,
    .parchment-card select {
        min-height: 52px;
        padding: 11px 12px;
        font-size: 16px;
    }

    .parchment-title-row {
        margin-bottom: 14px;
    }

    .tapestry-grid {
        grid-auto-columns: 116px;
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 3px 2px 14px;
        scroll-snap-type: inline mandatory;
        scrollbar-color: #806039 rgba(255,255,255,.18);
    }

    .tapestry-choice {
        min-height: 178px;
        padding: 7px 5px 22px;
        scroll-snap-align: start;
    }

    .tapestry-choice::before {
        inset: 5px 5px 31px;
    }

    .tapestry-portrait {
        width: 91px;
        height: 108px;
        max-width: 91px;
        margin-bottom: 8px;
    }

    .tapestry-choice strong {
        font-size: 11px;
    }

    .tapestry-choice > small {
        display: block;
        font-size: 8px;
    }

    .tapestry-choice .choice-check {
        bottom: 5px;
        width: 17px;
        height: 17px;
        font-size: 9px;
    }

    .parchment-help {
        margin-bottom: 14px;
        font-size: 12px;
        line-height: 1.45;
    }

    .parchment-quadrants {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .parchment-quadrants > label:first-child {
        grid-column: 1 / 3;
    }

    .parchment-quadrants span {
        min-height: 52px;
        padding: 9px 6px;
        font-size: 13px;
    }

    .rules-check {
        gap: 11px;
        margin: 7px 0 17px;
        padding: 13px 11px;
    }

    .rules-check input {
        width: 22px;
        min-height: 22px;
        flex-basis: 22px;
        padding: 0;
    }

    .rules-check span {
        font-size: 13px;
        line-height: 1.4;
    }

    .parchment-card > .button {
        width: 100%;
        min-height: 53px;
        font-size: 18px;
    }

    .parchment-card .form-footnote {
        margin-top: 17px;
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .guest-body .site-container {
        width: calc(100% - 18px);
    }

    .guest-body .site-brand strong {
        font-size: 15px;
    }

    .guest-body .guest-nav .button {
        padding-inline: 7px;
        font-size: 8px;
    }

    .portal-hero-copy h1 {
        font-size: 37px;
    }

    .game-feature-card h3 {
        font-size: 13px;
    }

    .game-feature-card p,
    .season-card p,
    .benefit-grid p {
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
   Travia 1.5.1 — compact mobile refinement
   Keep the full responsive layout, but restore the dense proportions of the
   approved reference on phones. Desktop rules above remain unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .guest-body {
        overflow-x: hidden;
    }

    .guest-body .site-container {
        width: min(100% - 12px, 620px);
    }

    .guest-body .site-header {
        position: relative;
        top: auto;
        height: 60px;
    }

    .guest-body .header-inner {
        gap: 6px;
    }

    .guest-body .site-brand {
        min-width: 0;
        gap: 5px;
    }

    .guest-body .brand-mark {
        width: 30px;
        height: 34px;
        border-width: 2px;
        border-radius: 6px 6px 11px 11px;
        font-size: 18px;
    }

    .guest-body .site-brand strong {
        font-size: clamp(14px, 4.2vw, 17px);
        letter-spacing: .035em;
        white-space: nowrap;
    }

    .guest-body .guest-nav {
        flex: 0 0 auto;
        gap: 4px;
        margin-left: auto;
    }

    .guest-body .guest-nav .button {
        min-height: 30px;
        padding: 6px clamp(6px, 1.9vw, 9px);
        font-size: clamp(7px, 2.15vw, 9px);
    }

    .portal-hero,
    .portal-hero-inner {
        min-height: 410px;
    }

    .portal-hero {
        background-position: 64% center;
    }

    .portal-hero-inner {
        align-items: flex-start;
        padding: 24px 0 20px;
    }

    .portal-hero-copy {
        width: 100%;
        max-width: 340px;
    }

    .portal-kicker {
        max-width: 300px;
        margin-bottom: 9px;
        font-size: 7px;
        line-height: 1.35;
        letter-spacing: .16em;
    }

    .portal-hero-copy h1 {
        max-width: 100%;
        margin-bottom: 11px;
        font-size: clamp(28px, 8.4vw, 34px);
        line-height: .91;
        letter-spacing: -.018em;
    }

    .portal-hero-copy h1 span {
        white-space: normal;
    }

    .portal-hero-copy > p {
        max-width: 330px;
        margin-bottom: 13px;
        font-size: 10px;
        line-height: 1.42;
    }

    .portal-hero-actions {
        max-width: 330px;
        gap: 6px;
    }

    .portal-hero-actions .button {
        min-height: 36px;
        padding: 7px 5px;
        font-size: 9px;
    }

    .server-scroll {
        max-width: 330px;
        margin-top: 9px;
    }

    .server-scroll > div {
        min-height: 43px;
        grid-template-columns: 20px 1fr;
        padding: 6px 7px;
    }

    .server-scroll span {
        font-size: 13px;
    }

    .server-scroll small {
        font-size: 6px;
    }

    .server-scroll strong {
        font-size: 8px;
    }

    .portal-features {
        padding: 11px 0 12px;
    }

    .game-feature-grid,
    .season-grid,
    .benefit-grid {
        gap: 6px;
    }

    .feature-art {
        min-height: 82px;
    }

    .feature-art span {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .game-feature-card > div:last-child {
        min-height: 68px;
        padding: 8px 6px 9px;
    }

    .game-feature-card h3 {
        margin-bottom: 4px;
        font-size: 10px;
        line-height: 1.12;
    }

    .game-feature-card p {
        font-size: 7.5px;
        line-height: 1.35;
    }

    .portal-tribes,
    .portal-seasons,
    .portal-benefits {
        padding: 19px 0 21px;
    }

    .portal-section-title {
        gap: 7px;
    }

    .portal-section-title h2,
    .portal-benefits .portal-section-title h2 {
        font-size: clamp(18px, 5.7vw, 22px);
        line-height: 1.05;
        letter-spacing: .055em;
    }

    .portal-section-lead {
        margin: 6px auto 11px;
        font-size: 8px;
        line-height: 1.35;
    }

    .portal-tribe-grid {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        max-width: 390px;
        margin: 10px auto 0;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .portal-tribe {
        min-width: 0;
        padding: 0 1px;
    }

    .portal-tribe-portrait {
        width: clamp(48px, 15vw, 61px);
        height: clamp(48px, 15vw, 61px);
        margin-bottom: 6px;
        border-width: 2px;
    }

    .portal-tribe-portrait img {
        inset: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

    .portal-tribe-portrait::before,
    .portal-tribe-portrait::after {
        bottom: -5px;
        font-size: 18px;
    }

    .portal-tribe h3 {
        margin-bottom: 1px;
        font-size: clamp(7px, 2.35vw, 9px);
        line-height: 1.05;
    }

    .portal-tribe strong {
        font-size: clamp(5px, 1.55vw, 6.5px);
    }

    .season-card {
        min-height: 118px;
        padding: 9px 7px;
    }

    .season-card > span {
        font-size: 23px;
    }

    .season-card h3 {
        margin: 2px 0 3px;
        font-size: 13px;
    }

    .season-card p {
        font-size: 8px;
        line-height: 1.35;
    }

    .season-card b {
        top: 7px;
        right: -38px;
        font-size: 6px;
    }

    .benefit-grid {
        margin-top: 12px;
    }

    .benefit-grid article {
        min-height: 76px;
        gap: 5px;
        padding: 8px 6px;
    }

    .benefit-grid article > span {
        flex-basis: 27px;
        height: 27px;
        font-size: 17px;
    }

    .benefit-grid h3 {
        margin-bottom: 3px;
        font-size: 8px;
        line-height: 1.15;
    }

    .benefit-grid p {
        font-size: 6.5px;
        line-height: 1.3;
    }

    .guest-body .site-footer {
        padding: 14px 0 8px;
    }

    .guest-body .footer-inner {
        grid-template-columns: 1.25fr .8fr .8fr;
        gap: 10px;
    }

    .footer-brand-block {
        grid-column: auto;
    }

    .footer-brand-block .brand-mark {
        width: 27px;
        height: 30px;
        font-size: 16px;
    }

    .footer-brand-block .site-brand strong {
        font-size: 13px;
    }

    .footer-brand-block p {
        margin-top: 6px;
        font-size: 7px;
        line-height: 1.35;
    }

    .footer-nav,
    .footer-social {
        gap: 4px;
    }

    .footer-nav b,
    .footer-social b {
        font-size: 7px;
    }

    .footer-nav a {
        font-size: 6px;
    }

    .footer-social {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 20px);
    }

    .footer-social b {
        grid-column: 1 / 4;
    }

    .footer-social span {
        width: 18px;
        height: 18px;
        font-size: 7px;
    }

    .footer-legal {
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        margin-top: 9px;
        padding-top: 6px;
        font-size: 5.5px;
    }

    /* Compact login */
    .login-main,
    .registration-main {
        min-height: 0;
        background-attachment: scroll;
    }

    .login-main {
        padding: 50px 0 22px;
    }

    .login-stage {
        width: min(100% - 12px, 440px);
        min-height: 0;
    }

    .login-metal-card {
        padding: 49px 16px 20px;
        border-width: 2px;
    }

    .auth-crest,
    .parchment-card > .auth-crest {
        top: -35px;
        width: 62px;
        max-width: 62px;
        min-width: 62px;
        height: 70px;
        border-width: 3px;
        border-radius: 13px 13px 22px 22px;
        font-size: 38px;
    }

    .login-metal-card > .eyebrow {
        margin-bottom: 5px;
        font-size: 8px;
    }

    .login-metal-card h1 {
        font-size: clamp(22px, 6.5vw, 26px);
        line-height: 1.05;
    }

    .login-metal-card .ornament-divider {
        margin: 11px auto 16px;
    }

    .auth-fields {
        gap: 10px;
    }

    .auth-fields label > span {
        font-size: 10px;
    }

    .auth-input input {
        height: 43px;
        padding-left: 39px;
        font-size: 14px;
    }

    .auth-input i {
        left: 12px;
        font-size: 14px;
    }

    .auth-fields .button {
        min-height: 43px;
        font-size: 15px;
    }

    .auth-or {
        margin: 15px 0 6px;
    }

    .login-metal-card .form-footnote {
        margin-top: 12px;
        font-size: 10px;
    }

    .auth-benefit-strip {
        padding: 14px 0 16px;
    }

    .auth-benefit-strip > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .auth-benefit-strip article,
    .auth-benefit-strip article:nth-child(2) {
        padding: 0 5px;
        border-right: 1px solid rgba(207,158,75,.16);
    }

    .auth-benefit-strip article:last-child {
        border-right: 0;
    }

    .auth-benefit-strip article > span {
        font-size: 21px;
    }

    .auth-benefit-strip h3 {
        margin: 5px 0 3px;
        font-size: 7px;
        line-height: 1.15;
    }

    .auth-benefit-strip p {
        font-size: 6px;
        line-height: 1.3;
    }

    /* Compact registration */
    .registration-main {
        padding: 49px 0 24px;
    }

    .register-shell {
        width: min(100% - 10px, 520px);
        max-width: 520px;
    }

    .parchment-card {
        padding: 45px 10px 16px;
        border-width: 3px;
    }

    .parchment-card::before {
        inset: 5px;
    }

    .parchment-heading > span {
        font-size: 7px;
    }

    .parchment-heading h1 {
        margin-top: 5px;
        font-size: clamp(21px, 6.5vw, 25px);
        line-height: 1;
    }

    .parchment-heading .ornament-divider {
        margin: 8px auto 7px;
    }

    .parchment-heading p {
        margin-bottom: 10px;
        font-size: 8px;
        line-height: 1.35;
    }

    .parchment-section {
        padding: 10px 0;
    }

    .parchment-section h2 {
        font-size: 14px;
    }

    .account-section h2 {
        margin-bottom: 8px;
    }

    .parchment-card .two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .parchment-card label {
        gap: 3px;
        font-size: 9px;
    }

    .parchment-card input,
    .parchment-card select {
        min-height: 38px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .parchment-title-row {
        gap: 7px;
        margin-bottom: 8px;
    }

    .tapestry-grid {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .tapestry-choice {
        min-height: 100px;
        padding: 4px 2px 15px;
    }

    .tapestry-choice::before {
        inset: 3px 3px 21px;
    }

    .tapestry-portrait {
        width: min(48px, calc(100% - 4px));
        height: 59px;
        max-width: 48px;
        margin-bottom: 4px;
    }

    .tapestry-choice strong {
        font-size: 6.5px;
    }

    .tapestry-choice > small {
        font-size: 5px;
    }

    .tapestry-choice .choice-check {
        bottom: 3px;
        width: 12px;
        height: 12px;
        border-width: 1px;
        font-size: 6px;
    }

    .parchment-help {
        margin: -2px 0 8px;
        font-size: 8px;
        line-height: 1.35;
    }

    .parchment-quadrants {
        gap: 6px;
    }

    .parchment-quadrants span {
        min-height: 37px;
        padding: 7px 4px;
        font-size: 9px;
    }

    .rules-check {
        gap: 7px;
        margin: 5px 0 10px;
        padding: 8px;
    }

    .rules-check input {
        width: 17px;
        min-height: 17px;
        flex-basis: 17px;
    }

    .rules-check span {
        font-size: 8px;
        line-height: 1.3;
    }

    .parchment-card > .button {
        min-height: 42px;
        font-size: 14px;
    }

    .parchment-card .form-footnote {
        margin-top: 10px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .guest-body .site-container {
        width: calc(100% - 8px);
    }

    .guest-body .site-brand strong {
        font-size: 13px;
    }

    .guest-body .guest-nav .button {
        padding-inline: 5px;
        font-size: 7px;
    }

    .portal-hero-copy h1 {
        font-size: 27px;
    }

    .portal-tribe-portrait {
        width: 46px;
        height: 46px;
    }

    .parchment-card {
        padding-inline: 8px;
    }
}
/* --------------------------------------------------------------------------
   Travia 1.6.0 — unified Travian-inspired parchment interface
   -------------------------------------------------------------------------- */

:root {
    --paper: #f2ead5;
    --paper-light: #fffaf0;
    --paper-dark: #ded0b1;
    --ink: #3e3428;
    --muted: #786e5d;
    --line: #9b8058;
    --line-soft: rgba(105, 78, 42, .22);
    --wood: #5a432c;
    --wood-dark: #34271d;
    --green: #5d7b31;
    --green-light: #87a94c;
    --gold: #c39748;
    --red: #a64d38;
    --surface: #fffaf0;
    --canvas: #d8d0bd;
    --forest-950: #354421;
    --forest-900: #415927;
    --forest-800: #4f6d2d;
    --forest-700: #5d7b31;
    --forest-600: #789847;
    --forest-100: #e7ead8;
    --forest-50: #f7f3e7;
    --gold-600: #9b6d2d;
    --gold-500: #c39748;
    --gold-100: #f2e5c5;
    --danger: #a64d38;
    --success: #5d7b31;
    --shadow-sm: 0 5px 13px rgba(55, 40, 21, .16), 0 1px 3px rgba(55, 40, 21, .12);
    --shadow: 0 12px 28px rgba(55, 40, 21, .22), 0 2px 6px rgba(55, 40, 21, .16);
    --header-height: 76px;
    --game-header-height: 82px;
    color-scheme: light;
}

html { background: #bcb39f; }
body {
    color: var(--ink);
    background:
        linear-gradient(rgba(220, 214, 198, .91), rgba(203, 195, 175, .95)),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(74, 54, 29, .035) 22px 23px),
        #d8d0bd;
}

h1, h2, h3 { color: var(--ink); }
a { color: #587134; }
a:hover { color: #354a1f; }
.muted, .page-heading p { color: var(--muted); }

.card,
.paper-panel {
    color: var(--ink);
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(91,65,34,.018) 4px 5px),
        linear-gradient(110deg, rgba(130,97,50,.035), transparent 22%),
        linear-gradient(#fffaf0, #e9dfc8);
    box-shadow: var(--shadow-sm), inset 0 0 0 2px rgba(255,255,255,.46);
}

.paper-panel { position: relative; overflow: hidden; border-radius: 7px; }
.paper-panel::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #5d7834, #96ae5a 48%, #5d7834);
    content: "";
}
.panel-body { position: relative; z-index: 2; padding: 14px; }
.panel-label,
.sidebar-label,
.eyebrow { color: #806d50; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; text-shadow: none; }
.panel-title { margin: 5px 0 0; color: #493a28; font-family: Georgia, serif; font-size: 21px; letter-spacing: -.02em; }

.button {
    border-radius: 6px;
    font-family: Georgia, serif;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.button-primary {
    color: #fff6da;
    border-color: #486526;
    background: linear-gradient(#7c9d48, #4d6c2b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 7px rgba(54,39,21,.25);
    text-shadow: 0 1px 1px #34451f;
}
.button-primary:hover {
    color: #fff9e8;
    background: linear-gradient(#8baa51, #587831);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 5px 10px rgba(54,39,21,.28);
}
.button-secondary,
.button-ghost {
    color: #4e432f;
    border-color: #9a8058;
    background: linear-gradient(#fffaf0, #ded2b9);
    box-shadow: inset 0 1px #fff, 0 2px 4px rgba(45,32,17,.18);
    text-shadow: none;
}
.button-secondary:hover,
.button-ghost:hover { color: #385022; border-color: #6e873f; background: linear-gradient(#fffdf5, #e9dfc9); }
.button:disabled,
.button-disabled { color: #8d8576; border-color: #bdb19a; background: #ddd5c4; filter: none; opacity: .72; }
.link-button { color: #5d7834; }

input,
select,
textarea {
    color: #443827;
    border-color: #a48b65;
    border-radius: 6px;
    background: rgba(255, 251, 239, .86);
    box-shadow: inset 0 2px 4px rgba(77,55,27,.1), 0 1px rgba(255,255,255,.65);
}
input:focus,
select:focus,
textarea:focus { border-color: #6f8d3d; box-shadow: 0 0 0 3px rgba(111,141,61,.16), inset 0 2px 4px rgba(77,55,27,.08); }
label { color: #514535; }

.alert-error { color: #7f3025; background: #f6ddd4; border-color: #b86b5c; }
.alert-success { color: #36551e; background: #e7efd9; border-color: #7f9d51; }
.alert-info { color: #3f5d63; background: #e5efed; border-color: #809fa1; }

/* Shared public, authentication and game brand chrome */
.site-header,
.game-header {
    border-bottom: 4px solid #705536;
    background:
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 35%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 4px, transparent 4px 12px),
        linear-gradient(180deg, #665039, #493624);
    box-shadow: 0 5px 16px rgba(49,34,18,.36);
    backdrop-filter: none;
}
.site-brand,
.site-brand:hover { color: #f0d793; text-shadow: 0 2px 2px #2f2115; }
.site-brand strong { color: #f0d793; font-family: Georgia, serif; letter-spacing: .055em; }
.site-brand small { color: #c8b896; }
.brand-mark,
.game-header .compact-brand .brand-mark,
.admin-brand .brand-mark {
    border-color: #d1a653;
    color: #fff1bd;
    background: linear-gradient(145deg, #749349, #2f481f);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.14), 0 3px 7px rgba(0,0,0,.35);
    text-shadow: 0 1px 2px #26391a;
}

/* Public portal */
.site-header { position: relative; height: 76px; }
.site-header .header-inner { height: 100%; }
.guest-nav > a:not(.button) { color: #e4d6b7; }
.guest-nav > a:not(.button):hover { color: #fff1c8; }
.language-switch { border-color: #a17e48; background: rgba(47,34,21,.42); }
.language-switch b { color: #fff0bf; background: #607d35; }
.language-switch i { color: #d5c5a3; }

.portal-hero {
    border-bottom: 3px solid #705536;
    background:
        linear-gradient(90deg, rgba(14,18,11,.86) 0%, rgba(17,22,14,.62) 46%, rgba(12,16,10,.12) 76%),
        url("images/travia-public-hero-v3.jpg") center/cover;
}
.portal-hero-copy h1,
.portal-section-title h2,
.portal-tribe h3,
.season-card h3,
.game-feature-card h3,
.benefit-grid h3 { font-family: Georgia, serif; }
.portal-hero-copy h1 { color: #f0cf7a; text-shadow: 0 4px 18px #000; }
.portal-hero-copy p { color: #e0d9c9; }
.portal-kicker { color: #efcb77; }
.server-scroll {
    border-color: #9a7847;
    background: rgba(20,30,18,.85);
    box-shadow: inset 0 0 0 1px rgba(255,232,174,.08), 0 7px 18px rgba(0,0,0,.32);
}
.server-scroll div { border-color: rgba(231,201,139,.2); }
.server-scroll small { color: #bdb7a7; }
.server-scroll strong { color: #f0e3c4; }

.portal-section {
    border-bottom: 1px solid rgba(105,78,42,.25);
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(91,65,34,.018) 5px 6px),
        linear-gradient(#eee5d1, #d9ceb6);
}
.portal-features { background: linear-gradient(#d8ceb7, #c8bea8); }
.portal-tribes { background: linear-gradient(#e8dfc9, #d9ceb6); }
.portal-seasons { background: linear-gradient(rgba(232,223,201,.94),rgba(207,197,174,.96)), url("images/season-summer-v1.jpg") center/cover; }
.portal-benefits { background: linear-gradient(#d8ceb7, #c5baa2); }
.portal-section-title h2 { color: #4a3a27; text-shadow: 0 1px #fff8e8; }
.portal-section-title > span { background: linear-gradient(90deg, transparent, #a1763c); }
.portal-section-lead { color: #746b5c; }

.game-feature-card,
.season-card,
.benefit-grid article {
    color: var(--ink);
    border-color: #967446;
    background: linear-gradient(#fff9e9, #e3d7bd);
    box-shadow: 0 6px 15px rgba(59,43,23,.18), inset 0 0 0 2px rgba(255,255,255,.38);
}
.game-feature-card > div:last-child { background: linear-gradient(#fff9e9, #e3d7bd); }
.game-feature-card h3,
.season-card h3,
.benefit-grid h3 { color: #5f482d; text-shadow: none; }
.game-feature-card p,
.season-card p,
.benefit-grid p { color: #746b5c; }
.feature-art::after { background: linear-gradient(transparent 45%, rgba(43,32,18,.36)); }
.portal-tribe { color: #4f402d; }
.portal-tribe h3 { color: #5a432c; }
.portal-tribe strong,
.portal-tribe p { color: #746b5c; }
.portal-tribe-portrait { border-color: #a67c40; background: #e4d7bc; box-shadow: 0 5px 12px rgba(54,39,21,.25); }

.site-footer {
    border-top: 4px solid #705536;
    color: #ddcfb2;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent),
        linear-gradient(145deg, #4e3a27, #2f241b);
}
.site-footer p,
.footer-nav a,
.footer-legal { color: #c9baa0; }
.footer-nav b,
.footer-social b { color: #efd18a; }

/* Authentication uses the same wood and parchment language */
.auth-main {
    background:
        linear-gradient(rgba(45,36,24,.2), rgba(45,36,24,.38)),
        url("images/travia-auth-valley-v1.jpg") center/cover fixed;
}
.login-metal-card,
.parchment-card {
    color: var(--ink);
    border: 2px solid #9c7848;
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(91,65,34,.018) 4px 5px),
        linear-gradient(#fffaf0, #e8dcc2);
    box-shadow: 0 14px 34px rgba(44,31,16,.38), inset 0 0 0 3px rgba(255,255,255,.48);
}
.login-metal-card::before,
.parchment-card::before { border-color: rgba(111,82,44,.45); }
.login-metal-card h1,
.parchment-heading h1,
.parchment-section h2 { color: #493927; text-shadow: none; }
.login-metal-card .eyebrow,
.parchment-heading > span { color: #8c6938; }
.login-metal-card label,
.login-metal-card .form-footnote,
.parchment-card label { color: #574b3a; }
.auth-input {
    border-color: #a48a62;
    background: rgba(255,251,239,.82);
    box-shadow: inset 0 2px 4px rgba(77,55,27,.1);
}
.auth-input i { color: #6b843f; }
.auth-input input { color: #443827; background: transparent; }
.auth-or span,
.ornament-divider span { background: linear-gradient(90deg, transparent, #a27c45, transparent); }
.auth-or b,
.ornament-divider i { color: #8d6b3a; }
.auth-benefit-strip {
    border-color: #705536;
    background: linear-gradient(#665039, #493624);
}
.auth-benefit-strip article { border-color: rgba(240,215,156,.18); }
.auth-benefit-strip h3 { color: #efd38d; }
.auth-benefit-strip p { color: #cfbea0; }
.parchment-section { border-color: rgba(105,78,42,.24); }
.tapestry-choice {
    border-color: #9c815a;
    background: linear-gradient(#f8f1df, #d8c9aa);
}
.tapestry-choice:has(input:checked) { border-color: #66813a; background: linear-gradient(#eef3dc, #cdd9aa); }
.tapestry-choice strong { color: #493927; }
.tapestry-choice small { color: #766a57; }
.quadrant-choice span { color: #594d3b; border-color: #a58c66; background: rgba(255,250,237,.62); }
.quadrant-choice:has(input:checked) span { color: #fff7dc; border-color: #4f6e2a; background: linear-gradient(#7d9d4a, #4d6b2c); }
.rules-check { border-color: #b19b76; background: rgba(255,251,240,.48); }

/* Unified game header */
.game-body { min-height: 100dvh; padding-top: var(--game-header-height); color: var(--ink); overflow-x: hidden; }
.game-header {
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    left: 0;
    height: var(--game-header-height);
}
.game-header-inner {
    display: grid;
    width: min(1580px,100%);
    height: 100%;
    grid-template-columns: 188px auto minmax(430px,1fr) auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 12px;
    margin: auto;
    padding: 8px 16px;
}
.game-header .compact-brand {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    gap: 9px;
}
.game-header .compact-brand .brand-mark { width: 46px; height: 53px; border-radius: 9px 9px 17px 17px; font-size: 27px; }
.game-header .compact-brand strong { font-size: 19px; }
.game-header .compact-brand small { display: none; }

.header-game-nav {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}
.header-game-nav .nav-item {
    display: grid;
    min-width: 61px;
    height: 62px;
    grid-template-rows: 32px auto;
    place-items: center;
    gap: 0;
    padding: 4px 6px;
    border: 1px solid rgba(233,210,160,.18);
    border-radius: 7px;
    color: #d7c6a5;
    background: rgba(40,29,18,.3);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.header-game-nav .nav-item span { width: auto; height: auto; border: 0; color: inherit; background: none; box-shadow: none; font-size: 21px; }
.header-game-nav .nav-item b { font-size: 9px; font-weight: 800; }
.header-game-nav .nav-item:hover,
.header-game-nav .nav-item.active {
    color: #fff4cf;
    border-color: #d0aa5d;
    background: linear-gradient(#789947, #486827);
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 3px 7px rgba(27,22,13,.3);
    transform: none;
}

.game-header .resource-bar {
    display: grid;
    grid-row: 1;
    grid-column: 3;
    grid-template-columns: repeat(4,minmax(94px,1fr));
    align-self: center;
    gap: 5px;
}
.game-header .resource-item {
    position: relative;
    display: grid;
    min-width: 0;
    height: 55px;
    grid-template-columns: 34px minmax(0,1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 0 7px;
    padding: 6px 8px;
    border: 1px solid #8e724c;
    border-radius: 6px;
    color: #40362a;
    background: linear-gradient(#fffaf0, #ded2b9);
    box-shadow: inset 0 1px #fff, 0 2px 4px rgba(35,25,14,.24);
}
.game-header .resource-item .resource-symbol {
    display: grid;
    width: 32px;
    height: 32px;
    grid-row: 1 / 3;
    place-items: center;
    border: 1px solid rgba(74,54,30,.35);
    border-radius: 50%;
    color: #fff6dc;
    background: radial-gradient(circle at 35% 28%,#ad845a,#76502d 64%,#493019);
    box-shadow: inset 0 1px rgba(255,255,255,.45),0 1px 3px rgba(48,33,17,.28);
    font-family: Georgia,serif;
    font-size: 13px;
    font-weight: 800;
}
.game-header .resource-clay .resource-symbol { background: radial-gradient(circle at 35% 28%,#d08455,#8d4930 64%,#4c2517); }
.game-header .resource-iron .resource-symbol { background: radial-gradient(circle at 35% 28%,#aeb9b7,#687574 64%,#384342); }
.game-header .resource-crop .resource-symbol { background: radial-gradient(circle at 35% 28%,#e4c36a,#a57928 64%,#5a3f16); }
.game-header .resource-copy { min-width: 0; }
.game-header .resource-copy strong { display: block; overflow: hidden; color: #40362a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.game-header .resource-copy small { display: block; overflow: hidden; color: #817561; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-header .resource-item em { display: none; }
.game-header .resource-gauge { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(77,56,31,.14); }
.game-header .resource-gauge i { display: block; width: var(--resource-fill,0%); height: 100%; background: linear-gradient(90deg,#6c873f,#9eb85d); }

.game-header .header-actions { display: flex; grid-row: 1; grid-column: 4; align-items: center; gap: 6px; }
.game-header .header-icon,
.game-header .player-pill {
    position: relative;
    border: 1px solid #92764e;
    border-radius: 6px;
    color: #4d402f;
    background: linear-gradient(#fff8e9,#d8ccb4);
    box-shadow: inset 0 1px #fff,0 2px 4px rgba(28,21,13,.25);
}
.game-header .header-icon { display: grid; width: 42px; height: 42px; place-items: center; }
.game-header .header-icon:hover { color: #385022; border-color: #6f8c40; }
.game-header .header-icon b { top: -6px; right: -6px; border: 2px solid #eee4ce; color: #fff; background: #a64d38; }
.game-header .player-pill { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; }
.game-header .player-pill i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 5px;
    color: #fff1c5;
    background: linear-gradient(#7f9b4e,#4c682c);
    font-family: Georgia,serif;
    font-style: normal;
    font-weight: 800;
}
.game-header .player-pill span { max-width: 86px; overflow: hidden; color: #4d402f; font-size: 11px; font-weight: 800; text-overflow: ellipsis; }
.game-header .header-actions form { margin: 0; }

/* Main immersive dashboard */
.game-page-dashboard { overflow: hidden; }
.game-content-dashboard {
    width: min(1580px,100%);
    height: calc(100dvh - var(--game-header-height));
    margin: auto;
    padding: 12px;
}
.game-content-dashboard > .game-flashes { position: fixed; z-index: 90; top: calc(var(--game-header-height) + 8px); left: 50%; width: min(620px,calc(100% - 24px)); margin: 0; transform: translateX(-50%); }
.immersive-game-layout {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 238px minmax(520px,1fr) 278px;
    gap: 12px;
}
.side-rail { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: #a58c63 transparent; scrollbar-width: thin; }
.side-rail > * + * { margin-top: 10px; }
.hero-card { display: grid; grid-template-columns: 57px 1fr; gap: 10px; margin-top: 12px; }
.hero-avatar {
    display: grid;
    width: 57px;
    height: 64px;
    place-items: center;
    border: 2px solid #b38b49;
    border-radius: 50% 50% 44% 44%;
    color: #fff1c5;
    background: linear-gradient(145deg,#7f9552,#405b28);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.14);
    font-family: Georgia,serif;
    font-size: 24px;
    font-weight: 800;
}
.hero-info strong { display: block; margin-top: 5px; font-size: 15px; }
.hero-info small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.meter { display: block; height: 7px; margin-top: 9px; overflow: hidden; border-radius: 9px; background: rgba(91,67,36,.14); box-shadow: inset 0 1px 2px rgba(67,48,26,.18); }
.meter span { display: block; width: var(--value,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5d7b31,#91ad57); }
.compact-info-lines { margin-top: 10px; }
.info-lines { margin-top: 11px; }
.info-line { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.info-line:last-child { border-bottom: 0; }
.info-line span { color: var(--muted); }
.info-line strong { color: #516b31; }
.task-list,
.village-list { display: grid; gap: 7px; margin-top: 11px; }
.task,
.village-row {
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    color: var(--ink);
    text-align: left;
    background: rgba(255,255,255,.28);
}
.task:hover,
.village-row:hover,
.village-row.active { color: var(--ink); border-color: #829b52; background: rgba(133,160,78,.13); }
.task-icon,
.village-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff4d0; background: linear-gradient(#829c50,#4d6a2d); font-size: 16px; }
.task strong,
.task small,
.village-row strong,
.village-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task strong,
.village-row strong { color: #473b2c; font-size: 12px; }
.task small,
.village-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.task time,
.task > b,
.village-row > b { color: #637b3c; font-size: 10px; }
.village-switch-form { margin: 0; }

.play-stage { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
.village-heading { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 7px; }
.village-heading small { display: block; color: #776b58; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.village-heading h1 { margin: 2px 0 0; color: #493821; font-family: Georgia,serif; font-size: 27px; line-height: 1; text-shadow: 0 1px rgba(255,255,255,.7); }
.coords { display: grid; min-width: 86px; min-height: 34px; place-items: center; padding: 0 10px; border: 1px solid #947a54; border-radius: 5px; color: #4e642f; background: linear-gradient(#fff9eb,#dfd3ba); box-shadow: inset 0 1px #fff; font-size: 12px; font-weight: 800; }

.village-world {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 3px solid #725536;
    border-radius: 9px;
    background: #819960;
    box-shadow: 0 12px 26px rgba(52,37,20,.27),inset 0 0 0 2px rgba(255,255,255,.3);
}
.village-world::after { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(31,26,18,.05),transparent 20%,transparent 72%,rgba(38,29,17,.28)); content: ""; }
.village-world > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.98) contrast(.98) brightness(1.03); }
.world-badge { position: absolute; z-index: 4; top: 10px; display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(76,58,34,.56); border-radius: 5px; color: #493927; background: rgba(252,246,226,.9); box-shadow: 0 2px 7px rgba(48,34,17,.2); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.server-badge { left: 10px; }
.protection-badge { right: 10px; }
.world-badge i { width: 8px; height: 8px; border-radius: 50%; background: #72a34b; box-shadow: 0 0 0 3px rgba(114,163,75,.18); }
.building-point {
    position: absolute;
    z-index: 6;
    top: var(--slot-y);
    left: var(--slot-x);
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    padding: 0;
    border: 2px solid #fff4d1;
    border-radius: 50%;
    color: #fff8df;
    background: linear-gradient(#789c42,#466725);
    box-shadow: 0 0 0 4px rgba(70,50,28,.28),0 4px 9px rgba(46,32,17,.4);
    font-family: Georgia,serif;
    font-size: 12px;
    font-weight: 800;
    transform: translate(-50%,-50%);
}
.building-point.occupied { background: linear-gradient(#8a7046,#574027); }
.building-point:hover,
.building-point.selected { color: #4e3518; background: linear-gradient(#f5d478,#c68b2e); box-shadow: 0 0 0 5px rgba(250,218,126,.34),0 4px 11px rgba(46,32,17,.46); transform: translate(-50%,-50%) scale(1.1); }
.world-side-actions { position: absolute; z-index: 7; top: 50%; left: 9px; display: none; gap: 7px; transform: translateY(-50%); }
.floating-action { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid #f5e7bf; border-radius: 50%; color: #fff2c8; background: linear-gradient(#718f43,#405f24); box-shadow: 0 4px 10px rgba(42,29,15,.4); }
.floating-action .alert-dot { top: -6px; right: -6px; }
.world-view-switch { position: absolute; z-index: 7; bottom: 12px; left: 50%; display: flex; gap: 5px; padding: 4px; border: 1px solid rgba(77,57,32,.65); border-radius: 7px; background: rgba(246,238,215,.92); box-shadow: 0 3px 10px rgba(43,29,14,.3); transform: translateX(-50%); }
.view-button { display: flex; min-width: 132px; min-height: 39px; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border-radius: 5px; color: #665a49; font-family: Georgia,serif; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.view-button:hover,
.view-button.active { color: #fff5d5; background: linear-gradient(#779747,#4a682a); text-shadow: 0 1px #34451f; }
.building-card { position: absolute; z-index: 8; right: 12px; bottom: 12px; width: 255px; padding: 12px; border: 1px solid #80643f; border-radius: 6px; color: var(--ink); background: linear-gradient(#fff9e8,#e4d8bd); box-shadow: 0 8px 20px rgba(45,31,16,.32),inset 0 0 0 2px rgba(255,255,255,.5); }
.building-card small { display: block; color: #7d6b4e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.building-card h2 { margin: 3px 0 4px; color: #443626; font-family: Georgia,serif; font-size: 18px; }
.building-card p { margin: 0; color: #716655; font-size: 11px; line-height: 1.4; }
.costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.costs span { padding: 3px 6px; border: 1px solid var(--line-soft); border-radius: 4px; background: rgba(255,255,255,.35); font-size: 10px; }
.costs b { color: #577332; }
.build-button { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; margin-top: 9px; border: 1px solid #486526; border-radius: 5px; color: #fff6da; background: linear-gradient(#7c9d48,#4d6c2b); box-shadow: inset 0 1px rgba(255,255,255,.25),0 2px 4px rgba(54,39,21,.2); font-family: Georgia,serif; font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; }
.build-button:hover { color: #fff; background: linear-gradient(#8aaa50,#587831); }
.activity-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.activity-card { display: grid; min-height: 72px; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #9a815b; border-radius: 6px; color: var(--ink); background: linear-gradient(#fff9ec,#e5dbc4); box-shadow: 0 3px 8px rgba(52,38,20,.16),inset 0 1px #fff; }
.activity-card:hover { color: var(--ink); border-color: #758e48; }
.activity-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff3cf; background: linear-gradient(#819b50,#4c682d); font-size: 18px; }
.activity-card strong,
.activity-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-card strong { font-size: 13px; }
.activity-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-card time,
.activity-card > b { color: #587134; font-size: 11px; font-weight: 800; }

/* Every remaining game page keeps the same materials and controls */
.game-page-section { overflow-y: auto; }
.game-shell { display: grid; width: min(1500px,100%); min-height: calc(100dvh - var(--game-header-height)); grid-template-columns: 238px minmax(0,1fr); margin: auto; }
.game-sidebar {
    position: sticky;
    top: var(--game-header-height);
    align-self: start;
    height: calc(100dvh - var(--game-header-height));
    padding: 12px;
    overflow-y: auto;
    border-right: 2px solid #806442;
    background: linear-gradient(rgba(103,80,52,.18),rgba(72,53,34,.2));
    box-shadow: inset -5px 0 14px rgba(57,40,21,.12);
}
.game-sidebar > * + * { margin-top: 10px; }
.game-sidebar .village-panel { padding: 0; border-radius: 7px; }
.game-sidebar .village-panel strong { margin-top: 7px; color: #493927; font-size: 18px; }
.game-sidebar .village-panel small { color: var(--muted); }
.game-sidebar .village-panel select { width: 100%; }
.game-sidebar .sidebar-resource-panel { display: block; margin-top: 10px; padding: 0; }
.game-sidebar .sidebar-resource-row { border-color: var(--line-soft); background: rgba(255,255,255,.22); }
.game-sidebar .sidebar-resource-row small { color: var(--muted); }
.game-sidebar .sidebar-resource-row strong { color: #4d672d; }
.game-sidebar .sidebar-shortcuts { margin-top: 10px; padding: 0; }
.game-sidebar .sidebar-shortcuts a { color: #514535; border-color: var(--line-soft); }
.game-sidebar .sidebar-shortcuts a:hover { color: #466326; }
.game-content { min-width: 0; padding: 28px clamp(18px,3vw,44px) 90px; }
.game-page-section .game-content { max-width: 1260px; width: 100%; margin-inline: auto; }
.page-heading h1 { color: #493927; font-family: Georgia,serif; text-shadow: 0 1px #fff; }
.page-heading p { color: var(--muted); }
.back-link { color: #5b7337; }
.tribe-badge,
.coordinate-pill,
.level-pill { color: #4f622f; border-color: #9c8159; background: linear-gradient(#fff9eb,#dfd3ba); box-shadow: inset 0 1px #fff,0 2px 4px rgba(50,36,19,.12); }
.tribe-badge i { color: #fff4d2; background: #66813c; }
.card-heading h2 { color: #493927; }
.status-dot { background: #ae9e84; }
.status-dot.active { background: #79a14a; box-shadow: 0 0 0 4px rgba(121,161,74,.17); }
.queue-icon,
.empty-state > span,
.unit-avatar,
.catalog-icon,
.building-hero-icon > span,
.report-icon,
.movement-icon { color: #fff3cf; border-color: #9a7540; background: linear-gradient(#819b50,#4c682d); box-shadow: inset 0 1px rgba(255,255,255,.25),0 3px 7px rgba(55,40,21,.18); }
.queue-active span,
.empty-state p,
.production-card small,
.production-card em,
.production-card > i,
.shortcut-card small,
.building-detail-copy p,
.catalog-copy p,
.training-queue-row small,
.training-queue-row > span:last-child,
.unit-head small,
.unit-meta,
.report-row small,
.movement-row small,
.report-row > span:last-child,
.movement-row > span:last-child { color: var(--muted); }
.progress-track { background: rgba(91,67,36,.14); box-shadow: inset 0 1px 2px rgba(67,48,26,.18); }
.progress-track span { background: linear-gradient(90deg,#5d7b31,#91ad57); }
.credit-card { color: #4a3b28; border-color: #9b8058; background: linear-gradient(#f4e8c9,#d8c59d); }
.credit-card .eyebrow { color: #806d50; }
.credit-count strong { color: #557231; text-shadow: none; }
.credit-count span,
.credit-card > small { color: #786e5d; }
.production-card,
.shortcut-card,
.unit-card,
.research-card,
.training-queue,
.inline-queue,
.catalog-building,
.building-detail,
.map-card,
.map-detail,
.stats-totals article {
    color: var(--ink);
    border-color: #a18a65;
    background: linear-gradient(#fffaf0,#e9dfc8);
    box-shadow: var(--shadow-sm),inset 0 1px rgba(255,255,255,.65);
}
.shortcut-card:hover { color: #405a25; border-color: #769047; box-shadow: var(--shadow); }
.shortcut-card > span { color: #fff3cf; border-color: #9a7540; background: linear-gradient(#819b50,#4c682d); }
.production-card > i,
.training-queue-row,
.report-row,
.movement-row { border-color: var(--line-soft); }
.field-board {
    border-color: #8e7049;
    background: linear-gradient(rgba(240,233,213,.92),rgba(215,205,182,.94)),url("images/village-starter-scene-v1.jpg") center/cover;
}
.field-card,
.field-card.resource-wood,
.field-card.resource-clay,
.field-card.resource-iron,
.field-card.resource-crop {
    color: var(--ink);
    border-color: #9d825b;
    background: linear-gradient(#fff9e9,#e3d7bd);
    box-shadow: var(--shadow-sm);
}
.field-card > small { color: var(--muted); }
.level-badge { color: #fff8dc; background: linear-gradient(#7f9d4d,#4e6b2e); box-shadow: inset 0 1px rgba(255,255,255,.28); }
.cost-row span { color: #514535; border-color: var(--line-soft); background: rgba(255,255,255,.38); }
.cost-row .cost-wood { color: #65492e; background: #eadac3; }
.cost-row .cost-clay { color: #8a432b; background: #ecd5c7; }
.cost-row .cost-iron { color: #52615f; background: #dde2dd; }
.cost-row .cost-crop { color: #80601e; background: #eee2b9; }
.city-board {
    border-color: #765536;
    background: linear-gradient(rgba(73,59,40,.15),rgba(47,37,25,.28)),url("images/village-travian-style-v3.jpg") center/cover;
    box-shadow: inset 0 0 70px rgba(45,32,17,.28),var(--shadow);
}
.city-board::after { background: radial-gradient(circle at center,transparent 25%,rgba(45,34,23,.12) 65%,rgba(36,26,17,.36)); }
.city-ring { border-color: rgba(255,235,187,.46); }
.building-slot { color: #493927; border-color: #9c7b4c; background: rgba(255,249,232,.88); box-shadow: 0 5px 13px rgba(49,35,18,.25),inset 0 1px #fff; }
.building-slot:hover { color: #385122; border-color: #66823a; background: rgba(250,247,230,.96); }
.building-slot i { color: #fff2cb; border-color: #9a7540; background: linear-gradient(#819b50,#4c682d); }
.building-slot small { color: #746957; }
.sub-tabs { border-color: #9c815b; background: #e1d6be; }
.sub-tabs a { color: #675b49; }
.sub-tabs a.active { color: #fff6d7; background: linear-gradient(#7c9c49,#4d6c2b); }
.time-pill { color: #4f6b2c; border-color: #9b8058; background: #e8e3cd; }
.research-card.researched { border-color: #78984b; background: linear-gradient(#f1f5df,#dce6bc); }
.max-level,
.researched-label { color: #456523; border-color: #89a95d; background: #e3edcf; }
.world-map { border-color: #8c6b43; background: #87986e; box-shadow: inset 0 0 25px rgba(62,46,26,.24); }
.map-controls a { color: #4f642e; border-color: #9b8058; background: #f4ecd9; }
.map-tile,
.map-tile:nth-child(3n) { color: #32431f; border-color: rgba(70,59,38,.38); background: linear-gradient(#9aae75,#738c58); }
.map-tile.occupied { color: #fff1c7; background: linear-gradient(#9f7748,#614326); }
.map-tile.own { outline-color: #f2d078; }
.map-tile.empty small { color: rgba(46,61,29,.7); }
.map-village-icon { color: #fff0c4; border-color: #af8549; background: linear-gradient(#829b50,#4c682d); }
.ranking-table th { color: #5f543f; background: #ddd2bb; }
.ranking-table td { border-color: var(--line-soft); }
.ranking-table tbody tr:hover td { background: rgba(121,151,74,.1); }
.ranking-table tr.current-player td { background: rgba(121,151,74,.16); }
.rank-number { color: #5c503d; background: #e4dac4; }

.mobile-bottom-nav,
.mobile-sheet,
.sheet-backdrop { display: none; }

/* Admin remains operational but shares the same material system */
.admin-body { color: var(--ink); background: #d8d0bd; }
.admin-sidebar {
    border-right-color: #705536;
    background: linear-gradient(180deg,#665039,#493624);
    box-shadow: 7px 0 18px rgba(49,34,18,.22);
}
.admin-nav a { color: #ddcfb2; }
.admin-nav a span { border-color: rgba(237,213,160,.2); background: rgba(36,27,18,.24); }
.admin-nav a.active { color: #fff3c9; background: linear-gradient(90deg,#789947,#486827); box-shadow: inset 3px 0 #e0bd6c,0 4px 8px rgba(31,22,12,.2); }
.admin-profile { border-color: rgba(237,213,160,.24); background: rgba(36,27,18,.24); }
.admin-profile > span { color: #fff1c5; background: linear-gradient(#7f9b4e,#4c682c); }
.admin-content { color: var(--ink); }
.admin-metric-grid article,
.admin-status-card,
.queue-health-card,
.admin-table-card,
.admin-form-section,
.cron-card { color: var(--ink); border-color: #a18a65; background: linear-gradient(#fffaf0,#e9dfc8); box-shadow: var(--shadow-sm); }
.admin-metric-grid strong,
.admin-form-section h2,
.admin-table-card h2 { color: #493927; }
.admin-mobile-header { border-color: #705536; background: linear-gradient(#665039,#493624); }

@media (max-width: 1260px) {
    .game-header-inner { grid-template-columns: 170px auto minmax(360px,1fr) auto; padding-inline: 10px; }
    .header-game-nav .nav-item { min-width: 54px; }
    .immersive-game-layout { grid-template-columns: 215px minmax(500px,1fr) 250px; padding-inline: 0; }
    .building-card { width: 230px; }
}

@media (max-width: 1050px) {
    .game-header-inner { grid-template-columns: 165px minmax(390px,1fr) auto; }
    .header-game-nav { display: none; }
    .game-header .resource-bar { grid-column: 2; }
    .game-header .header-actions { grid-column: 3; }
    .immersive-game-layout { grid-template-columns: minmax(0,1fr) 250px; }
    .immersive-game-layout .left-rail { display: none; }
    .world-side-actions { display: grid; }
    .game-shell { grid-template-columns: 210px minmax(0,1fr); }
}

@media (max-width: 900px) {
    .site-header { height: 96px; }
    .site-header .header-inner { width: 100%; padding-inline: 14px; }
    .guest-nav > a:not(.button),
    .language-switch { display: none; }
    .guest-nav { gap: 7px; }
    .guest-nav .button { min-height: 43px; padding-inline: 13px; }
}

@media (max-width: 780px) {
    :root { --game-header-height: 111px; }
    .game-body { padding-top: var(--game-header-height); padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .game-header { height: var(--game-header-height); border-bottom-width: 3px; }
    .game-header-inner {
        grid-template-columns: 1fr auto;
        grid-template-rows: 53px 55px;
        gap: 0 8px;
        padding: 0;
    }
    .game-header .compact-brand { grid-row: 1; grid-column: 1; padding-left: 9px; }
    .game-header .compact-brand .brand-mark { width: 35px; height: 41px; flex-basis: 35px; border-radius: 7px 7px 13px 13px; font-size: 21px; }
    .game-header .compact-brand strong { font-size: 17px; }
    .game-header .header-actions { grid-row: 1; grid-column: 2; padding-right: 8px; }
    .game-header .header-actions .header-icon:first-child,
    .game-header .player-pill span { display: none; }
    .game-header .player-pill { padding: 2px; }
    .game-header .player-pill i { width: 34px; height: 34px; }
    .game-header .resource-bar { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 5px 6px 6px; background: rgba(37,27,17,.18); }
    .game-header .resource-item { height: 44px; grid-template-columns: 25px minmax(0,1fr); gap: 0 4px; padding: 4px; }
    .game-header .resource-item .resource-symbol { width: 24px; height: 24px; font-size: 10px; }
    .game-header .resource-copy strong { font-size: 11px; }
    .game-header .resource-copy small { display: none; }

    .game-page-dashboard { overflow: hidden; }
    .game-content-dashboard { width: 100%; height: calc(100dvh - var(--game-header-height) - 70px - env(safe-area-inset-bottom)); padding: 0; }
    .immersive-game-layout { display: block; width: 100%; height: 100%; }
    .immersive-game-layout .side-rail { display: none; }
    .play-stage { height: 100%; grid-template-rows: 44px minmax(0,1fr) auto; gap: 0; }
    .village-heading { min-height: 44px; padding: 4px 9px; border-bottom: 1px solid #9a825e; background: linear-gradient(#f9f3e3,#dfd3bb); box-shadow: inset 0 1px #fff; }
    .village-heading small { font-size: 9px; }
    .village-heading h1 { font-size: 20px; }
    .coords { min-width: 76px; min-height: 31px; font-size: 11px; }
    .village-world { border: 0; border-radius: 0; box-shadow: none; }
    .village-world > img { object-position: center; }
    .world-badge { top: 7px; min-height: 27px; padding: 4px 7px; font-size: 8px; }
    .server-badge { left: 7px; }
    .protection-badge { right: 7px; }
    .world-side-actions { display: grid; left: 7px; }
    .floating-action { width: 39px; height: 39px; }
    .building-point { width: 25px; height: 25px; border-width: 1px; font-size: 10px; box-shadow: 0 0 0 2px rgba(70,50,28,.28),0 3px 7px rgba(46,32,17,.38); }
    .building-card { display: none; }
    .world-view-switch { right: 7px; bottom: 7px; left: auto; padding: 3px; transform: none; }
    .view-button { min-width: 43px; min-height: 38px; padding: 5px 8px; }
    .view-button b { display: none; }
    .view-button span { font-size: 20px; }
    .activity-row { grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px 6px; border-top: 2px solid #79603f; background: linear-gradient(#eee5d1,#d5c7aa); }
    .activity-card { min-height: 55px; grid-template-columns: 34px minmax(0,1fr); gap: 6px; padding: 6px; }
    .activity-icon { width: 34px; height: 34px; font-size: 15px; }
    .activity-card strong { font-size: 10px; }
    .activity-card small { display: none; }
    .activity-card time,
    .activity-card > b { grid-column: 2; font-size: 9px; }

    .game-page-section { overflow-y: auto; }
    .game-shell { display: block; width: 100%; min-height: calc(100dvh - var(--game-header-height)); }
    .game-sidebar { display: none; }
    .game-page-section .game-content { width: 100%; max-width: none; padding: 18px 12px 92px; }
    .page-heading { align-items: flex-start; margin-bottom: 16px; }
    .page-heading h1 { font-size: 30px; }
    .page-heading p { font-size: 12px; }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        height: calc(70px + env(safe-area-inset-bottom));
        grid-template-columns: repeat(5,minmax(0,1fr));
        padding: 4px 5px env(safe-area-inset-bottom);
        border-top: 3px solid #715536;
        background: linear-gradient(#f5eedc,#d4c5a6);
        box-shadow: 0 -7px 18px rgba(48,34,18,.28);
    }
    .mobile-bottom-nav .nav-item {
        display: grid;
        min-width: 0;
        height: 61px;
        grid-template-rows: 34px auto;
        place-items: center;
        padding: 3px 1px;
        border: 0;
        border-radius: 7px;
        color: #655b4b;
        background: transparent;
        box-shadow: none;
    }
    .mobile-bottom-nav .nav-item span { font-size: 23px; }
    .mobile-bottom-nav .nav-item small { font-size: 9px; font-weight: 800; }
    .mobile-bottom-nav .nav-item.active { color: #fff5d4; background: linear-gradient(#789846,#4c6b2b); box-shadow: inset 0 1px rgba(255,255,255,.25),0 2px 5px rgba(48,61,25,.25); }

    .sheet-backdrop { position: fixed; z-index: 79; inset: 0 0 calc(70px + env(safe-area-inset-bottom)); background: rgba(40,31,21,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .sheet-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
    .mobile-sheet { position: fixed; z-index: 80; right: 7px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 7px; display: block; max-height: min(470px,calc(100dvh - 150px)); overflow: auto; border: 1px solid #826642; border-radius: 10px 10px 6px 6px; background: repeating-linear-gradient(0deg,transparent 0 4px,rgba(91,65,34,.018) 4px 5px),linear-gradient(#fff9e9,#e3d6ba); box-shadow: 0 15px 38px rgba(39,27,14,.4),inset 0 0 0 2px rgba(255,255,255,.48); opacity: 0; pointer-events: none; transform: translateY(24px); transition: .22s ease; }
    .mobile-sheet.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .sheet-handle { width: 45px; height: 4px; margin: 8px auto 0; border-radius: 8px; background: #a08d6d; }
    .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 14px 8px; border-bottom: 1px solid var(--line-soft); }
    .sheet-head small { display: block; color: #7e6b4e; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .sheet-head h2 { margin: 3px 0 0; color: #493927; font-family: Georgia,serif; font-size: 21px; }
    .sheet-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #a08864; border-radius: 50%; color: #554633; background: rgba(255,255,255,.35); font-size: 18px; }
    .sheet-content { padding: 12px 14px 15px; }
    .sheet-content p { margin: 0; color: #6f6453; font-size: 13px; line-height: 1.45; }
    .sheet-content .build-button { margin-top: 12px; }

    .admin-content { padding-bottom: 90px; }
}

@media (max-width: 620px) {
    .site-header { height: 92px; }
    .site-header .header-inner { gap: 7px; padding-inline: 10px; }
    .site-header .site-brand { gap: 7px; }
    .site-header .brand-mark { width: 42px; height: 50px; }
    .site-header .site-brand strong { font-size: 18px; }
    .site-header .site-brand small { display: none; }
    .guest-nav .button { min-height: 40px; padding: 8px 10px; font-size: 10px; }
    .portal-hero { border-top: 0; }
    .login-metal-card,
    .parchment-card { border-color: #9c7848; background: linear-gradient(#fffaf0,#e8dcc2); }
}

@media (max-width: 390px) {
    .game-header .compact-brand strong { font-size: 15px; }
    .game-header .resource-item { grid-template-columns: 22px minmax(0,1fr); }
    .game-header .resource-item .resource-symbol { width: 21px; height: 21px; font-size: 9px; }
    .game-header .resource-copy strong { font-size: 10px; }
    .world-badge { letter-spacing: .02em; }
    .protection-badge { display: none; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.2 — bright illustrated fields and visible account exit
   -------------------------------------------------------------------------- */

.logout-button small { display: none; }
.logout-button > span {
    display: block;
    font-size: 19px;
    line-height: 1;
}
.logout-button {
    color: #fff0c7;
    border-color: #b88d4d;
    background: linear-gradient(#93613b,#5d3827);
    box-shadow: inset 0 1px rgba(255,255,255,.22),0 2px 5px rgba(41,26,15,.24);
}
.logout-button:hover {
    color: #fff8de;
    border-color: #d5ae67;
    background: linear-gradient(#a87342,#6b4028);
}

.realm-field-map::after {
    background: linear-gradient(180deg,rgba(255,255,255,.025),transparent 17%,transparent 87%,rgba(24,63,27,.12));
}

@media (max-width: 780px) {
    .game-header .header-actions { gap: 5px; }
    .game-header .logout-button { display: grid; }
    .game-header .logout-button > span { font-size: 18px; }
}

@media (max-width: 390px) {
    .game-header .header-actions { gap: 3px; padding-right: 5px; }
    .game-header .header-icon,
    .game-header .logout-button { width: 35px; height: 35px; }
}

@media (max-height: 650px) and (max-width: 780px) {
    .activity-row { display: none; }
    .play-stage { grid-template-rows: 40px minmax(0,1fr); }
    .village-heading { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   Travia 1.9 — one visual language from the portal into the living game
   -------------------------------------------------------------------------- */

:root {
    --realm-emerald: #071b15;
    --realm-emerald-deep: #03100c;
    --realm-emerald-soft: #123427;
    --realm-gold: #d9ad58;
    --realm-gold-light: #f3d68f;
    --realm-bronze: #76532d;
    --realm-paper: #eee3c9;
    --realm-paper-deep: #d7c5a2;
    --realm-ink: #40321f;
}

.game-page-immersive {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -20%, rgba(176,135,67,.18), transparent 38%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.013) 0 1px, transparent 1px 8px),
        #1b160f;
}

.game-content-immersive {
    width: min(1580px, 100%);
    height: calc(100dvh - var(--game-header-height));
    min-height: 0;
    margin-inline: auto;
    padding: 10px;
}

.game-content-immersive > .game-flashes {
    position: fixed;
    z-index: 100;
    top: calc(var(--game-header-height) + 8px);
    left: 50%;
    width: min(620px, calc(100% - 24px));
    margin: 0;
    transform: translateX(-50%);
}

.realm-screen {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: 54px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #5f4327;
    border-radius: 8px;
    background: linear-gradient(155deg, #3b2d1e, #1a150f);
    box-shadow: 0 16px 40px rgba(0,0,0,.38), inset 0 0 0 1px rgba(246,214,150,.08);
}

.realm-titlebar {
    position: relative;
    z-index: 20;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 12px 6px 17px;
    border-bottom: 2px solid #826037;
    color: var(--realm-ink);
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(83,57,28,.022) 4px 5px),
        linear-gradient(#fff8e7, #d9c7a6);
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 3px 9px rgba(29,20,11,.22);
}

.realm-titlebar small {
    display: block;
    color: #79684d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1.15;
    text-transform: uppercase;
}

.realm-titlebar h1 {
    overflow: hidden;
    margin: 2px 0 0;
    color: #44331f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1;
    text-overflow: ellipsis;
    text-shadow: 0 1px rgba(255,255,255,.75);
    white-space: nowrap;
}

.realm-title-actions { display: flex; min-width: 0; align-items: center; gap: 8px; }
.realm-coordinates,
.realm-world-state,
.realm-production,
.realm-instruction {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #9a815c;
    border-radius: 5px;
    color: #584a36;
    background: rgba(255,250,237,.56);
    box-shadow: inset 0 1px rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}
.realm-world-state i { width: 8px; height: 8px; border-radius: 50%; background: #71a849; box-shadow: 0 0 0 3px rgba(113,168,73,.18); }
.realm-production b { color: #4f6d30; }
.realm-instruction { color: #6c5c43; }
.realm-coordinates { min-width: 82px; justify-content: center; color: #4f6d30; }

.realm-workspace {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 318px;
    background: #16120d;
}

.realm-map-panel {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border-right: 2px solid #73512d;
    background:
        radial-gradient(circle at 50% 35%, rgba(154,122,69,.22), transparent 47%),
        linear-gradient(145deg, #152319, #080e0b 65%, #17120d);
}

.realm-map {
    position: relative;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 941 / 1672;
    overflow: hidden;
    background: #172017;
    box-shadow: 0 0 0 1px rgba(221,176,91,.32), 0 0 42px rgba(0,0,0,.5);
    isolation: isolate;
}

.realm-map::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,12,8,.06), transparent 18%, transparent 72%, rgba(3,8,5,.34));
    content: "";
}

.realm-map-background { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.map-ribbon {
    position: absolute;
    z-index: 12;
    top: 10px;
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(111,79,40,.72);
    border-radius: 4px;
    color: #4d3d28;
    background: rgba(250,241,218,.9);
    box-shadow: 0 3px 9px rgba(37,25,12,.28);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.map-ribbon-left { left: 10px; }
.map-ribbon-right { right: 10px; }
.map-ribbon i { width: 8px; height: 8px; border-radius: 50%; background: #77a64d; box-shadow: 0 0 0 3px rgba(119,166,77,.18); }

.city-map-slot {
    position: absolute;
    z-index: 7;
    top: var(--slot-y);
    left: var(--slot-x);
    color: #fff5cf;
    transform-origin: 50% 85%;
}
.city-map-slot.is-empty {
    display: grid;
    width: 7.8%;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255,240,202,.9);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, rgba(130,170,73,.96), rgba(45,83,31,.94) 72%);
    box-shadow: 0 0 0 3px rgba(69,48,26,.34), 0 4px 9px rgba(27,18,9,.45), inset 0 1px rgba(255,255,255,.35);
    transform: translate(-50%, -50%);
}
.city-map-slot.is-empty i { font-size: clamp(12px, 1.25vw, 19px); font-style: normal; line-height: 1; }
.city-map-slot.is-empty span,
.city-map-slot.is-built > span,
.city-map-slot.is-constructing > span {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    padding: 3px 6px;
    border: 1px solid rgba(116,83,43,.72);
    border-radius: 3px;
    color: #4b3b27;
    background: rgba(250,241,218,.94);
    box-shadow: 0 2px 5px rgba(29,20,11,.25);
    font-size: 8px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -3px);
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.city-map-slot.is-built {
    width: 17%;
    aspect-ratio: 1;
    transform: translate(-50%, -68%) scale(var(--slot-scale, 1));
}
.city-map-slot.is-built img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px rgba(21,14,7,.46));
    transition: filter .16s, transform .16s;
}
.city-map-slot.is-built > b {
    position: absolute;
    right: 13%;
    bottom: 14%;
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding-inline: 4px;
    border: 2px solid #fae8b4;
    border-radius: 50%;
    color: #fff9df;
    background: linear-gradient(#749a42, #456629);
    box-shadow: 0 2px 5px rgba(27,18,9,.42);
    font-family: Georgia, serif;
    font-size: 10px;
}
.city-map-slot:hover { color: #fff; }
.city-map-slot.is-empty:hover { background: radial-gradient(circle at 38% 30%, #f3d77f, #a76b1e 75%); transform: translate(-50%, -50%) scale(1.12); }
.city-map-slot.is-built:hover img { filter: drop-shadow(0 0 8px rgba(255,218,128,.72)) drop-shadow(0 7px 5px rgba(21,14,7,.5)); transform: translateY(-3px) scale(1.04); }
.city-map-slot:hover > span,
.city-map-slot:focus-visible > span { opacity: 1; transform: translate(-50%, 0); }
.city-map-slot:focus-visible,
.field-map-slot:focus-visible { outline: 3px solid #ffe7a1; outline-offset: 3px; }

.realm-map-switch {
    position: absolute;
    z-index: 15;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #76552f;
    border-radius: 7px;
    background: rgba(246,236,211,.94);
    box-shadow: 0 5px 14px rgba(31,20,10,.38), inset 0 1px #fff;
}
.realm-map-switch a {
    display: flex;
    min-width: 78px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 4px;
    color: #6e624f;
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.realm-map-switch a span { font-size: 18px; }
.realm-map-switch a:hover,
.realm-map-switch a.active { color: #fff5d5; background: linear-gradient(#789848, #496a2b); box-shadow: inset 0 1px rgba(255,255,255,.25); }

.realm-command {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--realm-ink);
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(91,65,34,.025) 4px 5px),
        radial-gradient(circle at 50% 0, rgba(255,255,255,.56), transparent 34%),
        linear-gradient(#eee4ce, #d4c39f);
    box-shadow: inset 8px 0 20px rgba(72,48,23,.12);
    scrollbar-color: #9b7e55 transparent;
    scrollbar-width: thin;
}
.realm-command > section { border-bottom: 1px solid rgba(108,78,43,.22); }
.realm-command-head { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; padding: 14px; }
.realm-hero-mark,
.realm-crest-small {
    display: grid;
    width: 52px;
    height: 58px;
    place-items: center;
    border: 2px solid #b68b47;
    border-radius: 10px 10px 18px 18px;
    color: #f8dc91;
    background: linear-gradient(145deg, #174032, #061b14);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.07), 0 4px 9px rgba(50,34,17,.22);
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 800;
}
.realm-command-head div { min-width: 0; }
.realm-command-head small,
.realm-command-head span { display: block; color: #7a6a51; font-size: 10px; }
.realm-command-head strong { display: block; overflow: hidden; margin: 2px 0; color: #44341f; font-family: Georgia, serif; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.realm-progress { padding: 0 14px 14px; }
.realm-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; color: #73634b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.realm-progress > div:first-child strong { color: #4f6c31; font-size: 14px; }
.realm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.realm-facts span { padding: 7px; border: 1px solid rgba(119,91,55,.25); border-radius: 4px; color: #786a55; background: rgba(255,255,255,.24); font-size: 10px; }
.realm-facts b { float: right; color: #4b3d29; }
.realm-command-section { padding: 13px 14px; }
.realm-section-label { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 8px; color: #75654c; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.realm-section-label a { color: #4f6b31; font-size: 9px; }
.realm-section-label > b { color: #4f6b31; }
.realm-task,
.realm-empty-note {
    display: grid;
    width: 100%;
    min-height: 52px;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(126,94,55,.35);
    border-radius: 5px;
    color: #473924;
    background: rgba(255,255,255,.29);
    box-shadow: inset 0 1px rgba(255,255,255,.38);
}
.realm-task:hover { color: #3e4f28; border-color: #718d47; background: rgba(236,241,216,.72); }
.realm-task > i,
.realm-empty-note > i,
.city-legend p > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #fff2c5;
    background: linear-gradient(#79994a, #4a682c);
    box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 5px rgba(45,30,14,.2);
    font-style: normal;
}
.realm-task strong,
.realm-task small,
.realm-empty-note strong,
.realm-empty-note small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.realm-task strong,
.realm-empty-note strong { font-size: 11px; }
.realm-task small,
.realm-empty-note small { margin-top: 2px; color: #7c705e; font-size: 9px; }
.realm-task time,
.realm-task > b { color: #587238; font-size: 9px; font-weight: 850; }
.realm-task-progress { display: block; height: 5px; margin: -3px 4px 0; overflow: hidden; border-radius: 0 0 5px 5px; background: rgba(92,68,37,.17); }
.realm-task-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #5f7f38, #9ab85c); }
.realm-field-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.realm-field-levels > span { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 6px; border: 1px solid rgba(118,89,53,.25); border-radius: 4px; background: rgba(255,255,255,.27); }
.realm-field-levels i,
.field-cost-grid i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff8df; background: #6e8650; font-family: Georgia,serif; font-size: 9px; font-style: normal; font-weight: 850; }
.realm-field-levels .clay i,
.field-cost-grid .clay i { background: #a85e3a; }
.realm-field-levels .iron i,
.field-cost-grid .iron i { background: #677677; }
.realm-field-levels .crop i,
.field-cost-grid .crop i { background: #b98f2e; }
.realm-field-levels small { overflow: hidden; color: #7d705c; font-size: 8px; text-overflow: ellipsis; }
.realm-field-levels b { color: #493a26; font-size: 10px; }
.realm-village-picker form { margin: 0; }
.realm-village-picker form + form { margin-top: 4px; }
.realm-village-picker button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 7px 8px; border: 1px solid rgba(119,88,52,.28); border-radius: 4px; color: #4b3c28; background: rgba(255,255,255,.24); }
.realm-village-picker button:disabled { color: #fff5d1; background: linear-gradient(#799848,#4a692b); }
.realm-village-picker small { font-size: 9px; }
.realm-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 13px 14px 16px; }
.realm-quick-links a { position: relative; display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #997c53; border-radius: 5px; color: #4d3e2b; background: linear-gradient(#fff7e6,#d7c6a4); box-shadow: inset 0 1px #fff; font-size: 11px; font-weight: 800; }
.realm-quick-links a:hover { color: #fff4d0; border-color: #567232; background: linear-gradient(#7a994a,#4a692b); }
.realm-quick-links b { position: absolute; top: -5px; right: -4px; display: grid; min-width: 18px; height: 18px; place-items: center; padding-inline: 4px; border-radius: 10px; color: #fff; background: #a44632; font-size: 8px; }

.realm-command-intro { text-align: center; }
.realm-command-intro .realm-crest-small { margin: 0 auto 9px; }
.realm-command-intro > small { color: #876a3e; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.realm-command-intro h2 { margin: 4px 0 7px; color: #45351f; font-family: Georgia,serif; font-size: 20px; }
.realm-command-intro p { margin: 0; color: #786b58; font-size: 11px; line-height: 1.5; }
.city-legend p { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; margin: 7px 0 0; }
.city-legend .legend-empty { color: #fff5d1; background: linear-gradient(#78994a,#4a692c); }
.city-legend .legend-built { background: linear-gradient(#a47a3c,#694921); }
.city-legend strong,
.city-legend small { display: block; }
.city-legend strong { color: #493b28; font-size: 11px; }
.city-legend small { margin-top: 2px; color: #7c705e; font-size: 9px; }

.realm-field-map::after { background: linear-gradient(180deg,rgba(255,255,255,.025),transparent 17%,transparent 87%,rgba(24,63,27,.12)); }
.field-map-slot {
    position: absolute;
    z-index: 8;
    top: var(--slot-y);
    left: var(--slot-x);
    display: grid;
    width: 8.4%;
    aspect-ratio: 1;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    border: 2px solid #ffe9ae;
    border-radius: 50%;
    color: #fff9df;
    background: radial-gradient(circle at 35% 28%, #779651, #36562f 72%);
    box-shadow: 0 0 0 4px rgba(50,34,17,.35), 0 5px 10px rgba(18,13,7,.5), inset 0 1px rgba(255,255,255,.38);
    transform: translate(-50%, -50%);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.field-map-slot.resource-clay { background: radial-gradient(circle at 35% 28%, #ca7c4f, #7b3825 75%); }
.field-map-slot.resource-iron { background: radial-gradient(circle at 35% 28%, #93a09d, #4b5b5b 75%); }
.field-map-slot.resource-crop { background: radial-gradient(circle at 35% 28%, #e1bd58, #8b641b 75%); }
.field-map-slot i { grid-area: 1/1; font-family: Georgia,serif; font-size: clamp(10px, 1.1vw, 16px); font-style: normal; font-weight: 850; }
.field-map-slot > b { position: absolute; right: -5px; bottom: -5px; display: grid; min-width: 21px; height: 21px; place-items: center; padding-inline: 3px; border: 2px solid #fff0bd; border-radius: 50%; color: #fff8df; background: #34562b; font-size: 9px; }
.field-map-slot > span { position: absolute; top: calc(100% + 6px); left: 50%; padding: 3px 6px; border: 1px solid #7b5a32; border-radius: 3px; color: #4b3b27; background: rgba(250,241,218,.95); font-size: 8px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: .15s; white-space: nowrap; }
.field-map-slot:hover,
.field-map-slot.is-selected { box-shadow: 0 0 0 5px rgba(255,216,116,.38), 0 6px 12px rgba(18,13,7,.52), inset 0 1px rgba(255,255,255,.4); transform: translate(-50%, -50%) scale(1.12); }
.field-map-slot:hover > span,
.field-map-slot:focus-visible > span { opacity: 1; transform: translate(-50%, 0); }

.field-command { position: relative; }
.field-inspector-close { display: none; }
.field-detail-panel { padding: 15px 14px 13px; border-bottom: 1px solid rgba(108,78,43,.24); }
.field-detail-panel[hidden] { display: none !important; }
.field-detail-head { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; }
.field-detail-head > span { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #ae874c; border-radius: 50%; color: #fff3ca; background: radial-gradient(circle at 35% 28%,#7f9e58,#3d622f); box-shadow: inset 0 1px rgba(255,255,255,.3); font-family: Georgia,serif; font-size: 20px; font-weight: 850; }
.field-detail-panel.resource-clay .field-detail-head > span { background: radial-gradient(circle at 35% 28%,#ce8053,#783824); }
.field-detail-panel.resource-iron .field-detail-head > span { background: radial-gradient(circle at 35% 28%,#99a4a2,#4c5b5b); }
.field-detail-panel.resource-crop .field-detail-head > span { background: radial-gradient(circle at 35% 28%,#dfbd5f,#89631c); }
.field-detail-head small { color: #7b6a50; font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.field-detail-head h2 { margin: 2px 0; color: #44341f; font-family: Georgia,serif; font-size: 19px; line-height: 1.05; }
.field-detail-head p { margin: 0; color: #536b35; font-size: 10px; line-height: 1.2; }
.field-output { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 13px; }
.field-output > span { padding: 9px; border: 1px solid rgba(113,83,47,.27); border-radius: 5px; background: rgba(255,255,255,.28); }
.field-output small,
.field-output strong,
.field-output em { display: block; }
.field-output small { color: #7d705e; font-size: 8px; }
.field-output strong { margin: 2px 0; color: #4f6e31; font-family: Georgia,serif; font-size: 20px; }
.field-output em { color: #8a7d68; font-size: 8px; font-style: normal; }
.field-upgrade-box { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(111,80,44,.22); }
.field-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.field-cost-grid span { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(112,82,45,.25); border-radius: 4px; background: rgba(255,255,255,.28); }
.field-cost-grid b { color: #4b3c29; font-size: 10px; }
.field-time { margin: 9px 0; color: #766a58; font-size: 10px; line-height: 1.3; }
.field-time strong { color: #4c3c29; }
.field-upgrade-box .build-button { border: 1px solid #9a6e2d; color: #342617; background: linear-gradient(#f4d174,#bd7925); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 3px 7px rgba(66,42,16,.22); }
.field-upgrade-box .build-button:hover { color: #2d2115; background: linear-gradient(#ffe397,#ce8a31); }
.field-upgrade-box .build-button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .55; }
.field-queue-warning { display: block; margin-top: 7px; color: #89523a; font-size: 9px; text-align: center; }
.field-overview { padding: 13px 14px; }
.field-current-queue { border-top: 1px solid rgba(108,78,43,.22); }
.field-inspector-backdrop { display: none; }

/* The rest of the game uses the same emerald, timber and parchment materials. */
.game-page-section {
    background:
        linear-gradient(rgba(19,31,23,.13), rgba(39,28,17,.15)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 9px),
        #c8bda7;
}
.game-page-section .game-sidebar { border-color: #6e5031; background: linear-gradient(#3d3021,#261e17); }
.game-page-section .game-sidebar .paper-panel { color: var(--realm-ink); border-color: #9b7a4f; background: linear-gradient(#fff8e6,#ddceb0); }
.game-page-section .page-heading h1,
.game-page-section .card-heading h2 { color: #3f301e; }

@media (max-width: 1100px) {
    .realm-workspace { grid-template-columns: minmax(0,1fr) 286px; }
    .realm-command-head { grid-template-columns: 45px 1fr; }
    .realm-hero-mark { width: 45px; height: 51px; }
}

@media (max-width: 900px) {
    .game-content-immersive { padding: 7px; }
    .realm-workspace { grid-template-columns: minmax(0,1fr) 268px; }
    .realm-titlebar { padding-inline: 11px; }
    .realm-production { display: none; }
}

@media (max-width: 780px) {
    .game-page-immersive { padding-bottom: 0; overflow-x: hidden; overflow-y: auto; }
    .game-content-immersive { width: 100%; height: auto; min-height: calc(100dvh - var(--game-header-height) - 70px - env(safe-area-inset-bottom)); padding: 0 0 calc(70px + env(safe-area-inset-bottom)); }
    .realm-screen { display: block; height: auto; min-height: calc(100dvh - var(--game-header-height) - 70px - env(safe-area-inset-bottom)); overflow: visible; border-width: 0 0 2px; border-radius: 0; }
    .realm-titlebar { position: sticky; top: var(--game-header-height); z-index: 28; min-height: 52px; padding: 6px 9px 6px 12px; border-bottom-width: 2px; }
    .realm-titlebar h1 { max-width: 58vw; font-size: 21px; }
    .realm-titlebar small { max-width: 58vw; font-size: 8px; }
    .realm-title-actions { gap: 5px; }
    .realm-world-state,
    .realm-instruction { display: none; }
    .realm-coordinates { min-width: 70px; min-height: 31px; padding: 5px 7px; font-size: 10px; }
    .realm-workspace { display: block; }
    .realm-map-panel { display: block; width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 2px solid #71502e; }
    .realm-map { width: 100%; height: auto; max-width: none; aspect-ratio: 941 / 1672; box-shadow: none; }
    .map-ribbon { top: 8px; min-height: 27px; padding: 4px 7px; font-size: 8px; }
    .map-ribbon-left { left: 8px; }
    .map-ribbon-right { right: 8px; }
    .city-map-slot.is-empty { width: 8.2%; border-width: 1px; box-shadow: 0 0 0 2px rgba(69,48,26,.35),0 3px 7px rgba(27,18,9,.48),inset 0 1px rgba(255,255,255,.34); }
    .city-map-slot.is-empty i { font-size: 13px; }
    .city-map-slot.is-built { width: 19%; }
    .city-map-slot.is-built > b { min-width: 20px; height: 20px; border-width: 1px; font-size: 9px; }
    .city-map-slot.is-empty span,
    .city-map-slot.is-built > span,
    .city-map-slot.is-constructing > span { display: none; }
    .realm-map-switch { right: 8px; bottom: 8px; }
    .realm-map-switch a { min-width: 43px; min-height: 39px; padding: 4px 8px; }
    .realm-map-switch a b { display: none; }
    .realm-map-switch a span { font-size: 20px; }

    .realm-screen-overview .realm-command,
    .realm-screen-city .realm-command { max-height: none; overflow: visible; border-top: 0; }
    .realm-screen-overview .realm-command-head,
    .realm-screen-overview .realm-progress { display: none; }
    .realm-command-section { padding: 14px 12px; }
    .realm-quick-links { padding-inline: 12px; }

    .field-map-slot { width: 9.2%; border-width: 1px; box-shadow: 0 0 0 2px rgba(50,34,17,.38),0 4px 8px rgba(18,13,7,.5),inset 0 1px rgba(255,255,255,.35); }
    .field-map-slot > b { right: -4px; bottom: -4px; min-width: 18px; height: 18px; border-width: 1px; font-size: 8px; }
    .field-map-slot > span { display: none; }
    .field-command {
        position: fixed;
        z-index: 82;
        right: 7px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 7px;
        max-height: min(590px, calc(100dvh - var(--game-header-height) - 94px - env(safe-area-inset-bottom)));
        overflow-y: auto;
        border: 2px solid #79572f;
        border-radius: 9px;
        box-shadow: 0 18px 44px rgba(0,0,0,.58), inset 0 0 0 2px rgba(255,255,255,.45);
        opacity: 0;
        pointer-events: none;
        transform: translateY(28px);
        transition: opacity .2s ease, transform .2s ease;
    }
    .field-sheet-open .field-command { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .field-inspector-close { position: sticky; z-index: 3; top: 7px; float: right; display: grid; width: 34px; height: 34px; margin: 7px 7px -41px 0; place-items: center; border: 1px solid #96764d; border-radius: 50%; color: #59462e; background: rgba(255,248,231,.94); font-size: 18px; }
    .field-overview,
    .field-current-queue { display: none; }
    .field-inspector-backdrop { position: fixed; z-index: 81; inset: var(--game-header-height) 0 calc(70px + env(safe-area-inset-bottom)); border: 0; background: rgba(9,10,7,.54); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .field-sheet-open .field-inspector-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .field-detail-panel { padding: 17px 14px 15px; }
}

@media (max-width: 390px) {
    .realm-titlebar h1,
    .realm-titlebar small { max-width: 55vw; }
    .map-ribbon-right { display: none; }
    .realm-field-levels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .city-map-slot,
    .city-map-slot img,
    .field-map-slot,
    .field-command,
    .field-inspector-backdrop { transition: none !important; }
}

/* Three-step registration, using the same parchment and heraldry as the game. */
.registration-flow { background: linear-gradient(rgba(16,25,18,.12),rgba(21,16,10,.3)), url("images/travia-auth-valley-v1.jpg") center/cover fixed; }
.registration-wizard { max-width: 940px; margin-inline: auto; }
.wizard-progress { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; margin: 3px auto 25px; padding: 0 8%; }
.wizard-progress button { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; color: #81735f; background: transparent; cursor: pointer; }
.wizard-progress button i { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #a78d67; border-radius: 50%; color: #776449; background: rgba(255,250,238,.62); font-family: Georgia,serif; font-size: 12px; font-style: normal; font-weight: 800; }
.wizard-progress button span { font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.wizard-progress > b { height: 1px; background: linear-gradient(90deg, #b29567, #d7c29c, #b29567); }
.wizard-progress button.is-active { color: #4d642f; }
.wizard-progress button.is-active i { border-color: #587633; color: #fff5d2; background: linear-gradient(#7f9e4d,#4b6a2a); box-shadow: 0 0 0 3px rgba(98,125,56,.13); }
.wizard-progress button.is-complete i { border-color: #936d35; color: #3c2d1c; background: linear-gradient(#f1d174,#bf802b); }
.wizard-step { position: relative; z-index: 2; }
.wizard-step-heading { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 13px; margin-bottom: 20px; }
.wizard-step-heading > span { display: grid; width: 44px; height: 49px; place-items: center; border: 2px solid #a17b43; border-radius: 8px 8px 15px 15px; color: #f3d485; background: linear-gradient(#153a2d,#071c15); font-family: Georgia,serif; font-size: 15px; font-weight: 850; }
.wizard-step-heading small { display: block; color: #906f41; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.wizard-step-heading h2 { margin: 2px 0 4px; font-size: 25px; }
.wizard-step-heading p { margin: 0; color: #756a58; font-size: 11px; line-height: 1.45; }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 22px; }
.wizard-actions .button { min-width: 180px; border-radius: 4px; font-family: Georgia,serif; font-size: 12px; text-transform: uppercase; }
.wizard-actions .button-primary { border-color: #976b2c; color: #332416; background: linear-gradient(#f3d274,#b97724); box-shadow: inset 0 1px rgba(255,255,255,.55),0 4px 9px rgba(72,45,16,.2); }
.wizard-actions .button-primary:hover { color: #2f2114; background: linear-gradient(#ffe49a,#cb8830); }
.wizard-actions .button-ghost { border-color: #9e865f; color: #594a35; background: rgba(255,251,239,.5); }

.wizard-tribe-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.wizard-tribe-tab { position: relative; display: grid; min-width: 0; gap: 5px; padding: 7px 7px 9px; overflow: hidden; border: 2px solid #a0855f; border-radius: 5px; background: linear-gradient(#f8f1df,#d7c7a8); cursor: pointer; text-align: center; box-shadow: inset 0 1px #fff; }
.wizard-tribe-tab input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wizard-tribe-tab img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(74,52,28,.45); border-radius: 3px; filter: saturate(.86) contrast(1.04); }
.wizard-tribe-tab strong { overflow: hidden; color: #493925; font-family: Georgia,serif; font-size: 11px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.wizard-tribe-tab small { overflow: hidden; color: #7b6e5b; font-size: 7px; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.wizard-tribe-tab:has(input:checked) { border-color: #52702e; background: linear-gradient(#eef3dc,#c8d69f); box-shadow: 0 0 0 3px rgba(88,116,48,.16),inset 0 1px #fff; transform: translateY(-2px); }
.wizard-tribe-tab:has(input:checked)::after { position: absolute; top: 5px; right: 5px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #f7e7b4; border-radius: 50%; color: #fff7d7; background: #597936; box-shadow: 0 2px 5px rgba(43,29,14,.3); content: "✓"; font-size: 9px; font-weight: 900; }
.wizard-tribe-preview { display: grid; min-height: 205px; grid-template-columns: 1fr 210px; align-items: stretch; margin-top: 16px; overflow: hidden; border: 1px solid #9f8359; border-radius: 5px; background: radial-gradient(circle at 80% 30%,rgba(204,169,102,.2),transparent 28%),linear-gradient(115deg,#f7ecd4,#d7c6a4); box-shadow: 0 5px 13px rgba(64,43,20,.16),inset 0 1px #fff; }
.wizard-tribe-preview > div { align-self: center; padding: 20px 10px 20px 23px; }
.wizard-tribe-preview > div > small { color: #547133; font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.wizard-tribe-preview h3 { margin: 4px 0 8px; color: #493621; font-family: Georgia,serif; font-size: 27px; text-transform: uppercase; }
.wizard-tribe-preview p { margin: 0; color: #706452; font-size: 11px; line-height: 1.45; }
.wizard-tribe-preview ul { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; color: #5c503e; font-size: 9px; list-style: none; }
.wizard-tribe-preview li::before { margin-right: 7px; color: #62813c; content: "◆"; font-size: 7px; }
.wizard-tribe-preview > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; mask-image: linear-gradient(90deg,transparent,#000 22%); }

.world-quadrant-picker { position: relative; display: grid; max-width: 620px; aspect-ratio: 1.7; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; margin: 4px auto 15px; padding: 20px; background: radial-gradient(circle at 50% 50%,rgba(84,115,62,.22),transparent 19%),linear-gradient(145deg,rgba(92,116,69,.19),transparent 43%),repeating-linear-gradient(23deg,transparent 0 28px,rgba(119,87,46,.035) 29px 30px),#decba4; clip-path: polygon(4% 3%,49% 0,96% 4%,100% 48%,96% 97%,51% 100%,3% 96%,0 52%); filter: drop-shadow(0 6px 7px rgba(54,37,18,.25)); }
.world-quadrant-picker::before { position: absolute; inset: 20px; border: 1px solid rgba(104,75,39,.32); content: ""; pointer-events: none; }
.world-quadrant-picker .quadrant-choice { position: relative; min-width: 0; }
.world-quadrant-picker .quadrant-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.world-quadrant-picker .quadrant-choice > span { display: grid; height: 100%; min-height: 0; place-content: center; gap: 4px; padding: 12px; border: 1px solid rgba(103,74,38,.2); border-radius: 0; color: #5a4933; background: rgba(255,248,228,.23); box-shadow: none; text-align: center; }
.world-quadrant-picker .quadrant-choice i { font-size: 21px; font-style: normal; }
.world-quadrant-picker .quadrant-choice strong { font-family: Georgia,serif; font-size: 12px; }
.world-quadrant-picker .quadrant-choice:has(input:checked) > span { color: #fff4ce; border-color: #48642b; background: rgba(71,101,43,.9); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.world-quadrant-picker .quadrant-random { position: absolute; z-index: 3; top: 50%; left: 50%; width: 118px; height: 70px; transform: translate(-50%,-50%); }
.world-quadrant-picker .quadrant-random > span { border: 2px solid #a67838; border-radius: 5px; background: linear-gradient(#f2d278,#b97929); box-shadow: 0 5px 12px rgba(57,38,17,.28),inset 0 1px rgba(255,255,255,.55); }
.world-quadrant-picker .quadrant-random:has(input:checked) > span { border-color: #f4daa0; background: linear-gradient(#789848,#48692a); }
.world-quadrant-picker .quadrant-random i { font-size: 13px; }
.world-quadrant-picker .quadrant-random small { font-size: 7px; font-weight: 850; text-transform: uppercase; }

@media (max-width: 720px) {
    .registration-flow { padding-top: 74px; background-attachment: scroll; }
    .registration-wizard { padding: 58px 14px 26px; }
    .wizard-progress { padding-inline: 2%; }
    .wizard-progress button i { width: 28px; height: 28px; }
    .wizard-step-heading { grid-template-columns: 39px 1fr; }
    .wizard-step-heading > span { width: 39px; height: 45px; }
    .wizard-step-heading h2 { font-size: 22px; }
    .wizard-tribe-tabs { grid-template-columns: repeat(5,92px); overflow-x: auto; padding: 4px 3px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
    .wizard-tribe-tab { scroll-snap-align: center; }
    .wizard-tribe-preview { min-height: 190px; grid-template-columns: minmax(0,1fr) 145px; }
    .wizard-tribe-preview > div { padding: 16px 4px 16px 15px; }
    .wizard-tribe-preview h3 { font-size: 22px; }
    .world-quadrant-picker { aspect-ratio: 1.15; padding: 14px; }
    .world-quadrant-picker::before { inset: 14px; }
    .world-quadrant-picker .quadrant-choice strong { font-size: 10px; }
    .wizard-actions .button { min-width: 0; }
}

@media (max-width: 430px) {
    .wizard-progress button span { display: none; }
    .wizard-tribe-preview { min-height: 170px; grid-template-columns: 1fr 112px; }
    .wizard-tribe-preview p { font-size: 10px; }
    .wizard-tribe-preview ul { display: none; }
    .world-quadrant-picker .quadrant-choice i { font-size: 17px; }
    .world-quadrant-picker .quadrant-random { width: 102px; height: 63px; }
    .wizard-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .wizard-actions > span { display: none; }
    .wizard-actions .button:only-child { grid-column: 2; }
}

.realm-detail-heading { padding-bottom: 14px; border-bottom: 1px solid rgba(105,77,42,.22); }
.realm-building-detail { border: 2px solid #8d6b40; border-radius: 7px; background: linear-gradient(#fff8e6,#dfd0b3); box-shadow: 0 12px 28px rgba(58,39,19,.2),inset 0 0 0 2px rgba(255,255,255,.46); }
.building-art-card { position: relative; min-height: 250px; overflow: hidden; border: 1px solid #87643b; border-radius: 6px; background: radial-gradient(circle at 50% 68%,rgba(141,165,94,.5),transparent 40%),linear-gradient(#b7c9a0,#6f8d57); }
.building-art-card::after { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent,rgba(39,29,16,.3)); content: ""; }
.building-art-card img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(36,24,11,.35)); }
.building-art-card small { position: absolute; z-index: 3; right: 9px; bottom: 9px; padding: 5px 8px; border: 1px solid #e5c77f; border-radius: 4px; color: #fff4cc; background: #486329; box-shadow: 0 3px 7px rgba(39,26,12,.28); }
.realm-catalog-building { border-color: #9c8159; border-radius: 6px; background: linear-gradient(#fff8e6,#e4d6bb); }
.catalog-building-art { overflow: hidden; border: 1px solid #916b3d; border-radius: 5px; background: linear-gradient(#b7c89e,#78945f); }
.catalog-building-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(36,24,11,.3)); }

@media (max-width: 620px) {
    .building-art-card { min-height: 220px; }
    .catalog-building-art { width: 58px; height: 58px; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.1 — illustrated resource HUD and game navigation
   -------------------------------------------------------------------------- */

.game-header .resource-item .resource-symbol,
.sidebar-resource-row .resource-symbol {
    overflow: visible;
    border: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.game-header .resource-item .resource-symbol img,
.sidebar-resource-row .resource-symbol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(48,31,12,.34));
}
.game-header .resource-item {
    grid-template-columns: 44px minmax(0,1fr);
    height: 58px;
    padding: 5px 8px 6px 5px;
    border-color: #8d7048;
    background:
        linear-gradient(90deg,rgba(255,255,255,.48),transparent 42%),
        linear-gradient(#fffaf0,#d9ccb2);
}
.game-header .resource-item .resource-symbol {
    width: 42px;
    height: 42px;
}
.game-header .resource-copy strong { font-size: 14px; }
.game-header .resource-gauge { height: 5px; border-top: 1px solid rgba(91,67,37,.2); }
.game-header .resource-gauge i {
    border-right: 1px solid rgba(55,71,27,.45);
    background: linear-gradient(#a6c45d,#62852f);
    box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.header-game-nav .nav-item .nav-art,
.mobile-bottom-nav .nav-item .nav-art,
.realm-map-switch a .nav-art {
    display: grid;
    place-items: center;
}
.header-game-nav .nav-item .nav-art img,
.mobile-bottom-nav .nav-item .nav-art img,
.realm-map-switch a .nav-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(45,29,12,.38));
}
.header-game-nav .nav-item .nav-art { width: 31px; height: 31px; }
.header-game-nav .nav-item .nav-art img { width: 29px; height: 29px; }
.header-game-nav .nav-item.active .nav-art img { filter: drop-shadow(0 2px 3px rgba(32,20,8,.48)) saturate(1.08); }

/* On the landscape itself the art identifies the resource; the marker only
   communicates the field level, matching a classic map-first strategy UI. */
.field-map-slot,
.field-map-slot.resource-clay,
.field-map-slot.resource-iron,
.field-map-slot.resource-crop {
    width: 7.2%;
    border: 3px solid #82b817;
    color: #4b4538;
    background: linear-gradient(#fffef8,#eee8d8);
    box-shadow:
        0 0 0 2px rgba(255,255,255,.92),
        0 3px 7px rgba(31,24,13,.42),
        inset 0 1px rgba(255,255,255,.95);
}
.field-map-slot i {
    display: grid;
    width: 100%;
    height: 100%;
    grid-area: 1/1;
    place-items: center;
    color: #4b4538;
    font-family: Arial,sans-serif;
    font-size: clamp(9px,1vw,14px);
    font-style: normal;
    font-weight: 500;
}
.field-map-slot > b { display: none; }
.field-map-slot:hover,
.field-map-slot.is-selected {
    border-color: #a9d52b;
    background: linear-gradient(#fffef7,#f6edc7);
    box-shadow:
        0 0 0 3px rgba(255,248,205,.94),
        0 0 0 7px rgba(121,170,27,.34),
        0 5px 11px rgba(24,18,9,.5);
    transform: translate(-50%,-50%) scale(1.08);
}

.field-detail-head > span,
.field-detail-panel.resource-clay .field-detail-head > span,
.field-detail-panel.resource-iron .field-detail-head > span,
.field-detail-panel.resource-crop .field-detail-head > span {
    overflow: visible;
    border-color: #a58150;
    background: radial-gradient(circle,#fff8e5,#d9c7a6);
}
.field-detail-head > span img,
.realm-field-levels i img,
.field-cost-grid i img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(48,31,12,.3));
}
.realm-field-levels i,
.field-cost-grid i,
.realm-field-levels .clay i,
.field-cost-grid .clay i,
.realm-field-levels .iron i,
.field-cost-grid .iron i,
.realm-field-levels .crop i,
.field-cost-grid .crop i {
    overflow: visible;
    border-radius: 0;
    color: transparent;
    background: transparent;
}

.realm-map-switch a .nav-art { width: 31px; height: 31px; }
.realm-map-switch a .nav-art img { width: 30px; height: 30px; }
.realm-map-switch a.active .nav-art img { filter: drop-shadow(0 2px 3px rgba(42,27,10,.45)) saturate(1.08); }

@media (max-width: 780px) {
    .game-header .resource-bar { gap: 3px; padding: 4px 5px 5px; }
    .game-header .resource-item {
        height: 47px;
        grid-template-columns: 34px minmax(0,1fr);
        gap: 0 2px;
        padding: 3px 4px 5px 2px;
        border-radius: 4px;
    }
    .game-header .resource-item .resource-symbol { width: 34px; height: 34px; }
    .game-header .resource-copy strong { font-size: 12px; font-weight: 700; }

    .mobile-bottom-nav {
        padding: 3px 4px env(safe-area-inset-bottom);
        background: linear-gradient(#eee4ce,#c8b695);
    }
    .mobile-bottom-nav .nav-item {
        height: 63px;
        grid-template-rows: 45px auto;
        gap: 0;
        padding: 1px;
        overflow: visible;
    }
    .mobile-bottom-nav .nav-item .nav-art {
        width: 45px;
        height: 45px;
        border: 2px solid #7c6040;
        border-radius: 50%;
        background: radial-gradient(circle at 45% 38%,#f8f0dc,#b9a585 73%,#897252 74%);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.55),
            0 2px 4px rgba(50,35,18,.36);
    }
    .mobile-bottom-nav .nav-item .nav-art img { width: 38px; height: 38px; }
    .mobile-bottom-nav .nav-item small { color: #5e5547; font-size: 8px; line-height: 1; }
    .mobile-bottom-nav .nav-item.active { color: #fff5d4; background: transparent; box-shadow: none; }
    .mobile-bottom-nav .nav-item.active .nav-art {
        border-color: #e0ba69;
        background: radial-gradient(circle at 42% 35%,#648942,#2f5227 72%,#17341e 73%);
        box-shadow:
            inset 0 0 0 2px rgba(255,245,199,.44),
            0 0 0 2px #6f512d,
            0 3px 7px rgba(43,28,12,.46);
        transform: translateY(-3px) scale(1.05);
    }
    .mobile-bottom-nav .nav-item.active small { color: #49632d; }

    .field-map-slot,
    .field-map-slot.resource-clay,
    .field-map-slot.resource-iron,
    .field-map-slot.resource-crop {
        width: 7.4%;
        border-width: 2px;
        box-shadow: 0 0 0 2px rgba(255,255,255,.94),0 3px 6px rgba(31,24,13,.44),inset 0 1px #fff;
    }
    .field-map-slot i { font-size: 10px; }
    .field-map-slot:hover,
    .field-map-slot.is-selected {
        box-shadow: 0 0 0 2px rgba(255,249,214,.95),0 0 0 5px rgba(121,170,27,.34),0 4px 8px rgba(24,18,9,.5);
    }
    .realm-map-switch a .nav-art { width: 30px; height: 30px; }
    .realm-map-switch a .nav-art img { width: 28px; height: 28px; }
}

@media (max-width: 390px) {
    .game-header .resource-item { grid-template-columns: 29px minmax(0,1fr); }
    .game-header .resource-item .resource-symbol { width: 29px; height: 29px; }
    .game-header .resource-copy strong { font-size: 11px; }
    .mobile-bottom-nav .nav-item .nav-art { width: 42px; height: 42px; }
    .mobile-bottom-nav .nav-item .nav-art img { width: 35px; height: 35px; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.3 — illustrated village construction and parchment catalogue
   -------------------------------------------------------------------------- */

.logout-power-icon {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
}
.logout-power-icon::before {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 2px;
    height: 9px;
    border-radius: 2px;
    background: currentColor;
    content: "";
    transform: translateX(-50%);
}

.realm-screen-city .realm-map-panel {
    background: linear-gradient(#9dcfe8,#73a64d);
}
.realm-city-map::after {
    background: linear-gradient(180deg,rgba(255,255,255,.02),transparent 22%,transparent 82%,rgba(32,74,31,.08));
}
.city-map-slot.is-empty {
    width: 13%;
    aspect-ratio: 1.75;
    border: 0;
    border-radius: 50%;
    background: rgba(70,112,31,.42);
    box-shadow: inset 0 3px 8px rgba(36,75,21,.28),0 1px rgba(255,255,255,.18);
    transform: translate(-50%,-50%);
}
.city-map-slot.is-empty i {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.city-map-slot.is-empty i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(255,250,222,.92);
    content: "+";
    font-family: Georgia,serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: opacity .15s;
}
.city-map-slot.is-empty:hover,
.city-map-slot.is-empty:focus-visible {
    background: rgba(92,139,41,.62);
    box-shadow: inset 0 3px 9px rgba(36,75,21,.3),0 0 0 3px rgba(255,240,187,.76),0 4px 10px rgba(41,70,23,.3);
    transform: translate(-50%,-50%) scale(1.06);
}
.city-map-slot.is-empty:hover i::after,
.city-map-slot.is-empty:focus-visible i::after { opacity: 1; }

.city-map-slot.is-built,
.city-map-slot.is-constructing {
    width: 21%;
    aspect-ratio: 1.1;
    transform: translate(-50%,-68%) scale(var(--slot-scale,1));
}
.city-map-slot.is-built img,
.city-map-slot.is-constructing img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px rgba(45,54,22,.37));
    transition: filter .16s,transform .16s;
}
.city-map-slot.is-constructing { width: 24%; }
.city-map-slot.is-constructing img { animation: construction-pulse 1.8s ease-in-out infinite alternate; }
.city-map-slot.is-built > b,
.city-map-slot.is-constructing > b {
    position: absolute;
    right: 10%;
    bottom: 10%;
    display: grid;
    min-width: 23px;
    height: 23px;
    place-items: center;
    padding-inline: 4px;
    border: 2px solid #fff0bd;
    border-radius: 50%;
    color: #fff9df;
    background: linear-gradient(#83a947,#4c702b);
    box-shadow: 0 2px 5px rgba(27,18,9,.42);
    font-family: Georgia,serif;
    font-size: 10px;
}
.city-map-slot.is-constructing > time,
.city-map-slot.is-upgrading > time {
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    min-width: 58px;
    padding: 3px 6px;
    border: 1px solid #8e6b3e;
    border-radius: 9px;
    color: #4d3b26;
    background: rgba(255,247,223,.94);
    box-shadow: 0 2px 5px rgba(42,30,16,.25);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}
.city-map-slot.is-upgrading::after {
    position: absolute;
    top: 9%;
    left: 8%;
    padding: 3px 5px;
    border-radius: 7px;
    color: #fff5d7;
    background: #a06125;
    box-shadow: 0 2px 4px rgba(42,26,11,.25);
    content: "STATOMA";
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .05em;
}
@keyframes construction-pulse {
    from { filter: drop-shadow(0 6px 5px rgba(45,54,22,.32)); transform: translateY(0); }
    to { filter: drop-shadow(0 6px 7px rgba(226,167,65,.55)); transform: translateY(-3px); }
}

.building-market-screen {
    position: fixed;
    z-index: 30;
    top: var(--game-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    padding: 18px;
    overflow: hidden;
    place-items: start center;
}
.building-market-landscape,
.building-market-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.building-market-landscape { object-fit: cover; object-position: center 38%; }
.building-market-shade { background: rgba(43,35,22,.3); backdrop-filter: blur(1.5px); }
.building-dialog {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(900px,100%);
    max-height: calc(100dvh - var(--game-header-height) - 36px);
    flex-direction: column;
    overflow: hidden;
    border: 3px solid #7b6040;
    border-radius: 9px;
    color: #463827;
    background:
        repeating-linear-gradient(0deg,transparent 0 4px,rgba(91,65,34,.025) 4px 5px),
        linear-gradient(#fffaf0,#e8dec8);
    box-shadow: 0 18px 48px rgba(30,21,12,.48),inset 0 0 0 2px rgba(255,255,255,.64),inset 0 0 45px rgba(138,101,54,.1);
}
.building-dialog-titlebar {
    display: flex;
    min-height: 70px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px 11px 22px;
    border-bottom: 3px solid #604426;
    color: #fff5dd;
    background: linear-gradient(#88725d,#604937 58%,#4a3426 59%);
    box-shadow: inset 0 1px rgba(255,255,255,.32);
}
.building-dialog-titlebar small {
    display: block;
    color: #ead6ad;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.building-dialog-titlebar h1 {
    margin: 2px 0 0;
    color: #fff8e8;
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(23px,3vw,32px);
    line-height: 1;
    text-shadow: 0 2px #493321;
}
.building-dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 2px solid #e6d3a8;
    border-radius: 4px;
    color: #fff6da;
    background: linear-gradient(#769b49,#42652d);
    box-shadow: inset 0 0 0 2px rgba(46,76,33,.54),0 2px 5px rgba(29,20,11,.34);
    font-size: 27px;
    line-height: 1;
}
.building-dialog-close:hover { color: #fff; background: linear-gradient(#8bae54,#507637); }
.building-dialog-intro {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(107,78,43,.26);
    background: rgba(255,255,255,.22);
}
.building-dialog-intro p { margin: 0; color: #716553; font-size: 12px; line-height: 1.45; }
.building-category-tabs {
    display: grid;
    min-height: 48px;
    flex: 0 0 auto;
    grid-template-columns: repeat(3,1fr);
    padding: 4px;
    border-bottom: 2px solid #765534;
    background: #bca98b;
}
.building-category-tabs a {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,239,203,.26);
    color: #f4e4c5;
    background: linear-gradient(#735b4b,#503c31);
    font-size: 12px;
    font-weight: 800;
}
.building-category-tabs a + a { border-left: 0; }
.building-category-tabs a.is-active {
    color: #fff7d9;
    background: linear-gradient(#7e9e4b,#4b6b2b);
    box-shadow: inset 0 2px rgba(255,255,255,.2);
}
.building-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.building-offer-list { padding: 10px; }
.building-offer {
    display: grid;
    min-height: 205px;
    grid-template-columns: minmax(0,1fr) 210px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #a88d67;
    border-radius: 5px;
    background: radial-gradient(circle at 85% 40%,rgba(216,187,127,.26),transparent 30%),linear-gradient(105deg,#fffaf0,#eadfc8);
    box-shadow: 0 4px 10px rgba(68,47,24,.15),inset 0 1px #fff;
}
.building-offer:last-child { margin-bottom: 0; }
.building-offer-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 17px 6px 15px 18px; }
.building-offer-copy h2,
.building-upgrade-copy h2 { margin: 0 0 5px; color: #4a3825; font-family: Georgia,"Times New Roman",serif; font-size: 25px; }
.building-offer-copy p,
.building-upgrade-copy p { margin: 0; color: #6f6351; font-size: 12px; line-height: 1.45; }
.building-requirement { display: block; margin-top: 7px; color: #a14935; font-size: 10px; font-weight: 800; }
.building-offer-art { display: grid; min-width: 0; place-items: center; padding: 7px 10px 5px 0; }
.building-offer-art img { display: block; width: 100%; height: 100%; max-height: 190px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(68,48,23,.24)); }
.building-costs { display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; }
.building-cost,
.building-time {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid rgba(126,97,58,.25);
    border-radius: 4px;
    background: rgba(255,255,255,.42);
}
.building-cost img { width: 27px; height: 27px; object-fit: contain; }
.building-cost b,
.building-time b { color: #4c412f; font-size: 11px; }
.building-cost.is-missing { border-color: rgba(166,73,49,.34); background: rgba(194,83,55,.1); }
.building-cost.is-missing b { color: #a44231; }
.building-time { margin-left: auto; }
.building-time i { color: #5c6d78; font-size: 18px; font-style: normal; }
.building-offer form { width: 100%; margin-top: 8px; }
.building-action-button {
    display: grid;
    width: 100%;
    min-height: 39px;
    place-items: center;
    border: 2px solid #725028;
    border-radius: 4px;
    color: #fff8da;
    background: linear-gradient(#719843,#406625);
    box-shadow: inset 0 0 0 2px rgba(255,244,196,.28),0 2px 5px rgba(53,34,15,.25);
    font-family: Georgia,serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.building-action-button:hover { background: linear-gradient(#83aa50,#4b7530); }
.building-action-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .58; }
.building-offer.is-locked .building-offer-art { filter: grayscale(.7); opacity: .58; }

.building-upgrade-view {
    display: grid;
    grid-template-columns: 310px minmax(0,1fr);
    gap: 20px;
    padding: 24px;
}
.building-upgrade-art {
    position: relative;
    display: grid;
    min-height: 330px;
    place-items: center;
    border: 1px solid #aa8c62;
    border-radius: 6px;
    background: radial-gradient(circle,#f9edcf,#d8c49d);
    box-shadow: inset 0 1px #fff;
}
.building-upgrade-art img { display: block; width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 11px 8px rgba(65,44,21,.26)); }
.building-upgrade-art > b {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 6px 10px;
    border-radius: 12px;
    color: #fff8da;
    background: #557432;
    font-size: 11px;
}
.building-upgrade-copy { padding: 10px 4px; }
.building-kicker { color: #8a6b3d; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.building-upgrade-copy h2 { margin-top: 5px; font-size: 32px; }
.building-upgrade-copy h3 { margin: 22px 0 0; color: #55432d; font-family: Georgia,serif; font-size: 17px; }
.building-upgrade-form { margin-top: 12px; }
.building-max-level { display: inline-block; margin-top: 18px; padding: 8px 11px; border: 1px solid #7f9f52; border-radius: 4px; color: #486429; background: #e5edcf; font-weight: 800; }
.building-live-progress {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid #a58a62;
    border-radius: 5px;
    background: rgba(255,250,237,.58);
    box-shadow: inset 0 1px #fff;
}
.building-live-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6c5d48; font-size: 11px; }
.building-live-progress time { color: #4d672f; font-size: 13px; font-weight: 900; }
.building-live-progress > span { display: block; height: 9px; margin-top: 8px; overflow: hidden; border: 1px solid #8c754f; border-radius: 8px; background: #d4c9b3; box-shadow: inset 0 2px 3px rgba(72,51,28,.18); }
.building-live-progress > span i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(#a9c45f,#648833); box-shadow: inset 0 1px rgba(255,255,255,.42); }
.building-paid-costs { margin-top: 8px; padding-top: 0; }
.building-cancel-form { width: 100%; margin-top: 12px; }
.building-cancel-form button {
    width: 100%;
    min-height: 36px;
    border: 1px solid #94634b;
    border-radius: 4px;
    color: #7d3e30;
    background: linear-gradient(#fff8ea,#e4d2b5);
    box-shadow: inset 0 1px #fff;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.building-cancel-form button:hover { color: #fff5e7; background: linear-gradient(#b86c50,#843e30); }
.building-construction-view .building-upgrade-art { background: radial-gradient(circle,#eff1cd,#9ab36f 58%,#69854d); }
.building-construction-view .building-upgrade-art img { width: 98%; height: 90%; }

@media (max-width: 780px) {
    .realm-titlebar { top: 0; }
    .city-map-slot.is-empty { width: 12.5%; border-width: 0; box-shadow: inset 0 2px 6px rgba(36,75,21,.28),0 1px rgba(255,255,255,.18); }
    .city-map-slot.is-empty i::after { display: none; }
    .city-map-slot.is-built,
    .city-map-slot.is-constructing { width: 23%; }
    .city-map-slot.is-constructing { width: 26%; }
    .city-map-slot.is-built > b,
    .city-map-slot.is-constructing > b { right: 7%; bottom: 8%; min-width: 19px; height: 19px; border-width: 1px; font-size: 8px; }
    .city-map-slot.is-constructing > time,
    .city-map-slot.is-upgrading > time { min-width: 49px; padding: 2px 4px; font-size: 7px; }

    .building-market-screen { bottom: calc(70px + env(safe-area-inset-bottom)); padding: 7px; }
    .building-market-landscape { object-position: center 32%; }
    .building-market-shade { background: rgba(43,35,22,.22); backdrop-filter: blur(1px); }
    .building-dialog { width: 100%; max-height: 100%; border-width: 2px; border-radius: 7px; }
    .building-dialog-titlebar { min-height: 57px; padding: 8px 9px 8px 14px; }
    .building-dialog-titlebar h1 { font-size: 22px; }
    .building-dialog-titlebar small { font-size: 7px; }
    .building-dialog-close { width: 34px; height: 34px; flex-basis: 34px; font-size: 24px; }
    .building-dialog-intro { padding: 9px 12px; }
    .building-dialog-intro p { font-size: 10px; }
    .building-category-tabs { min-height: 43px; padding: 3px; }
    .building-category-tabs a { font-size: 10px; }
    .building-offer-list { padding: 6px; }
    .building-offer { min-height: 166px; grid-template-columns: minmax(0,1fr) 116px; margin-bottom: 6px; }
    .building-offer-copy { padding: 11px 1px 10px 11px; }
    .building-offer-copy h2 { font-size: 19px; }
    .building-offer-copy p { font-size: 10px; line-height: 1.35; }
    .building-requirement { margin-top: 4px; font-size: 8px; }
    .building-offer-art { padding: 5px 6px 5px 0; }
    .building-offer-art img { max-height: 135px; }
    .building-costs { gap: 3px; padding-top: 8px; }
    .building-cost,
    .building-time { min-height: 25px; gap: 2px; padding: 2px 4px; }
    .building-cost img { width: 20px; height: 20px; }
    .building-cost b,
    .building-time b { font-size: 8px; }
    .building-time i { font-size: 14px; }
    .building-action-button { min-height: 33px; font-size: 11px; }

    .building-upgrade-view { display: block; padding: 12px; }
    .building-upgrade-art { min-height: 210px; }
    .building-upgrade-art img { width: 78%; height: 78%; }
    .building-upgrade-copy { padding: 14px 2px 4px; }
    .building-upgrade-copy h2 { font-size: 26px; }
    .building-live-progress { margin-top: 13px; padding: 9px; }
    .building-live-progress > div { font-size: 9px; }
    .building-live-progress time { font-size: 11px; }
    .building-construction-view .building-upgrade-art { min-height: 180px; }
}

@media (max-width: 390px) {
    .building-offer { grid-template-columns: minmax(0,1fr) 102px; }
    .building-offer-copy h2 { font-size: 18px; }
    .building-cost { padding-inline: 3px; }
    .building-cost img { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .city-map-slot.is-constructing img { animation: none; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.4 — compact mobile HUD, extended quick menu and live build bar
   -------------------------------------------------------------------------- */

.realm-screen-city .realm-workspace {
    grid-template-columns: minmax(0, 1fr);
}
.realm-screen-city .realm-map-panel { border-right: 0; }
.realm-screen-city .realm-map { margin-inline: auto; }

.illustrated-header-icon { overflow: visible; }
.illustrated-header-icon > img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(47,31,14,.28));
}

.floating-build-queue {
    position: fixed;
    z-index: 68;
    bottom: 18px;
    left: 50%;
    display: grid;
    width: min(480px, calc(100% - 24px));
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) 44px;
    overflow: hidden;
    border: 2px solid #77552f;
    border-radius: 8px;
    color: #4a3a27;
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(92,65,33,.025) 4px 5px),
        linear-gradient(105deg, rgba(255,255,255,.45), transparent 48%),
        linear-gradient(#fff8e8, #ded0b1);
    box-shadow: 0 12px 30px rgba(39,27,14,.42), inset 0 0 0 2px rgba(255,255,255,.48);
    transform: translateX(-50%);
    animation: floating-build-enter .28s ease-out both;
}
.floating-build-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 60px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 4px 10px 8px;
    color: inherit;
}
.floating-build-main:hover { color: #395523; }
.floating-build-art {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid #9f7a48;
    border-radius: 50%;
    background: radial-gradient(circle, #eaf1cb, #75904b 66%, #4d6936 67%);
    box-shadow: inset 0 1px rgba(255,255,255,.62), 0 3px 8px rgba(57,39,18,.25);
}
.floating-build-art img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(52,37,18,.24)); }
.floating-build-copy { min-width: 0; }
.floating-build-copy small {
    display: block;
    color: #886a3e;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.floating-build-copy strong {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #46351f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.floating-build-copy > span { display: block; margin-top: 3px; color: #746854; font-size: 9px; }
.floating-build-copy time { color: #4f6e31; font-size: 10px; font-weight: 900; }
.floating-build-queue form { display: grid; margin: 0; place-items: center; border-left: 1px solid rgba(111,81,44,.23); }
.floating-build-queue form button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #9a7057;
    border-radius: 50%;
    color: #864b3c;
    background: rgba(255,250,238,.58);
    cursor: pointer;
}
.floating-build-queue form button:hover { color: #fff4e5; background: #9b513e; }
.queue-cancel-icon { position: relative; display: block; width: 12px; height: 12px; }
.queue-cancel-icon::before,
.queue-cancel-icon::after { position: absolute; top: 5px; left: 0; width: 12px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.queue-cancel-icon::before { transform: rotate(45deg); }
.queue-cancel-icon::after { transform: rotate(-45deg); }
.floating-build-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 7px; border-top: 1px solid rgba(83,61,34,.18); background: #c6b99f; }
.floating-build-progress i { display: block; width: 0; height: 100%; background: linear-gradient(#a5c05e,#608431); box-shadow: inset 0 1px rgba(255,255,255,.4); }
@keyframes floating-build-enter { from { opacity: 0; transform: translate(-50%,18px); } to { opacity: 1; transform: translate(-50%,0); } }

.game-overlay {
    position: fixed;
    z-index: 96;
    top: var(--game-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
.game-overlay.open { visibility: visible; opacity: 1; pointer-events: auto; }
.game-overlay-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(22,18,12,.55); backdrop-filter: blur(1px); cursor: default; }
.game-more-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(350px, 88vw);
    flex-direction: column;
    overflow-y: auto;
    border-left: 3px solid #765838;
    color: #4a3b2b;
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(91,65,34,.022) 4px 5px),
        linear-gradient(#f8efdc,#dfd2b7);
    box-shadow: -13px 0 32px rgba(27,20,12,.34), inset 2px 0 rgba(255,255,255,.45);
    transform: translateX(105%);
    transition: transform .24s ease;
}
.game-more-layer.open .game-more-drawer { transform: translateX(0); }
.game-more-drawer > header,
.gold-shop-header {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 2px solid #765536;
    color: #fff0c5;
    background: linear-gradient(135deg,#6a5138,#43301f);
}
.game-more-drawer > header small,
.gold-shop-header small { display: block; color: #dabb78; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.game-more-drawer > header h2,
.gold-shop-header h2 { margin: 3px 0 0; color: #fff2cd; font-family: Georgia,serif; font-size: 23px; }
.overlay-close {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid #dab875;
    border-radius: 50%;
    color: #fff2cf;
    background: rgba(29,23,16,.32);
    font-size: 22px;
    cursor: pointer;
}
.overlay-close:hover { background: #557534; }
.game-more-player { display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid rgba(109,79,44,.23); }
.game-more-player > span { display: grid; width: 43px; height: 43px; place-items: center; border: 2px solid #c3984e; border-radius: 12px 12px 18px 18px; color: #ffe7aa; background: linear-gradient(#78984a,#3e6129); font-family: Georgia,serif; font-size: 20px; font-weight: 900; }
.game-more-player small,
.game-more-player strong { display: block; }
.game-more-player small { color: #83745e; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.game-more-player strong { margin-top: 2px; color: #453725; font-size: 14px; }
.game-more-drawer nav { display: grid; padding: 8px 10px; }
.game-more-drawer nav a,
.game-more-drawer nav button,
.drawer-logout button {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid rgba(107,78,42,.18);
    color: #4d4030;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.game-more-drawer nav a:hover,
.drawer-logout button:hover { color: #3e5a25; background: rgba(103,133,58,.1); }
.game-more-drawer nav i,
.drawer-logout button > .logout-power-icon { display: grid; width: 34px; height: 34px; place-items: center; justify-self: center; color: #6a513d; font-size: 20px; font-style: normal; }
.game-more-drawer nav i img { width: 33px; height: 33px; object-fit: contain; }
.game-more-drawer nav strong,
.game-more-drawer nav small,
.drawer-logout strong,
.drawer-logout small { display: block; }
.game-more-drawer nav strong,
.drawer-logout strong { font-size: 12px; }
.game-more-drawer nav small,
.drawer-logout small { margin-top: 2px; color: #837764; font-size: 8px; }
.game-more-drawer nav button:disabled { cursor: default; opacity: .58; }
.drawer-logout { margin: auto 10px 0; border-top: 2px solid rgba(116,81,43,.28); }
.drawer-logout button { color: #783f34; }
.drawer-logout button > .logout-power-icon { width: 18px; height: 18px; border-width: 2px; }
.game-more-drawer > footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px; color: #8d806c; font-size: 9px; }
.game-more-drawer > footer a { color: #5f773a; }

.gold-shop-layer { display: grid; padding: 18px; place-items: center; }
.gold-shop-modal {
    position: relative;
    z-index: 2;
    width: min(850px, 100%);
    max-height: calc(100dvh - var(--game-header-height) - 36px);
    overflow: hidden;
    border: 3px solid #765536;
    border-radius: 10px;
    color: #493b2a;
    background: linear-gradient(#fbf4e4,#e2d6bb);
    box-shadow: 0 18px 48px rgba(27,19,11,.48), inset 0 0 0 2px rgba(255,255,255,.5);
    transform: translateY(18px) scale(.98);
    transition: transform .22s ease;
}
.gold-shop-layer.open .gold-shop-modal { transform: translateY(0) scale(1); }
.gold-shop-header { justify-content: flex-start; }
.gold-shop-header > img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; }
.gold-shop-header .overlay-close { margin-left: auto; }
.gold-shop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-bottom: 2px solid #7d6040; background: #b5a185; }
.gold-shop-tabs button { min-height: 43px; border: 1px solid #876745; color: #f5e5c2; background: linear-gradient(#725744,#493527); font-size: 11px; font-weight: 850; cursor: pointer; }
.gold-shop-tabs button.active { color: #fff5d4; background: linear-gradient(#78994a,#48682b); box-shadow: inset 0 1px rgba(255,255,255,.24); }
.gold-shop-body { max-height: calc(100dvh - var(--game-header-height) - 154px); padding: 15px; overflow-y: auto; }
.gold-shop-panel { display: none; }
.gold-shop-panel.active { display: block; }
.gold-shop-note { margin: 0 0 13px; padding: 9px 11px; border: 1px solid rgba(116,84,45,.24); border-radius: 5px; color: #736754; background: rgba(255,255,255,.35); font-size: 10px; line-height: 1.45; }
.gold-packages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.gold-package { position: relative; display: grid; min-width: 0; min-height: 250px; justify-items: center; align-content: center; padding: 12px; border: 2px solid #997744; border-radius: 7px; background: radial-gradient(circle at 50% 38%,#fff5ce,#e2c990 42%,#476d60 43%,#1d4a49); box-shadow: 0 5px 13px rgba(55,38,18,.25), inset 0 0 0 2px rgba(255,255,255,.24); }
.gold-package.featured { border-color: #e0b451; box-shadow: 0 0 0 3px rgba(201,157,67,.16),0 7px 17px rgba(55,38,18,.28); }
.gold-package > small { position: absolute; top: 7px; right: 7px; left: 7px; color: #ffe9a9; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.gold-package img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(28,20,11,.32)); }
.gold-package > strong { color: #ffe5a1; font-family: Georgia,serif; font-size: 31px; line-height: 1; text-shadow: 0 2px 3px rgba(33,21,9,.55); }
.gold-package > span { margin: 2px 0 10px; color: #f0dfbd; font-size: 9px; text-transform: uppercase; }
.gold-package > button { width: 100%; min-height: 34px; border: 1px solid #84622f; border-radius: 4px; color: #65563f; background: linear-gradient(#f0e6d0,#cab995); font-size: 8px; font-weight: 800; }
.gold-services { display: grid; gap: 8px; }
.gold-services article { display: grid; min-height: 76px; grid-template-columns: 46px minmax(0,1fr) 90px; align-items: center; gap: 10px; padding: 10px; border: 1px solid #aa8e66; border-radius: 6px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px #fff; }
.gold-services article > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #bf9144; border-radius: 50%; color: #ffe5a1; background: linear-gradient(#85652f,#533b22); font-size: 20px; font-style: normal; }
.gold-services strong,
.gold-services small { display: block; }
.gold-services strong { color: #4b3a25; font-size: 13px; }
.gold-services small { margin-top: 3px; color: #7e715e; font-size: 9px; }
.gold-services button { min-height: 34px; border: 1px solid #a28a66; border-radius: 4px; color: #887c69; background: #ddd3bf; font-size: 9px; }

.messages-placeholder { min-height: 360px; }
.messages-placeholder .empty-state { max-width: 520px; margin-inline: auto; padding-block: 42px; }
.messages-placeholder-art { overflow: visible; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.messages-placeholder-art img { display: block; width: 112px; height: 112px; object-fit: contain; }
.messages-placeholder .empty-state > small { display: block; max-width: 430px; margin: 12px auto 0; color: #8a7d68; font-size: 10px; line-height: 1.45; }

body.game-overlay-open { overflow: hidden !important; }

@media (max-width: 780px) {
    :root { --game-header-height: 56px; --game-bottom-nav-height: 73px; }
    .game-body { padding-top: var(--game-header-height); padding-bottom: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
    .game-header { height: var(--game-header-height); border-bottom-width: 3px; }
    .game-header-inner { display: block; height: 100%; padding: 0; }
    .game-header .compact-brand,
    .game-header .header-game-nav,
    .game-header .header-actions { display: none !important; }
    .game-header .resource-bar {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 3px;
        padding: 4px 4px 5px;
        background: linear-gradient(rgba(35,26,17,.2),rgba(27,20,13,.32));
    }
    .game-header .resource-item {
        height: 47px;
        grid-template-columns: 35px minmax(0,1fr);
        gap: 0 2px;
        padding: 3px 3px 5px 1px;
    }
    .game-header .resource-item .resource-symbol { width: 34px; height: 34px; }
    .game-header .resource-copy strong { font-size: 12px; }

    .game-content-immersive { min-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)); padding-bottom: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
    .realm-screen { min-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)); }
    .realm-screen-overview .realm-command { display: none; }
    .realm-screen-overview .realm-workspace { display: block; }
    .realm-screen-overview .realm-map-panel { border-right: 0; }
    .realm-titlebar { top: 0; }
    .city-map-slot.is-constructing > time,
    .city-map-slot.is-upgrading > time { display: none; }

    .mobile-bottom-nav {
        z-index: 100;
        height: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom));
        grid-template-columns: repeat(7,minmax(0,1fr));
        gap: 0;
        padding: 3px 2px env(safe-area-inset-bottom);
    }
    .mobile-bottom-nav .nav-item,
    .mobile-bottom-nav button.nav-item {
        width: 100%;
        min-width: 0;
        height: 66px;
        grid-template-rows: 47px auto;
        gap: 0;
        padding: 1px 0;
        overflow: visible;
        border: 0;
        border-radius: 5px;
        color: #655b4b;
        background: transparent;
        box-shadow: none;
        font: inherit;
        cursor: pointer;
    }
    .mobile-bottom-nav .nav-item .nav-art {
        width: 43px;
        height: 43px;
        border-width: 2px;
    }
    .mobile-bottom-nav .nav-item .nav-art img { width: 37px; height: 37px; }
    .mobile-bottom-nav .nav-item small { display: block; max-width: 100%; overflow: hidden; padding-inline: 1px; color: #5e5547; font-size: 6.5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-bottom-nav .nav-item.active .nav-art { transform: translateY(-2px) scale(1.04); }
    .mobile-bottom-nav .nav-gold-action .nav-art { border-color: #bd8d3d; background: radial-gradient(circle at 45% 38%,#fff1b8,#d59b32 72%,#7a501a 73%); }

    .floating-build-queue {
        z-index: 75;
        bottom: calc(var(--game-bottom-nav-height) + 8px + env(safe-area-inset-bottom));
        width: min(450px, calc(100% - 14px));
        min-height: 70px;
        grid-template-columns: minmax(0,1fr) 39px;
        border-radius: 7px;
    }
    .floating-build-main { grid-template-columns: 52px minmax(0,1fr); padding: 5px 3px 9px 6px; }
    .floating-build-art { width: 48px; height: 48px; }
    .floating-build-art img { width: 48px; height: 48px; }
    .floating-build-copy strong { font-size: 12px; }
    .floating-build-copy > span { font-size: 8px; }

    .game-overlay { top: var(--game-header-height); bottom: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
    .game-more-drawer { width: min(340px,88vw); }
    .gold-shop-layer { padding: 6px; place-items: end center; }
    .gold-shop-modal { width: 100%; max-height: 100%; border-width: 2px; border-radius: 9px 9px 4px 4px; }
    .gold-shop-header { min-height: 62px; padding: 7px 9px; }
    .gold-shop-header > img { width: 49px; height: 49px; flex-basis: 49px; }
    .gold-shop-header h2 { font-size: 20px; }
    .gold-shop-body { max-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - 125px - env(safe-area-inset-bottom)); padding: 8px; }
    .gold-packages { gap: 5px; }
    .gold-package { min-height: 205px; padding: 7px; }
    .gold-package img { width: 82px; height: 82px; }
    .gold-package > strong { font-size: 25px; }
    .gold-package > button { font-size: 7px; }
    .gold-services article { grid-template-columns: 40px minmax(0,1fr) 57px; gap: 6px; padding: 7px; }
    .gold-services article > i { width: 36px; height: 36px; font-size: 17px; }

    .building-market-screen { bottom: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
    .field-command { bottom: calc(var(--game-bottom-nav-height) + 6px + env(safe-area-inset-bottom)); }
    .field-inspector-backdrop { bottom: calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
    .mobile-bottom-nav .nav-item .nav-art { width: 40px; height: 40px; }
    .mobile-bottom-nav .nav-item .nav-art img { width: 34px; height: 34px; }
    .mobile-bottom-nav .nav-item small { font-size: 6px; }
}

@media (max-width: 370px) {
    .game-header .resource-item { grid-template-columns: 30px minmax(0,1fr); }
    .game-header .resource-item .resource-symbol { width: 30px; height: 30px; }
    .game-header .resource-copy strong { font-size: 10px; }
    .mobile-bottom-nav .nav-item .nav-art { width: 36px; height: 36px; }
    .mobile-bottom-nav .nav-item .nav-art img { width: 31px; height: 31px; }
    .mobile-bottom-nav .nav-item small { font-size: 5.6px; }
    .gold-package img { width: 70px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-build-queue { animation: none; }
    .game-overlay,
    .game-more-drawer,
    .gold-shop-modal { transition: none; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.6 — fixed mobile village/city viewport
   The illustrated Fields and Buildings screens are game canvases, not pages.
   Keep the world fixed between the resource bar and the bottom navigation;
   only opened inspector/overlay panels may scroll internally.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
    body.game-page-immersive.game-route-village,
    body.game-page-immersive.game-route-city {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        padding-top: var(--game-header-height);
        padding-bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.game-page-immersive.game-route-village .game-content-immersive,
    body.game-page-immersive.game-route-city .game-content-immersive {
        width: 100%;
        height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom));
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    body.game-page-immersive.game-route-village .realm-screen,
    body.game-page-immersive.game-route-city .realm-screen {
        display: grid;
        width: 100%;
        height: 100%;
        min-height: 0;
        grid-template-rows: 52px minmax(0, 1fr);
        overflow: hidden;
        border-width: 0;
        border-radius: 0;
    }

    body.game-page-immersive.game-route-village .realm-titlebar,
    body.game-page-immersive.game-route-city .realm-titlebar {
        position: relative;
        top: auto;
        height: 52px;
        min-height: 52px;
        flex: 0 0 52px;
    }

    body.game-page-immersive.game-route-village .realm-workspace,
    body.game-page-immersive.game-route-city .realm-workspace {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.game-page-immersive.game-route-village .realm-map-panel,
    body.game-page-immersive.game-route-city .realm-map-panel {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-right: 0;
        border-bottom: 0;
    }

    body.game-page-immersive.game-route-village .realm-map,
    body.game-page-immersive.game-route-city .realm-map {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: none;
        aspect-ratio: auto;
        overflow: hidden;
        box-shadow: none;
    }

    body.game-page-immersive.game-route-village .realm-map-background,
    body.game-page-immersive.game-route-city .realm-map-background {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    /* The field sheet is intentionally scrollable when opened. */
    body.game-route-village.field-sheet-open .field-command {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}


/* Travia 1.9.7.1 — navigation cleanup: remove duplicate Pagrindinis button. */
@media (max-width: 780px) {
    .mobile-bottom-nav { grid-template-columns: repeat(7,minmax(0,1fr)); }
}


/* Travia 1.9.7.2 — city building spacing fix. */
@media (max-width: 780px) {
    body.game-route-city .city-map-slot.is-built {
        width: 14.5%;
    }
    body.game-route-city .city-map-slot.is-constructing {
        width: 14.5%;
    }
    body.game-route-city .city-map-slot.is-empty {
        width: 7.2%;
    }
    body.game-route-city .city-map-slot.is-built > b {
        right: 8%;
        bottom: 10%;
        min-width: 18px;
        height: 18px;
        font-size: 8px;
    }
}

@media (max-width: 390px) {
    body.game-route-city .city-map-slot.is-built,
    body.game-route-city .city-map-slot.is-constructing {
        width: 13.5%;
    }
    body.game-route-city .city-map-slot.is-empty {
        width: 6.8%;
    }
}


/* Travia 1.9.7.3 — city building spacing polish with reserved premium expansion ring. */
.city-premium-anchor {
    position: absolute;
    z-index: 4;
    top: var(--slot-y);
    left: var(--slot-x);
    width: 8.2%;
    aspect-ratio: 1;
    border: 1px dashed rgba(245, 214, 132, .34);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(218, 197, 129, .06), rgba(104, 93, 45, .10) 72%, rgba(50, 41, 20, .08));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    opacity: .42;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.city-map-slot.is-built {
    width: 15.8%;
}
.city-map-slot.is-empty {
    width: 7.2%;
}
@media (max-width: 780px) {
    .city-map-slot.is-built {
        width: 16.9%;
    }
    .city-map-slot.is-empty {
        width: 7.6%;
    }
    .city-premium-anchor {
        width: 7.2%;
        opacity: .34;
    }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8 — real gold wallet + up to 10 premium building slots per village
   -------------------------------------------------------------------------- */
.city-premium-slot {
    position: absolute;
    z-index: 8;
    top: var(--slot-y);
    left: var(--slot-x);
    width: 7.2%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.city-premium-slot.is-locked {
    display: grid;
    place-items: center;
    border: 1px dashed rgba(220,184,91,.38);
    border-radius: 50%;
    color: rgba(92,69,31,.62);
    background: radial-gradient(circle at 40% 32%,rgba(255,239,181,.18),rgba(111,83,38,.16) 72%);
    box-shadow: inset 0 1px rgba(255,255,255,.18);
    opacity: .22;
    pointer-events: none;
}
.city-premium-slot.is-locked i { font-size: clamp(8px,1vw,13px); font-style: normal; filter: grayscale(1); }
.city-premium-slot.is-next { width: 9.2%; z-index: 11; }
.city-premium-slot.is-next button {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    padding: 0;
    border: 2px solid #e4c15b;
    border-radius: 50%;
    color: #fff5ca;
    background: radial-gradient(circle at 42% 35%,#7d9b4c,#425e2a 62%,#283d1d 63%);
    box-shadow: 0 0 0 3px rgba(93,66,29,.32),0 5px 10px rgba(29,19,8,.42),inset 0 1px rgba(255,255,255,.35);
    cursor: pointer;
}
.city-premium-slot.is-next button img { width: 72%; height: 72%; object-fit: contain; opacity: .9; filter: drop-shadow(0 2px 2px rgba(42,25,5,.35)); }
.city-premium-slot.is-next button > b {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #fff0ae;
    border-radius: 50%;
    color: #fff;
    background: #5f7f35;
    font-size: 15px;
    line-height: 1;
}
.city-premium-slot.is-next button > small {
    position: absolute;
    right: -7px;
    bottom: -8px;
    min-width: 30px;
    padding: 2px 4px;
    border: 1px solid #957037;
    border-radius: 9px;
    color: #5b421b;
    background: #fff0b6;
    font-size: 7px;
    font-weight: 900;
    box-shadow: 0 2px 5px rgba(44,29,10,.25);
}
.gold-balance-inline { color: #9b701f; font-size: 1.05em; }
.nav-gold-action .nav-art { position: relative; }
.nav-gold-badge {
    position: absolute;
    right: -5px;
    bottom: -4px;
    min-width: 20px;
    padding: 1px 4px;
    border: 1px solid #8c6426;
    border-radius: 9px;
    color: #574016;
    background: #ffecae;
    box-shadow: 0 2px 4px rgba(58,40,14,.25);
    font-size: 7px;
    line-height: 1.25;
    text-align: center;
}
.gold-service-real { border-color: #c49743 !important; background: linear-gradient(90deg,rgba(255,242,193,.62),rgba(255,255,255,.32)) !important; }
.gold-service-real form { margin: 0; }
.gold-service-real form button:not(:disabled) { color: #fff5ca; border-color: #866129; background: linear-gradient(#769748,#496b2b); cursor: pointer; }
.premium-price-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.admin-player-actions { min-width: 280px; }
.inline-admin-action { margin-bottom: 6px; }
.gold-admin-action { display: grid; grid-template-columns: 85px minmax(90px,1fr) auto; gap: 5px; align-items: center; }
.gold-admin-action input { min-width: 0; height: 34px; padding: 5px 7px; font-size: 10px; }

@media (max-width: 780px) {
    .city-premium-slot { width: 7.5%; }
    .city-premium-slot.is-next { width: 10%; }
    .city-premium-slot.is-next button > b { width: 18px; height: 18px; font-size: 13px; }
    .city-premium-slot.is-next button > small { font-size: 6px; }
    .premium-price-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .nav-gold-badge { right: -4px; bottom: -3px; font-size: 6px; }
}


/* Travia 1.9.8.1 — city troop popup quick access on city screen. */
.city-troop-trigger {
    position: absolute;
    z-index: 14;
    top: 58px;
    right: 12px;
    display: inline-flex;
    min-width: 88px;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #7a5932;
    border-radius: 10px;
    color: #fdf6de;
    background: linear-gradient(180deg, rgba(120,153,74,.96), rgba(70,98,42,.98));
    box-shadow: 0 4px 12px rgba(29,19,8,.34), inset 0 1px rgba(255,255,255,.22);
    cursor: pointer;
}
.city-troop-trigger-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255,241,190,.75);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,248,220,.4), rgba(53,79,30,.18) 70%);
    font-size: 16px;
    line-height: 1;
}
.city-troop-trigger-copy { display: block; text-align: left; }
.city-troop-trigger-copy small { display: block; color: rgba(255,245,210,.9); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.city-troop-trigger-copy strong { display: block; margin-top: 2px; color: #fff; font-size: 14px; line-height: 1; }
.city-troop-trigger:hover { filter: brightness(1.04); transform: translateY(-1px); }
.city-troop-layer { z-index: 97; }
.city-troop-modal {
    position: absolute;
    top: 74px;
    right: 12px;
    display: flex;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--game-header-height) - 96px);
    flex-direction: column;
    overflow: hidden;
    border: 2px solid #7b5b38;
    border-radius: 12px;
    color: #4b3926;
    background: linear-gradient(#fbf1dd,#e1d3b7);
    box-shadow: 0 20px 42px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.65);
    transform: translateY(16px) scale(.98);
    transition: transform .2s ease;
}
.city-troop-layer.open .city-troop-modal { transform: translateY(0) scale(1); }
.city-troop-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 68px; padding: 11px 14px; border-bottom: 2px solid #896844; background: linear-gradient(#fff5e0,#d9c6a3); }
.city-troop-header small { display: block; color: #817158; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.city-troop-header h2 { margin: 3px 0 0; color: #473420; font-family: Georgia,serif; font-size: 24px; line-height: 1.05; }
.city-troop-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(120,91,54,.18); background: rgba(255,255,255,.34); }
.city-troop-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(133,101,59,.26); border-radius: 999px; color: #68543b; background: rgba(255,249,236,.84); font-size: 10px; font-weight: 800; }
.city-troop-summary b { color: #4e6f30; }
.city-troop-body { overflow-y: auto; padding: 12px; }
.city-troop-list { display: grid; gap: 8px; }
.city-troop-empty { margin: 4px 0; padding: 12px; border: 1px dashed rgba(121,94,56,.35); border-radius: 8px; color: #74644d; background: rgba(255,255,255,.34); font-size: 12px; text-align: center; }
.city-troop-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(129,98,59,.24); border-radius: 8px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px rgba(255,255,255,.64); }
.city-troop-avatar { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #9a7c55; border-radius: 50%; color: #fff6d7; background: linear-gradient(#7b9a49,#4a692d); font-size: 18px; }
.city-troop-copy strong { display: block; color: #483521; font-size: 13px; }
.city-troop-copy small { display: block; margin-top: 3px; color: #7a6b55; font-size: 9px; line-height: 1.35; }
.city-troop-row > b { min-width: 58px; color: #4b6b2e; font-size: 15px; text-align: right; }

@media (max-width: 780px) {
    .city-troop-trigger { top: 60px; right: 8px; min-width: 80px; min-height: 42px; padding: 5px 8px; gap: 6px; border-radius: 8px; }
    .city-troop-trigger-icon { width: 28px; height: 28px; font-size: 15px; }
    .city-troop-trigger-copy small { font-size: 7px; }
    .city-troop-trigger-copy strong { font-size: 12px; }
    .city-troop-modal { top: auto; right: 6px; bottom: calc(var(--game-bottom-nav-height) + 6px + env(safe-area-inset-bottom)); width: calc(100vw - 12px); max-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - 18px - env(safe-area-inset-bottom)); border-width: 2px; border-radius: 10px; }
    .city-troop-header { min-height: 58px; padding: 8px 10px; }
    .city-troop-header h2 { font-size: 20px; }
    .city-troop-body { padding: 8px; }
    .city-troop-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; padding: 8px; }
    .city-troop-avatar { width: 34px; height: 34px; font-size: 16px; }
    .city-troop-row > b { min-width: 46px; font-size: 13px; }
}


/* Travia 1.9.8.2 — troop popup tabs + reinforcement panel. */
.city-troop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-bottom: 2px solid #7d6040; background: #b5a185; }
.city-troop-tabs button { min-height: 43px; border: 1px solid #876745; color: #f5e5c2; background: linear-gradient(#725744,#493527); font-size: 11px; font-weight: 850; cursor: pointer; }
.city-troop-tabs button.active { color: #fff5d4; background: linear-gradient(#78994a,#48682b); box-shadow: inset 0 1px rgba(255,255,255,.24); }
.city-troop-tabs button b { display: inline-block; min-width: 22px; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 10px; }
.city-troop-panel { display: none; }
.city-troop-panel.active { display: block; }
.city-reinforcement-groups { display: grid; gap: 10px; }
.city-reinforcement-group { border: 1px solid rgba(129,98,59,.24); border-radius: 8px; background: rgba(255,255,255,.55); box-shadow: inset 0 1px rgba(255,255,255,.64); overflow: hidden; }
.city-reinforcement-group > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid rgba(120,91,54,.14); background: rgba(255,247,230,.72); }
.city-reinforcement-group > header strong { display: block; color: #473420; font-size: 13px; }
.city-reinforcement-group > header small { display: block; margin-top: 2px; color: #7d6a52; font-size: 9px; }
.city-reinforcement-group > header span { min-width: 52px; color: #4b6b2e; font-size: 15px; font-weight: 900; text-align: right; }
.city-reinforcement-units { display: grid; gap: 6px; padding: 8px; }
.city-reinforcement-unit { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid rgba(129,98,59,.18); border-radius: 7px; background: rgba(255,255,255,.44); }
.city-reinforcement-unit > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #9a7c55; border-radius: 50%; color: #fff6d7; background: linear-gradient(#9a9d49,#6a6d2d); font-size: 14px; }
.city-reinforcement-unit strong { display: block; color: #483521; font-size: 12px; }
.city-reinforcement-unit small { display: block; margin-top: 2px; color: #7a6b55; font-size: 8px; }
.city-reinforcement-unit b { min-width: 44px; color: #4b6b2e; font-size: 13px; text-align: right; }


/* Travia 1.9.8.3 — compact clean troop popup. */
.city-troop-row[hidden],
.city-troop-panel[hidden],
.city-troop-empty[hidden] { display: none !important; }

.city-troop-trigger {
    top: 58px;
    right: 12px;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    gap: 0;
    padding: 0;
    justify-content: center;
    border: 2px solid #d4ba76;
    border-radius: 50%;
    color: #fff7d8;
    background: radial-gradient(circle at 36% 28%, #839d54 0 28%, #587735 58%, #354f25 100%);
    box-shadow: 0 4px 10px rgba(34,24,10,.35), inset 0 0 0 2px rgba(255,255,255,.14);
}
.city-troop-trigger-icon {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    font-size: 21px;
    text-shadow: 0 2px 2px rgba(30,20,7,.35);
}
.city-troop-trigger-copy { display: none !important; }
.city-troop-trigger-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    display: grid;
    min-width: 23px;
    height: 21px;
    place-items: center;
    padding: 0 5px;
    border: 1px solid #8c6934;
    border-radius: 12px;
    color: #4f3c20;
    background: #fff0b5;
    box-shadow: 0 2px 5px rgba(45,31,12,.3);
    font-size: 9px;
    line-height: 1;
}

.city-troop-layer .game-overlay-backdrop {
    background: rgba(22,18,12,.30);
    backdrop-filter: blur(1px);
}
.city-troop-modal {
    top: 50%;
    right: auto;
    left: 50%;
    width: min(350px, calc(100vw - 28px));
    max-height: min(520px, calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - 32px));
    border: 2px solid #80603b;
    border-radius: 12px;
    background: linear-gradient(#f8efdd,#dfd0b3);
    box-shadow: 0 18px 38px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.72);
    transform: translate(-50%, calc(-50% + 12px)) scale(.98);
}
.city-troop-layer.open .city-troop-modal {
    transform: translate(-50%, -50%) scale(1);
}
.city-troop-header {
    min-height: 52px;
    padding: 8px 10px 8px 12px;
    border-bottom: 1px solid #9b7b50;
    background: linear-gradient(#fff6e4,#e6d5b6);
}
.city-troop-header small { font-size: 7px; letter-spacing: .11em; }
.city-troop-header h2 { margin-top: 2px; font-size: 19px; }
.city-troop-header .overlay-close {
    width: 32px;
    height: 32px;
    border: 1px solid #a48660;
    border-radius: 50%;
    color: #604b32;
    background: rgba(255,255,255,.5);
    font-size: 18px;
}
.city-troop-tabs {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #9c805a;
    background: #cfb995;
}
.city-troop-tabs button {
    min-height: 37px;
    border: 0;
    border-right: 1px solid rgba(112,83,48,.24);
    color: #66533b;
    background: rgba(255,250,238,.42);
    font-size: 9px;
}
.city-troop-tabs button:last-child { border-right: 0; }
.city-troop-tabs button.active {
    color: #fff8dc;
    background: linear-gradient(#78954d,#557536);
    box-shadow: inset 0 1px rgba(255,255,255,.22);
}
.city-troop-tabs button b {
    min-width: 19px;
    padding: 1px 5px;
    font-size: 8px;
}
.city-troop-summary {
    gap: 5px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(120,91,54,.13);
}
.city-troop-summary span {
    padding: 3px 7px;
    font-size: 8px;
}
.city-troop-body {
    max-height: 360px;
    padding: 8px;
}
.city-troop-list { gap: 5px; }
.city-troop-row {
    grid-template-columns: 31px minmax(0,1fr) auto;
    gap: 8px;
    min-height: 48px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.52);
}
.city-troop-avatar {
    width: 31px;
    height: 31px;
    font-size: 15px;
}
.city-troop-copy strong { font-size: 11px; }
.city-troop-copy small { margin-top: 1px; font-size: 7.5px; }
.city-troop-row > b {
    min-width: 38px;
    font-size: 13px;
}
.city-troop-empty {
    margin: 2px 0;
    padding: 14px 9px;
    font-size: 10px;
}
.city-reinforcement-groups { gap: 7px; }
.city-reinforcement-group > header {
    padding: 7px 8px;
}
.city-reinforcement-group > header strong { font-size: 11px; }
.city-reinforcement-group > header small { font-size: 7.5px; }
.city-reinforcement-group > header span { min-width: 38px; font-size: 12px; }
.city-reinforcement-units { gap: 4px; padding: 6px; }
.city-reinforcement-unit {
    grid-template-columns: 25px minmax(0,1fr) auto;
    gap: 6px;
    padding: 5px 6px;
}
.city-reinforcement-unit > span { width: 25px; height: 25px; font-size: 12px; }
.city-reinforcement-unit strong { font-size: 10px; }
.city-reinforcement-unit small { font-size: 7px; }
.city-reinforcement-unit b { min-width: 35px; font-size: 11px; }

@media (max-width: 780px) {
    .city-troop-trigger {
        top: 60px;
        right: 9px;
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
    }
    .city-troop-trigger-icon { width: 35px; height: 35px; font-size: 19px; }
    .city-troop-modal {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(350px, calc(100vw - 20px));
        max-height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - 22px - env(safe-area-inset-bottom));
        border-radius: 11px;
        transform: translate(-50%, calc(-50% + 12px)) scale(.98);
    }
    .city-troop-layer.open .city-troop-modal { transform: translate(-50%, -50%) scale(1); }
    .city-troop-body { max-height: 330px; }
}


/* Travia 1.9.8.4 — rounded troop trigger styled like premium slot purchase. */
.city-troop-trigger {
    position: absolute !important;
    z-index: 22;
    top: 21.2% !important;
    right: 6.8% !important;
    display: grid !important;
    width: clamp(58px, 9vw, 72px) !important;
    height: clamp(58px, 9vw, 72px) !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    place-items: center;
    border: 2px solid rgba(120, 96, 59, 0.92) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.38), rgba(255,255,255,0) 28%),
        linear-gradient(180deg, #95b45a 0%, #6f8f3f 55%, #5a7632 100%) !important;
    box-shadow:
        0 10px 18px rgba(43, 28, 10, 0.26),
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -2px 0 rgba(52, 72, 28, .28) !important;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.city-troop-trigger:hover,
.city-troop-trigger:focus-visible {
    transform: translateY(-1px) scale(1.03);
    filter: brightness(1.03);
    box-shadow:
        0 12px 24px rgba(43, 28, 10, 0.32),
        inset 0 2px 0 rgba(255,255,255,.42),
        inset 0 -2px 0 rgba(52, 72, 28, .30) !important;
    outline: none;
}
.city-troop-trigger:active {
    transform: translateY(1px) scale(.98);
}
.city-troop-trigger::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 245, 220, .42);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 52%);
}
.city-troop-trigger-icon {
    position: relative;
    z-index: 1;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center;
    font-size: 23px !important;
    line-height: 1;
    color: #fff7da !important;
    text-shadow: 0 1px 0 rgba(57, 76, 31, .45), 0 0 8px rgba(255,255,255,.12);
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.city-troop-trigger-copy,
.city-troop-trigger-badge {
    display: none !important;
}
@media (max-width: 780px) {
    .city-troop-trigger {
        top: 21.8% !important;
        right: 5.6% !important;
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }
    .city-troop-trigger::before { inset: 7px; }
    .city-troop-trigger-icon { width: 34px !important; height: 34px !important; font-size: 20px !important; }
}
@media (max-width: 390px) {
    .city-troop-trigger {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        right: 5.2% !important;
    }
}

/* Travia 1.9.8.5 — troop button mirrors the premium-slot purchase control. */
.realm-city-map .city-troop-trigger {
    position: absolute !important;
    z-index: 22;
    top: 19% !important;
    right: 4% !important;
    left: auto !important;
    display: grid !important;
    width: 10% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    place-items: center;
    border: 2px solid #e4c15b !important;
    border-radius: 50% !important;
    color: #fff5ca !important;
    background: radial-gradient(circle at 42% 35%,#7d9b4c,#425e2a 62%,#283d1d 63%) !important;
    box-shadow: 0 0 0 3px rgba(93,66,29,.32),0 5px 10px rgba(29,19,8,.42),inset 0 1px rgba(255,255,255,.35) !important;
    transform: none !important;
    cursor: pointer;
}
.realm-city-map .city-troop-trigger::before {
    display: none !important;
}
.realm-city-map .city-troop-trigger-icon {
    position: relative;
    z-index: 1;
    display: grid !important;
    width: 72% !important;
    height: 72% !important;
    place-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff5ca !important;
    background: transparent !important;
    font-size: clamp(15px, 3.2vw, 24px) !important;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(42,25,5,.35));
    text-shadow: none !important;
}
.realm-city-map .city-troop-trigger:hover,
.realm-city-map .city-troop-trigger:focus-visible {
    transform: scale(1.04) !important;
    filter: brightness(1.05);
    outline: none;
}
.realm-city-map .city-troop-trigger:active {
    transform: scale(.97) !important;
}
@media (max-width: 780px) {
    .realm-city-map .city-troop-trigger {
        top: 19% !important;
        right: 4% !important;
        width: 10% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .realm-city-map .city-troop-trigger-icon {
        width: 72% !important;
        height: 72% !important;
        font-size: clamp(15px, 4.5vw, 20px) !important;
    }
}


/* Travia 1.9.8.6 — tribe-based troop button artwork. */
.realm-city-map .city-troop-trigger {
    overflow: visible;
}
.realm-city-map .city-troop-trigger::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 246, 214, 0.36);
    pointer-events: none;
}
.realm-city-map .city-troop-trigger-icon {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(24, 16, 7, 0.18);
}
.realm-city-map .city-troop-trigger-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.26), transparent 33%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(38,55,23,.18));
    border-radius: 50%;
    pointer-events: none;
}
.realm-city-map .city-troop-trigger-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}
@media (max-width: 780px) {
    .realm-city-map .city-troop-trigger-icon {
        width: 40px !important;
        height: 40px !important;
    }
}


/* Travia 1.9.8.7 — unit artwork across troop UI. */
.unit-avatar.has-image,
.city-troop-avatar.has-image,
.city-reinforcement-avatar.has-image {
    padding: 0;
    overflow: hidden;
    border-color: #9c7a4f;
    background: linear-gradient(#f7efdf,#dcc7a1);
}
.unit-avatar.has-image img,
.city-troop-avatar.has-image img,
.city-reinforcement-avatar.has-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.training-queue-row .unit-avatar.has-image,
.unit-head .unit-avatar.has-image {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 2px 5px rgba(22,16,8,.12);
}
.city-troop-row .city-troop-avatar.has-image,
.city-reinforcement-unit .city-reinforcement-avatar.has-image {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #9a7c55;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(31,22,10,.12), inset 0 1px rgba(255,255,255,.45);
}
.city-reinforcement-unit .city-reinforcement-avatar.has-image {
    width: 28px;
    height: 28px;
}
.research-state {
    align-self: flex-start;
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.research-state.is-done {
    color: #355d2d;
    background: #e0f0cf;
    border: 1px solid #a5c08c;
}
.research-state.is-pending {
    color: #6b5536;
    background: #f4ead2;
    border: 1px solid #d2b88e;
}
@media (max-width: 780px) {
    .research-state { font-size: 8px; padding: 4px 7px; }
    .unit-head .unit-avatar.has-image { width: 42px; height: 42px; }
}


/* Travia 1.9.8.8 — original 50 troop artworks supplied by project owner. */
.unit-avatar.has-image,
.city-troop-avatar.has-image,
.city-reinforcement-avatar.has-image,
.realm-city-map .city-troop-trigger-icon {
    background: linear-gradient(180deg,#f8efdd,#e2d0ae) !important;
}
.unit-avatar.has-image img,
.city-troop-avatar.has-image img,
.city-reinforcement-avatar.has-image img,
.realm-city-map .city-troop-trigger-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.unit-head .unit-avatar.has-image {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 14px;
    padding: 3px;
}
.training-queue-row .unit-avatar.has-image {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    padding: 2px;
}
.training-queue-row {
    grid-template-columns: 48px minmax(0,1fr) auto;
}
.city-troop-row {
    grid-template-columns: 48px minmax(0,1fr) auto;
}
.city-troop-row .city-troop-avatar.has-image {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    padding: 2px;
}
.city-reinforcement-unit {
    grid-template-columns: 38px minmax(0,1fr) auto;
}
.city-reinforcement-unit .city-reinforcement-avatar.has-image {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    padding: 2px;
}
.realm-city-map .city-troop-trigger-icon {
    width: 46px !important;
    height: 46px !important;
    padding: 2px;
    border-radius: 50% !important;
}
.realm-city-map .city-troop-trigger-icon::after {
    display: none !important;
}
@media (max-width: 780px) {
    .unit-head .unit-avatar.has-image {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
    .training-queue-row {
        grid-template-columns: 44px minmax(0,1fr);
    }
    .training-queue-row .unit-avatar.has-image {
        width: 44px;
        height: 44px;
    }
    .city-troop-row {
        grid-template-columns: 44px minmax(0,1fr) auto;
    }
    .city-troop-row .city-troop-avatar.has-image {
        width: 42px;
        height: 42px;
    }
    .realm-city-map .city-troop-trigger-icon {
        width: 42px !important;
        height: 42px !important;
    }
}


/* Travia 1.9.8.9 — unified resource artwork. */
.resource-cost-row span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 5px;
    padding: 3px 7px 3px 4px;
}
.resource-cost-row span img {
    display: block;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(48,31,12,.18));
}
.resource-cost-row span b {
    color: inherit;
    font-size: 11px;
    font-weight: 850;
}
.realm-field-levels i img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 780px) {
    .resource-cost-row {
        gap: 4px;
    }
    .resource-cost-row span {
        min-height: 31px;
        gap: 3px;
        padding: 2px 5px 2px 3px;
    }
    .resource-cost-row span img {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
    .resource-cost-row span b {
        font-size: 10px;
    }
}

/* Travia 1.9.8.11 — unified 34-building catalog and requirement/effect UI. */
.building-category-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.building-effect-note,
.building-conversion-box {
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(117, 91, 55, .28);
    border-radius: 8px;
    background: rgba(255, 249, 235, .62);
}
.building-effect-note { display: grid; gap: 3px; }
.building-effect-note strong { color: #4f6d32; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.building-effect-note span,
.building-next-effect,
.building-effect-hint { color: #726149; font-size: 10px; line-height: 1.4; }
.building-next-effect { display: block; margin: -2px 0 8px; }
.building-effect-hint { display: block; margin-top: 6px; color: #596e3c; font-weight: 700; }
.building-conversion-box { margin: 15px 0 10px; background: linear-gradient(#fff4d9, #ead6aa); border-color: #ad8750; }
.building-conversion-box h3 { margin: 4px 0; color: #50391f; font-family: Georgia, serif; font-size: 18px; }
.building-conversion-box p { margin-bottom: 8px; }
.building-gold-cost {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid #b58b3e;
    border-radius: 7px;
    color: #6a4a11;
    background: #fff0b0;
    font-size: 9px;
    font-weight: 800;
}
.building-gold-cost i { font-style: normal; color: #bd8013; font-size: 16px; }
@media (max-width: 780px) {
    .building-category-tabs a { font-size: 8.5px; }
    .building-effect-note,
    .building-conversion-box { margin-top: 7px; padding: 7px 8px; }
    .building-effect-note span,
    .building-next-effect,
    .building-effect-hint { font-size: 8px; }
    .building-conversion-box h3 { font-size: 15px; }
    .building-gold-cost { min-height: 25px; font-size: 8px; }
}

/* Travia 1.9.8.14 — rally point, troop movements and real reinforcements. */
.rally-heading { align-items: center; }
.rally-heading .level-pill { flex: 0 0 auto; }
.rally-tabs { margin-bottom: 14px; }
.rally-send-card { margin-bottom: 14px; padding: 18px; }
.rally-target-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.rally-target-grid label { display: grid; gap: 5px; color: #675b49; font-size: 10px; font-weight: 800; }
.rally-target-grid input,.rally-target-grid select { min-height: 42px; width: 100%; border: 1px solid #a48a64; border-radius: 8px; padding: 8px 10px; color: #473722; background: #fffaf0; font: inherit; font-size: 13px; }
.rally-unit-list { display: grid; gap: 7px; }
.rally-unit-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 86px; align-items: center; gap: 10px; min-height: 62px; padding: 7px 9px; border: 1px solid #c9b995; border-radius: 9px; background: linear-gradient(#fffaf0,#eee3ca); box-shadow: inset 0 1px rgba(255,255,255,.75); }
.rally-unit-art { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid #9b7c51; border-radius: 50%; background: #e7d7b8; }
.rally-unit-art img { width: 100%; height: 100%; object-fit: contain; }
.rally-unit-row > span:nth-child(2) { display: grid; gap: 3px; }
.rally-unit-row strong { color: #493721; font-size: 13px; }
.rally-unit-row small { color: #7d6e58; font-size: 9px; }
.rally-unit-row input { width: 100%; min-height: 38px; border: 1px solid #a88d65; border-radius: 8px; padding: 6px 8px; text-align: center; background: #fff; font-weight: 800; }
.rally-send-note { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; margin: 12px 0; padding: 10px; border: 1px solid #d0bd92; border-radius: 8px; color: #67573e; background: #f8edd5; }
.rally-send-note span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #78984b; font-weight: 900; }
.rally-send-note p { margin: 0; font-size: 10px; line-height: 1.45; }
.rally-grid-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.rally-list-card { overflow: hidden; }
.rally-list-card > .card-heading { padding: 14px 16px 10px; border-bottom: 1px solid #d8cab0; }
.rally-list-card > .card-heading h2 { margin-bottom: 0; }
.rally-movement-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #e1d5bd; }
.rally-movement-row:last-child { border-bottom: 0; }
.rally-movement-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #9a8058; border-radius: 50%; color: #fff; background: linear-gradient(#7f9f4f,#4d6d2d); }
.rally-movement-icon.attack,.rally-movement-icon.raid { background: linear-gradient(#a5654e,#74402f); }
.rally-movement-row.incoming .rally-movement-icon.attack,.rally-movement-row.incoming .rally-movement-icon.raid { background: linear-gradient(#b05c45,#7c3028); }
.rally-movement-row > div { display: grid; gap: 2px; }
.rally-movement-row strong { color: #493721; font-size: 12px; }
.rally-movement-row small { color: #7a6b55; font-size: 9px; }
.rally-movement-row time { color: #587734; font-size: 11px; font-weight: 850; white-space: nowrap; }
.rally-reinforcement-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #e1d5bd; }
.rally-reinforcement-card:last-child { border-bottom: 0; }
.rally-reinforcement-card > div { display: grid; gap: 2px; }
.rally-reinforcement-card strong { color: #493721; font-size: 12px; }
.rally-reinforcement-card small { color: #7a6b55; font-size: 9px; }
.rally-reinforcement-card > b { color: #557331; font-size: 11px; white-space: nowrap; }
.rally-reinforcement-card form { margin: 0; }
.movement-page-grid { margin-top: 0; }
@media (max-width: 780px) {
    .rally-send-card { padding: 12px; }
    .rally-target-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
    .rally-target-grid label:last-child { grid-column: 1 / -1; }
    .rally-unit-row { grid-template-columns: 46px minmax(0,1fr) 72px; gap: 7px; padding: 7px; }
    .rally-unit-art { width: 42px; height: 42px; }
    .rally-unit-row strong { font-size: 12px; }
    .rally-unit-row small { font-size: 8px; }
    .rally-grid-two { grid-template-columns: 1fr; gap: 10px; }
    .rally-movement-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; padding: 9px 10px; }
    .rally-movement-icon { width: 34px; height: 34px; }
    .rally-movement-row time { font-size: 9px; }
    .rally-reinforcement-card { grid-template-columns: minmax(0,1fr) auto; }
    .rally-reinforcement-card form { grid-column: 1 / -1; }
    .rally-reinforcement-card form .button { width: 100%; }
}

/* Travia 1.9.8.15 — battle reports and siege results. */
.reports-stack { display: grid; gap: 10px; }
.battle-report-card { overflow: hidden; padding: 0; border-color: #bca77f; }
.battle-report-card.unread { box-shadow: inset 4px 0 0 #779749; }
.battle-report-card > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 13px; cursor: pointer; list-style: none; background: linear-gradient(#fffaf0,#eee2c8); }
.battle-report-card > summary::-webkit-details-marker { display: none; }
.battle-report-card > summary > div { display: grid; gap: 3px; }
.battle-report-card > summary strong { color: #493721; font-size: 12px; }
.battle-report-card > summary small { color: #7a6b55; font-size: 9px; }
.battle-report-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #986147; border-radius: 50%; color: #fff4da; background: linear-gradient(#a86951,#77402f); box-shadow: inset 0 1px rgba(255,255,255,.25); }
.battle-report-icon.raid { background: linear-gradient(#ad8047,#765424); }
.battle-result-pill { min-width: 72px; padding: 5px 8px; border: 1px solid; border-radius: 999px; font-size: 9px; text-align: center; }
.battle-result-pill.win { color: #41652f; border-color: #9db685; background: #e8f2dc; }
.battle-result-pill.loss { color: #8a4334; border-color: #c99d90; background: #f7e5df; }
.battle-report-body { display: grid; gap: 12px; padding: 12px; border-top: 1px solid #d8c7a8; background: #f7efdf; }
.battle-route { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); align-items: center; gap: 8px; padding: 10px; border: 1px solid #d1bd95; border-radius: 9px; background: rgba(255,255,255,.55); }
.battle-route > div { display: grid; gap: 2px; }
.battle-route > div:last-child { text-align: right; }
.battle-route small { color: #8a795f; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.battle-route strong { color: #493721; font-size: 13px; }
.battle-route span { color: #786850; font-size: 9px; }
.battle-route i { color: #7b5c36; font-style: normal; font-size: 20px; text-align: center; }
.battle-side-section { overflow: hidden; border: 1px solid #ceb98f; border-radius: 9px; background: rgba(255,255,255,.45); }
.battle-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #ddceb2; background: rgba(255,248,235,.68); }
.battle-section-heading h3,.battle-siege-section h3 { margin: 0; color: #4b3822; font-family: Georgia,serif; font-size: 14px; }
.battle-section-heading span { color: #6e8052; font-size: 9px; font-weight: 850; }
.battle-army-list { display: grid; }
.battle-unit-line { display: grid; grid-template-columns: 42px minmax(0,1fr) repeat(3,52px); align-items: center; gap: 8px; min-height: 55px; padding: 6px 9px; border-bottom: 1px solid #e3d7c2; }
.battle-unit-line:last-child { border-bottom: 0; }
.battle-unit-art { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid #9b7c51; border-radius: 50%; background: #eadbbb; }
.battle-unit-art img { width: 100%; height: 100%; object-fit: contain; }
.battle-unit-line > strong { color: #4d3a23; font-size: 11px; }
.battle-unit-line > span:not(.battle-unit-art) { display: grid; gap: 1px; text-align: right; }
.battle-unit-line small { color: #887962; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.battle-unit-line b { color: #4d3b28; font-size: 11px; }
.battle-unit-line .loss b { color: #a14d3d; }
.battle-unit-line .survive b { color: #56753a; }
.battle-empty,.battle-hidden-defense { margin: 0; padding: 12px; color: #7a6b55; font-size: 10px; text-align: center; }
.battle-hidden-defense { background: #eee3cd; }
.battle-healed { margin: 0; padding: 7px 10px; border-top: 1px solid #d8c8aa; color: #52713a; background: #eef4e5; font-size: 9px; font-weight: 750; }
.battle-support-group { border-top: 1px solid #ccb78e; }
.battle-support-title { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #eee4d0; }
.battle-support-title > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #718849; color: #fff; }
.battle-support-title > div { display: grid; gap: 1px; }
.battle-support-title strong { color: #4a3824; font-size: 10px; }
.battle-support-title small { color: #7b6c56; font-size: 8px; }
.battle-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.battle-metrics span { display: grid; gap: 3px; padding: 8px; border: 1px solid #d1bd96; border-radius: 8px; background: rgba(255,255,255,.58); text-align: center; }
.battle-metrics small { color: #806f58; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.battle-metrics b { color: #4f672f; font-size: 12px; }
.battle-loot-section,.battle-siege-section { border: 1px solid #d0bd95; border-radius: 9px; background: rgba(255,255,255,.48); overflow: hidden; }
.battle-loot-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 8px; }
.battle-loot-grid span { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; border: 1px solid #ddd0b6; border-radius: 7px; background: #fff9ed; }
.battle-loot-grid img { width: 24px; height: 24px; object-fit: contain; }
.battle-loot-grid b { color: #59462d; font-size: 10px; }
.battle-siege-section { padding: 10px; }
.battle-siege-section h3 { margin-bottom: 7px; }
.battle-siege-section p { margin: 4px 0; color: #6a5942; font-size: 10px; line-height: 1.4; }

@media (max-width: 780px) {
    .battle-report-card > summary { grid-template-columns: 38px minmax(0,1fr) auto; gap: 7px; min-height: 60px; padding: 8px; }
    .battle-report-icon { width: 34px; height: 34px; }
    .battle-result-pill { min-width: 62px; padding: 4px 6px; font-size: 8px; }
    .battle-report-body { gap: 9px; padding: 8px; }
    .battle-route { padding: 8px; }
    .battle-unit-line { grid-template-columns: 36px minmax(0,1fr) repeat(3,43px); gap: 5px; min-height: 49px; padding: 5px 6px; }
    .battle-unit-art { width: 33px; height: 33px; }
    .battle-unit-line > strong { font-size: 9px; }
    .battle-unit-line small { font-size: 6px; }
    .battle-unit-line b { font-size: 9px; }
    .battle-metrics { gap: 5px; }
    .battle-metrics span { padding: 6px 4px; }
    .battle-loot-grid { gap: 4px; padding: 6px; }
    .battle-loot-grid img { width: 21px; height: 21px; }
    .rally-target-grid { grid-template-columns: 1fr 1fr; }
    .rally-target-grid label:last-child { grid-column: 1 / -1; }
}

/* V1.9.8.18 functional building modules */
.market-stat-grid,.expansion-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.market-stat{padding:14px;text-align:center}.market-stat small,.market-stat span{display:block;color:#7a6a55}.market-stat strong{display:block;margin:4px 0;font:800 22px Georgia,serif;color:#4f6136}.market-send-card,.market-movements-card,.expansion-slots-card,.settler-card,.capital-card,.culture-total-card,.celebration-active{margin-top:12px}.market-send-form{display:grid;gap:12px}.coordinate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.coordinate-grid label,.market-resource-inputs label{display:grid;gap:6px;font-weight:700}.coordinate-grid input,.market-resource-inputs input{width:100%;box-sizing:border-box;border:1px solid #b9a989;border-radius:8px;background:#fffaf0;padding:10px;color:#403729}.market-resource-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.market-resource-inputs label span{display:flex;align-items:center;gap:6px}.market-resource-inputs img{width:26px;height:26px;object-fit:contain}.market-shipment-list{display:grid;gap:8px}.market-shipment-row{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(160px,1.8fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #d0c19f;border-radius:8px;background:#f8f0dc}.market-shipment-row small{display:block;color:#7b6c59}.market-shipment-res{display:flex;flex-wrap:wrap;gap:5px}.market-shipment-res span{display:inline-flex;align-items:center;gap:3px;font-size:12px}.market-shipment-res img{width:22px;height:22px;object-fit:contain}.market-shipment-status{text-align:right}.empty-inline{padding:14px;text-align:center;color:#7b6c59}.culture-total-card{text-align:center}.culture-total-card small,.culture-total-card span{display:block;color:#7b6c59}.culture-total-card strong{display:block;font:800 30px Georgia,serif;color:#5a6e37}.celebration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.celebration-card{display:grid;gap:8px}.celebration-card.is-locked{opacity:.72}.celebration-active{position:relative}.culture-reward{font:800 24px Georgia,serif;color:#5b7138}.expansion-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.expansion-slot{display:grid;place-items:center;min-height:88px;border:2px solid #c5b48f;border-radius:12px;background:#f7eed9}.expansion-slot b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#8b7753;color:white}.expansion-slot span{font-weight:700}.expansion-slot.is-free{border-color:#7e9b52;background:#eef4df}.expansion-slot.is-used{border-color:#9b6d4b;background:#eee0d2}.expansion-slot.is-locked{filter:grayscale(.7);opacity:.58}.capital-card.is-capital{text-align:center;color:#5d7138}.settler-card .unit-head{margin-bottom:10px}
@media(max-width:720px){.market-stat-grid,.expansion-stat-grid{grid-template-columns:repeat(3,1fr);gap:5px}.market-stat{padding:9px 5px}.market-stat strong{font-size:16px}.market-stat small,.market-stat span{font-size:9px}.market-resource-inputs{grid-template-columns:1fr 1fr}.market-shipment-row{grid-template-columns:1fr;gap:5px}.market-shipment-status{text-align:left}.celebration-grid{grid-template-columns:1fr}.expansion-slots{grid-template-columns:repeat(3,1fr)}.expansion-slot{min-height:70px;font-size:11px}}

/* V1.9.8.19 CP settlement system */
.expansion-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.expansion-culture-card{margin-top:12px}.expansion-culture-card .card-heading>strong{font:800 18px Georgia,serif;color:#536a35}.culture-progress{height:9px;overflow:hidden;border:1px solid #b9a980;border-radius:999px;background:#e6dcc5}.culture-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#76924b,#9db969)}
.settlement-checks{display:grid;gap:7px;margin:12px 0}.settlement-check{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:8px;border:1px solid #d2c3a4;border-radius:8px;background:#f8f1df}.settlement-check>span{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;font-weight:900}.settlement-check>div{display:grid;gap:2px}.settlement-check strong{font-size:11px;color:#4c3d28}.settlement-check small{font-size:9px;color:#776954}.settlement-check.ok{border-color:#a8bb86;background:#eef4e3}.settlement-check.ok>span{background:#78954f;color:white}.settlement-check.no{border-color:#d2aaa0;background:#f8e9e4}.settlement-check.no>span{background:#a86655;color:white}.map-tile.selected{outline:3px solid rgba(115,143,71,.7);outline-offset:-3px}
@media(max-width:720px){.expansion-stat-grid{grid-template-columns:repeat(2,1fr)}.expansion-culture-card .card-heading{align-items:flex-start}.expansion-culture-card .card-heading>strong{font-size:14px}.settlement-check{padding:7px}}

/* --------------------------------------------------------------------------
   Travia 1.9.8.21 — responsive desktop world
   Desktop gets a true landscape game canvas; the existing phone viewport and
   coordinates remain untouched below 781 px.
   -------------------------------------------------------------------------- */
.realm-map-picture { display: contents; }

@media (min-width: 781px) {
    .game-content-immersive {
        width: min(1720px, 100%);
        padding: 10px 14px 14px;
    }

    .realm-screen {
        border-radius: 9px;
    }

    .realm-workspace {
        min-height: 0;
    }

    .realm-map-panel {
        min-width: 0;
        min-height: 0;
    }

    /* Landscape desktop canvases.  The desktop artwork is generated from the
       same world source and slot coordinates are remapped to its crop. */
    .realm-map {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 32px rgba(0,0,0,.34);
    }

    .realm-map-background {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    .city-map-slot,
    .field-map-slot,
    .city-premium-slot,
    .city-premium-anchor {
        top: var(--slot-y-desktop, var(--slot-y));
    }

    /* Percentage marker sizes that were tuned for a 941 px portrait canvas
       become oversized on a 1600 px landscape canvas. */
    .city-map-slot.is-built {
        width: clamp(92px, 9.2%, 148px);
    }
    .city-map-slot.is-constructing {
        width: clamp(104px, 10.2%, 162px);
    }
    .city-map-slot.is-empty {
        width: clamp(46px, 4.7%, 76px);
    }
    .city-premium-slot,
    .city-premium-anchor {
        width: clamp(44px, 4.5%, 72px);
    }
    .city-premium-slot.is-next {
        width: clamp(56px, 5.5%, 88px);
    }
    .field-map-slot {
        width: clamp(48px, 5.2%, 76px);
    }

    .city-map-slot.is-empty i::after {
        font-size: 16px;
    }

    .city-map-slot.is-built > b,
    .city-map-slot.is-constructing > b {
        min-width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .realm-map-switch {
        right: 14px;
        bottom: 14px;
    }

    .map-ribbon {
        top: 14px;
    }
    .map-ribbon-left { left: 14px; }
    .map-ribbon-right { right: 14px; }

    .realm-screen-city .realm-map-panel {
        background: #7cae58;
    }
}

@media (min-width: 1280px) {
    .realm-titlebar {
        min-height: 58px;
        padding-inline: 20px;
    }
    .realm-titlebar h1 { font-size: 28px; }
    .realm-titlebar small { font-size: 10px; }

    .realm-screen:not(.realm-screen-city) .realm-workspace {
        grid-template-columns: minmax(0,1fr) 326px;
    }

    .realm-command {
        font-size: 1.02em;
    }
}


/* --------------------------------------------------------------------------
   Travia 1.9.8.22 — balanced desktop canvas fix
   Keep the phone UI untouched. Desktop uses a centered 16:9 world canvas,
   compact map markers and coordinates pinned to the painted world objects.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    .game-content-immersive {
        width: min(1320px, calc(100% - 20px));
        padding: 10px 0 12px;
    }

    .realm-screen {
        border-radius: 8px;
    }

    .realm-map-panel {
        place-items: center;
        padding: 8px;
        background:
            radial-gradient(circle at 50% 42%, rgba(112,145,75,.22), transparent 54%),
            linear-gradient(145deg, #253c27, #111a13 70%, #21180f);
    }

    .realm-screen-city .realm-map-panel {
        padding-inline: 12px;
        background:
            radial-gradient(circle at 50% 40%, rgba(118,166,79,.52), transparent 58%),
            linear-gradient(145deg, #5b863e, #294828 72%, #17281b);
    }

    .realm-map {
        width: min(100%, calc((100dvh - var(--game-header-height) - 92px) * 1.7777778));
        height: auto;
        max-width: 1120px;
        aspect-ratio: 16 / 9;
        margin: auto;
        border: 1px solid rgba(93,67,37,.74);
        border-radius: 5px;
        box-shadow:
            0 0 0 1px rgba(255,241,199,.16),
            0 10px 28px rgba(0,0,0,.38);
    }

    .realm-map-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .realm-screen:not(.realm-screen-city) .realm-workspace {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .realm-screen:not(.realm-screen-city) .realm-map {
        max-width: 1000px;
    }

    .realm-command {
        border-left: 1px solid rgba(92,64,34,.42);
    }

    .city-map-slot,
    .field-map-slot,
    .city-premium-slot,
    .city-premium-anchor {
        left: var(--slot-x-desktop, var(--slot-x));
        top: var(--slot-y-desktop, var(--slot-y));
    }

    /* Desktop resource sites are already painted into the landscape artwork.
       Markers are compact selectors, not giant opaque circles. */
    .field-map-slot,
    .field-map-slot.resource-clay,
    .field-map-slot.resource-iron,
    .field-map-slot.resource-crop {
        width: clamp(30px, 3.1vw, 40px);
        max-width: 40px;
        border-width: 2px;
        background: rgba(248,244,226,.84);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.72),
            0 3px 8px rgba(24,18,9,.34);
        backdrop-filter: blur(1px);
    }

    .field-map-slot.resource-wood { border-color: #648947; }
    .field-map-slot.resource-clay { border-color: #a96443; }
    .field-map-slot.resource-iron { border-color: #71807f; }
    .field-map-slot.resource-crop { border-color: #b89435; }

    .field-map-slot i {
        font-size: 10px;
        font-weight: 800;
    }

    .field-map-slot i:empty::after {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        opacity: .52;
        content: "";
    }

    .field-map-slot:hover,
    .field-map-slot.is-selected {
        background: rgba(255,250,225,.96);
        box-shadow:
            0 0 0 2px rgba(255,246,199,.92),
            0 0 0 5px rgba(121,160,61,.28),
            0 5px 12px rgba(24,18,9,.38);
        transform: translate(-50%,-50%) scale(1.1);
    }

    .field-map-slot > span {
        top: calc(100% + 4px);
        font-size: 8px;
    }

    /* City uses small green build points and proportionate building art. */
    .city-map-slot.is-empty {
        width: clamp(26px, 2.5vw, 34px);
        border: 1px solid rgba(235,239,192,.82);
        background: radial-gradient(circle at 38% 30%, rgba(126,166,74,.80), rgba(54,92,36,.76) 72%);
        box-shadow:
            0 0 0 2px rgba(44,61,29,.24),
            0 3px 7px rgba(27,18,9,.30),
            inset 0 1px rgba(255,255,255,.28);
    }

    .city-map-slot.is-empty i::after {
        font-size: 12px;
    }

    .city-map-slot.is-built {
        width: clamp(72px, 7.3vw, 104px);
        transform: translate(-50%, -70%);
    }

    .city-map-slot.is-constructing {
        width: clamp(80px, 7.8vw, 112px);
        transform: translate(-50%, -70%);
    }

    .city-map-slot.is-built > b,
    .city-map-slot.is-constructing > b {
        right: 10%;
        bottom: 10%;
        min-width: 19px;
        height: 19px;
        border-width: 1px;
        font-size: 9px;
    }

    .city-premium-slot,
    .city-premium-anchor {
        width: clamp(27px, 2.7vw, 36px);
    }

    .city-premium-slot.is-next {
        width: clamp(34px, 3.2vw, 44px);
    }

    .map-ribbon {
        top: 9px;
        min-height: 25px;
        padding: 4px 7px;
        font-size: 8px;
    }
    .map-ribbon-left { left: 9px; }
    .map-ribbon-right { right: 9px; }

    .realm-map-switch {
        right: 9px;
        bottom: 9px;
        transform: scale(.88);
        transform-origin: right bottom;
    }
}

@media (min-width: 1200px) {
    .game-content-immersive {
        width: min(1320px, calc(100% - 28px));
    }

    .realm-screen:not(.realm-screen-city) .realm-workspace {
        grid-template-columns: minmax(0, 1fr) 304px;
    }
}


/* --------------------------------------------------------------------------
   Travia 1.9.8.23 — unified desktop page shell
   Only the two world canvases (fields/city) use immersive mode. Interior
   building pages use the standard desktop shell and world canvases hug the
   top edge instead of floating in unused space.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    /* World views: remove the framed/miniature feeling left by 1.9.8.22. */
    .realm-map-panel {
        place-items: start center;
        padding: 4px;
    }

    .realm-screen-city .realm-map-panel {
        padding: 4px;
    }

    .realm-screen-city .realm-map {
        width: 100%;
        max-width: 1320px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
    }

    .realm-screen:not(.realm-screen-city) .realm-map {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    /* Training / academy-style pages now live in the regular desktop shell. */
    [data-training-page] {
        width: 100%;
        max-width: 1120px;
        margin-inline: auto;
    }

    [data-training-page] .page-heading {
        margin-bottom: 18px;
    }

    [data-training-page] .sub-tabs {
        margin-bottom: 18px;
    }

    [data-training-page] .unit-grid {
        grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
        gap: 16px;
    }

    [data-training-page] .unit-card {
        min-width: 0;
        padding: 22px;
    }

    [data-training-page] .unit-meta {
        flex-wrap: wrap;
        row-gap: 8px;
        font-size: 10px;
    }

    [data-training-page] .train-form {
        max-width: 760px;
    }

    /* Building management: a true desktop dialog on a landscape city scene. */
    .building-market-screen {
        padding: 22px 24px;
        place-items: start center;
    }

    .building-market-landscape {
        object-position: center center;
    }

    .building-market-shade {
        background: rgba(40, 32, 21, .24);
        backdrop-filter: blur(.6px);
    }

    .building-dialog {
        width: min(1080px, calc(100% - 48px));
        max-height: calc(100dvh - var(--game-header-height) - 44px);
        border-radius: 10px;
    }

    .building-dialog-titlebar {
        min-height: 76px;
        padding: 12px 18px 12px 24px;
    }

    .building-dialog-titlebar h1 {
        font-size: clamp(27px, 2.4vw, 36px);
    }

    .building-upgrade-view {
        grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
        gap: 26px;
        padding: 28px;
    }

    .building-upgrade-art {
        min-height: 370px;
    }

    .building-upgrade-copy {
        padding: 14px 6px;
    }

    .building-upgrade-copy h2 {
        font-size: 36px;
    }

    .building-offer {
        grid-template-columns: minmax(0, 1fr) 250px;
    }
}

@media (min-width: 1280px) {
    .game-shell {
        width: min(1580px, 100%);
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .game-page-section .game-content {
        max-width: 1320px;
    }
}


/* --------------------------------------------------------------------------
   Travia 1.9.8.24 — desktop interior polish
   Keep the approved world canvases untouched.  Interior building pages use a
   denser, consistent desktop rhythm instead of stretching mobile cards across
   all available monitor space.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    .desktop-page {
        width: min(1080px, 100%);
        margin-inline: auto;
    }

    .desktop-page .page-heading {
        margin-bottom: 14px;
    }

    .desktop-page .page-heading h1 {
        font-size: clamp(31px, 2.6vw, 39px);
        line-height: 1.02;
    }

    .desktop-page .page-heading p {
        max-width: 760px;
        font-size: 11px;
        line-height: 1.45;
    }

    /* Training buildings: two-column catalogue; a lone unit stays a readable
       card instead of becoming a full-width white banner. */
    .desktop-page-training {
        max-width: 1060px;
    }

    .desktop-page-training .sub-tabs {
        margin-bottom: 14px;
    }

    .desktop-page-training .unit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .desktop-page-training .unit-grid > .unit-card:only-child,
    .desktop-page-training .unit-grid > .empty-state:only-child {
        grid-column: 1 / -1;
        width: min(760px, 100%);
        justify-self: start;
    }

    .desktop-page-training .unit-card {
        display: grid;
        align-content: start;
        min-height: 0;
        padding: 16px 18px;
    }

    .desktop-page-training .unit-head h2 {
        font-size: 19px;
    }

    .desktop-page-training .unit-meta {
        gap: 7px 12px;
        margin-top: 8px;
        line-height: 1.25;
    }

    .desktop-page-training .resource-cost-row {
        margin-top: 10px;
    }

    .desktop-page-training .train-form {
        width: 100%;
        max-width: none;
        margin-top: 10px;
    }

    .desktop-page-training .train-form .button {
        min-width: 138px;
    }

    .desktop-page-training .max-fill {
        margin-top: 5px;
    }

    /* Academy: equal-height research cards and actions anchored to the bottom. */
    .desktop-page-academy {
        max-width: 1100px;
    }

    .desktop-page-academy .research-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
        align-items: stretch;
    }

    .desktop-page-academy .research-card {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        min-height: 168px;
        padding: 15px 17px;
    }

    .desktop-page-academy .unit-head h2 {
        font-size: 18px;
    }

    .desktop-page-academy .unit-meta {
        gap: 6px 10px;
        margin-top: 7px;
        flex-wrap: wrap;
    }

    .desktop-page-academy .resource-cost-row {
        align-self: end;
        margin-top: 9px;
    }

    .desktop-page-academy .researched-label {
        align-self: end;
        margin-top: 10px;
    }

    /* Marketplace: reduce the form-like, stretched appearance while keeping
       all information visible at once on a normal desktop monitor. */
    .desktop-page-marketplace {
        max-width: 1080px;
    }

    .desktop-page-marketplace .market-stat-grid {
        gap: 8px;
        margin: 8px 0 10px;
    }

    .desktop-page-marketplace .market-stat {
        min-height: 72px;
        padding: 9px 12px;
    }

    .desktop-page-marketplace .market-stat strong {
        margin: 2px 0;
        font-size: 19px;
    }

    .desktop-page-marketplace .market-send-card,
    .desktop-page-marketplace .market-movements-card {
        margin-top: 9px;
        padding: 15px 17px;
    }

    .desktop-page-marketplace .market-send-form {
        gap: 8px;
    }

    .desktop-page-marketplace .coordinate-grid {
        gap: 8px;
    }

    .desktop-page-marketplace .coordinate-grid input,
    .desktop-page-marketplace .market-resource-inputs input {
        min-height: 36px;
        padding: 7px 9px;
    }

    .desktop-page-marketplace .market-resource-inputs {
        gap: 6px 8px;
    }

    .desktop-page-marketplace .market-resource-inputs img {
        width: 22px;
        height: 22px;
    }

    .desktop-page-marketplace .market-send-form > .button {
        min-height: 38px;
    }
}

@media (min-width: 1500px) {
    .game-page-section .game-shell {
        width: min(1500px, calc(100% - 36px));
    }

    .game-page-section .game-sidebar {
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8.25 — Professional Unified Desktop UI
   One desktop system for world canvases and every interior game page.
   Mobile behaviour remains owned by the <=780px rules above.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    :root {
        --pro-shell-max: 1600px;
        --pro-sidebar: 220px;
        --pro-gap: 12px;
        --pro-paper: #eee3cc;
        --pro-paper-light: #fff8e8;
        --pro-paper-deep: #d8c5a3;
        --pro-wood: #3b2a1b;
        --pro-wood-dark: #21170f;
        --pro-line: #8e6e45;
        --pro-green: #587737;
        --pro-green-dark: #395522;
    }

    html { background: #1d160f; }
    .game-body {
        background:
            radial-gradient(circle at 50% 0, rgba(142,111,65,.18), transparent 34%),
            linear-gradient(180deg, #2c2117 0, #17110c 100%);
    }

    /* The header and the complete desktop game use the same visual width. */
    .game-header {
        border-bottom: 3px solid #76542f;
        background:
            linear-gradient(90deg, rgba(255,255,255,.035), transparent 28%, transparent 72%, rgba(255,255,255,.025)),
            linear-gradient(#4a3725,#2c2016);
        box-shadow: 0 5px 18px rgba(0,0,0,.32), inset 0 -1px rgba(224,187,111,.16);
    }
    .game-header-inner {
        width: min(var(--pro-shell-max), calc(100% - 24px));
        grid-template-columns: 190px auto minmax(440px,1fr) auto;
        gap: 10px;
        padding-inline: 10px;
    }
    .game-header .compact-brand { padding-right: 8px; }
    .game-header .compact-brand strong { color: #f4e3bd; letter-spacing: .02em; }
    .header-game-nav .nav-item {
        border-color: rgba(222,190,126,.18);
        background: rgba(28,19,12,.24);
    }
    .header-game-nav .nav-item:hover,
    .header-game-nav .nav-item.active {
        border-color: #b99952;
        background: linear-gradient(#6e8d42,#405f27);
    }
    .game-header .resource-item {
        border-color: #8f734e;
        background: linear-gradient(#fffaf0,#dfd2b8);
        box-shadow: inset 0 1px #fff, 0 2px 5px rgba(27,18,10,.28);
    }
    .game-header .header-icon,
    .game-header .player-pill {
        border-color: #8c704b;
        background: linear-gradient(#fff8e8,#d8c9ad);
    }

    /* Universal desktop shell. */
    .game-shell,
    .game-page-section .game-shell,
    .game-shell-world {
        width: min(var(--pro-shell-max), calc(100% - 24px));
        min-height: calc(100dvh - var(--game-header-height));
        grid-template-columns: var(--pro-sidebar) minmax(0,1fr);
        border-right: 1px solid rgba(161,125,75,.42);
        border-left: 1px solid rgba(161,125,75,.42);
        background: linear-gradient(180deg,#e8ddc8,#d9c9ac);
        box-shadow: 0 12px 35px rgba(0,0,0,.25);
    }

    .game-sidebar,
    .game-sidebar-world {
        top: var(--game-header-height);
        height: calc(100dvh - var(--game-header-height));
        padding: 13px 11px;
        border-right: 2px solid #765637;
        background:
            linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%),
            linear-gradient(#3b2d20,#271d15 72%,#1e1711);
        box-shadow: inset -10px 0 24px rgba(0,0,0,.12);
        scrollbar-color: #997b53 transparent;
    }
    .game-sidebar .paper-panel,
    .game-sidebar-world .paper-panel {
        border: 1px solid #8d704b;
        border-radius: 8px;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(87,61,29,.018) 4px 5px),
            linear-gradient(#fff8e8,#dac9aa);
        box-shadow: inset 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.17);
    }
    .game-sidebar .sidebar-label,
    .game-sidebar-world .sidebar-label { color: #7e6849; }
    .game-sidebar .village-panel strong,
    .game-sidebar-world .village-panel strong { color: #44331f; font-size: 18px; }

    .world-sidebar-nav {
        display: grid;
        gap: 5px;
        margin: 10px 0;
        padding: 6px;
        border: 1px solid rgba(180,145,91,.25);
        border-radius: 8px;
        background: rgba(8,6,4,.13);
    }
    .world-sidebar-nav a {
        display: grid;
        min-height: 45px;
        grid-template-columns: 35px minmax(0,1fr);
        align-items: center;
        gap: 8px;
        padding: 5px 9px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: #e2d1ae;
        font-size: 11px;
        font-weight: 800;
    }
    .world-sidebar-nav a > span,
    .world-sidebar-nav .nav-art {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 6px;
        background: rgba(255,255,255,.07);
        font-size: 16px;
    }
    .world-sidebar-nav .nav-art img { width: 30px; height: 30px; object-fit: contain; }
    .world-sidebar-nav a:hover,
    .world-sidebar-nav a.active {
        color: #fff6d7;
        border-color: #9f7c42;
        background: linear-gradient(#6f8f43,#405f27);
        box-shadow: inset 0 1px rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.2);
    }
    .world-sidebar-footer {
        margin-top: 12px;
        padding: 15px 10px;
        border-top: 1px solid rgba(214,178,111,.18);
        color: #a99370;
        text-align: center;
    }
    .world-sidebar-footer small { display: block; color: #d7b977; font-family: Georgia,serif; font-weight: 800; letter-spacing: .12em; }
    .world-sidebar-footer span { display: block; margin-top: 5px; font-size: 9px; }

    /* World pages now fill the complete area beneath the full-width header. */
    .game-page-immersive { overflow: hidden; }
    .game-shell-world { height: calc(100dvh - var(--game-header-height)); overflow: hidden; }
    .game-shell-world .game-content-immersive {
        width: auto;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 10px;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 20%, rgba(255,255,255,.15), transparent 34%),
            linear-gradient(#d9c9ad,#bfa884);
    }
    .game-shell-world .game-flashes {
        position: fixed;
        z-index: 90;
        top: calc(var(--game-header-height) + 8px);
        left: 50%;
        width: min(620px,calc(100% - 32px));
        margin: 0;
        transform: translateX(-50%);
    }

    .game-shell-world .realm-screen {
        width: 100%;
        height: 100%;
        min-height: 0;
        grid-template-rows: 58px minmax(0,1fr);
        border: 2px solid #755333;
        border-radius: 9px;
        background: #d9c8a8;
        box-shadow: 0 12px 28px rgba(45,29,15,.25), inset 0 0 0 1px rgba(255,255,255,.28);
    }
    .game-shell-world .realm-titlebar {
        min-height: 58px;
        padding: 7px 14px 7px 18px;
        border-bottom: 2px solid #7e5b34;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(86,58,28,.018) 4px 5px),
            linear-gradient(#fff8e9,#dccaa9);
    }
    .game-shell-world .realm-titlebar h1 { font-size: 27px; }
    .game-shell-world .realm-workspace {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background: #d7c6a6;
    }

    /* Fields: fixed-height shared workspace; the command column scrolls inside
       the same visual height, therefore no black dead area can remain below. */
    .game-shell-world .realm-screen-fields .realm-workspace {
        grid-template-columns: minmax(0,1fr) 296px;
    }
    .game-shell-world .realm-screen-fields .realm-map-panel,
    .game-shell-world .realm-screen-city .realm-map-panel {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        place-items: stretch;
        overflow: hidden;
        border-color: #73512e;
        background: #6f9e4f;
    }
    .game-shell-world .realm-map {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        border-radius: 0;
        box-shadow: none;
    }
    .game-shell-world .realm-map-background {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    .game-shell-world .realm-command {
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        border-left: 0;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(91,65,34,.023) 4px 5px),
            linear-gradient(#f4ead6,#d7c5a4);
        box-shadow: inset 8px 0 18px rgba(72,48,23,.11);
    }
    .game-shell-world .field-detail-panel { padding: 13px 13px 11px; }
    .game-shell-world .field-detail-head h2 { font-size: 18px; }
    .game-shell-world .field-output { margin-top: 10px; }
    .game-shell-world .field-upgrade-box { margin-top: 9px; padding-top: 9px; }
    .game-shell-world .field-overview { padding: 11px 13px; }

    /* Field/city markers are compact game controls rather than oversized UI. */
    .game-shell-world .field-map-slot {
        width: clamp(28px,2.6vw,38px);
        min-width: 28px;
        border-width: 1px;
        box-shadow: 0 0 0 2px rgba(61,72,37,.32),0 3px 7px rgba(25,17,9,.35),inset 0 1px rgba(255,255,255,.38);
    }
    .game-shell-world .field-map-slot i { font-size: 10px; }
    .game-shell-world .city-map-slot.is-empty { width: clamp(23px,2.1vw,31px); }
    .game-shell-world .city-map-slot.is-built { width: clamp(68px,6.2vw,94px); }
    .game-shell-world .city-map-slot.is-constructing { width: clamp(76px,6.8vw,104px); }

    .game-shell-world .map-ribbon {
        top: 9px;
        min-height: 26px;
        padding: 4px 8px;
        border-radius: 5px;
        font-size: 8px;
    }
    .game-shell-world .map-ribbon-left { left: 9px; }
    .game-shell-world .map-ribbon-right { right: 9px; }
    .game-shell-world .realm-map-switch {
        right: 10px;
        bottom: 10px;
        gap: 3px;
        padding: 3px;
        border-radius: 6px;
    }
    .game-shell-world .realm-map-switch a {
        min-width: 67px;
        min-height: 34px;
        padding: 4px 7px;
        font-size: 9px;
    }

    /* The old giant circular army button is replaced by a normal HUD control. */
    .realm-city-map .city-troop-trigger {
        top: 44px !important;
        right: 10px !important;
        width: auto !important;
        height: 45px !important;
        min-width: 108px !important;
        min-height: 45px !important;
        display: inline-grid !important;
        grid-template-columns: 34px auto;
        align-items: center;
        gap: 7px;
        padding: 5px 10px 5px 6px !important;
        border: 1px solid #70522f !important;
        border-radius: 7px !important;
        color: #fff2cf !important;
        background: linear-gradient(#6f8e43,#405f27) !important;
        box-shadow: 0 4px 11px rgba(35,23,11,.34), inset 0 1px rgba(255,255,255,.22) !important;
        transform: none !important;
    }
    .realm-city-map .city-troop-trigger::before,
    .realm-city-map .city-troop-trigger::after { display: none !important; }
    .realm-city-map .city-troop-trigger-icon {
        width: 34px !important;
        height: 34px !important;
        border: 1px solid rgba(255,239,190,.55) !important;
        border-radius: 6px !important;
        overflow: hidden;
        background: rgba(255,255,255,.13) !important;
        box-shadow: none !important;
    }
    .realm-city-map .city-troop-trigger-icon::after { display: none !important; }
    .realm-city-map .city-troop-trigger-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 5px;
    }
    .realm-city-map .city-troop-trigger-copy {
        display: block !important;
        min-width: 48px;
        text-align: left;
    }
    .realm-city-map .city-troop-trigger-copy small {
        display: block;
        color: #e8d7ac;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .realm-city-map .city-troop-trigger-copy strong {
        display: block;
        margin-top: 1px;
        color: #fff7dd;
        font-family: Georgia,serif;
        font-size: 14px;
        line-height: 1;
    }
    .realm-city-map .city-troop-trigger:hover,
    .realm-city-map .city-troop-trigger:focus-visible {
        filter: brightness(1.08);
        transform: translateY(-1px) !important;
    }

    /* Standard interior pages: same parchment surface, width and card rhythm. */
    .game-page-section .game-content {
        width: 100%;
        max-width: none;
        min-height: calc(100dvh - var(--game-header-height));
        margin: 0;
        padding: 22px clamp(18px,2.2vw,34px) 80px;
        background:
            radial-gradient(circle at 50% 0,rgba(255,255,255,.34),transparent 36%),
            linear-gradient(#eee5d4,#dfd2ba);
    }
    .game-page-section .game-content > .desktop-page,
    .game-page-section .game-content > .page-heading,
    .game-page-section .game-content > .card,
    .game-page-section .game-content > section,
    .game-page-section .game-content > form {
        width: min(1120px,100%);
        margin-inline: auto;
    }
    .desktop-page {
        width: min(1120px,100%);
        margin-inline: auto;
    }
    .page-heading {
        margin-bottom: 15px;
        padding: 14px 17px 13px;
        border: 1px solid #a08864;
        border-radius: 8px;
        background: linear-gradient(rgba(255,255,255,.33),rgba(255,255,255,.08));
        box-shadow: inset 0 1px rgba(255,255,255,.55);
    }
    .page-heading h1 { margin-top: 4px; font-size: clamp(30px,2.4vw,38px); }
    .page-heading p { max-width: 820px; margin-top: 5px; line-height: 1.45; }
    .back-link { font-size: 10px; font-weight: 800; }

    .game-page-section .card,
    .desktop-page .card,
    .market-stat,
    .market-send-card,
    .market-movements-card,
    .settler-card,
    .capital-card,
    .culture-total-card,
    .expansion-slots-card,
    .celebration-card,
    .celebration-active {
        border: 1px solid #aa916c;
        border-radius: 9px;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(87,61,29,.014) 4px 5px),
            linear-gradient(#fffaf0,#e3d5bc);
        box-shadow: inset 0 1px rgba(255,255,255,.7),0 5px 14px rgba(69,47,24,.10);
    }
    .sub-tabs {
        overflow: hidden;
        border: 1px solid #9b7c53;
        border-radius: 7px;
        background: #c5b291;
    }
    .sub-tabs a { min-height: 39px; }
    .sub-tabs a.active {
        color: #fff6d5;
        background: linear-gradient(#719044,#405f27);
    }

    .desktop-page-training,
    .desktop-page-academy,
    .desktop-page-marketplace { max-width: 1120px; }
    .desktop-page-training .unit-grid,
    .desktop-page-academy .research-grid { gap: 12px; }
    .desktop-page-training .unit-card,
    .desktop-page-academy .research-card { border-radius: 9px; }
    .desktop-page-marketplace .market-send-card,
    .desktop-page-marketplace .market-movements-card { border-radius: 9px; }

    /* Building manager is a contained desktop window instead of a mobile card
       floating in an arbitrary full-screen scene. */
    .building-market-screen {
        min-height: calc(100dvh - var(--game-header-height) - 44px);
        padding: 22px;
        border: 1px solid #8f7049;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(58,39,19,.18);
    }
    .building-market-shade { background: rgba(40,31,20,.30); backdrop-filter: blur(1px); }
    .building-dialog {
        width: min(1040px,calc(100% - 34px));
        max-height: calc(100dvh - var(--game-header-height) - 78px);
        border: 2px solid #7c5b36;
        border-radius: 10px;
        box-shadow: 0 20px 48px rgba(31,20,10,.36), inset 0 0 0 1px rgba(255,255,255,.35);
    }

    /* Prevent isolated content blocks from leaving huge unused desktop areas. */
    .game-page-section .empty-state { min-height: 180px; }
    .game-page-section .unit-grid,
    .game-page-section .research-grid { align-items: stretch; }

    .floating-build-queue {
        bottom: 16px;
        width: min(460px,calc(100% - 32px));
        border-radius: 9px;
    }
}

@media (min-width: 1280px) {
    .game-shell,
    .game-page-section .game-shell,
    .game-shell-world { --pro-sidebar: 230px; }
    .game-shell-world .realm-screen-fields .realm-workspace { grid-template-columns: minmax(0,1fr) 310px; }
}

@media (min-width: 1500px) {
    .game-shell,
    .game-page-section .game-shell,
    .game-shell-world { width: min(var(--pro-shell-max), calc(100% - 34px)); }
    .game-header-inner { width: min(var(--pro-shell-max), calc(100% - 34px)); }
}

/* V1.9.8.25 world-canvas final sizing: preserve the familiar full-width
   Village/City layout while eliminating dead space. */
@media (min-width: 781px) {
    body.game-page-immersive {
        overflow-y: auto;
        background: linear-gradient(#2f2419,#18120d);
    }
    body.game-page-immersive .game-content-immersive {
        width: min(1600px, calc(100% - 24px));
        height: auto;
        min-height: calc(100dvh - var(--game-header-height));
        margin: 0 auto;
        padding: 10px 0 16px;
        overflow: visible;
        background: transparent;
    }
    body.game-page-immersive .realm-screen {
        container-type: inline-size;
        width: 100%;
        height: auto;
        min-height: 0;
        grid-template-rows: 58px auto;
        overflow: hidden;
        border: 2px solid #745231;
        border-radius: 9px;
        background: linear-gradient(#dccbaa,#bca47f);
        box-shadow: 0 14px 36px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.24);
    }
    body.game-page-immersive .realm-workspace {
        width: 100%;
        min-height: 0;
        overflow: hidden;
        background: #d6c4a4;
    }
    body.game-page-immersive .realm-screen-fields .realm-workspace {
        height: min(calc(100dvh - var(--game-header-height) - 86px), calc((100cqw - 304px) * .62));
        min-height: 520px;
        grid-template-columns: minmax(0,1fr) 304px;
    }
    body.game-page-immersive .realm-screen-city .realm-workspace {
        height: min(calc(100dvh - var(--game-header-height) - 86px), calc(100cqw * .56));
        min-height: 520px;
        grid-template-columns: minmax(0,1fr);
    }
    body.game-page-immersive .realm-map-panel {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        place-items: stretch;
        overflow: hidden;
        background: #719f50;
    }
    body.game-page-immersive .realm-map {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        box-shadow: none;
    }
    body.game-page-immersive .realm-map-background {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    body.game-page-immersive .realm-command {
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(91,65,34,.023) 4px 5px),
            linear-gradient(#f5ecd9,#d8c6a5);
    }
}

@media (min-width: 1280px) {
    body.game-page-immersive .realm-screen-fields .realm-workspace {
        grid-template-columns: minmax(0,1fr) 318px;
        height: min(calc(100dvh - var(--game-header-height) - 86px), calc((100cqw - 318px) * .60));
    }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8.26 — Professional Interior System
   Final desktop pass for Rally Point, Building Manager, Expansion and every
   standard interior page. Desktop only; mobile remains unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    :root {
        --pro-content-max: 1180px;
        --pro-stage-line: #9f8158;
        --pro-stage-shadow: 0 14px 36px rgba(46,30,15,.14);
    }

    /* One intentional desktop surface instead of unrelated white page areas. */
    .game-page-section .game-content {
        position: relative;
        isolation: isolate;
        min-height: calc(100dvh - var(--game-header-height));
        padding: 18px clamp(16px,2vw,30px) 58px;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 74% 5%,rgba(255,255,255,.42),transparent 30%),
            linear-gradient(180deg,#eee3cf 0,#e4d7bf 58%,#d4c19f 100%);
    }
    .game-page-section .game-content::before {
        content: "";
        position: absolute;
        z-index: -1;
        right: 0;
        bottom: 0;
        left: 0;
        height: 145px;
        pointer-events: none;
        opacity: .22;
        background:
            linear-gradient(165deg,transparent 0 38%,rgba(69,48,27,.26) 38% 40%,transparent 40% 100%),
            linear-gradient(195deg,transparent 0 46%,rgba(69,48,27,.18) 46% 48%,transparent 48% 100%),
            linear-gradient(180deg,transparent,rgba(54,37,21,.24));
    }

    /* Consistent content measure on every normal page. */
    .game-page-section .game-content > .desktop-page,
    .game-page-section .game-content > .page-heading,
    .game-page-section .game-content > .card,
    .game-page-section .game-content > section:not(.building-market-screen),
    .game-page-section .game-content > nav,
    .game-page-section .game-content > form {
        width: min(var(--pro-content-max),100%);
        max-width: var(--pro-content-max);
        margin-inline: auto;
    }
    .game-page-section .desktop-page {
        width: min(var(--pro-content-max),100%);
        max-width: var(--pro-content-max);
    }

    /* Unified title strip. */
    .game-page-section .page-heading {
        position: relative;
        align-items: center;
        min-height: 94px;
        margin-bottom: 12px;
        padding: 14px 18px 13px 20px;
        overflow: hidden;
        border: 1px solid var(--pro-stage-line);
        border-left: 5px solid #5f7b38;
        border-radius: 8px;
        background:
            linear-gradient(90deg,rgba(255,255,255,.58),rgba(255,255,255,.12)),
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(83,58,29,.018) 4px 5px),
            linear-gradient(#fff8e8,#ddccb0);
        box-shadow: inset 0 1px rgba(255,255,255,.82),0 5px 15px rgba(57,38,19,.10);
    }
    .game-page-section .page-heading::after {
        content: "";
        position: absolute;
        right: -50px;
        bottom: -65px;
        width: 250px;
        height: 150px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle,rgba(87,119,55,.14),transparent 70%);
    }
    .game-page-section .page-heading > * { position: relative; z-index: 1; }
    .game-page-section .page-heading h1 {
        margin: 2px 0 3px;
        color: #49351f;
        font-size: clamp(30px,2.3vw,38px);
        line-height: 1.02;
        text-shadow: 0 1px #fff;
    }
    .game-page-section .page-heading p {
        max-width: 820px;
        color: #74634d;
        font-size: 11px;
        line-height: 1.45;
    }
    .game-page-section .page-heading .eyebrow { color: #7d6a4e; }
    .game-page-section .level-pill {
        min-width: 66px;
        justify-content: center;
        border-color: #9d845e;
        color: #4c622e;
        background: linear-gradient(#fff9e9,#e4d5b8);
        box-shadow: inset 0 1px #fff;
    }

    /* Universal cards look like one game product, not admin forms. */
    .game-page-section .card,
    .game-page-section .desktop-page .card {
        border-color: #ab8d64;
        background:
            repeating-linear-gradient(0deg,transparent 0 4px,rgba(92,64,31,.015) 4px 5px),
            linear-gradient(#fffaf0,#e8dac1);
        box-shadow: inset 0 1px rgba(255,255,255,.78),0 5px 14px rgba(57,38,19,.09);
    }
    .game-page-section .card-heading {
        gap: 12px;
        margin-bottom: 10px;
    }
    .game-page-section .card-heading h2 { color: #4a371f; }
    .game-page-section .button-primary,
    .game-page-section .building-action-button {
        border-color: #456127;
        color: #fff8dc;
        background: linear-gradient(#75984a,#456b29);
        box-shadow: inset 0 1px rgba(255,255,255,.24),0 3px 8px rgba(57,42,20,.18);
    }
    .game-page-section .button-secondary {
        border-color: #9e815a;
        color: #543f25;
        background: linear-gradient(#fff9e9,#deceb1);
    }

    /* No page should show a giant blank "empty" rectangle. */
    .game-page-section .empty-state {
        min-height: 0;
        padding: 34px 24px;
        border-style: solid;
        background:
            radial-gradient(circle at 50% 0,rgba(103,132,64,.10),transparent 55%),
            linear-gradient(#fff9e9,#e5d7bd);
    }
    .game-page-section .empty-state.compact { padding: 20px 18px; }

    /* Rally Point: compact command centre rather than a stretched admin form. */
    .game-path-rally-point .rally-heading,
    .game-path-rally-point .rally-tabs,
    .game-path-rally-point .rally-send-card,
    .game-path-rally-point .rally-grid-two {
        width: min(1160px,100%);
        max-width: 1160px;
        margin-inline: auto;
    }
    .game-path-rally-point .rally-tabs { margin-bottom: 10px; }
    .game-path-rally-point .rally-send-card {
        margin-bottom: 12px;
        padding: 16px 17px 17px;
    }
    .game-path-rally-point .rally-target-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 9px;
        margin: 11px 0 12px;
    }
    .game-path-rally-point .rally-target-grid input,
    .game-path-rally-point .rally-target-grid select { min-height: 39px; }
    .game-path-rally-point .rally-unit-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }
    .game-path-rally-point .rally-unit-row {
        grid-template-columns: 46px minmax(0,1fr) 76px;
        min-height: 58px;
        padding: 6px 8px;
    }
    .game-path-rally-point .rally-unit-art { width: 43px; height: 43px; }
    .game-path-rally-point .rally-send-note { margin: 10px 0; }
    .game-path-rally-point .rally-grid-two { gap: 10px; margin-bottom: 10px; }
    .game-path-rally-point .rally-list-card > .card-heading { padding: 12px 14px 9px; }

    /* Expansion / Residence: clear hierarchy and compact state blocks. */
    .game-path-expansion .page-heading,
    .game-path-expansion .expansion-culture-card,
    .game-path-expansion .expansion-stat-grid,
    .game-path-expansion .expansion-slots-card,
    .game-path-expansion .settler-card,
    .game-path-expansion .training-queue,
    .game-path-expansion .capital-card,
    .game-path-expansion > .game-content > .empty-state {
        width: min(1160px,100%);
        max-width: 1160px;
        margin-inline: auto;
    }
    .game-path-expansion .expansion-culture-card {
        margin-top: 0;
        padding: 15px 17px;
    }
    .game-path-expansion .expansion-stat-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 9px;
        margin: 10px auto;
    }
    .game-path-expansion .market-stat { min-height: 82px; padding: 11px 10px; }
    .game-path-expansion .market-stat strong { font-size: 20px; }
    .game-path-expansion .expansion-slots-card,
    .game-path-expansion .settler-card,
    .game-path-expansion .capital-card { margin-top: 10px; }
    .game-path-expansion .expansion-slots { gap: 8px; }
    .game-path-expansion .expansion-slot { min-height: 66px; border-radius: 8px; }
    .game-path-expansion .expansion-slot b { width: 28px; height: 28px; }
    .game-path-expansion .settler-card { padding: 15px 17px; }
    .game-path-expansion .settler-card .train-form {
        display: grid;
        grid-template-columns: minmax(150px,220px) minmax(220px,1fr);
        align-items: end;
        gap: 10px;
    }
    .game-path-expansion .capital-card { padding: 16px 18px; }
    .game-path-expansion .empty-state {
        max-width: 760px;
        margin: 12px auto 0;
        padding: 40px 24px;
    }

    /* Marketplace page and similar forms use a deliberate content width. */
    .game-path-marketplace .desktop-page-marketplace { max-width: 1120px; }
    .game-path-marketplace .market-stat-grid { gap: 9px; margin: 10px 0; }
    .game-path-marketplace .market-stat { min-height: 82px; padding: 11px; }
    .game-path-marketplace .market-send-card,
    .game-path-marketplace .market-movements-card { margin-top: 10px; }
    .game-path-marketplace .market-send-card { padding: 15px 17px; }
    .game-path-marketplace .market-resource-inputs { gap: 7px 10px; }

    /* Building manager: truly fills the desktop work area. The old generic
       section width cap caused the white strip visible on the user's screen. */
    .game-path-build .game-content {
        padding: 10px 12px 14px;
        overflow: hidden;
        background: linear-gradient(#2e2419,#1e1711);
    }
    .game-path-build .game-content > .building-market-screen {
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100dvh - var(--game-header-height) - 24px);
        margin: 0 !important;
        padding: 18px;
        border: 1px solid #6f5030;
        border-radius: 9px;
        background: #29401e;
    }
    .game-path-build .building-market-screen > picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    .game-path-build .building-market-landscape {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 48% !important;
    }
    .game-path-build .building-market-shade {
        background:
            linear-gradient(90deg,rgba(37,28,18,.22),rgba(37,28,18,.08) 48%,rgba(37,28,18,.20)),
            rgba(36,28,18,.18);
        backdrop-filter: blur(.7px);
    }
    .game-path-build .building-dialog {
        width: min(1040px,calc(100% - 34px));
        max-height: calc(100dvh - var(--game-header-height) - 62px);
        border: 2px solid #71502f;
        border-radius: 9px;
        background: #eadcc2;
        box-shadow: 0 22px 54px rgba(28,18,9,.42),inset 0 0 0 1px rgba(255,255,255,.45);
    }
    .game-path-build .building-dialog-titlebar {
        min-height: 58px;
        padding: 9px 14px 9px 17px;
        background: linear-gradient(#55412e,#392a1d);
    }
    .game-path-build .building-dialog-titlebar h1 { font-size: 27px; }
    .game-path-build .building-upgrade-view {
        grid-template-columns: minmax(300px,39%) minmax(0,61%);
        min-height: 340px;
    }
    .game-path-build .building-upgrade-art { min-height: 330px; }
    .game-path-build .building-upgrade-art img { max-width: 88%; max-height: 295px; }
    .game-path-build .building-upgrade-copy { padding: 22px 24px; }
    .game-path-build .building-special-actions { gap: 8px; margin-top: 12px; }

    /* The remaining normal pages inherit the same professional density. */
    .game-path-academy .desktop-page,
    .game-path-training .desktop-page,
    .game-path-hospital .desktop-page,
    .game-path-town-hall .desktop-page,
    .game-path-movements .desktop-page,
    .game-path-messages .desktop-page,
    .game-path-reports .desktop-page,
    .game-path-stats .desktop-page { max-width: 1160px; }

    /* Footer and lower blank area feel intentional on short pages. */
    .game-page-section .game-content > footer,
    .game-page-section .game-content footer {
        color: #846f50;
    }
}

@media (min-width: 1380px) {
    .game-path-rally-point .rally-unit-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .game-path-build .building-dialog { width: min(1100px,calc(100% - 50px)); }
}

/* V1.9.8.27 — Realaus laiko karių judėjimai */
.movement-header-icon {
    font-size: 17px;
    text-decoration: none;
}
.movement-header-icon > span { line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.movement-header-icon.has-hostile {
    border-color: #b85b45;
    color: #ffe5d2;
    background: linear-gradient(145deg,#6e3027,#29150f);
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 2px rgba(171,65,45,.16), 0 7px 18px rgba(0,0,0,.34);
}
.movement-alert-badge[hidden] { display: none !important; }

.movement-page-heading { margin-bottom: 13px; }
.movement-summary-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin-bottom: 12px;
}
.movement-summary-strip > div {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid #d8cab0;
    border-radius: 10px;
    background: linear-gradient(180deg,#fffdf7,#f2eadb);
    box-shadow: 0 5px 12px rgba(80,55,25,.06);
}
.movement-summary-strip small { color: #7d6c54; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.movement-summary-strip strong { color: #425c2d; font-family: Georgia,serif; font-size: 21px; }
.movement-summary-strip .danger { border-color: #d3a08e; background: linear-gradient(180deg,#fff7f2,#f5e3da); }
.movement-summary-strip .danger strong { color: #9a4332; }

.movement-live-columns {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    align-items: start;
}
.movement-column { min-width: 0; }
.movement-column > .card-heading p { margin: 3px 0 0; color: #81715c; font-size: 8px; }
.movement-detailed-row {
    grid-template-columns: 40px minmax(0,1fr) auto;
    align-items: start;
    min-width: 0;
    padding: 12px 13px;
}
.movement-detailed-row.hostile { background: linear-gradient(90deg,rgba(169,65,45,.08),transparent 72%); }
.movement-detailed-row.returning { background: linear-gradient(90deg,rgba(74,112,55,.07),transparent 72%); }
.movement-copy { min-width: 0; }
.movement-copy > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movement-copy > small { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.movement-time-box { display: grid; justify-items: end; gap: 2px; min-width: 70px; }
.movement-time-box small { color: #9a876d; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.movement-time-box time { color: #587734; font-size: 10px; font-weight: 900; white-space: nowrap; }
.hostile .movement-time-box time { color: #9d4634; }
.movement-hidden-info {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 7px;
    border: 1px solid #e2d4bd;
    border-radius: 7px;
    color: #846f57;
    background: #f7f1e6;
    font-size: 8px;
}
.movement-troop-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.movement-troop-chips span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border: 1px solid #d8ccb7;
    border-radius: 999px;
    color: #6a5a45;
    background: #f9f5ed;
    font-size: 7px;
    line-height: 1.2;
}
.movement-troop-chips b { color: #405b2c; font-size: 8px; }
.movement-troop-chips.compact span { padding: 2px 5px; }
.movement-detailed-row > form { grid-column: 2 / 4; justify-self: start; margin-top: 5px; }

.movement-live-section { display: grid; gap: 10px; }
.movement-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 0 2px; }
.movement-section-heading h2 { margin: 2px 0; color: #493721; font-family: Georgia,serif; font-size: 19px; }
.movement-section-heading p { margin: 0; color: #867660; font-size: 9px; }
.rally-grid-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.movement-rally-grid .rally-list-card { min-width: 0; }

@media (max-width: 1180px) {
    .movement-live-columns { grid-template-columns: 1fr 1fr; }
    .movement-live-columns .returning-column { grid-column: 1 / -1; }
    .rally-grid-three { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .movement-summary-strip { grid-template-columns: 1fr 1fr; gap: 6px; }
    .movement-summary-strip > div { min-height: 50px; padding: 8px 10px; }
    .movement-summary-strip strong { font-size: 17px; }
    .movement-live-columns { grid-template-columns: 1fr; }
    .movement-live-columns .returning-column { grid-column: auto; }
    .movement-detailed-row { grid-template-columns: 35px minmax(0,1fr) auto; padding: 10px; }
    .movement-time-box { min-width: 58px; }
    .movement-copy > small { white-space: normal; }
    .movement-section-heading { align-items: flex-start; flex-direction: column; }
}
.movement-progress {
    grid-column: 1 / -1;
    display: block;
    overflow: hidden;
    height: 4px;
    margin-top: 3px;
    border-radius: 999px;
    background: rgba(91,71,45,.12);
}
.movement-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#657d3a,#a6bf62);
    box-shadow: 0 0 8px rgba(111,145,64,.22);
}
.hostile .movement-progress i { background: linear-gradient(90deg,#9a4636,#d17a5b); box-shadow: 0 0 8px rgba(173,78,56,.2); }
.returning .movement-progress i { background: linear-gradient(90deg,#4d6d35,#8aa456); }
@media (max-width: 620px) {
    .header-actions .movement-header-icon { display: grid !important; }
    .header-actions .message-header-icon { display: none !important; }
}

/* V1.9.8.30 — City movement widget polish
   The widget is part of the City title bar instead of a floating overlay.
   Therefore it never covers buildings, map ribbons, troop controls or the map. */
.troop-movement-card {
    position: static;
    z-index: auto;
    display: grid;
    width: clamp(214px, 19vw, 286px);
    min-width: 0;
    gap: 3px;
    padding: 5px 8px 6px;
    border: 1px solid rgba(128,105,73,.52);
    border-radius: 7px;
    color: #514b43;
    background:
        linear-gradient(90deg,rgba(255,255,255,.42),transparent 52%),
        linear-gradient(180deg,#fffdf7,#eee9dc);
    box-shadow:
        0 2px 6px rgba(42,31,18,.14),
        inset 0 1px rgba(255,255,255,.95);
    text-decoration: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.troop-movement-card[hidden] { display: none !important; }
.troop-movement-card.is-visible {
    animation: cityMovementWidgetIn .18s ease-out both;
}
@keyframes cityMovementWidgetIn {
    from { opacity: 0; transform: translateY(-3px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.troop-movement-card:hover {
    border-color: rgba(112,88,57,.7);
    box-shadow: 0 3px 8px rgba(42,31,18,.18), inset 0 1px rgba(255,255,255,.98);
}
.troop-movement-card-title {
    display: block;
    overflow: hidden;
    color: #7a7165;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.troop-movement-card-row[hidden] { display: none !important; }
.troop-movement-card-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 18px minmax(0,1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 21px;
}
.troop-movement-card-row + .troop-movement-card-row {
    margin-top: 1px;
    padding-top: 4px;
    border-top: 1px solid rgba(112,102,88,.13);
}
.troop-movement-card-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid rgba(70,93,42,.22);
    border-radius: 4px;
    color: #fff;
    background: linear-gradient(#7ba94d,#5c8736);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px rgba(255,255,255,.28);
}
.troop-movement-card-row strong {
    overflow: hidden;
    color: #577e37;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.troop-movement-card-time {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: #77736d;
    white-space: nowrap;
}
.troop-movement-card-time small {
    color: #918a7f;
    font-size: 8px;
    font-weight: 600;
}
.troop-movement-card-time time {
    color: #68635c;
    font-size: 9px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.troop-movement-card-row.kind-hostile .troop-movement-card-icon {
    border-color: rgba(122,55,43,.28);
    background: linear-gradient(#bd6654,#994536);
}
.troop-movement-card-row.kind-hostile strong { color: #9a4436; }
.troop-movement-card-row.kind-hostile .troop-movement-card-time time { color: #8a4a3e; }
.troop-movement-card-row.kind-settlement .troop-movement-card-icon { background: linear-gradient(#9b7a4b,#7a5a33); }
.troop-movement-card-row.kind-settlement strong { color: #76572f; }
.troop-movement-card-row.kind-returning .troop-movement-card-icon { background: linear-gradient(#788b63,#5c7049); }
.troop-movement-card-row.kind-returning strong { color: #566b43; }
.troop-movement-card-row.outgoing:not(.kind-hostile):not(.kind-reinforcement):not(.kind-settlement) .troop-movement-card-icon {
    background: linear-gradient(#82916f,#667455);
}

/* The title bar owns the widget, so its height can grow naturally when two or
   three movement rows are active. With no movements it remains the normal size. */
body.game-page-immersive.game-route-city .realm-screen-city {
    grid-template-rows: auto minmax(0,1fr);
}
body.game-page-immersive.game-route-city .realm-screen-city .realm-titlebar {
    height: auto;
    min-height: 54px;
    flex: none;
}
body.game-route-city .realm-title-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}
body.game-route-city .city-title-movement-card {
    flex: 0 1 auto;
}

@media (max-width: 1100px) {
    body.game-route-city .realm-title-actions:has(.city-title-movement-card:not([hidden])) .realm-instruction {
        display: none;
    }
    .city-title-movement-card { width: clamp(205px, 27vw, 260px); }
}

@media (max-width: 780px) {
    body.game-page-immersive.game-route-city .realm-screen-city {
        grid-template-rows: auto minmax(0,1fr);
    }
    body.game-page-immersive.game-route-city .realm-screen-city .realm-titlebar {
        height: auto;
        min-height: 52px;
        flex: none;
        padding: 5px 8px 5px 11px;
        gap: 6px;
    }
    body.game-route-city .realm-titlebar > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }
    body.game-route-city .realm-title-actions {
        min-width: 0;
        flex: 0 1 auto;
        gap: 4px;
    }
    body.game-route-city .realm-title-actions:has(.city-title-movement-card:not([hidden])) .realm-coordinates {
        display: none;
    }
    .city-title-movement-card {
        width: min(210px, 54vw);
        padding: 4px 6px 5px;
        gap: 2px;
        border-radius: 6px;
    }
    .troop-movement-card-title { font-size: 7px; }
    .troop-movement-card-row {
        grid-template-columns: 17px minmax(0,1fr) auto;
        gap: 5px;
        min-height: 19px;
    }
    .troop-movement-card-row + .troop-movement-card-row { padding-top: 3px; }
    .troop-movement-card-icon { width: 17px; height: 17px; font-size: 8px; }
    .troop-movement-card-row strong { font-size: 10px; }
    .troop-movement-card-time small { font-size: 7px; }
    .troop-movement-card-time time { font-size: 8px; }
}

@media (max-width: 430px) {
    /* On narrow phones the widget gets its own compact second line in the title
       bar. This costs only a few pixels of map height and never overlays it. */
    body.game-page-immersive.game-route-city .realm-screen-city .realm-titlebar:has(.city-title-movement-card:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        row-gap: 4px;
    }
    body.game-route-city .realm-titlebar:has(.city-title-movement-card:not([hidden])) > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    body.game-route-city .realm-titlebar:has(.city-title-movement-card:not([hidden])) .realm-title-actions {
        display: contents;
    }
    body.game-route-city .realm-titlebar:has(.city-title-movement-card:not([hidden])) .city-title-movement-card {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        width: min(258px, calc(100vw - 22px));
    }
    body.game-route-city .realm-titlebar:has(.city-title-movement-card:not([hidden])) .realm-coordinates {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .troop-movement-card.is-visible { animation: none; }
}


/* --------------------------------------------------------------------------
   Travia 1.9.8.32 — Full-screen centered world layout
   City: all 32 building slots live inside the central island in four rings.
   Village: resource valley owns the whole world canvas; field details are an
   overlay inspector on every viewport. Top resources + bottom nav remain UI.
   -------------------------------------------------------------------------- */
body.game-page-immersive.game-route-city .realm-titlebar,
body.game-page-immersive.game-route-village .realm-titlebar {
    display: none !important;
}

body.game-page-immersive.game-route-city .realm-screen,
body.game-page-immersive.game-route-village .realm-screen {
    position: relative;
    display: block !important;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #6f994c;
    box-shadow: none;
}

body.game-page-immersive.game-route-city .realm-workspace,
body.game-page-immersive.game-route-village .realm-workspace {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
    background: #6f994c;
}

body.game-page-immersive.game-route-city .realm-map-panel,
body.game-page-immersive.game-route-village .realm-map-panel {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    background: #6f994c;
}

body.game-page-immersive.game-route-city .realm-map,
body.game-page-immersive.game-route-village .realm-map {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #6f994c;
    box-shadow: none !important;
}

body.game-page-immersive.game-route-city .realm-map-background,
body.game-page-immersive.game-route-village .realm-map-background {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
}

/* The permanent top/bottom navigation already switches City/Fields, so the
   duplicate switch inside the landscape only wastes playable world space. */
body.game-route-city .realm-map-switch,
body.game-route-village .realm-map-switch {
    display: none !important;
}

body.game-route-city .map-ribbon,
body.game-route-village .map-ribbon {
    z-index: 28;
    max-width: min(54vw, 250px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}

/* Compact movement status lives in the unused sky, never in the city circle. */
body.game-route-city .world-movement-widget {
    position: absolute;
    z-index: 30;
    top: 46px;
    right: 10px;
    width: clamp(205px, 18vw, 258px);
    max-width: calc(100% - 20px);
    background: rgba(255,253,247,.94);
    box-shadow: 0 4px 12px rgba(45,31,18,.20), inset 0 1px rgba(255,255,255,.96);
    backdrop-filter: blur(5px);
}

/* The army control also stays outside the central build island. */
body.game-route-city .realm-city-map .city-troop-trigger {
    top: 48px !important;
    right: 10px !important;
}
body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
    top: 116px !important;
}

/* Resource detail is an inspector, not a permanent desktop column. */
body.game-route-village .field-command {
    position: absolute;
    z-index: 86;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(330px, calc(100% - 24px));
    height: auto;
    max-height: none;
    overflow-y: auto;
    border: 2px solid #79572f;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(33,23,13,.38), inset 0 0 0 1px rgba(255,255,255,.46);
    opacity: 0;
    pointer-events: none;
    transform: translateX(26px);
    transition: opacity .18s ease, transform .18s ease;
}
body.game-route-village.field-sheet-open .field-command {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
body.game-route-village .field-inspector-close {
    position: sticky;
    z-index: 5;
    top: 7px;
    float: right;
    display: grid;
    width: 32px;
    height: 32px;
    margin: 7px 7px -39px 0;
    place-items: center;
    border: 1px solid #96764d;
    border-radius: 50%;
    color: #59462e;
    background: rgba(255,248,231,.96);
    box-shadow: 0 2px 7px rgba(50,34,17,.18);
    font-size: 17px;
}
body.game-route-village .field-inspector-backdrop {
    display: none !important;
}

/* Four-ring city plan: buildings are intentionally smaller than in 1.9.8.30
   so a fully developed 32-slot village still reads as a city, not a pile. */
body.game-route-city .city-map-slot.is-built {
    width: clamp(62px, 6.2vw, 88px);
    transform: translate(-50%, -68%) scale(var(--slot-scale, 1));
}
body.game-route-city .city-map-slot.is-constructing {
    width: clamp(68px, 6.8vw, 96px);
    transform: translate(-50%, -68%) scale(var(--slot-scale, 1));
}
body.game-route-city .city-map-slot.is-empty {
    width: clamp(24px, 2.25vw, 31px);
}
body.game-route-city .city-premium-slot,
body.game-route-city .city-premium-anchor {
    width: clamp(24px, 2.25vw, 31px);
}
body.game-route-city .city-premium-slot.is-next {
    width: clamp(31px, 2.9vw, 40px);
}

@media (min-width: 781px) {
    body.game-page-immersive.game-route-city,
    body.game-page-immersive.game-route-village {
        overflow: hidden;
    }
    body.game-page-immersive.game-route-city .game-content-immersive,
    body.game-page-immersive.game-route-village .game-content-immersive {
        width: 100%;
        max-width: none;
        height: calc(100dvh - var(--game-header-height));
        min-height: 520px;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body.game-route-city .map-ribbon,
    body.game-route-village .map-ribbon {
        top: 12px;
    }
    body.game-route-city .map-ribbon-left,
    body.game-route-village .map-ribbon-left { left: 12px; }
    body.game-route-city .map-ribbon-right,
    body.game-route-village .map-ribbon-right { right: 12px; }

    /* Desktop city art is 1600×900 and the new coordinates are intentionally
       flatter/wider than mobile so the city follows the painted island. */
    body.game-route-city .city-map-slot,
    body.game-route-city .city-premium-slot,
    body.game-route-city .city-premium-anchor,
    body.game-route-village .field-map-slot {
        left: var(--slot-x-desktop, var(--slot-x));
        top: var(--slot-y-desktop, var(--slot-y));
    }
}

@media (max-width: 780px) {
    body.game-page-immersive.game-route-city .game-content-immersive,
    body.game-page-immersive.game-route-village .game-content-immersive {
        width: 100%;
        height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom));
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    body.game-route-city .map-ribbon,
    body.game-route-village .map-ribbon {
        top: 8px;
        max-width: 48vw;
        min-height: 24px;
        padding: 3px 6px;
        font-size: 7px;
    }
    body.game-route-city .map-ribbon-left,
    body.game-route-village .map-ribbon-left { left: 8px; }
    body.game-route-city .map-ribbon-right,
    body.game-route-village .map-ribbon-right { right: 8px; }

    body.game-route-city .world-movement-widget {
        top: 40px;
        right: 8px;
        width: min(190px, 53vw);
        padding: 4px 6px 5px;
        border-radius: 6px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-title { font-size: 7px; }
    body.game-route-city .world-movement-widget .troop-movement-card-row {
        grid-template-columns: 17px minmax(0,1fr) auto;
        gap: 5px;
        min-height: 19px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-icon {
        width: 17px;
        height: 17px;
        font-size: 8px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-row strong { font-size: 9px; }
    body.game-route-city .world-movement-widget .troop-movement-card-time time { font-size: 8px; }

    body.game-route-city .realm-city-map .city-troop-trigger {
        top: 42px !important;
        right: 8px !important;
    }
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 102px !important;
    }

    body.game-route-city .city-map-slot.is-built {
        width: 12.2% !important;
    }
    body.game-route-city .city-map-slot.is-constructing {
        width: 13% !important;
    }
    body.game-route-city .city-map-slot.is-empty {
        width: 5.8% !important;
    }
    body.game-route-city .city-premium-slot,
    body.game-route-city .city-premium-anchor {
        width: 5.6% !important;
    }
    body.game-route-city .city-premium-slot.is-next {
        width: 7% !important;
    }
    body.game-route-city .city-map-slot.is-built > b,
    body.game-route-city .city-map-slot.is-constructing > b {
        right: 5%;
        bottom: 7%;
        min-width: 17px;
        height: 17px;
        font-size: 7.5px;
    }

    /* Mobile resource details remain a bottom sheet, but the map itself now
       fills every pixel between the top resources and bottom navigation. */
    body.game-route-village .field-command {
        position: fixed;
        z-index: 86;
        top: auto;
        right: 7px;
        bottom: calc(var(--game-bottom-nav-height) + 7px + env(safe-area-inset-bottom));
        left: 7px;
        width: auto;
        height: auto;
        max-height: min(590px, calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - 18px - env(safe-area-inset-bottom)));
        opacity: 0;
        pointer-events: none;
        transform: translateY(24px);
    }
    body.game-route-village.field-sheet-open .field-command {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    body.game-route-village .field-inspector-backdrop {
        position: fixed;
        z-index: 85;
        inset: var(--game-header-height) 0 calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom));
        display: block !important;
        border: 0;
        background: rgba(20,18,13,.22);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }
    body.game-route-village.field-sheet-open .field-inspector-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 390px) {
    body.game-route-city .city-map-slot.is-built { width: 11.8% !important; }
    body.game-route-city .city-map-slot.is-constructing { width: 12.5% !important; }
    body.game-route-city .world-movement-widget { width: min(178px, 52vw); }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8.32 — City HUD plan
   The world stays visually clean: hero top-left, movement top-right,
   construction bottom-center, premium-slot purchase bottom-right.
   -------------------------------------------------------------------------- */

/* Old map ribbons duplicated information already available elsewhere. */
body.game-route-city .map-ribbon,
body.game-route-village .map-ribbon {
    display: none !important;
}

/* Hero placeholder: establishes the final HUD layout before hero gameplay is
   wired in. Uses the active tribe portrait so it already feels native. */
.city-hero-hud {
    position: absolute;
    z-index: 31;
    top: 14px;
    left: 14px;
    display: grid;
    width: 126px;
    justify-items: center;
    pointer-events: none;
    filter: drop-shadow(0 6px 11px rgba(35,25,14,.28));
}
.city-hero-portrait {
    position: relative;
    display: block;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border: 4px solid #d7b667;
    border-radius: 50%;
    background: #78583b;
    box-shadow:
        0 0 0 4px #6f5339,
        0 0 0 6px rgba(255,240,188,.78),
        inset 0 0 0 2px rgba(255,255,255,.18);
}
.city-hero-portrait::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg,rgba(255,255,255,.16),transparent 36%,rgba(36,24,12,.16));
    content: "";
}
.city-hero-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 26%;
}
.city-hero-level {
    position: absolute;
    top: -4px;
    right: 5px;
    display: grid;
    min-width: 33px;
    height: 33px;
    place-items: center;
    padding: 0 7px;
    border: 3px solid #5a412b;
    border-radius: 50%;
    color: #fff9dc;
    background: linear-gradient(#70933e,#426823);
    box-shadow: 0 2px 5px rgba(29,20,11,.34), inset 0 1px rgba(255,255,255,.28);
    font: 900 14px/1 Georgia,"Times New Roman",serif;
}
.city-hero-copy {
    display: grid;
    min-width: 84px;
    margin-top: -7px;
    padding: 5px 10px 4px;
    border: 1px solid rgba(101,72,40,.72);
    border-radius: 999px;
    color: #4c3822;
    background: rgba(255,248,227,.94);
    box-shadow: 0 2px 5px rgba(44,31,18,.20), inset 0 1px rgba(255,255,255,.88);
    text-align: center;
}
.city-hero-copy small {
    color: #816844;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}
.city-hero-copy strong {
    margin-top: 2px;
    color: #4b682d;
    font-size: 9px;
    line-height: 1;
}

/* Travian-like movement card: one compact panel in free sky. */
body.game-route-city .world-movement-widget {
    position: absolute !important;
    z-index: 32;
    top: 16px !important;
    right: 14px !important;
    width: min(330px, 44vw) !important;
    max-width: calc(100% - 170px) !important;
    gap: 0;
    padding: 7px 10px 8px;
    border: 1px solid rgba(111,100,83,.58);
    border-radius: 7px;
    background: rgba(255,254,250,.95);
    box-shadow: 0 4px 11px rgba(48,37,24,.20), inset 0 1px rgba(255,255,255,.96);
    backdrop-filter: blur(5px);
}
body.game-route-city .world-movement-widget .troop-movement-card-title {
    display: none;
}
body.game-route-city .world-movement-widget .troop-movement-card-row {
    grid-template-columns: 24px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
}
body.game-route-city .world-movement-widget .troop-movement-card-row + .troop-movement-card-row {
    margin-top: 2px;
    padding-top: 6px;
}
body.game-route-city .world-movement-widget .troop-movement-card-icon {
    width: 23px;
    height: 23px;
    border-radius: 4px;
    font-size: 10px;
}
.troop-movement-row-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.troop-movement-row-copy small {
    overflow: hidden;
    color: #716b63;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.game-route-city .world-movement-widget .troop-movement-row-copy strong {
    font-size: 13px;
    line-height: 1.05;
}
body.game-route-city .world-movement-widget .troop-movement-card-time {
    gap: 5px;
}
body.game-route-city .world-movement-widget .troop-movement-card-time small {
    font-size: 9px;
}
body.game-route-city .world-movement-widget .troop-movement-card-time time {
    font-size: 10px;
}

/* Army button belongs to the right edge under movement status, not inside the
   central island. */
body.game-route-city .realm-city-map .city-troop-trigger {
    top: 112px !important;
    right: 16px !important;
}
body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
    top: 126px !important;
}

/* Premium slot purchase is a HUD action. The newly purchased slot itself still
   appears at its real 23–32 ring coordinate. */
.city-premium-hud {
    position: absolute;
    z-index: 31;
    right: 14px;
    bottom: 14px;
    margin: 0;
}
.city-premium-hud button {
    display: flex;
    min-width: 132px;
    min-height: 51px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border: 2px solid #84643e;
    border-radius: 9px;
    color: #523d24;
    background: linear-gradient(180deg,rgba(255,250,232,.97),rgba(220,205,173,.97));
    box-shadow: 0 5px 13px rgba(45,31,17,.30), inset 0 1px rgba(255,255,255,.86);
    cursor: pointer;
}
.city-premium-hud button:disabled {
    opacity: .58;
    cursor: not-allowed;
}
.city-premium-hud-icon {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid #866235;
    border-radius: 50%;
    background: radial-gradient(circle,#f5dd86,#b78328 70%);
}
.city-premium-hud-icon img { width: 31px; height: 31px; object-fit: contain; }
.city-premium-hud-icon b {
    position: absolute;
    top: -4px;
    right: -3px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 2px solid #f6e7b1;
    border-radius: 50%;
    color: #fff;
    background: #5c7f35;
    font-size: 12px;
    line-height: 1;
}
.city-premium-hud-copy { display: grid; gap: 2px; text-align: left; }
.city-premium-hud-copy small {
    color: #816a47;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.city-premium-hud-copy strong { color: #533b20; font-size: 11px; }

/* Construction queue — compact Travian-like bottom status panel. */
body.game-page-immersive .floating-build-queue {
    z-index: 70;
    bottom: 14px;
    width: min(470px, calc(100% - 180px));
    min-height: 62px;
    grid-template-columns: minmax(0,1fr) 38px;
    border: 1px solid #786247;
    border-radius: 7px;
    background: rgba(255,254,248,.96);
    box-shadow: 0 5px 14px rgba(40,29,18,.28), inset 0 1px rgba(255,255,255,.94);
    backdrop-filter: blur(4px);
}
body.game-page-immersive .floating-build-main {
    display: block;
    padding: 8px 12px 10px;
}
body.game-page-immersive .floating-build-art { display: none; }
body.game-page-immersive .floating-build-copy small {
    color: #706a61;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}
body.game-page-immersive .floating-build-copy strong {
    margin-top: 4px;
    padding-right: 94px;
    color: #59412a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}
body.game-page-immersive .floating-build-copy > span {
    position: absolute;
    top: 30px;
    right: 50px;
    margin: 0;
    color: #8a8175;
    font-size: 8px;
    white-space: nowrap;
}
body.game-page-immersive .floating-build-copy time {
    color: #665d52;
    font-size: 10px;
}
body.game-page-immersive .floating-build-queue form button {
    width: 27px;
    height: 27px;
    border-radius: 5px;
}
body.game-page-immersive .floating-build-progress {
    height: 5px;
}

@media (min-width: 781px) {
    .city-hero-hud { top: 18px; left: 18px; width: 122px; }
    .city-hero-portrait { width: 94px; height: 94px; }
    body.game-route-city .world-movement-widget {
        top: 18px !important;
        right: 18px !important;
        width: min(340px, 28vw) !important;
        max-width: 340px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger { right: 20px !important; }
    .city-premium-hud { right: 18px; bottom: 18px; }
    body.game-page-immersive .floating-build-queue { bottom: 18px; }
}

@media (max-width: 780px) {
    .city-hero-hud {
        top: 10px;
        left: 9px;
        width: 104px;
    }
    .city-hero-portrait {
        width: 82px;
        height: 82px;
        border-width: 3px;
        box-shadow: 0 0 0 3px #6f5339, 0 0 0 5px rgba(255,240,188,.78), inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .city-hero-level {
        top: -3px;
        right: 3px;
        min-width: 27px;
        height: 27px;
        border-width: 2px;
        font-size: 11px;
    }
    .city-hero-copy {
        min-width: 72px;
        margin-top: -5px;
        padding: 4px 8px 3px;
    }
    .city-hero-copy small { font-size: 6px; }
    .city-hero-copy strong { font-size: 8px; }

    body.game-route-city .world-movement-widget {
        top: 11px !important;
        right: 9px !important;
        width: min(300px, 49vw) !important;
        max-width: calc(100% - 124px) !important;
        padding: 6px 8px 7px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-row {
        grid-template-columns: 21px minmax(0,1fr) auto;
        gap: 6px;
        min-height: 33px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-icon {
        width: 20px;
        height: 20px;
    }
    .troop-movement-row-copy small { font-size: 8px; }
    body.game-route-city .world-movement-widget .troop-movement-row-copy strong { font-size: 11px; }
    body.game-route-city .world-movement-widget .troop-movement-card-time small { font-size: 8px; }
    body.game-route-city .world-movement-widget .troop-movement-card-time time { font-size: 9px; }

    body.game-route-city .realm-city-map .city-troop-trigger {
        top: 100px !important;
        right: 10px !important;
    }
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 102px !important;
    }

    .city-premium-hud {
        right: 9px;
        bottom: 9px;
    }
    .city-premium-hud button {
        min-width: 0;
        min-height: 46px;
        padding: 4px 7px 4px 4px;
    }
    .city-premium-hud-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .city-premium-hud-icon img { width: 28px; height: 28px; }
    .city-premium-hud-copy small { display: none; }
    .city-premium-hud-copy strong { font-size: 9px; }

    body.game-page-immersive .floating-build-queue {
        bottom: calc(var(--game-bottom-nav-height) + 9px + env(safe-area-inset-bottom));
        width: min(455px, calc(100% - 150px));
        min-height: 58px;
    }
    body.game-page-immersive .floating-build-main { padding: 7px 10px 9px; }
    body.game-page-immersive .floating-build-copy small { font-size: 8px; }
    body.game-page-immersive .floating-build-copy strong {
        margin-top: 3px;
        padding-right: 78px;
        font-size: 11px;
    }
    body.game-page-immersive .floating-build-copy > span {
        top: 28px;
        right: 45px;
        font-size: 7px;
    }
    body.game-page-immersive .floating-build-copy time { font-size: 9px; }
}

@media (max-width: 430px) {
    .city-hero-hud { width: 88px; }
    .city-hero-portrait { width: 70px; height: 70px; }
    .city-hero-copy { min-width: 62px; padding-inline: 6px; }
    body.game-route-city .world-movement-widget {
        width: min(235px, calc(100% - 105px)) !important;
        max-width: calc(100% - 105px) !important;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-row {
        min-height: 30px;
        grid-template-columns: 19px minmax(0,1fr) auto;
        gap: 5px;
    }
    body.game-route-city .world-movement-widget .troop-movement-row-copy strong { font-size: 10px; }
    .troop-movement-row-copy small { font-size: 7px; }
    body.game-page-immersive .floating-build-queue {
        width: min(300px, calc(100% - 82px));
    }
    .city-premium-hud-copy { display: none; }
    .city-premium-hud button { width: 44px; padding: 3px; }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8.33 — Travian-like City HUD balance
   Keep the user's current city artwork and centered building island. The HUD
   follows the compact reference composition: hero top-left, live movements
   top-right, small army control on the right, build queue bottom-center and
   premium-slot action bottom-right. The army control is intentionally NOT
   enlarged.
   -------------------------------------------------------------------------- */

/* Hero area: portrait + level only. The old text pill made the sky feel like a
   dashboard rather than a game world. */
body.game-route-city .city-hero-hud {
    top: 12px;
    left: 12px;
    width: 112px;
    filter: drop-shadow(0 5px 9px rgba(36,25,14,.27));
}
body.game-route-city .city-hero-portrait {
    width: 96px;
    height: 96px;
    border-width: 4px;
}
body.game-route-city .city-hero-level {
    top: -3px;
    right: 2px;
    min-width: 31px;
    height: 31px;
    padding-inline: 6px;
    font-size: 13px;
}
body.game-route-city .city-hero-copy {
    display: none !important;
}

/* Live movement status sits in the free sky, just like the reference. */
body.game-route-city .world-movement-widget {
    top: 12px !important;
    right: 10px !important;
    width: min(318px, 47vw) !important;
    max-width: calc(100% - 134px) !important;
    padding: 6px 9px 7px;
    border-radius: 7px;
    background: rgba(255,255,252,.96);
    box-shadow: 0 4px 10px rgba(49,37,24,.20), inset 0 1px rgba(255,255,255,.96);
}
body.game-route-city .world-movement-widget .troop-movement-card-row {
    min-height: 34px;
    grid-template-columns: 22px minmax(0,1fr) auto;
    gap: 7px;
}
body.game-route-city .world-movement-widget .troop-movement-card-icon {
    width: 21px;
    height: 21px;
    font-size: 9px;
}
body.game-route-city .world-movement-widget .troop-movement-row-copy small {
    font-size: 8px;
}
body.game-route-city .world-movement-widget .troop-movement-row-copy strong {
    font-size: 12px;
}
body.game-route-city .world-movement-widget .troop-movement-card-time small {
    font-size: 8px;
}
body.game-route-city .world-movement-widget .troop-movement-card-time time {
    font-size: 9px;
}

/* Army button: lock it to a compact circular control. Do not scale it to the
   hero portrait size. */
body.game-route-city .realm-city-map .city-troop-trigger {
    top: 92px !important;
    right: 12px !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border: 2px solid #dfc56f !important;
    border-radius: 50% !important;
    background: rgba(255,249,229,.94) !important;
    box-shadow: 0 3px 9px rgba(42,29,16,.30), inset 0 1px rgba(255,255,255,.85) !important;
}
body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
    top: 102px !important;
}
body.game-route-city .realm-city-map .city-troop-trigger-icon {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.game-route-city .realm-city-map .city-troop-trigger-copy,
body.game-route-city .realm-city-map .city-troop-trigger-badge {
    display: none !important;
}
body.game-route-city .realm-city-map .city-troop-trigger::before,
body.game-route-city .realm-city-map .city-troop-trigger::after {
    display: none !important;
}

/* Premium slot stays a small utility button in the lower-right corner. */
body.game-route-city .city-premium-hud {
    right: 10px;
    bottom: 11px;
}
body.game-route-city .city-premium-hud button {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 3px;
    justify-content: center;
}
body.game-route-city .city-premium-hud-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}
body.game-route-city .city-premium-hud-icon img {
    width: 29px;
    height: 29px;
}
body.game-route-city .city-premium-hud-copy {
    display: none !important;
}

/* Build queue: Travian-style compact bottom card. It intentionally leaves room
   for the premium-slot control and never stretches across the whole world. */
body.game-page-immersive .floating-build-queue {
    bottom: calc(var(--game-bottom-nav-height) + 9px + env(safe-area-inset-bottom));
    width: min(452px, calc(100% - 118px));
    min-height: 56px;
    grid-template-columns: minmax(0,1fr) 34px;
    border-radius: 7px;
}
body.game-page-immersive .floating-build-main {
    padding: 7px 10px 9px;
}
body.game-page-immersive .floating-build-copy small {
    font-size: 8px;
}
body.game-page-immersive .floating-build-copy strong {
    margin-top: 3px;
    padding-right: 82px;
    font-size: 11px;
}
body.game-page-immersive .floating-build-copy > span {
    top: 27px;
    right: 42px;
    font-size: 7px;
}
body.game-page-immersive .floating-build-copy time {
    font-size: 9px;
}
body.game-page-immersive .floating-build-queue form button {
    width: 25px;
    height: 25px;
}

@media (min-width: 781px) {
    body.game-route-city .city-hero-hud {
        top: 18px;
        left: 18px;
        width: 128px;
    }
    body.game-route-city .city-hero-portrait {
        width: 108px;
        height: 108px;
    }
    body.game-route-city .world-movement-widget {
        top: 18px !important;
        right: 18px !important;
        width: min(340px, 29vw) !important;
        max-width: 340px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger {
        top: 104px !important;
        right: 20px !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
    }
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 116px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger-icon {
        width: 43px !important;
        height: 43px !important;
    }
    body.game-route-city .city-premium-hud {
        right: 18px;
        bottom: 18px;
    }
    body.game-page-immersive .floating-build-queue {
        bottom: 18px;
    }
}

@media (max-width: 780px) {
    body.game-route-city .city-hero-hud {
        top: 10px;
        left: 9px;
        width: 98px;
    }
    body.game-route-city .city-hero-portrait {
        width: 86px;
        height: 86px;
    }
    body.game-route-city .city-hero-level {
        min-width: 27px;
        height: 27px;
        font-size: 11px;
    }
    body.game-route-city .world-movement-widget {
        top: 11px !important;
        right: 9px !important;
        width: min(292px, 49vw) !important;
        max-width: calc(100% - 116px) !important;
        padding: 5px 7px 6px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-row {
        min-height: 31px;
        grid-template-columns: 19px minmax(0,1fr) auto;
        gap: 5px;
    }
    body.game-route-city .world-movement-widget .troop-movement-card-icon {
        width: 19px;
        height: 19px;
    }
    body.game-route-city .world-movement-widget .troop-movement-row-copy small { font-size: 7px; }
    body.game-route-city .world-movement-widget .troop-movement-row-copy strong { font-size: 10px; }
    body.game-route-city .world-movement-widget .troop-movement-card-time small { font-size: 7px; }
    body.game-route-city .world-movement-widget .troop-movement-card-time time { font-size: 8px; }

    body.game-route-city .realm-city-map .city-troop-trigger {
        top: 91px !important;
        right: 10px !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 96px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger-icon {
        width: 39px !important;
        height: 39px !important;
    }

    body.game-route-city .city-premium-hud {
        right: 9px;
        bottom: 9px;
    }
    body.game-route-city .city-premium-hud button {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    body.game-route-city .city-premium-hud-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    body.game-route-city .city-premium-hud-icon img {
        width: 26px;
        height: 26px;
    }

    body.game-page-immersive .floating-build-queue {
        width: min(440px, calc(100% - 100px));
        min-height: 54px;
    }
}

@media (max-width: 430px) {
    body.game-route-city .city-hero-hud { width: 92px; }
    body.game-route-city .city-hero-portrait { width: 80px; height: 80px; }
    body.game-route-city .world-movement-widget {
        width: min(222px, calc(100% - 108px)) !important;
        max-width: calc(100% - 108px) !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger,
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 92px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger-icon {
        width: 37px !important;
        height: 37px !important;
    }
    body.game-page-immersive .floating-build-queue {
        width: min(292px, calc(100% - 82px));
    }
}

/* --------------------------------------------------------------------------
   Travia 1.9.8.34 — Hero HUD replica pass
   Goal: make the city hero block feel much closer to the Travian mobile
   composition while keeping the user's own city artwork. We keep the HUD only
   in City, leave Village untouched, do not enlarge the troop trigger, and only
   use the free sky area for overlays.
   -------------------------------------------------------------------------- */

body.game-route-city .city-hero-hud {
    position: absolute;
    z-index: 33;
    top: 12px;
    left: 10px;
    width: 122px;
    height: 108px;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(31,21,12,.28));
    isolation: isolate;
}
body.game-route-city .city-hero-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        conic-gradient(from 202deg,
            #5fa0d2 0deg 80deg,
            #c5baa6 80deg 111deg,
            #79a94b 111deg 280deg,
            #c5baa6 280deg 360deg);
    box-shadow: 0 0 0 3px rgba(134,101,58,.88), inset 0 0 0 1px rgba(255,255,255,.42);
}
body.game-route-city .city-hero-rings::before {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.18) 34%, transparent 36%),
        radial-gradient(circle at center, rgba(255,251,236,.96) 0 61%, transparent 62%);
    box-shadow: inset 0 0 0 8px rgba(224,205,163,.95), inset 0 0 0 10px rgba(123,88,46,.78);
    content: "";
}
body.game-route-city .city-hero-rings::after {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(115,85,48,.28);
    content: "";
}
body.game-route-city .city-hero-portrait {
    position: absolute;
    top: 15px;
    left: 15px;
    display: block;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border: 2px solid rgba(248,238,204,.98);
    border-radius: 50%;
    background: #78583b;
    box-shadow: inset 0 0 0 1px rgba(95,67,40,.6), 0 1px 4px rgba(31,21,12,.18);
}
body.game-route-city .city-hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
}
body.game-route-city .city-hero-level {
    position: absolute;
    top: -3px;
    left: 60px;
    z-index: 3;
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    padding: 0 6px;
    border: 3px solid #715430;
    border-radius: 50%;
    color: #fffce9;
    background: linear-gradient(#7ca848,#4a7428);
    box-shadow: 0 2px 5px rgba(29,20,11,.30), inset 0 1px rgba(255,255,255,.26);
    font: 900 13px/1 Georgia,"Times New Roman",serif;
}
body.game-route-city .city-hero-copy {
    display: none !important;
}
body.game-route-city .city-hero-action {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    padding: 0;
    border: 2px solid #8a6b44;
    border-radius: 50%;
    background: linear-gradient(180deg,#f7efdc,#dac195);
    box-shadow: 0 2px 5px rgba(28,20,11,.24), inset 0 1px rgba(255,255,255,.8);
    pointer-events: auto;
}
body.game-route-city .city-hero-action img {
    display: block;
    width: 17px;
    height: 17px;
    object-fit: contain;
}
body.game-route-city .city-hero-action-left {
    left: -2px;
    top: 16px;
}
body.game-route-city .city-hero-action-top {
    left: 45px;
    top: -6px;
}
body.game-route-city .city-hero-action-right {
    left: 74px;
    top: 25px;
}

body.game-route-city .world-movement-widget {
    top: 12px !important;
    right: 10px !important;
    width: min(320px, calc(100% - 140px)) !important;
    max-width: calc(100% - 140px) !important;
}
body.game-route-city .realm-city-map .city-troop-trigger,
body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
    top: 102px !important;
    right: 10px !important;
}

@media (min-width: 781px) {
    body.game-route-city .city-hero-hud {
        top: 18px;
        left: 18px;
        width: 132px;
        height: 118px;
    }
    body.game-route-city .city-hero-rings {
        width: 108px;
        height: 108px;
    }
    body.game-route-city .city-hero-portrait {
        top: 16px;
        left: 16px;
        width: 76px;
        height: 76px;
    }
    body.game-route-city .city-hero-level {
        left: 66px;
    }
    body.game-route-city .city-hero-action {
        width: 31px;
        height: 31px;
    }
    body.game-route-city .city-hero-action img {
        width: 18px;
        height: 18px;
    }
    body.game-route-city .city-hero-action-left {
        left: -2px;
        top: 17px;
    }
    body.game-route-city .city-hero-action-top {
        left: 50px;
        top: -6px;
    }
    body.game-route-city .city-hero-action-right {
        left: 81px;
        top: 28px;
    }
    body.game-route-city .world-movement-widget {
        top: 18px !important;
        right: 18px !important;
        width: min(342px, calc(100% - 166px)) !important;
        max-width: 342px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger,
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 118px !important;
        right: 18px !important;
    }
}

@media (max-width: 430px) {
    body.game-route-city .city-hero-hud {
        width: 112px;
        height: 100px;
    }
    body.game-route-city .city-hero-rings {
        width: 92px;
        height: 92px;
    }
    body.game-route-city .city-hero-portrait {
        top: 14px;
        left: 14px;
        width: 64px;
        height: 64px;
    }
    body.game-route-city .city-hero-level {
        left: 56px;
        min-width: 27px;
        height: 27px;
        font-size: 11px;
    }
    body.game-route-city .city-hero-action {
        width: 27px;
        height: 27px;
    }
    body.game-route-city .city-hero-action img {
        width: 16px;
        height: 16px;
    }
    body.game-route-city .city-hero-action-left {
        top: 16px;
    }
    body.game-route-city .city-hero-action-top {
        left: 42px;
    }
    body.game-route-city .city-hero-action-right {
        left: 68px;
        top: 24px;
    }
    body.game-route-city .world-movement-widget {
        width: min(226px, calc(100% - 120px)) !important;
        max-width: calc(100% - 120px) !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger,
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 96px !important;
        right: 9px !important;
    }
}


/* --------------------------------------------------------------------------
   Travia 1.9.8.35 — Hero HUD alignment polish
   Goal: make the City hero HUD match the provided Travian-like reference much
   more closely: compact circular portrait, only the side buttons, no vertical
   icon stack, and a lighter composition that sits in the free top-left sky.
   -------------------------------------------------------------------------- */

body.game-route-city .city-hero-hud {
    top: 10px !important;
    left: 10px !important;
    width: 104px !important;
    height: 98px !important;
    pointer-events: none;
}
body.game-route-city .city-hero-rings {
    width: 84px !important;
    height: 84px !important;
    background:
        conic-gradient(from 192deg,
            #6ea8d0 0deg 78deg,
            #c9b99a 78deg 105deg,
            #6f9c41 105deg 292deg,
            #c9b99a 292deg 360deg) !important;
    box-shadow: 0 0 0 3px rgba(122,92,52,.88), inset 0 0 0 1px rgba(255,255,255,.40) !important;
}
body.game-route-city .city-hero-rings::before {
    inset: 6px !important;
    box-shadow: inset 0 0 0 7px rgba(224,205,163,.95), inset 0 0 0 9px rgba(123,88,46,.78) !important;
}
body.game-route-city .city-hero-rings::after { inset: 11px !important; }
body.game-route-city .city-hero-portrait {
    top: 13px !important;
    left: 13px !important;
    width: 58px !important;
    height: 58px !important;
    border-width: 2px !important;
}
body.game-route-city .city-hero-portrait img {
    object-position: center 22%;
}
body.game-route-city .city-hero-level {
    top: -4px !important;
    left: 53px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 12px !important;
    z-index: 5 !important;
}
body.game-route-city .city-hero-copy,
body.game-route-city .city-hero-action-top {
    display: none !important;
}
body.game-route-city .city-hero-action {
    width: 27px !important;
    height: 27px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(28,20,11,.22), inset 0 1px rgba(255,255,255,.7) !important;
    pointer-events: auto;
}
body.game-route-city .city-hero-action img {
    width: 15px !important;
    height: 15px !important;
}
body.game-route-city .city-hero-action-left {
    top: 12px !important;
    left: -3px !important;
}
body.game-route-city .city-hero-action-right {
    top: 14px !important;
    left: 66px !important;
    border-radius: 50% !important;
}
body.game-route-city .city-hero-action-home {
    background: linear-gradient(180deg,#84b253,#5e8d2f) !important;
    border-color: #7d633e !important;
}
body.game-route-city .city-hero-action-home img {
    width: 14px !important;
    height: 14px !important;
    filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(645%) hue-rotate(341deg) brightness(108%) contrast(102%);
}
body.game-route-city .city-hero-action-build {
    background: linear-gradient(180deg,#f7efdc,#dac195) !important;
}
body.game-route-city .world-movement-widget {
    top: 12px !important;
    right: 10px !important;
    width: min(316px, calc(100% - 120px)) !important;
    max-width: calc(100% - 120px) !important;
}
body.game-route-city .realm-city-map .city-troop-trigger,
body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
    top: 96px !important;
    right: 12px !important;
}

@media (min-width: 781px) {
    body.game-route-city .city-hero-hud {
        top: 14px !important;
        left: 14px !important;
        width: 112px !important;
        height: 104px !important;
    }
    body.game-route-city .city-hero-rings {
        width: 90px !important;
        height: 90px !important;
    }
    body.game-route-city .city-hero-portrait {
        top: 14px !important;
        left: 14px !important;
        width: 62px !important;
        height: 62px !important;
    }
    body.game-route-city .city-hero-level {
        left: 58px !important;
        min-width: 30px !important;
        height: 30px !important;
    }
    body.game-route-city .city-hero-action {
        width: 29px !important;
        height: 29px !important;
    }
    body.game-route-city .city-hero-action img {
        width: 16px !important;
        height: 16px !important;
    }
    body.game-route-city .city-hero-action-home img {
        width: 15px !important;
        height: 15px !important;
    }
    body.game-route-city .city-hero-action-left {
        top: 14px !important;
        left: -2px !important;
    }
    body.game-route-city .city-hero-action-right {
        top: 16px !important;
        left: 72px !important;
    }
    body.game-route-city .world-movement-widget {
        top: 16px !important;
        right: 16px !important;
        width: min(322px, calc(100% - 138px)) !important;
        max-width: 322px !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger,
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 104px !important;
        right: 16px !important;
    }
}

@media (max-width: 430px) {
    body.game-route-city .city-hero-hud {
        width: 100px !important;
        height: 94px !important;
    }
    body.game-route-city .city-hero-rings {
        width: 80px !important;
        height: 80px !important;
    }
    body.game-route-city .city-hero-portrait {
        top: 12px !important;
        left: 12px !important;
        width: 56px !important;
        height: 56px !important;
    }
    body.game-route-city .city-hero-level {
        left: 50px !important;
        min-width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }
    body.game-route-city .city-hero-action {
        width: 25px !important;
        height: 25px !important;
    }
    body.game-route-city .city-hero-action img,
    body.game-route-city .city-hero-action-home img {
        width: 14px !important;
        height: 14px !important;
    }
    body.game-route-city .city-hero-action-left {
        top: 12px !important;
    }
    body.game-route-city .city-hero-action-right {
        top: 14px !important;
        left: 62px !important;
    }
    body.game-route-city .world-movement-widget {
        width: min(230px, calc(100% - 112px)) !important;
        max-width: calc(100% - 112px) !important;
    }
    body.game-route-city .realm-city-map .city-troop-trigger,
    body.game-route-city .realm-city-map:has(.world-movement-widget:not([hidden])) .city-troop-trigger {
        top: 90px !important;
        right: 10px !important;
    }
}

/* ===== V1.9.8.36 · Kasdienės užduotys ===== */
.daily-quests-page {
    width: min(1040px, calc(100vw - 40px));
    margin: 18px auto 34px;
}
.daily-quest-board {
    overflow: hidden;
    border: 2px solid #70542f;
    border-radius: 10px;
    background:
        linear-gradient(rgba(250, 245, 229, .96), rgba(239, 226, 194, .98)),
        repeating-linear-gradient(0deg, transparent 0 6px, rgba(111, 80, 42, .035) 7px 8px);
    box-shadow: 0 10px 28px rgba(45, 31, 16, .28), inset 0 0 0 3px rgba(255,255,255,.48);
    color: #4f3e29;
}
.daily-quest-head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 76px 18px;
    text-align: center;
    border-bottom: 1px solid rgba(112, 84, 47, .3);
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08));
}
.daily-quest-kicker {
    display: block;
    margin-bottom: 4px;
    color: #8a6d42;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}
.daily-quest-head h1 {
    margin: 0;
    color: #4c3922;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 3vw, 31px);
    line-height: 1.15;
}
.daily-quest-head p {
    margin: 8px 0 0;
    color: #75644e;
    font-size: 13px;
}
.daily-quest-head p strong { color: #4e7b21; }
.daily-quest-close {
    position: absolute;
    top: 14px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #6a7b34;
    border-radius: 4px;
    background: linear-gradient(#76933a, #496321);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25);
    color: #fff9df;
    font: 700 34px/1 Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 1px #31420e;
}
.daily-reward-track-wrap {
    padding: 20px 26px 14px;
}
.daily-reward-track {
    --daily-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(115px, 1fr)) minmax(132px, .95fr);
    align-items: start;
    min-height: 142px;
    padding: 8px 8px 4px;
    border: 2px solid #715532;
    border-radius: 7px;
    background: linear-gradient(180deg, #9da9a1 0 57%, #8d9a91 57% 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), inset 0 -14px 30px rgba(55,66,55,.12);
}
.daily-track-line {
    position: absolute;
    left: 7%;
    right: 22%;
    top: 67px;
    height: 12px;
    border: 2px solid #685338;
    border-radius: 8px;
    background: #c5bda6;
    overflow: hidden;
    z-index: 0;
}
.daily-track-line i {
    display: block;
    height: 100%;
    width: var(--daily-progress);
    max-width: 100%;
    background: linear-gradient(#78ae3c, #4b7f1e);
    box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.daily-reward-node {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.daily-reward-node > strong {
    display: inline-flex;
    min-width: 62px;
    justify-content: center;
    margin-top: -3px;
    padding: 3px 8px 4px;
    border: 2px solid #644c2e;
    border-radius: 2px 2px 12px 12px;
    background: linear-gradient(#705037, #4d3427);
    color: #fff5d0;
    font: 700 14px/1.1 Georgia, serif;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
.daily-reward-node > small {
    display: block;
    width: 100%;
    max-width: 142px;
    min-height: 29px;
    margin-top: 5px;
    color: #f9f5e8;
    font-size: 10px;
    line-height: 1.2;
    text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.daily-chest {
    position: relative;
    display: block;
    width: 72px;
    height: 65px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}
button.daily-chest { cursor: pointer; }
.daily-chest-body,
.daily-chest-lid {
    position: absolute;
    left: 8px;
    right: 8px;
    display: block;
    border: 3px solid #675034;
    background: linear-gradient(135deg, #8b8068, #b2a88e 55%, #7d735f);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.22);
}
.daily-chest-body { bottom: 8px; height: 36px; border-radius: 4px 4px 7px 7px; }
.daily-chest-lid { top: 6px; height: 23px; border-radius: 7px 7px 3px 3px; }
.daily-chest::after {
    content: '';
    position: absolute;
    z-index: 3;
    left: 32px;
    top: 24px;
    width: 8px;
    height: 23px;
    border: 2px solid #654b2e;
    border-radius: 2px;
    background: #c3a659;
}
.daily-chest b {
    position: absolute;
    z-index: 5;
    top: -2px;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6f9f2b;
    color: #fff;
    font: 800 15px/1 Arial, sans-serif;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.daily-reward-node.is-claimable .daily-chest {
    animation: dailyChestPulse 1.25s ease-in-out infinite;
}
.daily-reward-node.is-claimable .daily-chest-body,
.daily-reward-node.is-claimable .daily-chest-lid,
.daily-reward-node.is-claimed .daily-chest-body,
.daily-reward-node.is-claimed .daily-chest-lid {
    background: linear-gradient(135deg, #758f3c, #a2b85d 55%, #5b762d);
}
.daily-reward-node.is-locked { filter: saturate(.55); opacity: .88; }
@keyframes dailyChestPulse {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.04); }
}
.daily-points-medal {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows: 1fr auto;
    place-items: center;
    width: 128px;
    height: 105px;
    margin: 8px auto 0;
    border: 4px double #6d512b;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 36%, #fff2c1, #d4b970 67%, #a88746);
    color: #3e3324;
    box-shadow: 0 3px 7px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,255,255,.28);
}
.daily-points-medal > strong {
    grid-column: 2;
    align-self: end;
    font: 800 34px/1 Georgia, serif;
}
.daily-points-medal > small {
    grid-column: 1 / -1;
    align-self: start;
    font-weight: 800;
}
.daily-points-medal > span { grid-row: 1 / span 2; color: #896a36; font-size: 25px; }
.daily-ready-banner {
    margin: 0 26px 12px;
    padding: 9px 13px;
    border: 1px solid #6e8e32;
    border-radius: 6px;
    background: rgba(107, 151, 50, .14);
    color: #4c6d20;
    font-weight: 700;
    text-align: center;
}
.daily-quest-list {
    display: grid;
    gap: 8px;
    padding: 0 26px 22px;
}
.daily-quest-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(245px, 1fr) 96px;
    align-items: center;
    min-height: 62px;
    border: 2px solid #74562f;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(241,231,203,.9));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 1px 2px rgba(80,56,24,.12);
}
.daily-quest-row.is-complete { opacity: .77; }
.daily-quest-title {
    min-width: 0;
    padding: 11px 13px;
}
.daily-quest-title strong {
    display: block;
    color: #55432e;
    font-size: 14px;
    line-height: 1.25;
}
.daily-quest-title small {
    display: block;
    margin-top: 3px;
    color: #998b73;
    font-size: 11px;
}
.daily-quest-segments {
    display: flex;
    justify-content: stretch;
    gap: 4px;
    padding: 7px 3px;
}
.daily-segment {
    display: flex;
    flex: 1;
    min-width: 54px;
    height: 31px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid #aaa08b;
    border-radius: 9px;
    background: linear-gradient(#bbb5a5, #a9a28f);
    color: #6c6455;
    box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.daily-segment i { font-style: normal; font-size: 15px; }
.daily-segment b { font-size: 13px; }
.daily-segment.done {
    border-color: #4d8b24;
    background: linear-gradient(#54a635, #33811f);
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,.25);
}
.daily-quest-score {
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: 2px;
    align-self: stretch;
    padding: 8px;
    border-left: 1px solid rgba(112,84,47,.22);
    color: #7c5f34;
}
.daily-quest-score span { grid-row: 1 / 3; font-size: 27px; }
.daily-quest-score strong { font-size: 14px; }
.daily-quest-score.done { color: #5d8a2a; }
.daily-quest-footer {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 26px 18px;
    border-top: 1px solid rgba(112,84,47,.28);
    background: rgba(124, 96, 55, .07);
}
.daily-quest-footer > span { font-weight: 700; }
.daily-quest-footer > strong { color: #4c7722; }
.daily-footer-progress {
    height: 11px;
    overflow: hidden;
    border: 1px solid #847258;
    border-radius: 7px;
    background: #c8bea6;
}
.daily-footer-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(#75a73e, #4e8127);
}
.daily-quest-footer small {
    grid-column: 1 / -1;
    color: #8b7b64;
}
.game-more-daily-link { position: relative; }
.game-more-menu-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 7px;
    place-items: center;
    padding: 0 5px;
    border-radius: 10px;
    background: #a6412c;
    color: #fff;
    font: 800 11px/1 Arial, sans-serif;
    vertical-align: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.game-more-daily-link.has-reward > i {
    color: #6d932f;
    text-shadow: 0 0 8px rgba(109,147,47,.3);
}

@media (max-width: 800px) {
    .daily-quests-page { width: calc(100vw - 14px); margin: 7px auto 18px; }
    .daily-quest-board { border-radius: 4px; }
    .daily-quest-head { padding: 17px 48px 13px 14px; text-align: left; }
    .daily-quest-head h1 { font-size: 20px; }
    .daily-quest-head p { font-size: 11px; line-height: 1.35; }
    .daily-quest-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 28px; }
    .daily-reward-track-wrap { padding: 10px 8px 8px; overflow-x: auto; }
    .daily-reward-track { grid-template-columns: repeat(4, 98px) 114px; min-width: 505px; min-height: 128px; padding-inline: 2px; }
    .daily-track-line { left: 7%; right: 22%; top: 61px; }
    .daily-chest { width: 62px; height: 58px; }
    .daily-chest-body, .daily-chest-lid { left: 8px; right: 8px; }
    .daily-chest::after { left: 27px; }
    .daily-reward-node > strong { min-width: 54px; font-size: 12px; }
    .daily-reward-node > small { font-size: 9px; }
    .daily-points-medal { width: 104px; height: 90px; margin-top: 5px; }
    .daily-points-medal > strong { font-size: 29px; }
    .daily-ready-banner { margin: 0 8px 8px; font-size: 12px; }
    .daily-quest-list { gap: 6px; padding: 0 8px 12px; }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) 76px;
        min-height: 82px;
    }
    .daily-quest-title { padding: 8px 9px 3px; }
    .daily-quest-title strong { font-size: 12.5px; }
    .daily-quest-title small { font-size: 10px; }
    .daily-quest-segments { grid-column: 1; padding: 2px 8px 8px; }
    .daily-segment { min-width: 40px; height: 27px; border-radius: 8px; }
    .daily-segment b { font-size: 11px; }
    .daily-quest-score { grid-column: 2; grid-row: 1 / 3; padding: 5px; }
    .daily-quest-score span { font-size: 22px; }
    .daily-quest-score strong { font-size: 11px; }
    .daily-quest-footer { grid-template-columns: auto auto; padding: 10px 10px 13px; }
    .daily-footer-progress { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    .daily-quests-page { width: calc(100vw - 8px); }
    .daily-quest-head h1 { font-size: 18px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) 68px; }
    .daily-quest-title strong { font-size: 12px; }
    .daily-quest-segments { gap: 3px; }
    .daily-segment { min-width: 34px; padding: 0 3px; }
}


/* ===== V1.9.8.37 · Daily quests mobile Travian-match polish ===== */
.daily-laurel {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 11px;
    flex: 0 0 auto;
    color: currentColor;
    vertical-align: -1px;
}
.daily-laurel::before,
.daily-laurel::after {
    content: '';
    position: absolute;
    top: 1px;
    width: 5px;
    height: 3px;
    border-radius: 100% 0 100% 0;
    background: currentColor;
}
.daily-laurel::before {
    left: 1px;
    transform: rotate(-27deg);
    box-shadow: 3px 3px 0 currentColor, 6px 6px 0 currentColor;
}
.daily-laurel::after {
    right: 1px;
    transform: scaleX(-1) rotate(-27deg);
    box-shadow: 3px 3px 0 currentColor, 6px 6px 0 currentColor;
}
.daily-laurel-medal { width: 20px; height: 15px; color: #896a36; }
.daily-laurel-score { width: 18px; height: 13px; color: currentColor; }

@media (max-width: 800px) {
    .daily-quests-page {
        width: calc(100vw - 4px);
        margin: 2px auto 14px;
    }
    .daily-quest-board {
        border-radius: 3px;
    }
    .daily-quest-head {
        min-height: 0;
        padding: 9px 39px 8px 10px;
        gap: 0;
        text-align: center;
    }
    .daily-quest-kicker {
        display: none;
    }
    .daily-quest-head h1 {
        font-size: 15px;
        line-height: 1.13;
    }
    .daily-quest-head p {
        margin-top: 4px;
        font-size: 9px;
        line-height: 1.22;
    }
    .daily-quest-close {
        top: 7px;
        right: 7px;
        width: 28px;
        height: 28px;
        border-width: 1px;
        font-size: 23px;
    }

    .daily-reward-track-wrap {
        padding: 6px 5px 5px;
        overflow: visible;
    }
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 72px;
        width: 100%;
        min-width: 0;
        min-height: 96px;
        padding: 4px 2px 2px;
        border-width: 1px;
    }
    .daily-track-line {
        left: 7%;
        right: 15%;
        top: 43px;
        height: 8px;
        border-width: 1px;
    }
    .daily-reward-node {
        min-width: 0;
        width: auto;
    }
    .daily-chest {
        width: 46px;
        height: 43px;
    }
    .daily-chest-body,
    .daily-chest-lid {
        left: 6px;
        right: 6px;
        border-width: 2px;
    }
    .daily-chest-body {
        bottom: 5px;
        height: 26px;
    }
    .daily-chest-lid {
        top: 4px;
        height: 17px;
    }
    .daily-chest::after {
        left: 20px;
        top: 17px;
        width: 5px;
        height: 16px;
        border-width: 1px;
    }
    .daily-chest b {
        top: -1px;
        right: -1px;
        min-width: 17px;
        height: 17px;
        font-size: 10px;
    }
    .daily-reward-node > strong {
        min-width: 38px;
        margin-top: -2px;
        padding: 2px 4px 3px;
        border-width: 1px;
        font-size: 10.5px;
    }
    .daily-reward-node > small {
        max-width: 64px;
        min-height: 23px;
        margin-top: 2px;
        font-size: 7.7px;
        line-height: 1.08;
    }
    .daily-points-medal {
        grid-template-columns: 13px 1fr 13px;
        width: 66px;
        height: 66px;
        margin: 7px auto 0;
        border-width: 3px;
    }
    .daily-points-medal > strong {
        font-size: 21px;
    }
    .daily-points-medal > small {
        font-size: 8px;
    }
    .daily-laurel-medal {
        width: 13px;
        height: 10px;
    }

    .daily-ready-banner {
        margin: 0 5px 5px;
        padding: 5px 7px;
        font-size: 9.5px;
    }
    .daily-quest-list {
        gap: 4px;
        padding: 0 5px 8px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(116px, .96fr) 42px;
        min-height: 48px;
        border-width: 1px;
        border-radius: 4px;
    }
    .daily-quest-title {
        padding: 5px 5px 5px 7px;
    }
    .daily-quest-title strong {
        font-size: 10.4px;
        line-height: 1.16;
        font-weight: 500;
    }
    .daily-quest-title small {
        display: none;
    }
    .daily-quest-segments {
        grid-column: auto;
        padding: 5px 2px;
        gap: 2px;
    }
    .daily-segment {
        min-width: 0;
        height: 24px;
        gap: 2px;
        padding: 0 2px;
        border-radius: 7px;
    }
    .daily-segment .daily-laurel {
        width: 11px;
        height: 8px;
    }
    .daily-segment b {
        font-size: 9px;
    }
    .daily-quest-score {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 2px 1px;
    }
    .daily-quest-score strong {
        order: -1;
        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }
    .daily-quest-score .daily-laurel-score {
        width: 13px;
        height: 9px;
    }
    .daily-quest-footer {
        grid-template-columns: auto auto;
        gap: 5px 8px;
        padding: 7px 7px 10px;
        font-size: 10px;
    }
    .daily-footer-progress {
        grid-column: 1 / -1;
        height: 8px;
    }
    .daily-quest-footer small {
        font-size: 8.5px;
        line-height: 1.2;
    }
}

@media (max-width: 370px) {
    .daily-quest-head h1 { font-size: 14px; }
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 66px; }
    .daily-points-medal { width: 61px; height: 61px; }
    .daily-reward-node > small { font-size: 7.2px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(108px, .94fr) 39px; }
    .daily-quest-title strong { font-size: 9.8px; }
    .daily-segment b { font-size: 8.5px; }
}

/* ===== V1.9.8.40 · Daily Quests — patvirtintas Travian etalonas ===== */
.daily-quest-footer-etalon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.daily-footer-meta {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px 12px;
}
.daily-footer-meta > strong { color: #4c7722; }
.daily-footer-claim-form { margin: 0; }
.daily-footer-claim {
    min-width: 190px;
    height: 42px;
    padding: 0 22px;
    border: 2px solid #5f594a;
    border-radius: 4px;
    background: linear-gradient(#8f9287, #71756c);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 1px 2px rgba(0,0,0,.2);
    color: #e9e9df;
    font: 700 14px/1 Georgia, 'Times New Roman', serif;
    text-shadow: 0 1px rgba(0,0,0,.24);
}
.daily-footer-claim:disabled {
    opacity: .62;
    cursor: not-allowed;
}
.daily-footer-claim.is-ready {
    border-color: #526b2c;
    background: linear-gradient(#819c4d, #536e2d);
    color: #fff9df;
    cursor: pointer;
}
.daily-footer-note {
    color: #8b7b64;
    text-align: center;
}

/* Keturių 25/50/75/100 pakopų vizualinis atskyrimas kaip etalone. */
.daily-reward-node:nth-of-type(2) .daily-chest-body,
.daily-reward-node:nth-of-type(2) .daily-chest-lid {
    background: linear-gradient(135deg, #726c5e, #9b927f 55%, #5d574b);
}
.daily-reward-node:nth-of-type(3) .daily-chest-body,
.daily-reward-node:nth-of-type(3) .daily-chest-lid {
    background: linear-gradient(135deg, #82999a, #abc1c1 55%, #6c8384);
}
.daily-reward-node:nth-of-type(4) .daily-chest-body,
.daily-reward-node:nth-of-type(4) .daily-chest-lid {
    background: linear-gradient(135deg, #9ba3a1, #d0d4cf 55%, #7c8582);
}
.daily-reward-node:nth-of-type(5) .daily-chest-body,
.daily-reward-node:nth-of-type(5) .daily-chest-lid {
    background: linear-gradient(135deg, #8e7882, #b9a1aa 55%, #745f68);
}

@media (max-width: 800px) {
    .daily-quests-page {
        width: calc(100vw - 8px);
        margin: 3px auto 12px;
    }
    .daily-quest-board {
        border-width: 2px;
        border-radius: 4px;
    }
    .daily-quest-head {
        padding: 11px 42px 8px 10px;
        border-bottom: 0;
    }
    .daily-quest-head h1 {
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.18;
        color: #564738;
    }
    .daily-quest-head p {
        margin-top: 5px;
        font-size: 9px;
        line-height: 1.2;
        color: #7b6d5b;
    }
    .daily-quest-close {
        top: 7px;
        right: 7px;
        width: 29px;
        height: 29px;
        border: 2px solid #5b552d;
        background: linear-gradient(#6f923a, #466a25);
        font-size: 24px;
    }

    .daily-reward-track-wrap {
        padding: 2px 6px 7px;
    }
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 74px;
        min-height: 92px;
        padding: 3px 2px 1px;
        border: 2px solid #765a34;
        border-radius: 4px;
        background: linear-gradient(180deg, #9da6a1 0 61%, #87938c 61% 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
    }
    .daily-track-line {
        left: 4.5%;
        right: 16%;
        top: 45px;
        height: 7px;
        border: 1px solid #66533c;
        background: #aaa896;
    }
    .daily-reward-node > small { display: none; }
    .daily-chest {
        width: 47px;
        height: 45px;
    }
    .daily-reward-node > strong {
        min-width: 41px;
        margin-top: -2px;
        padding: 2px 4px 3px;
        border-radius: 1px 1px 8px 8px;
        font-size: 10px;
    }
    .daily-points-medal {
        grid-template-columns: 12px 1fr 12px;
        grid-template-rows: 1fr auto;
        width: 68px;
        height: 67px;
        margin-top: 7px;
        border: 0;
        border-radius: 4px;
        background: linear-gradient(#d8bd80, #a67c42);
        clip-path: polygon(16% 0,84% 0,100% 22%,92% 100%,8% 100%,0 22%);
        box-shadow: none;
    }
    .daily-points-medal::before {
        content: '';
        position: absolute;
        inset: 5px 7px 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 45% 35%, #fff1c0, #d3b16d 72%);
        box-shadow: inset 0 0 0 2px rgba(99,70,31,.58);
        z-index: -1;
    }
    .daily-points-medal > strong { font-size: 22px; }
    .daily-points-medal > small {
        font-size: 8px;
        color: #fff7db;
        text-shadow: 0 1px #4d3920;
    }
    .daily-laurel-medal { width: 12px; height: 9px; }

    .daily-ready-banner { display: none; }
    .daily-quest-list {
        gap: 4px;
        padding: 0 6px 7px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(118px, 1fr) 47px;
        min-height: 43px;
        border: 2px solid #735630;
        border-radius: 3px;
        background: linear-gradient(90deg, #fbf7e9, #eee4ca);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 1px rgba(80,56,24,.12);
    }
    .daily-quest-row.is-complete {
        opacity: .64;
        filter: saturate(.7);
    }
    .daily-quest-title {
        padding: 5px 4px 5px 7px;
    }
    .daily-quest-title strong {
        font-family: Arial, sans-serif;
        font-size: 10.4px;
        line-height: 1.16;
        font-weight: 500;
        color: #5e4e3a;
    }
    .daily-quest-segments {
        padding: 5px 2px;
        gap: 2px;
    }
    .daily-segment {
        min-width: 0;
        height: 24px;
        gap: 1px;
        padding: 0 2px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(#c1bbab, #aaa493);
        color: #6c6455;
        box-shadow: inset 0 1px rgba(255,255,255,.42);
    }
    .daily-segment.done {
        border: 0;
        background: linear-gradient(#47a43a, #278427);
        color: #fff;
    }
    .daily-segment .daily-laurel {
        width: 10px;
        height: 7px;
    }
    .daily-segment b {
        font-size: 8.8px;
        font-weight: 700;
    }
    .daily-quest-score {
        position: relative;
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 1px;
        border-left: 0;
        color: #785a32;
    }
    .daily-quest-score::before,
    .daily-quest-score::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        width: 7px;
        border-top: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        opacity: .75;
    }
    .daily-quest-score::before {
        left: 2px;
        border-left: 2px solid currentColor;
        border-radius: 70% 0 0 70%;
        transform: rotate(-8deg);
    }
    .daily-quest-score::after {
        right: 2px;
        border-right: 2px solid currentColor;
        border-radius: 0 70% 70% 0;
        transform: rotate(8deg);
    }
    .daily-quest-score strong {
        order: -1;
        font-size: 8.8px;
        line-height: 1;
        white-space: nowrap;
    }
    .daily-quest-score .daily-laurel-score {
        width: 12px;
        height: 8px;
    }

    .daily-quest-footer-etalon {
        display: flex;
        padding: 4px 6px 10px;
        border-top: 0;
        background: transparent;
    }
    .daily-footer-meta,
    .daily-footer-note { display: none; }
    .daily-footer-claim-form { width: auto; }
    .daily-footer-claim {
        min-width: 146px;
        height: 34px;
        padding: 0 17px;
        border-width: 2px;
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(110px, .98fr) 44px;
        min-height: 41px;
    }
    .daily-quest-title strong { font-size: 9.9px; }
    .daily-segment b { font-size: 8.4px; }
    .daily-quest-score strong { font-size: 8.4px; }
}

@media (max-width: 370px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 66px; }
    .daily-points-medal { width: 61px; height: 61px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(104px, .96fr) 40px; }
    .daily-quest-title strong { font-size: 9.2px; }
    .daily-segment { height: 23px; }
    .daily-segment b { font-size: 7.9px; }
}


/* ===== V1.9.8.41 · Daily Quests etalono poliravimas ===== */
@media (max-width: 800px) {
    .daily-quest-head {
        padding: 10px 41px 7px 10px;
    }
    .daily-quest-head h1 {
        font-size: 13.5px;
        line-height: 1.14;
    }
    .daily-quest-head p {
        margin-top: 4px;
        font-size: 8.6px;
    }

    .daily-reward-track-wrap {
        padding: 2px 5px 6px;
    }
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 78px;
        min-height: 84px;
        padding: 2px 2px 1px;
        background: linear-gradient(180deg, #9ba5a0 0 56%, #88958e 56% 100%);
    }
    .daily-track-line {
        left: 4.8%;
        right: 17.5%;
        top: 39px;
        height: 6px;
    }
    .daily-chest {
        width: 42px;
        height: 39px;
    }
    .daily-chest-body {
        bottom: 4px;
        height: 24px;
    }
    .daily-chest-lid {
        top: 4px;
        height: 15px;
    }
    .daily-chest::after {
        left: 18px;
        top: 15px;
        height: 14px;
    }
    .daily-reward-node > strong {
        min-width: 37px;
        margin-top: -1px;
        padding: 2px 4px 2px;
        font-size: 9.6px;
    }

    .daily-points-medal {
        grid-template-columns: 15px 1fr 15px;
        width: 74px;
        height: 70px;
        margin-top: 4px;
        clip-path: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }
    .daily-points-medal::before {
        inset: 3px 10px 14px;
        border-radius: 999px;
        background: radial-gradient(circle at 42% 32%, #fff4c8, #d3b16d 70%);
        box-shadow: inset 0 0 0 2px rgba(99,70,31,.58), 0 1px 0 rgba(255,255,255,.35);
        z-index: 0;
    }
    .daily-points-medal::after {
        content: '';
        position: absolute;
        inset: auto 18px 6px 18px;
        height: 12px;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(#b48746, #8f6631);
        box-shadow: inset 0 1px rgba(255,255,255,.25);
        z-index: 0;
    }
    .daily-points-medal > strong,
    .daily-points-medal > small,
    .daily-points-medal > .daily-laurel-medal {
        position: relative;
        z-index: 1;
    }
    .daily-points-medal > strong {
        font-size: 24px;
        line-height: 1;
        color: #3f2e18;
        align-self: end;
    }
    .daily-points-medal > small {
        margin-top: -2px;
        font-size: 8px;
        color: #fff7db;
        text-shadow: 0 1px #4d3920;
        align-self: start;
    }
    .daily-laurel-medal {
        width: 14px;
        height: 34px;
        align-self: center;
        color: #8d6a36;
    }
    .daily-laurel-medal::before,
    .daily-laurel-medal::after {
        top: 4px;
        width: 4px;
        height: 3px;
        border-radius: 100% 0 100% 0;
    }
    .daily-laurel-medal::before {
        left: 1px;
        transform: rotate(-20deg);
        box-shadow: 2px 4px 0 currentColor, 4px 8px 0 currentColor, 5px 12px 0 currentColor, 5px 16px 0 currentColor, 4px 20px 0 currentColor;
    }
    .daily-laurel-medal::after {
        right: 1px;
        transform: scaleX(-1) rotate(-20deg);
        box-shadow: 2px 4px 0 currentColor, 4px 8px 0 currentColor, 5px 12px 0 currentColor, 5px 16px 0 currentColor, 4px 20px 0 currentColor;
    }

    .daily-quest-list {
        gap: 3px;
        padding: 0 5px 6px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(112px, 1fr) 45px;
        min-height: 38px;
    }
    .daily-quest-title {
        padding: 4px 4px 4px 7px;
    }
    .daily-quest-title strong {
        font-size: 9.8px;
        line-height: 1.13;
    }
    .daily-quest-segments {
        padding: 4px 2px;
        gap: 2px;
    }
    .daily-segment {
        height: 21px;
        border-radius: 7px;
    }
    .daily-segment .daily-laurel {
        width: 9px;
        height: 7px;
    }
    .daily-segment b {
        font-size: 8.2px;
    }
    .daily-quest-score {
        gap: 0;
        padding: 0 1px;
    }
    .daily-quest-score::before,
    .daily-quest-score::after {
        top: 6px;
        bottom: 6px;
        width: 8px;
        border-top-width: 2px;
        border-bottom-width: 2px;
        opacity: .8;
    }
    .daily-quest-score strong {
        font-size: 8.2px;
    }
    .daily-quest-score .daily-laurel-score {
        width: 12px;
        height: 8px;
        margin-top: 1px;
    }

    .daily-footer-claim {
        min-width: 150px;
        height: 33px;
        font-size: 10.8px;
    }
}

@media (max-width: 430px) {
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 74px;
    }
    .daily-points-medal {
        width: 70px;
        height: 67px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(106px, .98fr) 43px;
        min-height: 37px;
    }
    .daily-quest-title strong {
        font-size: 9.4px;
    }
    .daily-segment b {
        font-size: 8px;
    }
    .daily-quest-score strong {
        font-size: 8px;
    }
}

@media (max-width: 370px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 70px; }
    .daily-points-medal { width: 66px; height: 63px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(100px, .96fr) 40px; }
    .daily-segment { height: 20px; }
    .daily-quest-title strong { font-size: 9px; }
    .daily-segment b, .daily-quest-score strong { font-size: 7.7px; }
}


/* ===== V1.9.8.42 · Daily Quests final etalon wreath polish ===== */
@media (max-width: 800px) {
    /* Platesni, laurais apgaubti dienos taškai – arčiau etalono. */
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 86px;
    }
    .daily-points-medal {
        width: 82px;
        height: 72px;
        margin-top: 3px;
        display: grid;
        grid-template-columns: 18px 1fr 18px;
        grid-template-rows: 1fr auto;
        align-items: center;
        justify-items: center;
    }
    .daily-points-medal::before {
        inset: 3px 13px 15px;
        border-radius: 50%;
    }
    .daily-points-medal::after {
        inset: auto 19px 5px 19px;
        height: 13px;
        border-radius: 1px 1px 5px 5px;
    }
    .daily-points-medal > strong {
        font-size: 25px;
    }
    .daily-points-medal > small {
        font-size: 8.2px;
    }
    .daily-laurel-medal {
        width: 18px;
        height: 42px;
        color: #8b6533;
    }
    .daily-laurel-medal::before,
    .daily-laurel-medal::after {
        top: 3px;
        width: 5px;
        height: 3px;
    }
    .daily-laurel-medal::before {
        left: 1px;
        transform: rotate(-24deg);
        box-shadow: 3px 5px 0 currentColor, 5px 10px 0 currentColor, 6px 15px 0 currentColor, 6px 20px 0 currentColor, 5px 25px 0 currentColor, 3px 30px 0 currentColor;
    }
    .daily-laurel-medal::after {
        right: 1px;
        transform: scaleX(-1) rotate(-24deg);
        box-shadow: 3px 5px 0 currentColor, 5px 10px 0 currentColor, 6px 15px 0 currentColor, 6px 20px 0 currentColor, 5px 25px 0 currentColor, 3px 30px 0 currentColor;
    }

    /* Dešinėje nebe skliaustai, o aiškesnis mini laurų vainikas. */
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) 50px;
    }
    .daily-quest-score {
        position: relative;
        min-width: 48px;
        color: #76572f;
    }
    .daily-quest-score::before,
    .daily-quest-score::after {
        top: 5px;
        bottom: 5px;
        width: 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        opacity: .9;
        box-shadow: none;
    }
    .daily-quest-score::before {
        left: 0;
        transform: none;
        border-left: 2px solid currentColor;
        border-radius: 60% 0 0 60%;
    }
    .daily-quest-score::after {
        right: 0;
        transform: none;
        border-right: 2px solid currentColor;
        border-radius: 0 60% 60% 0;
    }
    .daily-quest-score .daily-laurel-score {
        position: absolute;
        inset: 7px 4px 4px 4px;
        width: auto;
        height: auto;
        margin: 0;
        color: currentColor;
        opacity: .85;
    }
    .daily-quest-score .daily-laurel-score::before,
    .daily-quest-score .daily-laurel-score::after {
        top: 2px;
        width: 4px;
        height: 3px;
    }
    .daily-quest-score .daily-laurel-score::before {
        left: 2px;
        transform: rotate(-32deg);
        box-shadow: 3px 5px 0 currentColor, 4px 10px 0 currentColor, 4px 15px 0 currentColor, 3px 20px 0 currentColor;
    }
    .daily-quest-score .daily-laurel-score::after {
        right: 2px;
        transform: scaleX(-1) rotate(-32deg);
        box-shadow: 3px 5px 0 currentColor, 4px 10px 0 currentColor, 4px 15px 0 currentColor, 3px 20px 0 currentColor;
    }
    .daily-quest-score strong {
        position: relative;
        z-index: 2;
        font-size: 8.4px;
        margin-top: 0;
        color: inherit;
    }
    .daily-quest-score.done {
        color: #6c8e4d;
    }

    /* Dar truputį artimesnės etalonui taškų pakopos. */
    .daily-segment {
        border-radius: 7px;
        box-shadow: inset 0 1px rgba(255,255,255,.48), 0 1px rgba(72,58,37,.08);
    }
}

@media (max-width: 430px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 82px; }
    .daily-points-medal { width: 78px; height: 69px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(104px, .98fr) 47px; }
    .daily-quest-score { min-width: 45px; }
}

@media (max-width: 370px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 76px; }
    .daily-points-medal { width: 72px; height: 65px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(98px, .96fr) 44px; }
}


/* ===== V1.9.8.43 · Daily Quests pritaikymas prie Travia dizaino ===== */
.daily-quest-board {
    border-color: #86653e;
    background:
        linear-gradient(rgba(252, 248, 237, .98), rgba(238, 228, 202, .98)),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(111, 80, 42, .03) 8px 9px);
    box-shadow: 0 10px 24px rgba(45, 31, 16, .18), inset 0 0 0 2px rgba(255,255,255,.52);
}
.daily-quest-head h1 { color: #53412d; }
.daily-quest-head p { color: #7a6953; }

@media (max-width: 800px) {
    .daily-quests-page {
        width: calc(100vw - 8px);
        margin: 4px auto 12px;
    }
    .daily-quest-board {
        border-width: 2px;
        border-radius: 5px;
    }
    .daily-quest-head {
        padding: 12px 44px 10px 12px;
        text-align: center;
        background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08));
    }
    .daily-quest-head h1 {
        font-family: Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: -.01em;
    }
    .daily-quest-head p {
        margin-top: 5px;
        font-size: 9.4px;
        line-height: 1.22;
    }
    .daily-quest-close {
        width: 31px;
        height: 31px;
        border: 2px solid #6b7540;
        border-radius: 4px;
        background: linear-gradient(#7da046, #587628);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 1px 2px rgba(0,0,0,.18);
    }

    .daily-reward-track-wrap {
        padding: 4px 6px 8px;
    }
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 82px;
        min-height: 90px;
        padding: 4px 4px 2px;
        border: 2px solid #7c6240;
        border-radius: 5px;
        background:
            linear-gradient(180deg, #bcc4bf 0 57%, #d8d1bf 57% 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
    }
    .daily-track-line {
        left: 5.5%;
        right: 18%;
        top: 44px;
        height: 6px;
        border: 1px solid #7b6647;
        border-radius: 6px;
        background: #aca48d;
    }
    .daily-track-line i {
        background: linear-gradient(#77af41, #58862a);
    }
    .daily-chest {
        width: 44px;
        height: 40px;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
    }
    .daily-chest-body,
    .daily-chest-lid {
        left: 6px;
        right: 6px;
        border-width: 2px;
        border-color: #786246;
    }
    .daily-chest-body {
        bottom: 4px;
        height: 23px;
        border-radius: 8px;
    }
    .daily-chest-lid {
        top: 4px;
        height: 14px;
        border-radius: 9px 9px 5px 5px;
    }
    .daily-reward-node > strong {
        min-width: 40px;
        margin-top: 0;
        padding: 2px 6px 3px;
        border: 1px solid #715331;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(#8f6c48, #6c4b2b);
        color: #fff4d7;
        font-size: 10px;
        box-shadow: inset 0 1px rgba(255,255,255,.2);
    }

    .daily-points-medal {
        position: relative;
        width: 76px;
        height: 72px;
        margin-top: 4px;
        grid-template-columns: 14px 1fr 14px;
        grid-template-rows: 1fr auto;
        background: transparent;
        clip-path: none;
        overflow: visible;
    }
    .daily-points-medal::before {
        content: '';
        position: absolute;
        inset: 3px 10px 15px;
        border-radius: 50%;
        background: radial-gradient(circle at 42% 30%, #fff2c7 0, #e3c37f 55%, #b98b43 100%);
        box-shadow: inset 0 0 0 2px rgba(108,78,36,.5), 0 1px 2px rgba(0,0,0,.12);
        z-index: 0;
    }
    .daily-points-medal::after {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 6px;
        height: 11px;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(#b7894d, #8f6633);
        box-shadow: inset 0 1px rgba(255,255,255,.22);
        z-index: 0;
    }
    .daily-points-medal > strong,
    .daily-points-medal > small,
    .daily-points-medal > .daily-laurel-medal {
        position: relative;
        z-index: 1;
    }
    .daily-points-medal > strong {
        align-self: end;
        font-size: 23px;
        line-height: 1;
        color: #4b3419;
    }
    .daily-points-medal > small {
        align-self: start;
        margin-top: -1px;
        font-size: 8px;
        color: #fff8e5;
        text-shadow: 0 1px rgba(77,57,32,.85);
    }
    .daily-laurel-medal {
        width: 14px;
        height: 32px;
        align-self: center;
        color: #9a7238;
    }
    .daily-laurel-medal::before,
    .daily-laurel-medal::after {
        top: 3px;
        width: 4px;
        height: 3px;
        background: currentColor;
    }
    .daily-laurel-medal::before {
        left: 1px;
        transform: rotate(-22deg);
        box-shadow: 2px 4px 0 currentColor, 4px 8px 0 currentColor, 4px 12px 0 currentColor, 4px 16px 0 currentColor, 3px 20px 0 currentColor;
    }
    .daily-laurel-medal::after {
        right: 1px;
        transform: scaleX(-1) rotate(-22deg);
        box-shadow: 2px 4px 0 currentColor, 4px 8px 0 currentColor, 4px 12px 0 currentColor, 4px 16px 0 currentColor, 3px 20px 0 currentColor;
    }

    .daily-quest-list {
        gap: 6px;
        padding: 0 6px 8px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(112px, 1fr) 58px;
        min-height: 52px;
        border: 2px solid #8a6b43;
        border-radius: 4px;
        background: linear-gradient(180deg, #fbf8ee, #f0e6cf);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 1px 1px rgba(80,56,24,.08);
    }
    .daily-quest-row.is-complete {
        opacity: .72;
        filter: saturate(.78);
    }
    .daily-quest-title {
        display: flex;
        align-items: center;
        padding: 6px 8px 6px 10px;
    }
    .daily-quest-title strong {
        font-family: Arial, sans-serif;
        font-size: 10.8px;
        line-height: 1.18;
        font-weight: 500;
        color: #584732;
    }
    .daily-quest-segments {
        display: flex;
        align-items: center;
        padding: 6px 4px;
        gap: 4px;
    }
    .daily-segment {
        min-width: 0;
        flex: 1 1 0;
        height: 28px;
        gap: 2px;
        padding: 0 4px;
        border: 1px solid rgba(118,101,75,.18);
        border-radius: 9px;
        background: linear-gradient(#c7c2b4, #b4ad9d);
        color: #6a6255;
        box-shadow: inset 0 1px rgba(255,255,255,.46);
    }
    .daily-segment.done {
        background: linear-gradient(#83bb60, #5f9838);
        border-color: rgba(71,119,37,.24);
        color: #fff;
    }
    .daily-segment .daily-laurel {
        width: 11px;
        height: 8px;
    }
    .daily-segment b {
        font-size: 9px;
        font-weight: 700;
    }

    .daily-quest-score {
        position: relative;
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        color: #7a6038;
    }
    .daily-quest-score::before {
        content: '';
        position: absolute;
        inset: 7px 2px;
        border: 1px solid rgba(126,95,52,.28);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08));
    }
    .daily-quest-score.done::before {
        border-color: rgba(97,142,76,.28);
        background: linear-gradient(180deg, rgba(212,237,200,.78), rgba(190,223,181,.32));
    }
    .daily-quest-score::after { display: none; }
    .daily-quest-score .daily-laurel-score {
        position: absolute;
        inset: 12px 10px 11px;
        width: auto;
        height: auto;
        color: currentColor;
        opacity: .22;
    }
    .daily-quest-score .daily-laurel-score::before,
    .daily-quest-score .daily-laurel-score::after {
        top: 1px;
        width: 4px;
        height: 3px;
    }
    .daily-quest-score .daily-laurel-score::before {
        left: 0;
        transform: rotate(-30deg);
        box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 3px 12px 0 currentColor;
    }
    .daily-quest-score .daily-laurel-score::after {
        right: 0;
        transform: scaleX(-1) rotate(-30deg);
        box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 3px 12px 0 currentColor;
    }
    .daily-quest-score strong {
        position: relative;
        z-index: 1;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }
    .daily-quest-score.done {
        color: #6c8e50;
    }

    .daily-quest-footer-etalon {
        padding: 6px 6px 11px;
    }
    .daily-footer-claim {
        min-width: 164px;
        height: 36px;
        padding: 0 20px;
        border: 2px solid #5e6454;
        border-radius: 4px;
        background: linear-gradient(#9ea093, #7f837a);
        color: #f0efe7;
        font-size: 12px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12);
    }
    .daily-footer-claim.is-ready {
        border-color: #60773b;
        background: linear-gradient(#88a654, #667f3a);
        color: #fff9df;
    }
}

@media (max-width: 430px) {
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 78px;
    }
    .daily-points-medal {
        width: 74px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(106px, .98fr) 54px;
        min-height: 50px;
    }
    .daily-quest-title strong { font-size: 10.2px; }
    .daily-segment { height: 27px; }
    .daily-segment b { font-size: 8.6px; }
    .daily-quest-score strong { font-size: 9.5px; }
}

@media (max-width: 370px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 74px; }
    .daily-points-medal { width: 70px; height: 68px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(100px, .96fr) 50px; }
    .daily-quest-title strong { font-size: 9.8px; }
    .daily-segment { height: 26px; }
    .daily-segment b, .daily-quest-score strong { font-size: 8.3px; }
}


/* ===== V1.9.8.44 · Daily Quests švarus Travia mobilus dizainas ===== */
.daily-quest-board {
    background: linear-gradient(180deg, rgba(249,246,236,.99), rgba(237,227,203,.985));
    border-color: #8b6c44;
    box-shadow: 0 8px 18px rgba(38, 26, 13, .12), inset 0 0 0 1px rgba(255,255,255,.55);
}
.daily-quest-kicker { display: none; }
.daily-ready-banner,
.daily-footer-note,
.daily-footer-meta { display: none; }

@media (max-width: 800px) {
    .daily-quests-page {
        width: calc(100vw - 10px);
        margin: 5px auto 10px;
    }
    .daily-quest-board {
        border-width: 2px;
        border-radius: 4px;
    }
    .daily-quest-head {
        padding: 12px 42px 9px 12px;
        text-align: center;
        background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.06));
    }
    .daily-quest-head h1 {
        font-size: 15px;
        line-height: 1.18;
        font-weight: 700;
        color: #51402c;
        letter-spacing: -.01em;
    }
    .daily-quest-head p {
        margin-top: 5px;
        font-size: 9.5px;
        line-height: 1.24;
        color: #766552;
    }
    .daily-quest-close {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        border: 2px solid #6d7742;
        background: linear-gradient(#84a64d, #607d32);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 1px 2px rgba(0,0,0,.14);
    }

    .daily-reward-track-wrap {
        padding: 4px 6px 8px;
    }
    .daily-reward-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 80px;
        min-height: 88px;
        padding: 4px 4px 2px;
        border: 2px solid #836540;
        border-radius: 4px;
        background: linear-gradient(180deg, #c2cac6 0 56%, #ddd4c0 56% 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
    }
    .daily-track-line {
        left: 5.5%;
        right: 17%;
        top: 43px;
        height: 5px;
        border: 1px solid #826a4a;
        border-radius: 6px;
        background: #a79d85;
    }
    .daily-track-line i {
        background: linear-gradient(#74ad3e, #59862c);
    }
    .daily-chest {
        width: 42px;
        height: 38px;
    }
    .daily-reward-node > strong {
        min-width: 38px;
        margin-top: 0;
        padding: 2px 5px 3px;
        border: 1px solid #78552f;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(#8b6845, #6a492b);
        color: #fff3d1;
        font-size: 10px;
        box-shadow: inset 0 1px rgba(255,255,255,.18);
    }
    .daily-reward-node > small { display: none; }

    .daily-points-medal {
        width: 76px;
        height: 71px;
        margin-top: 5px;
        grid-template-columns: 13px 1fr 13px;
        grid-template-rows: 1fr auto;
        background: transparent;
        clip-path: none;
        overflow: visible;
    }
    .daily-points-medal::before {
        content: '';
        position: absolute;
        inset: 3px 10px 15px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 28%, #fff4cb 0, #e3c482 54%, #bc924e 100%);
        box-shadow: inset 0 0 0 2px rgba(113,81,38,.48), 0 1px 2px rgba(0,0,0,.12);
        z-index: 0;
    }
    .daily-points-medal::after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 6px;
        height: 10px;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(#b88c50, #956b38);
        z-index: 0;
    }
    .daily-points-medal > strong,
    .daily-points-medal > small,
    .daily-points-medal > .daily-laurel-medal { position: relative; z-index: 1; }
    .daily-points-medal > strong {
        align-self: end;
        font-size: 22px;
        line-height: 1;
        color: #4a351d;
    }
    .daily-points-medal > small {
        align-self: start;
        font-size: 8px;
        margin-top: -1px;
        color: #fff7e5;
        text-shadow: 0 1px rgba(78,58,33,.85);
    }
    .daily-laurel-medal {
        width: 11px;
        height: 29px;
        color: #97703a;
    }
    .daily-laurel-medal::before,
    .daily-laurel-medal::after {
        top: 4px;
        width: 4px;
        height: 3px;
        background: currentColor;
    }
    .daily-laurel-medal::before {
        left: 0;
        transform: rotate(-24deg);
        box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 3px 12px 0 currentColor, 2px 16px 0 currentColor;
    }
    .daily-laurel-medal::after {
        right: 0;
        transform: scaleX(-1) rotate(-24deg);
        box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 3px 12px 0 currentColor, 2px 16px 0 currentColor;
    }

    .daily-quest-list {
        gap: 5px;
        padding: 0 6px 8px;
    }
    .daily-quest-row {
        grid-template-columns: minmax(0, 1fr) minmax(112px, 1fr) 56px;
        min-height: 47px;
        border: 2px solid #8b6c45;
        border-radius: 4px;
        background: linear-gradient(180deg, #fbf8ee, #f0e6d1);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 1px 1px rgba(85,63,36,.08);
    }
    .daily-quest-row.is-complete {
        opacity: .78;
        filter: saturate(.82);
    }
    .daily-quest-title {
        display: flex;
        align-items: center;
        padding: 6px 8px 6px 10px;
    }
    .daily-quest-title strong {
        font-size: 10.6px;
        line-height: 1.18;
        font-weight: 500;
        color: #574733;
    }
    .daily-quest-title small { display: none; }
    .daily-quest-segments {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 4px;
    }
    .daily-segment {
        flex: 1 1 0;
        min-width: 0;
        height: 26px;
        gap: 2px;
        padding: 0 4px;
        border: 1px solid rgba(117,101,75,.16);
        border-radius: 9px;
        background: linear-gradient(#c8c2b5, #b4ae9f);
        color: #6b6459;
        box-shadow: inset 0 1px rgba(255,255,255,.45);
    }
    .daily-segment.done {
        background: linear-gradient(#82bb5d, #5f9838);
        border-color: rgba(72,118,39,.22);
        color: #fff;
    }
    .daily-segment .daily-laurel { width: 10px; height: 8px; }
    .daily-segment b {
        font-size: 9px;
        font-weight: 700;
    }

    .daily-quest-score {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 5px;
        background: transparent;
        color: #705839;
    }
    .daily-quest-score::before,
    .daily-quest-score::after { display: none; }
    .daily-quest-score .daily-laurel-score {
        position: absolute;
        inset: auto;
        width: 9px;
        height: 8px;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        color: currentColor;
        opacity: .35;
    }
    .daily-quest-score strong {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 30px;
        padding: 8px 6px 0;
        border: 1px solid rgba(124,95,57,.2);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(246,240,226,.92));
        box-shadow: inset 0 1px rgba(255,255,255,.7);
        font-size: 10px;
        line-height: 1;
        color: inherit;
        white-space: nowrap;
    }
    .daily-quest-score.done {
        color: #6d9250;
    }
    .daily-quest-score.done strong {
        border-color: rgba(94,145,72,.18);
        background: linear-gradient(180deg, rgba(237,248,232,.96), rgba(216,235,206,.96));
    }

    .daily-quest-footer-etalon {
        padding: 8px 6px 12px;
    }
    .daily-footer-claim {
        min-width: 170px;
        height: 38px;
        padding: 0 20px;
        border: 2px solid #666a61;
        border-radius: 4px;
        background: linear-gradient(#9e9f93, #84867d);
        color: #f1f0e8;
        font-size: 12px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.12);
    }
    .daily-footer-claim.is-ready {
        border-color: #61793d;
        background: linear-gradient(#88a952, #697f3d);
        color: #fff9df;
    }
}

@media (max-width: 430px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 76px; }
    .daily-points-medal { width: 73px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(104px, .98fr) 54px; }
    .daily-quest-title strong { font-size: 10.1px; }
    .daily-segment b, .daily-quest-score strong { font-size: 8.8px; }
}

@media (max-width: 370px) {
    .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 72px; }
    .daily-points-medal { width: 69px; height: 68px; }
    .daily-quest-row { grid-template-columns: minmax(0, 1fr) minmax(98px, .96fr) 50px; }
    .daily-quest-title strong { font-size: 9.7px; }
    .daily-segment b, .daily-quest-score strong { font-size: 8.3px; }
}


/* ===== V1.9.8.45 · Daily Quests illustrated professional refresh ===== */
.daily-ready-banner,
.daily-footer-note,
.daily-footer-meta { display: none !important; }

@media (max-width: 800px) {
  .daily-quests-page {
    width: calc(100vw - 8px);
    margin: 4px auto 10px;
  }
  .daily-quest-board {
    border: 2px solid #8e6d45;
    border-radius: 4px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,241,227,.98) 22%, rgba(236,227,204,.98) 100%),
      repeating-linear-gradient(90deg, rgba(140,119,83,.035) 0, rgba(140,119,83,.035) 3px, transparent 3px, transparent 8px);
    box-shadow: 0 10px 22px rgba(41, 28, 13, .12), inset 0 0 0 1px rgba(255,255,255,.7);
  }
  .daily-quest-head {
    position: relative;
    padding: 14px 42px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(129,98,60,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.05));
  }
  .daily-quest-kicker { display: none !important; }
  .daily-quest-head h1 {
    font-size: 15px;
    line-height: 1.18;
    font-weight: 700;
    color: #5c452d;
    letter-spacing: -.01em;
  }
  .daily-quest-head p {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.2;
    color: #796553;
  }
  .daily-quest-close {
    width: 34px;
    height: 34px;
    right: 8px;
    top: 9px;
    border: 2px solid #68813d;
    border-radius: 4px;
    background: linear-gradient(#88aa4e, #647f35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.15);
  }

  .daily-reward-track-wrap { padding: 8px 10px 9px; }
  .daily-reward-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 88px;
    min-height: 111px;
    padding: 10px 6px 8px;
    border: 2px solid #866744;
    border-radius: 4px;
    background: linear-gradient(180deg, #bcc5c5 0 57%, #dfd4bf 57% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
  }
  .daily-track-line {
    left: 7.5%;
    right: 18%;
    top: 61px;
    height: 5px;
    border: 1px solid #7b6343;
    border-radius: 999px;
    background: #ab9f84;
    box-shadow: inset 0 1px rgba(255,255,255,.25);
  }
  .daily-track-line i { background: linear-gradient(#78ad43, #5f8b2e); }

  .daily-reward-node { align-self: start; gap: 0; }
  .daily-reward-node small { display: none; }
  .daily-chest {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 48px;
    margin-bottom: 4px;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible;
  }
  .daily-chest img {
    display: block;
    width: 58px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.18));
  }
  .daily-chest b {
    position: absolute;
    top: -7px;
    right: -4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(#6fba33, #4e8f1f);
    color: #fff;
    font-size: 13px;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
  .daily-reward-node.is-claimed .daily-chest b { content: '✓'; }
  .daily-reward-node:not(.is-claimed):not(.is-claimable) .daily-chest b { display: none; }
  .daily-reward-node.is-claimable .daily-chest { animation: dqPulse 1.15s infinite alternate; }
  @keyframes dqPulse { from { transform: translateY(0); } to { transform: translateY(-2px) scale(1.03); } }

  .daily-reward-node > strong {
    min-width: 44px;
    margin-top: -2px;
    padding: 4px 6px 5px;
    border: 1px solid #77512e;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(#8e6843, #6b4728);
    color: #fff3d1;
    font-size: 10px;
    box-shadow: inset 0 1px rgba(255,255,255,.18);
  }
  .daily-reward-node.tier-75 > strong,
  .daily-reward-node.tier-100 > strong {
    background: linear-gradient(#8c847e, #66574d);
    border-color: #655344;
  }
  .daily-reward-node.is-claimed > strong {
    background: linear-gradient(#886744, #69482a);
  }

  .daily-points-medal {
    position: relative;
    width: 84px;
    height: 86px;
    margin-top: 3px;
    grid-template-columns: 14px 1fr 14px;
    grid-template-rows: 1fr auto;
    align-items: center;
    background: transparent;
    overflow: visible;
  }
  .daily-points-medal::before {
    content: '';
    position: absolute;
    inset: 6px 12px 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, #fff5cb 0, #ebcf90 54%, #c08f47 100%);
    box-shadow: inset 0 0 0 2px rgba(118,87,44,.55), 0 1px 2px rgba(0,0,0,.18);
  }
  .daily-points-medal::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 8px;
    height: 12px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(#b98a4d, #966736);
    box-shadow: inset 0 1px rgba(255,255,255,.22);
  }
  .daily-points-medal > strong,
  .daily-points-medal > small,
  .daily-points-medal > .daily-laurel-medal { position: relative; z-index: 1; }
  .daily-points-medal > strong {
    align-self: end;
    font-size: 24px;
    line-height: 1;
    color: #4a341b;
    margin-bottom: -2px;
  }
  .daily-points-medal > small {
    align-self: start;
    margin-top: -1px;
    color: #fff6df;
    font-size: 8px;
    text-shadow: 0 1px rgba(76,56,32,.9);
  }
  .daily-laurel-medal {
    width: 12px;
    height: 33px;
    color: #94703a;
  }
  .daily-laurel-medal::before,
  .daily-laurel-medal::after {
    top: 5px;
    width: 4px;
    height: 3px;
    background: currentColor;
  }
  .daily-laurel-medal::before {
    left: 0;
    transform: rotate(-24deg);
    box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor;
  }
  .daily-laurel-medal::after {
    right: 0;
    transform: scaleX(-1) rotate(-24deg);
    box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor;
  }

  .daily-quest-list {
    gap: 7px;
    padding: 0 10px 10px;
  }
  .daily-quest-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(124px, .92fr) 58px;
    align-items: center;
    min-height: 58px;
    border: 2px solid #8c6b44;
    border-radius: 4px;
    background: linear-gradient(180deg, #fcf8ef, #f1e8d5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 1px rgba(81,59,33,.08);
  }
  .daily-quest-row.is-complete {
    opacity: .72;
    filter: saturate(.8);
  }
  .daily-quest-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 7px;
  }
  .daily-quest-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
  }
  .daily-quest-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px 7px 0;
  }
  .daily-quest-title strong {
    font-size: 10.7px;
    line-height: 1.18;
    font-weight: 500;
    color: #554531;
  }
  .daily-quest-title small {
    display: block;
    font-size: 8.3px;
    line-height: 1.1;
    color: #9a866f;
  }
  .daily-quest-segments {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 4px 6px 2px;
  }
  .daily-segment {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    gap: 3px;
    padding: 0 5px;
    border: 1px solid rgba(122,104,76,.2);
    border-radius: 10px;
    background: linear-gradient(#d2cbbc, #b8b09f);
    color: #655f55;
    box-shadow: inset 0 1px rgba(255,255,255,.48);
  }
  .daily-segment.done {
    background: linear-gradient(#84bb5c, #5e9838);
    border-color: rgba(79,120,49,.24);
    color: #fff;
  }
  .daily-segment .daily-laurel {
    width: 10px;
    height: 8px;
  }
  .daily-segment b {
    font-size: 10px;
    font-weight: 700;
  }
  .daily-quest-score {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    color: #7c5f3a;
    background: transparent;
  }
  .daily-quest-score::before,
  .daily-quest-score::after { display: none; }
  .daily-quest-score strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    border-radius: 18px;
    border: 1px solid rgba(128,98,58,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,241,230,.95));
    box-shadow: inset 0 1px rgba(255,255,255,.78);
    color: inherit;
    font-size: 10px;
    line-height: 1;
  }
  .daily-quest-score .daily-laurel-score {
    position: absolute;
    inset: auto;
    width: 10px;
    height: 8px;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: currentColor;
    opacity: .28;
  }
  .daily-quest-score.done { color: #7f9c69; }
  .daily-quest-score.done strong {
    background: linear-gradient(180deg, rgba(239,248,235,.97), rgba(223,237,215,.97));
    border-color: rgba(101,146,76,.2);
  }

  .daily-quest-footer-etalon {
    padding: 8px 10px 12px;
  }
  .daily-footer-claim {
    min-width: 188px;
    height: 42px;
    border: 2px solid #74786e;
    border-radius: 4px;
    background: linear-gradient(#a6a79c, #8a8c83);
    color: #f5f1e5;
    font-size: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12);
  }
  .daily-footer-claim.is-ready {
    border-color: #6a8142;
    background: linear-gradient(#8bad53, #6e833d);
    color: #fff7dd;
  }
}

@media (max-width: 430px) {
  .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 82px; }
  .daily-points-medal { width: 80px; }
  .daily-quest-row { grid-template-columns: 40px minmax(0, 1fr) minmax(116px, .88fr) 54px; }
  .daily-quest-icon img { width: 28px; height: 28px; }
  .daily-quest-title strong { font-size: 10.2px; }
  .daily-quest-title small { font-size: 8px; }
}

@media (max-width: 370px) {
  .daily-reward-track { grid-template-columns: repeat(4, minmax(0, 1fr)) 76px; }
  .daily-chest, .daily-chest img { width: 52px; height: 44px; }
  .daily-points-medal { width: 73px; height: 80px; }
  .daily-points-medal > strong { font-size: 21px; }
  .daily-quest-row { grid-template-columns: 38px minmax(0, 1fr) minmax(106px, .85fr) 50px; }
  .daily-quest-title strong { font-size: 9.8px; }
  .daily-segment { height: 26px; padding: 0 4px; }
  .daily-segment b, .daily-quest-score strong { font-size: 9px; }
}


/* ===== V1.9.8.46 · Daily Quests etalon alignment cleanup ===== */
.daily-quest-board-v46 .daily-ready-banner,
.daily-quest-board-v46 .daily-footer-note,
.daily-quest-board-v46 .daily-footer-meta,
.daily-quest-board-v46 .daily-quest-kicker,
.daily-quest-board-v46 .daily-quest-title small,
.daily-quest-board-v46 .daily-reward-node small,
.daily-quest-board-v46 .daily-quest-score .daily-laurel-score { display:none !important; }

@media (max-width: 900px) {
  .daily-quest-board-v46 {
    border: 2px solid #8b6a44;
    border-radius: 4px;
    background: linear-gradient(180deg, #fdfcf7, #f2ebda 76%, #ece1ca 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 8px 18px rgba(57,39,16,.12);
  }
  .daily-quest-head-v46 {
    position: relative;
    padding: 16px 44px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(125,93,56,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.05));
  }
  .daily-quest-head-v46 h1 {
    margin: 0;
    color: #5a4530;
    font-size: 16px;
    line-height: 1.16;
    font-weight: 700;
  }
  .daily-quest-head-v46 p {
    margin-top: 4px;
    color: #776550;
    font-size: 10px;
    line-height: 1.25;
  }
  .daily-quest-head-v46 .daily-quest-close {
    top: 10px;
    right: 8px;
    width: 35px;
    height: 35px;
    border: 2px solid #69813d;
    border-radius: 4px;
    background: linear-gradient(#8eb054, #648036);
    color: #fefce9;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.16);
  }

  .daily-reward-track-wrap-v46 { padding: 8px 12px 10px; }
  .daily-reward-track-v46 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 90px;
    min-height: 103px;
    padding: 10px 6px 7px;
    border: 2px solid #8b6945;
    border-radius: 4px;
    background: linear-gradient(180deg, #b7c1c0 0 58%, #e3d8c6 58% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
  }
  .daily-reward-track-v46 .daily-track-line {
    left: 7%; right: 17%; top: 58px; height: 5px;
    border: 1px solid #7c6344; border-radius: 999px; background: #a89a80;
  }
  .daily-reward-track-v46 .daily-track-line i { background: linear-gradient(#77ab45, #5b8a2e); }
  .daily-reward-track-v46 .daily-reward-node { align-self: start; gap: 0; }
  .daily-reward-track-v46 .daily-chest {
    width: 58px; height: 49px; margin-bottom: 4px; border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .daily-reward-track-v46 .daily-chest img {
    width: 58px; height: 49px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18));
  }
  .daily-reward-track-v46 .daily-chest b {
    top: -6px; right: -2px; min-width: 22px; height: 22px; font-size: 13px;
    border: 2px solid rgba(255,255,255,.85); background: linear-gradient(#74b53b,#518f20);
  }
  .daily-reward-track-v46 .daily-reward-node > strong {
    min-width: 42px; margin-top: -2px; padding: 4px 6px 5px;
    border: 1px solid #774f2b; border-radius: 0 0 8px 8px;
    background: linear-gradient(#8e6842, #6a4728); color: #fff1ce; font-size: 10px;
    box-shadow: inset 0 1px rgba(255,255,255,.18);
  }
  .daily-reward-track-v46 .tier-75 > strong,
  .daily-reward-track-v46 .tier-100 > strong {
    border-color: #64564b; background: linear-gradient(#8a837c, #64574e);
  }

  .daily-points-medal-v46 {
    position: relative;
    width: 84px; height: 84px; margin-top: 4px;
    grid-template-columns: 15px 1fr 15px; grid-template-rows: 1fr auto;
    background: transparent; border: 0; box-shadow: none; overflow: visible;
  }
  .daily-points-medal-v46::before {
    content: ''; position: absolute; inset: 6px 10px 12px;
    border-radius: 50%; background: radial-gradient(circle at 38% 26%, #fff8d7 0, #efd292 54%, #c38d47 100%);
    box-shadow: inset 0 0 0 2px rgba(122,89,43,.58), 0 1px 2px rgba(0,0,0,.18);
  }
  .daily-points-medal-v46::after {
    content:''; position:absolute; left:22px; right:22px; bottom:6px; height:12px; border-radius:0 0 8px 8px;
    background: linear-gradient(#bf9051, #996837); box-shadow: inset 0 1px rgba(255,255,255,.22);
  }
  .daily-points-medal-v46 > strong,
  .daily-points-medal-v46 > small,
  .daily-points-medal-v46 > span { position: relative; z-index: 1; }
  .daily-points-medal-v46 > strong { align-self: end; margin-bottom: -1px; font-size: 24px; line-height: 1; color: #4a341b; }
  .daily-points-medal-v46 > small { align-self: start; margin-top: -1px; color: #fff5dc; font-size: 8px; text-shadow: 0 1px rgba(77,58,33,.9); }
  .daily-points-medal-v46 .daily-laurel-medal { width: 12px; height: 32px; color: #94703b; }
  .daily-points-medal-v46 .daily-laurel-medal::before,
  .daily-points-medal-v46 .daily-laurel-medal::after { top: 4px; width: 4px; height: 3px; background: currentColor; }
  .daily-points-medal-v46 .daily-laurel-medal::before { left: 0; transform: rotate(-24deg); box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor; }
  .daily-points-medal-v46 .daily-laurel-medal::after { right: 0; transform: scaleX(-1) rotate(-24deg); box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor; }

  .daily-quest-list-v46 { display: grid; gap: 8px; padding: 0 12px 12px; }
  .daily-quest-row-v46 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(138px, .95fr) 54px;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 4px 6px 4px 12px;
    border: 2px solid #886744;
    border-radius: 4px;
    background: linear-gradient(180deg, #fbf8ef, #f1e7d4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 1px 1px rgba(81,59,33,.08);
  }
  .daily-quest-row-v46.is-complete { opacity: .78; }
  .daily-quest-title-v46 { min-width: 0; padding-right: 2px; }
  .daily-quest-title-v46 strong {
    display: block; color: #554430; font-size: 10.8px; line-height: 1.2; font-weight: 500;
  }
  .daily-quest-segments-v46 {
    display: flex; align-items: center; gap: 4px; padding: 4px 0;
  }
  .daily-segment-v46 {
    flex: 1 1 0; min-width: 0; height: 28px; gap: 2px; padding: 0 5px;
    border: 1px solid #b4aa97; border-radius: 9px; background: linear-gradient(#c9c3b4, #b5ae9d);
    color: #666052; box-shadow: inset 0 1px rgba(255,255,255,.44);
  }
  .daily-segment-v46.done {
    border-color: #4c8d25; background: linear-gradient(#56aa37, #32801d); color: #fff; text-shadow: 0 1px rgba(0,0,0,.18);
  }
  .daily-segment-v46 .daily-laurel { width: 10px; height: 8px; }
  .daily-segment-v46 b { font-size: 10px; font-weight: 700; }

  .daily-quest-score-v46 {
    position: relative; display:flex; align-items:center; justify-content:center;
    width: 50px; height: 40px; padding: 0; color: #7b6038; background: transparent; border-left: 0;
  }
  .daily-quest-score-v46::before,
  .daily-quest-score-v46::after {
    content:''; position:absolute; top: 7px; bottom: 7px; width: 7px; border: 2px solid currentColor; opacity: .55;
  }
  .daily-quest-score-v46::before { left: 0; border-right: 0; border-radius: 14px 0 0 14px; }
  .daily-quest-score-v46::after { right: 0; border-left: 0; border-radius: 0 14px 14px 0; }
  .daily-quest-score-v46 strong {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(131,100,60,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,241,230,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.8);
    font-size: 10px; line-height: 1; color: inherit;
  }
  .daily-quest-score-v46.done { color: #9aaa8d; }
  .daily-quest-score-v46.done strong {
    background: linear-gradient(180deg, rgba(244,250,241,.98), rgba(230,240,223,.98));
    border-color: rgba(130,159,107,.24);
  }

  .daily-quest-footer-v46 {
    display: block; padding: 6px 12px 13px; border-top: 0; background: transparent; text-align:center;
  }
  .daily-footer-claim-v46 {
    min-width: 170px; height: 42px; border: 2px solid #7c7e75; border-radius: 4px;
    background: linear-gradient(#ababa1, #8b8d84); color: #f4efe1; font-size: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12);
  }
  .daily-footer-claim-v46.is-ready {
    border-color: #667f3c; background: linear-gradient(#89a956, #6c843a); color: #fff7db;
  }
}

@media (max-width: 430px) {
  .daily-reward-track-v46 { grid-template-columns: repeat(4, minmax(0, 1fr)) 82px; }
  .daily-points-medal-v46 { width: 79px; }
  .daily-quest-row-v46 { grid-template-columns: minmax(0, 1fr) minmax(126px, .96fr) 50px; gap: 6px; }
  .daily-quest-title-v46 strong { font-size: 10.2px; }
  .daily-segment-v46 { height: 27px; padding: 0 4px; }
}

@media (max-width: 370px) {
  .daily-reward-track-v46 { grid-template-columns: repeat(4, minmax(0, 1fr)) 76px; }
  .daily-reward-track-v46 .daily-chest,
  .daily-reward-track-v46 .daily-chest img { width: 52px; height: 44px; }
  .daily-points-medal-v46 { width: 72px; height: 79px; }
  .daily-points-medal-v46 > strong { font-size: 22px; }
  .daily-quest-row-v46 { grid-template-columns: minmax(0, 1fr) minmax(116px, .98fr) 46px; }
  .daily-quest-title-v46 strong { font-size: 9.7px; }
  .daily-segment-v46 b, .daily-quest-score-v46 strong { font-size: 9px; }
}

/* ===== V1.9.8.47 · Daily Quests FINAL etalono kryptis ===== */
@media (max-width: 900px) {
  .daily-quest-board-v46 {
    background: linear-gradient(180deg,#fbfaf4 0,#f6f0e2 20%,#eee3ca 100%) !important;
    border-color:#80603d !important;
  }

  .daily-quest-head-v46 {
    padding:14px 46px 10px 14px !important;
    border-bottom:0 !important;
  }
  .daily-quest-head-v46 h1 {
    font-size:15px !important;
    font-weight:600 !important;
    color:#5b4630 !important;
  }
  .daily-quest-head-v46 p {
    font-size:9.5px !important;
    color:#796b5b !important;
  }

  .daily-reward-track-wrap-v46 { padding:4px 12px 10px !important; }
  .daily-reward-track-v46 {
    min-height:104px !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) 94px !important;
    padding:8px 7px 7px !important;
    background:linear-gradient(180deg,#8f9e9f 0 54%,#c9bda4 54% 100%) !important;
    border:2px solid #775431 !important;
  }
  .daily-reward-track-v46 .daily-track-line {
    top:59px !important;
    left:6% !important;
    right:18% !important;
    height:7px !important;
    background:#9c927e !important;
  }
  .daily-reward-track-v46 .daily-chest,
  .daily-reward-track-v46 .daily-chest img {
    width:62px !important;
    height:52px !important;
  }
  .daily-reward-track-v46 .daily-reward-node {
    position:relative !important;
  }
  .daily-reward-track-v46 .daily-reward-node::before {
    content:'' !important;
    position:absolute !important;
    top:-2px !important;
    left:50% !important;
    width:68px !important;
    height:58px !important;
    transform:translateX(-50%) !important;
    border:2px solid #8c6a39 !important;
    border-radius:50% 50% 42% 42% !important;
    background:radial-gradient(circle at 50% 42%,#e7d89e 0 56%,#7d5d30 57% 60%,transparent 61%) !important;
    z-index:-1 !important;
    filter:drop-shadow(0 2px 1px rgba(0,0,0,.18)) !important;
  }
  .daily-reward-track-v46 .daily-reward-node::after {
    content:'' !important;
    position:absolute !important;
    top:-7px !important;
    left:50% !important;
    width:9px !important;
    height:9px !important;
    transform:translateX(-50%) rotate(45deg) !important;
    border:1px solid #765329 !important;
    background:#a4bd55 !important;
    z-index:2 !important;
  }
  .daily-reward-track-v46 .daily-reward-node > strong {
    min-width:50px !important;
    margin-top:-1px !important;
    font-size:10.5px !important;
    padding:3px 7px 4px !important;
  }

  .daily-points-medal-v46 {
    width:90px !important;
    height:86px !important;
    margin-top:1px !important;
    background:transparent !important;
  }
  .daily-points-medal-v46::before {
    inset:10px 15px 15px !important;
    border-radius:48% 48% 44% 44% !important;
    background:linear-gradient(180deg,#26312e,#171f1d) !important;
    box-shadow:inset 0 0 0 2px #c69b51,0 2px 2px rgba(0,0,0,.18) !important;
  }
  .daily-points-medal-v46::after {
    left:24px !important;
    right:24px !important;
    bottom:6px !important;
    height:15px !important;
    background:linear-gradient(#b88b4b,#835b2f) !important;
  }
  .daily-points-medal-v46 > strong {
    color:#f3e6c0 !important;
    font-size:25px !important;
    text-shadow:0 1px #000 !important;
  }
  .daily-points-medal-v46 > small {
    color:#fff7db !important;
    font-size:8px !important;
  }
  .daily-points-medal-v46 .daily-laurel-medal {
    color:#c69b51 !important;
    width:14px !important;
    height:38px !important;
  }

  .daily-quest-list-v46 {
    gap:5px !important;
    padding:0 12px 10px !important;
  }
  .daily-quest-row-v46 {
    grid-template-columns:minmax(0,1fr) minmax(140px,.95fr) 58px !important;
    gap:8px !important;
    min-height:49px !important;
    padding:3px 6px 3px 11px !important;
    border:2px solid #795631 !important;
    border-radius:3px !important;
    background:
      linear-gradient(100deg,#fbf7e9 0 45%,#f0e5cb 45% 47%,#faf6e8 47% 100%) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 1px 1px rgba(64,42,19,.08) !important;
  }
  .daily-quest-title-v46 {
    text-align:left !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 4px 0 0 !important;
  }
  .daily-quest-title-v46 strong {
    text-align:left !important;
    font-size:10.4px !important;
    line-height:1.18 !important;
    font-weight:500 !important;
    color:#53412f !important;
  }
  .daily-quest-segments-v46 {
    gap:3px !important;
    padding:4px 0 !important;
  }
  .daily-segment-v46 {
    height:27px !important;
    border-radius:8px !important;
    background:linear-gradient(#c8c1b2,#aaa28f) !important;
  }
  .daily-segment-v46.done {
    background:linear-gradient(#58aa39,#2f7f1b) !important;
  }
  .daily-segment-v46 b {
    font-size:9.4px !important;
  }

  .daily-quest-score-v46 {
    width:54px !important;
    height:42px !important;
    color:#9d7238 !important;
  }
  .daily-quest-score-v46 strong {
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:9.2px !important;
    color:#5e4b36 !important;
  }
  .daily-quest-score-v46::before,
  .daily-quest-score-v46::after {
    top:2px !important;
    bottom:2px !important;
    width:20px !important;
    border:0 !important;
    border-radius:0 !important;
    opacity:1 !important;
  }
  .daily-quest-score-v46::before {
    left:1px !important;
    background:
      radial-gradient(ellipse at 90% 18%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 65% 35%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 45% 52%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 35% 70%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 45% 86%,currentColor 0 2px,transparent 2.5px);
    transform:rotate(-10deg) !important;
  }
  .daily-quest-score-v46::after {
    right:1px !important;
    background:
      radial-gradient(ellipse at 10% 18%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 35% 35%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 55% 52%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 65% 70%,currentColor 0 2px,transparent 2.5px),
      radial-gradient(ellipse at 55% 86%,currentColor 0 2px,transparent 2.5px);
    transform:rotate(10deg) !important;
  }
  .daily-quest-score-v46.done { color:#8eaa6f !important; }
  .daily-quest-score-v46.done strong { color:#6c8057 !important; }

  .daily-quest-footer-v46 {
    padding:7px 12px 13px !important;
  }
  .daily-footer-claim-v46 {
    min-width:150px !important;
    height:36px !important;
    font-size:11px !important;
  }
}

@media (max-width:430px) {
  .daily-reward-track-v46 { grid-template-columns:repeat(4,minmax(0,1fr)) 86px !important; }
  .daily-points-medal-v46 { width:86px !important; }
  .daily-quest-row-v46 {
    grid-template-columns:minmax(0,1fr) minmax(128px,.96fr) 54px !important;
    gap:6px !important;
  }
  .daily-quest-title-v46 strong { font-size:9.9px !important; }
  .daily-segment-v46 b { font-size:9px !important; }
}

/* ===== V1.9.8.48 · Daily Quests clean Travian-style rebuild ===== */
.daily-quest-board-v48 .daily-ready-banner,
.daily-quest-board-v48 .daily-footer-note,
.daily-quest-board-v48 .daily-footer-meta,
.daily-quest-board-v48 .daily-quest-kicker,
.daily-quest-board-v48 .daily-reward-node small,
.daily-quest-board-v48 .daily-quest-score .daily-laurel-score {
  display: none !important;
}
.daily-quest-board-v48 .daily-quest-title small {
  display: block !important;
}

@media (max-width: 900px) {
  .daily-quests-page {
    width: calc(100vw - 10px);
    margin: 6px auto 14px;
  }

  .daily-quest-board-v48 {
    border: 2px solid #7f5d39 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #fcfbf7 0%, #f4edde 22%, #eadfc6 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 8px 18px rgba(52,36,15,.12) !important;
  }

  .daily-quest-head-v48 {
    position: relative;
    padding: 14px 46px 10px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(124, 92, 57, .14) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.08)) !important;
  }
  .daily-quest-head-v48 h1 {
    margin: 0;
    color: #523d29 !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
  }
  .daily-quest-head-v48 p {
    margin-top: 4px !important;
    color: #786653 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  .daily-quest-head-v48 .daily-quest-close {
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    border: 2px solid #6d8541 !important;
    border-radius: 4px !important;
    background: linear-gradient(#8aad53, #6c8539) !important;
    color: #fffbe8 !important;
    font: 700 28px/1 Arial, sans-serif !important;
    text-shadow: 0 1px 1px rgba(56, 72, 17, .9) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.15) !important;
  }

  .daily-reward-track-wrap-v48 {
    padding: 8px 10px 10px !important;
  }
  .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 82px !important;
    min-height: 99px !important;
    padding: 9px 6px 8px !important;
    border: 2px solid #7a5935 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #a3b0b1 0 55%, #dacdb7 55% 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important;
  }
  .daily-reward-track-v48 .daily-track-line {
    left: 8% !important;
    right: 18% !important;
    top: 55px !important;
    height: 6px !important;
    border: 1px solid #745733 !important;
    border-radius: 999px !important;
    background: #a69b84 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.22) !important;
  }
  .daily-reward-track-v48 .daily-track-line i {
    background: linear-gradient(#7eb046, #628d32) !important;
  }
  .daily-reward-track-v48 .daily-reward-node {
    align-self: start !important;
    gap: 0 !important;
  }
  .daily-reward-track-v48 .daily-reward-node::before,
  .daily-reward-track-v48 .daily-reward-node::after {
    display: none !important;
  }
  .daily-reward-track-v48 .daily-chest {
    width: 56px !important;
    height: 46px !important;
    margin-bottom: 5px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .daily-reward-track-v48 .daily-chest img {
    width: 56px !important;
    height: 46px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)) !important;
  }
  .daily-reward-track-v48 .daily-reward-node.is-claimable .daily-chest {
    animation: dqPulseClean 1.05s infinite alternate;
  }
  .daily-reward-track-v48 .daily-chest b {
    top: -5px !important;
    right: -3px !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255,255,255,.85) !important;
    background: linear-gradient(#74b63c, #4f8f1f) !important;
    color: #fff !important;
    font-size: 12px !important;
  }
  @keyframes dqPulseClean {
    from { transform: translateY(0); }
    to { transform: translateY(-2px) scale(1.03); }
  }
  .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 44px !important;
    margin-top: -2px !important;
    padding: 4px 6px !important;
    border: 1px solid #734e2a !important;
    border-radius: 3px !important;
    background: linear-gradient(#8e6b43, #6b492a) !important;
    color: #fff0cd !important;
    font-size: 10px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16) !important;
  }
  .daily-reward-track-v48 .tier-75 > strong,
  .daily-reward-track-v48 .tier-100 > strong {
    border-color: #63574e !important;
    background: linear-gradient(#8b847d, #66584f) !important;
  }
  .daily-reward-track-v48 .daily-reward-node.is-claimed > strong {
    background: linear-gradient(#7d694e, #63513e) !important;
  }

  .daily-points-medal-v48 {
    position: relative !important;
    width: 78px !important;
    height: 78px !important;
    margin-top: 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    grid-template-columns: 13px 1fr 13px !important;
    grid-template-rows: 1fr auto !important;
    overflow: visible !important;
  }
  .daily-points-medal-v48::before {
    content: '' !important;
    position: absolute !important;
    inset: 7px 10px 12px !important;
    border-radius: 38% 38% 46% 46% !important;
    background: linear-gradient(180deg, #2e3834, #1d241f) !important;
    box-shadow: inset 0 0 0 2px #caa257, 0 2px 3px rgba(0,0,0,.16) !important;
  }
  .daily-points-medal-v48::after {
    content: '' !important;
    position: absolute !important;
    left: 21px !important;
    right: 21px !important;
    bottom: 6px !important;
    height: 12px !important;
    border-radius: 0 0 7px 7px !important;
    background: linear-gradient(#b78b4a, #855b2e) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
  }
  .daily-points-medal-v48 > strong,
  .daily-points-medal-v48 > small,
  .daily-points-medal-v48 > span {
    position: relative !important;
    z-index: 1 !important;
  }
  .daily-points-medal-v48 > strong {
    align-self: end !important;
    margin-bottom: 0 !important;
    color: #f5e7c1 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.85) !important;
  }
  .daily-points-medal-v48 > small {
    align-self: start !important;
    margin-top: 1px !important;
    color: #fff5db !important;
    font-size: 8px !important;
    text-shadow: 0 1px rgba(0,0,0,.7) !important;
  }
  .daily-points-medal-v48 .daily-laurel-medal {
    width: 11px !important;
    height: 31px !important;
    color: #c79c52 !important;
  }
  .daily-points-medal-v48 .daily-laurel-medal::before,
  .daily-points-medal-v48 .daily-laurel-medal::after {
    top: 4px !important;
    width: 4px !important;
    height: 3px !important;
    background: currentColor !important;
  }
  .daily-points-medal-v48 .daily-laurel-medal::before {
    left: 0 !important;
    transform: rotate(-24deg) !important;
    box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor !important;
  }
  .daily-points-medal-v48 .daily-laurel-medal::after {
    right: 0 !important;
    transform: scaleX(-1) rotate(-24deg) !important;
    box-shadow: 2px 4px 0 currentColor, 3px 8px 0 currentColor, 4px 12px 0 currentColor, 3px 16px 0 currentColor !important;
  }

  .daily-quest-list-v48 {
    display: grid !important;
    gap: 6px !important;
    padding: 0 10px 10px !important;
  }
  .daily-quest-row-v48 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(126px, .95fr) 54px !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 56px !important;
    padding: 4px 7px 4px 11px !important;
    border: 2px solid #805d37 !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #fbf7eb 0 52%, #efe4cb 52% 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 1px 1px rgba(67,45,19,.08) !important;
  }
  .daily-quest-row-v48.is-complete {
    opacity: .8 !important;
  }
  .daily-quest-title-v48 {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  .daily-quest-title-v48 strong {
    display: block !important;
    color: #55422e !important;
    font-size: 10.6px !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  .daily-quest-title-v48 small {
    display: block !important;
    color: #917a61 !important;
    font-size: 8.2px !important;
    line-height: 1.15 !important;
  }
  .daily-quest-segments-v48 {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }
  .daily-segment-v48 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 27px !important;
    gap: 2px !important;
    padding: 0 5px !important;
    border: 1px solid #b2a890 !important;
    border-radius: 8px !important;
    background: linear-gradient(#d1cabd, #b7af9d) !important;
    color: #6d6557 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.48) !important;
  }
  .daily-segment-v48.done {
    border-color: #4f8926 !important;
    background: linear-gradient(#5dac3d, #33821e) !important;
    color: #fff !important;
    text-shadow: 0 1px rgba(0,0,0,.2) !important;
  }
  .daily-segment-v48 .daily-laurel {
    width: 10px !important;
    height: 8px !important;
  }
  .daily-segment-v48 b {
    font-size: 9.6px !important;
    font-weight: 700 !important;
  }

  .daily-quest-score-v48 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 40px !important;
    padding: 0 !important;
    color: #977140 !important;
    background: transparent !important;
    border-left: 0 !important;
  }
  .daily-quest-score-v48::before,
  .daily-quest-score-v48::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    bottom: 3px !important;
    width: 16px !important;
    opacity: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .daily-quest-score-v48::before {
    left: 0 !important;
    background:
      radial-gradient(ellipse at 90% 18%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 66% 36%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 48% 55%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 37% 74%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 46% 90%, currentColor 0 2px, transparent 2.5px) !important;
    transform: rotate(-9deg) !important;
  }
  .daily-quest-score-v48::after {
    right: 0 !important;
    background:
      radial-gradient(ellipse at 10% 18%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 34% 36%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 52% 55%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 63% 74%, currentColor 0 2px, transparent 2.5px),
      radial-gradient(ellipse at 54% 90%, currentColor 0 2px, transparent 2.5px) !important;
    transform: rotate(9deg) !important;
  }
  .daily-quest-score-v48 strong {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #5e4b36 !important;
    font-size: 9.1px !important;
    line-height: 1 !important;
  }
  .daily-quest-score-v48.done {
    color: #87a167 !important;
  }
  .daily-quest-score-v48.done strong {
    color: #698050 !important;
  }

  .daily-quest-footer-v48 {
    display: block !important;
    padding: 8px 10px 12px !important;
    border-top: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }
  .daily-footer-claim-v48 {
    min-width: 170px !important;
    height: 38px !important;
    border: 2px solid #7e8076 !important;
    border-radius: 4px !important;
    background: linear-gradient(#acab9f, #8c8d83) !important;
    color: #f5f1e4 !important;
    font-size: 11px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12) !important;
  }
  .daily-footer-claim-v48.is-ready {
    border-color: #69803f !important;
    background: linear-gradient(#8caf56, #6f843d) !important;
    color: #fff8dc !important;
  }
}

@media (max-width: 430px) {
  .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 78px !important;
  }
  .daily-points-medal-v48 {
    width: 74px !important;
    height: 76px !important;
  }
  .daily-points-medal-v48 > strong {
    font-size: 22px !important;
  }
  .daily-quest-row-v48 {
    grid-template-columns: minmax(0, 1fr) minmax(118px, .96fr) 50px !important;
    gap: 6px !important;
  }
  .daily-quest-title-v48 strong {
    font-size: 10.1px !important;
  }
  .daily-segment-v48 b,
  .daily-quest-score-v48 strong {
    font-size: 8.7px !important;
  }
}

@media (max-width: 370px) {
  .daily-reward-track-v48 .daily-chest,
  .daily-reward-track-v48 .daily-chest img {
    width: 52px !important;
    height: 42px !important;
  }
  .daily-quest-row-v48 {
    grid-template-columns: minmax(0, 1fr) minmax(110px, .98fr) 46px !important;
  }
  .daily-quest-title-v48 strong {
    font-size: 9.6px !important;
  }
  .daily-quest-title-v48 small {
    font-size: 7.8px !important;
  }
  .daily-segment-v48 {
    height: 26px !important;
    padding: 0 4px !important;
  }
}

/* ===== V1.9.8.49 · Daily Quests single-screen compact mobile ===== */
@media (max-width: 900px) {
  body.game-route-daily-quests .daily-quests-page {
    width: calc(100vw - 8px) !important;
    margin: 4px auto 8px !important;
  }

  body.game-route-daily-quests .daily-quest-head-v48 {
    padding: 10px 40px 7px 12px !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 h1 {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 p {
    margin-top: 3px !important;
    font-size: 8.8px !important;
    line-height: 1.15 !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 .daily-quest-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 26px !important;
  }

  body.game-route-daily-quests .daily-reward-track-wrap-v48 {
    padding: 6px 8px 8px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 70px !important;
    min-height: 80px !important;
    padding: 7px 4px 5px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-track-line {
    top: 43px !important;
    left: 8% !important;
    right: 15% !important;
    height: 5px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 46px !important;
    height: 37px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest b {
    top: -4px !important;
    right: -3px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 38px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 {
    width: 66px !important;
    height: 68px !important;
    margin-top: 2px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48::before {
    inset: 6px 9px 11px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48::after {
    left: 17px !important;
    right: 17px !important;
    bottom: 5px !important;
    height: 10px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > strong {
    font-size: 20px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > small {
    font-size: 7px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 .daily-laurel-medal {
    width: 9px !important;
    height: 27px !important;
  }

  body.game-route-daily-quests .daily-quest-list-v48 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 0 8px 8px !important;
  }
  body.game-route-daily-quests .daily-quest-row-v48 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    min-height: 68px !important;
    padding: 7px 7px 6px 8px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 {
    padding-right: 26px !important;
    gap: 2px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 strong {
    font-size: 8.9px !important;
    line-height: 1.12 !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 small {
    font-size: 7.3px !important;
    line-height: 1.05 !important;
  }
  body.game-route-daily-quests .daily-quest-segments-v48 {
    gap: 3px !important;
    padding: 0 !important;
  }
  body.game-route-daily-quests .daily-segment-v48 {
    height: 21px !important;
    padding: 0 3px !important;
    border-radius: 7px !important;
  }
  body.game-route-daily-quests .daily-segment-v48 .daily-laurel {
    width: 8px !important;
    height: 6px !important;
  }
  body.game-route-daily-quests .daily-segment-v48 b {
    font-size: 7.9px !important;
  }

  body.game-route-daily-quests .daily-quest-score-v48 {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: auto !important;
    height: auto !important;
    color: #7b6341 !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48::before,
  body.game-route-daily-quests .daily-quest-score-v48::after {
    display: none !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48 strong {
    font-size: 8px !important;
    line-height: 1 !important;
    color: #6a543b !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48.done strong {
    color: #65804a !important;
  }

  body.game-route-daily-quests .daily-quest-footer-v48 {
    padding: 6px 8px 10px !important;
  }
  body.game-route-daily-quests .daily-footer-claim-v48 {
    min-width: 148px !important;
    height: 34px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 430px) {
  body.game-route-daily-quests .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 64px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 42px !important;
    height: 34px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 {
    width: 60px !important;
    height: 64px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > strong {
    font-size: 18px !important;
  }
  body.game-route-daily-quests .daily-quest-row-v48 {
    min-height: 64px !important;
    padding: 6px 6px 5px 7px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 strong {
    font-size: 8.4px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 small,
  body.game-route-daily-quests .daily-segment-v48 b,
  body.game-route-daily-quests .daily-quest-score-v48 strong {
    font-size: 7px !important;
  }
}

@media (max-width: 370px) {
  body.game-route-daily-quests .daily-quest-list-v48 {
    gap: 4px !important;
  }
  body.game-route-daily-quests .daily-quest-row-v48 {
    min-height: 60px !important;
  }
  body.game-route-daily-quests .daily-segment-v48 {
    height: 19px !important;
  }
}

/* ===== V1.9.8.51 · Daily Quests final polish ===== */
@media (max-width: 900px) {
  body.game-route-daily-quests .daily-quest-head-v48 {
    padding-left: 14px !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 h1 {
    font-size: 15px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 {
    min-height: 84px !important;
    padding-top: 6px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest {
    width: 50px !important;
    height: 40px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 50px !important;
    height: 40px !important;
    display: block !important;
    object-fit: contain !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 40px !important;
    font-size: 9.2px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 {
    width: 64px !important;
    height: 66px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > strong {
    font-size: 19px !important;
  }
  body.game-route-daily-quests .daily-quest-row-v48 {
    border-radius: 5px !important;
  }
}

@media (max-width: 430px) {
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 46px !important;
    height: 37px !important;
  }
}

/* ===== V1.9.8.52 · Daily Quests no-scroll clean final ===== */
@media (max-width: 900px) {
  body.game-route-daily-quests {
    overflow: hidden !important;
  }
  body.game-route-daily-quests .game-shell {
    display: block !important;
    height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  body.game-route-daily-quests .game-content {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)) !important;
    padding: 4px 6px 2px !important;
    overflow: hidden !important;
  }
  body.game-route-daily-quests .game-content > section,
  body.game-route-daily-quests .game-content > .paper-panel,
  body.game-route-daily-quests .game-content > .card {
    margin: 0 !important;
  }
  body.game-route-daily-quests .daily-quests-page {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
  }
  body.game-route-daily-quests .daily-quest-board-v48 {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 {
    flex: 0 0 auto !important;
    padding: 8px 38px 5px 12px !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 h1 {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  body.game-route-daily-quests .daily-quest-head-v48 p {
    margin-top: 2px !important;
    font-size: 8.2px !important;
    line-height: 1.08 !important;
  }
  body.game-route-daily-quests .daily-reward-track-wrap-v48 {
    flex: 0 0 auto !important;
    padding: 5px 8px 6px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 {
    min-height: 74px !important;
    padding: 5px 4px 4px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 58px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-track-line {
    top: 39px !important;
    height: 4px !important;
    left: 9% !important;
    right: 14% !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 38px !important;
    height: 30px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 34px !important;
    padding: 2px 4px !important;
    font-size: 8px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 {
    width: 54px !important;
    height: 58px !important;
    margin-top: 1px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48::before {
    inset: 6px 8px 10px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48::after {
    left: 14px !important;
    right: 14px !important;
    height: 8px !important;
    bottom: 5px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > strong {
    font-size: 16px !important;
  }
  body.game-route-daily-quests .daily-points-medal-v48 > small {
    font-size: 6px !important;
  }

  body.game-route-daily-quests .daily-quest-list-v48 {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 0 8px 6px !important;
    overflow: hidden !important;
    align-content: start !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }
  body.game-route-daily-quests .daily-quest-row-v48 {
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 6px 5px 7px !important;
    gap: 3px !important;
    border-width: 2px !important;
    overflow: hidden !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 {
    gap: 1px !important;
    padding-right: 26px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 strong {
    font-size: 7.9px !important;
    line-height: 1.08 !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 small {
    font-size: 6.4px !important;
    line-height: 1.05 !important;
  }
  body.game-route-daily-quests .daily-quest-segments-v48 {
    gap: 2px !important;
  }
  body.game-route-daily-quests .daily-segment-v48 {
    height: 18px !important;
    padding: 0 2px !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }
  body.game-route-daily-quests .daily-segment-v48 .daily-laurel,
  body.game-route-daily-quests .daily-points-medal-v48 .daily-laurel-medal,
  body.game-route-daily-quests .daily-score-wreath {
    display: none !important;
  }
  body.game-route-daily-quests .daily-segment-v48 b {
    font-size: 7.2px !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48 {
    top: 5px !important;
    right: 6px !important;
    width: auto !important;
    height: auto !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48::before,
  body.game-route-daily-quests .daily-quest-score-v48::after {
    display: none !important;
    content: none !important;
  }
  body.game-route-daily-quests .daily-quest-score-v48 strong {
    font-size: 7px !important;
    color: #6c563d !important;
  }

  body.game-route-daily-quests .daily-quest-footer-v48 {
    flex: 0 0 auto !important;
    padding: 4px 8px 6px !important;
  }
  body.game-route-daily-quests .daily-footer-claim-v48 {
    min-width: 142px !important;
    height: 30px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 430px) {
  body.game-route-daily-quests .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 54px !important;
  }
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-route-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 34px !important;
    height: 27px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 strong {
    font-size: 7.4px !important;
  }
  body.game-route-daily-quests .daily-quest-title-v48 small,
  body.game-route-daily-quests .daily-segment-v48 b,
  body.game-route-daily-quests .daily-quest-score-v48 strong {
    font-size: 6.5px !important;
  }
}

/* ===== V1.9.8.52b · Apply Daily Quests fit rules to actual route class ===== */
@media (max-width: 900px) {
  body.game-path-daily-quests {
    overflow: hidden !important;
  }
  body.game-path-daily-quests .game-shell {
    display: block !important;
    height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .game-content {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - var(--game-header-height) - var(--game-bottom-nav-height) - env(safe-area-inset-bottom)) !important;
    padding: 4px 6px 2px !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-quests-page {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
  }
  body.game-path-daily-quests .daily-quest-board-v48 {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 {
    flex: 0 0 auto !important;
    padding: 8px 38px 5px 12px !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 h1 {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 p {
    margin-top: 2px !important;
    font-size: 8.2px !important;
    line-height: 1.08 !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 .daily-quest-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 26px !important;
  }
  body.game-path-daily-quests .daily-reward-track-wrap-v48 {
    flex: 0 0 auto !important;
    padding: 5px 8px 6px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 {
    min-height: 74px !important;
    padding: 5px 4px 4px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 58px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-track-line {
    top: 39px !important;
    height: 4px !important;
    left: 9% !important;
    right: 14% !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 38px !important;
    height: 30px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 34px !important;
    padding: 2px 4px !important;
    font-size: 8px !important;
  }
  body.game-path-daily-quests .daily-points-medal-v48 {
    width: 54px !important;
    height: 58px !important;
    margin-top: 1px !important;
  }
  body.game-path-daily-quests .daily-points-medal-v48 > strong {
    font-size: 16px !important;
  }
  body.game-path-daily-quests .daily-points-medal-v48 > small {
    font-size: 6px !important;
  }
  body.game-path-daily-quests .daily-points-medal-v48 .daily-laurel-medal,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest b,
  body.game-path-daily-quests .daily-segment-v48 .daily-laurel,
  body.game-path-daily-quests .daily-score-wreath {
    display: none !important;
  }
  body.game-path-daily-quests .daily-quest-list-v48 {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 0 8px 6px !important;
    overflow: hidden !important;
    align-content: start !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }
  body.game-path-daily-quests .daily-quest-row-v48 {
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 6px 5px 7px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 {
    gap: 1px !important;
    padding-right: 26px !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 strong {
    font-size: 7.9px !important;
    line-height: 1.08 !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 small {
    font-size: 6.4px !important;
    line-height: 1.05 !important;
  }
  body.game-path-daily-quests .daily-quest-segments-v48 {
    gap: 2px !important;
  }
  body.game-path-daily-quests .daily-segment-v48 {
    height: 18px !important;
    padding: 0 2px !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }
  body.game-path-daily-quests .daily-segment-v48 b {
    font-size: 7.2px !important;
  }
  body.game-path-daily-quests .daily-quest-score-v48 {
    top: 5px !important;
    right: 6px !important;
    width: auto !important;
    height: auto !important;
  }
  body.game-path-daily-quests .daily-quest-score-v48::before,
  body.game-path-daily-quests .daily-quest-score-v48::after {
    display: none !important;
    content: none !important;
  }
  body.game-path-daily-quests .daily-quest-score-v48 strong {
    font-size: 7px !important;
    color: #6c563d !important;
  }
  body.game-path-daily-quests .daily-quest-footer-v48 {
    flex: 0 0 auto !important;
    padding: 4px 8px 6px !important;
  }
  body.game-path-daily-quests .daily-footer-claim-v48 {
    min-width: 142px !important;
    height: 30px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 430px) {
  body.game-path-daily-quests .daily-reward-track-v48 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 54px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 34px !important;
    height: 27px !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 strong {
    font-size: 7.4px !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 small,
  body.game-path-daily-quests .daily-segment-v48 b,
  body.game-path-daily-quests .daily-quest-score-v48 strong {
    font-size: 6.5px !important;
  }
}

/* ===== V1.9.8.53 · Daily Quests fixed viewport + clean score ===== */
@media (max-width: 900px) {
  body.game-path-daily-quests {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.game-path-daily-quests .game-shell {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.game-path-daily-quests .game-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 6px 3px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-path-daily-quests .daily-quests-page,
  body.game-path-daily-quests .daily-quest-board-v48 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-path-daily-quests .daily-quest-board-v48 {
    display: flex !important;
    flex-direction: column !important;
  }

  body.game-path-daily-quests .daily-quest-head-v48 {
    flex: 0 0 auto !important;
    padding: 7px 38px 5px 12px !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 h1 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 p {
    margin: 2px 0 0 !important;
    font-size: 8px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.game-path-daily-quests .daily-quest-head-v48 .daily-quest-close {
    top: 7px !important;
    right: 7px !important;
    width: 31px !important;
    height: 31px !important;
    font-size: 25px !important;
  }

  body.game-path-daily-quests .daily-reward-track-wrap-v48 {
    flex: 0 0 auto !important;
    padding: 4px 8px 5px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 {
    min-height: 68px !important;
    padding: 4px 4px 3px !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) 58px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-track-line {
    top: 36px !important;
    left: 9% !important;
    right: 13% !important;
    height: 4px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 35px !important;
    height: 28px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest {
    margin-bottom: 3px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest b,
  body.game-path-daily-quests .daily-reward-node::before,
  body.game-path-daily-quests .daily-reward-node::after {
    display: none !important;
    content: none !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 32px !important;
    margin-top: 0 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-size: 7.7px !important;
    line-height: 1 !important;
  }

  body.game-path-daily-quests .daily-points-total-v53 {
    position: relative !important;
    display: flex !important;
    width: 54px !important;
    height: 48px !important;
    min-width: 54px !important;
    margin: 3px 0 0 !important;
    padding: 4px 3px 3px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border: 2px solid #8f6d3c !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg,#f1d99d,#c99c53) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.46),0 1px 2px rgba(73,47,18,.18) !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-points-total-v53::before,
  body.game-path-daily-quests .daily-points-total-v53::after,
  body.game-path-daily-quests .daily-points-total-v53 .daily-laurel-medal {
    display: none !important;
    content: none !important;
  }
  body.game-path-daily-quests .daily-points-total-v53 > strong {
    position: static !important;
    margin: 0 !important;
    color: #50391f !important;
    font-family: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }
  body.game-path-daily-quests .daily-points-total-v53 > small {
    position: static !important;
    margin: 0 !important;
    color: #6b4f2b !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  body.game-path-daily-quests .daily-quest-list-v48 {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: repeat(var(--daily-quest-rows),minmax(0,1fr)) !important;
    grid-auto-rows: unset !important;
    gap: 3px !important;
    padding: 0 8px 4px !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  body.game-path-daily-quests .daily-quest-row-v48 {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px 5px 4px 6px !important;
    gap: 2px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 {
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 1px !important;
    padding-right: 24px !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 strong {
    max-height: 18px !important;
    overflow: hidden !important;
    color: #51422f !important;
    font-size: 7.5px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
  }
  body.game-path-daily-quests .daily-quest-title-v48 small {
    margin: 0 !important;
    color: #95846f !important;
    font-size: 6.1px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.game-path-daily-quests .daily-quest-segments-v48 {
    min-height: 0 !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  body.game-path-daily-quests .daily-segment-v48 {
    height: 16px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    gap: 0 !important;
    border-radius: 5px !important;
  }
  body.game-path-daily-quests .daily-segment-v48 .daily-laurel,
  body.game-path-daily-quests .daily-score-wreath,
  body.game-path-daily-quests .daily-quest-score-v48::before,
  body.game-path-daily-quests .daily-quest-score-v48::after {
    display: none !important;
    content: none !important;
  }
  body.game-path-daily-quests .daily-segment-v48 b {
    font-size: 6.7px !important;
    line-height: 1 !important;
  }
  body.game-path-daily-quests .daily-quest-score-v48 {
    position: absolute !important;
    top: 5px !important;
    right: 6px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
  body.game-path-daily-quests .daily-quest-score-v48 strong {
    color: #6b563e !important;
    font-size: 6.6px !important;
    line-height: 1 !important;
  }

  body.game-path-daily-quests .daily-quest-footer-v48 {
    flex: 0 0 auto !important;
    padding: 3px 8px 5px !important;
  }
  body.game-path-daily-quests .daily-footer-claim-v48 {
    min-width: 136px !important;
    height: 27px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 430px) {
  body.game-path-daily-quests .daily-quest-head-v48 h1 { font-size: 13px !important; }
  body.game-path-daily-quests .daily-quest-head-v48 p { font-size: 7.6px !important; }
  body.game-path-daily-quests .daily-reward-track-v48 { grid-template-columns: repeat(4,minmax(0,1fr)) 54px !important; }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest img { width: 32px !important; height: 25px !important; }
  body.game-path-daily-quests .daily-points-total-v53 { width: 50px !important; min-width: 50px !important; height: 45px !important; }
  body.game-path-daily-quests .daily-points-total-v53 > strong { font-size: 16px !important; }
  body.game-path-daily-quests .daily-quest-title-v48 strong { font-size: 7.1px !important; }
  body.game-path-daily-quests .daily-quest-title-v48 small,
  body.game-path-daily-quests .daily-segment-v48 b,
  body.game-path-daily-quests .daily-quest-score-v48 strong { font-size: 5.9px !important; }
  body.game-path-daily-quests .daily-segment-v48 { height: 15px !important; }
}

/* ===== V1.9.8.55 · Daily Quests reward clarity + exact claim state ===== */
@media (max-width: 900px) {
  body.game-path-daily-quests .daily-chest::after,
  body.game-path-daily-quests .daily-chest::before,
  body.game-path-daily-quests .daily-reward-node::before,
  body.game-path-daily-quests .daily-reward-node::after {
    display: none !important;
    content: none !important;
  }

  body.game-path-daily-quests .daily-reward-track-v48 {
    min-height: 84px !important;
    padding: 4px 4px 3px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-track-line {
    top: 35px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-reward-node {
    gap: 0 !important;
    filter: none !important;
    opacity: 1 !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest,
  body.game-path-daily-quests .daily-reward-track-v48 .daily-chest img {
    width: 35px !important;
    height: 28px !important;
  }
  body.game-path-daily-quests .daily-reward-track-v48 .daily-reward-node > strong {
    min-width: 31px !important;
    margin-top: 0 !important;
    padding: 2px 4px !important;
    font-size: 7.5px !important;
  }

  body.game-path-daily-quests .daily-reward-preview {
    display: block !important;
    width: calc(100% - 4px) !important;
    max-width: 84px !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    color: #514532 !important;
    font-size: 6.3px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.game-path-daily-quests .daily-reward-state {
    display: block !important;
    width: 100% !important;
    margin-top: 1px !important;
    color: #887967 !important;
    font-size: 5.7px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-claimable .daily-reward-state {
    color: #4f7c2a !important;
    font-weight: 800 !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-claimed .daily-reward-state {
    color: #6f644f !important;
    font-weight: 700 !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-claimed .daily-chest img {
    opacity: .66 !important;
    filter: grayscale(.22) saturate(.78) !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-locked .daily-chest img {
    opacity: .82 !important;
    filter: saturate(.72) !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-claimable .daily-chest {
    animation: none !important;
  }
  body.game-path-daily-quests .daily-reward-node.is-claimable .daily-chest img {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 0 2px rgba(105,145,55,.35)) !important;
  }

  body.game-path-daily-quests .daily-points-total-v55 {
    position: relative !important;
    display: flex !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 58px !important;
    margin: 2px 0 0 !important;
    padding: 5px 3px 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border: 1px solid #8c7350 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg,#fbf6e9,#e7d9bd) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65),0 1px 2px rgba(71,51,26,.12) !important;
    overflow: hidden !important;
  }
  body.game-path-daily-quests .daily-points-total-v55::before,
  body.game-path-daily-quests .daily-points-total-v55::after {
    display: none !important;
    content: none !important;
  }
  body.game-path-daily-quests .daily-points-total-v55 > strong {
    position: static !important;
    margin: 0 !important;
    color: #4d3f2d !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }
  body.game-path-daily-quests .daily-points-total-v55 > small {
    position: static !important;
    margin: 0 !important;
    color: #75654f !important;
    font-size: 6.3px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }
  body.game-path-daily-quests .daily-points-total-v55 > span {
    position: static !important;
    display: block !important;
    margin-top: 2px !important;
    color: #8a765b !important;
    font-size: 5.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  body.game-path-daily-quests .daily-quest-list-v48 {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  body.game-path-daily-quests .daily-footer-claim-v48.is-ready {
    min-width: 154px !important;
  }
}

@media (max-width: 430px) {
  body.game-path-daily-quests .daily-reward-track-v48 {
    grid-template-columns: repeat(4,minmax(0,1fr)) 55px !important;
  }
  body.game-path-daily-quests .daily-reward-preview {
    max-width: 70px !important;
    font-size: 5.8px !important;
  }
  body.game-path-daily-quests .daily-reward-state {
    font-size: 5.2px !important;
  }
  body.game-path-daily-quests .daily-points-total-v55 {
    width: 52px !important;
    min-width: 52px !important;
    height: 56px !important;
  }
  body.game-path-daily-quests .daily-points-total-v55 > strong {
    font-size: 16px !important;
  }
}

/* Travia 1.9.8.58 — pilnas pastatų aprašymų, bonusų ir reikalavimų langas. */
.building-title-level {
  display: inline-block;
  margin-left: 5px;
  color: #efaa45;
  font-family: inherit;
  font-size: .72em;
  white-space: nowrap;
}

.building-description-box,
.building-bonus-panel {
  width: 100%;
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid rgba(111, 135, 69, .38);
  border-radius: 7px;
  background: rgba(255, 252, 242, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .78);
}

.building-description-box h3,
.building-bonus-panel h3 {
  margin: 0;
  padding: 7px 10px;
  color: #4f6b35;
  background: linear-gradient(90deg, #dce8cf, #eef2e7);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.building-description-box p {
  padding: 10px;
  color: #625746;
  font-size: 11px;
  line-height: 1.5;
}

.building-effect-table-wrap { width: 100%; }
.building-effect-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #5e513e;
  background: rgba(255, 255, 255, .28);
  font-size: 9px;
}
.building-effect-table th,
.building-effect-table td {
  padding: 8px 7px;
  border-top: 1px solid rgba(118, 96, 62, .17);
  text-align: center;
  vertical-align: middle;
}
.building-effect-table thead th {
  border-top: 0;
  color: #7a6a53;
  background: rgba(226, 216, 194, .42);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}
.building-effect-table th:first-child {
  width: 37%;
  color: #4d402f;
  text-align: left;
}
.building-effect-table tbody th { font-size: 9px; line-height: 1.3; }
.building-effect-delta { color: #527533; font-weight: 900; }

.building-next-level-title {
  margin-top: 16px !important;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(118, 92, 55, .2);
}

.building-effect-preview {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 6px;
  margin-top: 7px;
  padding: 6px 8px;
  border-left: 3px solid #75954b;
  color: #5e513e;
  background: rgba(222, 234, 207, .55);
  font-size: 9px;
  line-height: 1.35;
}
.building-effect-preview strong {
  flex: 0 0 auto;
  color: #4f6f31;
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.building-requirement-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.building-requirement-list span,
.building-no-requirements {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid #a8bd83;
  border-radius: 10px;
  color: #506a35;
  background: #e9f0dd;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.15;
}
.building-requirement-list span.is-missing {
  border-color: #cf9a83;
  color: #9d4936;
  background: #f4dfd5;
}
.building-no-requirements { margin-top: 6px; color: #766a57; border-color: #d3c5aa; background: #f5edde; }

.building-time,
.building-gold-cost { flex-wrap: nowrap; }
.building-time small,
.building-gold-cost small {
  color: #7b6e5c;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.building-gold-cost small { color: #8b651f; }

@media (min-width: 781px) {
  .building-offer { min-height: 235px; }
}

@media (max-width: 780px) {
  .building-title-level { display: block; margin: 3px 0 0; font-size: .55em; }
  .building-description-box,
  .building-bonus-panel { margin-top: 8px; }
  .building-description-box h3,
  .building-bonus-panel h3 { padding: 6px 8px; font-size: 8px; }
  .building-description-box p { padding: 8px; font-size: 9px; line-height: 1.45; }

  .building-effect-table thead { display: none; }
  .building-effect-table,
  .building-effect-table tbody,
  .building-effect-table tr { display: block; width: 100%; }
  .building-effect-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 7px;
    border-top: 1px solid rgba(118, 96, 62, .17);
  }
  .building-effect-table tbody tr:first-child { border-top: 0; }
  .building-effect-table th,
  .building-effect-table td { display: block; width: auto; padding: 3px 4px; border: 0; }
  .building-effect-table th:first-child {
    width: auto;
    grid-column: 1 / -1;
    padding-bottom: 5px;
    text-align: left;
  }
  .building-effect-table td::before {
    display: block;
    margin-bottom: 2px;
    color: #8b7a61;
    content: attr(data-label);
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .building-effect-preview { gap: 4px; margin-top: 5px; padding: 5px 6px; font-size: 7.5px; }
  .building-effect-preview strong { font-size: 6.5px; }
  .building-requirement-list { gap: 3px; margin-top: 4px; }
  .building-requirement-list span,
  .building-no-requirements { min-height: 17px; padding: 2px 5px; font-size: 6.5px; }
  .building-time small,
  .building-gold-cost small { font-size: 6px; }
}

/* V1.9.8.58 final cascade guard. */
body.game-path-daily-quests .game-shell { display: block !important; width: 100% !important; max-width: none !important; }
body.game-path-daily-quests .game-sidebar { display: none !important; }
body.game-path-daily-quests .game-content { width: 100% !important; max-width: none !important; padding: 18px 12px 100px !important; }
body.game-route-city .city-map-slot.is-built {
  width: clamp(56px,5.8vw,82px) !important;
  transform: translate(-50%,-62%) scale(var(--slot-scale,1)) !important;
}
body.game-route-city .city-map-slot.is-constructing {
  width: clamp(61px,6.2vw,88px) !important;
  transform: translate(-50%,-62%) scale(var(--slot-scale,1)) !important;
}
body.game-route-city .city-map-slot.is-empty {
  width: clamp(22px,1.9vw,28px) !important;
  aspect-ratio: 1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 42% 35%,rgba(123,157,61,.72),rgba(58,101,30,.62) 68%,rgba(42,75,24,.25)) !important;
}
body.game-route-city .city-map-slot.is-empty i { display: none !important; }
body.game-route-city .city-map-slot.is-empty::before,
body.game-route-city .city-map-slot.is-empty::after { content: none !important; }
body.game-route-city .city-premium-hud { display: none !important; }

@media (max-width: 780px) {
  body.game-path-daily-quests .game-content { padding: 0 0 calc(var(--game-bottom-nav-height) + env(safe-area-inset-bottom)) !important; }
  body.game-route-city .city-map-slot.is-built { width: 10.4% !important; }
  body.game-route-city .city-map-slot.is-constructing { width: 11.2% !important; }
  body.game-route-city .city-map-slot.is-empty { width: 4.3% !important; min-width: 18px !important; }
}

.building-instant-form-v58 { margin-top: 8px; }
.building-instant-form-v58 button {
  width: 100%;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid #9c7924;
  border-radius: 7px;
  color: #503b17;
  background: linear-gradient(#fff6ad,#dfbd4e);
  font-size: 10px;
  font-weight: 850;
}
.building-instant-form-v58 button:disabled { opacity: .5; cursor: not-allowed; }

.storage-settings-preview { display:grid; gap:8px; padding:12px; margin-top:14px; border:1px solid #b6bba3; border-radius:4px; background:#eef1e5; font-size:14px; }
.storage-settings-preview > span { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; }
.storage-settings-preview b { font-variant-numeric:tabular-nums; color:#46632f; }
.storage-settings-preview.is-invalid b { color:#9d3428; }