/* ============================================================================
 *  eshop.css — Recréation de l'UI Nintendo 3DS eShop (fidèle aux captures).
 * ========================================================================== */
@font-face { font-family:'MRound'; src:url('../assets/fonts/mplus-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'MRound'; src:url('../assets/fonts/mplus-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'MRound'; src:url('../assets/fonts/mplus-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Fredoka'; src:url('../assets/fonts/fredoka-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root{
  --cream1:#efe4c6; --cream2:#f9f2df; --cream3:#fdf9ee;
  --line:#e4d8b6; --line-soft:#efe7cf;
  --orange:#f28c00; --orange-d:#d97400; --orange-glow:#ff9e1b;
  --pink:#ec4e7e; --pink-d:#d5386a;
  --blue:#3fa9e0; --blue-d:#2b8ec2;
  --ink:#5c5241; --ink-soft:#948a73; --ink-faint:#b3a988;
  --red:#e63329; --gold:#f6a417;
  --card:#ffffff;
  --r:16px;
  --shadow:0 3px 0 rgba(0,0,0,.06), 0 6px 14px rgba(120,95,40,.16);
  --screen-w: 512px;   /* largeur logique d'un écran DS (2x) */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  background:#0c0c0e;
  font-family:'MRound','Segoe UI',system-ui,sans-serif;
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  display:flex; align-items:center; justify-content:center;
}

/* ------------------------------------------------------------------ Device */
#device{
  display:flex; flex-direction:column; gap:10px;
  height:100vh; padding:10px 0;
  aspect-ratio:auto;
}
.screen{
  position:relative; width:var(--screen-w);
  aspect-ratio:4/3; max-height:calc((100vh - 40px)/2);
  border-radius:10px; overflow:hidden;
  background:var(--cream2);
  box-shadow:0 0 0 3px #1a1a1e, 0 8px 24px rgba(0,0,0,.5);
}
/* on garde les deux écrans proportionnés à la hauteur dispo */
@media (max-aspect-ratio:1/1){ :root{ --screen-w: 96vw; } }

/* modes plein écran pour la vraie console dual-screen (WebView haut / bas) */
body.mode-top #device, body.mode-bottom #device{ padding:0; gap:0; height:100vh; }
body.mode-top .hinge, body.mode-bottom .hinge{ display:none; }
body.mode-top .screen.bottom, body.mode-bottom .screen.top{ display:none; }
/* plein écran : pas de centrage flex (sinon un débordement vertical se répartit
   moitié en haut → la barre Menu/Recherche est coupée). On aligne en haut. */
body.mode-top, body.mode-bottom{ display:block; overflow:hidden; }
body.mode-top .screen.top, body.mode-bottom .screen.bottom{
  width:100vw; height:100vh; max-height:none; aspect-ratio:auto; border-radius:0; box-shadow:none;
}

/* ------------------------------------------------------------- Écran haut */
.top{ background:linear-gradient(#f7efdb,#efe4c6); }
.statusbar{
  position:absolute; top:0; left:0; right:0; height:26px; z-index:5;
  display:flex; align-items:center; gap:8px; padding:0 8px;
  background:linear-gradient(#fdfaf1,#f0ead6);
  border-bottom:1px solid var(--line);
  font-size:13px; color:#7d7358;
}
.statusbar .net{ display:flex; align-items:center; gap:5px; }
.statusbar .bars{ display:inline-flex; align-items:flex-end; gap:1.5px; height:12px; }
.statusbar .bars i{ width:3px; background:var(--blue); border-radius:1px; }
.statusbar .bars i:nth-child(1){height:4px} .statusbar .bars i:nth-child(2){height:7px}
.statusbar .bars i:nth-child(3){height:10px} .statusbar .bars i:nth-child(4){height:13px}
.statusbar .pill{ background:linear-gradient(#a9d8f0,#7cc0e6); color:#fff; font-weight:700;
  padding:1px 12px; border-radius:9px; font-size:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.statusbar .coins{ display:flex; align-items:center; gap:4px; margin-left:6px; }
.statusbar .coin{ width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe89a,#f0a81e);
  border:1px solid #d98a12; font-size:9px; display:grid; place-items:center; color:#a9670a; font-weight:800; }
.statusbar .spacer{ flex:1; }
.statusbar .batt{ width:22px;height:12px;border:1.5px solid #7d7358;border-radius:2px;position:relative; }
.statusbar .batt::after{ content:''; position:absolute; right:-3px; top:3px; width:2px; height:4px; background:#7d7358; }
.statusbar .batt i{ position:absolute; inset:1.5px; background:#e08a2a; border-radius:1px; }

/* bannière du jeu en vedette (écran du haut) */
.banner{
  position:absolute; top:26px; left:0; right:0; bottom:42px;
  display:grid; place-items:center; overflow:hidden;
}
.banner .art{ position:absolute; inset:0; }
/* deux couches pour le fondu croisé + glissé (carrousel plein écran) */
.banner .art .al{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transform:translateX(0); will-change:opacity,transform;
  transition:opacity .55s ease, transform .8s cubic-bezier(.25,.6,.25,1); }
.banner .art .al.show{ opacity:1; transform:translateX(0); }
.banner .art .al.enter{ opacity:0; transform:translateX(7%); transition:none; }   /* position de départ (droite) */
.banner .art .al.exit{ opacity:0; transform:translateX(-7%); }                     /* sort par la gauche */
.banner .fade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 55%); }
/* texte : même glissé/fondu que l'image */
.banner .title.tenter, .banner .sub.tenter{ animation:bannerText .6s cubic-bezier(.25,.6,.25,1); }
@keyframes bannerText{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:translateX(0);} }
/* mode INFO (pas de bigart) : icône (milieu-gauche) + description (milieu-droite) */
.banner .binfo{ position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; gap:5%; padding:0 7%; }
.banner.info-mode .binfo{ display:flex; }
.banner.info-mode .title, .banner.info-mode .sub{ display:none; }         /* masque le gros titre du bas */
.banner .bi-icon{ flex:0 0 auto; width:34%; max-width:220px; aspect-ratio:1; border-radius:16px;
  background-size:cover; background-position:center; box-shadow:0 8px 24px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.15);
  animation:bannerText .5s cubic-bezier(.25,.6,.25,1); }
.banner .bi-desc{ flex:1 1 auto; max-width:52%; color:#fff; animation:bannerText .55s cubic-bezier(.25,.6,.25,1) .04s backwards; }
.banner .bi-desc .bi-title{ font-family:'Fredoka'; font-weight:600; font-size:30px; line-height:1.05; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.banner .bi-desc .bi-meta{ font-weight:700; font-size:15px; opacity:.9; margin-top:6px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.banner .bi-desc .bi-syn{ font-size:13px; line-height:1.45; margin-top:12px; opacity:.92; max-height:6.5em; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.banner .bi-desc .bi-syn.muted{ opacity:.55; font-style:italic; }
.banner .title{
  position:relative; z-index:2; align-self:flex-end; margin:0 0 14px 18px; justify-self:start;
  font-family:'Fredoka'; font-weight:600; color:#fff; font-size:34px; line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.4); max-width:70%;
}
.banner .sub{ position:relative; z-index:2; align-self:flex-end; justify-self:start;
  margin:0 0 52px 20px; color:#fff; font-weight:700; font-size:14px; opacity:.9;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }
.sale-flag{
  position:absolute; top:16px; right:-2px; z-index:3;
  background:linear-gradient(#f7628f,#e83f72); color:#fff; padding:6px 16px 6px 20px;
  font-weight:800; box-shadow:0 3px 8px rgba(180,40,80,.4);
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
}
.sale-flag b{ font-size:20px; } .sale-flag span{ font-size:11px; display:block; margin-top:-2px; }

.ticker{
  position:absolute; left:0; right:0; bottom:26px; height:16px; z-index:4;
  background:linear-gradient(#4a4335,#39332a); color:#e9e2cf; overflow:hidden;
  display:flex; align-items:center; font-size:11px;
}
.ticker span{ white-space:nowrap; padding-left:100%; animation:ticker 26s linear infinite; }
@keyframes ticker{ to{ transform:translateX(-100%); } }
.balance{
  position:absolute; left:0; right:0; bottom:0; height:26px; z-index:4;
  background:linear-gradient(#faf4e2,#efe6cd); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-weight:700; color:#6a6048; font-size:15px;
}

/* charnière entre les deux écrans */
.hinge{ height:0; }

/* ----------------------------------------------------------- Écran bas */
.bottom{ background:
  radial-gradient(120% 80% at 50% -10%, #fdf7e8, transparent 60%),
  linear-gradient(#f4ead0,#eadfc0); }
.topbar{
  position:absolute; top:0; left:0; right:0; height:44px; z-index:6;
  display:flex; align-items:center; gap:8px; padding:6px 8px;
}
.menu-tab{
  display:flex; align-items:center; gap:6px; height:32px; padding:0 14px 0 10px;
  background:linear-gradient(#ffa12a,#f18708); color:#fff; font-weight:800; font-size:15px;
  border-radius:8px 8px 10px 10px; box-shadow:0 2px 0 var(--orange-d),0 3px 6px rgba(180,110,20,.35);
  cursor:pointer;
}
.menu-tab .ic{ width:18px;height:15px;border-radius:2px;background:#fff;position:relative; }
.menu-tab .ic::before,.menu-tab .ic::after,.menu-tab .ic i{ content:''; position:absolute; left:3px; right:3px; height:2px; background:var(--orange); border-radius:1px; }
.menu-tab .ic::before{ top:3px; } .menu-tab .ic i{ top:6.5px; } .menu-tab .ic::after{ top:10px; }
.searchfield{
  flex:1; height:32px; background:#fff; border-radius:8px; border:1px solid #d9cca6;
  display:flex; align-items:center; padding:0 10px; color:#a99; font-size:15px;
  box-shadow:inset 0 2px 3px rgba(120,100,50,.12); cursor:text; overflow:hidden;
}
.searchfield.filled{ color:var(--ink); }
.searchbtn{
  width:34px;height:34px;border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(#ffa12a,#f18708); box-shadow:0 2px 0 var(--orange-d),0 3px 6px rgba(180,110,20,.35);
}
.searchbtn svg{ width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4; }

/* zone de contenu (les vues défilent ici) */
.stage{ position:absolute; top:44px; left:0; right:0; bottom:0; overflow:hidden; }
.view{ position:absolute; inset:0; display:flex; flex-direction:column;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s; }
.view.enter-right{ transform:translateX(100%); opacity:0; }
.view.enter-left{ transform:translateX(-100%); opacity:0; }
.view.exit-left{ transform:translateX(-30%); opacity:0; }
.view.exit-right{ transform:translateX(30%); opacity:0; }

/* -------- carte info (au-dessus du carousel) -------- */
.infowrap{ padding:8px 12px 0; }
.info-head{
  display:inline-block; background:linear-gradient(#f7628f,#e6416f); color:#fff;
  font-weight:700; font-size:12px; padding:3px 16px; border-radius:8px 8px 0 0; margin-left:6px;
}
.card{
  background:var(--card); border-radius:12px; box-shadow:var(--shadow);
  padding:10px 14px 12px; position:relative;
}
.stars{ display:flex; align-items:center; gap:2px; }
.stars .s{ width:15px;height:15px; }
.stars .cnt{ color:var(--ink-soft); font-size:12px; margin-left:6px; font-weight:500; }
.card .name{ font-weight:800; font-size:19px; color:#4f4636; margin:3px 0 2px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.card .name b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .price{ white-space:nowrap; font-weight:800; }
.card .price .old{ color:#b9ad8e; text-decoration:line-through; font-size:14px; margin-right:6px; }
.card .price .now{ color:var(--red); font-size:20px; }
.card .meta{ color:var(--ink-soft); font-size:13px; font-weight:500;
  border-top:1px solid #f0ead9; margin-top:8px; padding-top:6px;
  display:flex; gap:14px; flex-wrap:wrap; }
.card .meta b{ color:#6f654e; }
.card .saleends{ text-align:center; color:var(--orange); font-weight:700; font-size:13px; margin-top:6px; }

/* -------- carousel de tuiles -------- */
.carousel{ flex:1; display:flex; align-items:center; gap:14px; padding:6px 40px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; }
.carousel::-webkit-scrollbar{ display:none; }
/* index A-Z de la vue console (pagination par 1re lettre) */
/* index A-Z : les 27 touches se partagent la largeur (aucun débordement/défilement),
   avec un retrait à gauche qui dégage le bouton retour → la lettre active est TOUJOURS visible. */
.alpha{ display:flex; gap:1px; padding:3px 12px 10px 66px; align-items:stretch; }
.alpha-k{ flex:1 1 0; min-width:0; text-align:center; font-weight:800; font-size:13px; color:#8a7f66;
  padding:3px 0; border-radius:7px; cursor:pointer; transition:background .12s, color .12s, transform .12s; }
.alpha-k.off{ opacity:.25; pointer-events:none; }
.alpha-k.on{ background:var(--orange); color:#fff; transform:translateY(-1px); box-shadow:0 2px 5px rgba(240,140,0,.4); }
.tile{
  position:relative; flex:0 0 auto; width:92px; height:92px; border-radius:14px;
  scroll-snap-align:center; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease;
  box-shadow:0 3px 8px rgba(120,95,40,.28); overflow:visible; background:#ddd;
}
.tile .box{ position:absolute; inset:0; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; text-align:center; }
.tile .box .lbl{ font-family:'Fredoka'; font-weight:600; color:#fff; font-size:12px; line-height:1.05;
  padding:4px; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.tile .box .cbadge{ position:absolute; bottom:3px; right:4px; font-size:8px; font-weight:800;
  background:rgba(0,0,0,.35); color:#fff; padding:1px 5px; border-radius:6px; }
.tile .box.hasart .lbl{ display:none; }   /* jaquette réelle chargée : on masque le libellé généré */
/* dossiers console sur l'accueil */
.row.folders .tile.folder{ width:100px; }
.tile.folder .box{ display:block; }
.tile.folder .flbl{ position:absolute; left:0; right:0; bottom:0; padding:5px 6px; font-family:'Fredoka'; font-weight:600;
  color:#fff; font-size:12px; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.6); background:linear-gradient(transparent,rgba(0,0,0,.55)); }
.tile.folder .fcount{ position:absolute; top:4px; right:5px; font-size:9px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.4); padding:1px 6px; border-radius:8px; z-index:2; }
/* pictogramme original de la console (blanc, centré) */
.tile.folder .cpict{ position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); width:58%; height:58%; color:#fff; opacity:.94; }
.tile.folder .cpict svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tile.selected{ transform:scale(1.16); z-index:3; }
.tile.selected::after{
  content:''; position:absolute; inset:-5px; border-radius:18px;
  border:4px solid var(--orange-glow); box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(240,140,0,.5);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 2px #fff, 0 6px 20px rgba(240,140,0,.75); } }
.ribbon{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:4;
  font-weight:800; font-size:10px; color:#fff; padding:2px 9px; border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.25); }
.ribbon::after{ content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:inherit; }
.ribbon.new{ background:var(--blue); } .ribbon.new::after{ color:var(--blue); }
.ribbon.sale{ background:var(--pink); } .ribbon.sale::after{ color:var(--pink); }
.ribbon.demo{ background:#8bc34a; } .ribbon.demo::after{ color:#8bc34a; }
.tooltip{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  background:#fff; color:#5a5040; font-weight:700; font-size:12px; padding:5px 12px; border-radius:10px;
  white-space:nowrap; box-shadow:var(--shadow); z-index:5; }
.tooltip::before{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#fff; }

/* -------- étagères (home) -------- */
.shelf-label{ font-weight:800; color:#6f654e; font-size:14px; padding:6px 16px 0; display:flex; align-items:center; gap:8px; }
.shelf-label .dot{ width:9px;height:9px;border-radius:50%; }
.home-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; padding-bottom:10px; }
.home-scroll::-webkit-scrollbar{ display:none; }
.home-scroll .row{ display:flex; gap:14px; padding:20px 16px 34px; overflow-x:auto; overflow-y:visible; scrollbar-width:none; scroll-snap-type:x proximity; scroll-behavior:smooth; }
.home-scroll .row::-webkit-scrollbar{ display:none; }
.home-scroll .row .tile{ scroll-snap-align:center; }

/* bouton retour rond gris (bas-gauche) */
.backbtn{
  position:absolute; left:8px; bottom:8px; z-index:8; width:52px;height:40px; border-radius:20px;
  background:linear-gradient(#b8b1a2,#9a9284); box-shadow:0 3px 0 #7d766a,0 4px 8px rgba(0,0,0,.25);
  display:grid; place-items:center; cursor:pointer;
}
.backbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #7d766a; }
.backbtn svg{ width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }

/* -------- vue détail -------- */
.detail{ padding:10px 14px; gap:10px; }
.detail .d-head{ display:flex; gap:12px; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, margin .3s ease; max-height:130px; }
.detail.scrolled .d-head{ max-height:0; opacity:0; margin:0; }   /* l'en-tête "migre" vers l'écran du haut */
.detail .d-box{ flex:0 0 108px; height:108px; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.detail .d-info{ flex:1; min-width:0; }
.detail .d-title{ font-weight:800; font-size:20px; color:#4f4636; line-height:1.1; }
.detail .d-sub{ color:var(--ink-soft); font-weight:600; font-size:13px; margin:3px 0 6px; }
.detail .d-desc{ color:#6b6150; font-size:13px; line-height:1.5; flex:1; overflow:auto;
  background:#fff; border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); }
/* galerie art/screenshots (fiche jeu) */
.detail .d-shots{ display:flex; gap:8px; overflow-x:auto; padding:8px 2px 2px; scrollbar-width:none; flex:0 0 auto; }
.detail .d-shots::-webkit-scrollbar{ display:none; }
.detail .d-shot{ flex:0 0 auto; height:84px; min-width:60px; border-radius:8px; overflow:hidden;
  background:#e8dfc8; box-shadow:0 2px 5px rgba(0,0,0,.18); display:flex; align-items:center; }
.detail .d-shot.skel{ width:132px; animation:shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
.detail .d-shot img{ height:100%; width:auto; display:block; }
.dl-btn{
  align-self:center; margin-top:6px; display:flex; align-items:center; gap:10px;
  background:linear-gradient(#8ed04a,#5fae2a); color:#fff; font-weight:800; font-size:18px;
  padding:12px 30px; border-radius:14px; cursor:pointer;
  box-shadow:0 3px 0 #4d9020,0 5px 12px rgba(70,140,30,.4);
}
.dl-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #4d9020; }
.dl-btn .price{ background:rgba(255,255,255,.25); padding:2px 10px; border-radius:8px; font-size:15px; }
/* rangée téléchargement + petit bouton "versions" (autres régions/révisions) */
.dl-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.dl-row .dl-btn{ align-self:auto; margin-top:0; }
.dl-plus{ display:flex; align-items:center; gap:1px; background:linear-gradient(#8ed04a,#5fae2a);
  padding:12px 13px; border-radius:14px; cursor:pointer; box-shadow:0 3px 0 #4d9020,0 5px 12px rgba(70,140,30,.4); }
.dl-plus:active{ transform:translateY(2px); box-shadow:0 1px 0 #4d9020; }
.dl-plus-chev{ opacity:.8; margin-left:-2px; }
.da-item .ver-lbl{ font-weight:800; }
.da-item .ver-sz{ margin-left:auto; color:var(--ink-soft); font-weight:700; font-size:13px; }

/* -------- clavier de recherche -------- */
.searchview{ padding:8px 10px; gap:8px; }
.results{ flex:1; overflow-y:auto; scrollbar-width:none; }
.results::-webkit-scrollbar{ display:none; }
.result-row{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px;
  padding:8px 10px; margin:0 4px 8px; box-shadow:0 2px 6px rgba(120,95,40,.15); cursor:pointer; }
.result-row.sel{ outline:3px solid var(--orange-glow); outline-offset:1px; }
.result-row .rbox{ width:48px;height:48px;border-radius:10px; overflow:hidden; flex:0 0 auto; }
.result-row .rt{ font-weight:800; color:#4f4636; font-size:15px; }
.result-row .rm{ color:var(--ink-soft); font-size:12px; font-weight:600; }
.result-row .rp{ margin-left:auto; color:var(--ink-soft); font-weight:700; font-size:13px; white-space:nowrap; }
.emptymsg{ text-align:center; color:var(--ink-soft); padding:26px 10px; font-weight:600; }

.kb-hide{ text-align:center; font-weight:700; font-size:12.5px; color:#7a6f52; background:#e7dcc0; border-radius:9px; padding:7px; cursor:pointer; user-select:none; }
.kb-hide:active{ background:#dcd0af; transform:translateY(1px); }
.searchview.kb-hidden .keyboard{ display:none; }
.keyboard{ background:#d9cfb4; border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:5px; }
.krow{ display:flex; gap:5px; justify-content:center; }
.key{ flex:1; min-width:0; height:34px; border-radius:8px; background:linear-gradient(#fff,#f0ead9);
  box-shadow:0 2px 0 #c9bd9c; display:grid; place-items:center; font-weight:700; color:#5c5241;
  font-size:16px; cursor:pointer; }
.key:active{ transform:translateY(2px); box-shadow:none; background:#efe7cf; }
.key.wide{ flex:2.2; } .key.space{ flex:5; }
.key.act{ background:linear-gradient(#ffa12a,#f18708); color:#fff; box-shadow:0 2px 0 var(--orange-d); }
.key.kbfocus{ outline:3px solid var(--orange-glow); outline-offset:1px; background:linear-gradient(#fff7e6,#ffe6b8); color:#7a5a10; position:relative; z-index:2; }   /* touche ciblée à la manette/clavier */

/* -------- overlay téléchargement -------- */
.dl-overlay{ position:absolute; inset:0; z-index:20; display:grid; place-items:center;
  background:rgba(60,52,36,.45); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.dl-overlay.show{ opacity:1; pointer-events:auto; }
.dl-panel{ width:78%; max-width:360px; background:#fff; border-radius:18px; padding:18px 20px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,.4); text-align:center; transform:translateY(10px) scale(.96); transition:transform .25s; }
.dl-overlay.show .dl-panel{ transform:none; }
.dl-panel .dl-t{ font-weight:800; color:#4f4636; font-size:17px; }
.dl-panel .dl-s{ color:var(--ink-soft); font-size:13px; font-weight:600; margin:2px 0 12px; }
.progress{ height:16px; border-radius:9px; background:#eee4cb; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,.12); }
.progress > i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#9ad24f,#5fae2a); border-radius:9px; transition:width .7s cubic-bezier(.25,.8,.3,1); }   /* lissage : un bond de progression glisse au lieu de sauter */
.dl-pct{ margin-top:8px; font-weight:800; color:#5fae2a; }
.dl-phase{ margin-top:6px; font-weight:700; font-size:12.5px; color:var(--ink-soft); min-height:1em; letter-spacing:.01em; }
.dl-cancel{ margin-top:12px; display:inline-block; color:var(--ink-soft); font-weight:700; font-size:13px;
  border:1px solid #ddd2b6; border-radius:10px; padding:6px 16px; cursor:pointer; }
.dl-done .progress > i{ background:linear-gradient(90deg,#54c0ff,#2b8ec2); }

/* petit toast bas d'écran */
.toast{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%) translateY(20px);
  background:#4f4636; color:#fff; font-weight:700; font-size:13px; padding:8px 18px; border-radius:20px;
  opacity:0; transition:.25s; z-index:15; }
.toast.show{ opacity:1; transform:translateX(-50%); }

/* ======================= ANIMATIONS DE TÉLÉCHARGEMENT (écran haut) ======= */
.dl-anim{ position:absolute; top:26px; left:0; right:0; bottom:0; z-index:7; overflow:hidden; display:none; opacity:0; transition:opacity .34s ease; }
.dl-anim.show{ display:block; }               /* affiché mais opacity:0 ; le .in fait le fondu (évite le flash) */
.dl-anim.show.in{ opacity:1; }
.dl-anim .dl-caption, .dl-anim .dsi-title{ position:absolute; top:10px; left:0; right:0; text-align:center; font-weight:800; z-index:8; }

/* --- cadeau commun (fin 3DS & DSi) --- */
.gift{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; z-index:4; pointer-events:none; }
.phase-end .gift{ opacity:1; }
/* la boîte vierge apparaît/se pose */
.gift .g-box{ position:absolute; width:66%; height:52%; bottom:8%; border-radius:7px; transform:scale(0);
  box-shadow:0 4px 8px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.4); }
.phase-end .gift .g-box{ animation:boxIn .3s cubic-bezier(.2,1.4,.4,1) .1s forwards; }
@keyframes boxIn{ to{ transform:scale(1);} }
/* le ruban se DESSINE : bande verticale puis horizontale */
.gift .rv{ position:absolute; width:12%; height:60%; bottom:8%; transform:scaleY(0); transform-origin:bottom; }
.phase-end .gift .rv{ animation:drawV .22s ease .42s forwards; }
@keyframes drawV{ to{ transform:scaleY(1);} }
.gift .rh{ position:absolute; width:66%; height:12%; bottom:28%; transform:scaleX(0); }
.phase-end .gift .rh{ animation:drawH .22s ease .64s forwards; }
@keyframes drawH{ to{ transform:scaleX(1);} }
/* le nœud papillon (2 boucles triangulaires + nœud central) pop avec dépassement */
.gift .bow{ position:absolute; top:28%; left:50%; margin-left:-4px; width:8px; height:9px; border-radius:2px;
  background:var(--bow,#e23b3b); transform:scale(0); transform-origin:center; z-index:3; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.gift .bow::before, .gift .bow::after{ content:''; position:absolute; top:50%; margin-top:-6px; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.gift .bow::before{ right:100%; border-left:10px solid var(--bow,#e23b3b); }
.gift .bow::after{ left:100%; border-right:10px solid var(--bow,#e23b3b); }
.phase-end .gift .bow{ animation:bowPop .35s cubic-bezier(.2,1.6,.4,1) .84s forwards; }
@keyframes bowPop{ 0%{ transform:scale(0);} 60%{ transform:scale(1.25);} 100%{ transform:scale(1);} }
/* pulse d'anticipation de l'icône juste avant la transform */
.anim-3ds.phase-end .appicon{ animation:prePulse .25s ease; }
@keyframes prePulse{ 40%{ transform:translateX(-50%) scale(1.12);} 100%{ transform:translateX(-50%) scale(1);} }
/* couleurs du cadeau par système */
.anim-3ds .gift{ --bow:#e23b3b; }
.anim-3ds .gift .g-box{ background:linear-gradient(#fbe7b0,#f2d477); }
.anim-3ds .gift .rv, .anim-3ds .gift .rh{ background:#e23b3b; }
.anim-dsi .gift{ --bow:#bfe4ff; }
.anim-dsi .gift .g-box{ background:linear-gradient(#5fb8ff,#2f7fd0); }
.anim-dsi .gift .rv, .anim-dsi .gift .rh{ background:#cdeeff; }
@keyframes bob{ to{ transform:translateY(-4px);} }
@keyframes fadeInText{ to{ opacity:1;} }

/* ---- 3DS : salle orange, rail, breloques ; début→milieu→fin(cadeau) ---- */
.anim-3ds{ background:linear-gradient(#ffb64a, #ffd587 54%, #ffe6b2); }
.anim-3ds::before{ content:''; position:absolute; top:0; left:0; right:0; height:34%;
  background:repeating-linear-gradient(45deg, rgba(190,110,15,.10) 0 20px, transparent 20px 40px),
             repeating-linear-gradient(-45deg, rgba(190,110,15,.10) 0 20px, transparent 20px 40px); }
.anim-3ds .floor{ position:absolute; left:-30%; right:-30%; bottom:0; height:68%;
  background:repeating-linear-gradient(90deg, rgba(185,110,15,.30) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(0deg, rgba(185,110,15,.22) 0 2px, transparent 2px 44px),
    linear-gradient(#ffdd94,#ffe9bd);
  transform:perspective(300px) rotateX(64deg); transform-origin:center bottom; }
.anim-3ds .rail{ position:absolute; left:0; right:0; top:32%; border-top:2px solid rgba(170,110,25,.55); }
.anim-3ds .charms{ position:absolute; inset:0; overflow:visible; opacity:0; transition:opacity .4s; z-index:3; }
.anim-3ds.phase-middle .charms{ opacity:1; }
/* une breloque : elle arrive sur le rail, pend (chaînette + point fixe), puis tombe */
.anim-3ds .charm3{ position:absolute; top:34%; width:24px; height:24px; margin-left:-12px; }
.anim-3ds .charm3.sliding{ transition:left .75s cubic-bezier(.25,.9,.3,1.12); }
.anim-3ds .charm3.tighten{ transition:left .25s ease; }
.anim-3ds .charm3.falling{ transition:top .3s cubic-bezier(.5,0,.9,1), transform .3s, opacity .14s .2s; transform:scale(.5); opacity:0; }
.anim-3ds .charm3 .cbody{ display:block; transform-origin:top center; animation:sway 1.5s ease-in-out infinite; }
.anim-3ds .charm3:nth-child(2n) .cbody{ animation-duration:1.75s; }
.anim-3ds .charm3:nth-child(3n) .cbody{ animation-duration:1.35s; }
.anim-3ds .charm3 .chain{ position:absolute; top:-10px; left:50%; width:1.5px; height:10px; background:rgba(150,95,15,.55); transition:opacity .12s; }
.anim-3ds .charm3 .chain::before{ content:''; position:absolute; top:-3px; left:-1.25px; width:4px; height:4px; border-radius:50%; background:rgba(150,95,15,.85); }
@keyframes sway{ 0%,100%{ transform:rotate(-7deg);} 50%{ transform:rotate(7deg);} }
/* mascotte (début) : pointe derrière l'icône puis se cache */
.anim-3ds .mascot{ position:absolute; left:50%; top:60%; width:24px; height:26px; z-index:1; opacity:0; }
.anim-3ds.phase-begin .mascot{ animation:mascotPeek 1.4s ease-in-out; }
@keyframes mascotPeek{ 0%,100%{ opacity:0; transform:translate(-50%,8px);} 22%,58%{ opacity:1; transform:translate(-155%,0);} }
.anim-3ds .m-body{ position:absolute; inset:0; border-radius:10px 10px 8px 8px; background:linear-gradient(#ffb14a,#f28c00); box-shadow:inset 0 2px 0 rgba(255,255,255,.4); }
.anim-3ds .m-eye{ position:absolute; top:32%; width:4px; height:5px; border-radius:50%; background:#4a3010; }
.anim-3ds .m-eye.l{ left:28%; } .anim-3ds .m-eye.r{ right:28%; }
.anim-3ds .mascot.has-img{ background-size:contain; background-repeat:no-repeat; background-position:center bottom; }
.anim-3ds .mascot.has-img > *{ display:none; }
/* icône */
.anim-3ds .appicon{ position:absolute; left:50%; top:50%; transform:translateX(-50%); width:86px; height:86px; border-radius:18px;
  overflow:hidden; z-index:2; background:linear-gradient(#ff9e79,#ff7f57);
  box-shadow:0 8px 16px rgba(140,80,0,.4), inset 0 0 0 3px rgba(255,255,255,.85); }
/* début : DISSOLVE (la source ne lâche PAS l'icône du haut) */
.anim-3ds.phase-begin .appicon, .anim-3ds.phase-begin .floor, .anim-3ds.phase-begin .rail{ animation:fadeIn3ds .35s ease; }
@keyframes fadeIn3ds{ from{ opacity:0;} to{ opacity:1;} }
/* respiration idle de l'icône pendant le milieu */
.anim-3ds.phase-middle .ic{ animation:breathe3ds 2.4s ease-in-out infinite; }
@keyframes breathe3ds{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }
/* impact d'une pastille = squash-stretch */
.anim-3ds .appicon.bump{ animation:iconSquash .3s ease; }
@keyframes iconSquash{ 0%{ transform:translateX(-50%) scale(1);} 30%{ transform:translateX(-50%) scaleX(1.1) scaleY(.9);} 60%{ transform:translateX(-50%) scaleX(.95) scaleY(1.06);} 100%{ transform:translateX(-50%) scale(1);} }
/* éclaboussure de couleur en haut de l'icône à l'impact */
.anim-3ds .splash{ position:absolute; top:-3px; left:50%; transform:translateX(-50%); width:34px; height:14px; border-radius:50%;
  opacity:.9; filter:blur(1px); animation:splash .38s ease-out forwards; z-index:3; }
@keyframes splash{ 0%{ transform:translateX(-50%) scale(.4); opacity:.9;} 100%{ transform:translateX(-50%) scale(1.4); opacity:0;} }
.anim-3ds .ic{ position:absolute; inset:9px; border-radius:12px; overflow:hidden; display:grid; place-items:center;
  box-shadow:0 0 0 3px #fff; transition:opacity .3s; }
.anim-3ds .ic-lbl{ font-family:'Fredoka'; font-weight:600; color:#fff; font-size:11px; text-align:center; padding:3px; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.anim-3ds .fill{ position:absolute; left:0; right:0; bottom:0; height:0; transition:height .7s cubic-bezier(.25,.8,.3,1), opacity .3s;
  background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.1)); }
.anim-3ds .gloss{ position:absolute; top:0; left:0; right:0; height:50%; border-radius:18px 18px 40% 40%;
  background:linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.05)); transition:opacity .3s; }
.anim-3ds .pieces{ position:absolute; inset:0; opacity:0; z-index:3; }
.anim-3ds.phase-middle .pieces{ opacity:1; }
.anim-3ds .piece{ position:absolute; left:50%; top:32%; width:14px; height:14px; border-radius:5px;
  box-shadow:0 2px 4px rgba(120,70,0,.4); animation:piecedrop .35s cubic-bezier(.5,0,.9,1) forwards; }
@keyframes piecedrop{ 0%{ transform:translate(-50%,0) scale(1); opacity:1; }
  80%{ opacity:1; } 100%{ transform:translate(-50%,64px) scale(.5); opacity:0; } }
/* fin : icône -> cadeau, pastilles stoppent */
.anim-3ds.phase-end .charms, .anim-3ds.phase-end .pieces{ opacity:0; }
.anim-3ds.phase-end .appicon{ overflow:visible; box-shadow:none; background:transparent; }
.anim-3ds.phase-end .ic, .anim-3ds.phase-end .fill, .anim-3ds.phase-end .gloss{ opacity:0; }

/* ---- DSi : ouvriers ; début(arrivée côtés)→milieu(remplissage)→fin(cadeau) ---- */
.anim-dsi{ background:#fbfcfe; }
.anim-dsi .dsi-title{ top:30%; color:#4a4a4a; font-weight:600; font-size:24px; }
.anim-dsi .dsi-sub{ position:absolute; top:22px; left:0; right:0; text-align:center; color:#3aa0e0; font-weight:800; font-size:13px; z-index:8; }
.anim-dsi .dsi-stage{ position:absolute; left:0; right:0; top:62%; transform:translateY(-50%);
  display:flex; align-items:flex-end; justify-content:center; gap:26px; }
.anim-dsi .worker{ position:relative; width:26px; height:42px; }
.anim-dsi.phase-middle .w-left{ animation:shuttleL 2s ease-in-out infinite; }
.anim-dsi.phase-middle .w-right{ animation:shuttleR 2s ease-in-out infinite .6s; }
@keyframes shuttleL{ 0%,100%{ transform:translateX(-20px);} 45%,55%{ transform:translateX(6px);} }
@keyframes shuttleR{ 0%,100%{ transform:translateX(20px);} 45%,55%{ transform:translateX(-6px);} }
.anim-dsi.phase-begin .w-left{ animation:wInL .9s ease-out; }
.anim-dsi.phase-begin .w-right{ animation:wInR .9s ease-out; }
@keyframes wInL{ 0%{ transform:translateX(-170px);} 100%{ transform:translateX(0);} }
@keyframes wInR{ 0%{ transform:translateX(170px);} 100%{ transform:translateX(0);} }
.anim-dsi .head{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:#ffe0b8; border:2px solid #e6a869; }
.anim-dsi .body{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:22px; height:24px; border-radius:9px 9px 6px 6px; }
.anim-dsi .w-left .body{ background:linear-gradient(#ff6b6b,#e23b3b); }
.anim-dsi .w-right .body{ background:linear-gradient(#6bd06b,#2fae2f); }
.anim-dsi .load{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:4px; z-index:3;
  background:linear-gradient(#bfefff,#5fd8ff); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.anim-dsi .worker.has-img{ background-size:contain; background-repeat:no-repeat; background-position:center bottom; }
.anim-dsi .worker.has-img > *{ display:none; }
.anim-dsi .dsi-box{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); width:58px; height:54px; border-radius:6px; background:#f4fbff;
  border:2px solid #cfe6f2; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); z-index:3; }
.anim-dsi .dsi-fill{ position:absolute; left:0; right:0; bottom:0; height:0; transition:height .7s cubic-bezier(.25,.8,.3,1), opacity .3s;
  background:linear-gradient(#eafdff 0, #eafdff 3px, #79e2ff 3px, #33c8f5 100%); border-top:1px solid #d6f6ff; }
.anim-dsi .dsi-block{ position:absolute; top:52%; width:12px; height:12px; border-radius:3px; background:linear-gradient(#bdecff,#7fd4f5); }
.anim-dsi .dsi-block.from-left{ left:calc(50% - 45px); animation:blockL .9s ease-in forwards; }
.anim-dsi .dsi-block.from-right{ left:calc(50% + 33px); animation:blockR .9s ease-in forwards; }
@keyframes blockL{ to{ transform:translate(45px,-4px); opacity:0; } }
@keyframes blockR{ to{ transform:translate(-33px,-4px); opacity:0; } }
/* fin : boîte -> cadeau, ouvriers qui sautent de joie */
.anim-dsi.phase-end .dsi-fill{ opacity:0; }
.anim-dsi.phase-end .dsi-box{ border-color:transparent; background:transparent; overflow:visible; box-shadow:none; }
.anim-dsi.phase-end .worker{ animation:celebrate .45s ease-in-out infinite alternate; }
@keyframes celebrate{ to{ transform:translateY(-9px);} }
/* acteurs (plusieurs, hauteurs/vitesses/couleurs variées) qui portent une boule et la lancent */
.anim-dsi .dsi-actors{ position:absolute; inset:0; z-index:4; }
.anim-dsi .actor{ position:absolute; transform:translateX(-50%); }
.anim-dsi .actor.walking{ transition:left var(--wd,.7s) ease-in-out; }
.anim-dsi .carryball, .anim-dsi .ball{ width:15px; height:15px; border-radius:50%; z-index:6;
  background:radial-gradient(circle at 35% 30%,#eafcff,#4fd0f2); box-shadow:0 2px 3px rgba(0,0,0,.22); }
.anim-dsi .carryball{ position:absolute; left:50%; top:0; transform:translateX(-50%); }   /* boule ronde portée au-dessus, entre les bras */
.anim-dsi .ball{ position:absolute; margin:-7px 0 0 -7px; }                                /* position (left/top) pilotée en JS pour l'arc */
.anim-dsi .boxripple{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:30px; height:10px; border-radius:50%;
  background:#bdeeff; opacity:.85; animation:ripple .4s ease-out forwards; z-index:5; }
@keyframes ripple{ 0%{ transform:translate(-50%,-50%) scale(.5); opacity:.85;} 100%{ transform:translate(-50%,-50%) scale(1.5); opacity:0;} }

/* ---- Wii : orbe(début) → course/pièces(milieu) → saut+fondu(fin) ---- */
.anim-wii{ background:#ffffff; }
.anim-wii::before, .anim-wii::after{ content:''; position:absolute; left:6%; right:6%; height:0; border-top:2px dashed #bcd4e6; }
.anim-wii::before{ top:44px; } .anim-wii::after{ bottom:38px; }
.anim-wii .wii-head{ position:absolute; top:8px; left:0; right:0; text-align:center; color:#555; font-weight:700; font-size:14px; line-height:1.3; z-index:8; }
.anim-wii .wii-head b{ color:#3aa0e0; font-size:16px; }
.anim-wii .wii-phase{ margin-top:3px; font-size:12px; font-weight:800; color:#2f88c0; min-height:1em; }
.anim-wii .wii-orb{ position:absolute; left:50%; top:52%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:4px solid #d3e8f5; border-top-color:#38a9e0; opacity:0; }
.anim-wii.phase-begin .wii-orb{ opacity:1; animation:spin .8s linear infinite; }
.anim-wii .wii-scene{ position:absolute; left:0; right:0; top:52px; bottom:44px; overflow:hidden; opacity:0; transition:opacity .3s; }
.anim-wii.phase-middle .wii-scene, .anim-wii.phase-end .wii-scene{ opacity:1; }
.anim-wii .wii-blocks{ position:absolute; top:30%; left:0; right:0; display:flex; justify-content:space-around; padding:0 9%; }
.anim-wii .qb{ width:40px; height:40px; border-radius:4px; background:linear-gradient(#ffd23f,#f0a500); border:2px solid #b97f00;
  color:#8a5e00; font-weight:800; text-align:center; line-height:38px; box-shadow:0 4px 4px rgba(0,0,0,.18); animation:bob .8s ease-in-out infinite alternate; }
.anim-wii .qb.brick{ background:repeating-linear-gradient(#c46a2a,#c46a2a 5px,#a3521c 5px,#a3521c 6px); }
/* blocs "?" -> deviennent brique quand frappés par en dessous */
.anim-wii .qbcell.hit{ animation:blockHit .32s ease; }
@keyframes blockHit{ 0%,100%{ transform:translateY(0);} 38%{ transform:translateY(-12px);} }
.anim-wii .coins{ position:absolute; left:0; right:0; bottom:14px; height:78px; overflow:visible; }
.anim-wii .coinpos{ position:absolute; }
.anim-wii .coinpos.got{ animation:coinGot .3s ease forwards; }
@keyframes coinGot{ to{ transform:scale(1.7); opacity:0;} }
.anim-wii .coin{ width:22px; height:26px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff2a8, #f0a500 70%);
  border:1.5px solid #c98a00; box-shadow:0 2px 3px rgba(0,0,0,.15); animation:coinflip 1s linear infinite; }
@keyframes coinflip{ 0%,100%{ transform:scaleX(1);} 50%{ transform:scaleX(.12);} }
.anim-wii .runner{ position:absolute; bottom:14px; left:-10%; width:44px; height:60px; z-index:2; }
.anim-wii .runbob{ width:100%; height:100%; }
.anim-wii.phase-middle .runbob{ animation:bob .2s ease-in-out infinite alternate; }
.anim-wii .runbob.jumping{ animation:spriteJump .42s ease; }
@keyframes spriteJump{ 0%,100%{ transform:translateY(0);} 45%{ transform:translateY(-52px);} }
.anim-wii .r-head{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; background:#ffe0b8; border:2px solid #e6a869; }
.anim-wii .r-body{ position:absolute; top:22px; left:50%; transform:translateX(-50%); width:30px; height:22px; border-radius:8px; background:linear-gradient(#4f9be8,#2f6fc0); }
.anim-wii .r-legs{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:26px; height:12px;
  background:linear-gradient(#c8541c,#a3421a); border-radius:0 0 5px 5px; }
.anim-wii .runner.has-img{ background-size:contain; background-repeat:no-repeat; background-position:center bottom; }
.anim-wii .runner.has-img > *{ display:none; }
.anim-wii .wii-count{ position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#3aa0e0; font-weight:800; font-size:13px; z-index:6; }
/* fin : le perso saute plusieurs fois sous le dernier bloc (via .runbob), puis fondu au blanc */
.anim-wii.phase-end .runner{ animation:none; }
.anim-wii .wii-fade{ position:absolute; inset:0; background:#fff; opacity:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; z-index:7; }
.anim-wii.phase-end .wii-fade{ animation:wiiFade 2.6s ease-in forwards; }
@keyframes wiiFade{ 0%,62%{ opacity:0;} 100%{ opacity:1;} }
.anim-wii .wii-fade span{ color:#38a9e0; font-weight:800; font-size:22px; opacity:0; }
.anim-wii.phase-end .wii-fade span{ animation:fadeInText .5s ease 1.9s forwards; }
.anim-wii .wii-ok{ margin-top:16px; padding:8px 46px; border-radius:12px; border:2px solid #7fd0f0;
  background:linear-gradient(#fff,#eaf6fd); color:#555; font-weight:800; font-size:15px; box-shadow:0 2px 5px rgba(0,0,0,.12); opacity:0; }
.anim-wii.phase-end .wii-fade .wii-ok{ animation:fadeInText .5s ease 2.1s forwards; }
.anim-wii .wii-rows{ margin-top:6px; display:flex; flex-direction:column; gap:1px; font-size:11px; color:#666; font-weight:600; line-height:1.35; }
.anim-wii .wii-rows em{ color:#333; font-style:normal; font-weight:800; }

/* ======================= "La Lanterne" (jour -> nuit + lucioles) ========== */
.anim-lanterne{ overflow:hidden; }
.anim-lanterne .dl-caption{ color:#6a4a2a; z-index:20; text-shadow:0 1px 2px rgba(255,255,255,.4); transition:color 1.4s ease; }
.anim-lanterne.night .dl-caption{ color:#f3ecff; text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* --- ciel : fondu jour -> nuit --- */
.anim-lanterne .lt-day, .anim-lanterne .lt-night{ position:absolute; inset:0; transition:opacity 1.4s ease; }
.anim-lanterne .lt-day{ background:linear-gradient(#77c6ff 0%, #bfe8ff 58%, #eaf7ff 100%); opacity:1; }
.anim-lanterne .lt-night{ background:linear-gradient(#070a24 0%, #191646 46%, #3a2a5c 100%); opacity:0; }
.anim-lanterne.night .lt-day{ opacity:0; }
.anim-lanterne.night .lt-night{ opacity:1; }

/* soleil + nuages (jour) */
.anim-lanterne .lt-sun{ position:absolute; top:13%; right:15%; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 42% 40%, #fff6c0, #ffd45a 62%, #ffbe3a); box-shadow:0 0 28px 9px rgba(255,210,90,.55); }
.anim-lanterne .lt-cloud{ position:absolute; display:block; height:15px; border-radius:10px; background:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.6); opacity:.92; animation:ltcloud var(--dur,24s) ease-in-out infinite; }
.anim-lanterne .lt-cloud.a{ top:19%; left:11%; width:42px; --dur:26s; }
.anim-lanterne .lt-cloud.b{ top:33%; left:58%; width:30px; --dur:32s; }
.anim-lanterne .lt-cloud.c{ top:11%; left:76%; width:26px; --dur:22s; }
@keyframes ltcloud{ 0%,100%{ transform:translateX(-12px);} 50%{ transform:translateX(14px);} }
/* lune + étoiles (nuit) */
.anim-lanterne .lt-moon{ position:absolute; top:11%; right:15%; width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle at 36% 36%, #fffdf0, #ece7cd 68%, #cfc8a6); box-shadow:0 0 20px 6px rgba(255,250,220,.4); }
.anim-lanterne .lt-stars{ position:absolute; inset:0; }
.anim-lanterne .lt-stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:lttwinkle 2.6s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes lttwinkle{ 0%,100%{ opacity:.2; } 50%{ opacity:.95; } }

/* collines (vert le jour -> sombre la nuit) */
.anim-lanterne .lt-hill{ position:absolute; left:-12%; right:-12%; bottom:-42px; height:122px;
  border-radius:50%/100% 100% 0 0; background:#6cbf57; transition:background 1.4s ease; z-index:2; }
.anim-lanterne .lt-hill2{ left:-32%; right:22%; bottom:-56px; height:104px; background:#57a848; }
.anim-lanterne.night .lt-hill{ background:#12183a; }
.anim-lanterne.night .lt-hill2{ background:#0b1030; }

/* crochet d'où pend la lanterne */
.anim-lanterne .lt-hook{ position:absolute; top:0; left:50%; width:3px; height:38px; margin-left:-1.5px;
  background:#3a3320; transition:background 1.4s ease; }
.anim-lanterne.night .lt-hook{ background:#575070; }

/* --- la lanterne (se balance doucement) --- */
.anim-lanterne .lt-lantern{ position:absolute; top:36px; left:50%; width:132px; height:190px; margin-left:-66px;
  transform-origin:top center; animation:ltsway 5s ease-in-out infinite; z-index:6; }
@keyframes ltsway{ 0%,100%{ transform:rotate(-1.6deg);} 50%{ transform:rotate(1.6deg);} }
.anim-lanterne .lt-ring{ position:absolute; top:-14px; left:50%; width:22px; height:18px; margin-left:-11px;
  border:3px solid #4a4230; border-bottom:none; border-radius:11px 11px 0 0; }
.anim-lanterne.night .lt-ring{ border-color:#6a6250; }
.anim-lanterne .lt-cap{ position:absolute; top:2px; left:50%; width:106px; height:26px; margin-left:-53px;
  background:linear-gradient(#5a5138,#3c3524); border-radius:7px 7px 3px 3px; clip-path:polygon(13% 0, 87% 0, 100% 100%, 0 100%); }
/* corps en verre */
.anim-lanterne .lt-glass{ position:absolute; top:26px; left:8px; right:8px; height:138px; border-radius:6px 6px 9px 9px;
  border:3px solid #4a4230; background:linear-gradient(160deg, rgba(150,175,210,.16), rgba(90,110,150,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); overflow:hidden; transition:background 1.2s ease, box-shadow .9s ease; }
.anim-lanterne.lit .lt-glass{ background:linear-gradient(160deg, rgba(255,214,130,.2), rgba(255,180,80,.1));
  box-shadow:inset 0 0 18px 3px rgba(255,190,90,.35), 0 0 26px 6px rgba(255,190,90,.18); }
.anim-lanterne.night .lt-glass{ border-color:#6a6250; }
/* 2 montants du cadre */
.anim-lanterne .lt-glass::before, .anim-lanterne .lt-glass::after{ content:''; position:absolute; top:0; bottom:0; width:2px; background:rgba(74,66,48,.6); z-index:4; }
.anim-lanterne .lt-glass::before{ left:33%; } .anim-lanterne .lt-glass::after{ right:33%; }
/* base métal */
.anim-lanterne .lt-base{ position:absolute; top:160px; bottom:auto; left:50%; width:114px; height:20px; margin-left:-57px;
  background:linear-gradient(#5a5138,#33301f); border-radius:5px 5px 7px 7px; }
.anim-lanterne .lt-base::after{ content:''; position:absolute; bottom:-6px; left:50%; width:132px; height:9px; margin-left:-66px;
  background:linear-gradient(#4a4230,#2a2718); border-radius:4px; }

/* AMPOULE discrète (aucune flamme) + halo demi-cercle */
.anim-lanterne .lt-glow{ position:absolute; bottom:0; left:50%; width:120px; height:98px; margin-left:-60px;
  border-radius:50% 50% 0 0/100% 100% 0 0; opacity:0; transition:opacity 1.1s ease; z-index:1;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,216,132,calc(.14 + .74 * var(--pr,0))) 0%,
    rgba(255,190,92,calc(.30 * var(--pr,0))) 46%, rgba(255,190,92,0) 74%); }
.anim-lanterne.lit .lt-glow{ opacity:1; }
.anim-lanterne .lt-bulb{ position:absolute; bottom:9px; left:50%; width:12px; height:14px; margin-left:-6px;
  border-radius:50% 50% 46% 46%; opacity:0; transition:opacity 1.1s ease; z-index:3;
  background:radial-gradient(circle at 50% 38%, #fff7da, #ffd97a 66%, #f2b23a); box-shadow:0 0 9px 3px rgba(255,205,110,.6); }
.anim-lanterne .lt-bulb::after{ content:''; position:absolute; top:-3px; left:50%; width:5px; height:3px; margin-left:-2.5px; background:#4a4230; border-radius:1px; }
.anim-lanterne.lit .lt-bulb{ opacity:.85; }

/* lucioles POSÉES à l'intérieur (remplissage du HAUT vers le BAS) */
.anim-lanterne .lt-swarm{ position:absolute; inset:0; z-index:2; }
.anim-lanterne .lt-swarm i{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:radial-gradient(circle, #fbffb4 0%, #eae24e 52%, rgba(180,200,40,0) 100%);
  box-shadow:0 0 6px 2px rgba(232,240,120,.8); animation:ltseat 1.9s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes ltseat{ 0%,100%{ opacity:.55; transform:scale(.82);} 50%{ opacity:1; transform:scale(1.18);} }

/* lucioles qui ARRIVENT de l'extérieur et entrent dans la lanterne */
.anim-lanterne .lt-flies{ position:absolute; inset:0; z-index:15; pointer-events:none; }
.anim-lanterne .lt-fly{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:radial-gradient(circle, #fbffb4 0%, #eae24e 52%, rgba(180,200,40,0) 100%);
  box-shadow:0 0 8px 3px rgba(232,240,120,.85); left:var(--sx); top:var(--sy); animation:ltfly 1.5s ease-in forwards; }
@keyframes ltfly{
  0%{ left:var(--sx); top:var(--sy); opacity:0; transform:translate(0,0) scale(.7); }
  12%{ opacity:1; }
  55%{ transform:translate(var(--mx,0), -10px) scale(1); }
  82%{ opacity:1; }
  100%{ left:50%; top:42%; opacity:0; transform:translate(0,0) scale(.5); } }

/* petite LUCARNE (porte vitrée) : ouverte pendant le DL, se ferme à 100 % */
.anim-lanterne .lt-door{ position:absolute; top:33px; left:50%; width:54px; height:120px; margin-left:-27px; z-index:5;
  border:3px solid #4a4230; border-radius:5px; background:linear-gradient(150deg, rgba(200,220,255,.16), rgba(150,175,220,.06));
  transform-origin:left center; transform:perspective(240px) rotateY(62deg); transition:transform .55s cubic-bezier(.3,1,.4,1); }
.anim-lanterne.lit .lt-door{ box-shadow:inset 0 0 10px rgba(255,200,110,.3); border-color:#6a6250; }
.anim-lanterne.closed .lt-door{ transform:perspective(240px) rotateY(0deg); }

/* EMBALLAGE cadeau final : la lanterne s'emballe */
.anim-lanterne .lt-wrap{ position:absolute; top:18px; left:50%; width:126px; height:176px; margin-left:-63px; z-index:8; opacity:0; }
.anim-lanterne.phase-end .lt-wrap{ opacity:1; }
.anim-lanterne .lt-wrap .appicon{ position:absolute; inset:0; }
.anim-lanterne .lt-wrap .ic{ position:absolute; left:50%; top:30%; width:58px; height:58px; margin-left:-29px; border-radius:12px; overflow:hidden; display:grid; place-items:center; z-index:6; opacity:0; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.anim-lanterne.closed .lt-wrap .ic{ opacity:1; transition:opacity .3s ease 1.3s; }
.anim-lanterne .lt-wrap .ic-lbl{ font-family:'Fredoka'; font-weight:600; color:#fff; font-size:9px; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.5); }
/* papier + ruban du paquet */
.anim-lanterne .gift{ --bow:#ffd36b; }
.anim-lanterne .gift .g-box{ width:88%; height:84%; bottom:6%; border-radius:9px; background:linear-gradient(150deg,#7a4fd0,#5a2fb0); box-shadow:0 6px 16px rgba(0,0,0,.4); }
.anim-lanterne .gift .rv{ width:14%; height:84%; bottom:6%; background:#ffd36b; }
.anim-lanterne .gift .rh{ width:88%; height:14%; bottom:44%; background:#ffd36b; }
.anim-lanterne .gift .bow{ top:15%; }
/* décalage des dessins du paquet : la lucarne se ferme AVANT l'emballage */
.anim-lanterne.phase-end .gift .g-box{ animation-delay:.62s; }
.anim-lanterne.phase-end .gift .rv{ animation-delay:.94s; }
.anim-lanterne.phase-end .gift .rh{ animation-delay:1.16s; }
.anim-lanterne.phase-end .gift .bow{ animation-delay:1.36s; }

/* ======================= LISTE TÉLÉCHARGEMENTS (style Wii U) ============== */
.dlmgmt{ padding:0; gap:0; background:linear-gradient(#eef1f4,#e4e9ee); }
.dlmgmt-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; color:#fff; font-weight:800; font-size:17px;
  background:linear-gradient(#33b6f0,#1f95d8); box-shadow:0 2px 6px rgba(20,110,170,.3); }
.dlmgmt-head .net{ margin-left:auto; color:#bff0ff; font-weight:700; font-size:12px; }
.dlmgmt-list{ flex:1; overflow-y:auto; scrollbar-width:none; padding:12px; }
.dlmgmt-list::-webkit-scrollbar{ display:none; }
.dlm-row{ background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(90,110,130,.18); padding:10px 12px; margin-bottom:12px; display:flex; gap:12px; align-items:center; cursor:pointer; transition:transform .1s; }
.dlm-row.sel{ outline:3px solid var(--orange-glow); outline-offset:1px; transform:translateY(-1px); }
.dlm-ic{ width:52px; height:52px; border-radius:11px; overflow:hidden; flex:0 0 auto; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.dlm-ic .tile{ width:100%; height:100%; box-shadow:none; }
.dlm-main{ flex:1; min-width:0; }
.dlm-top{ display:flex; align-items:baseline; gap:8px; }
.dlm-title{ font-weight:800; color:#3a4653; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlm-tag{ margin-left:auto; color:#9aa7b3; font-size:12px; font-weight:700; white-space:nowrap; }
.dlm-bar{ position:relative; height:22px; border-radius:6px; background:#e3e8ec; overflow:hidden; margin-top:6px;
  display:flex; align-items:center; }
.dlm-barfill{ position:absolute; left:0; top:0; bottom:0; width:0; transition:width .2s linear;
  background:linear-gradient(#4fd0ff,#25a8ea); }
.dlm-barfill.done{ width:100% !important; }
.dlm-barlabel{ position:relative; z-index:2; display:flex; align-items:center; gap:6px; padding:0 10px; font-weight:800; font-size:13px; color:#20618a; width:100%; }
.dlm-barlabel .right{ margin-left:auto; color:#5a6a76; font-weight:700; }
.dlm-check{ color:#2fae2f; } .dlm-arrow{ color:#1f95d8; }
.dlmgmt-empty{ text-align:center; color:#8a97a3; padding:40px 20px; font-weight:600; }

/* mini-indicateur "téléchargement en fond" (coin bas droit de l'écran bas) */
.dl-mini{ position:absolute; right:8px; bottom:8px; z-index:9; display:none; align-items:center; gap:8px;
  background:linear-gradient(#33b6f0,#1f95d8); color:#fff; font-weight:800; font-size:13px; padding:8px 14px; border-radius:20px;
  box-shadow:0 3px 8px rgba(20,110,170,.4); cursor:pointer; }
.dl-mini.show{ display:flex; }
.dl-mini .spin{ width:14px; height:14px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* bouton "Télécharger en fond" dans l'overlay */
.dl-bg{ margin-top:10px; display:inline-block; color:#fff; background:linear-gradient(#33b6f0,#1f95d8); font-weight:800; font-size:14px;
  padding:9px 20px; border-radius:12px; cursor:pointer; box-shadow:0 3px 0 #1a7fbc; }
.dl-bg:active{ transform:translateY(2px); box-shadow:0 1px 0 #1a7fbc; }

/* menu latéral catégories */
.sheet{ position:absolute; inset:0; z-index:18; background:rgba(60,52,36,.4); opacity:0; pointer-events:none; transition:.25s; }
.sheet.show{ opacity:1; pointer-events:auto; }
.sheet .panel{ position:absolute; top:0; bottom:0; left:0; width:74%; max-width:300px; background:var(--cream3);
  box-shadow:6px 0 20px rgba(0,0,0,.3); transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; padding:12px; }
.sheet.show .panel{ transform:none; }
.sheet .cat{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px;
  font-weight:700; color:#5c5241; cursor:pointer; }
.sheet .cat:active,.sheet .cat.on{ background:#fff; box-shadow:var(--shadow); }
.sheet .cat .sw{ width:16px;height:16px;border-radius:5px; }
.sheet .cat .n{ margin-left:auto; color:var(--ink-faint); font-size:12px; font-weight:700; }
.sheet .title{ font-weight:800; color:#6f654e; padding:6px 8px 10px; font-size:16px; }
.sheet .subtitle{ font-weight:700; color:#948a73; padding:2px 10px 4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.sheet .cat.danger{ color:#c0392b; }
.sheet .cat .chk{ margin-left:auto; color:#5fae2a; font-weight:900; }
.sheet .cat.mode-row.active{ background:#fff; box-shadow:var(--shadow); }
.sheet .panel{ padding-bottom:44px; }   /* place pour le footer */
.sheet .sheet-foot{ position:sticky; bottom:0; margin:8px -12px -12px; padding:9px 14px; display:flex; align-items:center; gap:8px;
  background:linear-gradient(#fff,#f4ecd8); border-top:1px solid #e6dcc4; font-weight:700; color:#6f654e; font-size:12px; }
.sheet .sheet-foot .mf-note{ color:var(--orange); font-size:15px; animation:notebob 1.6s ease-in-out infinite; }
.sheet .sheet-foot .mf-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.sheet .sheet-foot .mf-shuffle{ flex:0 0 auto; font-size:15px; padding:2px 7px; border-radius:8px; cursor:pointer;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.sheet .sheet-foot .mf-shuffle:active{ transform:translateY(1px); }
@keyframes notebob{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-2px) rotate(6deg);} }

/* menu d'actions sur un téléchargement (monte du bas de l'écran) */
.dl-actions{ position:absolute; inset:0; z-index:19; background:rgba(60,52,36,.42); opacity:0; pointer-events:none; transition:opacity .22s; }
.dl-actions.show{ opacity:1; pointer-events:auto; }
.dl-actions .da-panel{ position:absolute; left:0; right:0; bottom:0; background:var(--cream3); border-radius:18px 18px 0 0;
  box-shadow:0 -6px 22px rgba(0,0,0,.28); padding:12px 12px 16px; transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.9,.3,1);
  max-height:82vh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }   /* 82vh (pas 82% : le % ne se résout pas sous inset:0 sur la WebView -> panneau géant) */
.dl-actions .da-panel::-webkit-scrollbar{ display:none; }
.dl-actions.show .da-panel{ transform:none; }
.da-title{ font-weight:800; color:#4f4636; font-size:17px; padding:4px 6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.da-sub{ color:var(--ink-soft); font-size:12px; font-weight:600; padding:2px 6px 10px; }
.da-item{ display:flex; align-items:center; gap:11px; padding:12px 12px; border-radius:12px; font-weight:700; color:#5c5241; cursor:pointer; }
.da-item .da-ic{ font-size:19px; width:24px; text-align:center; }
.da-item:active,.da-item.on{ background:#fff; box-shadow:var(--shadow); }
.da-item.danger{ color:#c0392b; }
.da-item.danger.on,.da-item.danger:active{ background:#fff5f3; }
.da-item.go{ color:#3f8f1f; }
.da-item.go.on,.da-item.go:active{ background:#f2fbee; }
.da-warn{ color:#b7770e; background:#fff6e6; border-radius:10px; padding:8px 11px; font-size:12px; font-weight:600; line-height:1.4; margin:2px 2px 4px; }
.da-cancel{ text-align:center; padding:11px; margin-top:4px; color:var(--ink-soft); font-weight:800; cursor:pointer; border-top:1px solid #ece2ca; }

/* ---- overlay de chargement (poll DB) : fond crème plein écran, fade in/out très bref ----
   IMPORTANT : display:none au repos (jamais rendu) — un élément plein écran toujours rendu
   masquait la barre du haut sur la WebView de l'appareil. Le fondu se fait via .in. */
.load-overlay{ position:absolute; inset:0; z-index:40; background:var(--cream2);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  opacity:0; transition:opacity .13s ease; }
.load-overlay.show{ display:flex; }
.load-overlay.show.in{ opacity:1; }
/* throbber : 8 barres en anneau CENTRÉ ; la barre lumineuse avance de position en
   position (opacité décalée) — aucune rotation du conteneur, donc pas de "wobble". */
.load-overlay .loader{ position:relative; width:48px; height:48px; }
.load-overlay .loader i{ position:absolute; top:2px; left:50%; width:5px; height:13px; margin-left:-2.5px;
  border-radius:3px; background:var(--orange); transform-origin:50% 22px;
  animation:ld-fade 0.9s linear infinite; }
.load-overlay .loader i:nth-child(1){ transform:rotate(0deg);   animation-delay:-.900s; }
.load-overlay .loader i:nth-child(2){ transform:rotate(45deg);  animation-delay:-.788s; }
.load-overlay .loader i:nth-child(3){ transform:rotate(90deg);  animation-delay:-.675s; }
.load-overlay .loader i:nth-child(4){ transform:rotate(135deg); animation-delay:-.563s; }
.load-overlay .loader i:nth-child(5){ transform:rotate(180deg); animation-delay:-.450s; }
.load-overlay .loader i:nth-child(6){ transform:rotate(225deg); animation-delay:-.338s; }
.load-overlay .loader i:nth-child(7){ transform:rotate(270deg); animation-delay:-.225s; }
.load-overlay .loader i:nth-child(8){ transform:rotate(315deg); animation-delay:-.113s; }
.load-overlay .load-txt{ color:var(--ink-soft); font-weight:800; font-size:14px; letter-spacing:.4px; }
@keyframes ld-fade{ 0%{ opacity:1; } 100%{ opacity:.16; } }