@import url("/css/vietnamese-fonts.css?v=1");
/* Destination identities. Scene illustrations and semantic status colors stay local. */
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-page, #tower-tasks-modal, .tower-header-bar, #shop-modal, #hall-modal, #ba-scene, #ba-split-screen, #ba-vs, #ba-result) {
    --area-font: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
    --area-card: #fff; --area-ink: #233047; --area-muted: #536176;
    font-family: var(--area-font); color: var(--area-ink);
}
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-page, #tower-tasks-modal, .tower-header-bar, #shop-modal, #hall-modal, #ba-scene, #ba-split-screen, #ba-vs, #ba-result, #market-sell-modal, #transfer-modal, #garden-dragon-modal, #dragon-spirit-gift) :where(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,em,a,label,summary,button,input,select,textarea,div,td,th) {
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif !important;
}
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-content, #tower-tasks-modal, #shop-modal, #hall-modal) :where(small) { font-size: 12px !important; line-height: 1.5; }
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-content, #tower-tasks-modal, #shop-modal, #hall-modal) :where(input,select,textarea) { accent-color: var(--area-accent); }
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-content, #tower-tasks-modal, #shop-modal, #hall-modal) :where(input,textarea)::placeholder { opacity: 1; color: var(--area-muted); }
html :is(#school-page, #garden-modal, #pond-modal, #dragon-den-modal, #tower-content, #tower-tasks-modal, #shop-modal, #hall-modal) :where(h1,h2,h3) { overflow-wrap: anywhere; }

/* School: clear blue study surfaces against the illustrated campus. */
html #school-page.school-campus { --area-bg: #edf4ff; --area-soft: #e1ecfc; --area-accent: #285da6; --area-line: #bdcee7; --bg-card: #fff; --bg-main: var(--area-bg); --text-primary: #233047; --text-secondary: #536176; --text-muted: #536176; --border: var(--area-line); background-color: var(--area-bg); }
html #school-page .school-scene::after { background: linear-gradient(90deg,#10284cdb,#203d6782 48%,#29416b22),linear-gradient(0deg,#112c5080,transparent 70%); }
html #school-page .school-header { background: #18395e; border-color: #617e9e; }
html #school-page .school-brand small { color: #d5e5f7; }
html #school-page .school-header-btn { color: #edf4ff; border-color: #95b0d080; }
html #school-page h1 { color: #fff; font-weight: 700; font-size: clamp(2rem,3.2vw,3.4rem); line-height: 1.25; }
html #school-page h1 em { color: #a9d7ff; }
html #school-page .school-today { background: #173a60ed; border-color: #89afd2; }
html #school-page .school-continue { background: #edf4ff; color: #234f8e; border-color: #b8d4f4; box-shadow: 0 3px 0 #7f9fc3; }
html #school-page .school-board { background: var(--area-bg); color: var(--area-ink); border-color: #7f96b5; box-shadow: 0 0 0 1px #b6c9e2,0 18px 55px #132c3655; }
html #school-page .school-board-heading { background: linear-gradient(115deg,#1d426e,#285da6); border-color: #9ac5ef; color: #fff; }
html #school-page .school-board-heading h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.4; }
html #school-page .school-eyebrow, html #school-page .school-board-heading .school-eyebrow { font-size: 11px; color: #dfedff; }
html #school-page :is(.school-today-label,.school-list-heading > span,.school-board-foot) { font-size: 11px; }
html #school-page .school-board-emblem { color: #c4e3ff; border-color: #c4e3ff70; }
html #school-page .school-board-foot { background: var(--area-soft); color: var(--area-muted); border-color: var(--area-line); }
html #school-page .school-tabs { background: #dce8f9; border-color: #b8cce8; }
html #school-page .school-tab:nth-child(1) { background: linear-gradient(135deg,#d1fae5,#a7f3d0); border-color: #34d399; color: #065f46; }
html #school-page .school-tab:nth-child(2) { background: linear-gradient(135deg,#fef3c7,#fde68a); border-color: #fbbf24; color: #92400e; }
html #school-page .school-tab:nth-child(3) { background: linear-gradient(135deg,#dbeafe,#bfdbfe); border-color: #60a5fa; color: #1e40af; }
html #school-page .school-tab:nth-child(4) { background: linear-gradient(135deg,#ffe4e6,#fecdd3); border-color: #fb7185; color: #9f1239; }
html #school-page .school-tab:nth-child(5) { background: linear-gradient(135deg,#ede9fe,#ddd6fe); border-color: #a78bfa; color: #5b21b6; }
html #school-page .school-tab:nth-child(6) { background: linear-gradient(135deg,#cffafe,#a5f3fc); border-color: #22d3ee; color: #0e7490; }
html #school-page .school-tab.active { color: #fff; }
html #school-page .school-tab:nth-child(1).active { background: linear-gradient(135deg,#10b981,#059669); border-color: #047857; }
html #school-page .school-tab:nth-child(2).active { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: #b45309; }
html #school-page .school-tab:nth-child(3).active { background: linear-gradient(135deg,#3b82f6,#1d4ed8); border-color: #1e3a8a; }
html #school-page .school-tab:nth-child(4).active { background: linear-gradient(135deg,#f43f5e,#e11d48); border-color: #be123c; }
html #school-page .school-tab:nth-child(5).active { background: linear-gradient(135deg,#8b5cf6,#6d28d9); border-color: #5b21b6; }
html #school-page .school-tab:nth-child(6).active { background: linear-gradient(135deg,#06b6d4,#0284c7); border-color: #0369a1; }
html #school-page .school-tab.active .school-tab-badge { background: #ffffff; color: #0f172a; }
html #school-page #school-mistakes-badge { color: #ffffff; background: linear-gradient(135deg,#f97316,#ea580c); }
html #school-page .school-tab.active #school-mistakes-badge { color: #ea580c; background: #ffffff; }
html #school-page .school-attendance { background: #e3edfc; border-color: var(--area-line); }
html #school-page :is(.attendance-title,.attendance-pts,.school-list-heading h3,.school-quest-title,.school-live-card h3,.school-empty h3) { color: #234f8e; }
html #school-page :is(.school-quest-description,.school-class-meta,.school-class-group,.school-list-heading > span,.school-section-kicker,.school-attendance-hint) { color: #52647a; }
html #school-page .school-section-kicker { font-size: 11px; }
html #school-page :is(.school-quest-card,.school-live-card) { background: #fff; border-color: #cfdaeb; }
html #school-page .school-history-card { background: #fff !important; border-color: #cfdaeb !important; }
html #school-page :is(.btn-primary,.btn-success), html #school-page .school-quest-action .btn-primary { background: var(--area-accent); border-color: var(--area-accent); color: #fff; box-shadow: 0 3px 0 #1b4279; }
html #school-page .school-promo-banner { background: var(--area-soft); border-color: var(--area-line); }

/* Garden: mint surfaces, leafy actions and the original cloud panorama. */
html #garden-modal { --area-bg: #e8f5ec; --area-soft: #d9edde; --area-accent: #287544; --area-line: #bad6c2; --area-ink: #254735; --area-muted: #506a5b; }
html #garden-modal .modal-content.sky-garden-modal { background: var(--area-bg) !important; color: var(--area-ink); }
html #garden-modal .sky-garden { background-color: #c8ead8; }
html #garden-modal .sky-hud { background: #e8f5ecf2; border-color: var(--area-line); }
html #garden-modal :is(.sky-panel,.sky-inspector,.sky-floor-lock) { background: #fffffff5; border-color: var(--area-line); }
html #garden-modal .sky-dock { background: linear-gradient(#f7fcf8,#e8f5ec); border-color: var(--area-line); }
html #garden-modal :is(.sky-dock button,.sky-floor-nav button,.sky-floor-title b,.sky-selection,.sky-coins,.sky-time) { background: var(--area-bg); color: #285f3d; border-color: var(--area-line); }
html #garden-modal .modal-close { background: var(--area-soft) !important; color: #285f3d !important; border-color: var(--area-line) !important; }
html #garden-modal :is(.sky-tabs button.active,.sky-seed-filter button.active,.sky-seed-card.selected) { background: var(--area-soft); color: #285f3d; border-color: #70a982; }
html #garden-modal :is(.sky-seed-card,.sky-pot-card) { background: #fff; border-color: var(--area-line); }
html #garden-modal :is(.sky-intro,.sky-intro h2,.sky-garden-brand strong,.sky-panel-heading,.sky-floor-lock strong,.sky-inspector-info strong) { color: #285f3d; text-shadow: none; }
html #garden-modal :is(.sky-panel-tip,.sky-inspector-info p,.sky-garden-foot,.sky-journal-entry,.sky-neighbor-card small,.sky-harvest-card small,.garden-seed-item small,.sky-pot-card small) { color: var(--area-muted); }
html #garden-modal :is(.sky-floor-lock button,.sky-inspector-actions button,.sky-harvest-actions button,.sky-buy-seed,.sky-pot-card button) { background: #287544; color: #fff; border-color: #287544; }
html #garden-modal .sky-level { color: #285f3d; }
html #garden-modal .sky-xp-track { background: #c4dbc9; }
html #garden-modal .sky-xp-fill { background: #287544; }
html #garden-modal :is(.sky-time,.sky-quick-action,.sky-panel-tip,.sky-tabs button,.sky-floor-nav button,.sky-pot-card b,.sky-seed-stock,.sky-dock button) { font-size: 11px !important; line-height: 1.4; }
html #garden-modal .sky-seed-card .sky-drag-handle { font-size: 11px; background: #e8f5ec; }
html #garden-modal .sky-floor-nav button.current { background: #287544; border-color: #287544; color: #fff; }

/* Lotus pond: aqua controls and readable light docks over the water scene. */
html #pond-modal { --area-bg: #e6f5f6; --area-soft: #cfe9ec; --area-accent: #146f78; --area-line: #abcfd4; --area-ink: #204e55; --area-muted: #466770; --lotus-ink: #f5ffff; --lotus-muted: #d0edf0; --lotus-gold: #b8f0f3; }
html #pond-modal .modal-content.lotus-fullscreen { background: var(--area-bg) !important; }
html #pond-modal .modal-header { background: var(--area-bg) !important; border-color: var(--area-line) !important; color: var(--area-ink); }
html #pond-modal :is(.modal-title,.lotus-wallet,.modal-title small,.lotus-wallet small) { color: var(--area-ink); }
html #pond-modal :is(.lotus-header-icon,.lotus-back,.lotus-header-tools button,.modal-close) { background: var(--area-soft); border-color: var(--area-line); color: var(--area-ink); }
html #pond-modal .lotus-shade { background: linear-gradient(90deg,#103f49dd,#1c535980 48%,#24595c20),linear-gradient(0deg,#103e49b3,transparent 60%); }
html #pond-modal :is(.lotus-story h2,.lotus-story h2 em,.lotus-kicker,.lotus-shrine-caption) { color: #e1fcff; }
html #pond-modal .lotus-story h2 { font-size: clamp(2rem,3.8vw,3.6rem); font-weight: 700; line-height: 1.25; }
html #pond-modal :is(.lotus-kicker,.lotus-shrine-caption,.lotus-spirit-progress > div > span) { font-size: 11px; }
html #pond-modal :is(.lotus-dock,.lotus-spirit-progress) { background: #e6f5f6f5; border-color: #abcfd4; color: var(--area-ink); }
html #pond-modal :is(.lotus-dock-copy > span,.lotus-dock-copy b,.lotus-dock-copy small,.lotus-spirit-progress strong,.lotus-spirit-progress span,.lotus-spirit-progress small,.lotus-dock-note,.lotus-dock-tools,.lotus-dock-tools button) { color: var(--area-ink); }
html #pond-modal :is(.lotus-wish-actions button,.lotus-spirit-progress button,.lotus-spirit-claim) { background: var(--area-accent); color: #fff; border-color: var(--area-accent); box-shadow: 0 3px 0 #0f5057; }
html #pond-modal .lotus-wish-actions small { color: #fff; opacity: 1; }
html #pond-modal .lotus-wish-actions .lotus-ten { background: #0e535b; border-color: #0e535b; color: #fff; box-shadow: 0 3px 0 #093b42; }
html #pond-modal .lotus-dock-tools { border-color: var(--area-line); }
html #pond-modal .lotus-dock-tools :is(button,label) { min-height: 44px; }
html #pond-modal .lotus-spirit-progress progress::-webkit-progress-value { background: var(--area-accent); }
html #pond-modal .lotus-spirit-progress progress::-moz-progress-bar { background: var(--area-accent); }

/* Dragon care: lavender home; each dragon retains its elemental stage. */
html #dragon-den-modal { --area-bg: #f0ecfa; --area-soft: #e3dcf3; --area-accent: #7452a0; --area-line: #cec1e4; --den-ink: #352b49; --den-muted: #655974; --den-paper: #fff; --den-line: #dcd3e8; --den-green: #7452a0; }
html #dragon-den-modal .modal-content { background: var(--area-bg) !important; }
html #dragon-den-modal .dd-layout { background: var(--area-bg); }
html #dragon-den-modal .modal-header { background: linear-gradient(100deg,#faf8ff,#e5def4); border-color: var(--area-line); }
html #dragon-den-modal .dd-sidebar { background: linear-gradient(#e9e2f6,#f0ecfa); border-color: var(--area-line); }
html #dragon-den-modal :is(.dd-bottom-tabs,.dd-level-badge,.dd-rename-btn,.dd-roster-card,.modal-close) { background: var(--area-soft); border-color: var(--area-line); }
html #dragon-den-modal .dd-roster-card.active { background: #faf8ff; border-color: #7452a0; box-shadow: inset 3px 0 #7452a0; }
html #dragon-den-modal :is(.dd-tab-btn,.dd-eyebrow,.dd-health-note,.dd-hero-xp > span,.dd-hero-xp > small,.dd-roster-level,.dd-card-heading > span,.dd-hp-header,.dd-eq-name,.dd-growth-requirements > span) { color: #655974; }
html #dragon-den-modal .dd-tab-btn.active { background: linear-gradient(120deg,#7452a0,#57417e); color: #fff; }
html #dragon-den-modal .dd-care-action { background: #7452a0; color: #fff; box-shadow: 0 3px 0 #4e356d; }
html #dragon-den-modal .dd-care-action:hover { background: #57417e; }
html #dragon-den-modal .dd-care-card { background: #fff; }
html #dragon-den-modal .dd-growth-card { background: #f5f1fb; border-color: var(--area-line); }
html #dragon-den-modal .dd-eq-card { background: #f5f3f9; border-color: #d8cee5; }
html #dragon-den-modal .dd-eq-card.filled { background: color-mix(in srgb,var(--rarity-color) 9%,#fff); border-color: color-mix(in srgb,var(--rarity-color) 40%,#d8cee5); }
html #dragon-den-modal .dd-star-btn { background: #7452a0; color: #fff; box-shadow: 0 3px 0 #4e356d; }
html #dragon-den-modal .dd-star-btn:disabled { background: #e4ddea; color: #655974; box-shadow: none; }
html #dragon-den-modal .dd-element-chip { background: #fffdf4ed; }
html #dragon-den-modal .dd-hero-xp-fill { background: linear-gradient(90deg,#7452a0,#a085c4); }
html #dragon-den-modal :is(.dd-eyebrow,.dd-sidebar-heading p,.dd-sidebar-note,.dd-roster-level,.dd-element-chip,.dd-stage-label,.dd-pet-hint,.dd-level-badge,.dd-hero-xp > span,.dd-card-heading > span,.dd-eq-name,.dd-health-note,.dd-growth-requirements > span,.dd-skill-dot,.de-bar-container,.de-bar-header > div) { font-size: 11px !important; }
html #dragon-den-modal :is(.dd-roster-name,.dd-tab-btn,.dd-hp-header,.dd-hp-header span:last-child,.dd-stat-tile > span:last-child) { font-size: 12px; }
html #dragon-den-modal .dd-tab-btn span { font-size: inherit; }
html #dragon-den-modal h1 em { color: #65448e; }
html #dragon-den-modal .dd-sidebar-note p { font-size: 11px; }
html #dragon-den-modal .dd-hero-xp > strong { font-size: 11px; }
html #dragon-den-modal .dd-stat-tile > span:last-child { color: #655974; }
html #dragon-den-modal :is(.dd-skill-section summary small,.dd-together-card small,.dd-skill-next,.dd-skill-hint) { color: #655974; }
html #dragon-den-modal .dd-skill-dot { color: #655974; font-weight: 700; }
html #dragon-den-modal .dd-skill-dot.active { background: #7452a0 !important; color: #fff; }
html #dragon-den-modal .dd-skill-card > div[style] { color: #655974 !important; font-size: 12px !important; }
html #dragon-den-modal :is(.de-bar-label,.de-bar-count) { color: #45643c !important; }
html #dragon-den-modal #de-regen-countdown { color: #506645 !important; font-size: 11px; }

/* Tower: indigo task surfaces, including both floor browsing and entered floors. */
html :is(#tower-page,#tower-content,#tower-tasks-modal) { --area-bg: #ebeffb; --area-soft: #dce4f8; --area-accent: #344ea1; --area-line: #bac8e9; --area-muted: #53617b; --spire-gold: #765b21; --text-primary: #233047; --text-secondary: #53617b; }
html #tower-tasks-modal .tower-tasks-modal-container { background: var(--area-bg); color: #233047; }
html #tower-tasks-modal .tasks-modal-header { background: var(--area-bg); border-color: var(--area-line); }
html #tower-tasks-modal #codex-overall-progress-box { background: linear-gradient(#dce4f8ed,#dce4f8f5),url('/img/village-interiors/tower.webp') center/cover; border-color: var(--area-line); }
html #tower-tasks-modal #codex-tasks-arena { background: #f4f6fc; }
html #tower-tasks-modal :is(.tower-workspace-back,.tower-workspace-close,.tower-study-emblem,.tower-reward-steps span,#tower-study-floor) { background: #f8faff; color: #344ea1; border-color: var(--area-line); }
html #tower-tasks-modal :is(.tower-workspace-heading h2,.tower-study-progress strong,.tower-task-description h3,.tower-task-rewards) { color: #344ea1; }
html #tower-tasks-modal :is(.tower-workspace-heading > span,.tower-sidebar-eyebrow,.tower-floor-label,.tower-study-progress span,.tower-replay-guide,.tower-replay-guide summary,.tower-task-description p,.tower-task-description small,.tower-task-meta,.tower-task-list-heading) { color: #53617b; }
html #tower-tasks-modal #tower-continue, html #tower-tasks-modal .task-action-btn { background: #344ea1; border-color: #344ea1; color: #fff; }
html #tower-tasks-modal .tower-study-track { background: #c5d0e9; }
html #tower-tasks-modal .tower-study-track > div { background: #344ea1; }
html #tower-tasks-modal .tower-task-categories button[aria-pressed=true] { background: #dce4f8; color: #344ea1; border-color: #8da2d6; }
html #tower-tasks-modal .tower-study-task { border-color: #d4dced; }
html #tower-tasks-modal .tower-task-mark { background: #ebeffb; color: #344ea1; }
html body.in-tower .tower-header-bar { background: #ebeffbf5; border-color: #bac8e9; }
html body.in-tower :is(.tower-title-text,.tower-back-btn,.tower-secret-trigger,.tower-stars-pill,.tower-stars-val) { color: #344ea1; text-shadow: none; }
html body.in-tower :is(.tower-back-btn,.tower-secret-trigger,.tower-stars-pill) { background: #dce4f8; border-color: #bac8e9; }
html #tower-page :is(.tower-stage-viewport,.stage-elevator-dock,.stage-top-rocket-pill) { background: #ebeffbf5; border-color: #bac8e9; }
html #tower-page :is(.stage-top-floor-name,.stage-floor-badge-text,.elevator-dock-arrow,.elevator-dock-tag,.altitude-label,.altitude-num) { color: #344ea1; text-shadow: none; }
html #tower-page .elevator-dock-btn { background: #dce4f8; color: #344ea1; border-color: #bac8e9; }
html #tower-page .stage-enter-floor-btn { background: #344ea1; color: #fff; border-color: #344ea1; }
html #tower-page .stage-enter-floor-btn:hover { background: #263c83; }
html #tower-page .stage-enter-floor-btn--locked, html #tower-page .stage-enter-floor-btn--locked:hover { background: #e3e8f5 !important; color: #53617b !important; border-color: #bac8e9 !important; }
html #tower-page .stage-top-rocket-pill--locked .stage-floor-badge-text { color: #53617b !important; }
html #tower-page :is(.stage-chip--climbing,.stage-chip--completed) { background: #344ea1f2 !important; color: #fff; border-color: #bac8e9; }
html #tower-page .stage-chip--locked { background: #e3e8f5f2; color: #53617b; border-color: #bac8e9; }
html #tower-page .elevator-dock-btn:hover:not(:disabled) { background: #cbd6f0; color: #263c83; }
html #tower-page :is(.elevator-dock-tag,.altitude-label,.stage-floor-badge-text,.stage-chip-label,.stage-enter-text) { font-size: 11px; }

/* Market: peach paper, terracotta actions and white inventory cards. */
html #shop-modal { --area-bg: #fff0e6; --area-soft: #f6ded0; --area-accent: #a04e2a; --area-line: #dcb8a3; --area-ink: #50382f; --area-muted: #705950; --market-ink: var(--area-ink); --market-muted: var(--area-muted); --market-paper: #fff; --market-green: #a04e2a; --market-line: var(--area-line); --market-gold: #875721; }
html #shop-modal .modal-content.market-fullscreen { background: var(--area-bg) !important; }
html #shop-modal .modal-header { background: var(--area-bg) !important; border-color: var(--area-line) !important; }
html #shop-modal :is(.market-sidebar,.market-content-heading,.market-detail,.shop-card,.market-scenery-caption) { background: #fff; border-color: var(--area-line); color: var(--area-ink); }
html #shop-modal :is(.modal-title,.market-sidebar-title strong,#market-heading,.shop-card-name,.market-detail h3,.market-affordable) { color: var(--area-ink); }
html #shop-modal :is(.market-brand-icon,.modal-close,.market-header-actions button,.market-count,.market-stepper) { background: var(--area-soft); color: var(--area-ink); border-color: var(--area-line); }
html #shop-modal :is(.market-header-actions button.active,.market-main-nav button.active,.market-buy,.market-destination,.market-scenery-caption button) { background: var(--area-accent); color: #fff; border-color: var(--area-accent); box-shadow: none; }
html #shop-modal .market-buy:hover:not(:disabled) { background: #7f3d20; }
html #shop-modal .market-buy:disabled { background: #eee5df; color: #705950; border-color: #d8c9bf; }
html #shop-modal :is(.market-main-nav button:hover:not(.active),.shop-filter-btn--active,.market-detail-note) { background: var(--area-soft); color: var(--area-ink); }
html #shop-modal #shop-category-tabs .shop-filter-btn--active { background: var(--area-soft); color: var(--area-ink); border-color: var(--area-line); }
html #shop-modal .market-item-art { background: radial-gradient(ellipse,#f6ded0,#fff6ef 70%); }
html #shop-modal :is(.market-item-meta,.market-item-status,.market-sidebar-foot,#market-eyebrow,.market-sidebar-title > span,.market-detail-label) { color: var(--area-muted); }
html #shop-modal .market-search { border-color: var(--area-line); }
html #shop-modal :is(.market-sidebar-title > span,#market-eyebrow) { font-size: 11px; }
html #market-sell-modal :is(input,select) { background: #fff; color: #50382f; border-color: #dcb8a3; }
html #market-sell-modal .market-sell-form > button { background: #a04e2a; color: #fff; }

/* Hall: reserve cream and bronze for honors and rewards. */
html #hall-modal { --area-bg: #fff7e7; --area-soft: #f3e6c8; --area-accent: #80621a; --area-line: #d8c392; --area-ink: #483b25; --area-muted: #716145; --hall-ink: var(--area-ink); --hall-muted: var(--area-muted); --hall-line: var(--area-line); }
html #hall-modal .modal-header { background: var(--area-bg) !important; }
html #hall-modal :is(.hall-content,.hall-controls) { background: #fffdf8; }
html #hall-modal .hall-content { border-color: var(--area-line); }
html #hall-modal .modern-tabs { background: var(--area-soft) !important; }
html #hall-modal .modern-tab.active { background: #80621a !important; color: #fff !important; border-color: #80621a !important; }
html #hall-modal #hall-reward-count { background: #80621a; color: #fff; }
html #hall-modal :is(.leaderboard-name,.podium-name) { color: var(--area-ink); }
html #hall-modal :is(.podium-val,.hall-prize-details summary,.hall-info-text) { color: #765b21; }
html #hall-modal :is(.hall-prize-details,.hall-my-rank) { background: var(--area-bg); border-color: var(--area-line); }
html #hall-modal .hall-prize-details summary span { color: #716145; }
html #hall-modal .hall-row-avatar { color: #66521f; }
html #reward-inbox-modal, html #reward-inbox-modal :where(div,span,button,small) { font-family: 'Be Vietnam Pro','Segoe UI',Arial,sans-serif !important; }
html #reward-inbox-modal .modal-content { background: #fff7e7; color: #483b25; border-color: #d8c392; }
html #reward-inbox-modal .modal-header { background: #f3e6c8; border-color: #d8c392; }
html #reward-inbox-modal :is(.modal-title,.reward-inbox-heading) { color: #80621a; }
html #reward-inbox-modal :is(.reward-inbox-meta,.reward-inbox-date,.reward-inbox-empty) { color: #716145; line-height: 1.6; }
html #reward-inbox-modal .reward-inbox-item { background: #fffdf8; overflow-wrap: anywhere; }
html #reward-inbox-modal .modal-close { background: #fff7e7; color: #80621a; }
html #reward-inbox-modal .btn { min-height: 44px; background: #80621a !important; color: #fff !important; }

/* Battle: night-blue HUD, clear HP colors and amber controls. */
html :is(#ba-scene,#ba-split-screen,#ba-vs,#ba-result) { --area-bg: #1b273d; --area-soft: #27374f; --area-accent: #e8ab51; --area-ink: #edf4ff; --area-muted: #c3cfe0; }
html .ba-chess-arena { background: #1b273d; color: #edf4ff; }
html .ba-chess-arena :is(.ba-hud,.ba-battle-controls) { background: #1b273df5; border-color: #7385a180; }
html .ba-chess-arena.ba-mode-boss :is(.ba-hud,.ba-battle-controls) { background: #202940f5; }
html .ba-chess-arena :is(.ba-hud-side,.ba-player-copy > strong,.ba-team-vitality,.ba-battle-tip,.ba-battle-tip strong,.ba-battle-tip small) { color: #e1eafa; }
html .ba-chess-arena :is(.ba-player-copy > small,.ba-battle-title > small) { color: #c3cfe0; }
html .ba-chess-arena .ba-hud-turn { background: #e8ab51; color: #233047; border-color: #e8ab51; }
html .ba-chess-arena .ba-battle-controls button { background: #27374f; color: #edf4ff; border-color: #8296b2; }
html .ba-chess-arena .ba-battle-controls :is(.ba-skip,button.active) { background: #e8ab51; color: #233047; border-color: #e8ab51; }
html .ba-chess-arena .ba-battle-controls #ba-skip-btn { background: #e8ab51; color: #233047; border-color: #e8ab51; }
html .ba-chess-arena .ba-battle-controls button:hover { background: #385071; }
html .ba-chess-arena .ba-battle-controls .ba-skip:hover { background: #f0bc70; }
html .ba-chess-arena .ba-dragon-name { background: #1b273de8; color: #edf4ff; border-color: #b1c3dd80; }
html .ba-chess-arena .ba-dragon-lv, html .ba-chess-arena .ba-team-row::before { color: #edf4ff; text-shadow: 0 1px 3px #102238; }
html .ba-chess-arena :is(.ba-dragon-name,.ba-dragon-lv,.ba-player-copy > small,.ba-battle-title > small,.ba-team-vitality) { font-size: 11px !important; }
html .ba-chess-arena .ba-arena-floor { border-color: #8391ac; background: repeating-conic-gradient(#4d6184c9 0% 25%,#c6d2e0c9 0% 50%) 50%/120px 120px; }
html .ba-chess-arena :is(.ba-log,.ba-skill-banner,.ba-skill-ribbon) { background: #1b273df5; color: #edf4ff; border-color: #8296b2; }
html .ba-chess-arena :is(.ba-log-row,.ba-skill-ribbon small) { color: #d5dfed; }
html #ba-vs.ba-vs-screen { background: #1b273d; color: #edf4ff; }
html #ba-vs .ba-vs-bg { background: linear-gradient(#1b273de6,#1b273de6),url('/img/dragons/arenas/pvp.webp?v=2') center/cover; }
html #ba-vs .ba-vs-card { background: #27374f; border-color: #7385a1; }
html #ba-vs :is(.ba-vs-team-name,.ba-vs-card-name,.ba-vs-card-meta) { color: #edf4ff; }
html #ba-vs :is(.ba-vs-team-power,.ba-vs-pos) { background: #364a69; color: #edf4ff; }
html #ba-result { background: #1b273df5; color: #edf4ff; }
html #ba-result .ba-result-detail { color: #c3cfe0; }
html #ba-result .ba-result-btn { background: #e8ab51; color: #233047; }

@media (max-width: 760px) {
    html :is(#school-page,#garden-modal,#pond-modal,#dragon-den-modal,#tower-tasks-modal,#shop-modal,#hall-modal) :where(input,select,textarea) { font-size: 16px !important; }
    html #garden-modal :is(.sky-buy-seed,.sky-pot-card button,.sky-inspector-actions button,.sky-seed-filter button) { min-height: 44px; }
    html #garden-modal .sky-inspector-close { width: 44px; height: 44px; top: 0; right: 0; }
    html #garden-modal .sky-inspector { padding-right: 44px; }
    html #dragon-den-modal .dd-rename-btn { width: 40px; height: 40px; }
    html #dragon-den-modal .dd-bottom-tabs { display: grid; grid-template-columns: repeat(6,minmax(82px,1fr)); overflow-x: auto; }
    html #dragon-den-modal .dd-tab-btn { white-space: nowrap; }
    html #dragon-den-modal .dd-tab-btn { font-size: 11px; }
    html #dragon-den-modal .dd-stat-tile { grid-template-columns: 1fr; }
    html #dragon-den-modal .dd-sidebar-title { font-size: 12px; }
    html #school-page :is(#school-countdown,#school-scenery,.school-tab,.school-quest-description,.school-today p,.school-list-heading h3,.school-quest-action .btn) { font-size: 12px; }
    html #garden-modal :is(.sky-neighbor-open,.sky-level,.sky-level > b,.sky-intro,.sky-intro button,.sky-floor-lock button) { font-size: 11px !important; }
    html #garden-modal .sky-neighbor-open { min-height: 44px; }
    html #pond-modal :is(.lotus-dock-copy b,.lotus-dock-tools,.lotus-dock-tools button,.lotus-story p) { font-size: 12px; }
    html #pond-modal .lotus-dock-tools label { font-size: 12px; }
    html #shop-modal :is(.market-main-nav button,.market-nav-children button,.market-count,.market-affordable,.market-item-desc,.market-item-meta,.market-item-status,.market-price small,.market-buy) { font-size: 12px; }
    html #shop-modal #shop-category-tabs .shop-filter-btn, html #shop-modal .shop-card-price span { font-size: 12px; }
    html #hall-modal :is(#hall-countdown-label,#hall-countdown,.hall-prize-details summary span,.reward-tiers-table,.reward-tiers-table th,.reward-tiers-table caption,.hall-prize-note,.hall-board-heading > span,.podium-name,.podium-val,.leaderboard-name,.leaderboard-score) { font-size: 12px; }
    html #hall-modal .reward-tiers-table td { font-size: 12px; }
    html #dragon-den-modal h3 { font-size: 13px; }
    html .ba-chess-arena :is(.ba-hud-turn,.ba-battle-controls button) { font-size: 12px !important; min-height: 44px; }
    html .ba-chess-arena .ba-battle-title > small { letter-spacing: 0; }
    html .ba-chess-arena .ba-arena-floor { background-size: 68px 68px; }
    html #pond-modal .lotus-story h2 { font-size: 2rem; }
}