:root {
  --glass: rgba(250, 246, 241, 0.92);
  --line: rgba(139, 90, 43, 0.15);
  --text: #4a4a4a;
  --ink: #2e2013;       /* dark ink text on light parchment/beige surfaces */
  --muted: #6b5033;     /* darkened for AA contrast on light surfaces */
  --accent: #d4a574;
  --even: #8a5a1f;      /* "even odds" ink tone, readable on light surfaces */
  --good: #2f6e1f;      /* darkened for AA contrast on light surfaces */
  --bad: #8a3322;       /* darkened for AA contrast on light surfaces */
  --blue: #6f7d94;
  --btn-brown: #6b4a2c; /* unused now that all buttons use the light beige style below; kept so nothing else breaks if referenced */
  --btn-beige: #d9c398;
  --btn-grey: #d8d8d8;
  --btn-danger: #7a2f22; /* unused, see --btn-danger-bg */
  --btn-danger-bg: #e8c2b8; /* light red button fill so danger buttons still get dark text, not white on dark red */
  --btn-muted: #503a22;    /* darker than --muted, for small subtext that sits on a light button */
  --lbl-bg: rgba(250, 246, 241, 0.94); /* light parchment for map labels/hover chip, replacing the old dark-navy+white style */
  --lbl-border: rgba(46, 32, 19, 0.55);
  --bar-h: 72px; /* bottom action bar height, excluding safe-area inset */
  --top-h: 0px; /* measured height of #top (resource bar); JS keeps this in sync so #quest-tracker clears it */
  --quest-h: 0px; /* measured height of #quest-tracker (0 when hidden); JS keeps this in sync so mobile #panel/#toasts clear it too */
  --alerts-h: 0px; /* measured height of #alerts (0 when empty); JS keeps this in sync so #status-pop stacks below it instead of overlapping */
  --online-h: 0px; /* measured height of #online-chip (0 when hidden); JS keeps this in sync so #alerts stacks below it instead of overlapping, same pattern as --top-h/--quest-h/--alerts-h */
  --alert-bad: #7a2f22; --alert-warn: #8a5a1f; /* dark ink tones for the top-right alert stack, on light chip backgrounds */

  /* One z-index scale for the whole HUD, low to high. Every positioned overlay below references
     one of these instead of a bare number, so the stacking order is defined once and every layer's
     relationship to every other layer is visible at a glance right here. */
  --z-action-card: 5;   /* building/terrain selection card */
  --z-bar: 6;           /* bottom action bar */
  --z-quest: 6;         /* top-left quest tracker */
  --z-alerts: 7;        /* top-right alert stack (raid/starvation/campaign) */
  --z-coach-ring: 8;    /* tutorial coach marks */
  --z-status-pop: 8;    /* "⋯ Durum" popover */
  --z-announce: 9;      /* admin announcement banner */
  --z-coach-bubble: 9;
  --z-toasts: 10;       /* transient toasts */
  --z-panel: 11;        /* docked window (#panel), above toasts so a toast never covers its close button */
  --z-chrome: 12;       /* persistent floating chrome: online chip/list, chat toggle/panel — above the docked window so their own popovers still work */
  --z-modal: 20;        /* full-screen dialogs: intro carousel, away report */
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #dfe8ec; cursor: url('ui/cursorGauntlet_bronze.png') 8 8, auto; }
#app canvas { display: block; touch-action: none; cursor: url('ui/cursorGauntlet_bronze.png') 8 8, auto; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

.glass, #top, #panel, #chat, .toast, #loading, #status {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 8px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.15);
  border-image-source: url('ui/panel_brown.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
}
.glass { border-image: none; border: 2px solid #8b6f47; }

/* pick / auth screens */
#pick, #auth {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px;
  width: min(360px, calc(100vw - 28px)); padding: 16px 18px; border-radius: 0;
  max-height: calc(100vh - max(14px, env(safe-area-inset-top)) - 14px); overflow-y: auto;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 8px solid transparent;
  border-image-source: url('ui/panel_brown.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.15);
}
/* Auth screen only (not #pick, which sits over the live map): on a wide desktop viewport the
   top-left-pinned card left a large empty pale-blue void filling the rest of the screen
   (playtest). Centered/framed here instead, above the 760px mobile breakpoint; unchanged below it. */
@media (min-width: 761px) {
  #auth { top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: min(calc(100vh - 48px), 640px); }
}
/* Pre-login intro video (video/ Remotion render). Sits under #auth by DOM order, so no z-index. */
#intro-bg { position: fixed; inset: 0; background: #e9dcc6; }
#intro-bg video { width: 100%; height: 100%; object-fit: cover; }
#intro-skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px;
  border: 1px solid var(--lbl-border); border-radius: 8px; background: var(--lbl-bg); color: var(--ink); font: 600 13px 'Outfit', sans-serif; cursor: pointer; }
#auth:not([hidden]) { animation: auth-in .5s ease-out; }
@keyframes auth-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #auth:not([hidden]) { animation: none; } }
#pick h1, #auth h1 { margin: 2px 0 6px; font-size: 25px; letter-spacing: -0.5px; font-family: 'Cinzel', 'Garamond', serif;
  color: #8b5a2b; }
#pick p, #auth p { margin: 0 0 10px; line-height: 1.5; color: var(--text); font-size: 13px; }
#pick .kicker, #auth .kicker { color: var(--even); text-transform: uppercase; letter-spacing: 2px; font-size: 10.5px; font-weight: 700; margin: 0; }
#pick .hint { color: var(--muted); font-size: 11.5px; margin: 0; }
#pick .coords { color: var(--ink); font-weight: 600; }
/* founding terrain-diversity summary/warning (§ onPickClick/sampleFoundingTerrain) */
#pick-terrain { margin: 6px 0 !important; }
#pick .hint.warn { color: var(--alert-warn); }
#pick .hint.bad { color: var(--bad); }
#pick-confirm { border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 10px; }
#pick label, #auth label { display: block; font-size: 12px; color: var(--muted); }
#pick input, #auth input { display: block; width: 100%; margin: 5px 0 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(139, 90, 43, 0.35); background: rgba(255, 255, 255, 0.6); color: var(--ink); font: inherit; }
#pick input:focus, #auth input:focus { outline: 2px solid var(--accent); }
#auth .auth-explain { margin: 0 0 10px; padding: 0 0 0 18px; color: var(--text); font-size: 12.5px; line-height: 1.5; }
#auth .auth-explain li { margin: 2px 0; }
#auth .auth-tabs { margin-bottom: 10px; }
#pick-import { margin-bottom: 12px; }
#pick-import button { width: 100%; }
.geo-search { position: relative; }
#geo-results { list-style: none; margin: -6px 0 10px; padding: 0; max-height: 160px; overflow-y: auto;
  border: 1px solid rgba(139, 90, 43, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.9); }
#geo-results li { padding: 6px 10px; font-size: 12px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); }
#geo-results li:last-child { border-bottom: none; }
#geo-results li:hover { background: rgba(139, 90, 43, 0.12); }
#geo-results li.empty { color: var(--muted); cursor: default; }
#geo-results li.empty:hover { background: none; }
#pick button[type=submit], #auth button[type=submit], #pick-import button {
  width: 100%; padding: 10px; border: 8px solid transparent; border-radius: 0; font-weight: 700; font-size: 14px;
  color: var(--ink); box-shadow: none;
  border-image-source: url('ui/buttonLong_beige.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  background: var(--btn-beige);
  cursor: pointer;
}
#pick button[type=submit]:active, #auth button[type=submit]:active, #pick-import button:active { border-image-source: url('ui/buttonLong_beige_pressed.png'); }

/* top bar */
#top {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; flex-wrap: wrap;
}
#top-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
#nav button { border: 8px solid transparent; border-radius: 0; padding: 6px 10px; font-weight: 600; font-size: 12px;
  color: var(--ink); white-space: nowrap;
  border-image-source: url('ui/buttonLong_beige.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  background: var(--btn-beige);
  min-width: 96px;
}
#nav button:hover { filter: brightness(1.05); }
#nav button:active { border-image-source: url('ui/buttonLong_beige_pressed.png'); }
#nav { position: fixed; top: max(64px, calc(env(safe-area-inset-top) + 52px)); left: 10px; width: min(280px, calc(100vw - 20px));
  padding: 10px 12px; border-radius: 0;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 8px solid transparent;
  border-image-source: url('ui/panel_brown.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
}
#nav p { margin: 5px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
#nav .row2 { display: flex; gap: 6px; }
#nav .row2 button { flex: 1; }
.lbl.click { pointer-events: auto; cursor: pointer; }
.lbl.army { background: linear-gradient(135deg, #dde3ea, #cbd4de); border-color: rgba(50, 65, 84, 0.5); font-weight: 600; }
#nav .seg { margin: 0 0 8px; }
#nav .seg button { padding: 4px 8px; background: rgba(139, 90, 43, 0.1); box-shadow: none; color: var(--ink); }
#nav .seg button.on { background: var(--accent); color: var(--ink); }
#nav > button, #nav .row2 { margin-top: 6px; }
#nav > button { width: 100%; }
#nav button:disabled { opacity: 0.45; }
#top .brand { font-size: 15px; white-space: nowrap; font-family: 'Cinzel', serif; font-weight: 600; }
#top .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: transparent; border: 6px solid transparent; padding: 6px 9px; border-radius: 0; font-weight: 600; font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink);
  border-image-source: url('ui/panelInset_beige.png');
  border-image-slice: 6;
  border-image-repeat: stretch;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}
.chip small { color: var(--good); font-weight: 400; margin-left: 2px; }
.chip small.neg { color: var(--bad); }

/* status cluster: secondary top-bar info (season, winter warning, builds, Cuma Pazarı, weather/
   time) folded into one tappable chip instead of each getting its own bar slot, so the bar
   doesn't overflow/wrap once several are active at once. Popover lists them stacked. */
.status-chip { border: 6px solid transparent; }
.status-chip small { color: var(--ink); background: rgba(139, 90, 43, 0.18); border-radius: 8px; padding: 0 4px; margin-left: 3px; font-weight: 700; }
#status-pop {
  /* Stacks below #alerts (same top-right corner, --alerts-h synced by JS) instead of overlapping
     it — an active raid/starvation alert must never be covered by a tapped-open status popover. */
  position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + var(--alerts-h) + 16px); right: 10px; z-index: var(--z-status-pop);
  display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px;
  width: min(260px, calc(100vw - 20px));
  background: var(--glass); border: 1.5px solid var(--lbl-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
#status-pop .chip { display: flex; width: 100%; white-space: normal; text-align: left; }

.panel-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(139, 90, 43, 0.15); color: var(--ink); font-size: 12px;
  line-height: 1; cursor: pointer; z-index: 1; }
.panel-close:hover { background: rgba(139, 90, 43, 0.28); }

/* docked window — ONE window above the bottom action bar, replacing the old right-side panel;
   toggled by the bar buttons (see #bar below), Esc closes it. */
#panel {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--z-panel); /* above #toasts: a stacked toast must never cover the close button */
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 10px);
  width: min(400px, calc(100vw - 20px)); max-height: min(58vh, 560px);
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
}
#panel .win-head { display: flex; align-items: center; gap: 8px; padding: 9px 34px 9px 12px; border-bottom: 1px solid var(--line);
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; color: var(--ink); }
#panel .win-head img { width: 20px; height: 20px; image-rendering: pixelated; }
#panel .body { flex: 1; overflow-y: auto; padding: 10px; }
.rank-badge { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(139, 90, 43, 0.08); }
.rank-badge img { width: 22px; height: 22px; image-rendering: pixelated; }
.rank-badge b { font-family: 'Cinzel', serif; font-size: 13px; color: var(--ink); }
.rank-badge small { color: var(--muted); margin-left: auto; }

/* bottom MMORPG action bar */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; justify-content: center; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(20, 12, 5, 0.55), rgba(20, 12, 5, 0));
}
.bar-btn {
  position: relative; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 10px;
  background-image: url('ui/kibyra/slot-frame.png'); background-size: 100% 100%; image-rendering: pixelated;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.bar-btn.on { filter: brightness(1.25) saturate(1.2); transform: translateY(-3px); }
.bar-btn:active { filter: brightness(0.92); }
.bar-btn img { width: 26px; height: 26px; image-rendering: pixelated; margin-top: -6px; }
.bar-btn .key { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; color: var(--ink);
  background: var(--lbl-bg); border: 1px solid var(--lbl-border); border-radius: 5px; padding: 0 3px; line-height: 1.4; }
.bar-btn .lbl { font-size: 8.5px; font-weight: 700; color: var(--ink); background: var(--lbl-bg);
  border: 1px solid var(--lbl-border); border-radius: 5px; padding: 0 4px; margin-top: 1px; line-height: 1.4; }
.bar-btn .badge { position: absolute; top: -5px; right: -5px; background: var(--btn-danger-bg); color: var(--bad);
  border: 1.5px solid rgba(46, 32, 19, 0.55); border-radius: 8px; font-size: 9.5px; font-weight: 700;
  padding: 1px 4px; line-height: 1.3; white-space: nowrap; }
.bar-btn .badge.warn { background: var(--btn-beige); color: var(--ink); } /* --even on --btn-beige was only 3.43:1, below the 4.5:1 floor */
@media (max-width: 480px) {
  .bar-btn { width: 50px; height: 50px; }
  .bar-btn img { width: 22px; height: 22px; }
  .bar-btn .lbl { display: none; }
}

/* server admin announcement: dismissible banner, top-center, above everything else */
#announce {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: var(--z-announce);
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px;
  max-width: min(480px, calc(100vw - 24px));
  background: var(--lbl-bg); border: 1.5px solid var(--lbl-border); color: var(--ink);
  font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
#announce button { flex: none; padding: 3px 8px; min-height: 0; border-radius: 6px;
  border: 1px solid rgba(139, 90, 43, 0.35); background: var(--btn-beige); color: var(--ink); }

/* top-right alert stack: raid countdowns, starvation, campaigns returning.
   Same --top-h offset as #quest-tracker so it clears #top instead of sitting under it. */
#alerts {
  /* Stacks below #online-chip (same top-right corner, --online-h synced by JS) instead of
     overlapping it — the always-on online count must never bury a raid/starvation alert, or vice versa. */
  position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + var(--online-h) + 8px); right: 10px; z-index: var(--z-alerts);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: min(260px, calc(100vw - 20px));
}
#alerts .alert { background: var(--lbl-bg); border: 1.5px solid var(--lbl-border); border-radius: 8px;
  padding: 5px 9px; font-size: 11.5px; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: pop .25s ease-out; }
#alerts .alert.bad { color: var(--alert-bad); box-shadow: inset 3px 0 0 var(--alert-bad), 0 4px 12px rgba(0, 0, 0, 0.25); }
#alerts .alert.warn { color: var(--alert-warn); box-shadow: inset 3px 0 0 var(--alert-warn), 0 4px 12px rgba(0, 0, 0, 0.25); }
#alerts .alert.good { color: var(--good); box-shadow: inset 3px 0 0 var(--good), 0 4px 12px rgba(0, 0, 0, 0.25); }
#alerts .alert button { display: inline-block; margin-left: 6px; padding: 2px 7px; min-height: 0; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; border: 1px solid rgba(139, 90, 43, 0.35); background: var(--btn-beige); color: var(--ink); }

/* top-left quest tracker: current tutorial step + claim button, always visible in the village view.
   top offset clears #top (the resource bar, only shown in-village) via --top-h, which JS keeps in
   sync with its live rendered height so the two never overlap regardless of how many chips wrap. */
#quest-tracker {
  position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px); left: 10px; z-index: var(--z-quest);
  width: min(230px, calc(100vw - 20px)); padding: 8px 10px; border-radius: 10px;
  background: var(--glass); border: 1.5px solid var(--lbl-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
#quest-tracker b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
#quest-tracker .qname { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 2px 0 4px; }
#quest-tracker .qdesc { display: block; color: var(--text); margin-bottom: 3px; }
#quest-tracker button { width: 100%; padding: 5px; font-size: 11.5px; }
#quest-tracker .ghost { background: rgba(139, 90, 43, 0.1); border: 0; border-image: none; color: var(--muted); margin-top: 4px; }
#quest-tracker .coach-skip { background: transparent !important; border: 0 !important; border-image: none !important;
  color: var(--muted) !important; font-size: 10.5px !important; padding: 3px !important; min-height: 0 !important;
  text-decoration: underline; }

/* coach marks: pulsing ring + speech bubble guiding a new player through the tutorial steps.
   Both are pointer-events:none so they can never block a click on the thing they're pointing at. */
#coach-ring { position: fixed; z-index: var(--z-coach-ring); pointer-events: none; transform: translate(-50%, -50%);
  border: 3px solid #f5a524; border-radius: 50%; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.35);
  animation: coachPulse 1.4s ease-in-out infinite; }
#coach-bubble { position: fixed; z-index: var(--z-coach-bubble); pointer-events: none; transform: translate(-50%, -100%);
  max-width: min(220px, calc(100vw - 24px)); padding: 7px 10px; border-radius: 10px;
  background: var(--lbl-bg); border: 1.5px solid var(--lbl-border); color: var(--ink);
  font-size: 12px; font-weight: 600; line-height: 1.4; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
#coach-bubble.below { transform: translate(-50%, 10px); }
#coach-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--lbl-bg); }
#coach-bubble.below::after { top: -7px; bottom: auto; border-top-color: transparent; border-bottom-color: var(--lbl-bg); }
#labels .coach-bubble { border-color: #f5a524; box-shadow: 0 0 0 2px rgba(245, 165, 36, 0.45), 0 4px 14px rgba(0, 0, 0, 0.3); }
@keyframes coachPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* first-run "Nasıl oynanır" carousel */
#intro, #away { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  background: rgba(20, 12, 5, 0.45); }
.intro-card { position: relative; width: min(360px, calc(100vw - 32px)); padding: 22px 18px 16px; text-align: center; }
.intro-icon { font-size: 38px; margin-bottom: 8px; }
.intro-card h3 { margin: 0 0 8px; font-family: 'Cinzel', serif; color: var(--ink); font-size: 16px; }
.intro-card p { margin: 0 0 14px; color: var(--text); font-size: 13px; line-height: 1.5; }
.intro-card .dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.intro-card .dots .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(139, 90, 43, 0.3); }
.intro-card .dots .dot.on { background: var(--accent); }
.intro-card .row2 { display: flex; gap: 8px; margin-top: 4px; }
.intro-card .row2 button, .intro-card .row2 span { flex: 1; }
.intro-card button { padding: 8px; border-radius: 0; font-weight: 600; border: 8px solid transparent; cursor: pointer;
  border-image-source: url('ui/buttonLong_beige.png'); border-image-slice: 8; border-image-repeat: stretch;
  background: var(--btn-beige); color: var(--ink); }
.intro-card button:hover { filter: brightness(1.05); }
/* "Sen yokken" report card: same parchment/glass card as .intro-card, left-aligned (a list reads
   better than centered) and a bit wider for the event list. */
.away-card { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; text-align: left; }
.away-card h3 { text-align: center; }
.away-card .away-dur { text-align: center; font-weight: 600; color: var(--ink); }
.away-events { margin: 4px 0 12px; padding: 0 0 0 18px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.away-events li { margin-bottom: 4px; }
.away-tips p { margin: 4px 0; font-size: 12.5px; color: var(--ink); font-weight: 600; }
#panel h4 { margin: 13px 2px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-family: 'Cinzel', serif; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 5px; margin-bottom: 8px; }
.stats div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 6px; text-align: center; }
.stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.stats small, .row small { color: var(--muted); font-size: 11px; }
.row small.good { color: var(--good); font-weight: 600; } /* Cuma Pazarı banner in the Pazar row */
.row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.row.sel { border-color: var(--accent); background: rgba(245, 165, 36, 0.1); }
.row.flash { animation: blink 0.5s ease-in-out 3 alternate; } /* Sur-nudge scroll-to highlight, see renderAlerts()'s open-sur handler */
.row .ico { font-size: 18px; width: 24px; text-align: center; }
.row .grow { flex: 1; min-width: 0; }
.row .grow small { display: block; }
.row em { font-style: normal; font-size: 10px; background: var(--accent); color: #111; padding: 1px 5px; border-radius: 6px; margin-left: 4px; font-weight: 700; }
.row button, .danger, .seg button {
  border: 8px solid transparent; border-radius: 0; padding: 6px 9px; font-weight: 600; font-size: 12px;
  color: var(--ink); text-align: center; transition: transform .1s, filter .2s;
  border-image-source: url('ui/buttonLong_beige.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  background: var(--btn-beige);
}
.row button small { display: block; font-weight: 400; font-size: 10px; color: var(--btn-muted); }
.row button:active:not(:disabled) { border-image-source: url('ui/buttonLong_beige_pressed.png'); }
.row button:hover:not(:disabled) { filter: brightness(1.05); }
button:active:not(:disabled) { filter: brightness(0.92); }
button:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6) !important; border-image-source: url('ui/buttonLong_grey.png') !important; background: var(--btn-grey) !important; color: var(--ink) !important; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 1px var(--accent); }
button { min-height: 34px; }
.stepper button { width: 26px; height: 26px; border: 6px solid transparent;
  border-image-source: url('ui/buttonSquare_beige.png');
  border-image-slice: 6;
  border-image-repeat: stretch;
  background: var(--btn-beige);
  color: var(--ink);
  padding: 0;
  font-weight: 700;
  font-size: 14px;
}
.stepper button:active { border-image-source: url('ui/buttonSquare_beige_pressed.png'); }
.row button.ghost { background: rgba(139, 90, 43, 0.12); color: var(--ink); padding: 6px 8px; border: 0; border-radius: 8px; border-image: none; }
.row .col2 { display: flex; flex-direction: column; gap: 4px; }
.row .col2 button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.stepper { display: flex; align-items: center; gap: 5px; }
.stepper b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.danger { width: 100%; margin-top: 10px; background: var(--btn-danger-bg); color: var(--bad); padding: 8px; }
.seg { display: flex; align-items: center; gap: 5px; margin: 3px 0 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.seg button { background: rgba(139, 90, 43, 0.1); color: var(--ink); padding: 5px 8px; }
.seg button.on { background: var(--accent); color: var(--ink); }
.seg span { margin-left: auto; color: var(--text); }
.pow { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.pow.weak { color: var(--good); } .pow.even { color: var(--even); } .pow.strong { color: var(--bad); }
.armies, .log { list-style: none; padding: 0; margin: 0 0 8px; }
.armies li { padding: 6px 8px; border-radius: 8px; background: rgba(96, 165, 250, 0.12); margin-bottom: 4px; font-size: 12.5px; }
.armies li.bad { background: rgba(122, 47, 34, 0.14); color: var(--bad); animation: blink 1s infinite alternate; }
.log li { padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; }
.log li small { display: block; color: var(--muted); font-size: 10.5px; }
.hint { color: var(--text); font-size: 12px; line-height: 1.5; margin: 0 2px 10px; }
.empty { color: var(--muted); text-align: center; padding: 14px 0; }
.foot { color: var(--muted); font-size: 12px; text-align: center; }

/* world labels — light parchment chips with dark ink text so they read over the 3D map/sky in any light */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* Scoped to #labels (the only place these classes are ever appended, see main.js's label()/
   floatText()) so the absolute-position + light pill here can never leak into an unrelated
   ".lbl" reused elsewhere, e.g. the bottom bar's button captions (.bar-btn .lbl). */
#labels .lbl, #labels .float { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
#labels .lbl { padding: 3px 7px; border-radius: 8px; font-size: 11.5px; background: var(--lbl-bg); color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); border: 1.5px solid var(--lbl-border); font-weight: 600; }
.lbl.village { background: linear-gradient(135deg, #f4ecd9, #e6d9bd); border-color: rgba(46, 32, 19, 0.6); font-size: 13px; padding: 4px 10px; }
.lbl.rival, .lbl.site, .lbl.player { pointer-events: auto; cursor: pointer; transition: border-color .2s; }
.lbl.rival { display: flex; gap: 6px; align-items: center; }
.lbl.rival span { font-weight: 700; }
.lbl.player { display: flex; gap: 6px; align-items: center; border-color: rgba(47, 111, 214, 0.6); }
.lbl.player b { color: var(--blue); }
.lbl.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.weak { color: var(--good); } .strong { color: var(--bad); } .cd { color: var(--muted); }
/* dark ink text with a light parchment halo (faux-stroke via layered text-shadow) so it stays readable over any map tile */
.float { font-weight: 700; font-size: 15px; color: var(--ink);
  text-shadow: -1.5px -1.5px 0 #faf3e6, 1.5px -1.5px 0 #faf3e6, -1.5px 1.5px 0 #faf3e6, 1.5px 1.5px 0 #faf3e6,
    0 -1.5px 0 #faf3e6, 0 1.5px 0 #faf3e6, -1.5px 0 0 #faf3e6, 1.5px 0 0 #faf3e6, 0 2px 5px rgba(0, 0, 0, 0.3); }
.float.good { color: var(--good); } .float.bad { color: var(--bad); }

#hover { position: fixed; left: 0; top: 0; pointer-events: none; padding: 4px 8px; border-radius: 8px; font-size: 12px;
  background: var(--lbl-bg); color: var(--ink); border: 1.5px solid var(--lbl-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
#hover.water { box-shadow: inset 3px 0 0 #0284c7, 0 4px 14px rgba(0, 0, 0, 0.25); } #hover.green { box-shadow: inset 3px 0 0 #16803d, 0 4px 14px rgba(0, 0, 0, 0.25); }

#toasts { position: fixed; left: 50%; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); display: flex; flex-direction: column;
  gap: 6px; align-items: center; pointer-events: none; z-index: var(--z-toasts); }
.toast { padding: 8px 13px; border-radius: 10px; font-size: 13px; animation: pop .25s ease-out; transition: opacity .5s, transform .5s;
  max-width: 90vw; pointer-events: auto; display: flex; align-items: center; gap: 8px; }
.toast button { padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid rgba(139, 90, 43, 0.35);
  background: var(--btn-beige); color: var(--ink); flex: none; min-height: 0; }
.toast.good { border-color: rgba(52, 211, 153, 0.5); } .toast.bad { border-color: rgba(248, 113, 113, 0.6); } .toast.warn { border-color: rgba(245, 165, 36, 0.6); }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast-more { cursor: pointer; font-weight: 700; color: var(--even); border-color: rgba(139, 90, 43, 0.4); }
#loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 12px; display: flex; gap: 8px; align-items: center; }
.spin { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
#status { position: fixed; left: 10px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 14px); padding: 6px 10px; border-radius: 10px; display: flex; gap: 6px; align-items: center; font-size: 12px; }
#attrib { position: fixed; left: 8px; bottom: 6px; font-size: 10.5px; color: #334155; background: rgba(255, 255, 255, 0.7); padding: 2px 5px; border-radius: 6px; }
#attrib a { color: inherit; }

/* action card for building selection */
.action-card { position: fixed; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 14px); right: 20px;
  width: min(280px, calc(100vw - 40px)); border-radius: 0; padding: 14px;
  z-index: var(--z-action-card); animation: pop .25s ease-out;
  border: 8px solid transparent;
  border-image-source: url('ui/panel_brown.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.action-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; font-family: 'Cinzel', serif; }
.action-card .desc { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.action-card .row2 { display: flex; gap: 6px; margin-top: 10px; }
.action-card .choices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.action-card .choice { width: 100%; text-align: left; }
.action-card .choice small { display: block; font-weight: 400; font-size: 10px; color: var(--btn-muted); margin-top: 2px; }
.action-card button { flex: 1; padding: 8px; border-radius: 0; font-weight: 600; border: 8px solid transparent; cursor: pointer;
  border-image-source: url('ui/buttonLong_beige.png');
  border-image-slice: 8;
  border-image-repeat: stretch;
  background: var(--btn-beige);
  color: var(--ink);
}
.action-card .confirm { border-image-source: url('ui/buttonLong_beige.png'); background: var(--btn-beige); color: var(--ink); }
.action-card .cancel { opacity: 0.85; }
.action-card .confirm:hover { filter: brightness(1.05); }
.action-card .cancel:hover { filter: brightness(0.95); }

/* hint card for empty jobs */
.hint-card { background: rgba(139, 90, 43, 0.08); border: 2px solid rgba(139, 90, 43, 0.2); padding: 12px; border-radius: 10px;
  margin: 10px 0; }
.hint-card b { display: block; margin-bottom: 6px; font-size: 13px; color: #8b5a2b; }
.hint-card p { margin: 5px 0; color: var(--text); font-size: 12px; }
.hint-card ul { margin: 6px 0; padding-left: 18px; }
.hint-card li { margin: 3px 0; color: var(--text); font-size: 12px; }

/* output badge */
.output { display: inline-block; font-weight: 600; font-size: 11px; padding: 3px 6px; border-radius: 6px; }
.output.producing { background: rgba(111, 168, 87, 0.2); color: var(--good); }
.output.idle { color: var(--muted); }

/* affordability styling */
.row button.affordable { border-image-source: url('ui/buttonLong_beige.png') !important; background: var(--btn-beige); color: var(--ink); opacity: 1; }
.row button.unaffordable { opacity: 0.4; border-image-source: url('ui/buttonLong_grey.png') !important; background: var(--btn-grey); color: var(--ink); }

/* health bars - using Kenney bar sprites */
.bar { display: inline-flex; align-items: center; height: 20px; background-size: cover;
  border-left: url('ui/barBack_horizontalLeft.png') no-repeat;
  border-right: url('ui/barBack_horizontalRight.png') no-repeat;
  background-image: url('ui/barBack_horizontalMid.png');
  position: relative;
  width: 100%;
  max-width: 170px;
}
.bar-fill { height: 20px; position: absolute; top: 0; left: 0; background-size: cover; }
.bar-fill.good { background-image: url('ui/barGreen_horizontalMid.png'); }
.bar-fill.warn { background-image: url('ui/barYellow_horizontalMid.png'); }
.bar-fill.bad { background-image: url('ui/barRed_horizontalMid.png'); }

/* incoming raid emphasis */
li.incoming { background: rgba(168, 95, 71, 0.2) !important; border-radius: 8px !important; padding-left: 10px !important;
  font-weight: 600 !important; color: var(--bad) !important; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes blink { to { background: rgba(122, 47, 34, 0.3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 760px) {
  button { min-height: 44px; }
  .stepper button { width: 40px; height: 40px; }
  #top { right: 10px; gap: 6px; padding: 6px 10px; }
  #top-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  #top .brand { display: none; }
  .chip { font-size: 12px; padding: 7px 9px; min-height: 40px; }
  #attrib { display: none; }
  #quest-tracker { max-width: 46vw; }
  .action-card { bottom: auto; top: 50%; right: 50%; transform: translate(50%, -50%); width: min(280px, calc(100vw - 32px)); }

  /* Bottom sheet: the docked window becomes a full-width sheet resting on the action bar, at the
     same 760px breakpoint as the rest of the mobile treatment (used to only kick in at 400px, so
     phones in the common 400-430px range — iPhone Pro Max, most Android — fell through to the
     desktop centered floating panel instead). max-height is derived, not a fixed vh, so the sheet
     can never grow tall enough to climb past #top/#quest-tracker; JS keeps --top-h/--quest-h in
     sync with their live rendered height (see renderUI() in main.js), same pattern --top-h
     already uses for #quest-tracker/#alerts. */
  #panel { left: 0; right: 0; transform: none; width: 100%; border-radius: 14px 14px 0 0;
    max-height: min(65vh, calc(100vh - var(--bar-h) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - var(--top-h) - var(--quest-h) - 44px)); }

  /* Top-anchored (like #alerts already is), not a fixed distance from the bottom: guarantees
     toasts/status can never land on #top or #quest-tracker, regardless of the bottom sheet's
     actual height or whether it's even open. */
  #toasts, #status { top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + var(--quest-h) + 16px); bottom: auto; }
}

/* Smallest phones only: a few extra cosmetic tweaks on top of the 760px mobile treatment above. */
@media (max-width: 400px) {
  #top { flex-direction: column; gap: 2px; right: 10px; }
  #nav { top: auto; left: 0; position: relative; width: 100%; margin-top: 6px; }
  .chip { font-size: 11px; padding: 6px 8px; }
  #quest-tracker { max-width: 60vw; font-size: 11px; }
}

/* --- online chip/list + chat: independent of #top (visible any time a session is live, not
   just in the 3D village view) ------------------------------------------------------------- */

/* Same top-offset formula as #alerts/#quest-tracker/#status-pop (max(10px,safe) + --top-h + 8px):
   clears #top (the resource bar) once it's showing in the village view instead of sitting on top
   of its rightmost chips — the reported bug. --top-h is 0 outside the village view (pick/auth/
   city), so the chip still sits near the top there, same as before. */
#online-chip { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px); right: 14px; z-index: var(--z-chrome);
  padding: 7px 12px; border-radius: 20px; font-weight: 700; font-size: 12.5px; color: var(--ink);
  background: var(--glass); border: 1.5px solid var(--lbl-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
#online-list { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px + 44px); right: 14px; z-index: var(--z-chrome);
  width: min(280px, calc(100vw - 28px)); max-height: 50vh; overflow-y: auto; padding: 6px;
  background: var(--glass); border: 1.5px solid var(--lbl-border); border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.online-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 12.5px; }
.online-row:hover { background: rgba(139, 90, 43, 0.12); }
.online-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.online-row .dot.on { background: var(--good); }
.online-row small { color: var(--muted); }
.online-row .hint { margin-left: auto; }

#chat-toggle { position: fixed; left: 14px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 14px); z-index: var(--z-chrome);
  width: 44px; height: 44px; border-radius: 50%; font-size: 18px; color: var(--ink);
  background: var(--glass); border: 1.5px solid var(--lbl-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
#chat-toggle .badge, #chat-badge { position: absolute; top: -4px; right: -4px; background: var(--btn-danger-bg); color: var(--bad);
  border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 5px; min-width: 14px; }

/* Same docked-window skin as #panel/#nav (panel_brown.png wood frame, via the shared
   .glass/#top/#panel/#chat/... rule above) instead of a plain thin-border card — chat is a real
   toggleable window, same family as the Köy/İşler/Sefer/Kayıtlar/Ayarlar windows, not a HUD chip. */
#chat { position: fixed; left: 14px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 66px); z-index: var(--z-chrome);
  width: min(320px, calc(100vw - 28px)); max-height: 46vh; display: flex; flex-direction: column;
  padding: 0; border-radius: 12px; overflow: hidden; }
#chat header { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
#chat header button { background: transparent; border: 0; box-shadow: none; border-image: none; color: var(--ink); font-size: 13px; padding: 2px 6px; min-height: 0; }
#chat-lonca-open { margin-left: auto; }
#chat-channels { margin: 0; font-size: 12px; }
#chat-channels button { background: rgba(139, 90, 43, 0.1); color: var(--ink); padding: 4px 8px; font-weight: 700; min-height: 0; }
#chat-channels button.on { background: var(--accent); color: var(--ink); }

/* Lonca tag next to a nick/village name on maps, chat rows and player cards. */
.clan-tag { color: var(--muted); font-weight: 600; }
#lonca-name, #lonca-tag, #lonca-search { display: block; width: 100%; padding: 7px 9px; border-radius: 8px;
  border: 1px solid rgba(139, 90, 43, 0.35); background: rgba(255, 255, 255, 0.6); color: var(--ink); font: inherit; }
#lonca-name { margin-bottom: 4px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 2px 10px; }
.badge-pin { background: var(--btn-beige); color: var(--ink); border-radius: 20px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; }
#chat-messages { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.chat-msg { font-size: 12.5px; color: var(--ink); line-height: 1.4; word-break: break-word; }
.chat-msg b { color: var(--muted); }
.chat-msg small { color: var(--muted); margin-left: 4px; font-size: 10.5px; }
#chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
#chat-form input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(139, 90, 43, 0.35);
  background: rgba(255, 255, 255, 0.6); color: var(--ink); font: inherit; }
/* Same pixel-art beige button skin as every other actionable button in the game (.row button,
   .action-card button, #pick/#auth submits, …) — plain <button> has no skin of its own (see the
   bare `button { font: inherit; color: inherit; cursor: pointer; }` base rule), so without this
   the send button fell back to the browser's default chrome instead of matching the HUD. */
#chat-form button { padding: 8px 12px; border: 8px solid transparent; border-radius: 0; font-weight: 700;
  border-image-source: url('ui/buttonLong_beige.png'); border-image-slice: 8; border-image-repeat: stretch;
  background: var(--btn-beige); color: var(--ink); }
#chat-form button:active { border-image-source: url('ui/buttonLong_beige_pressed.png'); }

@media (max-width: 760px) {
  #online-chip { top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px); right: 10px; padding: 6px 10px; font-size: 11.5px; }
  #online-list { top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px + 40px); right: 10px; }
  /* Bottom sheet: full width, resting on the action bar, same idea as #panel's mobile treatment. */
  #chat-toggle { left: 10px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 10px); }
  #chat { left: 0; right: 0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); width: 100%;
    max-height: 60vh; border-radius: 14px 14px 0 0; }
}