/* Feuille de style de la page /utils/challenge (extraite de la page). */
  *{box-sizing:border-box}
  :root{
    --bg:#0a0a0a;
    --panel:#111111;
    --panel2:#161616;
    --border:#2a2520;
    --border2:#3a332b;
    --cream:#e8dcc4;
    --cream-dim:#a89a7e;
    --muted:#6b6355;
    --red:#b91c1c;
    --red-bright:#dc2626;
    --gold:#c9a227;
    --gold-dim:#8a7020;
  }
  html,body{height:100%}
  body{
    margin:0;
    font-family:'Courier New',Courier,monospace;
    color:var(--cream);
    background:
      radial-gradient(ellipse at 50% 0%, #151210 0%, #070605 70%, #030303 100%);
    background-attachment:fixed;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.055;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay;
  }
  .vignette{
    position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.6) 100%);
  }
  .app{
    position:relative;z-index:2;
    max-width:1040px;margin:0 auto;
    padding:34px 20px 80px;
    display:flex;flex-direction:column;gap:18px;
  }

  /* ---------- Masthead ---------- */
  .hero{
    text-align:center;
    padding:8px 0 22px;
    border-bottom:3px double var(--cream-dim);
    margin-bottom:8px;
  }
  .hero h1{
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(1.35rem,3.1vw,2.2rem);
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin:6px 0 4px;
    color:var(--cream);
    text-shadow:2px 2px 0 rgba(0,0,0,.9);
    line-height:1.35;
  }
  .hero h1 .accent{color:var(--gold)}

  /* ---------- Challenges demandés / proposés (membres connectés) ---------- */
  .panel[hidden]{display:none}
  .cam-defis .defi{border-top:1px solid var(--border);padding:14px 0}
  .cam-defis .defi:first-of-type{border-top:0;padding-top:0}
  .cam-defis .defi.cible{outline:1px solid var(--gold);outline-offset:6px}
  .cam-defis .defiTete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;align-items:baseline}
  .cam-defis .defiTete strong{font-family:Georgia,serif;font-size:1.05rem;color:var(--cream)}
  .cam-defis .defiTete span{font-size:.72rem;color:var(--muted);letter-spacing:.06em}
  .cam-defis .defiMsg{white-space:pre-wrap;margin:10px 0;padding:10px 14px;border-left:3px solid var(--red);background:rgba(255,255,255,.03);color:var(--cream);font-family:Georgia,serif;font-size:.92rem}
  .cam-defis .defiListe{margin:8px 0 12px 1.2rem;padding:0;font-size:.82rem;color:var(--cream-dim)}
  .cam-defis .defiListe li{margin:3px 0}
  .cam-defis .defiListe b{color:var(--cream)}
  .cam-defis .defiListe .x{margin-left:8px;border:0;background:none;color:var(--red-bright);cursor:pointer;font:inherit}
  .cam-defis .defiBilan{color:var(--gold);font-weight:700}
  .cam-defis .defiRes h3{font-family:Georgia,serif;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin:16px 0 8px;color:var(--cream-dim)}
  .cam-defis .defiAutres{font-size:.8rem;color:var(--cream-dim);margin-top:10px}
  .cam-defis .defiAutres button{margin-left:6px}
  .cam-defis .defiInfo{font-size:.8rem;color:var(--muted)}
  .cam-defis .defiMsgEtat{font-size:.78rem;margin-top:8px;min-height:1em}
  .cam-defis .defiMsgEtat.err{color:var(--red-bright)}
  .cam-defis .defiMsgEtat.ok{color:var(--gold)}
  .cam-defis .field input[type=text], .cam-defis .field select, .cam-defis .field textarea{
    width:100%;padding:9px 12px;border:1px solid var(--border2);background:#050505;color:var(--cream);
    font-family:'Courier New',monospace;font-size:.85rem;outline:none
  }
  .cam-defis .field textarea{min-height:70px;resize:vertical;font-family:Georgia,serif}
  .cam-defis .field{flex:1;min-width:200px}
  .cam-defis .btn.petit{padding:7px 12px;font-size:.66rem}
  .cam-defis a{color:var(--gold)}

  /* ---------- Panels ---------- */
  .panel{
    background:linear-gradient(180deg, rgba(20,20,20,.9), rgba(15,15,15,.9));
    border:1px solid var(--border);
    padding:20px 20px 18px;
    position:relative;
  }
  .panel::before{
    content:'';position:absolute;top:0;left:0;width:3px;height:100%;
    background:var(--red);opacity:.7;
  }
  .panelHead{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:10px;flex-wrap:wrap;margin-bottom:16px;
    padding-bottom:10px;border-bottom:1px solid var(--border);
  }
  .panelHead h2{
    font-family:Georgia,serif;
    font-size:.95rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;margin:0;color:var(--cream);
  }
  .panelHead .hint{
    font-size:.7rem;letter-spacing:.1em;color:var(--muted);
    text-transform:uppercase;
  }

  /* ---------- Controls ---------- */
  .ctrl-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
  .ctrl-row + .ctrl-row{margin-top:14px}

  .field{display:flex;flex-direction:column;gap:6px}
  .field label{
    font-size:.65rem;letter-spacing:.18em;color:var(--cream-dim);
    text-transform:uppercase;font-weight:700;
  }
  .field input[type=number]{
    width:90px;padding:9px 12px;
    border:1px solid var(--border2);
    background:#050505;color:var(--cream);
    font-family:'Courier New',monospace;
    font-size:1rem;font-weight:700;
    outline:none;transition:.15s;
  }
  .field input[type=number]:focus{border-color:var(--cream-dim)}

  .presets{display:flex;gap:4px;flex-wrap:wrap}
  .preset{
    padding:6px 11px;border:1px solid var(--border2);
    background:transparent;color:var(--cream-dim);
    font-family:'Courier New',monospace;
    font-size:.72rem;font-weight:700;cursor:pointer;
    transition:.15s;letter-spacing:.08em;
  }
  .preset:hover{color:var(--cream);border-color:var(--cream-dim)}
  .preset.active{
    background:var(--cream);color:var(--bg);border-color:var(--cream);
  }

  /* Toggles */
  .toggles{display:flex;gap:10px;flex-wrap:wrap}
  .toggle{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 14px;border:1px solid var(--border2);
    background:transparent;cursor:pointer;user-select:none;
    font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
    font-weight:700;color:var(--cream-dim);
    transition:.15s;font-family:'Courier New',monospace;
  }
  .toggle:hover{border-color:var(--cream-dim);color:var(--cream)}
  .toggle input{
    appearance:none;-webkit-appearance:none;
    width:14px;height:14px;border:1px solid var(--cream-dim);
    background:transparent;margin:0;cursor:pointer;
    position:relative;flex:none;border-radius:2px;
  }
  .toggle input:checked{background:var(--red);border-color:var(--red)}
  .toggle input:checked::after{
    content:'✓';position:absolute;inset:0;
    display:grid;place-items:center;
    font-size:.65rem;color:var(--cream);font-weight:900;
  }
  .toggle:has(input:checked){color:var(--cream);border-color:var(--cream-dim)}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;gap:10px;justify-content:center;
    padding:11px 20px;
    border:1px solid var(--cream-dim);
    background:transparent;color:var(--cream);
    font-family:'Courier New',monospace;
    font-size:.75rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    cursor:pointer;transition:.15s;
  }
  .btn:hover:not(:disabled){background:var(--cream);color:var(--bg);border-color:var(--cream)}
  .btn:active:not(:disabled){transform:translateY(1px)}
  .btn:disabled{opacity:.3;cursor:not-allowed}
  .btn.primary{
    background:var(--red);border-color:var(--red);color:var(--cream);
  }
  .btn.primary:hover:not(:disabled){background:var(--red-bright);border-color:var(--red-bright);color:var(--cream)}
  .btn kbd{
    background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);
    padding:1px 6px;font-size:.6rem;font-family:inherit;
    letter-spacing:.05em;font-weight:700;
  }

  /* ---------- Stats ---------- */
  .statsGrid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    gap:1px;background:var(--border);
    border:1px solid var(--border);
  }
  .statBox{
    background:var(--panel);
    padding:14px 10px;text-align:center;
    display:flex;flex-direction:column;gap:4px;
  }
  .statBox .k{
    font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);font-weight:700;
  }
  .statBox .v{
    font-family:Georgia,serif;
    font-size:1.6rem;font-weight:900;line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .statBox.win .v{color:var(--gold)}
  .statBox.tie .v{color:var(--cream-dim)}
  .statBox.lose .v{color:var(--red-bright)}
  .bar{
    display:flex;height:6px;margin-top:14px;
    background:var(--border);overflow:hidden;
  }
  .bar i{display:block;height:100%;transition:flex-basis .5s ease}
  .bar .w{background:var(--gold)}
  .bar .t{background:var(--muted)}
  .bar .l{background:var(--red)}

  /* ---------- Results ---------- */
  .results{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;min-height:100px;
  }
  .emptyState{
    grid-column:1/-1;text-align:center;
    padding:36px 12px;color:var(--muted);
    border:1px dashed var(--border);
  }
  .emptyState p{margin:0 0 4px;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}
  .emptyState span{font-size:.7rem;letter-spacing:.08em}

  .card{
    position:relative;
    display:grid;grid-template-columns:1fr auto 1fr;
    grid-template-areas:"p vs c" "badge badge badge";
    align-items:center;row-gap:10px;
    padding:16px 12px 12px;
    background:var(--panel2);
    border:1px solid var(--border);
    animation:cardIn .35s ease-out backwards;
  }
  .card.win{border-left:3px solid var(--gold)}
  .card.lose{border-left:3px solid var(--red)}
  .card.tie{border-left:3px solid var(--muted)}
  @keyframes cardIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
  }
  .card .p{grid-area:p}
  .card .c{grid-area:c}
  .card .vs{
    grid-area:vs;font-size:.6rem;font-weight:700;
    letter-spacing:.3em;color:var(--muted);
  }
  .card .badge{
    grid-area:badge;justify-self:center;
    font-size:.62rem;font-weight:700;letter-spacing:.25em;
    text-transform:uppercase;padding:3px 12px;
    border:1px solid currentColor;
  }
  .badge.win{color:var(--gold)}
  .badge.lose{color:var(--red-bright)}
  .badge.tie{color:var(--muted)}
  .badge.pending{color:var(--muted);border-style:dashed}

  .side{display:flex;flex-direction:column;align-items:center;gap:6px}
  .slot{
    width:46px;height:46px;display:grid;place-items:center;
    color:var(--cream);
    filter:drop-shadow(0 0 6px rgba(232,220,196,.15));
  }
  .slot svg{width:100%;height:100%;display:block}
  .mname{
    font-size:.68rem;color:var(--cream-dim);
    letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  }
  .card.win .p .slot{color:var(--gold);filter:drop-shadow(0 0 10px rgba(201,162,39,.4))}
  .card.lose .c .slot{color:var(--gold);filter:drop-shadow(0 0 10px rgba(201,162,39,.4))}
  .card.win .p .mname, .card.lose .c .mname{color:var(--gold)}
  .cardIdx{
    position:absolute;top:6px;right:8px;
    font-size:.55rem;color:var(--muted);
    letter-spacing:.15em;font-weight:700;
  }
  .card.rolling .slot{opacity:.5}

  /* ---------- Custom list ---------- */
  .tagArea{
    min-height:52px;
    padding:10px;
    border:1px solid var(--border2);
    background:#050505;
    display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  }
  .tagEmpty{
    color:var(--muted);font-size:.72rem;
    letter-spacing:.15em;text-transform:uppercase;
    font-style:italic;padding:4px 6px;
  }
  .tag{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 4px 6px 12px;
    background:rgba(232,220,196,.06);
    border:1px dashed var(--border2);
    color:var(--cream);
    font-size:.78rem;letter-spacing:.08em;
    font-weight:700;text-transform:uppercase;
  }
  .tag .tagName{font-family:'Courier New',monospace}
  .tag .tagX{
    background:none;border:none;cursor:pointer;
    color:var(--cream-dim);padding:0 6px;
    font-family:inherit;font-size:1rem;line-height:1;
    transition:.15s;
  }
  .tag .tagX:hover{color:var(--red-bright)}

  .addBtns{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-top:12px;padding-top:12px;
    border-top:1px solid var(--border);
  }
  .addBtn{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 13px;
    background:transparent;color:var(--cream-dim);
    border:1px solid var(--border2);
    font-family:'Courier New',monospace;
    font-size:.72rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;cursor:pointer;
    transition:.15s;
  }
  .addBtn:hover:not(:disabled){
    color:var(--cream);border-color:var(--cream-dim);
    background:rgba(232,220,196,.04);
  }
  .addBtn:disabled{opacity:.3;cursor:not-allowed}

  .customActions{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    margin-top:16px;padding-top:16px;
    border-top:1px solid var(--border);
  }

  .drawBox{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    margin-top:18px;padding:16px;
    border:1px dashed var(--border2);
    min-height:0;
  }
  .drawBox:empty{display:none}
  .drawBox .drawSlot{width:64px;height:64px;color:var(--cream)}
  .drawBox .drawSlot svg{width:100%;height:100%;display:block}
  .drawBox .drawSlot.final{
    color:var(--gold);
    filter:drop-shadow(0 0 12px rgba(201,162,39,.5));
  }
  .drawBox .drawName{
    font-family:Georgia,serif;
    font-size:1.05rem;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;
  }
  .drawBox .drawLabel{
    font-size:.65rem;letter-spacing:.25em;
    color:var(--muted);text-transform:uppercase;
  }

  /* ---------- Rules ---------- */
  .rulesRow{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    font-size:.78rem;letter-spacing:.05em;
  }
  .ruleMove{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;
    border:1px solid var(--border2);
    color:var(--cream);font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;
    font-size:.7rem;
  }
  .ruleMove.beats{border-color:var(--cream-dim);color:var(--gold)}
  .ruleArrow{color:var(--red);font-weight:900}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed;left:50%;bottom:26px;
    transform:translate(-50%,200%);
    background:var(--cream);color:var(--bg);
    border:2px solid var(--bg);
    padding:12px 24px;
    font-family:'Courier New',monospace;
    font-size:.72rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
    transition:transform .35s cubic-bezier(.2,1,.3,1),opacity .35s;
    opacity:0;z-index:9999;pointer-events:none;
    max-width:90vw;text-align:center;
  }
  .toast.show{transform:translate(-50%,0);opacity:1}
  .toast.warn{background:var(--red);color:var(--cream)}
  .toast.ok{background:var(--gold);color:var(--bg)}

  @media (max-width:560px){
    .results{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
    .slot{width:38px;height:38px}
    .btn{padding:10px 14px;font-size:.68rem;letter-spacing:.12em}
  }