:root {
    color-scheme: light;
    --ink: #183b49;
    --teal: #126378;
    --water: #39a7b7;
    --paper: #edf6f5;
    --line: #c9dfe2;
    --player-color: #55d9ff;
    font-family: system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #e7efed; }
button, input, select { font: inherit; }
button, .primary, .language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .6rem 1rem;
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .language:hover { background: #cfe9e9; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ffce54; outline-offset: 3px; }
.primary { background: var(--teal); border-color: var(--teal); color: white; }
.primary:hover { background: #175468; }
h1, h2, p, figure { margin: 0; }
h1 { font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: 1.05; }
h2 { font-size: clamp(1.15rem, 2.3vw, 2.25rem); line-height: 1.15; }
.panel {
    display: grid;
    gap: 1rem;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: clamp(1rem, 2.8vw, 2.5rem);
    background: var(--paper);
    color: var(--ink);
    text-align: center;
    box-shadow: 0 14px 40px #00192540;
}
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    padding: .45rem clamp(.65rem, 2vw, 2rem);
    background: #153e4a;
    color: white;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; color: white; font-weight: 750; }
.tools { display: flex; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }
.language { min-height: 32px; padding: .25rem .48rem; font-size: .83rem; }
.language[aria-current] { background: #48b2bf; border-color: #48b2bf; color: #082b35; }
#notice {
    position: fixed;
    z-index: 10;
    inset: auto 1rem 1rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    border-radius: 8px;
    padding: .7rem 1rem;
    background: #fff1b7;
    color: #263a42;
    overflow-wrap: anywhere;
}
.denied { width: min(92vw, 44rem); margin: 2rem auto; }

.television #game { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #070d11; }
.television .stage { position: relative; isolation: isolate; flex: 1; display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); min-height: 0; }
#screen { grid-area: 1 / 1; min-height: 0; background: #000; pointer-events: none; }
#screen iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.stage-overlay, #reel {
    grid-area: 1 / 1;
    position: relative;
    min-height: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: .85rem;
    overflow: auto;
}
#lobby {
    background: linear-gradient(135deg, #0e4e5cde, #143543ed),
        url('/Jeux/assets/images/jeux-paysage-aquarelle-20261019.jpg') center / cover;
}
.lobby-card { width: min(100%, 52rem); }
#lobby-room { display: grid; justify-items: center; gap: .55rem; }
#qr { display: grid; justify-items: center; gap: .35rem; }
#qr img { display: block; width: clamp(95px, min(25vh, 32vw), 260px); aspect-ratio: 1; border-radius: 8px; background: white; }
.qr-link { color: var(--teal); }
#results { z-index: 3; background: radial-gradient(ellipse at center, #14576bcc, #062333ef); }
#results .panel {
    position: relative;
    border-top: .65rem solid var(--player-color);
    width: min(94%, 78rem);
    gap: clamp(.65rem, 1.5vh, 1.5rem);
    padding: clamp(1rem, 4vh, 3.5rem) clamp(1rem, 4vw, 5rem);
    font-size: clamp(1rem, 1.6vw, 2rem);
    animation: victory-enter .65s ease-out both;
}
#winner { font-size: clamp(2rem, min(5.6vw, 9vh), 7rem); overflow-wrap: anywhere; }
#winning-score { width: min(100%, 43rem); }
#winning-score:empty, #result-text:empty, #winning-score .score-name { display: none; }
#winning-score .score-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#winning-score .score-metric { display: grid; justify-items: center; gap: .15rem; }
#winning-score .score-value { font-size: clamp(2rem, min(5vw, 8vh), 6rem); line-height: 1; }
#winning-score .score-label { font-size: clamp(.9rem, 1.6vw, 1.65rem); }
#victory-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#victory-bubbles span {
    position: absolute;
    left: var(--x);
    bottom: 0;
    width: var(--size);
    aspect-ratio: 1;
    border: 2px solid #cbfaffb0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff9 0%, #a4f3ff32 28%, #52c9ec14 60%);
    box-shadow: inset 0 0 10px #95f4ff70, 0 0 15px #79eaff52;
    opacity: 0;
    animation: victory-bubble var(--duration) var(--delay) ease-out both;
}
@keyframes victory-enter {
    from { opacity: 0; transform: translateY(1.25rem) scale(.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes victory-bubble {
    0% { opacity: 0; transform: translateY(100%) scale(.45); }
    14% { opacity: .95; }
    78% { opacity: .8; }
    100% { opacity: 0; transform: translate(var(--drift), -100vh) scale(1.25); }
}
#playback { z-index: 5; background: #092c3a90; }
#question-tv {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    display: grid;
    gap: .2rem;
    width: clamp(114px, 14vw, 225px);
    padding: .4rem;
    border-radius: 10px;
    background: #082732ea;
    color: white;
    text-align: center;
}
#question-clock { color: #ffdf74; font-weight: 850; font-size: clamp(1.2rem, 2vw, 2.1rem); font-variant-numeric: tabular-nums; }
#question-pending { font-size: clamp(.72rem, 1vw, 1rem); }
#scoreboard { grid-area: 2 / 1; z-index: 1; min-height: 0; background: black; }
#scoreboard:has(#scores:empty) { display: none; }
#scores, #team-scores {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(.35rem, .75vw, .85rem);
    padding: clamp(.4rem, .8vw, .9rem);
    background: black;
}
.score-card {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: .15rem;
    border: 2px solid var(--player-color);
    border-radius: 8px;
    padding: .35rem .55rem;
    background: var(--player-color);
    color: #102632;
}
.score-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.9rem, 1.35vw, 1.5rem); }
.score-numbers { display: flex; flex-wrap: wrap; gap: .15rem .75rem; font-size: clamp(.73rem, 1vw, 1rem); font-weight: 700; }
#scores:empty { display: none; }
.score-metric { display: inline-flex; align-items: baseline; gap: .3em; }
#scores .score-card {
    min-height: clamp(5rem, 14vh, 10rem);
    padding: .45rem clamp(.35rem, 1vw, 1.15rem);
    text-align: center;
}
#scores .score-name { font-size: clamp(1rem, 2vw, 2.5rem); }
#scores .score-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
}
#scores .score-metric { display: grid; justify-items: center; gap: .1rem; }
#scores .score-value { font-size: clamp(1.35rem, 3vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
#scores .score-label { font-size: clamp(.72rem, 1.15vw, 1.35rem); }
.score-card.away { opacity: .65; }
.miniature { width: 100%; overflow: hidden; border-radius: 8px; background: #123946; color: white; text-align: center; }
.miniature img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.miniature figcaption { padding: .4rem; font-weight: 700; }
#reel {
    z-index: 3;
    grid-template-rows: auto auto;
    align-content: center;
    gap: clamp(.8rem, 2vw, 2rem);
    background: radial-gradient(ellipse at center, #248c9d 0%, #124655 53%, #081b26 100%);
    color: white;
    text-align: center;
}
#reel h2 { min-height: 1.2em; }
.reel-track {
    width: min(94%, 84rem);
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    align-items: center;
    gap: clamp(.35rem, 2vw, 1.5rem);
}
.reel-track .miniature { border: 3px solid #70c6ce; box-shadow: 0 12px 34px #031725a0; opacity: .78; }
.reel-track .miniature:nth-child(2) { opacity: 1; border-color: #ffce54; animation: scroll-card .25s ease-out both; }
.revealed .reel-track { grid-template-columns: minmax(0, min(75vw, 55vh, 45rem)); justify-content: center; }
.reel-track .miniature.selected { border-color: #ffce54; box-shadow: 0 0 55px #ffce5470; opacity: 1; animation: reveal .65s ease-out both; }
@keyframes scroll-card { from { transform: translateX(11%) scale(.95); } to { transform: translateX(0) scale(1); } }
@keyframes reveal { from { transform: scale(.75); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.mobile { min-height: 100vh; background: linear-gradient(165deg, #f1efe5 5%, #bdd6d5 50%, #317d8b); }
.mobile[data-joined] {
    background: linear-gradient(165deg, #f1efe5, var(--player-color));
}
.mobile .toolbar { border-bottom: .35rem solid var(--player-color); }
.phone-panel {
    display: block;
    width: min(100% - 1.25rem, 38rem);
    margin: 1rem auto;
    border-top: .45rem solid var(--player-color);
    padding: clamp(.85rem, 4vw, 1.5rem);
}
.phone-panel h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
#join, #player-view, #challenge { display: grid; gap: .85rem; }
#join, #player-view { margin-top: 1rem; }
#name { min-height: 48px; padding: .5rem .75rem; width: 100%; border: 1px solid #71949c; border-radius: 8px; color: var(--ink); }
#challenge .miniature { width: min(100%, 28rem); justify-self: center; }
#challenge .miniature img { max-height: 37vh; }
.waiting { padding: .65rem .5rem; }
.question-heading { display: grid; gap: .5rem; justify-items: center; }
.clock {
    min-width: 3.7rem;
    padding: .2rem .55rem;
    border-radius: 7px;
    background: #ffce54;
    color: #143c48;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.3rem), 1fr)); gap: .4rem; }
.choice { border-color: #71949c; background: #fff; padding: .45rem .5rem; }
.correct { color: #17643b; }

@media (max-width: 820px) {
    #scores { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
    #scores .score-card { min-height: 3.8rem; padding-block: .25rem; }
    .toolbar { font-size: .85rem; }
    .toolbar button { min-height: 34px; padding: .3rem .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
}

.phone-controls { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
#paused-tv { z-index: 7; align-content: center; gap: .75rem; background: #092c3ab8; }
#paused-tv .panel { font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 700; }

#team-scores { padding-bottom: 0; }
#team-scores .score-card { text-align: center; }
#team-scores .score-numbers { justify-content: center; }
.team-members { margin: 0; font-size: .85rem; }
.team-settings { display: grid; gap: .55rem; text-align: left; border-top: 1px solid #71949c; padding-top: .75rem; }
.team-settings label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 1fr); align-items: center; gap: .6rem; }
.team-settings select { min-height: 44px; width: 100%; border: 1px solid #71949c; border-radius: 8px; padding: .3rem; color: var(--ink); background: white; }