@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root { color-scheme: dark; --white:#faf8ff; --muted:#bcb5cc; --purple:#8b5cf6; --pink:#f752ad; --green:#6df7ad; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
body { min-height:100vh; min-height:100dvh; margin:0; font-family:"DM Sans",sans-serif; color:var(--white); background:radial-gradient(circle at 12% 12%,rgba(139,92,246,.27),transparent 30%),radial-gradient(circle at 88% 88%,rgba(247,82,173,.18),transparent 28%),#0e0b18; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:radial-gradient(#fff .7px,transparent .7px); background-size:24px 24px; mask-image:linear-gradient(#000,transparent); }
button,a { font:inherit; }
.page { position:relative; z-index:1; min-height:100vh; min-height:100dvh; width:min(1050px,100%); margin:auto; padding:28px 22px 50px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:clamp(42px,8vh,90px); }
.brand { color:var(--white); font:700 1.15rem "Space Grotesk",sans-serif; letter-spacing:-.03em; text-decoration:none; }
.brand span { color:var(--pink); }
.status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; font-weight:600; }
.status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.eyebrow { margin:0 0 12px; color:#a98cfb; font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:14px; font:700 clamp(2.5rem,7vw,5.3rem)/.96 "Space Grotesk",sans-serif; letter-spacing:-.065em; }
.subtitle { color:var(--muted); font-size:1.05rem; line-height:1.6; }
.panel { border:1px solid var(--line); border-radius:28px; background:rgba(29,23,47,.78); box-shadow:0 28px 80px rgba(0,0,0,.24); backdrop-filter:blur(18px); }
.host-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin-top:40px; }
.metric { min-height:260px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; }
.metric-label { color:var(--muted); font-weight:600; }
.player-count { font:700 clamp(6rem,15vw,10rem)/.75 "Space Grotesk",sans-serif; letter-spacing:-.08em; }
.player-count small { font:600 1rem "DM Sans",sans-serif; color:var(--muted); letter-spacing:0; }
.code-card { align-items:center; text-align:center; background:linear-gradient(145deg,rgba(139,92,246,.25),rgba(247,82,173,.12)); }
.game-code { margin:auto 0; font:700 clamp(3rem,9vw,6rem)/1 "Space Grotesk",sans-serif; letter-spacing:.11em; text-shadow:0 0 35px rgba(169,140,251,.35); }
.hint { margin:0; color:var(--muted); font-size:.85rem; }
.host-console { margin-top:18px; padding:30px; }
.console-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.console-head h2 { margin:0; font:700 clamp(1.6rem,4vw,2.3rem) "Space Grotesk",sans-serif; letter-spacing:-.04em; }
.duration-field { display:grid; gap:7px; color:var(--muted); font-size:.76rem; font-weight:700; text-align:right; }
.duration-field span { display:flex; align-items:center; gap:8px; }
.duration-field input { width:68px; height:42px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.07); color:var(--white); font:700 1rem "DM Sans",sans-serif; text-align:center; }
.duration-field input:focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
.current-buzz { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:132px; padding:24px 28px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.04); transition:.2s ease; }
.current-buzz.is-active { border-color:rgba(247,82,173,.5); background:linear-gradient(120deg,rgba(247,82,173,.16),rgba(139,92,246,.13)); box-shadow:inset 0 0 45px rgba(247,82,173,.05); }
.current-label { display:block; margin-bottom:7px; color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.current-player { display:block; font:700 clamp(2rem,7vw,4.2rem)/1 "Space Grotesk",sans-serif; letter-spacing:-.05em; }
.timer { flex:0 0 auto; color:#ffd166; font:700 clamp(2.2rem,7vw,4.4rem)/1 "Space Grotesk",sans-serif; font-variant-numeric:tabular-nums; }
.remove-buzz { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:var(--white); background:rgba(255,255,255,.08); font:500 2rem/1 "DM Sans",sans-serif; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.remove-buzz:hover:not(:disabled) { background:rgba(255,77,94,.3); transform:scale(1.06); }
.remove-buzz:disabled { cursor:not-allowed; opacity:.35; }
.remove-buzz:focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
.timer-track { height:5px; margin:12px 5px 22px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.timer-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--pink),#ffd166); transition:width .1s linear; }
.console-actions { display:flex; gap:10px; margin-bottom:28px; }
.control-button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.06); color:var(--white); font-weight:700; cursor:pointer; }
.control-button-primary { border-color:transparent; background:var(--purple); }
.control-button:disabled { cursor:not-allowed; opacity:.38; }
.control-button:focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
.confirmation-toast { position:fixed; z-index:10; right:22px; bottom:22px; width:min(390px,calc(100vw - 44px)); padding:15px 18px; border:1px solid rgba(109,247,173,.52); border-radius:16px; color:#11241a; background:var(--green); box-shadow:0 18px 45px rgba(0,0,0,.3); font-weight:700; }
.host-console h3 { margin:0 0 12px; font:700 1rem "Space Grotesk",sans-serif; }
.buzz-history { margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.buzz-history-list { max-height:320px; overflow:auto; padding-right:4px; }
.buzz-history-item:first-child { border-color:var(--line); background:rgba(255,255,255,.045); }
.buzz-history-item:first-child::before { color:#dcd4ea; background:rgba(255,255,255,.08); }
.player-layout { width:min(760px,100%); margin:auto; }
.player-header { text-align:center; margin-bottom:28px; }
.buzzer-wrap { display:grid; place-items:center; min-height:330px; }
.buzzer { position:relative; width:min(270px,70vw); aspect-ratio:1; border:0; border-radius:50%; color:#fff; background:linear-gradient(145deg,#ff65bc,#dc287f); box-shadow:0 17px 0 #8f1551,0 28px 60px rgba(247,82,173,.38),inset 0 8px 20px rgba(255,255,255,.26); font:700 clamp(2rem,8vw,3.2rem) "Space Grotesk",sans-serif; letter-spacing:-.04em; cursor:pointer; transition:transform .12s,box-shadow .12s,filter .2s; }
.buzzer:hover { filter:brightness(1.08); transform:translateY(-3px); }
.buzzer:active,.buzzer.is-pressed { transform:translateY(12px); box-shadow:0 5px 0 #8f1551,0 14px 35px rgba(247,82,173,.28),inset 0 8px 20px rgba(255,255,255,.2); }
.buzzer.is-too-late { background:linear-gradient(145deg,#ff4d5e,#c5162e); box-shadow:0 5px 0 #790b1c,0 14px 35px rgba(220,30,55,.3),inset 0 8px 20px rgba(255,255,255,.18); }
.buzzer:focus-visible { outline:4px solid #ffd166; outline-offset:8px; }
.player-score { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); font-weight:700; }
.player-score strong { color:#ffd166; font:700 1.4rem "Space Grotesk",sans-serif; }
.turn-alert { width:max-content; max-width:100%; margin:14px auto 0; padding:10px 16px; border:1px solid rgba(255,209,102,.52); border-radius:999px; color:#241b08; background:#ffd166; font:700 1rem "Space Grotesk",sans-serif; }
.score-panel { margin:24px 0; padding:28px; }
.score-list { display:grid; gap:10px; }
.score-row { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:66px; padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04); }
.score-identity { display:grid; gap:3px; }
.score-identity small { color:var(--muted); }
.score-controls { display:flex; align-items:center; gap:9px; }
.score-button { min-width:56px; height:42px; border:1px solid var(--line); border-radius:12px; color:var(--white); background:rgba(255,255,255,.08); font:700 .8rem "DM Sans",sans-serif; cursor:pointer; }
.score-button:hover { background:rgba(255,255,255,.14); }
.score-value { min-width:72px; color:#ffd166; text-align:center; }
.ranking { margin-top:34px; padding:28px; }
.ranking-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ranking h2 { margin:0; font:700 1.4rem "Space Grotesk",sans-serif; }
.round { color:var(--muted); font-size:.78rem; }
.buzz-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:rank; }
.buzz-item { counter-increment:rank; display:flex; align-items:center; gap:14px; min-height:58px; padding:10px 15px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.045); animation:enter .3s ease both; }
.buzz-item::before { content:counter(rank); display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:10px; color:#dcd4ea; background:rgba(255,255,255,.08); font-weight:700; }
.buzz-item:first-child { border-color:rgba(255,209,102,.42); background:rgba(255,209,102,.08); }
.buzz-item:first-child::before { color:#241b08; background:#ffd166; }
.buzz-name { font-weight:700; }
.buzz-time { margin-left:auto; color:var(--muted); font-size:.78rem; }
.empty { padding:22px 0 8px; color:var(--muted); text-align:center; }
@keyframes enter { from { opacity:0; transform:translateY(-8px); } }

/* Tableau hôte : les actions de jeu restent visibles sans faire défiler la page. */
.host-dashboard > .eyebrow { margin-bottom:6px; }
.host-dashboard h1 { margin-bottom:8px; font-size:clamp(2.35rem,4.6vw,4rem); }
.host-dashboard > .subtitle { max-width:650px; margin-bottom:0; font-size:.95rem; }
.host-dashboard .host-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.host-dashboard .metric { min-height:96px; padding:16px 20px; }
.host-dashboard .player-count { font-size:clamp(2.8rem,5vw,4.2rem); }
.host-dashboard .game-code { margin:5px 0 0; font-size:clamp(2rem,4vw,3.35rem); }
.host-dashboard .hint { display:none; }
.host-main-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px; align-items:stretch; margin-top:14px; }
.host-dashboard .score-panel,.host-dashboard .host-console { margin:0; padding:20px; }
.host-dashboard .ranking-head { margin-bottom:12px; }
.host-dashboard .ranking-head .eyebrow { margin-bottom:5px; }
.host-dashboard .ranking h2,.host-dashboard .score-panel h2 { font-size:1.22rem; }
.host-dashboard .score-list { gap:7px; }
.host-dashboard .score-row { min-height:54px; gap:8px; padding:7px 8px 7px 12px; }
.host-dashboard .score-controls { gap:5px; }
.host-dashboard .score-button { min-width:42px; height:34px; padding:0 6px; font-size:.7rem; }
.host-dashboard .score-value { min-width:48px; font-size:.82rem; }
.host-dashboard .console-head { margin-bottom:14px; }
.host-dashboard .console-head h2 { font-size:1.45rem; }
.host-dashboard .duration-field input { width:54px; height:36px; }
.host-dashboard .current-buzz { min-height:92px; padding:16px 18px; }
.host-dashboard .current-player { font-size:clamp(1.7rem,3.3vw,2.7rem); }
.host-dashboard .timer { font-size:clamp(1.8rem,3.4vw,2.8rem); }
.host-dashboard .timer-track { margin:8px 3px 12px; }
.host-dashboard .console-actions { margin-bottom:16px; }
.host-dashboard .control-button { min-height:38px; padding:8px 12px; font-size:.82rem; }
.host-dashboard .buzz-list { gap:7px; }
.host-dashboard .buzz-item { min-height:46px; padding:6px 10px; }
.host-dashboard .buzz-item::before { flex-basis:28px; height:28px; border-radius:8px; font-size:.82rem; }
.host-dashboard .empty { padding:13px 0 4px; font-size:.85rem; }
.host-dashboard .buzz-history { display:grid; grid-template-columns:auto 1fr; column-gap:12px; margin-top:16px; padding-top:14px; }
.host-dashboard .buzz-history h3 { grid-column:1 / -1; margin-bottom:7px; }
.host-dashboard .buzz-history .buzz-list { max-height:98px; overflow:auto; }
.host-dashboard .buzz-history .empty { padding:0; text-align:left; }
.host-dashboard .buzz-history-list { padding-right:3px; }
@media (min-width:681px) { .host-page .topbar { margin-bottom:32px; } }
@media (max-width:680px) { .host-grid{grid-template-columns:1fr}.metric{min-height:220px}.topbar{margin-bottom:52px}.page{padding-inline:16px}.ranking,.host-console{padding:20px}.buzzer-wrap{min-height:290px}.console-head{display:grid}.duration-field{text-align:left}.current-buzz{padding:20px}.console-actions{display:grid}.game-code{font-size:clamp(2.6rem,15vw,5rem)} }
@media (max-width:900px) { .host-main-grid{grid-template-columns:1fr}.host-dashboard .host-grid{margin-top:16px}.host-dashboard .score-panel,.host-dashboard .host-console{padding:18px}.host-dashboard .buzz-history{display:block}.host-dashboard .buzz-history .empty{text-align:center} }
@media (max-width:680px) { .host-dashboard .host-grid{grid-template-columns:1fr 1fr}.host-dashboard .metric{min-height:88px;padding:14px}.host-page .topbar{margin-bottom:30px}.host-dashboard .score-row{flex-wrap:wrap}.host-dashboard .score-controls{width:100%;justify-content:flex-end}.host-dashboard .console-head{display:flex}.host-dashboard .duration-field{text-align:right}.host-dashboard .current-buzz{padding:16px}.host-dashboard .buzz-history{display:block} }
@media (prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} }