/* ===================================================================
   IrisKids — Kids Pong
   Aligné sur le design system Quiz/Comptines : hero animé + radial bg
   =================================================================== */

   * { box-sizing: border-box; }

   html, body {
     margin: 0;
     padding: 0;
     font-family: var(--ik-font, 'Baloo 2', system-ui, sans-serif);
     color: var(--ik-text, #1a1033);
     background:
       radial-gradient(circle at 15% -10%, #fee2e2 0%, transparent 45%),
       radial-gradient(circle at 100% 100%, #fef3c7 0%, transparent 50%),
       #fffafc;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: transparent;
     /* Empêcher le pull-to-refresh, le bounce iOS et tout scroll global :
        toute la page tient à l'écran (canvas auto-redimensionné). */
     overscroll-behavior: none;
     overflow: hidden;
     /* iOS : empêche aussi le rubber band sur Safari */
     position: fixed;
     width: 100%;
     height: 100%;
   }

   /* === HERO (aligné Quiz/Comptines) === */
   .hero {
     text-align: center;
     padding: 4px 0 6px;
     animation: screen-in .3s cubic-bezier(.34,1.56,.64,1);
   }
   .hero-emoji {
     font-size: 56px;
     line-height: 1;
     display: inline-block;
     filter: drop-shadow(0 6px 12px rgba(239, 68, 68, .35));
     animation: bob 2.4s ease-in-out infinite;
   }
   @keyframes bob {
     0%, 100% { transform: translateY(0)    rotate(-3deg); }
     50%      { transform: translateY(-6px) rotate(3deg); }
   }
   @keyframes screen-in {
     from { opacity: 0; transform: translateY(10px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   .hero-title {
     font-size: 2rem;
     font-weight: 800;
     margin: 6px 0 4px;
     background: linear-gradient(135deg, #dc2626 0%, #ef4444 60%, #f97316 100%);
     -webkit-background-clip: text;
             background-clip: text;
     -webkit-text-fill-color: transparent;
     letter-spacing: -.01em;
   }
   .hero-sub {
     color: #4b3a72;
     font-size: 0.95rem;
     margin: 4px 0 12px;
   }

   /* Layout principal : centre tout horizontalement.
      Si jamais le contenu dépassait (très petit écran), on a un scroll
      interne ici plutôt qu'un scroll global qui casserait le drag. */
   .game-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     padding:
       calc(var(--ik-header-h, 52px) + 14px)
       16px
       24px;
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
   
   /* Phrase d'instruction au-dessus du plateau */
   .hint {
     margin: 0;
     max-width: 600px;
     padding: 12px 16px;
     background: rgba(255, 255, 255, .9);
     border-radius: 14px;
     text-align: center;
     font-size: .95rem;
     line-height: 1.4;
     color: #1a1033;
     box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
   }
   .hint strong { color: #ef4444; }
   #level-label {
     display: block;
     margin-top: 4px;
     font-weight: 700;
     color: #ef4444;
   }
   
   /* Sélecteur de niveau */
   .level-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     width: 100%;
     max-width: 600px;
   }
   .level-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     padding: 10px 6px;
     border: 2px solid transparent;
     border-radius: 14px;
     background: rgba(255, 255, 255, .85);
     font-family: inherit;
     cursor: pointer;
     color: #1a1033;
     box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
     transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
     -webkit-tap-highlight-color: transparent;
   }
   .level-btn:hover  { background: #fff; transform: translateY(-2px); }
   .level-btn:active { transform: scale(.95); }
   .level-btn.active {
     background: #fff;
     border-color: #ef4444;
     box-shadow: 0 8px 18px rgba(239, 68, 68, .35);
   }
   .lvl-emoji { font-size: 1.5rem; line-height: 1; }
   .lvl-name  { font-size: .85rem; font-weight: 800; }
   
   /* Canvas du jeu */
   #pong {
     background: #000;
     width: min(90vw, 600px);
     /* On réserve la place pour : header (52px) + hint (~80px) + level-row
        (~70px) + bouton rejouer optionnel (~50px) + paddings/gaps (~80px).
        Sans ça, la page devient plus haute que l'écran sur mobile et le
        drag de la raquette fait scroller au lieu de bouger la raquette. */
     height: min(calc(100vh - 320px), 400px);
     min-height: 240px;
     display: block;
     border-radius: 16px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
     touch-action: none;
     -webkit-user-select: none;
             user-select: none;
     -webkit-touch-callout: none;
   }
   
   /* Bouton "Rejouer" qui apparaît après game over */
   .restart-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 14px 28px;
     border: none;
     border-radius: 999px;
     font-family: inherit;
     font-size: 1.05rem;
     font-weight: 800;
     color: #fff;
     background: linear-gradient(135deg, #ef4444, #f97316);
     box-shadow: 0 8px 22px rgba(239, 68, 68, .45);
     cursor: pointer;
     transition: transform .12s, box-shadow .15s;
   }
   .restart-btn:hover  { box-shadow: 0 14px 28px rgba(239, 68, 68, .55); }
   .restart-btn:active { transform: scale(.97); }
   .restart-btn[hidden] { display: none; }
   
   /* Sur très petit écran, on resserre */
   @media (max-width: 380px) {
     .hint     { font-size: .85rem; padding: 10px 12px; }
     .lvl-emoji{ font-size: 1.3rem; }
     .lvl-name { font-size: .78rem; }
     .level-btn{ padding: 8px 4px; }
   }