/* =========================================================================
   CCC Tournament — main stylesheet
   Theme: dark mystical board-game (deep green / indigo / gold).
   The Three.js canvas (#bg) is fixed behind everything (z-index: 0); all
   content sits above it at z-index: 1 with translucent parchment panels.
   ========================================================================= */

:root {
    --ink: #122026;            /* lifted deep teal-green (was #0d1f1a) */
    --indigo: #1a1a3e;         /* mystical indigo accent */
    --indigo-deep: #12122b;
    --gold: #d4af37;           /* primary gold */
    --gold-bright: #f0d57a;    /* highlight gold */
    --gold-dim: #8a7320;
    --parchment: #f1e6d0;      /* lifted text/panel foreground (was #e8dcc4) */
    --parchment-dim: #c4b89e;
    --crimson: #8b2e2e;        /* danger / forfeit */
    --emerald: #2e6b4f;        /* success / confirmed */

    /* Panels are less opaque than before so the classical 3D scene reads
       through them, while a stronger blur keeps text legible. */
    --panel-bg: rgba(20, 30, 38, 0.48);
    --panel-bg-solid: rgba(18, 28, 34, 0.80);
    --panel-border: rgba(240, 194, 74, 0.40);
    --panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.45),
                    inset 0 0 0 1px rgba(240, 194, 74, 0.18);

    --font-display: "Cinzel", "Trajan Pro", serif;
    --font-body: "EB Garamond", Georgia, serif;

    --maxw: 1080px;
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--parchment);
    /* Body background sits BEHIND the Three.js canvas (which is transparent),
       so it shows through wherever the scene is empty. Kept dark enough for
       text contrast but lifted so the architecture is clearly visible. */
    background: var(--ink);
    background-image:
        radial-gradient(circle at 18% 8%, rgba(120, 90, 40, 0.30), transparent 48%),
        radial-gradient(circle at 86% 78%, rgba(60, 110, 120, 0.32), transparent 52%),
        linear-gradient(160deg, #18262c 0%, #1c2a30 38%, #20223a 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* The pinned Three.js world lives behind everything. */
#bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}
/* Cursor-trail canvas (added by pointer-trail.js), above the world but below UI. */
#trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

main, header, footer { position: relative; z-index: 2; }

a {
    color: var(--gold-bright);
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 213, 122, 0.25);
    transition: border-color 0.2s, color 0.2s;
}
a:hover { color: var(--gold); border-bottom-color: var(--gold); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin: 0 0 0.5em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.4rem; }
p  { margin: 0 0 1rem; }

/* ---------- layout primitives ---------- */
.container {
    width: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto;
}

/* ---------- Scroll chapters: sticky-centre model ----------
   Each .chapter is a tall scroll segment. Inside it, .chapter__card is
   position:sticky and exactly 100vh tall; it centres the panel strictly in
   the middle of the VIEWPORT (not just the section) and holds it there while
   the reader scrolls through that chapter, until the next chapter pushes in.
   This guarantees "always dead-centre" regardless of panel height.          */
.chapter {
    /* Tall segment so the sticky card has room to travel = the panel stays
       pinned in the viewport while the 3D camera glides through the scene. */
    min-height: 180vh;
    position: relative;
}
/* Single-chapter pages (login, admin, team, …) don't need the extra travel
   space — collapsing to one viewport avoids an empty scroll gap below. */
.chapter--single { min-height: auto; }
.chapter--single .chapter__card { position: relative; }
/* The sticky full-viewport card that owns the centre of the screen. */
.chapter__card {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;        /* strict horizontal + vertical centring   */
    padding: 4rem 1.25rem;
    box-sizing: border-box;
    overflow: auto;             /* if a panel is taller than the viewport,
                                   the card itself scrolls to reveal it     */
}
.chapter__card .container {
    width: min(100%, 820px);
    max-width: 820px;
    margin-inline: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* The panel itself: full width of the container; narrower panels (login
   forms set their own max-width inline) stay centred via margin-inline:auto. */
.chapter .panel {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

/* ---------- Reveal animation: "materialise" (scale + blur + fade) ---------- */
/* The card's panel starts invisible, slightly shrunk and blurred, then
   materialises into focus when its chapter enters the viewport. The Three.js
   world still drives independently; this only animates the HTML panel.       */
.chapter .panel {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(8px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s ease;
    will-change: opacity, transform, filter;
    pointer-events: none;       /* avoid interacting with a half-blurred card */
}
.chapter.in-view .panel {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    pointer-events: auto;
}

/* The hero chapter (index page top) should be visible immediately on load
   rather than waiting for the observer — it is already in view. */
.chapter.hero .panel { opacity: 1; transform: none; filter: none; pointer-events: auto; }

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 2rem 2.2rem;
    box-shadow: var(--panel-shadow);
    /* Stronger blur than before because the panel itself is more transparent
       (we want the classical scene to show through) — this keeps text crisp. */
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.panel--wide { width: min(100%, 820px); }
.panel--solid { background: var(--panel-bg-solid); }

.eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.78rem;
    color: var(--gold);
    margin-bottom: 0.8rem;
}

/* ---------- top navigation ---------- */
header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(10, 16, 12, 0.92), rgba(10, 16, 12, 0.55));
    border-bottom: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.nav__inner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.7rem 0;
}
.nav__brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gold-bright);
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    border: none;
}
.nav__brand:hover { color: var(--gold); }
.nav__links { display: flex; gap: 1.1rem; margin-left: auto; align-items: center; }
.nav__links a { border: none; color: var(--parchment); font-size: 0.98rem; }
.nav__links a:hover { color: var(--gold-bright); }

/* Notification badge */
.badge-wrap { position: relative; }
.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--crimson);
    color: #fff;
    font-size: 0.7rem;
    font-family: var(--font-display);
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ink), 0 0 10px rgba(139, 46, 46, 0.8);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 0 rgba(139, 46, 46, 0.6); }
    50%      { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(139, 46, 46, 0); }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--gold);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    background: transparent;
    color: var(--gold-bright);
}
.btn:hover {
    background: var(--gold);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
.btn--primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--ink); }
.btn--primary:hover { background: var(--gold-bright); }
.btn--danger { border-color: var(--crimson); color: #f4c4c4; }
.btn--danger:hover { background: var(--crimson); color: #fff; }
.btn--ghost { border-color: var(--parchment-dim); color: var(--parchment-dim); }
.btn--ghost:hover { background: rgba(232, 220, 196, 0.12); color: var(--parchment); }
.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.82rem; }

/* ---------- forms ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.field .hint { font-size: 0.85rem; color: var(--parchment-dim); margin-top: 0.3rem; }
input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    width: 100%;
    background: rgba(8, 14, 10, 0.6);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox-row input[type="checkbox"] { margin-top: 0.25rem; width: auto; }

/* Autocomplete dropdown */
.ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-top: none;
    border-radius: 0 0 7px 7px;
    overflow: hidden;
    background: rgba(8, 14, 10, 0.92);
}
.ac-list li { padding: 0.5rem 0.8rem; cursor: pointer; border-bottom: 1px solid rgba(212, 175, 55, 0.1); }
.ac-list li:last-child { border-bottom: none; }
.ac-list li:hover, .ac-list li.active { background: rgba(212, 175, 55, 0.18); color: var(--gold-bright); }

/* ---------- alerts / flash ---------- */
.alert {
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--panel-border);
    background: rgba(8, 14, 10, 0.5);
}
.alert--error   { border-color: var(--crimson); color: #f4c4c4; }
.alert--success { border-color: var(--emerald); color: #c4f0d8; }
.alert--warn    { border-color: var(--gold-dim); color: var(--gold-bright); }
.alert--info    { color: var(--parchment-dim); }

/* ---------- team / roster cards ---------- */
.grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    box-shadow: var(--panel-shadow);
    transition: transform 0.2s, border-color 0.2s;
}
.card:hover { transform: translateY(-3px); border-color: var(--gold); }
.card h3 { margin-bottom: 0.3rem; font-size: 1.2rem; }
.card .duo { color: var(--parchment-dim); font-size: 0.95rem; }
.card .duo strong { color: var(--parchment); font-weight: 600; }

.tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    margin-top: 0.6rem;
}
.tag--pending    { color: var(--gold-bright); }
.tag--confirmed  { color: #7fd9a6; border-color: #7fd9a6; }
.tag--declined   { color: #e6a3a3; border-color: #e6a3a3; }
.tag--expired    { color: var(--parchment-dim); }
.tag--released   { color: var(--parchment-dim); }
.tag--paid       { color: #7fd9a6; border-color: #7fd9a6; }
.tag--unpaid     { color: var(--gold-bright); }
.tag--refunded   { color: #e6a3a3; border-color: #e6a3a3; }

/* ---------- payment / crypto box ---------- */
.crypto-box {
    border: 1px dashed var(--gold);
    border-radius: 12px;
    padding: 1.3rem;
    background: rgba(26, 26, 62, 0.45);
    margin: 1rem 0;
}
.crypto-box .wallet {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 1rem;
    word-break: break-all;
    color: var(--gold-bright);
    background: rgba(0, 0, 0, 0.35);
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
}
.crypto-box .copy-btn {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.crypto-box .copy-btn:hover { background: var(--gold); color: var(--ink); }
.crypto-qr { width: 168px; height: 168px; background: #fff; padding: 8px; border-radius: 8px; }
.warning-box {
    border: 1px solid var(--crimson);
    background: rgba(139, 46, 46, 0.18);
    color: #f4c4c4;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

/* ---------- bracket ---------- */
.bracket-scroll { overflow-x: auto; padding-bottom: 1rem; }
.bracket-grid {
    display: flex;
    gap: 2.5rem;
    align-items: stretch;
    min-width: max-content;
}
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
    min-width: 210px;
}
.bracket-round h4 {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}
.match {
    background: var(--panel-bg-solid);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.92rem;
}
.match__slot {
    padding: 0.5rem 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}
.match__slot + .match__slot { border-top: 1px solid var(--panel-border); }
.match__slot.winner { color: var(--gold-bright); font-weight: 600; }
.match__slot.loser  { color: var(--parchment-dim); }
.match__slot.empty  { color: var(--parchment-dim); font-style: italic; }
.match__seed { color: var(--gold-dim); font-size: 0.78rem; font-family: var(--font-display); }

/* ---------- tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.tbl th, table.tbl td { padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--panel-border); }
table.tbl th { font-family: var(--font-display); color: var(--gold); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
table.tbl tr:hover td { background: rgba(212, 175, 55, 0.06); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; }

/* ---------- timer ---------- */
.timer {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-bright);
    letter-spacing: 0.1em;
}

/* ---------- footer ---------- */
footer.site {
    border-top: 1px solid var(--panel-border);
    padding: 2rem 0;
    text-align: center;
    color: var(--parchment-dim);
    font-size: 0.88rem;
    margin-top: 2rem;
}

/* ---------- utilities ---------- */
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.muted { color: var(--parchment-dim); }
.center { text-align: center; }
.spacer { height: 1.5rem; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Panels appear instantly without the materialise animation. */
    .chapter .panel { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto; }
    .badge { animation: none; }
    * { transition-duration: 0.001ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    body { font-size: 17px; }
    .nav__links { gap: 0.7rem; }
    .panel { padding: 1.4rem 1.2rem; }
    .chapter__card { padding: 3rem 1rem; }
}