/* Koyland modern UI A ("Cam HUD", graphite), part "screens": every screen the prototype sheet (ui-modern-a.css) did not reach. Linked just BEFORE
   ui-modern-a.css in index.html (after iso-theme.css), so it only has to beat the dark vitrine theme; every rule starts with html.iso.ui-a.
   The vitrine theme already set light ink for dark panels, so its text colours mostly stay; this file changes what A changes: the kiremit
   #bd502a primaries and gold #d9ae4a rings become the one accent, flat dark plates become graphite glass with the A radii (18 panel / 14 card /
   12 button / full pill), tracks and tabs follow the A segmented look. No ALL-CAPS, no gradient wash. Every blur goes through var(--a-blur),
   so the low-power switches in ui-modern-a.css turn them all off at once. */

/* ---- 1. inputs: the dark inset field with the A radius (the vitrine painted them through an ID-weighted :is(), same weight here) ---- */
html.iso.ui-a :is(#panel, #chat, #pick, #auth, #nav, #intro, #away, #help, #whats-new, .action-card, dialog, .shop-stage) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
  background: var(--surface-inset); color: var(--ink); border: 1px solid var(--border); border-radius: 12px;
}
html.iso.ui-a :is(#panel, #chat, #pick, #auth, dialog) :is(input, select, textarea):focus { border-color: var(--a-accent); }
html.iso.ui-a :is(#auth, #pick, #panel) input:is([type=checkbox], [type=radio]), html.iso.ui-a input[type=range] { accent-color: var(--a-accent); }

/* ---- 2. founding a village (#pick): kicker and links in the accent text tone, one accent primary ---- */
html.iso.ui-a :is(#pick, #auth) .kicker { color: var(--a-accent-text); font-weight: 600; }
html.iso.ui-a #pick a, html.iso.ui-a #auth a:not(.auth-provider) { color: var(--a-accent-text); } /* provider buttons keep their own brand text colour */
/* :enabled on the paint rules below: a disabled button falls through to the disabled rule (ui-modern-a.css), it does not keep the live colours (2026-11-03) */
html.iso.ui-a #pick :is(button[type=submit], #pick-import button):enabled { background: var(--a-accent); border: 1px solid var(--a-accent); border-radius: 12px; color: var(--a-on-accent); box-shadow: 0 4px 14px -4px rgba(56, 178, 201, .45); }
@media (hover: hover) { html.iso.ui-a #pick :is(button[type=submit], #pick-import button):hover:enabled { background: var(--a-accent-hover); } }
html.iso.ui-a :is(.pick-heading-actions, .pick-settings-actions) button, html.iso.ui-a #pick #geo-form #geo-search-btn { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
html.iso.ui-a #pick .pick-settings-actions button.danger { color: var(--bad); background: var(--btn-danger-bg); border-color: rgba(255, 155, 140, .4); }
html.iso.ui-a #geo-results { background: var(--a-glass-strong); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-sm); }
html.iso.ui-a :is(.pick-settings, .hint-card) { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; }

/* ---- 3. loading chip: the graphite pill with the mark; the sweep line is the accent on a hairline track ---- */
html.iso.ui-a #loading { border-radius: 18px; }
html.iso.ui-a #loading::after { background: rgba(255, 255, 255, .08) linear-gradient(90deg, transparent, var(--a-accent) 40%, var(--a-accent-text) 60%, transparent) 0 0 / 40% 100% no-repeat; }
@media (prefers-reduced-motion: reduce) { html.iso.ui-a #loading::after { animation: none; background: rgba(56, 178, 201, .45); } }

/* ---- 4. intro / away / help / Yenilikler: graphite cards over a dim map, accent primary ---- */
html.iso.ui-a :is(#help, #whats-new) { background: rgba(0, 0, 0, .4); }
html.iso.ui-a :is(.help-card, .news-card) { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: var(--shadow-modal);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a :is(.intro-card, .help-card, .away-card, .news-card) :is(h3, h4) { font-family: var(--font-body); }
html.iso.ui-a .intro-card .dots .dot { background: rgba(255, 255, 255, .22); }
html.iso.ui-a .intro-card .dots .dot.on { background: var(--a-accent); }
html.iso.ui-a :is(#intro, #away) .intro-card button[data-primary], html.iso.ui-a #away .away-card .row2 button[data-primary]:enabled { 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); }
@media (hover: hover) {
  html.iso.ui-a .intro-card button:hover { background: var(--a-key-hover); }
  html.iso.ui-a :is(#intro, #away) .intro-card button[data-primary]:hover:enabled, html.iso.ui-a #away .away-card .row2 button[data-primary]:hover:enabled { background: var(--a-accent-hover); }
}
/* the row is sticky at the card's bottom: an opaque fill (not transparent / translucent glass) so the scrolling text never shows through it */
html.iso.ui-a .away-card .row2 { background: var(--a-solid); box-shadow: 0 -1px 0 var(--a-edge); }
html.iso.ui-a .away-card .row2 button { background: var(--a-key-solid); border-color: var(--border); border-radius: 12px; }
@media (hover: hover) { html.iso.ui-a .away-card .row2 button:hover:enabled:not([data-primary]) { background: var(--a-key-solid-hover); } }
html.iso.ui-a .away-hero-wrap { background: var(--surface-inset); border-radius: 14px; }
/* the village name sits on the hero photo: a dark plate under light type instead of the vitrine's gradient wash */
html.iso.ui-a .away-village { background: rgba(12, 13, 14, .78); color: var(--ink); border-radius: 999px; }
html.iso.ui-a .away-resource { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; }
html.iso.ui-a .away-count-track { background: var(--a-track); border-radius: 999px; }
html.iso.ui-a .away-count-bar { background: var(--a-accent); border-radius: 999px; }
html.iso.ui-a .away-chart-row.bad .away-count-bar { background: #ff6b5e; }
html.iso.ui-a .help-key kbd { background: var(--a-key); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; }

/* ---- 5. coach tip and spotlight: a graphite card with an accent ring; the accent replaces the vitrine gold everywhere ---- */
html.iso.ui-a #tip { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: 0 0 0 2px rgba(56, 178, 201, .5), var(--shadow-modal);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #tip .tip-kicker { color: var(--a-accent-text); font-weight: 600; }
html.iso.ui-a #tip .tip-actions button { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
html.iso.ui-a #tip .tip-actions button.primary { 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 #tip .tip-actions button.primary small { color: var(--a-on-accent); }
html.iso.ui-a #tip .tip-close { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; }
html.iso.ui-a :is(#tip-spot, #coach-ring) { border-color: var(--a-accent); box-shadow: 0 0 0 4px rgba(56, 178, 201, .35); }
html.iso.ui-a #tip-dim { background: rgba(0, 0, 0, .4); }
html.iso.ui-a #labels .coach-bubble { border-color: var(--a-accent); box-shadow: 0 0 0 2px rgba(56, 178, 201, .45), 0 4px 12px -4px rgba(0, 0, 0, .6); }
html.iso.ui-a #coach-bubble { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 14px; box-shadow: 0 0 0 2px rgba(56, 178, 201, .45), var(--a-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
/* The coach marks stack above the docked window: at z 8/9 (style.css) the bubble of a bar-button step slid behind an open window and the ring of an in-window
   step was invisible (2026-11-02, 1440x900). coach.js hides them while the target is scrolled out of the window body; phones keep `.sheet-open` hiding them. */
html.iso.ui-a :is(#coach-ring, #coach-bubble) { z-index: var(--z-panel-coach); }

/* ---- 6. native dialogs (event, era, account delete, chat report, maker card, landmark): the graphite panel at modal elevation ---- */
html.iso.ui-a :is(dialog.village-event-dialog, dialog.era-ceremony, #account-delete-dialog, #chat-report-dialog, dialog.maker-card, .landmark-card) {
  background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: var(--shadow-modal);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
}
html.iso.ui-a :is(#account-delete-dialog, #chat-report-dialog) h2 { font-family: var(--font-body); font-weight: 700; }
html.iso.ui-a .landmark-card a { color: var(--a-accent-text); }
html.iso.ui-a .landmark-himaye .seg button.on { background: var(--surface-selected); border-color: var(--a-accent); color: var(--a-accent-text); }
html.iso.ui-a .landmark-close { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; }
html.iso.ui-a .maker-card .maker-body { border-top-color: var(--a-accent); }
html.iso.ui-a .maker-card .maker-label { font-weight: 600; }
html.iso.ui-a dialog.maker-card a.maker-open { background: var(--a-accent); color: var(--a-on-accent); border-radius: 12px; }
@media (hover: hover) { html.iso.ui-a dialog.maker-card a.maker-open:hover { background: var(--a-accent-hover); } }
html.iso.ui-a :is(.village-event-close, .era-ceremony .panel-close) { background: var(--a-key); color: var(--ink); border: 0; border-radius: 999px; }
html.iso.ui-a :is(.village-event-kicker, .era-kicker, .victory-kicker, .announce-kicker, .ui-quest-kicker, .fx-card small, .info-group h6) { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
html.iso.ui-a :is(.village-event-kicker, .era-kicker, .announce-kicker, .info-group h6) { color: var(--a-accent-text); }
html.iso.ui-a .village-event-choices button { border-radius: 14px; }
html.iso.ui-a dialog.village-event-dialog[open] .village-event-choices > button.is-picked { background: var(--surface-selected); border-color: var(--a-accent); color: var(--ink); }
html.iso.ui-a .ev-scene { border: 0; border-radius: 14px; box-shadow: none; }
html.iso.ui-a .village-event-result.is-gain { background-image: none; background-color: var(--success-surface); border-radius: 14px; }
html.iso.ui-a .fx-card { background: var(--a-glass-strong); color: var(--ink); border-radius: 18px; }
html.iso.ui-a .fx-card.fx-war { background: rgba(58, 18, 16, .92); border-color: rgba(255, 155, 140, .4); }

/* ---- 7. the launcher pill, quest card and announcement: graphite pills with the accent as the "ready" mark ---- */
html.iso.ui-a .village-event-launcher { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 999px; box-shadow: inset 3px 0 0 var(--a-accent), var(--shadow-sm);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #quest-tracker .ui-quest.is-ready { box-shadow: 0 0 0 2px rgba(56, 178, 201, .55), var(--a-shadow); }
html.iso.ui-a .ui-quest.is-ready .ui-quest-seal { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); box-shadow: none; }
html.iso.ui-a .ui-quest-progress .ui-progress-track { background: var(--a-track); border-radius: 999px; }
html.iso.ui-a .ui-quest-progress .ui-progress-fill { background: var(--a-accent); }
html.iso.ui-a progress::-moz-progress-bar { background: var(--a-accent); }
html.iso.ui-a .weekly-ledger progress { background: var(--a-track); }
html.iso.ui-a .announce-kicker { color: var(--a-accent-text); }

/* ---- 8. panel furniture: era ladder, ledger, album, armies, layer chips, language buttons, chat toggle, close buttons ---- */
html.iso.ui-a .era-ladder li { border-bottom-width: 3px; border-radius: 12px 12px 4px 4px; }
html.iso.ui-a .era-ladder .done { border-color: var(--a-accent); }
html.iso.ui-a .era-ladder .current { background: var(--a-seg); border-color: var(--a-accent); color: var(--a-accent-text); box-shadow: var(--shadow-sm); }
html.iso.ui-a .era-ceremony { background: var(--a-glass-strong); }
html.iso.ui-a .album-milestone { background: var(--warning-surface); border-color: rgba(240, 196, 92, .45); color: var(--ink); }
html.iso.ui-a .wk-bonus { background: var(--surface-raised); border-radius: 12px; }
html.iso.ui-a :is(.wr-stat, .wr-clan) { background: var(--surface-raised); border-color: var(--border-soft); border-radius: 14px; }
html.iso.ui-a :is(.ui-card, .ledger-card, .artifact-card, .shop-card, .hint-card) { border-radius: 14px; }
html.iso.ui-a :is(#nav .nav-head, #layers-panel) .layer-chip { background: var(--a-key); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); }
html.iso.ui-a :is(#nav .nav-head, #layers-panel) .layer-chip[aria-pressed=true] { background: var(--surface-selected); border-color: var(--a-accent); color: var(--a-accent-text); }
html.iso.ui-a :is(#nav .nav-head, #layers-panel) .lc-box { background: var(--surface-inset); border-color: var(--muted); color: var(--a-on-accent); border-radius: 5px; }
html.iso.ui-a :is(#nav .nav-head, #layers-panel) .layer-chip[aria-pressed=true] .lc-box { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); }
html.iso.ui-a .lang-switch .lang-btn { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); box-shadow: none; }
html.iso.ui-a .lang-switch .lang-btn[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--a-accent); color: var(--a-accent-text); box-shadow: none; }
@media (hover: hover) {
  html.iso.ui-a .lang-switch .lang-btn:hover:not([aria-pressed="true"]) { background: var(--a-key-hover); }
  html.iso.ui-a .online-row:hover { background: var(--surface-selected); }
}
html.iso.ui-a #hover.water { box-shadow: inset 3px 0 0 var(--a-accent), var(--shadow-sm); }
html.iso.ui-a #hover.green { box-shadow: inset 3px 0 0 #7fd49a, var(--shadow-sm); }
html.iso.ui-a #hover.building { box-shadow: inset 3px 0 0 #f0c45c, var(--shadow-sm); }
html.iso.ui-a .panel-close { background: var(--a-key); color: var(--ink); border-radius: 999px; }
@media (hover: hover) { html.iso.ui-a .panel-close:hover { background: var(--a-key-hover); } }

/* ---- 9. place bar, guest bar, victory: floating graphite with the accent as the one action ---- */
html.iso.ui-a .place-bar { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: inset 0 3px 0 var(--pin-tone, var(--border)), var(--a-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a .place-bar[data-tone="ok"] { border-color: var(--a-edge); --pin-tone: #7fd49a; }
html.iso.ui-a .place-bar[data-tone="bad"] { border-color: var(--a-edge); --pin-tone: #ff9b8c; }
html.iso.ui-a .place-bar button { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
html.iso.ui-a .place-bar .place-confirm { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); }
html.iso.ui-a #guest-bar { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 999px; box-shadow: var(--a-shadow); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a #guest-bar button { background: var(--a-key); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); }
html.iso.ui-a #guest-bar #guest-signup { background: var(--a-accent); border: 1px solid var(--a-accent); color: var(--a-on-accent); box-shadow: none; }
@media (hover: hover) { html.iso.ui-a #guest-bar #guest-signup:hover { background: var(--a-accent-hover); } html.iso.ui-a .place-bar .place-confirm:hover:enabled { background: var(--a-accent-hover); } }
html.iso.ui-a .victory-scene { background: var(--a-glass-strong); color: var(--ink); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: var(--shadow-modal); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); }
html.iso.ui-a .victory-relic { border-radius: 14px; }

/* ---- 10. Sohbet and Sıralama: segmented choices like the windows, transparent lists on the glass, accent for "mine" and the one primary ---- */
html.iso.ui-a :is(#chat, #ranking-panel) header { border-bottom: 1px solid var(--border-soft); }
html.iso.ui-a #chat button:is(.primary, .confirm) { background: var(--a-accent); border: 1px solid var(--a-accent); border-radius: 12px; color: var(--a-on-accent); box-shadow: 0 4px 14px -4px rgba(56, 178, 201, .45); }
html.iso.ui-a #chat button:is(.primary, .confirm):disabled { background: var(--surface-disabled); border-color: var(--border-soft); color: #a6aaaf; box-shadow: none; }
@media (hover: hover) { html.iso.ui-a #chat button:is(.primary, .confirm):hover:enabled { background: var(--a-accent-hover); } }
html.iso.ui-a :is(#chat-messages, #ranking-content) { background: transparent; }
html.iso.ui-a #chat-channels { background: transparent; border: 0; }
html.iso.ui-a #chat-channels button { background: var(--a-key); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); box-shadow: none; }
html.iso.ui-a #chat-channels .on, html.iso.ui-a #chat-channels button[aria-pressed=true] { background: var(--surface-selected); border-color: var(--a-accent); color: var(--a-accent-text); box-shadow: none; }
html.iso.ui-a .chat-msg { border-radius: 14px; }
html.iso.ui-a .chat-msg.chat-own { background: var(--surface-selected); border-color: rgba(56, 178, 201, .35); }
html.iso.ui-a .chat-msg.chat-mentioned { border-color: #f0c45c; }
html.iso.ui-a #chat-peers .chat-peer.on { border-color: var(--a-accent); }
html.iso.ui-a #ranking-content .ui-tabs { background: var(--a-track); border: 0; border-radius: 14px; padding: 3px; gap: 2px; overflow: visible; }
html.iso.ui-a #ranking-content .ui-tabs .ui-tab:enabled { background: transparent; border: 0; border-radius: 11px; color: var(--muted); box-shadow: none; }
html.iso.ui-a #ranking-content .ui-tabs .ui-tab.on:enabled { 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 #ranking-content .ui-tabs .ui-tab:hover:enabled:not(.on) { background: rgba(255, 255, 255, .05); color: var(--ink); } }
html.iso.ui-a #community-mine { border-radius: 0; } /* a full-bleed sticky strip, not a card (community-ranking.css); its fill is ui-modern-a.css */

/* ---- 11. sign-in over the iso city at night (2026-11-01): the poster carries the mood, a veil keeps the story readable, one graphite card.
   Rules carry #auth.auth-shell (or :has(#auth.auth-shell)) so they beat section 9 of ui-modern-a.css, which loads after this file.
   The wordmark is Cinzel (fonts.css, already self-hosted): an inscription-like name plate for the maket, the UI around it stays Outfit. ---- */
html.iso.ui-a { --font-brand: 'Cinzel', 'Times New Roman', serif; }
html.iso.ui-a body:has(#auth.auth-shell:not([hidden])) #intro-bg::after {
  background: linear-gradient(90deg, rgba(7, 9, 12, .84) 0, rgba(7, 9, 12, .68) 34%, rgba(7, 9, 12, 0) 52%, rgba(7, 9, 12, .12) 100%),
    linear-gradient(180deg, rgba(7, 9, 12, .3), transparent 18%, transparent 75%, rgba(7, 9, 12, .5));
}
html.iso.ui-a #auth.auth-shell { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
html.iso.ui-a #auth.auth-shell .auth-story-kicker { margin-bottom: 18px; color: var(--a-accent-text); font: 600 14px/1.3 var(--font-body); letter-spacing: .01em; text-transform: none; } /* A: no all-caps */
html.iso.ui-a #auth.auth-shell .auth-story h1 { max-width: 12ch; margin-bottom: 22px; font: 700 clamp(40px, 4.7vw, 70px)/1.04 var(--font-body); letter-spacing: -.04em; text-wrap: balance; }
html.iso.ui-a #auth.auth-shell .auth-story-lead { max-width: 44ch; color: #d9dbdc; text-wrap: pretty; }
html.iso.ui-a #auth.auth-shell .auth-story-features li { padding: 12px 0; border-top-color: rgba(255, 255, 255, .12); }
html.iso.ui-a #auth.auth-shell .auth-story-features li > span { color: var(--a-accent-text); font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
html.iso.ui-a #auth.auth-shell .auth-story-features p { color: #e4e2dc; }
html.iso.ui-a #auth.auth-shell .auth-card { padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: rgba(16, 18, 21, .9);
  backdrop-filter: none; -webkit-backdrop-filter: none; /* no blur: over the moving reel it re-blurs every frame (CPU, battery); the plate is near-opaque anyway */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 80px -20px rgba(0, 0, 0, .8); }
html.iso.ui-a #auth.auth-shell .brand-lockup { gap: 10px; }
html.iso.ui-a #auth.auth-shell .brand-lockup img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
html.iso.ui-a #auth.auth-shell .auth-brand-name { font: 600 27px/1 var(--font-brand); letter-spacing: .03em; color: #f6f1e6; }
html.iso.ui-a #auth.auth-shell .auth-card-promise { margin: 16px 0 18px; color: #c9cccf; font: 500 15px/1.45 var(--font-body); }
/* language: a quiet code-only segmented pill beside the name (the flags stay in Ayarlar); it wraps under the name, right-aligned, on narrow cards */
html.iso.ui-a #auth.auth-shell #auth-language-switch { margin-left: auto; }
html.iso.ui-a #auth.auth-shell .auth-card-top .lang-switch { display: inline-flex; gap: 2px; width: auto; padding: 3px; border-radius: 999px; background: var(--a-track); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn { min-width: 34px; min-height: 32px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none; font: 600 12px/1 var(--font-body); }
html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn svg { display: none; }
html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn[aria-pressed="true"] { background: var(--a-seg); color: var(--ink); }
@media (hover: hover) { html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .06); color: var(--ink); } }
/* Oyuna Bak: the secondary way in, an outlined row with an arrow; the accent stays on the one submit button */
html.iso.ui-a #auth.auth-shell .auth-guest { margin: 0 0 20px; }
html.iso.ui-a #auth.auth-shell .auth-guest #auth-guest { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid rgba(108, 208, 226, .38);
  border-radius: 14px; background: rgba(56, 178, 201, .08); color: var(--a-accent-text); font: 600 14px/1.2 var(--font-body); }
html.iso.ui-a #auth.auth-shell .auth-guest #auth-guest::after { content: '→'; transition: transform .2s ease; }
@media (hover: hover) { html.iso.ui-a #auth.auth-shell .auth-guest #auth-guest:hover { background: rgba(56, 178, 201, .16); border-color: var(--a-accent-text); }
  html.iso.ui-a #auth.auth-shell .auth-guest #auth-guest:hover::after { transform: translateX(3px); } }
html.iso.ui-a #auth.auth-shell :is(button, a, input):focus-visible { outline: 2px solid var(--a-accent-text); outline-offset: 2px; }
/* page footer links (2026-11-04): quiet white on the backdrop, not the accent of line 17 above */
html.iso.ui-a #auth.auth-shell .auth-page-footer a { color: rgba(255, 255, 255, .72); }
html.iso.ui-a #auth.auth-shell .auth-page-footer a.made-by { color: rgba(255, 255, 255, .6); }
@media (hover: hover) { html.iso.ui-a #auth.auth-shell .auth-page-footer a:hover { color: #fff; } }
html.iso.ui-a #auth.auth-shell .auth-page-footer a:focus-visible { color: #fff; }
html.iso.ui-a #auth.auth-shell form button[type=submit] { min-height: 50px; border-radius: 14px; font: 700 15px/1.2 var(--font-body); }
html.iso.ui-a #auth.auth-shell .auth-tabs { margin-bottom: 22px; }
@media (max-width: 850px) {
  html.iso.ui-a body:has(#auth.auth-shell:not([hidden])) #intro-bg::after { background: linear-gradient(180deg, rgba(7, 9, 12, .5) 0, rgba(7, 9, 12, .62) 24%, rgba(7, 9, 12, .84) 55%, rgba(7, 9, 12, .9)); /* the headline sits on bright day clips too */ }
  html.iso.ui-a #auth.auth-shell .auth-story { padding-top: clamp(8px, 6vh, 64px); }
  html.iso.ui-a #auth.auth-shell .auth-story-kicker { margin-bottom: 10px; font-size: 12px; }
  html.iso.ui-a #auth.auth-shell .auth-story h1 { max-width: 16ch; margin-bottom: 4px; font-size: clamp(28px, 8vw, 40px); line-height: 1.08; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
  html.iso.ui-a #auth.auth-shell .auth-card { padding: 22px; border-radius: 22px; }
}
@media (max-width: 480px) { /* name and language pill share one row down to a 390 px phone */
  html.iso.ui-a #auth.auth-shell .auth-card-top { gap: 10px; }
  html.iso.ui-a #auth.auth-shell .brand-lockup { gap: 8px; }
  html.iso.ui-a #auth.auth-shell .brand-lockup img { width: 40px; height: 40px; }
  html.iso.ui-a #auth.auth-shell .auth-brand-name { font-size: 22px; }
  html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn { min-width: 30px; min-height: 30px; padding: 0 4px; font-size: 11px; }
}
@media (max-width: 390px) { html.iso.ui-a #auth.auth-shell .auth-card { padding: 18px; } }
@media (max-width: 360px) { html.iso.ui-a #auth.auth-shell .brand-lockup img { width: 36px; height: 36px; } html.iso.ui-a #auth.auth-shell .auth-brand-name { font-size: 20px; } }
/* founding screen: the same name plate */
html.iso.ui-a #pick .brand-lockup h1 { font: 600 clamp(24px, 5.5vw, 30px)/1 var(--font-brand); letter-spacing: .03em; color: #f6f1e6; }
/* touch (audit U-3, 2026-11-02): the sign-in card's language keys, its two tabs, the consent row and the footer links are 44px targets; the consent checkbox stays 16px but its label spans the row */
@media (pointer: coarse), (max-width: 760px) {
  html.iso.ui-a #auth.auth-shell .auth-card-top .lang-btn { min-width: 44px; min-height: 44px; padding: 0 4px; }
  html.iso.ui-a #auth.auth-shell .auth-card-top .lang-switch { padding: 2px; }
  html.iso.ui-a #auth.auth-shell .auth-tabs button { min-height: 44px; }
  html.iso.ui-a #auth.auth-shell .register-consent > label { grid-column: 1 / -1; grid-row: 1; box-sizing: border-box; min-height: 44px; margin-left: -14px; padding: 3px 0 3px 40px; }
  html.iso.ui-a #auth.auth-shell .register-consent > input { grid-column: 1; grid-row: 1; align-self: center; margin: 0; position: relative; z-index: 1; }
  html.iso.ui-a #auth.auth-shell .register-consent > a { display: flex; align-items: center; min-height: 44px; }
  html.iso.ui-a #auth.auth-shell .auth-page-footer :is(.auth-site-links, .auth-legal-links) { gap: 0 14px; }
  html.iso.ui-a #auth.auth-shell .auth-page-footer :is(.auth-site-links, .auth-legal-links) a, html.iso.ui-a #auth.auth-shell .auth-page-footer .made-by { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}

/* password recovery views (2026-11-02): same graphite card, accent links and a quiet success notice */
html.iso.ui-a #auth.auth-shell .auth-form-lead { color: var(--muted); font: 500 14px/1.5 var(--font-body); }
html.iso.ui-a #auth.auth-shell .auth-form-title { color: var(--ink); font: 600 20px/1.3 var(--font-body); }
html.iso.ui-a #auth.auth-shell .auth-link { border: 0; background: none; box-shadow: none; color: var(--a-accent-text); font: 600 13px/1.4 var(--font-body); }
@media (hover: hover) { html.iso.ui-a #auth.auth-shell .auth-link:hover { color: var(--ink); } }
html.iso.ui-a #auth.auth-shell .auth-form-ok { border-color: rgba(108, 208, 226, .4); background: rgba(56, 178, 201, .12); color: #c6ecf3; }
@media (pointer: coarse), (max-width: 760px) { html.iso.ui-a #auth.auth-shell .auth-link { min-height: 44px; padding: 0 6px; } }
#panel button.army-locate { width: 100%; justify-content: flex-start; text-align: left; } /* "Yoldaki ordular": the whole row is the tap target (army-locate.js) */