*{box-sizing:border-box}
:root{--red:#e53935;--yel:#fdd835;--bg:#0d1020;--card:#171c36;--line:#2c3566;--txt:#e8ecff;--pale:#9aa6d8;color-scheme:dark}
body.menu-body{margin:0;min-height:100vh;display:flex;background:radial-gradient(circle at 50% 0,#1b2150,var(--bg) 60%);color:var(--txt);font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* motif de fond : trous de plateau très discrets */
body.menu-body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffffff0b 0 9px,transparent 10px);background-size:44px 44px;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.home-button{position:fixed;top:12px;left:12px;color:#fff;text-decoration:none;display:flex;gap:6px;align-items:center;background:linear-gradient(180deg,#0009,#0006);border:1px solid #ffffff1a;padding:8px 12px;border-radius:12px;z-index:2;box-shadow:0 4px 12px #0005;transition:border-color .15s,background .15s}
@media (hover:hover){.home-button:hover{border-color:#4a58b8;background:#000a}}
.container{position:relative;z-index:1;margin:auto;text-align:center;padding:64px 20px 24px;max-width:540px;width:100%}
h1{font-size:clamp(28px,7vw,42px);margin:0 0 4px;background:linear-gradient(90deg,var(--red),var(--yel));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px;filter:drop-shadow(0 4px 18px #e5393555)}
.subtitle{margin:0 0 22px;color:var(--pale)}

/* ---------- Sélecteurs ---------- */
.seg{display:flex;gap:6px;padding:4px;margin-bottom:12px;border-radius:16px;background:linear-gradient(180deg,#0007,#0004);border:1px solid var(--line);box-shadow:inset 0 2px 6px #0006}
.seg[hidden]{display:none}
.seg button{flex:1;min-height:46px;padding:6px 8px;border:2px solid transparent;border-radius:12px;background:none;color:var(--txt);font:600 14px system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .1s}
.seg.sm button{min-height:40px;font-size:14px}
.seg button:hover{background:#ffffff14}
.seg button:active{transform:scale(.97)}
.seg button[aria-checked=true]{background:linear-gradient(180deg,#ffe76a,var(--yel));color:#1a1a1a;border-color:#fff;box-shadow:0 3px 10px #fdd83540,inset 0 -2px 0 #0002}

/* ---------- Choix du mode ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
.mode{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;border-radius:18px;background:linear-gradient(160deg,#1f2650,var(--card) 60%,#121630);border:2px solid var(--line);box-shadow:0 8px 20px #0005,inset 0 1px 0 #ffffff14;color:var(--txt);cursor:pointer;font-family:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.mode b{font-size:22px}.mode span{font-size:13px;color:var(--pale)}
.mode.last{border-color:var(--yel);box-shadow:0 8px 22px #0005,0 0 18px #fdd83530,inset 0 1px 0 #ffffff14}
@media (hover:hover){.mode:hover{transform:translateY(-3px);border-color:#5a68c8;box-shadow:0 14px 28px #0007,inset 0 1px 0 #ffffff1f}.mode.last:hover{border-color:var(--yel)}}
.mode:active{transform:scale(.97)}
.dots{display:flex;gap:4px}
.dots u{width:16px;height:16px;border-radius:50%;text-decoration:none;background:radial-gradient(circle at 35% 30%,#ff8a8a,var(--red) 60%,#a31515);box-shadow:0 2px 4px #0008,inset 0 -2px 3px #0004}
.dots u:nth-child(even){background:radial-gradient(circle at 35% 30%,#fff59d,var(--yel) 60%,#c9a800)}

/* ---------- Boutons ---------- */
.cfg,.go{display:block;width:100%;min-height:46px;margin-bottom:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff1a,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff14;color:var(--txt);font:700 15px system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .1s}
.cfg:hover{background:linear-gradient(180deg,#ffffff2a,#ffffff12)}
.cfg:active{transform:scale(.98)}
.go{background:linear-gradient(180deg,#ff5d58,var(--red) 45%,#b71c1c);border:0;color:#fff;box-shadow:0 6px 18px #e5393555,inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0003;text-shadow:0 1px 2px #0005}
.go:hover{filter:brightness(1.1)}
.go[hidden]{display:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yel);outline-offset:2px}

/* ---------- Fenêtres ---------- */
.ov{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 30%,rgba(20,26,66,.82),rgba(4,6,18,.9));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10;animation:ovIn .18s ease-out}
.ov[hidden]{display:none}
.modal{position:relative;width:100%;max-width:440px;max-height:100%;overflow-y:auto;padding:26px 20px 24px;border-radius:22px;text-align:left;background:linear-gradient(160deg,#1c2250,#0b0e22);border:1px solid var(--line);box-shadow:0 24px 64px #000b,inset 0 1px 0 #ffffff14;font:14px/1.45 system-ui,sans-serif;color:var(--txt);animation:popIn .22s cubic-bezier(.2,.9,.3,1.2)}
.modal::before{content:'';position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--red),var(--yel))}
.modal h2{margin:0 0 10px;font-size:21px;color:var(--yel);text-align:center;text-shadow:0 2px 14px #fdd83540}
.modal h3{margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.3px;color:var(--yel)}
.modal p{margin:0 0 12px;color:var(--pale);text-align:center}
.x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--pale);font-size:18px;cursor:pointer;transition:background .15s,color .15s}
.x:hover{background:#ffffff14;color:#fff}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ov,.modal{animation:none}}
.btn{display:block;width:100%;min-height:46px;padding:12px 18px;border:0;border-radius:14px;font:700 16px system-ui,sans-serif;color:#fff;text-align:center;cursor:pointer;background:linear-gradient(180deg,#ff5d58,var(--red) 45%,#b71c1c);box-shadow:0 6px 18px #e5393555,inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0003;text-shadow:0 1px 2px #0005;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}
.btn.sec{background:linear-gradient(180deg,#ffffff1a,#ffffff0b);box-shadow:inset 0 1px 0 #ffffff14;border:1px solid #ffffff24;text-shadow:none}
.btn:disabled{background:#556;box-shadow:none;text-shadow:none;opacity:.6;cursor:not-allowed}
.btn[hidden]{display:none}

/* ---------- Formulaires ---------- */
.fld{display:block;margin:0 0 10px;text-align:left;font-size:13px;color:var(--pale)}
.fld .r{color:#ff6b66}.fld .y{color:var(--yel)}
.fld input{display:block;width:100%;min-height:46px;margin-top:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#0006,#ffffff10);box-shadow:inset 0 2px 5px #0006;color:var(--txt);font:600 16px system-ui,sans-serif;transition:border-color .15s,box-shadow .15s}
.fld input::placeholder{color:#6d78ad;font-weight:500}
.fld input:focus{border-color:var(--yel);box-shadow:inset 0 2px 5px #0006,0 0 0 3px #fdd83526}
#netCode{text-transform:uppercase;letter-spacing:6px;text-align:center;font-size:20px}
#netErr,#nmErr{min-height:18px;margin:10px 0 0;color:#ff8a80;font-size:13px;text-align:center}
#netErr[data-ok="1"]{color:var(--pale)}

/* ---------- Salon en ligne ---------- */
.code{display:flex;gap:10px;justify-content:center;align-items:center;margin:4px 0 10px}
.code b{padding:6px 16px;border-radius:12px;border:1px dashed #fdd83566;background:#0005;box-shadow:inset 0 2px 6px #0006;font:700 32px ui-monospace,monospace;letter-spacing:6px;color:var(--yel);text-shadow:0 0 16px #fdd83555;user-select:all;-webkit-user-select:all}
.code .btn{width:auto;min-height:40px;padding:8px 14px;font-size:14px}
.plist{display:grid;gap:8px;margin:8px 0}
.chip{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,#ffffff16,#ffffff0b);border:1px solid #ffffff1a;box-shadow:inset 0 1px 0 #ffffff10}
.chip em{font-style:normal;color:var(--pale);font-size:12px}
.chip.off{opacity:.5}.chip.empty{opacity:.6;border-style:dashed;justify-content:center}

/* ---------- Historique ---------- */
#hiTabs{margin-bottom:6px}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border-radius:14px;background:linear-gradient(180deg,#ffffff10,#ffffff08);border:1px solid #ffffff14;box-shadow:inset 0 1px 0 #ffffff0d;transition:background .15s,border-color .15s}
@media (hover:hover){.hrow:hover{background:linear-gradient(180deg,#ffffff18,#ffffff0d);border-color:#ffffff26}}
.hrow .ht{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hrow small{display:block;margin-top:2px;font-weight:400;color:var(--pale);font-size:12px}
.empty{padding:14px;border:1px dashed var(--line);border-radius:14px;background:#ffffff06;opacity:.85}
#hiBody{min-height:120px}

/* ---------- Score « X - X » ---------- */
.sc{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:linear-gradient(180deg,#ffffff1c,#ffffff08);border:1px solid #ffffff2a;box-shadow:inset 0 1px 0 #ffffff22,0 3px 10px #0005;color:#7f8bc4;font:800 16px/1.2 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc b{display:inline-block;min-width:.7em;text-align:center}
.sc .g{color:#5ee08a;text-shadow:0 0 10px #5ee08a55}
.sc .r{color:#ff7a74;text-shadow:0 0 10px #ff7a7455}
.sc .k{color:var(--txt)}

/* ---------- Barre de défilement ---------- */
html::-webkit-scrollbar,.modal::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:#0b0e22}
.modal::-webkit-scrollbar-track{margin:20px 0;border-radius:10px;background:#ffffff0a}
html::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:10px;background:linear-gradient(180deg,#5563c9,#2f3978) padding-box}
html::-webkit-scrollbar-thumb:hover,.modal::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7b88e6,#3f4c9e) padding-box}
@supports not selector(::-webkit-scrollbar){html,.modal{scrollbar-width:thin;scrollbar-color:#4a58b8 transparent}}

@media (max-width:420px){.seg button{font-size:12px;padding:6px 2px}}