/* Koyland iso theme, part "flows": the screens a player meets first (sign-in, founding a village, the loading chip, intro / away / help / tip cards)
   and the small modal dialogs. Imported by iso-theme.css; every rule starts with html.iso. Palette: see iso-theme.css (boğaz / çini / kiremit / yaldız).
   Hierarchy: big panel 14px, card 10px, chip 8px. No ALL-CAPS labels, no gradient wash, a hairline instead of a shadow where it can be. */

/* ---- inputs: one dark inset field everywhere a parchment-era rule painted them white (rgba(255,255,255,.6) in #pick/#auth/#chat-form/.lonca-*) ---- */
html.iso :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-image: none; border-radius: 8px; box-shadow: none;
}
html.iso :is(#panel, #chat, #pick, #auth, dialog) :is(input, select, textarea):focus { border-color: var(--focus); }
html.iso :is(#auth, #pick, #panel) input:is([type=checkbox], [type=radio]) { accent-color: var(--accent); }
html.iso :is(#pick, #auth) :is(label, p) { color: var(--text); }
html.iso :is(#pick, #auth) label, html.iso :is(#pick, #auth) .hint { color: var(--muted); }
html.iso :is(#pick, #auth) .hint.warn { color: #e6bf62; }
html.iso :is(#pick, #auth) .hint.bad { color: var(--bad); }
html.iso :is(#pick, #auth) .kicker { color: #e6bf62; text-transform: none; letter-spacing: .02em; font-size: 13px; }
html.iso #pick a, html.iso #auth a:not(.auth-provider) { color: #7fd6c4; }
html.iso #geo-results { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; }
html.iso #geo-results li { color: var(--ink); border-bottom-color: var(--border-soft); }
html.iso #geo-results li.empty { color: var(--muted); }
@media (hover: hover) { html.iso #geo-results li:hover { background: var(--surface-selected); } html.iso #geo-results li.empty:hover { background: none; } }
html.iso .pick-settings { background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: 10px; }
html.iso .pick-settings summary, html.iso .pick-settings-body label { color: var(--ink); }
html.iso :is(.pick-heading-actions, .pick-settings-actions) button { background: var(--btn-beige); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; }
html.iso #pick .pick-settings-actions button.danger { color: var(--bad); background: var(--btn-danger-bg); border-color: #c75a33; }
html.iso #pick-confirm { border-top-color: var(--border-soft); }
/* :enabled on the paint rules below: a disabled button falls through to the disabled rule (iso-theme.css), it does not keep the live colours (2026-11-03) */
html.iso #pick :is(button[type=submit], #pick-import button):enabled { border: 1px solid #e08a68; border-image: none; border-radius: 8px; background: #bd502a; color: #fff8ee; }
html.iso #pick .coords { color: var(--ink); }
html.iso .hint-card { background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: 10px; color: var(--ink); }

/* ---- sign-in / register: the page is the dark vitrine floor, the card is a raised panel; the story column keeps paper-coloured type ---- */
html.iso #auth.auth-shell { background: #0f2a31; border: 0; border-radius: 0; box-shadow: none; }
html.iso body:has(#auth:not([hidden])) #intro-bg::after { background: #0f2a31cc; }
html.iso #auth .auth-story, html.iso #auth .auth-story h1 { color: #f1e9d8; text-shadow: none; }
html.iso #auth .auth-story-lead, html.iso #auth .auth-story-features p { color: #d6dedb; }
html.iso #auth .auth-story-kicker { color: #e6bf62; font-size: 13px; letter-spacing: .02em; text-transform: none; }
html.iso #auth .auth-story-kicker::before { background: #d9ae4a; }
html.iso #auth .auth-story-features li { border-top-color: #f1e9d82e; }
html.iso #auth .auth-story-features li > span { color: #e6bf62; }
html.iso #auth .auth-card { background: var(--surface); border: 1px solid var(--border-soft); border-image: none; border-radius: 14px; box-shadow: var(--shadow-panel); color: var(--ink); }
html.iso #auth .auth-brand-name { color: var(--ink); }
html.iso #auth .auth-card-promise, html.iso #auth .auth-card-footer p, html.iso #auth .auth-social-divider { color: var(--muted); }
html.iso #auth form label { color: var(--ink); }
html.iso #auth form label .hint { color: var(--muted); }
html.iso #auth .auth-tabs { border: 0; border-image: none; border-radius: 10px; background: var(--surface-inset); }
html.iso #auth .auth-tabs button { border: 0; border-image: none; border-radius: 8px; background: transparent; color: var(--muted); }
html.iso #auth .auth-tabs button.on { border: 0; border-image: none; background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 -3px 0 var(--focus); }
@media (hover: hover) { html.iso #auth .auth-tabs button:hover:not(.on) { background: var(--surface-raised); } }
html.iso #auth .auth-guest button { border: 1px solid var(--border); border-image: none; border-radius: 8px; background: var(--btn-beige); color: var(--ink); }
html.iso #auth form input { border: 1px solid var(--border); border-image: none; border-radius: 8px; background: var(--surface-inset); color: var(--ink); }
html.iso #auth form button[type=submit] { border: 1px solid #e08a68; border-image: none; border-radius: 8px; background: #bd502a; color: #fff8ee; }
@media (hover: hover) { html.iso #auth form button[type=submit]:hover:enabled { filter: none; background: #a9441f; } }
html.iso #auth form button[type=submit]:active:enabled { border-image: none; filter: none; background: #94391a; }
html.iso #auth .auth-verify-actions button[type=button] { border: 1px solid var(--border); border-image: none; border-radius: 8px; background: var(--btn-beige); color: var(--ink); }
html.iso #auth .auth-form-error { background: var(--btn-danger-bg); border-color: #c75a33; color: #ffb9a3; }
html.iso #auth .auth-social-divider::before, html.iso #auth .auth-social-divider::after { background: var(--border-soft); }
html.iso #auth .register-consent a, html.iso #auth .auth-social-terms a { color: #7fd6c4; }
html.iso #auth .auth-card-footer { border-top-color: var(--border-soft); }
html.iso #auth .auth-card-footer .auth-store { background: rgba(255, 255, 255, .06); border-color: var(--border-soft); color: var(--ink); }
html.iso #auth .auth-provider { border-radius: 8px; }
html.iso #auth .auth-provider-steam { border-color: var(--border); }
html.iso #auth .auth-provider-apple { border-color: var(--border); }
html.iso #auth .lang-switch .lang-btn, html.iso #auth .lang-compact button { border-radius: 8px; }

/* ---- loading chip (#loading): dark card, the mark, and a thin çini line that sweeps while the map streams in ---- */
html.iso #loading { flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 14px 20px 18px; min-width: 190px; border-radius: 14px; font-weight: 600; position: fixed; }
html.iso #loading .spin { display: none; }
html.iso #loading::before { content: ''; flex: none; width: 30px; height: 30px; background: url('/brand-mark.svg') center / contain no-repeat; }
html.iso #loading::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: #0d242a linear-gradient(90deg, transparent, #36a89c 40%, #5fd0c3 60%, transparent) 0 0 / 40% 100% no-repeat;
  animation: iso-loading-sweep 1.4s ease-in-out infinite;
}
@keyframes iso-loading-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { html.iso #loading::after { animation: none; background-size: 100% 100%; background-image: linear-gradient(90deg, #36a89c55, #36a89c55); } }

/* ---- intro / away / help / "Yenilikler" cards and the coach tip: dark panels, the 9-slice beige buttons flattened, gold instead of amber ---- */
html.iso :is(#intro, #away, #help, #whats-new) { background: rgba(8, 24, 30, .62); }
html.iso :is(.help-card, .news-card, .glass.help-card, .glass.news-card) { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; }
html.iso .intro-card h3, html.iso .help-card h4, html.iso .away-card h4 { color: var(--ink); }
html.iso .intro-card p, html.iso .away-events, html.iso .away-tips p { color: var(--text); }
html.iso .intro-card .dots .dot { background: #f1e9d83d; }
html.iso .intro-card .dots .dot.on { background: var(--accent); }
html.iso .intro-card button { border: 1px solid var(--border); border-image: none; border-radius: 8px; background: var(--btn-beige); color: var(--ink); }
html.iso :is(#intro, #away) .intro-card button[data-primary], html.iso #away .away-card .row2 button[data-primary]:enabled { /* #intro/#away: the first-round button group carries an ID in its :is(), so this needs one too */ background: #bd502a; border-color: #e08a68; color: #fff8ee; box-shadow: none; }
@media (hover: hover) {
  html.iso .intro-card button:hover { filter: none; background: var(--surface-selected); }
  html.iso :is(#intro, #away) .intro-card button[data-primary]:hover:enabled, html.iso #away .away-card .row2 button[data-primary]:hover:enabled { background: #a9441f; }
}
html.iso .away-card .row2 { background: var(--surface); }
html.iso .away-card .row2 button { background: var(--btn-beige); border-color: var(--border); box-shadow: none; }
html.iso .away-hero-wrap { background: #0f2a31; border-radius: 10px; }
html.iso .away-village { background: linear-gradient(transparent, #0a1c22ed); color: var(--ink); }
html.iso .away-resource { background: var(--surface-inset); border-color: var(--border-soft); border-radius: 10px; }
html.iso .away-count-track { background: #0d242a; }
html.iso .away-count-bar { background: #36a89c; }
html.iso .away-chart-row.bad .away-count-bar { background: #c75a33; }
html.iso :is(.help-next, .away-next) { background: var(--warning-surface); border-color: #d9ae4a66; border-radius: 10px; }
html.iso .help-key kbd { background: var(--surface-inset); color: var(--ink); border-color: var(--border); }
html.iso #tip { background: var(--surface-raised); border: 1px solid #d9ae4a; border-radius: 14px; }
html.iso #tip .tip-kicker { color: #e6bf62; text-transform: none; letter-spacing: .02em; }
html.iso #tip .tip-actions button { background: var(--btn-beige); border-color: var(--border); }
html.iso #tip .tip-actions button.primary { background: #bd502a; border: 1px solid #e08a68; color: #fff8ee; box-shadow: none; }
html.iso #tip .tip-actions button.primary small { color: #fff8ee; }
html.iso #tip-spot { border-color: #d9ae4a; box-shadow: 0 0 0 4px #d9ae4a55; }
html.iso #tip-dim { background: rgba(8, 24, 30, .5); }
html.iso #labels .coach-bubble { border-color: #d9ae4a; box-shadow: 0 0 0 2px #d9ae4a66, 0 2px 8px -1px #0a1c22cc; }
html.iso #coach-ring { border-color: #d9ae4a; box-shadow: 0 0 0 3px #d9ae4a55; }
html.iso #coach-bubble { background: var(--surface); color: var(--ink); border: 1px solid #d9ae4a; border-radius: 10px; box-shadow: var(--shadow-panel); }

/* ---- native dialogs: backdrop, account delete / chat report, landmark (himaye) card, maker card ---- */
html.iso dialog::backdrop { background: rgba(8, 24, 30, .66); backdrop-filter: none; }
html.iso :is(dialog.village-event-dialog, dialog.era-ceremony, #account-delete-dialog, #chat-report-dialog, dialog.maker-card) { background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-modal); }
html.iso :is(#account-delete-dialog, #chat-report-dialog) h2 { color: var(--ink); }
html.iso .landmark-card { background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); box-shadow: var(--shadow-modal); }
html.iso .landmark-card a { color: #7fd6c4; }
html.iso .landmark-himaye { color: var(--ink); border-block-color: var(--border-soft); }
html.iso .landmark-himaye .hint { color: #f6a084; }
html.iso .landmark-himaye .seg button.on { background: var(--surface-selected); border-color: var(--focus); }
html.iso .crossing-menu .crossing-closed, html.iso .vakif-short { color: var(--bad); }
html.iso .vakif-work { border-top-color: var(--border-soft); }
html.iso .crossing-armies th, html.iso .crossing-armies td { border-bottom-color: var(--border-soft); }
html.iso .maker-card .maker-body { border-top-color: #bd502a; }
html.iso .maker-card .maker-label { color: var(--muted); text-transform: none; letter-spacing: .02em; font-size: 13px; }
html.iso dialog.maker-card a.maker-open { background: #bd502a; color: #fff8ee; border-radius: 8px; }
@media (hover: hover) { html.iso dialog.maker-card a.maker-open:hover { background: #a9441f; } }

/* ---- guest bar ---- */
html.iso #guest-bar #guest-signup { border: 1px solid #e08a68; background: #bd502a; color: #fff8ee; box-shadow: none; }
@media (hover: hover) { html.iso #guest-bar #guest-signup:hover { background: #a9441f; } }
html.iso #pick #geo-form #geo-search-btn { background: var(--btn-beige); border-color: var(--border); color: var(--ink); } /* search is secondary: "Köyü kur" is the one primary action */
@media (hover: hover) { html.iso #pick #geo-form #geo-search-btn:hover:enabled { background: var(--surface-selected); } }