:root{
  --gb-font-scale:1;
  --gb-contrast:0;
  --gb-bg:#F6F0E5;
  --gb-ink:#241B12;
  --gb-sidebar-w:248px;
  --gb-content-max:1040px;
}
html.gb-hc{ --gb-bg:#FFFFFF; --gb-ink:#000000; }
body{ margin:0; font-family:Nunito,system-ui,sans-serif; background:var(--gb-bg); }
*{ box-sizing:border-box; }

/* échelle de texte d'accessibilité */
.gb-app{ font-size:calc(16px * var(--gb-font-scale)); }

/* shell mobile-first : plein écran, 1 colonne, nav en bas */
.gb-app{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; background:var(--gb-bg); color:var(--gb-ink);
}
.gb-sidebar{ display:none; }
.gb-main{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.gb-main::-webkit-scrollbar{ display:none; }
.gb-content{ width:100%; max-width:560px; margin:0 auto; padding-bottom:env(safe-area-inset-bottom); }
.gb-bottomnav{
  flex:none; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-top:1.5px solid #EFE6D6; padding:10px 14px calc(18px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between;
}

/* tablette : carte centrée plus large, grilles 2 colonnes */
@media (min-width:768px){
  .gb-app{ padding:24px 0; min-height:100vh; min-height:100dvh; }
  .gb-content{ max-width:760px; padding-left:8px; padding-right:8px; }
  .gb-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
}

/* PC : sidebar gauche, barre du bas masquée, contenu large */
@media (min-width:1024px){
  .gb-app{ flex-direction:row; padding:0; }
  .gb-sidebar{
    display:flex; flex-direction:column; gap:8px; flex:none;
    width:var(--gb-sidebar-w); height:100vh; position:sticky; top:0;
    background:#fff; border-right:1.5px solid #EFE6D6; padding:22px 16px;
  }
  .gb-main{ height:100vh; }
  .gb-content{ max-width:var(--gb-content-max); padding:28px 32px; }
  .gb-bottomnav{ display:none; }
  .gb-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
  .gb-play-wrap{ max-width:640px; margin:0 auto; }
}
.gb-navbtn{
  appearance:none; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; gap:4px; color:#BCB09C; font-weight:800;
}
.gb-bottomnav .gb-navbtn{ flex:1; flex-direction:column; font-size:10.5px; }
.gb-sidebar .gb-navbtn{ width:100%; padding:12px 14px; border-radius:14px; font-size:15px; }
.gb-sidebar .gb-navbtn.gb-active{ background:#FFF0EC; color:#FF6B45; }
@keyframes gb-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(760px) rotate(620deg);opacity:0}}
@keyframes gb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes gb-pop{0%{transform:scale(.75);opacity:0}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes gb-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}