/* Koyland iso theme: "vitrindeki maket". Every rule is scoped to html.iso, so with the flag off the UI is unchanged.
   Load order: LAST stylesheet in index.html (after guest.css). Source of truth for the palette:
   boğaz #15343c (panel) · #1d4651 (raised) · kağıt #f1e9d8 (text) · çini #36a89c (active/focus) · kiremit #c75a33 (primary/danger)
   · yaldız #d9ae4a (gold/rank). Part 1: tokens. Part 2: surfaces and the resource rail. Part 3: buttons, bar, dock.
   Part 4: map labels. Part 5: toasts, accessibility.
   The area files (iso-theme-flows/-panels/-social.css) are linked just BEFORE this one in index.html: same cascade order as an @import, no request chain. */

/* ---- 1. tokens: the whole parchment system flips to the dark harbour palette ------------------------------------------------ */
html.iso {
  --surface: #15343c;
  --surface-raised: #1d4651;
  --surface-inset: #0f2a31;
  --surface-selected: #1f5961;
  --surface-disabled: #1b3a41;
  --decoration-glow: #36a89c55;
  --border: #4a7c85;
  --border-soft: #2c555e;
  --focus: #5fd0c3;
  --success-surface: #1f4a3a;
  --warning-surface: #4b3a1c;
  --rarity-common: #b9c7c4;
  --rarity-fine: #7fd6c4;
  --rarity-rare: #9db4f0;
  --rarity-legendary: #e6bf62;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 14px;
  --shadow-sm: 0 1px 2px #0a1c2266;
  --shadow-panel: 0 2px 0 #0a1c2299, 0 10px 24px -6px #0a1c2299;
  --shadow-modal: 0 24px 70px #06141a99;
  --glass: #15343c;
  --glass-solid: #15343c;
  --line: #f1e9d81f;
  --text: #e2e8e3;
  --ink: #f1e9d8;
  --muted: #b9c7c4;
  --accent: #36a89c;
  --even: #d9ae4a;
  --good: #a3d38f;
  --bad: #f6a084;
  --blue: #9cc3e6;
  --btn-beige: #24505b;
  --btn-grey: #24444b;
  --btn-danger: #f6a084;
  --btn-danger-bg: #5a2c22;
  --btn-muted: #b9c7c4;
  --lbl-bg: #15343c;
  --lbl-border: #4a7c85;
  --alert-bad: #f6a084;
  --alert-warn: #e6bf62;
  color-scheme: dark;
}
html.iso, html.iso body { background: #1f6f8b; }

/* ---- 2. surfaces: kill the 9-slice parchment frames, one flat dark panel language ------------------------------------------- */
html.iso :is(.glass, #top, #panel, #chat, #ranking-panel, .toast, #loading, #status, #pick, #auth, #nav, .action-card, .intro-card, .away-card, .landmark-card, #layers-panel, #status-pop, #online-list, #dock-more, #touch-info) {
  background: var(--surface); color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border-soft); border-image: none;
  box-shadow: inset 0 1px 0 #f1e9d812, var(--shadow-panel);
}
html.iso :is(#panel, #nav, .action-card, #pick, #layers-panel, #status-pop, .intro-card, .away-card, .landmark-card) { border-radius: 14px; }
html.iso #panel { overflow: hidden; }
html.iso #panel .win-head { border-bottom: 1px solid var(--border-soft); background: var(--surface); }
html.iso #panel .panel-close { background: var(--surface-inset); color: var(--ink); border-radius: 8px; }
html.iso :is(#intro, #away) { background: rgba(8, 24, 30, .62); }
html.iso .landmark-card { border-color: var(--border-soft); }
html.iso .landmark-card::backdrop { background: rgba(8, 24, 30, .62); }
html.iso #panel h4 { text-transform: none; letter-spacing: .01em; }
html.iso #attrib { color: #cfe0dd; background: #15343ccc; border-radius: 6px; }
html.iso #attrib a { color: #cfe0dd; }
html.iso #hover { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
html.iso #hover.water { box-shadow: inset 3px 0 0 #36a89c; }
html.iso #hover.green { box-shadow: inset 3px 0 0 #a3d38f; }
html.iso #hover.building { box-shadow: inset 3px 0 0 #d9ae4a; }
html.iso .row { background: var(--surface-inset); }
html.iso .row.sel { background: var(--surface-selected); border-color: var(--focus); }
html.iso #panel .row.sel { background: var(--surface-selected); border-color: var(--focus); border-left-color: var(--focus); }
html.iso .stats div { background: var(--surface-inset); border: 1px solid var(--border-soft); }
html.iso :is(.ui-badge, .rank-badge, #nav .row2.mini.head) { color: var(--ink); }
html.iso #nav .row2.mini.head { background: var(--surface); }
html.iso :is(#nav, .action-card) :is(.row2, .nav-actions) { background: var(--surface); }
html.iso :is(input, select, textarea) { background: var(--surface-inset); color: var(--ink); border-color: var(--border); }
html.iso ::placeholder { color: #8fa6a6; }
html.iso :is(.spin) { border-color: #f1e9d833; border-top-color: var(--accent); }

/* ---- 2b. the rail: #top is ONE dark strip, resources are inset tiles divided by hairlines ----------------------------------- */
html.iso #top { border-radius: 14px; padding: 6px 10px 8px; gap: 6px 10px; border-color: #0d242a; box-shadow: inset 0 1px 0 #f1e9d81a, inset 0 -3px 0 #0f2a31, 0 6px 16px -4px #0a1c2299; }
html.iso #top .brand { color: var(--ink); font-size: 15px; letter-spacing: .02em; }
html.iso #top .brand .ui-badge { background: transparent; border: 1px solid #d9ae4a99; color: #e6bf62; border-radius: 6px; }
html.iso #top .chips { gap: 0; background: #102c33; border-radius: 10px; overflow: hidden; padding: 0; align-items: stretch; box-shadow: inset 0 2px 3px #06151a99; }
html.iso #top .chips > .chip { background: #102c33; border: 0; border-image: none; border-radius: 0; color: var(--ink); min-height: 30px; padding: 5px 11px; margin: 0;
  box-shadow: inset -1px 0 0 #0d242a, inset 0 -1px 0 #0d242a; font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
html.iso #top .chip small { color: var(--good); }
html.iso #top .chip small.neg { color: var(--bad); }
html.iso #top .chip .resource-value { font-variant-numeric: tabular-nums; }
@media (hover: hover) { html.iso #top .chips > .chip:hover { background: #163a43; } }
html.iso #top .chips > .chip-free { box-shadow: inset 0 -2px 0 #d9ae4a, inset -1px 0 0 #0d242a; }
html.iso #top #era-hud, html.iso #move-strip { background: #102c33; border: 0; border-radius: 10px; box-shadow: inset 0 2px 3px #06151a99; color: var(--ink); }
html.iso #top .chips > #era-hud { box-shadow: none; }
html.iso #top #era-hud { min-height: 34px; border-radius: 0; }
html.iso .era-hud-track { background: #0d242a; border-radius: 0; }
html.iso .era-hud-track i { background: #36a89c; }
html.iso #move-strip[data-kind="incoming"] { --strip-pulse: #c75a33; color: var(--bad); box-shadow: inset 3px 0 0 #c75a33, inset 0 2px 3px #06151a99; }

/* ---- 3. buttons ------------------------------------------------------------------------------------------------------------- */
/* Outside #panel/#nav/dialog the beige 9-slice buttons still apply: flatten them to the same raised teal tile. */
html.iso :is(.row button, .danger, .seg button, .stepper button, .intro-card button, .action-card button, #pick-suggest-btn, #pick-found-retry, #pick button, #auth button, #chat-form button, .toast button, .guest-bar button, #guest-bar button) {
  border: 1px solid var(--border); border-image: none; border-radius: 8px; background: var(--btn-beige); color: var(--ink); box-shadow: none;
}
html.iso :is(.stepper button) { border-radius: 6px; }
/* html:where(.iso) keeps the specificity of the original `#panel button` (+1 element) so the 3px-double default becomes 1px solid, while the
   narrower rules that set their own border (.win-help, .panel-close, .ui-tab ...) still win. */
html:where(.iso) :is(#panel, #nav, dialog) button, html:where(.iso) .ui-button, html:where(.iso) #quest-tracker .ui-quest button { border: 1px solid var(--border); border-radius: 8px; }
html.iso :is(#panel, #nav, dialog, .action-card, #quest-tracker .ui-quest) button:is(.primary, .confirm, .is-next) {
  background: #bd502a; border-color: #e08a68; color: #fff8ee; box-shadow: none;
}
html.iso #panel button.is-next, html.iso #panel button.primary.is-next { box-shadow: 0 0 0 3px #c75a3355; }
html.iso :is(#panel, #nav, dialog) :is(.seg button, .ui-choice button):is(.on, [aria-pressed=true]) { background: var(--surface-selected); border-color: var(--focus); box-shadow: inset 0 -3px 0 var(--focus); color: var(--ink); }
html.iso .seg button.on { background: var(--surface-selected); color: var(--ink); border-color: var(--focus); }
html.iso :is(#panel, #nav, dialog) button.danger, html.iso .danger { color: var(--bad); background: var(--btn-danger-bg); border: 1px solid #c75a33; }
@media (hover: hover) {
  html.iso :is(#panel, #nav, dialog) button:hover:enabled:not(.on):not([aria-pressed=true]):not(.primary):not(.is-next) { background: var(--surface-selected); }
  html.iso .row button:hover:not(:disabled) { filter: none; background: var(--surface-selected); }
}
html.iso #panel :is(.ui-tabs, [role=tablist]) { background: var(--surface-inset); border-radius: 10px; }
html.iso #panel .ui-tab, html.iso #panel [role=tab] { background: transparent; border: 0; border-radius: 8px; color: var(--muted); box-shadow: none; }
html.iso #panel .ui-tab:is([aria-selected=true], .on), html.iso #panel [role=tab][aria-selected=true] { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 -3px 0 var(--focus); border: 0; }

/* ---- 3b. bottom bar: dark tiles, the active one carries a çini line; dock: same tiles, rounded square ---------------------- */
html.iso #bar { background: none; }
@media (min-width: 761px) { html.iso #bar { gap: 8px; } }
html.iso .bar-btn { background-image: none; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: 0 2px 0 #0a1c22aa, 0 6px 12px -4px #0a1c2299; image-rendering: auto; }
html.iso .bar-btn img { image-rendering: pixelated; }
html.iso .bar-btn.on { filter: none; transform: none; background: var(--surface-raised); border-color: var(--border); box-shadow: inset 0 -4px 0 var(--focus), 0 2px 0 #0a1c22aa, 0 6px 12px -4px #0a1c2299; }
html.iso .bar-btn.guide-next { outline: 2px solid #d9ae4a; outline-offset: 2px; transform: none; box-shadow: 0 0 0 5px #d9ae4a33; }
html.iso .bar-btn .lbl { background: transparent; border: 0; color: var(--ink); font-weight: 600; padding: 0 2px; }
html.iso .bar-btn .key { background: var(--surface-inset); border: 0; color: var(--muted); border-radius: 5px; }
html.iso .bar-menu-icon { color: var(--ink); }
html.iso .bar-btn .badge { background: #bd502a; color: #fff8ee; border: 1.5px solid #15343c; }
html.iso .bar-btn .badge.warn { background: #d9ae4a; color: #1b2a22; }
html.iso .bar-btn .badge.good { background: #3fb56a; color: #04200d; }
html.iso .bar-overflow { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-panel); }
html.iso .bar-overflow button { background: var(--surface-inset); border: 1px solid var(--border-soft); color: var(--ink); border-radius: 8px; }
html.iso .bar-overflow button:focus-visible { background: var(--surface-selected); border-color: var(--focus); }
html.iso .bar-overflow .badge { background: #d9ae4a; color: #1b2a22; border-color: #d9ae4a; }
@media (hover: hover) { html.iso .bar-overflow button:hover { background: var(--surface-selected); border-color: var(--focus); } }
html.iso #quick-dock button { border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 #0a1c22aa, 0 6px 12px -4px #0a1c2299; }
html.iso #quick-dock button.is-open { background: var(--surface-raised); border-color: var(--border); box-shadow: inset 0 -4px 0 var(--focus), 0 2px 0 #0a1c22aa; }
html.iso #quick-dock .quick-badge { background: #bd502a; color: #fff8ee; border: 1.5px solid #15343c; }
html.iso #quest-tracker .ui-quest { background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-panel); }
html.iso #quest-tracker .ui-quest.is-ready { box-shadow: inset 0 -3px 0 #d9ae4a, var(--shadow-panel); }
html.iso #alerts .alert { background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 10px; }
html.iso #alerts .alert.bad { color: var(--bad); box-shadow: inset 3px 0 0 #c75a33, var(--shadow-sm); }
html.iso #alerts .alert.warn { color: #e6bf62; box-shadow: inset 3px 0 0 #d9ae4a, var(--shadow-sm); }
html.iso #alerts .alert.good { color: var(--good); box-shadow: inset 3px 0 0 var(--good), var(--shadow-sm); }
html.iso #announce { background: var(--surface); color: var(--ink); border-radius: 14px; }

/* ---- 4. map labels: maquette plates with a pin. The plate is dark, the pin (::after stake + ::before head) points at the
   anchor: labels.js translates the label by (-50%, -100%) so its bottom-centre IS the projected anchor; the plate is lifted by
   the pin length (margin-top) so the pin tip lands exactly on it. #labels-prefixed: `#labels .lbl` and `#app [role=button]`
   in style.css would otherwise win. --pin carries the owner colour: çini = mine, kiremit = hostile, neutral = everyone else. */
html.iso #labels .lbl {
  --pin: #5b8c94; --pin-len: 15px;
  background: #15343c; color: var(--ink); border: 1px solid var(--pin); border-radius: 8px; padding: 3px 8px; font-weight: 600; font-size: 12px;
  box-shadow: 0 2px 6px -1px #0a1c2299; margin-top: calc(-1 * var(--pin-len)); overflow: visible;
}
html.iso #labels .lbl:not(.coach-bubble):not(.vakif)::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--pin-len) - 3px); margin-left: -1px; background: #15343c; box-shadow: 0 0 0 .75px #f1e9d88c; pointer-events: none;
}
html.iso #labels .lbl:not(.coach-bubble):not(.vakif)::before {
  content: ''; position: absolute; left: 50%; top: calc(100% + var(--pin-len) - 6px); width: 7px; height: 7px; margin-left: -3.5px; box-sizing: border-box;
  border-radius: 50%; background: var(--pin); border: 1.5px solid #15343c; pointer-events: none;
}
html.iso #labels .lbl b { color: var(--ink); }
html.iso #labels .lbl small, html.iso #labels .lbl .cd { color: #c3d0cd; }
html.iso #labels .lbl .strong { color: #f6a084; }
html.iso #labels .lbl .weak { color: #a3d38f; }
html.iso #labels .lbl .even { color: #e6bf62; }
html.iso #labels .lbl.village { --pin: #36a89c; background: #15343c; font-size: 13px; padding: 4px 10px; border-width: 1.5px; }
html.iso #labels .lbl.village b { font-family: var(--font-display); letter-spacing: .02em; }
html.iso #labels .lbl.rival, html.iso #labels .lbl.rival.tasra { --pin: #c75a33; }
html.iso #labels .lbl.rival.tasra { --pin: #5b8c94; }
html.iso #labels .lbl.player { --pin: #5b8c94; }
html.iso #labels .lbl.player b { color: var(--ink); }
html.iso #labels .lbl.oasis { --pin: #7fb069; background: #15343c; }
html.iso #labels .lbl.oasis.mine, html.iso #labels .lbl.landmark.mine, html.iso #labels .lbl.xing.mine { --pin: #36a89c; background: #15343c; }
html.iso #labels .lbl.oasis.taken, html.iso #labels .lbl.landmark.taken, html.iso #labels .lbl.xing.taken { --pin: #c75a33; background: #15343c; }
html.iso #labels .lbl.landmark { --pin: #d9ae4a; background: #15343c; color: var(--ink); }
html.iso #labels .lbl.landmark.locked { --pin: #6f8a8c; color: #b9c7c4; background: #15343c; border-style: dashed; }
html.iso #labels .lbl.xing { --pin: #5b8c94; background: #15343c; color: var(--ink); }
html.iso #labels .lbl.xing.closed { --pin: #c75a33; background: #15343c; }
html.iso #labels .lbl.xing small { color: #c3d0cd; }
html.iso #labels .lbl.army { --pin: #9cc3e6; background: #15343c; }
html.iso #labels .lbl.army.caravan { --pin: #d9ae4a; }
html.iso #labels .lbl.pirate { --pin: #c75a33; background: #3a1d1b; color: #ffd9cc; }
html.iso #labels .lbl.pirate b { color: #ffd9cc; }
html.iso #labels .lbl.pirate small { color: #ffb9a3; }
html.iso #labels .lbl.ambush small { color: #ffb9a3; }
html.iso #labels .lbl.sancak { --pin: #d9ae4a; box-shadow: 0 0 0 1px #d9ae4a99, 0 2px 6px -1px #0a1c2299; }
html.iso #labels .lbl.vakif { background: #15343c; border-color: #7fb069; color: var(--ink); margin-top: 0; }
html.iso #labels .lbl.iskan-ok { border-color: #7fd6a0; box-shadow: 0 0 0 2px #7fd6a088, 0 0 14px #7fd6a088; }
html.iso #labels .lbl.sel, html.iso #labels .lbl.landmark.sel, html.iso #labels .lbl.xing.sel { border-color: #5fd0c3; box-shadow: 0 0 0 2px #5fd0c3, 0 2px 8px -1px #0a1c22cc; }
html.iso #labels .lbl.coach-bubble { margin-top: 0; background: #15343c; border-color: #d9ae4a; }
html.iso #labels .float { color: var(--ink); text-shadow: 0 1px 2px #0a1c22, 0 0 6px #0a1c22; }
html.iso #labels .lbl:focus-visible { outline: 3px solid #5fd0c3; outline-offset: 2px; }

/* ---- 5. toasts, focus, reduced motion --------------------------------------------------------------------------------------- */
html.iso .toast { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; box-shadow: inset 0 1px 0 #f1e9d812, 0 6px 14px -4px #0a1c22aa; }
html.iso #toasts .toast.good { border-color: #7fb069; box-shadow: inset 3px 0 0 #7fb069, 0 6px 14px -4px #0a1c22aa; }
html.iso #toasts .toast.bad, html.iso #toasts .toast.warn { border-color: #c75a33; box-shadow: inset 3px 0 0 #c75a33, 0 6px 14px -4px #0a1c22aa; }
html.iso .toast-more { color: #e6bf62; border-color: var(--border); }
html.iso body :is(button, summary, a, input, select, textarea, [tabindex], [role=button]):focus-visible { outline: 3px solid #5fd0c3; outline-offset: 2px; box-shadow: none; }
html.iso button:focus-visible { box-shadow: none; }
/* prefers-reduced-motion: style.css:769 already disables every animation/transition globally; nothing to add. */

/* ---- 6. fixed dark-ink colours that sat on parchment and would vanish on the dark panels (only the ones found by grep) ------- */
html.iso .gold-banner { color: #e6bf62; text-shadow: none; }
html.iso #chat .chat-msg.chat-supporter > span { color: #e6bf62; }
html.iso :is(#chat, .shop-stage) .chat-msg .chat-name-lale { color: #ff9c8f; }
html.iso :is(#chat, .shop-stage) .chat-msg .chat-name-bogaz { color: #8fc3f0; }
html.iso :is(#chat, .shop-stage) .chat-msg .chat-name-cinar { color: #9bd48a; }
html.iso :is(#chat, .shop-stage) .chat-msg .chat-name-carsi { color: #e6bf62; text-shadow: none; animation: none; }
html.iso .visit-cosmetic-tag { color: #e6bf62; border-color: #d9ae4a99; }
/* focus on the map chrome: çini ring + dark halo, so the ring still reads against the cream map (the çini alone is 1.4:1 there) */
html.iso :is(#bar, #quick-dock) :is(button, [role=button]):focus-visible, html.iso #labels .lbl:focus-visible { outline-offset: 0; box-shadow: 0 0 0 5px #15343c; }

/* ---- disabled buttons: last word of this file (2026-11-03: the button rules above out-weighed the old `html.iso button:disabled`, so a disabled "primary"/#pick/#auth
   button looked live). The heaviest button rule here is :is(#panel, ..., #quest-tracker .ui-quest) button:is(.primary) = (1,3,2); `:not(#_)` (an ID, always true) and
   `:not(.community-rank-row button)` (class + element; the ranking rows disable the player's own name button on purpose and keep it a plain link, community-ranking.css)
   bring this rule to (1,3,3), and it comes last. Same teal-grey values as before. ---- */
html.iso button:disabled:not(#_):not(.community-rank-row button) { color: #9db3b3; background: var(--surface-disabled); border-color: var(--border-soft); border-image: none; box-shadow: none; filter: none; }