/* ============================================================
   EIRA — panel patchera, kierunek "Ekran z gry"
   Grafika z gry jako tło całości; treść na przyciemnionych,
   szklanych taflach z mosiężnym okuciem. Cinzel + Segoe.
   Tło podmienisz wymieniając plik wwwroot/img/tlo.png.
   ============================================================ */

:root {
    --night: #14100c;
    --deep: #0e0a07;
    --glass: rgba(24, 18, 12, .82);
    --glass-2: rgba(16, 11, 8, .78);
    --edge: #3d3226;
    --edge-hi: #55452e;
    --gold: #c6a15b;
    --gold-hi: #ebce93;
    --gold-dim: #8a7147;
    --ink: #e6dcc9;
    --muted: #9a8b72;
    --ember: #c14b33;
    --ember-deep: #8e3322;
    --jade: #7ba98a;
    --serif: "Cinzel", "Palatino Linotype", Georgia, serif;
    --sans: "Segoe UI", system-ui, sans-serif;
    --mono: Consolas, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--deep);
    color: var(--ink);
    font: 15px/1.55 var(--sans);
}

/* grafika z gry pod całą stroną + przyciemnienie, żeby treść była czytelna */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--deep) url("/img/tlo.png") center 30% / cover no-repeat;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(130% 100% at 50% 40%, transparent 20%, rgba(10, 7, 5, .8) 100%),
        linear-gradient(180deg, rgba(12, 8, 6, .84), rgba(12, 8, 6, .93) 40%, rgba(12, 8, 6, .96));
}

::selection { background: rgba(198, 161, 91, .35); }

:focus-visible {
    outline: 2px solid var(--gold-hi);
    outline-offset: 2px;
    border-radius: 3px;
}

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

/* ---------- nagłówek: szklana belka ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 30px;
    height: 64px;
    background: rgba(18, 13, 9, .78);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(198, 161, 91, .22);
}

.brand a {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 23px;
    letter-spacing: .16em;
    color: var(--gold);
    text-decoration: none;
    text-shadow: 0 0 20px rgba(198, 161, 91, .45);
}

.brand span {
    display: block;
    margin-top: -3px;
    font: 11px var(--sans);
    letter-spacing: .04em;
    color: var(--muted);
}

.topbar nav { display: flex; gap: 3px; }

.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
}

.topbar nav a:hover { color: var(--gold-hi); background: rgba(198, 161, 91, .08); }

.topbar nav a.on {
    color: var(--gold-hi);
    background: rgba(198, 161, 91, .1);
    border-color: rgba(198, 161, 91, .3);
}

.session { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--muted); }
.session b { color: var(--ink); font-weight: 600; }

/* ---------- szkielet ---------- */

main { flex: 1; width: min(980px, 93vw); margin: 30px auto 46px; }

footer {
    text-align: center;
    color: var(--muted);
    padding: 18px;
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: .22em;
    background: rgba(12, 8, 6, .6);
    border-top: 1px solid rgba(61, 50, 38, .5);
}

footer .orn { color: var(--gold-dim); font-size: 9px; vertical-align: 2px; }

h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(23px, 3vw, 28px);
    letter-spacing: .07em;
    color: var(--gold);
    margin: 0 0 4px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.sub { color: var(--muted); margin: 0 0 24px; max-width: 68ch; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* ---------- pasek statystyk ---------- */

.stats { display: flex; gap: 14px; margin: 0 0 22px; }

.stat {
    flex: 1;
    background: var(--glass);
    backdrop-filter: blur(7px);
    border: 1px solid var(--edge);
    border-top-color: var(--edge-hi);
    border-radius: 8px;
    padding: 13px 17px;
}

.stat .v {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 21px;
    color: var(--gold-hi);
    font-variant-numeric: tabular-nums;
}

.stat .k { color: var(--muted); font-size: 12px; margin-top: 1px; }

/* ---------- karty: szklane tafle ---------- */

.card {
    background: var(--glass);
    backdrop-filter: blur(7px);
    border: 1px solid var(--edge);
    border-top-color: var(--edge-hi);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: 0 22px 50px -30px #000;
}

.card h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .08em;
    color: var(--gold);
    margin: 0 0 16px;
    padding-bottom: 10px;
    background: linear-gradient(90deg, var(--gold-dim), transparent 55%) bottom / 100% 1px no-repeat;
}

/* ---------- formularze ---------- */

label {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin: 13px 0 5px;
}

input[type=text], input[type=password], textarea, select {
    width: 100%;
    background: rgba(10, 7, 5, .75);
    color: var(--ink);
    border: 1px solid var(--edge);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--gold-dim);
    box-shadow: 0 0 0 3px rgba(198, 161, 91, .15);
}

input[type=file] { color: var(--muted); font: inherit; }

/* ---------- przyciski ---------- */

.btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #96753b);
    color: #241708;
    border: 1px solid var(--edge-hi);
    border-radius: 6px;
    padding: 10px 22px;
    font: 600 14px var(--sans);
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        0 1px 0 rgba(255, 244, 214, .5) inset,
        0 8px 20px -8px rgba(198, 161, 91, .6);
    transition: filter .15s, box-shadow .15s;
}

.btn:hover { filter: brightness(1.07); }
.btn:active { filter: brightness(.94); }
.btn.small { padding: 6px 13px; font-size: 12.5px; }
.btn.wide { width: 100%; margin-top: 20px; }

.btn.ghost {
    background: rgba(10, 7, 5, .4);
    color: var(--ink);
    border-color: var(--edge);
    box-shadow: none;
}

.btn.ghost:hover { color: var(--gold-hi); border-color: var(--gold-dim); filter: none; }

.btn.danger {
    background: linear-gradient(180deg, #d65a44, var(--ember) 55%, var(--ember-deep));
    color: #fff4ec;
    border-color: #5c2a1c;
    box-shadow: 0 1px 0 rgba(255, 220, 200, .25) inset;
}

.btn.danger:hover { filter: brightness(1.08); }

/* ---------- tabele ---------- */

table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--edge-hi);
}

td { padding: 9px 10px; border-bottom: 1px solid rgba(61, 50, 38, .5); }

tr:hover td {
    background: rgba(198, 161, 91, .06);
    box-shadow: 2px 0 0 var(--gold-dim) inset;
}

td.num { text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.mono { font-family: var(--mono); font-size: 13px; }

/* ---------- plakietki ---------- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid;
}

.badge.on { color: var(--jade); border-color: rgba(123, 169, 138, .45); background: rgba(123, 169, 138, .12); }
.badge.off { color: #d98a76; border-color: rgba(193, 75, 51, .45); background: rgba(193, 75, 51, .14); }

/* ---------- komunikaty ---------- */

.toast {
    border: 1px solid var(--gold-dim);
    border-left-width: 3px;
    background: rgba(24, 18, 12, .88);
    backdrop-filter: blur(6px);
    color: var(--gold-hi);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.toast::before { content: "◆  "; color: var(--gold-dim); font-size: 10px; vertical-align: 1px; }

.error { color: #e08a72; margin-top: 14px; }

/* ---------- strefa uploadu ---------- */

.dropzone {
    border: 2px dashed var(--edge-hi);
    border-radius: 10px;
    padding: 50px 20px;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    background: rgba(10, 7, 5, .35);
    transition: border-color .15s, color .15s, background .15s;
}

.dropzone:hover, .dropzone.over {
    border-color: var(--gold);
    color: var(--gold-hi);
    background: rgba(198, 161, 91, .08);
}

/* ---------- układ pomocniczy ---------- */

.row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }
.row .fit { flex: 0; min-width: auto; }
.inline-form { display: inline; }

/* ---------- logowanie: grafika na pełnym ekranie ---------- */

body.anon header, body.anon footer { display: none; }
body.anon main { margin: 0; width: auto; }

/* na logowaniu grafika gra pierwsze skrzypce — lżejsze przyciemnienie */
body.anon::after {
    background:
        radial-gradient(120% 100% at 50% 55%, transparent 30%, rgba(10, 7, 5, .85) 100%),
        linear-gradient(180deg, rgba(10, 7, 5, .3), rgba(10, 7, 5, .55));
}

.login-scene {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
}

.login-frame { position: relative; padding: 15px; }

.login-frame::before, .login-frame::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--gold-dim);
}

.login-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.login-frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.login-wrap {
    width: min(370px, 88vw);
    margin: 0;
    padding: 32px 34px 28px;
    text-align: center;
    background: rgba(22, 16, 11, .84);
    backdrop-filter: blur(8px);
    border: 1px solid var(--edge-hi);
    border-radius: 8px;
    box-shadow: 0 34px 80px -30px #000;
}

.login-wrap form { text-align: left; }

.login-mark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: .22em;
    color: var(--gold);
    text-shadow: 0 0 26px rgba(198, 161, 91, .5);
    margin-right: -.22em;
}

.login-sub { color: var(--muted); margin: 2px 0 18px; font-size: 13px; }

/* ---------- wąskie ekrany ---------- */

@media (max-width: 780px) {
    .topbar { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 10px 18px; }
    .session { margin-left: 0; }
    main { margin-top: 20px; }
    .card { padding: 18px; }
    .stats { flex-wrap: wrap; }
}