/* =====================================================================
   Kunskapsstjärnan – turneringar
   css/ks-turnering.css   (turneringmenu.php och turnering.php)

   Menysidan använder menyns variabler (--km-*, css/ks-menu.css) och
   turneringssidan temats (--color-*, css/ks-braingym.css). Bara det
   som är turneringarnas eget finns här.
   ===================================================================== */

/* ── Menysidan ───────────────────────────────────────────────────── */
.tr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--km-yta2); border: 1px solid var(--km-kant); }
.tr-lista .tr-ikon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.tr-lista .tr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-lista .tr-text b { color: var(--km-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-lista .tr-text small { color: var(--km-text2); font-size: .8rem; }
.tr-lista .tr-knappar { display: flex; gap: 6px; flex-shrink: 0; }
.tr-tom { color: var(--km-text2); font-size: .9rem; margin: 0; }
.tr-fel { color: #ef4444; font-weight: 700; min-height: 1.2em; margin: 8px 0 0; }
.tr-kodrad { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-kodrad .km-falt { flex: 1; min-width: 150px; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; }
.tr-summa { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--km-yta2); border: 1px solid var(--km-kant); color: var(--km-text); font-size: .9rem; }
textarea.km-falt.tr-namnen { min-height: 180px; resize: vertical; line-height: 1.55; font-family: inherit; }
.tr-namnrad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 8px; }
.tr-namnrad span { color: var(--km-text2); font-size: .85rem; }
.tr-huvud { font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--km-gul) 22%, transparent); color: var(--km-gul-text, var(--km-text)); margin-left: 6px; vertical-align: middle; }

/* ── Turneringssidan ─────────────────────────────────────────────── */
main .tr-sida { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
main .tr-kort { background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); border-radius: 16px; padding: 14px 16px; color: var(--color-text-primary); }
main .tr-kort > h2 { margin: 0 0 10px; font: 800 1.05rem 'Exo 2', sans-serif; display: flex; align-items: center; gap: 8px; color: var(--color-text-primary); }
main .tr-rubrik { font: 800 clamp(1.3rem, 3vw, 1.9rem) 'Exo 2', sans-serif; margin: 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
main .tr-under { color: var(--color-text-secondary); margin: 2px 0 0; }
main .tr-mataren { height: 8px; border-radius: 99px; background: var(--color-bg-tertiary); overflow: hidden; margin-top: 8px; }
main .tr-mataren i { display: block; height: 100%; background: var(--color-accent-gold); border-radius: 99px; transition: width .4s; }
main .tr-vinnare { font: 800 1.15rem 'Exo 2', sans-serif; color: var(--color-accent-gold); margin: 8px 0 0; }

/* Tabellen */
main .tr-tabellwrap { overflow-x: auto; }
main table.tr-tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
main .tr-tabell th, main .tr-tabell td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--color-border-subtle); }
main .tr-tabell th { font: 700 .72rem 'Exo 2', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
main .tr-tabell td.tr-n, main .tr-tabell th.tr-n { text-align: left; font-weight: 700; }
main .tr-tabell td.tr-p { font-weight: 800; color: var(--color-accent-gold); }
main .tr-tabell tr.tr-ledare td { background: color-mix(in srgb, var(--color-accent-gold) 10%, transparent); }
main .tr-tabell td.tr-plats { color: var(--color-text-muted); width: 2.2em; }

/* Matchträdet */
main .tr-trad { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
main .tr-omg { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 0; }
main .tr-omg > h3 { margin: 0 0 2px; font: 700 .72rem 'Exo 2', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); text-align: center; }
main .tr-tradmatch { border: 1px solid var(--color-border-subtle); border-radius: 10px; background: var(--color-bg-tertiary); overflow: hidden; }
main .tr-tradmatch div { display: flex; justify-content: space-between; gap: 6px; padding: 6px 9px; font-size: .9rem; color: var(--color-text-secondary); }
main .tr-tradmatch div + div { border-top: 1px solid var(--color-border-subtle); }
main .tr-tradmatch div.vann { color: var(--color-text-primary); font-weight: 800; }
main .tr-tradmatch div.vann::after { content: '✓'; color: var(--color-accent-gold); }
main .tr-tradmatch.pagar { border-color: var(--color-accent-gold); }
main .tr-tradmatch .tom { font-style: italic; opacity: .6; }

/* Matcherna */
main .tr-omgang { margin: 0 0 6px; font: 700 .76rem 'Exo 2', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
main .tr-matcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 14px; }
main .tr-match { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--color-bg-tertiary); border: 2px solid var(--color-border-subtle); }
main .tr-match.pagar { border-color: var(--color-accent-gold); }
main .tr-match.klar { opacity: .92; }
main .tr-match .tr-par { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-weight: 700; }
main .tr-match .tr-par span:first-child { text-align: right; }
main .tr-match .tr-par span { overflow-wrap: anywhere; }
main .tr-match .tr-par span.vann { color: var(--color-accent-gold); }
main .tr-match .tr-par em { font-style: normal; font: 800 .95rem 'Orbitron', sans-serif; color: var(--color-text-muted); white-space: nowrap; }
main .tr-match .tr-info { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--color-text-secondary); flex-wrap: wrap; }
main .tr-match .tr-merke { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border-subtle); font-size: .74rem; }
main .tr-match.pagar .tr-merke { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
main .tr-match .tr-mknappar { display: flex; gap: 6px; }
main .tr-match .tr-mknappar button { font: 700 .8rem 'Exo 2', sans-serif; padding: 5px 10px; border-radius: 9px; cursor: pointer; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 2px solid var(--color-border-subtle); min-height: 34px; }
main .tr-match .tr-mknappar button:hover { border-color: var(--color-accent-gold); }

/* Dialogrutorna */
.tr-dialog { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 25, .66); }
.tr-dialog[hidden] { display: none; }
.tr-dialog > div { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--color-bg-secondary, #1d2140); color: var(--color-text-primary, #fff); border: 2px solid var(--color-accent-gold, #f5c542); border-radius: 18px; padding: 18px; text-align: center; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.tr-dialog h3 { margin: 0 0 6px; font: 800 1.2rem 'Exo 2', sans-serif; }
.tr-dialog p { margin: 6px 0; color: var(--color-text-secondary, #c9cbe0); line-height: 1.45; }
.tr-dialog .tr-qr { width: min(280px, 70vw); margin: 10px auto; background: #fff; border-radius: 12px; padding: 8px; }
.tr-dialog .tr-qr svg { display: block; width: 100%; height: auto; }
.tr-dialog .tr-storkod { font: 800 clamp(1.8rem, 8vw, 2.6rem) 'Orbitron', monospace; letter-spacing: .18em; color: var(--color-accent-gold, #f5c542); margin: 4px 0; }
.tr-dialog .tr-dknappar { display: grid; gap: 8px; margin-top: 12px; }
.tr-dialog button { font: 700 .95rem 'Exo 2', sans-serif; padding: 10px 14px; border-radius: 12px; cursor: pointer; min-height: 44px; background: var(--color-bg-tertiary, #2a2f55); color: var(--color-text-primary, #fff); border: 2px solid var(--color-border-subtle, #444a7a); }
.tr-dialog button:hover { border-color: var(--color-accent-gold, #f5c542); }
.tr-dialog button.primar { border-color: var(--color-accent-gold, #f5c542); box-shadow: inset 0 -3px 0 var(--color-accent-gold, #f5c542); }
.tr-dialog button.fara:hover { border-color: #ef4444; color: #ef4444; }
.tr-dialog .tr-lank { font-size: .8rem; word-break: break-all; color: var(--color-text-muted, #9aa); }

/* Anslutningssidan */
main .tr-anslut { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
main .tr-motpar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
main .tr-motpar b { display: block; font: 800 clamp(1.2rem, 4vw, 1.8rem) 'Exo 2', sans-serif; overflow-wrap: anywhere; }
main .tr-motpar small { color: var(--color-text-secondary); }
main .tr-motpar .tr-mot { font: 800 1rem 'Orbitron', sans-serif; color: var(--color-text-muted); }
main .tr-val { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
main .tr-val > div { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-subtle); }
main .tr-val h3 { margin: 0; font: 800 1rem 'Exo 2', sans-serif; }
main .tr-val p { margin: 0; color: var(--color-text-secondary); font-size: .88rem; }
main .tr-ansl-status { text-align: center; font: 700 1.05rem 'Exo 2', sans-serif; margin: 0; }

/* Storbilden */
.tr-storbild { position: fixed; inset: 0; z-index: 9400; overflow: auto; padding: clamp(12px, 2.5vw, 32px); background: var(--color-bg-primary, #0b0e24); color: var(--color-text-primary, #fff); display: flex; flex-direction: column; gap: 18px; }
.tr-storbild[hidden] { display: none; }
.tr-storbild .tr-sb-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-storbild .tr-sb-topp h2 { margin: 0; font: 800 clamp(1.6rem, 3.6vw, 3rem) 'Exo 2', sans-serif; }
.tr-storbild .tr-sb-topp p { margin: 2px 0 0; color: var(--color-text-secondary, #c9cbe0); font-size: clamp(.95rem, 1.5vw, 1.25rem); }
.tr-storbild .tr-sb-knappar { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-storbild .tr-sb-knappar button { font: 700 .95rem 'Exo 2', sans-serif; padding: 8px 14px; border-radius: 12px; cursor: pointer; background: var(--color-bg-tertiary, #2a2f55); color: var(--color-text-primary, #fff); border: 2px solid var(--color-border-subtle, #444a7a); }
.tr-storbild .tr-sb-knappar button[aria-pressed="true"] { border-color: var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-sb-yta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.tr-storbild .tr-sb-yta.ensam { grid-template-columns: 1fr; }
.tr-storbild .tr-kort { background: var(--color-bg-secondary, #1d2140); border: 1px solid var(--color-border-subtle, #444a7a); border-radius: 16px; padding: 16px; }
.tr-storbild .tr-kort > h2 { margin: 0 0 10px; font: 800 clamp(1.1rem, 2vw, 1.5rem) 'Exo 2', sans-serif; }
.tr-storbild table.tr-tabell { width: 100%; border-collapse: collapse; font-size: clamp(1rem, 1.8vw, 1.5rem); }
.tr-storbild .tr-tabell th, .tr-storbild .tr-tabell td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--color-border-subtle, #444a7a); }
.tr-storbild .tr-tabell th { font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted, #9aa); }
.tr-storbild .tr-tabell .tr-n { text-align: left; font-weight: 700; }
.tr-storbild .tr-tabell .tr-p { font-weight: 800; color: var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-tabell tr.tr-ledare td { background: color-mix(in srgb, var(--color-accent-gold, #f5c542) 12%, transparent); }
.tr-storbild .tr-sb-matcher { display: grid; gap: 10px; }
.tr-storbild .tr-sb-match { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--color-bg-tertiary, #2a2f55); border: 2px solid var(--color-border-subtle, #444a7a); font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 700; }
.tr-storbild .tr-sb-match.pagar { border-color: var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-sb-match small { display: block; font-size: .7em; font-weight: 500; color: var(--color-text-secondary, #c9cbe0); }
.tr-storbild .tr-sb-qr { width: clamp(90px, 9vw, 140px); background: #fff; border-radius: 10px; padding: 5px; text-align: center; }
.tr-storbild .tr-sb-qr svg { display: block; width: 100%; height: auto; }
.tr-storbild .tr-sb-qr span { display: block; font: 800 .8rem 'Orbitron', monospace; color: #1a2a6c; letter-spacing: .1em; }
.tr-storbild .tr-trad { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 16px; overflow-x: auto; }
.tr-storbild .tr-omg { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.tr-storbild .tr-omg > h3 { margin: 0; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted, #9aa); text-align: center; }
.tr-storbild .tr-tradmatch { border: 1px solid var(--color-border-subtle, #444a7a); border-radius: 10px; background: var(--color-bg-tertiary, #2a2f55); overflow: hidden; font-size: clamp(.95rem, 1.5vw, 1.25rem); }
.tr-storbild .tr-tradmatch div { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; color: var(--color-text-secondary, #c9cbe0); }
.tr-storbild .tr-tradmatch div + div { border-top: 1px solid var(--color-border-subtle, #444a7a); }
.tr-storbild .tr-tradmatch div.vann { color: var(--color-text-primary, #fff); font-weight: 800; }
.tr-storbild .tr-tradmatch div.vann::after { content: '✓'; color: var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-tradmatch.pagar { border-color: var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-tradmatch .tom { font-style: italic; opacity: .6; }
.tr-storbild .tr-vinnare { font: 800 clamp(1.3rem, 2.6vw, 2.2rem) 'Exo 2', sans-serif; color: var(--color-accent-gold, #f5c542); margin: 0; }

@media (max-width: 48em) {
    main .tr-val { grid-template-columns: 1fr; }
    .tr-storbild .tr-sb-yta { grid-template-columns: 1fr; }
}

/* Storbilden: QR-koden till resultatvyn */
.tr-storbild .tr-sb-resqr { display: flex; align-items: center; gap: 16px; align-self: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--color-bg-secondary, #1d2140); border: 2px solid var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-sb-resqr b { display: block; font: 800 clamp(1rem, 1.8vw, 1.4rem) 'Exo 2', sans-serif; }
.tr-storbild .tr-sb-resqr .tr-storkod { display: block; font: 800 clamp(1.4rem, 3vw, 2.4rem) 'Orbitron', monospace; letter-spacing: .18em; color: var(--color-accent-gold, #f5c542); }

/* Se match live */
.tr-dialog.tr-livebak > div { width: min(520px, 100%); }
.tr-live-namn { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; font-weight: 700; }
.tr-live-namn em { font-style: normal; font: 800 .8rem 'Orbitron', sans-serif; color: var(--color-text-muted, #9aa); }
.tr-live-spelare { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 2px solid transparent; }
.tr-live-spelare.tur { border-color: var(--color-accent-gold, #f5c542); }
.tr-live-prick { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset -2px -2px 3px rgba(0,0,0,.35); }
.tr-live-prick.p1 { background: #e74c3c; } .tr-live-prick.p2 { background: #3498db; }
.tr-live-prick.p1.schack, .tr-live-prick.p2.reversi, .tr-live-prick.p2.femirad { background: #f3f4f6; }
.tr-live-prick.p2.schack, .tr-live-prick.p1.reversi, .tr-live-prick.p1.femirad { background: #111827; }
.tr-live-prick.treirad { background: none; box-shadow: none; }
.tr-live-prick.p1.treirad::before { content: '✕'; font-size: .8rem; color: #e74c3c; }
.tr-live-prick.p2.treirad::before { content: '○'; font-size: .8rem; color: #3498db; }
.tr-live-brade { display: flex; justify-content: center; }
.tr-live-status { font-weight: 700; color: var(--color-text-primary, #fff) !important; }
.tr-lb { display: grid; width: min(400px, 78vw); aspect-ratio: 1; gap: 2px; padding: 6px; border-radius: 12px; box-sizing: border-box; }
.tr-lb span { display: grid; place-items: center; border-radius: 4px; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.tr-lb.fyra { aspect-ratio: 7 / 6; background: #1e40af; gap: 4px; }
.tr-lb.fyra span { border-radius: 50%; background: #0b1235; }
.tr-lb.fyra span.p1 { background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 65%); }
.tr-lb.fyra span.p2 { background: radial-gradient(circle at 35% 30%, #93c5fd, #2563eb 65%); }
.tr-lb.treirad { width: min(260px, 70vw); background: var(--color-border-subtle, #444a7a); gap: 4px; }
.tr-lb.treirad span { background: var(--color-bg-tertiary, #2a2f55); font: 800 clamp(2rem, 9vw, 3.4rem) 'Exo 2', sans-serif; }
.tr-lb.treirad span.p1 { color: #e74c3c; } .tr-lb.treirad span.p2 { color: #3498db; }
.tr-lb.femirad { background: #d8a657; gap: 1px; padding: 4px; }
.tr-lb.femirad span { background: #e6b96e; border-radius: 0; }
.tr-lb.femirad span.p1::after, .tr-lb.femirad span.p2::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; }
.tr-lb.femirad span.p1::after { background: radial-gradient(circle at 35% 30%, #6b7280, #111827 65%); }
.tr-lb.femirad span.p2::after { background: radial-gradient(circle at 35% 30%, #fff, #d1d5db 70%); }
.tr-lb.reversi { background: #14532d; gap: 2px; }
.tr-lb.reversi span { background: #16a34a; border-radius: 2px; }
.tr-lb.reversi span.p1::after, .tr-lb.reversi span.p2::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; }
.tr-lb.reversi span.p1::after { background: radial-gradient(circle at 35% 30%, #6b7280, #111827 65%); }
.tr-lb.reversi span.p2::after { background: radial-gradient(circle at 35% 30%, #fff, #d1d5db 70%); }
.tr-lb.schack { gap: 0; padding: 0; overflow: hidden; border: 4px solid #6b4423; }
.tr-lb.schack span { border-radius: 0; }
.tr-lb.schack span.ljus { background: #f0d9b5; } .tr-lb.schack span.mork { background: #b58863; }
.tr-lb.schack img { width: 88%; height: auto; max-height: 88%; display: block; }
.tr-storbild .tr-sb-match .bg-knapp { font: 700 .9rem 'Exo 2', sans-serif; padding: 6px 12px; border-radius: 10px; cursor: pointer; background: var(--color-bg-secondary, #1d2140); color: var(--color-text-primary, #fff); border: 2px solid var(--color-accent-gold, #f5c542); }
.tr-storbild .tr-sb-match { grid-template-columns: 1fr auto auto; }