/* ==========================================================================
   Floskelbingo – mobil-först tema
   ========================================================================== */

:root {
    --bg: #f4f1fb;
    --surface: #ffffff;
    --surface-2: #f7f5fc;
    --text: #1e1b2e;
    --text-muted: #6b6580;
    --border: #e4def2;
    --primary: #6b3fd4;
    --primary-strong: #5a2fc0;
    --primary-contrast: #ffffff;
    --accent: #ff5c8a;
    --hit: #22b07d;
    --hit-soft: #e2f6ee;
    --warn: #e6a100;
    --danger: #e04a5f;
    --danger-soft: #fdecef;
    --shadow: 0 6px 20px rgba(60, 40, 110, 0.10);
    --radius: 16px;
    --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14121c;
        --surface: #211d2e;
        --surface-2: #1a1726;
        --text: #f2eefb;
        --text-muted: #a79fbd;
        --border: #332c47;
        --primary: #9b7cf0;
        --primary-strong: #ac90f5;
        --primary-contrast: #17121f;
        --hit: #2fd39a;
        --hit-soft: #163a2f;
        --danger-soft: #3a1c25;
        --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    }
}

* { box-sizing: border-box; }

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

a, .btn-link { color: var(--primary); }

h1, h2, h3 { line-height: 1.15; }

/* ---- App skal ---- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--primary);
    color: var(--primary-contrast);
    box-shadow: var(--shadow);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary-contrast);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.app-brand .logo { font-size: 1.3rem; }

.app-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.app-nav a, .app-nav button {
    color: var(--primary-contrast);
    background: transparent;
    border: 0;
    font: inherit;
    padding: .4rem .55rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    opacity: .92;
    cursor: pointer;
}

.app-nav a:hover, .app-nav button:hover { background: rgba(255,255,255,.16); opacity: 1; }
.app-nav a.active { background: rgba(255,255,255,.22); }

/* ---- Meny ---- */
.app-menu { position: relative; }

.app-menu > summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--primary-contrast);
    opacity: .92;
    -webkit-user-select: none;
    user-select: none;
}

.app-menu > summary::-webkit-details-marker { display: none; }
.app-menu > summary:hover { background: rgba(255,255,255,.16); opacity: 1; }

/* Panelen läggs ovanpå innehållet i stället för att knuffa ned det, så att brickan
   inte hoppar när menyn öppnas mitt i ett spel. */
.app-menu[open] > .app-nav {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    min-width: 12rem;
    padding: .4rem;
    background: var(--primary-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.app-menu[open] > .app-nav a,
.app-menu[open] > .app-nav button,
.app-menu[open] > .app-nav form { text-align: left; width: 100%; }

/* ---- Språk ---- */
.lang-list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-top: .25rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(255,255,255,.22);
}

.lang-list a {
    color: var(--primary-contrast);
    text-decoration: none;
    padding: .4rem .55rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    opacity: .85;
}

.lang-list a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.lang-list a.active { opacity: 1; font-weight: 700; background: rgba(255,255,255,.14); }

.app-main {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem .9rem 4rem;
}

/* ---- Hjältesektion på startsidan ---- */

/* Telefon: brickan i full bredd *under* brödtexten. Den ligger före texten i DOM
   eftersom desktopvarianten är en float, och en float kan bara omflyta det som
   kommer efter den – därför flyttas den nedåt med order i stället. */
.hero { display: flex; flex-direction: column; }

.hero-board {
    position: relative;
    order: 1;
    width: 100%;
    margin: .9rem 0 .2rem;
}

.hero-board .board { margin: 0; }
.hero-board .cell { cursor: default; }
.hero-board .cell:active { transform: none; }

.hero-bingo {
    position: absolute;
    right: -0.3rem;
    bottom: -0.7rem;
    transform: rotate(-8deg);
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    font-size: .85rem;
    letter-spacing: .04em;
    padding: .25rem .65rem;
    border-radius: 999px;
    box-shadow: var(--shadow);
}

/* Från 40rem finns plats att låta texten löpa runt en mindre bricka till höger. */
@media (min-width: 40rem) {
    /* flow-root så att kortet växer runt floaten. Inte overflow:hidden – det hade
       klippt BINGO-märket, som sticker ut utanför brickans hörn. */
    .hero { display: flow-root; }

    .hero-board {
        float: right;
        width: 15rem;
        margin: .2rem .5rem .6rem 1.4rem;
    }

    /* Lätt lutning så att den läses som en illustration och inte som något att trycka
       på. Bara här – i full bredd på telefon skulle rotationen ge vågrät spillning. */
    .hero-board .board { transform: rotate(-3deg); }

    /* Mindre rutor kräver mindre text. Teckenräkningen i DemoCard är ett trubbigt
       mått – "Bandbredd" och "Synergier" är lika långa men olika breda – så
       marginalen tas här. */
    .hero-board .cell { font-size: .78rem; }
}

/* ---- Kort ---- */
.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.card-panel h2 { margin: 0 0 .75rem; font-size: 1.2rem; }
.muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* ---- Knappar ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .7rem 1.1rem;
    cursor: pointer;
    min-height: 46px;
    transition: transform .05s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 54px; font-size: 1.05rem; }

.btn-primary { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary-strong); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Formulär ---- */
.field { margin-bottom: .9rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.input, input.form-control, select.form-select {
    width: 100%;
    font: inherit;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    min-height: 46px;
}
/* FocusOnNavigate i Routes.razor flyttar fokus till sidans h1 efter navigering, så
   att skärmläsare landar överst i det nya innehållet i stället för kvar i menyn.
   Bieffekten är en synlig fokusring runt rubriken vid varje sidladdning – tydligast
   i mörkt tema, där webbläsarens ring blir nästan vit.

   Att dölja just den ringen kostar ingenting: elementet får tabindex="-1" och går
   därför inte att nå med tangentbord, så ingen kan fokusera det avsiktligt.
   Uppläsningen för skärmläsare påverkas inte. Fokusringar i övrigt lämnas orörda. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

.input:focus, .form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.code-input {
    text-align: center;
    letter-spacing: .4em;
    font-size: 1.6rem;
    font-weight: 800;
}

/* ---- Kod & delning ---- */
.share-code {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--primary);
    text-align: center;
    margin: .2rem 0 .4rem;
}
.qr { display: block; margin: .5rem auto; width: 190px; max-width: 60%; height: auto; background:#fff; padding:.4rem; border-radius: var(--radius-sm); }

/* ---- Chips (floskelval) ---- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    min-height: 40px;
}
.chip:hover { border-color: var(--primary); }
.chip.selected { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary-strong); }
.chip .x { font-weight: 800; opacity: .8; }

/* ---- Bingobricka ---- */
.board {
    display: grid;
    gap: .5rem;
    margin: .3rem 0;
}
.cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .3rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    /* Avstavning efter språkets regler i stället för brytning var som helst.
       word-break: break-word gav "efterhandsko|nstruktion"; hyphens: auto ger
       "efterhands-|konstruktion". Kräver ett korrekt lang på elementet – brickorna
       sätter spelets språk, inte gränssnittets, eftersom flosklerna hör till spelet.
       overflow-wrap står kvar som sista utväg för ord som är längre än rutan. */
    hyphens: auto;
    /* Fördela raderna jämnt i stället för att fylla dem girigt. Utan detta tas
       "Var ska peng-arna tas" eftersom "peng-" råkar rymmas på första raden; med
       balans föredras den rena brytningen vid mellanslag. Gjord för korta stycken,
       vilket en brickruta är. */
    text-wrap: balance;
    /* Minst 6 tecken i ordet, minst 3 före och 3 efter brytningen. Stoppar fragment
       som "En efter-" som säger mindre än de kostar i läsbarhet. */
    hyphenate-limit-chars: 6 3 3;
    overflow-wrap: break-word;
    user-select: none;
    transition: background .12s ease, transform .06s ease;
}
.cell:active { transform: scale(.97); }
.cell.hit {
    background: var(--hit);
    color: #fff;
    border-color: var(--hit);
}
.cell.free {
    background: repeating-linear-gradient(45deg, var(--hit), var(--hit) 6px, #1c9d70 6px, #1c9d70 12px);
    color: #fff;
    cursor: default;
}
.cell.protested { box-shadow: inset 0 0 0 2px var(--warn); }
.cell .badge-protest {
    position: absolute;
    margin: -2.2rem 0 0 2.4rem;
    background: var(--warn);
    color: #3a2a00;
    border-radius: 999px;
    font-size: .62rem;
    padding: 0 .35rem;
    font-weight: 800;
}
.board.size-3 { grid-template-columns: repeat(3, 1fr); }
.board.size-3 .cell { font-size: .85rem; }
.board.size-4 { grid-template-columns: repeat(4, 1fr); }
.board.size-5 { grid-template-columns: repeat(5, 1fr); }
.board.size-5 .cell { font-size: .62rem; }

/* ---- Spelarlista ---- */
.player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .2rem;
    border-bottom: 1px solid var(--border);
}
.player-row:last-child { border-bottom: 0; }
.player-name { font-weight: 600; }
/* Mellanrummen läggs här, inte i markup: Razor trimmar blanksteg runt kodblock, så
   "@p.Name @if (...)" renderas utan mellanslag. */
.player-you { margin-left: .35rem; }
.host-mark { font-size: .85em; opacity: .85; margin-left: .35rem; }
.pill {
    font-size: .72rem;
    font-weight: 800;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.pill.bingo { background: var(--accent); color: #fff; border: 0; }
.pill.ready { background: var(--hit-soft); color: var(--hit); border-color: var(--hit); }

/* Förhandsvisning i brickbyggaren. Tomma rutor markeras streckade så att det syns hur
   många som återstår, utan att de ser ut att gå att trycka på. */
.builder-preview { margin: .1rem 0 1rem; }
.builder-preview .cell { cursor: default; }
.builder-preview .cell:active { transform: none; }
.builder-preview .cell { position: relative; }

.cell-remove {
    position: absolute;
    top: 0;
    right: 0;
    /* 1.75rem ≈ 28 px. Fortfarande under de 44 px som brukar rekommenderas för
       tumnavigering, men rutan är bara ~55 px bred på en 5×5-bricka och ett kryss
       som täcker halva rutan gör flosklen oläslig. Kompromissen är medveten. */
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

/* Hovern gäller bara pekdon som faktiskt kan hovra. Utan mediefrågan blir regeln
   klibbig på touch: webbläsaren låter :hover sitta kvar efter ett tryck, så krysset
   stannar rött tills man rör något annat. */
@media (hover: hover) {
    .cell-remove:hover { background: var(--danger); color: #fff; }
}

/* Återkoppling som fungerar på touch, där hover inte finns. */
.cell-remove:active { background: var(--danger); color: #fff; transform: scale(.92); }

/* På 5×5 är rutorna för små för det stora krysset. */
.board.size-5 .cell-remove { width: 1.4rem; height: 1.4rem; font-size: .95rem; }

.builder-preview .cell.empty {
    border-style: dashed;
    background: transparent;
    opacity: .55;
}

/* ---- Flöde ---- */
.feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: 0; }
.feed-text { font-weight: 600; }
.feed-meta { font-size: .8rem; color: var(--text-muted); }
.feed-item.disputed .feed-text { text-decoration: line-through solid var(--warn); }
.protest-count { color: var(--warn); font-weight: 700; }

.btn-protest {
    padding: .4rem .7rem;
    min-height: 38px;
    border-radius: 999px;
    font-size: .85rem;
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger);
    white-space: nowrap;
}
.btn-protest.active { background: var(--danger); color: #fff; }

/* ---- Status-taggar ---- */
.status-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .55rem; border-radius: 999px; }
.status-tag.lobby { background: #fff3d6; color: #8a6100; }
.status-tag.active { background: var(--hit-soft); color: var(--hit); }
.status-tag.finished { background: var(--surface-2); color: var(--text-muted); }

/* ---- Bingo-fest ---- */
.bingo-banner {
    text-align: center;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: #fff;
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
    animation: pop .4s ease;
}
.bingo-banner .big { font-size: 2rem; font-weight: 900; letter-spacing: .1em; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }
.toolbar .btn { flex: 1; }
.row-split { display: flex; gap: .6rem; align-items: center; }
.grow { flex: 1; }

/* ==========================================================================
   Bevarade fel- och valideringsstilar
   ========================================================================== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: .85rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "Ett fel har inträffat."; }

/* Om-sidan och FAQ ------------------------------------------------------- */

.steps { margin: 0; padding-left: 1.2rem; color: var(--text-muted); }
.steps li { margin: .35rem 0; }

/* Frågorna är <details>. Markören döljs och ersätts med ett eget tecken som
   roterar, eftersom webbläsarnas egna trianglar skiljer sig åt i både storlek
   och placering. */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: .7rem 1.6rem .7rem 0;
    font-weight: 600;
    position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
    content: "▸";
    position: absolute;
    right: .25rem;
    color: var(--primary);
    transition: transform .15s ease;
}
.faq-item[open] > summary::after { transform: rotate(90deg); }

.faq-item > p {
    margin: 0 0 .9rem;
    color: var(--text-muted);
}

/* Sidfot ----------------------------------------------------------------- */

/* Om- och FAQ-sidorna måste nås från varje sida, inte bara från startsidan:
   en sida ingen länkar till hittas varken av besökare eller sökmotorer. */
.app-footer {
    margin: 1.5rem 0 .5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--text-muted);
}
.app-footer a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0 .5rem;
}
.app-footer a:hover { color: var(--primary); text-decoration: underline; }

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

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.admin-figures { display: flex; gap: 2rem; flex-wrap: wrap; }
.admin-figures .figure {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}
.admin-figures .label { font-size: .8rem; color: var(--text-muted); }

.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { padding: .35rem .5rem; text-align: left; }
.admin-table thead th { border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); }
.admin-table tbody tr + tr th, .admin-table tbody tr + tr td { border-top: 1px solid var(--border); }
.admin-table tbody th { font-weight: 600; }

/* Tabellerna är bredare än en telefon. Låt dem rulla i sig själva i stället för att
   knuffa hela sidan i sidled. */
.card-panel > .admin-table { display: block; overflow-x: auto; white-space: nowrap; }

/* Blänkare till vänsajt. Avskild med en linje i stället för bara luft – den hör inte
   till säljtexten ovanför, och utan markering läses den som en fortsättning på den. */
.partner-note {
    margin: .9rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
    font-size: .88rem;
}
.partner-note a { color: var(--primary); text-decoration: none; white-space: nowrap; }
.partner-note a:hover { text-decoration: underline; }

/* Korsreklam efter avslutad omgång. Får ta plats – till skillnad från blänkaren på
   startsidan visas den bara när spelet är slut och besökaren inte har något annat
   för sig. Accentfärgen skiljer den från spelets egna paneler så att den läses som
   ett erbjudande och inte som en del av resultatet. */
.cross-promo {
    border: 1px solid var(--accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
}
.cross-promo h2 { margin-top: 0; }
.cross-promo p { color: var(--text-muted); }

.btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-accent:hover { filter: brightness(1.08); color: #fff; }

/* Ändrar bricka: varken klar eller obörjad. Varnande gult snarare än grönt, eftersom
   det är ett läge värden behöver notera innan hen startar spelet. */
.pill.editing {
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

/* Introrad för den som redan är inloggad. Kompakt med flit – formuläret under ska
   fortfarande synas utan att man scrollar på telefon. */
.welcome-strip { padding: .8rem 1.1rem; }
.welcome-strip h1 { margin: 0 0 .3rem; font-size: 1.25rem; }
.welcome-strip p { margin: 0; font-size: .9rem; }
.welcome-strip a { color: var(--primary); text-decoration: none; white-space: nowrap; }
.welcome-strip a:hover { text-decoration: underline; }

/* Pågående spel på startsidan. Hela raden är länken – ett litet mål bredvid en stor
   yta som ser klickbar ut är den sortens sak man missar på telefon. */
.ongoing h2 { margin-top: 0; }
.ongoing-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    text-decoration: none;
    color: inherit;
}
.ongoing-row + .ongoing-row { border-top: 1px solid var(--border); }
.ongoing-row strong { display: block; }
.ongoing-row .muted { font-size: .85rem; }
.ongoing-row:hover strong { color: var(--primary); }
/* Knappen är en span inuti länken – den ska se ut som en knapp men inte fånga klicket
   för sig, eftersom hela raden redan leder rätt. */
.ongoing-row .btn { pointer-events: none; white-space: nowrap; }