@font-face { font-family: 'Orbitron'; font-weight: 700; font-display: block; src: url('../fonts/orbitron-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-weight: 900; font-display: block; src: url('../fonts/orbitron-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Press Start 2P'; font-weight: 400; font-display: block; src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); }

:root {
  --bg: #05030f; --ink: #f4f1ff; --dim: #9a93c9; --line: rgba(255,255,255,.14);
  --pink: #ff2fd0; --cyan: #00e5ff; --yellow: #ffe600; --orange: #ff8a00; --green: #22e36a; --red: #ff3b4e;
  --accent: var(--cyan);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; color: var(--ink); overflow: hidden; -webkit-user-select: none; user-select: none; cursor: default; }
body { font-family: 'Orbitron', 'Arial Black', sans-serif; font-weight: 700; }
a { color: inherit; text-decoration: none; }

/* Scène 16:9 : 1em = 1% de la largeur, tout est dimensionné en em */
.viewport { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #12082a 0%, #000 70%); }
.stage { --s: min(1vw, 1.77778vh); font-size: var(--s); width: calc(var(--s) * 100); height: calc(var(--s) * 56.25); position: relative; overflow: hidden; background: var(--bg); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; display: none; }
.layer.on { display: block; }

/* CRT léger : lignes + vignette */
.crt::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.55) 100%); }

.neon { text-shadow: 0 0 .3em var(--accent), 0 0 .8em var(--accent), 0 0 1.6em var(--accent); }
.blink { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.6em); } }
@keyframes slidein { from { opacity: 0; transform: translateY(2em); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.tag { display: inline-block; padding: .35em 1.2em; border: .18em solid var(--accent); color: var(--accent); border-radius: 10em; font-size: 1.7em; letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 1.2em var(--accent), inset 0 0 1.2em rgba(255,255,255,.06); background: rgba(0,0,0,.4); }
.panel { background: rgba(8,4,26,.78); border: .16em solid var(--accent); border-radius: 1.4em; box-shadow: 0 0 2em color-mix(in srgb, var(--accent) 55%, transparent), inset 0 0 2.4em rgba(255,255,255,.04); }

/* ---------- Menu ---------- */
#menu-bg { position: absolute; inset: 0; }
.menu-head { position: absolute; top: 2.2em; left: 0; right: 0; text-align: center; }
.menu-head h1 { font-size: 6em; font-weight: 900; letter-spacing: .06em; line-height: 1; background: linear-gradient(180deg, #fff 10%, #ff9be8 45%, #ff2fd0 60%, #7a2cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .35em rgba(255,47,208,.75)); }
.menu-head p { margin-top: .6em; font-size: 1.6em; letter-spacing: .5em; color: var(--cyan); text-shadow: 0 0 .8em var(--cyan); }
.cards { position: absolute; left: 4em; right: 4em; top: 17.5em; bottom: 6.5em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; padding: 1.3em 1em 1.2em; border: .2em solid var(--c); border-radius: 1.8em; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #0a0620) 0%, #0a0620 70%); box-shadow: 0 0 1.4em color-mix(in srgb, var(--c) 45%, transparent); transition: transform .18s, box-shadow .18s; animation: slidein .6s both; overflow: hidden; }
.card:nth-child(2) { animation-delay: .08s; } .card:nth-child(3) { animation-delay: .16s; } .card:nth-child(4) { animation-delay: .24s; }
.card.sel { transform: translateY(-1.2em) scale(1.05); box-shadow: 0 0 3em var(--c), 0 0 7em color-mix(in srgb, var(--c) 60%, transparent); z-index: 2; }
.card.sel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); background-size: 200% 100%; animation: sheen 1.6s linear infinite; pointer-events: none; }
.card .theme { font-size: 1.25em; letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; color: var(--c); text-shadow: 0 0 .7em var(--c); }
.card .icon { flex: none; width: 7.5em; height: 7.5em; margin: .3em 0; filter: drop-shadow(0 0 .8em var(--c)); }
.card.sel .icon { animation: float 1.2s ease-in-out infinite; }
.card h2 { font-size: 2.1em; font-weight: 900; line-height: 1.05; }
.card .tagline { margin-top: .5em; font-size: 1em; line-height: 1.3; color: var(--dim); font-weight: 700; }
.card .best { margin-top: .6em; font-size: 1em; color: #fff; }
.card .best b { color: var(--c); font-size: 1.35em; text-shadow: 0 0 .6em var(--c); }
.card .go { margin-top: .7em; flex: none; font-size: 1.2em; letter-spacing: .2em; padding: .5em 1.4em; border-radius: 10em; background: var(--c); color: #0a0620; font-weight: 900; }
.card.sel .go { animation: pulse .8s ease-in-out infinite; }
.menu-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--s) * 2.6); display: flex; justify-content: center; gap: 3em; font-size: 1.35em; color: var(--dim); letter-spacing: .12em; }
.menu-foot a { color: var(--cyan); text-shadow: 0 0 .6em var(--cyan); border-bottom: .1em dashed var(--cyan); }
.empty-msg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3em; text-align: center; }

/* ---------- Jeu ---------- */
#attract { --accent: var(--gc); background: linear-gradient(180deg, rgba(4,2,14,.72), rgba(4,2,14,.9)); }
#attract .top { position: absolute; top: 2.4em; left: 0; right: 0; text-align: center; }
#attract h1 { margin-top: .2em; font-size: 6em; font-weight: 900; line-height: 1; color: #fff; }
#attract .tagline { margin-top: .5em; font-size: 1.9em; color: var(--ink); text-shadow: 0 0 .5em rgba(0,0,0,.9); }
#attract .howto { position: absolute; left: 5em; top: 20em; width: 44em; padding: 1.4em 2em; }
#attract .howto h3, .lb h3 { font-size: 1.25em; letter-spacing: .3em; color: var(--accent); margin-bottom: .7em; text-shadow: 0 0 .7em var(--accent); }
#attract .howto li { list-style: none; font-size: 1.5em; line-height: 1.3; margin-bottom: .5em; padding-left: 1.7em; position: relative; font-weight: 700; }
#attract .howto li::before { content: '▶'; position: absolute; left: 0; color: var(--accent); }
#attract .ctrl { margin-top: .8em; font-size: 1.05em; color: var(--dim); border-top: .1em solid var(--line); padding-top: .7em; line-height: 1.5; }
#attract .lb { position: absolute; right: 5em; top: 20em; width: 44em; padding: 1.4em 2em; }
.lb table { width: 100%; border-collapse: collapse; font-size: 1.4em; }
.lb td { padding: .26em .3em; border-bottom: .06em solid var(--line); }
.lb td.r { width: 2.4em; color: var(--dim); } .lb td.s { text-align: right; color: var(--accent); font-weight: 900; }
.lb tr.me td { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; animation: pulse 1s ease-in-out infinite; }
.lb tr:nth-child(1) td.r { color: #ffd700; } .lb tr:nth-child(2) td.r { color: #d8dde8; } .lb tr:nth-child(3) td.r { color: #d68a4a; }
.lb .none { font-size: 1.5em; color: var(--dim); text-align: center; padding: 2em 0; line-height: 1.5; }
#attract .bottom { position: absolute; left: 0; right: 0; bottom: 2em; text-align: center; }
#attract .press { font-size: 3.2em; font-weight: 900; letter-spacing: .12em; color: #fff; }
#attract .slots { margin-top: .6em; display: flex; justify-content: center; gap: 2em; font-size: 1.35em; }
.slot { padding: .5em 1.6em; border: .14em solid var(--line); border-radius: 10em; color: var(--dim); min-width: 17em; transition: all .2s; }
.slot.in { border-color: var(--accent); color: #fff; box-shadow: 0 0 1.2em var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.slot.dot::before { content: '● '; color: var(--green); }
#attract .btns { margin-top: 1em; display: flex; justify-content: center; gap: 1.6em; }
.btn { font: inherit; font-size: 1.25em; font-weight: 900; letter-spacing: .12em; padding: .6em 1.6em; border-radius: 10em; border: .14em solid var(--accent); color: #fff; background: rgba(0,0,0,.45); cursor: pointer; }
.btn:hover, .btn.sel { background: var(--accent); color: #0a0620; box-shadow: 0 0 1.4em var(--accent); }
#attract .back { position: absolute; top: calc(var(--s) * 2.4); left: calc(var(--s) * 3); font-size: 1.4em; color: var(--dim); border: .1em solid var(--line); border-radius: 10em; padding: .5em 1.3em; cursor: pointer; letter-spacing: .1em; }
#attract .back:hover { color: #fff; border-color: #fff; }
#attract .join-msg { margin-top: .4em; font-size: 1.6em; color: var(--yellow); text-shadow: 0 0 .7em var(--yellow); min-height: 1.4em; }
.audio-hint { position: absolute; bottom: 1em; right: 2em; font-size: 1em; color: var(--yellow); z-index: 60; display: none; letter-spacing: .08em; }

#names { --accent: var(--gc); background: rgba(4,2,14,.86); }
#names h2 { position: absolute; top: calc(var(--s) * 5); left: 0; right: 0; text-align: center; font-size: 4.4em; font-weight: 900; color: #fff; }
#names .sub { position: absolute; top: calc(var(--s) * 15); left: 0; right: 0; text-align: center; font-size: 1.8em; color: var(--dim); letter-spacing: .1em; }
#names .wrap { position: absolute; left: 0; right: 0; top: 19em; display: flex; justify-content: center; gap: 5em; }
.np { width: 40em; padding: 2.2em 2em 2.4em; text-align: center; transition: opacity .3s; }
.np.done { opacity: .5; }
.np h4 { font-size: 1.8em; letter-spacing: .3em; color: var(--accent); }
.np .sc { font-size: 4.6em; font-weight: 900; color: #fff; margin: .2em 0 .3em; text-shadow: 0 0 .5em var(--accent); }
.np .letters { display: flex; justify-content: center; gap: .5em; }
.np .l { width: 2.1em; padding: .1em 0 .05em; font-size: 4.6em; font-weight: 900; border-bottom: .09em solid var(--dim); color: #fff; position: relative; }
.np .l.cur { border-color: var(--accent); color: var(--accent); text-shadow: 0 0 .5em var(--accent); }
.np .l.cur::before, .np .l.cur::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: .3em; color: var(--accent); }
.np .l.cur::before { content: '▲'; top: -.2em; } .np .l.cur::after { content: '▼'; bottom: -.3em; }
.np .hint { margin-top: 1.4em; font-size: 1.15em; color: var(--dim); line-height: 1.6; }
.np .ok { font-size: 2em; color: var(--green); margin-top: .9em; text-shadow: 0 0 .6em var(--green); font-weight: 900; }
#names .timer { position: absolute; bottom: 3.5em; left: 30em; right: 30em; height: .7em; border-radius: 1em; background: rgba(255,255,255,.12); overflow: hidden; }
#names .timer i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 1em var(--accent); width: 100%; }

#result { --accent: var(--gc); background: linear-gradient(180deg, rgba(4,2,14,.6), rgba(4,2,14,.88)); }
#result h2 { position: absolute; top: calc(var(--s) * 3); left: 0; right: 0; text-align: center; font-size: 5.6em; font-weight: 900; color: #fff; }
#result .cols { position: absolute; left: 5em; right: 5em; top: 15em; display: flex; gap: 4em; }
#result .mine { flex: 1; display: flex; flex-direction: column; gap: 1.6em; }
.res { padding: 1.6em 2em; text-align: center; animation: slidein .5s both; }
.res .who { font-size: 1.6em; letter-spacing: .3em; color: var(--accent); }
.res .big { font-size: 6em; font-weight: 900; line-height: 1.1; color: #fff; text-shadow: 0 0 .5em var(--accent); }
.res .rank { font-size: 3.2em; font-weight: 900; color: var(--yellow); text-shadow: 0 0 .6em var(--yellow); animation: pulse 1s ease-in-out infinite; }
.res .rank.low { color: var(--dim); text-shadow: none; animation: none; font-size: 2.2em; }
.res .win { font-size: 2.2em; color: var(--green); margin-top: .3em; text-shadow: 0 0 .6em var(--green); }
#result .lb { flex: 0 0 46em; padding: 1.6em 2.2em; }
#result .lb table { font-size: 1.5em; }
#result .bottom { position: absolute; left: 0; right: 0; bottom: 3em; text-align: center; }
#result .btns { display: flex; justify-content: center; gap: 2em; }
#result .auto { margin-top: 1em; font-size: 1.2em; color: var(--dim); letter-spacing: .1em; }
#result .err { color: var(--red); font-size: 1.3em; margin-bottom: .8em; }

/* fx canvas au-dessus des overlays */
#fxc { z-index: 40; pointer-events: none; }
.banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 11em; font-weight: 900; color: #fff; text-shadow: 0 0 .3em var(--gc), 0 0 .8em var(--gc); pointer-events: none; z-index: 30; }

/* ---------- Classement TV ---------- */
.tv-head { position: absolute; top: 2.6em; left: 0; right: 0; text-align: center; }
.tv-head h1 { font-size: 5.4em; font-weight: 900; letter-spacing: .08em; background: linear-gradient(180deg, #fff 10%, #ffe600 55%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .3em rgba(255,138,0,.7)); }
.tv-grid { position: absolute; left: 3em; right: 3em; top: 14em; bottom: 3em; display: grid; gap: 2em; }
.tv-col { --accent: var(--c); padding: 1.6em 1.6em 1em; animation: slidein .6s both; }
.tv-col .theme { font-size: 1.2em; letter-spacing: .25em; color: var(--c); text-transform: uppercase; }
.tv-col h2 { font-size: 2.3em; font-weight: 900; margin: .15em 0 .6em; }
.tv-col table { width: 100%; border-collapse: collapse; font-size: 1.7em; }
.tv-col td { padding: .34em .2em; border-bottom: .06em solid var(--line); }
.tv-col td.r { width: 2em; color: var(--dim); } .tv-col td.s { text-align: right; color: var(--c); font-weight: 900; }
.tv-col tr:nth-child(1) td { color: #ffd700; font-size: 1.15em; } .tv-col tr:nth-child(1) td.s { color: #ffd700; text-shadow: 0 0 .6em #ffd700; }
.tv-col tr:nth-child(2) td.r { color: #d8dde8; } .tv-col tr:nth-child(3) td.r { color: #d68a4a; }
.tv-col tr.fresh td { animation: pulse 1s 3 ease-in-out; background: color-mix(in srgb, var(--c) 30%, transparent); }
.tv-col .none { color: var(--dim); font-size: 1.5em; padding: 2em 0; text-align: center; }
.tv-single .tv-grid { grid-template-columns: 1fr !important; left: 20em; right: 20em; }
.tv-single .tv-col table { font-size: 2.2em; }

/* Mode économe (PC qui rame) */
.lowfx.crt::after { display: none; }
.lowfx .panel, .lowfx .card, .lowfx .tag, .lowfx .slot.in, .lowfx .btn:hover { box-shadow: none; }
.lowfx .neon, .lowfx .banner, .lowfx .np .l.cur, .lowfx .res .big, .lowfx .np .sc { text-shadow: none; }