:root {
      --bg: #0e0f12;
      --panel: #17181c;
      --grid-bg: #0b0c0f;
      --text: #e9e9ee;
      --sub: #a7a7b1;
      --accent: #5fa8ff;
      --cell: 28px; /* taille d’une case */
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; background: var(--bg); color: var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      display: grid; place-items: center;
    }
    .app { display: grid; grid-template-columns: minmax(260px, 1fr) 360px; gap: 16px; width: min(1200px, 96vw); padding: 16px; }
    .screen { position: relative;background: var(--grid-bg); border: 2px solid #2a2d34; border-radius: 12px; padding: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
    #titleCanvas{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:auto;z-index:999;background:#000}
    #titleCanvas.hidden{display:none}

    /* Grille DOM (pas de canvas) */
    #grid {
      --cols: 21;
      --rows: 25;
      display: grid;
      grid-template-columns: repeat(var(--cols), var(--cell));
      grid-template-rows: repeat(var(--rows), var(--cell));
      gap: 0;
      justify-content: start;
      position: relative;     /* pour superposer la couche sprites */
      overflow: hidden;
    }
    .cell {
      width: var(--cell); height: var(--cell);
      display: grid; place-items: center;
      background: #121318; border-radius: 6px;
      overflow: hidden;
    }
    .cell > span {
      display: block;
      width: 1em; height: 1em;
      text-align: center; line-height: 1;
      font-size: calc(var(--cell) * 0.72);
      font-family: 'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji', system-ui, sans-serif;
      user-select: none;
    }

    aside { background: var(--panel); border: 2px solid #2a2d34; border-radius: 12px; padding: 12px; }
    h1 { font-size: 18px; margin: 0 0 6px; letter-spacing: .2px; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; }
    .sub { color: var(--sub); font-size: 12px; }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .btn { cursor: pointer; background: #1f222a; color: #f2f2f7; border: 1px solid #3a3f4a; border-bottom-width: 3px; border-radius: 10px; padding: .5rem .8rem; font-weight: 700; }
    .btn:active { transform: translateY(1px); border-bottom-width: 2px; }
    .kv { display:grid; grid-template-columns: 1fr auto; gap: 6px; }
    .kv div { padding: 4px 6px; background:#1a1c22; border:1px solid #2d313a; border-radius:8px; }
    kbd { background:#20232b; border:1px solid #3a3f4a; border-bottom-width: 2px; padding: 2px 6px; border-radius: 6px; font-weight: 700; }
    .rules { white-space: pre-wrap; background:#14171e; border:1px solid #2a2f39; border-radius: 10px; padding: 8px; margin-top: 6px; }
    .tests { margin-top:8px; white-space: pre-wrap; }

    /* Couche sprites pour l'animation fluide */
    .sprite-layer { position:absolute; inset:0; pointer-events:none; z-index:5; }
    .sprite {
      position:absolute; width: var(--cell); height: var(--cell);
      display:grid; place-items:center;
      will-change: transform;
      transform: translate3d(0,0,0);
    }
    .sprite > span {
      display:block; width:1em; height:1em;
      text-align:center; line-height:1;
      font-size: calc(var(--cell) * 0.72);
      font-family: 'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji', system-ui, sans-serif;
      user-select:none;
    }