:root { /* Parchment / bronze design system. Semantic aliases below keep legacy views compatible. */ --surface: #faf6ed; --surface-raised: #fffaf0; --surface-inset: #eee3cc; --surface-selected: #e8d29e; --decoration-glow: #dbb76344; --surface-disabled: #e5dfd2; --border: #a38a61; --border-soft: #c9b795; --focus: #245f75; --success-surface: #e3e9d3; --warning-surface: #f5e0a8; --rarity-common: #67583f; --rarity-fine: #32685c; --rarity-rare: #45598f; --rarity-legendary: #775011; --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Cinzel', 'Garamond', serif; --text-xs: .875rem; --text-sm: .9375rem; --text-md: 1rem; --text-lg: clamp(1.1rem, 1rem + .3vw, 1.25rem); --text-xl: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); --text-hero: clamp(1.6rem, 1.2rem + 1vw, 2rem); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-panel: clamp(12px, 1.5vw, 20px); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --shadow-sm: 0 2px 8px #38281120; --shadow-panel: 0 8px 28px #38281130; --shadow-modal: 0 24px 80px #16100b66; --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 450ms; --ease-out: cubic-bezier(.2,.8,.2,1); --touch-target: 44px; --progress-height: 8px; --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 */ --announce-h: 0px; /* measured height (+8px gap) of the open #announce ribbon under #top, 0 when collapsed/hidden; everything else in the top area stacks below it */ --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-local-control: 1; /* close controls within their own stacking context */ --z-labels: 1; --z-hud: 2; --z-intro-bg: 2; --z-map-card: 3; --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-announce: 9; /* admin announcement ribbon (in flow under #top, never over it) */ --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-panel-coach: 12; --z-fx: 13; /* animation overlay (#fx-layer, animations.css): above windows/chrome, below modals */ --z-status-pop: 14; /* HUD-anchored "⋯ Durum"/İnşaat ustaları popover: above windows/chrome; hangs under the HUD, never over it */ --z-bar-menu: 19; /* open navigation menu above transient messages, below dialogs */ --z-modal: 20; /* full-screen dialogs: intro carousel, away report */ --z-info: 30; /* touch explanations */ font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(13px, 12px + .16vw, 15px); 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: calc(max(14px, env(safe-area-inset-top)) + var(--announce-h)); left: 14px; width: min(360px, calc(100vw - 28px)); padding: 16px 18px; border-radius: 0; max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - 14px - var(--announce-h)); 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(100dvh - 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: #88775e; } #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; } .brand-lockup { display: flex; align-items: center; gap: 10px; margin: 3px 0 6px; } .brand-lockup img { flex: none; filter: drop-shadow(0 2px 3px rgba(46, 32, 19, .22)); } #pick .brand-lockup h1, #auth .brand-lockup h1 { margin: 0; color: var(--ink); font-size: clamp(26px, 6vw, 34px); letter-spacing: .02em; } #auth .brand-promise { color: var(--even); font-family: var(--font-display); font-size: 12px; font-weight: 700; margin-bottom: 12px; } #auth .auth-about { margin: -6px 0 10px; font-size: 12px; } #auth .auth-about a { color: var(--even); text-decoration: underline; text-underline-offset: 2px; } #auth .auth-site-links, #auth .auth-legal-links, #pick .pick-site-links { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0 0 10px; font-size: 11.5px; line-height: 1.4; } #auth .auth-site-links a, #auth .auth-legal-links a, #pick .pick-site-links a, #auth .register-consent a { color: var(--even); text-decoration: underline; text-underline-offset: 2px; } #auth .auth-legal-links { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--line); } #auth .register-consent { display: grid; grid-template-columns: 18px 1fr; gap: 3px 8px; align-items: start; margin: 3px 0 12px; font-size: 11.5px; line-height: 1.45; } #auth .register-consent input { grid-row: span 3; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--even); } #auth .register-consent label { color: var(--text); font-size: inherit; cursor: pointer; } #auth .register-consent a { grid-column: 2; } .settings-site-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px 0 18px; } .settings-site-links a { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.35; } .settings-site-links a:hover { border-color: var(--even); background: var(--surface-selected); } .settings-site-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .settings-site-links a:last-child:nth-child(odd) { grid-column: 1 / -1; } .settings-site-links a > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; } .settings-page-icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--surface-inset); color: var(--even); font-size: 17px; } .settings-page-arrow { margin-left: auto; color: var(--even); font-size: 16px; } @media (max-width: 380px) { .settings-site-links { grid-template-columns: 1fr; } } .settings-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px 0 16px; } .settings-provider-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 53px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); } .settings-provider-card b { color: var(--ink); font-size: 13px; } .settings-provider-card a { display: inline-flex; align-items: center; min-height: 32px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-selected); color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; } .settings-provider-card a:hover { background: var(--btn-beige); } .settings-provider-status { color: var(--muted); font-size: 11px; } @media (max-width: 380px) { .settings-providers { grid-template-columns: 1fr; } } #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, #auth .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, #auth .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; } #auth label .hint { display: block; margin-top: 2px; } #auth .auth-language { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 4px; color: var(--muted); } #auth .auth-language select, #panel #language-select { max-width: 190px; padding: 7px 10px; border: 1px solid rgba(172, 121, 65, .48); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 251, 241, .96), rgba(237, 222, 192, .96)); color: var(--ink, #392714); box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 2px 6px rgba(55, 36, 18, .12); font: 600 13px 'Outfit', sans-serif; } #auth .auth-language select:focus-visible, #panel #language-select:focus-visible { outline: 2px solid #b17a3f; outline-offset: 2px; } #pick-import { margin-bottom: 12px; } #pick-import button { width: 100%; } .pick-settings { margin: 5px 0 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-raised); } .pick-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pick-heading .brand-lockup { min-width: 0; } #pick-logout { flex: none; min-height: 36px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--ink); font: 700 11px 'Outfit', sans-serif; cursor: pointer; } #pick-logout:hover { background: var(--surface-inset); } .pick-settings summary { padding: 8px 11px; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; } .pick-settings summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pick-settings[open] summary { border-bottom: 1px solid var(--border-soft); } .pick-settings-body { display: grid; gap: 9px; padding: 10px 11px 12px; } .pick-settings-body label { font-weight: 700; } #pick-language-select { display: block; width: 100%; min-height: 40px; margin-top: 5px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); font: 600 12px 'Outfit', sans-serif; } .pick-settings-actions { display: flex; flex-wrap: wrap; gap: 7px; } .pick-settings-actions button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-inset); color: var(--ink); font-size: 11px; font-weight: 700; } .pick-settings-actions button.danger { color: var(--bad); } #pick .pick-distance { margin: -3px 0 10px; } .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%; } #hud-toggle { display: none; } #nav { position: fixed; top: calc(max(64px, calc(env(safe-area-inset-top) + 52px)) + var(--announce-h)); 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: var(--space-2) 0; color: var(--text); font-size: var(--text-sm); 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 > button, #nav .row2 { margin-top: 6px; } #nav > button { width: 100%; } #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); } /* Each status has its own dock icon above the quest button. The builder detail still opens under its resource-bar chip; status details open beside the dock. */ #status-pop { z-index: var(--z-status-pop); width: min(300px, calc(100vw - 16px)); } #status-pop .status-pop-body { display: flex; flex-direction: column; gap: 5px; } #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: var(--z-local-control); } .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(58dvh, 560px); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } #panel .win-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; 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; min-height: 0; overscroll-behavior: contain; overflow-y: auto; padding: 10px; } .rank-badge { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-soft); } .rank-badge img { width: 22px; height: 22px; image-rendering: pixelated; } .rank-badge b { font-family: var(--font-display); font-size: var(--text-md); 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: 12px; padding: 4px 10px calc(4px + 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: 64px; height: 64px; 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); } /* The guide's "Sıradaki adım" window glow. Set on every viewport (the mobile layout tweaks are separate, under #bar.mobile-guide) so a desktop player gets the same single pointer. Pulses with the same keyframes as every other "recommended control" highlight in the game. */ .bar-btn.guide-next { outline: 3px solid var(--even); outline-offset: 2px; transform: translateY(-4px); box-shadow: 0 0 0 5px var(--decoration-glow), 0 5px 14px #0006; animation: next-pulse 1.6s ease-in-out infinite; } .bar-btn:active { filter: brightness(0.92); } .bar-btn img { width: 29px; height: 29px; image-rendering: pixelated; margin-top: -5px; } .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: 10px; 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-menu-icon { color: var(--ink); font-size: 27px; font-weight: 800; line-height: 1; margin-top: -4px; } .bar-overflow { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); width: min(276px, calc(100vw - 24px)); padding: 8px; display: grid; gap: 6px; border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-panel); } .bar-overflow button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; text-align: left; } .bar-overflow button:hover, .bar-overflow button:focus-visible { background: var(--surface-selected); border-color: var(--border); } .bar-overflow img { width: 30px; height: 30px; image-rendering: pixelated; } .bar-overflow .badge { margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--warning-surface); color: var(--ink); padding: 1px 6px; font-size: 11px; } .bar-overflow .menu-key { margin-left: auto; color: var(--muted); font-size: 12px; } .bar-overflow .badge + .menu-key { margin-left: 0; } .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 */ /* Server admin announcement: a parchment ribbon in the top flow, directly UNDER #top (never over it). Everything else in the top area adds --announce-h (JS-measured) to its offset, so the quest card, online chip and alert stack sit below it instead of colliding. Collapsed state is the .announce-pill button at the top of #alerts. */ #announce { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + var(--top-h) + 8px); left: 50%; transform: translateX(-50%); z-index: var(--z-announce); width: min(640px, calc(100vw - 20px)); max-height: min(48vh, 380px); overflow-y: auto; overscroll-behavior: contain; } /* Opened from a dock button, a quick panel is a popover anchored to the right of its icon (JS sets left/top inline) instead of its old top-corner fixed panel. */ #announce.anchored, #online-list.anchored, #alerts.anchored, #quest-tracker.anchored { left: 0; top: 0; bottom: auto; right: auto; transform: none; } #announce.anchored { width: min(360px, calc(100vw - 20px)); } #announce:not([hidden]) { display: grid; gap: 8px; } .announce-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); box-shadow: inset 0 0 0 3px var(--surface-raised), inset 0 0 0 4px var(--border-soft), inset 4px 0 0 var(--even), var(--shadow-panel); animation: pop .25s ease-out; } .announce-seal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; background: var(--warning-surface); border: 1.5px solid var(--border); } .announce-kicker { margin: 0; font: 700 var(--text-xs)/1.2 var(--font-display); letter-spacing: .06em; color: var(--even); text-transform: uppercase; } .announce-text { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .announce-close { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--radius-sm); flex: none; border: 1px solid var(--border-soft); background: var(--btn-beige); color: var(--ink); font-weight: 700; } #alerts .announce-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 9px; min-height: 30px; border-radius: var(--radius-pill); border: 1.5px solid var(--lbl-border); background: var(--lbl-bg); color: var(--ink); font-size: 11.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); white-space: nowrap; } #alerts .announce-pill.is-unseen { background: var(--warning-surface); border-color: var(--even); } /* 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(--announce-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) + var(--announce-h) + 8px); left: 10px; z-index: var(--z-quest); width: min(300px, calc(100vw - 20px)); padding: 0; background: none; border: 0; box-shadow: none; } #quest-tracker .ui-quest { margin: 0; box-shadow: inset 0 0 0 3px var(--surface-raised), inset 0 0 0 4px var(--border-soft), var(--shadow-panel); } #quest-tracker .ui-quest.is-ready { box-shadow: inset 0 0 0 3px var(--surface-raised), inset 0 0 0 4px var(--even), 0 0 0 3px var(--decoration-glow), var(--shadow-panel); } .quest-tracker-links { display: flex; justify-content: flex-end; margin-top: 2px; } .quest-tracker-links .ui-link { padding: 0 var(--space-2); border-radius: var(--radius-sm) !important; background: var(--lbl-bg) !important; } /* 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 { max-height: calc(var(--visible-h, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; position: relative; width: min(360px, calc(100vw - 32px)); padding: 52px 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(100dvh - 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; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--space-2); margin-block: var(--space-2) var(--space-3); } .stats div { background: var(--surface-inset); border-radius: var(--radius-md); padding: var(--space-2) var(--space-1); text-align: center; } .stats b { display: block; font-size: var(--text-lg); color: var(--ink); font-variant-numeric: tabular-nums; } .stats small { color: var(--muted); font-size: var(--text-xs); } .row small { color: var(--muted); font-size: var(--text-sm); } .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); } /* The folded village status: population, soldiers, guards and wall read as one row of numbers rather than four separate chips. The bits separate on their own so the row never wraps oddly on a narrow HUD. */ .chip-status { display: inline-flex; align-items: center; gap: 6px; } .chip-status .status-bit { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .chip-status .status-bit small { font-size: 10px; margin: 0; } /* The two detail switches under a master switch, aligned to its label rather than its icon. The mixed state needs no rule of its own: the browser draws indeterminate as a dash. */ .row.row-sub { padding-left: 20px; background: none; } .row.row-sub .ico { width: 8px; } .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: 22px; width: 28px; text-align: center; } .row .grow { flex: 1; min-width: 0; } .row .grow small { display: block; } .row em { font-style: normal; font-size: var(--text-xs); background: var(--surface-inset); color: var(--ink); border: 1px solid var(--border-soft); padding: 0 var(--space-1); border-radius: var(--radius-sm); margin-left: var(--space-1); font-weight: 700; font-variant-numeric: tabular-nums; } .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: 500; font-size: var(--text-xs); 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: 1; cursor: default; filter: none; border-image: none; background: var(--surface-disabled); color: var(--muted); } 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 .col2 { display: flex; flex-direction: column; gap: 4px; } .row .col2 button { min-height: 28px; } .row .batch-actions { display: flex; flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-1); } .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: var(--text-sm); } .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: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-soft); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--ink); } .armies li.bad { background: rgba(122, 47, 34, 0.14); color: var(--bad); animation: blink 1s infinite alternate; } .log li { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); line-height: 1.45; color: var(--ink); } .log li small { display: block; color: var(--muted); font-size: var(--text-xs); } .hint { color: var(--text); font-size: var(--text-sm); line-height: 1.5; margin: 0 2px var(--space-3); } .empty { color: var(--muted); text-align: center; padding: 14px 0; } .foot { color: var(--muted); font-size: var(--text-sm); 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; } #labels .lbl.landmark { pointer-events: auto; cursor: pointer; padding: 3px 5px; min-width: 23px; text-align: center; border-color: #987443; background: #f5e8c7; font-size: 13px; } #labels .lbl.landmark.locked { color: #897e72; background: #ddd8cb; border-style: dashed; opacity: .7; } .landmark-card { max-width: min(420px, calc(100vw - 28px)); max-height: min(80vh, 700px); overflow: auto; border: 1px solid #8d714b; border-radius: 12px; padding: 20px; background: #f7f0df; color: #352a20; box-shadow: 0 16px 45px #0008; } .landmark-card::backdrop { background: #0008; } .landmark-card h2 { margin: 0 60px 12px 0; font-size: 20px; } .landmark-card p { margin: 8px 0; line-height: 1.45; } .landmark-card figure { margin: 14px 0; } .landmark-card img { display: block; max-width: 100%; max-height: 270px; object-fit: contain; margin: auto; } .landmark-card figcaption { font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; } .landmark-card a { color: #70461e; } .landmark-close { float: right; cursor: pointer; } .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: var(--surface-inset); border: 1px solid var(--border-soft); padding: var(--space-3); border-radius: var(--radius-md); margin: var(--space-2) 0; } .hint-card b { display: block; margin-bottom: var(--space-1); font-size: var(--text-md); color: var(--ink); } .hint-card p, .hint-card li { margin: var(--space-1) 0; color: var(--text); font-size: var(--text-sm); } .hint-card ul { margin: var(--space-2) 0; padding-left: 18px; } /* output badge */ .output { display: inline-block; font-weight: 600; font-size: var(--text-xs); padding: 0 var(--space-1); border-radius: var(--radius-sm); } .output.producing { background: rgba(111, 168, 87, 0.2); color: var(--good); } .output.idle { color: var(--muted); } /* affordability styling */ .row button.affordable { background: var(--btn-beige); color: var(--ink); opacity: 1; } .row button.unaffordable { opacity: 1; background: var(--surface-disabled); color: var(--muted); } /* 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; } } /* --- 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) + var(--announce-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) + var(--announce-h) + 8px + 44px); right: 14px; z-index: var(--z-chrome); width: min(280px, calc(100vw - 28px)); max-height: 50dvh; 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; } .online-row { padding: 3px; } .online-visit { display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; padding: 4px; border: 0; background: transparent; color: var(--ink); text-align: left; } .online-player-name { display: grid; min-width: 0; line-height: 1.3; } .online-player-name b, .online-player-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .online-message { margin-left: auto; min-width: 32px; min-height: 32px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); } #online-chip { display: none; } #quick-dock { position: fixed; left: 14px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px); z-index: var(--z-chrome); display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - var(--top-h) - var(--bar-h) - 88px); overflow-y: auto; padding: 2px 5px 2px 2px; scrollbar-width: thin; } #quick-dock button { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--lbl-border); background: var(--glass); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); font-size: 19px; line-height: 1; } #quick-dock-toggle { display: none; } #quick-dock button.is-open { border-color: var(--even); background: var(--warning-surface); box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--even); } #quick-dock .status-dock-button { background: var(--surface-raised); border-color: var(--border); } #quick-dock .quick-badge { position: absolute; right: 1px; top: 1px; min-width: 17px; padding: 2px 3px; border-radius: 10px; border: 1px solid var(--bad); background: var(--btn-danger-bg); color: var(--bad); font: 700 10px/1 var(--font-body); } body:has(#nav:not([hidden])) #nav { left: 70px; } #quest-tracker, #alerts, #announce, #online-list { top: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 64px); left: 70px; right: auto; max-height: min(54dvh, calc(100dvh - var(--top-h) - var(--bar-h) - 88px)); overflow-y: auto; transform: none; } #quest-tracker { width: min(340px, calc(100vw - 86px)); } #alerts { width: min(300px, calc(100vw - 86px)); max-width: none; align-items: stretch; } #announce { width: min(640px, calc(100vw - 86px)); } #online-list { width: min(280px, calc(100vw - 86px)); } #quest-tracker:not(.quick-open), #alerts:not(.quick-open), #announce:not(.quick-open), #online-list:not(.quick-open), .sheet-open #quick-dock, .sheet-open #quest-tracker, .sheet-open #alerts, .sheet-open #announce, .sheet-open #online-list, body:has(.action-card) #quick-dock, body:has(.action-card) #quest-tracker, body:has(.action-card) #alerts, body:has(.action-card) #announce, body:has(.action-card) #online-list { visibility: hidden; pointer-events: none; } #alerts .announce-pill { display: none; } #announce .announce-card { max-height: inherit; overflow-y: auto; } body:has(#quick-dock .is-open) #toasts { top: calc(max(6px, env(safe-area-inset-top)) + var(--top-h) + 8px); bottom: 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); } #quick-dock #chat-toggle { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: auto; flex: none; } #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: 46dvh; 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; min-height: 60px; overscroll-behavior: contain; 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-msg.chat-npc { font-style: italic; } .chat-msg.chat-npc b { color: var(--accent); } #chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); position: relative; } #chat-mention-options { position: absolute; left: 8px; right: 8px; bottom: 100%; max-height: 180px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-panel); z-index: 1; } #chat-form #chat-mention-options button { display: block; width: 100%; min-height: 36px; padding: 6px 10px; text-align: left; border: 0; border-image: none; border-radius: 0; background: transparent; color: var(--ink); } #chat-form #chat-mention-options button[aria-selected="true"], #chat-form #chat-mention-options button:hover { background: var(--btn-beige); } #chat-form input { flex: 1; min-width: 0; 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