/* Modale */
.kholoh-tlm-modal{position:fixed;inset:0;z-index:99999;display:none;}
.kholoh-tlm-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8);}
.kholoh-tlm-content{position:absolute;inset:1%;background:rgba(0, 0, 0, 0.8);border-radius:12px;padding:16px;overflow:hidden;display:flex;flex-direction:column;}
.kholoh-tlm-close{position:absolute;top:10px;right:10px;background:#444;color:#fff;border:0;border-radius:6px;padding:6px 10px;cursor:pointer;}
.no-scroll{overflow:hidden;}

#kholoh-tlm-game-area{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:12px;color:#eee;}
.kholoh-tlm-btn{background:#273043;color:#fff;border:1px solid #2f3a52;border-radius:8px;padding:8px 10px;cursor:pointer;}
.kholoh-tlm-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Plateau */
.tlm-board{position:relative;flex:1;overflow:auto;border-radius:10px;background:#0b0e14;}
.tlm-png{display:block;width:100%;height:100%;object-fit:contain;}
.tlm-svg{position:absolute;inset:0;width:100%;height:100%;}

/* Timer */
.tlm-timer{position:absolute;top:10px;left:10px;background:#111a;color:#fff;padding:6px 10px;border-radius:8px;font-weight:700;z-index:2;}

/* Feedback fin de manche */
.tlm-pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;}
.tlm-pop .box{background:#3a3a3a;border-radius:12px;padding:18px 20px;color:#fff;text-align:center;max-width:70%;}

/* --- zones pendant la sélection --- */
.tlm-picked {
  fill: rgba(255,255,255,0.22) !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

/* --- feedback validation --- */
.tlm-correct {
  fill: rgba(0, 190, 0, 0.28) !important;
  stroke: #00d000 !important;
  stroke-width: 3 !important;
}

.tlm-wrong {
  fill: rgba(220, 0, 0, 0.28) !important;
  stroke: #ff3b30 !important;
  stroke-width: 3 !important;
}

/* --- toast (message haut) --- */
.tlm-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,30,.95);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  z-index: 3;
  max-width: 80%;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Barre de statut (au-dessus du plateau) */
.tlm-status{
  background: #1f1f1f;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
}
.tlm-status .spacer{ flex: 1; }

/* Désactivation des clics sur le SVG pendant le score */
.tlm-locked .tlm-svg{ pointer-events: none; }

/* (Optionnel) Bouton compact dans la barre */
.tlm-status .kholoh-tlm-btn{ padding: 6px 10px; }

/* Centrer le bloc des règles */
.kholoh-tlm-rules {
  text-align: center;
  overflow: auto;
}

.kholoh-tlm-rules ol {
  display: inline-block;
  text-align: left; /* liste lisible tout en étant centrée globalement */
  margin: 0 auto;
  padding-left: 20px;
}

/* Centrer les boutons des règles */
.kholoh-tlm-rules-btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Style de la modale des règles */
.kholoh-tlm-rules {
  background: linear-gradient(145deg, #2b2b2b, #1e1e1e);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
}

.kholoh-tlm-rules h2 {
  font-size: 1.6em;
  margin-bottom: 15px;
  color: #e18e22;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.kholoh-tlm-rules ol {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  padding-left: 20px;
  font-size: 1.05em;
  line-height: 1.5;
}

.kholoh-tlm-rules li {
  margin-bottom: 8px;
}

/* Boutons centrés avec effet */
.kholoh-tlm-rules-btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

#kholoh-tlm-cancel{
	background: transparent;
    border: 1px solid #e18e22;
    color: #e18e22;
}

.kholoh-tlm-rules-btns .kholoh-tlm-btn {
  background: #e18e22;
  color: #222;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kholoh-tlm-rules-btns .kholoh-tlm-btn:hover {
  background: #ffec9e;
  transform: scale(1.05);
}

.kholoh-tlm-info p{
	width: 20%;
	display: inline-block;
}

.zoomable-container{
  max-width: 992px;
/*  max-height: 548px;*/
  margin: 0 auto;
  overflow: hidden;
}

.zoomable-content{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoom-choice{
  position: absolute;
  left: 10px;
  background: #111a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 2;
  opacity: 0.5;
  cursor: pointer;
}

.thiszoom{
  opacity: 0.8;
}

#zo1{
  top: 45px;
}

#zo2{
  top: 80px;
}

#zo3{
  top: 115px;
}

#zo4{
  top: 150px;
}

.zo1:hover{
  scale: 1;
}

.zo2:hover{
  scale: 2;
}

.zo3:hover{
  scale: 3;
}

.zo4:hover{
  scale: 4;
}

/* === HUD / Stats Game Add-on =========================================== */
:root{
  --hud-bg: #0b0e14;
  --hud-panel: #121821;
  --hud-edge: #2a3345;
  --hud-text: #e8f0ff;
  --hud-muted: #9fb0c9;
  --hud-neon: #5cf2ff;
  --hud-neon-2: #7b5cff;
  --hud-ok: #38f59b;
  --hud-warn: #ffb84d;
}

/* conteneur : grille + fond subtil */
.kholoh-tlm-info.hud{
  display:grid;
  grid-template-columns: repeat(4,minmax(180px,1fr));
  gap:14px;
  padding:16px;
  border-radius:16px;
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(123,92,255,.10), transparent 45%),
    radial-gradient(90% 120% at 100% 0%, rgba(92,242,255,.08), transparent 45%),
    linear-gradient(180deg, var(--hud-panel), #0f141b);
  color:var(--hud-text);
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  position:relative;
  margin-bottom: 15px;
}

/* scanlines très légers (visuel CRT) */
.kholoh-tlm-info.hud::after{
  content:"";
  position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025) 0,
    rgba(255,255,255,.025) 1px,
    transparent 2px,
    transparent 4px
  );
}

/* cartes de stats (fonctionne avec ton HTML actuel) */
.kholoh-tlm-info.hud p{
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(124,132,164,.28);
  border-radius:12px;
  padding:12px 12px;
  position:relative;
  min-height:78px;
  box-shadow: 0 0 0.8rem rgba(92,242,255,.15) inset;
  overflow:hidden;
}

/* coins HUD */
.kholoh-tlm-info.hud p::before,
.kholoh-tlm-info.hud p::after{
  content:"";
  position:absolute; width:12px; height:12px; opacity:.55;
  border:2px solid var(--hud-neon); filter: drop-shadow(0 0 6px var(--hud-neon));
}
.kholoh-tlm-info.hud p::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.kholoh-tlm-info.hud p::after{ bottom:8px; right:8px; border-left:none; border-top:none; }

/* titres et valeurs (compat <strong>, <small>) */
.kholoh-tlm-info.hud p strong{
  text-transform:uppercase; letter-spacing:.12em;
  font-size:.78rem; color:var(--hud-muted); font-weight:700;
}
.kholoh-tlm-info.hud p br + *{ /* la ligne juste après le <br> = la valeur */
  margin-top:6px; font-size:1.8rem; line-height:1; font-weight:800;
  text-shadow: 0 0 10px rgba(92,242,255,.25);
}
.kholoh-tlm-info.hud p small{
  margin-top:6px; color:var(--hud-muted); display:inline-block; font-size:.9rem;
}

/* “Prochaine tentative” : chip + mise en avant (marche avec ton <em>) */
.kholoh-tlm-info.hud p em{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,184,77,.10);
  border:1px dashed rgba(255,184,77,.55);
  color:var(--hud-warn);
  padding:6px 10px; border-radius:999px; font-style:normal; font-weight:700;
}

/* grille responsive sans toucher ton width:20% existant */
.kholoh-tlm-info.hud p{ width:auto !important; }
@media (max-width:900px){ .kholoh-tlm-info.hud{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .kholoh-tlm-info.hud{ grid-template-columns: 1fr; } }

/* hover doux */
@media (hover:hover){
  .kholoh-tlm-info.hud p{ transition: transform .22s ease, border-color .22s, box-shadow .22s; }
  .kholoh-tlm-info.hud p:hover{
    transform: translateY(-2px);
    border-color: rgba(92,242,255,.55);
    box-shadow: 0 0 14px rgba(92,242,255,.30), inset 0 0 22px rgba(123,92,255,.18);
  }
}

/* --- Boutons : skin arcade ------------------------------------------------ */
.kholoh-tlm-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:#eaf3ff;
  border:1px solid rgba(124,132,164,.35);
  border-radius:12px;
  padding:10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.kholoh-tlm-btn:hover:not([disabled]){
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(92,242,255,.35);
  border-color: rgba(92,242,255,.6);
}
.kholoh-tlm-btn[disabled]{ opacity:.55; cursor:not-allowed; border-style:dashed; }

/* variante “primaire” pour #kholoh-tlm-start-endless si tu veux */
#kholoh-tlm-start-endless{
  border-color: rgba(92,242,255,.6);
  box-shadow: 0 0 10px rgba(92,242,255,.35), inset 0 0 20px rgba(123,92,255,.18);
}

/* --- Harmonisation du jeu : timer, toast, status bar ---------------------- */
.tlm-timer{
  background: #0f1722cc;
  border:1px solid rgba(92,242,255,.45);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 12px rgba(123,92,255,.18);
  border-radius:10px;
}

/* pulsation discrète du timer (désactive avec prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .tlm-timer{ animation: hudPulse 2s ease-in-out infinite; }
}
@keyframes hudPulse{
  0%,100%{ box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 6px rgba(123,92,255,.14); }
  50%{    box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 18px rgba(92,242,255,.22); }
}

.tlm-status{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(124,132,164,.28);
  box-shadow: inset 0 0 16px rgba(92,242,255,.08);
  border-radius:12px;
}

/* toast “pop” avec slide */
.tlm-toast{
  background: #0f1722ee;
  border:1px solid rgba(92,242,255,.35);
  text-shadow: 0 0 8px rgba(124,132,164,.12);
}
@media (prefers-reduced-motion: no-preference){
  .tlm-toast{ animation: toastIn .25s ease-out; }
}
@keyframes toastIn{
  from{ transform: translate(-50%, -6px); opacity:0; }
  to{   transform: translate(-50%, 0);   opacity:1; }
}

/* feedback zones : teintes plus “néon” mais garde tes couleurs */
.tlm-correct{
  fill: rgba(56, 245, 155, 0.25) !important;
  stroke: #38f59b !important;
  filter: drop-shadow(0 0 8px rgba(56,245,155,.55));
}
.tlm-wrong{
  fill: rgba(255, 59, 48, 0.22) !important;
  stroke: #ff3b30 !important;
  filter: drop-shadow(0 0 8px rgba(255,59,48,.55));
}
.tlm-picked{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45));
}

/* modale : close “chip” */
.kholoh-tlm-close{
  background: #0f1722;
  border:1px solid rgba(92,242,255,.45);
  border-radius:999px;
  padding:6px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* ================== HUD x KHO THEME ================== */
/* Scope : tout ce qui est dans .kho-skin utilisera TA palette */
.kho-skin{
  --hud-bg: var(--kho-bg, #121212);
  --hud-panel: var(--kho-panel, #1a1a1a);
  --hud-text: var(--kho-text, #f3f3f3);
  --hud-muted: var(--kho-muted, #a8a8a8);
  --hud-accent: var(--kho-accent, #ff9800);
  --hud-accent-2: var(--kho-accent-2, #9c27b0);
  --hud-ok: var(--kho-ok, #22c55e);
  --hud-danger: var(--kho-danger, #ef4444);
}

/* Conteneur HUD avec ta bordure dégradée */
.kholoh-tlm-info.hud.kho-skin{
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 16px;
  background:
    radial-gradient(120% 120% at 10% 0%, color-mix(in srgb, var(--hud-accent) 12%, #000) 0%,
                               var(--hud-panel) 40%, var(--hud-bg) 100%) padding-box,
    linear-gradient(135deg, var(--hud-accent), var(--hud-accent-2)) border-box;
  color: var(--hud-text);
  box-shadow:
    0 0 0.75rem color-mix(in srgb, var(--hud-accent) 35%, transparent),
    inset 0 0 0.35rem color-mix(in srgb, var(--hud-accent) 22%, transparent);
  display:grid;
  grid-template-columns: repeat(4,minmax(180px,1fr));
  gap:14px;
  position:relative;
}

/* scanlines légers */
.kholoh-tlm-info.hud.kho-skin::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: repeating-linear-gradient(to bottom,
      rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px,
      transparent 2px, transparent 4px);
}

/* Cartes */
.kholoh-tlm-info.hud.kho-skin p{
  width:auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid color-mix(in srgb, var(--hud-accent-2) 35%, transparent);
  border-radius:12px; padding:12px;
  position:relative; min-height:78px;
  box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--hud-accent-2) 18%, transparent);
}

/* coins lumineux */
.kholoh-tlm-info.hud.kho-skin p::before,
.kholoh-tlm-info.hud.kho-skin p::after{
  content:""; position:absolute; width:12px; height:12px; opacity:.7;
  border:2px solid var(--hud-accent);
  filter: drop-shadow(0 0 8px var(--hud-accent));
}
.kholoh-tlm-info.hud.kho-skin p::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.kholoh-tlm-info.hud.kho-skin p::after{ bottom:8px; right:8px; border-left:none; border-top:none; }

.kholoh-tlm-info.hud.kho-skin p strong{
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--hud-muted);
}
.kholoh-tlm-info.hud.kho-skin p br + *{
  margin-top:6px; font-size:1.8rem; line-height:1; font-weight:900;
  background: linear-gradient(90deg, var(--hud-accent), var(--hud-accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.kholoh-tlm-info.hud.kho-skin p small{
  display:inline-block; margin-top:6px; color:var(--hud-muted); font-size:.9rem;
}

/* Prochaine tentative en chip orange */
.kholoh-tlm-info.hud.kho-skin p em{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in srgb, var(--hud-accent) 12%, transparent);
  border:1px dashed color-mix(in srgb, var(--hud-accent) 55%, transparent);
  color: var(--hud-accent); font-style:normal; font-weight:800;
  padding:6px 10px; border-radius:999px;
}

/* Hover */
@media (hover:hover){
  .kholoh-tlm-info.hud.kho-skin p{ transition: transform .22s ease, border-color .22s, box-shadow .22s; }
  .kholoh-tlm-info.hud.kho-skin p:hover{
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--hud-accent) 65%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--hud-accent) 35%, transparent),
                inset 0 0 22px color-mix(in srgb, var(--hud-accent-2) 22%, transparent);
  }
}

/* Responsive grille */
@media (max-width:900px){ .kholoh-tlm-info.hud.kho-skin{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .kholoh-tlm-info.hud.kho-skin{ grid-template-columns: 1fr; } }

/* ===== Boutons accordés à ta palette ===== */
.kho-skin .kholoh-tlm-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: var(--hud-text);
  border:1px solid color-mix(in srgb, var(--hud-accent-2) 35%, transparent);
  border-radius:12px; padding:10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.kho-skin .kholoh-tlm-btn:hover:not([disabled]){
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--hud-accent) 60%, transparent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--hud-accent) 35%, transparent);
  color: black;
}
.kho-skin #kholoh-tlm-start-endless{
  border-color: color-mix(in srgb, var(--hud-accent) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--hud-accent) 35%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--hud-accent-2) 22%, transparent);
}
.kho-skin .kholoh-tlm-btn[disabled]{
  opacity:.55; cursor:not-allowed; border-style:dashed;
}

/* ===== Harmonisation timer / toast / status ===== */
.kho-skin .tlm-timer{
  background: color-mix(in srgb, var(--hud-bg) 35%, #000);
  border:1px solid color-mix(in srgb, var(--hud-accent) 45%, transparent);
  color: var(--hud-text);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 12px color-mix(in srgb, var(--hud-accent-2) 18%, transparent);
  border-radius:10px;
}
.kho-skin .tlm-status{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid color-mix(in srgb, var(--hud-accent-2) 35%, transparent);
  color: var(--hud-text);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--hud-accent-2) 12%, transparent);
  border-radius:12px;
}
.kho-skin .tlm-toast{
  background: color-mix(in srgb, var(--hud-bg) 80%, #000);
  border:1px solid color-mix(in srgb, var(--hud-accent) 35%, transparent);
  color: var(--hud-text);
}

/* Feedback zones */
.kho-skin .tlm-correct{
  fill: color-mix(in srgb, var(--hud-ok) 25%, transparent) !important;
  stroke: var(--hud-ok) !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hud-ok) 55%, transparent));
}
.kho-skin .tlm-wrong{
  fill: color-mix(in srgb, var(--hud-danger) 22%, transparent) !important;
  stroke: var(--hud-danger) !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hud-danger) 55%, transparent));
}
.kho-skin .tlm-picked{ filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); }

/* Close bouton modale */
.kho-skin .kholoh-tlm-close{
  background: var(--hud-panel);
  border:1px solid color-mix(in srgb, var(--hud-accent) 45%, transparent);
  color: var(--hud-text);
  border-radius:999px; padding:6px 12px;
}

/* Badge “record” réutilisable (si tu veux highlight un p) */
.kho-skin .is-record{
  border-color: color-mix(in srgb, var(--hud-ok) 60%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--hud-ok) 35%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--hud-ok) 18%, transparent) !important;
}

.stat .value,
.meta .value{
  font-weight: bold;
  font-size: 1.5em;
}

/* Bloc d'information mobile (pas de jeu) */
.kholoh-tlm-mobile-block {
  margin: 16px 0 24px;
  display: flex;
  justify-content: center;
}

.kholoh-tlm-mobile-card {
  background: #15171b;
  color: #e9ecef;
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}

.kholoh-tlm-mobile-card .kholoh-tlm-mobile-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

.kholoh-tlm-mobile-card h3 {
  margin: 6px 0 8px;
  font-size: 20px;
}

.kholoh-tlm-mobile-card p {
  margin: 0;
  opacity: .92;
}