:root {
      --bg: #f0f7ff;
      --card-bg: #fff7ed;
      --card-border: #f97316;
      --text: #1e293b;
      --accent: #0284c7;
      --danger: #ef4444;
      --success: #16a34a;
      --gold: #f59e0b;
      --purple: #8b5cf6;
    }

    * {
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', system-ui, sans-serif;
      background: radial-gradient(circle at top, #f0f9ff 0%, #e0f2fe 100%);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 8px;
      overflow-x: hidden;
      position: relative;
    }

    header {
      width: 100%;
      max-width: 740px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(6px);
      padding: 8px 14px;
      border-radius: 20px;
      box-shadow: 0 6px 16px rgba(2, 132, 199, 0.08);
      border: 2px solid #e0f2fe;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar-badge {
      position: relative;
      width: 58px;
      height: 58px;
      background: radial-gradient(circle, #fef08a 0%, #fde047 100%);
      border-radius: 50%;
      border: 3px solid #f59e0b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
      transition: transform 0.15s ease;
    }

    .avatar-badge:active {
      transform: scale(0.92);
    }

    .avatar-level-tag {
      position: absolute;
      bottom: -6px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
      font-size: 0.65rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 12px;
      border: 1.5px solid white;
    }

    .status {
      font-size: 1.1rem;
      font-weight: 900;
      color: #0f172a;
    }

    .status-sub {
      font-size: 0.8rem;
      color: #64748b;
      font-weight: bold;
      margin-top: 1px;
    }

    .header-btns {
      display: flex;
      gap: 6px;
    }

    button {
      font-family: inherit;
      border: none;
      padding: 8px 12px;
      border-radius: 14px;
      font-size: 0.92rem;
      font-weight: 800;
      cursor: pointer;
      background: var(--accent);
      color: white;
      box-shadow: 0 4px 0 #0369a1;
      transition: transform 0.1s, box-shadow 0.1s;
    }

    button:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #0369a1;
    }

    #mode-banner {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 900;
      padding: 6px 18px;
      border-radius: 20px;
      font-size: 0.95rem;
      margin-bottom: 6px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 2px solid #bae6fd;
    }

    .mic-pulse {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #ef4444;
      border-radius: 50%;
      animation: pulse 0.8s infinite alternate;
    }

    @keyframes pulse {
      from { transform: scale(0.8); opacity: 0.6; }
      to { transform: scale(1.4); opacity: 1; }
    }

    #voice-status-box {
      background: white;
      border: 2px solid #cbd5e1;
      border-radius: 14px;
      padding: 6px 14px;
      font-size: 0.9rem;
      color: #475569;
      margin-bottom: 6px;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: 90%;
      text-align: center;
      font-weight: bold;
    }

    #board {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 740px;
      flex-grow: 1;
      padding: 6px 0;
    }

    .cards-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: 14px;
      width: 100%;
    }

    .card {
      width: 105px;
      height: 105px;
      background: linear-gradient(145deg, #ffffff, #fff7ed);
      border: 4px solid var(--card-border);
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.7rem;
      font-weight: 900;
      color: #c2410c;
      box-shadow: 0 7px 0 #ea580c, 0 10px 18px rgba(234, 88, 12, 0.15);
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.2s ease;
    }

    .card.voice-card {
      width: 170px;
      height: 170px;
      font-size: 4.8rem;
      border-width: 6px;
      border-radius: 34px;
      box-shadow: 0 9px 0 #ea580c;
      cursor: default;
    }

    .card:active {
      transform: scale(0.92);
    }

    .card.disappearing {
      transform: scale(0) rotate(15deg);
      opacity: 0;
      pointer-events: none;
    }

    .card.shake {
      animation: shake 0.5s ease-in-out;
      background: #fee2e2;
      border-color: var(--danger);
      box-shadow: 0 7px 0 #dc2626;
      color: #b91c1c;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-14px); }
      40%, 80% { transform: translateX(14px); }
    }

    /* ZONE DE DESSIN DU CHIFFRE AU DOIGT */
    .draw-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
      border: 4px solid #bae6fd;
      border-radius: 26px;
      padding: 12px;
      box-shadow: 0 10px 24px rgba(2, 132, 199, 0.12);
      touch-action: none;
      width: 100%;
      max-width: 340px;
    }

    .draw-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 8px;
    }

    .draw-target-title {
      font-size: 1.15rem;
      font-weight: 900;
      color: #0369a1;
    }

    .draw-score-badge {
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      padding: 3px 10px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 0.9rem;
      transition: background 0.2s, color 0.2s;
    }

    #draw-canvas {
      background: #fafaf9;
      border: 3px dashed #cbd5e1;
      border-radius: 20px;
      touch-action: none;
      cursor: crosshair;
      display: block;
      transition: border-color 0.2s;
    }

    #draw-canvas.shake {
      animation: shake 0.5s ease-in-out;
      border-color: var(--danger);
      background: #fef2f2;
    }

    .draw-controls {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      width: 100%;
    }

    .btn-draw-action {
      flex: 1;
      padding: 9px;
      font-size: 0.95rem;
    }

    .btn-fallback-voice {
      margin-top: 16px;
      background: #16a34a;
      box-shadow: 0 4px 0 #15803d;
      padding: 12px 20px;
      font-size: 1.05rem;
      border-radius: 16px;
    }

    /* Modals */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      z-index: 1000;
    }

    .hidden {
      display: none !important;
    }

    .modal-content {
      background: white;
      border-radius: 26px;
      padding: 22px;
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
      border: 3px solid #e2e8f0;
      animation: popIn 0.25s ease;
      max-height: 90vh;
      overflow-y: auto;
    }

    @keyframes popIn {
      from { transform: scale(0.85); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .form-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      font-size: 0.95rem;
      font-weight: bold;
      gap: 8px;
    }

    input[type="number"], select {
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: bold;
      padding: 6px 10px;
      border-radius: 12px;
      border: 2px solid #cbd5e1;
      width: 160px;
      text-align: center;
    }

    .char-preview-modal {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 8px 0;
      background: radial-gradient(circle, #fef9c3 0%, #fef08a 100%);
      border-radius: 24px;
      padding: 14px;
      border: 3px dashed #f59e0b;
    }

    .celebration {
      font-size: 2.2rem;
      animation: bounce 0.6s infinite alternate;
    }

    @keyframes bounce {
      from { transform: scale(1); }
      to { transform: scale(1.18) rotate(4deg); }
    }

    .score-breakdown {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 1.05rem;
      font-weight: 800;
    }

    .gain {
      color: var(--success);
      font-size: 1.25rem;
    }

    .total {
      font-size: 1.35rem;
      font-weight: 900;
      color: var(--accent);
    }

    .unlocked-box {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border: 2px solid #f59e0b;
      border-radius: 16px;
      padding: 10px;
      color: #92400e;
      font-weight: 900;
      font-size: 0.95rem;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
    }
    :root { --ink:#29304d; }
    body { font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif; color:var(--ink);
      background:radial-gradient(circle at 10% 12%,#fff6ca,transparent 27%),radial-gradient(circle at 90% 24%,#e9d9ff,transparent 35%),linear-gradient(155deg,#d8f5ff,#f9eefe 65%,#fff0df);
      min-height:100dvh; padding:clamp(10px,2vw,22px); }
    header { max-width:880px; padding:12px 18px; border:2px solid white; box-shadow:0 12px 32px #6b6ca227; margin-bottom:14px; }
    .brand { font-size:clamp(1rem,2.7vw,1.3rem); color:#514096; font-weight:950; }
    #board { max-width:880px; justify-content:flex-start; padding:10px 0 30px; }
    #mode-banner { max-width:880px; background:white; border:2px solid #d8c8ff; color:#514096;
      font-size:clamp(1rem,3vw,1.2rem); text-align:center; padding:10px 16px; }
    .card { background:linear-gradient(150deg,#fff,#f2eaff); border-color:#a98af4; color:#5942ac;
      box-shadow:0 7px 0 #8f70dd,0 13px 24px #8771bc30; }
    .card.shake { border-color:#ef707c; color:#ab3454; box-shadow:0 7px 0 #df6375; }
    .mode-shortcuts { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:880px;
      width:100%; margin:0 auto 4px; }
    .mode-shortcuts button { min-height:38px; padding:5px 11px; font-size:.85rem; background:#fff;
      color:#524778; border:2px solid #e7dcff; box-shadow:0 3px 0 #d4c3f3; }
    .mode-shortcuts button.active { background:#6856c7; border-color:#6856c7; color:#fff; box-shadow:0 3px 0 #45349b; }
    #game-feedback { min-height:26px; font-weight:800; color:#62517d; text-align:center; padding:2px 10px; }
    .match-game { width:min(100%,740px); position:relative; margin:0 auto; padding:5px 0 14px; }
    .match-topline { display:flex; justify-content:space-between; gap:10px; font-weight:900; color:#514480; margin:0 3px 9px; }
    .match-progress { height:10px; background:#e8defb; border-radius:20px; overflow:hidden; margin-bottom:14px; }
    .match-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffac6d,#ed76ab,#8c75e8); transition:width .35s; }
    .match-field { position:relative; display:grid; grid-template-columns:minmax(72px,1fr) minmax(130px,1.6fr);
      column-gap:clamp(36px,12vw,140px); background:#ffffffb8; border:2px solid #fff;
      border-radius:28px; padding:14px clamp(10px,2vw,22px); box-shadow:0 18px 40px #6b6ca22a; }
    .match-column { display:grid; gap:9px; z-index:1; }
    .match-tile { width:100%; min-height:clamp(70px,10vh,92px); border:3px solid #cfbdf9;
      border-radius:22px; background:#fff; cursor:pointer; touch-action:none; box-shadow:0 5px 0 #d6c5f2;
      display:flex; align-items:center; justify-content:center; position:relative; padding:6px;
      transition:transform .15s,background .2s; }
    .match-tile:hover:not(.matched),.match-tile.selected { transform:translateY(-3px); border-color:#896de6; background:#f7f1ff; }
    .match-number { font-size:clamp(2.5rem,7vw,3.8rem); font-weight:1000; color:#674fb3; line-height:1; }
    .match-group { border-color:#ffd7a6; box-shadow:0 5px 0 #f3d39f; flex-wrap:wrap; gap:2px;
      font-size:clamp(1.35rem,3.5vw,2.05rem); line-height:1.15; }
    .match-group:hover:not(.matched) { border-color:#efa977; background:#fff9ef; }
    .match-tile.matched { background:#e8faef; border-color:#79d5a2; box-shadow:0 5px 0 #a2dfbc; cursor:default; }
    .match-tile.wrong { animation:shake .35s; background:#fff0f2; border-color:#ef899e; }
    .match-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
    .match-lines path { fill:none; stroke-linecap:round; stroke-width:7; filter:drop-shadow(0 2px 2px #5c4a9138); }
    .match-lines .preview { stroke:#a391ee; stroke-dasharray:10 8; }
    .match-lines .preview[hidden] { display:none; }
    .match-lines .completed { stroke:#35b986; stroke-dasharray:1200; animation:link-grow .45s ease-out; }
    @keyframes link-grow { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }
    .match-hint { color:#605684; text-align:center; font-weight:800; font-size:.85rem; margin-top:13px; }
    .match-empty { font-size:1rem; color:#756393; font-weight:800; }
    button:focus-visible,.card:focus-visible,select:focus-visible,input:focus-visible { outline:4px solid #5c43d1; outline-offset:3px; }
    @media(max-width:560px) {
      header { padding:8px; } .brand { display:none; } .avatar-badge { width:47px; height:47px; flex:none; }
      #header-avatar { width:42px; height:42px; } .header-btns button { padding:6px 8px; font-size:.8rem; }
      .status-sub { font-size:.68rem; } .mode-shortcuts { gap:5px; }
      .mode-shortcuts button { padding:4px 8px; font-size:.76rem; }
      .match-field { column-gap:clamp(31px,9vw,58px); padding:10px 8px; }
      .match-tile { min-height:67px; border-radius:17px; } .match-group { font-size:clamp(1.1rem,5vw,1.5rem); }
      #draw-canvas { max-width:100%; height:auto; } .form-group { flex-wrap:wrap; }
    }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
    header,#board,.mode-shortcuts,#mode-banner { max-width:1120px; }
    header { margin-bottom:10px; }
    #board { flex-grow:0; padding-top:4px; }
    #mode-banner { border:0; background:transparent; box-shadow:none; margin:8px 0 5px; padding:4px; }
    .section-tabs { display:flex; gap:10px; width:min(100%,1120px); margin:2px 0 10px; }
    .section-tabs button { flex:1; display:flex; justify-content:center; align-items:center; gap:10px;
      background:#ffffffb8; color:#5c4b88; border:2px solid #e6d8fb; box-shadow:0 3px 0 #d4c4ec; font-size:1.2rem; padding:12px; }
    .section-tabs button.active { background:#6450b9; color:white; border-color:#6450b9; box-shadow:0 4px 0 #463486; }
    .adventure-bar { display:flex; align-items:center; gap:20px; width:min(100%,1120px); padding:10px 14px;
      border-radius:18px; background:#ffffffc9; color:#5b4589; font-size:.84rem; }
    .adventure-bar>div { flex:1; }
    .xp-track { background:#e7def7; height:8px; border-radius:8px; overflow:hidden; margin-top:5px; }
    .xp-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,#efaa53,#e778ac,#8b66e1); transition:width .4s; }
    #btn-avatar { background:#7753bf; box-shadow:0 3px 0 #4e3286; min-height:38px; font-size:.86rem; }
    #btn-avatar.ready { background:#168566; box-shadow:0 3px 0 #0c5943; }
    .match-game { width:min(100%,1020px); }
    .match-field { grid-template-columns:minmax(100px,1fr) minmax(160px,1.7fr); column-gap:clamp(40px,15vw,240px); }
    .match-tile { min-height:clamp(66px,10vh,106px); }
    .outfit-game .match-field { grid-template-columns:1fr 1fr; }
    .outfit-game .match-tile { flex-direction:column; gap:3px; }
    .character-icon { font-size:clamp(2.5rem,6vh,4.3rem); line-height:1.15; }
    .character-name { font-size:clamp(.75rem,1.7vw,1rem); font-weight:800; color:#564571; line-height:1.2; }
    .avatar-stage { display:flex; justify-content:center; background:radial-gradient(ellipse,#fff0bb,transparent 70%); }
    #avatar-modal { z-index:1100; }
    #avatar-evolve-info { color:#615777; line-height:1.5; }
    .avatar-choice-panel p { margin:6px 0 10px; color:#514078; font-weight:800; }
    .avatar-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:10px auto 15px; }
    .avatar-option { min-width:0; min-height:144px; padding:5px 3px 9px; border:2px solid #bfa5e9; border-radius:18px; background:#fbf7ff; color:#503b78; box-shadow:0 4px 0 #d7c8ef; display:flex; align-items:center; flex-direction:column; font-size:.87rem; line-height:1.15; font-weight:800; }
    .avatar-option svg { width:min(100%,95px); height:108px; flex:none; }
    .avatar-option:hover,.avatar-option:focus-visible { border-color:#654db2; background:#f1e9ff; outline:2px solid #654db2; outline-offset:2px; }
    .evolution-path { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; }
    .evolution-step { border-radius:12px; background:#eee8f6; padding:7px; min-width:37px; color:#6e6581; font-size:.78rem; }
    .evolution-step.unlocked { background:#dcf6e9; color:#1c7857; }
    .evolution-step.current { outline:2px solid #8865cc; }
    .quiet-btn { background:#eee9f5; color:#62537e; box-shadow:0 3px 0 #d4c7e7; }
    button:disabled { opacity:.65; cursor:default; }
    #btn-evolve { background:#198665; box-shadow:0 4px 0 #0d5b43; }
    .cards-grid { margin-top:12px; }
    @media(min-width:800px) { .card { width:140px; height:140px; font-size:3.7rem; } }
    @media(max-width:560px) {
      body { padding:8px; } .section-tabs { gap:7px; margin-bottom:8px; }
      .section-tabs button { font-size:.95rem; gap:5px; padding:10px 5px; }
      .adventure-bar { padding:8px 10px; gap:9px; font-size:.72rem; }
      #btn-avatar { font-size:.73rem; padding:7px; }
      .match-field { column-gap:36px; } .match-tile { min-height:70px; }
      .outfit-game .match-tile { min-height:88px; padding:4px; }
      .mode-shortcuts button { min-height:36px; }
      #game-feedback { font-size:.8rem; }
    }
    #pair-families { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:4px 0 8px; }
    #pair-families button { background:#fffaf2; color:#776145; border:2px solid #f2dfba; box-shadow:0 3px 0 #dccba8; font-size:.85rem; }
    #pair-families button.active { background:#f2d89d; border-color:#d7b666; color:#584723; }
    .pair-art { display:block; width:clamp(65px,10vh,116px); height:clamp(65px,10vh,116px); overflow:visible; flex:none; }
    .shadow-art { filter:brightness(0) saturate(0); opacity:.7; }
    .animal-icon { font-size:clamp(3rem,8vh,5rem); line-height:1.2; }
    .outfit-game .match-tile { min-height:112px; padding:7px 5px; }
    .character-name { font-size:clamp(.75rem,1.5vw,.95rem); line-height:1.2; }
    #header-avatar { width:58px; height:62px; }
    .avatar-badge { width:65px; height:65px; background:linear-gradient(140deg,#faf0da,#eadcf4); border-color:#d9c0e6; }
    .avatar-stage svg { width:220px; height:240px; }
    @media(max-width:560px) {
      #pair-families { gap:5px; } #pair-families button { padding:6px 8px; font-size:.73rem; }
      .pair-art { width:66px; height:66px; } .outfit-game .match-tile { min-height:98px; }
      .avatar-badge { width:48px; height:48px; } #header-avatar { width:43px; height:47px; }
      .match-hint { font-size:.75rem; }
    }