/* =====================================================================
   ANIDOKU — styles. Direction artistique reprise de la maquette validée :
   fond crème pointillé, cartes blanches à bordure brune épaisse, ombres
   plates, palette pastel, animaux variés. Cible tactile ≥ 44 px partout.
   ===================================================================== */
:root{
  --ink:#4a3728;
  --bg:#FFF6E9;
  --card:#FFFFFF;
  --accent:#F4845F;
  --accent-dark:#e06a45;
  --border:#6b5344;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;}
html,body{margin:0; padding:0;}
body{
  font-family:'Fredoka',sans-serif;
  background:var(--bg);
  background-image:radial-gradient(#f7e3c8 1.5px, transparent 1.5px);
  background-size:26px 26px;
  color:var(--ink);
  min-height:100vh;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
}
#app{width:100%; display:flex; flex-direction:column; align-items:center;}

/* ---------- Écrans ---------- */
.screen{display:none; width:100%; flex-direction:column; align-items:center;}
.screen.show{display:flex;}
.screen-head{
  width:min(94vw,500px); display:flex; align-items:center; gap:10px;
  margin:2px 0 6px; padding-left:56px;   /* laisse la place au bouton mg-home */
}
.screen-head h2{margin:0; font-size:24px; color:var(--accent-dark); flex:1; text-align:center; padding-right:56px;}

header.brand{text-align:center; margin:4px 0 6px;}
h1{
  margin:0; font-size:clamp(28px,7vw,40px); font-weight:700; letter-spacing:1px;
  color:var(--accent-dark);
  text-shadow:0 2px 0 #fff;
}
.tagline{margin:2px 0 0; font-size:14px; opacity:.75;}

/* ---------- Panneaux & boutons (maquette) ---------- */
.panel{
  width:min(94vw,500px);
  background:var(--card);
  border:3px solid var(--border);
  border-radius:20px;
  padding:12px 14px;
  margin:8px 0;
  box-shadow:0 4px 0 rgba(107,83,68,.25);
}
.panel-title{margin:2px 0 10px; font-size:18px; text-align:center; color:var(--accent-dark);}
.row{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
.row + .row{margin-top:8px;}
.lbl{font-size:13px; font-weight:600; opacity:.7; margin-right:2px;}
.lbl-block{display:block; font-size:14px; font-weight:600; opacity:.75; margin:8px 2px 6px;}

.chip{
  font-family:inherit; font-size:16px; font-weight:600;
  border:2.5px solid var(--border); border-radius:12px;
  background:#fff; color:var(--ink);
  min-width:44px; min-height:44px; padding:6px 0;
  cursor:pointer;
}
.chip.sel{background:var(--accent); color:#fff; border-color:var(--accent-dark);}
.mode-btn{
  font-family:inherit; font-size:14px; font-weight:600;
  border:2.5px solid var(--border); border-radius:999px;
  background:#fff; color:var(--ink);
  min-height:44px; padding:7px 14px; cursor:pointer;
}
.mode-btn.sel{background:#7BC47F; color:#fff; border-color:#5ea963;}
.action-btn{
  font-family:inherit; font-size:16px; font-weight:600;
  border:2.5px solid var(--border); border-radius:14px;
  background:#FFD97D; color:var(--ink);
  min-height:48px; padding:10px 18px; cursor:pointer;
  box-shadow:0 3px 0 rgba(107,83,68,.3);
}
.action-btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(107,83,68,.3);}
.action-btn.wide{width:min(94vw,500px); display:block;}
.action-btn.full{width:100%; display:block;}
.action-btn.alt{background:#A0D2EB;}
.action-btn:disabled{opacity:.5; cursor:default;}
#verifyBtn{background:#A0D2EB;}
.icon-btn{
  font-family:inherit; font-size:20px; font-weight:700;
  width:44px; height:44px; border-radius:12px;
  border:2.5px solid var(--border); background:#fff; color:var(--ink);
  cursor:pointer; flex:none;
}
.icon-btn:active{transform:translateY(2px);}
.subtle{font-size:13px; opacity:.7; text-align:center; margin:6px 0 0; min-height:17px;}

/* ---------- Profils (accueil) ---------- */
.profile-search{margin:2px 0 10px;}
.search-input{
  width:100%; font-family:inherit; font-size:16px; font-weight:600;
  border:2.5px solid var(--border); border-radius:12px;
  padding:9px 12px; background:#fffdf6; color:var(--ink);
}
.search-input:focus{outline:none; border-color:var(--accent-dark); box-shadow:0 0 0 3px rgba(244,132,95,.25);}
.profiles{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:10px;
  /* Zone défilable bornée : 20 profils tiennent sans casser le plein-écran. */
  max-height:clamp(190px, 44vh, 460px); overflow-y:auto; overscroll-behavior:contain;
  padding:3px; margin:0 -3px; align-content:start;
}
.profile-card{
  font-family:inherit; cursor:pointer;
  border:3px solid var(--border); border-radius:18px;
  background:#fff; color:var(--ink);
  padding:10px 6px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 3px 0 rgba(107,83,68,.22);
  position:relative;
}
.profile-card:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(107,83,68,.22);}
.profile-card .avatar{width:64px; height:64px;}
.profile-card .pname{
  font-size:15px; font-weight:600; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.profile-card.last{border-color:var(--accent-dark); box-shadow:0 3px 0 rgba(224,106,69,.4);}
.profile-card .last-badge{
  position:absolute; top:-10px; right:-6px; font-size:16px;
  background:#FFD97D; border:2px solid var(--border); border-radius:999px;
  padding:1px 6px;
}
.profile-card.new{border-style:dashed; background:#fffdf6;}
.profile-card.new .plus{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  font-size:34px; color:var(--accent-dark);
}

/* ---------- Avatars & création ---------- */
.avatar{display:block;}
.avatar svg{width:100%; height:100%; display:block;}
.name-input{
  width:100%; font-family:inherit; font-size:18px; font-weight:600;
  border:2.5px solid var(--border); border-radius:14px;
  padding:11px 14px; background:#fffdf6; color:var(--ink);
  user-select:text; -webkit-user-select:text;
}
.name-input:focus{outline:none; border-color:var(--accent-dark); box-shadow:0 0 0 3px rgba(244,132,95,.25);}
.avatar-pick{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:2px 0 10px;
}
.avatar-opt{
  border:3px solid var(--border); border-radius:16px; background:#fff;
  padding:6px; cursor:pointer; min-height:44px;
}
.avatar-opt.sel{border-color:var(--accent-dark); background:#fff1e9; box-shadow:0 0 0 3px rgba(244,132,95,.3);}
.avatar-opt .avatar{width:100%; height:auto; aspect-ratio:1;}

/* ---------- Pavé PIN ---------- */
.pin-avatar{width:86px; height:86px; margin:2px 0 4px;}
.pin-title{margin:2px 0 8px; font-size:16px; font-weight:600; text-align:center;}
.pin-dots{display:flex; justify-content:center; gap:14px; margin:4px 0 14px;}
.pin-dots .dot{
  width:18px; height:18px; border-radius:50%;
  border:3px solid var(--border); background:#fff;
}
.pin-dots .dot.filled{background:var(--accent); border-color:var(--accent-dark);}
.pin-dots.shake{animation:shake .4s ease;}
.pinpad{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  max-width:280px; margin:0 auto;
}
.pinpad button{
  font-family:inherit; font-size:24px; font-weight:700;
  min-height:58px; border-radius:16px;
  border:2.5px solid var(--border); background:#fff; color:var(--ink);
  cursor:pointer; box-shadow:0 3px 0 rgba(107,83,68,.22);
}
.pinpad button:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(107,83,68,.22);}
.pinpad button:disabled{opacity:.4;}
.pinpad .pad-empty{visibility:hidden;}

/* ---------- Hub / profil ---------- */
.hub-avatar{width:110px; height:110px; margin:0 0 2px;}
.hub-panel{display:flex; flex-direction:column; gap:10px; align-items:center;}
.hub-level{margin:0; font-size:17px; font-weight:600; text-align:center;}
.hub-level b{color:var(--accent-dark);}
.hub-panel .action-btn{width:100%;}
.hub-delete{
  font-family:inherit; font-size:13px; font-weight:600;
  background:none; border:none; cursor:pointer;
  color:#c0392b; text-decoration:underline; opacity:.85;
  padding:6px; margin-top:2px;
}
.hub-delete:active{opacity:.55;}
.action-btn.danger{background:#e0455a; color:#fff; border-color:#b5303f;}
#overlayCard #ovBtn2{display:block; margin:10px auto 0;}

/* ---------- Écran de jeu ---------- */
.game-top{
  width:min(94vw,500px); display:flex; align-items:center; gap:10px;
  margin:2px 0 6px; padding-left:56px;
}
.game-info{flex:1; text-align:center; font-size:17px; font-weight:700; color:var(--accent-dark);}
.hearts{font-size:20px; letter-spacing:2px; min-width:84px; text-align:right;}
.hearts .lost{opacity:.25; filter:grayscale(1);}

#gridWrap{
  width:min(94vw, 500px, calc(100dvh - 300px));
  min-width:min(94vw, 260px);
  display:flex; justify-content:center;
}
#grid{
  display:grid;
  width:100%;
  aspect-ratio:1;
  border:4px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--border);
  box-shadow:0 5px 0 rgba(107,83,68,.25);
  touch-action:manipulation;
}
.cell{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  /* Kill iOS double-tap-to-zoom on the cell itself: the tap starts here, so
     the grid's touch-action doesn't cover it. Keeps page pinch-zoom intact. */
  touch-action:manipulation;
}
.cell .mark{
  width:72%; height:72%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.cell .xmark{
  font-size:clamp(14px,4.5vw,26px);
  font-weight:700; color:rgba(74,55,40,.55);
}
.cell svg{width:100%; height:100%; display:block;}
.cell.pop .mark{animation:pop .25s ease;}
@keyframes pop{0%{transform:scale(.3);}70%{transform:scale(1.15);}100%{transform:scale(1);}}
.cell.shake{animation:shake .4s ease;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.cell.bad{animation:badpulse 1.2s ease;}
@keyframes badpulse{
  0%,100%{box-shadow:none;}
  20%,60%{box-shadow:inset 0 0 0 4px #e0455a;}
}
.cell.locked{cursor:default;}

#hint{font-size:13px; opacity:.65; margin-top:8px; text-align:center;}
.rules{font-size:14px; line-height:1.5; text-align:center;}
.rules b{color:var(--accent-dark);}

/* ---------- Toast / overlay / confettis (maquette) ---------- */
#toast{
  position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff;
  font-size:15px; font-weight:500;
  padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
  z-index:150;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

#overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(74,55,40,.55);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
#overlay.show{display:flex;}
#overlayCard{
  background:var(--card);
  border:4px solid var(--border);
  border-radius:24px;
  padding:26px 30px;
  text-align:center;
  max-width:340px;
  box-shadow:0 6px 0 rgba(0,0,0,.2);
  animation:pop .35s ease;
}
#overlayCard h2{margin:0 0 6px; font-size:30px; color:var(--accent-dark);}
#overlayCard p{margin:0 0 16px; font-size:16px;}
.confetti{
  position:fixed; top:-40px; z-index:99;
  font-size:26px; pointer-events:none;
  animation:fall linear forwards;
}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);}}

/* ---------- Bandeau hors ligne ---------- */
#offlineBanner{
  position:fixed; top:calc(8px + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%);
  background:#FFE9B3; color:var(--ink);
  border:2px solid var(--border); border-radius:999px;
  font-size:12.5px; font-weight:600;
  padding:6px 14px; z-index:60;
  max-width:min(88vw, 420px); text-align:center;
  box-shadow:0 2px 0 rgba(107,83,68,.25);
}
#offlineBanner[hidden]{display:none;}

/* ---------- mg-home : retour vers le hub des mini-jeux ---------- */
.mg-home{position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); left:calc(12px + env(safe-area-inset-left,0px)); width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.42); color:#fff; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:9999; transition:background .15s, transform .15s;
  -webkit-tap-highlight-color:transparent;}
.mg-home svg{width:22px; height:22px; display:block;}
.mg-home:hover,.mg-home:focus-visible{background:rgba(0,0,0,.62); outline:none;}
.mg-home:active{transform:scale(.94);}

@media (prefers-reduced-motion: reduce){
  .cell.pop .mark, .cell.shake, .cell.bad, .confetti, #overlayCard, .pin-dots.shake{animation:none;}
  .mg-home{transition:none;}
}