/* « Mon sac » en 3D : une scène sombre avec un halo jaune, le sac qu'on fait tourner au doigt (sac3d.js) */
.bag-card{grid-template-columns:minmax(220px,300px) 1fr;gap:20px;padding:14px}
.bag-3d{position:relative;width:100%;height:320px;border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(60% 45% at 50% 62%,#fffc0022,transparent 70%),radial-gradient(120% 90% at 50% 0%,#2b2b2f,#0e0e10 75%)}
.bag-3d .sac3d-cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.bag-3d .sac3d-cv:active{cursor:grabbing}
.bag-3d.ready>svg{display:none}
.bag-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  background:#000a;color:#fff;font-size:12px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .4s;z-index:1}
.bag-hint svg{transform:scaleX(-1)}
.bag-3d.ready .bag-hint{opacity:1}
.bag-3d.ready.touched .bag-hint{opacity:0}
@media (max-width:640px){.bag-card{grid-template-columns:1fr}.bag-3d{height:340px}}

/* ---------- écran Avatar : le joueur debout dans le vestiaire (vestiaireSVG dans app.js) ---------- */
.av-hero.vest{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:0;padding:0 18px 22px;
  border:0;border-radius:28px;overflow:hidden;background:linear-gradient(90deg,#1a0f08,#2c1b0e 50%,#24160b);color:#fff;min-height:640px;align-content:start}
/* le parquet se fond dans le vert profond Teebox sous le nom */
.av-hero.vest::after{content:"";position:absolute;inset:400px 0 0 0;height:auto;background:linear-gradient(transparent,#0e332c66 40px,#0e332ce6 110px,#0e332c 200px);z-index:1;border:0}
.av-hero.vest .vest-bg{position:absolute;inset:0 0 auto 0;width:100%;height:640px;z-index:0}
/* plus large qu'un téléphone (tablette, ordinateur) : la pièce garde sa taille, centrée, et ses bords se fondent dans le bois sombre */
.av-hero.vest{container-type:inline-size}
@container (min-width:431px){
  .av-hero.vest .vest-bg{left:50%;right:auto;width:390px;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 50px,#000 340px,transparent);mask-image:linear-gradient(90deg,transparent,#000 50px,#000 340px,transparent)}
}
/* les pieds de l'avatar (146 + 290 px) tombent sur le parquet, devant le meuble du fond */
.av-hero.vest>.av-stage{position:relative;z-index:2;width:auto;height:auto;background:none;border-radius:0;margin-top:146px}
.av-hero.vest>.av-stage .avsvg{height:290px;width:auto;filter:drop-shadow(0 18px 18px #0008)}
.av-hero.vest>.av-id{position:relative;z-index:2;color:#fff;justify-items:center;gap:6px;margin-top:12px;width:100%;max-width:420px}
.av-hero.vest .av-id .lbl{color:#fff;opacity:.92;font-size:14px;font-weight:600;text-shadow:0 1px 4px #000a}
.av-hero.vest .av-id h1{color:#fff;font-size:32px;line-height:1.1;text-shadow:0 2px 10px #000c}
.av-hero.vest .av-id .muted{color:#e9e6df;text-shadow:none}
.av-hero.vest .xpbar{width:100%;height:12px;background:#ffffff1f;border:1px solid #ffffff30;border-radius:999px}
.av-hero.vest .xpbar i{background:linear-gradient(90deg,#3fd16b,#7be37f);border-radius:999px}
.av-hero.vest .row-btns{justify-content:center;gap:10px;margin-top:8px;flex-wrap:nowrap;width:100%}
.av-hero.vest .row-btns .btn{min-height:46px;border-radius:999px;font-size:15px;font-weight:800;padding:0 18px;white-space:nowrap}
html:root .av-hero.vest .row-btns .btn:not(.ghost){background:#1f4b3a;color:#fff;border:0;flex:1.4;box-shadow:0 6px 16px -6px #000a}
html:root .av-hero.vest .row-btns .btn.ghost{background:#1f4b3a;color:#fff;border:1.5px solid #cfe3d6;flex:1}
.av-kpis a{display:grid;justify-items:center;gap:2px}
.av-kpis a>svg{color:var(--g2,#2fbf5f);margin-top:4px}
@media (max-width:900px){
  /* la barre du haut flotte au-dessus du vestiaire, comme dans un jeu */
  :root[data-screen="avatar"] .topbar{position:fixed;left:0;right:0;top:0;background:transparent!important;border:0;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:30}
  :root[data-screen="avatar"] .topbar .wordmark,:root[data-screen="avatar"] .topbar .ic-btn{color:#fff}
  :root[data-screen="avatar"] .avpage{padding-top:0}
  :root[data-screen="avatar"] .av-hero.vest{margin:0 -18px;border-radius:0 0 28px 28px;min-height:calc(640px + env(safe-area-inset-top,0px))}
  :root[data-screen="avatar"] .av-hero.vest .vest-bg{height:calc(640px + env(safe-area-inset-top,0px))}
  :root[data-screen="avatar"] .av-hero.vest>.av-stage{margin-top:calc(146px + env(safe-area-inset-top,0px))}
  :root[data-screen="avatar"] .av-hero.vest::after{top:calc(400px + env(safe-area-inset-top,0px))}
  :root[data-screen="avatar"] .main{padding-top:0}
}
@media (max-width:380px){.av-hero.vest .row-btns .btn{font-size:14px;padding:0 12px}.av-hero.vest .av-id h1{font-size:28px}}
/* profil : avatar zoomé (il tient son club), le sac du vestiaire à droite se touche pour aller à « Mon sac » */
.av-hero.vest>.av-stage{margin-top:92px}
.av-hero.vest>.av-stage .avsvg{height:350px;transform:translateX(26px)}
.av-hero.vest .vest-bag{position:absolute;z-index:3;top:250px;left:calc(50% + 68px);width:64px;height:210px;border:0;background:none;padding:0;cursor:pointer;border-radius:16px}
.av-hero.vest .vest-bag:focus-visible{outline:2px solid #fff}
@media (max-width:640px){:root[data-screen="avatar"] .av-hero.vest>.av-stage{margin-top:calc(92px + env(safe-area-inset-top,0px))}:root[data-screen="avatar"] .av-hero.vest .vest-bag{top:calc(250px + env(safe-area-inset-top,0px))}}

/* décors du profil (decors.js) : la scène animée derrière l'avatar ; le sac et l'avatar restent devant */
.av-hero.vest.deco{background:#0e332c}
.dk *{transform-box:fill-box}
.dk .a-tw{animation:dkTw 2.4s ease-in-out infinite}@keyframes dkTw{50%{opacity:.15}}
.dk .a-glow{animation:dkGlow 3s ease-in-out infinite}@keyframes dkGlow{50%{opacity:.55}}
.dk .a-drift{animation:dkDrift 40s linear infinite}@keyframes dkDrift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.dk .a-rise{animation:dkRise 6.4s ease-out infinite;transform-origin:center}@keyframes dkRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.85}100%{transform:translateY(-110px) scale(1.6);opacity:0}}
.dk .a-ember{animation:dkEmber 4s ease-out infinite}@keyframes dkEmber{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),-90px);opacity:0}}
.dk .a-spin{animation:dkSpin 40s linear infinite;transform-origin:center}@keyframes dkSpin{to{transform:rotate(360deg)}}
.dk .a-bus{animation:dkBus 12s linear infinite}@keyframes dkBus{from{transform:translateX(-90px)}to{transform:translateX(320px)}}
.dk .a-rain{animation:dkRain 1s linear infinite}@keyframes dkRain{to{transform:translate(-12px,360px)}}
.dk .a-bob{animation:dkBob 5s ease-in-out infinite}@keyframes dkBob{50%{transform:translateY(-10px)}}
.dk .a-plane{animation:dkPlane 14s linear infinite}@keyframes dkPlane{from{transform:translate(-30px,40px)}to{transform:translate(340px,10px)}}
.dk .a-bird{animation:dkBird 9s linear infinite}@keyframes dkBird{from{transform:translateX(-140px)}to{transform:translateX(200px)}}
.dk .a-orbit{animation:dkOrbit 10s linear infinite}@keyframes dkOrbit{0%{transform:translate(0,0)}25%{transform:translate(110px,26px)}50%{transform:translate(220px,0)}75%{transform:translate(110px,-26px)}100%{transform:translate(0,0)}}
.dk .a-wave{animation:dkWave 3s ease-in-out infinite}@keyframes dkWave{50%{transform:translateX(-12px)}}
.dk .a-surf{animation:dkSurf 3.5s ease-in-out infinite}@keyframes dkSurf{50%{transform:translateY(5px);opacity:.4}}
.dk .a-sail{animation:dkSail 18s ease-in-out infinite}@keyframes dkSail{50%{transform:translateX(90px)}}
.dk .a-sway{animation:dkSway 3s ease-in-out infinite;transform-origin:0 0}@keyframes dkSway{50%{transform:rotate(6deg)}}
.dk .a-flag{animation:dkFlag 1.2s ease-in-out infinite;transform-origin:left center}@keyframes dkFlag{50%{transform:scaleX(.82) skewY(4deg)}}
.dk .a-snow{animation:dkSnow 9s linear infinite}@keyframes dkSnow{from{transform:translate(0,0)}to{transform:translate(20px,400px)}}
.dk .a-petal{animation:dkPetal 9s linear infinite}@keyframes dkPetal{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-60px,400px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.dk *{animation:none!important}}
/* le choix du décor : une rangée de vignettes qui défile ; les vignettes ne bougent pas */
.dk-pick{display:grid;gap:10px;min-width:0}
.dk-pick .page-h{align-items:baseline}
.dk-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:none}
.dk-row::-webkit-scrollbar{display:none}
.dk-it{flex:0 0 84px;display:grid;justify-items:center;gap:5px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;scroll-snap-align:start;text-align:center}
.dk-img{position:relative;display:block;width:84px;height:102px;border-radius:18px;overflow:hidden;background:#0e332c;box-shadow:0 6px 16px -10px rgba(0,0,0,.5);outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s,transform .2s}
.dk-img svg{display:block;width:100%;height:100%}
.dk-img .dk *{animation:none!important}
.dk-it.on .dk-img{outline-color:var(--tb,#1c2430)}
.dk-it:active .dk-img{transform:scale(.96)}
.dk-it:focus-visible .dk-img{outline-color:var(--tb,#1c2430)}
.dk-it.dk-lock .dk-img svg{filter:grayscale(.8) brightness(.7)}
.dk-it.dk-lock .dk-img i{position:absolute;inset:auto auto 7px 7px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff}
.dk-it b{font-size:12px;font-weight:700;line-height:1.2}
.dk-it small{margin-top:-3px;font-size:11px;line-height:1.2;color:var(--muted,#5f6b64)}

/* ---- choisir son sac (éditeur d'avatar, onglet Sac) ---- */
.aved2 .opt-grid.sacs{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.aved2 .sac-opt{padding:10px 4px 9px!important;gap:3px}
.aved2 .sac-opt svg{width:100%;height:128px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.aved2 .sac-opt .sac-t{font-style:normal;font-size:10px;line-height:1.2;text-align:center;opacity:.65}
.aved2 .st-sac{display:grid;place-items:center;height:100%;max-height:440px}
.aved2 .st-sac svg{height:100%;max-height:400px;width:auto;filter:drop-shadow(0 18px 16px rgba(0,0,0,.28))}
.aved2 .st-av:has(.st-sac){flex-direction:column;align-items:center}
/* le dessin de la carte « Mon sac » avant la 3D */
.bag-v .sac-2d{height:86%;width:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
/* 7 onglets : les libellés ne se chevauchent plus (« Accessoires » devient « Accès. » au besoin) */
.aved2 .st-btns{gap:2px!important}
.aved2 .st-b small{overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:10px!important;letter-spacing:-.01em}