/* KIT 7 — habillage commun des nouveaux jeux 7TH GAMES (plein écran, tactile) */
html, body{ margin:0; padding:0; height:100%; overflow:hidden; }
body.k7{ background:#0a0c14; color:#fff; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; height:100vh; height:100dvh; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.k7-barre{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(10,12,20,.92); border-bottom:1px solid rgba(255,255,255,.12); }
.k7-titre{ font-weight:900; font-size:17px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k7-info{ flex:1 1 auto; text-align:right; font-weight:800; font-size:15px; color:#ffd34e; white-space:nowrap; overflow:hidden; }
.k7-mini{ flex:0 0 auto; min-width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  color:#fff; font-size:20px; line-height:42px; text-align:center; text-decoration:none; cursor:pointer; padding:0 8px; font-family:inherit; }
.k7-scene{ flex:1 1 auto; position:relative; overflow:hidden; touch-action:none; }
.k7-scene > canvas{ position:absolute; display:block; image-rendering:auto; }
.k7-touches{ position:absolute; inset:0; pointer-events:none; }
.k7-b{ position:absolute; pointer-events:auto; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; text-align:center; line-height:70px;
  font-size:26px; font-weight:900; color:#fff; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.35); touch-action:none;
  -webkit-user-select:none; user-select:none; }
.k7-b.k7-grand{ width:86px; height:86px; margin:-43px 0 0 -43px; line-height:86px; }
.k7-b.on{ background:rgba(255,211,78,.55); border-color:#ffd34e; }
.k7-mojo{ position:absolute; top:6px; left:50%; width:84px; height:56px; margin-left:-42px; border-radius:28px; text-align:center; line-height:56px;
  color:rgba(255,255,255,.18); font-size:20px; touch-action:none; z-index:3; }
.k7-mojo.on{ background:rgba(255,211,78,.12); color:#ffd34e; }
.k7-voile{ position:absolute; inset:0; z-index:10; display:none; align-items:center; justify-content:center; background:rgba(5,6,12,.78); padding:12px; overflow:auto; }
.k7-voile.on{ display:flex; }
.k7-boite{ width:100%; max-width:560px; background:#151829; border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:20px; text-align:center; max-height:100%; overflow:auto; }
.k7-boite h2{ margin:0 0 8px; font-size:28px; }
.k7-boite p{ color:#c9cce0; line-height:1.5; margin:6px 0; }
.k7-btn{ display:inline-block; min-height:50px; padding:0 20px; margin:6px 4px; border-radius:14px; border:0; background:#ffd34e; color:#111;
  font:inherit; font-weight:900; font-size:17px; cursor:pointer; text-decoration:none; line-height:50px; }
.k7-btn.alt{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); line-height:46px; }
.k7-btn.on{ outline:3px solid #ffd34e; outline-offset:2px; background:#fff; }
.k7-btn:focus-visible, .k7-mini:focus-visible{ outline:3px solid #29e4c2; outline-offset:2px; }
.k7-gros{ font-size:56px; font-weight:900; color:#ffd34e; margin:6px 0; }
.k7-choix{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0; }
.k7-perso{ width:96px; padding:8px 4px; border-radius:14px; border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font:inherit; font-weight:800; font-size:14px; }
.k7-perso canvas{ display:block; margin:0 auto 4px; }
.k7-perso.on{ border-color:#ffd34e; background:rgba(255,211,78,.15); }
.k7-aide{ font-size:13px; color:#a9adc6; }
.k7-tourne{ display:none; position:absolute; left:0; right:0; bottom:0; background:rgba(255,211,78,.92); color:#111; text-align:center; font-weight:800; padding:6px; font-size:14px; z-index:4; pointer-events:none; }
/* l'écran de fin de scores.js réutilise la structure jx- */
.k7-voile .jx-boite{ background:#151829; border-radius:20px; padding:20px; max-width:520px; width:100%; text-align:center; }
.k7-voile .jx-gros{ font-size:52px; font-weight:900; color:#ffd34e; }
.k7-voile input{ width:100%; box-sizing:border-box; min-height:50px; font-size:18px; border-radius:12px; border:2px solid rgba(255,255,255,.25); background:#0e1020; color:#fff; padding:0 12px; margin:8px 0; text-align:center; }
.k7-voile .jx-btn{ display:inline-block; min-height:48px; padding:0 18px; margin:6px 4px; border-radius:12px; border:0; background:#ffd34e; color:#111; font:inherit; font-weight:900; cursor:pointer; text-decoration:none; line-height:48px; }
.k7-voile .jx-rang{ margin-top:8px; } .k7-voile .jx-msg.ok{ color:#3ddc84; } .k7-voile .jx-msg.err{ color:#ff5470; } .k7-voile .jx-note{ font-size:12px; color:#a9adc6; }
@media (max-height:420px){ .k7-barre{ padding:3px 8px; } .k7-mini{ height:36px; min-width:36px; line-height:34px; } .k7-b{ width:58px; height:58px; margin:-29px 0 0 -29px; line-height:58px; } .k7-b.k7-grand{ width:70px; height:70px; margin:-35px 0 0 -35px; line-height:70px; } }
/* ---------- AJOUT : appareils et commandes ---------- */
html, body.k7{ overscroll-behavior:none; }
body.k7{ -webkit-touch-callout:none; }
.k7-scene > canvas, .k7-touches, .k7-b, .k7-mojo{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.k7-barre{ padding-top:max(6px, env(safe-area-inset-top)); padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
.k7-mini, .k7-btn, .k7-perso, .k7-voile button{ touch-action:manipulation; }
.k7-voile input, .k7-voile textarea{ -webkit-user-select:text; user-select:text; touch-action:manipulation; }
.k7-touches{ left:env(safe-area-inset-left); right:env(safe-area-inset-right); bottom:env(safe-area-inset-bottom); }
.k7-b{ min-width:60px; min-height:60px; }
.k7-aide-t{ text-align:left; margin:10px 0; width:100%; border-collapse:collapse; }
.k7-aide-t td, .k7-aide-t th{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; color:#dfe2f2; vertical-align:top; }
.k7-aide-t th{ color:#ffd34e; font-weight:800; }
.k7-aide-t kbd{ display:inline-block; min-width:22px; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); font:700 13px inherit; color:#fff; text-align:center; }
@media (max-height:420px){ .k7-b{ min-width:54px; min-height:54px; } }