/* ==========================================================================
   SKBD — TAMESHIWARI
   Portrait, une main. Le haut se regarde, le bas se touche.
   Palette borne d'arcade : noir, os, or, sang.
   ========================================================================== */

:root {
  --noir:   #0a0908;
  --noir2:  #16110f;
  --os:     #f2e8cf;
  --or:     #ffb703;
  --or2:    #ffd60a;
  --sang:   #9d0208;
  --sang2:  #d00000;
  --acier:  #8b98a7;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --titre: "Impact", "Haettenschweiler", "Arial Narrow", "Arial Black", sans-serif;
  --texte: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--noir);
  color: var(--os);
  font-family: var(--texte);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body { display: flex; align-items: center; justify-content: center; }

/* Le jeu garde sa forme de téléphone quel que soit l'écran.
   Sur mobile les deux plafonds ne mordent jamais : le cadre occupe tout.
   Sur ordinateur il se centre, parce qu'un pouce virtuel étalé sur 1900 px
   de large n'a plus aucun sens — et que les captures d'écran des joueurs
   doivent se ressembler d'un support à l'autre. */
#app {
  position: relative;
  width: min(100%, 430px);
  height: min(100%, 932px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 520px) {
  body {
    background:
      radial-gradient(80% 60% at 50% 0%, #1a0d10 0%, #07060b 70%);
  }
  #app {
    border: 1px solid rgba(242, 232, 207, .13);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .85),
                0 0 0 1px rgba(0, 0, 0, .6);
  }
}

.hidden { display: none !important; }

/* ==========================================================================
   ZONE HAUTE — la scène
   ========================================================================== */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--noir);
}

#scene { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ HUD -- */

#hud {
  position: absolute;
  top: calc(8px + var(--safe-t));
  left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 12px 0 96px;      /* on laisse la place au bouton son */
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .85);
}

.lives { display: flex; gap: 5px; }
.lives i {
  width: 15px; height: 15px;
  display: block;
  background: #2a2422;
  border: 2px solid #000;
  transform: rotate(45deg);
  transition: background .18s;
}
.lives i.on { background: var(--sang2); box-shadow: 0 0 8px rgba(208, 0, 0, .8); }

.mat {
  margin-top: 7px;
  font: 700 11px/1 var(--texte);
  letter-spacing: .16em;
  color: rgba(242, 232, 207, .68);
}

.hud-r { text-align: right; }

.score {
  font: 400 34px/1 var(--titre);
  letter-spacing: .04em;
  color: var(--or2);
}

.sub {
  margin-top: 3px;
  font: 700 11px/1 var(--texte);
  letter-spacing: .14em;
  color: rgba(242, 232, 207, .7);
}

.combo { color: var(--or); margin-left: 6px; }
.combo.hot { color: var(--sang2); text-shadow: 0 0 10px rgba(208, 0, 0, .9); }

/* z-index au-dessus des écrans (10) : c'est ce qui le rend accessible depuis
   l'accueil et l'écran de fin, et pas seulement pendant la partie. */
.sound {
  position: absolute;
  top: calc(9px + var(--safe-t));
  left: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border: 0;
  border-left: 3px solid var(--or);
  background: linear-gradient(180deg, rgba(38, 28, 24, .92), rgba(12, 9, 8, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 3px 10px rgba(0, 0, 0, .55);
  color: var(--or2);
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .08s;
}
.sound:active { transform: scale(.94); }

.sound-svg { width: 19px; height: 18px; display: block; overflow: visible; }
.sound-svg .spk   { fill: currentColor; }
.sound-svg .wave  { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.sound-svg .slash { display: none; stroke: var(--sang2); stroke-width: 2.2; stroke-linecap: round; }

.sound-lbl {
  font: 700 10px/1 var(--texte);
  letter-spacing: .18em;
  color: rgba(242, 232, 207, .72);
}

/* Coupé : les ondes disparaissent, la croix apparaît, le liseré passe au rouge.
   Trois signaux pour un même état — il se lit d'un coup d'œil en pleine partie. */
.sound.off { border-left-color: var(--sang2); color: rgba(242, 232, 207, .40); }
.sound.off .sound-svg .wave  { display: none; }
.sound.off .sound-svg .slash { display: block; }
.sound.off .sound-lbl { color: rgba(208, 0, 0, .95); }

/* ------------------------------------------------------- verdict & bannière */

.verdict {
  position: absolute;
  left: 0; right: 0;
  top: 34%;
  text-align: center;
  font: 400 clamp(30px, 12vw, 64px)/1 var(--titre);
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 4px 0 #000, 0 0 26px currentColor;
}
.verdict.show { animation: pop .58s ease-out forwards; }
.verdict.kime   { color: var(--or2); }
.verdict.bien   { color: #8ce99a; }
.verdict.limite { color: var(--acier); }
.verdict.rate   { color: var(--sang2); }

@keyframes pop {
  0%   { opacity: 0; transform: scale(.5)  translateY(10px); }
  22%  { opacity: 1; transform: scale(1.14) translateY(0); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-16px); }
}

/* ----------------------------------------------- l'ouverture de la scène -- */

.reveal {
  position: absolute;
  inset: 0;
  /* au-dessus des écrans (10) : c'est ce qui lui permet de tomber SUR le menu.
     Sous le bouton son (30), qui reste utilisable pendant la transition. */
  z-index: 28;
  pointer-events: none;
  overflow: hidden;
}
/* Pour replacer les bandeaux sans les voir voler : on coupe la transition le
   temps de les remettre en position ouverte, avant de les faire tomber. */
.reveal.instant i { transition: none; }
.reveal { --curtain: 2.4s; }          /* game.js la réécrit — voir openStage() */
.reveal i {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  /* Noir PUR, et non le noir du jeu : c'est celui du fichier logo, dont le
     fond doit se fondre dans le bandeau. Au moindre écart, on voit le carré
     de l'image se détacher autour du dragon. */
  background: #000;
  /* la course démarre lentement et s'échappe : un rideau lourd, pas un volet
     qui claque */
  transition: transform var(--curtain) cubic-bezier(.22, .78, .28, 1);
}
.reveal i:first-child { top: 0; box-shadow: 0 2px 0 var(--sang); }
.reveal i:last-child  { bottom: 0; box-shadow: 0 -2px 0 var(--sang); }

.reveal.open i:first-child { transform: translateY(-100%); }
.reveal.open i:last-child  { transform: translateY(100%); }
.reveal.done { display: none; }

/* Le logo est posé À CHEVAL sur la fente : chaque bandeau en emporte sa moitié
   en s'écartant. Les deux moitiés sont centrées sur le même point — le bord
   intérieur de chaque panneau, exactement à mi-hauteur — donc elles se
   rejoignent au pixel près tant que le rideau est fermé.
   `--logo` est posée par le JS, avec l'image que le moteur a réellement
   chargée : le rideau et les visuels de partage montrent ainsi toujours le
   même fichier.

   La pastille est claire et le rouge réservé au liseré — le logo est noir et
   rouge sombre, aucun fond rouge ne garde à la fois l'enso et le dragon
   lisibles (voir le calcul de contraste dans js/share.js). */
.reveal.has-logo i::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 210px; height: 210px;
  margin-left: -105px;
  /* Pas de pastille : ce logo est dessiné en rouge et or SUR NOIR, il se pose
     donc directement sur le rideau. Le fond noir du fichier se confond avec
     celui du bandeau, on ne voit que le dragon. */
  background: var(--logo) center / contain no-repeat;
}
.reveal.has-logo i:first-child::after { bottom: -105px; }
.reveal.has-logo i:last-child::after  { top: -105px; }

/* --------------------------------------------------------- le décompte -- */

.count {
  position: absolute;
  left: 0; right: 0;
  top: 31%;
  text-align: center;
  /* les mots comptés font 2 à 4 lettres : on borne sur la largeur, sinon
     « ICHI » déborde là où « NI » respire */
  font: 400 clamp(46px, 19vw, 96px)/1 var(--titre);
  letter-spacing: .06em;
  color: var(--os);
  text-shadow: 0 6px 0 #000, 0 0 40px rgba(0, 0, 0, .95);
  pointer-events: none;
  opacity: 0;
}
/* FIGHT : rouge sang, plus large, et il s'échappe vers l'avant au lieu de
   rétrécir comme les chiffres — c'est un départ, pas un compte à rebours. */
.count.go {
  font-size: clamp(40px, 16vw, 82px);
  letter-spacing: .12em;
  color: var(--sang2);
  text-shadow: 0 5px 0 #000, 0 0 46px rgba(208, 0, 0, .85);
}

/* La durée réelle est posée par le JS : les pourcentages ci-dessous valent
   donc aussi bien pour un chiffre du décompte que pour le FIGHT. */
.count.show { animation: countIn .92s ease-out forwards; }
.count.go.show { animation-name: fightIn; }

@keyframes countIn {
  0%   { opacity: 0; transform: scale(1.9); }
  8%   { opacity: 1; transform: scale(1); }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.86); }
}

@keyframes fightIn {
  0%   { opacity: 0; transform: scale(2.4); }
  9%   { opacity: 1; transform: scale(1.08); }
  17%  { transform: scale(1); }
  76%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

.banner {
  position: absolute;
  left: 0; right: 0;
  top: 14%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
/* Le décor est chargé : sans voile ni ombre franche, l'annonce de niveau
   devient illisible dès qu'elle passe devant les torches ou la lune. */
.banner b {
  display: block;
  padding: 6px 0;
  font: 400 clamp(24px, 9vw, 46px)/1 var(--titre);
  letter-spacing: .08em;
  color: var(--os);
  background: linear-gradient(90deg,
              rgba(8,6,10,0) 0%, rgba(8,6,10,.82) 18%,
              rgba(8,6,10,.82) 82%, rgba(8,6,10,0) 100%);
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, .9);
}
.banner small {
  display: block;
  margin-top: 5px;
  font: 700 12px/1 var(--texte);
  letter-spacing: .28em;
  color: var(--or);
}
.banner.show { animation: slide 1.25s ease-out forwards; }

@keyframes slide {
  0%   { opacity: 0; transform: translateY(-18px); }
  18%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   ZONE BASSE — la surface du pouce
   ========================================================================== */

#panel {
  flex: 0 0 auto;
  height: 40vh;
  min-height: 250px;
  max-height: 380px;
  padding: 10px 18px calc(8px + var(--safe-b));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, #1c1512 0%, #120d0b 100%);
  border-top: 3px solid var(--sang);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .8);
  /* indispensable : sans ça le navigateur avale les glissés pour scroller */
  touch-action: none;
}
#panel.armed { border-top-color: var(--or); }

.gesture {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
}

.gicon {
  flex: 0 0 auto;
  width: 74px; height: 74px;
  border: 3px solid rgba(242, 232, 207, .22);
  background: rgba(0, 0, 0, .45);
  display: grid;
  place-items: center;
}
.gicon svg { width: 74%; height: 74%; fill: var(--or2); }
.gicon span { font: 400 34px/1 var(--titre); color: rgba(242, 232, 207, .38); }
/* au repos, l'icône est visible mais en retrait : elle annonce, elle ne
   réclame pas encore le geste */
.gicon.idle { border-color: rgba(242, 232, 207, .14); }
.gicon.idle svg { opacity: .5; }
.gicon svg .ring { fill: none; stroke: var(--or2); stroke-width: 6; opacity: .55; }
.gicon svg .dash { stroke-dasharray: 10 12; opacity: .35; }
#panel.armed .gicon { border-color: var(--or); animation: breathe .9s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 183, 3, 0); }
  50%      { box-shadow: 0 0 20px rgba(255, 183, 3, .45); }
}

.gtext { flex: 1 1 auto; min-width: 0; }
.gtext b {
  display: block;
  font: 400 30px/1 var(--titre);
  letter-spacing: .10em;
  color: var(--os);
}
.gtext small {
  display: block;
  margin-top: 4px;
  font: 700 11px/1.2 var(--texte);
  letter-spacing: .13em;
  color: rgba(242, 232, 207, .62);
}
/* L'avertissement du yama zuki : visible, mais il ne doit pas concurrencer la
   consigne elle-même. */
.gwarn:empty { display: none; }
.gwarn {
  margin-top: 5px;
  font-size: 9.5px !important;
  letter-spacing: .1em !important;
  color: rgba(208, 0, 0, .95) !important;
}

.gcount {
  flex: 0 0 auto;
  font: 400 24px/1 var(--titre);
  letter-spacing: .05em;
  color: var(--or);
}

/* ------------------------------------------------------------- la jauge -- */

.gaugewrap { padding: 6px 0; }

.gauge {
  position: relative;
  height: 46px;
  background: #241a16;
  border: 3px solid #000;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .7);
  overflow: hidden;
}

.zone {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(141, 213, 130, .22);
  border-left: 2px solid rgba(141, 213, 130, .6);
  border-right: 2px solid rgba(141, 213, 130, .6);
  display: grid;
  place-items: center;
}

/* le cœur du KIME est montré : la difficulté doit venir du timing,
   jamais d'une information qu'on cache au joueur */
.core {
  height: 100%;
  background: rgba(255, 214, 10, .30);
  border-left: 2px solid rgba(255, 214, 10, .85);
  border-right: 2px solid rgba(255, 214, 10, .85);
}

/* ------------------------------------------- l'impact sur les bords -- */

/* Voile rouge sur la scène. L'intensité vient du JS (`--i`), proportionnelle au
   nombre d'allers-retours déjà consommés : le premier rebond se remarque à
   peine, le dernier est franchement alarmant. C'est ce qui fait comprendre
   qu'attendre coûte la frappe, sans avoir à le lire. */
.warn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 90px 26px rgba(208, 0, 0, .95);
}
.warn.hit { animation: warnPulse .42s ease-out; }

@keyframes warnPulse {
  0%   { opacity: 0; }
  14%  { opacity: var(--i, .3); }
  100% { opacity: 0; }
}

/* Le bord effectivement touché s'allume : on voit OÙ le curseur a tapé, pas
   seulement qu'il a tapé. */
.edge {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 10px;
  background: var(--sang2);
  opacity: 0;
}
/* L'origine est collée au mur : la barre a `overflow: hidden`, un élargissement
   centré perdrait la moitié de l'effet hors cadre. Il doit gicler VERS
   L'INTÉRIEUR, comme un impact qui repousse le curseur. */
.edge--l { left: 0;  transform-origin: left center; }
.edge--r { right: 0; transform-origin: right center; }
.edge.hit { animation: edgePulse .34s ease-out; }

@keyframes edgePulse {
  0%   { opacity: 0;   transform: scaleX(1); }
  10%  { opacity: 1;   transform: scaleX(2.4); }
  100% { opacity: 0;   transform: scaleX(1); }
}

.cursor {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 6px;
  margin-left: -3px;
  background: var(--os);
  box-shadow: 0 0 12px rgba(255, 255, 255, .9);
}

.hint {
  text-align: center;
  font: 700 10px/1 var(--texte);
  letter-spacing: .22em;
  color: rgba(242, 232, 207, .3);
}

/* Souris ou trackpad : on montre les touches plutôt que la zone tactile.
   La classe `pc` est posée une fois par game.js — voir detectPointer(). */
.hint-keys { display: none; }
.pc .hint-touch { display: none; }
.pc .hint-keys  { display: inline; letter-spacing: .14em; }

/* ==========================================================================
   ÉCRANS
   ========================================================================== */

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 70% at 50% 0%, #2a0e10 0%, var(--noir) 62%);
  /* 58 en haut : le bouton SON flotte au-dessus des écrans, et sans cette
     marge il venait recouvrir le début du nom du club sur un écran étroit. */
  padding: calc(58px + var(--safe-t)) 20px calc(28px + var(--safe-b));
}

.sheet { max-width: 480px; margin: 0 auto; }

/* ------------------------------------------------ écran de chargement -- */

.loading { display: grid; place-items: center; }
.loading-in { width: 100%; max-width: 340px; text-align: center; }

.bar {
  height: 14px;
  margin-top: 26px;
  border: 2px solid rgba(242, 232, 207, .28);
  background: rgba(0, 0, 0, .55);
  overflow: hidden;
}
.bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--sang) 0%, var(--sang2) 100%);
  transition: width .25s ease-out;
}
.bar-txt {
  margin-top: 12px;
  font: 700 10px/1 var(--texte);
  letter-spacing: .26em;
  color: rgba(242, 232, 207, .55);
}

.logo { text-align: center; margin-bottom: 10px; }
/* Le nom du club est long : l'interlettrage se resserre et la taille suit la
   largeur disponible, sinon « SHINKYOBUDO AUC KARATÉ » déborde du cadre sur un
   petit téléphone. */
.logo span {
  display: block;
  font: 700 clamp(10px, 3.1vw, 13px)/1.3 var(--texte);
  letter-spacing: .26em;
  color: var(--sang2);
  margin-bottom: 6px;
}
.logo b {
  display: block;
  font: 400 clamp(34px, 12vw, 58px)/1 var(--titre);
  letter-spacing: .05em;
  color: var(--or2);
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(255, 183, 3, .35);
}

.tag {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 232, 207, .68);
  margin-bottom: 12px;
}
.tag b { color: rgba(242, 232, 207, .95); font-weight: 700; }

/* L'accroche : c'est elle qui doit donner envie d'appuyer, elle passe donc
   devant la description en poids visuel. */
.hook {
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  color: var(--os);
  margin-bottom: 22px;
}
.hook b { color: var(--or2); letter-spacing: .06em; }

.over-title {
  text-align: center;
  font: 400 clamp(30px, 11vw, 50px)/1 var(--titre);
  letter-spacing: .08em;
  color: var(--sang2);
  text-shadow: 0 4px 0 #000;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- boutons -- */

.btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: 3px solid var(--os);
  background: transparent;
  color: var(--os);
  font: 400 21px/1 var(--titre);
  letter-spacing: .14em;
  cursor: pointer;
  transition: transform .08s, background .15s, color .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }

/* Rouge école : c'est la couleur du club, elle porte l'action. L'or reste
   réservé aux chiffres — score, multiplicateur, rangs — pour que l'œil ne
   confonde jamais « ce sur quoi j'appuie » et « ce que j'ai marqué ». */
.btn--go {
  border-color: var(--sang2);
  color: var(--os);
  background: linear-gradient(180deg, var(--sang2) 0%, var(--sang) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 0 #4d0104;
}
.btn--go:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 0 #4d0104; }

.btn--big { padding: 17px 16px 14px; }
.btn--big b {
  display: block;
  font: 400 30px/1 var(--titre);
  letter-spacing: .16em;
}
.btn--big small {
  display: block;
  margin-top: 6px;
  font: 700 10px/1 var(--texte);
  letter-spacing: .2em;
  opacity: .62;
}
.btn--sub { margin-top: 10px; padding: 11px 14px; font-size: 14px; }
/* Le partage ne peut plus être rouge lui aussi, sinon les deux boutons de
   l'écran de fin se disputent le regard. Il devient l'os, le rouge reste à
   l'action principale. */
.btn--share {
  border-color: var(--os);
  color: #14100e;
  background: var(--os);
}
.btn--ghost  { border-color: rgba(242, 232, 207, .35); color: rgba(242, 232, 207, .8); }

.row { margin-top: 12px; }
.row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --------------------------------------------------------------- règles -- */

/* ------------------------------------------------- présentation du jeu -- */

.intro p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(242, 232, 207, .74);
  margin-bottom: 12px;
}
.intro p:last-child { margin-bottom: 0; }
.intro b { color: var(--or2); font-weight: 700; }

.tech { list-style: none; }
.tech li {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(242, 232, 207, .1);
}
.tech-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 2px solid rgba(242, 232, 207, .18);
  background: rgba(0, 0, 0, .4);
}
.tech-ico svg { width: 68%; height: 68%; fill: var(--or2); }
.tech-ico svg .ring { fill: none; stroke: var(--or2); stroke-width: 6; opacity: .55; }
.tech-ico svg .dash { stroke-dasharray: 10 12; opacity: .35; }

.tech-txt { min-width: 0; }
.tech-txt b {
  display: block;
  font: 400 19px/1 var(--titre);
  letter-spacing: .09em;
  color: var(--os);
}
.tech-txt em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  color: rgba(242, 232, 207, .5);
}
.tech-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(242, 232, 207, .6);
}
.tech-note b { color: rgba(208, 0, 0, .95); }
.tech-do {
  text-align: right;
  font: 700 9.5px/1.35 var(--texte);
  letter-spacing: .11em;
  color: var(--or);
  max-width: 92px;
}
/* La touche du clavier ne s'affiche qu'au clavier, et elle remplace alors la
   consigne tactile — « glisse vers le bas » n'a aucun sens avec une souris. */
.tech-do u { display: none; }
.pc .tech-do { font-size: 0; }
.pc .tech-do u {
  display: inline-block;
  text-decoration: none;
  padding: 4px 7px;
  border: 1px solid rgba(242, 232, 207, .28);
  border-bottom-width: 3px;
  background: rgba(0, 0, 0, .45);
  font: 700 9.5px/1 var(--texte);
  letter-spacing: .12em;
  color: var(--os);
}

/* ------------------------------------------- repère de défilement -- */

.scrollcue {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 92px;
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-bottom: calc(12px + var(--safe-b));
  background: linear-gradient(180deg, rgba(7, 6, 11, 0) 0%, rgba(7, 6, 11, .93) 62%);
  animation: cueIn .4s ease-out;
}
.scrollcue span {
  font: 700 9px/1 var(--texte);
  letter-spacing: .26em;
  color: rgba(242, 232, 207, .55);
}
.scrollcue i {
  width: 11px; height: 11px;
  border-right: 2px solid var(--or);
  border-bottom: 2px solid var(--or);
  transform: rotate(45deg);
  animation: cueBounce 1.5s ease-in-out infinite;
}

@keyframes cueIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes cueBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.rules { list-style: none; margin: 24px 0 20px; }
.rules li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(242, 232, 207, .1);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(242, 232, 207, .82);
}
.rules b {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--sang);
  font: 400 13px/1 var(--titre);
  color: var(--os);
}
.rules u { text-decoration: none; color: var(--os); font-weight: 700; }
.rules em { font-style: normal; color: var(--or2); font-weight: 700; }

.best {
  text-align: center;
  font: 700 11px/1 var(--texte);
  letter-spacing: .2em;
  color: rgba(242, 232, 207, .5);
  margin-bottom: 26px;
}
.best b {
  display: block;
  margin-top: 6px;
  font: 400 28px/1 var(--titre);
  letter-spacing: .04em;
  color: var(--or);
}

/* ------------------------------------------------------------ fin de partie */

.final {
  text-align: center;
  padding: 20px 0 24px;
  border-top: 2px solid rgba(242, 232, 207, .14);
  border-bottom: 2px solid rgba(242, 232, 207, .14);
  margin-bottom: 22px;
}
.final-score {
  font: 400 clamp(54px, 21vw, 92px)/1 var(--titre);
  letter-spacing: .02em;
  color: var(--or2);
  text-shadow: 0 5px 0 #000;
}
.final-level {
  margin-top: 6px;
  font: 700 12px/1 var(--texte);
  letter-spacing: .22em;
  color: var(--os);
}
.final-planks {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(242, 232, 207, .6);
}
.final-planks b { color: var(--os); font-size: 17px; }

/* ------------------------------------------------------ ceinture noire -- */

.belt {
  margin-bottom: 20px;
  padding: 18px 16px;
  text-align: center;
  border: 2px solid var(--or2);
  background: linear-gradient(180deg, rgba(255, 214, 10, .10), rgba(0, 0, 0, .45));
}
.belt b {
  display: block;
  font: 400 34px/1 var(--titre);
  letter-spacing: .12em;
  color: var(--or2);
  text-shadow: 0 3px 0 #000;
}
.belt span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  color: rgba(242, 232, 207, .8);
}
.belt em {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 214, 10, .28);
  font-style: normal;
  font: 700 11.5px/1.5 var(--texte);
  letter-spacing: .06em;
  color: var(--or);
}

.save { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.save input {
  width: 100%;
  padding: 14px 14px;
  border: 3px solid rgba(242, 232, 207, .3);
  background: rgba(0, 0, 0, .45);
  color: var(--os);
  font: 400 20px/1 var(--titre);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.save input:focus { outline: none; border-color: var(--or2); }
.save .btn { width: auto; padding: 14px 18px; font-size: 16px; }

.msg {
  min-height: 18px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--or);
}

/* ---------------------------------------------------------- classements -- */

.mini {
  margin: 30px 0 10px;
  font: 700 11px/1 var(--texte);
  letter-spacing: .28em;
  color: rgba(242, 232, 207, .45);
  text-align: center;
}

/* ------------------------------------------------------------- onglets -- */

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 12px;
  background: rgba(242, 232, 207, .1);
  padding: 2px;
}
.tab {
  padding: 10px 4px;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: rgba(242, 232, 207, .5);
  font: 700 10px/1 var(--texte);
  letter-spacing: .11em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab.on {
  background: var(--sang);
  color: var(--os);
  box-shadow: inset 0 -3px 0 var(--or2);
}

.board-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(242, 232, 207, .38);
}

.board { list-style: none; }
.board li {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(242, 232, 207, .09);
  font-size: 14px;
}
.board li:nth-child(1) b { color: var(--or2); }
.board li:nth-child(2) b { color: #d9d6cf; }
.board li:nth-child(3) b { color: #c98a5b; }
.board b { font: 400 17px/1 var(--titre); color: rgba(242, 232, 207, .4); }
.board span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Niveau au-dessus, date en dessous : deux lignes minuscules alignées à
   droite. Sur une seule ligne, la colonne poussait le pseudo à l'ellipse dès
   qu'on ajoutait l'année. */
.board .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  overflow: visible;
}
.board .meta i {
  font-style: normal;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}
.board .meta i:first-child { color: rgba(242, 232, 207, .5); }
.board .meta i:last-child  { color: rgba(242, 232, 207, .32); }
.board em { font-style: normal; font-weight: 700; color: var(--or); }
.board li.me { background: rgba(157, 2, 8, .3); box-shadow: inset 3px 0 0 var(--sang2); }
.board li.empty {
  display: block;
  text-align: center;
  color: rgba(242, 232, 207, .35);
  font-size: 12px;
  border: none;
  padding: 16px 0;
}

/* ==========================================================================
   Écrans courts et larges : on rend au canvas la place que le panneau prend
   inutilement, sinon le combattant se retrouve écrasé.
   ========================================================================== */

@media (max-height: 640px) {
  #panel { height: 38vh; min-height: 214px; }
  .gicon { width: 62px; height: 62px; }
  .gtext b { font-size: 25px; }
  .gauge { height: 38px; }
}

@media (min-width: 700px) and (orientation: landscape) {
  #panel { height: 46vh; max-height: none; }
}