/* Fléchettes : feuille de style (thèmes clair/sombre, responsive, grands écrans) */
/* Couleurs du thème clair (variables). Le thème sombre suit juste dessous. */
:root{--bg:#e6ede8;--card:#fff;--ink:#14201a;--mut:#5c6b63;--line:#c9d5cd;--acc:#1f6b4a;--onacc:#fff;--red:#c4302b;--gold:#9a7416;--act:#fff6dc;--key:#f2f6f3;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1512;--card:#18211c;--ink:#ecf1ed;--mut:#8fa196;--line:#2b3830;--acc:#3fb37f;--onacc:#06130d;--red:#ef5a52;--gold:#d9b04a;--act:#2a2713;--key:#202c25}}
:root[data-theme="dark"]{--bg:#0f1512;--card:#18211c;--ink:#ecf1ed;--mut:#8fa196;--line:#2b3830;--acc:#3fb37f;--onacc:#06130d;--red:#ef5a52;--gold:#d9b04a;--act:#2a2713;--key:#202c25}
/* Base : mise en page, texte, titres, cartes, boutons. */
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.4 Barlow,system-ui,sans-serif;min-height:100%}
.w{max-width:560px;margin:0 auto;padding:14px}
h1{font:700 34px 'Barlow Condensed',sans-serif;margin:6px 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
label.t{display:block;font-weight:600;margin-bottom:6px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
button{font:inherit;color:inherit;cursor:pointer}
.seg button,.key{background:var(--key);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-weight:600}
.seg button.on,.key.on{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
input[type=text]{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--key);color:var(--ink);font:inherit}
.row{display:flex;gap:8px;margin-bottom:8px}
.pri{width:100%;background:var(--acc);color:var(--onacc);border:0;border-radius:10px;padding:14px;font:700 20px 'Barlow Condensed',sans-serif}
.ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
/* Cartes des joueurs (une colonne par joueur, couleur par joueur via --pc). */
.pl{display:grid;gap:8px;margin-bottom:10px}
.p{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 14px}
.p.cur{border-color:var(--acc);background:var(--act)}
.p b{font-size:18px}.p small{color:var(--mut);display:block}
.big{font:700 56px/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
/* Fléchettes de la volée et clavier de saisie. */
.turn{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.slot{flex:1;text-align:center;padding:10px 0;border:1px dashed var(--line);border-radius:8px;font:700 24px 'Barlow Condensed',sans-serif;min-height:48px}
.slot.f{border-style:solid;background:var(--card)}
.hint{color:var(--gold);font-weight:600;min-height:22px;margin-bottom:6px}
.bust{color:var(--red);font:700 26px 'Barlow Condensed',sans-serif}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}
.pad .key{padding:12px 0;font:700 22px 'Barlow Condensed',sans-serif}
/* Fenêtres superposées (victoire, dialogues). */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.ov .card{max-width:380px;width:100%;text-align:center}
.ov h2{font:700 36px 'Barlow Condensed',sans-serif;margin:0 0 6px}
/* Confort tactile : pas de zoom ni de rebond, pas de sélection de texte. */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,.p,svg{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.w{max-width:720px;min-height:100dvh}
.seg button,.key{min-height:48px}
.ghost{min-height:44px;padding:8px 14px}
.pri{min-height:58px}
input[type=text]{font-size:18px;min-height:48px}
.pad{gap:8px}
.pad .key{min-height:56px;font-size:26px}
@media(orientation:portrait) and (min-height:700px){.pad .key{height:7.2dvh}.big{font-size:64px}.slot{min-height:56px}}
@media(min-width:700px){.big{font-size:76px}.p b{font-size:22px}}
.np .key{font:700 28px 'Barlow Condensed',sans-serif;min-height:60px}
.pl{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.p{display:block;text-align:center;padding:0;overflow:hidden;border-color:var(--pc)}
.p .nm{background:var(--pc);color:#fff;font:700 20px 'Barlow Condensed',sans-serif;padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p .big{text-align:center;padding:6px 0 2px}
.p small{padding:0 6px 8px;font-size:12px}
.p.cur{box-shadow:0 0 0 3px var(--pc)}
.p .nm{font-size:clamp(22px,6.5vw,30px)}
select{font:inherit;font-size:18px;min-height:48px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--key);color:var(--ink)}
.card>.big{line-height:1.2!important}
/* Fond décoratif (cible). */
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.17;color:var(--ink)}
#bg svg{position:absolute!important;width:110vmax!important;max-width:none!important;height:auto;margin:0!important;right:-45vmax;bottom:-35vmax}
/* Paysage : écran de partie sur deux colonnes (joueurs à gauche, clavier à droite). */
@media(orientation:landscape) and (min-width:700px){
  .w:has(.pl){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:2vw;align-content:start;padding:1.2vw}
  .w:has(.pl)>.top{grid-column:1/-1}
  .w:has(.pl)>.pl{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr);align-content:start}
  .w:has(.pl)>.card{grid-column:2;grid-row:2}
  .w:has(.pl) .p .big{font-size:clamp(56px,15dvh,180px)}
  .w:has(.pl) .p .nm{font-size:clamp(24px,6dvh,64px)}
  .w:has(.pl) .np .key{min-height:clamp(44px,8dvh,100px);font-size:clamp(24px,5dvh,56px)}
  .w:has(.pl) .pad .key{height:clamp(44px,8dvh,90px);font-size:clamp(22px,4.5dvh,48px)}
  .w:has(.pl) .card>.big{min-height:clamp(56px,9dvh,110px)!important;font-size:clamp(44px,9dvh,100px)}
}
/* Accueil compact : tient sur l'écran sans défiler. */
.w:not(:has(.pl)) label.t{font-size:clamp(17px,2.6vw,32px)}
.w:not(:has(.pl)) .seg button{flex:1 1 auto}
.w:not(:has(.pl))>.pri{position:sticky;bottom:1.5vw;z-index:5}
.w:not(:has(.pl)){padding:1.5dvh 2.5vw}
.w:not(:has(.pl)) h1{font-size:clamp(24px,4.6dvh,52px);margin:0}
.w:not(:has(.pl))>.top{margin-bottom:1dvh}
.w:not(:has(.pl)) .card{padding:1dvh 2vw;margin-bottom:1dvh;border-radius:12px}
.w:not(:has(.pl)) .card:has(>.seg){display:flex;flex-wrap:wrap;align-items:center;gap:.6dvh 2vw}
.w:not(:has(.pl)) .card>label.t{margin:0!important;font-size:clamp(14px,2.2dvh,26px);min-width:26%}
.w:not(:has(.pl)) .card>.seg{flex:1 1 55%;gap:1vw}
.w:not(:has(.pl)) .seg button{min-height:clamp(34px,5.2dvh,64px);padding:0 2vw;font-size:clamp(14px,2.2dvh,28px)}
.w:not(:has(.pl)) .row{margin-bottom:.8dvh}
.w:not(:has(.pl)) select,.w:not(:has(.pl)) input[type=text]{min-height:clamp(36px,5dvh,60px);font-size:clamp(14px,2.3dvh,26px);padding:4px 8px}
.w:not(:has(.pl)) .ghost{min-height:clamp(32px,4.4dvh,56px);font-size:clamp(13px,2dvh,24px);padding:0 2vw}
.w:not(:has(.pl))>.pri{min-height:clamp(44px,6.5dvh,80px);font-size:clamp(20px,3.4dvh,44px)}
.w:not(:has(.pl))>p{margin:.8dvh 0}
@media(orientation:landscape) and (min-width:700px){
  .w:not(:has(.pl)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2vw;align-content:start;align-items:start}
  .w:not(:has(.pl))>.top,.w:not(:has(.pl))>.pri,.w:not(:has(.pl))>p{grid-column:1/-1}
}
/* Grands écrans : textes, scores et touches agrandis. */
@media(min-width:800px){
  body{font-size:clamp(18px,2.4vw,32px)}
  .w{max-width:none;padding:2.2vw}
  h1{font-size:clamp(40px,6vw,80px)}
  .card{padding:2.2vw;border-radius:18px}
  .top b{font-size:clamp(20px,2.6vw,36px)}
  .ghost{font-size:clamp(16px,2.2vw,30px);min-height:clamp(44px,5vw,72px);padding:0 2vw}
  .seg button,.key{font-size:clamp(18px,2.6vw,36px);min-height:clamp(56px,6vw,96px)}
  .pri{font-size:clamp(24px,4vw,52px);min-height:clamp(64px,8vw,120px)}
  .p .nm{font-size:clamp(30px,6.5vw,84px);padding:1vw}
  .p .big{font-size:clamp(90px,18vw,240px)}
  .p small{font-size:clamp(13px,2vw,28px)}
  .np .key{font-size:clamp(30px,5.5vw,72px);min-height:clamp(70px,8.5dvh,140px)}
  .pad .key{font-size:clamp(28px,5vw,64px);height:clamp(64px,7.5dvh,120px)}
  .slot{font-size:clamp(28px,5vw,64px);min-height:clamp(64px,7dvh,110px)}
  .hint,.bust{font-size:clamp(20px,3vw,40px)}
  input[type=text]{font-size:clamp(20px,2.8vw,36px);min-height:clamp(56px,6vw,90px)}
  .card>.big{font-size:clamp(56px,10vw,140px);min-height:clamp(72px,9dvh,140px)!important}
  .ov .card{max-width:min(80vw,900px)}
  .ov h2{font-size:clamp(40px,6vw,80px)}
  select{font-size:clamp(20px,2.8vw,36px);min-height:clamp(56px,6vw,90px)}
}
input[type=email],input[type=password]{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--key);color:var(--ink);font-size:18px;min-height:48px;margin-bottom:8px}
.msg{padding:8px 0;font-weight:600;color:var(--gold)}
.w:has(.authw){display:block!important}
/* Écran de connexion centré. */
.authw{width:100%;max-width:clamp(340px,42vw,640px);margin:0 auto;min-height:calc(100dvh - 4vw);display:flex;flex-direction:column;justify-content:center;text-align:center}
.authw h1{text-align:center;margin-bottom:14px}
.authw .card{text-align:left;margin-bottom:0}
.authw .pri{min-height:clamp(48px,6dvh,72px)!important;font-size:clamp(20px,3dvh,32px)!important}
.authw p{margin:10px 0 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* Mode score direct : on masque la saisie fléchette par fléchette. */
.card.direct .turn,.card.direct .seg,.card.direct .pad,.card.direct [data-a=next]{display:none}