/* Fléchettes : look sombre unique (tableau noir). Polices de l'appareil, aucune police chargée sur Internet. */
/* Layout: chalkboard scoreboard on top, dartboard in the middle, throw tray below. One committed dark look. */
:root{
  --slate:#13211c;
  --slate-2:#1b2e27;
  --slate-3:#26403a;
  --chalk:#ece8dc;
  --chalk-dim:#9db0a5;
  --line:rgba(236,232,220,.16);
  --red:#cf4535;
  --green:#2f8f5f;
  --cream:#ead9b4;
  --ink:#171714;
  --gold:#f0bf4a;
  --bot:#6fc3d4;
  --font-display:'Arial Narrow',Impact,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--slate);
  background-image:radial-gradient(120% 50% at 50% 0%,rgba(255,255,255,.05),transparent 70%);
  color:var(--chalk);
  font:500 15px/1.4 var(--font-body);
  padding-block:14px 24px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  min-height:100%;
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.app{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:14px;min-width:0}
.app>*{min-width:0}

/* ---------- menu ---------- */
h1{font:900 clamp(56px,17vw,76px)/.88 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin:6px 0 0}
.lead{color:var(--chalk-dim);margin:10px 0 0;max-width:34ch}
.group{display:flex;flex-direction:column;gap:8px}
.lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);font-weight:700}
.seg{display:flex;gap:8px}
.seg button{
  flex:1;min-width:0;padding:12px 6px;border:1.5px solid var(--line);background:transparent;border-radius:6px;font-weight:700;
}
.seg button.big{font:800 34px/1 var(--font-display);padding:12px 6px 10px;letter-spacing:.02em}
.seg button[aria-checked="true"]{background:var(--chalk);color:var(--slate);border-color:var(--chalk)}
.switch{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:12px 14px;border:1.5px solid var(--line);background:var(--slate-2);border-radius:6px;
}
.switch .trk{flex:none;width:46px;height:26px;border-radius:13px;background:var(--slate-3);position:relative;transition:background .15s}
.switch .trk::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--chalk);transition:transform .15s}
.switch[aria-checked="true"] .trk{background:var(--green)}
.switch[aria-checked="true"] .trk::after{transform:translateX(20px)}
.switch b{display:block;font-weight:700}
.switch small{display:block;color:var(--chalk-dim);font-size:13px;line-height:1.3;margin-top:2px}
.primary{
  width:100%;border:0;border-radius:6px;background:var(--gold);color:#1a1405;
  font:800 28px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;padding:16px 12px 14px;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.ghost{border:1.5px solid var(--line);background:transparent;border-radius:6px;padding:8px 12px;font-weight:700;font-size:14px}
details{border-top:1px solid var(--line);padding-top:12px;color:var(--chalk-dim)}
summary{cursor:pointer;font-weight:700;color:var(--chalk)}
details p{margin:10px 0 0}
details b{color:var(--chalk)}

/* ---------- game ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);font-weight:700;text-align:right}
.scores{display:grid;gap:10px}
.scores.two{grid-template-columns:1fr 1fr}
.card{
  background:var(--slate-2);border:1.5px solid var(--line);border-radius:6px;padding:10px 12px 9px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.card.on{border-color:var(--pc)}
.who{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--chalk-dim)}
.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--pc)}
.card.on .dot{background:var(--pc)}
.card.on .who{color:var(--chalk)}
.rem{font:800 60px/.95 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.meta{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;color:var(--chalk-dim);font-variant-numeric:tabular-nums}
.meta b{color:var(--chalk);font-weight:700}

.boardwrap{
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  width:100%;max-width:400px;margin:0 auto;
}
#board{display:block;width:100%;height:auto}
.surround{fill:var(--ink);stroke:var(--slate-3);stroke-width:2}
.dk{fill:var(--ink)}
.cr{fill:var(--cream)}
.rd{fill:var(--red)}
.gn{fill:var(--green)}
.wire{stroke:#cfcdc0;stroke-opacity:.55;stroke-width:.9;fill:none}
.num{font:700 19px var(--font-display);fill:var(--chalk);text-anchor:middle;dominant-baseline:central}
.barrel{stroke:#d5d4cc;stroke-width:2.4;stroke-linecap:round}
.flight{stroke:rgba(0,0,0,.45);stroke-width:.8}
.tip{fill:#fff;stroke:rgba(0,0,0,.5);stroke-width:.8}
.fly{animation:land .26s ease-out both}
@keyframes land{from{transform:translate(var(--dx,-16px),var(--dy,-34px)) scale(1.5);opacity:0}to{transform:none;opacity:1}}
.halo{stroke:rgba(0,0,0,.6);stroke-width:5;fill:none;stroke-linecap:round}
.aimring{stroke:var(--gold);stroke-width:2;fill:none}
.aimline{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round}
.aimdot{fill:var(--gold)}
.sway{stroke:var(--gold);stroke-width:1.3;stroke-dasharray:3 5;stroke-linecap:round;fill:rgba(240,191,74,.08);opacity:.85}
.zone{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6}
.zonetxt{font:600 12.5px var(--font-body);fill:var(--chalk-dim)}
.ghost{stroke:var(--gold);stroke-width:1.6;stroke-dasharray:2 4;fill:rgba(240,191,74,.14)}
.ghostline{stroke:var(--gold);stroke-width:1.3;stroke-dasharray:2 5;opacity:.7;stroke-linecap:round}

.status{margin:0;font-weight:700;font-size:17px;min-height:26px}
.status.bust{color:#ff8d7e}
.status.win{color:var(--gold)}
.tip-line{margin:-6px 0 0;color:var(--chalk-dim);font-size:13px}
.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{
  border:1.5px dashed var(--line);border-radius:6px;padding:7px 4px 6px;min-height:54px;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.slot b{font:800 25px/1 var(--font-display);font-variant-numeric:tabular-nums}
.slot i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-dim);min-height:13px}
.slot.filled{border-style:solid;border-color:var(--chalk-dim);background:var(--slate-2)}
.slot.zero b{color:var(--chalk-dim)}
.slot.sum{border-style:solid;border-color:var(--line)}
.slot.sum.bad b{color:#ff8d7e}
.hint{margin:0;color:var(--chalk-dim);font-size:14px;min-height:20px}
.hint b{color:var(--chalk);letter-spacing:.02em}

/* ---------- end of game ---------- */
.over{
  position:fixed;inset:0;z-index:10;background:rgba(9,15,12,.88);
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
}
.panel{
  width:100%;max-width:400px;background:var(--slate-2);border:1.5px solid var(--line);border-radius:6px;
  padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;
}
.panel h2{margin:0;font:900 clamp(48px,15vw,64px)/.9 var(--font-display);text-transform:uppercase}
.panel .sub{margin:0;color:var(--chalk-dim)}
.stats{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.stats th,.stats td{padding:7px 6px;text-align:right;border-top:1px solid var(--line)}
.stats th:first-child,.stats td:first-child{text-align:left}
.stats thead th{border-top:0;color:var(--chalk-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.stats td b{font-weight:700}
.record{margin:0;font-weight:700;color:var(--gold)}
.row{display:flex;gap:10px}
.row .primary{flex:1.4;font-size:24px;padding:14px 8px 12px}
.row .alt{flex:1;border:1.5px solid var(--line);background:transparent;border-radius:6px;font:800 24px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;padding:14px 8px 12px}
@media (prefers-reduced-motion:reduce){.fly{animation:none}.switch .trk,.switch .trk::after{transition:none}}
/* ---------- hub : retour, solde, carte d'accès, pied de page ---------- */
[hidden]{display:none!important}
.retour{max-width:440px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.retour a{color:var(--chalk-dim);text-decoration:none}
.retour a:hover{color:var(--chalk)}
.solde{font-variant-numeric:tabular-nums;font-weight:700}
.carte{max-width:440px;margin:0 auto 14px;background:var(--slate-2);border:1.5px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px}
.carte h2{margin:0;font:800 28px/1 var(--font-display);text-transform:uppercase}
.carte p{margin:0;color:var(--chalk-dim)}
.carte .primary{display:block;text-align:center;text-decoration:none}
.alerte{margin:0;color:#ff8d7e;font-weight:700}
.gainline{margin:0;font-weight:700;color:var(--gold)}
.legal{max-width:440px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:13px;color:var(--chalk-dim);border-top:1px solid var(--line);padding-top:14px}
.legal p{flex-basis:100%;text-align:center;margin:0}
.legal a{color:var(--chalk-dim)}
.primary:disabled{opacity:.5;cursor:default}

/* Sans la police condensée d'origine, le titre est plus large : on le réduit pour qu'il tienne sur 360 px. */
h1{font-size:clamp(34px,11vw,56px);overflow-wrap:anywhere}
.panel h2{font-size:clamp(40px,13vw,56px)}