/* La page d'accueil de la soirée : une boîte de jeu, façon console. */

@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url("/static/polices/silkscreen-400.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url("/static/polices/silkscreen-700.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("/static/polices/vt323.woff2") format("woff2"); }

:root {
  --nuit: #0b0820; --magenta: #ff3ea5; --cyan: #3ff2ff; --or: #ffcf4a; --menthe: #7dffb2; --texte: #efe9ff; --doux: #bdb3e6;
  --pixel: "Silkscreen", ui-monospace, monospace; --ecran: "VT323", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { background: #05030f; color: var(--texte); }
body { font-family: var(--ecran); display: flex; justify-content: center; padding: 24px 16px 60px; min-height: 100vh; }
a { color: inherit; }

/* La boîte et sa tranche. */
.boite { position: relative; width: min(780px, 100%); display: grid; grid-template-columns: 46px 1fr; align-self: flex-start;
  border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(255, 62, 165, .45), 0 0 0 1px #2c2450; }
.tranche { background: repeating-linear-gradient(180deg, var(--magenta) 0 22px, #c42a80 22px 24px); display: flex; align-items: center; justify-content: center; }
.tranche span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--pixel); font-weight: 700; font-size: 15px; letter-spacing: .25em; color: #1a0620; white-space: nowrap; }
.face { position: relative; background: var(--nuit); min-width: 0; }

.bandeau { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #000;
  font-family: var(--pixel); font-size: 11px; letter-spacing: .14em; border-bottom: 2px solid var(--magenta); }
.bandeau .logo { color: var(--cyan); }

/* La scène : un salon la nuit, dessiné en pixels par scene.js. */
.scene { position: relative; aspect-ratio: 160 / 112; }
.scene canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
  animation: scintille 4s steps(2) infinite; }
@keyframes scintille { 0%, 100% { opacity: 1 } 50% { opacity: .92 } }

.titre { position: absolute; left: 0; right: 0; top: 6%; text-align: center; pointer-events: none; z-index: 1; }
.titre .invite { font-size: clamp(18px, 3.4vw, 28px); color: var(--or); letter-spacing: .08em; text-shadow: 0 0 10px rgba(255, 207, 74, .6); }
.titre h1 { font-family: var(--pixel); font-weight: 700; line-height: .9; font-size: clamp(46px, 11vw, 96px); letter-spacing: .02em; color: #fff;
  text-shadow: -3px 0 0 var(--cyan), 3px 0 0 var(--magenta), 0 4px 0 #5b2bd6, 0 8px 0 #3a1a96, 0 12px 0 #220f5e, 0 0 30px rgba(63, 242, 255, .35); }
.titre h1 small { display: block; font-size: .42em; letter-spacing: .3em; margin-top: .25em; color: var(--menthe);
  text-shadow: -2px 0 0 var(--magenta), 2px 0 0 var(--cyan), 0 3px 0 #0f5a36; }

.start { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 1; text-align: center; font-family: var(--pixel); font-size: clamp(14px, 2.6vw, 20px);
  color: #fff; letter-spacing: .2em; text-shadow: 0 0 12px var(--magenta); text-decoration: none; animation: clignote 1.1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0 } }
.age { position: absolute; left: 14px; bottom: 14px; z-index: 1; width: 58px; height: 74px; background: #fff; color: #000; display: grid; grid-template-rows: 1fr auto;
  font-family: var(--pixel); text-align: center; border: 3px solid #000; outline: 2px solid #fff; }
.age b { font-size: 26px; display: flex; align-items: center; justify-content: center; }
.age span { font-size: 8px; background: #000; color: #fff; padding: 3px 0; letter-spacing: .05em; }

/* Le dos de la boîte. */
.dos { padding: 24px clamp(16px, 4vw, 34px) 26px; background: linear-gradient(180deg, #120c33 0%, var(--nuit) 100%); border-top: 2px solid #2c2450; }
.accroche { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.15; }
.accroche em { font-style: normal; color: var(--cyan); }
.note { font-size: 19px; color: var(--doux); line-height: 1.2; margin-top: 10px; }
h2 { font-family: var(--pixel); font-size: 15px; letter-spacing: .25em; color: var(--magenta); margin: 28px 0 16px; display: flex; align-items: center; gap: 12px; }
h2::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--magenta) 0 6px, transparent 6px 10px); }

/* Les gros boutons, comme des touches d'arcade. */
.touches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.touches.seule { grid-template-columns: 1fr; }
.touche { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 16px; border: 0; width: 100%;
  background: var(--or); color: #1a0620; text-decoration: none; text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 6px 0 #a07a10, 0 0 0 3px #000; transition: transform .08s, box-shadow .08s; }
.touche:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a07a10, 0 0 0 3px #000; }
.touche:active { transform: translateY(4px); box-shadow: 0 2px 0 #a07a10, 0 0 0 3px #000; }
.touche:focus-visible { outline: 3px dashed #fff; outline-offset: 6px; }
.touche .ico { grid-row: span 2; width: 56px; height: 56px; image-rendering: pixelated; background: rgba(0, 0, 0, .1); }
.touche b { font-family: var(--pixel); font-weight: 700; font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .04em; line-height: 1.1; }
.touche small { font-size: 19px; line-height: 1.05; }
.touche .numero { position: absolute; top: -13px; left: -13px; width: 30px; height: 30px; border-radius: 50%; background: #000; color: var(--or);
  display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 15px; box-shadow: 0 0 0 3px var(--or); }
.touche.cyan { background: var(--cyan); box-shadow: 0 6px 0 #1c9aa6, 0 0 0 3px #000; }
.touche.cyan:hover { box-shadow: 0 8px 0 #1c9aa6, 0 0 0 3px #000; }
.touche.cyan:active { box-shadow: 0 2px 0 #1c9aa6, 0 0 0 3px #000; }
.touche.cyan .numero { color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan); }
.touche.menthe { background: var(--menthe); box-shadow: 0 6px 0 #2a8f5a, 0 0 0 3px #000; }
.touche.menthe .numero { color: var(--menthe); box-shadow: 0 0 0 3px var(--menthe); }
.touche.fait { filter: saturate(.4) brightness(.8); }

.autres { margin-top: 14px; font-size: 18px; color: var(--doux); line-height: 1.4; }
.autres a { color: var(--cyan); }

/* La question, et le guide pas à pas. */
.question { font-family: var(--pixel); font-weight: 700; font-size: clamp(20px, 4vw, 30px); letter-spacing: .06em; text-align: center; margin: 30px 0 22px;
  color: #fff; text-shadow: -2px 0 0 var(--cyan), 2px 0 0 var(--magenta); }
.guide { list-style: none; padding: 0; display: grid; gap: 14px; }
.guide li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px; background: #160f3d; border: 2px solid #2f2470; }
.guide .niv { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--or); color: #1a0620;
  font-family: var(--pixel); font-weight: 700; font-size: 20px; box-shadow: 0 4px 0 #a07a10, 0 0 0 2px #000; }
.guide b { display: block; font-family: var(--pixel); font-size: clamp(14px, 2.4vw, 17px); letter-spacing: .06em; color: #fff; margin-top: 4px; }
.guide p { font-size: 20px; line-height: 1.2; color: var(--doux); margin-top: 6px; }
.guide .lien { color: var(--cyan); word-break: break-all; }
.guide .autre { font-size: 17px; margin-top: 10px; }
.touche.petite { display: inline-flex; width: auto; padding: 12px 18px; margin-top: 12px; grid-template-columns: none; }
.touche.petite b { color: inherit; margin: 0; }
.bandeau a { text-decoration: none; }

/* Le joueur qui vient d'arriver. */
.joueur { display: flex; align-items: center; gap: 16px; padding: 16px; background: #160f3d; border: 2px solid #2f2470; position: relative; }
.joueur::before { content: ""; position: absolute; left: -2px; top: -2px; width: 10px; height: 10px; background: var(--menthe); }
.joueur img { width: 64px; height: 64px; image-rendering: pixelated; border: 3px solid #000; outline: 2px solid var(--menthe); }
.joueur b { display: block; font-family: var(--pixel); font-size: clamp(14px, 2.6vw, 18px); color: var(--menthe); letter-spacing: .06em; }
.joueur span { font-size: 20px; color: var(--doux); }
.joueur a { color: var(--or); }

details { margin-top: 14px; font-size: 18px; color: var(--doux); }
summary { cursor: pointer; }
pre { white-space: pre-wrap; margin-top: 10px; padding: 14px; background: #000; border: 2px solid #2f2470; color: var(--texte); font: 17px/1.25 var(--ecran); max-height: 340px; overflow: auto; }
.bulle { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: #000; color: var(--menthe); border: 3px solid var(--menthe);
  font-family: var(--pixel); font-size: 14px; padding: 10px 16px; letter-spacing: .1em; transition: transform .2s; z-index: 10; }
.bulle.vue { transform: translateX(-50%) translateY(0); }

.pied { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 14px; border-top: 1px solid #2c2450;
  font-size: 17px; color: #8f86c2; gap: 12px; flex-wrap: wrap; }
.codebarre { height: 34px; width: 120px; background: repeating-linear-gradient(90deg, #efe9ff 0 2px, transparent 2px 3px, #efe9ff 3px 4px, transparent 4px 7px, #efe9ff 7px 10px, transparent 10px 12px); }

@media (max-width: 560px) {
  .boite { grid-template-columns: 28px 1fr; }
  .tranche span { font-size: 11px; }
  .age { display: none; }
  .scene { aspect-ratio: 160 / 150; }
  .touches { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .start, .scene::after { animation: none; }
}