/* =========================================================================
   Orbitra — space theme
   ========================================================================= */

@font-face {
    font-family: "Exo 2";
    src: url("/fonts/exo2-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Exo 2";
    src: url("/fonts/exo2-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Orbitron";
    src: url("/fonts/orbitron-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}

:root {
    --bg: #03060d;
    --panel: rgba(9, 15, 30, 0.74);
    --panel-strong: rgba(12, 20, 40, 0.9);
    --line: rgba(120, 170, 255, 0.16);
    --text: #e8eefb;
    --text-dim: #93a4c4;
    --danger: #ff6b6b;
    --ok: #4ade80;
    --gold: #f5c044;

    /* Accent follows the pilot's company; guests get gold/cyan. */
    --accent: #f5c044;
    --accent-rgb: 245, 192, 68;
    --accent-2: #46c8ff;
    --accent-2-rgb: 70, 200, 255;

    --radius: 4px;
    --font-ui: "Exo 2", system-ui, "Segoe UI", sans-serif;
    --font-display: "Orbitron", "Exo 2", system-ui, sans-serif;

    /* Design system (shared by every page; see the "Design system" block below).
       Only static values here: anything tinted with the company colour must use
       rgba(var(--accent-rgb), a) in the rule itself, because the company is set on <body>. */
    --text-faint: rgba(147, 164, 196, 0.62);
    --warn: #f5c044;
    --info: #46c8ff;
    --surface: linear-gradient(180deg, rgba(10, 20, 40, 0.74), rgba(5, 11, 24, 0.82));
    --surface-inner: rgba(255, 255, 255, 0.03);
    --surface-input: rgba(4, 9, 20, 0.8);
    --line-soft: rgba(255, 255, 255, 0.06);
    --radius-sm: 3px;
    --radius-lg: 6px;
    --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 40px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6);
    /* Spacing scale: 4 · 8 · 12 · 16 · 20 · 28 · 40; --gap is the space between panels. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 28px;
    --s-7: 40px;
    --gap: 18px;
    --gap-sm: 12px;

    /* Dark native controls (scrollbars, select lists, number spinners) — also in the launcher's Chromium 87. */
    color-scheme: dark;
}

body[data-faction="mmo"] { --accent: #ff5a4e; --accent-rgb: 255, 90, 78; --accent-2: #ffa24a; --accent-2-rgb: 255, 162, 74; }
body[data-faction="eic"] { --accent: #4aa8ff; --accent-rgb: 74, 168, 255; --accent-2: #7ee0ff; --accent-2-rgb: 126, 224, 255; }
body[data-faction="vru"] { --accent: #5fe08a; --accent-rgb: 95, 224, 138; --accent-2: #c6f26b; --accent-2-rgb: 198, 242, 107; }

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 15.5px;
    line-height: 1.55;
    background: transparent;
    overflow-x: hidden;
    /* Header, page, footer in a column: the page grows, so the footer sits at the bottom of short pages. */
    display: flex;
    flex-direction: column;
}

a { color: var(--accent-2); text-decoration: none; transition: color .15s; }
a:hover { color: #fff; }

::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }
::placeholder { color: var(--text-faint); opacity: 1; }

/* Keyboard focus: one ring everywhere (mouse clicks do not show it). */
:focus-visible { outline: 2px solid rgba(var(--accent-2-rgb), 0.9); outline-offset: 2px; }

/* Thin themed scrollbars (Chromium/launcher via ::-webkit-scrollbar, Firefox via scrollbar-color). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(3, 6, 13, 0.55); }
::-webkit-scrollbar-thumb { background-color: rgba(147, 164, 196, 0.32); border: 2px solid transparent; border-radius: 6px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(190, 205, 235, 0.55); }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
    html { scrollbar-color: rgba(147, 164, 196, 0.35) rgba(3, 6, 13, 0.55); scrollbar-width: thin; }
}

kbd {
    display: inline-block;
    padding: 0 6px;
    font: 700 0.76rem/1.5 var(--font-ui);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}

code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.86em; padding: 1px 5px; color: #dfe8ff; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); }

hr, .divider { height: 1px; margin: var(--s-4) 0; border: 0; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent); }

/* ---- Background layers --------------------------------------------------- */

.space {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1100px 700px at 85% -10%, rgba(var(--accent-rgb), 0.16), transparent 60%),
        radial-gradient(900px 600px at -10% 30%, rgba(var(--accent-2-rgb), 0.10), transparent 60%),
        radial-gradient(1200px 900px at 50% 120%, rgba(110, 60, 200, 0.18), transparent 60%),
        var(--bg);
}

.space canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The company's art fills the window (user's mockup), the station and the warship of the front
   page frame it; a vignette keeps the panels readable. */
.backdrop {
    position: absolute;
    inset: 0;
    height: 100vh;
    background-size: cover;
    background-position: center top;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.space::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 70% at 50% 40%, transparent 45%, rgba(3, 6, 13, 0.55) 100%),
        linear-gradient(to bottom, rgba(3, 6, 13, 0.1), rgba(3, 6, 13, 0.5));
}

.space-art { position: absolute; top: 90px; height: 76vh; width: auto; opacity: 0.85; }
.space-art.left { left: 0; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 30% 45%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 85% 70% at 30% 45%, #000 50%, transparent 100%); }
.space-art.right { right: 0; top: 130px; height: 60vh; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 70% 45%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 85% 70% at 70% 45%, #000 50%, transparent 100%); }
@media (max-width: 1500px) { .space-art { opacity: 0.5; } }
@media (max-width: 1250px) { .space-art { display: none; } }

/* ---- Header: the menu on one row, wallet and pilot on a strip under it (user's mockup) ---- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 20px;
    padding: 10px 28px;
    background: linear-gradient(to bottom, rgba(3, 6, 13, 0.94), rgba(3, 6, 13, 0.78));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.8), transparent);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.18em;
    color: #fff;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.7);
}

.brand:hover { color: #fff; }
.brand svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.8)); }

.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }

.site-nav a {
    position: relative;
    color: var(--text-dim);
    padding: 7px 11px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 3px;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; bottom: 1px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transform: scaleX(0);
    transition: transform .2s;
}

.site-nav a:hover { color: #fff; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.2));
    border-color: rgba(var(--accent-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45), inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.site-nav a.active::after { display: none; }

.site-nav .nav-play {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 10px;
    padding: 9px 22px;
    color: #fff;
    font-size: 0.86rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.15)), var(--accent);
    border-color: rgba(var(--accent-2-rgb), 0.9);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.site-nav .nav-play svg { width: 14px; height: 14px; fill: currentColor; }
.site-nav .nav-play::after { display: none; }
.site-nav .nav-play:hover { filter: brightness(1.15); color: #fff; }

.header-tools { display: flex; align-items: center; gap: 6px; }
.icon-link { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text-dim); border-radius: 50%; transition: color .15s, filter .15s; }
.icon-link svg { width: 20px; height: 20px; fill: currentColor; }
.icon-link:hover, .icon-link.active { color: var(--accent-2); filter: drop-shadow(0 0 6px rgba(var(--accent-2-rgb), 0.8)); }

.header-strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px -28px -10px;
    padding: 6px 28px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(var(--accent-rgb), 0.14);
}

.user-box { display: flex; gap: 14px; align-items: center; color: var(--text-dim); font-size: 0.9rem; }
.user-box .pilot { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.user-box .pilot img { height: 18px; }
.hud-currency { display: flex; gap: 24px; font-family: var(--font-display); font-size: 0.86rem; }
.hud-currency span { display: flex; gap: 7px; align-items: center; color: var(--text-dim); }
.hud-currency b { color: var(--gold); font-weight: 700; text-shadow: 0 0 10px rgba(245, 192, 68, 0.35); }
.hud-currency .cr b { color: var(--accent-2); text-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.35); }
.hud-currency .hon b, .hud-currency .xp b { color: #fff; text-shadow: none; }
.hud-currency .xp .coin { font-size: 0.5rem; }
.hud-star { width: 18px; height: 18px; fill: #dfe8ff; filter: drop-shadow(0 0 5px rgba(200, 220, 255, 0.6)); }
.online-count { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.86rem; color: #fff; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s infinite; }
.online-count.down .online-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: none; }

/* Uridium and credit coins (header, Komuta). */
.coin {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font: 900 0.6rem/1 var(--font-display);
    font-style: normal;
    color: #3a2300;
    background: radial-gradient(circle at 35% 30%, #fff4b8, #f5c044 45%, #a86a08);
    box-shadow: 0 0 8px rgba(245, 192, 68, 0.55);
}
.coin.cr { color: #04121c; background: radial-gradient(circle at 35% 30%, #ffffff, var(--accent-2) 45%, var(--accent)); box-shadow: 0 0 8px rgba(var(--accent-2-rgb), 0.55); }

.link-button { background: none; border: none; color: var(--text-dim); cursor: pointer; font: inherit; padding: 0; }
.link-button:hover { color: #fff; }
.inline-form { display: inline; }

/* ---- Page ---------------------------------------------------------------- */

.page {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px 48px;
    animation: rise .5s ease-out both;
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Inside the in-game panel: no site chrome, tighter spacing, no starfield. */
html.embedded .site-header, html.embedded .site-footer, html.embedded .space canvas, html.embedded .space-art { display: none; }
html.embedded .page { max-width: none; padding: 14px 16px 24px; animation: none; }
html.embedded .backdrop { height: 360px; opacity: 0.35; }
html.embedded .shop-sidebar, html.embedded .shop-detail { top: 12px; }
html.embedded .shop-hero { margin-bottom: 12px; }
/* The panel is 1180x780 over the running game: smaller page titles, tighter rhythm, no costly blur. */
html.embedded .page > h1, html.embedded .page-title h1 { font-size: 1.8rem; }
html.embedded .page > h1 { margin-bottom: 14px; }
html.embedded .page-title { margin-bottom: 14px; }
html.embedded .alert { margin-bottom: 12px; }
html.embedded .section-title { margin: 18px 0 10px; }
html.embedded .panel { -webkit-backdrop-filter: none; backdrop-filter: none; }

h1, h2, h3 { font-weight: 700; letter-spacing: 0.04em; }

h1 {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    margin: 0 0 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.45);
}

h1::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 0.9em;
    margin-right: 12px;
    vertical-align: -0.08em;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}

/* Page header: <div class="page-title"> h1 (or .page-heading with h1 + .page-sub) on the left,
   everything after it (buttons, chips, a .hint) grouped on the right. */
.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-title h1 { margin: 0; }
.page-title > h1, .page-title > .page-heading { margin-right: auto; }
.page-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-sub { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 0.92rem; line-height: 1.4; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions form { margin: 0; }

/* Section title between blocks of a page (outside panels): label + count + a fading rule. */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 12px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), transparent); }
.section-title:first-child { margin-top: 0; }
.section-title small { font-size: 0.85em; letter-spacing: 0.06em; color: var(--accent-2); }

/* Heading row inside a panel or card: h2/h3 on the left, a count, chips or buttons on the right. */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head .hint { margin: 0; font-size: 0.82rem; }

.hint { color: var(--text-dim); font-size: 0.9rem; }

/* ---- Panels: glass with HUD corner brackets -------------------------------- */

.panel {
    position: relative;
    background: linear-gradient(180deg, rgba(10, 20, 40, 0.74), rgba(5, 11, 24, 0.82));
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: var(--radius);
    padding: 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 22px rgba(var(--accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 34px rgba(var(--accent-rgb), 0.05);
}

.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    border-color: rgba(var(--accent-rgb), 0.85);
    border-style: solid;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.8));
}

.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.panel h2 {
    margin: 0 0 12px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-2);
    text-shadow: 0 0 14px rgba(var(--accent-2-rgb), 0.45);
}

/* A count or note after a panel title: <h2>Üyeler <small>12</small></h2> */
.panel h2 small { margin-left: 6px; font-size: 0.78em; font-weight: 700; letter-spacing: 0.06em; text-transform: none; color: var(--text-dim); text-shadow: none; }

.panel.compact { padding: 12px 14px; }
.panel.flush { padding: 0; }
.panel.plain::before, .panel.plain::after { display: none; }
/* A panel that is a link or a choice: lifts and glows on hover. */
.panel.interactive { transition: transform .2s, box-shadow .2s, border-color .2s; }
.panel.interactive:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: var(--shadow-2), 0 0 26px rgba(var(--accent-rgb), 0.22); }

/* ---- Buttons ------------------------------------------------------------- */

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    color: var(--btn-ink, #fff);
    text-shadow: var(--btn-ink-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.15)), var(--accent);
    font: inherit;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: filter .15s, transform .15s;
}

.button:hover { filter: brightness(1.15) saturate(1.1); color: var(--btn-ink, #fff); transform: translateY(-1px); }
/* Light company colours (VRU green, guest gold) need dark text on the filled button. Done with a
   variable so the outlined variants (.secondary/.danger/.ghost) keep their own readable colour. */
body[data-faction="vru"], body[data-faction="none"] { --btn-ink: #06140b; --btn-ink-shadow: none; }
.button:active { transform: translateY(0); }

.button.secondary {
    color: var(--accent-2);
    background: linear-gradient(135deg, rgba(var(--accent-2-rgb), 0.18), rgba(var(--accent-2-rgb), 0.06));
    box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb), 0.55);
}

.button.secondary:hover { color: #fff; }

.button.danger {
    color: var(--danger);
    background: rgba(255, 107, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.6);
}

.button.danger:hover { color: #fff; background: rgba(255, 107, 107, 0.22); }

/* Quiet button for tertiary actions (cancel, back, "daha fazla"). */
.button.ghost {
    color: var(--text-dim);
    text-shadow: none;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.button.ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb), 0.6); }

/* Sizes: .small (rows, tables) · default · .large (the one main action) · .block (full width). */
.button.large { padding: 14px 32px; font-size: 0.95rem; letter-spacing: 0.14em; }
.button.block { display: flex; width: 100%; }
.button svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

.button:disabled, .button.disabled, .button[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); transform: none; }
.button.disabled, .button[aria-disabled="true"] { pointer-events: none; }

/* clip-path cuts outlines off, so the keyboard ring is drawn inside the button. */
.button:focus-visible, .button.secondary:focus-visible, .button.danger:focus-visible, .button.ghost:focus-visible {
    outline: none;
    filter: brightness(1.15);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.badge {
    --tone: var(--accent-rgb);
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--tone));
    background: rgba(var(--tone), 0.12);
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.45);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.badge.info { --tone: var(--accent-2-rgb); }
.badge.ok { --tone: 74, 222, 128; }
.badge.gold, .badge.warn { --tone: 245, 192, 68; }
.badge.danger { --tone: 255, 107, 107; }
.badge.muted { --tone: 147, 164, 196; }
.badge.sm { padding: 2px 8px; font-size: 0.66rem; }

/* Message after a form post: <p class="alert alert-ok|alert-error|alert-warn" role="status">. */
.alert {
    --tone: var(--accent-2-rgb);
    position: relative;
    padding: 11px 16px 11px 46px;
    margin: 0 0 16px;
    color: var(--text);
    background: linear-gradient(90deg, rgba(var(--tone), 0.14), rgba(9, 15, 30, 0.9) 55%);
    border: 1px solid rgba(var(--tone), 0.3);
    border-left: 3px solid rgb(var(--tone));
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    animation: rise .35s ease-out both;
}

.alert::before {
    content: "i";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 800 0.72rem/1 var(--font-ui);
    color: #04101a;
    background: rgb(var(--tone));
    box-shadow: 0 0 10px rgba(var(--tone), 0.55);
}
.alert-ok { --tone: 74, 222, 128; }
.alert-ok::before { content: "✓"; }
.alert-error { --tone: 255, 107, 107; }
.alert-error::before { content: "!"; }
.alert-warn { --tone: 245, 192, 68; }
.alert-warn::before { content: "!"; }

/* ---- Wallet / readouts ----------------------------------------------------- */

.wallet { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; }
.wallet div { display: flex; flex-direction: column; align-items: flex-end; }
.wallet dt { color: var(--text-dim); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.wallet dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(245, 192, 68, 0.4); }

/* ---- Forms --------------------------------------------------------------- */

.auth-card { max-width: 440px; margin: 40px auto; padding: 28px; }
.auth-card h1 { font-size: 1.6rem; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span:first-child { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input:not([type]), textarea, select {
    width: 100%;
    padding: 11px 14px;
    color: var(--text);
    font: inherit;
    background: var(--surface-input);
    border: 1px solid var(--line);
    border-bottom: 2px solid rgba(var(--accent-2-rgb), 0.45);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* Low specificity on purpose: page-specific inputs (auction, toolbars) keep their own borders. */
input:hover, textarea:hover, select:hover {
    border-color: rgba(var(--accent-2-rgb), 0.3);
    border-bottom-color: rgba(var(--accent-2-rgb), 0.7);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 8px 20px -12px rgba(var(--accent-rgb), 0.9);
}

input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input[readonly], textarea[readonly] { color: var(--text-dim); }
select { cursor: pointer; }
select option, select optgroup { color: var(--text); background: #0b1222; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 100px #060c18 inset; caret-color: var(--text); }

textarea { min-height: 120px; resize: vertical; }
.field-error, .form-errors { color: var(--danger); font-size: 0.85rem; }
.form-errors ul { margin: 0; padding-left: 18px; }

/* Checkboxes and radios in the theme (the launcher's Chromium 87 has no accent-color). */
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: -4px;
    cursor: pointer;
    background: rgba(4, 9, 20, 0.85);
    border: 1px solid rgba(var(--accent-2-rgb), 0.55);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before, input[type=radio]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .12s ease-out;
}
input[type=checkbox]::before { width: 11px; height: 9px; background: #fff; clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 17%, 86% 3%, 38% 72%); }
input[type=radio]::before { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: rgba(var(--accent-2-rgb), 0.9); }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: translate(-50%, -50%) scale(1); }
body[data-faction="vru"] input:checked::before, body[data-faction="none"] input:checked::before { background: #06140b; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid rgba(var(--accent-2-rgb), 0.9); outline-offset: 2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Option card: <label class="choice"><input type="radio|checkbox"><span><strong>3D</strong> <small>…</small></span></label> */
.choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--surface-inner);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s, background-color .15s;
}
.choice:hover { border-color: rgba(var(--accent-2-rgb), 0.5); }
.choice input:checked + span { color: #fff; }
.choice span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.choice small { color: var(--text-dim); font-size: 0.76rem; }
.choice img { width: 30px; height: 30px; flex: none; }
/* Progressive: modern browsers also light the whole card (no :has in the launcher). */
.choice:has(input:checked) { border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.1); }

/* Inline checkbox + text: <label class="check-line"><input type="checkbox"> Açık</label> */
.check-line { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }

.field small, .field .hint { font-size: 0.78rem; }
/* Several fields side by side, wrapping on narrow screens. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 14px; }
/* Buttons at the end of a form; a .hint inside goes to the left. */
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.form-actions .hint { margin: 0 auto 0 0; }

/* Filter bar above a list or table: search input grows, selects and small buttons keep their size. */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.toolbar input, .toolbar select { width: auto; padding: 8px 12px; font-size: 0.88rem; }
.toolbar input[type=search], .toolbar input[type=text], .toolbar .grow { flex: 1; min-width: 160px; }
input.input-sm, select.input-sm { padding: 7px 10px; font-size: 0.86rem; }

/* =========================================================================
   Design system: shared components for every page.
   Works in the launcher's Chromium 87 too: no :has / :is / :where / aspect-ratio here.
   ========================================================================= */

/* ---- Layout helpers ---------------------------------------------------- */

.stack.tight { gap: var(--gap-sm); }
.hstack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.push { margin-left: auto; }
/* Main column + side column (collapses under 900px). */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .split, .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Responsive grid of cards: .card-grid (240px min) · .sm (170px) · .lg (300px). */
.card-grid { --card-min: 240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 14px; }
.card-grid.sm { --card-min: 170px; gap: 10px; }
.card-grid.lg { --card-min: 300px; }

/* ---- Card: a tile inside a panel or a .card-grid (lighter than .panel, no corner brackets) ---- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    color: var(--text);
    background: linear-gradient(180deg, rgba(14, 24, 46, 0.82), rgba(6, 11, 24, 0.88));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover, .card.interactive:hover { color: var(--text); border-color: rgba(var(--accent-2-rgb), 0.55); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.card.active, .card.selected { border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35), inset 0 0 18px rgba(var(--accent-rgb), 0.12); }
.card.dim { opacity: 0.6; }
.card h3 { margin: 0; font-size: 1rem; color: #fff; letter-spacing: 0.03em; }
.card p { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ---- Chips: short facts / rules instead of prose ------------------------ */
/* <ul class="chip-row"><li class="chip"><b>3</b> giriş / gün</li><li class="chip ok">Açık</li></ul> */

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
    --tone: 147, 164, 196;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--text);
    background: rgba(var(--tone), 0.1);
    border: 1px solid rgba(var(--tone), 0.3);
    border-radius: var(--radius-sm);
}
.chip b, .chip strong { color: #fff; font-weight: 800; }
.chip small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.chip .coin { width: 15px; height: 15px; font-size: 0.5rem; }
.chip img { height: 16px; width: auto; }
.chip svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.chip.accent { --tone: var(--accent-rgb); color: rgb(var(--tone)); }
.chip.info { --tone: var(--accent-2-rgb); color: rgb(var(--tone)); }
.chip.ok { --tone: 74, 222, 128; color: rgb(var(--tone)); }
.chip.gold, .chip.warn { --tone: 245, 192, 68; color: rgb(var(--tone)); }
.chip.danger { --tone: 255, 107, 107; color: rgb(var(--tone)); }
.chip.violet { --tone: 176, 120, 255; color: #d4c4ff; }
.chip.solid { color: #06101c; background: rgb(var(--tone)); border-color: transparent; box-shadow: 0 0 12px rgba(var(--tone), 0.45); }
.chip.solid b, .chip.solid strong { color: inherit; }
.chip.sm { min-height: 20px; padding: 1px 7px; font-size: 0.7rem; }
a.chip:hover { color: #fff; border-color: rgba(var(--tone), 0.7); }

/* ---- Key / value list ----------------------------------------------------- */
/* <dl class="kv"><div><dt>Can</dt><dd>300.000</dd></div>…</dl>   .kv.cols-2 = two columns */

.kv { display: flex; flex-direction: column; margin: 0; font-size: 0.88rem; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; text-align: right; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.kv.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.kv.cols-2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

/* ---- Progress bar: <div class="progress"><span style="width: 40%"></span></div> ---- */

.progress { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.8), var(--accent-2)); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); transition: width .4s; }
.progress.ok > span { background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.5); }
.progress.thin { height: 4px; }

/* ---- Tabs: <nav class="tabs"><a class="active">Hedefler <span class="count">3</span></a>…</nav> ---- */

.tabs { display: flex; gap: 2px; margin: 0 0 14px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs > a, .tabs > button {
    position: relative;
    flex: none;
    padding: 10px 16px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-dim);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.tabs > a:hover, .tabs > button:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.tabs > .active, .tabs > [aria-selected="true"] { color: #fff; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.16)); }
.tabs > .active::after, .tabs > [aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tabs .count { margin-left: 6px; color: var(--accent-2); }

/* ---- Empty state: instead of a lone grey sentence ------------------------ */
/* <div class="empty-state"><strong>Henüz klan yok</strong><span>İlkini sen kur.</span><a class="button small">Klan kur</a></div> */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(var(--accent-2-rgb), 0.25);
    border-radius: var(--radius);
}
.empty-state strong { color: var(--text); font-size: 0.98rem; }
.empty-state svg { width: 34px; height: 34px; fill: var(--accent-2); opacity: 0.55; }
.empty-state .button { margin-top: 6px; }
.empty-state.compact { padding: 14px 12px; }

/* ---- Fold: details moved out of sight ------------------------------------ */
/* <details class="fold"><summary>Kurallar</summary>…</details> */

details.fold > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 0.85rem; font-weight: 700; color: var(--accent-2); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary:hover { color: #fff; }
details.fold[open] > summary { margin-bottom: 8px; }

/* ---- Hover tip: <span class="tip info-dot" data-tip="Ayrıntı…" tabindex="0">i</span> ----
   Any element with class "tip" and data-tip shows the text on hover / keyboard focus.
   Do not put it inside a box with overflow: hidden (it would be cut). */

.tip { position: relative; }
.tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: max-content;
    max-width: 260px;
    padding: 7px 10px;
    font: 500 0.78rem/1.4 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    color: var(--text);
    background: rgba(6, 11, 24, 0.97);
    border: 1px solid rgba(var(--accent-2-rgb), 0.45);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .15s, transform .15s;
}
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* A tip exists only while shown: hidden ones still took room and made pages scroll sideways on phones.
   It still fades in (from its starting style). */
.tip[data-tip]:not(:hover):not(:focus-visible)::after { display: none; }
@starting-style { .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after { opacity: 0; } }
.tip.tip-below[data-tip]::after { top: calc(100% + 8px); bottom: auto; }
/* Near the left / right edge: anchor the bubble to that side instead of centring it. */
.tip.tip-start[data-tip]::after { left: 0; transform: translate(0, 4px); }
.tip.tip-end[data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.tip.tip-start[data-tip]:hover::after, .tip.tip-end[data-tip]:hover::after,
.tip.tip-start[data-tip]:focus-visible::after, .tip.tip-end[data-tip]:focus-visible::after { transform: translate(0, 0); }
.info-dot {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: none;
    font: 800 0.66rem/1 var(--font-ui);
    color: var(--accent-2);
    vertical-align: 1px;
    border: 1px solid rgba(var(--accent-2-rgb), 0.6);
    border-radius: 50%;
    cursor: help;
}
.info-dot:hover { color: #fff; border-color: var(--accent-2); }

/* ---- Small utilities ---------------------------------------------------- */

.muted { color: var(--text-dim); }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-gold { color: var(--gold); }
.text-accent { color: var(--accent); }
.text-info { color: var(--accent-2); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Landing ------------------------------------------------------------- */

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); margin-right: 6px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---- Dashboard ----------------------------------------------------------- */

.dashboard { display: flex; flex-direction: column; gap: 18px; }

.profile {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 24px 28px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(5, 11, 24, 0.94) 30%, rgba(5, 11, 24, 0.35)), var(--profile-bg, none) center / cover;
}

.profile h1 { margin: 0; font-size: 2.1rem; text-transform: none; letter-spacing: 0.02em; }
.profile h1::before { display: none; }

/* Rank in a shield, as in the mockup. */
.rank-frame {
    display: grid;
    place-items: center;
    flex: none;
    width: 84px;
    height: 92px;
    clip-path: polygon(50% 0, 100% 16%, 100% 66%, 50% 100%, 0 66%, 0 16%);
    background: linear-gradient(160deg, #ffe7a0, #c47a1a 45%, #6a3a08);
}
.rank-frame span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 84px;
    clip-path: inherit;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.35), #0b1020 70%);
}
.rank-frame img { width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(255, 200, 90, 0.7)); }
.profile .info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.profile .rank-line { display: flex; gap: 10px; align-items: center; color: var(--text-dim); flex-wrap: wrap; }
.rank-icon { width: 46px; height: 46px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6)); }
.play-button { font-size: 1.2rem !important; padding: 20px 52px !important; letter-spacing: 0.16em !important; }
.play-button svg { width: 18px; height: 18px; fill: currentColor; }

.xp-bar { position: relative; height: 7px; max-width: 460px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.xp-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.7), var(--accent-2)); box-shadow: 0 0 10px var(--accent); }
.xp-label { font-size: 0.78rem; color: var(--text-dim); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
/* Komuta is a little wider than the other pages, so the six cards keep whole numbers. */
@media (min-width: 1300px) { .dashboard { margin: 0 -30px; } }
@media (min-width: 1000px) { .stat-grid { grid-template-columns: 1.25fr 1.25fr 1fr 1fr 0.85fr 0.85fr; } }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 16px 14px; }
.stat > span { color: var(--text-dim); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.stat-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat strong { font-family: var(--font-ui); font-size: 1.18rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat .coin { width: 24px; height: 24px; font-size: 0.74rem; }
.stat-icon { width: 24px; height: 24px; flex: none; fill: var(--accent-2); filter: drop-shadow(0 0 6px rgba(var(--accent-2-rgb), 0.6)); }
.stat-icon.star { fill: #dfe8ff; filter: drop-shadow(0 0 6px rgba(200, 220, 255, 0.6)); }
.stat-icon.xp { fill: #f5c044; filter: drop-shadow(0 0 6px rgba(245, 192, 68, 0.6)); }
.stat-icon.globe { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6)); }
.stat.uri strong { color: var(--gold); }
.stat.cre strong { color: var(--accent-2); }

.hall-of-fame { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rank-head { display: flex; gap: 10px; padding: 0 10px 6px; color: var(--text-dim); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); margin-bottom: 4px; }
.rank-head span:first-child { width: 26px; text-align: right; }
.rank-head span:nth-child(2) { flex: 1; padding-left: 28px; }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid transparent; border-bottom-color: rgba(255, 255, 255, 0.04); border-radius: 3px; transition: background .15s; }
.rank-list li:hover { background: rgba(var(--accent-2-rgb), 0.06); }
.rank-list li.me { background: rgba(var(--accent-rgb), 0.16); }
/* The leader of each list is lit: gold, the PvP leader in the company colour. */
.rank-list li.lead { border-color: rgba(255, 200, 80, 0.8); background: linear-gradient(90deg, rgba(255, 190, 60, 0.3), rgba(255, 190, 60, 0.06)); box-shadow: 0 0 14px rgba(255, 190, 60, 0.25), inset 0 0 12px rgba(255, 190, 60, 0.12); }
.rank-list.war li.lead { border-color: rgba(var(--accent-2-rgb), 0.8); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-rgb), 0.06)); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.3), inset 0 0 12px rgba(var(--accent-rgb), 0.12); }
.rank-list li.lead .name, .rank-list li.lead .points { color: #fff; }
.rank-list .pos { width: 26px; text-align: right; font-family: var(--font-display); font-size: 0.85rem; color: var(--text-dim); }
.rank-list li:nth-child(1) .pos { color: #ffd76a; }
.rank-list li:nth-child(2) .pos { color: #d7e2f2; }
.rank-list li:nth-child(3) .pos { color: #e3a46b; }
.rank-list img { height: 20px; }
.rank-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .points { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 0.88rem; }

/* ---- Komuta: daily login reward and server events ------------------------- */

.komuta-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .komuta-row { grid-template-columns: 1fr; } }

.daily-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.daily-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(14, 24, 46, 0.8), rgba(5, 10, 22, 0.85));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 5px;
}
.daily-n { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.daily-icon { display: grid; place-items: center; height: 34px; }
.daily-icon .coin { width: 30px; height: 30px; font-size: 0.85rem; }
.daily-icon svg { width: 30px; height: 30px; fill: var(--accent-2); filter: drop-shadow(0 0 6px rgba(var(--accent-2-rgb), 0.6)); }
.daily-text { font-size: 0.74rem; font-weight: 700; line-height: 1.25; }
.daily-day.done { opacity: 0.55; }
.daily-day.today {
    border-color: rgb(var(--accent-rgb));
    background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.35), transparent 70%), linear-gradient(180deg, rgba(20, 32, 60, 0.92), rgba(8, 14, 28, 0.94));
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5), inset 0 0 16px rgba(var(--accent-rgb), 0.2);
}
.daily-day.today .daily-n { color: #fff; }
.daily-check { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 900; color: #06120a; background: var(--ok); border-radius: 50%; }
.daily-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.daily-foot .hint { margin: 0; flex: 1; min-width: 200px; font-size: 0.82rem; }
@media (max-width: 640px) { .daily-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.event { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.event:last-of-type { border-bottom: none; }
.event-icon { width: 34px; height: 34px; flex: none; fill: var(--text-dim); }
.event-icon.boss { fill: #ff7a6a; }
.event-icon.double { fill: var(--gold); }
.event.live .event-icon { filter: drop-shadow(0 0 8px currentColor); animation: pulse 1.6s ease-in-out infinite; }
.event.live .event-icon.boss { color: #ff7a6a; }
.event.live .event-icon.double { color: var(--gold); }
.event-body { flex: 1; min-width: 0; }
.event-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-head strong { font-size: 0.98rem; }
.event-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; color: var(--accent-2); border: 1px solid rgba(var(--accent-2-rgb), 0.45); white-space: nowrap; }
.event.live .event-badge { color: #fff; background: rgba(255, 90, 78, 0.85); border-color: #ff8a7e; box-shadow: 0 0 12px rgba(255, 90, 78, 0.6); }
.event-line { margin: 4px 0 0; font-size: 0.84rem; color: var(--text); }
.event-line b { font-family: var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.event-line.dim { color: var(--text-dim); font-size: 0.8rem; }
.event-bar { height: 8px; margin-top: 7px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.event-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff5a4e, #ffb24a); box-shadow: 0 0 10px #ff5a4e; transition: width .6s; }
.event-last { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(var(--accent-rgb), 0.18); font-size: 0.8rem; color: var(--text-dim); }

/* ---- Ships --------------------------------------------------------------- */

@keyframes hover-float { 50% { transform: translateY(-7px); } }

.ship-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; font-size: 0.88rem; }
.ship-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); }
.ship-stats dt { color: var(--text-dim); }
.ship-stats dd { margin: 0; font-family: var(--font-display); font-size: 0.8rem; }

/* ---- Shop ---------------------------------------------------------------- */

.accent-gold   { --cat: 245, 192, 68; }
.accent-violet { --cat: 176, 120, 255; }
.accent-cyan   { --cat: 70, 200, 255; }
.accent-teal   { --cat: 60, 230, 190; }
.accent-green  { --cat: 120, 230, 110; }
.accent-orange { --cat: 255, 150, 70; }
.accent-slate  { --cat: 160, 180, 210; }

.shop-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 4px 2px 0;
    margin-bottom: 20px;
}

.shop-hero-text { flex: 1; min-width: 220px; }
.shop-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; color: #fff; }
.shop-hero h1::before { display: none; }
.shop-hero p { margin: 4px 0 0; color: var(--text); text-shadow: 0 2px 6px #000; }
/* The wallet is in the site header; only the in-game panel (no header) shows it here. */
html:not(.embedded) .shop-hero .wallet { display: none; }

.hero-hex {
    display: grid;
    place-items: center;
    flex: none;
    width: 76px;
    height: 84px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, var(--accent-2), var(--accent) 50%, rgba(var(--accent-rgb), 0.4));
}
.hero-hex span {
    display: grid;
    place-items: center;
    width: 70px;
    height: 78px;
    clip-path: inherit;
    background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.45), #071026 75%);
}
.hero-hex svg { width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 0 8px rgba(var(--accent-2-rgb), 0.9)); }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-2); }
.wallet.big dd { font-size: 1.35rem; }
.wallet .cr { color: var(--accent-2); text-shadow: 0 0 12px rgba(var(--accent-2-rgb), 0.4); }
.wallet .infinite dd { color: #fff; font-size: 1.6rem; line-height: 1.1; text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.8); }

.shop-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

/* Left: categories */
.shop-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 10px; }

.shop-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 14px 10px 10px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
    background: linear-gradient(180deg, rgba(10, 20, 40, 0.78), rgba(5, 11, 24, 0.86));
    border: 1px solid rgba(var(--cat), 0.22);
    border-radius: 4px;
    /* No glass blur on repeated items: each one was re-blurred on every frame of the starfield behind
       (dozens at once in the shop), and their 80-90 % opaque ground hides the blur anyway. */
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.shop-cat:hover { color: #fff; border-color: rgba(var(--cat), 0.6); }
.shop-cat.active {
    color: #fff;
    border-color: rgb(var(--cat));
    background: linear-gradient(90deg, rgba(var(--cat), 0.3), rgba(10, 20, 40, 0.85));
    box-shadow: 0 0 16px rgba(var(--cat), 0.45), inset 0 0 18px rgba(var(--cat), 0.18);
}
.cat-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: radial-gradient(rgba(var(--cat), 0.3), transparent 70%); }
.cat-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-name { flex: 1; }
.cat-count { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: rgb(var(--cat)); text-shadow: 0 0 8px rgba(var(--cat), 0.6); }

/* Middle: tiles */
.shop-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.shop-section-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--cat)); text-shadow: 0 0 14px rgba(var(--cat), 0.5); }

/* Group and search, one control (mockup: "Tümü | Ara..."). */
.shop-tools {
    display: flex;
    align-items: stretch;
    height: 32px;
    background: rgba(4, 10, 22, 0.8);
    border: 1px solid rgba(var(--cat), 0.35);
    border-radius: 3px;
}
.shop-tools select, .shop-tools input {
    height: 100%;
    padding: 0 10px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.shop-tools select { max-width: 150px; border-right: 1px solid rgba(var(--cat), 0.35); cursor: pointer; }
.shop-tools select option { background: #0b1222; }
.shop-tools input { width: 150px; }
.shop-tools select:focus, .shop-tools input:focus { outline: none; box-shadow: none; background: rgba(var(--cat), 0.08); }
.tile-none { grid-column: 1 / -1; margin: 10px 0; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tile-grid.large { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 10px 12px;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--cat), 0.18), transparent 62%),
        linear-gradient(180deg, rgba(14, 24, 46, 0.86), rgba(5, 10, 22, 0.9));
    border: 1px solid rgba(var(--cat), 0.22);
    border-radius: 5px;
    transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.tile:hover { transform: translateY(-3px); border-color: rgba(var(--cat), 0.6); box-shadow: 0 0 12px rgba(var(--cat), 0.25); }
.tile.selected {
    border-color: rgb(var(--cat));
    background: radial-gradient(circle at 50% 38%, rgba(var(--cat), 0.32), transparent 65%), linear-gradient(180deg, rgba(20, 32, 60, 0.92), rgba(8, 14, 28, 0.94));
    box-shadow: 0 0 18px rgba(var(--cat), 0.5), inset 0 0 22px rgba(var(--cat), 0.2);
}
.tile.owned { opacity: 0.9; }
.tile.locked .tile-image img { filter: grayscale(1) brightness(0.5); }
.tile[hidden] { display: none; }

.tile-image { height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tile-grid.large .tile-image { height: 120px; }
.tile-image img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); transition: transform .25s; }
.tile:hover .tile-image img, .tile.selected .tile-image img { transform: scale(1.08); }
.tile-name { font-weight: 700; font-size: 0.88rem; line-height: 1.25; }
.tile-price { font-family: var(--font-display); font-size: 0.78rem; color: var(--gold); }
.tile-price small { color: var(--text-dim); font-size: 0.68rem; }
.tile-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 900; color: #06120a; background: var(--ok); border-radius: 50%; box-shadow: 0 0 10px var(--ok); }
.tile-state { font-size: 0.78rem; font-weight: 700; color: var(--ok); }

.effect-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #041014;
    background: rgb(var(--cat, 70, 200, 255));
    box-shadow: 0 0 12px rgba(var(--cat, 70, 200, 255), 0.6);
}

/* Right: details */
.shop-detail { position: sticky; top: 120px; padding: 14px 14px 18px; min-height: 320px; }
.detail-empty { display: grid; place-items: center; min-height: 280px; text-align: center; }
.detail-body { display: flex; flex-direction: column; gap: 8px; position: relative; }
.detail-body[hidden], .detail-empty[hidden], .detail-form[hidden], .detail-link[hidden], .detail-effect[hidden] { display: none; }

/* The item floats over a glowing pedestal (mockup). */
.detail-image {
    position: relative;
    height: 240px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 4px;
    background:
        radial-gradient(ellipse 60% 55% at 50% 42%, rgba(var(--accent-2-rgb), 0.22), transparent 70%),
        linear-gradient(180deg, rgba(4, 10, 22, 0.3), rgba(4, 10, 22, 0.9));
}

.detail-image::before, .detail-image::after {
    content: "";
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}

.detail-image::before {
    bottom: 18px;
    width: 190px;
    height: 44px;
    border: 2px solid rgba(var(--accent-2-rgb), 0.85);
    background: radial-gradient(ellipse at center, rgba(var(--accent-2-rgb), 0.4), rgba(4, 10, 22, 0.92) 70%);
    box-shadow: 0 0 18px rgba(var(--accent-2-rgb), 0.7), inset 0 0 16px rgba(var(--accent-2-rgb), 0.5);
}

.detail-image::after {
    bottom: 6px;
    width: 250px;
    height: 64px;
    border: 1px solid rgba(var(--accent-2-rgb), 0.35);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.detail-image img { position: relative; z-index: 1; max-width: 80%; max-height: 170px; margin-bottom: 34px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.8)); animation: hover-float 5s ease-in-out infinite; }
.detail-effect { position: static; align-self: flex-start; }
.detail-name { margin: 8px 0 0; font-size: 1.2rem; color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(var(--accent-2-rgb), 0.45); }
.detail-description { margin: 0; color: var(--text-dim); font-size: 0.92rem; }
.detail-facts { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.88rem; }
.detail-facts li { display: flex; align-items: center; gap: 9px; }
.detail-facts svg { width: 17px; height: 17px; flex: none; fill: var(--accent-2); filter: drop-shadow(0 0 4px rgba(var(--accent-2-rgb), 0.6)); }
.detail-facts .coin { width: 17px; height: 17px; font-size: 0.55rem; }
.detail-status { margin: 0; color: var(--ok); font-weight: 700; }
.detail-status.muted { color: var(--text-dim); font-weight: 600; }
.detail-status:empty { display: none; }
.detail-form { margin-top: 6px; }
.detail-form .button, .equip-form .button { flex: 1; padding: 14px 22px; font-size: 1rem; letter-spacing: 0.14em; }
.detail-form input[hidden] { display: none; }
.equip-form[hidden] { display: none; }
.detail-link { align-self: stretch; }
.price { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.15rem; margin: 0; }
.price span { font-family: var(--font-ui); font-weight: 400; color: var(--text-dim); font-size: 0.82rem; }
.buy-form { display: flex; gap: 8px; }
.buy-form input[type=number] { width: 86px; flex: none; padding: 8px 10px; }

@media (max-width: 1000px) {
    .shop-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .shop-detail { grid-column: 1 / -1; position: static; min-height: 0; }
    .detail-body:not([hidden]) { display: grid; grid-template-columns: 220px 1fr; column-gap: 20px; }
    .detail-body > :not(.detail-image) { grid-column: 2; }
    .detail-image { grid-row: 1 / span 8; }
}

@media (max-width: 760px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .shop-cat { flex: none; border-left: none; border-bottom: 3px solid transparent; }
    .shop-cat.active { border-bottom-color: rgb(var(--cat)); }
    .cat-count { display: none; }
    .detail-body:not([hidden]) { display: flex; }
}

/* ---- Hangar -------------------------------------------------------------- */

.hangar-bay { padding: 0; overflow: hidden; }

.hangar-bay .bay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), transparent);
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.hangar-bay .bay-header strong { color: #fff; }

.flash-frame {
    display: flex;
    justify-content: center;
    padding: 26px 16px;
    overflow-x: auto;
    background:
        linear-gradient(rgba(var(--accent-2-rgb), 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        radial-gradient(ellipse at center, rgba(var(--accent-2-rgb), 0.12), transparent 70%);
}

.flash-frame > * { flex: none; box-shadow: 0 0 0 1px rgba(var(--accent-2-rgb), 0.3), 0 20px 60px rgba(0, 0, 0, 0.6); }
.hangar-bay .bay-footer { padding: 12px 18px; border-top: 1px solid var(--line); }
.hangar-bay .bay-footer p { margin: 0; }

/* ---- Skill tree ---------------------------------------------------------- */

.skill-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.skill-actions > div { flex: 1; min-width: 220px; }
.skill-actions p { margin: 0; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.skill { display: flex; flex-direction: column; gap: 9px; }
.skill header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.skill h2 { margin: 0; color: #fff; letter-spacing: 0.06em; }
.skill p { margin: 0; font-size: 0.9rem; }
.skill .level { font-family: var(--font-display); color: var(--accent); font-weight: 700; }
.skill.locked { opacity: 0.55; }
.skill.maxed { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.6), 0 0 30px rgba(var(--accent-rgb), 0.18); }
.skill form { margin-top: auto; }
.pips { display: flex; gap: 5px; }
.pips span { flex: 1; height: 7px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); transform: skewX(-20deg); }
.pips span.on { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8); }

/* ---- Settings ------------------------------------------------------------ */

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: start; }

/* ---- Footer -------------------------------------------------------------- */

/* A slim bar at the very bottom (body is a flex column and .page grows, so short pages push it down). */
.site-footer {
    flex: none;
    padding: 14px 16px 16px;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    background: linear-gradient(180deg, rgba(3, 6, 13, 0.2), rgba(3, 6, 13, 0.8));
    border-top: 1px solid rgba(var(--accent-rgb), 0.12);
}
.site-footer span { color: rgba(var(--accent-rgb), 0.85); font-weight: 700; }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1360px) {
    .site-header { column-gap: 14px; padding: 10px 20px; }
    .header-strip { margin: 8px -20px -10px; padding: 6px 20px; }
    .brand { font-size: 1.1rem; letter-spacing: 0.12em; }
}

/* Thirteen menu entries (admins): keep them on one line down to 1200px. */
@media (max-width: 1440px) and (min-width: 1100px) {
    .site-nav { gap: 0; }
    .site-nav a { padding: 7px 7px; font-size: 0.74rem; letter-spacing: 0.03em; }
    .site-nav a::after { left: 7px; right: 7px; }
    .site-nav .nav-play { padding: 8px 16px; margin-right: 6px; }
}

@media (max-width: 900px) {
    .site-header { grid-template-columns: auto 1fr auto; padding: 10px 16px; row-gap: 8px; }
    .site-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .site-nav a { white-space: nowrap; padding: 8px 10px; }
    .header-tools { grid-column: 3; grid-row: 1; }
    .header-strip { margin: 0 -16px -10px; padding: 6px 16px; }
    .hud-currency { gap: 12px; font-size: 0.74rem; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .page { padding: 22px 16px 40px; }
    .wallet div { align-items: flex-start; }

    /* Phones: the header scrolls away with the page; every menu entry in sight (Oyna on its own row,
       the others four to a row), the wallet two by two. */
    .site-header { position: relative; padding: 8px 12px; row-gap: 8px; }
    .brand { font-size: 1rem; }
    .brand svg { width: 28px; height: 28px; }
    .site-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; }
    .site-nav a { padding: 8px 2px; font-size: 0.66rem; letter-spacing: 0.02em; text-align: center; overflow: hidden; text-overflow: ellipsis;
        background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
    .site-nav a::after { display: none; }
    .site-nav .nav-play { grid-column: 1 / -1; justify-content: center; margin: 0 0 2px; padding: 10px 16px; font-size: 0.9rem; }
    .header-strip { flex-wrap: wrap; gap: 6px 12px; margin: 0 -12px -8px; padding: 6px 12px; }
    .hud-currency { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; width: 100%; }
    .user-box { width: 100%; justify-content: space-between; gap: 10px; font-size: 0.84rem; }

    /* Tables never push the page sideways. */
    .clan-members th:nth-child(3), .clan-members td:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Clans --------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.clan-tag { color: var(--accent); }
.clan-description { white-space: pre-wrap; margin: 0; }

.search-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.search-row input, .search-row select { flex: 1; min-width: 140px; }

/* Tables: <table class="data-table [compact]">, numbers in <td class="num"> (right, tabular),
   the viewer's own row <tr class="me">; wide tables go in <div class="table-wrap">. */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-dim);
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
}
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.data-table tr:hover td { background: rgba(var(--accent-2-rgb), 0.06); }
.data-table tr.me td { background: rgba(var(--accent-rgb), 0.14); }
.data-table .num { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.data-table th.num { font-weight: 700; }
.data-table .dim { color: var(--text-dim); }
.data-table .actions { white-space: nowrap; text-align: right; }
.data-table .actions form + form { margin-left: 10px; }
.data-table.compact { font-size: 0.85rem; }
.data-table.compact th { padding: 6px 8px; }
.data-table.compact td { padding: 6px 8px; }
.table-wrap { overflow-x: auto; }
.inline-logo { height: 16px; vertical-align: -3px; margin-right: 6px; }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3a4458; }
.status-dot.online { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.pager { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pager a { padding: 4px 10px; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-display); font-size: 0.8rem; }
.pager a.active, .pager a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.applications li { justify-content: space-between; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.applications p { margin: 4px 0 0; }
.row-actions { display: flex; gap: 8px; }
.row-actions .button { padding: 6px 12px; font-size: 0.75rem; }
.sub-heading { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 8px; }
.danger-text { color: var(--danger) !important; }

.relation { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; box-shadow: inset 0 0 0 1px currentColor; }
.relation-1 { color: var(--ok); }
.relation-2 { color: var(--accent-2); }
.relation-3 { color: var(--danger); }
.relation-4 { color: var(--gold); }

/* ---- Admin --------------------------------------------------------------- */

.table-scroll { overflow: visible; }
@media (max-width: 900px) {
    .table-scroll { overflow-x: auto; }
    .admin-menu { position: static; width: 300px; }
}
.admin-table td { white-space: nowrap; }
.admin-actions details { position: relative; }
.admin-actions summary { cursor: pointer; color: var(--accent-2); list-style: none; font-weight: 600; }
.admin-actions summary::-webkit-details-marker { display: none; }
.admin-menu {
    position: absolute; right: 0; z-index: 5; margin-top: 6px; width: 340px;
    display: flex; flex-direction: column; gap: 10px; padding: 14px;
    background: var(--panel-strong); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.admin-menu .button { width: 100%; }
.mini-form { display: flex; gap: 6px; }
.mini-form input { min-width: 0; padding: 7px 8px; }
.mini-form .button { width: auto; flex: none; }
code.secret { font-family: var(--font-display); color: var(--gold); padding: 2px 6px; background: rgba(0, 0, 0, 0.4); user-select: all; }
.backups { margin-bottom: 18px; }
.backups-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.backups-head h2 { margin: 0; }
.backups code { font-family: var(--font-display); font-size: 0.78rem; }

/* ---- Bot ----------------------------------------------------------------- */

.bot-status {
    flex: 1;
    min-width: 320px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
}
.bot-status.running { box-shadow: inset 0 0 0 1px rgba(95, 224, 138, 0.35), 0 0 24px rgba(95, 224, 138, 0.12); }
.bot-status strong { font-size: 0.95rem; }
.bot-hp { width: 120px; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.bot-hp[hidden] { display: none; }
.bot-hp span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5a4e, #f5c044 40%, #5fe08a 75%); background-size: 120px 100%; transition: width .4s; }
.bot-status form[hidden] { display: none; }
.bot-earned { flex-basis: 100%; font-size: 0.82rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.bot-earned[hidden] { display: none; }

.bot-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bot-quick { font-size: 0.85rem; color: var(--text-dim); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.choice-grid.formations { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* .choice (option card) is defined once, in the Forms section. */
.formation-none { width: 30px; text-align: center; color: var(--text-dim); }

.segmented { display: inline-flex; border: 1px solid var(--line); }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 7px 18px; color: var(--text-dim); font-weight: 600; }
.segmented label + label span { border-left: 1px solid var(--line); }
.segmented input:checked + span { color: #fff; background: rgba(var(--accent-rgb), 0.3); }
.segmented.wide { display: flex; }
.segmented.wide label { flex: 1; text-align: center; }

.switch { display: flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; }
.switch input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.range { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.range output { font-family: var(--font-display); color: var(--gold); }
.range input { accent-color: var(--accent); }

@media (max-width: 900px) {
    .bot-form { grid-template-columns: 1fr; }
}

/* ---- Galaxy gates ---------------------------------------------------------------- */
.gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gate { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.gate-tier { display: inline-flex; gap: 2px; margin-left: auto; }
.gate-tier i { width: 7px; height: 10px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
.gate-tier.tier-easy i.on { background: var(--ok); box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
.gate-tier.tier-mid i.on { background: var(--gold); box-shadow: 0 0 6px rgba(245, 192, 68, 0.6); }
.gate-tier.tier-hard i.on { background: var(--danger); box-shadow: 0 0 6px rgba(255, 107, 107, 0.6); }
.gate-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; }
.gate-pay div { display: flex; align-items: center; gap: 7px; }
.gate-pay dt { display: flex; }
.gate-pay dd { margin: 0; font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: #fff; }
.gate-pay .coin, .gate-pay .hud-star { width: 18px; height: 18px; }
.gate-pay .coin { font-size: 0.55rem; }
.gate.active { box-shadow: inset 0 0 0 1px var(--accent), 0 0 26px rgba(var(--accent-rgb), 0.2); }
.gate-symbol {
    position: absolute;
    right: 10px;
    top: -14px;
    font-family: var(--font-display);
    font-size: 6.5rem;
    line-height: 1;
    color: rgba(var(--accent-2-rgb), 0.12);
    pointer-events: none;
}
.gate.done .gate-symbol { color: rgba(var(--accent-rgb), 0.18); }
.gate header { display: flex; align-items: center; gap: 10px; }
.gate h2 { margin: 0; }
.gate-boss { margin: 0; font-weight: 700; color: #fff; line-height: 1.3; }
.gate-boss span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--danger); }
.gate footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.gate-record { font-size: 0.78rem; color: var(--text-dim); }
.gate footer .button { white-space: nowrap; flex: none; }
.gate.done .gate-record { color: var(--ok); }
.gate button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }
.gate-run [hidden], #gate-message[hidden] { display: none; }

/* ---- Quests ------------------------------------------------------------------- */

.quest-table td { vertical-align: top; }
.quest-table tr.editing td { background: rgba(var(--accent-rgb), 0.08); }
.quest-table .actions { white-space: nowrap; }
.quest-editor h3 { margin: 18px 0 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.form-grid label, .quest-condition label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-dim); }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid label.check, .quest-condition label.check { flex-direction: row; align-items: center; gap: 8px; }
.quest-editor input, .quest-editor select, .quest-editor textarea { font: inherit; color: var(--text); background: rgba(3, 6, 13, 0.7); border: 1px solid var(--line); padding: 6px 8px; }
.quest-editor input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.quest-condition { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); }
.quest-condition .condition-head { grid-column: 1 / -1; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.quest-condition [hidden] { display: none; }
.reward-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 14px; margin-bottom: 14px; }
.reward-row { display: flex; gap: 8px; }
.reward-row select { flex: 1; min-width: 0; }
.reward-row input { width: 80px; }

.gate-entries { color: var(--ok); font-weight: 700; }
.gate-entries.none { color: var(--danger); }

/* Clan battle stations (/clan/stations) */
.sb-rules { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.sb-rules div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.sb-rules dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.sb-rules dd { margin: 0; font-size: 0.88rem; line-height: 1.4; }
.sb-rules small { display: block; font-size: 0.78rem; color: var(--text-dim); }
.station-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.station-step { padding: 16px 18px 16px 64px; }
.station-step .step-n { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; font: 800 1rem var(--font-display); color: #fff; background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(var(--accent-rgb), 0.8); border-radius: 50%; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.station-step h3 { margin: 0 0 4px; font-size: 1rem; }
.station-step p { margin: 0; font-size: 0.86rem; color: var(--text-dim); line-height: 1.45; }
.station-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.perk { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: rgba(10, 20, 40, 0.72); border: 1px solid rgba(245, 192, 68, 0.3); border-radius: 4px; }
.perk > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.perk strong { font-size: 0.98rem; color: #fff; }
.perk small { font-size: 0.76rem; color: var(--text-dim); }
.stations-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 1000px) { .station-steps, .station-perks, .stations-layout { grid-template-columns: 1fr; } }
.asteroid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.asteroid-head h2 { margin: 0; }
.asteroid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.asteroid { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid rgba(255, 255, 255, 0.15); border-radius: 4px; }
.asteroid strong { font-size: 0.92rem; }
.asteroid-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asteroid-map { font: 700 0.72rem var(--font-display); color: var(--accent-2); }
.asteroid-state { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.asteroid.built { border-left-color: var(--ok); }
.asteroid.built .asteroid-state { color: var(--ok); }
.asteroid.building { border-left-color: var(--gold); }
.asteroid.building .asteroid-state { color: var(--gold); }
.asteroid.mine { background: rgba(245, 192, 68, 0.08); }
.asteroid-owner { font-size: 0.76rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asteroid-owner.dim { color: var(--text-dim); }
.asteroid-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.asteroid-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--ok)); }
.data-table tr.mine td { background: rgba(255, 196, 0, 0.08); }

.button.small { padding: 6px 12px; font-size: 0.78rem; }

.spaceball-score { display: flex; gap: 10px; margin: 4px 0 8px; }
.spaceball-score span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 6px; background: rgba(255,255,255,0.05); font-weight: 700; letter-spacing: 0.06em; }
.spaceball-score b { display: block; font-size: 1.6rem; }
.spaceball-score .mmo b { color: #ff5b4a; }
.spaceball-score .eic b { color: #4aa8ff; }
.spaceball-score .vru b { color: #59d66b; }

/* Auction house (Pages/Auction): the original game's window, drawn in CSS (metal frame, black
   screen, Verdana, orange title, grey tabs with the active one yellow, blue view buttons, black
   and blue-grey rows, the selected one framed yellow, the item on the right with the bid field). */
.auh { max-width: 980px; margin: 0 auto; font-family: Verdana, Tahoma, Arial, sans-serif; }
.auh-frame { position: relative; padding: 14px 14px 30px; border-radius: 10px; border: 1px solid #5a6268;
    background: linear-gradient(#41474b, #24292c 6%, #1b1f22 94%, #30363a); box-shadow: inset 0 0 0 2px #111417, 0 8px 28px rgba(0, 0, 0, 0.6); }
.auh-screen { position: relative; padding: 8px 8px 10px; border: 1px solid #1f3747; border-radius: 6px 6px 4px 4px; background: #02060a; box-shadow: inset 0 0 0 1px #0a1922; }
.auh-top { display: flex; justify-content: space-between; align-items: flex-start; }
.auh-title { margin: 6px 0 10px 10px; font: 400 16px/1 Verdana, Tahoma, sans-serif; color: #f7a51c; text-transform: uppercase; letter-spacing: 0; }
.auh-menus { display: flex; gap: 4px; }
.auh-dropdown { position: relative; }
.auh-dropdown > button { position: relative; width: 158px; height: 22px; padding: 0 0 0 30px; text-align: left; font: 11px Verdana, sans-serif; color: #d9e5ec;
    background: linear-gradient(#25333e, #131c23); border: 1px solid #4c6678; border-radius: 3px; cursor: pointer; }
.auh-arrow { position: absolute; left: 4px; top: 2px; width: 15px; height: 15px; background: linear-gradient(#2d3b45, #141c22); border: 1px solid #5e7484; }
.auh-arrow::after { content: ""; position: absolute; left: 3px; top: 5px; border: 4px solid transparent; border-top: 5px solid #f7b600; }
.auh-dropdown ul { display: none; position: absolute; right: 0; top: 23px; z-index: 6; width: 158px; margin: 0; padding: 2px 0; list-style: none; background: #000; border: 1px solid #4c6678; }
.auh-dropdown.open ul { display: block; }
.auh-dropdown li a, .auh-dropdown li span { display: block; padding: 2px 6px; font: 12px Verdana, sans-serif; color: #f7b600; text-decoration: none; }
.auh-dropdown li a:hover { background: #1a2934; }
.auh-tabs { display: flex; gap: 4px; padding-left: 2px; }
.auh-tabs a { width: 138px; height: 22px; line-height: 22px; text-align: center; font: bold 12px Verdana, sans-serif; text-transform: uppercase; color: #7c8287;
    text-decoration: none; background: linear-gradient(#4b5156, #2a2e31 55%, #1c1f22); border: 1px solid #60676c; border-bottom: none; border-radius: 6px 6px 0 0; }
.auh-tabs a.active { color: #f7c51e; background: linear-gradient(#1f2225, #08090b); border-color: #7b8389; }
.auh-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; border-top: 1px solid #2f5266; }
.auh-views a { display: inline-block; width: 116px; height: 15px; line-height: 15px; margin-right: 3px; text-align: center; font: 11px Verdana, sans-serif; text-transform: uppercase;
    color: #8fcde9; text-decoration: none; background: linear-gradient(#1e3c4c, #112532); border: 1px solid #3f7e9d; border-radius: 3px; }
.auh-views a.active { color: #f7a51c; border-color: #b8e0f3; background: linear-gradient(#25495b, #152e3c); box-shadow: 0 0 3px #6fb8d9; }
.auh-ends { font: 11px Verdana, sans-serif; color: #e9eff3; }
.auh-ends b { font-weight: 400; color: #f7c51e; font-variant-numeric: tabular-nums; }
.auh-body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 6px; border-top: 1px solid #1d3a4a; }
.auh-body.history { grid-template-columns: minmax(0, 1fr); }
.auh-table { background: #000; }
.auh-row { display: grid; grid-template-columns: 2.1fr 1.4fr 1.4fr 1fr 0.8fr; align-items: center; width: 100%; min-height: 42px; padding: 0 8px; border: none;
    background: #030507; color: #fff; font: 11px Verdana, sans-serif; text-align: left; cursor: pointer; }
.auh-body.history .auh-row { grid-template-columns: 2.1fr 1.4fr 1.4fr 1fr; }
.auh-row > span:nth-child(n+4) { text-align: center; }
.auh-rows .auh-row:nth-child(even) { background: #16232d; }
.auh-rows .auh-row.selected { background: #3b4c5c; outline: 3px solid #f2b705; outline-offset: -3px; }
.auh-head { min-height: 26px; font-weight: 700; cursor: default; background: #000; border-bottom: 1px solid #1d3443; }
.auh-rows { max-height: 300px; overflow-y: auto; }
.auh-rows::-webkit-scrollbar { width: 13px; }
.auh-rows::-webkit-scrollbar-track { background: #08131b; border-left: 1px solid #1d3443; }
.auh-rows::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8e9aa1, #c9d2d7, #8e9aa1); border: 2px solid #08131b; border-radius: 2px; }
.auh-item { display: flex; align-items: center; gap: 12px; }
.auh-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: linear-gradient(#3b4248, #1f2428); border: 1px solid #5b646b; }
.auh-icon img { max-width: 28px; max-height: 28px; }
.auh-bidder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auh-empty { margin: 0; padding: 20px 12px; color: #8fa9b8; font: 12px Verdana, sans-serif; }
.auh-side { position: relative; padding: 8px 6px; background: #02060a; border-left: 1px solid #1d3443; }
.auh-side::before, .auh-side::after { content: ""; position: absolute; left: 4px; right: 4px; height: 6px; border: 1px solid #34586d; }
.auh-side::before { top: 4px; border-bottom: none; }
.auh-side::after { bottom: 4px; border-top: none; }
.auh-picture { display: grid; place-items: center; width: 63px; height: 63px; margin: 12px auto; background: linear-gradient(#5d6469, #2a2f33); border: 2px solid #8e979d; }
.auh-picture img { max-width: 59px; max-height: 59px; }
.auh-text { max-height: 96px; overflow: auto; margin-bottom: 12px; padding: 6px 4px; color: #e8f2f8; font: 11px/1.5 Verdana, sans-serif;
    border-top: 1px solid #2b4b5c; border-bottom: 1px solid #2b4b5c; }
.auh-amount { display: flex; justify-content: center; align-items: center; gap: 6px; }
.auh-amount input { width: 96px; height: 20px; text-align: center; color: #d2e5ef; font: 11px Verdana, sans-serif; background: #07111a; border: 1px solid #34596e; }
.auh-amount input::-webkit-inner-spin-button, .auh-amount input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.auh-credits { display: grid; place-items: center; width: 22px; height: 22px; background: #0b1822; border: 1px solid #2f5367; }
.auh-credits svg { width: 16px; height: 16px; fill: #82dcff; filter: drop-shadow(0 0 2px #39b6ff); }
.auh-bid button, .auh-popup button { width: 100%; height: 20px; margin-top: 7px; font: 13px Verdana, sans-serif; color: #fff; text-transform: uppercase; cursor: pointer;
    background: linear-gradient(#7fa4cb, #4d75a3 45%, #2e4f7b); border: 1px solid #8aaccf; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.auh-bid button:disabled { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; }
.auh-note { margin: 6px 0 0; text-align: center; color: #8fa9b8; font: 10px Verdana, sans-serif; }
.auh-lights { position: absolute; bottom: 9px; }
.auh-lights.left { left: 22%; }
.auh-lights.right { right: 22%; }
.auh-lights i { display: inline-block; width: 10px; height: 5px; margin: 0 3px; border-radius: 3px; background: #dfe8ed; box-shadow: 0 0 4px #fff; }
.auh-popup { position: absolute; left: 50%; top: 42%; z-index: 10; width: 300px; padding: 14px 16px 10px; transform: translate(-50%, -50%); text-align: center; color: #e8f2f8;
    font: 12px Verdana, sans-serif; background: linear-gradient(#1e2c36, #0b1319); border: 1px solid #5c8096; box-shadow: 0 0 0 2px #0a0f13, 0 10px 30px #000; }
.auh-popup.error p { color: #ffb3a8; }
.auh-popup button { width: 120px; }
.auh-rules { margin: 10px 4px 0; font-size: 0.8rem; color: var(--text-dim); }
@media (max-width: 760px) { .auh-body { grid-template-columns: 1fr; } .auh-row { grid-template-columns: 2fr 1fr 1fr; } .auh-row > :nth-child(n+4) { display: none; } }

/* Visitors' header (user's design, 2026-10-13): the name spaced out, the menu in the middle. */
.guest .brand { letter-spacing: 0.42em; }
/* The menu sits in the middle of the page, not of the space the logo leaves (the right side is empty). */
.guest-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); justify-content: center; }
@media (max-width: 1100px) { .guest-nav { position: static; transform: none; } }
.guest .site-header > .user-box { grid-column: 3; }
.guest-nav a { letter-spacing: 0.1em; padding: 6px 18px; color: #b8c6d6; background: none; border: 0; box-shadow: none; clip-path: none; }
.guest-nav a.active, .guest-nav a:hover { color: #fff; background: none; border: 0; box-shadow: none; }
.guest-nav a::after { display: none; }

/* Development only: marks the PC's test server (the live server runs in Production). */
.env-badge { position: fixed; left: 12px; bottom: 12px; z-index: 100; padding: 5px 12px; border: 1px solid #ff9f2e; border-radius: 3px;
    background: rgba(60, 30, 0, .9); color: #ffcf8a; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 0 14px rgba(255, 159, 46, .45); pointer-events: none; }

/* Announcement parchment (Yönetim -> Duyuru): a scroll under the header that unrolls downwards. */
.notice-scroll { position: fixed; z-index: 90; top: 74px; left: 50%; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .65)); }
.notice-scroll[hidden] { display: none; }
.notice-rod { position: relative; display: block; height: 18px; margin: 0 -14px; border-radius: 9px;
    background: linear-gradient(180deg, #f6d48a 0%, #b9832f 38%, #6e4410 70%, #3a2306 100%);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, .7), 0 2px 4px rgba(0, 0, 0, .5); }
.notice-rod::before, .notice-rod::after { content: ""; position: absolute; top: -4px; width: 16px; height: 26px; border-radius: 6px;
    background: linear-gradient(180deg, #ffe6a6, #c08a30 45%, #5a370b); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.notice-rod::before { left: -10px; }
.notice-rod::after { right: -10px; }
.notice-paper {
    position: relative; max-height: 0; overflow: hidden; padding: 0 34px; text-align: center; color: #3b2408;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(ellipse at 0% 50%, rgba(120, 72, 20, .35), transparent 22%),
        radial-gradient(ellipse at 100% 50%, rgba(120, 72, 20, .35), transparent 22%),
        linear-gradient(180deg, #e9cf98, #f6e6bf 18%, #f3dfb2 50%, #e8cd94 82%, #d9b676);
    box-shadow: inset 0 10px 14px -10px rgba(80, 45, 8, .7), inset 0 -10px 14px -10px rgba(80, 45, 8, .7);
    transition: max-height 1.4s cubic-bezier(.2, .8, .25, 1), padding 1.4s cubic-bezier(.2, .8, .25, 1);
}
.notice-scroll.open .notice-paper { max-height: 260px; padding: 18px 34px 20px; }
.notice-scroll.closing .notice-paper { transition-duration: .8s; }
.notice-paper small { display: block; margin-bottom: 4px; font-family: "Orbitron", var(--font-display); font-size: .7rem; letter-spacing: .4em; text-transform: uppercase; color: #8a5a1c; }
.notice-paper p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 0 rgba(255, 245, 220, .8); }
.notice-close { position: absolute; top: 8px; right: 12px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(90, 55, 12, .15); color: #5a370b; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.notice-close:hover { background: rgba(90, 55, 12, .3); }
/* Phones: the parchment unrolls at the bottom, the menu stays free. */
@media (max-width: 640px) {
    .notice-scroll { top: auto; bottom: 14px; }
    .notice-scroll.open .notice-paper { padding: 14px 30px 14px; }
    .notice-paper p { font-size: 1.1rem; }
}
/* Footer links: privacy, rules, contact (/gizlilik). */
.footer-links { margin-top: 6px; font-size: .78rem; letter-spacing: .04em; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: #fff; }
.landing-footer a { color: #a7b8cb; }
.landing-footer a:hover { color: #fff; }