:root {
  --bg: #07060d;
  --panel: #0f0d1c;
  --ink: #d9d4f2;
  --dim: #7b7699;
  --pink: #ff4fa3;
  --cyan: #45e0ff;
  --amber: #ffb000;
  --frame: #2a2446;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse at 50% 120%, #2b1245 0%, transparent 60%),
    radial-gradient(ellipse at 50% -20%, #0c2340 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    var(--bg);
}

#cabinet {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#screen-wrap {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
  box-shadow:
    0 0 0 1px var(--frame),
    0 0 40px rgba(69, 224, 255, .12),
    0 0 90px rgba(255, 79, 163, .10),
    inset 0 0 12px #000;
}

#screen {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  cursor: none;
  touch-action: none;
}

.side {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 clamp(16px, 3vw, 64px);
  font-size: clamp(13px, 0.95vw, 18px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  color: var(--dim);
}

.marquee {
  text-align: center;
  padding: 18px 10px;
  border: 1px solid var(--frame);
  border-radius: 8px;
  background: linear-gradient(180deg, #120f22, #0a0914);
}

.logo-small {
  display: block;
  font: 900 clamp(30px, 2.8vw, 56px)/0.95 "Arial Black", Impact, system-ui, sans-serif;
  letter-spacing: 1px;
  font-style: italic;
  background: linear-gradient(180deg, #fff 0%, #9fe9ff 40%, #1e5bd6 52%, #ffb000 56%, #ff4fa3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 #000);
}

.year { display: block; margin-top: 10px; font-size: .8em; letter-spacing: 3px; color: var(--dim); }

.howto h2 {
  margin: 0 0 8px;
  font-size: .85em;
  letter-spacing: 3px;
  color: var(--cyan);
  font-weight: 700;
}
.howto h2 + p, .howto dl { margin-top: 0; }
.howto p { margin: 0 0 10px; }
.howto b { color: var(--ink); font-weight: 600; }
.howto dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 12px; }
.howto dt { color: var(--ink); }
.howto dd { margin: 0; }
.howto .pad { font-size: .85em; }
.howto * + h2 { margin-top: 18px; }

.cap {
  display: inline-block;
  width: 18px; height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.cap.v { background: #e0413b; }
.cap.l { background: #2f7dff; }
.cap.h { background: #2bb35a; }

#touch {
  position: absolute;
  inset: auto 6px 6px 6px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  line-height: 1;
}
#touch[hidden] { display: none; }
#touch button {
  pointer-events: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(10, 8, 20, .45);
  color: #fff;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 1px;
  touch-action: none;
  margin: 10px;
}
#touch #t-rew { border-color: rgba(69, 224, 255, .7); color: var(--cyan); font-size: 18px; }
#touch button.on { background: rgba(255,255,255,.25); }

body.narrow .side { display: none; }
body.narrow #cabinet { gap: 0; }

/* les panneaux remplissent l'espace libre, chacun collé à l'écran de jeu */
.side .marquee, .side .howto { width: 100%; max-width: 360px; }
.side.left { align-items: flex-end; }
.side.right { align-items: flex-start; }