:root {
        --bg:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 28%),
          linear-gradient(180deg, #fff6ea 0%, #f8eee3 48%, #efdeca 100%);
        --panel: rgba(255, 255, 255, 0.74);
        --ink: #221711;
        --muted: #746760;
        --good: #2d7d46bb;
        --place: #d9891888;
        --bad: #928c8650;
        --cell: rgba(255, 255, 255, 0.78);
        --line: rgba(76, 42, 28, 0.12);
        --shadow: 0 20px 60px rgba(124, 96, 73, 0.12);
        --ui-scale: 1;
        --cell-size: 74px;
        --cell-gap: 12px;
      }

      body.dark {
        --bg:
          radial-gradient(circle at top left, rgba(103, 119, 255, 0.18), transparent 24%),
          linear-gradient(180deg, #1a1b22 0%, #111319 50%, #0c0e13 100%);
        --panel: rgba(28, 30, 39, 0.76);
        --ink: #e6e6eb;
        --muted: #b3acaa;
        --good: #46a96abb;
        --place: #f2c84f88;
        --bad: #48506750;
        --cell: rgba(255, 255, 255, 0.06);
        --line: rgba(255, 255, 255, 0.1);
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
      }

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      html {
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
      }
      button,
      a,
      [role="button"] {
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
      }

      body {
        margin: 0;
        height: 100vh;
        font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
        background: var(--bg);
        color: var(--ink);
        padding: 0;
        overflow: hidden;
        display: grid;
        place-items: center;
      }

      .stage {
        width: 1440px;
        height: 980px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
      }

      .shell {
        width: 1360px;
        min-height: 920px;
        display: flex;
        flex-direction: column;
        transform: scale(var(--ui-scale));
        transform-origin: center center;
      }

      .hero {
        padding: 18px 0 18px;
        border-radius: 28px 28px 0 0;
      }

      .title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }

      h1 {
        margin: 0;
        font-size: clamp(2.35rem, 4vw, 4rem);
        line-height: 0.94;
        letter-spacing: -0.05em;
        font-weight: 800;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 15px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 999px;
        font-weight: 700;
        backdrop-filter: blur(16px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
      }

      .hero-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }

      .mode-switch {
        display: inline-flex;
        gap: 6px;
        padding: 6px;
		background: rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        backdrop-filter: blur(16px);
        
		box-shadow:
			inset 0 0 0 1px rgba(76, 42, 28, 0.12),  
			0 6px 18px rgba(124, 96, 73, 0.08);      

      }

      body.dark .mode-switch,
      body.dark .badge,
      body.dark .hero-note {
        background: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .mode-switch button {
        padding: 10px 14px;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        box-shadow: none;
      }

      .mode-switch button.active {
        background: rgba(255, 255, 255, 0.92);
        color: var(--ink);
        box-shadow: 0 8px 18px rgba(124, 96, 73, 0.08);
      }

      body.dark .mode-switch button.active {
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
      }

      .hero p {
        margin: 12px 0 0;
        max-width: 58ch;
        color: var(--muted);
        font-size: 1.08rem;
        line-height: 1.36;
      }

      .hero-note {
        margin-top: 14px;
        padding: 13px 16px;
        display: inline-flex;
        align-items: center;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.76);
        font-weight: 700;
        backdrop-filter: blur(16px);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.6),
          0 10px 26px rgba(124, 96, 73, 0.08);
      }

      .content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 28px;
        padding: 24px 0 0;
        align-items: start;
        flex: 1;
        min-height: 0;
      }

      .play-area,
      .side-panel {
        min-width: 0;
      }

      .play-area {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 16px;
        min-height: 0;
      }

      .grid {
        display: grid;
        gap: var(--cell-gap);
        width: max-content;
        max-width: 100%;
        align-content: start;
      }

      .row {
        display: grid;
        grid-template-columns: repeat(var(--cols, 5), var(--cell-size));
        gap: var(--cell-gap);
      }

      .row.shake {
        animation: row-shake 280ms ease;
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }
      }

      .cell {
        width: var(--cell-size);
        height: var(--cell-size);
        position: relative;
        border-radius: 20px;
        border: 2px solid var(--line);
        background: var(--cell);
        backdrop-filter: blur(12px);
        display: grid;
        place-items: center;
        font-size: clamp(1.1rem, calc(var(--cell-size) * 0.42), 2rem);
        font-weight: 700;
        text-transform: uppercase;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.74),
          0 10px 24px rgba(124, 96, 73, 0.08);
        transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .cell::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 0;
        height: 0;
        border-radius: 999px;
        transform: translate(-50%, -50%);
        transition: width 180ms ease, height 180ms ease, background 180ms ease;
      }

      .cell > span {
        position: relative;
        z-index: 1;
      }

      .cell.filled {
        border-color: rgba(44, 26, 18, 0.26);
        transform: translateY(-1px);
      }

      .cell.locked {
        background: rgba(241, 214, 200, 0.9);
        border-color: rgba(200, 102, 68, 0.4);
      }
	  
	  body.dark .cell.locked {
		background: rgba(70, 169, 106, 0.15); /* léger vert */
		border-color: rgba(70, 169, 106, 0.4);
	  }

      .cell.active {
        border-color: rgba(217, 93, 57, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.84),
          0 0 0 6px rgba(217, 93, 57, 0.1),
          0 12px 28px rgba(124, 96, 73, 0.12);
      }

      .cell.good {
        background: var(--good);
        border-color: var(--good);
        color: white;
      }

      .cell.place {
        background: var(--place);
		border-color: var(--place);
      }
/*
      .cell.place::before {
        width: 72%;
        height: 72%;
        background: #f2c21a;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.46),
          0 6px 18px rgba(201, 148, 17, 0.24);
      }
*/

      .cell.place > span {
        color: #4a2a1c;
      }

      .cell.bad {
        background: var(--bad);
        border-color: var(--bad);
        color: white;
      }

      .cell.reveal {
        animation: cell-pop 220ms ease;
      }

      @keyframes row-shake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-8px); }
        40% { transform: translateX(7px); }
        60% { transform: translateX(-5px); }
        80% { transform: translateX(4px); }
      }

      @keyframes cell-pop {
        0% { transform: scale(0.92); }
        60% { transform: scale(1.06); }
        100% { transform: scale(1); }
      }

      .controls {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      .controls.hidden {
        display: none;
      }

      button {
        border: 0;
        border-radius: 999px;
        padding: 14px 20px;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
        transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
      }

      button:hover {
        transform: translateY(-1px);
      }

      button:focus-visible,
      a:focus-visible,
      input:focus-visible,
      select:focus-visible,
      [role="gridcell"]:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
      }

      button.primary {
        background: linear-gradient(180deg, #df744e 0%, #cc5c39 100%);
        color: white;
        box-shadow: 0 10px 24px rgba(204, 92, 57, 0.24);
      }

      button.secondary {
        background: rgba(255, 255, 255, 0.78);
        color: #4a2a1c;
        box-shadow:
          inset 0 0 0 1px rgba(76, 42, 28, 0.08),
          0 10px 24px rgba(124, 96, 73, 0.08);
      }

      body.dark button.secondary {
        color: var(--ink);
        background: rgba(255, 255, 255, 0.08);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.08),
          0 10px 24px rgba(0, 0, 0, 0.18);
      }

      .side-panel {
        display: grid;
        gap: 16px;
        align-content: start;
        width: 300px;
        min-width: 0;
        overflow: hidden;
      }

      .card {
        background: var(--panel);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 26px;
        padding: 20px;
        backdrop-filter: blur(18px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 18px 40px rgba(124, 96, 73, 0.08);
      }

      body.dark .card {
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 18px 40px rgba(0, 0, 0, 0.24);
      }

      .card h2 {
        margin: 0 0 12px;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #61534c;
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .advanced-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
      }
      .advanced-stats .stat {
        padding: 12px 10px;
      }
      .advanced-stats .stat strong {
        font-size: 1.25rem;
      }
      .distribution {
        display: grid;
        gap: 6px;
        margin-top: 14px;
      }
      .distribution-row {
        display: grid;
        grid-template-columns: 18px 1fr 28px;
        gap: 8px;
        align-items: center;
        font-size: .82rem;
        font-weight: 800;
        color: var(--muted);
      }
      .distribution-bar {
        height: 12px;
        border-radius: 999px;
        background: rgba(58, 147, 96, .2);
        overflow: hidden;
      }
      .distribution-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #50b878, #348e5a);
      }

      .stat {
        background: rgba(255, 249, 243, 0.82);
        border-radius: 18px;
        padding: 14px 13px;
        box-shadow: inset 0 0 0 1px rgba(76, 42, 28, 0.05);
      }

      .stat strong {
        display: block;
        font-size: 1.55rem;
        letter-spacing: -0.04em;
      }

      .legend {
        display: grid;
        gap: 12px;
      }

      .legend-item {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .summary {
        display: grid;
        gap: 14px;
      }

      .summary.hidden {
        display: none;
      }

      .summary pre {
        margin: 0;
        padding: 16px;
        border-radius: 20px;
        background: rgba(255, 249, 243, 0.84);
        font: 700 1rem/1.35 "SFMono-Regular", "Menlo", monospace;
        white-space: pre-wrap;
        box-shadow: inset 0 0 0 1px rgba(76, 42, 28, 0.05);
      }

      body.dark .summary pre,
      body.dark .stat {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      }

      .swatch {
        width: 20px;
        height: 20px;
        border-radius: 6px;
      }



      /* --- Correctifs responsive + clavier virtuel --- */
      html { min-height: 100%; }
      body {
        min-height: 100vh;
        height: auto;
        overflow: auto;
        display: block;
        padding: clamp(12px, 2vw, 28px);
      }
      .stage {
        width: 100%;
        height: auto;
        min-height: calc(100vh - clamp(24px, 4vw, 56px));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
      }
      .shell {
        width: min(1360px, 100%);
        min-height: 0;
        transform: none !important;
      }
      .hero { padding: 0 0 clamp(12px, 2vw, 18px); }
      .content {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
        gap: clamp(16px, 2.5vw, 28px);
        padding-top: clamp(14px, 2vw, 24px);
      }
      .play-area {
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 4px;
        scrollbar-width: thin;
      }
      .grid { margin-inline: auto; }
      .row { grid-template-columns: repeat(var(--cols, 5), minmax(0, var(--cell-size))); }
      .cell { border-radius: clamp(10px, calc(var(--cell-size) * 0.27), 20px); }
      .side-panel { width: 100%; max-width: 300px; }
      .keyboard { display: grid; gap: 9px; justify-items: center; }
      .keyboard-row { display: flex; gap: 8px; justify-content: center; width: 100%; }
      .key {
        min-width: clamp(30px, 3.2vw, 42px);
        height: clamp(38px, 4vw, 48px);
        padding: 0 clamp(7px, 1vw, 11px);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink);
        box-shadow: inset 0 0 0 1px rgba(76, 42, 28, 0.2);
        display: inline-grid;
        place-items: center;
        font-size: clamp(0.9rem, 1.5vw, 1.05rem);
        font-weight: 900;
        line-height: 1;
      }
      .key.wide { min-width: clamp(46px, 5.5vw, 68px); }
      .key.good { background: var(--good); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20); }
      .key.place { background: var(--place); color: #4a2a1c; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20); }
      .key.bad { background: var(--bad); color: rgba(255,255,255,0.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
      .key.locked { outline: 2px solid rgba(45, 125, 70, 0.45); outline-offset: 2px; }
      body.dark .key { background: rgba(255, 255, 255, 0.06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
      body.dark .key.good { background: var(--good); color: white; }
      body.dark .key.place { background: var(--place); color: #21170f; }
      body.dark .key.bad { background: rgba(255, 255, 255, 0.12); color: rgba(230, 230, 235, 0.42); }
      @media (max-width: 980px) {
        .content { grid-template-columns: 1fr; }
        .side-panel { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
        .keyboard-card, .summary { grid-column: 1 / -1; }
      }
      @media (max-width: 640px) {
        body { padding: 10px; }
        .card { border-radius: 20px; padding: 14px; }
        .title-row, .hero-top { gap: 10px; }
        .mode-switch { width: 100%; justify-content: center; flex-wrap: wrap; }
        .mode-switch button { padding: 9px 11px; }
        .badge { margin-top: 8px; }
        .side-panel { grid-template-columns: 1fr; }
        .keyboard-row { gap: 5px; }
        .key { min-width: 28px; height: 40px; padding-inline: 7px; }
        .key.wide { min-width: 48px; }
      }



      /* --- Anti-coupe : panneau droit et clavier adaptés à la largeur réelle --- */
      .content {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 360px);
      }
      .side-panel {
        max-width: 360px;
        overflow: visible;
      }
      .card,
      .stats,
      .stat,
      .keyboard-card,
      .keyboard {
        min-width: 0;
      }
      .hero-note {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .stat {
        overflow: hidden;
      }
      .stat span,
      .stat strong {
        overflow-wrap: anywhere;
      }
      .keyboard {
        width: 100%;
        overflow: visible;
      }
      .keyboard-row {
        gap: 4px;
      }
      .key {
        flex: 1 1 0;
        min-width: 0;
        max-width: 34px;
        padding-inline: 0;
      }
      .key.wide {
        flex: 1.55 1 0;
        min-width: 0;
        max-width: 56px;
      }
      @media (max-width: 1100px) {
        .content {
          grid-template-columns: 1fr;
        }
        .side-panel {
          max-width: none;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .keyboard-card,
        .summary {
          grid-column: 1 / -1;
        }
        .key {
          max-width: 46px;
        }
        .key.wide {
          max-width: 72px;
        }
      }
      @media (max-width: 640px) {
        .side-panel {
          grid-template-columns: 1fr;
        }
        .keyboard-row {
          gap: 3px;
        }
        .key,
        .key.wide {
          min-width: 0;
          padding-inline: 0;
        }
        .key {
          flex: 1 1 0;
          max-width: none;
        }
        .key.wide {
          flex: 1.55 1 0;
          max-width: none;
        }
      }



      /* --- Anti-spam du mode aléatoire pendant une partie --- */
      .mode-switch button:disabled,
      .mode-switch button[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.45;
        pointer-events: none;
        transform: none;
      }



      /* --- Anti-contournement du mode aléatoire : pas de changement de mode pendant une partie aléatoire --- */
      .mode-switch button:disabled,
      .mode-switch button[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.45;
        pointer-events: none;
        transform: none;
      }



      /* --- Nettoyage en-tête : suppression des infos encadrées --- */
      .hero .card {
        padding-bottom: clamp(16px, 2vw, 20px);
      }



      /* --- Refonte visuelle moderne : glassmorphism doux, spacing propre, UI plus premium --- */
      :root {
        --bg:
          radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.95), transparent 28%),
          radial-gradient(circle at 84% 18%, rgba(226, 116, 80, 0.18), transparent 28%),
          radial-gradient(circle at 50% 105%, rgba(217, 137, 24, 0.15), transparent 34%),
          linear-gradient(135deg, #fff9f1 0%, #f6eadc 48%, #ead7c2 100%);
        --panel: rgba(255, 255, 255, 0.66);
        --panel-strong: rgba(255, 255, 255, 0.82);
        --ink: #251812;
        --muted: #74655d;
        --accent: #db6d48;
        --accent-2: #f2b56b;
        --good: #3a9360;
        --place: #f0c24d;
        --bad: #9b948d;
        --cell: rgba(255, 255, 255, 0.72);
        --line: rgba(76, 42, 28, 0.10);
        --shadow: 0 24px 70px rgba(112, 82, 58, 0.14);
        --soft-shadow: 0 12px 32px rgba(112, 82, 58, 0.10);
      }
      body.dark {
        --bg:
          radial-gradient(circle at 16% 12%, rgba(90, 103, 255, 0.18), transparent 25%),
          radial-gradient(circle at 86% 12%, rgba(219, 109, 72, 0.12), transparent 26%),
          linear-gradient(135deg, #171821 0%, #101218 50%, #0b0d12 100%);
        --panel: rgba(25, 28, 38, 0.72);
        --panel-strong: rgba(32, 35, 47, 0.86);
        --ink: #f2efe9;
        --muted: #b8afa8;
        --accent: #ff8a60;
        --accent-2: #ffd07a;
        --good: #50b878;
        --place: #f4cc55;
        --bad: #576073;
        --cell: rgba(255, 255, 255, 0.075);
        --line: rgba(255, 255, 255, 0.105);
        --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
        --soft-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
      }
      body {
        background: var(--bg);
        color: var(--ink);
        background-attachment: fixed;
      }
      .stage {
        align-items: center;
      }
      .shell {
        width: min(1280px, 100%);
      }
      .hero {
        padding-bottom: clamp(18px, 2.5vw, 30px);
      }
      .hero .card {
        position: relative;
        overflow: hidden;
        padding: clamp(22px, 3vw, 34px);
        border-radius: 34px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56));
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow: var(--shadow);
      }
      body.dark .hero .card {
        background:
          linear-gradient(135deg, rgba(35, 38, 50, 0.88), rgba(25, 28, 38, 0.62));
        border-color: rgba(255, 255, 255, 0.10);
      }
      .hero .card::before {
        content: "";
        position: absolute;
        inset: -45% -18% auto auto;
        width: 420px;
        height: 420px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(219, 109, 72, 0.16), transparent 66%);
        pointer-events: none;
      }
      .hero-top {
        align-items: center;
      }
      h1 {
        position: relative;
        font-size: clamp(3rem, 5.4vw, 5.8rem);
        line-height: 0.88;
        letter-spacing: -0.075em;
        background: linear-gradient(135deg, var(--ink) 20%, #8d3f28 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      body.dark h1 {
        background: linear-gradient(135deg, #fff6ea 15%, #ffb088 100%);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .mode-switch {
        position: relative;
        gap: 4px;
        padding: 7px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.68);
        box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.58);
      }
      body.dark .mode-switch {
        background: rgba(255, 255, 255, 0.075);
        border-color: rgba(255, 255, 255, 0.10);
      }
      .mode-switch button {
        padding: 12px 16px;
        border-radius: 16px;
        color: var(--muted);
        letter-spacing: -0.01em;
      }
      .mode-switch button.active {
        background: linear-gradient(180deg, var(--panel-strong), rgba(255, 255, 255, 0.70));
        color: var(--ink);
        box-shadow: 0 10px 22px rgba(124, 96, 73, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70);
      }
      body.dark .mode-switch button.active {
        background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.09));
        box-shadow: 0 10px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
      }
      .content {
        gap: clamp(24px, 3vw, 38px);
        align-items: center;
      }
      .play-area {
        justify-items: center;
        gap: 22px;
      }
      .grid {
        padding: clamp(14px, 2vw, 24px);
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.20);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
      }
      body.dark .grid {
        background: rgba(255, 255, 255, 0.035);
      }
      .cell {
        border-radius: clamp(14px, calc(var(--cell-size) * 0.25), 22px);
        border: 1px solid rgba(76,42,28,0.10);
        background:
          linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.62));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.80),
          0 10px 22px rgba(103, 76, 55, 0.11);
        font-weight: 900;
      }
      body.dark .cell {
        background:
          linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.055));
        border-color: rgba(255,255,255,0.105);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.08),
          0 12px 26px rgba(0,0,0,0.22);
      }
      .cell.active {
        border-color: rgba(219, 109, 72, 0.92);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.86),
          0 0 0 5px rgba(219, 109, 72, 0.13),
          0 14px 30px rgba(219, 109, 72, 0.16);
      }
      .cell.locked {
        background: linear-gradient(180deg, rgba(255, 226, 210, 0.96), rgba(243, 201, 177, 0.78));
        border-color: rgba(219, 109, 72, 0.35);
      }
      .cell.good {
        background: linear-gradient(180deg, #48ad72, #2f8655);
        border-color: rgba(47, 134, 85, 0.9);
      }
      .cell.place {
        background: linear-gradient(180deg, #ffd766, #e4ad32);
        border-color: rgba(228, 173, 50, 0.9);
      }
      .cell.bad {
        background: linear-gradient(180deg, #b2aaa2, #8b847d);
        border-color: rgba(139, 132, 125, 0.9);
      }
      .side-panel {
        gap: 18px;
      }
      .card {
        border-radius: 30px;
        background:
          linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.54));
        border: 1px solid rgba(255, 255, 255, 0.68);
        box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,0.58);
      }
      body.dark .card {
        background:
          linear-gradient(135deg, rgba(33,36,48,0.82), rgba(23,26,36,0.66));
        border-color: rgba(255,255,255,0.10);
        box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,0.06);
      }
      .card h2 {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
        color: var(--muted);
      }
      .stats {
        gap: 12px;
      }
      .stat {
        border-radius: 20px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.46);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.38);
      }
      body.dark .stat {
        background: rgba(255,255,255,0.055);
        border-color: rgba(255,255,255,0.08);
      }
      .stat strong {
        font-size: 1.8rem;
        line-height: 1;
      }
      .stat span {
        color: var(--muted);
        font-weight: 700;
      }
      .keyboard-card {
        padding: 20px;
      }
      .keyboard {
        gap: 8px;
      }
      .keyboard-row {
        gap: 6px;
      }
      .key {
        height: 46px;
        border-radius: 12px;
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(76, 42, 28, 0.11);
        box-shadow: 0 7px 14px rgba(103, 76, 55, 0.08), inset 0 1px 0 rgba(255,255,255,0.62);
        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
      }
      .key:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(103, 76, 55, 0.11), inset 0 1px 0 rgba(255,255,255,0.70);
      }
      body.dark .key {
        background: rgba(255,255,255,0.075);
        border-color: rgba(255,255,255,0.12);
        box-shadow: 0 8px 18px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
      }
      .key.good {
        background: linear-gradient(180deg, #50b878, #348e5a);
        color: white;
      }
      .key.place {
        background: linear-gradient(180deg, #ffd866, #e4b13a);
        color: #2a1b10;
      }
      .key.bad {
        background: linear-gradient(180deg, rgba(134,126,118,0.72), rgba(105,99,94,0.72));
        color: rgba(255,255,255,0.72);
      }
      .key.locked {
        outline: 2px solid rgba(58,147,96,0.40);
        outline-offset: 2px;
      }
      button.primary,
      button.secondary {
        border-radius: 18px;
      }
      button.primary {
        background: linear-gradient(135deg, var(--accent), #c95636);
        box-shadow: 0 14px 30px rgba(204, 92, 57, 0.24);
      }
      button.secondary {
        background: rgba(255,255,255,0.64);
        color: var(--ink);
      }
      .summary pre {
        border-radius: 20px;
        background: rgba(255,255,255,0.52);
      }
      @media (max-width: 1100px) {
        .content {
          align-items: start;
        }
        .hero-top {
          justify-content: center;
          text-align: center;
        }
      }
      @media (max-width: 640px) {
        .hero .card {
          border-radius: 26px;
        }
        h1 {
          font-size: clamp(2.5rem, 13vw, 4rem);
        }
        .mode-switch {
          border-radius: 18px;
        }
        .mode-switch button {
          border-radius: 13px;
        }
        .grid {
          padding: 10px;
          border-radius: 24px;
        }
        .card {
          border-radius: 24px;
        }
      }



      /* --- Mode sombre adapté : rendu plus profond, lisible et cohérent avec l'interface moderne --- */
      body.dark {
        --bg:
          radial-gradient(circle at 8% 2%, rgba(72, 82, 145, 0.34), transparent 34%),
          radial-gradient(circle at 92% 2%, rgba(115, 45, 42, 0.22), transparent 30%),
          linear-gradient(135deg, #1c213e 0%, #11151f 48%, #0b0e14 100%);
        --panel: rgba(27, 30, 42, 0.78);
        --panel-strong: rgba(48, 50, 62, 0.88);
        --ink: #fff2e6;
        --muted: rgba(255, 242, 230, 0.66);
        --accent: #ffb58f;
        --accent-2: #ffc66d;
        --good: #4cc384;
        --place: #ffd35d;
        --bad: #5e6472;
        --cell: rgba(255, 255, 255, 0.09);
        --line: rgba(255, 255, 255, 0.14);
        --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
        --soft-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);
      }
      body.dark .hero .card {
        background:
          linear-gradient(135deg, rgba(31, 35, 50, 0.92), rgba(25, 29, 42, 0.80) 60%, rgba(56, 33, 35, 0.72));
        border: 1px solid rgba(255, 255, 255, 0.13);
        box-shadow:
          0 28px 76px rgba(0, 0, 0, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.065);
      }
      body.dark .hero .card::before {
        background: radial-gradient(circle, rgba(255, 181, 143, 0.16), transparent 66%);
      }
      body.dark h1 {
        background: linear-gradient(105deg, #fff3e6 0%, #ffd6bf 42%, #ffad85 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 18px 42px rgba(255, 173, 133, 0.08);
      }
      body.dark .mode-switch {
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow:
          0 18px 42px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      body.dark .mode-switch button {
        color: rgba(255, 242, 230, 0.54);
      }
      body.dark .mode-switch button.active,
      body.dark #theme-toggle.active {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
        color: #fff4ea;
        box-shadow:
          0 10px 22px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
      }
      body.dark .mode-switch button:disabled,
      body.dark .mode-switch button[aria-disabled="true"] {
        color: rgba(255, 242, 230, 0.34);
        opacity: 0.52;
      }
      body.dark .grid {
        background: rgba(15, 18, 27, 0.70);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
          0 28px 72px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }
      body.dark .cell {
        background: linear-gradient(180deg, rgba(54, 57, 67, 0.98), rgba(34, 37, 46, 0.98));
        border-color: rgba(255, 255, 255, 0.15);
        color: #fff7ef;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 -18px 28px rgba(0, 0, 0, 0.10),
          0 13px 28px rgba(0, 0, 0, 0.25);
      }
      body.dark .cell.filled {
        border-color: rgba(255, 255, 255, 0.20);
      }
      body.dark .cell.active {
        border-color: rgba(255, 181, 143, 0.95);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.13),
          0 0 0 5px rgba(255, 181, 143, 0.13),
          0 14px 32px rgba(255, 181, 143, 0.12);
      }
      body.dark .cell.locked {
        background: linear-gradient(180deg, rgba(26, 72, 56, 0.92), rgba(24, 55, 46, 0.92));
        border-color: rgba(76, 195, 132, 0.38);
      }
      body.dark .cell.good {
        background: linear-gradient(180deg, #55cf8a, #329563);
        border-color: rgba(85, 207, 138, 0.70);
        color: white;
      }
      body.dark .cell.place {
        background: linear-gradient(180deg, #ffd965, #e6b33f);
        border-color: rgba(255, 217, 101, 0.72);
        color: #26180f;
      }
      body.dark .cell.bad {
        background: linear-gradient(180deg, #646a76, #464b57);
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.72);
      }
      body.dark .card {
        background: linear-gradient(135deg, rgba(26, 30, 43, 0.88), rgba(19, 23, 34, 0.82));
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
          0 22px 58px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }
      body.dark .card h2 {
        color: rgba(255, 242, 230, 0.66);
      }
      body.dark .stat {
        background: linear-gradient(180deg, rgba(45, 48, 59, 0.92), rgba(35, 39, 50, 0.92));
        border: 1px solid rgba(255, 255, 255, 0.11);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.075),
          0 10px 22px rgba(0, 0, 0, 0.18);
      }
      body.dark .stat strong {
        color: #fff7ef;
      }
      body.dark .stat span {
        color: rgba(255, 242, 230, 0.72);
      }
      body.dark .keyboard-card {
        background: linear-gradient(135deg, rgba(27, 31, 45, 0.90), rgba(19, 23, 34, 0.84));
      }
      body.dark .key {
        background: linear-gradient(180deg, rgba(54, 57, 68, 0.98), rgba(38, 41, 51, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.13);
        color: #fff4ea;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.10),
          0 9px 18px rgba(0, 0, 0, 0.22);
      }
      body.dark .key:hover:not(:disabled) {
        background: linear-gradient(180deg, rgba(66, 70, 82, 0.98), rgba(43, 47, 58, 0.98));
      }
      body.dark .key.good {
        background: linear-gradient(180deg, #58d28d, #329964);
        border-color: rgba(88, 210, 141, 0.62);
        color: white;
      }
      body.dark .key.place {
        background: linear-gradient(180deg, #ffd965, #e5b13e);
        border-color: rgba(255, 217, 101, 0.68);
        color: #28190f;
      }
      body.dark .key.bad {
        background: linear-gradient(180deg, rgba(86, 91, 103, 0.86), rgba(58, 63, 75, 0.86));
        border-color: rgba(255, 255, 255, 0.09);
        color: rgba(255, 255, 255, 0.48);
      }
      body.dark .key.locked {
        outline: 2px solid rgba(88, 210, 141, 0.34);
        outline-offset: 2px;
      }
      body.dark .summary pre {
        background: rgba(255, 255, 255, 0.055);
        color: #fff4ea;
      }
      body.dark button.primary {
        background: linear-gradient(135deg, #ff996d, #e16b48);
        box-shadow: 0 16px 34px rgba(225, 107, 72, 0.24);
      }
      body.dark button.secondary {
        background: rgba(255, 255, 255, 0.08);
        color: #fff4ea;
        border: 1px solid rgba(255, 255, 255, 0.10);
      }
      .game-status {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 20px;
      }
      .game-status .badge {
        flex: 0 0 auto;
        background: rgba(255, 255, 255, 0.64);
        color: var(--ink);
      }
      .game-note {
        flex: 1 1 280px;
        min-width: 0;
        margin: 0;
        color: var(--muted);
        font-size: 0.98rem;
        font-weight: 750;
        line-height: 1.4;
      }
      body.dark .game-status .badge {
        background: rgba(255, 255, 255, 0.12);
        color: var(--ink);
      }
      @media (max-width: 640px) {
        .game-status {
          align-items: flex-start;
          gap: 8px;
          margin-top: 16px;
        }
        .game-note {
          flex-basis: 100%;
          font-size: 0.92rem;
        }

        /* Mobile : la grille et le clavier restent dans le même flux vertical. */
        .content {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
          width: 100%;
          min-width: 0;
        }
        .play-area,
        .side-panel {
          display: contents;
        }
        .grid {
          order: 1;
          width: max-content;
          max-width: 100%;
          margin-inline: auto;
          overflow: hidden;
        }
        .keyboard-card {
          order: 2;
          width: 100%;
          min-width: 0;
          margin: 0;
          overflow: hidden;
        }
        .stats-card {
          order: 3;
          width: 100%;
          margin: 0;
        }
        .summary {
          order: 4;
          width: 100%;
          margin: 0;
        }
        .controls {
          order: 5;
          width: 100%;
        }
      }