:root{
    --board:#14213d;
    --board-2:#0e1830;
    --board-3:#0a1224;
    --flap:#efe6d0;
    --flap-edge:#cbb98f;
    --ink:#211b10;
    --accent:#e2a63b;
    --accent-dim:#7a5a24;
    --ok:#4fae8a;
    --bad:#d9603f;
    --text:#f5efe1;
    --text-dim:#a9b0c4;
    --rule: rgba(245,239,225,0.14);
    /* ---- relief 2,5D (biseau des boutons) ---- */
    --bevel-hi: rgba(255,255,255,0.55);
    --bevel-hi-soft: rgba(255,255,255,0.07);
    --bevel-shadow: rgba(4,2,0,0.4);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--board);
    color:var(--text);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    padding-left:max(16px, env(safe-area-inset-left,0px));
    padding-right:max(16px, env(safe-area-inset-right,0px));
    display:flex;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  button, input, a{ touch-action:manipulation; }
  .app{
    width:100%;
    max-width:840px;
    min-height:100%;
    display:flex;
    flex-direction:column;
    padding-block:1.25rem 2rem;
    gap:1.1rem;
  }
  h1,h2,h3{
    font-family:"Big Shoulders Display", ui-sans-serif, sans-serif;
    text-wrap:balance;
    margin:0;
    letter-spacing:0.01em;
  }
  .marquee{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:0.75rem;
    padding-bottom:0.9rem;
    border-bottom:2px solid var(--rule);
    flex-wrap:wrap;
  }
  .marquee h1{
    font-size:clamp(1.9rem, 5.6vw, 2.7rem);
    font-weight:800;
    color:var(--flap);
  }
  .marquee h1 span{color:var(--accent);}
  .version-badge{
    display:inline-block;
    vertical-align:super;
    margin-left:0.5rem;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.62rem;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--text-dim);
    background:rgba(0,0,0,0.25);
    border:1px solid var(--rule);
    border-radius:99px;
    padding:0.18rem 0.55rem;
  }
  .version-badge:empty{display:none;}
  .marquee .sub{
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-dim);
  }
  .rank-badge{
    margin-top:0.4rem;
    font-size:0.8rem;
    color:var(--accent);
    font-weight:600;
  }
  .rank-badge .rank-pts{
    font-weight:400;
    color:var(--text-dim);
  }
  .rank-badge:empty{display:none;}

  /* ---- flap tile component, reused for letters, digits, timers, scores ---- */
  .flap-row{display:flex;flex-wrap:wrap;gap:6px;}
  .flap{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:2.5rem;
    height:3.1rem;
    padding:0 0.2rem;
    background:linear-gradient(180deg, var(--flap) 0%, #e6dabc 100%);
    color:var(--ink);
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-weight:700;
    font-size:1.35rem;
    font-variant-numeric:tabular-nums;
    border-radius:5px;
    box-shadow:0 2px 0 var(--flap-edge), inset 0 0 0 1px rgba(0,0,0,0.06);
    overflow:hidden;
  }
  .flap::after{
    content:"";
    position:absolute;
    left:0;right:0;top:50%;
    height:1px;
    background:rgba(0,0,0,0.22);
  }
  .flap.small{min-width:1.9rem;height:2.3rem;font-size:1rem;}
  .flap.xl{min-width:3.1rem;height:3.8rem;font-size:1.7rem;}
  .flap.wide{min-width:4.4rem;font-size:1.05rem;padding:0 0.35rem;}
  .flap.dim{opacity:0.32;}
  .flap.accent{background:linear-gradient(180deg,#f6dfa0,var(--accent));}
  .flap.ok{background:linear-gradient(180deg,#bfe8d7,var(--ok));}
  .flap.bad{background:linear-gradient(180deg,#f0bda8,var(--bad));}
  .flap-btn{cursor:pointer;border:none;font:inherit;transition:transform 0.08s ease;}
  .flap-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
  .flap-btn.used{opacity:0.28;pointer-events:none;}
  .flap-btn.selected{box-shadow:0 0 0 3px var(--accent), 0 2px 0 var(--flap-edge);}
  .flap-btn:hover:not(.used):not(.selected){transform:translateY(-2px);}
  .flap-btn:active:not(.used){transform:translateY(1px);}
  @keyframes flip{
    0%{transform:rotateX(0deg);}
    45%{transform:rotateX(-92deg);}
    55%{transform:rotateX(-92deg);}
    100%{transform:rotateX(0deg);}
  }
  .flip-anim{animation:flip 0.42s ease;}
  @keyframes shake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(3px);}
    30%,50%,70%{transform:translateX(-5px);}
    40%,60%{transform:translateX(5px);}
  }
  .shake{animation:shake 0.4s;}
  @media (prefers-reduced-motion: reduce){
    .flip-anim{animation:none;}
    .shake{animation:none;}
  }
  #confetti-canvas{
    position:fixed;inset:0;width:100vw;height:100vh;
    pointer-events:none;z-index:999;
  }

  /* ---- scores screen ---- */
  .scores-defi{
    display:flex;justify-content:space-between;align-items:baseline;gap:0.6rem;
    padding:0.6rem 0.2rem;border-bottom:1px dashed var(--rule);margin-bottom:0.3rem;
  }
  .scores-defi b{color:var(--accent);font-variant-numeric:tabular-nums;}
  .scores-streak{font-size:0.78rem;color:var(--accent);padding:0 0.2rem 0.55rem;border-bottom:1px dashed var(--rule);margin-bottom:0.3rem;}
  .score-row{
    display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:0.6rem;
    padding:0.55rem 0.15rem;border-bottom:1px solid var(--rule);
  }
  .score-row:last-child{border-bottom:none;}
  .score-row .row-gate{color:var(--text-dim);font-family:"IBM Plex Mono", monospace;}
  .score-row .row-name{font-family:"Big Shoulders Display", sans-serif;font-size:1.05rem;letter-spacing:0.02em;}
  .row-tally{display:block;font-family:"IBM Plex Mono", monospace;font-size:0.7rem;font-weight:400;letter-spacing:0;color:var(--text-dim);margin-top:0.1rem;}
  .score-value{font-family:"IBM Plex Mono", monospace;font-variant-numeric:tabular-nums;color:var(--accent);font-size:1.05rem;}
  .stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:0.8rem;padding:0.55rem 0.15rem;border-bottom:1px solid var(--rule);}
  .stat-row:last-child{border-bottom:none;}
  .stat-label{font-family:"Big Shoulders Display", sans-serif;font-size:1.02rem;letter-spacing:0.02em;}
  .stat-value{font-family:"IBM Plex Mono", monospace;color:var(--accent);font-size:0.9rem;text-align:right;}
  .dist-row{display:grid;grid-template-columns:4.4rem 1fr 2.2rem;align-items:center;gap:0.5rem;padding:0.25rem 0.15rem;font-family:"IBM Plex Mono", monospace;font-size:0.78rem;color:var(--text-dim);}
  .dist-bar-track{background:var(--board-3);border-radius:2px;height:10px;overflow:hidden;}
  .dist-bar-fill{display:block;height:100%;background:var(--accent);border-radius:2px;}
  .dist-bar-fill.fail{background:var(--bad);}
  .dist-count{text-align:right;color:var(--flap);}
  .heatmap-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7, 12px);gap:3px;overflow-x:auto;padding-bottom:0.2rem;}
  .heat-cell{width:12px;height:12px;border-radius:3px;background:var(--board-3);}
  .heat-cell.heat-zero{background:var(--board-3);}
  .heat-cell.heat-low{background:var(--accent-dim);}
  .heat-cell.heat-mid{background:#b98a30;}
  .heat-cell.heat-high{background:var(--accent);}
  .badge-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));gap:0.7rem;}
  .badge{border:1px solid var(--rule);border-radius:8px;padding:0.65rem 0.7rem;text-align:center;}
  .badge.locked{opacity:0.4;}
  .badge-icon{font-size:1.5rem;line-height:1;margin-bottom:0.3rem;}
  .badge-name{font-family:"Big Shoulders Display", sans-serif;font-size:0.92rem;letter-spacing:0.02em;color:var(--flap);}
  .badge-desc{font-size:0.68rem;color:var(--text-dim);margin-top:0.2rem;line-height:1.3;}
  .ach-toast{
    position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(0);
    display:flex;align-items:center;gap:0.7rem;
    background:var(--board);border:1px solid var(--accent);border-radius:10px;
    padding:0.6rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,0.35);
    z-index:50;max-width:min(90vw, 22rem);
    animation:achIn 0.35s ease-out;
  }
  .ach-toast[hidden]{display:none;}
  .ach-toast-icon{font-size:1.7rem;line-height:1;}
  .ach-toast-text{display:flex;flex-direction:column;gap:0.1rem;}
  .ach-toast-label{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);}
  .ach-toast-name{font-family:"Big Shoulders Display", sans-serif;font-size:1.05rem;color:var(--flap);}
  @keyframes achIn{ from{ transform:translateX(-50%) translateY(0.6rem); opacity:0; } to{ transform:translateX(-50%) translateY(0); opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .ach-toast{animation:none;} }
  .archive-row{
    display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:0.6rem;
    padding:0.6rem 0.3rem;border-bottom:1px solid var(--rule);width:100%;
    background:none;border-left:none;border-right:none;border-top:none;
    font:inherit;color:inherit;text-align:left;cursor:pointer;
  }
  .archive-row:last-child{border-bottom:none;}
  .archive-row:hover{background:rgba(226,166,59,0.08);}
  .archive-row .arc-date{font-family:"Big Shoulders Display", sans-serif;font-size:1rem;}
  .archive-row .arc-type{font-size:0.75rem;color:var(--text-dim);}
  .score-value.empty{color:var(--text-dim);font-size:0.8rem;}

  /* ---- hub ---- */
  .board{
    background:var(--board-2);
    border:1px solid var(--rule);
    border-radius:10px;
    padding:1rem 1.1rem;
  }
  .board-head{
    display:grid;
    grid-template-columns:2.4rem 1fr auto auto;
    gap:0.6rem;
    padding:0 0.15rem 0.55rem;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-dim);
    border-bottom:1px solid var(--rule);
  }
  .rows{display:flex;flex-direction:column;}
  .row{
    display:grid;
    grid-template-columns:2.4rem 1fr auto auto;
    align-items:center;
    gap:0.6rem;
    padding:0.85rem 0.15rem;
    border-bottom:1px solid var(--rule);
    background:none;
    border-left:none;border-right:none;border-top:none;
    color:inherit;
    text-align:left;
    cursor:pointer;
    width:100%;
    font:inherit;
  }
  .row:last-child{border-bottom:none;}
  .row:hover .row-name, .row:focus-visible .row-name{color:var(--accent);}
  .row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .row-gate{
    font-family:"IBM Plex Mono", monospace;
    color:var(--text-dim);
    font-size:0.9rem;
  }
  .row-main{min-width:0;}
  .row-name{
    font-family:"Big Shoulders Display", sans-serif;
    font-weight:700;
    font-size:1.3rem;
    color:var(--flap);
    transition:color 0.15s;
  }
  .row-desc{font-size:0.83rem;color:var(--text-dim);margin-top:0.1rem;}
  .row-tag{
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--accent-dim);
    border-radius:99px;
    padding:0.22rem 0.55rem;
    white-space:nowrap;
  }
  .row-dur{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.95rem;
    color:var(--text-dim);
    white-space:nowrap;
  }
  .row-best{grid-column:2 / -1;font-size:0.75rem;color:var(--text-dim);margin-top:0.35rem;}
  .row-best b{color:var(--accent);font-variant-numeric:tabular-nums;}

  /* ---- game screen chrome ---- */
  .game-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    flex-wrap:wrap;
  }
  .back-btn{
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.16));
    border:1px solid var(--rule);
    color:var(--text-dim);
    border-radius:8px;
    padding:0.5rem 0.8rem;
    font:inherit;
    font-size:0.85rem;
    cursor:pointer;
    box-shadow:0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 var(--bevel-hi-soft);
    transition:transform 0.08s ease, box-shadow 0.08s ease, color 0.15s, border-color 0.15s;
  }
  .back-btn:hover{color:var(--flap);border-color:var(--text-dim);filter:brightness(1.12);}
  .back-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);}
  .back-btn.sab-on{color:var(--accent);border-color:var(--accent);}
  .back-btn.diff-facile{color:var(--ok);border-color:var(--ok);}
  .back-btn.diff-difficile{color:var(--bad);border-color:var(--bad);}
  .back-btn.muted{opacity:0.5;}
  .sab-msg{
    font-size:0.82rem;
    color:var(--accent);
    background:rgba(226,166,59,0.12);
    border:1px solid var(--accent-dim);
    border-radius:7px;
    padding:0.5rem 0.7rem;
  }
  .meters{display:flex;gap:1.4rem;flex-wrap:wrap;}
  .meter{text-align:right;}
  .time-gauge{height:4px;width:100%;background:var(--board-3);border-radius:2px;overflow:hidden;margin:0.55rem 0 0;}
  .time-gauge-fill{height:100%;width:100%;background:var(--accent);border-radius:2px;transition:width 0.9s linear, background-color 0.3s;}
  .time-gauge-fill.danger{background:var(--bad);}
  @media (prefers-reduced-motion: reduce){ .time-gauge-fill{transition:background-color 0.3s;} }
  .meter-label{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.3rem;}
  .score-reset{
    background:none;border:none;color:var(--text-dim);cursor:pointer;
    font-size:0.85rem;padding:0 0.1rem;line-height:1;vertical-align:middle;
  }
  .score-reset:hover{color:var(--accent);}
  .score-reset:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .score-reset.confirm{color:var(--bad);}
  .meter .flap-row{justify-content:flex-end;}

  .stage{
    background:var(--board-2);
    border:1px solid var(--rule);
    border-radius:10px;
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
  }
  .prompt{font-size:0.95rem;color:var(--text-dim);}
  .target-line{display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;}
  .target-line .flap.xl{color:var(--ink);}
  .op-row{display:flex;gap:6px;flex-wrap:wrap;}
  .op-btn{
    width:2.7rem;height:2.7rem;
    border-radius:8px;
    border:1px solid var(--rule);
    background:linear-gradient(180deg, #1c2949 0%, var(--board-3) 100%);
    color:var(--flap);
    font-family:"IBM Plex Mono", monospace;
    font-size:1.2rem;
    cursor:pointer;
    box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 3px 0 rgba(0,0,0,0.5), 0 5px 8px rgba(0,0,0,0.3);
    transition:transform 0.08s ease, box-shadow 0.08s ease, color 0.15s, border-color 0.15s;
  }
  .op-btn:hover{border-color:var(--accent);color:var(--accent);}
  .op-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);}
  .op-btn.selected{
    background:linear-gradient(180deg, #f6d287 0%, var(--accent) 55%, #cd9538 100%);
    color:#2b1c07;border-color:var(--accent);
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.35), 0 1px 0 var(--accent-dim);
    transform:translateY(1px);
  }
  .op-btn:disabled{opacity:0.3;cursor:default;box-shadow:none;transform:none;}
  .actions{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;}
  .btn{
    font:inherit;
    font-weight:700;
    font-size:0.9rem;
    padding:0.62rem 1.15rem;
    border-radius:9px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  }
  .btn-primary{
    background:linear-gradient(180deg, #f6d287 0%, var(--accent) 52%, #cd9538 100%);
    color:#2b1c07;
    box-shadow:inset 0 1px 0 var(--bevel-hi), inset 0 -2px 2px rgba(0,0,0,0.12),
      0 3px 0 var(--accent-dim), 0 7px 12px rgba(10,6,0,0.35);
  }
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-primary:active{
    transform:translateY(3px);
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.35), 0 0 0 var(--accent-dim), 0 1px 3px rgba(10,6,0,0.3);
  }
  .btn-primary:disabled{
    opacity:0.4;cursor:default;filter:none;transform:none;
    box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 3px 0 var(--accent-dim);
  }
  .btn-ghost{
    background:linear-gradient(180deg, var(--board-2) 0%, var(--board-3) 100%);
    border-color:var(--rule);
    color:var(--text-dim);
    box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 3px 0 rgba(0,0,0,0.45), 0 6px 10px rgba(0,0,0,0.25);
  }
  .btn-ghost:hover{color:var(--flap);border-color:var(--text-dim);filter:brightness(1.15);}
  .btn-ghost:active{transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,0.4);}
  input[type="text"], input[type="number"]{
    font:inherit;
    font-family:"IBM Plex Mono", monospace;
    font-size:1.15rem;
    background:var(--board-3);
    border:1px solid var(--rule);
    color:var(--flap);
    border-radius:7px;
    padding:0.55rem 0.8rem;
    letter-spacing:0.08em;
    width:min(100%, 14rem);
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.35);
  }
  input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .feedback{min-height:1.4rem;font-size:0.9rem;}
  .feedback.ok{color:var(--ok);}
  .feedback.bad{color:var(--bad);}
  .feedback.info{color:var(--text-dim);}

  .guess-row{display:flex;flex-direction:column;gap:6px;}
  .keyboard{display:flex;flex-direction:column;gap:5px;margin-top:0.3rem;}
  .kb-row{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;}
  .key{
    min-width:1.9rem;height:2.3rem;
    border-radius:6px;
    border:none;
    background:linear-gradient(180deg, #24325a 0%, var(--board-3) 100%);
    color:var(--text-dim);
    font-family:"IBM Plex Mono", monospace;
    font-size:0.85rem;
    cursor:default;
    padding:0 0.35rem;
    box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 2px 0 rgba(0,0,0,0.45);
  }
  .key.ok{background:linear-gradient(180deg,#7fdab3,var(--ok));color:#0c1f18;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 #2f6b53;}
  .key.present{background:linear-gradient(180deg,#f6d287,var(--accent));color:#241a08;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 var(--accent-dim);}
  .key.absent{background:var(--board-3);color:#4c5570;box-shadow:none;}
  .key-btn{cursor:pointer;transition:transform 0.06s, box-shadow 0.06s;}
  .key-btn:hover{filter:brightness(1.25);}
  .key-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4) !important;}
  .key-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .key-wide{min-width:3.4rem;font-weight:700;}

  .end-panel{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
    padding-top:0.4rem;
    border-top:1px solid var(--rule);
  }
  .end-title{font-family:"Big Shoulders Display";font-weight:800;font-size:1.6rem;color:var(--accent);}
  .end-extra{font-size:0.85rem;color:var(--text-dim);}
  .end-extra .vs-line{margin-bottom:0.25rem;}
  .end-extra .vs-line b{color:var(--flap);}
  .word-def{font-size:0.85rem;font-style:italic;color:var(--text-dim);line-height:1.4;}
  .word-def:empty{display:none;}
  .word-def b{font-style:normal;color:var(--flap);}
  .end-extra .vs-line.win b.vs-you{color:var(--ok);}
  .end-extra .vs-line.lose b.vs-you{color:var(--bad);}
  .end-extra .reveal-line{font-family:"IBM Plex Mono", monospace;font-size:0.76rem;line-height:1.4;}

  footer{margin-top:auto;padding-top:0.6rem;font-size:0.72rem;color:var(--text-dim);}
  footer a{color:var(--accent);text-decoration:none;}
  footer a:hover{text-decoration:underline;}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  [hidden]{display:none !important;}

  /* ---- focus programmatique envoyé par goTo() au changement d'écran :   */
  /* pas de cadre disgracieux autour de toute la section, mais le focus   */
  /* est bien déplacé pour les lecteurs d'écran et la navigation clavier. */
  section[tabindex="-1"]{outline:none;}
  section[tabindex="-1"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

  /* ---- utilitaires (remplacent les styles en ligne) ---- */
  .toolbar{display:flex;gap:0.5rem;flex-wrap:wrap;}
  .hub-actions{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1.1rem;}
  .u-mt-1{margin-top:0.5rem;}
  .u-mt-2{margin-top:0.6rem;}
  .u-mt-3{margin-top:0.9rem;}
  .u-mt-4{margin-top:1rem;}
  .u-mb-2{margin-bottom:0.6rem;}
  .u-col{flex-direction:column;}
  .u-min-h{min-height:3.1rem;}
  .u-accent{color:var(--accent);}
  .u-flap{color:var(--flap);}
  .u-border-top{border-top:1px solid var(--rule);padding-top:0.9rem;}
  .board-defi{border-color:var(--accent-dim);margin-bottom:1.1rem;}
  .row-defi{grid-template-columns:2.4rem 1fr auto;border-bottom:none;padding:0.4rem 0.15rem;}
  .row-gate-lg{font-size:1.1rem;}
  .h2-title{font-size:1.4rem;color:var(--accent);}
  .h2-section{font-size:1.3rem;margin-bottom:0.35rem;}

  /* ---- Mode Partie complète ---- */
  .board-partie{
    border-color:var(--accent-dim);
    margin-bottom:0.7rem;
    background:linear-gradient(180deg, rgba(226,166,59,0.10) 0%, var(--board-2) 60%);
  }
  .row-partie:hover .row-name, .row-partie:focus-visible .row-name{color:var(--flap);}
  .partie-hud{
    position:sticky;
    top:0.6rem;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.7rem;
    flex-wrap:wrap;
    padding:0.6rem 1rem 0.6rem 1.2rem;
    border-radius:10px;
    background:linear-gradient(180deg, #1a2c52 0%, var(--board-2) 45%, var(--board-3) 100%);
    border:1px solid var(--accent-dim);
    border-left:4px solid var(--accent);
    box-shadow:
      inset 0 1px 0 var(--bevel-hi-soft),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 3px 0 rgba(0,0,0,0.4),
      0 8px 16px rgba(0,0,0,0.35);
    animation:partie-hud-in 0.25s ease-out;
  }
  @keyframes partie-hud-in{
    from{ transform:translateY(-6px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  .partie-hud-step{
    font-family:"Big Shoulders Display", sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:var(--accent);
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
  }
  .partie-hud-score{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.85rem;
    font-variant-numeric:tabular-nums;
    color:var(--flap);
    background:rgba(0,0,0,0.25);
    border:1px solid var(--rule);
    border-radius:6px;
    padding:0.2rem 0.55rem;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
  }
  .btn-sm{
    padding:0.42rem 0.8rem;
    font-size:0.78rem;
    box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 2px 0 rgba(0,0,0,0.45), 0 4px 7px rgba(0,0,0,0.25);
  }
  .btn-sm:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,0.4); }
  @media (prefers-reduced-motion: reduce){
    .partie-hud{ animation:none; }
  }

  @media (max-width:480px){
    .board-head, .row{grid-template-columns:1.8rem 1fr auto;}
    .row-tag, .board-head span:nth-child(3){display:none;}
    .flap{min-width:2.1rem;height:2.6rem;font-size:1.1rem;}
    .flap.xl{min-width:2.5rem;height:3.1rem;font-size:1.35rem;}

    /* Défi du jour / Partie complète : sur petit écran, la date ou le
       "Record : N points" (texte long, sans retour à la ligne) ne doit
       plus se battre pour la largeur avec le titre — on la fait passer
       sous le titre plutôt que de laisser la colonne 1fr s'écraser. */
    .row-defi{
      grid-template-columns:2.2rem 1fr;
      grid-template-areas:
        "gate main"
        "gate dur";
      row-gap:0.3rem;
    }
    .row-defi .row-gate{grid-area:gate;}
    .row-defi .row-main{grid-area:main;}
    .row-defi .row-dur{
      grid-area:dur;
      white-space:normal;
      text-align:left;
      font-size:0.78rem;
    }
  }
/* ================================================================== */
/* v1.6 — refonte visuelle & confort de jeu                            */
/* ================================================================== */
:root{
  --tag-chiffres:#5aa9e6;
  --tag-mots:#4fae8a;
  --tag-fusion:#c77dff;
  --glow: 0 0 24px rgba(226,166,59,0.25);
}
body{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(226,166,59,0.13), transparent 70%),
    radial-gradient(900px 500px at 100% 110%, rgba(90,169,230,0.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px),
    var(--board);
  background-attachment:fixed;
}
/* Plus de cadre doré autour de toute la section au changement d'écran. */
section[tabindex="-1"]:focus, section[tabindex="-1"]:focus-visible{outline:none;}
section:not([hidden]){animation:screenIn 0.28s ease-out;}
@keyframes screenIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---- Titre ---- */
.marquee h1{text-shadow:0 2px 0 rgba(0,0,0,0.35), 0 0 28px rgba(226,166,59,0.18);}
.marquee h1 span:not(.version-badge){display:inline-block;}

/* ---- Barre d'outils ---- */
.toolbar .back-btn{border-radius:99px;padding:0.45rem 0.85rem;font-size:0.8rem;white-space:nowrap;}

/* En jeu : on garde l'essentiel pour laisser la place au plateau. */
body.in-game .toolbar .back-btn:not(#sound-btn){display:none;}
body.in-game .marquee .sub, body.in-game .rank-badge{display:none;}
body.in-game .marquee{padding-bottom:0.6rem;align-items:center;}
body.in-game .marquee h1{font-size:clamp(1.4rem,4.2vw,1.9rem);}

/* ---- Tableau des jeux ---- */
.row-game{
  position:relative;
  border-radius:8px;
  transition:background 0.18s ease, transform 0.18s ease;
  padding-left:0.55rem;
}
.row-game::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;
  background:var(--row-c, var(--accent));opacity:0.75;transition:top 0.18s, bottom 0.18s, opacity 0.18s;
}
.row-game:hover, .row-game:focus-visible{background:linear-gradient(90deg, rgba(255,255,255,0.045), transparent 80%);}
.row-game:hover::before{top:8%;bottom:8%;opacity:1;}
.row-game.tag-chiffres{--row-c:var(--tag-chiffres);}
.row-game.tag-mots{--row-c:var(--tag-mots);}
.row-game.tag-fusion{--row-c:var(--tag-fusion);}
.row-game .row-tag{color:var(--row-c);border-color:color-mix(in srgb, var(--row-c) 45%, transparent);}
.row-game .row-gate{color:var(--row-c);font-weight:700;}
.row-go{display:inline-block;margin-left:0.55rem;color:var(--accent);font-size:1.2rem;line-height:1;opacity:0;transform:translateX(-4px);transition:opacity 0.18s, transform 0.18s;}
.row:hover .row-go, .row:focus-visible .row-go{opacity:1;transform:none;}
.board-defi, .board-partie{box-shadow:var(--glow);transition:transform 0.18s ease, box-shadow 0.18s ease;}
.board-defi:hover, .board-partie:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(226,166,59,0.32);}
.board-defi{background:linear-gradient(180deg, rgba(226,166,59,0.14) 0%, var(--board-2) 70%);}
.row-defi .row-name{font-size:1.45rem;}
.hub-actions .btn{flex:1 1 12rem;}

/* ---- Clapets : effet « tableau des départs » plus marqué ---- */
.flap{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.06) 52%, rgba(0,0,0,0.02) 100%),
    linear-gradient(180deg, var(--flap) 0%, #e3d5b3 100%);
  box-shadow:0 2px 0 var(--flap-edge), 0 4px 8px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.flap::after{background:rgba(0,0,0,0.28);box-shadow:0 1px 0 rgba(255,255,255,0.35);}
.flap.dim{opacity:1;background:linear-gradient(180deg,#1b2848,#15203c);box-shadow:inset 0 2px 4px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04);color:transparent;}
.flap.dim::after{background:rgba(0,0,0,0.35);box-shadow:none;}
.flap.ok{background:linear-gradient(180deg,#8fe0bd 0%,var(--ok) 55%,#3c8f70 100%);color:#08231a;box-shadow:0 2px 0 #2f6b53, 0 4px 10px rgba(79,174,138,0.35);}
.flap.present{background:linear-gradient(180deg,#f8d995 0%,var(--accent) 55%,#c48f33 100%);color:#2b1c07;box-shadow:0 2px 0 var(--accent-dim), 0 4px 10px rgba(226,166,59,0.3);}
.flap.absent{background:linear-gradient(180deg,#3a4566,#2a3452);color:#9aa3bd;box-shadow:0 2px 0 #151d33;}
.flap.bad{color:#3a0d02;}
.flap-btn{box-shadow:0 3px 0 var(--flap-edge), 0 6px 10px rgba(0,0,0,0.3);}
.flap-btn:hover:not(.used):not(.selected){transform:translateY(-3px);box-shadow:0 5px 0 var(--flap-edge), 0 10px 16px rgba(0,0,0,0.35);}
.flap-btn.used{opacity:0.18;transform:scale(0.92);}

/* ---- Plateau de jeu centré ---- */
.stage{
  align-items:center;text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), var(--board-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.3);
  border-radius:14px;
}
.stage > *{max-width:100%;}
.stage .flap-row, .stage .target-line, .stage .op-row, .stage .actions{justify-content:center;}
.stage .guess-row{align-items:center;width:100%;}
.stage input[type="text"], .stage input[type="number"]{text-align:center;}
.end-panel{
  align-items:center;width:100%;
  background:radial-gradient(400px 120px at 50% 0, rgba(226,166,59,0.16), transparent 70%);
  border-top:1px solid var(--accent-dim);border-radius:0 0 10px 10px;
  padding:0.9rem 0.6rem 0.4rem;
  animation:screenIn 0.3s ease-out;
}
.end-title{font-size:1.8rem;text-shadow:0 0 20px rgba(226,166,59,0.35);}
/* Écrans de texte (aide, scores…) : alignement de lecture classique. */
#screen-aide .stage, #screen-scores .stage, #screen-stats .stage, #screen-succes .stage,
#screen-archives .stage, #screen-partie-fin .stage{align-items:stretch;text-align:left;}
#screen-scores .stage .actions, #screen-partie-fin .stage .actions{justify-content:flex-start;}
#screen-defi .stage > div{width:100%;}

/* ---- Jauge de temps ---- */
.time-gauge{height:7px;border-radius:99px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);}
.time-gauge-fill{border-radius:99px;background:linear-gradient(90deg,#c9892a,var(--accent) 60%,#f6d287);box-shadow:0 0 10px rgba(226,166,59,0.55);}
.time-gauge-fill.danger{background:linear-gradient(90deg,#b8442a,var(--bad));box-shadow:0 0 12px rgba(217,96,63,0.7);animation:pulse 0.9s ease-in-out infinite;}
@keyframes pulse{50%{opacity:0.55;}}

/* ---- Score qui s'envole ---- */
.meter{position:relative;}
.score-float{
  position:absolute;right:0;top:-0.2rem;pointer-events:none;
  font-family:"IBM Plex Mono", monospace;font-weight:700;font-size:1rem;
  animation:floatUp 1.2s ease-out forwards;white-space:nowrap;
}
.score-float.up{color:var(--ok);text-shadow:0 0 10px rgba(79,174,138,0.6);}
.score-float.down{color:var(--bad);}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(0.8);}15%{opacity:1;transform:translateY(0) scale(1.15);}100%{opacity:0;transform:translateY(-28px) scale(1);}}

/* ---- Micro-animations ---- */
@keyframes tapPop{0%{transform:scale(1);}40%{transform:scale(1.14);}100%{transform:scale(1);}}
.tap-pop{animation:tapPop 0.16s ease-out;}
@keyframes reveal{0%{transform:rotateX(0);}50%{transform:rotateX(-90deg);filter:brightness(0.7);}100%{transform:rotateX(0);}}
.flap.reveal{animation:reveal 0.5s ease both;}
@keyframes bounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-14px);}70%{transform:translateY(2px);}}
.flap.bounce{animation:bounce 0.55s ease both;}

/* ---- Mot Mystère : grille ---- */
#motus-grid, #defi-m-grid{display:grid;gap:6px;justify-content:center;}
#motus-grid .flap-row, #defi-m-grid .flap-row{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:6px;width:min(100%, 22rem);}
#motus-grid .flap, #defi-m-grid .flap{width:100%;min-width:0;height:auto;aspect-ratio:1/1.05;font-size:clamp(1.2rem, 5.5vw, 1.7rem);}
.row-live .flap.dim{background:linear-gradient(180deg,#22325a,#1a2747);box-shadow:inset 0 0 0 2px rgba(226,166,59,0.25);}
.row-live .flap.typed{background:linear-gradient(180deg, var(--flap) 0%, #e3d5b3 100%);color:var(--ink);box-shadow:0 2px 0 var(--flap-edge);}
.row-live .flap.cursor{box-shadow:inset 0 0 0 2px var(--accent), 0 0 12px rgba(226,166,59,0.35);}
.row-live .flap.cursor::before{content:"";position:absolute;bottom:18%;left:30%;right:30%;height:3px;border-radius:2px;background:var(--accent);animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
/* Le champ texte reste là (clavier physique, lecteurs d'écran) mais discret. */
#motus-input, #defi-m-input{
  width:min(100%, 22rem);font-size:0.95rem;padding:0.35rem 0.6rem;opacity:0.75;
}

/* ---- Clavier virtuel : chaque rangée tient sur une ligne ---- */
.keyboard{width:min(100%, 34rem);gap:7px;}
.kb-row{flex-wrap:nowrap;gap:5px;}
.key{flex:1 1 0;min-width:0;max-width:3rem;height:3.1rem;font-size:1.02rem;font-weight:700;color:var(--flap);border-radius:7px;padding:0;}
.key-wide{flex:1.6 1 0;max-width:5.2rem;font-size:0.82rem;}
.key-enter{background:linear-gradient(180deg,#f6d287 0%,var(--accent) 55%,#cd9538 100%);color:#2b1c07;box-shadow:inset 0 1px 0 var(--bevel-hi), 0 2px 0 var(--accent-dim);}
.key.absent{color:#4c5570;}
/* Le bouton Valider du plateau fait doublon avec la touche Valider du clavier. */
#motus-valider, #defi-m-valider{display:none;}

/* ---- Anagramme : lettres à toucher ---- */
#ana-letters .flap-btn{cursor:pointer;}
.ana-answer{min-height:3.3rem;gap:5px;}
.ana-answer .flap.slot{min-width:2.4rem;height:3rem;background:linear-gradient(180deg,#1b2848,#15203c);box-shadow:inset 0 2px 4px rgba(0,0,0,0.45);color:var(--flap);}
.ana-answer .flap.slot.typed{background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 48%), linear-gradient(180deg,#f8d995,var(--accent));color:#2b1c07;box-shadow:0 2px 0 var(--accent-dim);}
.ana-answer .flap.slot.cursor{box-shadow:inset 0 0 0 2px var(--accent);}
.tile-tools{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;}
#ana-input{font-size:0.95rem;opacity:0.75;}

/* ---- Boutons d'opération plus confortables au doigt ---- */
.op-btn{width:3.3rem;height:3.3rem;font-size:1.45rem;border-radius:12px;}

@media (max-width:600px){
  /* Barre d'outils du tableau : un seul ruban défilant au lieu de 5 lignes. */
  .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding:2px 2px 6px;margin:0 -2px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .toolbar::-webkit-scrollbar{display:none;}
  body.in-game .toolbar{width:auto;-webkit-mask-image:none;mask-image:none;}
  .stage{padding:1rem 0.8rem;}
  .ana-answer .flap.slot{min-width:1.9rem;height:2.5rem;}
  .key{height:2.9rem;font-size:0.95rem;}
  .kb-row{gap:4px;}
  .actions .btn{flex:1 1 auto;}
  .row-go{display:none;}
}
@media (prefers-reduced-motion: reduce){
  section:not([hidden]), .end-panel, .score-float, .tap-pop, .flap.reveal, .flap.bounce,
  .time-gauge-fill.danger, .row-live .flap.cursor::before{animation:none !important;}
}
#motus-grid, #defi-m-grid{width:100%;justify-items:center;}
#ana-letters, .ana-answer{flex-wrap:nowrap;width:min(100%, 40rem);justify-content:center;}
#ana-letters .flap, .ana-answer .flap.slot{flex:1 1 0;min-width:0;max-width:3.3rem;padding:0;}
#ana-letters .flap{height:auto;aspect-ratio:1/1.2;font-size:clamp(1.1rem,5.2vw,1.7rem);}
.ana-answer .flap.slot{height:auto;aspect-ratio:1/1.15;max-width:2.8rem;font-size:clamp(1rem,4.6vw,1.4rem);}
#motus-grid, #defi-m-grid{display:flex;flex-direction:column;align-items:center;}
html{background:var(--board);}
body{height:auto;min-height:100%;}
.key.absent{color:#6b7592;background:#0c1428;}
#motus-grid .flap-row, #defi-m-grid .flap-row{width:min(100%, 20rem);}
#compte-pool .flap, #cible-pool .flap, #defi-c-pool .flap{min-width:3.1rem;height:3.5rem;font-size:1.4rem;}
@media (max-width:600px){
  #motus-grid .flap-row, #defi-m-grid .flap-row{width:min(100%, 17rem);gap:5px;}
  #motus-grid, #defi-m-grid{gap:5px;}
  #compte-pool .flap, #cible-pool .flap, #defi-c-pool .flap{min-width:2.8rem;height:3.3rem;font-size:1.3rem;}
}
.keyboard{margin-inline:auto;}

/* ================================================================== */
/* v2.0 — navigation, accueil, fins de manche, tutoriels, réglages,    */
/* thème clair, mode daltonien                                         */
/* ================================================================== */
:root{
  --text-dim:#c0c6d6;              /* contraste renforcé (≈ 9:1 sur le fond) */
  --text-mute:#8f97ad;
  --surface:var(--board-2);
  --surface-2:var(--board-3);
  --tile-dark-1:#1b2848; --tile-dark-2:#15203c;
  --key-1:#24325a;
  --shadow-lg:0 18px 40px rgba(0,0,0,0.45);
  --tabbar-h:64px;
  --radius:14px;
}
.app{padding-bottom:calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom,0px));}
body.in-game .app{padding-bottom:2rem;}
body.sheet-open .app{padding-bottom:calc(16rem + env(safe-area-inset-bottom,0px));}

/* ---- En-tête ---- */
.marquee{align-items:center;}
.toolbar{flex-wrap:nowrap;overflow:visible;width:auto;-webkit-mask-image:none;mask-image:none;padding:0;margin:0;gap:0.45rem;}
.icon-btn{
  width:2.6rem;height:2.6rem;border-radius:50%;display:inline-grid;place-items:center;
  font:700 1.05rem/1 "Work Sans", sans-serif;color:var(--flap);cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.15));
  border:1px solid var(--rule);box-shadow:0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 var(--bevel-hi-soft);
  transition:transform .1s, border-color .15s;
}
.icon-btn:hover{border-color:var(--accent);}
.icon-btn:active{transform:translateY(2px);}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
#sound-btn.muted{opacity:.55;}
body:not(.in-game) #help-btn{display:none;}
body:not(.in-game) .marquee .sub{display:block;}

/* ---- Barre d'onglets ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding:0 max(8px, env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px, env(safe-area-inset-left,0px));
  background:color-mix(in srgb, var(--board-3) 88%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);
  box-shadow:0 -8px 24px rgba(0,0,0,0.25);
}
body.in-game .tabbar{display:none;}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;color:var(--text-mute);font:600 0.72rem "Work Sans", sans-serif;cursor:pointer;
  min-height:48px;
}
.tab-ico{font-size:1.3rem;line-height:1;transition:transform .15s;}
.tab.active{color:var(--accent);}
.tab.active .tab-ico{transform:translateY(-2px) scale(1.08);}
.tab.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--accent);box-shadow:0 0 12px var(--accent);}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:10px;}
.tab-dot{position:absolute;top:10px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--board-3);}
@media (min-width:760px){
  .tabbar{
    position:sticky;top:0.5rem;bottom:auto;left:auto;right:auto;height:auto;padding:5px;margin-top:-0.3rem;
    border:1px solid var(--rule);border-radius:99px;display:flex;gap:4px;width:max-content;align-self:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
  }
  .tab{flex-direction:row;gap:0.45rem;padding:0.5rem 1.1rem;border-radius:99px;font-size:0.88rem;min-height:0;}
  .tab-ico{font-size:1rem;}
  .tab.active{background:var(--accent);color:#2b1c07;}
  .tab.active::before{display:none;}
  .tab-dot{top:6px;left:auto;right:8px;}
  .app{padding-bottom:2rem;}
}

/* ---- Carte de rang ---- */
.rank-card{margin-bottom:1rem;}
.rank-line{display:flex;align-items:baseline;gap:0.55rem;flex-wrap:wrap;}
.rank-lvl{font:700 0.68rem "IBM Plex Mono", monospace;letter-spacing:.06em;color:#2b1c07;background:var(--accent);border-radius:5px;padding:0.12rem 0.4rem;}
.rank-title{font:700 1.05rem "Big Shoulders Display", sans-serif;color:var(--flap);letter-spacing:.02em;}
.rank-total{margin-left:auto;font:700 0.85rem "IBM Plex Mono", monospace;color:var(--accent);}
.rank-bar{height:8px;border-radius:99px;background:var(--surface-2);margin:0.45rem 0 0.3rem;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.45);}
.rank-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#c9892a,var(--accent),#f6d287);box-shadow:0 0 10px rgba(226,166,59,.5);transition:width .6s ease;}
.rank-next{font-size:0.75rem;color:var(--text-mute);}

/* ---- Défi du jour (héros) ---- */
.hero{
  position:relative;display:flex;flex-direction:column;gap:0.35rem;width:100%;text-align:left;cursor:pointer;
  padding:1.2rem 1.25rem 1.1rem;border-radius:18px;border:1px solid var(--accent-dim);color:inherit;font:inherit;
  background:
    radial-gradient(500px 180px at 100% 0%, rgba(226,166,59,.28), transparent 70%),
    linear-gradient(160deg, #22325c 0%, var(--board-2) 60%);
  box-shadow:var(--glow), var(--shadow-lg);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  margin-bottom:0.9rem;
}
.hero::after{content:"★";position:absolute;right:-0.6rem;bottom:-2.4rem;font-size:9rem;line-height:1;color:rgba(226,166,59,.08);pointer-events:none;}
.hero:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(226,166,59,.35), var(--shadow-lg);}
.hero:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.hero-top{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.hero-kicker{font:700 0.72rem "Work Sans", sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.hero-date{font:500 0.78rem "IBM Plex Mono", monospace;color:var(--text-dim);text-transform:capitalize;}
.hero-name{font:800 clamp(1.8rem,6.5vw,2.4rem)/1.05 "Big Shoulders Display", sans-serif;color:var(--flap);}
.hero-desc{font-size:0.9rem;color:var(--text-dim);}
.hero-foot{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;margin-top:0.55rem;}
.hero-streak{font-size:0.88rem;color:var(--flap);background:rgba(0,0,0,.25);border:1px solid var(--rule);border-radius:99px;padding:.28rem .7rem;}
.hero-streak b{color:var(--accent);}
.hero-countdown{font:500 0.72rem "IBM Plex Mono", monospace;color:var(--text-mute);}
.hero-cta{margin-left:auto;font-weight:700;font-size:0.95rem;color:#2b1c07;border-radius:99px;padding:.55rem 1.2rem;
  background:linear-gradient(180deg,#f6d287 0%,var(--accent) 55%,#cd9538 100%);box-shadow:inset 0 1px 0 var(--bevel-hi), 0 3px 0 var(--accent-dim);}
.hero.done .hero-cta{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-dim);}
@media (max-width:480px){ .hero-cta{margin-left:0;width:100%;text-align:center;} }

/* ---- Partie complète ---- */
.partie-card{
  display:flex;align-items:center;gap:0.9rem;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;
  padding:0.9rem 1.1rem;border-radius:var(--radius);border:1px solid var(--rule);background:var(--surface);
  box-shadow:0 6px 16px rgba(0,0,0,.2);transition:border-color .15s, transform .15s;margin-bottom:1.3rem;
}
.partie-card:hover{border-color:var(--accent-dim);transform:translateY(-1px);}
.partie-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.partie-ico{font-size:1.6rem;width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:12px;background:rgba(226,166,59,.12);}
.partie-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.partie-name{font:700 1.2rem "Big Shoulders Display", sans-serif;color:var(--flap);}
.partie-desc{font-size:0.8rem;color:var(--text-dim);}
.partie-best{font:700 1.05rem "IBM Plex Mono", monospace;color:var(--accent);text-align:right;display:flex;flex-direction:column;align-items:flex-end;}
.partie-best small{font:600 0.62rem "Work Sans", sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);}

/* ---- Grille des jeux ---- */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:0.7rem;flex-wrap:wrap;}
.section-title{font-size:1.35rem;color:var(--flap);}
.hub-actions{margin:0;gap:0.45rem;}
.hub-actions .btn{flex:none;}
.chip-btn{font:600 0.8rem "Work Sans", sans-serif;color:var(--text-dim);background:var(--surface);border:1px solid var(--rule);border-radius:99px;padding:.45rem .85rem;cursor:pointer;min-height:36px;}
.chip-btn:hover{color:var(--flap);border-color:var(--text-mute);}
.game-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:0.7rem;}
@media (min-width:700px){ .game-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:0.9rem;} }
.game-card{
  --row-c:var(--accent);
  position:relative;display:flex;flex-direction:column;gap:0.3rem;text-align:left;cursor:pointer;color:inherit;font:inherit;
  padding:0.9rem 0.9rem 0.8rem;border-radius:var(--radius);border:1px solid var(--rule);
  background:linear-gradient(180deg, color-mix(in srgb, var(--row-c) 10%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow:0 6px 16px rgba(0,0,0,.2);overflow:hidden;min-height:9.5rem;
  transition:transform .16s ease, border-color .16s, box-shadow .16s;
}
.game-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--row-c);opacity:.85;}
.game-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--row-c) 55%, transparent);box-shadow:0 12px 24px rgba(0,0,0,.3);}
.game-card:active{transform:translateY(0) scale(.985);}
.game-card:focus-visible{outline:2px solid var(--row-c);outline-offset:2px;}
.game-card.tag-chiffres{--row-c:var(--tag-chiffres);}
.game-card.tag-mots{--row-c:var(--tag-mots);}
.game-card.tag-fusion{--row-c:var(--tag-fusion);}
.gc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem;margin-bottom:.2rem;}
.gc-icon{
  position:relative;display:grid;place-items:center;min-width:2.6rem;height:2.9rem;padding:0 .35rem;border-radius:7px;
  font:700 1.2rem "IBM Plex Mono", monospace;color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 48%), linear-gradient(180deg,var(--flap),#e3d5b3);
  box-shadow:0 2px 0 var(--flap-edge), 0 4px 8px rgba(0,0,0,.28);
}
.gc-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.25);}
.gc-new{font:700 .62rem "Work Sans", sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#08231a;background:var(--ok);border-radius:99px;padding:.22rem .5rem;}
.gc-best{font:700 .9rem "IBM Plex Mono", monospace;color:var(--accent);text-align:right;line-height:1.1;}
.gc-best span{display:block;font:600 .58rem "Work Sans", sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);}
.gc-name{font:700 1.18rem/1.1 "Big Shoulders Display", sans-serif;color:var(--flap);}
.gc-desc{font-size:.76rem;line-height:1.3;color:var(--text-dim);flex:1;}
.gc-meta{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-top:.35rem;}
.gc-tag{font:700 .6rem "Work Sans", sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--row-c);}
.gc-dur{font:500 .74rem "IBM Plex Mono", monospace;color:var(--text-mute);}
@media (max-width:380px){ .gc-desc{display:none;} .game-card{min-height:7.5rem;} }

/* ---- Historique des calculs & annuler ---- */
.calc-history{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:0;}
.calc-history:empty{display:none;}
.hist-chip{font:600 .82rem "IBM Plex Mono", monospace;color:var(--flap);background:var(--surface-2);border:1px solid var(--rule);border-radius:99px;padding:.3rem .65rem;}
.hist-chip.last{border-color:var(--accent-dim);color:var(--accent);animation:tapPop .2s ease-out;}
.undo-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;}
.undo-row .btn:disabled{opacity:.35;cursor:default;transform:none;filter:none;}

/* ---- Pavé numérique ---- */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%, 19rem);}
.pad-key{
  height:3.4rem;border-radius:12px;border:1px solid var(--rule);cursor:pointer;
  font:700 1.35rem "IBM Plex Mono", monospace;color:var(--flap);
  background:linear-gradient(180deg, var(--key-1) 0%, var(--board-3) 100%);
  box-shadow:inset 0 1px 0 var(--bevel-hi-soft), 0 3px 0 rgba(0,0,0,.45);
}
.pad-key:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);}
.pad-fn{font-size:1.1rem;color:var(--text-dim);}
.pad-ok{background:linear-gradient(180deg,#f6d287 0%,var(--accent) 55%,#cd9538 100%);color:#2b1c07;box-shadow:inset 0 1px 0 var(--bevel-hi), 0 3px 0 var(--accent-dim);font-size:1.05rem;}
#calcul-valider{display:none;}
#calcul-input{font-size:1.5rem;font-weight:700;letter-spacing:.15em;width:min(100%, 12rem);}

/* ---- Cryptomot ---- */
.crypto-board{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.crypto-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:3.4rem;}
.crypto-clue{font:700 .8rem "IBM Plex Mono", monospace;color:var(--flap);background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;padding:.35rem .4rem;white-space:nowrap;}
.crypto-clue.hinted{background:var(--accent);color:#2b1c07;border-color:var(--accent);font-size:1rem;}
.flap.crypto-slot{min-width:2.4rem;height:2.9rem;background:linear-gradient(180deg,var(--tile-dark-1),var(--tile-dark-2));box-shadow:inset 0 2px 4px rgba(0,0,0,.45);color:var(--flap);}
.flap.crypto-slot.typed{background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 48%), linear-gradient(180deg,#f8d995,var(--accent));color:#2b1c07;box-shadow:0 2px 0 var(--accent-dim);}
.flap.crypto-slot.cursor{box-shadow:inset 0 0 0 2px var(--accent);}
#crypto-input{font-size:.95rem;opacity:.75;}
#crypto-valider{display:none;}
@media (max-width:600px){ .crypto-col{min-width:2.9rem;} .crypto-clue{font-size:.72rem;padding:.3rem .3rem;} }

/* ---- Fin de manche : panneau qui monte du bas ---- */
.end-panel.end-sheet{
  position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100%, 34rem);max-height:82vh;overflow:auto;
  padding:0.4rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom,0px));
  border:1px solid var(--accent-dim);border-bottom:none;border-radius:22px 22px 0 0;
  background:
    radial-gradient(420px 140px at 50% 0, rgba(226,166,59,.2), transparent 70%),
    linear-gradient(180deg, #1d2b52 0%, var(--board-2) 100%);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  animation:sheetUp .38s cubic-bezier(.2,.9,.3,1.15);
  text-align:center;gap:0.55rem;
}
@keyframes sheetUp{from{transform:translate(-50%, 100%);}to{transform:translate(-50%, 0);}}
.end-panel.end-sheet.collapsed > :not(.sheet-grip):not(.end-title){display:none;}
.end-panel.end-sheet.collapsed{padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));}
.end-panel.end-sheet.collapsed .end-title{font-size:1.1rem;}
.sheet-grip{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:none;border:none;cursor:pointer;color:var(--text-mute);font:600 .7rem "Work Sans", sans-serif;padding:.2rem 1rem .1rem;}
.grip-bar{width:42px;height:5px;border-radius:99px;background:var(--rule);background:color-mix(in srgb, var(--text-mute) 60%, transparent);}
.sheet-stars{display:flex;gap:.35rem;justify-content:center;font-size:2.3rem;line-height:1;}
.star{color:var(--surface-2);text-shadow:0 1px 0 rgba(255,255,255,.05);animation:starIn .45s cubic-bezier(.2,.9,.3,1.4) both;}
.star.on{color:var(--accent);text-shadow:0 0 18px rgba(226,166,59,.6);}
@keyframes starIn{from{transform:scale(0) rotate(-40deg);opacity:0;}to{transform:none;opacity:1;}}
.sheet-record{font-weight:700;color:#2b1c07;background:linear-gradient(180deg,#f6d287,var(--accent));border-radius:99px;padding:.35rem .9rem;animation:tapPop .5s ease-out;}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;width:100%;margin-top:.3rem;}
.sheet-actions .btn-primary{grid-column:1 / -1;font-size:1.05rem;padding:.85rem 1rem;}
.end-sheet .actions{justify-content:center;}
.end-sheet .end-extra, .end-sheet .word-def{text-align:center;}
@media (min-width:760px){ .end-panel.end-sheet{bottom:1.2rem;border-radius:22px;border-bottom:1px solid var(--accent-dim);} }

/* ---- Décompte 3-2-1 ---- */
.countdown{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(6,10,22,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.countdown[hidden]{display:none;}
#countdown-num{font:800 clamp(5rem,26vw,9rem)/1 "Big Shoulders Display", sans-serif;color:var(--flap);text-shadow:0 0 40px rgba(226,166,59,.6), 0 6px 0 rgba(0,0,0,.35);animation:countPop .5s ease-out both;}
#countdown-num.go{color:var(--accent);font-size:clamp(3.2rem,15vw,5.5rem);}
@keyframes countPop{0%{transform:scale(1.8);opacity:0;}35%{transform:scale(.95);opacity:1;}100%{transform:scale(1);opacity:1;}}

/* ---- Tutoriel (coach) ---- */
.coach{position:fixed;inset:0;z-index:80;}
.coach[hidden]{display:none;}
.coach-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(4,8,20,.72), 0 0 0 2px var(--accent), 0 0 24px rgba(226,166,59,.5);transition:all .28s ease;pointer-events:none;}
.coach-card{position:fixed;width:min(360px, calc(100vw - 24px));padding:1rem 1.1rem .9rem;border-radius:16px;
  background:linear-gradient(180deg,#22325c,var(--board-2));border:1px solid var(--accent-dim);box-shadow:var(--shadow-lg);
  transition:top .28s ease, left .28s ease;text-align:left;}
.coach-card.centered{left:50% !important;top:50% !important;transform:translate(-50%,-50%);}
.coach-step{font:600 .68rem "Work Sans", sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.coach-title{font-size:1.45rem;color:var(--flap);margin:.2rem 0 .3rem;}
.coach-text{font-size:.92rem;line-height:1.45;color:var(--text-dim);}
.coach-text b{color:var(--flap);}
.coach-ex{display:inline-block;margin-top:.45rem;font:700 .9rem "IBM Plex Mono", monospace;background:var(--surface-2);border-radius:8px;padding:.3rem .6rem;color:var(--flap);}
.coach-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.9rem;}
.legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.82rem;}
.lg{display:inline-grid;place-items:center;width:1.6rem;height:1.7rem;border-radius:4px;font:700 .85rem "IBM Plex Mono", monospace;}
.lg.ok{background:var(--ok);color:#08231a;}
.lg.present{background:var(--accent);color:#2b1c07;}
.lg.absent{background:#3a4566;color:#c7cde0;}
body.overlay-open{overflow:hidden;}

/* ---- Profil ---- */
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1rem;align-items:center;padding:1.1rem 1.2rem;border-radius:18px;
  background:radial-gradient(400px 160px at 0 0, rgba(226,166,59,.2), transparent 70%), var(--surface);border:1px solid var(--rule);margin-bottom:1rem;}
.profile-avatar{width:3.6rem;height:3.6rem;border-radius:16px;display:grid;place-items:center;font:800 1.8rem "Big Shoulders Display", sans-serif;color:#2b1c07;
  background:linear-gradient(180deg,#f6d287,var(--accent) 60%,#c48f33);box-shadow:0 3px 0 var(--accent-dim), 0 0 20px rgba(226,166,59,.35);}
.profile-kpis{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.kpi{background:var(--surface-2);border-radius:12px;padding:.6rem .5rem;text-align:center;display:flex;flex-direction:column;gap:.1rem;}
.kpi b{font:700 1.2rem "IBM Plex Mono", monospace;color:var(--accent);}
.kpi span{font-size:.7rem;color:var(--text-mute);}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--rule);border-radius:12px;padding:4px;gap:4px;margin-bottom:1rem;}
.seg-btn{flex:1;border:none;background:none;color:var(--text-dim);font:600 .88rem "Work Sans", sans-serif;padding:.55rem .6rem;border-radius:9px;cursor:pointer;min-height:40px;}
.seg-btn.active{background:var(--accent);color:#2b1c07;box-shadow:0 2px 0 var(--accent-dim);}
.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.seg-sm{margin:0;flex:none;}
.seg-sm .seg-btn{font-size:.78rem;padding:.4rem .6rem;min-height:36px;}
.text-stage{align-items:stretch !important;text-align:left !important;}
.text-stage .actions{justify-content:flex-start !important;}

/* ---- Réglages ---- */
.settings{display:flex;flex-direction:column;gap:.4rem;}
.settings-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);font-family:"Work Sans", sans-serif;font-weight:700;margin:1rem .3rem .3rem;}
.settings-title:first-child{margin-top:0;}
.set-group{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--rule);min-height:56px;cursor:pointer;width:100%;background:none;border-left:none;border-right:none;border-top:none;color:inherit;font:inherit;text-align:left;}
.set-row:last-child{border-bottom:none;}
div.set-row{cursor:default;flex-wrap:wrap;}
.set-link:hover{background:rgba(255,255,255,.03);}
.set-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.set-name{font-weight:600;color:var(--flap);}
.set-desc{font-size:.76rem;color:var(--text-mute);}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:3.1rem;height:1.8rem;border-radius:99px;background:var(--surface-2);border:1px solid var(--rule);position:relative;cursor:pointer;transition:background .2s;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:calc(1.8rem - 6px);height:calc(1.8rem - 6px);border-radius:50%;background:#dfe3ee;box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform .2s;}
.switch:checked{background:var(--accent);border-color:var(--accent);}
.switch:checked::after{transform:translateX(1.3rem);background:#fff;}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- Écrans de lecture ---- */
#screen-archives .stage, #screen-partie-fin .stage, #screen-aide .stage{align-items:stretch;text-align:left;}

/* ================= Mode daltonien ================= */
html.cb{--ok:#3b82f6;--accent-cb:#f28c28;}
html.cb .flap.ok{background:linear-gradient(180deg,#9cc3ff 0%,#3b82f6 55%,#2a62c0 100%);color:#051634;box-shadow:0 2px 0 #1d4a94;}
html.cb .flap.present, html.cb .key.present, html.cb .lg.present{background:linear-gradient(180deg,#ffc58c,#f28c28);color:#2b1400;}
html.cb .key.ok, html.cb .lg.ok{background:linear-gradient(180deg,#9cc3ff,#3b82f6);color:#051634;}
html.cb .flap.ok::before, html.cb .flap.present::before{position:absolute;top:2px;right:4px;font-size:.55em;line-height:1;opacity:.85;}
html.cb .flap.ok::before{content:"●";}
html.cb .flap.present::before{content:"◐";}
html.cb .flap.absent::before{content:"×";position:absolute;top:2px;right:4px;font-size:.55em;opacity:.6;}

/* ================= Thème clair ================= */
:root[data-theme="light"]{
  --board:#efe8da;--board-2:#fffdf8;--board-3:#e6decd;
  --text:#1c2333;--text-dim:#4a5268;--text-mute:#6d7489;--rule:rgba(28,35,51,.13);
  --flap-edge:#c2ad7f;--accent-dim:#b98a30;
  --tile-dark-1:#e7dfcd;--tile-dark-2:#ddd3be;--key-1:#fbf7ee;
  --bevel-hi-soft:rgba(255,255,255,.6);--shadow-lg:0 14px 34px rgba(60,45,20,.18);
  --glow:0 0 24px rgba(226,166,59,.18);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --board:#efe8da;--board-2:#fffdf8;--board-3:#e6decd;
    --text:#1c2333;--text-dim:#4a5268;--text-mute:#6d7489;--rule:rgba(28,35,51,.13);
    --flap-edge:#c2ad7f;--accent-dim:#b98a30;
    --tile-dark-1:#e7dfcd;--tile-dark-2:#ddd3be;--key-1:#fbf7ee;
    --bevel-hi-soft:rgba(255,255,255,.6);--shadow-lg:0 14px 34px rgba(60,45,20,.18);
    --glow:0 0 24px rgba(226,166,59,.18);
  }
}

/* Thème clair : surcharges des dégradés sombres codés en dur */
:root[data-theme="light"] body{background:radial-gradient(1200px 600px at 50% -200px, rgba(226,166,59,.18), transparent 70%), repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 4px), var(--board);}
:root[data-theme="light"] .marquee h1{color:#1c2333;text-shadow:none;}
:root[data-theme="light"] .rank-title, :root[data-theme="light"] .gc-name, :root[data-theme="light"] .partie-name, :root[data-theme="light"] .hero-name, :root[data-theme="light"] .section-title, :root[data-theme="light"] .set-name, :root[data-theme="light"] .coach-title, :root[data-theme="light"] .h2-section.u-flap, :root[data-theme="light"] .u-flap, :root[data-theme="light"] .stat-label, :root[data-theme="light"] .badge-name, :root[data-theme="light"] .score-row .row-name, :root[data-theme="light"] .row-name{color:#1c2333;}
:root[data-theme="light"] .hero{background:radial-gradient(500px 180px at 100% 0%, rgba(226,166,59,.32), transparent 70%), linear-gradient(160deg,#fff8e8 0%, #fffdf8 60%);}
:root[data-theme="light"] .hero-streak{background:rgba(255,255,255,.7);color:#1c2333;}
:root[data-theme="light"] .icon-btn, :root[data-theme="light"] .chip-btn, :root[data-theme="light"] .back-btn{color:#1c2333;background:#fffdf8;}
:root[data-theme="light"] .btn-ghost{background:linear-gradient(180deg,#fffdf8,#f1eadb);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(60,45,20,.18), 0 6px 10px rgba(60,45,20,.1);}
:root[data-theme="light"] .op-btn{background:linear-gradient(180deg,#fffdf8,#ece4d3);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(60,45,20,.22);}
:root[data-theme="light"] .key, :root[data-theme="light"] .pad-key{background:linear-gradient(180deg,#fffdf8,#ece4d3);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(60,45,20,.25);}
:root[data-theme="light"] .key.absent{background:#cfc6b3;color:#8a8270;box-shadow:none;}
:root[data-theme="light"] .flap.dim{background:linear-gradient(180deg,var(--tile-dark-1),var(--tile-dark-2));box-shadow:inset 0 2px 3px rgba(60,45,20,.18);}
:root[data-theme="light"] .flap.absent{background:linear-gradient(180deg,#9aa0ae,#7d8494);color:#fff;box-shadow:0 2px 0 #5f6574;}
:root[data-theme="light"] .row-live .flap.dim{background:#f7f1e4;}
:root[data-theme="light"] .ana-answer .flap.slot, :root[data-theme="light"] .flap.crypto-slot{color:#1c2333;box-shadow:inset 0 2px 3px rgba(60,45,20,.18);}
:root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="number"]{background:#fffdf8;color:#1c2333;box-shadow:inset 0 2px 3px rgba(60,45,20,.12);}
:root[data-theme="light"] .stage{background:linear-gradient(180deg, rgba(255,255,255,.6), transparent 40%), var(--board-2);box-shadow:0 10px 30px rgba(60,45,20,.12);}
:root[data-theme="light"] .end-panel.end-sheet, :root[data-theme="light"] .coach-card{background:radial-gradient(420px 140px at 50% 0, rgba(226,166,59,.22), transparent 70%), #fffdf8;box-shadow:0 -14px 40px rgba(60,45,20,.25);}
:root[data-theme="light"] .end-title{text-shadow:none;color:#a26f14;}
:root[data-theme="light"] .tabbar{background:rgba(255,253,248,.88);box-shadow:0 -6px 20px rgba(60,45,20,.12);}
:root[data-theme="light"] .partie-hud{background:#fffdf8;}
:root[data-theme="light"] .partie-hud-score{background:#f1eadb;color:#1c2333;}
:root[data-theme="light"] .hist-chip, :root[data-theme="light"] .crypto-clue, :root[data-theme="light"] .kpi, :root[data-theme="light"] .seg, :root[data-theme="light"] .coach-ex{color:#1c2333;}
:root[data-theme="light"] .countdown{background:rgba(239,232,218,.6);}
:root[data-theme="light"] #countdown-num{color:#1c2333;text-shadow:0 0 30px rgba(226,166,59,.6);}
:root[data-theme="light"] .game-card, :root[data-theme="light"] .partie-card, :root[data-theme="light"] .set-group, :root[data-theme="light"] .profile-head, :root[data-theme="light"] .board{box-shadow:0 6px 16px rgba(60,45,20,.08);}
:root[data-theme="light"] .time-gauge{background:#e0d8c6;}
:root[data-theme="light"] .rank-bar{background:#e0d8c6;box-shadow:inset 0 1px 2px rgba(60,45,20,.2);}
:root[data-theme="light"] .switch::after{background:#fff;}
:root[data-theme="light"] .coach-spot{box-shadow:0 0 0 9999px rgba(30,25,15,.55), 0 0 0 2px var(--accent), 0 0 24px rgba(226,166,59,.5);}
:root[data-theme="light"] footer{color:var(--text-mute);}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) body{background:radial-gradient(1200px 600px at 50% -200px, rgba(226,166,59,.18), transparent 70%), repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 4px), var(--board);}
  :root:not([data-theme="dark"]) .marquee h1{color:#1c2333;text-shadow:none;}
  :root:not([data-theme="dark"]) .rank-title, :root:not([data-theme="dark"]) .gc-name, :root:not([data-theme="dark"]) .partie-name, :root:not([data-theme="dark"]) .hero-name, :root:not([data-theme="dark"]) .section-title, :root:not([data-theme="dark"]) .set-name, :root:not([data-theme="dark"]) .coach-title, :root:not([data-theme="dark"]) .h2-section.u-flap, :root:not([data-theme="dark"]) .u-flap, :root:not([data-theme="dark"]) .stat-label, :root:not([data-theme="dark"]) .badge-name, :root:not([data-theme="dark"]) .score-row .row-name, :root:not([data-theme="dark"]) .row-name{color:#1c2333;}
  :root:not([data-theme="dark"]) .hero{background:radial-gradient(500px 180px at 100% 0%, rgba(226,166,59,.32), transparent 70%), linear-gradient(160deg,#fff8e8 0%, #fffdf8 60%);}
  :root:not([data-theme="dark"]) .hero-streak{background:rgba(255,255,255,.7);color:#1c2333;}
  :root:not([data-theme="dark"]) .icon-btn, :root:not([data-theme="dark"]) .chip-btn, :root:not([data-theme="dark"]) .back-btn{color:#1c2333;background:#fffdf8;}
  :root:not([data-theme="dark"]) .btn-ghost{background:linear-gradient(180deg,#fffdf8,#f1eadb);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(60,45,20,.18), 0 6px 10px rgba(60,45,20,.1);}
  :root:not([data-theme="dark"]) .op-btn{background:linear-gradient(180deg,#fffdf8,#ece4d3);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(60,45,20,.22);}
  :root:not([data-theme="dark"]) .key, :root:not([data-theme="dark"]) .pad-key{background:linear-gradient(180deg,#fffdf8,#ece4d3);color:#1c2333;box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(60,45,20,.25);}
  :root:not([data-theme="dark"]) .key.absent{background:#cfc6b3;color:#8a8270;box-shadow:none;}
  :root:not([data-theme="dark"]) .flap.dim{background:linear-gradient(180deg,var(--tile-dark-1),var(--tile-dark-2));box-shadow:inset 0 2px 3px rgba(60,45,20,.18);}
  :root:not([data-theme="dark"]) .flap.absent{background:linear-gradient(180deg,#9aa0ae,#7d8494);color:#fff;box-shadow:0 2px 0 #5f6574;}
  :root:not([data-theme="dark"]) .row-live .flap.dim{background:#f7f1e4;}
  :root:not([data-theme="dark"]) .ana-answer .flap.slot, :root:not([data-theme="dark"]) .flap.crypto-slot{color:#1c2333;box-shadow:inset 0 2px 3px rgba(60,45,20,.18);}
  :root:not([data-theme="dark"]) input[type="text"], :root:not([data-theme="dark"]) input[type="number"]{background:#fffdf8;color:#1c2333;box-shadow:inset 0 2px 3px rgba(60,45,20,.12);}
  :root:not([data-theme="dark"]) .stage{background:linear-gradient(180deg, rgba(255,255,255,.6), transparent 40%), var(--board-2);box-shadow:0 10px 30px rgba(60,45,20,.12);}
  :root:not([data-theme="dark"]) .end-panel.end-sheet, :root:not([data-theme="dark"]) .coach-card{background:radial-gradient(420px 140px at 50% 0, rgba(226,166,59,.22), transparent 70%), #fffdf8;box-shadow:0 -14px 40px rgba(60,45,20,.25);}
  :root:not([data-theme="dark"]) .end-title{text-shadow:none;color:#a26f14;}
  :root:not([data-theme="dark"]) .tabbar{background:rgba(255,253,248,.88);box-shadow:0 -6px 20px rgba(60,45,20,.12);}
  :root:not([data-theme="dark"]) .partie-hud{background:#fffdf8;}
  :root:not([data-theme="dark"]) .partie-hud-score{background:#f1eadb;color:#1c2333;}
  :root:not([data-theme="dark"]) .hist-chip, :root:not([data-theme="dark"]) .crypto-clue, :root:not([data-theme="dark"]) .kpi, :root:not([data-theme="dark"]) .seg, :root:not([data-theme="dark"]) .coach-ex{color:#1c2333;}
  :root:not([data-theme="dark"]) .countdown{background:rgba(239,232,218,.6);}
  :root:not([data-theme="dark"]) #countdown-num{color:#1c2333;text-shadow:0 0 30px rgba(226,166,59,.6);}
  :root:not([data-theme="dark"]) .game-card, :root:not([data-theme="dark"]) .partie-card, :root:not([data-theme="dark"]) .set-group, :root:not([data-theme="dark"]) .profile-head, :root:not([data-theme="dark"]) .board{box-shadow:0 6px 16px rgba(60,45,20,.08);}
  :root:not([data-theme="dark"]) .time-gauge{background:#e0d8c6;}
  :root:not([data-theme="dark"]) .rank-bar{background:#e0d8c6;box-shadow:inset 0 1px 2px rgba(60,45,20,.2);}
  :root:not([data-theme="dark"]) .switch::after{background:#fff;}
  :root:not([data-theme="dark"]) .coach-spot{box-shadow:0 0 0 9999px rgba(30,25,15,.55), 0 0 0 2px var(--accent), 0 0 24px rgba(226,166,59,.5);}
  :root:not([data-theme="dark"]) footer{color:var(--text-mute);}
}
.marquee{flex-wrap:nowrap;}
.marquee > div:first-child{min-width:0;}
:root[data-theme="light"] .version-badge{color:#6d5a2e;background:rgba(226,166,59,.18);}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .version-badge{color:#6d5a2e;background:rgba(226,166,59,.18);} }
@media (max-width:480px){ .marquee .sub{font-size:.66rem;letter-spacing:.1em;} }

/* ================================================================== */
/* v2.2 — transitions, interlude, pause, indices Mot Mystère,          */
/* adversaire en direct, taille du texte, contraste renforcé           */
/* ================================================================== */

/* Transition douce à chaque changement d'écran */
@keyframes mc-screen-in{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
#app > section:not([hidden]){animation:mc-screen-in .22s ease-out;}

/* Bouton pause */
#pause-btn[hidden]{display:none;}
#pause-btn{font-size:.8rem;letter-spacing:-.12em;}

/* Interlude « Prochain départ » (Partie complète) */
.interlude{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(6,10,22,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;}
.interlude[hidden]{display:none;}
.interlude-card{width:min(100%,30rem);text-align:center;padding:1.4rem 1.2rem 1rem;border-radius:16px;background:linear-gradient(180deg,#1a2c52 0%,#0e1830 55%,#0a1224 100%);border:1px solid var(--accent-dim);border-top:4px solid var(--accent);box-shadow:0 20px 50px rgba(0,0,0,.5);}
.interlude-kicker{font:600 .78rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.interlude-title{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:2rem;color:#efe6d0;margin:.25rem 0 .8rem;letter-spacing:.04em;text-transform:uppercase;}
.interlude-name{justify-content:center;gap:3px;}
.interlude-name .flap.small{min-width:1.45rem;height:2.1rem;font-size:.95rem;padding:0 .1rem;}
.interlude-name .flap.gap{background:none;box-shadow:none;min-width:.6rem;}
.interlude-name .flap.gap::after{display:none;}
.interlude-voie{margin-top:.8rem;font:600 .9rem "IBM Plex Mono",monospace;color:#c9cfdd;}
.interlude-prev{margin-top:.55rem;font-size:.92rem;color:#efe6d0;}
.interlude-skip{margin-top:1rem;font-size:.7rem;color:#9aa2b8;letter-spacing:.04em;}
.interlude.play .interlude-card{animation:mc-inter-in .35s cubic-bezier(.2,.9,.3,1.2);}
.interlude.play .interlude-name .flap{animation:mc-inter-flap .45s ease-out both;}
.interlude.play .interlude-name .flap:nth-child(2n){animation-delay:.05s;}
.interlude.play .interlude-name .flap:nth-child(3n){animation-delay:.1s;}
.interlude.play .interlude-name .flap:nth-child(5n){animation-delay:.15s;}
@keyframes mc-inter-in{ from{opacity:0;transform:translateY(14px) scale(.96);} to{opacity:1;transform:none;} }
@keyframes mc-inter-flap{ 0%{transform:rotateX(90deg);opacity:.2;} 60%{transform:rotateX(-12deg);opacity:1;} 100%{transform:none;} }

/* Pastilles de progression de la Partie complète */
.partie-hud-dots{display:flex;gap:5px;align-items:center;}
.partie-hud-dots .pd{width:.7rem;height:.7rem;border-radius:50%;background:var(--surface-2);border:1px solid var(--rule);}
.partie-hud-dots .pd.cur{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgba(226,166,59,.25);}
.partie-hud-dots .pd.done{background:var(--accent-dim);border-color:var(--accent-dim);}
.partie-hud-dots .pd.done.s2, .partie-hud-dots .pd.done.s3{background:var(--ok);border-color:var(--ok);}

/* Écran de pause */
.pause-overlay{position:fixed;inset:0;z-index:78;display:grid;place-items:center;padding:1rem;background:rgba(6,10,22,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.pause-overlay[hidden]{display:none;}
.pause-card{width:min(100%,24rem);text-align:center;padding:1.4rem 1.2rem 1.1rem;border-radius:16px;background:var(--board-2);border:1px solid var(--rule);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:mc-inter-in .25s ease-out;}
.pause-ico{font-size:1.6rem;color:var(--accent);letter-spacing:-.15em;}
.pause-title{font-size:1.9rem;color:var(--text);margin:.2rem 0;}
.pause-game{font-family:"Big Shoulders Display",sans-serif;font-size:1.05rem;color:var(--accent);}
.pause-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;}
.pause-actions .btn{width:100%;}
.pause-keys{margin-top:.9rem;font-size:.7rem;color:var(--text-mute);}
@media (pointer:coarse){ .pause-keys, .interlude-skip{display:none;} }

/* Mot Mystère : lettres révélées par les indices */
.motus-hints-wrap{display:flex;justify-content:center;width:100%;}
.motus-hintrow{width:min(100%,17rem);justify-content:space-between;gap:5px;}
.motus-hintrow[hidden]{display:none;}
.motus-hintrow .flap.small{flex:1;min-width:0;}
.motus-hintrow .flap.dim{opacity:.35;}
.flap.hinted{outline:2px dashed var(--accent);outline-offset:1px;}

/* Adversaire en direct (Anagramme Chrono, Calcul Éclair) */
.rival-chip{flex-basis:100%;order:6;display:flex;align-items:center;justify-content:flex-end;gap:.45rem;margin-top:.3rem;font:600 .78rem "IBM Plex Mono",monospace;color:var(--text-dim);}
.rival-chip b{color:var(--flap);font-size:.9rem;}
.rival-chip .rc-gap{padding:.12rem .5rem;border-radius:99px;background:var(--surface-2);border:1px solid var(--rule);font-weight:500;}
.rival-chip.lead .rc-gap{color:var(--ok);border-color:var(--ok);}
.rival-chip.behind .rc-gap{color:var(--bad);border-color:var(--bad);}
.rival-chip.rc-bump b{display:inline-block;animation:tapPop .45s ease-out;}

/* Accueil : prochaines récompenses */
.rank-gifts{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin-top:.45rem;}
.rank-gifts .rg{font-size:.76rem;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--rule);border-radius:99px;padding:.18rem .6rem;}
.rank-gifts .rg em{font-style:normal;color:var(--accent);margin-left:.2rem;}

/* Statistiques par jeu */
.gstat-row{grid-template-columns:2.4rem 1fr;}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce){
  #app > section:not([hidden]){animation:none;}
  .interlude.play .interlude-card, .interlude.play .interlude-name .flap, .pause-card{animation:none;}
}

/* ---- Taille du texte (Réglages › Confort de lecture) ---- */
html[data-textsize="l"]{font-size:112.5%;}
html[data-textsize="xl"]{font-size:125%;}
@media (max-width:480px){
  html[data-textsize="xl"] .flap{min-width:2.3rem;}
  html[data-textsize="xl"] #motus-grid .flap-row, html[data-textsize="xl"] #defi-m-grid .flap-row{width:100%;}
}

/* ---- Contraste renforcé ---- */
html.hc{--text-dim:#eef0f6;--text-mute:#d3d8e4;--rule:rgba(245,239,225,.42);}
html.hc[data-theme="light"]{--text-dim:#1c2333;--text-mute:#2c3446;--rule:rgba(28,35,51,.45);}
@media (prefers-color-scheme: light){
  html.hc:not([data-theme="dark"]){--text-dim:#1c2333;--text-mute:#2c3446;--rule:rgba(28,35,51,.45);}
}
html.hc :is(.btn,.back-btn,.chip-btn,.icon-btn,.op-btn,.key,.pad-key,.seg-btn,.flap-btn,.pchip,.game-card,.partie-card,.tour-card,.hero):not(:focus-visible){outline:2px solid var(--text);outline-offset:-2px;}
html.hc :is(button,input,a,[tabindex]):focus-visible{outline:3px solid var(--accent) !important;outline-offset:3px !important;}
html.hc .flap{box-shadow:0 2px 0 var(--flap-edge), inset 0 0 0 2px rgba(0,0,0,.55);}
html.hc .flap.dim{box-shadow:inset 0 0 0 2px var(--rule);}
html.hc input[type="text"]{outline:2px solid var(--text);}
html.hc .feedback.bad{font-weight:700;}
html.hc .feedback.ok{font-weight:700;}
html.hc .switch{border:2px solid var(--text);}
html.hc .time-gauge{outline:1px solid var(--text);}

/* Correctif v2.2 : en thème clair, les touches du clavier gardent leur
   couleur (bien placée / mal placée) — elles restaient blanches. */
:root[data-theme="light"] .key.ok{background:linear-gradient(180deg,#7fdab3,var(--ok));color:#0c1f18;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 #2f6b53;}
:root[data-theme="light"] .key.present{background:linear-gradient(180deg,#f6d287,var(--accent));color:#241a08;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 var(--accent-dim);}
:root.cb[data-theme="light"] .key.ok{background:linear-gradient(180deg,#9cc3ff,#3b82f6);color:#051634;}
:root.cb[data-theme="light"] .key.present{background:linear-gradient(180deg,#ffc58c,#f28c28);color:#2b1400;}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .key.ok{background:linear-gradient(180deg,#7fdab3,var(--ok));color:#0c1f18;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 #2f6b53;}
  :root:not([data-theme="dark"]) .key.present{background:linear-gradient(180deg,#f6d287,var(--accent));color:#241a08;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 var(--accent-dim);}
  :root.cb:not([data-theme="dark"]) .key.ok{background:linear-gradient(180deg,#9cc3ff,#3b82f6);color:#051634;}
  :root.cb:not([data-theme="dark"]) .key.present{background:linear-gradient(180deg,#ffc58c,#f28c28);color:#2b1400;}
}