/* Koyland modern UI A, "Cam HUD", graphite edition. Scope: html.iso.ui-a (on top of iso-theme*.css; area file ui-modern-a-screens.css loads just before).
   Structure from the A prototype the owner picked (floating pills and dock, segmented tabs, pill map labels, Outfit only, big radii); 2026-10-31 the
   owner kept the dark vitrine colouring ("bu siyah temayı beğendim"), so the glass is near-black graphite: dark frosted surfaces, light ink, one accent.
   Accent: Boğaz blue in its light tone, #38b2c9 for fills (dark text on it) and #6cd0e2 for text and lines on graphite, so it passes AA on the glass.
   Radii: panel 18, card 14, button 12, chip/pill full. Contrast is measured in iso-shots/contrast-um.mjs (worst map colour under the glass). */

/* ---- 1. tokens ---------------------------------------------------------------------------------------------------------------------------- */
html.iso.ui-a {
  --font-display: 'Outfit', system-ui, sans-serif, 'Koy Emoji';
  --a-glass: rgba(18, 20, 22, .78);
  --a-glass-strong: rgba(20, 22, 24, .9);
  --a-edge: rgba(255, 255, 255, .08);
  --a-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
  --a-blur: blur(18px) saturate(1.4);
  --a-accent: #38b2c9;
  --a-accent-hover: #5cc4d6;
  --a-on-accent: #06181d;
  --a-accent-text: #6cd0e2;
  --a-key: rgba(255, 255, 255, .08);
  --a-key-hover: rgba(255, 255, 255, .14);
  --a-solid: #16181a; /* the glass without alpha: sticky rows must hide the text that scrolls under them (translucent glass lets it show through) */
  --a-key-solid: #292b2c; /* --a-key (8% white) flattened over --a-solid */
  --a-key-solid-hover: #373839; /* --a-key-hover (14% white) flattened over --a-solid */
  --a-seg: rgba(255, 255, 255, .14);
  --a-track: rgba(0, 0, 0, .3);
  --surface: rgba(20, 22, 24, .9);
  --surface-raised: rgba(255, 255, 255, .06);
  --surface-inset: rgba(0, 0, 0, .24);
  --surface-selected: rgba(56, 178, 201, .18);
  --surface-disabled: rgba(255, 255, 255, .04);
  --decoration-glow: rgba(56, 178, 201, .3);
  --border: rgba(255, 255, 255, .14);
  --border-soft: rgba(255, 255, 255, .08);
  --focus: #6cd0e2;
  --success-surface: rgba(127, 212, 154, .14);
  --warning-surface: rgba(240, 196, 92, .14);
  --rarity-common: #b4b8bd;
  --rarity-fine: #7fd6c4;
  --rarity-rare: #a9b8ff;
  --rarity-legendary: #f0c45c;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .45);
  --shadow-panel: 0 10px 30px -8px rgba(0, 0, 0, .55);
  --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, .7);
  --glass: rgba(18, 20, 22, .78);
  --glass-solid: rgba(20, 22, 24, .95);
  --line: rgba(255, 255, 255, .1);
  --text: #dcdad4;
  --ink: #f2f0ea;
  --muted: #b4b8bd; /* #a9adb2 read 4.3:1 on a .78 pill over the palest map ground */
  --accent: #38b2c9;
  --even: #f0c45c;
  --good: #7fd49a;
  --bad: #ff9b8c;
  --blue: #6cd0e2;
  --btn-beige: rgba(255, 255, 255, .08);
  --btn-grey: rgba(255, 255, 255, .06);
  --btn-danger: #ff9b8c;
  --btn-danger-bg: rgba(255, 120, 100, .14);
  --btn-muted: #b4b8bd;
  --lbl-bg: rgba(18, 20, 22, .86);
  --lbl-border: rgba(255, 255, 255, .1);
  --alert-bad: #ff9b8c;
  --alert-warn: #f0c45c;
  color-scheme: dark;
}
@media (min-width: 761px) { html.iso.ui-a { --bar-h: 92px; } }

/* ---- 2. surfaces: one graphite glass language; text-heavy panels get the denser glass so body text never fights the roofs ---------------- */
html.iso.ui-a :is(.glass, #panel, #chat, #ranking-panel, .toast, #loading, #status, #pick, #nav, .action-card, .intro-card, .away-card, .landmark-card, #layers-panel, #status-pop, #online-list, #dock-more, #touch-info) {
  background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-image: none;
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); box-shadow: var(--a-shadow);
}
html.iso.ui-a :is(#panel, #nav, .action-card, #pick, #layers-panel, #status-pop, .intro-card, .away-card, .landmark-card, #chat, #ranking-panel) { border-radius: 18px; }
html.iso.ui-a #panel .win-head { background: transparent; border-bottom: 1px solid var(--border-soft); }
html.iso.ui-a #panel .win-head :is(h2, h3, .win-title) { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
html.iso.ui-a #panel .panel-close, html.iso.ui-a #panel .win-help { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; box-shadow: none; }
html.iso.ui-a #panel :is(h3, h4) { font-family: var(--font-body); color: var(--ink); }
html.iso.ui-a #panel h4 { font-weight: 700; font-size: 14px; color: var(--muted); }
html.iso.ui-a :is(#intro, #away) { background: rgba(0, 0, 0, .4); }
html.iso.ui-a .landmark-card::backdrop, html.iso.ui-a dialog::backdrop { background: rgba(0, 0, 0, .45); }
html.iso.ui-a #attrib { color: var(--text); background: var(--a-glass); border-radius: 999px; padding-inline: 10px; backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #attrib a { color: var(--a-accent-text); }
html.iso.ui-a #hover { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 12px; box-shadow: var(--shadow-sm); }
html.iso.ui-a :is(.row, #panel .row) { /* #panel :where(.row, ...) in style.css carries an ID */ background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; }
html.iso.ui-a :is(.row.sel, #panel .row.sel) { background: var(--surface-selected); border-color: var(--a-accent); border-left-color: var(--a-accent); }
html.iso.ui-a .stats div { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; }
html.iso.ui-a :is(.ui-badge, .rank-badge) { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; }
html.iso.ui-a #nav .row2.mini.head, html.iso.ui-a :is(#nav, .action-card) :is(.row2, .nav-actions) { background: transparent; }
/* ...except the rows that stick while the card scrolls (style.css, player-visit.css, community-ranking.css): they need an opaque fill + a hairline edge.
   Static rows above stay transparent. #nav:has(details[open]) .row2 is static (style.css), so it is excluded on phones. */
html.iso.ui-a #nav .row2.mini.head, html.iso.ui-a #nav .row2.visit-controls { background: var(--a-solid); box-shadow: 0 1px 0 var(--a-edge); }
html.iso.ui-a #nav .row2.visit-controls { box-shadow: 0 -1px 0 var(--a-edge); }
html.iso.ui-a #community-mine { background: linear-gradient(var(--surface-selected), var(--surface-selected)), var(--a-solid); }
@media (pointer: coarse), (max-width: 760px) {
  html.iso.ui-a #nav:not(:has(details[open])) .row2, html.iso.ui-a .action-card .row2 { background: var(--a-solid); box-shadow: 0 -1px 0 var(--a-edge); }
}
html.iso.ui-a :is(input, select, textarea) { background: var(--surface-inset); color: var(--ink); border-color: var(--border); }
html.iso.ui-a ::placeholder { color: #a6aaaf; }
html.iso.ui-a .spin { border-color: rgba(255, 255, 255, .15); border-top-color: var(--a-accent); }

/* ---- 3. the rail. The name is a tab hanging under it (below); every value lives in ONE graphite rail: a single row on desktop, equal 36px cells, hairline
   dividers, tabular numbers (the owner: "düzgün yerleştirirsek"). Groups read left to right: resources | people and army | builders | era. ---- */
html.iso.ui-a #top { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 6px; gap: 6px 8px; }
/* the rail is the top row; the village name hangs under it like a shop sign: a tab centred under the rail and glued to the rail's bottom edge (flat top corners, round bottom
   corners, same graphite glass). #top-info becomes a column so the DOM order (brand, chips) is reversed with `order` alone. style.css hides .brand on phones;
   here it stays as a compact tab. */
html.iso.ui-a #top-info { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; min-width: 0; }
html.iso.ui-a #top-info > .chips { order: 1; align-self: stretch; flex: none; width: 100%; box-sizing: border-box; }
html.iso.ui-a #top .brand { order: 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; min-width: 0; max-width: min(100%, 420px);
  margin: 0; padding: 0 12px; border-radius: 0 0 12px 12px;
  background: var(--a-glass); border: 1px solid var(--a-edge); border-top: 0; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .55); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
  color: var(--ink); font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
html.iso.ui-a #top .brand b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
html.iso.ui-a #top .brand .ui-badge { flex: none; margin: 0; background: var(--a-accent); color: var(--a-on-accent); border: 0; border-radius: 999px; padding: 1px 9px; font-weight: 600; font-size: 12px; vertical-align: baseline; }
html.iso.ui-a #top .chips { gap: 0; align-items: stretch; padding: 0 4px; border-radius: 14px; overflow: hidden;
  background: var(--a-glass); border: 1px solid var(--a-edge); box-shadow: var(--a-shadow); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #top .chips > .chip { /* no display here: style.css folds cells 5+ with display:none on phones */ align-items: center; gap: 4px; box-sizing: border-box; height: 36px; min-height: 36px; margin: 0; padding: 0 10px;
  background: transparent; border: 0; border-image: none; border-radius: 0; color: var(--ink); box-shadow: inset -1px 0 0 var(--border-soft);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.iso.ui-a #top .chips > .chip:last-child { box-shadow: none; }
html.iso.ui-a #top .chip small { color: var(--good); font-weight: 600; font-variant-numeric: tabular-nums; }
html.iso.ui-a #top .chip small.neg { color: var(--bad); }
@media (hover: hover) { html.iso.ui-a #top .chips > .chip:hover { background: var(--a-key); } }
/* a free builder: an accent underline inside the cell, never a ring that changes the cell's size */
html.iso.ui-a #top .chips > .chip-free { color: var(--a-accent-text); box-shadow: inset -1px 0 0 var(--border-soft), inset 0 -2px 0 var(--a-accent); }
html.iso.ui-a #top .chips > #era-hud { position: relative; flex: 1 1 0; min-width: 0; justify-content: space-between; gap: 10px; background: transparent; border: 0; border-radius: 0; color: var(--ink); }
html.iso.ui-a #top #era-hud > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.iso.ui-a #top #era-hud small { flex: none; max-width: none; white-space: nowrap; color: var(--a-accent-text); }
html.iso.ui-a .era-hud-track { background: rgba(255, 255, 255, .06); border-radius: 0; height: 2px; }
html.iso.ui-a .era-hud-track i { background: var(--a-accent); }
@media (min-width: 1100px) { html.iso.ui-a #top .chips { flex-wrap: nowrap; flex: 1 1 100%; } }
/* the five resource cells share one width, so the values line up like a table; the status, builder and era cells size to their content */
@media (min-width: 761px) { html.iso.ui-a #top .chips > .chip:nth-child(-n+5) { flex: none; min-width: 112px; } }
html.iso.ui-a #move-strip { background: var(--a-glass); border: 1px solid var(--a-edge); border-radius: 14px; color: var(--ink); box-shadow: var(--shadow-sm); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #move-strip[data-kind="incoming"] { color: var(--ink); --strip-pulse: #ff9b8c; border-color: rgba(255, 155, 140, .55); box-shadow: inset 3px 0 0 #ff9b8c, var(--shadow-sm); }
/* 🏰 Köyüme dön: the incoming strip's dark glass and warning edge, so the two read as one alarm */
html.iso.ui-a #home-call { background: var(--a-glass-strong); border: 1px solid rgba(255, 155, 140, .55); border-radius: 14px; color: #ff9b8c; box-shadow: var(--shadow-sm); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
/* the guest strip (public/guest-account.css) sits on the live map like #move-strip: glass pill, readable on both themes; its box (not #top) catches taps */
html.iso.ui-a #guest-strip { background: var(--a-glass); border: 1px solid var(--a-edge); border-radius: 14px; color: var(--ink); box-shadow: var(--shadow-sm); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
@media (hover: hover) { html.iso.ui-a #home-call:hover { background: var(--a-key-hover); border-color: #ff9b8c; } }
html.iso.ui-a #hud-toggle { background: var(--a-glass); border: 1px solid var(--a-edge); border-radius: 999px; color: var(--ink); box-shadow: var(--shadow-sm); }
html.iso.ui-a #top:not(.hud-expanded) #hud-toggle::after { background: var(--a-accent); border: 0; color: var(--a-on-accent); }

/* ---- 4. buttons and tabs: translucent keys on the graphite, the accent is the only filled button (dark ink on it) ---------------------- */
html.iso.ui-a :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: 12px; background: var(--a-key); color: var(--ink); box-shadow: none;
}
/* :where(:not(...)) adds no weight: tabs and the round head buttons keep their own (later) rules */
html.iso.ui-a :is(#panel, #nav, dialog) button:where(:not(.ui-tab, [role=tab], .panel-close, .win-help, .sheet-grabber)), html.iso.ui-a .ui-button, html.iso.ui-a #quest-tracker .ui-quest button { border: 1px solid var(--border); border-radius: 12px; }
html.iso.ui-a :is(#panel, #nav, dialog, .action-card, #quest-tracker .ui-quest) button:is(.primary, .confirm, .is-next) { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); box-shadow: 0 4px 14px -4px rgba(56, 178, 201, .45); }
html.iso.ui-a #panel button.is-next, html.iso.ui-a #panel button.primary.is-next { box-shadow: 0 0 0 3px rgba(56, 178, 201, .3); }
html.iso.ui-a :is(#panel, #nav, dialog) :is(.seg button, .ui-choice button):is(.on, [aria-pressed=true]), html.iso.ui-a .seg button.on { background: var(--surface-selected); border-color: var(--a-accent); box-shadow: none; color: var(--a-accent-text); }
html.iso.ui-a :is(#panel, #nav, dialog) button.danger, html.iso.ui-a .danger { color: var(--bad); background: var(--btn-danger-bg); border: 1px solid rgba(255, 155, 140, .4); }
@media (hover: hover) {
  html.iso.ui-a :is(#panel, #nav, dialog) button:hover:enabled:not(.on):not([aria-pressed=true]):not(.primary):not(.is-next):not(.danger) { background: var(--a-key-hover); border-color: rgba(255, 255, 255, .24); }
  html.iso.ui-a .row button:hover:not(:disabled):not(.primary):not(.is-next) { background: var(--a-key-hover); }
  html.iso.ui-a :is(#panel, #nav, dialog) button:is(.primary, .confirm, .is-next):hover:enabled { background: var(--a-accent-hover); }
}
/* tabs: a segmented control on a dark track. Selected = a lighter raised segment with accent text, no underline */
html.iso.ui-a #panel :is(.ui-tabs, [role=tablist]) { background: var(--a-track); border-radius: 14px; padding: 3px; }
html.iso.ui-a #panel .ui-tab, html.iso.ui-a #panel [role=tab] { background: transparent; border: 0; border-radius: 11px; color: var(--muted); box-shadow: none; }
html.iso.ui-a #panel .ui-tab:is([aria-selected=true], .on), html.iso.ui-a #panel [role=tab][aria-selected=true] { background: var(--a-seg); color: var(--a-accent-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); border: 0; }
html.iso.ui-a #panel button.ui-tab.is-next:not(.on) { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--a-accent); }
/* the guide's "next" tab: one pulsing accent dot (style.css ::before) + the underline; the vitrine's second dot (::after) goes */
/* The guide dot's glow ring: the tab's ::after, static ring + opacity pulse (compositor; the dot's own box-shadow used to animate). It also resets iso-theme-panels' gold dot on this ::after. */
html.iso.ui-a #panel button.ui-tab.is-next::after { content: ''; position: absolute; top: 6px; left: 6px; right: auto; width: 8px; height: 8px; border-radius: 50%; background: none;
  pointer-events: none; box-shadow: 0 0 0 5px var(--decoration-glow); opacity: 0; animation: next-ring 1.6s ease-in-out infinite; }
html.iso.ui-a #panel .ui-tab.is-next::before { background: var(--a-accent); box-shadow: 0 0 0 2px rgba(20, 22, 24, .9); }
@media (hover: hover) { html.iso.ui-a #panel .ui-tab:not(.on):not([aria-selected=true]):hover { background: rgba(255, 255, 255, .05); color: var(--ink); } }
html.iso.ui-a #panel .ui-tab.is-locked { color: #a6aaaf; }
html.iso.ui-a :is(.ui-tab-badge, .ui-count) { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; }
/* tab strips never cut a tab (2026-11-01, owner: "diğer item'ları göremiyoruz, yarım kalıyor"). style.css turns 5+ tabs into ONE scrolling row; there the last
   tabs hung half out of the panel and its edge fades were lost under the track background above. 5-9 tabs go back to the even grid style.css already defines
   per count (data-count rules): 2 rows at most, icon over label, 48px tall. 10+ tabs cannot fit two rows on a phone, so they scroll
   with a fade on both edges, snap, and 3.3 tabs per view (the next tab peeking is the cue); in a wide window (700px+) they lay out as 2 rows of 10 instead. */
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll { display: grid; overflow: visible; scroll-snap-type: none; }
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll .ui-tab { flex: none; min-width: 0; min-height: 48px; padding-inline: 2px; white-space: normal; overflow-wrap: anywhere; }
/* Sefer's five sub-tabs stay ONE row (style.css has the base rule; the grid above is more specific, so repeat it here). */
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:has(> [data-act="sef-sub"]) { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 2px; }
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:has(> [data-act="sef-sub"]) > .ui-tab { flex: 1 1 0; min-width: 0; min-height: 0; padding: 5px 2px; white-space: normal; overflow-wrap: normal; }
/* a short landscape screen (844x390): the keys keep a 44 px touch target (they were 26 px: one line of label, no icon row): the LABEL gets the height, the key keeps min-height 0 and its 5px 2px padding */
@media (max-height: 500px) and (max-width: 1100px) { html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:has(> [data-act="sef-sub"]) > .ui-tab .ui-tab-label { display: flex; align-items: center; justify-content: center; min-height: 34px; } } /* 34 + the key's 5 px padding x 2 = 44: the strip's own min-height: 0 / padding stay as they are */
/* nine tabs: style.css drops to 3 x 3 under 360px, which is three tall rows on a phone sheet; keep 5 + 4 */
@container panel-body (max-width: 360px) {
  html.iso.ui-a #panel .ui-tabs[data-count="9"] { --tab-cols: 20; }
  html.iso.ui-a #panel .ui-tabs[data-count="9"] > .ui-tab { padding-inline: 0; font-size: 11px; }
  html.iso.ui-a #panel .ui-tabs[data-count="9"] > .ui-tab:nth-child(n) { grid-column: span 4; }
  html.iso.ui-a #panel .ui-tabs[data-count="9"] > .ui-tab:nth-child(n+6) { grid-column: span 5; }
}
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:is([data-count^="1"], [data-count^="2"]) {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 3px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:is([data-count^="1"], [data-count^="2"]) .ui-tab { flex: 0 0 max(76px, calc((100% - 22px) / 3.3)); overflow-wrap: anywhere; scroll-snap-align: start; }
@container panel-body (min-width: 700px) {
  html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:is([data-count^="1"], [data-count^="2"]) { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html.iso.ui-a #panel .ui-tabs.ui-tabs--scroll:is([data-count^="1"], [data-count^="2"]) .ui-tab { flex: none; padding-inline: 1px; font-size: 11px; overflow-wrap: anywhere; }
}
html.iso.ui-a #panel :is(.ui-empty, .ui-empty-state, .empty) { background: transparent; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); }
html.iso.ui-a :is(.ui-progress-track, .era-progress), html.iso.ui-a #panel progress { background: var(--a-track); border-radius: 999px; }
html.iso.ui-a progress::-webkit-progress-bar { background: var(--a-track); }
html.iso.ui-a .ui-progress-fill, html.iso.ui-a .album-meter > span { background: var(--a-accent); }
html.iso.ui-a progress::-webkit-progress-value { background: var(--a-accent); }
html.iso.ui-a .output.producing { background: var(--success-surface); color: var(--good); }
html.iso.ui-a :is(.ui-card, .ledger-card, .shop-card) { border-radius: 14px; }
html.iso.ui-a :is(.help-next, .away-next) { background: var(--surface-selected); border: 0; border-radius: 14px; box-shadow: inset 3px 0 0 var(--a-accent); }
/* the visit card's warning lines (the Yerle bir et confirmation, main.js scrolls it to the top of a short phone card) stop under the sticky name row, not behind it */
html.iso.ui-a #nav .visit-attack .nav-warn { scroll-margin-top: 60px; }
/* "Sen yokken": a rival Derebeyi's letter opens the card (public/away-ui.js, onboarding.js awayLetters); the ultimatum is the first thing a returning player reads */
html.iso.ui-a .away-card .away-letter { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--warning-surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--rarity-legendary); overflow-wrap: anywhere; }
html.iso.ui-a .away-card .away-letter p { margin: 0; font: 600 14px/1.45 var(--font-body); }
html.iso.ui-a .away-card .away-letter footer { margin-top: 6px; font: 700 12px/1.3 var(--font-body); color: var(--muted); text-align: right; }
/* Pazar stall: the striped awning is a parchment-era prop; on glass it becomes one quiet hairline */
html.iso.ui-a .stall-awning { filter: none; height: 22px; }
html.iso.ui-a .stall-awning > i { background: none; background-color: var(--border); top: 50%; bottom: auto; height: 1px; mask: none; -webkit-mask: none; }
html.iso.ui-a .stall-sign { background: var(--a-glass-strong); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-family: var(--font-body); font-weight: 700; }

/* ---- 5. bottom bar = a floating dock: one graphite tray, icons sit on it, the open window gets an accent dot -------------------------- */
html.iso.ui-a #bar { background: var(--a-glass); border: 1px solid var(--a-edge); box-shadow: var(--a-shadow); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
  left: 0; right: 0; width: fit-content; max-width: calc(100vw - 16px); margin-inline: auto; bottom: 12px; border-radius: 24px; padding: 6px 8px; gap: 2px; box-sizing: border-box; }
/* Supporter: gold frame + a tab on the top edge. Hidden for everyone else (html.is-supporter is set in boot.js). */
.bar-supporter-tag { display: none; }
html.iso.ui-a.is-supporter #bar { border: 2px solid #d9a93a; box-shadow: var(--a-shadow), 0 0 14px rgba(230, 184, 74, .35); }
html.iso.ui-a.is-supporter .bar-supporter-tag { display: block; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0; padding: 1px 10px;
  background: var(--a-glass-strong); border: 2px solid #d9a93a; border-bottom: 0; border-radius: 10px 10px 0 0; color: #e6b84a; font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap; pointer-events: none; }
html.iso.ui-a.is-supporter .bar-overflow { z-index: 2; }
html.iso.ui-a .bar-btn { background: transparent; border: 0; border-radius: 16px; box-shadow: none; }
html.iso.ui-a .bar-btn .lbl { background: transparent; border: 0; color: var(--ink); font-weight: 600; }
html.iso.ui-a .bar-btn .key { background: transparent; color: var(--muted); border: 0; }
html.iso.ui-a .bar-btn.on { background: var(--surface-selected); box-shadow: none; }
html.iso.ui-a .bar-btn.on .lbl { color: var(--a-accent-text); }
html.iso.ui-a .bar-btn.on::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--a-accent); }
html.iso.ui-a .bar-btn.guide-next { outline: 2px solid var(--a-accent); outline-offset: -2px; box-shadow: none; }
@media (hover: hover) { html.iso.ui-a .bar-btn:hover:not(.on) { background: var(--a-key); } }
html.iso.ui-a .bar-menu-icon { color: var(--ink); }
/* Red is the base of every count badge (the incoming-raid ⚠ has no variant class). It is three separate selectors, not one :is(...): an :is() takes the specificity of its most specific
   argument, and #chat-badge (an ID) made the whole red rule beat the .warn / .good variants below, so the Köy bar badge rendered red instead of amber. */
html.iso.ui-a .bar-btn .badge, html.iso.ui-a #quick-dock .quick-badge, html.iso.ui-a #chat-badge { background: #c62f35; color: #fff; border: 2px solid #141618; border-radius: 999px; }
html.iso.ui-a :is(.bar-btn .badge.warn, .bar-overflow .badge) { background: var(--a-accent); color: var(--a-on-accent); border-color: #141618; }
html.iso.ui-a .bar-btn .badge.good { background: #3fb56a; color: #04200d; border-color: #141618; }
html.iso.ui-a .bar-overflow { background: var(--a-glass-strong); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: var(--a-shadow); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a .bar-overflow button { background: transparent; border: 0; color: var(--ink); border-radius: 12px; }
@media (hover: hover) { html.iso.ui-a .bar-overflow button:hover { background: var(--surface-selected); } }
html.iso.ui-a :is(#quick-dock button, #chat-toggle) { background: var(--a-glass); border: 1px solid var(--a-edge); border-radius: 999px; color: var(--ink);
  box-shadow: var(--shadow-sm); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #quick-dock button.is-open { background: var(--surface-selected); border-color: var(--a-accent); box-shadow: var(--shadow-sm); }
html.iso.ui-a #quick-dock [data-quick="quest"].guide-next { outline: 2px solid var(--a-accent); outline-offset: 2px; }
html.iso.ui-a #quick-dock > button::after { background: var(--a-glass-strong); color: var(--ink); } /* the caption sits on the map: style.css gives it --surface-raised, which is a faint tint here */
html.iso.ui-a :is(#quest-tracker .ui-quest, #alerts .alert, #announce) { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 16px; box-shadow: var(--a-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #alerts .alert.bad { color: var(--bad); box-shadow: inset 3px 0 0 #ff9b8c, var(--shadow-sm); }
html.iso.ui-a #alerts .alert.warn { color: var(--even); box-shadow: inset 3px 0 0 #f0c45c, var(--shadow-sm); }
html.iso.ui-a #alerts .alert.good { color: var(--good); box-shadow: inset 3px 0 0 #7fd49a, var(--shadow-sm); }

/* ---- 6. map labels: a small graphite pill with a coloured dot, a hairline stake down to the anchor. The plate is dense (.86) so the label
   reads over any roof; --pin keeps the owner colour: accent = mine, red = hostile, slate = everyone else. My village is the one filled pill. */
html.iso.ui-a #labels .lbl {
  --pin: #8a96a6; --pin-len: 13px;
  background: rgba(18, 20, 22, .86); color: var(--ink); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px 10px 3px 8px; font-weight: 600; font-size: 12px;
  box-shadow: inset 4px 0 0 -1px var(--pin), 0 4px 12px -4px rgba(0, 0, 0, .6);
}
html.iso.ui-a #labels .lbl:not(.coach-bubble):not(.vakif)::after { background: rgba(18, 20, 22, .8); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .35); width: 1.5px; margin-left: -.75px; }
html.iso.ui-a #labels .lbl:not(.coach-bubble):not(.vakif)::before { background: var(--pin); border: 2px solid #141618; width: 8px; height: 8px; margin-left: -4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
html.iso.ui-a #labels .lbl b { color: var(--ink); }
html.iso.ui-a #labels .lbl :is(small, .cd) { color: var(--muted); }
html.iso.ui-a #labels .lbl .strong { color: var(--bad); }
html.iso.ui-a #labels .lbl .weak { color: var(--good); }
html.iso.ui-a #labels .lbl .even { color: var(--even); }
html.iso.ui-a #labels .lbl.village { --pin: #38b2c9; background: var(--a-accent); color: var(--a-on-accent); border-color: rgba(255, 255, 255, .35); font-size: 13px; padding: 4px 12px; border-width: 1px; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6); }
html.iso.ui-a #labels .lbl.village b { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; color: var(--a-on-accent); }
html.iso.ui-a #labels .lbl.village :is(small, .cd) { color: #0b2f38; }
html.iso.ui-a #labels .lbl:is(.rival, .rival.tasra, .player, .xing, .army, .oasis, .landmark, .vakif) { background: rgba(18, 20, 22, .86); }
html.iso.ui-a #labels .lbl.rival { --pin: #ff6b5e; }
html.iso.ui-a #labels .lbl:is(.rival.tasra, .player, .xing) { --pin: #8a96a6; }
html.iso.ui-a #labels .lbl.oasis { --pin: #5ec27f; }
html.iso.ui-a #labels .lbl:is(.oasis, .landmark, .xing).mine { --pin: #38b2c9; background: rgba(18, 20, 22, .86); }
html.iso.ui-a #labels .lbl:is(.oasis, .landmark, .xing).taken, html.iso.ui-a #labels .lbl.xing.closed { --pin: #ff6b5e; background: rgba(18, 20, 22, .86); }
html.iso.ui-a #labels .lbl.landmark { --pin: #f0c45c; color: var(--ink); }
html.iso.ui-a #labels .lbl.landmark.locked { --pin: #6b7480; color: var(--muted); background: rgba(18, 20, 22, .78); border-style: dashed; border-color: rgba(255, 255, 255, .25); }
html.iso.ui-a #labels .lbl.xing small { color: var(--muted); }
html.iso.ui-a #labels .lbl.army { --pin: #a9b8ff; }
html.iso.ui-a #labels .lbl.army.caravan { --pin: #f0c45c; }
html.iso.ui-a #labels .lbl.pirate { --pin: #ff6b5e; background: rgba(58, 18, 16, .9); color: #ffd9d2; }
html.iso.ui-a #labels .lbl.pirate :is(b, small), html.iso.ui-a #labels .lbl.ambush small { color: #ffc4b8; }
html.iso.ui-a #labels .lbl.sancak { --pin: #f0c45c; box-shadow: inset 4px 0 0 -1px var(--pin), 0 0 0 2px rgba(240, 196, 92, .55), 0 4px 12px -4px rgba(0, 0, 0, .6); }
html.iso.ui-a #labels .lbl.vakif { border-color: #5ec27f; color: var(--ink); }
html.iso.ui-a #labels .lbl.iskan-ok { border-color: #5ec27f; box-shadow: 0 0 0 3px rgba(94, 194, 127, .45), 0 4px 12px -4px rgba(0, 0, 0, .6); }
html.iso.ui-a #labels .lbl:is(.sel, .landmark.sel, .xing.sel) { border-color: var(--a-accent); box-shadow: 0 0 0 2px var(--a-accent), 0 4px 12px -4px rgba(0, 0, 0, .6); }
html.iso.ui-a #labels .lbl.coach-bubble { background: var(--a-glass-strong); border-color: var(--a-accent); }
html.iso.ui-a #labels .float { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7); }

/* ---- 7. toasts: graphite pills above the dock, the tone is a coloured dot ------------------------------------------------------------- */
html.iso.ui-a .toast { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 999px; padding-inline: 16px 18px; box-shadow: var(--a-shadow); }
html.iso.ui-a #toasts .toast:is(.good, .bad, .warn) { border-color: var(--a-edge); box-shadow: var(--a-shadow); }
html.iso.ui-a #toasts .toast:is(.good, .bad, .warn)::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: #7fd49a; }
html.iso.ui-a #toasts .toast.bad::before { background: #ff9b8c; }
html.iso.ui-a #toasts .toast.warn::before { background: #f0c45c; }
html.iso.ui-a .toast-more { color: var(--a-accent-text); border-color: var(--border); }

/* ---- 8. focus and motion: an accent ring with a dark halo (the ring reads on the graphite AND, through the halo, on the cream map) ------ */
html.iso.ui-a body :is(button, summary, a, input, select, textarea, [tabindex], [role=button]):focus-visible { outline: 3px solid var(--a-accent-text); outline-offset: 2px; box-shadow: 0 0 0 5px #141618; }
html.iso.ui-a :is(#bar, #quick-dock) :is(button, [role=button]):focus-visible, html.iso.ui-a #labels .lbl:focus-visible { outline-offset: 0; box-shadow: 0 0 0 5px #141618; }
/* a heading with tabindex="-1" is only where a dialog puts focus when it opens (initDialogAccessibility): no ring, no halo (ui-theme-light.css repeats it, its own halo is white) */
html.iso.ui-a body :is(h1, h2, h3)[tabindex="-1"]:focus-visible { outline: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { html.iso.ui-a :is(#panel, #bar, .toast) { transition: none; } }
/* Low power: backdrop-filter re-samples the WebGL map under every glass surface each frame. Every blur in A goes through --a-blur, so one
   token turns them all off. Without the blur the map shows through sharp, so the surfaces go (near-)opaque to keep text readable.
   - the player asked for less transparency: opaque, no blur
   - phones/tablets (the SHEET_QUERY of mobile-ui.js, same query as the style.css sheet rule): no blur at all. fps-probe TRACE=1 on a phone
     promoted to "Orta": #bar, #move-strip, #home-call, .bar-overflow... re-blurred the live canvas every frame, GPU swap ~88 -> ~9 ms/s with the
     blur off (2026-11-06; the old <=760px rule only shrank it to blur(8px)). The blur is gone, so the glass gets denser (.92 / .96, same RGB):
     text stays readable over the sharp map but the surface is still a translucent flat fill, not the near-opaque .97 of the low preset.
     Wide desktop (fine pointer) keeps blur(18px).
   - gfx "low" preset: html.gfx-low (set by main.js next to the iso classes): opaque, no blur */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  html.iso.ui-a { --a-blur: none; --a-glass: rgba(18, 20, 22, .92); --a-glass-strong: rgba(20, 22, 24, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  html.iso.ui-a { --a-blur: none; --a-glass: rgba(18, 20, 22, .97); --a-glass-strong: rgba(22, 24, 26, .99); --surface: #16181a; }
}
html.iso.ui-a.gfx-low { --a-blur: none; --a-glass: rgba(18, 20, 22, .97); --a-glass-strong: rgba(22, 24, 26, .99); --surface: #16181a; }

/* ---- 9. sign-in: the map film stays visible under a flat dark veil; the story sits on it in light ink, the card is the same graphite panel */
html.iso.ui-a #auth.auth-shell { background: transparent; }
html.iso.ui-a body:has(#auth:not([hidden])) #intro-bg::after { background: rgba(12, 13, 14, .74); }
html.iso.ui-a #auth .auth-story, html.iso.ui-a #auth .auth-story h1 { color: var(--ink); text-shadow: none; }
html.iso.ui-a #auth .auth-story h1 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.035em; }
html.iso.ui-a #auth :is(.auth-story-lead, .auth-story-features p) { color: var(--text); }
html.iso.ui-a #auth .auth-story-kicker { color: var(--a-accent-text); font-weight: 600; }
html.iso.ui-a #auth .auth-story-kicker::before { background: var(--a-accent); }
html.iso.ui-a #auth .auth-story-features li { border-top-color: rgba(255, 255, 255, .14); }
html.iso.ui-a #auth .auth-story-features li > span { color: var(--a-accent-text); font-family: var(--font-body); }
html.iso.ui-a #auth .auth-card { background: var(--a-glass-strong); border: 1px solid var(--a-edge); border-radius: 22px; box-shadow: var(--shadow-modal); color: var(--ink);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #auth .auth-brand-name { color: var(--ink); font-family: var(--font-body); font-weight: 700; letter-spacing: -.02em; }
html.iso.ui-a #auth :is(.auth-card-promise, .auth-card-footer p, .auth-social-divider) { color: var(--muted); }
html.iso.ui-a #auth form label { color: var(--ink); }
html.iso.ui-a #auth .auth-tabs { background: var(--a-track); border-radius: 14px; padding: 3px; }
html.iso.ui-a #auth .auth-tabs button { background: transparent; color: var(--muted); border: 0; border-radius: 11px; }
html.iso.ui-a #auth .auth-tabs button.on { background: var(--a-seg); color: var(--a-accent-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
@media (hover: hover) { html.iso.ui-a #auth .auth-tabs button:hover:not(.on) { background: rgba(255, 255, 255, .05); color: var(--ink); } }
html.iso.ui-a #auth form input { background: var(--surface-inset); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
html.iso.ui-a #auth form button[type=submit] { background: var(--a-accent); border: 0; border-radius: 12px; color: var(--a-on-accent); box-shadow: 0 6px 16px -6px rgba(56, 178, 201, .55); }
@media (hover: hover) { html.iso.ui-a #auth form button[type=submit]:hover:enabled { background: var(--a-accent-hover); } }
html.iso.ui-a #auth form button[type=submit]:active:enabled { background: #2a9cb3; }
html.iso.ui-a #auth :is(.auth-guest button, .auth-verify-actions button[type=button], .lang-switch .lang-btn) { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
html.iso.ui-a #auth .lang-switch .lang-btn[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--a-accent); box-shadow: none; color: var(--a-accent-text); }
html.iso.ui-a #auth :is(.register-consent a, .auth-social-terms a) { color: var(--a-accent-text); }
html.iso.ui-a #auth .auth-card-footer { border-top-color: var(--border-soft); }
html.iso.ui-a #auth .auth-card-footer .auth-store { background: var(--a-key); border-color: var(--border-soft); border-radius: 10px; color: var(--ink); font-weight: 500; }
@media (hover: hover) { html.iso.ui-a #auth .auth-card-footer .auth-store:hover { background: var(--a-key-hover); } }
html.iso.ui-a #auth .auth-card-footer .auth-store:focus-visible { outline-color: var(--a-accent); }
html.iso.ui-a #auth .auth-form-error { background: var(--btn-danger-bg); border-color: rgba(255, 155, 140, .4); color: #ffc4b8; }
html.iso.ui-a #panel .ui-next-note { background: var(--surface-selected); border: 0; border-radius: 14px; box-shadow: inset 3px 0 0 var(--a-accent); }
html.iso.ui-a #panel .row.is-next-row { border-color: var(--a-accent); box-shadow: inset 3px 0 0 var(--a-accent); }

/* ---- 10. phone: the dock becomes a full-width tab bar on the bottom edge; the rail becomes a 2-row grid of equal cells inside one tray
   (row 1: the four spendable resources, value over rate; row 2: whatever mobile-hud.css keeps visible, the idle builder at least) ---------- */
@media (max-width: 760px) {
  html.iso.ui-a #bar { left: 0; right: 0; width: auto; max-width: none; margin: 0; bottom: 0; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  html.iso.ui-a.is-supporter #bar { border-bottom: 0; }
  html.iso.ui-a .bar-btn { min-width: 0; }
  html.iso.ui-a #top .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; border-radius: 16px; }
  html.iso.ui-a #top .chips > .chip { height: auto; min-height: 40px; padding: 4px 2px; font-size: 12px; justify-content: center; flex-wrap: wrap; align-content: center; gap: 0 3px; line-height: 1.25;
    box-shadow: inset -1px 0 0 var(--border-soft), inset 0 -1px 0 var(--border-soft); }
  html.iso.ui-a #top .chips > .chip:nth-child(4n) { box-shadow: inset 0 -1px 0 var(--border-soft); }
  html.iso.ui-a #top .chips > .chip-free { box-shadow: inset -1px 0 0 var(--border-soft), inset 0 -2px 0 var(--a-accent); }
  html.iso.ui-a #top .chips > #era-hud { grid-column: 1 / -1; padding-inline: 10px; }
  /* folded HUD: the idle-builder cell is the only one on row 2, so it takes the whole row instead of leaving three empty cells */
  html.iso.ui-a #top:not(.hud-expanded) .chips > #build-slots-hud { grid-column: 1 / -1; justify-content: flex-start; padding-inline: 12px; box-shadow: inset 0 -2px 0 var(--a-accent); }
}
/* touch: a finger gets 40px on every rail cell, whatever the viewport */
@media (pointer: coarse) { html.iso.ui-a #top .chips > .chip { min-height: 40px; height: auto; } }

/* ---- 11. phone, calm (owner 2026-11-01 on a 390 px iPhone: "çok sıkışık", the map was ~40% of Safari's view). Same content, less chrome:
   one-row rail (4 resources + the idle-builder badge), a thin name tab, a one-line guide strip, one alert pill, 40px caption-less dock
   keys, an icon-only layers key, one toast row right above the tab bar, a one-line attribution. Every key keeps a 40px hit area.
   Several style.css phone rules are `body:has(#…) #…` (2 ids); the overrides below that must beat them say `body:has(#quick-dock)` /
   `body:not(:has(#…))` on purpose. ------------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* transparent HUD boxes hand taps (and the measured area) back to the map; only their visible parts catch them */
  html.iso.ui-a :is(#top, #top-info, #quick-dock) { pointer-events: none; }
  html.iso.ui-a :is(#top .chips, #top .brand, #hud-toggle, #move-strip, #home-call, #guest-strip, #quick-dock > *) { pointer-events: auto; }
  /* rail: one row. Value on line 1, the rate small on line 2; the free-builder cell is a narrow 5th column (icon over count) */
  html.iso.ui-a #top { padding: 0; gap: 4px; grid-template-columns: minmax(0, 1fr) 40px; }
  html.iso.ui-a #hud-toggle { width: 40px; min-width: 40px; height: 40px; font-size: 17px; }
  html.iso.ui-a #top:not(.hud-expanded) .chips { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; border-radius: 14px; }
  html.iso.ui-a #top:not(.hud-expanded) .chips > .chip { min-height: 40px; padding: 3px 1px; gap: 0 2px; font-size: 11px; line-height: 1.15; letter-spacing: -.015em; }
  /* the four resource cells: a 2-column grid (icon | value, then the rate across), so a wide DE value never pushes the icon onto its own line */
  html.iso.ui-a #top:not(.hud-expanded) .chips > .chip:nth-child(-n+4) { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; column-gap: 2px; }
  html.iso.ui-a #top:not(.hud-expanded) .chips > .chip:nth-child(-n+4) small { grid-column: 1 / -1; }
  html.iso.ui-a #top:not(.hud-expanded) .chips > .chip .resource-value { font-size: 12px; }
  @media (max-width: 380px) { html.iso.ui-a #top:not(.hud-expanded) .chips > .chip { font-size: 10px; } html.iso.ui-a #top:not(.hud-expanded) .chips > .chip .resource-value { font-size: 11.5px; } }
  html.iso.ui-a #top:not(.hud-expanded) .chips > .chip small { font-size: 10px; font-weight: 500; }
  html.iso.ui-a #top:not(.hud-expanded) .chips > #build-slots-hud.chip-free { display: flex; flex-direction: column; justify-content: center; align-items: center; grid-column: auto;
    min-width: 40px; padding: 2px 5px; font-size: 12px; line-height: 1.1; box-shadow: inset 0 -2px 0 var(--a-accent); }
  html.iso.ui-a #top:not(.hud-expanded) .chips > #build-slots-hud b { font-size: 11px; }
  /* the name tab: smaller, still glued under the rail */
  html.iso.ui-a #top .brand { height: 22px; padding: 0 10px; gap: 5px; font-size: 12px; border-radius: 0 0 10px 10px; }
  html.iso.ui-a #top .brand b { font-size: 12px; }
  html.iso.ui-a #top .brand .ui-badge { padding: 0 7px; font-size: 10.5px; line-height: 16px; }
  /* alerts while folded: only the first urgent row, as one compact pill (the dock's 🔔 badge carries the count) */
  html.iso.ui-a #alerts.has-urgent:not(.quick-open) { width: auto; max-width: min(300px, calc(100vw - var(--edge-left) - var(--edge-right) - 48px)); gap: 0; }
  html.iso.ui-a #alerts.has-urgent:not(.quick-open) .alert.urgent ~ .alert.urgent { display: none; }
  html.iso.ui-a #alerts.has-urgent:not(.quick-open) .alert.urgent { display: flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 32px; margin: 0;
    padding: 4px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1.25; }
}
@media (max-width: 760px) {
  /* dock: 40px keys without captions (each keeps its aria-label; badges stay) */
  html.iso.ui-a #quick-dock { gap: 6px; padding-bottom: 2px; }
  html.iso.ui-a body:has(#quick-dock) #quick-dock > :is(button, .village-event-launcher) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; font-size: 17px; }
  html.iso.ui-a body:has(#quick-dock) #quick-dock > :is(button, .village-event-launcher)::after { content: none; }
  html.iso.ui-a #quick-dock .quick-badge { top: -3px; right: -3px; }
  /* toasts: one row right above the tab bar and the attribution, between the dock column and the layers key; the newest toast is one
     line (ellipsis, the full text is in Kayıtlar) and the "+N" badge sits beside it. A window / map card / action card keeps style.css's top placement. */
  html.iso.ui-a body:not(:has(.action-card, #nav:not([hidden]), #panel:not([hidden]))) #toasts { top: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 18px); }
  html.iso.ui-a #toasts { left: calc(var(--edge-left) + 46px); flex-direction: row; justify-content: center; align-items: center; gap: 6px; }
  html.iso.ui-a #toasts .toast { flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 6px 14px; font-size: 12.5px; line-height: 24px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  html.iso.ui-a #toasts .toast:not(:has(> *)) { display: block; } /* the "+N" pill: one line, block so text-overflow can cut it */
  /* a plain text toast wraps to three lines (2026-11-10 playtest: DE/FR toasts were cut to "Tippe auf der Karte auf eine Stelle im grünen Rin…" and lost their meaning); only past the third line an ellipsis is left */
  html.iso.ui-a #toasts .toast:not(:has(> *)):not(.toast-more) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; overflow-wrap: anywhere; line-height: 18px; padding-block: 9px; }
  html.iso.ui-a #toasts .toast > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.iso.ui-a #toasts .toast:has(> button) > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 18px; } /* a toast with an action button: three lines, the button stays reachable */
  html.iso.ui-a #toasts .toast-more { flex: 0 2 auto; min-width: 72px; order: 1; padding-inline: 12px; line-height: 28px; } /* right of the toast it summarises; it gives way first, "+N" stays */
  /* attribution: one small line on the tab bar's top edge */
  html.iso.ui-a #attrib { box-sizing: border-box; max-width: calc(100vw - var(--edge-left) - var(--edge-right)); padding: 0 8px; font-size: 10px; line-height: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- 12. touch hit areas >= 44x44 (audit U-3, 2026-11-02). The calm phone layout keeps its 40px keys; ::before grows the tappable area 2px beyond the border on each side
   (the gaps between keys are >= 4px, so the grown areas never overlap). Cells that clip their children (overflow:hidden) or sit in a gap-less grid get real size.
   Inline links inside a sentence (the map attribution, the terms line of the sign-in card) are the one exception: their height is the line's. ------------------------- */
@media (pointer: coarse), (max-width: 760px), (max-height: 500px) and (max-width: 1100px) {
  html.iso.ui-a #hud-toggle { position: relative; } /* static while the HUD is expanded: the grown area would then be measured from #top and cover the chips */
  html.iso.ui-a :is(#quick-dock > button, #quick-dock > .village-event-launcher)::before { content: ''; position: absolute; inset: -3px; } /* -3: the 1px border sits outside the padding box the inset counts from */
  /* the toggle is flush with #top's right edge: any hit area past it makes #top scroll sideways (audit E4-eras-1, +2px). The 4px it needs grow into the 4px gap on its left instead (right -1 = the border edge). */
  html.iso.ui-a #hud-toggle::before { content: ''; position: absolute; inset: -3px -1px -3px -5px; }
  html.iso.ui-a #top .chips > .chip, html.iso.ui-a #top:not(.hud-expanded) .chips > .chip { min-height: 44px; }
  html.iso.ui-a #bar .bar-btn, html.iso.ui-a #bar .bar-menu-wrap { min-width: 44px; } /* landscape phones: the bar hugs its keys and style.css left them 40-42px wide */
  html.iso.ui-a #top:not(.hud-expanded) .chips > #build-slots-hud.chip-free { min-width: 44px; }
  html.iso.ui-a #labels .lbl.click { min-width: 44px; min-height: 44px; box-sizing: border-box; }
  /* the (i) key has -8px vertical margins so it sits in the line; as a positioned box it is also hit-tested above the text lines of the block it overlaps */
  html.iso.ui-a .ui-term { position: relative; }
  /* tab strips: iso-theme-panels.css gives a tab 40px; on a landscape phone (icon beside the label) nothing else makes it taller */
  html.iso.ui-a #panel :is(.ui-tab, [role=tab]) { min-height: 44px; }
}
/* 320 px: seven 44px bar keys + six 2px gaps fill the width exactly, so the A bar's 6px side padding (which beat style.css's 320 rule) and its 1px side borders go (audit U-3) */
@media (max-width: 340px) { html.iso.ui-a #bar { gap: 2px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); border-left-width: 0; border-right-width: 0; } }

/* === Gelen saldırı (saldiri-uyari) ===
   Player feedback: "saldırı geldiğinde ya da yaklaştığında ekran köşelerinden kırmızı saldırı efektleri verilebilir".
   (1) #threat-edge: a red vignette on the screen edges while an enemy army is on its way. alerts.js (threatLevel, renderAlerts) sets data-level:
   1 = far / light and still, 2 = within a minute / strong, slow pulse; `.flash` = one short burst when a new attack is first seen. Corners are
   strongest, the middle stays clear. No pointer events, under the HUD and windows (z = labels layer, DOM after #app), no JS in the frame loop.
   (2) Desktop: style.css folds #alerts away unless the bell opens it (`#alerts:not(.quick-open)` hidden) and only the phone rules lift that for
   `.has-urgent`, so on desktop an incoming raid showed nowhere but the strip. Same rule here: only the urgent rows, under the HUD. */
#threat-edge { display: none; position: fixed; inset: 0; z-index: var(--z-labels); pointer-events: none; }
#threat-edge::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 34%, rgba(255, 64, 52, .78) 100%); }
#threat-edge[data-level="1"], #threat-edge[data-level="2"] { display: block; }
#threat-edge[data-level="1"] { background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 60%, rgba(200, 40, 36, .34) 100%); }
#threat-edge[data-level="2"] { background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 44%, rgba(220, 36, 32, .66) 100%); }
body:has(#auth:not([hidden])) #threat-edge { display: none; } /* signed out: no village to warn about (renderAlerts does not run there to clear it) */
@keyframes threat-edge-pulse { from { opacity: .72; } to { opacity: 1; } }
@keyframes threat-edge-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #threat-edge[data-level="2"] { animation: threat-edge-pulse 1.6s ease-in-out infinite alternate; will-change: opacity; }
  #threat-edge.flash::after { animation: threat-edge-flash 1.4s ease-out 1; }
}
/* Desktop = everything the phone rules in style.css (@media at 1118) do not already cover: wide screens, or a fine pointer above 760 px and 500 px tall.
   Top-left under the HUD: top-right belongs to the village-event launcher and the build-slot popover, the middle to the village tab and toasts. */
@media (min-width: 1101px), (min-width: 761px) and (pointer: fine) and (min-height: 501px) {
  html.ui-a #alerts.has-urgent:not(.quick-open) { visibility: visible; pointer-events: auto; box-sizing: border-box;
    top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + var(--announce-h) + 10px); bottom: auto; left: 14px; right: auto;
    width: min(340px, calc(100vw - 28px)); max-width: none; max-height: min(30dvh, 240px); align-items: stretch; }
  html.ui-a #alerts.has-urgent:not(.quick-open) .alert:not(.urgent) { display: none; }
  html.ui-a #alerts.has-urgent:not(.quick-open) .alert.urgent { padding: 8px 12px; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
}
/* the attack/famine row reads as an alarm on the graphite glass: a red wash from the accent edge */
html.iso.ui-a #alerts .alert.bad.urgent { border-color: rgba(255, 155, 140, .5);
  background: linear-gradient(90deg, rgba(198, 47, 53, .26), rgba(198, 47, 53, 0) 72%), var(--a-glass-strong); }
/* === İlerleme paneli (ilerleme-paneli) === */
/* Desktop right-edge panel (quest-tracker-ui.js, #quest-tracker.progress-dock): the head and the job list use the same graphite glass as the cards above them. */
html.iso.ui-a :is(#quest-tracker .progress-head, #quest-tracker .progress-list) { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 16px; box-shadow: var(--a-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #quest-tracker .progress-fold { border: 1px solid var(--a-edge); border-radius: 10px; background: transparent; }
html.iso.ui-a #quest-tracker .progress-count { border-color: var(--a-edge); background: rgba(255, 255, 255, .08); }
html.iso.ui-a #quest-tracker .progress-count.is-danger { border-color: #ff9b8c; background: rgba(255, 155, 140, .16); color: var(--bad); }
html.iso.ui-a #quest-tracker .progress-row.is-danger { background: rgba(255, 155, 140, .12); box-shadow: inset 3px 0 0 #ff9b8c; color: var(--bad); }
html.iso.ui-a #quest-tracker .progress-hit { border-radius: 10px; }
@media (hover: hover) { html.iso.ui-a #quest-tracker button.progress-hit:hover { background: rgba(255, 255, 255, .08); } }
/* Toasts are centred on the screen; beside the panel they centre in the free area to its left instead (318 = 304 wide + 14 edge; 270 = 256 + 14 below 1180 px), so a long German toast never covers the job list.
   Not while a docked window is open: the panel is hidden then and style.css moves the toasts to the window's right strip. */
html.iso.ui-a body:not(.sheet-open):has(#quest-tracker.progress-dock.quick-open) #toasts { left: calc((100vw - 318px) / 2); max-width: calc(100vw - 318px - 24px); }
@media (min-width: 1024px) and (max-width: 1179.98px) { html.iso.ui-a body:not(.sheet-open):has(#quest-tracker.progress-dock.quick-open) #toasts { left: calc((100vw - 270px) / 2); max-width: calc(100vw - 270px - 24px); } }

/* ---- disabled buttons: last word of this file (2026-11-03: `:is(.row button, #pick button, #auth button, ...)` weighs as its heaviest argument, an ID, and
   `:is(#panel, ...) button:is(.primary, .confirm, .is-next)` is (1,4,2); the old `button:disabled` rules (0,3,2) / (1,3,2) lost, so a disabled "Fermanı mühürle" or
   "Şehir Nizamı projesini başlat" looked exactly like a live one). `: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) make it (1,4,3), and it comes last. ---- */
html.iso.ui-a button:disabled:not(#_):not(.community-rank-row button) { color: #a6aaaf; background: var(--surface-disabled); border-color: var(--border-soft); border-image: none; box-shadow: none; filter: none; }