/* Conquer's shared village UI. Authoritative appearance layer; layout stays in each feature.
   Reference: docs/UI_STYLE_GUIDE.md and assets/art/village2.png.
   Palette A separates violet application chrome from semantic game colours. */
:root {
  color-scheme:light;
  --ui-paper:#e9dfcf; --ui-card:#fbf6ec; --ui-card-light:#fffcf6;
  --ui-inset:#dfcda9; --ui-disabled:#ddd2c0;
  --ui-ink:#443549; --ui-muted:#5f5261;
  --ui-line:#c7b692; --ui-frame:#756080;
  --ui-primary:#5c4270; --ui-primary-light:#80658f; --ui-primary-dark:#443052;
  --ui-blue:#2a72c9; --ui-blue-light:#438fe4; --ui-blue-dark:#24559c;
  --ui-green:#586d50; --ui-green-dark:#3f523a; --ui-green-soft:#e3eadc;
  --ui-gold:#c5a361; --ui-gold-soft:#f1e2bd; --ui-orange:#ed8a31;
  --ui-red:#b43c34; --ui-red-dark:#85342b; --ui-red-soft:#fae5d8; --ui-purple:#8c4ac4;
  --ui-radius:12px; --ui-radius-window:16px;
  --ui-font:'Conquer UI','Almendra',Georgia,serif;
  --ui-font-number:'Lora',Georgia,serif;
  --ui-shadow:0 3px 0 #4435492b,0 12px 35px #44354938;
}

/* Troop tiers: the same semantic palette for every troop type and portrait surface. */
:root {
  --troop-tier-1:#8A8D8F;
  --troop-tier-2:#8B5E3C;
  --troop-tier-3:#4F854B;
  --troop-tier-4:#367BC4;
  --troop-tier-5:#9656B7;
  --troop-tier-6:#BF4545;
  --troop-tier-7:#E58132;
  --troop-tier-8:#F0D34A;
  --troop-tier-9:#C6A04A;
  --troop-tier-10:#F1F3F5;
}
.troop-tier-frame { --troop-tier-color:var(--troop-tier-1); --troop-tier-border-width:2px; --troop-tier-border-style:solid; --troop-tier-rim:var(--ui-line); }
.troop-tier-frame[data-troop-tier="1"] { --troop-tier-color:var(--troop-tier-1); }
.troop-tier-frame[data-troop-tier="2"] { --troop-tier-color:var(--troop-tier-2); }
.troop-tier-frame[data-troop-tier="3"] { --troop-tier-color:var(--troop-tier-3); }
.troop-tier-frame[data-troop-tier="4"] { --troop-tier-color:var(--troop-tier-4); }
.troop-tier-frame[data-troop-tier="5"] { --troop-tier-color:var(--troop-tier-5); }
.troop-tier-frame[data-troop-tier="6"] { --troop-tier-color:var(--troop-tier-6); }
.troop-tier-frame[data-troop-tier="7"] { --troop-tier-color:var(--troop-tier-7); }
.troop-tier-frame[data-troop-tier="8"] { --troop-tier-color:var(--troop-tier-8); }
.troop-tier-frame[data-troop-tier="9"] { --troop-tier-color:var(--troop-tier-9); }
.troop-tier-frame[data-troop-tier="10"] { --troop-tier-color:var(--troop-tier-10); }
.troop-tier-frame[data-troop-tier="9"] { --troop-tier-border-width:4px; --troop-tier-border-style:double; --troop-tier-rim:#846323; }
.troop-tier-frame[data-troop-tier="10"] { --troop-tier-rim:#838D9B; }
body .troop-tier-frame,
body.mobile-game #game-dialog.march-dialog :is(.march-portrait,.march-selected-card).troop-tier-frame,
body.mobile-game #panel-dialog .training-school :is(.training-tier,.training-rank).troop-tier-frame {
  border-width:var(--troop-tier-border-width); border-style:var(--troop-tier-border-style); border-color:var(--troop-tier-color);
  border-radius:8px; box-shadow:0 0 0 1px var(--troop-tier-rim),inset 0 0 0 1px var(--ui-card-light);
  background:color-mix(in srgb,var(--troop-tier-color) 12%,var(--ui-card));
}
body img.troop-tier-frame { box-sizing:border-box; object-fit:contain; padding:1px; }
/* Preserve tier borders above the legacy important button/card skin. */
body.mobile-game #game-dialog.march-dialog .troop-tier-frame[data-troop-tier],
body.mobile-game #panel-dialog .training-school .troop-tier-frame[data-troop-tier],
body.mobile-game #game-dialog .combat-report .troop-tier-frame[data-troop-tier],
body.mobile-game #game-dialog .monster-report .troop-tier-frame[data-troop-tier] {
  border:var(--troop-tier-border-width) var(--troop-tier-border-style) var(--troop-tier-color)!important;
  box-shadow:0 0 0 1px var(--troop-tier-rim),inset 0 0 0 1px var(--ui-card-light)!important;
}
body .troop-tier-frame>img { object-fit:contain; mix-blend-mode:normal; }
body.mobile-game #game-dialog.march-dialog .march-portrait.troop-tier-frame>img { object-fit:contain; }
body.mobile-game #game-dialog.march-dialog .march-portrait.troop-tier-frame>span,
body .troop-tier-frame>.sr-tier,
body .troop-tier-frame>.troop-chip-tier,
body .hospital-portrait.troop-tier-frame>span {
  background:var(--ui-card-light); color:var(--ui-ink); border-color:var(--troop-tier-color); text-shadow:none;
}
body.mobile-game #game-dialog.march-dialog .march-selected-card.troop-tier-frame { position:relative; }
body.mobile-game #game-dialog.march-dialog .march-selected-card .march-card-tier { position:absolute; top:0; right:0; padding:1px 4px; border-radius:0 4px 0 5px; background:var(--ui-card-light); color:var(--ui-ink); font:700 10px/1.3 var(--ui-font-number); z-index:1; }
body.mobile-game #game-dialog.march-dialog .march-selected-card.troop-tier-frame .march-card-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .training-portrait>img { mix-blend-mode:normal; }

/* Standalone welcome, sign-in and recovery screens share the game materials. */
body.welcome {
  min-height:100dvh;margin:0;background:var(--ui-paper);color:var(--ui-ink);
  font:16px/1.5 var(--ui-font);color-scheme:light;
}
body.welcome .welcome-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.85fr);min-height:100dvh; }
body.welcome .welcome-art { position:relative;min-height:420px;overflow:hidden;background:var(--ui-inset); }
body.welcome .welcome-art>img { width:100%;height:100%;display:block;object-fit:cover; }
body.welcome .welcome-story { position:absolute;left:clamp(22px,4vw,64px);bottom:clamp(24px,6vh,72px);max-width:590px;padding:20px 24px;border:2px solid #ffffff55;border-radius:var(--ui-radius-window);background:#443052cc;color:var(--ui-card-light);box-shadow:var(--ui-shadow); }
body.welcome .welcome-story :is(h1,p) { color:inherit;margin-bottom:0;text-shadow:none; }
body.welcome .welcome-story h1 { margin-top:5px;font:700 clamp(30px,4vw,54px)/1.05 var(--ui-font); }
body.welcome .welcome-story .eyebrow { color:var(--ui-gold-soft); }
body.welcome .welcome-form { display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,76px);background:var(--ui-card);color:var(--ui-ink);border-left:3px solid var(--ui-frame);box-shadow:-8px 0 26px #44305224; }
body.welcome .welcome-form .brand { display:flex;align-items:center;gap:10px;color:var(--ui-primary);font:700 24px/1 var(--ui-font);letter-spacing:1px; }
body.welcome .welcome-form .brand small { display:block;margin-top:5px;color:var(--ui-muted);font:700 9px/1.2 var(--ui-font);letter-spacing:1px; }
body.welcome .welcome-form>.pill { align-self:flex-start;margin:26px 0 16px;background:var(--ui-gold-soft);color:var(--ui-ink);border-color:var(--ui-gold); }
body.welcome .welcome-form :is(h1,h2) { color:var(--ui-ink);font-family:var(--ui-font); }
body.welcome .welcome-form h2 { margin:0 0 12px;font-size:clamp(30px,3vw,43px);line-height:1.08; }
body.welcome .welcome-form :is(.muted,.form-note,small) { color:var(--ui-muted); }
body.welcome .auth-switch { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:24px 0 4px;padding:5px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-inset); }
body.welcome .auth-switch button { min-height:44px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ui-muted);font:700 14px/1.2 var(--ui-font); }
body.welcome .auth-switch button.active { background:var(--ui-gold-soft);border-color:var(--ui-gold);color:var(--ui-ink);box-shadow:0 2px var(--ui-gold); }
body.welcome .welcome-form label { display:block;margin:17px 0 7px;color:var(--ui-ink);font:700 13px/1.3 var(--ui-font); }
body.welcome .welcome-form :is(input,select,textarea) { width:100%;min-height:44px;margin-top:7px;padding:11px 12px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card-light);color:var(--ui-ink);font:16px/1.3 var(--ui-font);box-shadow:inset 0 2px #c7b69222; }
body.welcome .welcome-form ::placeholder { color:var(--ui-muted);opacity:.85; }
body.welcome .welcome-form .button { min-height:46px;margin-top:18px;border:1px solid var(--ui-green-dark);border-radius:9px;background:var(--ui-green);color:var(--ui-card-light);font:700 16px/1.2 var(--ui-font);box-shadow:0 3px var(--ui-green-dark); }
body.welcome .welcome-form a:not(.brand) { color:var(--ui-primary);font-weight:700; }
body.welcome .welcome-form .form-error { padding:10px 12px;border:1px solid var(--ui-red);border-radius:9px;background:var(--ui-red-soft);color:var(--ui-red); }
body.welcome :is(button,a,input,select,textarea):focus-visible { outline:3px solid var(--ui-primary);outline-offset:2px; }
@media(max-width:760px) {
  body.welcome .welcome-layout { grid-template-columns:1fr; }
  body.welcome .welcome-art { min-height:clamp(230px,38dvh,360px); }
  body.welcome .welcome-story { left:14px;right:14px;bottom:14px;padding:14px 16px; }
  body.welcome .welcome-story h1 { font-size:clamp(25px,8vw,38px); }
  body.welcome .welcome-story p { display:none; }
  body.welcome .welcome-form { padding:30px max(20px,env(safe-area-inset-right)) max(34px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-left:0;border-top:3px solid var(--ui-frame); }
}

/* Locale controls can appear on auth, game and backoffice surfaces. */
:is(body.welcome,body.mobile-game,body.admin-village) .locale-tools {
  background:var(--ui-inset);color:var(--ui-ink);border-color:var(--ui-line);
  font-family:var(--ui-font);box-shadow:0 2px #c7b69233;
}
:is(body.welcome,body.mobile-game,body.admin-village) .locale-tools :is(label,small) { color:var(--ui-ink); }
:is(body.welcome,body.mobile-game,body.admin-village) .locale-tools select {
  background:var(--ui-card-light);color:var(--ui-ink);border-color:var(--ui-line);font-family:var(--ui-font);
}
:is(body.welcome,body.mobile-game,body.admin-village) .locale-tools .locale-install .button.secondary {
  background:var(--ui-primary)!important;color:var(--ui-card-light)!important;
  border-color:var(--ui-primary-dark)!important;box-shadow:0 2px var(--ui-primary-dark)!important;
}
:is(body.welcome,body.mobile-game,body.admin-village) .locale-tools :is(select,button):focus-visible { outline-color:var(--ui-primary); }
body.mobile-game {
  --ink:var(--ui-ink); --muted:var(--ui-muted); --line:var(--ui-line);
  --paper:var(--ui-paper); --game-panel:var(--ui-paper); --game-panel-dark:var(--ui-inset);
  font-family:var(--ui-font);
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) {
  --popup-surface:var(--ui-paper); --popup-inset:var(--ui-inset); --popup-deep:var(--ui-inset);
  --popup-ink:var(--ui-ink); --popup-muted:var(--ui-muted); --popup-line:var(--ui-line);
  --popup-paper:var(--ui-card); --ink:var(--ui-ink); --muted:var(--ui-muted); --line:var(--ui-line);
  background:var(--ui-paper)!important; color:var(--ui-ink)!important;
  border:3px solid var(--ui-frame)!important; border-radius:var(--ui-radius-window)!important;
  box-shadow:var(--ui-shadow)!important; font-family:var(--ui-font)!important;
  scrollbar-color:var(--ui-line) var(--ui-paper);
}
body.mobile-game :is(#panel-dialog,#game-dialog)::backdrop { background:#44354973!important; backdrop-filter:none!important; }
body.mobile-game:has(#panel-dialog[open]) #game-dialog::backdrop { background:#4435494f!important; }
body.mobile-game :is(#panel-dialog #content,#game-dialog #dialog-content) {
  background:var(--ui-paper)!important; color:var(--ui-ink)!important;
  scrollbar-color:var(--ui-line) var(--ui-paper);
}
/* Copy inherits its surface, including coloured buttons and notices. */
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :where(div,section,article,aside,header,footer,nav,h1,h2,h3,h4,p,span,small,strong,b,em,label,dt,dd,li,summary,th,td,a):not(.beginner-guide,.beginner-guide *,.guide-welcome,.guide-welcome *,.lord-talents,.lord-talents *,.mailbox-shell,.mailbox-shell *,.mail-detail,.mail-detail *,.mail-compose,.mail-compose *,.training-school,.training-school *) {
  color:inherit!important; text-shadow:none!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(.muted,.subtle,.empty,.loot-subtitle,.trading-item-description,.treasury-status,.rt-chapter-caption) {
  color:var(--ui-muted)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(h1,h2,h3,h4) {
  font-family:var(--ui-font)!important; letter-spacing:0!important; text-transform:none!important;
}
/* One violet roof over every window. */
body.mobile-game :is(#panel-dialog .page-heading,#game-dialog .popup-heading,#game-dialog .march-command-heading,.map-overlay-heading) {
  background:var(--ui-primary)!important; color:var(--ui-card)!important;
  border-bottom:3px solid var(--ui-primary-dark)!important; box-shadow:inset 0 3px #ffffff24!important;
}
body.mobile-game :is(.page-heading,.popup-heading,.march-command-heading,.map-overlay-heading)::before,
body.mobile-game :is(.page-heading,.popup-heading,.march-command-heading,.map-overlay-heading)::after { display:none!important; }
body.mobile-game :is(#panel-dialog #page-title,#game-dialog .popup-heading h2,#game-dialog .march-command-heading h2,.map-overlay-heading h2) {
  color:var(--ui-card)!important; font-family:var(--ui-font)!important; letter-spacing:0!important;
  text-transform:none!important; text-shadow:0 1px var(--ui-primary-dark)!important;
}
body.mobile-game :is(.panel-close,#inventory-overview-button,#game-dialog>.dialog-close,.map-overlay-close,.atlas-close,.march-close) {
  background:var(--ui-card)!important; color:var(--ui-ink)!important;
  border:2px solid var(--ui-frame)!important; border-radius:10px!important;
  clip-path:none!important; box-shadow:0 2px #44354926!important; text-shadow:none!important;
}
/* Quiet parchment surfaces, with depth from brown borders rather than black gradients. */
body.mobile-game :is(#panel-dialog,#game-dialog) :is(
  .panel,.game-card,.list-row,.report,.quest-row,.achievement,.army-unit,.stat-card,.stat-box,
  .community-card,.community-mail-card,.community-message,.community-letter,.defense-body .panel,
  .progression-grid>.panel,.world-selector .panel,.research-requirement,
  .trading-card,.treasury-card,.treasury-slot,.treasury-inspector,.treasury-detail,.treasury-chest-card,
  .vip-perks,.vip-daily,.vip-level-detail,.vip-item,.inventory-inspector,.inventory-inspector-description,
  .march-target,.march-selected-card,.march-forecast,.march-army,.march-formation,
  .lok-profile-row,.lok-profile-pair>div,.lok-profile-wallet>div,.lok-profile-progress,
  .skin-option,.arena-opponent,.rally-card,.expedition-card,.boss-card,.shrine-card,.notice,.empty,
  .alliance-identity,.profile-data .detail-row,.quick-card,.help-card,.help-details,.raid-card,.objective-card
) {
  background:var(--ui-card)!important; color:var(--ui-ink)!important;
  border-color:var(--ui-line)!important; border-radius:var(--ui-radius)!important;
  box-shadow:0 2px #c7b69233!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(
  .trading-shell,.trading-scroll,.treasury-shell,.treasury-reference,.treasury-library,.treasury-chest-page,
  .inventory-shell.inventory-paged,.inventory-board,.rt-academy.rt-continuous,.rt-board,
  .community-shell,.march-layout,.hero-expedition,.boss-panel,.lok-profile,.vip-panel
) { background:var(--ui-paper)!important; color:var(--ui-ink)!important; box-shadow:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(
  .trading-summary,.trading-footer,.treasury-library-heading,.treasury-loadout,.treasury-item-stats,
  .treasury-active-bonuses,.treasury-bonus-row,.treasury-detail-heading,.treasury-chest-rewards,
  .inventory-scope-bar,.inventory-pager,.inventory-views,.inventory-inspector-controls .notice,
  .rt-academy-header,.rt-scroll-hint,.rt-search,.rt-source-count,.rt-node-art>i,
  .community-wallet>span,.community-chat-log,.defense-troop-grid label,
  .march-footer,.march-summary,.march-target-art,.army-unit-portrait,.unit-requirements,.profile-bio,
  .lok-profile-nav,.vip-progress,.vip-claimed,.vip-empty,.queue-panel,.combat-summary,.reward-row,
  .quest-reward-icons>span,.village-summary,.raid-header,.inventory-backpack .relic-slot-empty
) { background:var(--ui-inset)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; box-shadow:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(th,td) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) th { background:var(--ui-inset)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .badge { background:var(--ui-inset)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; border-radius:7px!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .badge.blue { background:var(--ui-blue)!important; color:var(--ui-card-light)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .badge.green { background:var(--ui-green-soft)!important; color:var(--ui-green-dark)!important; }
/* Tabs share shape and a warm selected state; talent branches retain their role colours. */
body.mobile-game :is(#panel-dialog,#game-dialog) :is(
  .subtabs,.army-tier-tabs,.community-tabs,.trading-tabs,.treasury-tabs,.treasury-main-tabs,
  .treasury-presets,.inventory-category-tabs,.rt-branches,.skin-category-tabs,.vip-tabs
) { background:var(--ui-inset)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(
  .button,:where(button:not(.guide-button):not(.guide-chapter):not(.talent-node-info):not(.talent-tabs button):not(.talent-button):not(.loot-tile):not(.loot-card):not(.rt-node):not(.treasury-tile):not(.treasury-slot):not(.atlas-minimap):not(.atlas-object-search button):not(.mailbox-shell button):not(.mail-detail button):not(.mail-compose button):not(.training-school button))
) {
  background:var(--ui-card)!important; color:var(--ui-ink)!important;
  border-color:var(--ui-line)!important; border-radius:9px!important;
  box-shadow:inset 0 2px #fff8,0 2px #c7b69244!important; clip-path:none!important;
  text-shadow:none!important; font-family:var(--ui-font)!important; text-transform:none!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(
  .subtab.active,.inventory-tab.active,.inventory-category-tabs .active,.inventory-scope-bar .active,
  .trading-tabs .active,.treasury-tabs .active,.treasury-main-tabs .active,.treasury-presets .active,
  .community-tabs .active,.dungeon-tabs .active,.rt-branch.is-selected,.army-tier-tabs .selected,
  .profile-nav.active,.vip-tabs [aria-pressed=true],.vip-level-picker [aria-pressed=true],
  .skin-category-tabs [aria-pressed=true],.atlas-filters [aria-pressed=true]
) { background:var(--ui-gold-soft)!important; border-color:var(--ui-gold)!important; color:var(--ui-ink)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(
  .button:where(:not(.secondary):not(.danger):not(.small)),.button.primary,.button.gold,
  .treasury-button.gold,.treasury-button.blue,.vip-button:where(:not(.secondary):not(.vip-tabs button)),.profile-contact.mail,
  .march-dispatch,.march-submit,.inventory-use-button
) { background:var(--ui-green)!important; border-color:var(--ui-green-dark)!important; color:var(--ui-card-light)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.trading-buy,.treasury-chest-card .treasury-button) {
  background:var(--ui-gold)!important; color:var(--ui-ink)!important; border-color:#aa792d!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.trading-buy.pays-gems,.hospital-crystals) { background:var(--ui-orange)!important; border-color:#b85a25!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .shop-merchant-action.pays-gems { background:var(--ui-orange)!important; border-color:#b85a25!important; color:var(--ui-card-light)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .trading-price { background:#fbf6ecaa!important; border-radius:8px!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.danger,.button.danger,.is-attack .march-attack) {
  background:var(--ui-red)!important; color:var(--ui-card-light)!important; border-color:#85342b!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(input:not([type=range]):not([type=checkbox]),select,textarea) {
  background:var(--ui-card-light)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important;
  border-radius:8px!important; box-shadow:inset 0 2px #c7b6921a!important; font-family:var(--ui-font)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) ::placeholder { color:var(--ui-muted)!important; opacity:1; }
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(button,input,select,textarea,a,summary):focus-visible {
  outline:3px solid var(--ui-primary)!important; outline-offset:2px;
}
body.mobile-game #panel-dialog .alliance-action {
  background:var(--ui-gold-soft)!important;color:var(--ui-ink)!important;
  border-color:var(--ui-gold)!important;box-shadow:inset 0 2px #fff8,0 3px #c7b69266!important;
}
body.mobile-game #panel-dialog .alliance-action-icon {
  background:var(--ui-card)!important;color:var(--ui-primary)!important;border-color:var(--ui-line)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.progress-track,.rt-level-track,.treasury-progress,.trading-countdown-track,.march-range) {
  background:var(--ui-inset)!important; border-color:var(--ui-line)!important; box-shadow:none!important; transform:none!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.progress-track>span,.rt-level-track>span,.treasury-progress>span,.trading-countdown-track>i) {
  background:var(--ui-green)!important; box-shadow:inset 0 2px #b2d68a!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.unit-locked,.treasury-slot.is-locked) {
  background:var(--ui-disabled)!important; border-color:#b4a17e!important; color:var(--ui-muted)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.requirement-met,.notice.success,.treasury-slot.is-equipped,.achievement.unlocked,.community-message.mine) {
  background:var(--ui-green-soft)!important; border-color:#72974f!important; color:var(--ui-green-dark)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.notice.error,.community-error,.community-form-error,.march-forecast.caution) {
  background:var(--ui-red-soft)!important; color:#85342b!important; border-color:#bd7865!important;
}
/* Illustrated research nodes use the shared materials, including their progress states. */
body.mobile-game #panel-dialog .rt-continuous .rt-node-art {
  background:var(--ui-card); color:var(--ui-ink); border-color:var(--ui-line);
  box-shadow:0 3px var(--ui-inset);
}
body.mobile-game #panel-dialog .rt-available .rt-node-art { border-color:var(--ui-green); }
body.mobile-game #panel-dialog .rt-locked .rt-node-art { background:var(--ui-disabled); }
body.mobile-game #panel-dialog .rt-running .rt-node-art { background:var(--ui-green-soft); border-color:var(--ui-blue); }
body.mobile-game #panel-dialog .rt-complete .rt-node-art { background:var(--ui-gold-soft); border-color:var(--ui-gold); }
/* Pair foreground and background on detail surfaces; legacy skins used light type on navy. */
body.mobile-game #game-dialog .building-identity {
  background:var(--ui-primary);color:var(--ui-card-light)!important;
  border-color:var(--ui-frame);border-left-color:var(--ui-gold);border-radius:var(--ui-radius);
  box-shadow:inset 0 1px #ffffff24;
}
body.mobile-game #game-dialog .building-identity :is(h3,.building-level-change) { color:var(--ui-card-light)!important; }
body.mobile-game #game-dialog .building-identity :is(.building-menu-label,.building-level-arrow) { color:var(--ui-gold-soft)!important; }
body.mobile-game #game-dialog .building-identity .building-level-change strong {
  background:var(--ui-gold-soft);color:var(--ui-ink)!important;border-color:var(--ui-gold);
}

/* Building and research level-up windows share the same illustrated command layout. */
body.mobile-game #game-dialog.levelup-dialog-window {
  width:min(940px,calc(100dvw - 34px))!important;
  height:min(650px,calc(100dvh - 34px))!important;
  max-height:calc(100dvh - 34px)!important;
  overflow:hidden!important;
}
body.mobile-game #game-dialog.levelup-dialog-window #dialog-content {
  display:flex;padding:0!important;overflow:hidden!important;
}
body.mobile-game #game-dialog .levelup-shell {
  display:grid;grid-template-columns:minmax(260px,.92fr) minmax(360px,1.38fr);
  grid-template-rows:minmax(0,1fr) auto;width:100%;min-width:0;min-height:0;
  background:var(--ui-paper);color:var(--ui-ink);
}
body.mobile-game #game-dialog .levelup-overview {
  display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;
  padding:20px;border-right:2px solid var(--ui-line);overflow:auto;
  background:var(--ui-card);
}
body.mobile-game #game-dialog .levelup-art {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:180px;margin-bottom:13px;padding:10px;border:2px solid var(--ui-line);
  border-radius:14px;background:var(--ui-inset);box-shadow:inset 0 2px #ffffff8f;
}
body.mobile-game #game-dialog .levelup-art>img {
  display:block;width:min(190px,80%);height:145px;object-fit:contain;
  filter:drop-shadow(0 5px 4px #44354935);
}
body.mobile-game #game-dialog .levelup-art>span:last-child {
  max-width:100%;color:var(--ui-ink)!important;font-size:18px;font-weight:800;text-align:center;
}
body.mobile-game #game-dialog .levelup-art.research-art>.rt-node-art {
  width:142px;height:142px;border:2px solid var(--ui-gold)!important;border-radius:14px!important;
  background:var(--ui-card)!important;box-shadow:0 4px var(--ui-line)!important;
}
body.mobile-game #game-dialog .levelup-art.research-art>.rt-node-art img { width:100%;height:100%;object-fit:contain; }
body.mobile-game #game-dialog .levelup-levels {
  display:flex;align-items:center;justify-content:center;gap:10px;margin:-1px 0 13px;
  color:var(--ui-muted);font-size:15px;font-weight:700;
}
body.mobile-game #game-dialog .levelup-levels i { color:var(--ui-gold)!important;font-size:27px;font-style:normal;line-height:1; }
body.mobile-game #game-dialog .levelup-levels strong {
  padding:5px 11px;border:2px solid var(--ui-gold);border-radius:9px;
  background:var(--ui-gold-soft);color:var(--ui-ink)!important;font-size:16px;
}
body.mobile-game #game-dialog .levelup-overview>p { margin:0 0 13px;color:var(--ui-muted)!important;font-size:13px;line-height:1.45; }
body.mobile-game #game-dialog .levelup-stats { margin-top:auto;border-top:1px solid var(--ui-line); }
body.mobile-game #game-dialog .levelup-stat,
body.mobile-game #game-dialog .levelup-stats>.detail-row {
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:7px;
  min-height:39px;padding:7px 2px;border-bottom:1px solid var(--ui-line);font-size:12px;
}
body.mobile-game #game-dialog .levelup-stat>span:first-child,
body.mobile-game #game-dialog .levelup-stats>.detail-row>span { color:var(--ui-muted)!important; }
body.mobile-game #game-dialog .levelup-stat :is(strong,b),
body.mobile-game #game-dialog .levelup-stats>.detail-row>strong { color:var(--ui-ink)!important;white-space:nowrap; }
body.mobile-game #game-dialog .levelup-stat>b { color:var(--ui-green-dark)!important; }
body.mobile-game #game-dialog .levelup-stat-arrow { color:var(--ui-gold)!important;font-size:17px; }
body.mobile-game #game-dialog .levelup-stats>.muted { margin:7px 0 0;font-size:11px; }
body.mobile-game #game-dialog .levelup-needs { min-width:0;min-height:0;padding:18px;overflow:auto;background:var(--ui-paper); }
body.mobile-game #game-dialog .levelup-section-title {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;
  color:var(--ui-primary);font-size:13px;
}
body.mobile-game #game-dialog .levelup-section-title h3 { margin:0;font-size:15px;color:var(--ui-primary)!important; }
body.mobile-game #game-dialog .levelup-section-title>span { color:var(--ui-muted)!important;font-size:11px; }
body.mobile-game #game-dialog .levelup-main-title {
  min-height:38px;margin:-18px -18px 13px;padding:7px 13px;
  background:var(--ui-primary-light);border-bottom:3px solid var(--ui-primary-dark);
}
body.mobile-game #game-dialog .levelup-main-title :is(h3,span) { color:var(--ui-card-light)!important; }
body.mobile-game #game-dialog .levelup-resource-list { margin:0 0 14px; }
body.mobile-game #game-dialog .levelup-resource-row,
body.mobile-game #game-dialog .levelup-item-row {
  display:grid;grid-template-columns:24px 30px minmax(0,1fr) auto;align-items:center;gap:8px;
  min-height:43px;padding:5px 9px;border:1px solid var(--ui-line);border-bottom:0;background:var(--ui-card);
}
body.mobile-game #game-dialog .levelup-resource-row:first-of-type { border-radius:10px 10px 0 0; }
body.mobile-game #game-dialog .levelup-resource-row:last-child { border-bottom:1px solid var(--ui-line);border-radius:0 0 10px 10px; }
body.mobile-game #game-dialog .levelup-resource-row img { width:27px;height:27px;object-fit:contain; }
body.mobile-game #game-dialog .levelup-check {
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--ui-green);color:var(--ui-card-light)!important;font:800 13px/1 var(--ui-font-number);
}
body.mobile-game #game-dialog .is-missing>.levelup-check { background:var(--ui-red); }
body.mobile-game #game-dialog .levelup-resource-values { color:var(--ui-muted)!important;font-family:var(--ui-font-number);white-space:nowrap; }
body.mobile-game #game-dialog .levelup-resource-values b { color:var(--ui-green-dark)!important; }
body.mobile-game #game-dialog .is-missing .levelup-resource-values b { color:var(--ui-red-dark)!important; }
body.mobile-game #game-dialog .levelup-resource-values i { margin:0 5px;color:var(--ui-muted)!important;font-style:normal; }
body.mobile-game #game-dialog .levelup-item-row { grid-template-columns:24px minmax(0,1fr) auto;margin:8px 0;border-bottom:1px solid var(--ui-line);border-radius:9px; }
body.mobile-game #game-dialog .levelup-shell .research-requirements { margin:13px 0 0;padding:0; }
body.mobile-game #game-dialog .levelup-shell .research-requirements-heading { margin-bottom:8px; }
body.mobile-game #game-dialog .levelup-shell .research-requirement-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
body.mobile-game #game-dialog .levelup-shell .research-requirement {
  min-width:0;min-height:70px;padding:8px;border:2px solid var(--ui-line)!important;border-radius:10px!important;
  background:var(--ui-card)!important;
}
body.mobile-game #game-dialog .levelup-shell .research-requirement.requirement-met { border-color:var(--ui-green)!important;background:var(--ui-green-soft)!important; }
body.mobile-game #game-dialog .levelup-shell .requirement-missing { border-color:var(--ui-gold)!important; }
body.mobile-game #game-dialog .levelup-shell .research-requirement-copy>strong { color:var(--ui-ink)!important; }
body.mobile-game #game-dialog .levelup-shell .research-requirement-copy :is(span,small) { color:var(--ui-muted)!important; }
body.mobile-game #game-dialog .levelup-running {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:180px;padding:20px;border:2px solid var(--ui-blue);border-radius:12px;background:var(--ui-card);text-align:center;
}
body.mobile-game #game-dialog .levelup-running strong { font-size:20px; }
body.mobile-game #game-dialog .levelup-running span { color:var(--ui-blue-dark)!important;font-size:18px;font-weight:800; }
body.mobile-game #game-dialog .levelup-warning { margin:12px 0 0;padding:9px 11px;border:1px solid var(--ui-red);border-radius:9px;background:var(--ui-red-soft);color:var(--ui-red-dark)!important;font-size:12px; }
body.mobile-game #game-dialog .levelup-footer {
  grid-column:1/-1;display:flex;align-items:stretch;gap:10px;min-height:72px;padding:9px 12px;
  border-top:2px solid var(--ui-frame);background:var(--ui-inset);
}
body.mobile-game #game-dialog .levelup-time {
  display:flex;flex:0 0 190px;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);
}
body.mobile-game #game-dialog .levelup-time span { color:var(--ui-muted)!important;font-size:10px; }
body.mobile-game #game-dialog .levelup-time strong { margin-top:2px;color:var(--ui-ink)!important;font-size:15px; }
body.mobile-game #game-dialog .levelup-footer .button { min-height:52px;margin:0; }
body.mobile-game #game-dialog .levelup-primary {
  flex:1;background:var(--ui-green)!important;border:2px solid var(--ui-green-dark)!important;
  color:var(--ui-card-light)!important;font-size:16px!important;font-weight:800;box-shadow:inset 0 2px #ffffff33,0 3px var(--ui-green-dark)!important;
}
body.mobile-game #game-dialog .levelup-secondary { flex:0 0 130px;background:var(--ui-card)!important;color:var(--ui-ink)!important; }
body.mobile-game #game-dialog .levelup-destination {
  flex:0 0 165px;background:var(--ui-card)!important;border:2px solid var(--ui-frame)!important;
  color:var(--ui-ink)!important;font-size:12px!important;font-weight:800;
}
body.mobile-game #game-dialog .levelup-link {
  position:absolute;right:58px;top:8px;z-index:2;min-height:32px;padding:5px 10px;
  border:1px solid var(--ui-gold)!important;border-radius:8px!important;background:var(--ui-primary-light)!important;
  color:var(--ui-card-light)!important;font:700 11px var(--ui-font);box-shadow:none!important;cursor:pointer;
}
@media(max-width:700px) {
  body.mobile-game #game-dialog.levelup-dialog-window { width:calc(100dvw - 18px)!important;height:calc(100dvh - 18px)!important;max-height:calc(100dvh - 18px)!important; }
  body.mobile-game #game-dialog .levelup-shell { grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto; }
  body.mobile-game #game-dialog .levelup-overview { display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 12px;padding:11px;border-right:0;border-bottom:2px solid var(--ui-line);overflow:visible; }
  body.mobile-game #game-dialog .levelup-art { grid-row:1/4;min-height:116px;margin:0;padding:5px; }
  body.mobile-game #game-dialog .levelup-art>img { width:92px;height:78px; }
  body.mobile-game #game-dialog .levelup-art.research-art>.rt-node-art { width:76px;height:76px; }
  body.mobile-game #game-dialog .levelup-art>span:last-child { font-size:12px; }
  body.mobile-game #game-dialog .levelup-levels { justify-content:flex-start;margin:0;font-size:12px; }
  body.mobile-game #game-dialog .levelup-levels strong { padding:3px 7px;font-size:12px; }
  body.mobile-game #game-dialog .levelup-levels i { font-size:19px; }
  body.mobile-game #game-dialog .levelup-overview>p { margin:0;font-size:10px;line-height:1.3; }
  body.mobile-game #game-dialog .levelup-stats { margin:0; }
  body.mobile-game #game-dialog .levelup-stat,body.mobile-game #game-dialog .levelup-stats>.detail-row { min-height:26px;padding:3px 0;font-size:9px; }
  body.mobile-game #game-dialog .levelup-needs { padding:11px; }
  body.mobile-game #game-dialog .levelup-main-title { min-height:33px;margin:-11px -11px 9px;padding:5px 9px; }
  body.mobile-game #game-dialog .levelup-resource-row { min-height:37px;padding:3px 6px;font-size:11px; }
  body.mobile-game #game-dialog .levelup-shell .research-requirement { min-height:56px;padding:5px; }
  body.mobile-game #game-dialog .levelup-footer { min-height:61px;padding:7px;gap:7px; }
  body.mobile-game #game-dialog .levelup-time { flex-basis:122px;padding:4px 6px; }
  body.mobile-game #game-dialog .levelup-time strong { font-size:12px; }
  body.mobile-game #game-dialog .levelup-footer .button { min-height:45px;padding:6px;font-size:12px!important; }
  body.mobile-game #game-dialog .levelup-secondary { flex-basis:92px; }
  body.mobile-game #game-dialog .levelup-destination { flex-basis:88px;padding-inline:4px;font-size:10px!important;line-height:1.15; }
  body.mobile-game #game-dialog .levelup-link { display:none; }
}
@media(max-height:520px) and (min-width:560px) {
  body.mobile-game #game-dialog.levelup-dialog-window { width:calc(100dvw - 20px)!important;height:calc(100dvh - 14px)!important;max-height:calc(100dvh - 14px)!important; }
  body.mobile-game #game-dialog .levelup-shell { grid-template-columns:minmax(220px,.8fr) minmax(330px,1.4fr);grid-template-rows:minmax(0,1fr) 54px; }
  body.mobile-game #game-dialog .levelup-overview,body.mobile-game #game-dialog .levelup-needs { padding:9px; }
  body.mobile-game #game-dialog .levelup-art { min-height:105px;margin-bottom:5px; }
  body.mobile-game #game-dialog .levelup-art>img { height:76px; }
  body.mobile-game #game-dialog .levelup-art.research-art>.rt-node-art { width:78px;height:78px; }
  body.mobile-game #game-dialog .levelup-overview>p { display:none; }
  body.mobile-game #game-dialog .levelup-main-title { margin:-9px -9px 6px;min-height:29px;padding:3px 8px; }
  body.mobile-game #game-dialog .levelup-resource-row { min-height:33px;padding-block:2px;font-size:10px; }
  body.mobile-game #game-dialog .levelup-shell .research-requirements { margin-top:6px; }
  body.mobile-game #game-dialog .levelup-shell .research-requirement { min-height:48px;padding:3px; }
  body.mobile-game #game-dialog .levelup-footer { min-height:54px;padding:5px 8px; }
  body.mobile-game #game-dialog .levelup-footer .button { min-height:42px; }
}
body.mobile-game :is(#panel-dialog,#game-dialog) .detail-row { border-color:var(--ui-line); }
body.mobile-game :is(#panel-dialog,#game-dialog) .detail-row :is(span,strong) { color:var(--ui-ink)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.costs>span,.treasury>span) {
  background:var(--ui-card)!important;color:var(--ui-ink)!important;
  border-color:var(--ui-line)!important;border-radius:8px;box-shadow:none;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.insufficient,.danger-note) { color:var(--ui-red-dark)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .detail-row.insufficient :is(span,strong) { color:var(--ui-red-dark)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .costs>span.insufficient {
  background:var(--ui-red-soft)!important;color:var(--ui-red-dark)!important;border-color:var(--ui-red)!important;
}
/* An unavailable action is greyed by its material, never by fading its text into the page. */
body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) :is(button,.button):disabled {
  background:var(--ui-disabled)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important;
  opacity:1!important;filter:none!important;box-shadow:none!important;text-shadow:none!important;cursor:not-allowed;
}
/* Artwork keeps its rarity colours; its surrounding cabinet uses the shared materials. */
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.loot-card,.treasury-slot-placeholder,.research-requirement .rt-node-art,.treasury-chest-art) {
  background:var(--ui-inset)!important; border-color:var(--ui-line)!important; box-shadow:none!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.loot-count,.loot-value,.treasury-tile-count,.treasury-tile-level,.trading-item-stamp,.trading-item-count,.trading-item-fragment) {
  background:var(--ui-primary-dark)!important; color:var(--ui-card-light)!important; border-radius:5px; text-shadow:none!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) .treasury-reference .treasury-tile.is-locked { opacity:1;filter:none; }
body.mobile-game :is(#panel-dialog,#game-dialog) .treasury-reference .treasury-tile.is-locked img { opacity:.6;filter:grayscale(.75); }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.trading-discount,.treasury-tile-equipped) { background:var(--ui-green)!important; color:var(--ui-card-light)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .trading-discount.hot { background:var(--ui-orange)!important; color:var(--ui-ink)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.treasury-active-bonuses h3,.treasury-chest-card h3,.treasury-slot>small,.treasury-slot-number) { background:var(--ui-inset)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; box-shadow:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.treasury-chest-art>span,.treasury-chest-rewards span) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; border-radius:7px!important; clip-path:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-banner {
  background:linear-gradient(160deg,var(--ui-primary-light),var(--ui-primary))!important; border:3px solid var(--ui-primary-dark)!important;
  border-radius:18px!important; clip-path:none!important; filter:none!important; color:var(--ui-card)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-banner::before { display:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .nav-emblem { background:var(--ui-primary)!important; color:var(--ui-card)!important; border-color:var(--ui-primary-dark)!important; text-shadow:none!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-banner img {
  background:var(--ui-card)!important; border-color:var(--ui-gold)!important; box-shadow:0 3px #44354966!important;
}
body.mobile-game #panel-dialog[data-panel=profile]>.panel-content>.subtabs {
  position:static!important; height:auto!important; flex-shrink:0; margin:0 0 10px!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-row,
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-pair>div { border-left:4px solid var(--ui-line); }
/* Daily quests form one compact, vertically scrolling list beneath fixed tabs. */
body.mobile-game #panel-dialog[data-panel=quests] #content { overflow:hidden; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-page-summary { flex-shrink:0; margin:0 0 8px; gap:6px; font-size:11px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-page-summary .badge { padding:5px 7px; white-space:nowrap; font-size:10px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-list { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:var(--ui-line) var(--ui-paper); scrollbar-gutter:stable; gap:6px; padding:1px 4px 3px 1px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-list .quest-row { flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:12px; align-items:center; padding:9px 11px; border-width:1px; border-left-width:3px; border-radius:9px!important; box-shadow:none!important; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row.ready { border-left-color:var(--ui-green)!important; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row.claimed { opacity:1; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row.claimed .quest-copy { opacity:.65; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-copy { min-width:0; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row h3 { margin:0; font:700 14px/1.25 var(--ui-font); overflow-wrap:anywhere; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-icon { display:inline; margin-right:5px; font-size:14px; color:var(--ui-muted); text-shadow:none; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row-heading>small { flex-shrink:0; color:var(--ui-muted); font:600 10px/1.25 var(--ui-font); font-variant-numeric:tabular-nums; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row p { margin:3px 0 0; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row-footer { display:flex; align-items:center; gap:12px; margin-top:5px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-reward-icons { flex-shrink:0; margin:0; gap:4px; max-width:100%; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-reward-icons>.quest-reward-item { padding:2px 4px; font-size:10px; line-height:1.2; border-radius:6px; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-reward-art { width:30px; height:30px; border-color:var(--ui-line); background:var(--ui-inset); }
body.mobile-game #panel-dialog[data-panel=quests] .quest-reward-value { color:var(--ui-ink); }
body.mobile-game #panel-dialog[data-panel=quests] .quest-progress { flex:1; min-width:40px; margin:0; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-progress .progress-track { height:4px; margin:0; box-shadow:none; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row>.quest-action { grid-column:auto; justify-self:stretch; min-width:0; min-height:40px; margin:0; padding:7px 8px; font-size:12px; text-align:center; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-row>span.quest-action { display:grid; place-items:center; min-height:0; }
body.mobile-game #panel-dialog[data-panel=quests] .quest-list:focus-visible { outline:2px solid var(--ui-primary); outline-offset:-2px; }
@media(max-width:600px) {
  body.mobile-game #panel-dialog[data-panel=quests] .quest-list .quest-row { grid-template-columns:minmax(0,1fr) 65px; padding:7px; gap:7px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-row-heading { flex-wrap:wrap; gap:2px 6px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-row h3 { font-size:12px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-row p { font-size:10px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-row-footer { flex-direction:column; align-items:stretch; gap:4px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-progress { flex:none; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-row>.quest-action { padding:5px 3px; font-size:11px; }
  body.mobile-game #panel-dialog[data-panel=quests] .quest-page-summary { font-size:10px; }
}
/* HUD and world overlays use the same parchment without obscuring the playfield. */
body.mobile-game :is(.hud-profile .player-button,.hud-edge-status,#lord-talent-button,.hud-objective,#resources .resource) {
  background:#e9dfcfed!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important;
  border-radius:9px!important; text-shadow:none!important;
}
body.mobile-game :is(#player-hud-name,#player-hud-name small,.hud-objective strong,.hud-objective small,#resources .resource strong,#lord-hud-level) { color:var(--ui-ink)!important; text-shadow:none!important; }
body.mobile-game :is(.hud-edge-label,.game-dock button>.dock-label,.hud-menu>span) { color:var(--ui-card-light)!important; text-shadow:0 1px 2px var(--ui-frame),1px 0 1px var(--ui-frame),-1px 0 1px var(--ui-frame)!important; }
/* The player HUD is one readable card: identity above, AP and Hunter progress below. */
body.mobile-game .hud-profile {
  position:relative; display:grid; grid-template-columns:86px minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:52px 48px; gap:8px; width:530px; max-width:530px; padding:10px;
  border:2px solid var(--ui-primary-light); border-radius:20px; background:#e9dfcfed;
  box-shadow:0 4px 0 var(--ui-primary-dark),0 10px 24px #2d21304d; pointer-events:none;
}
body.mobile-game #account-button {
  position:relative; grid-column:1/-1; grid-row:1; display:flex; width:auto; max-width:none; min-width:0;
  min-height:52px; margin:0 0 0 86px; padding:3px 64px 3px 0; gap:8px; overflow:visible;
  border:0!important; background:transparent!important; box-shadow:none; pointer-events:auto;
}
body.mobile-game #account-button .avatar {
  position:absolute; left:-86px; top:0; width:78px; height:100px; margin:0; border:2px solid var(--ui-gold);
  border-radius:14px; background:var(--ui-card); box-shadow:inset 0 0 0 2px var(--ui-card-light),0 2px 0 var(--ui-primary-dark);
  overflow:hidden;
}
body.mobile-game #account-button .avatar img { width:100%;height:100%;border-radius:11px;object-fit:cover;object-position:center 18%; }
body.mobile-game #player-hud-name.name-frame {
  flex:1; width:100%; min-width:0; max-width:none; padding-block:5px; font-size:15px; line-height:1.15;
}
body.mobile-game #player-hud-name.name-frame small { margin-top:2px; padding-top:2px; border-top:1px solid color-mix(in srgb,var(--ui-line) 60%,transparent);font-size:10px; }
body.mobile-game .hud-player-level {
  left:5px; bottom:5px; min-width:29px; padding:3px 6px; border-color:var(--ui-gold); border-radius:8px;
  background:var(--ui-primary-dark); color:var(--ui-card-light); text-shadow:none; box-shadow:0 2px 0 #2f2138;
}
body.mobile-game .hud-ranks { display:contents; }
body.mobile-game .hud-rank.hud-vip {
  position:absolute!important; z-index:3; inset:16px 16px auto auto!important; width:auto; min-width:54px; min-height:32px;
  margin:0; padding:5px 9px; border:1px solid var(--ui-gold)!important; border-radius:9px!important;
  background:var(--ui-gold-soft)!important; color:var(--ui-ink)!important; box-shadow:0 2px 0 var(--ui-gold); text-shadow:none; pointer-events:auto;
  font:700 11px/1 var(--ui-font);
}
body.mobile-game .hud-rank.hud-vip b { color:var(--ui-ink)!important;font:700 12px/1 var(--ui-font-number); }
body.mobile-game :is(.hud-energy,#lord-talent-button.hud-hunter) {
  position:relative!important; inset:auto!important; display:flex; align-items:center; justify-content:flex-start; gap:7px;
  width:auto; min-width:0; min-height:48px; height:48px; margin:0; padding:6px 8px;
  border:1px solid var(--ui-line)!important; border-radius:11px!important; background:var(--ui-card)!important;
  color:var(--ui-ink)!important; box-shadow:none; text-shadow:none; pointer-events:auto; font:400 11px/1.1 var(--ui-font);
}
body.mobile-game .hud-energy { grid-column:2;grid-row:2; }
body.mobile-game #lord-talent-button.hud-hunter { grid-column:3;grid-row:2; }
body.mobile-game .hud-meter-icon { display:grid; place-items:center; flex:0 0 25px; width:25px; color:var(--ui-green-dark); font-size:21px; line-height:1; }
body.mobile-game .hud-meter-icon svg { width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
body.mobile-game #hud-energy .hud-meter-icon svg { fill:currentColor;stroke:var(--ui-card-light);stroke-width:1.2; }
body.mobile-game .hud-energy>.hud-meter-body { color:var(--ui-ink);font-size:11px;font-weight:400;line-height:1.1; }
body.mobile-game #lord-talent-button .hud-meter-icon { color:var(--ui-orange);font-size:17px; }
body.mobile-game .hud-meter-body { display:block; flex:1; min-width:0; }
body.mobile-game .hud-meter-copy { display:flex; align-items:baseline; justify-content:space-between; gap:5px; min-width:0; white-space:nowrap; }
body.mobile-game .hud-meter-copy>span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.mobile-game .hud-meter-copy strong { flex:none; color:var(--ui-ink); font:700 10px/1 var(--ui-font-number); }
body.mobile-game #lord-hud-level { font:700 11px/1 var(--ui-font-number); }
body.mobile-game .hud-meter-track { display:block; height:7px; margin-top:5px; overflow:hidden; border-radius:5px; background:var(--ui-inset); }
body.mobile-game .hud-meter-track>i { display:block; width:0; height:100%; border-radius:inherit; background:var(--ui-green); transition:width .2s ease; }
body.mobile-game #lord-talent-button .hud-meter-track>i { background:var(--ui-primary-light); }
body.mobile-game :is(.hud-energy,#lord-talent-button,.hud-vip):focus-visible { outline:3px solid var(--ui-primary);outline-offset:3px; }
/* Timed effects sit at the upper edge beside the player HUD and unfold in place. */
.hud-effects { position:absolute; left:calc(100% + 8px); right:auto; top:0; z-index:3; display:grid; grid-template-columns:44px; grid-template-rows:44px 44px; gap:4px; pointer-events:none; }
.hud-effects:not(:has(.hud-effect-button:not([hidden]))) { display:none; }
.hud-effects .hud-effect-button { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--ui-green-dark); box-shadow:none; cursor:pointer; pointer-events:auto; }
.hud-effects .hud-effect-button::before { content:''; position:absolute; inset:8px; border:1px solid color-mix(in srgb,var(--ui-green) 55%,var(--ui-line)); border-radius:7px; background:var(--ui-green-soft); }
.hud-effects .hud-effect-button[hidden] { display:none; }
.hud-effects .hud-effect-button.is-debuff { grid-column:1; grid-row:2; color:var(--ui-red); }
.hud-effects .hud-effect-button.is-debuff::before { border-color:color-mix(in srgb,var(--ui-red) 45%,var(--ui-line)); background:var(--ui-red-soft); }
.hud-effect-button svg { position:relative; width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round; }
.hud-effect-button .effect-arrow-line { fill:none; stroke:var(--ui-green-soft); }
.hud-effect-button.is-debuff .effect-arrow-line { stroke:var(--ui-red-soft); }
.hud-effects .hud-effect-button:focus-visible { outline:3px solid var(--ui-primary); outline-offset:3px; }
.hud-effects .hud-effect-button:hover::before { border-color:currentColor; }
.hud-effects .hud-effect-button[aria-expanded=true]::before { border:2px solid currentColor; box-shadow:0 0 0 2px var(--ui-card-light),0 3px 8px #44305238; }
.hud-effects .hud-effect-button[aria-expanded=true]::after { content:'⌄'; position:absolute; right:1px; bottom:0; color:var(--ui-ink); font:700 13px/1 var(--ui-font); }
body.mobile-game .topbar:has(.active-effects-drawer:not([hidden])) { z-index:20010!important; }
.active-effects-drawer { position:absolute; top:calc(100% + 7px); right:0; width:min(300px,calc(100vw - 90px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); max-height:min(260px,calc(100dvh - 122px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); overflow:hidden; border:2px solid var(--ui-frame); border-radius:14px; background:var(--ui-paper); box-shadow:0 7px 18px #44305242; color:var(--ui-ink); pointer-events:auto; }
.active-effects-drawer[hidden] { display:none; }
.active-effects-drawer>header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 10px 6px; border-bottom:2px solid var(--ui-gold); border-radius:11px 11px 0 0; background:var(--ui-primary); color:var(--ui-card-light); }
.active-effects-drawer h2 { margin:0; color:inherit; font-size:16px; line-height:1.1; white-space:nowrap; }
.active-effects-drawer header small { display:block; min-width:0; overflow:hidden; color:var(--ui-gold-soft); font-size:9px; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.active-effects-list { display:grid; gap:6px; margin:0; padding:7px; max-height:min(205px,calc(100dvh - 180px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); overflow-y:auto; overscroll-behavior:contain; list-style:none; }
.active-effect { display:flex; align-items:center; gap:8px; min-height:60px; padding:7px; border:1px solid var(--ui-line); border-radius:11px; background:var(--ui-card); }
.active-effect-art { display:grid; place-items:center; width:36px; height:40px; flex:none; border:2px solid var(--ui-line); border-radius:9px; background:var(--ui-inset); }
.active-effect-art img { width:32px; height:36px; object-fit:contain; }
.active-effect-art.grade-epic { border-color:var(--ui-purple); }
.active-effect-art.grade-legendary { border-color:var(--ui-gold); }
.active-effect-art.grade-magic { border-color:var(--ui-blue-light); }
.active-effect-art.grade-rare { border-color:var(--ui-green); }
.active-effect-copy { flex:1; min-width:0; }
.active-effect-copy>small { display:block; font-size:9px; margin-bottom:2px; }
.active-effect-copy>strong { display:block; font-size:12px; line-height:1.25; overflow-wrap:anywhere; }
.active-effect-copy b { white-space:nowrap; }
.active-effect-duration { display:flex; align-items:center; gap:6px; margin-top:5px; }
.active-effect-track { flex:1; height:6px; overflow:hidden; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-inset); }
.active-effect-track>span { display:block; height:100%; background:var(--ui-green); }
.active-effect.is-debuff .active-effect-track>span { background:var(--ui-red); }
.active-effect-duration time { color:var(--ui-green-dark); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.active-effect.is-debuff time { color:var(--ui-red); }
.active-effects-empty { padding:24px 8px; text-align:center; }
@media(max-width:900px) {
  body.mobile-game .hud-profile { width:390px;max-width:390px;grid-template-columns:74px minmax(0,1fr) minmax(0,1fr); }
  body.mobile-game #account-button { margin-left:74px; }
  body.mobile-game #account-button .avatar { left:-74px;width:66px; }
  .hud-profile:has(.hud-effect-button:not([hidden])) { width:390px; max-width:390px; }
}
@media(max-width:600px) {
  body.mobile-game { --edge-top:151px; }
  body.mobile-game .topbar { display:grid;grid-template-columns:minmax(0,1fr) 62px;grid-template-rows:auto auto;align-items:start;gap:7px 8px; }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-column:1;grid-row:1;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);grid-template-rows:40px 32px;
    gap:5px;width:min(308px,calc(100vw - 86px));max-width:none;padding:6px;border-radius:15px;
  }
  body.mobile-game #account-button { grid-column:1/4;grid-row:1;min-height:40px;margin-left:56px;padding-right:48px; }
  body.mobile-game #account-button .avatar { left:-56px;width:51px;height:77px;border-radius:10px; }
  body.mobile-game #account-button .avatar img { border-radius:8px; }
  body.mobile-game #player-hud-name.name-frame { display:flex;max-width:none;padding:3px 14px;font-size:11px; }
  body.mobile-game #player-hud-name.name-frame small { display:block;font-size:8px; }
  body.mobile-game .hud-rank.hud-vip { inset:10px 10px auto auto!important;min-width:43px;min-height:26px;padding:3px 5px;font-size:8px; }
  body.mobile-game :is(.hud-energy,#lord-talent-button.hud-hunter) { width:auto;height:32px;min-height:32px;padding:3px 6px;gap:4px; }
  body.mobile-game .hud-energy { grid-column:2;grid-row:2; }
  body.mobile-game #lord-talent-button.hud-hunter { grid-column:3;grid-row:2; }
  body.mobile-game .hud-meter-icon { display:grid;flex:0 0 18px;width:18px; }
  body.mobile-game .hud-meter-icon svg { width:17px;height:17px; }
  body.mobile-game .hud-meter-copy { justify-content:flex-end;align-items:center;font-size:9px;gap:3px; }
  body.mobile-game .hud-meter-copy>span { display:none; }
  body.mobile-game .hud-meter-copy strong { font-size:9px; }
  body.mobile-game .hud-meter-track { height:4px;margin-top:2px; }
  body.mobile-game #hud-gems { grid-column:2;grid-row:1; }
  body.mobile-game #resources { grid-column:1/3;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:none; }
  .hud-effects { left:calc(100% + 6px);right:auto;top:0;grid-template-columns:44px;grid-template-rows:44px 44px; }
  .hud-effects .hud-effect-button.is-debuff { grid-row:2;grid-column:1; }
  .active-effects-drawer { width:min(280px,calc(100vw - 90px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); }
  .active-effect { padding:6px; gap:7px; }
}
@media(max-width:360px) and (orientation:portrait) {
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) { grid-template-columns:52px minmax(0,1fr) minmax(0,1fr); }
  body.mobile-game #account-button { margin-left:52px; }
  body.mobile-game #account-button .avatar { left:-52px;width:47px; }
  body.mobile-game #player-hud-name.name-frame { padding-inline:10px;font-size:10px; }
  body.mobile-game :is(.hud-energy,#lord-talent-button.hud-hunter) { padding-inline:4px;gap:2px; }
  body.mobile-game .hud-meter-copy strong { font-size:8px; }
}
body.mobile-game #game-dialog .building-quick-card {
  min-height:70px;
  padding:8px 12px;
  border-color:color-mix(in srgb,var(--ui-frame) 52%,var(--ui-gold-soft));
  background:linear-gradient(105deg,var(--ui-paper),var(--ui-card-light));
  color:var(--ui-ink);
}
body.mobile-game #game-dialog .building-quick-card:hover,
body.mobile-game #game-dialog .building-quick-card:focus-visible {
  border-color:var(--ui-gold);
  background:var(--ui-card-light);
}
body.mobile-game #game-dialog .building-quick-card>img {
  flex:0 0 58px;
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 3px 2px rgba(47,31,31,.24));
}
body.mobile-game #game-dialog .building-quick-card>strong { font-size:16px; }
body.mobile-game #game-dialog .building-quick-card { flex-direction:row; text-align:left; }
body.mobile-game #game-dialog .building-quick-card>small { display:block; flex-shrink:0; }
body.mobile-game #game-dialog .building-requirement-icon { background:var(--ui-card); }
body.mobile-game #game-dialog .building-quick-card>small { color:var(--ui-muted)!important; font-family:Lora,serif; font-size:12px; }
@media(max-width:420px) {
  body.mobile-game #game-dialog .building-quick-card { min-height:62px; padding:6px 9px; }
  body.mobile-game #game-dialog .building-quick-card>img { flex-basis:50px; width:50px; height:50px; }
  body.mobile-game #game-dialog .building-quick-card>strong { font-size:14px; }
}
@media(orientation:landscape) and (max-height:520px) {
  body.mobile-game { --edge-top:102px; }
  body.mobile-game .topbar { display:flex;flex-direction:row;align-items:flex-start;gap:6px; }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-template-columns:50px minmax(0,1fr) minmax(0,1fr);grid-template-rows:36px 32px;gap:4px;
    width:min(330px,52vw);max-width:330px;padding:5px;border-radius:13px;
  }
  body.mobile-game #account-button { grid-column:1/4;grid-row:1;min-height:36px;margin-left:50px;padding-right:43px; }
  body.mobile-game #account-button .avatar { left:-50px;width:46px;height:72px;border-radius:9px; }
  body.mobile-game #player-hud-name.name-frame { padding:2px 18px;font-size:10px; }
  body.mobile-game #player-hud-name.name-frame small { font-size:7px; }
  body.mobile-game .hud-rank.hud-vip { inset:8px 8px auto auto!important;min-width:41px;min-height:24px;padding:3px 4px;font-size:8px; }
  body.mobile-game :is(.hud-energy,#lord-talent-button.hud-hunter) { height:32px;min-height:32px;padding:3px 5px;gap:3px; }
  body.mobile-game .hud-energy { grid-column:2;grid-row:2; }
  body.mobile-game #lord-talent-button.hud-hunter { grid-column:3;grid-row:2; }
  body.mobile-game .hud-meter-icon { display:grid;flex:0 0 16px;width:16px; }
  body.mobile-game .hud-meter-icon svg { width:15px;height:15px; }
  body.mobile-game .hud-meter-copy>span { font-size:8px; }
  body.mobile-game .hud-meter-copy strong { font-size:8px; }
  body.mobile-game #resources { grid-column:auto;grid-row:auto;width:min(34vw,250px);grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mobile-game #hud-gems { grid-column:auto;grid-row:auto; }
  .hud-effects { left:calc(100% + 6px);right:auto;top:0;grid-template-columns:44px;grid-template-rows:44px 44px; }
  .hud-effects .hud-effect-button.is-debuff { grid-row:2;grid-column:1; }
  .active-effects-drawer { width:min(240px,calc(100vw - 66px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); }
}

/* Main-screen reference layout: seven permanent destinations in one row. */
body.mobile-game #hud-menu { display:none!important; }
body.mobile-game #navigation.game-dock {
  left:50%!important;
  right:auto!important;
  bottom:var(--hud-dock-bottom)!important;
  width:min(720px,calc(100vw - 12px))!important;
  max-width:none!important;
  height:var(--hud-dock-height)!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:3px!important;
  transform:translateX(-50%);
}
body.mobile-game #navigation .game-dock-item {
  min-width:0;
  height:64px;
  border:2px solid var(--ui-frame)!important;
  border-radius:10px 10px 5px 5px!important;
  background:linear-gradient(var(--ui-card),var(--ui-inset))!important;
  box-shadow:inset 0 1px var(--ui-card-light),0 3px 0 var(--ui-primary-dark)!important;
  color:var(--ui-ink)!important;
}
body.mobile-game #navigation .game-dock-item.current {
  border-color:var(--ui-gold)!important;
  background:linear-gradient(var(--ui-gold-soft),var(--ui-inset))!important;
}
body.mobile-game #navigation .game-dock-item .dock-icon {
  top:-10px;
  width:46px;
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 2px 1px color-mix(in srgb,var(--ui-primary-dark) 55%,transparent));
}
body.mobile-game #navigation .game-dock-item:last-child .dock-icon { top:-13px; width:52px; height:52px; }
body.mobile-game #navigation .game-dock-item .dock-glyph { display:grid;place-items:center;font-size:31px;line-height:1; }
body.mobile-game #navigation .game-dock-item .dock-label {
  min-height:21px;
  padding:3px 1px;
  border-radius:0 0 4px 4px;
  background:var(--ui-primary)!important;
  color:var(--ui-card-light)!important;
  font:700 11px/1 var(--ui-font)!important;
  text-transform:none;
  text-shadow:none!important;
}
body.mobile-game #navigation .game-dock-item.current .dock-label { background:var(--ui-primary-light)!important; color:var(--ui-card-light)!important; }
body.mobile-game #navigation .game-dock-item .dock-badge {
  top:-7px;
  right:-2px;
  min-width:21px;
  height:21px;
  border:2px solid var(--ui-card-light);
  background:var(--ui-red);
  color:var(--ui-card-light);
  box-shadow:0 2px 3px color-mix(in srgb,var(--ui-primary-dark) 45%,transparent);
}
body.mobile-game .hud-right-tools { bottom:calc(var(--world-chat-bottom) + var(--world-chat-height) + 12px)!important; }

/* Shop chooser: real destinations, with crystal purchases clearly gated until payment support exists. */
body.mobile-game #game-dialog.shop-hub-dialog { width:min(650px,calc(100vw - 20px)); }
body.mobile-game .shop-hub-intro { margin:0 0 12px; color:var(--ui-muted); text-align:center; }
body.mobile-game .shop-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body.mobile-game .shop-hub-card {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 10px;
  min-height:92px;
  padding:10px;
  border:2px solid var(--ui-line)!important;
  border-radius:14px!important;
  background:var(--ui-card)!important;
  color:var(--ui-ink)!important;
  text-align:left;
}
body.mobile-game .shop-hub-card>span { grid-row:1/3; display:grid; place-items:center; width:54px; height:54px; border-radius:13px; background:var(--ui-inset); font-size:32px; }
body.mobile-game .shop-hub-card strong { align-self:end; font-size:17px; }
body.mobile-game .shop-hub-card small { align-self:start; color:var(--ui-muted); font-size:12px; line-height:1.25; }
body.mobile-game .crystal-shop-summary { display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 16px; padding:12px; border:1px solid var(--ui-line); border-radius:14px; background:var(--ui-card); }
body.mobile-game .crystal-shop-summary img { width:58px; height:58px; }
body.mobile-game .crystal-shop-summary small,body.mobile-game .crystal-shop-summary strong { display:block; }
body.mobile-game .crystal-shop-summary small { color:var(--ui-muted); }

@media(max-width:700px) {
  body.mobile-game { --hud-dock-height:68px; }
  body.mobile-game #navigation.game-dock { width:calc(100vw - 6px)!important; gap:1px!important; }
  body.mobile-game #navigation .game-dock-item { min-width:44px; height:58px; border-radius:8px 8px 4px 4px!important; }
  body.mobile-game #navigation .game-dock-item .dock-icon { top:-5px; width:36px; height:36px; }
  body.mobile-game #navigation .game-dock-item:last-child .dock-icon { top:-7px; width:40px; height:40px; }
  body.mobile-game #navigation .game-dock-item .dock-glyph { font-size:25px; }
  body.mobile-game #navigation .game-dock-item .dock-label { min-height:19px; font-size:9px!important; letter-spacing:-.2px; }
  body.mobile-game .shop-hub-grid { grid-template-columns:1fr; }
}
@media(max-width:360px) {
  body.mobile-game #navigation .game-dock-item .dock-label { font-size:8px!important; letter-spacing:-.35px; }
}
@media(orientation:landscape) and (max-height:520px) {
  body.mobile-game { --hud-dock-height:58px; }
  body.mobile-game #navigation .game-dock-item { height:49px; }
  body.mobile-game #navigation .game-dock-item .dock-icon { top:-8px; width:36px; height:36px; }
  body.mobile-game #navigation .game-dock-item:last-child .dock-icon { top:-9px; width:39px; height:39px; }
  body.mobile-game #navigation .game-dock-item .dock-label { min-height:17px; font-size:8px!important; }
}
/* Work orders: one legible card and an explicit state, shared by all queues. */
body.mobile-game #hud-left-tools { width:auto; gap:6px; }
body.mobile-game #hud-healing[hidden] { display:none!important; }
.hud-healing .hud-edge-art { position:relative; }
.hud-heal-now { display:none; position:absolute; right:-5px; bottom:-3px; width:20px; height:20px; place-items:center; border:2px solid var(--ui-card-light); border-radius:50%; background:var(--ui-green); color:var(--ui-card-light); box-shadow:0 2px 3px color-mix(in srgb,var(--ui-ink) 35%,transparent); font:700 14px/1 var(--ui-font-number,var(--ui-font)); }
.hud-healing.is-quick-heal .hud-heal-now { display:grid; }
.hud-healing.is-quick-heal { border-color:var(--ui-green-dark); box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-green) 25%,transparent),var(--ui-shadow); }
.hud-healing.is-quick-heal:active { transform:translateY(1px); }
@media(prefers-reduced-motion:no-preference) { .hud-healing.is-quick-heal .hud-heal-now { animation:hud-heal-ready 1.6s ease-in-out infinite; } }
@keyframes hud-heal-ready { 50% { transform:scale(1.12); box-shadow:0 2px 3px color-mix(in srgb,var(--ui-ink) 35%,transparent),0 0 0 5px color-mix(in srgb,var(--ui-green) 18%,transparent); } }
body.mobile-game #hud-left-tools .hud-job {
  display:flex; flex-direction:row; align-items:center; gap:10px; width:172px; min-height:78px;
  padding:8px 9px 12px; border:2px solid var(--ui-line); border-left:4px solid var(--ui-line);
  border-radius:12px; background:var(--ui-card); color:var(--ui-ink); box-shadow:0 3px #44354926;
  text-align:left; text-shadow:none; font-family:var(--ui-font); filter:none; opacity:1;
}
body.mobile-game #hud-left-tools .hud-job .hud-edge-art {
  width:40px; height:42px; margin:0; border:1px solid var(--ui-line); border-radius:10px;
  background:var(--ui-inset); box-shadow:inset 0 2px #fff8;
}
body.mobile-game #hud-left-tools .hud-job .hud-edge-art :is(img,svg) { width:43px; height:43px; filter:none; }
body.mobile-game #hud-left-tools .hud-job-copy { display:flex; flex-direction:column; min-width:0; gap:3px; }
body.mobile-game #hud-left-tools .hud-job .hud-edge-label { margin:0; color:var(--ui-ink)!important; font-size:13px; text-shadow:none!important; }
body.mobile-game #hud-left-tools .hud-job-state { display:block; color:var(--ui-muted); font-size:11px; font-weight:700; line-height:1.1; white-space:nowrap; }
body.mobile-game #hud-left-tools .hud-job-state::before { content:'○'; display:inline-block; width:14px; }
body.mobile-game #hud-left-tools .hud-job-time { display:block; margin:0; padding:0; border:0; background:none; color:var(--ui-muted); font-size:10px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:none; }
body.mobile-game #hud-left-tools .hud-job-track { display:none; position:absolute; left:8px; right:8px; bottom:5px; height:5px; border-radius:8px; background:var(--ui-inset); overflow:hidden; }
body.mobile-game #hud-left-tools .hud-job-progress { display:block; height:100%; border-radius:inherit; background:var(--ui-green); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=active] { border-color:var(--ui-primary); background:var(--ui-card-light); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=active] .hud-edge-art { background:var(--ui-primary-light); border-color:var(--ui-primary-dark); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=active] .hud-job-state { color:var(--ui-primary); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=active] .hud-job-state::before { content:'◷'; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=active] .hud-job-time { color:var(--ui-ink); font-size:13px; font-weight:800; }
body.mobile-game #hud-left-tools .hud-job:is([data-job-state=active],[data-job-state=finishing]) .hud-job-track { display:block; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=finishing] { background:var(--ui-gold-soft); border-color:var(--ui-gold); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=finishing] .hud-job-state::before { content:'…'; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=locked] { background:var(--ui-disabled); border-style:dashed; box-shadow:none; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=locked] .hud-edge-art { filter:grayscale(.85); opacity:.65; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=locked] .hud-job-state::before { content:'⊘'; }
body.mobile-game #hud-left-tools .hud-job[data-job-state=idle] .hud-job-state { color:var(--ui-green-dark); }
body.mobile-game #hud-left-tools .hud-job[data-job-state=idle] .hud-job-state::before { content:'✓'; }
body.mobile-game #hud-left-tools .hud-job:is([data-job-state=idle],[data-job-state=loading]) { background:var(--ui-disabled); box-shadow:none; }
body.mobile-game #hud-left-tools .hud-job:is([data-job-state=idle],[data-job-state=loading]) .hud-edge-art { filter:grayscale(1); opacity:.65; }
body.mobile-game #hud-left-tools .hud-job.is-indeterminate .hud-job-progress { width:35%!important; animation:hud-work-pending 1.8s ease-in-out infinite alternate; }
body.mobile-game #hud-training .training-hud-count { position:absolute; bottom:13px; left:8px; width:42px; margin:0; background:var(--ui-card); border-radius:4px; color:var(--ui-ink); font-size:9px; text-align:center; text-shadow:none; }
body.mobile-game #hud-left-tools .hud-job:focus-visible { outline:3px solid var(--ui-primary); outline-offset:3px; }
@keyframes hud-work-pending { to { transform:translateX(180%); } }
/* Small screens show only the pictogram and remaining time. Full labels stay on the button. */
@media(max-width:900px), (max-height:520px) {
  body.mobile-game #hud-left-tools { gap:4px; }
  body.mobile-game #hud-left-tools .hud-job { flex-direction:column; justify-content:center; width:58px; height:50px; min-height:50px; padding:3px 2px 5px; gap:1px; border-width:1px; border-radius:10px; text-align:center; }
  body.mobile-game #hud-left-tools .hud-job .hud-edge-art { width:27px; height:27px; border:0; background:none; box-shadow:none; }
  body.mobile-game #hud-left-tools .hud-job .hud-edge-art :is(img,svg) { width:29px; height:29px; }
  body.mobile-game #hud-left-tools .hud-job :is(.hud-edge-label,.hud-job-state,.training-hud-count) { display:none; }
  body.mobile-game #hud-left-tools .hud-job-copy { gap:0; }
  body.mobile-game #hud-left-tools .hud-job .hud-job-time { font-size:10px; line-height:12px; }
  body.mobile-game #hud-left-tools .hud-job:is([data-job-state=idle],[data-job-state=locked],[data-job-state=loading]) .hud-job-copy { display:none; }
  body.mobile-game #hud-left-tools .hud-job[data-job-state=active] { border-width:2px; }
  body.mobile-game #hud-left-tools .hud-job[data-job-state=finishing] .hud-job-time { display:none; }
  body.mobile-game #hud-left-tools .hud-job[data-job-state=finishing] .hud-job-copy::after { content:'…'; font-size:13px; line-height:12px; color:var(--ui-ink); }
  body.mobile-game #hud-left-tools .hud-job[data-job-state=locked]::after { content:'⊘'; position:absolute; right:3px; bottom:2px; font-size:10px; color:var(--ui-muted); }
  body.mobile-game #hud-left-tools .hud-job-track { left:5px; right:5px; bottom:2px; height:2px; }
}
@media(max-height:520px) {
  body.mobile-game #hud-left-tools { top:calc(90px + env(safe-area-inset-top,0px)); flex-direction:row; flex-wrap:nowrap; gap:5px; }
  /* Leave the army control its own column when the chat raises map search. */
  body.mobile-game.world-mode:has(#hud-left-tools) .map-overlay-shell .map-overlay-search-toggle { left:calc(var(--edge-gap) + var(--edge-size) + 12px); }
}
@media(max-width:600px) and (max-height:520px) {
}
@media(prefers-reduced-motion:reduce) { body.mobile-game #hud-left-tools .hud-job.is-indeterminate .hud-job-progress { animation:none; } }
/* Phone landscape: keep the complete status HUD inside a shallow, two-row band. */
@media(orientation:landscape) and (max-height:520px) {
  body.mobile-game { --edge-top:82px; }
  body.mobile-game .topbar {
    inset:calc(5px + env(safe-area-inset-top,0px)) 8px auto;
    display:flex;align-items:flex-start;gap:6px;
  }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-template-columns:46px minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:32px 28px;
    gap:3px;width:min(300px,42vw);max-width:300px;padding:4px;border-radius:12px;
    box-shadow:0 3px 0 var(--ui-primary-dark),0 6px 14px #2d213033;
  }
  body.mobile-game #account-button {
    min-height:32px;margin-left:46px;padding-right:39px;gap:4px;
  }
  body.mobile-game #account-button .avatar { left:-46px;width:42px;height:66px;border-radius:8px; }
  body.mobile-game #player-hud-name.name-frame { padding:1px 14px;font-size:9px; }
  body.mobile-game #player-hud-name.name-frame small { margin-top:1px;padding-top:1px;font-size:6px; }
  body.mobile-game .hud-player-level { min-width:23px;padding:2px 4px;font-size:10px; }
  body.mobile-game .hud-rank.hud-vip { inset:6px 6px auto auto!important;min-width:36px;min-height:22px;padding:2px 4px;font-size:7px; }
  body.mobile-game :is(.hud-energy,#lord-talent-button.hud-hunter) { height:28px;min-height:28px;padding:2px 4px;gap:2px;border-radius:8px!important; }
  body.mobile-game .hud-meter-copy { gap:2px; }
  body.mobile-game .hud-meter-copy>span { display:none; }
  body.mobile-game .hud-meter-copy strong { font-size:7px; }
  body.mobile-game .hud-meter-track { height:4px;margin-top:2px; }
  body.mobile-game #resources {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;
    flex:1 1 240px;width:auto;max-width:360px;margin:0;gap:4px;padding:0;
  }
  body.mobile-game #resources .resource { height:32px;min-width:0;padding:1px 4px 1px 1px;gap:1px;border-radius:8px!important; }
  body.mobile-game #resources .resource-icon { width:25px;height:30px;flex-basis:25px; }
  body.mobile-game #resources .resource-icon img { width:30px;height:30px; }
  body.mobile-game #resources .resource>span:last-child { display:block;min-width:0; }
  body.mobile-game #resources .resource strong { display:block;overflow:hidden;text-overflow:ellipsis;font-size:10px;white-space:nowrap; }
  body.mobile-game #resources .resource small { display:none!important; }
  body.mobile-game #hud-gems { flex:0 0 56px;width:56px;min-width:56px;height:48px;padding:0 2px;overflow:hidden; }
  body.mobile-game #hud-gems img { width:34px;height:30px;top:-3px; }
  body.mobile-game #hud-gems strong { margin-top:20px;font-size:10px; }
  body.mobile-game #hud-gems>span { display:none; }
  body.mobile-game #hud-left-tools,
  body.mobile-game:has(.hud-effect-button:not([hidden])) #hud-left-tools {
    top:calc(82px + env(safe-area-inset-top,0px));gap:4px;
  }
  body.mobile-game #hud-left-tools .hud-job {
    width:48px;height:46px;min-height:46px;padding:2px 2px 4px;border-radius:9px;
  }
  body.mobile-game #hud-left-tools .hud-job .hud-edge-art { width:25px;height:25px; }
  body.mobile-game #hud-left-tools .hud-job .hud-edge-art :is(img,svg) { width:27px;height:27px; }
  body.mobile-game #hud-left-tools .hud-job .hud-job-time { font-size:9px;line-height:10px; }
  body.mobile-game #hud-left-tools .hud-job-track { left:4px;right:4px; }
}
/* Keep short action feedback away from the bottom controls and dialog footers. */
body.mobile-game #toast {
  top:calc(10px + env(safe-area-inset-top,0px))!important;
  bottom:auto!important;
  width:max-content!important;
  max-width:min(520px,calc(100vw - 24px))!important;
  box-sizing:border-box;
  padding:8px 14px!important;
  line-height:1.3;
  text-align:center;
  background:var(--ui-card)!important;
  color:var(--ui-ink)!important;
  border:2px solid var(--ui-line)!important;
  border-radius:12px!important;
  box-shadow:var(--ui-shadow)!important;
  transform:translate(-50%,-10px);
}
body.mobile-game #toast.visible { transform:translate(-50%,0); }
body.mobile-game dialog>#toast {
  position:fixed;
  left:50%;
  right:auto;
  margin:0;
  transform:translate(-50%,-10px);
}
body.mobile-game dialog>#toast.visible { transform:translate(-50%,0); }
body.mobile-game .world-chat { background:#e9dfcff5!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; box-shadow:0 -2px 12px #4435491a!important; }
body.mobile-game .world-chat-heading { background:var(--ui-inset)!important; border-color:var(--ui-line)!important; }
body.mobile-game .world-chat :is(button,strong,time,.world-chat-empty,.world-chat-message.mine strong) { color:var(--ui-ink)!important; }
body.mobile-game .world-chat-heading button[aria-pressed=true] { color:var(--ui-ink)!important; box-shadow:inset 0 -3px var(--ui-gold)!important; }
body.mobile-game .world-chat-compose { background:var(--ui-inset)!important; border-color:var(--ui-line)!important; }
body.mobile-game .world-chat-compose input { background:var(--ui-card-light)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; }
body.mobile-game .world-chat-compose input::placeholder { color:var(--ui-muted)!important; }
body.mobile-game .world-chat-compose button { background:var(--ui-green)!important; color:var(--ui-card-light)!important; border-color:var(--ui-green-dark)!important; }
body.mobile-game .world-chat-log { scrollbar-color:var(--ui-line) var(--ui-paper); }
body.mobile-game .world-chat-message p { color:var(--ui-ink); }
/* Keep the permanent conversation compact; dependent HUD controls follow this height. */
body.mobile-game { --world-chat-height:174px; }
@media(max-width:900px) { body.mobile-game { --world-chat-height:clamp(136px,23dvh,174px); } }
@media(max-height:520px) { body.mobile-game { --world-chat-height:min(126px,calc(100dvh - 210px)); } }
body.mobile-game.world-chat-collapsed { --world-chat-height:32px; }
@media(min-width:901px) {
  body.mobile-game.city-mode #hud-objective { left:calc(var(--edge-gap) + 184px); }
}
body.mobile-game .map-overlay-shell .map-overlay-heading { border-radius:11px 11px 0 0; }
/* The overview is centred; chat clearance must not also pin its bottom edge. */
body.mobile-game .map-overlay-shell .map-overlay-navigation-panel { bottom:auto!important; max-height:calc(100dvh - 104px)!important; }
@media(max-height:500px) { body.mobile-game .map-overlay-shell .map-overlay-navigation-panel { max-height:calc(100dvh - 24px)!important; } }
/* Object discovery opens as a bottom sheet, leaving the world visible above it. */
body.mobile-game .map-overlay-shell #atlas-search-panel {
  top:auto; bottom:max(8px,env(safe-area-inset-bottom,0px))!important; left:50%; transform:translateX(-50%);
  width:640px; max-width:calc(100% - 16px); max-height:calc(100dvh - 130px)!important;
  padding:12px; overflow:auto; touch-action:auto;
}
body.mobile-game.world-mode.world-search-open :is(.world-chat,#navigation,#hud-left-tools,#hud-right-tools,.hud-edge-tools,.hud-bottom-tools,.map-overlay-search-toggle,.map-overlay-coordinate-toggle) { visibility:hidden; pointer-events:none; }
#atlas-search-panel .map-overlay-heading { position:sticky; top:-12px; z-index:2; padding-bottom:3px; margin-bottom:6px; }
body.mobile-game #atlas-search-panel .map-overlay-close { width:40px; height:40px; }
#atlas-search-panel .atlas-object-search { display:flex; flex-direction:column; gap:10px; margin:0; min-width:0; }
#atlas-search-panel .atlas-search-categories {
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  padding:4px 2px 10px; scrollbar-width:thin; scrollbar-color:var(--ui-line) var(--ui-inset); touch-action:pan-x;
}
#atlas-search-panel .atlas-object-search button {
  min-height:44px; margin:0; padding:8px; border:2px solid var(--ui-line); border-radius:12px;
  background:var(--ui-card); color:var(--ui-ink); font-family:var(--ui-font); font-weight:700;
  box-shadow:0 3px var(--ui-line); text-shadow:none; cursor:pointer; touch-action:manipulation;
}
#atlas-search-panel .atlas-object-search .atlas-search-category {
  flex:0 0 94px; display:flex; flex-direction:column; align-items:center; justify-content:end;
  gap:4px; min-width:0; padding:6px 3px; scroll-snap-align:start; font-size:12px; line-height:1.2;
}
#atlas-search-panel .atlas-search-category img { display:block; width:70px; height:68px; object-fit:contain; }
#atlas-search-panel .atlas-search-category[aria-pressed=true] { background:var(--ui-gold-soft); border-color:var(--ui-gold); color:var(--ui-ink); box-shadow:0 3px var(--ui-gold); }
#atlas-search-panel .atlas-search-controls { padding:10px 12px; background:var(--ui-inset); border:1px solid var(--ui-line); border-radius:14px; }
#atlas-search-panel .atlas-search-level-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:5px; font-size:13px; }
#atlas-search-panel .atlas-search-level-heading label { margin:0; font-weight:700; }
#atlas-search-panel .atlas-search-level-bounds { color:var(--ui-muted); }
#atlas-search-panel .atlas-search-level-row { display:flex; gap:10px; align-items:center; }
#atlas-search-panel .atlas-search-level-row button { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; padding:9px; }
#atlas-search-panel .atlas-search-level-row svg { width:22px; height:22px; }
#atlas-search-panel #atlas-object-level { flex:1; width:0; min-width:0; height:44px; margin:0; padding:0; appearance:none; background:transparent; cursor:pointer; }
#atlas-object-level::-webkit-slider-runnable-track { height:12px; border:1px solid var(--ui-line); border-radius:9px; background:linear-gradient(to right,var(--ui-green) var(--search-progress),var(--ui-card-light) var(--search-progress)); }
#atlas-object-level::-webkit-slider-thumb { appearance:none; width:26px; height:34px; margin-top:-12px; border:2px solid var(--ui-primary-dark); border-radius:10px; background:var(--ui-primary-light); box-shadow:inset 0 2px var(--ui-card); }
#atlas-object-level::-moz-range-track { height:12px; border-radius:9px; background:var(--ui-card-light); }
#atlas-object-level::-moz-range-progress { height:12px; border-radius:9px; background:var(--ui-green); }
#atlas-object-level::-moz-range-thumb { width:24px; height:32px; border:2px solid var(--ui-primary-dark); border-radius:10px; background:var(--ui-primary-light); }
#atlas-search-panel .atlas-search-level-value { flex:0 0 46px; display:grid; place-items:center; height:42px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-card-light); color:var(--ui-ink); font-size:20px; font-weight:700; }
#atlas-search-panel .atlas-search-hint,#atlas-search-panel .atlas-search-feedback { margin:0; text-align:center; font-size:12px; line-height:1.4; color:var(--ui-muted); }
#atlas-search-panel .atlas-search-feedback:empty { display:none; }
#atlas-search-panel .atlas-search-feedback.is-error { color:var(--ui-red); }
#atlas-search-panel .atlas-object-search .atlas-object-search-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:min(100%,350px); align-self:center; min-height:50px; background:var(--ui-green); border-color:var(--ui-green-dark); color:var(--ui-card-light); box-shadow:0 3px var(--ui-green-dark); font-size:20px; }
#atlas-search-panel .atlas-object-search-submit svg { width:23px; height:23px; }
#atlas-search-panel .atlas-object-search button:disabled { background:var(--ui-disabled); color:var(--ui-muted); border-color:var(--ui-line); box-shadow:none; cursor:default; }
@media(max-width:420px) {
  body.mobile-game .map-overlay-shell #atlas-search-panel { max-width:100%; width:100%; bottom:0!important; padding:10px 10px max(10px,env(safe-area-inset-bottom,0px)); }
  #atlas-search-panel .atlas-search-category img { width:62px; height:62px; }
  #atlas-search-panel .atlas-object-search .atlas-search-category { flex-basis:85px; }
  #atlas-search-panel .atlas-search-level-row { gap:7px; }
}
@media(max-height:500px) {
  body.mobile-game .map-overlay-shell #atlas-search-panel { max-height:calc(100dvh - 16px)!important; width:680px; }
  #atlas-search-panel .atlas-object-search { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:8px 12px; }
  #atlas-search-panel .atlas-search-categories { grid-column:1 / -1; padding-bottom:6px; }
  #atlas-search-panel .atlas-search-category img { width:48px; height:43px; }
  #atlas-search-panel .atlas-object-search .atlas-search-category { flex-basis:76px; font-size:11px; }
  #atlas-search-panel .atlas-search-controls { grid-column:1; grid-row:2 / 4; padding:6px 9px; }
  #atlas-search-panel .atlas-search-level-heading { margin-bottom:0; }
  #atlas-search-panel .atlas-search-hint { grid-column:2; grid-row:2; font-size:10px; }
  #atlas-search-panel .atlas-object-search-submit { grid-column:2; grid-row:3; min-height:44px; font-size:17px; }
  #atlas-search-panel .atlas-search-feedback { grid-column:1 / -1; }
}
/* Horizontal, non-modal object search approved for the world map. */
body.mobile-game.world-mode .map-overlay-shell .map-overlay-search-toggle {
  left:max(12px,var(--edge-gap))!important;
  right:auto!important;
  width:54px;
  height:54px;
  filter:drop-shadow(0 3px 0 var(--ui-primary-dark));
}
body.mobile-game.world-mode .map-overlay-search-toggle .map-overlay-scroll {
  inset:0;
  border:3px solid var(--ui-gold);
  border-radius:50%;
  background:var(--ui-primary);
  box-shadow:inset 0 2px color-mix(in srgb,var(--ui-card-light) 30%,transparent),0 0 0 2px var(--ui-frame);
}
body.mobile-game.world-mode .map-overlay-search-toggle .map-overlay-scroll::before,
body.mobile-game.world-mode .map-overlay-search-toggle .map-overlay-scroll::after { display:none; }
body.mobile-game.world-mode .map-overlay-search-toggle .map-overlay-scroll svg {
  width:30px!important;
  height:30px!important;
  color:var(--ui-gold);
  fill:color-mix(in srgb,var(--ui-gold) 16%,transparent);
  filter:none;
  transform:none;
}
body.mobile-game.world-mode.world-search-open .map-overlay-shell .map-overlay-search-toggle {
  bottom:calc(var(--hud-dock-bottom,8px) + var(--hud-dock-height,68px) + 7px + env(safe-area-inset-bottom,0px))!important;
  z-index:27;
}
body.mobile-game .map-overlay-shell #atlas-search-panel {
  top:auto!important;
  right:auto!important;
  bottom:calc(var(--hud-dock-bottom,8px) + var(--hud-dock-height,68px) + 61px + env(safe-area-inset-bottom,0px))!important;
  left:50%!important;
  width:min(760px,calc(100% - 24px));
  max-width:none;
  max-height:calc(100dvh - var(--hud-dock-height,68px) - 92px)!important;
  padding:9px 10px 10px;
  overflow:visible;
  transform:translateX(-50%)!important;
  border:3px solid var(--ui-frame);
  border-radius:18px;
  background:linear-gradient(145deg,var(--ui-card-light),var(--ui-paper) 62%,var(--ui-inset));
  box-shadow:inset 0 1px var(--ui-card-light),0 4px 0 var(--ui-primary-dark),0 10px 24px color-mix(in srgb,var(--ui-ink) 24%,transparent);
  touch-action:auto;
}
body.mobile-game .map-overlay-shell #atlas-search-panel::after {
  content:'';
  position:absolute;
  right:auto;
  left:24px;
  bottom:-17px;
  width:25px;
  height:25px;
  transform:rotate(45deg);
  border-right:3px solid var(--ui-frame);
  border-bottom:3px solid var(--ui-frame);
  background:var(--ui-inset);
  box-shadow:3px 3px 0 var(--ui-primary-dark);
}
body.mobile-game.world-mode.world-search-open .world-chat { visibility:hidden!important; pointer-events:none!important; }
body.mobile-game.world-mode.world-search-open :is(#navigation,.topbar,#hud-left-tools,.hud-bottom-tools,.map-overlay-search-toggle,.map-overlay-coordinate-toggle) {
  visibility:visible!important;
  pointer-events:auto!important;
}
body.mobile-game.world-mode.world-search-open .hud-right-tools { visibility:hidden!important; pointer-events:none!important; }
#atlas-search-panel .map-overlay-heading {
  position:static;
  min-height:34px;
  margin:0 0 5px;
  padding:0 3px 4px;
  border:0;
  background:transparent!important;
  color:var(--ui-ink)!important;
}
#atlas-search-panel .map-overlay-heading h2 { color:var(--ui-ink)!important; font-size:22px!important; }
#atlas-search-panel .map-search-collapse {
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-height:44px;
  margin:-5px -3px -5px 0;
  padding:8px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ui-primary-dark);
  box-shadow:none;
  cursor:pointer;
  touch-action:manipulation;
}
#atlas-search-panel .map-search-collapse svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#atlas-search-panel .atlas-object-search {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  align-items:end;
  margin:0;
  min-width:0;
}
#atlas-search-panel .atlas-search-categories {
  grid-column:1 / -1;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:2px 2px 6px;
  scrollbar-width:thin;
  scrollbar-color:var(--ui-line) transparent;
  touch-action:pan-x;
}
#atlas-search-panel .atlas-object-search .atlas-search-category {
  position:relative;
  flex:0 0 88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:end;
  gap:2px;
  min-width:0;
  height:86px;
  padding:4px 3px;
  scroll-snap-align:start;
  font-size:12px;
  line-height:1.1;
}
#atlas-search-panel .atlas-search-category img { width:58px; height:54px; }
#atlas-search-panel .atlas-search-category[aria-pressed=true] {
  background:var(--ui-primary);
  border-color:var(--ui-gold);
  color:var(--ui-card-light);
  box-shadow:0 3px var(--ui-gold);
}
#atlas-search-panel .atlas-search-controls { min-width:0; padding:5px 7px 7px; }
#atlas-search-panel .atlas-search-level-heading { margin-bottom:2px; font-size:12px; }
#atlas-search-panel .atlas-search-level-row { gap:6px; }
#atlas-search-panel #atlas-object-level { min-width:54px; }
#atlas-search-panel .atlas-search-level-value { order:0; flex-basis:44px; font-family:var(--ui-font-number); }
#atlas-search-panel .atlas-search-hint,#atlas-search-panel .atlas-search-feedback { grid-column:1 / -1; font-size:11px; line-height:1.25; }
#atlas-search-panel .atlas-object-search .atlas-object-search-submit {
  grid-column:2;
  grid-row:2;
  width:auto;
  min-width:168px;
  min-height:58px;
  padding-inline:12px;
  font-size:18px;
  white-space:nowrap;
}
@media(max-width:600px) {
  body.mobile-game .map-overlay-shell #atlas-search-panel { width:calc(100% - 12px); padding-inline:7px; border-radius:15px; }
  #atlas-search-panel .atlas-object-search { gap:6px; }
  #atlas-search-panel .atlas-object-search .atlas-search-category { flex-basis:78px; height:80px; font-size:11px; }
  #atlas-search-panel .atlas-search-category img { width:51px; height:49px; }
  #atlas-search-panel .atlas-search-level-bounds { display:none; }
  #atlas-search-panel .atlas-object-search .atlas-object-search-submit { min-width:138px; padding-inline:8px; font-size:15px; }
  #atlas-search-panel .atlas-search-hint { display:none; }
}
@media(max-width:360px) {
  #atlas-search-panel .atlas-object-search .atlas-search-category { flex-basis:72px; }
  #atlas-search-panel .atlas-search-controls { padding-inline:4px; }
  #atlas-search-panel .atlas-search-level-row { gap:3px; }
  #atlas-search-panel .atlas-search-level-row button { flex-basis:40px; width:40px; padding:8px; }
  #atlas-search-panel #atlas-object-level { min-width:30px; }
  #atlas-search-panel .atlas-search-level-value { flex-basis:40px; }
  #atlas-search-panel .atlas-object-search .atlas-object-search-submit { min-width:116px; padding-inline:5px; font-size:13px; }
  #atlas-search-panel .atlas-object-search-submit svg { display:none; }
}
@media(max-height:500px) and (orientation:landscape) {
  body.mobile-game.world-mode.world-search-open :is(#world-search-topbar-guard,.topbar) { visibility:hidden!important; pointer-events:none!important; }
  body.mobile-game.world-mode:not(.world-search-open) .map-overlay-shell .map-overlay-search-toggle {
    right:auto!important;
    left:calc(var(--edge-gap) + var(--edge-size) + 12px)!important;
  }
  body.mobile-game.world-mode.world-search-open .map-overlay-shell .map-overlay-search-toggle {
    right:auto!important;
    left:calc(50% - min(340px,calc(50% - 55px)) + 12px)!important;
  }
  body.mobile-game .map-overlay-shell #atlas-search-panel {
    bottom:calc(var(--hud-dock-bottom,4px) + var(--hud-dock-height,60px) + 49px + env(safe-area-inset-bottom,0px))!important;
    width:min(680px,calc(100% - 110px));
    padding:5px 8px 7px;
  }
  body.mobile-game.world-mode.world-search-open .map-overlay-shell .map-overlay-search-toggle { bottom:calc(var(--hud-dock-bottom,4px) + var(--hud-dock-height,60px) + 2px + env(safe-area-inset-bottom,0px))!important; }
  #atlas-search-panel .map-overlay-heading { min-height:27px; margin-bottom:2px; padding-bottom:1px; }
  #atlas-search-panel .map-overlay-heading h2 { font-size:17px!important; }
  #atlas-search-panel .map-search-collapse { width:36px; height:36px; min-height:36px; }
  #atlas-search-panel .atlas-search-categories { gap:6px; padding-bottom:3px; }
  #atlas-search-panel .atlas-object-search .atlas-search-category { flex-basis:70px; height:61px; padding:2px; font-size:10px; }
  #atlas-search-panel .atlas-search-category img { width:43px; height:38px; }
  #atlas-search-panel .atlas-search-controls { padding:2px 5px 4px; }
  #atlas-search-panel .atlas-search-level-heading { display:none; }
  #atlas-search-panel .atlas-search-level-row button { height:40px; min-height:40px; }
  #atlas-search-panel #atlas-object-level { height:40px; }
  #atlas-search-panel .atlas-search-level-value { height:38px; }
  #atlas-search-panel .atlas-object-search .atlas-object-search-submit { min-height:44px; font-size:14px; }
  #atlas-search-panel .atlas-search-hint { display:none; }
}
body.mobile-game .map-overlay-shell :is(.atlas-nearby-row,.atlas-target-portrait,.atlas-zone-jumps button,.atlas-zoom,.atlas-target-actions:not(.is-village):not(.is-encounter)) {
  background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important;
}
body.mobile-game .map-overlay-shell :is(.atlas-nearby-row small,.map-overlay-state,.atlas-biome-label) { color:var(--ui-muted)!important; }
body.mobile-game .map-overlay-shell .atlas-minimap { border:2px solid var(--ui-frame)!important; border-radius:12px!important; background:#b9c985!important; }
body.mobile-game .map-overlay-shell .atlas-village-banner { background:var(--ui-card); color:var(--ui-ink); border:2px solid var(--ui-line); box-shadow:0 3px #44354926; clip-path:none; border-radius:12px; text-shadow:none; }
body.mobile-game .map-overlay-shell .atlas-village-banner::after { display:none; }
body.mobile-game .map-overlay-shell .atlas-village-banner :is(strong,small,button) { color:var(--ui-ink); text-shadow:none; background:transparent; }
body.mobile-game .map-overlay-shell .is-simple-target .atlas-village-banner { border-color:var(--ui-frame); border-radius:14px; background:linear-gradient(to bottom,var(--ui-primary-light),var(--ui-primary) 58%,var(--ui-card) 58%); box-shadow:inset 0 2px color-mix(in srgb,var(--ui-card-light) 45%,transparent),0 3px var(--ui-frame),0 6px 12px color-mix(in srgb,var(--ui-ink) 18%,transparent); }
body.mobile-game .map-overlay-shell .is-simple-target .atlas-village-banner strong { color:var(--ui-card-light); }
body.mobile-game .map-overlay-shell .is-charm { --charm-grade:var(--ui-muted);--charm-grade-dark:var(--ui-ink); }
body.mobile-game .map-overlay-shell .is-charm[data-grade=epic] { --charm-grade:var(--ui-purple);--charm-grade-dark:color-mix(in srgb,var(--ui-purple) 70%,var(--ui-primary-dark)); }
body.mobile-game .map-overlay-shell .is-charm[data-grade=legendary] { --charm-grade:var(--ui-orange);--charm-grade-dark:color-mix(in srgb,var(--ui-orange) 72%,var(--ui-ink)); }
body.mobile-game .map-overlay-shell .is-charm .atlas-village-banner { min-height:44px; padding:4px 8px 5px; border-color:var(--charm-grade-dark); background:linear-gradient(to bottom,color-mix(in srgb,var(--charm-grade) 76%,var(--ui-card-light)),var(--charm-grade) 52%,var(--ui-card) 52%); box-shadow:inset 0 2px color-mix(in srgb,var(--ui-card-light) 45%,transparent),0 3px var(--charm-grade-dark),0 6px 12px color-mix(in srgb,var(--ui-ink) 18%,transparent); }
body.mobile-game .map-overlay-shell .is-charm .atlas-village-banner strong { align-self:start; max-width:100%; line-height:16px; }
body.mobile-game .map-overlay-shell .is-charm .atlas-charm-summary { align-self:end; width:100%; margin:1px 0 0; padding:2px 2px 0; border:0; border-radius:0; color:var(--ui-muted); font:9px/11px var(--ui-font-number); white-space:normal; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-charm .atlas-action:nth-child(1) { --action-x:-38px;--action-y:8px; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-charm .atlas-action:nth-child(2) { --action-x:38px;--action-y:8px; }
body.mobile-game .map-overlay-shell .atlas-village-banner>button { border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-card); box-shadow:inset 0 1px var(--ui-card-light),0 2px var(--ui-frame); }
body.mobile-game .map-overlay-shell .atlas-village-banner>button:focus-visible { outline:3px solid var(--ui-gold); outline-offset:2px; }
/* Carved medallions: warm rim, quiet two-tone face and a small ivory nameplate. */
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action { --action-face:var(--ui-primary-light); --action-shade:var(--ui-primary); text-shadow:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action.is-attack { --action-face:var(--ui-red); --action-shade:color-mix(in srgb,var(--ui-red) 80%,var(--ui-frame)); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action.is-gather { --action-face:var(--ui-green); --action-shade:var(--ui-green-dark); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action.is-debuff { --action-face:var(--ui-purple); --action-shade:color-mix(in srgb,var(--ui-purple) 80%,var(--ui-frame)); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action-disc { position:relative;isolation:isolate;width:50px;height:54px;flex-shrink:0;border:2px solid var(--ui-frame);border-radius:18px 18px 22px 22px;clip-path:none;filter:none;background:linear-gradient(150deg,var(--ui-card),var(--ui-line));color:var(--ui-card-light);box-shadow:inset 0 1px var(--ui-card-light),0 3px var(--ui-frame),0 5px 8px color-mix(in srgb,var(--ui-ink) 22%,transparent); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action-disc::before { content:"";display:block;position:absolute;z-index:-1;inset:4px;border:1px solid var(--action-shade);border-radius:12px 12px 16px 16px;clip-path:none;background:linear-gradient(150deg,var(--action-face) 55%,var(--action-shade) 56%);box-shadow:inset 0 2px color-mix(in srgb,var(--ui-card-light) 35%,transparent); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action-disc::after { content:"";display:block;position:absolute;inset:auto;left:50%;bottom:1px;width:4px;height:4px;translate:-50% 0;border-radius:50%;clip-path:none;background:var(--ui-frame); }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action-disc svg { width:26px;height:26px;stroke-width:1.9;filter:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action>span:last-child { position:relative;z-index:1;margin-top:-2px;padding:2px 6px;background:var(--ui-card);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:7px;box-shadow:inset 0 1px var(--ui-card-light),0 2px color-mix(in srgb,var(--ui-frame) 65%,transparent);text-shadow:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action:disabled { --action-face:var(--ui-disabled);--action-shade:var(--ui-line);cursor:not-allowed; }
body.mobile-game .map-overlay-shell .atlas-target-actions .atlas-action:disabled .atlas-action-disc { color:var(--ui-muted); }
/* The own castle keeps its identity below the artwork and uses a compact icon-only action dock. */
body.mobile-game .map-overlay-shell .atlas-target-actions.is-village.is-own-village {
  display:flex;flex-direction:column;align-items:center;gap:5px;width:max-content;max-width:calc(100% - 16px);height:auto;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;pointer-events:none;font-family:var(--ui-font);
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-village-banner {
  position:relative;inset:auto;left:auto;top:auto!important;translate:none;width:max-content;min-width:118px;max-width:190px;min-height:30px;
  padding:3px 34px 3px 12px;border:2px solid var(--ui-orange);border-radius:12px;background:var(--ui-card);color:var(--ui-ink);
  box-shadow:inset 0 1px var(--ui-card-light),0 2px color-mix(in srgb,var(--ui-frame) 65%,transparent);clip-path:none;pointer-events:auto;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-village-banner strong {
  max-width:142px;color:var(--ui-ink);font-size:13px;line-height:20px;text-shadow:none;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-village-banner small { display:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-village-banner>button {
  right:3px;top:2px;width:26px;height:26px;padding:5px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card);color:var(--ui-ink);
  box-shadow:none;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-actions-buttons {
  position:relative;inset:auto;display:flex;align-items:center;justify-content:center;gap:4px;width:max-content;height:auto;padding:5px;
  border:2px solid var(--ui-frame);border-radius:14px;background:color-mix(in srgb,var(--ui-paper) 97%,transparent);
  box-shadow:inset 0 1px var(--ui-card),0 3px var(--ui-primary-dark);pointer-events:auto;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action {
  position:relative;inset:auto;left:auto;bottom:auto;display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;height:44px;margin:0;padding:0;
  border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card);color:var(--ui-primary);box-shadow:0 2px color-mix(in srgb,var(--ui-frame) 35%,transparent);
  translate:none;scale:none;text-shadow:none;transition:transform .16s ease,filter .16s ease;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action:hover { translate:none;transform:translateY(-2px);filter:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action:active { translate:none;transform:translateY(1px); }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action:focus-visible { translate:none;filter:none;outline:3px solid var(--ui-gold);outline-offset:2px; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action-disc {
  position:static;display:grid;place-items:center;width:23px;height:23px;min-width:23px;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;filter:none;clip-path:none;
}
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action-disc::before,
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action-disc::after { display:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action-disc svg { width:23px;height:23px;filter:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action>span:last-child { display:none; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action.is-city {
  border-color:var(--ui-primary-dark);background:var(--ui-primary);color:var(--ui-card-light);box-shadow:0 2px var(--ui-primary-dark);
}
@media(max-height:520px) and (orientation:landscape) {
  body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village { gap:3px; }
  body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-village-banner { min-height:28px; }
  body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-actions-buttons { padding:4px; }
  body.mobile-game .map-overlay-shell .atlas-target-actions.is-own-village .atlas-action { flex-basis:40px;width:40px;min-height:40px;height:40px; }
}
/* An empty tile only offers two secondary actions and should not read like a full target card. */
.map-overlay-shell .atlas-target-actions.is-empty-cell { width:190px;padding:5px 7px 7px;border-radius:12px; }
.map-overlay-shell .is-empty-cell .atlas-actions-heading { margin-bottom:2px;font-size:10px; }
.map-overlay-shell .is-empty-cell .atlas-actions-buttons { gap:5px; }
.map-overlay-shell .is-empty-cell .atlas-action { min-height:54px;gap:2px;font-size:10px; }
body.mobile-game .map-overlay-shell .is-empty-cell .atlas-action-disc { width:40px;height:43px;border-radius:14px 14px 17px 17px; }
body.mobile-game .map-overlay-shell .is-empty-cell .atlas-action-disc::before { inset:3px;border-radius:10px 10px 13px 13px; }
body.mobile-game .map-overlay-shell .is-empty-cell .atlas-action-disc svg { width:21px;height:21px; }
body.mobile-game .map-overlay-shell .is-empty-cell .atlas-action>span:last-child { padding:1px 5px; }
body.mobile-game .map-overlay-shell .atlas-cell-focus { border-color:var(--ui-gold)!important; background:#fff0c433!important; }
/* Coordinate sign: ivory lettering panel and a painted blue map medallion. */
body.mobile-game .map-overlay-shell .map-overlay-coordinate-toggle {
  width:164px; min-width:164px; height:44px; gap:0; padding:0!important; cursor:default;
  border:2px solid var(--ui-frame); border-radius:20px;
  background:var(--ui-card); color:var(--ui-ink); font-family:var(--ui-font); text-shadow:none;
  box-shadow:inset 0 2px var(--ui-card-light),inset 0 -2px var(--ui-inset),0 3px var(--ui-frame),0 5px 8px color-mix(in srgb,var(--ui-ink) 18%,transparent);
}
body.mobile-game .map-overlay-coordinate-toggle>button {
  display:flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:0;
  border:0; background:transparent; color:var(--ui-ink); box-shadow:none; text-shadow:none;
  font-family:var(--ui-font); cursor:pointer; touch-action:manipulation;
}
body.mobile-game .map-overlay-coordinate-toggle .map-overlay-home {
  flex:0 0 44px; width:44px; border-right:1px solid var(--ui-line); border-radius:20px 0 0 20px;
}
body.mobile-game .map-overlay-coordinate-toggle .map-overlay-navigation-toggle {
  flex:1; gap:4px; padding:0 4px; border-radius:0 18px 18px 0;
}
body.mobile-game .map-overlay-home>svg {
  width:19px; height:19px; color:var(--ui-muted); fill:var(--ui-gold); stroke-width:2;
}
body.mobile-game .map-overlay-coordinate-toggle .atlas-coordinates {
  flex:1; min-width:78px; color:var(--ui-ink); font:700 11px/1.2 var(--ui-font);
  font-variant-numeric:tabular-nums; letter-spacing:0; white-space:nowrap; text-shadow:none;
}
body.mobile-game .map-overlay-coordinate-toggle .map-overlay-globe {
  flex:0 0 26px; width:26px; height:26px; border:2px solid var(--ui-blue-dark); border-radius:50%;
  background:linear-gradient(145deg,var(--ui-blue-light) 52%,var(--ui-blue) 53%);
  box-shadow:inset 0 1px color-mix(in srgb,var(--ui-card-light) 50%,transparent),0 1px var(--ui-line);
}
body.mobile-game .map-overlay-coordinate-toggle .map-overlay-globe svg {
  width:17px; height:17px; color:var(--ui-card-light); stroke-width:1.8;
}
body.mobile-game .map-overlay-coordinate-toggle>button:is(:active,[aria-expanded=true]) {
  background:var(--ui-inset); box-shadow:inset 0 2px var(--ui-line);
}
body.mobile-game .map-overlay-coordinate-toggle>button:focus-visible { outline:3px solid var(--ui-primary); outline-offset:2px; }
@media(max-width:360px) {
  body.mobile-game .map-overlay-shell .map-overlay-coordinate-toggle { width:158px; min-width:158px; }
  body.mobile-game .map-overlay-coordinate-toggle .atlas-coordinates { min-width:72px; font-size:10px; }
}
body.mobile-game .map-overlay-shell .atlas-biome-label { background:#e9dfcfdc!important; color:var(--ui-ink)!important; text-shadow:none!important; border:1px solid var(--ui-line); border-radius:9px; padding:5px 12px; }
/* Building context menus live in the embedded 3D document and load this same file. */
body.play-city { --ink:var(--ui-ink); color:var(--ui-ink); font-family:var(--ui-font); }
body.play-city :is(#realm-panel,#building-function-panel,.building-actions) { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border:2px solid var(--ui-frame)!important; border-radius:var(--ui-radius-window)!important; box-shadow:var(--ui-shadow)!important; }
body.play-city :is(.function-head,.realm-panel-head) { background:var(--ui-primary)!important; color:var(--ui-card)!important; border-color:var(--ui-primary-dark)!important; }
body.play-city :is(.function-head,.realm-panel-head) h2 { color:var(--ui-card)!important; font-family:var(--ui-font)!important; }
body.play-city :is(.function-body,.building-actions,#realm-panel-content) :is(h3,p,small,label,strong,span) { color:inherit; text-shadow:none; }
body.play-city :is(.training-stat span,.training-types button,.training-tabs,.training-type-choice,.training-row,.realm-link) { background:var(--ui-inset)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; border-radius:9px!important; }
body.play-city :is(.training-types,.training-tabs) [aria-pressed=true] { background:var(--ui-gold-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-gold)!important; }
body.play-city :is(.function-body,.building-actions) :is(input,select) { background:var(--ui-card-light)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; }
body.play-city :is(.primary,.training-submit) { background:var(--ui-green)!important; color:var(--ui-card-light)!important; border-color:var(--ui-green-dark)!important; box-shadow:0 2px #44354926!important; }
body.play-city :is(.controls button,.function-head button,.realm-panel-head button,#profile-tools button) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; }
body.play-city #building-command .action-disc { border-color:var(--ui-frame)!important; box-shadow:0 2px #44354940!important; }
body.play-city #building-command .quick-actions { background:var(--ui-paper)!important; border:2px solid var(--ui-frame)!important; border-radius:12px!important; box-shadow:var(--ui-shadow)!important; }
body.play-city #building-command .quick-actions button { color:var(--ui-ink)!important; text-shadow:none!important; }
body.play-city #building-command .action-disc { background:var(--ui-card)!important; color:var(--ui-ink)!important; }
body.play-city #building-command #building-upgrade .action-disc { background:var(--ui-green)!important; color:var(--ui-card-light)!important; }
body.play-city #building-command #building-function .action-disc { background:var(--ui-primary-light)!important; color:var(--ui-card-light)!important; }
/* The village menu is a compact sign attached to a building, not a world-map sheet. */
body.play-city #building-command { width:264px; max-width:calc(100vw - 24px); }
body.play-city #building-command .building-command-shell { position:relative; filter:drop-shadow(0 7px 10px #30263852); }
body.play-city #building-command .building-command-shell::before { content:""; position:absolute; z-index:-1; top:-8px; left:50%; width:16px; height:16px; transform:translateX(-50%) rotate(45deg); background:var(--ui-primary); border:2px solid var(--ui-frame); border-right:0; border-bottom:0; }
body.play-city #building-command .building-command-head { position:relative; z-index:1; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 6px 5px 12px; border:2px solid var(--ui-frame); border-bottom:1px solid var(--ui-primary-dark); border-radius:13px 13px 0 0; background:var(--ui-primary); color:var(--ui-card-light); }
body.play-city #building-command .building-command-head>span { display:flex; align-items:baseline; gap:7px; min-width:0; }
body.play-city #building-command .building-command-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 13px/1.2 var(--ui-font); color:var(--ui-card-light); }
body.play-city #building-command .building-command-head small { flex:none; font:700 10px/1 var(--ui-font-number); color:var(--ui-gold-soft); }
body.play-city #building-command #close-building-command { flex:none; width:29px; height:29px; min-width:29px; min-height:29px; padding:0; border:1px solid color-mix(in srgb,var(--ui-gold) 70%,transparent); border-radius:9px; background:color-mix(in srgb,var(--ui-card) 14%,transparent); color:var(--ui-card-light); font:700 21px/1 var(--ui-font); box-shadow:none; }
body.play-city #building-command #close-building-command:active { background:var(--ui-primary-dark); }
body.play-city #building-command .quick-actions { display:flex; align-items:stretch; gap:0!important; margin:0; padding:5px 4px 6px!important; border-width:0 2px 2px!important; border-radius:0 0 13px 13px!important; background:color-mix(in srgb,var(--ui-paper) 96%,transparent)!important; box-shadow:none!important; }
body.play-city #building-command .quick-actions button { position:relative; flex:1 1 0; min-width:0; min-height:54px; padding:3px 2px; gap:2px; border-radius:9px; background:transparent; }
body.play-city #building-command .quick-actions button+button::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--ui-line); }
body.play-city #building-command .quick-actions button:is(:hover,:focus-visible) { background:var(--ui-inset); }
body.play-city #building-command .quick-actions button>span:not(.action-disc) { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 10px/1.15 var(--ui-font); }
body.play-city #building-command .action-disc { width:34px; height:34px; font-size:21px; border-radius:11px; }
body.play-city #building-command .building-actions { margin-top:7px; }
@media(max-width:600px) and (orientation:portrait) {
  body.play-city.embedded #building-command { width:min(248px,calc(100vw - 84px)); }
  body.play-city #building-command .building-command-head strong { font-size:12px; }
  body.play-city #building-command .quick-actions button { min-height:52px; }
}
@media(max-height:500px) and (orientation:landscape) {
  body.play-city #building-command { width:248px; }
  body.play-city #building-command .building-command-head { min-height:32px; }
  body.play-city #building-command .quick-actions button { min-height:48px; }
  body.play-city #building-command .action-disc { width:30px; height:30px; font-size:19px; }
}
/* Backoffice uses the same materials with its existing, denser administrative layout. */
body.admin-village { --bg:var(--ui-paper); --panel:var(--ui-card); --line:var(--ui-line); --text:var(--ui-ink); --muted:var(--ui-muted); --accent:var(--ui-primary); --green:var(--ui-green-dark); background:var(--ui-paper); color:var(--ui-ink); font-family:var(--ui-font); }
.admin-village :is(.sidebar,.topbar) { background:var(--ui-primary); color:var(--ui-card-light); border-color:var(--ui-primary-dark); }
.admin-village :is(.sidebar .brand,.sidebar .brand small,.sidebar .sidebar-bottom,.sidebar .sidebar-bottom small,.sidebar nav a,.topbar>span,.topbar label) { color:var(--ui-card-light); }
.admin-village :is(label,th,.section-title,footer) { color:var(--ui-ink); }
.admin-village :is(.stat,.hint,.notice,pre,.avatar,.brand-mark) { background:var(--ui-card); color:var(--ui-ink); border-color:var(--ui-line); }
.admin-village .sidebar nav a:hover { background:var(--ui-primary-light);color:var(--ui-card-light); }
.admin-village .sidebar nav a.active { background:var(--ui-gold-soft); color:var(--ui-ink); box-shadow:0 3px var(--ui-gold); }
.admin-village .sidebar .nav-caption { color:var(--ui-gold-soft); }
.admin-village a { color:var(--ui-primary); }
.admin-village :is(.quick-action>span,details summary,.source-arrow,.pagination a,.sidebar-bottom a) { color:var(--ui-primary); }
.admin-village .sidebar .sidebar-bottom a { color:var(--ui-gold-soft); }
.admin-village :is(button,.button) { background:var(--ui-green); color:var(--ui-card-light); border-color:var(--ui-green-dark); }
.admin-village .secondary { background:var(--ui-card); color:var(--ui-ink); border-color:var(--ui-line); }
.admin-village .danger { background:var(--ui-red); color:var(--ui-card-light); }
.admin-village :is(input,select,textarea) { background:var(--ui-card-light); color:var(--ui-ink); border-color:var(--ui-line); }
.admin-village :is(td,.progress,.pill) { border-color:var(--ui-line); }.admin-village .pill { background:var(--ui-inset); }
.admin-village .progress { background:var(--ui-inset); }.admin-village .progress i { background:var(--ui-green); }
.admin-village :is(.notice.success,.pill.open,.pill.running) { background:var(--ui-green-soft); color:var(--ui-green-dark); border-color:#72974f; }
.admin-village .notice.error { background:var(--ui-red-soft); color:#85342b; border-color:#bd7865; }
.admin-village .login-box { background:var(--ui-card); color:var(--ui-ink); border:2px solid var(--ui-frame); border-radius:var(--ui-radius-window); box-shadow:var(--ui-shadow); }
.admin-village .login-box h1 { color:var(--ui-primary); }.admin-village .admin-hint { color:var(--ui-muted); }
.admin-village .login-box .error { background:var(--ui-red-soft); color:#85342b; }.admin-village .login-box .flash { background:var(--ui-green-soft); color:var(--ui-green-dark); }
.admin-village :is(button,a,input,select,textarea,summary):focus-visible { outline-color:var(--ui-primary); }
.admin-village :is(.reward-tabs a.active,.source-choice.is-selected) { background:var(--ui-gold-soft);color:var(--ui-ink);border-color:var(--ui-gold);box-shadow:inset 3px 0 var(--ui-gold); }
.admin-village .picker-header { background:var(--ui-primary);color:var(--ui-card-light);border-color:var(--ui-primary-dark); }
/* Reward editing: source selection, applied scope, and a single focused editor. */
.admin-village .reward-workspace { grid-template-columns:292px minmax(0,1fr);gap:20px; }
.admin-village .source-browser { padding:16px;top:16px; }
.admin-village .source-browser>summary { font-size:17px;min-height:44px; }
.admin-village .source-browser>summary small { display:block;margin:5px 0 0;font-size:12px;font-weight:normal;color:var(--ui-muted); }
.admin-village .source-browser .reward-tabs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:16px 0; }
.admin-village .source-browser .reward-tabs a { padding:8px 6px;gap:5px;font-size:13px;min-height:44px; }
.admin-village .source-browser .reward-tabs .admin-icon { width:22px;height:22px; }
.admin-village .source-browser .reward-tabs small { margin-left:auto;font-family:var(--ui-font-number);font-size:11px; }
.admin-village .source-browser .source-list { max-height:calc(100dvh - 350px);min-height:150px; }
body.admin-village .topbar>.pill { color:var(--ui-ink);white-space:normal; }
.admin-village .reward-editor { padding:20px; }
.admin-village .reward-hero { margin:-20px -20px 0;padding:18px 20px;border-radius:15px 15px 0 0;background:var(--ui-primary);color:var(--ui-card-light);border-bottom:3px solid var(--ui-gold);gap:16px; }
.admin-village .reward-hero :is(h2,p,.eyebrow) { color:var(--ui-card-light); }
.admin-village .reward-hero h2 { margin:2px 0; }
.admin-village .reward-hero p { margin:0; }
.admin-village .reward-portrait { width:72px;height:72px;border-radius:14px;background:var(--ui-card);border-color:var(--ui-gold); }
.admin-village .reward-context { padding:16px 0;border-bottom:1px solid var(--ui-line);margin-bottom:20px; }
.admin-village .reward-context-current { display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; }
.admin-village .reward-context-current>span:first-child { font-size:14px; }
.admin-village .reward-context-current .pill { white-space:normal; }
.admin-village .reward-context>p { margin:4px 0 0; }
.admin-village .reward-scope-settings { margin-top:5px;font-size:13px; }
.admin-village .reward-scope-settings summary { min-height:44px;align-content:center; }
.admin-village .reward-scope-form { display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:14px;background:var(--ui-paper);border-radius:12px;margin-bottom:12px; }
.admin-village .reward-scope-form label { flex:1 1 180px;min-width:0; }
.admin-village .reward-section { margin:22px 0;padding:18px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-card-light); }
.admin-village .reward-section h3 { margin:0 0 8px;font-size:18px; }
.admin-village .reward-section .drop-heading { margin:0;flex-wrap:wrap; }
.admin-village .reward-items { padding:0;border:0;background:transparent; }
.admin-village .reward-items-toolbar { display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:14px 0; }
.admin-village .reward-items-toolbar .drop-search { flex:1 1 220px;margin:0; }
.admin-village .reward-items-toolbar button { flex:0 1 auto;font-size:13px; }
.admin-village .reward-items .drop-rows { max-height:560px;gap:8px;margin:0; }
.admin-village .reward-items .drop-row { padding:10px;grid-template-columns:minmax(0,1fr) 76px 90px 52px; }
.admin-village .reward-items .drop-row>div:first-child { grid-column:auto;min-width:0; }
.admin-village .reward-items .drop-row .item-choice { min-height:58px; }
.admin-village .reward-items .drop-row .item-choice img { width:38px;height:38px; }
.admin-village .reward-items .remove-drop { width:44px;min-height:44px; }
.admin-village [data-reward-editor="dungeon"] .reward-items .drop-row { grid-template-columns:minmax(0,1fr) 90px 52px; }
.admin-village .advanced-settings summary { min-height:44px;align-content:center; }
.admin-village :is(.advanced-settings,.reward-reference)>summary small { display:block;font-size:13px;font-weight:normal;color:var(--ui-muted);margin:4px 0 0; }
.admin-village .reward-change-note { padding-top:18px;border-top:1px solid var(--ui-line); }
.admin-village .reward-editor .save-area { position:sticky;bottom:8px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-top:16px;background:var(--ui-card);border:1px solid var(--ui-frame);border-radius:12px;box-shadow:0 3px 0 var(--ui-inset); }
.admin-village .save-area>div { min-width:0; }
.admin-village .save-area strong { display:block;font-size:13px;overflow-wrap:anywhere; }
.admin-village .save-area .save-status { display:block; }
.admin-village .save-area button { flex-shrink:0; }
.admin-village .reward-reference>summary { min-height:44px;font-size:17px; }
.admin-village .reward-reference .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1400px) {
  .admin-village .reward-workspace { grid-template-columns:260px minmax(0,1fr);gap:16px; }
  .admin-village .reward-items .drop-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px; }
  .admin-village .reward-items .drop-row>div:first-child { grid-column:1/-1; }
  .admin-village [data-reward-editor="dungeon"] .reward-items .drop-row { grid-template-columns:minmax(0,1fr) 52px; }
}
@media(max-width:1100px) {
  .admin-village .reward-workspace { display:block; }
  .admin-village .source-browser { position:static; }
  .admin-village .source-browser>summary { margin-bottom:0; }
  .admin-village .source-browser .reward-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .admin-village .source-browser .source-list { max-height:260px; }
}
@media(max-width:680px) {
  .admin-village .reward-editor { padding:14px; }
  .admin-village .reward-hero { margin:-14px -14px 0;padding:14px; }
  .admin-village .reward-portrait { width:60px;height:60px; }
  .admin-village .source-browser .reward-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-village .reward-section { padding:12px; }
  .admin-village .reward-items { padding:0; }
  .admin-village .reward-items-toolbar button { width:100%; }
  .admin-village .reward-scope-form { padding:10px; }
  .admin-village .reward-scope-form button { width:100%; }
  .admin-village .reward-editor .save-area { flex-wrap:wrap;padding:10px;bottom:max(6px,env(safe-area-inset-bottom)); }
  .admin-village .save-area button { width:100%; }
  .admin-village .reward-reference .stats { grid-template-columns:minmax(0,1fr); }
}
@media(max-height:500px) {
  .admin-village .reward-editor .save-area { position:static; }
}
@media(prefers-reduced-motion:reduce) { body.mobile-game :is(#panel-dialog,#game-dialog,.map-overlay-panel) button { transition:none!important; } }

/* A short shared curtain keeps the 3D village and world-map swap from feeling abrupt. */
body.mobile-game .scene-transition {
  position:fixed;
  z-index:58;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--ui-primary-light) 74%,transparent) 0 9%,transparent 36%),
    color-mix(in srgb,var(--ui-primary-dark) 90%,transparent);
  backdrop-filter:blur(3px);
  transition:opacity 260ms ease,visibility 0s linear 330ms;
}
body.mobile-game .scene-transition::before,
body.mobile-game .scene-transition::after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:min(76vmin,620px);
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--ui-gold) 48%,transparent);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
}
body.mobile-game .scene-transition::after {
  width:min(56vmin,450px);
  border-width:2px;
  border-color:color-mix(in srgb,var(--ui-card-light) 38%,transparent);
}
body.mobile-game .scene-transition.is-active {
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
body.mobile-game:has(.scene-transition.is-active) :is(.topbar,#navigation,.hud-edge-tools,#hud-menu,.world-chat) {
  pointer-events:none!important;
}
body.mobile-game .scene-transition.is-covering { opacity:1; }
body.mobile-game .scene-transition.is-covering::before {
  opacity:.65;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity 360ms ease,transform 850ms cubic-bezier(.16,.75,.2,1);
}
body.mobile-game .scene-transition.is-covering::after {
  opacity:.42;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity 360ms ease 80ms,transform 900ms cubic-bezier(.16,.75,.2,1) 40ms;
}
body.mobile-game .scene-transition.is-revealing {
  opacity:0;
  transition-duration:330ms;
}
body.mobile-game .scene-transition-emblem {
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(76px,13vw,112px);
  aspect-ratio:1;
  border:2px solid var(--ui-gold);
  border-radius:50%;
  background:var(--ui-paper);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--ui-primary) 78%,transparent),0 10px 28px #24182f66;
  opacity:0;
  transform:scale(.82);
  transition:opacity 220ms ease,transform 760ms cubic-bezier(.2,.75,.25,1);
}
body.mobile-game .scene-transition-emblem::before,
body.mobile-game .scene-transition-emblem::after {
  content:'';
  position:absolute;
  inset:-13px;
  border:2px dashed color-mix(in srgb,var(--ui-gold) 78%,transparent);
  border-radius:50%;
  opacity:.7;
  animation:scene-compass-spin 9s linear infinite;
}
body.mobile-game .scene-transition-emblem::after {
  inset:-25px;
  border:1px solid color-mix(in srgb,var(--ui-card-light) 48%,transparent);
  animation-direction:reverse;
  animation-duration:13s;
}
body.mobile-game .scene-transition-emblem img {
  width:66%;
  height:66%;
  object-fit:contain;
  filter:drop-shadow(0 2px 1px color-mix(in srgb,var(--ui-primary-dark) 55%,transparent));
}
body.mobile-game .scene-transition.is-covering .scene-transition-emblem {
  opacity:1;
  transform:scale(1);
}
body.mobile-game .scene-transition.is-revealing .scene-transition-emblem {
  opacity:0;
  transform:scale(1.08);
}
body.mobile-game .scene-transition-label {
  position:absolute;
  left:50%;
  top:calc(50% + clamp(70px,11vw,96px));
  min-width:max-content;
  padding:7px 13px 6px;
  border:1px solid color-mix(in srgb,var(--ui-gold) 72%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--ui-primary-dark) 82%,transparent);
  color:var(--ui-card-light);
  font:700 clamp(13px,2vw,17px)/1.1 var(--ui-font);
  letter-spacing:.03em;
  opacity:0;
  transform:translate(-50%,8px);
  transition:opacity 180ms ease,transform 480ms cubic-bezier(.2,.75,.25,1);
}
body.mobile-game .scene-transition.is-covering .scene-transition-label { opacity:1;transform:translate(-50%,0); }
body.mobile-game .scene-transition.is-revealing .scene-transition-label { opacity:0;transform:translate(-50%,-5px); }
@keyframes scene-compass-spin { to { transform:rotate(360deg); } }
@media(max-height:500px) { body.mobile-game .scene-transition-label { top:calc(50% - 94px); } }
body.mobile-game.reduced-motion .scene-transition { display:none; }
@media(prefers-reduced-motion:reduce) { body.mobile-game .scene-transition { display:none; } }

body.mobile-game .playfield-scenes,
body.mobile-game .playfield-scene { position:absolute;inset:0;width:100%;height:100%;overflow:hidden; }
body.mobile-game .playfield-scene { visibility:hidden;pointer-events:none;opacity:0; }
body.mobile-game .playfield-scene.is-active { visibility:visible;pointer-events:auto;opacity:1; }

/* Rally preparation uses the same army composer as attack and gathering. */
body.mobile-game .march-time-dialog { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; padding:0; border:3px solid var(--ui-frame); border-radius:16px; background:var(--ui-paper); color:var(--ui-ink); font-family:var(--ui-font); overflow:auto; }
body.mobile-game .march-time-dialog::backdrop { background:#0008; }
body.mobile-game .march-time-dialog header { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--ui-primary); color:var(--ui-card-light); }
body.mobile-game .march-time-dialog h2 { margin:0; font-size:22px; }
body.mobile-game .march-time-dialog button { cursor:pointer; font:inherit; border:2px solid var(--ui-line); border-radius:10px; background:var(--ui-card); color:var(--ui-ink); min-height:44px; }
body.mobile-game .march-time-dialog header button { width:44px; font-size:28px; }
body.mobile-game .march-time-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px; }
body.mobile-game .march-time-options button { display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 4px; }
body.mobile-game .march-time-options strong { font-size:52px; }
body.mobile-game .march-time-options [aria-pressed=true] { background:var(--ui-green-soft); border-color:var(--ui-green-dark); color:var(--ui-green-dark); }
body.mobile-game .march-time-check { font-size:26px; }
body.mobile-game .march-time-dialog .march-time-ok { display:block; width:45%; margin:0 auto 18px; background:var(--ui-green); color:var(--ui-card-light); border-color:var(--ui-green-dark); font-weight:bold; }
body.mobile-game .march-time-dialog button:focus-visible { outline:3px solid var(--ui-primary); outline-offset:2px; }
body.mobile-game #game-dialog.march-dialog .march-time-button { flex:0 0 auto; min-width:64px; min-height:44px; padding:8px; border:2px solid var(--ui-green-dark); border-radius:9px; background:var(--ui-green); color:var(--ui-card-light); font:700 14px var(--ui-font); cursor:pointer; }
@media(min-width:1000px) and (min-height:601px) {
 body.mobile-game #game-dialog.march-dialog .march-command { display:grid; grid-template-columns:minmax(180px,.85fr) minmax(290px,1.25fr) minmax(290px,1.2fr); grid-template-rows:52px minmax(0,1fr) auto; gap:8px; padding:0 10px 10px; box-sizing:border-box; }
 body.mobile-game #game-dialog.march-dialog .march-command-heading { grid-column:1/-1; margin:0 -10px; }
 body.mobile-game #game-dialog.march-dialog .march-layout { display:contents; }
 body.mobile-game #game-dialog.march-dialog .march-target { grid-column:1; grid-row:2/4; }
 body.mobile-game #game-dialog.march-dialog .march-formation { grid-column:2; grid-row:2/4; }
 body.mobile-game #game-dialog.march-dialog .march-army { grid-column:3; grid-row:2; }
 body.mobile-game #game-dialog.march-dialog .march-footer { grid-column:3; grid-row:3; gap:6px; padding:6px; margin:0; flex-wrap:wrap; }
 body.mobile-game #game-dialog.march-dialog .march-footer .march-presets { flex:1 0 100%; display:flex; justify-content:space-between; }
 body.mobile-game #game-dialog.march-dialog .march-selected-cards { align-content:start; }
 body.mobile-game #game-dialog.march-dialog .march-summary { grid-template-columns:1fr 1fr; margin-top:auto; }
}
@media(max-width:420px), (max-height:420px) {
 body.mobile-game .march-time-options { gap:6px; padding:10px; }
 body.mobile-game .march-time-options button { padding:10px 2px; gap:6px; }
 body.mobile-game .march-time-options strong { font-size:34px; }
 body.mobile-game .march-time-dialog header { padding:6px 10px; }
 body.mobile-game #game-dialog.march-dialog .march-footer { gap:5px; }
 body.mobile-game #game-dialog.march-dialog .march-time-button { min-width:54px; font-size:12px; }
}

/* Own marches and gathering fields share the village HUD materials. */
body.mobile-game #hud-march-activity { position:fixed; display:flex; flex-direction:column; gap:5px; width:150px; overflow:auto; overscroll-behavior:contain; pointer-events:auto; scrollbar-width:thin; }
body.mobile-game #hud-march-activity[hidden] { display:none; }
body.mobile-game.world-target-open #hud-march-activity { visibility:hidden; pointer-events:none; }
body.mobile-game #hud-march-activity button { flex:none; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 6px; min-height:44px; padding:6px 8px; border:2px solid var(--ui-primary); border-radius:10px; background:var(--ui-paper); color:var(--ui-ink); font:700 11px/1.2 var(--ui-font); text-align:left; box-shadow:0 2px 0 var(--ui-frame); }
body.mobile-game #hud-march-activity small { grid-column:1/-1; font-size:10px; color:var(--ui-muted); }
body.mobile-game #hud-march-activity .hud-march-time { font-variant-numeric:tabular-nums; font-size:11px; }
body.mobile-game #hud-march-activity [data-phase=gathering] { border-color:var(--ui-green-dark); }
body.mobile-game #hud-march-activity [data-phase=returning] { border-color:var(--ui-gold); }
body.mobile-game #hud-march-activity button:focus-visible { outline:3px solid var(--ui-primary); outline-offset:1px; }
.atlas-gathering-badge { position:absolute; z-index:3; top:calc(100% + 2px); left:50%; transform:translateX(-50%); max-width:160px; padding:3px 6px; border:1px solid var(--ui-frame); border-radius:7px; background:var(--ui-paper); color:var(--ui-ink); font:700 11px/1.2 var(--ui-font); text-shadow:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.atlas-gathering-badge[hidden] { display:none; }
.atlas-gathering-badge.is-own { background:var(--ui-green-soft); border-color:var(--ui-green-dark); }
.atlas-gathering-badge.is-enemy { background:var(--ui-red-soft); border-color:var(--ui-red); }
body.mobile-game .atlas-village-banner .atlas-node-status { color:var(--ui-green-dark); white-space:normal; }
@media(max-width:600px) { body.mobile-game #hud-march-activity { width:132px; } body.mobile-game #hud-march-activity button { padding:5px 6px; } }
@media(max-height:500px) and (orientation:landscape) { body.mobile-game #hud-march-activity { width:170px; } }
/* Ready quest rewards use the shared gold notification palette. */
body.mobile-game #navigation .dock-badge { width:auto; min-width:21px; height:21px; padding:1px 4px; border:2px solid var(--ui-paper); border-radius:12px; background:var(--ui-gold); color:var(--ui-ink); font:800 11px/1 var(--ui-font); text-shadow:none; box-shadow:0 2px 0 var(--ui-frame); }
body.mobile-game #navigation .dock-badge[hidden] { display:none; }
/* HUD navigation uses violet application chrome around the existing illustrated icons. */
body.mobile-game #navigation .game-dock-item,
body.mobile-game #navigation .game-dock-item.hud-scene-switch,
body.mobile-game .hud-main-button {
  border-color:var(--ui-frame)!important;
  background:linear-gradient(160deg,var(--ui-primary-light),var(--ui-primary) 64%,var(--ui-primary-dark) 65%)!important;
  box-shadow:inset 0 0 0 1px #ffffff30,0 3px 0 var(--ui-primary-dark),0 4px 6px #44305255!important;
  color:var(--ui-card-light)!important;
}
body.mobile-game #navigation .game-dock-item.current {
  border-color:var(--ui-gold)!important;
  box-shadow:inset 0 0 0 1px #ffffff30,0 3px 0 var(--ui-primary-dark),0 0 10px #c5a36170!important;
}
body.mobile-game #navigation .dock-label,
body.mobile-game .hud-main-button>span {
  z-index:2;background:var(--ui-primary-dark)!important;color:var(--ui-card-light)!important;
  font-family:var(--ui-font)!important;text-transform:none!important;
  text-shadow:0 1px 1px #24192c!important;
}
body.mobile-game #navigation .game-dock-item.current .dock-label { background:var(--ui-gold-soft)!important;color:var(--ui-ink)!important;text-shadow:none!important; }
body.mobile-game :is(.hud-edge-tools,.hud-right-tools) .hud-edge-art {
  border-color:var(--ui-frame)!important;
  background:linear-gradient(145deg,var(--ui-primary-light),var(--ui-primary) 58%,var(--ui-primary-dark))!important;
  box-shadow:inset 0 0 0 1px #ffffff30,0 3px 0 var(--ui-primary-dark),0 4px 5px #44305255!important;
}
body.mobile-game .hud-vip .hud-edge-art {
  border-color:var(--ui-gold)!important;
  background:linear-gradient(var(--ui-gold-soft),var(--ui-gold))!important;
  box-shadow:inset 0 0 0 1px #ffffff55,0 3px 0 #765a31!important;
}
body.mobile-game :is(.hud-edge-button,.hud-main-button):focus-visible { outline-color:var(--ui-gold)!important; }
body.mobile-game :is(#resources .resource strong,#player-hud-name,#player-hud-name small) { font-family:var(--ui-font)!important;line-height:1.2; }
body.mobile-game #resources .resource strong { font-weight:700; }
body.mobile-game #player-hud-name { font-weight:700; }
/* Five destinations keep clear of the event tools on shorter screens. */
@media(min-width:781px) and (min-height:641px) and (max-height:780px) {
  body.mobile-game #navigation.game-dock { gap:8px; }
  body.mobile-game #navigation .game-dock-item { width:56px; height:52px; }
  body.mobile-game #navigation .dock-icon { width:47px; height:44px; }
  body.mobile-game #navigation .game-dock-item.hud-scene-switch { width:76px; height:68px; }
}
@media(max-height:640px) and (orientation:portrait) {
  body.mobile-game .hud-right-tools { top:calc(151px + env(safe-area-inset-top,0px)); gap:5px; }
  body.mobile-game .hud-right-tools .hud-edge-button { min-height:52px; }
  body.mobile-game #navigation .game-dock-item { width:46px; height:44px; }
  body.mobile-game #navigation .dock-icon { width:38px; height:33px; }
}
@media(max-height:520px) and (orientation:landscape) {
  body.mobile-game .hud-right-tools { flex-direction:row; width:auto; }
  body.mobile-game #navigation.game-dock { flex-direction:row; width:auto; gap:6px; align-items:flex-end; }
  body.mobile-game #navigation .game-dock-item { width:50px; height:48px; }
  body.mobile-game #navigation .dock-icon { top:-5px; width:40px; height:38px; }
  body.mobile-game #navigation .dock-label { font-size:9px; }
  body.mobile-game #navigation .game-dock-item.hud-scene-switch { width:64px; height:59px; margin:0 0 0 4px; }
  body.mobile-game #navigation .hud-scene-switch .dock-icon { top:-14px; width:60px; height:57px; }
  body.mobile-game .world-chat { --world-chat-width:min(330px,calc(100vw - 400px)); }
}
/* Bosses reserve 2 x 2 tiles; their tall silhouette rises above their feet. */
.mobile-game .map-overlay-shell .atlas-marker--monsters.is-regional-boss > img {
  width:calc(var(--tile-size,44px)*2.7);
  height:calc(var(--tile-size,44px)*2.88);
  margin-left:calc(var(--tile-size,44px)*-1.35);
  bottom:calc(var(--tile-size,44px)*.06);
  mix-blend-mode:normal;
}

/* The terrain supplies contact shadows; a second shadow around roofs and
   raised hover poses make grounded artwork look like floating cut-outs. */
.map-overlay-shell .atlas-marker[data-ground-biome]:is(.atlas-marker--home,.atlas-marker--players,.atlas-marker--nodes,.atlas-marker--monsters,.atlas-marker--charms) > img {
  filter:none;
}
.map-overlay-shell .atlas-marker[data-ground-biome]:is(.atlas-marker--home,.atlas-marker--players,.atlas-marker--nodes,.atlas-marker--monsters,.atlas-marker--charms):not(.is-regional-boss) > img {
  transform:none;
}
.atlas-marker[data-ground-biome] .boss-shadow { display:none; }

/* March skins: each silhouette moves with the creature that carries it. */
.map-overlay-shell .atlas-march-party { will-change:transform; }
.map-overlay-shell .atlas-march-party[hidden] { display:none; }
.map-overlay-shell .atlas-march-party .atlas-party-skin img { animation:none; transform-origin:50% 92%; }
.map-overlay-shell .atlas-march-party.is-moving .atlas-party-skin img,.march-skin-portrait>img {
  animation:world-march-walk .82s ease-in-out infinite;
  animation-delay:var(--march-phase,0s);
}
@keyframes world-march-walk { 0%,50%,100%{transform:translateY(0) rotate(-1.3deg) scale(1.012,.988)}25%{transform:translateY(-4px) rotate(1.2deg) scale(.99,1.012)}75%{transform:translateY(-3px) rotate(.4deg) scale(.995,1.008)} }
@keyframes world-march-heavy { 0%,46%,100%{transform:translateY(0) rotate(-.8deg) scale(1.025,.975)}18%{transform:translateY(-2px) rotate(.8deg) scale(.99,1.01)}50%{transform:translateY(1px) scale(1.035,.965)}70%{transform:translateY(-3px) rotate(-.5deg) scale(.995,1.008)} }
@keyframes world-march-gallop { 0%,100%{transform:translateY(1px) rotate(-2deg) scale(1.035,.965)}20%{transform:translateY(-5px) rotate(1deg) scale(.98,1.025)}43%{transform:translateY(-2px) rotate(-.5deg) scale(1.015,.985)}62%{transform:translateY(-6px) rotate(1.5deg) scale(.975,1.03)}82%{transform:translateY(0) rotate(-1deg) scale(1.03,.97)} }
@keyframes world-march-crawl { 0%,100%{transform:translate(0,0) rotate(-.5deg) scale(1.02,.98)}25%{transform:translate(2px,-1px) rotate(1deg) scale(.985,1.01)}50%{transform:translate(0,0) rotate(.5deg) scale(1.025,.975)}75%{transform:translate(-2px,-1px) rotate(-1deg) scale(.985,1.01)} }
@keyframes world-march-swim { 0%,100%{transform:translateY(0) rotate(-2deg) scale(1.015,.99)}35%{transform:translateY(-4px) rotate(1.5deg) scale(.99,1.015)}65%{transform:translateY(-2px) rotate(2.3deg) scale(1.01,.99)} }
@keyframes world-march-hop { 0%,100%{transform:translateY(1px) rotate(-2deg) scale(1.04,.95)}14%{transform:translateY(2px) rotate(-3deg) scale(1.07,.92)}45%{transform:translateY(-9px) rotate(2deg) scale(.96,1.04)}72%{transform:translateY(-4px) rotate(1deg) scale(.985,1.015)} }
@keyframes world-march-prance { 0%,100%{transform:translateY(0) rotate(-1.5deg)}25%{transform:translateY(-5px) rotate(2deg) scale(.99,1.015)}50%{transform:translateY(0) rotate(1deg)}75%{transform:translateY(-3px) rotate(-1deg) scale(1.01,.99)} }
@keyframes world-march-fly { 0%,100%{transform:translateY(0) rotate(-2deg) scaleY(1)}34%{transform:translateY(-5px) rotate(1.5deg) scaleY(.965)}67%{transform:translateY(-2px) rotate(2.5deg) scaleY(1.025)} }
@keyframes world-march-glide { 0%,100%{transform:translateY(1px) rotate(-1.2deg)}50%{transform:translateY(-5px) rotate(1.2deg)} }
@keyframes world-march-hover { 0%,100%{transform:translateY(1px) scale(1,.985)}50%{transform:translateY(-6px) scale(.985,1.02)} }
.map-overlay-shell [data-locomotion=heavy-walk].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=heavy-walk]>img{animation-name:world-march-heavy;animation-duration:1.08s}
.map-overlay-shell [data-locomotion=gallop].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=gallop]>img{animation-name:world-march-gallop;animation-duration:.68s}
.map-overlay-shell [data-locomotion=crawl].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=crawl]>img{animation-name:world-march-crawl;animation-duration:.88s}
.map-overlay-shell [data-locomotion=swim].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=swim]>img{animation-name:world-march-swim;animation-duration:1.55s}
.map-overlay-shell [data-locomotion=hop].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=hop]>img{animation-name:world-march-hop;animation-duration:.72s}
.map-overlay-shell [data-locomotion=prance].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=prance]>img{animation-name:world-march-prance;animation-duration:.82s}
.map-overlay-shell [data-locomotion=fly].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=fly]>img{animation-name:world-march-fly;animation-duration:1.18s}
.map-overlay-shell [data-locomotion=glide].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=glide]>img{animation-name:world-march-glide;animation-duration:2.1s}
.map-overlay-shell [data-locomotion=hover].is-moving .atlas-party-skin img,.march-skin-portrait[data-locomotion=hover]>img{animation-name:world-march-hover;animation-duration:1.42s}
.march-skin-portrait.has-flight-animation>img,.map-overlay-shell .atlas-march-party.has-flight-animation.is-moving .atlas-party-skin img{animation:none}
.map-overlay-shell .atlas-party-skin:before { background:var(--march-soil); opacity:.35; filter:none; height:9px; }
.map-overlay-shell [data-locomotion=heavy-walk].is-moving .atlas-party-skin:before{animation:march-ground-heavy 1.08s ease-in-out infinite}
.map-overlay-shell :is([data-locomotion=gallop],[data-locomotion=prance]).is-moving .atlas-party-skin:before{animation:march-ground-beat .68s ease-out infinite}
.map-overlay-shell [data-locomotion=hop].is-moving .atlas-party-skin:before{animation:march-ground-hop .72s ease-out infinite}
.map-overlay-shell :is([data-locomotion=fly],[data-locomotion=glide],[data-locomotion=hover]) .atlas-party-skin:before{height:6px;left:28%;right:28%;opacity:.18;filter:blur(3px)}
.map-overlay-shell [data-locomotion=swim] .atlas-party-skin:before{height:12px;left:10%;right:10%;border:2px solid color-mix(in srgb,var(--march-accent) 65%,transparent);background:transparent;opacity:.48;filter:none}
@keyframes march-ground-heavy{0%,100%{transform:scale(1);opacity:.32}48%{transform:scale(1.15,.72);opacity:.52}}
@keyframes march-ground-beat{0%,48%,100%{transform:scale(.86);opacity:.22}12%,62%{transform:scale(1.12,.72);opacity:.5}}
@keyframes march-ground-hop{0%,100%{transform:scale(1.18,.7);opacity:.5}45%{transform:scale(.72);opacity:.15}}
.atlas-march-trail { position:absolute; inset:0; pointer-events:none; }
.atlas-march-trail i { position:absolute; left:calc(12% + var(--spark)*9%); bottom:4px; width:6px; height:6px; border-radius:50%; background:var(--march-accent); opacity:0; }
.is-moving .atlas-march-trail i { animation:world-march-wake 1.25s ease-out infinite; animation-delay:calc(var(--spark)*-.21s); }
.is-moving[data-locomotion=heavy-walk] .atlas-march-trail i{animation-duration:1.08s}
.is-moving:is([data-locomotion=fly],[data-locomotion=glide],[data-locomotion=hover]) .atlas-march-trail i{width:10px;height:2px;border-radius:50%;animation-name:world-march-airwake;background:var(--march-accent)}
.is-moving[data-locomotion=swim] .atlas-march-trail i{height:3px;width:14px;border:1px solid var(--march-accent);background:transparent;animation-name:world-march-ripple}
.atlas-march-trail i:nth-child(even) { background:var(--march-soil); width:10px; height:5px; }
@keyframes world-march-wake { 0% { opacity:0; transform:translate(0,0) scale(.4); } 20% { opacity:.7; } 100% { opacity:0; transform:translate(-28px,-15px) scale(1.2); } }
@keyframes world-march-airwake{0%{opacity:0;transform:translate(5px,-12px) scaleX(.3)}25%{opacity:.55}100%{opacity:0;transform:translate(-34px,5px) scaleX(1.4)}}
@keyframes world-march-ripple{0%{opacity:0;transform:translate(2px,0) scale(.35)}20%{opacity:.6}100%{opacity:0;transform:translate(-25px,4px) scale(1.45,.75)}}
[data-march-effect=ember] .atlas-march-trail i:nth-child(odd) { border-radius:80% 15% 65% 35%; height:10px; }
[data-march-effect=frost] .atlas-march-trail i:nth-child(odd),[data-march-effect=arcane] .atlas-march-trail i:nth-child(odd) { border-radius:1px; clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%); width:10px; height:10px; }
[data-march-effect=leaf] .atlas-march-trail i:nth-child(odd) { border-radius:80% 0 80% 0; width:11px; }
[data-march-effect=storm] .atlas-march-trail i:nth-child(odd) { width:13px; height:5px; border-radius:50%; }
[data-march-effect=steam] .atlas-march-trail i { width:12px; height:10px; background:var(--ui-paper); }
.map-overlay-shell .atlas-march-party:not(.is-moving) .atlas-party-type img { animation:none; }
.atlas-march-impact { position:absolute; left:0; top:0; z-index:5; width:0; height:0; pointer-events:none; color:var(--march-accent); }
.atlas-impact-ring { position:absolute; left:-68px; top:-32px; width:136px; height:64px; border:5px solid currentColor; border-radius:50%; box-shadow:inset 0 0 0 2px var(--ui-card-light); animation:world-impact-ring 1.3s ease-out both; }
.atlas-impact-ring.is-echo { animation-delay:.16s; border-width:2px; }
.atlas-impact-emblem { position:absolute; left:-35px; top:-82px; width:70px; text-align:center; font:700 64px/1 'Segoe UI Symbol',serif; color:var(--march-accent); text-shadow:0 2px var(--ui-frame),1px 0 var(--ui-frame),-1px 0 var(--ui-frame); animation:world-impact-emblem 1.35s ease-out both; }
.atlas-march-impact i { position:absolute; left:-4px; top:-12px; width:9px; height:12px; border:1px solid var(--ui-frame); border-radius:3px; background:var(--march-accent); animation:world-impact-fragment 1.2s ease-out both; }
.atlas-march-impact i:nth-child(even) { background:var(--ui-card-light); width:6px; height:8px; }
.atlas-march-impact[data-march-effect=leaf] i { border-radius:80% 0 80% 0; }
.atlas-march-impact[data-march-effect=ember] i { border-radius:70% 15% 60% 35%; }
.atlas-march-impact[data-march-effect=storm] .atlas-impact-ring { border-style:dashed; }
.atlas-march-impact[data-march-effect=arcane] .atlas-impact-ring.is-echo { border-style:dotted; }
@keyframes world-impact-ring { 0% { opacity:0; transform:scale(.2); } 12% { opacity:.8; } 100% { opacity:0; transform:scale(1.55); } }
@keyframes world-impact-emblem { 0% { opacity:0; transform:translateY(16px) scale(.4); } 18% { opacity:1; transform:translateY(-4px) scale(1.1); } 60% { opacity:.85; } 100% { opacity:0; transform:translateY(-26px) scale(.9); } }
@keyframes world-impact-fragment { 0% { opacity:0; transform:scale(.3); } 12% { opacity:1; } 100% { opacity:0; transform:translate(var(--burst-x),var(--burst-y)) rotate(var(--burst-turn)) scale(.3); } }
/* The purchase/detail portrait demonstrates the same locomotion without extra downloads. */
.march-skin-portrait>img { transform-origin:50% 92%; }
.map-overlay-shell .atlas-march-party.has-flight-animation .atlas-party-skin { width:164px; height:110px; }
.map-overlay-shell .atlas-march-party.has-flight-animation .atlas-party-skin img { width:164px; height:164px; filter:none; }
.map-overlay-shell .atlas-march-party.has-flight-animation .atlas-party-skin:before { width:72px; left:46px; opacity:.25; }
.map-overlay-shell .has-flight-animation .atlas-party-skin:after { content:""; position:absolute; z-index:-1; left:22px; bottom:25px; width:120px; height:48px; border-radius:50%; background:radial-gradient(ellipse,#ffeab6 0%,#efa24a80 38%,#f98d3100 70%); opacity:var(--march-charge,0); pointer-events:none; }
.has-flight-animation .atlas-march-trail i:nth-child(even) { background:#ffc76a; width:5px; height:8px; border-radius:80% 0 80% 0; }
.has-flight-animation .atlas-march-trail i:nth-child(odd) { background:#ffe6a0; width:4px; height:7px; }
.atlas-phoenix-impact { position:absolute; left:-168px; top:-218px; width:336px; height:292px; pointer-events:none; }
.atlas-dragon-impact { position:absolute; left:-180px; top:-226px; width:360px; height:280px; pointer-events:none; }
.reduced-motion :is(.atlas-march-trail,.atlas-march-impact) { display:none; }
.reduced-motion .march-skin-portrait>img { animation:none; }
@media(prefers-reduced-motion:reduce) {
  :is(.atlas-march-trail,.atlas-march-impact) { display:none; }
  .march-skin-portrait>img { animation:none; }
}

/* Active marches stay available beside the scene; selecting one owns the camera. */
.world-march-hud,.world-march-card { position:absolute; z-index:24; color:var(--ui-ink); font:12px/1.25 var(--ui-font); }
.world-march-hud { width:202px; border:2px solid var(--ui-frame); border-radius:12px; background:var(--ui-paper); box-shadow:0 3px #44354926; overflow:hidden; }
.atlas-shell .world-march-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-height:30px; padding:3px 7px; border:0; border-radius:0; background:var(--ui-primary); color:var(--ui-card-light); font:700 11px var(--ui-font); cursor:pointer; }
.world-march-heading b { font-size:11px; }
.world-march-list { overflow:visible; }
.world-march-hud.is-collapsed .world-march-list { display:none; }
.world-march-row { display:flex; align-items:stretch; width:100%; min-height:54px; border-bottom:1px solid var(--ui-line); background:var(--ui-card); color:var(--ui-ink); font:10px var(--ui-font); }
.world-march-row:last-child { border-bottom:0; }
.atlas-shell .world-march-main { display:flex; align-items:center; gap:5px; flex:1; min-width:0; min-height:54px; padding:4px 3px 3px 5px; border:0; border-radius:0; background:transparent; color:var(--ui-ink); text-align:left; font:10px/1.05 var(--ui-font); cursor:pointer; touch-action:manipulation; }
.atlas-shell .world-march-main:hover { background:color-mix(in srgb,var(--ui-primary-light) 13%,var(--ui-card)); }
.atlas-shell .world-march-main:active { background:var(--ui-inset); box-shadow:inset 2px 2px 0 color-mix(in srgb,var(--ui-primary-dark) 22%,transparent); }
.atlas-shell .world-march-main[aria-pressed=true] { background:var(--ui-gold-soft); color:var(--ui-ink); box-shadow:inset 3px 0 var(--ui-gold); }
.world-march-icon { display:grid; place-items:center; width:31px; height:34px; flex:none; border-radius:8px; background:var(--ui-gold-soft); border:1px solid var(--ui-line); }
.world-march-icon img { width:29px; height:29px; object-fit:contain; filter:drop-shadow(0 1px 1px #44354940); }
.world-march-copy { flex:1; min-width:0; }
.world-march-row strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.world-march-row small { display:block; margin-top:1px; color:var(--ui-muted); font-size:8px; white-space:nowrap; }
.world-march-row time { display:block; margin-top:1px; color:var(--ui-primary-dark); font:700 11px var(--ui-font-number,var(--ui-font)); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.world-march-row i { display:block; height:2px; border-radius:2px; background:var(--ui-inset); overflow:hidden; }
.world-march-row i b { display:block; height:100%; background:var(--ui-green); }
.atlas-shell .world-march-recall { align-self:center; display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; margin:0 4px 0 1px; padding:0; border:1px solid color-mix(in srgb,var(--ui-red) 60%,var(--ui-line)); border-radius:9px; background:var(--ui-red-soft); color:var(--ui-red-dark); cursor:pointer; touch-action:manipulation; }
.world-march-recall svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.atlas-shell .world-march-recall:hover { background:color-mix(in srgb,var(--ui-red) 20%,var(--ui-red-soft)); border-color:var(--ui-red); }
.atlas-shell .world-march-recall:active { background:var(--ui-red); color:var(--ui-card-light); transform:translateY(1px); }
.atlas-shell .world-march-recall:disabled { cursor:wait; background:var(--ui-disabled); color:var(--ui-muted); }
.world-march-state-mark { align-self:center; width:23px; flex:0 0 23px; color:var(--ui-muted); font-size:17px; text-align:center; }
.world-march-card { box-sizing:border-box; border:2px solid var(--ui-frame); border-radius:14px; background:var(--ui-card); box-shadow:var(--ui-shadow); overflow:auto; overscroll-behavior:contain; }
.world-march-card>header { display:flex; align-items:center; gap:6px; padding:5px 6px; background:var(--ui-primary); color:var(--ui-card-light); border-bottom:2px solid var(--ui-primary-dark); }
.world-march-card>header img { width:40px; height:40px; object-fit:contain; }
.world-march-card>header div { flex:1; min-width:0; }
.world-march-card>header strong { display:block; font-size:13px; }
.world-march-card-state { display:block; margin-top:3px; font-size:10px; font-variant-numeric:tabular-nums; }
.world-march-card>header button { flex:none; width:36px; height:36px; padding:0; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-card); color:var(--ui-ink); font-size:23px; cursor:pointer; }
.world-march-summary { padding:7px 8px 3px; font-size:11px; text-align:center; }
.world-march-commands { display:flex; justify-content:center; gap:5px; padding:7px; }
.world-march-commands button { flex:1; min-width:0; min-height:48px; padding:4px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-inset); color:var(--ui-ink); font:700 20px var(--ui-font); cursor:pointer; }
.world-march-commands button span { display:block; font-size:10px; margin-top:2px; }
.world-march-commands button[aria-expanded=true] { background:var(--ui-primary); color:var(--ui-card-light); }
.world-march-commands button:disabled { cursor:wait; opacity:.6; }
.world-march-details { padding:0 10px 10px; font-size:11px; }
.world-march-details dl { margin:3px 0 8px; padding-top:6px; border-top:1px solid var(--ui-line); }
.world-march-details dl>div,.world-march-unit { display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.world-march-details dd { margin:0; text-align:right; }
.world-march-feedback { margin:3px 8px 8px; color:var(--ui-red); }
.world-march-hud button:focus-visible,.world-march-card button:focus-visible { outline:3px solid var(--ui-primary); outline-offset:-3px; }
.map-overlay-shell .atlas-march-hit { position:absolute; left:50%; bottom:8px; width:64px; height:64px; transform:translateX(-50%); padding:0; border:0; border-radius:50%; background:transparent; box-shadow:none; pointer-events:auto; cursor:pointer; touch-action:none; }
.map-overlay-shell .atlas-march-hit:focus-visible,.map-overlay-shell .is-followed .atlas-march-hit { outline:2px solid var(--ui-gold); outline-offset:2px; background:#fff0c412; }
.map-overlay-shell .atlas-march-party>.atlas-march-hit { z-index:3; }
.world-march-hud[hidden],.world-march-card[hidden],.world-march-card [hidden] { display:none!important; }
body.world-mode:has(.world-march-hud:not([hidden])) #hud-marches { visibility:hidden; }
body.mobile-game:has(.map-overlay-panel:not([hidden])) :is(.world-march-hud,.world-march-card) { visibility:hidden; }
@media(max-width:360px) { .world-march-hud { width:178px; } .atlas-shell .world-march-main { gap:4px; padding-left:4px; } .world-march-icon { width:29px; } .world-march-icon img { width:27px; height:27px; } .world-march-row strong { font-size:10px; } }
@media(max-height:520px) and (orientation:landscape) {
  .atlas-shell .world-march-heading { min-height:27px; padding-block:2px; }
  .world-march-row,.atlas-shell .world-march-main { min-height:46px; }
  .atlas-shell .world-march-main { padding-block:2px; }
  .world-march-icon { width:28px; height:30px; }
  .world-march-icon img { width:26px; height:26px; }
  .world-march-row time { font-size:10px; }
  .atlas-shell .world-march-recall { width:30px; height:30px; flex-basis:30px; }
  .atlas-shell:has(.world-march-card:not([hidden])) .map-overlay-coordinate-toggle { visibility:hidden; }
}

/* Compact world target card: one paper window with a clear primary action. */
.map-overlay-shell .atlas-target-actions.is-encounter {
  z-index:20000;width:244px;max-width:calc(100% - 16px);height:auto;padding:0;
  color:var(--ui-ink);background:var(--ui-paper);border:2px solid var(--ui-frame);
  border-radius:16px;box-shadow:0 3px var(--ui-frame),0 7px 14px color-mix(in srgb,var(--ui-ink) 24%,transparent);
  overflow:hidden;pointer-events:auto;font-family:var(--ui-font);
}
.atlas-encounter-header { display:flex;align-items:center;gap:6px;min-height:44px;padding:3px 5px 3px 12px;background:var(--ui-primary);color:var(--ui-card-light);border-bottom:3px solid var(--ui-primary-dark); }
.atlas-encounter-header>strong { flex:1;min-width:0;font-size:14px;line-height:17px;overflow-wrap:anywhere; }
.atlas-encounter-header>button { display:grid;place-items:center;flex:none;width:38px;height:38px;padding:8px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);color:var(--ui-ink); }
.atlas-encounter-header svg { width:20px;height:20px; }
.atlas-encounter-summary { display:flex;align-items:center;justify-content:center;gap:12px;margin:3px 10px;background:radial-gradient(ellipse,var(--ui-green-soft),transparent 72%); }
.atlas-encounter-summary>img { width:70px;height:70px;object-fit:contain;pointer-events:none; }
.atlas-encounter-summary>div { display:grid;gap:3px;font-size:12px; }
.atlas-encounter-summary small { font-size:10px;color:var(--ui-muted); }
.atlas-encounter-stock { display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin:0 10px;font-size:10px; }
.atlas-encounter-stock>strong { text-align:right; }
.atlas-encounter-stock progress { grid-column:1/-1;appearance:none;width:100%;height:7px;border:0;border-radius:5px;overflow:hidden;background:var(--ui-inset); }
.atlas-encounter-stock progress::-webkit-progress-bar { background:var(--ui-inset); }
.atlas-encounter-stock progress::-webkit-progress-value { background:var(--ui-green);border-radius:5px; }
.atlas-encounter-stock progress::-moz-progress-bar { background:var(--ui-green); }
.atlas-encounter-status { margin:5px 10px;color:var(--ui-muted);font-size:10px;line-height:13px;overflow-wrap:anywhere; }
/* Search results stay on the map; the next match shares the target's action row. */
.map-overlay-shell .is-encounter .atlas-actions-buttons:has(.is-search-next) { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:42px 44px; }
body.mobile-game .map-overlay-shell .is-encounter:has(.is-search-next) .atlas-action:not(:nth-child(2)) { flex-direction:column;gap:2px;min-height:44px;padding:3px;font-size:10px; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action.is-search-next { background:var(--ui-primary);color:var(--ui-card-light);border-color:var(--ui-primary-dark);box-shadow:0 2px var(--ui-primary-dark); }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-encounter:has(.is-search-next) .atlas-action-disc { width:16px;height:16px;min-width:16px;min-height:0; }
body.mobile-game .map-overlay-shell .atlas-target-actions.is-encounter:has(.is-search-next) .atlas-action-disc svg { width:16px;height:16px; }
@media(max-height:500px) {
  .map-overlay-shell .is-encounter .atlas-actions-buttons:has(.is-search-next) { grid-template-columns:1.3fr repeat(3,minmax(0,1fr));grid-template-rows:44px; }
  body.mobile-game .map-overlay-shell .is-encounter:has(.is-search-next) .atlas-action:nth-child(2) { grid-column:auto;flex-direction:column;gap:2px;padding:2px;font-size:10px; }
}
.map-overlay-shell .is-encounter .atlas-actions-buttons { position:static;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:42px 36px;align-content:start;gap:5px;padding:3px 9px 9px; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action {
  position:static;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;min-height:36px;height:100%;width:auto;padding:5px;
  background:var(--ui-card);border:1px solid var(--ui-line);border-radius:9px;color:var(--ui-ink);font-size:11px;line-height:14px;text-shadow:none;translate:none;scale:none;
}
body.mobile-game .map-overlay-shell .is-encounter .atlas-action:nth-child(2) { order:-1;grid-column:1/-1;min-height:42px;font-size:13px;background:var(--ui-green);border-color:var(--ui-green-dark);color:var(--ui-card-light);box-shadow:0 2px var(--ui-green-dark); }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action.is-attack { background:var(--ui-red);border-color:var(--ui-frame);box-shadow:0 2px var(--ui-frame); }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action:disabled { background:var(--ui-disabled);border-color:var(--ui-line);color:var(--ui-muted);box-shadow:none; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action-disc { display:grid;place-items:center;position:static;width:19px;height:19px;min-width:19px;border:0;border-radius:0;background:none;color:inherit;box-shadow:none;filter:none; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action-disc::before,body.mobile-game .map-overlay-shell .is-encounter .atlas-action-disc::after { display:none; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action-disc svg { width:18px;height:18px; }
body.mobile-game .map-overlay-shell .is-encounter .atlas-action>span:last-child { margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;white-space:normal; }
.is-encounter button:focus-visible { outline:3px solid var(--ui-primary);outline-offset:-3px; }
@media(max-width:620px) and (max-height:620px), (max-height:450px) {
  .map-overlay-shell .atlas-target-actions.is-encounter { width:210px;border-radius:12px; }
  .atlas-encounter-header { min-height:38px;padding-block:0; }
  .atlas-encounter-header>strong { font-size:12px; }
  .atlas-encounter-header>button { width:36px;height:36px; }
  .atlas-encounter-summary { margin:1px 8px;gap:8px; }
  .atlas-encounter-summary>img { width:40px;height:40px; }
  .atlas-encounter-summary>div { grid-template-columns:auto auto;gap:2px 7px; }
  .atlas-encounter-summary>div>strong { grid-column:1/-1;font-size:11px; }
  .atlas-encounter-status { margin-block:3px; }
  .map-overlay-shell .is-encounter .atlas-actions-buttons { grid-template-rows:40px 32px;gap:4px;padding:2px 7px 6px; }
  body.mobile-game .map-overlay-shell .is-encounter .atlas-action { min-height:32px; }
  body.mobile-game .map-overlay-shell .is-encounter .atlas-action:nth-child(2) { min-height:40px; }
}

/* Historical player battle reports keep the shared role and comparison colors. */
body.mobile-game :is(#game-dialog .combat-report,#monster-report-root .combat-report,.combat-details) { color:var(--ui-ink); }
body.mobile-game :is(#game-dialog .combat-report,#monster-report-root .combat-report,.combat-details) :is(.cr-banner,.cr-ribbon,.cr-detail-heading),
body.mobile-game :is(#game-dialog,#monster-report-root) .cr-footer .cr-primary { color:var(--ui-card-light)!important; }
body.mobile-game :is(#game-dialog .combat-report,#monster-report-root .combat-report,.combat-details) .cr-negative { color:var(--ui-red)!important; }
body.mobile-game :is(#game-dialog .combat-report,#monster-report-root .combat-report,.combat-details) .cr-positive { color:var(--ui-green-dark)!important; }
body.mobile-game :is(#game-dialog .combat-report,#monster-report-root .combat-report,.combat-details) .cr-note { color:var(--ui-muted)!important; }
body.mobile-game :is(#game-dialog,#monster-report-root) .combat-report .grade-rare { border-color:var(--ui-blue); }
body.mobile-game :is(#game-dialog,#monster-report-root) .combat-report .grade-epic { border-color:var(--ui-purple); }
body.mobile-game :is(#game-dialog,#monster-report-root) .combat-report .grade-legendary { border-color:var(--ui-gold); background:var(--ui-gold-soft); }
body.mobile-game :is(#game-dialog,#monster-report-root) .combat-report .grade-uncommon { border-color:var(--ui-green); }
body.mobile-game :is(#game-dialog,#monster-report-root) .cr-footer .cr-primary { background:var(--ui-blue)!important; border-color:var(--ui-blue-dark)!important; }
body.mobile-game #game-dialog .cr-compare :is(td,th) { background:transparent!important; }
body.mobile-game #game-dialog .cr-result.defeat strong { color:var(--ui-red)!important; }

/* Backpack artwork: broad rarity fields with soft rims and live value overlays. */
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile {
  --loot-color:#98a1a3; --loot-light:#e2e4df;
  container-type:inline-size; display:block; position:relative; width:100%; height:auto; aspect-ratio:1;
  border:3px solid color-mix(in srgb,var(--loot-color),var(--ui-card) 35%)!important;
  border-radius:15px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,var(--loot-color) 0%,color-mix(in srgb,var(--loot-color),var(--loot-light) 32%) 48%,var(--loot-light) 100%)!important;
  box-shadow:inset 0 2px 0 #fff6,inset 0 -3px 0 #44354924,0 3px 0 #75608038!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:is(.rarity-blue,.grade-rare) { --loot-color:var(--ui-blue); --loot-light:#9edced; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:is(.rarity-purple,.grade-epic) { --loot-color:var(--ui-purple); --loot-light:#d4b9f1; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:is(.rarity-gold,.grade-legendary) { --loot-color:var(--ui-orange); --loot-light:#ffdda1; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:is(.rarity-mythic,.grade-mythic) { --loot-color:var(--ui-red); --loot-light:#f7afaa; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:before { content:none; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile:after {
  content:''; position:absolute; inset:0; border:1px solid #fff3; border-image:none; border-radius:11px; pointer-events:none;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile .loot-art {
  display:flex; align-items:center; justify-content:center; position:absolute;
  inset:15% 3% 9%!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-art>img {
  width:100%; height:100%; max-width:none; object-fit:contain; filter:drop-shadow(0 2px 1px #75608038);
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile .loot-art.is-reference { inset:17% 8% 18%!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile .loot-specialty {
  position:absolute; width:33%; height:auto; aspect-ratio:1; left:0; right:auto; bottom:1%;
  background:var(--ui-card); border:1px solid var(--ui-frame); border-radius:8px;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile .loot-value {
  position:absolute; z-index:3; top:3px!important; bottom:auto!important; left:4px; right:4px;
  height:auto!important; padding:2px!important; background:var(--ui-primary-dark)!important; color:var(--ui-card-light)!important;
  font:800 clamp(9px,13cqw,17px)/1.1 var(--ui-font)!important; text-align:center; text-shadow:none; box-shadow:none;
}
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-value:empty { display:none; }
body.mobile-game :is(#panel-dialog,#game-dialog) :is(.inventory-backpack,.inventory-dialog) .loot-tile .loot-count {
  position:absolute; z-index:3; top:auto!important; bottom:3px!important; right:3px!important;
  max-width:calc(100% - 6px); padding:2px 4px; background:var(--ui-primary-dark)!important; color:var(--ui-card-light)!important;
  font:800 clamp(11px,18cqw,20px)/1.1 var(--ui-font); border-radius:5px; text-shadow:none; white-space:nowrap;
}
body.mobile-game #panel-dialog .inventory-backpack .loot-card:is(:hover,:focus-visible,[aria-pressed="true"]) .loot-tile {
  outline:3px solid var(--ui-primary); outline-offset:2px; transform:none;
}
body.mobile-game #panel-dialog .inventory-backpack .loot-equipped {
  top:auto; left:4px; bottom:5px; width:21px; height:21px; background:var(--ui-green); color:var(--ui-card-light); border-color:var(--ui-green-dark);
}
body.mobile-game #panel-dialog .inventory-backpack .inventory-views .active {
  background:var(--ui-gold-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-gold)!important;
}
body.mobile-game #panel-dialog .inventory-backpack .relic-slot { background:var(--ui-card)!important; border-color:var(--ui-line); color:var(--ui-ink); }
body.mobile-game #panel-dialog .inventory-backpack .relic-slot :is(strong,small,em) { color:var(--ui-ink); }
@media(max-width:359px) {
  body.mobile-game #panel-dialog .inventory-backpack .loot-tile { border-radius:12px; border-width:2px!important; }
}

/* Monster reports use combat-report.css for the same layout as player battles. */
.monster-report .mr-placeholder { display:grid; place-content:center; font-size:26px; }
.mr-hp { margin:8px 10px; display:flex; flex-wrap:wrap; gap:4px; justify-content:space-between; font-size:11px; font-variant-numeric:tabular-nums; }
.mr-hp progress { width:100%; height:7px; appearance:none; border:0; border-radius:6px; overflow:hidden; background:var(--ui-inset); }
.mr-hp progress::-webkit-progress-bar { background:var(--ui-inset); }
.mr-hp progress::-webkit-progress-value { background:var(--ui-green); }
.mr-hp progress::-moz-progress-bar { background:var(--ui-green); }
.monster-report .cr-resources>div { min-width:0; overflow-wrap:anywhere; }
.monster-report .cr-resources:empty { display:none; }
.monster-report .mr-reward-symbol { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; color:var(--ui-gold); }
.monster-report .mr-delivery { background:var(--ui-inset); border-top:1px solid var(--ui-line); font-weight:700; }
.monster-report .mr-delivered { background:var(--ui-green-soft); border-color:var(--ui-green); }
.monster-report .mr-navigation { display:flex; justify-content:center; gap:8px; padding:6px; margin-bottom:8px; }
.monster-report .mr-navigation button { min-width:44px; }
.monster-report .mr-delete summary { text-align:center; }
body.mobile-game .monster-report [data-action="monster-report-delete"] { display:block; margin:0 auto 12px; background:var(--ui-red)!important; color:var(--ui-card-light)!important; }
body.mr-direct { margin:0; padding:16px max(8px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:var(--ui-paper); color:var(--ui-ink); font:14px/1.4 var(--ui-font); }
.mr-direct * { box-sizing:border-box; }
.mr-direct main { display:flex; flex-direction:column; width:100%; max-width:780px; height:calc(100dvh - 32px); margin:auto; }
.mr-direct #monster-report-root { display:flex; flex:1; flex-direction:column; min-height:0; border:3px solid var(--ui-frame); border-radius:16px; overflow:hidden; }
.mr-direct #monster-report-root>h2 { margin:0; background:var(--ui-primary); color:var(--ui-card-light); padding:10px 14px; font-size:20px; }
.mr-direct #report-error:empty { display:none; }
.mr-direct .button { display:inline-flex; justify-content:center; align-items:center; align-self:start; min-height:44px; padding:0 14px; margin-bottom:6px; border:1px solid var(--ui-line); border-radius:9px; color:var(--ui-ink); background:var(--ui-card); font:700 14px var(--ui-font); text-decoration:none; cursor:pointer; }
.mr-direct button:disabled { opacity:.5; cursor:default; }

@media(max-width:360px) { .map-overlay-shell .atlas-target-actions.is-encounter { width:188px; } .atlas-encounter-summary small { font-size:9px; } }

/* Inventory summary shares the village materials and semantic selected states. */
body.mobile-game #game-dialog .inventory-overview { background:var(--ui-card); color:var(--ui-ink); }
body.mobile-game #game-dialog .inventory-overview-tabs { background:var(--ui-inset); }
body.mobile-game #game-dialog .inventory-overview-tabs button.active {
  background:var(--ui-gold-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-gold)!important;
}
body.mobile-game #game-dialog .inventory-overview-table thead th { background:var(--ui-card)!important; border-bottom:1px solid var(--ui-line)!important; }
body.mobile-game #game-dialog .inventory-overview-table tbody tr:nth-child(odd)>:is(th,td) { background:var(--ui-inset)!important; }
body.mobile-game #game-dialog .inventory-overview-table tbody tr:nth-child(even)>:is(th,td) { background:var(--ui-paper)!important; }
body.mobile-game #game-dialog .inventory-overview-art { background:color-mix(in srgb,var(--ui-line),transparent 65%); }
body.mobile-game #game-dialog .inventory-overview-footer { background:var(--ui-card); border-top:1px solid var(--ui-line); }
body.mobile-game #game-dialog .inventory-overview-units button.active { background:var(--ui-green-soft)!important; border-color:var(--ui-green-dark)!important; }
body.mobile-game #game-dialog .inventory-overview-units button.active span { background:var(--ui-green); color:var(--ui-card-light)!important; border-color:var(--ui-green-dark); }

/* Short phones in landscape use a low card above the chat dock. */
@media(min-width:421px) and (max-width:620px) and (max-height:360px) {
 .map-overlay-shell .atlas-target-actions.is-encounter { width:272px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:36px 44px auto; }
 .is-encounter .atlas-encounter-header { grid-column:1/-1;min-height:36px;height:36px;padding-left:9px; }
 .is-encounter .atlas-encounter-header>button { height:30px;width:32px;padding:6px; }
 .is-encounter .atlas-encounter-summary { grid-column:1;grid-row:2;margin:0 4px;gap:5px; }
 .is-encounter .atlas-encounter-summary>img { width:32px;height:32px; }
 .is-encounter .atlas-encounter-summary>div { display:grid;grid-template-columns:1fr;gap:1px; }
 .is-encounter .atlas-encounter-summary small { font-size:8px; }
 .is-encounter .atlas-encounter-stock { grid-column:2;grid-row:2;align-self:start;grid-template-columns:1fr;gap:0;margin:2px 6px 0 0;font-size:9px; }
 .is-encounter .atlas-encounter-stock>strong { text-align:left; }
 .is-encounter .atlas-encounter-stock progress { margin-top:2px;height:5px; }
 .is-encounter .atlas-encounter-status { grid-column:2;grid-row:2;align-self:end;margin:0 5px 1px 0;font-size:8px;line-height:10px;max-height:10px;overflow:auto; }
 .map-overlay-shell .is-encounter .atlas-actions-buttons { grid-column:1/-1;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:40px;padding:2px 6px 4px;gap:4px; }
 body.mobile-game .map-overlay-shell .is-encounter .atlas-action:nth-child(2) { grid-column:auto;font-size:11px; }
 body.mobile-game .map-overlay-shell .is-encounter .atlas-action { font-size:10px;gap:3px;padding:3px; }
}

/* Damaged monsters expose health without selecting the target or blocking map gestures. */
.atlas-marker--monsters .atlas-monster-health { position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:3px; width:max-content; min-width:108px; padding:3px 5px; border:1px solid var(--ui-frame); border-radius:7px; background:var(--ui-card); color:var(--ui-ink); font:700 10px/1.1 var(--ui-font); text-shadow:none; pointer-events:none; box-shadow:0 2px 2px #44354926; }
.atlas-monster-hp-values { white-space:nowrap; font-variant-numeric:tabular-nums; }
.atlas-monster-hp-track { display:block; height:6px; overflow:hidden; border-radius:4px; background:var(--ui-inset); }
.atlas-monster-hp-track>span { display:block; height:100%; background:var(--ui-green); }
.atlas-marker--monsters.is-injured .atlas-marker-name { top:calc(100% + 32px); }

/* Training keeps the common action and rarity colours above the generic button skin. */
body.mobile-game #panel-dialog .training-school .training-view-tabs button[aria-pressed="true"] { background:var(--ui-primary)!important;color:var(--ui-card-light)!important;border-color:var(--ui-primary-dark)!important; }
body.mobile-game #panel-dialog .training-school .training-schools button[aria-pressed="true"] { background:var(--ui-primary)!important;color:var(--ui-card-light)!important;border-color:var(--ui-primary-dark)!important;box-shadow:0 3px 0 var(--ui-primary-dark)!important; }
body.mobile-game #panel-dialog .training-school .training-schools button[aria-pressed="true"] :is(strong,small) { color:var(--ui-card-light)!important; }
body.mobile-game #panel-dialog .training-school .training-quantity>button { background:color-mix(in srgb,var(--ui-primary) 14%,var(--ui-card))!important;border-color:var(--ui-primary-light)!important;color:var(--ui-primary-dark)!important; }
body.mobile-game #panel-dialog .training-school .training-max { background:var(--ui-gold-soft)!important;color:var(--ui-primary-dark)!important;border:2px solid var(--ui-gold)!important;box-shadow:0 4px 0 var(--ui-gold),0 0 0 1px var(--ui-primary-dark)!important; }
body.mobile-game .training-school :is(button,input):focus-visible { outline-color:var(--ui-primary)!important; }
body.mobile-game #panel-dialog .training-school .training-submit:not(:disabled) { background:var(--ui-green)!important;color:var(--ui-card-light)!important;border-color:var(--ui-green-dark)!important; }
body.mobile-game #panel-dialog .training-school .training-tier { border-color:var(--troop-tier-color)!important; }
body.mobile-game #panel-dialog .training-school .training-tier[aria-pressed="true"] { background:var(--ui-gold-soft)!important;outline:2px solid var(--ui-primary);outline-offset:2px; }

/* Components with self-contained skins still inherit Palette A from this final layer. */
body.mobile-game :is(.mailbox-shell,.mail-detail,.mail-compose) { color:var(--ui-ink);font-family:var(--ui-font); }
body.mobile-game :is(.mail-tabs,.mail-footer,.mail-letter-heading) { background:var(--ui-inset);border-color:var(--ui-line); }
body.mobile-game :is(.mail-tab,.mail-button,.mail-card) { background:var(--ui-card);color:var(--ui-ink);border-color:var(--ui-line); }
body.mobile-game :is(.mail-tab[aria-pressed="true"],.mail-folders [aria-pressed="true"]) { background:var(--ui-gold-soft);border-color:var(--ui-gold);color:var(--ui-ink); }
body.mobile-game :is(.mailbox-shell,.mail-detail,.mail-compose) :is(button,[tabindex],input,select,textarea):focus-visible { outline-color:var(--ui-primary); }

body.mobile-game #panel-dialog[data-panel="mastery"] { background:var(--ui-paper)!important;border-color:var(--ui-frame)!important;color:var(--ui-ink)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .page-heading {
  background:var(--ui-primary)!important;color:var(--ui-card-light)!important;
  border-bottom-color:var(--ui-primary-dark)!important;box-shadow:inset 0 3px #ffffff24!important;
}
body.mobile-game #panel-dialog[data-panel="mastery"] #page-title {
  color:var(--ui-card-light)!important;font-family:var(--ui-font)!important;
  text-shadow:0 1px var(--ui-primary-dark)!important;
}
body.mobile-game #panel-dialog[data-panel="mastery"] .panel-close {
  background:var(--ui-card)!important;color:var(--ui-ink)!important;border-color:var(--ui-frame)!important;
  box-shadow:0 2px var(--ui-primary-dark)!important;font-family:var(--ui-font)!important;
}
body.mobile-game #panel-dialog[data-panel="mastery"] #content { background:var(--ui-paper)!important;color:var(--ui-ink)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] :is(.lord-talents,.talent-header,.talent-tree-scroll) { background-color:var(--ui-paper)!important;color:var(--ui-ink)!important;font-family:var(--ui-font)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-tree-scroll { background-image:radial-gradient(ellipse at 50% 0%,var(--ui-card-light),var(--ui-paper) 65%)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-header::before { background-image:linear-gradient(90deg,var(--ui-paper) 15%,#e9dfcfd9 55%,#e9dfcfb3),url('../art/village2.png')!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-tabs { background:var(--ui-inset)!important;border-color:var(--ui-line)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-tabs button:not(.is-active) { background:var(--ui-card)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] :is(.talent-footer,.talent-sheet-card>header,.talent-sheet .talent-rank-controls) { background:var(--ui-inset)!important;border-color:var(--ui-line)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-sheet-card { background:var(--ui-card)!important;border-color:var(--ui-frame)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .lord-talents :is(.talent-progress h2,.talent-sheet h2,.talent-button) {
  font-family:var(--ui-font)!important;
}
body.mobile-game #panel-dialog[data-panel="mastery"] .lord-talents :is(.talent-progress h2,.talent-sheet h2) {
  color:var(--ui-ink)!important;text-shadow:none!important;
}
body.mobile-game #panel-dialog[data-panel="mastery"] :is(button,summary,.talent-tree-scroll):focus-visible { outline-color:var(--ui-primary)!important; }
body.mobile-game #panel-dialog[data-panel="mastery"] .lord-talents.branch-attack { --talent-accent:var(--ui-red-dark); }
body.mobile-game #panel-dialog[data-panel="mastery"] :is(.talent-tree-intro>span,.talent-node-bonus.is-muted,.talent-rank>span,.talent-save-state,.talent-tree-help,.talent-requirements,.talent-eyebrow) { color:var(--ui-muted); }
body.mobile-game #panel-dialog[data-panel="mastery"] .lord-emblem { background:var(--ui-primary);box-shadow:inset 0 2px var(--ui-primary-light); }
body.mobile-game #panel-dialog[data-panel="mastery"] .lord-emblem strong { color:var(--ui-card-light);text-shadow:none; }
body.mobile-game #panel-dialog[data-panel="mastery"] .talent-button.is-primary:not(:disabled) { background:var(--ui-green);color:var(--ui-card-light);border-color:var(--ui-green-dark); }

/* Shared quantity picker: scroll the stock, keep the amount and action in sight. */
body.mobile-game #game-dialog:has(.queue-speedup-picker) { width:min(580px,calc(100dvw - 24px))!important;height:min(740px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 24px)!important; }
body.mobile-game #game-dialog:has(.queue-speedup-picker) #dialog-content { display:flex;flex:1;min-height:0;padding:12px;overflow:hidden; }
.queue-speedup-picker { display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;gap:10px; }
.queue-speedup-summary { display:grid;gap:4px;flex:none;margin:0;padding:10px 12px;border-radius:12px;background:var(--ui-inset);color:var(--ui-ink); }
.queue-speedup-summary>strong { font-size:17px;line-height:1.2; }
.queue-speedup-summary>span { display:flex;justify-content:space-between;gap:8px;font-size:13px; }
.queue-speedup-summary b { font-family:var(--ui-font-number); }
.queue-speedup-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin; }
body.mobile-game #game-dialog .queue-speedup-option { position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:84px;padding:10px 20px 10px 8px;text-align:left;border:2px solid var(--ui-line); }
.queue-speedup-option>img { width:38px;height:44px;object-fit:contain;flex:none; }
.queue-speedup-option>span:not(.queue-speedup-check) { display:grid;gap:2px;min-width:0; }
.queue-speedup-option strong { font-size:16px;line-height:1.15; }
.queue-speedup-option small { font-size:11px;line-height:1.2; }
body.mobile-game #game-dialog .queue-speedup-option[aria-pressed=true] { background:var(--ui-gold-soft)!important;border-color:var(--ui-primary)!important;box-shadow:inset 0 0 0 1px var(--ui-primary)!important; }
.queue-speedup-check { position:absolute;right:5px;top:5px;font-size:14px;font-weight:bold;visibility:hidden; }
[aria-pressed=true]>.queue-speedup-check { visibility:visible; }
.queue-speedup-controls { display:flex;flex-direction:column;gap:8px;flex:none;padding-top:10px;border-top:1px solid var(--ui-line); }
.queue-speedup-quick { min-height:44px;background:var(--ui-green)!important;color:var(--ui-card-light)!important;border-color:var(--ui-green-dark)!important; }
.queue-speedup-quantity { display:grid;grid-template-columns:1fr 44px 72px 44px;align-items:center;gap:6px; }
.queue-speedup-quantity label { margin:0;font-size:16px;font-weight:bold; }
body.mobile-game #game-dialog .queue-speedup-quantity :is(input,button) { min-width:0;min-height:44px;height:44px;padding:4px;text-align:center;font-size:20px; }
body.mobile-game #game-dialog #queue-speedup-quantity { width:100%;font-family:var(--ui-font-number)!important;appearance:textfield; }
#queue-speedup-quantity::-webkit-inner-spin-button { appearance:none;margin:0; }
.queue-speedup-presets { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
body.mobile-game #game-dialog .queue-speedup-presets button { min-height:40px;padding:5px;font-size:13px; }
.queue-speedup-preview { display:grid;gap:3px;padding:10px;border-radius:10px;background:var(--ui-inset);font-size:13px;line-height:1.25; }
.queue-speedup-preview strong { font-size:16px; }
.queue-speedup-preview small { font-size:12px; }
body.mobile-game #game-dialog .queue-speedup-use { min-height:46px;width:100%;padding:8px;font-size:17px; }
.queue-speedup-feedback { margin:0!important;min-height:16px;font-size:12px;line-height:1.3; }
.queue-speedup-empty { grid-column:1/-1;padding:16px;border-radius:12px;background:var(--ui-inset);color:var(--ui-muted); }
.queue-speedup-targets { display:grid;gap:8px; }
.queue-speedup-targets>button { display:grid;gap:5px;min-height:64px;text-align:left; }
@media(max-width:380px) {
  body.mobile-game #game-dialog:has(.queue-speedup-picker) #dialog-content { padding:8px; }
  .queue-speedup-picker { gap:6px; }.queue-speedup-controls { gap:6px;padding-top:6px; }
  .queue-speedup-list { gap:5px; }.queue-speedup-option>img { width:28px;height:36px; }
  body.mobile-game #game-dialog .queue-speedup-option { gap:5px;padding:8px 16px 8px 5px;min-height:74px; }
  .queue-speedup-option strong { font-size:14px; }.queue-speedup-option small { font-size:10px; }
  .queue-speedup-quantity { grid-template-columns:1fr 44px 62px 44px; }
}
@media(min-width:500px) and (max-height:480px) and (orientation:landscape) {
  body.mobile-game #game-dialog:has(.queue-speedup-picker) { width:min(760px,calc(100dvw - 20px))!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important; }
  body.mobile-game #game-dialog:has(.queue-speedup-picker) #dialog-content { padding:8px; }
  .queue-speedup-picker { display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto minmax(0,1fr);gap:6px 10px; }
  .queue-speedup-summary { grid-column:1;grid-row:1;padding:6px 8px; }.queue-speedup-summary>strong { font-size:15px; }
  .queue-speedup-list { grid-column:1;grid-row:2;min-height:0;gap:5px; }
  body.mobile-game #game-dialog .queue-speedup-option { padding:5px 14px 5px 5px;min-height:68px;gap:4px; }
  .queue-speedup-option>img { width:26px;height:34px; }.queue-speedup-option strong { font-size:13px; }.queue-speedup-option small { font-size:10px; }
  .queue-speedup-controls { grid-column:2;grid-row:1/3;min-height:0;overflow:auto;padding:0 0 0 9px;border-top:0;border-left:1px solid var(--ui-line);gap:5px; }
  .queue-speedup-quantity { grid-template-columns:1fr 38px 56px 38px;gap:4px; }
  body.mobile-game #game-dialog .queue-speedup-quantity :is(input,button) { height:40px;min-height:40px; }
  body.mobile-game #game-dialog .queue-speedup-presets button { min-height:36px;font-size:12px; }
  .queue-speedup-preview { padding:6px;gap:2px;font-size:12px; }.queue-speedup-preview strong { font-size:14px; }.queue-speedup-preview small { font-size:11px; }
  body.mobile-game #game-dialog .queue-speedup-use { min-height:40px;font-size:15px;padding:6px; }
}
/* A phone keyboard can leave a narrow, short viewport: keep the full form scrollable. */
@media(max-width:499px) and (max-height:520px) {
  .queue-speedup-picker { overflow:auto;overscroll-behavior:contain; }
  .queue-speedup-list { flex:none;max-height:128px;min-height:80px; }
}

/* Profile identity and rarity accents sit on top of the shared surface rules. */
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-identity {
  background:var(--ui-primary)!important;color:var(--ui-card-light)!important;border-color:var(--ui-frame)!important;
}
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-identity :is(div,strong,span) { color:var(--ui-card-light)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-profile-identity small { color:var(--ui-gold-soft)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-gear-slot { border-color:var(--ui-gold)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-gear-slot.is-empty { background:var(--ui-card-light)!important;border-color:var(--ui-line)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-gear-slot.grade-purple { border-color:var(--ui-purple)!important; }
body.mobile-game :is(#panel-dialog,#game-dialog) .lok-gear-slot:is(.grade-gold,.grade-mythic) { background:var(--ui-gold-soft)!important; }

/* Relic controls share the village materials without hiding rarity or artwork. */
body.mobile-game #panel-dialog .treasury-card.is-selected {
  outline:3px solid var(--ui-primary);outline-offset:2px;box-shadow:none!important;
}
body.mobile-game #panel-dialog .treasury-reference :is(.treasury-main-tabs,.treasury-presets) .treasury-button {
  min-height:40px;
}
body.mobile-game #panel-dialog .treasury-reference .treasury-preset-actions .treasury-button {
  min-height:40px;font-size:12px;
}
body.mobile-game #panel-dialog .treasury-detail-heading .treasury-button {
  min-width:40px;min-height:40px;
}
body.mobile-game #panel-dialog .land-detail-heading>strong {
  background:var(--ui-gold-soft);color:var(--ui-ink)!important;
}
@media(max-height:400px) and (orientation:landscape) {
  body.mobile-game #panel-dialog .treasury-reference :is(.treasury-main-tabs,.treasury-presets) .treasury-button,
  body.mobile-game #panel-dialog .treasury-reference .treasury-preset-actions .treasury-button {
    min-height:32px;
  }
  .treasury-reference .treasury-loadout-heading { padding-block:3px; }
}

/* Beginner guide: a fixed table of contents above one readable scroll area. */
body.mobile-game #panel-dialog[data-panel="help"] #content { overflow:hidden; }
.beginner-guide { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; color:var(--ui-ink); font-family:var(--ui-font); }
.guide-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex-shrink:0; gap:6px; padding-bottom:10px; border-bottom:1px solid var(--ui-line); }
.guide-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:16px 4px 8px; scrollbar-gutter:stable; overflow-wrap:anywhere; font-size:16px; line-height:1.5; }
.beginner-guide h2 { font-size:clamp(21px,3vw,28px); margin:0 0 8px; line-height:1.2; }
.beginner-guide h3 { font-size:20px; margin:0 0 6px; line-height:1.25; }
.beginner-guide p { margin:0 0 14px; }
.guide-button,.guide-chapter { min-height:44px; padding:8px 14px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-card); color:var(--ui-ink); font:inherit; line-height:1.25; cursor:pointer; overflow-wrap:anywhere; }
.guide-button:hover,.guide-chapter:hover { background:var(--ui-inset); }
.guide-button[aria-pressed="true"],.guide-chapter[aria-pressed="true"] { background:var(--ui-inset); border-color:var(--ui-gold); box-shadow:inset 0 -3px var(--ui-gold); color:var(--ui-ink); }
.guide-button.guide-primary { background:var(--ui-primary); border-color:var(--ui-primary-dark); color:var(--ui-card-light); }
.guide-button.guide-primary:hover { background:var(--ui-primary-dark); }
.guide-button:focus-visible,.guide-chapter:focus-visible,.guide-reference summary:focus-visible { outline:3px solid var(--ui-primary-dark); outline-offset:2px; }
.guide-tabs .guide-button { min-width:0; padding:8px 4px; }
.guide-reading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px 16px; color:var(--ui-muted); font-size:14px; margin-bottom:8px; }
.guide-chapters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
.guide-chapter { min-width:0; padding:6px 2px; font-family:var(--ui-font-number); }
.guide-lesson,.guide-building,.guide-goal,.guide-path,.guide-reference details { background:var(--ui-card); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:12px; padding:18px; }
.guide-lesson-heading { display:flex; align-items:center; gap:18px; margin-bottom:14px; }
.guide-lesson-heading img { width:84px; height:84px; object-fit:contain; flex-shrink:0; }
.guide-lesson-heading .guide-eyebrow { color:var(--ui-muted); margin:0 0 5px; font-size:14px; }
.guide-intro { font-size:19px; }
.guide-lesson ul { padding-left:23px; margin:10px 0 18px; }
.guide-lesson li+li { margin-top:12px; }
.beginner-guide .guide-tip { background:var(--ui-gold-soft); color:var(--ui-ink); border-left:3px solid var(--ui-gold); padding:12px 14px; border-radius:9px; font-size:16px; }
.guide-lesson-footer { display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.guide-filters,.guide-actions { display:flex; flex-wrap:wrap; gap:8px; }
.guide-filters { margin-bottom:16px; }
.guide-building-list,.guide-goals,.guide-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.guide-building,.guide-goal,.guide-path { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.guide-building-heading { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:12px; }
.guide-building-heading img { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.guide-building-heading h3 { margin:0; }
.guide-building-heading small { color:var(--ui-muted); }
.guide-building-heading>div { min-width:0; flex:1; }
.guide-level { font-size:13px; color:var(--ui-ink); background:var(--ui-inset); padding:4px 7px; border-radius:7px; text-align:center; flex-shrink:0; }
.beginner-guide .guide-building-tip { color:var(--ui-muted); font-size:15px; }
.guide-building .guide-actions,.guide-goal>.guide-button,.guide-path>.guide-button { margin-top:auto; }
.guide-goal-status { display:block; font-size:15px; color:var(--ui-muted); margin-bottom:10px; }
.guide-goal.is-complete { border-color:var(--ui-green); }
.guide-goal.is-complete .guide-goal-status { color:var(--ui-green-dark); }
.guide-goal progress { width:100%; height:8px; appearance:none; border:0; border-radius:9px; overflow:hidden; background:var(--ui-inset); margin:0 0 16px; }
.guide-goal progress::-webkit-progress-bar { background:var(--ui-inset); }
.guide-goal progress::-webkit-progress-value { background:var(--ui-green); }
.guide-goal progress::-moz-progress-bar { background:var(--ui-green); }
.guide-reference { display:grid; gap:10px; }
.guide-reference details { padding:0 14px 14px; }
.guide-reference details:not([open]) { padding-bottom:0; }
.guide-reference summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:18px; }
.guide-welcome { max-width:620px; margin:0 auto; color:var(--ui-ink); font-size:19px; line-height:1.5; }
.guide-welcome>img { display:block; width:120px; height:120px; object-fit:contain; margin:0 auto 16px; }
@media(max-width:600px) {
  .guide-body { padding-top:12px; font-size:16px; scrollbar-gutter:auto; }
  .guide-building-list,.guide-goals,.guide-paths { grid-template-columns:minmax(0,1fr); }
  .guide-lesson,.guide-building,.guide-goal,.guide-path { padding:14px; }
  .guide-lesson-heading { gap:10px; }
  .guide-lesson-heading img { width:54px; height:54px; }
  .guide-tabs { gap:4px; }
  .guide-tabs .guide-button { font-size:15px; }
  .guide-intro { font-size:17px; }
  .guide-actions>.guide-button { flex:1 1 110px; }
  .guide-lesson-footer>.guide-button { max-width:70%; }
}
@media(max-height:400px) and (orientation:landscape) {
  .guide-tabs { padding-bottom:6px; }
  .guide-body { padding-top:10px; }
  .guide-welcome>img { float:left; width:72px; height:72px; margin:0 16px 8px 0; }
  .guide-chapters { margin-bottom:10px; }
}

/* Player HUD: portrait | name and power | VIP, Hunter and AP. */
body.mobile-game .hud-profile,
body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
  display:grid;
  grid-template-columns:80px minmax(0,1fr) 70px;
  grid-template-rows:repeat(3,30px);
  gap:3px 5px;
  width:350px;
  max-width:350px;
  padding:7px;
}
body.mobile-game #account-button {
  grid-column:1/3;
  grid-row:1;
  min-height:30px;
  margin:0;
  padding:0 12px 0 85px;
  border:0!important;
  background:transparent!important;
}
body.mobile-game #account-button .avatar {
  left:0;
  top:0;
  width:80px;
  height:96px;
}
body.mobile-game #player-hud-name {
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  padding:0;
  overflow:hidden;
  color:var(--ui-ink)!important;
  font:700 20px/1.15 var(--ui-font);
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-game #account-button .profile-chevron { right:0; color:var(--ui-muted); }
body.mobile-game .hud-power {
  grid-column:2;
  grid-row:2/4;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:0 5px;
  border-top:1px solid color-mix(in srgb,var(--ui-line) 65%,transparent);
  color:var(--ui-muted);
  font-size:14px;
}
body.mobile-game .hud-power-icon { width:25px; height:25px; flex:none; object-fit:contain; }
body.mobile-game .hud-power strong {
  overflow:hidden;
  color:var(--ui-ink);
  font:700 15px/1.1 var(--ui-font);
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-game .hud-rank.hud-vip {
  position:relative!important;
  inset:auto!important;
  grid-column:3;
  grid-row:1;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:0!important;
  height:100%!important;
  padding:3px 4px;
  box-shadow:none;
}
body.mobile-game .hud-vip-copy { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px; }
body.mobile-game .hud-vip-copy small { color:var(--ui-muted); font:700 8px/1 var(--ui-font); }
body.mobile-game .hud-vip-copy b { font-size:13px!important; }
body.mobile-game #lord-talent-button.hud-hunter {
  grid-column:3;
  grid-row:2;
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) 3px;
  align-content:center;
  align-self:stretch;
  gap:1px 3px;
  width:auto;
  min-width:0;
  min-height:0!important;
  height:100%!important;
  padding:2px 5px;
  text-align:left;
}
body.mobile-game .hud-status-icon { display:block; width:24px; height:24px; flex:none; object-fit:contain; }
body.mobile-game .hud-rank.hud-vip .hud-status-icon { width:23px; height:23px; }
body.mobile-game #lord-talent-button .hud-status-icon { grid-column:1; grid-row:1; align-self:center; width:19px; height:19px; }
body.mobile-game #lord-hud-level { grid-column:2; grid-row:1; align-self:center; font-size:17px; text-align:center; }
body.mobile-game .hud-hunter-xp {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
body.mobile-game .hud-hunter-track {
  grid-column:1/3;
  grid-row:2;
  display:block;
  height:5px;
  overflow:hidden;
  border-radius:5px;
  background:var(--ui-inset);
}
body.mobile-game .hud-hunter-track>i { display:block; width:0; height:100%; border-radius:inherit; background:var(--ui-primary-light); transition:width .2s ease; }
body.mobile-game .hud-energy { grid-column:3; grid-row:3; justify-self:stretch; width:100%; min-height:0!important; height:100%!important; padding:2px 5px; gap:3px; }
body.mobile-game .hud-energy .hud-status-icon { width:18px; height:18px; }
body.mobile-game .hud-energy .hud-meter-copy { justify-content:flex-end; }
body.mobile-game .hud-energy .hud-meter-copy strong { font-size:8px; }
body.mobile-game .hud-energy .hud-meter-track { width:100%; height:3px; margin:1px auto 0; }

@media(max-width:900px) {
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-template-columns:64px minmax(0,1fr) 66px;
    width:330px;
    max-width:330px;
  }
  body.mobile-game #account-button { margin:0; padding-left:69px; }
  body.mobile-game #account-button .avatar { left:0; width:64px; height:96px; }
  body.mobile-game #player-hud-name { font-size:17px; }
}
@media(max-width:600px) and (min-height:521px) {
  body.mobile-game { --edge-top:144px; }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-template-columns:50px minmax(0,1fr) 58px;
    grid-template-rows:repeat(3,24px);
    gap:3px 5px;
    width:min(272px,calc(100vw - 86px));
    max-width:none;
    padding:6px;
  }
  body.mobile-game #account-button { grid-column:1/3; min-height:24px; margin:0; padding:0 9px 0 55px; }
  body.mobile-game #account-button .avatar { left:0; width:50px; height:78px; }
  body.mobile-game #player-hud-name { display:block; padding:0; font-size:13px; }
  body.mobile-game .hud-power { padding-inline:4px; gap:3px; font-size:9px; }
  body.mobile-game .hud-power-icon { width:18px; height:18px; }
  body.mobile-game .hud-power strong { font-size:10px; }
  body.mobile-game .hud-rank.hud-vip { inset:auto!important; min-width:0; min-height:0!important; height:100%!important; padding:2px; font-size:8px; }
  body.mobile-game .hud-rank.hud-vip b { font-size:10px; }
  body.mobile-game .hud-vip-copy small { display:none; }
  body.mobile-game .hud-rank.hud-vip .hud-status-icon { width:18px; height:18px; }
  body.mobile-game #lord-talent-button.hud-hunter { grid-column:3; grid-row:2; height:100%!important; min-height:0!important; padding:1px 3px; gap:1px 2px; }
  body.mobile-game #lord-talent-button .hud-status-icon { width:15px; height:15px; }
  body.mobile-game #lord-hud-level { font-size:14px; }
  body.mobile-game .hud-hunter-xp { font-size:6px; }
  body.mobile-game .hud-hunter-track { height:3px; }
  body.mobile-game .hud-energy { grid-column:3; grid-row:3; height:100%!important; min-height:0!important; padding:1px 3px; }
  body.mobile-game .hud-energy .hud-status-icon { width:14px; height:14px; }
  body.mobile-game .hud-energy .hud-meter-copy { justify-content:space-between; }
  body.mobile-game .hud-energy .hud-meter-copy strong { font-size:8px; }
  body.mobile-game .hud-energy .hud-meter-track { height:3px; margin-top:2px; }
  body.mobile-game #resources { grid-column:1; }
}
@media(max-width:360px) and (orientation:portrait) {
  body.mobile-game { --world-chat-height:174px; }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) { grid-template-columns:46px minmax(0,1fr) 56px; }
  body.mobile-game #account-button { margin:0; padding-left:51px; }
  body.mobile-game #account-button .avatar { left:0; width:46px; }
  body.mobile-game #player-hud-name { font-size:12px; }
}
@media(orientation:landscape) and (max-height:520px) {
  body.mobile-game { --edge-top:78px; }
  body.mobile-game .hud-profile,
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    grid-template-columns:42px minmax(0,1fr) 56px;
    grid-template-rows:repeat(3,18px);
    gap:2px 4px;
    width:min(270px,42vw);
    max-width:270px;
    padding:4px;
  }
  body.mobile-game #account-button { grid-column:1/3; min-height:20px; margin:0; padding:0 8px 0 46px; }
  body.mobile-game #account-button .avatar { left:0; width:42px; height:56px; }
  body.mobile-game #player-hud-name { display:block; padding:0; font-size:9px; }
  body.mobile-game .hud-power { padding-inline:3px; gap:2px; font-size:7px; }
  body.mobile-game .hud-power-icon { width:14px; height:14px; }
  body.mobile-game .hud-power strong { font-size:8px; }
  body.mobile-game .hud-rank.hud-vip { inset:auto!important; min-width:0; min-height:0!important; height:100%!important; padding:1px; font-size:7px; }
  body.mobile-game .hud-rank.hud-vip b { font-size:8px; }
  body.mobile-game .hud-vip-copy small { display:none; }
  body.mobile-game .hud-rank.hud-vip .hud-status-icon { width:14px; height:14px; }
  body.mobile-game #lord-talent-button.hud-hunter { grid-column:3; grid-row:2; height:100%!important; min-height:0!important; padding:1px 2px; gap:1px; }
  body.mobile-game #lord-talent-button .hud-status-icon { width:12px; height:12px; }
  body.mobile-game #lord-hud-level { font-size:13px; }
  body.mobile-game .hud-hunter-xp { font-size:5px; }
  body.mobile-game .hud-hunter-track { height:2px; }
  body.mobile-game .hud-energy { grid-column:3; grid-row:3; height:100%!important; min-height:0!important; padding:1px 2px;gap:1px; }
  body.mobile-game .hud-energy .hud-status-icon { width:11px; height:11px; }
  body.mobile-game .hud-energy .hud-meter-copy strong { font-size:7px; }
  body.mobile-game .hud-energy .hud-meter-track { height:2px; margin-top:1px; }
}

/* Keep the final HUD contract last: all seven destinations stay in one row. */
body.mobile-game { --hud-dock-item-height:64px;--world-chat-height:var(--hud-dock-height,68px)!important;--world-chat-bottom:calc(var(--hud-dock-bottom,8px) + var(--hud-dock-item-height,64px) + 8px)!important; }
body.mobile-game { --world-chat-width:min(720px,calc(100vw - 6px))!important; }
body.mobile-game .world-chat { left:50%!important;right:auto!important;transform:translateX(-50%)!important; }
body.mobile-game .world-chat.is-open { inset:0!important;width:100%!important;height:100dvh!important;transform:none!important;background:#44354924!important; }
body.mobile-game #hud-menu { display:none!important; }
body.mobile-game #navigation.game-dock {
  display:grid!important;flex-direction:unset!important;align-items:unset!important;
  left:50%!important;right:auto!important;bottom:var(--hud-dock-bottom)!important;
  width:min(720px,calc(100vw - 12px))!important;max-width:none!important;height:var(--hud-dock-height)!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;transform:translateX(-50%)!important;
}
body.mobile-game #navigation .game-dock-item,
body.mobile-game #navigation .game-dock-item.hud-scene-switch {
  width:100%!important;min-width:0!important;height:64px!important;margin:0!important;
  border:2px solid var(--ui-frame)!important;border-radius:10px 10px 5px 5px!important;
  background:linear-gradient(var(--ui-card),var(--ui-inset))!important;color:var(--ui-ink)!important;
  box-shadow:inset 0 1px var(--ui-card-light),0 3px 0 var(--ui-primary-dark)!important;
}

/* Reserve the arrow rail in the top HUD flow; on portrait phones it uses the
   otherwise empty strip between the compact profile and the gem counter. */
body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) { margin-inline-end:52px; }
@media(max-width:600px) and (min-height:521px) {
  body.mobile-game .hud-profile:has(.hud-effect-button:not([hidden])) {
    width:min(272px,calc(100vw - 134px));
    margin-inline-end:0;
  }
}
body.mobile-game #navigation .game-dock-item.current { border-color:var(--ui-gold)!important;background:linear-gradient(var(--ui-gold-soft),var(--ui-inset))!important; }
body.mobile-game #navigation .game-dock-item .dock-icon,
body.mobile-game #navigation .game-dock-item.hud-scene-switch .dock-icon { top:-10px!important;width:46px!important;height:46px!important; }
body.mobile-game #navigation .game-dock-item:last-child .dock-icon { top:-13px!important;width:52px!important;height:52px!important; }
body.mobile-game #navigation .game-dock-item .dock-glyph { display:grid!important;place-items:center;font-size:31px;line-height:1; }
body.mobile-game #navigation .game-dock-item .dock-label { min-height:21px!important;padding:3px 1px!important;background:var(--ui-primary)!important;color:var(--ui-card-light)!important;font:700 11px/1 var(--ui-font)!important;text-shadow:none!important; }
body.mobile-game #navigation .game-dock-item.current .dock-label { background:var(--ui-primary-light)!important;color:var(--ui-card-light)!important; }
body.mobile-game #navigation .chat-dock-badge { background:var(--ui-red)!important;color:var(--ui-card-light)!important; }
@media(max-width:700px) {
  body.mobile-game { --hud-dock-height:68px;--hud-dock-item-height:58px; }
  body.mobile-game #navigation.game-dock { width:calc(100vw - 6px)!important;gap:1px!important; }
  body.mobile-game #navigation .game-dock-item,body.mobile-game #navigation .game-dock-item.hud-scene-switch { min-width:44px!important;height:58px!important; }
  body.mobile-game #navigation .game-dock-item .dock-icon,body.mobile-game #navigation .game-dock-item.hud-scene-switch .dock-icon { top:-5px!important;width:36px!important;height:36px!important; }
  body.mobile-game #navigation .game-dock-item:last-child .dock-icon { top:-7px!important;width:40px!important;height:40px!important; }
  body.mobile-game #navigation .game-dock-item .dock-glyph { font-size:25px; }
  body.mobile-game #navigation .game-dock-item .dock-label { min-height:19px!important;font-size:9px!important;letter-spacing:-.2px; }
}
@media(max-width:360px) { body.mobile-game #navigation .game-dock-item .dock-label { font-size:8px!important;letter-spacing:-.35px; } }
@media(orientation:landscape) and (max-height:520px) {
  body.mobile-game { --hud-dock-height:58px;--hud-dock-item-height:49px; }
  body.mobile-game #navigation .game-dock-item,body.mobile-game #navigation .game-dock-item.hud-scene-switch { height:49px!important; }
  body.mobile-game #navigation .game-dock-item .dock-icon,body.mobile-game #navigation .game-dock-item.hud-scene-switch .dock-icon { top:-8px!important;width:36px!important;height:36px!important; }
  body.mobile-game #navigation .game-dock-item .dock-label { min-height:17px!important;font-size:8px!important; }
}

/* Advisory battle calculator, sharing the game's window and role colours. */
body.mobile-game #panel-dialog .event-reference-calendar>header :is(small,strong,b),
body.mobile-game #panel-dialog .event-week article.is-today h3,
body.mobile-game #panel-dialog .event-week article.is-today h3 small,
body.mobile-game .world-chat .world-chat-preview .world-chat-preview-channel strong,
body.mobile-game #panel-dialog .alliance-crest strong { color:var(--ui-card-light)!important; }
body.mobile-game .hud-right-tools #hud-menu { display:flex!important;position:relative;left:auto;bottom:auto; }
.resource-help-icon { display:block;width:64px;height:64px;object-fit:contain; }
.alliance-action-icon img { display:block;width:32px;height:32px;object-fit:contain; }
.battle-preview-dialog { box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border:2px solid var(--ui-frame);border-radius:16px;background:var(--ui-paper);color:var(--ui-ink);font-family:var(--ui-font);overflow:hidden; }
.battle-preview-dialog[open] { display:flex;flex-direction:column; }
.battle-preview-dialog::backdrop { background:rgb(40 27 48 / .58); }
.battle-preview-dialog>header { display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:10px 16px;background:var(--ui-primary);color:var(--ui-card);border-bottom:2px solid var(--ui-gold); }
.battle-preview-dialog h2 { margin:0;font-size:24px; }
.battle-preview-dialog [data-preview-close] { flex:none;width:44px;height:44px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card);color:var(--ui-ink);font-size:26px;cursor:pointer; }
.battle-preview-body { overflow:auto;overscroll-behavior:contain;padding:16px; }
.battle-preview-body p { margin:0 0 12px; }
.battle-preview-body fieldset { min-width:0;margin:0 0 12px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-card); }
.battle-preview-body legend { padding:0 6px; }
.battle-preview-dialog :is(label,legend) { color:var(--ui-ink); }
.battle-preview-unit { display:grid;grid-template-columns:minmax(85px,1fr) 68px minmax(70px,100px);align-items:center;gap:8px;margin-bottom:8px; }
.battle-preview-bonus { display:grid;grid-template-columns:1fr 90px;align-items:center;gap:8px;margin-top:10px; }
.battle-preview-body input,.battle-preview-body select { box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:5px 7px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card-light);color:var(--ui-ink);font:inherit; }
.battle-preview-body input { font-family:var(--ui-font-number); }
.battle-preview-dialog :focus-visible { outline:3px solid var(--ui-primary-light);outline-offset:2px; }
.battle-preview-body button[type=submit],.march-preview-button { min-height:44px;border:1px solid var(--ui-frame);border-radius:9px;background:var(--ui-primary);color:var(--ui-card);font:inherit;padding:8px 14px;cursor:pointer; }
.march-preview-button { margin-top:8px;width:100%;flex:none; }
.battle-preview-result { margin-top:14px; }
.battle-preview-result h3 { margin:0 0 8px; }
.battle-preview-result .is-win { color:var(--ui-green-dark); }
.battle-preview-result .is-loss { color:var(--ui-red-dark); }
.battle-preview-result table { width:100%;border-collapse:collapse;margin:12px 0;background:var(--ui-card); }
.battle-preview-result caption { text-align:left;margin-bottom:6px; }
.battle-preview-result th,.battle-preview-result td { padding:8px 4px;border-bottom:1px solid var(--ui-line);text-align:right; }
.battle-preview-result th:first-child { text-align:left; }
.battle-preview-result td { font-family:var(--ui-font-number); }
.battle-preview-footnote { margin-top:14px!important;color:var(--ui-muted);font-size:14px; }
@media(max-width:360px) { .battle-preview-body { padding:10px; }.battle-preview-unit { gap:5px;grid-template-columns:minmax(80px,1fr) 62px minmax(64px,84px); }.battle-preview-result table { font-size:13px; } }

/* Small, dismissible guidance shares the existing HUD anchor. */
body.mobile-game .comfort-hint {
  padding:0 3px 0 10px;gap:4px;border:1px solid var(--ui-line);
  border-radius:12px;background:var(--ui-card);color:var(--ui-ink);
  width:360px;min-height:48px;box-shadow:0 2px 4px #44305225;
}
body.mobile-game .comfort-hint[hidden],body.mobile-game:has(#panel-dialog[open]) .comfort-hint { display:none!important; }
body.mobile-game .comfort-hint button { min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--ui-ink);font:inherit;text-align:left; }
body.mobile-game .comfort-hint button:first-child { flex:1;min-width:0;padding:5px 0; }
body.mobile-game .comfort-hint button:last-child { flex:0 0 44px;text-align:center;font-size:24px; }
body.mobile-game .comfort-hint strong { display:block;font-size:13px; }
body.mobile-game .comfort-hint small { display:block;font-size:11px;margin-top:2px; }
.comfort-hint button:focus-visible { outline:3px solid var(--ui-primary);outline-offset:-3px; }
.return-summary ul { list-style:none;padding:0;margin:14px 0;display:grid;gap:8px; }
.return-summary li { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-card);color:var(--ui-ink); }
.return-summary li span { min-width:0;overflow-wrap:anywhere; }
.return-summary .button { min-height:44px;flex:none; }
.quest-followup { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;flex:none;background:var(--ui-green-soft);color:var(--ui-green-dark);border-radius:9px; }
.quest-followup .button { min-height:44px;white-space:normal; }
body.mobile-game #game-dialog.march-dialog .march-preflight { margin-top:8px;padding-top:8px;border-top:1px solid var(--ui-line);color:var(--ui-ink);font-size:12px; }
.march-preflight>div { display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 10px;margin-bottom:6px; }
.march-preflight strong { font-weight:normal; }
body.mobile-game #game-dialog.march-dialog .march-preflight p { font-size:12px;line-height:1.35;margin:6px 0; }
body.mobile-game #game-dialog.march-dialog .march-preflight .march-preflight-danger { color:var(--ui-red-dark); }
.march-remembered { display:flex;align-items:center;justify-content:space-between;gap:6px;flex:none;font-size:12px;color:var(--ui-muted); }
.march-remembered button { min-height:44px;padding:4px 8px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card);color:var(--ui-ink);font:inherit; }
@media(max-width:360px){.return-summary li{gap:6px;padding:7px}.return-summary li .button{padding:7px}.quest-followup{font-size:12px}}
/* Forecast children keep their height inside the shared scrollable army panel. */
body.mobile-game #game-dialog.march-dialog .march-army>* { flex-shrink:0; }

/* Audio uses the same paper panels and touch controls as the other settings. */
.audio-settings { flex:none;min-width:0; }
.audio-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px; }
.audio-heading h2 { margin:0; }
body.mobile-game #panel-dialog .audio-settings .button { min-height:44px;white-space:normal; }
.audio-settings .setting-row { gap:12px; }
.audio-settings .setting-row>span { min-width:0; }
.audio-settings .setting-row small { display:block;color:var(--ui-muted); }
.audio-settings input[type=checkbox] { flex:none;width:24px;height:24px;accent-color:var(--ui-primary); }
.audio-volume { display:grid;grid-template-columns:minmax(0,1fr) 60px;align-items:center;gap:0 12px;margin:0 0 14px;color:var(--ui-ink); }
.audio-volume>span { grid-column:1/-1; }
.audio-settings .audio-volume input[type=range] { width:100%;min-width:0;height:44px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--ui-primary);cursor:pointer; }
.audio-volume output { text-align:right;font-family:var(--ui-font-number); }
.audio-demos { display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid var(--ui-line); }
.audio-demos .button { flex:1 1 110px; }
.audio-settings [data-audio-status] { margin:12px 0 6px;color:var(--ui-ink); }
.audio-settings>small { display:block;color:var(--ui-muted);line-height:1.45; }
.audio-settings :focus-visible { outline:3px solid var(--ui-primary);outline-offset:2px; }
@media(max-width:600px) and (min-height:521px) and (max-height:680px) {
  body.mobile-game #hud-left-tools { flex-direction:row;flex-wrap:wrap;width:120px; }
}
/* Approved rune charms: stationary pedestal, floating crystal and restrained light. */
.map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade] { --rune-size:calc(var(--tile-size,44px)*.75); --rune-color:#20D8EE; --charm-grade:#20D8EE; }
.map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade=epic] { --rune-color:#F03ECB; --charm-grade:#F03ECB; }
.map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade=legendary] { --rune-color:#FFB72C; --charm-grade:#FFB72C; }
.map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade] > :is(.atlas-marker-ground,.atlas-marker-level,.castle-skin-effect) { display:none; }
.map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade][data-atlas-target] > img {
 width:calc(var(--rune-size,33px)*1.35);height:calc(var(--rune-size,33px)*1.35);left:50%;margin:0;bottom:calc(var(--rune-size,33px)*.15);
 object-fit:contain;filter:drop-shadow(0 1px 1px #402d37aa);transform:translateX(-50%);
 animation:charm-rune-float 3.8s ease-in-out infinite;animation-delay:var(--rune-delay,0s);pointer-events:none;
}
.charm-rune-effects { position:absolute;inset:0;pointer-events:none; }
.charm-rune-base,.charm-rune-ring { position:absolute;left:50%;width:calc(var(--rune-size,33px)*.95);height:calc(var(--rune-size,33px)*.34);bottom:0;transform:translateX(-50%);box-sizing:border-box;border-radius:48%; }
.charm-rune-base { border:2px solid #493D35;background:radial-gradient(ellipse at 20% 40%,#819258 0 10%,transparent 13%),linear-gradient(160deg,#bcb5ae 0 40%,#8c8582 41% 64%,#666065 65%);box-shadow:0 3px 0 #493d3560; }
.charm-rune-ring { width:calc(var(--rune-size,33px)*.76);height:calc(var(--rune-size,33px)*.2);bottom:calc(var(--rune-size,33px)*.11);border:2px solid #efffff;background:color-mix(in srgb,var(--rune-color) 45%,transparent);box-shadow:0 0 5px 2px var(--rune-color),inset 0 0 3px var(--rune-color);animation:charm-rune-pulse 3.8s ease-in-out infinite;animation-delay:var(--rune-delay,0s); }
.charm-rune-spark { position:absolute;left:12%;bottom:20%;width:3px;height:5px;background:var(--rune-color);border-radius:50%;box-shadow:0 0 3px #fff;opacity:0;animation:charm-rune-spark 3.6s ease-in-out infinite;animation-delay:var(--rune-delay,0s); }
.charm-rune-spark:nth-child(4) { left:80%;bottom:36%;animation-delay:calc(var(--rune-delay,0s) - 1.2s); }
.charm-rune-spark:nth-child(5) { left:54%;bottom:70%;animation-delay:calc(var(--rune-delay,0s) - 2.4s); }
@keyframes charm-rune-float { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-5px); } }
@keyframes charm-rune-pulse { 0%,100% { opacity:.6;transform:translateX(-50%) scale(.92); } 50% { opacity:1;transform:translateX(-50%) scale(1.06); } }
@keyframes charm-rune-spark { 0%,100% { opacity:0;transform:translateY(0) scale(.6); } 40% { opacity:.85; } 75% { opacity:0;transform:translateY(-12px) scale(1); } }
.map-overlay-shell.encounters-paused .atlas-marker--charms *,
.reduced-motion .atlas-marker--charms *,
.atlas-marker--charms[hidden] * { animation:none!important; }
.map-overlay-shell.encounters-paused .charm-rune-spark,
.reduced-motion .charm-rune-spark { display:none; }
@media(prefers-reduced-motion:reduce) {
 .map-overlay-shell .atlas-marker.atlas-marker--charms[data-grade][data-atlas-target] > img,
 .charm-rune-ring,.charm-rune-spark { animation:none!important; }
 .charm-rune-spark { display:none; }
}
body.mobile-game .map-overlay-shell .is-charm { --charm-grade:#20D8EE;--charm-grade-dark:#27616D; }
body.mobile-game .map-overlay-shell .is-charm[data-grade=epic] { --charm-grade:#F03ECB;--charm-grade-dark:#793366; }
body.mobile-game .map-overlay-shell .is-charm[data-grade=legendary] { --charm-grade:#FFB72C;--charm-grade-dark:#805C2B; }
/* Solo creatures remain larger than collectibles; legacy rally art keeps a smaller footprint. */
.mobile-game .map-overlay-shell .atlas-marker--monsters[data-monster-type=solo] > img {
 width:calc(var(--tile-size,44px)*1.75);height:calc(var(--tile-size,44px)*1.75);margin-left:calc(var(--tile-size,44px)*-.875);
}
.mobile-game .map-overlay-shell .atlas-marker--monsters[data-monster-type=rally]:not(.is-regional-boss) > img {
 width:calc(var(--tile-size,44px)*1.17);height:calc(var(--tile-size,44px)*1.17);margin-left:calc(var(--tile-size,44px)*-.585);
}
.mobile-game .map-overlay-shell .atlas-marker--nodes > img:is([data-life-kind=quarry],[data-life-kind=gold],[data-life-kind=crystal]) {
 width:calc(var(--tile-size,44px)*2.3125);height:calc(var(--tile-size,44px)*2.3125);margin-left:calc(var(--tile-size,44px)*-1.15625);
}