/* Koyland iso theme, part "panels": headings, tabs, kickers, cards, progress, rarity and the windows' inner furniture (Köy / Ekonomi / Sefer / Kayıtlar / Ayarlar,
   random events, eras, weekly ledger and recap, victory, research, artifacts, album). Imported by iso-theme.css; every rule starts with html.iso.
   Tokens do most of the work (iso-theme.css part 1); this file only covers what a token cannot reach: fixed colours, uppercase eyebrows, Cinzel on section labels,
   guide ("is-next") fills on tabs, parchment-era gradients. !important is used only where a JS template writes an inline colour (marked "inline"). */

/* ---- headings: Cinzel is for names and window titles; section labels (h4) are Outfit semibold, sentence case ---- */
html.iso #panel h4, html.iso .help-card h4, html.iso .away-card h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; color: #d6dedb; }
html.iso #panel h4 { margin-top: 18px; }
html.iso :is(.village-event-kicker, .era-kicker, .victory-kicker, .announce-kicker, .ui-quest-kicker, .fx-card small, .info-group h6, .tip-kicker) {
  text-transform: none; letter-spacing: .02em; font-family: var(--font-body); font-weight: 600;
}
html.iso .era-kicker { font-size: 13px; }
html.iso .announce-kicker { color: #e6bf62; }

/* ---- tabs: the guide's "next step" mark is a gold underline, not a kiremit fill (kiremit is reserved for the primary action) ---- */
html.iso #panel button.ui-tab.is-next:not(.on) { background: transparent; border: 0; color: var(--ink); box-shadow: inset 0 -3px 0 #d9ae4a; }
html.iso #panel button.ui-tab.is-next:not(.on)::after { content: ''; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #d9ae4a; }
html.iso #panel .ui-tab { position: relative; min-height: 40px; }
html.iso .ui-tab-badge, html.iso .ui-count { background: var(--surface-inset); color: var(--ink); border: 1px solid var(--border-soft); }
html.iso #panel .ui-tab.is-locked { color: #9db3b3; }

/* ---- cards and chips: panel 14px > card 10px > chip 8px, a hairline instead of a shadow ---- */
html.iso :is(.ui-card, .ledger-card, .artifact-card, .shop-card) { border-radius: 10px; }
html.iso #panel :is(.ui-empty, .ui-empty-state, .empty) { background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
html.iso .ui-progress-track, html.iso #panel progress, html.iso .weekly-ledger progress, html.iso .era-progress { background: #0d242a; }
html.iso progress::-webkit-progress-bar { background: #0d242a; }
html.iso .ui-progress-fill { background: #36a89c; }
html.iso progress::-webkit-progress-value { background: #36a89c; }
html.iso progress::-moz-progress-bar { background: #36a89c; }
html.iso .ui-quest-progress .ui-progress-track { background: #0d242a; box-shadow: none; }
html.iso .ui-quest-progress .ui-progress-fill { background: #36a89c; }
html.iso .ui-quest.is-ready .ui-quest-seal { background: #bd502a; border-color: #e08a68; box-shadow: none; }
html.iso .output.producing { background: #7fb06933; color: var(--good); }
html.iso li.incoming { background: #c75a3333 !important; } /* inline: style.css sets this with !important */
html.iso .armies li.bad { background: #c75a3326; color: var(--bad); }
@keyframes iso-blink { to { background: #c75a3355; } }
html.iso .armies li.bad { animation-name: iso-blink; }
html.iso .panel-close { background: var(--surface-inset); }
@media (hover: hover) { html.iso .panel-close:hover { background: var(--surface-selected); } }
html.iso .intro-card .stats div, html.iso .stats div { border-radius: 10px; }
html.iso .ui-badge, html.iso .rank-badge { border-radius: 8px; }

/* ---- rarity: the four tones are tokens (iso-theme.css); halos and frames follow ---- */
html.iso .fx-artifact.common { --halo: #b9c7c433; }
html.iso .fx-artifact.fine { --halo: #7fd6c444; }
html.iso .fx-artifact.rare { --halo: #9db4f055; box-shadow: var(--shadow-modal), 0 0 24px #9db4f066; }
html.iso .fx-artifact.legendary { --halo: #e6bf6277; box-shadow: var(--shadow-modal), 0 0 34px #e6bf62aa; }
html.iso .fx-card.fx-war { background: var(--surface-raised); border-color: #c75a33; }
html.iso .fx-card { background: var(--surface); color: var(--ink); }

/* ---- random events: flat paper, the picked choice is gold, the close button is an inset dark disc ---- */
html.iso .village-event-paper { background: none; }
html.iso .village-event-close { background: var(--surface-inset); color: var(--ink); }
html.iso dialog.village-event-dialog[open] .village-event-choices > button.is-picked { background: var(--warning-surface); border-color: #d9ae4a; color: var(--ink); }
html.iso .village-event-choices button { border-radius: 10px; }
html.iso .village-event-launcher { background: var(--warning-surface); border-color: #d9ae4a; color: var(--ink); }
html.iso .village-event-result.is-gain { background-image: linear-gradient(100deg, transparent 30%, #d9ae4a40 50%, transparent 70%); }
html.iso .ev-scene { border-color: var(--border-soft); box-shadow: none; }
html.iso .village-event-history li { border-left-color: var(--border); }

/* ---- weekly ledger / recap, album, research ---- */
html.iso .weekly-ledger p span[style*="386eaa"] { color: #9cc3e6 !important; } /* inline: weekly-ledger.js writes the default flag colour as style="color:#386eaa" */
html.iso .ledger-ranking li { border-bottom-color: var(--border-soft); }
html.iso .album-mini i.is-locked { opacity: .55; }
html.iso .era-ceremony { background: var(--surface); }

/* ---- paper islands: an equipped cosmetic that paints its own light card keeps its own colours; the text inside it gets the dark ink back ---- */
html.iso #panel .district-album:is([data-album="album_pul"], [data-album="album_eski"]) .postcard { --ink: #2e2013; --muted: #6b5033; --text: #4a4a4a; --surface: #faf6ed; color: var(--ink); }
html.iso #panel .district-album:is([data-album="album_pul"], [data-album="album_eski"]) .postcard-copy h4 { color: var(--ink); }
html.iso #panel .district-album:is([data-album="album_pul"], [data-album="album_eski"]) .postcard.is-locked .postcard-copy { background: #e9ddc2; }
html.iso .album-milestone { background: #d9ae4a26; border-color: #d9ae4a99; color: var(--ink); }
html.iso .album-meter > span { background: #36a89c; }
html.iso .postcard-stamp, html.iso .album-heading small { letter-spacing: .02em; }

/* ---- map filter chips, language buttons, online list, place bar, recap tiles ---- */
html.iso :is(#nav .nav-head, #layers-panel) .layer-chip { background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: 8px; }
html.iso :is(#nav .nav-head, #layers-panel) .layer-chip[aria-pressed=true] { background: var(--surface-selected); border-color: var(--focus); }
html.iso :is(#nav .nav-head, #layers-panel) .lc-box { background: var(--surface-inset); border-color: var(--muted); color: #0d242a; }
html.iso :is(#nav .nav-head, #layers-panel) .layer-chip[aria-pressed=true] .lc-box { background: var(--focus); border-color: var(--focus); color: #0d242a; }
html.iso .lang-switch .lang-btn { background: var(--btn-beige); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); }
html.iso .lang-switch .lang-btn[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--focus); box-shadow: inset 0 -3px 0 var(--focus); }
html.iso .lang-switch .lang-btn svg { box-shadow: 0 0 0 1px #f1e9d855; }
@media (hover: hover) { html.iso .lang-switch .lang-btn:hover { background: var(--surface-selected); } html.iso .online-row:hover { background: var(--surface-selected); } }
html.iso #online-list, html.iso .online-row { color: var(--ink); }
html.iso .place-bar { background: var(--surface); border: 2px solid var(--pin-tone, var(--border)); border-radius: 14px; box-shadow: var(--shadow-panel); }
html.iso .place-bar[data-tone="ok"] { border-color: #7fb069; }
html.iso .place-bar[data-tone="bad"] { border-color: #c75a33; }
html.iso .place-bar[data-tone="ok"] .place-icon { color: var(--good); }
html.iso .place-bar[data-tone="bad"] .place-icon { color: var(--bad); }
html.iso .place-bar button { background: var(--btn-beige); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); }
html.iso .place-bar .place-confirm { background: #bd502a; border-color: #e08a68; color: #fff8ee; }
html.iso .wk-bonus { background: #f1e9d80d; }
html.iso :is(.wr-stat, .wr-clan) { background: var(--surface-inset); border-color: var(--border-soft); border-radius: 10px; }

/* ---- Pazar stall: the awning keeps its stripes (kiremit on paper-grey) but loses the parchment drop shadow; the sign becomes a dark plate with a gold edge ---- */
html.iso .stall-awning { filter: none; }
html.iso .stall-awning > i { background: repeating-linear-gradient(90deg, #a9441f 0 16px, #cfc6b0 16px 32px); }
html.iso .stall-sign { background: var(--surface-raised); border: 1px solid #d9ae4a; border-radius: 4px; color: var(--ink); font-family: var(--font-display); }
@media (max-width: 760px) { html.iso .stall-awning > i { background: repeating-linear-gradient(90deg, #a9441f 0 12px, #cfc6b0 12px 24px); } }

/* ---- victory scene: relic glows follow the dark-panel rarity tones ---- */
html.iso .victory-relic.rare { box-shadow: 0 0 14px #9db4f055; }
html.iso .victory-relic.legendary { box-shadow: 0 0 20px #e6bf62aa; }
html.iso .victory-scene { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; }
html.iso :is(.shop-preview-caption small, .postcard-number) { letter-spacing: .02em; }
html.iso input[type=range] { accent-color: var(--accent); }
html.iso .wk-pip { box-shadow: 0 0 0 1px #f1e9d855; } /* the tier colour is a server-chosen cosmetic (inline --wk-color): a hairline keeps a dark one visible on the dark panel */