/* ShenPachi v3.6 — menu et habillage des panneaux.
   Famille ShenDigital (Albums / Link / Radio) : fond sombre teinté, texte blanc cassé, accent cyan unique,
   libellés mono, bouton principal plein. Identité propre au jeu : logo Orbitron à décalage chromatique,
   coins biseautés, repères d'angle façon HUD, une couleur par mode.
   Performance : aucun backdrop-filter, aucune animation continue, aucun filtre ; uniquement des fonds plats,
   des dégradés statiques et clip-path. Toutes les règles sont préfixées html.ui-v2 body pour primer sur
   les couches historiques de game.css / nextgen.css sans !important. */

@font-face{
  font-family:'Orbitron';
  src:url(../fonts/orbitron-latin.woff2?v=3.6.0) format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --k-panel-a:rgba(11,14,21,.94);
  --k-panel-b:rgba(7,9,14,.96);
  --k-line:rgba(255,255,255,.09);
  --k-line2:rgba(255,255,255,.16);
  --k-fg:#eef1f7;
  --k-mid:#b9bfca;
  --k-dim:#8a93a3;
  --k-acc:#42f8ff;
  --k-acc-hi:#8cfbff;
  --k-acc-ink:#03141a;
  --k-pink:#ff4fd8;
  --k-red:#ff315f;
  --k-green:#00ffc8;
  --k-gold:#ffe66d;
  --k-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --k-display:"Orbitron","Bahnschrift SemiCondensed","Arial Narrow",system-ui,sans-serif;
  --k-cut:14px;
}

/* ---------- Panneaux (menu, accueil, pause, fin) ---------- */
html.ui-v2 body #menu,
html.ui-v2 body #preMenu,
html.ui-v2 body #pauseMenu,
html.ui-v2 body #gameover,
html.ui-v2 body #congrats{background:rgba(3,5,10,.52)}

html.ui-v2 body #menu .panel,
html.ui-v2 body #preMenu .panel,
html.ui-v2 body #pauseMenu .panel,
html.ui-v2 body #gameover .panel,
html.ui-v2 body #congrats .panel{
  background:linear-gradient(180deg,var(--k-panel-a),var(--k-panel-b));
  border:1px solid var(--k-line);
  border-radius:0;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  clip-path:polygon(var(--k-cut) 0,100% 0,100% calc(100% - var(--k-cut)),calc(100% - var(--k-cut)) 100%,0 100%,0 var(--k-cut));
}
/* Repères d'angle : biseau tracé en haut à gauche (cyan) et en bas à droite (rose), équerres opposées. */
html.ui-v2 body #menu .panel::before,
html.ui-v2 body #preMenu .panel::before,
html.ui-v2 body #pauseMenu .panel::before,
html.ui-v2 body #gameover .panel::before,
html.ui-v2 body #congrats .panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(135deg,transparent calc(50% - 1px),var(--k-acc) calc(50% - 1px),var(--k-acc) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/var(--k-cut) var(--k-cut) no-repeat,
    linear-gradient(135deg,transparent calc(50% - 1px),var(--k-pink) calc(50% - 1px),var(--k-pink) calc(50% + .5px),transparent calc(50% + .5px)) 100% 100%/var(--k-cut) var(--k-cut) no-repeat,
    linear-gradient(var(--k-acc),var(--k-acc)) 100% 0/22px 1px no-repeat,
    linear-gradient(var(--k-acc),var(--k-acc)) 100% 0/1px 22px no-repeat,
    linear-gradient(var(--k-pink),var(--k-pink)) 0 100%/22px 1px no-repeat,
    linear-gradient(var(--k-pink),var(--k-pink)) 0 100%/1px 22px no-repeat,
    radial-gradient(420px 140px at 18% 0%,rgba(66,248,255,.07),transparent 70%);
}

/* ---------- Boutons ---------- */
html.ui-v2 body .btn{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600;
  color:var(--k-mid);
  background:rgba(255,255,255,.035);
  border:1px solid var(--k-line2);
  border-radius:6px;
  box-shadow:none;
  text-shadow:none;
  transition:color .12s ease,border-color .12s ease,background-color .12s ease;
}
html.ui-v2 body .btn:hover{color:var(--k-fg);border-color:rgba(66,248,255,.45);background:rgba(66,248,255,.06);box-shadow:none;transform:none}
html.ui-v2 body .btn:focus-visible,
html.ui-v2 body .btn.focused{outline:2px solid var(--k-acc);outline-offset:2px;color:var(--k-fg)}

/* Bouton principal : plein, biseauté, typographie du logo. */
html.ui-v2 body #startBtn,
html.ui-v2 body #preStartBtn,
html.ui-v2 body #pauseResumeBtn,
html.ui-v2 body #retryBtn{
  font-family:var(--k-display);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--k-acc-ink);
  background:var(--k-acc);
  border:0;
  border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
html.ui-v2 body #startBtn:hover,
html.ui-v2 body #preStartBtn:hover,
html.ui-v2 body #pauseResumeBtn:hover,
html.ui-v2 body #retryBtn:hover{background:var(--k-acc-hi);color:var(--k-acc-ink)}
/* clip-path coupe le contour : le focus se lit par inversion du fond. */
html.ui-v2 body #startBtn:focus-visible,html.ui-v2 body #startBtn.focused,
html.ui-v2 body #preStartBtn:focus-visible,html.ui-v2 body #preStartBtn.focused,
html.ui-v2 body #pauseResumeBtn:focus-visible,html.ui-v2 body #pauseResumeBtn.focused,
html.ui-v2 body #retryBtn:focus-visible,html.ui-v2 body #retryBtn.focused{background:#ffffff;color:var(--k-acc-ink);outline:none}

/* ---------- Titres ---------- */
html.ui-v2 body #pauseMenu h1,
html.ui-v2 body #gameover h1{font-family:var(--k-display);font-weight:800;letter-spacing:.12em;color:var(--k-fg);text-shadow:-1.5px 0 rgba(66,248,255,.5),1.5px 0 rgba(255,79,216,.4)}

html.ui-v2 body .logo{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0;text-shadow:none;letter-spacing:0;text-transform:none}
html.ui-v2 body .logo-main{
  font-family:var(--k-display);
  font-weight:900;
  font-size:clamp(28px,9.4vw,44px);
  line-height:.92;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#f4f7fb;
  text-shadow:-2px 0 rgba(66,248,255,.55),2px 0 rgba(255,79,216,.45);
}
html.ui-v2 body .logo-sub{
  display:flex;align-items:center;gap:10px;align-self:stretch;
  font-family:var(--k-mono);font-size:11px;font-weight:600;letter-spacing:.48em;text-transform:uppercase;
  color:var(--k-pink);
}
html.ui-v2 body .logo-sub::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,79,216,.55),rgba(66,248,255,.25) 60%,transparent)}
html.ui-v2 body #preMenu .logo{align-items:center}
html.ui-v2 body #preMenu .logo-sub{justify-content:center}
html.ui-v2 body #preMenu .logo-sub::after{display:none}

/* ---------- Menu principal : un écran, sans défilement ---------- */
html.ui-v2 body #menu{padding:10px}
html.ui-v2 body #menu .panel{
  width:min(100%,460px);
  max-width:min(100%,460px);
  max-height:100%;
  margin:auto;
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}
html.ui-v2 body #menu .panel::-webkit-scrollbar{display:none}
html.ui-v2 body #menu .panel > *{margin:0;position:relative;z-index:1}
html.ui-v2 body #menu .menu-kicker{order:0;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--k-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--k-dim);padding-left:6px}
html.ui-v2 body #menu h1.logo{order:1}
html.ui-v2 body #menu .subtle-copy{order:2;font-size:12.5px;line-height:1.35;color:var(--k-mid)}
html.ui-v2 body #menu .subtle-copy em{color:var(--k-fg);font-style:normal}
html.ui-v2 body #menu .version-row{order:8;text-align:center;margin:0}
html.ui-v2 body #menu .tag--version{background:none;border:0;box-shadow:none;padding:0;font-family:var(--k-mono);font-size:10px;letter-spacing:.08em;color:var(--k-dim)}
html.ui-v2 body #menuRecord{order:3}
html.ui-v2 body #menu .menu-block--modes{order:4}
html.ui-v2 body #menu .action-row{order:5}
html.ui-v2 body #menu .ecosystem-strip{order:6}
html.ui-v2 body #menuMore{order:7}

/* Record (miroir des statistiques du mode sélectionné) */
html.ui-v2 body #menuRecord{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:8px 0 8px 6px;
  border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line);
  font-family:var(--k-mono);font-size:11px;color:var(--k-mid);
}
html.ui-v2 body #menuRecord[hidden]{display:none}
html.ui-v2 body #menuRecord .rk{color:var(--k-dim);letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-right:6px}
html.ui-v2 body #menuRecord .rv{color:var(--k-fg);font-variant-numeric:tabular-nums;letter-spacing:.04em}
html.ui-v2 body #menuRecord .rec-best .rv{color:var(--k-acc)}

/* Modes : quatre cartes 2×2, une couleur et un numéro par mode. */
html.ui-v2 body #menu .menu-block--modes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;counter-reset:mode;
}
html.ui-v2 body #menu .menu-block--modes::before{display:none}
html.ui-v2 body #menu .menu-block--modes .menu-block-title{grid-column:1/-1;margin:0 0 2px;padding-left:6px;font-family:var(--k-mono);font-size:10.5px;font-weight:600;letter-spacing:.24em;color:var(--k-dim)}
html.ui-v2 body #menu .mode-option{
  --mc:var(--k-acc);--mcb:rgba(66,248,255,.08);
  counter-increment:mode;
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  margin:0;min-height:66px;padding:10px 26px 10px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--k-line);border-radius:6px;
  font-size:12px;line-height:1.3;color:var(--k-mid);
  cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease;
}
html.ui-v2 body #menu .mode-option[data-mode="hard"]{--mc:var(--k-red);--mcb:rgba(255,49,95,.09)}
html.ui-v2 body #menu .mode-option[data-mode="entrainement"]{--mc:var(--k-green);--mcb:rgba(0,255,200,.07)}
html.ui-v2 body #menu .mode-option[data-mode="infini"]{--mc:var(--k-pink);--mcb:rgba(255,79,216,.08)}
html.ui-v2 body #menu .mode-option::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:2px;background:var(--mc);opacity:.4;transition:opacity .12s ease}
html.ui-v2 body #menu .mode-option::after{content:counter(mode,decimal-leading-zero);position:absolute;top:9px;right:10px;font:600 10px/1 var(--k-mono);letter-spacing:.06em;color:var(--k-dim)}
html.ui-v2 body #menu .mode-option:hover{border-color:var(--k-line2);background:rgba(255,255,255,.045)}
html.ui-v2 body #menu .mode-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
html.ui-v2 body #menu .mode-option.is-checked{background:var(--mcb);border-color:var(--mc)}
html.ui-v2 body #menu .mode-option.is-checked::before{opacity:1;top:-1px;bottom:-1px;width:3px}
html.ui-v2 body #menu .mode-option.is-checked::after{color:var(--mc)}
html.ui-v2 body #menu .mode-option.focused,
html.ui-v2 body #menu .mode-option:focus-within{outline:2px solid var(--mc);outline-offset:2px}
html.ui-v2 body #menu .mode-name{max-width:100%;overflow-wrap:anywhere;font-family:var(--k-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-fg)}
html.ui-v2 body #menu .mode-desc{font-size:11.5px;line-height:1.3;color:var(--k-mid);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Actions : JOUER plein sur toute la largeur, puis quatre actions secondaires. */
html.ui-v2 body #menu .action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0}
html.ui-v2 body #menu .action-row .btn{min-width:0;min-height:44px;margin:0;padding:6px 4px;font-size:12px;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
html.ui-v2 body #menu .action-row .btn[hidden]{display:none}
html.ui-v2 body #menu .action-row #startBtn{grid-column:1/-1;min-height:56px;font-size:16px;padding:8px 16px}

/* Écosystème ShenDigital : liens mono discrets. */
html.ui-v2 body #menu .ecosystem-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;max-width:none;padding-top:2px}
html.ui-v2 body #menu .ecosystem-strip a{min-height:30px;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--k-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-dim)}
html.ui-v2 body #menu .ecosystem-strip a:hover,
html.ui-v2 body #menu .ecosystem-strip a:focus-visible{color:var(--k-acc);box-shadow:none}

/* Tiroir « Réglages » : langue, contrôles, options, aide, statistiques. */
html.ui-v2 body #menuMore{display:flex;flex-direction:column;gap:10px;min-height:0}
html.ui-v2 body #menuMore[hidden]{display:none}
html.ui-v2 body .menu-more-head{display:flex;align-items:center;gap:12px}
html.ui-v2 body #menuBackBtn{min-height:40px;padding:6px 12px;font-size:12px}
html.ui-v2 body #menuMoreTitle{font-family:var(--k-display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-fg)}
html.ui-v2 body .menu-more-body{display:flex;flex-direction:column;gap:10px}
html.ui-v2 body .menu-more-body > *{margin:0!important}
html.ui-v2 body .menu-more-body .menu-block{padding:12px;border:1px solid var(--k-line);border-radius:6px;background:rgba(255,255,255,.025);box-shadow:none}
html.ui-v2 body .menu-more-body .menu-block::before{left:12px;right:12px;background:linear-gradient(90deg,rgba(66,248,255,.4),rgba(255,79,216,.25),transparent 85%)}
html.ui-v2 body .menu-more-body .menu-block-title{font-family:var(--k-mono);font-size:10.5px;letter-spacing:.2em;color:var(--k-dim)}
html.ui-v2 body .menu-more-body .keybar{display:flex}
html.ui-v2 body .menu-more-body label,
html.ui-v2 body .menu-more-body .help-copy{font-size:12.5px;color:var(--k-mid)}
html.ui-v2 body .menu-more-body .inline-row{min-height:36px;justify-content:flex-start}
html.ui-v2 body .menu-more-body details{border-radius:6px}
html.ui-v2 body .menu-more-body .lang-row{justify-content:flex-start;margin:0}
html.ui-v2 body .menu-more-body .ng-menu-chip{margin:0;font-family:var(--k-mono);font-size:10px;letter-spacing:.08em}
html.ui-v2 body .menu-more-body .stat-card{border-radius:6px}

/* Quand le tiroir est ouvert, le reste du menu se retire (pas de défilement de l'ensemble). */
html.ui-v2 body #menu .panel.is-more > :not(#menuMore):not(h1):not(.menu-kicker):not(.version-row){display:none}
html.ui-v2 body #menu .panel.is-more .logo-main{font-size:24px}

/* ---------- Écran d'accueil ---------- */
html.ui-v2 body #preMenu .panel{padding:22px 18px 16px}
html.ui-v2 body #preMenu .panel > *{position:relative;z-index:1}
html.ui-v2 body #preMenu .subtle-copy{color:var(--k-mid)}
html.ui-v2 body #preMenu .action-row .btn{min-height:44px}
html.ui-v2 body #preMenu #preStartBtn{min-height:52px;min-width:200px;font-size:15px}
html.ui-v2 body #preMenu .ecosystem-strip a{border:0;background:none;font-family:var(--k-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-dim)}

/* ---------- Petits écrans ---------- */
@media (max-width:420px){
  html.ui-v2 body #menu{padding:6px}
  html.ui-v2 body #menu .panel{padding:16px 14px 12px;gap:10px}
  html.ui-v2 body #menu .mode-option{min-height:62px;padding:9px 22px 9px 12px}
  html.ui-v2 body #menu .action-row{gap:6px}
  html.ui-v2 body #menu .action-row .btn{font-size:11.5px}
}
@media (max-height:700px){
  html.ui-v2 body #menu .panel{gap:9px;padding-top:14px;padding-bottom:10px}
  html.ui-v2 body #menu .subtle-copy{display:none}
  html.ui-v2 body #menu .mode-option{min-height:56px;padding-top:8px;padding-bottom:8px}
  html.ui-v2 body #menu .mode-desc{-webkit-line-clamp:1}
  html.ui-v2 body #menu .action-row #startBtn{min-height:50px}
}
@media (max-height:600px){
  html.ui-v2 body #menu .ecosystem-strip{display:none}
  html.ui-v2 body #menu .logo-main{font-size:26px}
  html.ui-v2 body #menu .menu-kicker{display:none}
}
/* Très petits écrans (320 px) : modes en liste compacte, sans description. */
@media (max-width:350px){
  html.ui-v2 body #menu .menu-block--modes{grid-template-columns:1fr;gap:6px}
  html.ui-v2 body #menu .mode-option{min-height:44px;flex-direction:row;align-items:center;padding:8px 34px 8px 14px}
  html.ui-v2 body #menu .mode-option::after{top:50%;transform:translateY(-50%)}
  html.ui-v2 body #menu .mode-desc{display:none}
  html.ui-v2 body #menu .logo-main{font-size:26px}
  html.ui-v2 body #menu .logo-sub{letter-spacing:.32em}
  html.ui-v2 body #menu .action-row .btn{font-size:10.5px;padding:4px 2px}
  html.ui-v2 body #menuRecord{gap:2px 10px;padding:6px 0 6px 6px}
}
@media (prefers-reduced-motion:reduce){
  html.ui-v2 body .btn,html.ui-v2 body #menu .mode-option{transition:none}
}