:root {
    --ink: #e4e1e6;
    /* on-surface */
    --ink-dim: #e1bfb4;
    /* on-surface-variant */
    --bg: #131316;
    /* background */
    --bg-2: #1f1f22;
    /* surface-container */
    --bg-3: #2a2a2d;
    /* surface-container-high */
    --line: #594139;
    /* outline-variant */
    --gold: #ffb59c;
    /* primary */
    --gold-dim: #f2642d;
    /* primary-container */
    --green: #42dae4;
    /* secondary (using secondary for positive actions too, or just teal) */
    --red: #ffb4ab;
    /* error */
    --blue: #00bec7;
    /* secondary-container */
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.65 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    overflow-wrap: break-word;
}

a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a:hover,
a:focus-visible {
    border-bottom-color: var(--gold);
}

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

.skip {
    position: absolute;
    left: -9999px;
    background: var(--gold);
    color: #14120f;
    padding: .6rem 1rem;
    z-index: 50;
}

.skip:focus {
    left: .5rem;
    top: .5rem;
}

/* --- antet ------------------------------------------------------------- */

.top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.2rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.25rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    border: 0;
}

.brand-mark {
    color: var(--gold);
    font-size: 1.1rem;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-left: auto;
}

.nav a {
    padding: .35rem .7rem;
    border-radius: var(--radius);
    color: var(--ink-dim);
    border: 0;
    font-size: .95rem;
}

.nav a:hover,
.nav a:focus-visible {
    background: var(--bg-3);
    color: var(--ink);
}

.nav a[aria-current="page"] {
    background: var(--bg-3);
    color: var(--gold);
}

.dot {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 .3em;
    background: var(--red);
    color: #fff;
    border-radius: 1em;
    font-size: .75rem;
    text-align: center;
    vertical-align: 1px;
}

/* --- bare de stare ----------------------------------------------------- */

.bars {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.4rem;
    width: 100%;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--ink-dim);
}

.bar {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.bar-label {
    min-width: 3.6em;
}

.bar-track {
    display: block;
    width: 110px;
    height: 7px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
}

.bar-fill.breath {
    background: var(--blue);
}

.bar-fill.weight {
    background: var(--gold-dim);
}

.bar-fill.frays {
    background: var(--red);
}

.bar-num {
    font-variant-numeric: tabular-nums;
}

.coin {
    margin-left: auto;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* --- corp -------------------------------------------------------------- */

.wrap {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 3rem;
}

h1,
h2,
h3 {
    font-weight: normal;
    letter-spacing: .01em;
    line-height: 1.25;
}

h1 {
    font-size: 1.9rem;
    margin: 0 0 .3rem;
}

h2 {
    font-size: 1.35rem;
    margin: 2rem 0 .6rem;
    color: var(--gold);
}

h3 {
    font-size: 1.1rem;
    margin: 1.4rem 0 .4rem;
}

.lede {
    color: var(--ink-dim);
    margin: 0 0 1.6rem;
    font-size: 1.05rem;
}

.quiet {
    color: var(--ink-dim);
    font-size: .9rem;
}

.card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin: 0 0 1rem;
}

.card h3 {
    margin-top: 0;
}

.card.done {
    border-color: var(--gold-dim);
}

.card.locked {
    opacity: .55;
}

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tag {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1em;
    background: var(--bg-3);
    border: 1px solid var(--line);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.tag.ok {
    border-color: var(--green);
    color: var(--green);
}

.tag.bad {
    border-color: var(--red);
    color: var(--red);
}

/* --- formulare --------------------------------------------------------- */

label {
    display: block;
    margin: .9rem 0 .25rem;
    color: var(--ink-dim);
    font-size: .9rem;
}

input[type=text],
input[type=email],
input[type=password],
select,
textarea {
    width: 100%;
    padding: .55rem .7rem;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: .98rem;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gold);
}

button,
.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: .55rem 1.2rem;
    background: var(--gold);
    color: #14120f;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    font: inherit;
    font-size: .95rem;
    cursor: pointer;
}

button:hover,
.btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
    color: #14120f;
}

button[disabled] {
    background: var(--bg-3);
    border-color: var(--line);
    color: var(--ink-dim);
    cursor: not-allowed;
}

button.ghost,
.btn.ghost {
    background: transparent;
    color: var(--ink-dim);
    border-color: var(--line);
}

button.ghost:hover {
    background: var(--bg-3);
    color: var(--ink);
}

.hint {
    color: var(--ink-dim);
    font-size: .85rem;
    margin: .3rem 0 0;
}

/* --- mesaje ------------------------------------------------------------ */

.flash {
    padding: .7rem 1rem;
    margin: 0 0 1.2rem;
    border-left: 3px solid var(--gold);
    background: var(--bg-2);
    border-radius: var(--radius);
}

.flash.ok {
    border-left-color: var(--green);
}

.flash.warn {
    border-left-color: var(--gold);
}

.flash.bad {
    border-left-color: var(--red);
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 1rem;
    font-size: .95rem;
}

th,
td {
    padding: .5rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--ink-dim);
    font-weight: normal;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

td.num,
th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- alegeri (popor, focus, abordare la incercare) --------------------- */

.choices {
    display: grid;
    gap: .8rem;
    margin: 1rem 0;
}

.choice {
    display: block;
    margin: 0;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice .box {
    display: block;
    padding: .9rem 1.1rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.choice .box strong {
    color: var(--ink);
}

.choice .box p {
    margin: .35rem 0 0;
    color: var(--ink-dim);
    font-size: .92rem;
}

.choice input:checked+.box {
    border-color: var(--gold);
    background: var(--bg-3);
}

.choice input:focus-visible+.box {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* --- subsol ------------------------------------------------------------ */

.foot {
    border-top: 1px solid var(--line);
    padding: 1.2rem;
    text-align: center;
    color: var(--ink-dim);
    font-size: .85rem;
}

.foot p {
    margin: .2rem 0;
}

/* --- ecrane mici ------------------------------------------------------- */

@media (max-width: 640px) {
    .top {
        padding: .7rem .9rem;
    }

    .nav {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .bar-track {
        width: 80px;
    }

    .coin {
        margin-left: 0;
        width: 100%;
    }

    h1 {
        font-size: 1.6rem;
    }

    .wrap {
        padding: 1.2rem .9rem 2.5rem;
    }
}

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

/* --- Tailwind Custom Utilities --- */
.glass-panel {
    background-color: rgba(27, 27, 30, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.glow-active {
    box-shadow: 0 0 15px rgba(242, 100, 45, 0.2);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}



/* =============================================================================
   PARTEA A DOUA: PAGINILE DE POARTA
   autentificare, inregistrare, parola noua
   =============================================================================

   Totul aici e sub `.gate-page`, clasa pusa pe <html> de _gate.php. Motivul e
   concret, nu de stil: cele doua seturi de reguli folosesc aceleasi nume
   pentru lucruri diferite. `.brand` e sigla din bara de sus in joc si
   marca din mijlocul cartii la poarta. `.hint` e text de ajutor in amandoua,
   dar cu alt spatiu. `--gold` are doua valori apropiate, dar diferite.

   Lipite pur si simplu una peste alta, ultima ar castiga si ar schimba
   culorile si spatierea din tot jocul. Sub o clasa pe <html>, fiecare set isi
   vede de treaba lui, iar variabilele CSS se mostenesc in jos, deci paleta
   portii se aplica exact acolo unde trebuie si nicaieri altundeva.

   Clasa e pe <html>, nu pe <body>, ca sa se poata schimba si fundalul lui
   <html>: altfel, cand pagina e mai scurta decat fereastra sau cand se trage
   dincolo de capat, se vede alb in jurul cartii. */

.gate-page {
    /* Paleta portii. Numele se repeta fata de cele de sus, dinadins:
       aceleasi notiuni, alte valori, si nu se amesteca fiindca aici
       incepe alt subarbore. */
    --gold: #c99a24;
    --gold-light: #e2bb52;
    --gold-dark: #705116;
    --cream: #e7ddc8;
    --text: #b5a68a;
    --muted: #8a7d66;
    --border: rgba(190, 143, 45, 0.35);
    --bad: #d08370;
    --good: #8fbd77;

    --title: "Cinzel", "Trajan Pro", "Optima", "Palatino Linotype", Palatino, serif;
    --body: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

    min-height: 100%;
    background: #080705;
}

/* Ce vine din partea intai si trebuie oprit aici.
   ---------------------------------------------------------------------------
   Regulile de joc de mai sus se aplica pe `body`, `h1`, `input`, `button`,
   adica exact pe elementele din care e facuta si cartea de la poarta. Cele mai
   multe sunt acoperite de regulile de mai jos, dar cateva proprietati NU se
   suprapun si se strecoara. Nu se vad la o privire rapida, dar schimba desenul:

     line-height   din scurtatura `font: 16px/1.65`: impinge fiecare bloc in
                   jos si inaltea cartea cu 96 de pixeli
     letter-spacing  0.01em pe titluri: la 53px inseamna o jumatate de pixel
                   pe litera, deci titlul iese altfel decat a fost desenat
     border-radius 4px pe campuri si pe butoane: colturile trebuie sa fie drepte
     text-transform  uppercase de pe sigla din bara de sus
     border-bottom pe legaturi, pentru sublinierea din joc

   Fiecare se stinge explicit. Verificarea nu e din ochi: `_dev-tools` compara
   TOATE proprietatile calculate ale fiecarui element de la poarta, inainte si
   dupa unificare, si geometria pana la pixel. */

.gate-page h1 {
    letter-spacing: normal;
}

.gate-page .brand,
.gate-page .brand i {
    text-transform: none;
}

.gate-page .box input,
.gate-page .peek,
.gate-page .oath-button {
    border-radius: 0;
}

.gate-page .peek {
    font: inherit;
    font-size: 18px;
    line-height: 1;
}

/* `overflow-wrap: break-word` vine tot din partea intai si RAMANE, dinadins: nu
   are efect decat cand un cuvant ar iesi din carte, si atunci e exact ce vrei. */

/* Resetul de spatii se aplica numai la poarta. In joc, marginile implicite ale
   titlurilor si paragrafelor sunt folosite; un reset global le-ar sterge pe
   toate si ar trebui rescrise una cate una. */
.gate-page * {
    margin: 0;
    padding: 0;
}

/* Clasa `gate-page` se pune si pe <html>, si pe <body>. Nu din nesiguranta:
   pe <html> e nevoie ca sa se poata schimba fundalul de dincolo de pagina, iar
   pe <body> ca regulile sa se aplice si daca, dintr-un fisier ramas in urma la
   incarcarea pe server, unul din cele doua nu are clasa. Cand lipseste una,
   pagina isi pierde tot desenul si se aseaza in coloana: e o cadere zgomotoasa
   si greu de diagnosticat, deci merita cele doua cuvinte in plus. */
.gate-page body,
body.gate-page {
    min-height: 100vh;
    font-family: var(--body);
    /* `line-height: normal` explicit, nu din intamplare. Regula de joc de mai
       sus foloseste scurtatura `font: 16px/1.65 ...`, care stabileste SI
       inaltimea randului. Aceea se mosteneste in toata pagina, inclusiv aici,
       si impinge fiecare bloc cu cativa pixeli in jos: cartea creste cu
       aproape o suta de pixeli si nimic nu mai sta unde a fost desenat.
       Fiecare bloc de mai jos care are propria inaltime de rand si-o pune
       singur. */
    line-height: normal;
    color: var(--cream);
    background:
        radial-gradient(circle at 85% 30%, rgba(155, 105, 24, 0.10), transparent 30%),
        radial-gradient(circle at 10% 80%, rgba(155, 105, 24, 0.08), transparent 30%),
        linear-gradient(135deg, #050504, #0c0a07 50%, #050403);
    background-attachment: fixed;
}

/* Textura de deasupra. pointer-events:none, altfel ar inghiti clicurile. */
.gate-page body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    z-index: 30;
    background-image: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 3px);
}

/* `border: 0` nu e de prisos: regula de joc de mai sus pune pe fiecare legatura
   o margine de jos transparenta, ca sa se coloreze la trecerea cu mausul. Aici
   nu e vrut asa, si in plus acel pixel schimba inaltimea legaturilor. */
.gate-page a {
    color: var(--gold);
    text-decoration: none;
    border: 0;
}

.gate-page a:hover,
.gate-page a:focus-visible {
    color: var(--gold-light);
}

.gate-page :focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.gate-page .skip {
    position: absolute;
    left: -9999px;
    background: var(--gold);
    color: #14120f;
    padding: .6rem 1rem;
    z-index: 50;
}

.gate-page .skip:focus {
    left: .5rem;
    top: .5rem;
}

/* --- pagina ------------------------------------------------------------- */

.gate-page .gate {
    width: min(760px, calc(100% - 40px));
    min-height: 100vh;
    margin: auto;
    padding: 45px 0;
    display: flex;
    align-items: center;
}

.gate-page .gate-card {
    position: relative;
    width: 100%;
    padding: 60px 70px;
    background: linear-gradient(145deg, rgba(23, 21, 17, 0.98), rgba(7, 7, 6, 0.99));
    border: 1px solid var(--border);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), inset 0 0 80px rgba(0, 0, 0, 0.55);
}

.gate-page .gate-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(194, 148, 49, 0.17);
}

.gate-page .gate-content {
    position: relative;
    z-index: 2;
}

/* --- colturi ------------------------------------------------------------ */

.gate-page .corner {
    position: absolute;
    width: 45px;
    height: 45px;
    opacity: .75;
}

.gate-page .corner.tl {
    top: 14px;
    left: 14px;
    border-top: 1px solid var(--gold-dark);
    border-left: 1px solid var(--gold-dark);
}

.gate-page .corner.tr {
    top: 14px;
    right: 14px;
    border-top: 1px solid var(--gold-dark);
    border-right: 1px solid var(--gold-dark);
}

.gate-page .corner.bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 1px solid var(--gold-dark);
    border-left: 1px solid var(--gold-dark);
}

.gate-page .corner.br {
    bottom: 14px;
    right: 14px;
    border-bottom: 1px solid var(--gold-dark);
    border-right: 1px solid var(--gold-dark);
}

/* --- antet -------------------------------------------------------------- */

.gate-page .sigil {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(213, 166, 53, .75);
    border-radius: 50%;
    color: var(--gold-light);
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 0 25px rgba(202, 151, 38, .12), inset 0 0 15px rgba(190, 138, 28, .08);
}

.gate-page .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 18px;
    font-family: var(--title);
    letter-spacing: 6px;
    font-size: 19px;
    color: #ded2bb;
}

.gate-page .brand i {
    font-style: normal;
    color: var(--gold);
    font-size: 10px;
}

.gate-page h1 {
    text-align: center;
    font-family: var(--title);
    font-weight: 500;
    font-size: clamp(34px, 6vw, 53px);
    line-height: 1.04;
    color: #e8dfcd;
    text-shadow: 0 4px 15px rgba(0, 0, 0, .85);
}

.gate-page .rule {
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.gate-page .rule span {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.gate-page .rule span:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}

.gate-page .rule b {
    color: var(--gold);
    font-weight: normal;
}

.gate-page .intro {
    max-width: 400px;
    margin: 0 auto 34px;
    text-align: center;
    color: var(--text);
    font-size: 19px;
    line-height: 1.4;
}

/* --- mesaje ------------------------------------------------------------- */

.gate-page .notes {
    margin: 0 0 24px;
    list-style: none;
}

.gate-page .note {
    padding: .7rem 1rem;
    margin: 0 0 .6rem;
    background: rgba(0, 0, 0, .35);
    border-left: 3px solid var(--gold);
    font-size: 16px;
    line-height: 1.45;
}

.gate-page .note.bad {
    border-left-color: var(--bad);
    color: #eccbc2;
}

.gate-page .note.good {
    border-left-color: var(--good);
    color: #d6e8cb;
}

.gate-page .note.warn {
    border-left-color: var(--gold);
    color: #ecdcb8;
}

/* --- formular ----------------------------------------------------------- */

.gate-page .field {
    margin-bottom: 21px;
}

.gate-page .field>label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--title);
    color: #d4c5a5;
    font-size: 12px;
    letter-spacing: .6px;
}

.gate-page .box {
    height: 57px;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(178, 136, 51, .42);
    background: linear-gradient(180deg, rgba(17, 16, 13, .98), rgba(10, 9, 7, .98));
    transition: border-color .25s ease, box-shadow .25s ease;
}

.gate-page .box:focus-within {
    border-color: rgba(227, 181, 69, .85);
    box-shadow: 0 0 20px rgba(194, 145, 35, .08);
}

.gate-page .box.wrong {
    border-color: rgba(208, 131, 112, .7);
}

.gate-page .box .mark {
    width: 55px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(177, 134, 49, .25);
    color: #ae9f7b;
    font-size: 18px;
    user-select: none;
}

.gate-page .box input {
    width: 100%;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #e2d6bf;
    font-family: var(--body);
    font-size: 17px;
}

.gate-page .box input::placeholder {
    color: #756a54;
}

/* Campul de parola completat automat de browser primeste, in Chrome, un fond
   albastru din care nu se mai vede nimic. Umbra interioara il acopera. */
.gate-page .box input:-webkit-autofill,
.gate-page .box input:-webkit-autofill:hover,
.gate-page .box input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e2d6bf;
    -webkit-box-shadow: 0 0 0 60px #100f0c inset;
    caret-color: #e2d6bf;
}

.gate-page .peek {
    width: 52px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #a99a74;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: color .2s ease;
}

.gate-page .peek:hover,
.gate-page .peek:focus-visible {
    color: var(--gold-light);
}

.gate-page .hint {
    display: block;
    margin-top: 6px;
    padding-left: 55px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.gate-page .aside {
    display: inline-block;
    margin: 8px 0 0 55px;
    font-size: 15px;
}

.gate-page .field-error {
    display: none;
    margin: 6px 0 0 55px;
    color: var(--bad);
    font-size: 15px;
}

.gate-page .field-error.show {
    display: block;
}

/* --- buton -------------------------------------------------------------- */

.gate-page .oath-button {
    width: 100%;
    min-height: 65px;
    margin-top: 12px;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 3px double #674a12;
    background: linear-gradient(180deg, #e0b84a, #c8911e);
    color: #1a1306;
    font-family: var(--title);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(255, 221, 116, .22), 0 7px 25px rgba(0, 0, 0, .45);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.gate-page .oath-button i {
    font-style: normal;
    color: #856218;
}

.gate-page .oath-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: inset 0 0 0 2px rgba(255, 224, 125, .25), 0 10px 30px rgba(191, 139, 29, .12);
}

.gate-page .oath-button:active {
    transform: translateY(0);
}

.gate-page .oath-button[disabled] {
    background: linear-gradient(180deg, #4a4235, #38322a);
    border-color: #3d372c;
    color: #8b8271;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: none;
}

/* --- despartitor -------------------------------------------------------- */

.gate-page .or {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 28px 0 22px;
}

.gate-page .or span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 148, 47, .4));
}

.gate-page .or span:last-child {
    background: linear-gradient(90deg, rgba(195, 148, 47, .4), transparent);
}

.gate-page .or b {
    font-family: var(--title);
    font-size: 11px;
    color: #a59776;
    font-weight: normal;
}

.gate-page .swap {
    text-align: center;
    color: #a99b7f;
    font-size: 17px;
}

.gate-page .swap a {
    margin-left: 6px;
}

.gate-page .foot-note {
    margin-top: 26px;
    text-align: center;
    color: #6f6553;
    font-size: 13px;
    line-height: 1.5;
}

/* --- ecrane mici -------------------------------------------------------- */

@media (max-width: 650px) {
    .gate-page .gate {
        width: 100%;
        padding: 0;
    }

    .gate-page .gate-card {
        min-height: 100vh;
        padding: 50px 22px;
        border-left: 0;
        border-right: 0;
    }

    .gate-page .brand {
        font-size: 15px;
        letter-spacing: 4px;
    }

    .gate-page .intro {
        font-size: 17px;
    }

    .gate-page .hint,
    .gate-page .aside,
    .gate-page .field-error {
        padding-left: 0;
        margin-left: 0;
    }

    .gate-page .oath-button {
        font-size: 15px;
        letter-spacing: .5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gate-page * {
        animation: none !important;
        transition: none !important;
    }

    .gate-page .oath-button:hover {
        transform: none;
    }
}