/* ==========================================================================
   FestivalGames — "Festival bei Nacht" design system
   Deep night indigo, warm string-light amber, neon pink & bottle green.
   Chunky, sticker-like components. Unbounded (display) + Outfit (body).
   Hand-written, no framework.
   ========================================================================== */

@font-face {
    font-family: "Unbounded";
    src: url("fonts/Unbounded.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Outfit";
    src: url("fonts/Outfit.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* night sky */
    --night-0: #0b0817;
    --night-1: #141024;
    --night-2: #1d1733;
    --night-3: #262045;
    --line: #2e2752;
    --line-strong: #453a78;

    /* ink */
    --ink: #f2edff;
    --ink-dim: #a89fce;
    --ink-faint: #6f6694;

    /* festival lights */
    --amber: #ffb020;
    --amber-hot: #ff8a00;
    --amber-soft: rgba(255, 176, 32, .16);
    --pink: #ff4d8d;
    --pink-soft: rgba(255, 77, 141, .16);
    --green: #4ade80;
    --green-soft: rgba(74, 222, 128, .14);
    --teal: #2dd4bf;
    --teal-soft: rgba(45, 212, 191, .14);

    /* outcomes */
    --win: #4ade80;
    --win-soft: rgba(74, 222, 128, .15);
    --loss: #ff5d73;
    --loss-soft: rgba(255, 93, 115, .15);
    --tie: #ffc65c;
    --tie-soft: rgba(255, 198, 92, .15);
    --danger: #ff5d73;
    --danger-soft: rgba(255, 93, 115, .14);

    /* medals */
    --gold: #ffc94d;
    --silver: #c9d1e3;
    --bronze: #e2925c;

    --font-display: "Unbounded", "Outfit", sans-serif;
    --font-body: "Outfit", "Segoe UI", sans-serif;

    --shadow-sm: 0 2px 8px rgba(4, 2, 12, .45);
    --shadow-md: 0 8px 24px rgba(4, 2, 12, .55);
    --shadow-lg: 0 18px 48px rgba(4, 2, 12, .65);
    --glow-amber: 0 0 22px rgba(255, 176, 32, .35);
    --glow-pink: 0 0 22px rgba(255, 77, 141, .30);

    --radius: 20px;
    --radius-sm: 13px;
    --maxw: 920px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    background: var(--night-0);
    -webkit-tap-highlight-color: transparent;
    color-scheme: dark;
}

/* Layered night-sky atmosphere: pink horizon glow, teal moonlight, amber lights. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 480px at 88% -8%, rgba(45, 212, 191, .14), transparent 62%),
        radial-gradient(1100px 560px at -12% 108%, rgba(255, 77, 141, .16), transparent 60%),
        radial-gradient(700px 380px at 50% -12%, rgba(255, 138, 0, .12), transparent 55%),
        var(--night-0);
}

/* Printed-poster grain. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

h1:focus, h1:focus-visible { outline: none; }

#app { min-height: 100vh; min-height: 100dvh; }

::selection { background: rgba(255, 176, 32, .35); }

/* ---------- Layout shell ---------- */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 16px;
}

.app-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 4px 12px;
}
.wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .02em;
    margin: 0;
    background: linear-gradient(92deg, var(--amber) 10%, var(--amber-hot) 45%, var(--pink) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}
a.wordmark { cursor: pointer; }
.app-header .tagline {
    font-size: 12px;
    color: var(--ink-faint);
    font-weight: 500;
    letter-spacing: .04em;
}

.app-main {
    flex: 1;
    padding-bottom: 110px; /* room for the floating nav */
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    /* `var(--maxw) - 24px` was not a valid CSS length. On narrow phones the
       intrinsic width of the five links could therefore push the bar off screen. */
    width: calc(100vw - 24px);
    max-width: 480px;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    background: rgba(20, 16, 36, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    padding: 7px;
    z-index: 50;
}
.bottom-nav a {
    flex: 1;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 7px 2px 6px;
    border-radius: 999px;
    transition: background .18s, color .18s, box-shadow .18s;
}
.bottom-nav a .ico {
    display: block;
    font-size: 19px;
    line-height: 1.15;
    filter: grayscale(1) opacity(.6);
    transition: filter .18s, transform .18s;
}
.bottom-nav a.active {
    color: var(--amber);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .25);
}
.bottom-nav a.active .ico { filter: none; transform: translateY(-1px); }
.bottom-nav a:active .ico { transform: scale(.9); }

.read-only button, .read-only input, .read-only select, .read-only textarea {
    pointer-events: none;
    opacity: .58;
}
.read-only .account-action { pointer-events: auto; opacity: 1; }
.login-page { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%, 430px); padding:28px; border:1px solid var(--line-strong); border-radius:var(--radius); background:linear-gradient(180deg,var(--night-2),var(--night-1)); box-shadow:var(--shadow-lg); }
.login-card .wordmark { display:block; margin-bottom:12px; }
.login-info { margin:18px 0 0; color:var(--ink-dim); font-size:13px; line-height:1.35; }
.imprint, .app-imprint { color:var(--ink-faint); font-size:11px; line-height:1.5; }
.imprint { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); }
.imprint a, .app-imprint a { color:inherit; }
.app-imprint { padding:0 4px 120px; text-align:center; }

@media (max-width: 360px) {
    .bottom-nav { bottom: max(8px, env(safe-area-inset-bottom)); padding: 5px 3px; }
    .bottom-nav a { font-size: 9.5px; padding: 5px 0; letter-spacing: 0; }
    .bottom-nav a .ico { font-size: 17px; }
    .app-main { padding-bottom: 96px; }
}

/* ---------- Cards ---------- */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--night-2), var(--night-1) 82%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}
.card::before { /* subtle top edge light */
    content: "";
    position: absolute;
    inset: 0 14% auto 14%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    pointer-events: none;
}
.card.flush { padding: 0; overflow: hidden; }
.card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.card h2 {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .03em;
    margin: 0;
}
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 2px 10px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
}
.section-title .spacer { flex: 1; }

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.bold { font-weight: 700; }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: none; }

/* ---------- Page title ---------- */
.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
}
.page-title h1 {
    font-family: var(--font-display);
    font-size: 21px;
    margin: 0;
    font-weight: 800;
    letter-spacing: .01em;
}
.page-title .back {
    font-size: 20px;
    text-decoration: none;
    color: var(--ink);
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--night-2);
    border: 1px solid var(--line);
    transition: background .15s;
}
.page-title .back:active { background: var(--night-3); }

/* ---------- Buttons ---------- */
.btn {
    appearance: none;
    border: 1px solid var(--line-strong);
    background: var(--night-2);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    transition: transform .06s, box-shadow .18s, background .18s, border-color .18s;
    text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
    background: linear-gradient(120deg, var(--amber), var(--amber-hot));
    border-color: transparent;
    color: #331c00;
    box-shadow: var(--glow-amber), var(--shadow-sm);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:active { box-shadow: 0 0 10px rgba(255, 176, 32, .3); }
.btn-pink {
    background: linear-gradient(120deg, var(--pink), #ff2e73);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-pink), var(--shadow-sm);
}
.btn-green {
    background: linear-gradient(120deg, var(--green), #22c55e);
    border-color: transparent;
    color: #052e13;
    box-shadow: 0 0 20px rgba(74, 222, 128, .25), var(--shadow-sm);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink); }
.btn-outline { background: transparent; }
.btn-danger { background: var(--danger-soft); border-color: rgba(255, 93, 115, .35); color: var(--loss); }
.btn-sm { padding: 7px 13px; min-height: 36px; font-size: 13px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn-big { min-height: 54px; font-size: 17px; border-radius: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }

/* Native selects remain the most reliable accessible picker on mobile, but get the
   same neon-card treatment as the rest of the festival controls. */
.team-size-picker {
    width: min(100%, 260px);
    appearance: none;
    -webkit-appearance: none;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    background: var(--night-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23ffb020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 11px 42px 11px 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.team-size-picker:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.field label, .field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
input[type="text"], input[type="number"], input[type="search"], textarea, select {
    appearance: none;
    width: 100%;
    font: inherit;
    font-weight: 500;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--night-0);
    color: var(--ink);
    min-height: 46px;
}
textarea { min-height: 80px; resize: vertical; }
input::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(255, 176, 32, .18);
}
select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89fce' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
select option { background: var(--night-1); color: var(--ink); }

.checklist { display: flex; flex-direction: column; gap: 7px; }
.checklist label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--night-0);
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.checklist label:has(input:checked) {
    border-color: var(--green);
    background: var(--green-soft);
}
.checklist input { width: 19px; height: 19px; accent-color: var(--green); }

.checkline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    margin: 8px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--night-0);
    cursor: pointer;
    font-weight: 600;
}
.checkline:has(input:checked) { border-color: var(--amber); background: var(--amber-soft); }
.checkline input { width: 19px; height: 19px; accent-color: var(--amber); }

/* ---------- Badges & pills ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--night-3);
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
    white-space: nowrap;
}
.badge.beer { background: var(--amber-soft); color: var(--amber); border-color: rgba(255, 176, 32, .35); }
.badge.flunky { background: var(--green-soft); color: var(--green); border-color: rgba(74, 222, 128, .35); }
.badge.solo { background: var(--teal-soft); color: var(--teal); border-color: rgba(45, 212, 191, .3); }
.badge.team { background: var(--pink-soft); color: var(--pink); border-color: rgba(255, 77, 141, .3); }
.badge.win { background: var(--win-soft); color: var(--win); border-color: transparent; }
.badge.loss { background: var(--loss-soft); color: var(--loss); border-color: transparent; }
.badge.tie { background: var(--tie-soft); color: var(--tie); border-color: transparent; }
.badge.live {
    background: var(--pink-soft);
    color: var(--pink);
    border-color: rgba(255, 77, 141, .35);
}
.badge.live .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--pink);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

.score-pill {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 15px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--night-0);
    border: 1px solid var(--line-strong);
}

/* ---------- Avatars ---------- */
.avatar {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: #16091e;
    background: linear-gradient(135deg, hsl(var(--h, 38) 95% 62%), hsl(calc(var(--h, 38) + 42) 90% 55%));
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .25), 0 0 0 2px var(--night-0), 0 0 0 3.5px hsl(var(--h, 38) 80% 45% / .55);
}
.avatar.sm { width: 30px; height: 30px; font-size: 10.5px; }
.avatar.lg { width: 72px; height: 72px; font-size: 24px; }

/* ---------- List rows ---------- */
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    transition: background .15s;
}
.list-row:last-child { border-bottom: none; }
.list-row .meta { flex: 1; min-width: 0; }
.list-row .meta .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .meta .sub { font-size: 12.5px; color: var(--ink-dim); }
.list-row .actions { display: flex; gap: 6px; }
.list-row .chev { font-size: 22px; color: var(--ink-faint); }

a.list-row { text-decoration: none; color: var(--ink); }
a.list-row:active { background: var(--night-2); }

/* ---------- Standings table ---------- */
.standings { width: 100%; border-collapse: collapse; }
.standings th, .standings td {
    text-align: center;
    padding: 10px 6px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
}
.standings tr:last-child td { border-bottom: none; }
.standings th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
    font-weight: 800;
}
.standings td.left, .standings th.left { text-align: left; }
.standings td.left { font-weight: 700; }
.standings .w { color: var(--win); font-weight: 700; }
.standings .l { color: var(--loss); font-weight: 700; }
.standings .t { color: var(--tie); font-weight: 700; }
.standings .pts { font-family: var(--font-display); font-weight: 800; color: var(--amber); }
.standings .rank { color: var(--ink-faint); width: 30px; font-weight: 800; font-size: 12px; }
.standings tr.top1 td { background: linear-gradient(90deg, rgba(255, 201, 77, .12), transparent 70%); }
.standings tr.top1 .rank { color: var(--gold); }
.standings tr.top2 .rank { color: var(--silver); }
.standings tr.top3 .rank { color: var(--bronze); }

/* ---------- Tabs & segmented ---------- */
.tab-bar {
    display: flex;
    gap: 5px;
    background: var(--night-1);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 16px;
}
.tab-bar button {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ink-dim);
    font: inherit;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 8px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 40px;
    transition: background .15s, color .15s;
}
.tab-bar button.active {
    background: linear-gradient(120deg, var(--amber), var(--amber-hot));
    color: #331c00;
    box-shadow: var(--shadow-sm);
}

.segmented {
    display: flex;
    gap: 5px;
    background: var(--night-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 5px;
}
.segmented button {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 8px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ink-dim);
    transition: background .15s, color .15s;
}
.segmented button.active { background: var(--night-3); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented button.active.win { background: var(--win-soft); color: var(--win); }
.segmented button.active.loss { background: var(--loss-soft); color: var(--loss); }
.segmented button.active.tie { background: var(--tie-soft); color: var(--tie); }
.segmented button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 44px 20px;
    color: var(--ink-dim);
}
.empty-state .emoji { font-size: 44px; display: block; margin-bottom: 12px; filter: drop-shadow(0 6px 16px rgba(255, 176, 32, .25)); }
.empty-state .ttl { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.empty-state p { margin: 4px 0 0; font-size: 14px; }

/* ---------- Inline form ---------- */
.inline-form {
    background: var(--night-0);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 14px;
}

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.stat-tile {
    background: linear-gradient(180deg, var(--night-2), var(--night-1));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 8px 11px;
    text-align: center;
}
.stat-tile .v {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
}
.stat-tile .k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-faint);
    font-weight: 700;
    margin-top: 3px;
}
.stat-tile.accent .v { color: var(--amber); }
.stat-tile.w .v { color: var(--win); }
.stat-tile.l .v { color: var(--loss); }
.stat-tile.t .v { color: var(--tie); }

/* ---------- Hero (home) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(420px 200px at 85% -30%, rgba(255, 77, 141, .35), transparent 70%),
        radial-gradient(420px 220px at 0% 120%, rgba(255, 138, 0, .28), transparent 70%),
        linear-gradient(160deg, #241b4d, #171130 55%, #131028);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 24px 22px;
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
}
.hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
}
.hero h1 .hl {
    background: linear-gradient(92deg, var(--amber), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }
.hero .actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .bunting {
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 26px;
    pointer-events: none;
    opacity: .9;
}

/* ---------- Resume / callout card ---------- */
.resume-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(120deg, rgba(255, 176, 32, .16), rgba(255, 77, 141, .14));
    border: 1px solid rgba(255, 176, 32, .4);
    border-radius: var(--radius);
    padding: 15px 18px;
    margin-bottom: 14px;
    box-shadow: var(--glow-amber);
    animation: fadeUp .4s ease both;
}
.resume-card .emoji { font-size: 26px; }
.resume-card .meta { flex: 1; min-width: 0; }
.resume-card .meta .ttl { font-weight: 800; font-family: var(--font-display); font-size: 13.5px; }
.resume-card .meta .sub { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.resume-card .chev { font-size: 26px; color: var(--amber); }

/* ---------- Quick actions (home) ---------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.quick-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(180deg, var(--night-2), var(--night-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 15px;
    transition: transform .08s, border-color .15s;
}
.quick-card:active { transform: scale(.98); }
.quick-card .qc-emoji { font-size: 26px; line-height: 1; }
.quick-card .qc-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.quick-card .qc-sub { font-size: 12px; color: var(--ink-faint); }
.quick-card.blitz {
    background: linear-gradient(135deg, rgba(255, 176, 32, .2), rgba(255, 77, 141, .16) 70%), var(--night-1);
    border-color: rgba(255, 176, 32, .45);
    box-shadow: var(--glow-amber);
}

/* ---------- Stepper rail ---------- */
.step-rail {
    display: flex;
    align-items: center;
    background: var(--night-1);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    scrollbar-width: none;
}
.step-rail::-webkit-scrollbar { display: none; }
.step-rail .step {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ink-faint);
    padding: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.step-rail .step:disabled { cursor: default; opacity: .5; }
.step-rail .step-dot {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--night-0);
    border: 1px solid var(--line-strong);
    font-size: 12px;
    font-weight: 800;
}
.step-rail .step.current { color: var(--ink); }
.step-rail .step.current .step-dot {
    background: linear-gradient(135deg, var(--amber), var(--amber-hot));
    color: #331c00;
    border-color: transparent;
    box-shadow: var(--glow-amber);
}
.step-rail .step.done { color: var(--green); }
.step-rail .step.done .step-dot {
    background: var(--green-soft);
    color: var(--green);
    border-color: rgba(74, 222, 128, .4);
}
.step-rail .step-link {
    flex: 1;
    min-width: 12px;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
}
.step-rail .step-link.filled { background: var(--green); }

/* ---------- Format chooser ---------- */
.format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.format-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--night-0);
    color: var(--ink);
    font: inherit;
    border-radius: var(--radius-sm);
    padding: 14px;
    cursor: pointer;
    min-height: 84px;
    transition: border-color .15s, background .15s, transform .08s;
}
.format-card:active { transform: scale(.98); }
.format-card .fc-emoji { font-size: 24px; line-height: 1; }
.format-card .fc-label { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.format-card .fc-sub { font-size: 11.5px; color: var(--ink-faint); }
.format-card.active {
    border-color: var(--amber);
    background: var(--amber-soft);
    box-shadow: 0 0 0 3px rgba(255, 176, 32, .15), var(--glow-amber);
}
.format-card:disabled { opacity: .55; cursor: default; }

/* ---------- Seed list ---------- */
.seed-list { display: flex; flex-direction: column; gap: 7px; }
.seed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--night-0);
}
.seed-row .seed-rank {
    width: 24px; height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--night-3);
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 800;
}
.seed-row .seed-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seed-row .seed-actions { display: flex; gap: 3px; }
.seed-row .seed-actions .btn { min-height: 32px; padding: 4px 9px; font-size: 13px; }

/* ---------- Match result rows ---------- */
.result-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, var(--night-2), var(--night-1));
    animation: fadeUp .35s ease both;
}
.result-row.open { border-color: var(--line-strong); }
.result-row.recorded { opacity: .92; }
.result-row.bye { opacity: .55; border-style: dashed; }
.rr-sides {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
}
.rr-side { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.rr-side.a { justify-content: flex-end; text-align: right; }
.rr-side.b { justify-content: flex-start; text-align: left; }
.rr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.rr-name.won { color: var(--win); }
.rr-name.won::after { content: " ✓"; font-size: 12px; }
.rr-score {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 15px;
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--night-0);
    border: 1px solid var(--line-strong);
}
.rr-vs {
    flex: none;
    font-family: var(--font-display);
    color: var(--pink);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
}
.rr-entry { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.rr-scores { display: flex; gap: 9px; align-items: center; }
.rr-scores input { flex: 1; min-height: 44px; text-align: center; font-weight: 700; font-size: 16px; }
.rr-scores .x { color: var(--ink-faint); font-weight: 800; }
.rr-actions { gap: 6px; }
.rr-actions button { min-height: 42px; }
.rr-actions .btn-win-a, .rr-actions .btn-win-b { color: var(--win); background: var(--win-soft); border-radius: 9px; }
.rr-actions .btn-tie { color: var(--tie); background: var(--tie-soft); border-radius: 9px; }
.rr-summary { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Schedule preview ---------- */
.plan-round { margin-bottom: 4px; }
.plan-round .plan-round-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 14px 2px 8px;
}
.plan-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 7px;
    color: var(--ink-dim);
    font-weight: 600;
    font-size: 13.5px;
    background: rgba(20, 16, 36, .5);
}
.plan-match .pm-side { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-match .pm-side.a { text-align: right; }
.plan-match .pm-vs { color: var(--ink-faint); font-size: 10px; font-weight: 800; }
.plan-match.done { border-style: solid; opacity: .75; }
.plan-match.done .pm-win { color: var(--win); }

/* ---------- Bracket ---------- */
.bracket-scroll {
    overflow-x: auto;
    padding-bottom: 10px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
}
.bracket {
    display: flex;
    gap: 18px;
    min-width: max-content;
    align-items: stretch;
}
.bracket-round { display: flex; flex-direction: column; min-width: 170px; }
.bracket-round-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    text-align: center;
}
.bracket-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 12px;
}
.bracket-match {
    background: linear-gradient(180deg, var(--night-2), var(--night-1));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.bracket-match.decided { border-color: var(--line-strong); }
.bracket-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 700;
}
.bracket-slot + .bracket-slot { border-top: 1px solid var(--line); }
.bracket-slot .bs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-slot .bs-score { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink-dim); }
.bracket-slot.winner { background: var(--win-soft); }
.bracket-slot.winner .bs-name, .bracket-slot.winner .bs-score { color: var(--win); }
.bracket-slot.tbd .bs-name { color: var(--ink-faint); font-style: italic; font-weight: 500; }
.bracket-slot.bye .bs-name { color: var(--ink-faint); text-decoration: line-through; font-weight: 500; }

/* ---------- Podium ---------- */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 6px;
    min-height: 190px;
}
.podium .pod {
    flex: 1;
    max-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: podiumRise .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.podium .pod:nth-child(1) { animation-delay: .25s; }
.podium .pod:nth-child(2) { animation-delay: .45s; }
.podium .pod:nth-child(3) { animation-delay: .6s; }
.podium .pod .pod-name {
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium .pod .pod-medal { font-size: 30px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(255, 201, 77, .4)); }
.podium .pod .pod-block {
    width: 100%;
    border-radius: 12px 12px 6px 6px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: rgba(10, 6, 20, .75);
}
.podium .pod.gold .pod-block { height: 96px; background: linear-gradient(180deg, #ffd76a, #d99a16); box-shadow: 0 0 28px rgba(255, 201, 77, .35); }
.podium .pod.silver .pod-block { height: 68px; background: linear-gradient(180deg, #e3e9f5, #97a1b8); }
.podium .pod.bronze .pod-block { height: 48px; background: linear-gradient(180deg, #f0a86e, #b06a35); }
@keyframes podiumRise {
    from { opacity: 0; transform: translateY(40px) scale(.9); }
    to { opacity: 1; transform: none; }
}

.champion-banner {
    position: relative;
    text-align: center;
    padding: 30px 20px 24px;
    background:
        radial-gradient(320px 160px at 50% 0%, rgba(255, 201, 77, .28), transparent 70%),
        linear-gradient(165deg, #251c4e, #151028 60%);
    border: 1px solid rgba(255, 201, 77, .4);
    border-radius: var(--radius);
    box-shadow: 0 0 40px rgba(255, 201, 77, .2);
    margin-bottom: 16px;
    overflow: hidden;
}
.champion-banner .cb-label {
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 800;
    margin-bottom: 8px;
}
.champion-banner h1 {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
    background: linear-gradient(180deg, #fff3d1, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.champion-banner .cb-sub { color: var(--ink-dim); font-size: 14px; margin-top: 6px; }
.champion-banner .cb-trophy {
    font-size: 44px;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
    animation: trophyPop .8s cubic-bezier(.2, 1.6, .4, 1) both .15s;
    filter: drop-shadow(0 8px 24px rgba(255, 201, 77, .45));
}
@keyframes trophyPop {
    from { opacity: 0; transform: scale(.2) rotate(-14deg); }
    to { opacity: 1; transform: none; }
}

/* Confetti pieces (spawned by window.festivalGames.confetti) */
.confetti-piece {
    position: fixed;
    top: -14px;
    width: 9px;
    height: 15px;
    z-index: 200;
    pointer-events: none;
    animation: confettiFall linear both;
}
@keyframes confettiFall {
    from { transform: translateY(-4vh) rotate(0) rotateY(0); opacity: 1; }
    80% { opacity: 1; }
    to { transform: translateY(106vh) rotate(var(--spin, 540deg)) rotateY(720deg); opacity: 0; }
}

/* ---------- Form dots (last results) ---------- */
.form-dots { display: inline-flex; gap: 4px; align-items: center; }
.form-dots .fd {
    width: 20px; height: 20px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 900;
}
.form-dots .fd.w { background: var(--win-soft); color: var(--win); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .4); }
.form-dots .fd.l { background: var(--loss-soft); color: var(--loss); box-shadow: inset 0 0 0 1px rgba(255, 93, 115, .35); }
.form-dots .fd.t { background: var(--tie-soft); color: var(--tie); box-shadow: inset 0 0 0 1px rgba(255, 198, 92, .35); }

/* ---------- Donut (win rate) ---------- */
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut { transform: rotate(-90deg); }
.donut .track { stroke: var(--night-3); }
.donut .val { stroke: url(#donutGrad); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .3, 1); }
.donut-center {
    font-family: var(--font-display);
    font-weight: 800;
}

/* ---------- Profile header ---------- */
.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 18px;
    background:
        radial-gradient(380px 160px at 100% -40%, rgba(255, 77, 141, .22), transparent 70%),
        linear-gradient(165deg, var(--night-3), var(--night-1) 70%);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 14px;
}
.profile-head .ph-meta { flex: 1; min-width: 0; }
.profile-head h1 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-head .ph-sub { color: var(--ink-dim); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.medal-strip { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.medal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--night-0);
    border: 1px solid var(--line-strong);
}

/* ---------- Awards ---------- */
.award-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.award {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--night-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
}
.award .aw-emoji { font-size: 24px; line-height: 1; filter: drop-shadow(0 3px 10px rgba(255, 176, 32, .3)); }
.award .aw-meta { min-width: 0; }
.award .aw-title { font-weight: 800; font-size: 13px; }
.award .aw-detail { font-size: 11.5px; color: var(--ink-dim); }

/* ---------- Versus / rivalry cards ---------- */
.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rel-card {
    background: var(--night-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px;
    text-align: center;
}
.rel-card .rc-k {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 800;
    margin-bottom: 6px;
}
.rel-card .rc-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.rel-card .rc-sub { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.rel-card.nemesis { border-color: rgba(255, 93, 115, .4); background: linear-gradient(180deg, rgba(255, 93, 115, .1), var(--night-0)); }
.rel-card.victim { border-color: rgba(74, 222, 128, .35); background: linear-gradient(180deg, rgba(74, 222, 128, .08), var(--night-0)); }
.rel-card.partner { border-color: rgba(45, 212, 191, .35); background: linear-gradient(180deg, rgba(45, 212, 191, .08), var(--night-0)); }

/* ---------- Leaderboard rows ---------- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}
.lb-row:last-child { border-bottom: none; }
.lb-row .lb-rank {
    font-family: var(--font-display);
    width: 26px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--ink-faint);
    flex: none;
}
.lb-row:nth-child(1) .lb-rank { color: var(--gold); }
.lb-row:nth-child(2) .lb-rank { color: var(--silver); }
.lb-row:nth-child(3) .lb-rank { color: var(--bronze); }
.lb-row .lb-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .lb-val { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--amber); }
.lb-row .lb-sub { font-size: 11.5px; color: var(--ink-faint); }

/* ---------- History rows ---------- */
.hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
.hist-row:last-child { border-bottom: none; }
.hist-row .h-outcome {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
}
.hist-row .h-outcome.w { background: var(--win-soft); color: var(--win); }
.hist-row .h-outcome.l { background: var(--loss-soft); color: var(--loss); }
.hist-row .h-outcome.t { background: var(--tie-soft); color: var(--tie); }
.hist-row .h-meta { flex: 1; min-width: 0; }
.hist-row .h-line { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row .h-sub { font-size: 11.5px; color: var(--ink-faint); }
.hist-row .h-score { font-family: var(--font-display); font-weight: 800; flex: none; color: var(--ink-dim); }

/* ---------- Advance banner ---------- */
.advance-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    background: linear-gradient(110deg, rgba(74, 222, 128, .16), rgba(45, 212, 191, .12));
    border: 1px solid rgba(74, 222, 128, .35);
    color: var(--green);
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 12px;
    animation: fadeUp .4s ease both;
}

/* ---------- Entrance animations ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.fade-in { animation: fadeUp .4s ease both; }
.stagger > * { animation: fadeUp .45s ease both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(7) { animation-delay: .32s; }
.stagger > *:nth-child(8) { animation-delay: .37s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Details/summary ---------- */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .caret { transition: transform .2s; display: inline-block; color: var(--ink-faint); }
details[open] > summary .caret { transform: rotate(90deg); }

/* ---------- Blazor bits ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid var(--loss); }
.validation-message { color: var(--loss); }

#blazor-error-ui {
    color-scheme: dark;
    background: #3d1020;
    color: #ffd9e0;
    border-top: 1px solid var(--loss);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .7rem 1.25rem .8rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-body);
}
#blazor-error-ui .reload { color: #fff; font-weight: 700; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.status-bar-safe-area { display: none; }
@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: var(--night-0);
        width: 100%;
        z-index: 1;
    }
}

/* Wider screens: a bit more breathing room */
@media (min-width: 720px) {
    .app-header { padding-top: 28px; }
    .wordmark { font-size: 22px; }
    .quick-grid { grid-template-columns: repeat(4, 1fr); }
    .award-grid { grid-template-columns: repeat(3, 1fr); }
}