:root{
  /* ===== BeeMyBlood donor palette — F2A93B / B3261E / 0B72B9 / 1A1A1A only =====
     Semantic roles: orange = accent/brand/warning, red = critical/danger,
     blue = positive/info/confirmed. All tints/shades below are derived from
     these 3 hues (plus neutral greys off #1A1A1A) and verified >=4.5:1 (text)
     or >=3:1 (UI/large text) with tools/check-contrast.js. */
  --gold:#F2A93B;--gold-light:#F7C167;--gold-glow:#E08906;
  --dark:#1A1A1A;--dark-card:#212121;--dark-surface:#282828;--dark-border:#716D68;
  --red:#B3261E;--red-soft:#E56A63;--green:#0F95F1;--green-soft:#369CE2;
  --orange:#F2A93B;--blue:#0F95F1;--purple:#0F95F1;--teal:#369CE2;
  --text:#F2F0EC;--text-dim:#AEACA7;--text-muted:#95918C;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius:16px;--radius-sm:10px;
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow-gold:0 0 40px rgba(242,169,59,.18);
  --transition:.3s cubic-bezier(.4,0,.2,1);
  --black:#000;--vr-blue-dark:#0E5281;--vr-blue-light:#369CE2;--game-text-on-gold:#1A1A1A;
  --canvas-grad-dark:#141414;--canvas-grad-light:#1E1E1E;--navy-panel:#14232E;--card-navy:#0F1C26;
  --wrapped-grad-1:#14232E;--wrapped-grad-2:#1B3245;--wrapped-grad-3:#0F1C26;--preview-text:#1A1A1A;
  --vr-indigo-dark:#0E5281;--vr-indigo-light:#369CE2;--vr-green-dark:#0E5281;--vr-green-light:#369CE2;
  --green-light:#369CE2;--red-light:#E56A63;--orange-light:#F7C167;--mint-light:#369CE2;
  --preview-label:#6C6863;--preview-border:#95918C;--preview-divider:#D8D5D0;--preview-red:#B3261E;
  --stock-purple:#0F95F1;--stock-purple-light:#369CE2;--stock-orange:#F2A93B;--stock-orange-light:#F7C167;
  --stock-yellow:#F7C167;--stock-yellow-light:#FBD9A0;--game-text-light:#F2F0EC;
  --gold-deep:#E08906;--red-bright:#931710;--white:#fff;--vr-orange-dark:#E08906;
}

/* ===== LIGHT MODE ===== */
body.light-mode{--dark:#F5F4F2;--dark-card:#FFFFFF;--dark-surface:#EFEDE9;--dark-border:#5D5A56;--text:#1A1A1A;--text-dim:#56534F;--text-muted:#6C6863;--gold:#965E0A;--gold-light:#F2A93B;--gold-glow:#B87A12;--red:#B3261E;--red-soft:#B3261E;--green:#0B6EB3;--green-soft:#0B6EB3;--orange:#965E0A;--blue:#0B6EB3;--purple:#0B6EB3;--teal:#0B6EB3}
body.light-mode{background:#F5F4F2;color:var(--text)}
body.light-mode nav{background:rgba(245,244,242,.92);border-bottom-color:var(--dark-border)}
body.light-mode .nav-tab.active{background:var(--gold);color:#fff}
body.light-mode .card{box-shadow:0 2px 8px rgba(0,0,0,.06)}
body.light-mode .live-toast{background:rgba(255,255,255,.95);border-color:rgba(150,94,10,.2);color:var(--text)}
body.light-mode .mob-menu{background:rgba(245,244,242,.97)}
body.light-mode .modal-overlay{background:rgba(0,0,0,.3)}
body.light-mode .modal-box{background:#fff}
body.light-mode .leaflet-container{background:#EFEDE9!important}
body.light-mode .leaflet-tile-pane{background:#EFEDE9!important}
body.light-mode .leaflet-tile{background:#EFEDE9!important}
body.light-mode input,body.light-mode select,body.light-mode textarea{background:var(--dark-surface);border-color:var(--dark-border);color:var(--text)}
body.light-mode .acc-toggle{background:var(--dark-surface);border-color:var(--dark-border);color:var(--text)}
body.light-mode .btn-outline{border-color:var(--dark-border);color:var(--text)}
body.light-mode .hero-badge{background:rgba(150,94,10,.08);border-color:rgba(150,94,10,.2);color:var(--gold)}
body.light-mode .badge-item{background:#fff;border-color:var(--dark-border)}
body.light-mode .crs-cat{background:#fff;border-color:var(--dark-border)}
body.light-mode .chat-bubble.bot{background:var(--dark-surface)}
body.light-mode .notif-dropdown{background:#fff}
body.light-mode .nav-overflow-menu{background:#fff}
body.light-mode .badge-item.earned{background:rgba(150,94,10,.04);border-color:rgba(150,94,10,.2)}
#breadcrumb-bar~.main-content{padding-top:80px}
/* Light mode: Gate page */
body.light-mode #gate-overlay{background:#F5F4F2!important}
body.light-mode #gate-overlay div,body.light-mode #gate-overlay span,body.light-mode #gate-overlay p{color:#1A1A1A!important}
body.light-mode #gate-overlay div[style*="color:var(--gold)"]{color:#965E0A!important}
body.light-mode #gate-overlay div[style*="color:var(--text-muted)"]{color:#6C6863!important}
body.light-mode #gate-overlay input{background:#fff!important;border-color:rgba(150,94,10,.35)!important;color:#1A1A1A!important}
body.light-mode #gate-overlay input::placeholder{color:#6C6863!important}
body.light-mode #gate-overlay button[onclick="checkGate()"]{color:#1A1A1A!important;background:linear-gradient(135deg,#965E0A,#F2A93B)!important}

/* Light mode: Hero text */
body.light-mode .hero h1{color:#1A1A1A}
body.light-mode .hero-sub{color:#56534F!important}
body.light-mode div[style*="color:#fff"]{color:#1A1A1A!important}
body.light-mode .hero-badge{background:rgba(150,94,10,.06);color:var(--gold)}
body.light-mode .hero-cells .cell{opacity:.15}

/* ====== Light mode: Flux CTS — FULL OVERRIDE ====== */
body.light-mode #v-flux .card{background:#fff!important}
/* Canvas wrap = background behind SVG */
body.light-mode .flux-canvas-wrap,
body.light-mode .flux-canvas-wrap.fullscreen{background:#EFEDE9!important;border-color:#C7C4BF!important}
body.light-mode #flux-map{background:transparent!important}
/* SVG roads (inline stroke="rgba(255,255,255,.1)") */
body.light-mode #flux-map g[stroke] path,
body.light-mode #flux-map g[stroke] line{stroke:rgba(0,0,0,.1)!important}
/* SVG ALL text — override inline fills */
body.light-mode #flux-map text{fill:#333!important}
body.light-mode #flux-map text[fill*="rgba(242,169,59"]{fill:#965E0A!important}
body.light-mode #flux-map text[fill*="rgba(179,38,30"]{fill:#B3261E!important}
body.light-mode #flux-map text[fill*="rgba(15,149,241"]{fill:#0B6EB3!important}
body.light-mode #flux-map text[fill*="rgba(15,149,241"]{fill:#0B6EB3!important}
body.light-mode #flux-map text[fill*="rgba(15,149,241"]{fill:#0B6EB3!important}
body.light-mode #flux-map text[fill*="rgba(247,193,103"]{fill:#965E0A!important}
body.light-mode #flux-map text[fill="#F2A93B"]{fill:#965E0A!important}
/* SVG rects (buildings) — transparent colored fills → more opaque */
body.light-mode #flux-map rect[fill*="rgba(242,169,59"]{fill:rgba(150,94,10,.08)!important;stroke:rgba(150,94,10,.35)!important}
body.light-mode #flux-map rect[fill*="rgba(179,38,30"]{fill:rgba(179,38,30,.08)!important;stroke:rgba(179,38,30,.35)!important}
body.light-mode #flux-map rect[fill*="rgba(15,149,241"]{fill:rgba(15,149,241,.08)!important;stroke:rgba(15,149,241,.35)!important}
body.light-mode #flux-map rect[fill*="rgba(15,149,241"]{fill:rgba(11,110,179,.08)!important;stroke:rgba(11,110,179,.35)!important}
body.light-mode #flux-map rect[fill*="rgba(15,149,241"]{fill:rgba(11,110,179,.08)!important;stroke:rgba(11,110,179,.35)!important}
body.light-mode #flux-map rect[fill*="rgba(255,255,255"]{fill:rgba(0,0,0,.04)!important;stroke:rgba(0,0,0,.1)!important}
body.light-mode #flux-map rect[fill*="rgba(20,20,20"]{fill:rgba(255,255,255,.85)!important;stroke:rgba(0,0,0,.08)!important}
/* SVG legend */
body.light-mode .flux-svg-legend rect{fill:rgba(255,255,255,.9)!important;stroke:rgba(0,0,0,.1)!important}
body.light-mode .flux-svg-legend text{fill:#555!important}
/* Marker arrows */
body.light-mode #flux-map marker path{fill:rgba(0,0,0,.35)!important}
/* ---- HUD (Entrées, Sorties, Stock CE, Plaquettes) ---- */
body.light-mode .flux-hud{color:#1A1A1A!important}
body.light-mode .flux-stat{background:rgba(255,255,255,.95)!important;border:1px solid #C7C4BF!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important}
body.light-mode .flux-stat-val{color:inherit}
body.light-mode .flux-stat-lbl{color:#555!important}
/* ---- Ticker banner (the scrolling text bar) ---- */
body.light-mode #fx-ticker-wrap{background:rgba(255,255,255,.92)!important;border-bottom:1px solid #C7C4BF!important}
body.light-mode #fx-ticker,body.light-mode #fx-ticker *{color:#555!important}
/* ---- Objectif bar ---- */
body.light-mode #v-flux div[style*="background:var(--dark-surface)"]{background:#DAD8D4!important}
body.light-mode #fx-obj-title{color:#555!important}
body.light-mode #fx-obj-txt{color:#333!important}
body.light-mode #fx-obj-label{color:#666!important}
/* ---- Feed & hourly chart ---- */
body.light-mode #v-flux .flux-feed{background:#fff!important;border-color:#5D5A56!important}
body.light-mode #v-flux .flux-feed-item{color:#555}
body.light-mode #v-flux div[style*="background:var(--dark-card)"]{background:#fff!important}
body.light-mode .flux-legend-mob,.flux-legend-mob span{color:#555}
body.light-mode .flux-legend-mob{background:rgba(255,255,255,.9);border:1px solid #5D5A56;border-radius:8px;padding:8px}

/* Light mode: HémoRush */
body.light-mode #v-hemorush .card{background:#fff}
body.light-mode .game-wrap{background:#fff!important;border-color:var(--gold)}
body.light-mode .game-wrap.fullscreen{background:#F5F4F2!important}
body.light-mode .game-start-overlay{background:rgba(255,255,255,.98)!important}
body.light-mode .game-start-overlay *{color:#1A1A1A!important}
body.light-mode .game-start-overlay div[style*="color:var(--gold)"]{color:var(--gold)!important}
body.light-mode .game-start-overlay div[style*="color:var(--text-dim)"]{color:#56534F!important}
body.light-mode .game-start-overlay div[style*="color:var(--text-muted)"]{color:#6C6863!important}
body.light-mode .game-start-overlay div[style*="color:var(--red-soft)"]{color:var(--red)!important}
body.light-mode .game-start-overlay div[style*="color:var(--green)"]{color:var(--green)!important}
body.light-mode .game-start-overlay span[style*="color:#fff"]{color:#1A1A1A!important}
body.light-mode .game-start-overlay strong[style*="color:#fff"]{color:#1A1A1A!important}
body.light-mode .mode-card{background:#EFEDE9!important;border-color:#5D5A56!important;color:#1A1A1A!important}
body.light-mode .mode-card.sel{border-color:var(--gold)!important;background:#FFF8EC!important}
body.light-mode .mode-card *{color:#1A1A1A!important}
body.light-mode .gameover{background:rgba(255,255,255,.95)!important}
body.light-mode .gameover *{color:#1A1A1A!important}
body.light-mode .game-over-overlay{background:rgba(245,244,242,.97)!important;color:#1A1A1A!important}
body.light-mode .game-over-overlay *{color:#1A1A1A!important}
body.light-mode .game-over-overlay .btn-gold{color:#1A1A1A!important}
body.light-mode .game-over-overlay .btn-outline{color:#1A1A1A!important;border-color:rgba(20,35,46,.3)!important}
.hr-rule-text{color:var(--white)}
body.light-mode .hr-rule-text{color:#1A1A1A!important}
/* Broad light mode: override common inline dark patterns */
body.light-mode .sec-header .sec-title,body.light-mode .card-title,body.light-mode .card-header .card-title{color:#1A1A1A!important}
body.light-mode .card-header .badge{color:#965E0A}
body.light-mode div[style*="background:var(--dark-surface)"]{background-color:#EFEDE9}
body.light-mode span[style*="background:var(--dark-surface)"]{background-color:#EFEDE9!important}
body.light-mode div[style*="background:var(--dark-card)"]{background-color:#fff}
body.light-mode .crs-cat-body{background:#FAF9F7!important}
body.light-mode .crs-row{border-color:#EFEDE9!important}
body.light-mode .elig-card{background:#fff!important}

body.light-mode #v-hemorush div[style*="color:#fff"]{color:#1A1A1A!important}
body.light-mode #v-hemorush span[style*="color:#fff"]{color:#1A1A1A!important}
body.light-mode #v-hemorush strong[style*="color:#fff"]{color:#1A1A1A!important}

/* Light mode: Map/Collectes */
body.light-mode #v-collectes .card{background:#fff}
body.light-mode #map-radius-ctrl{background:#fff!important;border-color:#5D5A56!important;color:#56534F!important}
body.light-mode .leaflet-control-zoom a{background:#fff!important;color:#1A1A1A!important;border-color:#5D5A56!important}
body.light-mode .leaflet-popup-content-wrapper{background:#fff!important;color:#1A1A1A!important;box-shadow:0 3px 14px rgba(0,0,0,.15)!important}
body.light-mode .leaflet-popup-content{color:#1A1A1A!important}
body.light-mode .leaflet-popup-content *{color:#56534F!important}
body.light-mode .leaflet-popup-content strong{color:#1A1A1A!important}
body.light-mode #map-ctrl-panel button{background:#fff!important;border-color:#5D5A56!important;color:#1A1A1A!important}
body.light-mode #map-ctrl-panel{background:rgba(255,255,255,.9)!important;border-color:#5D5A56!important}
body.light-mode #mapid{background:#EFEDE9!important}
body.light-mode .map-loc-btn{background:#fff!important;border-color:#5D5A56!important;color:#1A1A1A!important}

/* Light mode: Tour tooltip */
body.light-mode .tour-tooltip{background:#fff;border-color:var(--gold);box-shadow:0 12px 40px rgba(0,0,0,.15)}
body.light-mode .tour-tooltip p{color:#56534F}

/* Light mode: Sec headers */
body.light-mode .sec-header .sec-label{color:var(--gold)}
body.light-mode .sec-header .sec-title{color:#1A1A1A}
body.light-mode .sec-header .sec-sub{color:#56534F}

/* Light mode: Scroll to top */
body.light-mode .scroll-top{background:#fff;color:#1A1A1A;border:1px solid #5D5A56}
body.light-mode .card.fullscreen,body.light-mode .flux-canvas-wrap.fullscreen,body.light-mode .game-wrap.fullscreen{background:#F5F4F2!important}
body.light-mode::before{opacity:.01!important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--dark);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;overflow-wrap:break-word;word-wrap:break-word;display:flex;flex-direction:column}
body::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:2}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(26,26,26,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--dark-border);padding:0 20px;height:56px;display:flex;align-items:center;gap:12px;overflow:visible}
.lien-evitement{position:absolute;left:-9999px;top:0;z-index:10000;padding:10px 16px;background:var(--gold);color:var(--dark);font-weight:600;border-radius:0 0 8px 0;text-decoration:none}
.lien-evitement:focus{left:0}
.qh-yn[aria-pressed="true"]::before{content:'✓ ';font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;animation:focusGlow 1s ease infinite}
@keyframes focusGlow{
  0%,100%{box-shadow:0 0 0 2px rgba(242,169,59,.2)}
  50%{box-shadow:0 0 8px 3px rgba(242,169,59,.6)}
}
@media(prefers-reduced-motion:reduce){:focus-visible{animation:none}}
.nav-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);cursor:pointer;flex-shrink:0}
.nav-brand .bee{font-size:22px;filter:drop-shadow(0 0 8px rgba(224,137,6,.4))}
.nav-home-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:transparent;border:1px solid rgba(242,169,59,.15);color:var(--text-muted);font-size:15px;text-decoration:none;transition:all .2s;flex-shrink:0}
.nav-home-btn:hover{background:rgba(242,169,59,.08);border-color:rgba(242,169,59,.35);color:var(--gold);transform:none}
.nav-tabs{display:flex;align-items:center;gap:2px;background:var(--dark-surface);border-radius:10px;padding:3px;overflow:hidden;flex:1;min-width:0;position:relative}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-overflow-btn{font:inherit;padding:7px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--gold);cursor:pointer;border:none;background:none;white-space:nowrap;flex-shrink:0;display:none;margin-left:auto}
.nav-overflow-btn:hover{background:rgba(242,169,59,.15)}
.nav-overflow-menu{position:fixed;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:6px;display:none;flex-direction:column;gap:2px;min-width:180px;z-index:2500;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.nav-overflow-menu.open{display:flex}
.nav-overflow-menu .nav-tab{text-align:left;width:100%;padding:10px 14px;font-size:15px}
.nav-group{display:flex;align-items:center;flex-shrink:0}
.nav-group-btn{font:inherit;padding:7px 13px;border-radius:7px;font-size:14px;font-weight:500;color:var(--text-dim);cursor:pointer;transition:var(--transition);border:none;background:none;white-space:nowrap;flex-shrink:0}
.nav-group-btn:hover{color:var(--text);background:rgba(242,169,59,.1)}
.nav-group-btn.active{color:var(--dark);background:var(--gold);font-weight:600}
.nav-group-menu{position:fixed;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:6px;display:none;flex-direction:column;gap:2px;min-width:190px;z-index:2500;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.nav-group-menu.open{display:flex}
.nav-group-menu .nav-tab{text-align:left;width:100%;padding:10px 14px;font-size:15px}
.nav-tab{padding:7px 13px;border-radius:7px;font-size:14px;font-weight:500;color:var(--text-dim);cursor:pointer;transition:var(--transition);border:none;background:none;white-space:nowrap;flex-shrink:0}
/* refonte-multipage : nav-tab/nav-brand sont des <a> sur les pages decoupees (etaient des <button>/<div> dans la SPA) */
.nav-tab,.nav-brand{text-decoration:none}
.nav-tab:hover{color:var(--text);background:rgba(242,169,59,.1)}
.nav-tab.active{color:var(--dark);background:var(--gold);font-weight:600}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.nav-notif{position:relative;width:34px;height:34px;border-radius:50%;background:var(--dark-surface);border:1px solid var(--dark-border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.nav-notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-glow));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--dark);cursor:pointer}

/* VIEWS */
.view{display:none;padding:96px 16px 20px;max-width:1200px;margin:0 auto;width:100%}
#v-hero{padding-top:72px}
.view.active{display:block;animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

/* Kill view stacking context when any child is fullscreen */
body.has-fullscreen .view.active{animation:none!important}
body.has-fullscreen nav{display:none!important}
body.has-fullscreen .beebot-fab{display:none!important}
body.has-fullscreen .live-toast{display:none!important}
/* Le bouton flottant BeeBot (z-index:1500) passe au-dessus du menu mobile (z-index:1400) et
   le recouvre, surtout visible à fort zoom où le menu occupe presque tout le viewport. Masqué
   tant que le menu est ouvert, quelle que soit la largeur d'écran. */
body:has(#mob-menu.show) .beebot-fab,body:has(#mob-menu.show) .bmb-pill,body:has(#mob-menu.show) .bmba-user,body:has(#mob-menu.show) .bmba-menu{display:none!important}
body.has-fullscreen .scroll-top{display:none!important}
html:has(body.has-fullscreen),body.has-fullscreen{overflow:hidden!important;height:100%!important}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* LIVE TOAST */
.live-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(20,35,46,.85);border:1px solid rgba(242,169,59,.2);border-radius:12px;padding:8px 14px;font-size:12px;color:var(--text);z-index:1800;display:flex;align-items:center;gap:10px;max-width:420px;box-shadow:0 8px 30px rgba(0,0,0,.4);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;pointer-events:none;backdrop-filter:blur(12px)}
.live-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:640px){.live-toast{left:64px;right:12px;transform:translateX(0) translateY(80px);max-width:none}.live-toast.show{transform:translateX(0) translateY(0)}}

/* COUNTDOWN SVG RING */
.cd-ring{position:relative;width:90px;height:90px;flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.cd-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cd-ring .cd-bg{fill:none;stroke:var(--dark-surface);stroke-width:5}
.cd-ring .cd-prog{fill:none;stroke:url(#cd-grad);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.5s ease}

/* BLOOD COMPAT EXPLORER */
.compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.compat-cell{text-align:center;padding:8px 4px;border-radius:var(--radius-sm);background:var(--dark-surface);cursor:pointer;transition:all .2s;border:2px solid transparent;font-size:13px;font-weight:700}
.compat-cell:hover{border-color:rgba(242,169,59,.3);transform:scale(1.05)}
.compat-cell.selected{border-color:var(--gold);background:rgba(242,169,59,.1);box-shadow:0 0 12px rgba(242,169,59,.15)}
.compat-cell .compat-emoji{font-size:18px;margin-bottom:2px}
.compat-result{margin-top:12px;padding:12px;border-radius:var(--radius-sm);background:var(--dark-surface);font-size:13px;line-height:1.6;animation:fadeIn .3s ease}
.compat-give{color:var(--green)}.compat-recv{color:var(--red-soft)}

/* STREAK TRACKER */
.streak-row{display:flex;gap:6px;justify-content:center;margin:10px 0}
.streak-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .3s;position:relative}
.streak-dot.done{background:rgba(242,169,59,.15);border:2px solid var(--gold);color:var(--gold)}
.streak-dot.today{background:rgba(15,149,241,.15);border:2px solid var(--green);color:var(--green);animation:pulseG 2s infinite}
.streak-dot.future{background:var(--dark-surface);border:2px solid var(--dark-border);color:var(--text-muted)}
.streak-dot .streak-lbl{position:absolute;bottom:-16px;font-size:9px;color:var(--text-muted);white-space:nowrap}
.streak-fire{font-size:28px;animation:fireWiggle 1s ease infinite alternate}
@keyframes fireWiggle{0%{transform:rotate(-4deg) scale(1)}100%{transform:rotate(4deg) scale(1.08)}}

/* DAILY FACT */
.daily-fact{background:linear-gradient(135deg,rgba(15,149,241,.06),rgba(242,169,59,.06));border:1px solid rgba(15,149,241,.15);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .3s}
.daily-fact:hover{border-color:rgba(15,149,241,.3);background:linear-gradient(135deg,rgba(15,149,241,.1),rgba(242,169,59,.08))}
.daily-fact:active{transform:scale(.99)}

/* SHAREABLE DONOR CARD */
.donor-card{position:relative;width:100%;max-width:380px;aspect-ratio:1.6/1;margin:0 auto;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--navy-panel) 0%,var(--card-navy) 40%,var(--navy-panel) 100%);border:1px solid rgba(242,169,59,.3);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(242,169,59,.15)}
.donor-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(242,169,59,.08) 50%,transparent 70%);animation:cardShine 4s ease-in-out infinite;pointer-events:none}
.donor-card::after{content:'';position:absolute;bottom:-30%;left:-30%;width:160%;height:160%;background:radial-gradient(circle at 30% 80%,rgba(179,38,30,.06),transparent 50%);pointer-events:none}
.donor-card-inner{position:relative;z-index:1;padding:20px;height:100%;display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:360px){.donor-card{aspect-ratio:1.5/1}.donor-card-inner{padding:14px}}

/* CONFETTI */
.confetti-piece{position:fixed;width:8px;height:8px;z-index:9999;pointer-events:none;border-radius:1px}

/* RIPPLE */
.ripple{position:relative;overflow:hidden}
.ripple-wave{position:absolute;border-radius:50%;background:rgba(242,169,59,.2);transform:scale(0);animation:rippleOut .5s ease-out forwards;pointer-events:none}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}

/* FLIP CARD */
.flip-card{perspective:800px;cursor:pointer;height:140px}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-card-front,.flip-card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.flip-card-front{background:var(--dark-card);border:1px solid var(--dark-border)}
.flip-card-back{background:linear-gradient(135deg,rgba(242,169,59,.1),rgba(15,149,241,.08));border:1px solid rgba(242,169,59,.2);transform:rotateY(180deg)}
.flip-hint{font-size:10px;color:var(--text-muted);margin-top:6px}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* HERO */
.hero{padding:16px 8px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(800px,100vw);height:min(800px,100vw);background:radial-gradient(circle,rgba(242,169,59,.1) 0%,transparent 60%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(242,169,59,.08);border:1px solid rgba(242,169,59,.2);border-radius:50px;padding:5px 14px;font-size:13px;color:var(--gold);font-weight:500;margin-bottom:6px;animation:slideDown .5s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.hero h1{font-family:var(--font-display);font-size:clamp(36px,5.5vw,68px);font-weight:700;line-height:1.1;margin-bottom:6px;animation:slideUp .5s ease .1s both}
.bc-bar{background:rgba(26,26,26,.88);border-bottom:1px solid var(--dark-border);color:var(--text-muted)}
body.light-mode .bc-bar{background:rgba(250,249,247,.95)!important;border-bottom:1px solid #5D5A56!important;color:#666!important}
body.light-mode .bc-bar span{color:#555!important}
body.light-mode .bc-bar span[style*="color:var(--gold)"]{color:#965E0A!important}
body.light-mode #bc-current{color:#1A1A1A!important}
.hero-tagline{color:var(--white)}
body.light-mode .hero-tagline{color:#1A1A1A}
.hero h1 .glow{background:linear-gradient(135deg,var(--gold),var(--gold-glow),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:shimmer 3s ease infinite}
@keyframes shimmer{0%,100%{background-position:0% center}50%{background-position:200% center}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:20px;color:var(--text-dim);max-width:620px;line-height:1.5;margin:0 auto 6px;animation:slideUp .5s ease .2s both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;animation:slideUp .5s ease .3s both}
.hero-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px auto 0;width:100%;max-width:900px;animation:slideUp .5s ease .4s both}
.hero-feat{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:12px 10px;text-align:center;transition:var(--transition);cursor:pointer}
[onclick]{cursor:pointer}
.hero-feat:hover{border-color:rgba(242,169,59,.3);transform:translateY(-3px)}
.hero-feat-icon{font-size:32px;margin-bottom:10px}
.hero-feat-title{font-size:15px;font-weight:600;margin-bottom:4px}
.hero-feat-sub{font-size:13px;color:var(--text-dim);line-height:1.4}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;font-family:var(--font-body);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);border:none;text-decoration:none}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-glow));color:var(--dark);box-shadow:0 4px 20px rgba(242,169,59,.3)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(242,169,59,.4);text-decoration:none}
.btn-outline{background:transparent;border:1.5px solid var(--dark-border);color:var(--text)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

/* Anneau animé au survol des 3 actions du héros — même dégradé/animation que le "glow" du
   titre (shimmer), appliqué uniquement au contour du bouton, pas à son fond. */
.hero-actions .btn-outline{position:relative}
.hero-actions .btn-outline::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg,var(--gold),var(--gold-glow),var(--gold));
  background-size:200% auto;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.hero-actions .btn-outline:hover::before{opacity:1;animation:shimmer 1s ease infinite}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red-bright));color:var(--white)}
.btn-red:hover{transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:12px;border-radius:8px}

/* CARDS */
.card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:24px;transition:var(--transition);overflow-wrap:break-word;word-wrap:break-word}
.card:hover{border-color:rgba(242,169,59,.2)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.card-title{font-size:18px;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600}
.badge-red{background:rgba(179,38,30,.12);color:var(--red-soft)}.badge-green{background:rgba(15,149,241,.12);color:var(--green-soft)}.badge-orange{background:rgba(242,169,59,.12);color:var(--orange)}.badge-gold{background:rgba(242,169,59,.12);color:var(--gold)}.badge-blue{background:rgba(15,149,241,.12);color:var(--blue)}.badge-purple{background:rgba(15,149,241,.12);color:var(--purple)}
.news-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .2s}.news-dot.active{background:var(--gold);width:20px;border-radius:4px}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-1-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-1-2>:first-child{grid-column:1/-1}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.hero-features{grid-template-columns:repeat(3,1fr)}div[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4,.grid-1-2,.hero-features{grid-template-columns:1fr}.hero::before{display:none}}
.mob-br{display:none}
@media(max-width:640px){.mob-br{display:inline}}

/* NAV RESPONSIVE: hamburger only on very small screens where no tabs fit */
@media(max-width:640px){.nav-tabs{display:none}.hamburger{display:flex!important}.nav-overflow-btn{display:none!important}.mob-settings-btn{display:flex!important}}

/* MOBILE CARD READABILITY */
@media(max-width:640px){
  .card{padding:16px 14px}
  .card-header{flex-wrap:wrap;gap:6px}
  .card-title{font-size:16px!important}
  .view{padding:64px 8px 20px}
  #v-hero{padding-top:64px}
  .sec-title{font-size:24px}
  .sec-sub{font-size:15px}
  .hero-title{font-size:28px!important}
  .hero-sub{font-size:16px}
  .grid-3[style*="1.4fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr!important}
  .flux-feed{max-height:260px!important}
  .stock-row{gap:6px}
  .stock-grp{font-size:13px;min-width:52px}
  .stock-lbl{font-size:13px;min-width:48px}
  .tl-item{gap:8px}
  .tl-title{font-size:14px}
  .patients-row,.pouches-row{gap:6px!important}
  .pat{min-width:70px!important;padding:7px 6px!important;flex:1!important;border-radius:10px!important}
  .pat-emoji{font-size:28px!important;margin-bottom:1px!important}
  .pat-need{font-size:20px!important}
  .pat-lbl{font-size:10px!important}
  .pat-hint{font-size:9px!important}
  .pouch{min-width:56px!important;padding:7px 8px!important;flex:1!important;border-radius:10px!important}
  .pouch-type{font-size:20px!important}
  .pouch-sub{font-size:9px!important}
  .game-wrap{min-height:50vh;height:auto;padding:10px;border-width:3px}
  .game-zone{gap:6px!important;padding:4px 4px!important}
  .game-row-label{font-size:14px!important}
  .game-hud{padding:6px 8px!important;gap:4px!important;margin-bottom:4px!important}
  .hud-val{font-size:20px!important}
  .hud-label{font-size:10px!important}
  .hud-timer{font-size:14px!important;padding:2px 8px!important}
  .hud-combo{font-size:14px!important}
  .game-fb{font-size:12px!important;padding:4px 8px!important;margin-top:2px!important}
  #g-instruction{font-size:13px!important;padding:4px 6px!important;margin-bottom:3px!important}
  .mode-card{padding:8px 4px!important}
  .mode-card-icon{font-size:20px!important;margin-bottom:2px!important}
  .mode-card-name{font-size:11px!important}
  .mode-card-sub{font-size:9px!important;display:block!important}
  .mode-grid{gap:4px!important;margin:6px 0!important}
  .crs-row{font-size:14px}
  .msg{font-size:14px!important}
}

/* HAMBURGER MENU */
.hamburger{display:none;flex-direction:column;align-items:center;cursor:pointer;gap:2px;padding:4px}
.hamburger-bar{width:20px;height:2px;background:var(--text-dim);border-radius:2px;transition:var(--transition)}
.hamburger-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.hamburger.open .hamburger-bar:nth-child(1){transform:translateY(4px) rotate(45deg)}
.hamburger.open .hamburger-bar:nth-child(2){opacity:0}
.hamburger.open .hamburger-bar:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
.mob-menu{position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(26,26,26,.97);backdrop-filter:blur(20px);z-index:1400;display:none;flex-direction:column;padding:12px 12px max(12px,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mob-menu.show{display:flex}
.mob-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}
.mob-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);text-decoration:none}
.mob-item:hover,.mob-item.active{border-color:var(--gold);background:rgba(242,169,59,.06)}
.mob-item.active{box-shadow:0 0 12px rgba(242,169,59,.15)}
.mob-item-icon{font-size:28px}
.mob-item-label{font-size:13px;font-weight:600;color:var(--text-dim);text-align:center}
.mob-item.active .mob-item-label{color:var(--gold)}
.mob-section-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;padding:10px 4px 4px}
@media(max-height:700px){.mob-item{padding:8px 4px;gap:2px}.mob-item-icon{font-size:22px}.mob-item-label{font-size:11px}.mob-menu-grid{gap:6px}.mob-section-label{padding:6px 4px 2px;font-size:11px}.mob-menu{padding:8px}}


/* FULLSCREEN */
.fs-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;z-index:10;transition:var(--transition);backdrop-filter:blur(4px)}
.fs-btn:hover{background:rgba(242,169,59,.3);color:var(--white);border-color:var(--gold)}
.fs-btn~.card-header,.fs-btn~div>.card-header{padding-right:36px}
.card.fullscreen,.flux-canvas-wrap.fullscreen{position:fixed!important;inset:0!important;z-index:2000!important;border-radius:0!important;max-width:none!important;width:100%!important;height:100%!important;overflow-y:auto!important;margin:0!important;padding:32px 40px!important;background:var(--dark)!important;border:none!important;display:flex!important;flex-direction:column!important}
.game-wrap.fullscreen{position:fixed!important;inset:0!important;z-index:2000!important;border-radius:0!important;max-width:none!important;width:100%!important;height:100%!important;overflow:hidden!important;margin:0!important;padding:32px 40px!important;background:var(--dark)!important;border:none!important;display:flex!important;flex-direction:column!important}
.card.fullscreen .card-header{font-size:20px;margin-bottom:24px}
.card.fullscreen .card-title{font-size:22px}
.card.fullscreen .flux-feed{max-height:none!important;flex:1}
.card.fullscreen .flux-group-bar{height:320px!important;flex:1}
.card.fullscreen .flux-bar-lbl{font-size:13px!important}
.card.fullscreen .flux-bar-val{font-size:14px!important}
.card.fullscreen #fx-hourly{height:300px!important;flex:1}
.flux-canvas-wrap.fullscreen svg{height:100%!important}
.fullscreen .fs-btn{position:fixed;top:12px;right:12px;z-index:2001;width:40px;height:40px;font-size:18px}

/* MOBILE FULLSCREEN FIX */
@media(max-width:640px){
  .card.fullscreen,.flux-canvas-wrap.fullscreen,.game-wrap.fullscreen{padding:16px 12px!important;height:100dvh!important}
  .game-wrap.fullscreen{padding:12px 8px!important;overflow:hidden!important}
  body:has(.fullscreen){padding-bottom:0!important}
}
/* FORCE LANDSCAPE for Flux CTS fullscreen on portrait phones */
@media(max-width:640px) and (orientation:portrait){
  .flux-canvas-wrap.fullscreen{
    transform:rotate(90deg) translateY(-100%)!important;
    transform-origin:top left!important;
    width:100vh!important;height:100vw!important;
    padding:12px!important;overflow:hidden!important
  }
  .flux-canvas-wrap.fullscreen .fs-btn{
    position:absolute!important;top:8px!important;right:8px!important;
    transform:none!important
  }
}

/* SECTIONS */
.sec-header{margin-bottom:14px}
.sec-label{font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.sec-title{font-family:var(--font-display);font-size:32px;font-weight:700}
.sec-sub{font-size:17px;color:var(--text-dim);margin-top:6px;max-width:560px}

/* STOCK BARS */
.stock-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--dark-border)}
.stock-row:last-child{border-bottom:none}
.stock-grp{font-family:var(--font-mono);font-weight:500;font-size:14px;min-width:72px;text-align:left;white-space:nowrap}
.stock-bar-bg{flex:1;height:8px;background:var(--dark-surface);border-radius:4px;overflow:hidden}
.stock-bar{height:100%;border-radius:4px;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.bar-crit{background:linear-gradient(90deg,var(--red),var(--red-soft))}.bar-low{background:linear-gradient(90deg,var(--orange),var(--orange-light))}.bar-ok{background:linear-gradient(90deg,var(--green),var(--green-soft))}.bar-good{background:linear-gradient(90deg,var(--teal),var(--mint-light))}
.stock-lbl{font-size:13px;font-weight:600;min-width:58px;text-align:right;white-space:nowrap}

/* DASH WELCOME */
.dash-welcome{background:linear-gradient(135deg,rgba(242,169,59,.08),rgba(242,169,59,.02));border:1px solid rgba(242,169,59,.2);border-radius:var(--radius);padding:28px;margin-bottom:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dash-welcome>div:first-child{flex:1;text-align:center}
.dash-welcome h2{font-family:var(--font-display);font-size:24px;margin-bottom:6px}
.dash-welcome p{color:var(--text-dim);font-size:14px}
.level-orb{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-glow));display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dark);font-weight:700}
.level-orb .num{font-size:28px;line-height:1}.level-orb .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px}
@media(max-width:640px){.level-orb{width:96px;height:96px}.level-orb .num{font-size:36px}.level-orb .lbl{font-size:13px}.dash-welcome{flex-direction:column;align-items:center}.dash-welcome>div:first-child{text-align:center}.dash-welcome>div:last-child{align-items:center}}
.xp-wrap{width:100%;max-width:120px}
.xp-bg{height:4px;background:var(--dark-surface);border-radius:2px;overflow:hidden}
.xp-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 2s ease}
.xp-txt{font-size:10px;color:var(--text-muted);text-align:center;margin-top:3px}

/* BLOOD GROUP */
.blood-big{font-family:var(--font-display);font-size:56px;font-weight:700;background:linear-gradient(135deg,var(--red),var(--red-soft));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}

/* TIMELINE */
.tl-item{display:flex;gap:14px;padding:14px 0;position:relative}
.tl-item::before{content:'';position:absolute;left:17px;top:42px;bottom:-14px;width:2px;background:var(--dark-border)}
.tl-item:last-child::before{display:none}
.tl-dot{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--dark-surface);border:2px solid var(--dark-border)}
.tl-dot.gold{border-color:var(--gold);background:rgba(242,169,59,.1)}
.tl-title{font-weight:600;font-size:15px}.tl-sub{font-size:13px;color:var(--text-dim);margin-top:2px}
.tl-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;margin-top:5px}

/* HEMORUSH */
.game-wrap{background:var(--dark-card);border:4px solid var(--gold);border-radius:var(--radius);padding:10px;position:relative;overflow:hidden;height:calc(90vh - 120px);display:flex;flex-direction:column}
.game-wrap.running{border-color:var(--gold);box-shadow:0 0 30px rgba(242,169,59,.15)}
/* DESKTOP FULLSCREEN HEMORUSH (>1024px only) */
@media(min-width:1025px){
.game-wrap.fullscreen{background:var(--dark)!important;border:none!important;padding:20px 24px!important;overflow:hidden!important;justify-content:center!important;align-items:stretch!important;height:100dvh!important;height:100vh!important;max-width:100vw!important;box-sizing:border-box!important}
.game-wrap.fullscreen .game-start-overlay{position:relative!important;inset:auto!important;background:transparent!important;border:none!important;max-width:900px;margin:0 auto;padding:24px!important;gap:14px!important}
.game-wrap.fullscreen .game-start-overlay>div:first-child{font-size:56px!important}
.game-wrap.fullscreen .game-start-overlay>div:nth-child(2){font-size:36px!important}
.game-wrap.fullscreen .game-start-overlay>div:nth-child(3){font-size:22px!important}
.game-wrap.fullscreen .game-start-overlay>div:nth-child(4){font-size:20px!important}
.game-wrap.fullscreen .mode-grid{max-width:700px!important;gap:14px!important}
.game-wrap.fullscreen .mode-card{padding:18px 14px!important;border-radius:16px!important}
.game-wrap.fullscreen .mode-card-icon{font-size:40px!important;margin-bottom:4px!important}
.game-wrap.fullscreen .mode-card-name{font-size:17px!important}
.game-wrap.fullscreen .mode-card-sub{font-size:13px!important;display:block!important}
.game-wrap.fullscreen .btn{font-size:22px!important;padding:16px 56px!important}
.game-wrap.fullscreen .game-hud{padding:10px 24px!important;gap:16px!important;margin-bottom:8px!important;font-size:18px!important;flex-shrink:0!important}
.game-wrap.fullscreen .hud-box{min-width:80px!important}
.game-wrap.fullscreen .hud-label{font-size:16px!important}
.game-wrap.fullscreen .hud-val{font-size:clamp(28px,4vh,48px)!important}
.game-wrap.fullscreen .hud-box button{font-size:16px!important;padding:8px 20px!important}
.game-wrap.fullscreen .game-zone{flex:1!important;gap:clamp(8px,2vh,24px)!important;padding:8px 20px!important;justify-content:center!important;overflow:hidden!important;min-height:0!important}
.game-wrap.fullscreen .game-row-label{font-size:clamp(18px,2.5vh,28px)!important;letter-spacing:1px!important;flex-shrink:0!important}
.game-wrap.fullscreen .patients-row,.game-wrap.fullscreen .pouches-row{gap:16px!important;flex-shrink:0!important}
.game-wrap.fullscreen .pat{padding:clamp(12px,2vh,28px) 20px!important;min-width:120px!important;max-width:none!important;flex:1!important;border-radius:18px!important;border-width:4px!important}
.game-wrap.fullscreen .pat-emoji{font-size:clamp(48px,8vh,88px)!important;margin-bottom:4px!important}
.game-wrap.fullscreen .pat-need{font-size:clamp(36px,6vh,64px)!important}
.game-wrap.fullscreen .pat-lbl{font-size:clamp(14px,2vh,22px)!important}
.game-wrap.fullscreen .pouch{padding:clamp(12px,2vh,28px) 24px!important;min-width:100px!important;flex:1!important;border-radius:16px!important;border-width:4px!important}
.game-wrap.fullscreen .pouch-type{font-size:clamp(36px,6vh,64px)!important}
.game-wrap.fullscreen .game-fb{font-size:18px!important;padding:12px 20px!important;margin-top:8px!important;flex-shrink:0!important}
.game-wrap.fullscreen #g-instruction{font-size:20px!important;padding:10px!important;flex-shrink:0!important}
.game-wrap.fullscreen .game-over-overlay{padding:32px!important}
.game-wrap.fullscreen .game-over-overlay>div:first-child{font-size:72px!important}
.game-wrap.fullscreen .game-over-overlay>div:nth-child(2){font-size:32px!important}
.game-wrap.fullscreen .game-over-overlay>div:nth-child(3){font-size:22px!important}
.game-wrap.fullscreen .game-over-overlay>div:nth-child(4){font-size:18px!important}
}

/* FOLDABLE / SMALL TABLET FULLSCREEN (641px–1024px, e.g. Galaxy Fold inner screen) */
@media(min-width:641px) and (max-width:1024px){
  .game-wrap{height:calc(100vh - 260px)!important}
  /* Fold NON-fullscreen: compact start overlay */
  .game-start-overlay{padding:12px!important;gap:6px!important}
  .game-start-overlay>div:first-child{font-size:36px!important}
  .game-start-overlay>div:nth-child(2){font-size:22px!important}
  .game-start-overlay>div:nth-child(3){font-size:14px!important}
  .game-start-overlay>div:nth-child(4){font-size:13px!important}
  .mode-grid{gap:6px!important;margin:6px 0!important}
  .mode-card{padding:8px 6px!important}
  .mode-card-icon{font-size:24px!important;margin-bottom:2px!important}
  .mode-card-name{font-size:12px!important}
  .mode-card-sub{font-size:10px!important}
  .rules-row{margin:4px 0!important}
  .rules-row>div{padding:5px 8px!important;font-size:13px!important}
  .game-start-overlay .btn{font-size:16px!important;padding:10px 32px!important}
  /* Fold NON-fullscreen: compact gameplay */
  .pat{padding:8px 10px!important;min-width:100px!important}
  .pat-emoji{font-size:32px!important;margin-bottom:2px!important}
  .pat-need{font-size:24px!important}
  .pat-lbl{font-size:11px!important}
  .pouch{padding:8px 12px!important;min-width:80px!important}
  .pouch-type{font-size:24px!important}
  .pouch-sub{font-size:11px!important}
  .game-hud{padding:6px 10px!important;gap:6px!important;margin-bottom:4px!important}
  .hud-val{font-size:22px!important}
  .hud-label{font-size:10px!important}
  .game-row-label{font-size:14px!important}
  .game-zone{gap:5px!important;padding:4px 8px!important}
  .game-fb{font-size:14px!important;padding:6px 10px!important;margin-top:4px!important}
  #g-instruction{font-size:14px!important;padding:5px 8px!important;margin-bottom:3px!important}
  .game-wrap.fullscreen{
    padding:12px 16px!important;
    height:100dvh!important;height:100vh!important;
    min-height:0!important;
    overflow-y:auto!important;
    justify-content:stretch!important;
    align-items:stretch!important;
  }
  .game-wrap.fullscreen .fs-btn{top:8px!important;right:10px!important}
  /* Start overlay */
  .game-wrap.fullscreen .game-start-overlay{
    position:absolute!important;inset:0!important;
    padding:16px 16px!important;
    background:rgba(26,26,26,.97)!important;border:none!important;
    gap:1.2vh!important;justify-content:flex-start!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .game-wrap.fullscreen .game-start-overlay>div:first-child{font-size:36px!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(2){font-size:24px!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(3){font-size:16px!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(4){font-size:15px!important}
  .game-wrap.fullscreen .mode-grid{gap:8px!important;max-width:600px!important}
  .game-wrap.fullscreen .mode-card{padding:10px 8px!important;border-radius:12px!important}
  .game-wrap.fullscreen .mode-card-icon{font-size:28px!important;margin-bottom:2px!important}
  .game-wrap.fullscreen .mode-card-name{font-size:14px!important}
  .game-wrap.fullscreen .mode-card-sub{font-size:11px!important}
  .game-wrap.fullscreen .btn{font-size:18px!important;padding:12px 36px!important}
  /* HUD — compact */
  .game-wrap.fullscreen .game-hud{
    padding:6px 12px!important;gap:8px!important;margin-bottom:6px!important;flex-shrink:0!important;
  }
  .game-wrap.fullscreen .hud-box{min-width:auto!important}
  .game-wrap.fullscreen .hud-label{font-size:11px!important}
  .game-wrap.fullscreen .hud-val{font-size:22px!important}
  .game-wrap.fullscreen .hud-box button{font-size:14px!important;padding:6px 14px!important}
  /* Game zone — fit without scroll but allow if needed */
  .game-wrap.fullscreen .game-zone{
    flex:1!important;gap:6px!important;
    padding:4px 12px!important;justify-content:center!important;
    overflow-y:auto!important;
  }
  .game-wrap.fullscreen .game-row-label{font-size:14px!important}
  .game-wrap.fullscreen .patients-row,.game-wrap.fullscreen .pouches-row{gap:10px!important}
  /* Patient cards — compact to fit */
  .game-wrap.fullscreen .pat{
    padding:10px 10px!important;
    min-width:100px!important;max-width:170px!important;
    border-radius:12px!important;border-width:3px!important;
  }
  .game-wrap.fullscreen .pat-emoji{font-size:36px!important;margin-bottom:2px!important}
  .game-wrap.fullscreen .pat-need{font-size:28px!important}
  .game-wrap.fullscreen .pat-lbl{font-size:12px!important}
  /* Pouches — compact to fit */
  .game-wrap.fullscreen .pouch{
    padding:10px 14px!important;
    min-width:80px!important;
    border-radius:10px!important;border-width:3px!important;
  }
  .game-wrap.fullscreen .pouch-type{font-size:28px!important}
  /* Feedback & instruction */
  .game-wrap.fullscreen .game-fb{font-size:16px!important;padding:10px 16px!important;margin-top:8px!important}
  .game-wrap.fullscreen #g-instruction{font-size:16px!important;padding:8px!important}
  /* Game over */
  .game-wrap.fullscreen .game-over-overlay{padding:24px!important}
  .game-wrap.fullscreen .game-over-overlay>div:first-child{font-size:56px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(2){font-size:24px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(3){font-size:18px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(4){font-size:16px!important}
  /* Other cards fullscreen — tighter padding */
  .card.fullscreen,.flux-canvas-wrap.fullscreen{
    padding:20px 20px!important;height:100dvh!important;height:100vh!important;
  }
  /* VR stats — retention card full width on Fold */
  #vr-stats-grid{grid-template-columns:1fr 1fr!important}
  #vr-stats-grid>:first-child{grid-column:1/-1}
}
.game-hud{display:flex;justify-content:space-around;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:8px;padding:8px 16px;background:rgba(0,0,0,.2);border-radius:var(--radius-sm);flex-shrink:0}
.hud-box{text-align:center;min-width:60px}
.hud-label{font-size:15px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.hud-val{font-family:var(--font-mono);font-size:30px;font-weight:700}
.hud-score{color:var(--gold-glow)}
.hud-timer{color:var(--red-soft);padding:4px 12px;border:2px solid var(--red);border-radius:8px;font-size:20px}
.hud-timer.warning{animation:pulseR 1s infinite}
@keyframes pulseR{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.3)}50%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}
.hud-combo{color:var(--green-soft);font-size:18px}
.hud-combo.hot{color:var(--gold-glow);animation:pulseG .5s ease}
@keyframes pulseG{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes glowText{0%,100%{text-shadow:0 0 8px rgba(242,169,59,.3);opacity:.85}50%{text-shadow:0 0 20px rgba(242,169,59,.7),0 0 40px rgba(242,169,59,.3);opacity:1}}
@keyframes bounceBtn{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes shimmerRule{0%{background-position:200% 0}100%{background-position:-200% 0}}
.game-zone{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:5px 10px;min-height:0;overflow:hidden}
.game-row-label{font-size:19px;color:var(--gold);font-weight:700;text-align:center;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.patients-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:4px}
.pat{background:var(--dark-surface);border:3px solid var(--dark-border);border-radius:16px;padding:14px 16px;min-width:120px;flex:1;text-align:center;transition:all .15s ease;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@keyframes roundFlash{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes cardPop{0%{transform:translateY(12px) scale(.9)}70%{transform:translateY(-2px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes wrapGlow{0%{box-shadow:inset 0 0 30px rgba(242,169,59,.3)}100%{box-shadow:none}}
.round-banner{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);z-index:50;font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--gold);text-shadow:0 0 24px rgba(242,169,59,.6);pointer-events:none;animation:roundFlash .9s ease-out forwards;white-space:nowrap}
.round-glow{animation:wrapGlow .6s ease-out}
.card-pop{animation:cardPop .35s ease-out}
.pat:active{transform:scale(.95)}
.pat.selected{border-color:var(--gold);background:rgba(242,169,59,.1);box-shadow:0 0 20px rgba(242,169,59,.25);transform:translateY(-3px)}
.pat.urgent{border-color:var(--red);animation:urgPulse 1.5s infinite}
@keyframes urgPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.3)}50%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}
.pat.matched{border-color:var(--green);background:rgba(15,149,241,.08);pointer-events:none;animation:matchPop .4s ease}
@keyframes matchPop{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(.92);opacity:.4}}
.pat-urg{position:absolute;top:-7px;right:-7px;background:var(--red);color:var(--white);font-size:13px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase}
.pat-emoji{font-size:49px;margin-bottom:4px}
.pat-need{font-family:var(--font-mono);font-size:38px;font-weight:700;margin-bottom:2px}
.pat-lbl{font-size:16px;color:var(--text-dim)}
.pat-hint{font-size:15px;color:var(--text-muted);margin-top:4px;opacity:0;transition:opacity .3s}
.pat.selected .pat-hint{opacity:1;color:var(--green-soft)}
.pouches-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pouch{background:var(--dark-surface);border:3px solid var(--dark-border);border-radius:14px;padding:14px 19px;min-width:100px;flex:1;text-align:center;cursor:pointer;transition:all .15s ease;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pouch:active{transform:scale(.92)}
.pouch.compatible{border-color:rgba(15,149,241,.4);background:rgba(15,149,241,.06);animation:compatPulse 1s infinite}
.pouch.compatible::after{content:'✓ OK';display:block;font-size:11px;font-weight:700;color:var(--green);margin-top:4px}
.pouch.incompatible{border-color:rgba(179,38,30,.35);background:rgba(179,38,30,.06);opacity:.6}
.pouch.incompatible::after{content:'✗ Non';display:block;font-size:11px;font-weight:700;color:var(--red-soft);margin-top:4px}
@keyframes compatPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,149,241,.2)}50%{box-shadow:0 0 0 6px rgba(15,149,241,0)}}
.pouch.selected{border-color:var(--gold);background:rgba(242,169,59,.08);box-shadow:0 0 16px rgba(242,169,59,.2)}
.pouch.used{opacity:.2;pointer-events:none;transform:scale(.9)}
.pouch-type{font-family:var(--font-mono);font-size:38px;font-weight:700;color:var(--red-soft)}
.pouch-sub{font-size:15px;color:var(--text-muted);margin-top:2px}
.game-fb{margin-top:4px;padding:8px 16px;border-radius:var(--radius-sm);font-size:18px;font-weight:500;text-align:center;flex-shrink:0;min-height:36px;visibility:hidden;opacity:0;transition:opacity .3s}
.game-fb.ok{visibility:visible;opacity:1;background:rgba(15,149,241,.08);border:1px solid rgba(15,149,241,.25);color:var(--green-soft);animation:fbIn .25s ease}
.game-fb.ko{visibility:visible;opacity:1;background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);color:var(--red-soft);animation:fbIn .25s ease}
@keyframes fbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.game-start-overlay{position:absolute;inset:0;background:rgba(26,26,26,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;border-radius:var(--radius);padding:16px;text-align:center;overflow-y:auto;gap:4px}
.game-over-overlay{position:absolute;inset:0;background:rgba(26,26,26,.96);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;border-radius:var(--radius);text-align:center;padding:20px 16px;overflow-y:auto;min-height:50vh;color:var(--game-text-light)!important}
.game-over-overlay.show{display:flex}
.game-over-overlay *{color:var(--game-text-light)!important}
.game-over-overlay .btn-gold{color:var(--game-text-on-gold)!important}
.game-over-overlay .btn-outline{color:var(--game-text-light)!important;border-color:rgba(242,240,236,.4)!important}

/* GAME SCORE POPUP */
.score-popup{position:absolute;pointer-events:none;font-family:var(--font-mono);font-weight:700;font-size:22px;z-index:20;animation:scorePop .8s ease-out forwards}
@keyframes scorePop{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-50px) scale(1.2)}}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mode-card.sel{border-color:var(--gold)!important;background:rgba(242,169,59,.06)!important}
.particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:particleFly 1s ease forwards;opacity:0}
@keyframes particleFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}

/* CHATBOT */
.chat-container{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);overflow:hidden;height:calc(100vh - 140px);display:flex;flex-direction:column}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--dark-border);display:flex;align-items:center;gap:12px}
.chat-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-glow));display:flex;align-items:center;justify-content:center;font-size:18px}
.chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:82%;padding:14px 18px;border-radius:16px;font-size:15px;line-height:1.6;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.bot{align-self:flex-start;background:var(--dark-surface);border:1px solid var(--dark-border);border-bottom-left-radius:4px}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--gold),var(--gold-glow));color:var(--dark);font-weight:500;border-bottom-right-radius:4px}
.msg .hl{color:var(--gold-glow);font-weight:600}
.msg.bot .hl{color:var(--gold)}
.msg.typing .dots{display:inline-flex;gap:4px}.msg.typing .dots span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:dot 1.2s infinite}
.msg.typing .dots span:nth-child(2){animation-delay:.2s}.msg.typing .dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.chat-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:8px 18px}
.chat-sg{padding:7px 12px;border-radius:18px;background:transparent;border:1px solid var(--dark-border);color:var(--text-dim);font-size:11px;font-weight:500;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}
.chat-sg:hover{border-color:var(--gold);color:var(--gold)}
.chat-in-wrap{padding:12px 18px;border-top:1px solid var(--dark-border);display:flex;gap:10px}
.chat-in{flex:1;padding:10px 14px;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:10px;font-family:var(--font-body);font-size:13px;color:var(--text);transition:var(--transition)}
.chat-in:focus{border-color:var(--gold)}.chat-in::placeholder{color:var(--text-muted)}
.chat-send{width:40px;height:40px;border-radius:10px;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dark);font-size:16px;transition:var(--transition)}
.chat-send:hover{background:var(--gold-glow);transform:scale(1.05)}

/* MAP */
#mapid{height:400px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--dark-border);background:var(--navy-panel);touch-action:none}
#map-card.fullscreen{padding:0!important;overflow:hidden!important;display:block!important;background:var(--navy-panel)!important}
#map-card.fullscreen #mapid{position:absolute!important;inset:0!important;height:100%!important;width:100%!important;border-radius:0!important;border:none!important}
#map-card.fullscreen .fs-btn{position:fixed;top:12px;right:12px;z-index:2001}
#map-card.fullscreen #map-nav-btns{z-index:2001;bottom:20px}
#map-card.fullscreen #map-recenter{z-index:2001;bottom:20px}
#map-recenter:hover{background:var(--dark-surface);border-color:var(--blue);color:var(--blue)}
.leaflet-container{background:var(--navy-panel)!important;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}
.leaflet-tile-pane{background:var(--navy-panel)!important;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.leaflet-tile{background:var(--navy-panel)!important;will-change:transform}
.leaflet-map-pane,.leaflet-proxy{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.leaflet-popup-content-wrapper{background:var(--dark-card)!important;color:var(--text)!important;border:1px solid var(--dark-border)!important;border-radius:12px!important;box-shadow:var(--shadow)!important}
.leaflet-popup-tip{background:var(--dark-card)!important}
.leaflet-popup-content{font-family:var(--font-body)!important;font-size:13px!important;line-height:1.5!important}
.leaflet-popup-content strong{color:var(--gold)}
.leaflet-control-attribution,.leaflet-control-zoom{z-index:500!important}
.leaflet-top,.leaflet-bottom{z-index:500!important}
.popup-btn{display:inline-block;margin-top:8px;padding:6px 14px;background:var(--gold);color:var(--dark);border-radius:8px;font-weight:600;font-size:12px;text-decoration:none;font-family:var(--font-body)}
.collecte-card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:var(--transition)}
.collecte-card:hover{border-color:var(--gold)}
.collecte-card .ico{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.collecte-card .info{flex:1}.collecte-card .name{font-weight:600;font-size:13px}.collecte-card .detail{font-size:11px;color:var(--text-dim);margin-top:2px}
.collecte-card .status{text-align:right;font-size:11px;font-weight:600}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}

/* ELIGIBILITY */
.elig-card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:32px;max-width:600px;margin:0 auto}
.elig-progress{display:flex;gap:4px;margin-bottom:28px}
.elig-step{flex:1;height:4px;border-radius:2px;background:var(--dark-surface);transition:var(--transition)}
.elig-step.done{background:var(--gold)}.elig-step.current{background:var(--gold);opacity:.5}
.elig-q{font-size:17px;font-weight:600;margin-bottom:20px;line-height:1.5}
.elig-q .num{color:var(--gold);font-family:var(--font-mono)}
.elig-opts{display:flex;flex-direction:column;gap:10px}
.elig-opt{padding:14px 18px;background:var(--dark-surface);border:2px solid var(--dark-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-size:15px;display:flex;align-items:center;gap:10px}
.elig-opt:hover{border-color:var(--gold)}
.elig-opt.selected{border-color:var(--gold);background:rgba(242,169,59,.08)}
.elig-opt .check{width:20px;height:20px;border-radius:50%;border:2px solid var(--dark-border);display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:12px;flex-shrink:0}
.elig-opt.selected .check{border-color:var(--gold);background:var(--gold);color:var(--dark)}
.elig-nav{display:flex;justify-content:space-between;margin-top:24px}
.elig-result{text-align:center;padding:20px 0}
.elig-result-icon{font-size:64px;margin-bottom:16px}
.elig-result h3{font-family:var(--font-display);font-size:24px;margin-bottom:8px}
.elig-result p{color:var(--text-dim);font-size:14px;line-height:1.6}

/* FORM GEN */
.form-preview{background:var(--white);color:var(--preview-text);border-radius:var(--radius);padding:40px;max-width:600px;margin:20px auto;font-family:serif;font-size:14px;line-height:1.7}
.form-preview h2{font-size:18px;margin-bottom:4px;color:var(--preview-red)}
.form-preview .subtitle{font-size:12px;color:var(--preview-label);margin-bottom:20px}
.form-row{display:flex;gap:16px;margin-bottom:12px}
.form-field{flex:1}
.form-field label{display:block;font-size:11px;color:var(--toggle-knob-off);margin-bottom:2px}
.form-field .val{padding:6px 0;border-bottom:1px solid var(--preview-divider);font-weight:600;font-size:13px}
.form-section{font-weight:700;font-size:13px;margin:16px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--preview-red);color:var(--preview-red)}
.form-check{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.form-check .box{width:14px;height:14px;border:1.5px solid var(--preview-border);border-radius:2px;flex-shrink:0}

/* VR */
.vr-box{background:linear-gradient(135deg,rgba(15,149,241,.04),rgba(15,149,241,.04));border:1px solid rgba(15,149,241,.12);border-radius:var(--radius);padding:36px;text-align:center;position:relative;overflow:hidden}
.vr-envs{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.vr-env{width:180px;height:120px;border-radius:var(--radius-sm);border:2px solid var(--dark-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}
.vr-env::before{content:'';position:absolute;inset:0;opacity:0;transition:var(--transition)}
.vr-env:nth-child(1)::before{background:linear-gradient(135deg,var(--vr-orange-dark),var(--vr-orange-light))}.vr-env:nth-child(2)::before{background:linear-gradient(135deg,var(--vr-green-dark),var(--vr-green-light))}.vr-env:nth-child(3)::before{background:linear-gradient(135deg,var(--vr-indigo-dark),var(--vr-indigo-light))}.vr-env:nth-child(4)::before{background:linear-gradient(135deg,var(--vr-blue-dark),var(--vr-blue-light))}
.vr-env:hover::before{opacity:.12}.vr-env:hover{border-color:var(--blue);transform:translateY(-3px)}
.vr-env.sel{border-color:var(--blue);box-shadow:0 0 16px rgba(15,149,241,.15)}.vr-env.sel::before{opacity:.15}
.vr-env-emoji{font-size:36px;position:relative}.vr-env-name{font-size:12px;font-weight:600;position:relative}

/* BADGES */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}
.badge-item{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:18px 10px;text-align:center;transition:var(--transition)}
.badge-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.badge-item.earned{border-color:rgba(242,169,59,.25);background:rgba(242,169,59,.04)}
.badge-item.locked{opacity:.35;filter:grayscale(1)}
.badge-emoji{font-size:32px;margin-bottom:6px}.badge-name{font-size:10px;font-weight:600}.badge-desc{font-size:11px;color:var(--text-muted);margin-top:3px}

/* NOTIFICATION CENTER */
.notif-dropdown{display:none;position:absolute;top:48px;right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:1100;padding:0}

/* ONBOARDING MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.show{opacity:1;pointer-events:auto;backdrop-filter:blur(6px)}
.modal-box{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:16px;max-width:420px;width:92%;max-height:80vh;overflow-y:auto;padding:0;transform:translateY(20px);transition:transform .3s}
.modal-overlay.show .modal-box{transform:translateY(0)}
.modal-header{padding:20px 16px 10px;text-align:center;background:linear-gradient(135deg,rgba(242,169,59,.08),rgba(15,149,241,.04))}
.modal-step{display:none;padding:14px 16px}
.modal-step.active{display:block}
.modal-dots{display:flex;justify-content:center;gap:6px;padding:12px}
.modal-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)}
.modal-dot.active{background:var(--gold);width:20px;border-radius:4px}
.modal-footer{padding:10px 16px 16px;display:flex;justify-content:space-between;align-items:center}
@media(max-width:640px){.modal-box{width:94%;max-width:none;border-radius:14px;max-height:85vh}.modal-header{padding:16px 12px 8px}.modal-step{padding:10px 12px}.modal-footer{padding:8px 12px 14px}}

/* FOOTER */
.app-footer{padding:16px;text-align:center;border-top:1px solid var(--dark-border);margin-top:auto}
.app-footer-brand{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);margin-bottom:6px}
.app-footer-links{display:flex;justify-content:center;gap:16px;margin:10px 0;flex-wrap:wrap}
.app-footer-links a,.app-footer-links button{font-size:13px;color:var(--text-muted);text-decoration:none;transition:color .2s;background:none;border:none;padding:0;font-family:inherit;cursor:pointer}
.app-footer-links a:hover,.app-footer-links button:hover{color:var(--gold)}
.app-footer-copy{font-size:12px;color:var(--text-muted);margin-top:8px}

/* STOCK GAUGE */
.stock-gauge{position:relative;width:100%;height:24px;background:var(--dark-surface);border-radius:12px;overflow:hidden}
.stock-gauge-fill{height:100%;border-radius:12px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.stock-gauge-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--white);text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* BLOOD CELLS BACKGROUND */
.hero-cells{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-cells .cell{position:absolute;border-radius:50%;opacity:0.06;animation:cellFloat linear infinite}
@keyframes cellFloat{0%{transform:translateY(100vh) rotate(0deg)}100%{transform:translateY(-100px) rotate(360deg)}}

/* KEYBOARD SHORTCUT HINT */
.kbd-hint{position:fixed;bottom:12px;right:12px;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:8px;padding:8px 12px;font-size:10px;color:var(--text-muted);z-index:100;opacity:0;transition:opacity .3s;pointer-events:none}
.kbd-hint.show{opacity:1}
.kbd{display:inline-block;padding:1px 5px;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:3px;font-family:var(--font-mono);font-size:11px;margin:0 2px}

/* SCROLL INDICATOR */
.scroll-top{position:fixed;bottom:70px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--dark);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s;z-index:100;font-size:18px;box-shadow:0 4px 12px rgba(242,169,59,.3)}
.scroll-top.show{opacity:1}
.notif-dropdown.open{display:block;animation:fadeSlide .2s ease}
@media(max-width:640px){.notif-dropdown{width:calc(100vw - 24px)!important;right:-60px!important;max-height:70vh!important}}
.notif-head{padding:14px 16px;border-bottom:1px solid var(--dark-border);display:flex;justify-content:space-between;align-items:center}
.notif-head-title{font-weight:700;font-size:14px}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--dark-border);cursor:pointer;transition:var(--transition)}
.notif-item:hover{background:rgba(242,169,59,.04)}
.notif-item.unread{background:rgba(242,169,59,.06)}
.notif-item .ni-icon{font-size:20px;margin-right:10px;flex-shrink:0}
.notif-item .ni-body{flex:1}
.notif-item .ni-title{font-size:12px;font-weight:600;margin-bottom:2px}
.notif-item .ni-sub{font-size:11px;color:var(--text-dim);line-height:1.4}
.notif-item .ni-time{font-size:10px;color:var(--text-muted);margin-top:3px}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* GUIDE - STORYBOARD */
.story-timeline{position:relative;padding-left:40px}
.story-timeline::before{content:'';position:absolute;left:18px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),var(--green),var(--blue),var(--purple),var(--gold))}
.story-step{position:relative;margin-bottom:28px;opacity:0;transform:translateX(-20px);transition:all .5s ease}
.story-step.visible{opacity:1;transform:translateX(0)}
.story-step-num{position:absolute;left:-40px;top:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;z-index:2}
.story-step .card{margin:0;border-left:3px solid var(--gold)}
.story-step:nth-child(2) .card{border-left-color:var(--green)}
.story-step:nth-child(3) .card{border-left-color:var(--blue)}
.story-step:nth-child(4) .card{border-left-color:var(--purple)}
.story-step:nth-child(5) .card{border-left-color:var(--gold)}
.story-visual{display:flex;align-items:center;gap:16px;margin-top:12px;padding:12px;background:rgba(255,255,255,.02);border-radius:var(--radius-sm)}
.story-anim{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.story-tips{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.story-tip{font-size:10px;padding:4px 10px;border-radius:12px;background:rgba(242,169,59,.08);color:var(--gold);font-weight:500}

/* AR WAYFINDING */
.ar-steps{display:flex;flex-direction:column;gap:2px}
.ar-step{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--dark-surface);border-radius:var(--radius-sm);position:relative;overflow:hidden}
.ar-step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.ar-step:nth-child(1)::before{background:var(--gold)}
.ar-step:nth-child(2)::before{background:var(--blue)}
.ar-step:nth-child(3)::before{background:var(--green)}
.ar-step:nth-child(4)::before{background:var(--purple)}
.ar-step:nth-child(5)::before{background:var(--red-soft)}
.ar-step:nth-child(6)::before{background:var(--gold)}
.ar-step-icon{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border-radius:12px;flex-shrink:0}
.ar-step-num{font-size:10px;color:var(--text-muted);font-weight:600;letter-spacing:.5px}
.ar-step-title{font-size:13px;font-weight:600}
.ar-step-sub{font-size:11px;color:var(--text-dim);margin-top:2px}
.ar-step-time{font-size:10px;color:var(--gold);margin-top:3px;font-weight:500}
.ar-step-learn{margin-top:6px;padding:6px 10px;background:rgba(242,169,59,.06);border-radius:8px;font-size:10px;color:var(--text-dim);line-height:1.5;border-left:2px solid rgba(242,169,59,.3)}

/* IMPACT / APRÈS-DON */
.impact-hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,rgba(242,169,59,.08),rgba(15,149,241,.05));border-radius:var(--radius);margin-bottom:24px;position:relative;overflow:hidden}
.impact-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(242,169,59,.06),transparent 60%)}
.impact-counter{font-family:var(--font-display);font-size:56px;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.impact-counter-label{font-size:13px;color:var(--text-dim);margin-top:4px}

.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.confetti{position:absolute;width:10px;height:10px;opacity:0}
@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

.celebration-card{background:linear-gradient(135deg,rgba(242,169,59,.1),rgba(15,149,241,.05));border:2px solid rgba(242,169,59,.2);border-radius:var(--radius);padding:32px 24px;text-align:center;position:relative;overflow:hidden}
.celebration-card::after{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(242,169,59,.05),transparent);animation:celebSpin 8s linear infinite}
@keyframes celebSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.feedback-card{border-radius:var(--radius);overflow:hidden}
.feedback-header{padding:20px;text-align:center}
.feedback-body{padding:20px}
.fb-journey{display:flex;align-items:center;justify-content:center;gap:0;margin:20px 0;flex-wrap:wrap}
.fb-node{display:flex;flex-direction:column;align-items:center;gap:4px}
.fb-node-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative}
.fb-node-icon.done{background:rgba(15,149,241,.15);border:2px solid var(--green)}
.fb-node-label{font-size:11px;color:var(--text-muted);font-weight:500;max-width:60px;text-align:center}
.fb-arrow{font-size:14px;color:var(--text-muted);margin:0 4px;margin-bottom:18px}
@keyframes fbPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,149,241,.3)}50%{box-shadow:0 0 0 8px rgba(15,149,241,0)}}

/* SOCIAL WALL */
.social-post{padding:16px;border-bottom:1px solid var(--dark-border)}
.social-post:last-child{border-bottom:none}
.sp-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sp-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.sp-name{font-weight:600;font-size:14px}
.sp-time{font-size:10px;color:var(--text-muted)}
.sp-body{font-size:12px;color:var(--text-dim);line-height:1.6;margin-bottom:8px}
.sp-badge-img{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(242,169,59,.08);border-radius:20px;font-size:12px}
.sp-actions{display:flex;gap:16px;margin-top:8px}
.sp-action{font-size:11px;color:var(--text-muted);cursor:pointer;transition:var(--transition)}
.sp-action:hover{color:var(--gold)}
.sp-like.liked{color:var(--red-soft)}
.sp-comment-form{display:flex;gap:8px;margin-top:10px;animation:slideUp .2s ease}
.sp-comment-form input{flex:1;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:12px;}
.sp-comment-form input:focus{border-color:var(--gold)}
.sp-comment-form button{background:var(--gold);color:var(--dark-bg);border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.sp-comment-bubble{background:var(--dark-surface);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:12px;color:var(--text-dim);animation:slideUp .2s ease}
.sp-comment-bubble strong{color:var(--gold)}

/* LOUNGE */
.lounge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lounge-item{text-align:center;padding:20px 12px;background:var(--dark-surface);border-radius:var(--radius-sm);transition:var(--transition)}
.lounge-item:hover{background:rgba(242,169,59,.06);transform:translateY(-2px)}
.lounge-icon{font-size:36px;margin-bottom:8px}
.lounge-title{font-size:12px;font-weight:600;margin-bottom:3px}
.lounge-sub{font-size:10px;color:var(--text-dim)}

/* FRATRIE */
.fratrie-card{background:linear-gradient(135deg,rgba(242,169,59,.06),rgba(15,149,241,.04));border:1px solid rgba(242,169,59,.15);border-radius:var(--radius);padding:24px}
.fratrie-tree{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0;flex-wrap:wrap}
.fratrie-member{text-align:center}
.fratrie-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;position:relative}
.fratrie-avatar .f-badge{position:absolute;bottom:-2px;right:-2px;font-size:12px;background:var(--dark-card);border-radius:50%;padding:2px}
.fratrie-name{font-size:11px;font-weight:600}
.fratrie-status{font-size:11px;color:var(--text-muted)}
.fratrie-link{font-size:20px;color:var(--text-muted);align-self:center}

/* MICRO LEARNING */
.micro-learn{background:linear-gradient(135deg,rgba(15,149,241,.05),rgba(242,169,59,.03));border:1px solid rgba(15,149,241,.12);border-radius:var(--radius-sm);padding:14px 16px;display:flex;align-items:start;gap:12px}
.micro-learn-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.micro-learn-body{flex:1}
.micro-learn-title{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px}
.micro-learn-text{font-size:12px;color:var(--text-dim);line-height:1.6}

/* FLUX CTS VISUALIZATION */
.flux-canvas-wrap{position:relative;width:100%;height:500px;background:linear-gradient(180deg,var(--canvas-grad-dark),var(--canvas-grad-light));border-radius:var(--radius);overflow:hidden;border:1px solid var(--dark-border);display:flex;flex-direction:column}
.flux-canvas-wrap svg{width:100%;height:100%;display:block}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.flux-hud{position:absolute;top:8px;left:0;right:0;padding:8px 12px;display:flex;justify-content:space-between;align-items:start;pointer-events:none;z-index:4}
.flux-hud-left,.flux-hud-right{pointer-events:auto}
.flux-stat{text-align:center;padding:8px 14px;background:rgba(20,20,20,.85);backdrop-filter:blur(8px);border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.flux-stat-val{font-family:var(--font-display);font-size:22px;font-weight:700;transition:transform .1s}
@keyframes valFlash{0%{transform:scale(1);text-shadow:none}25%{transform:scale(1.3);text-shadow:0 0 12px currentColor}100%{transform:scale(1);text-shadow:none}}
.val-flash{animation:valFlash .45s ease-out}
.flux-stat-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
/* Mobile flux HUD — all 4 stats in a row at the bottom */
@media(max-width:640px){
  .flux-hud{position:absolute;top:auto!important;bottom:6px;left:0;right:0;padding:0 6px;display:flex;justify-content:center;gap:4px;flex-wrap:nowrap}
  .flux-hud-left,.flux-hud-right{display:contents!important;flex-direction:row!important;gap:0!important}
  .flux-stat{padding:5px 8px;border-radius:6px;background:rgba(20,20,20,.92)}
  .flux-stat-val{font-size:15px;font-weight:800}
  .flux-stat-lbl{font-size:8px;letter-spacing:.3px;color:var(--text-dim)}
}
/* Mobile flux legend strip */
.flux-legend-mob{display:none}
.flux-legend-fs{display:none}
.flux-legend-fs span{display:flex;align-items:center;gap:4px;color:var(--text-muted);padding:3px 7px;background:rgba(20,20,20,.7);border-radius:6px;backdrop-filter:blur(4px)}
.flux-legend-fs i{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
@media(max-width:640px){.fullscreen .flux-legend-fs{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;position:absolute;bottom:46px;left:0;right:0;padding:8px 12px;z-index:10;font-size:12px;font-weight:600}}
@media(max-width:640px){
  .flux-legend-mob{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;padding:10px 12px;background:var(--dark-surface);border-radius:0 0 var(--radius) var(--radius);border:1px solid var(--dark-border);border-top:none;font-size:13px;font-weight:600}
  .flux-legend-mob span{display:flex;align-items:center;gap:5px;color:var(--text-muted);padding:3px 8px;background:rgba(20,20,20,.5);border-radius:6px}
  .flux-legend-mob i{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .flux-canvas-wrap{border-radius:var(--radius) var(--radius) 0 0!important;height:300px!important}
  .flux-svg-legend{display:none}
}
.flux-legend{position:absolute;bottom:12px;left:12px;display:flex;gap:12px;z-index:5}
.flux-leg-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted)}
.flux-leg-dot{width:10px;height:10px;border-radius:50%}
.flux-feed{max-height:200px;overflow-y:auto;font-size:11px}
.flux-feed-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--dark-border);animation:feedIn .3s ease}
.flux-feed-item.feed-in{border-left:3px solid var(--green);background:rgba(15,149,241,.06)}
.flux-feed-item.feed-out{border-left:3px solid var(--red);background:rgba(179,38,30,.04)}
@keyframes feedIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.flux-feed-icon{font-size:16px;flex-shrink:0}
.flux-feed-text{flex:1;color:var(--text-dim);line-height:1.4}
.flux-feed-time{font-size:11px;color:var(--text-muted);flex-shrink:0}
.flux-group-bar{display:flex;align-items:end;gap:8px;height:200px;padding:12px 4px 0;margin-top:8px}
.flux-bar{flex:1;border-radius:4px 4px 0 0;transition:height .8s cubic-bezier(.4,0,.2,1);position:relative;min-width:28px}
.flux-bar-lbl{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;white-space:nowrap}
.flux-bar-val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600}

/* VIDEO PLAYER */
.vid-player{position:relative;width:100%;aspect-ratio:16/9;background:var(--black);border-radius:var(--radius);overflow:hidden;cursor:pointer}
.vid-player canvas{width:100%;height:100%;display:block}
.card.fullscreen .vid-player{aspect-ratio:auto;height:100%}
.card.fullscreen .vid-player canvas{width:100%;height:100%}
.card.fullscreen video{width:100%!important;height:100%!important}
.vid-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.4);transition:opacity .3s;z-index:3}
.vid-overlay.hidden{opacity:0;pointer-events:none}
.vid-play-btn{width:64px;height:64px;border-radius:50%;background:rgba(242,169,59,.9);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:transform .2s;box-shadow:0 4px 20px rgba(242,169,59,.3)}
.vid-play-btn:hover{transform:scale(1.1)}
.vid-title{margin-top:12px;font-size:14px;font-weight:600;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.5)}
.vid-controls{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));display:flex;align-items:center;gap:10px;z-index:4;opacity:0;transition:opacity .3s}
.vid-player:hover .vid-controls{opacity:1}
.vid-progress{flex:1;height:4px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;cursor:pointer}
.vid-progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .1s linear}
.vid-time{font-size:10px;color:rgba(255,255,255,.7);font-family:var(--font-mono)}
.vid-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.vid-grid{grid-template-columns:1fr}}


/* Le bouton "retour en haut" du pied de page (.footer-top-btn) remplace l'ancien bandeau de
   navigation fixe en bas d'écran sur mobile (supprimé) — il hérite du style commun
   .app-footer-links button ci-dessus, pas besoin de règle dédiée. Le bouton ☰ de l'en-tête
   (voir .hamburger) redevient le point d'accès au menu complet sous 640px. */
@media(max-width:640px){.app-footer-links{gap:10px 14px;padding:0 8px}.app-footer-copy{font-size:11px;padding:0 8px}}

/* MODE SELECTOR */
.mode-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:650px;margin:12px 0}
@media(max-width:640px){.mode-grid{grid-template-columns:repeat(3,1fr)}}
.mode-card{background:var(--dark-surface);border:2px solid var(--dark-border);border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s}
.mode-card:hover,.mode-card.sel{border-color:var(--gold);background:rgba(242,169,59,.08)}
.mode-card.sel{box-shadow:0 0 16px rgba(242,169,59,.2)}
.mode-card-icon{font-size:38px;margin-bottom:4px}
.mode-card-name{font-size:16px;font-weight:700;color:var(--text)}
.mode-card-sub{font-size:13px;color:var(--gold);margin-top:2px;font-weight:600;opacity:.8}

/* QUIZ MODE */
.quiz-q{font-size:16px;font-weight:700;text-align:center;margin:16px 0;color:var(--text)}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:400px;margin:0 auto}
.quiz-opt{background:var(--dark-surface);border:2px solid var(--dark-border);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;font-size:15px;font-weight:600}
.quiz-opt:active{transform:scale(.95)}
.quiz-opt.correct{border-color:var(--green);background:rgba(15,149,241,.12);color:var(--green)}
.quiz-opt.wrong{border-color:var(--red);background:rgba(179,38,30,.12);color:var(--red-soft)}

/* SCORE POPUP */
.score-popup{position:absolute;pointer-events:none;font-family:var(--font-mono);font-weight:700;font-size:22px;z-index:20;animation:scorePop .8s ease-out forwards}
@keyframes scorePop{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-50px) scale(1.2)}}

/* PHENOTYPE */
/* SETTING TOGGLES */
.setting-toggle{width:44px;height:24px;border-radius:12px;background:var(--dark-border);position:relative;cursor:pointer;transition:background .3s;flex-shrink:0}
.setting-toggle.on{background:var(--green)}
.setting-knob{width:20px;height:20px;border-radius:50%;background:var(--white);position:absolute;top:2px;left:2px;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.setting-toggle.on .setting-knob{transform:translateX(20px)}
.pheno-row{display:flex;align-items:center;gap:6px;padding:3px 0}
.pheno-sys{font-size:10px;font-weight:600;color:var(--text-muted);min-width:44px;text-transform:uppercase;letter-spacing:.3px}
.pheno-val{font-family:var(--font-mono);font-size:11px;color:var(--text)}

/* CRS CRITERIA ACCORDION */
.crs-cat{border:1px solid var(--dark-border);border-radius:var(--radius-sm);overflow:hidden;transition:var(--transition)}
.crs-cat:hover{border-color:rgba(242,169,59,.2)}
.crs-cat-head{padding:12px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:var(--dark-surface);transition:var(--transition)}
.crs-cat-head::after{content:'▸';color:var(--text-muted);font-size:12px;transition:transform .2s ease}
.crs-cat.open .crs-cat-head::after{transform:rotate(90deg)}
.crs-cat.open .crs-cat-head{background:rgba(242,169,59,.05);color:var(--gold)}
.crs-cat-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.crs-cat.open .crs-cat-body{max-height:800px}
.crs-row{display:flex;gap:12px;padding:8px 16px;border-top:1px solid var(--dark-border);font-size:12px;line-height:1.5}
.crs-k{font-weight:600;min-width:200px;flex-shrink:0;color:var(--text)}
.crs-v{color:var(--text-dim);flex:1}
@media(max-width:640px){.crs-row{flex-direction:column;gap:2px}.crs-k{min-width:auto}}

/* CONVOCATION */
.convo-card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:28px;max-width:580px}
.convo-from{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--dark-border)}
.convo-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--mint-light));display:flex;align-items:center;justify-content:center;font-size:18px}
.convo-body{font-size:13px;line-height:1.8;color:var(--text-dim)}
.convo-body strong{color:var(--text)}.convo-body .urg{color:var(--red-soft);font-weight:600}

/* BLOOD JOURNEY */
.journey-track{position:relative;padding:20px 0}
.journey-line{position:absolute;top:28px;left:40px;right:40px;height:3px;background:var(--dark-border);border-radius:2px}
.journey-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--gold),var(--green));transition:width 2s ease}
.journey-stops{display:flex;justify-content:space-between;position:relative}
.journey-stop{display:flex;flex-direction:column;align-items:center;width:80px;text-align:center}
.journey-dot{width:28px;height:28px;border-radius:50%;background:var(--dark-surface);border:3px solid var(--dark-border);display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:6px;transition:var(--transition)}
.journey-dot.done{border-color:var(--green);background:rgba(15,149,241,.1)}
.journey-dot.active{border-color:var(--gold);background:rgba(242,169,59,.1);animation:pulseG 2s infinite}
.journey-stop-lbl{font-size:10px;color:var(--text-dim);font-weight:500}
.journey-stop-date{font-size:11px;color:var(--text-muted);margin-top:2px}

/* === ACCORDION / PROGRESSIVE DISCLOSURE === */
.acc-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--dark-card);border:1px solid var(--dark-border);border-left:3px solid var(--gold);border-radius:var(--radius-sm);cursor:pointer;font-size:14px;color:var(--text);font-weight:600;transition:all .2s;width:100%;justify-content:space-between;margin-top:8px;text-align:left}
.acc-toggle:hover{background:rgba(242,169,59,.08);border-color:rgba(242,169,59,.4);border-left-color:var(--gold)}
.acc-toggle .acc-arrow{transition:transform .3s;font-size:11px;color:var(--gold);flex-shrink:0;background:rgba(242,169,59,.1);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.acc-toggle.open .acc-arrow{transform:rotate(180deg);background:rgba(242,169,59,.2)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0}
.acc-body.open{max-height:none;overflow:visible;opacity:1}
.canton-btn{padding:5px 12px;border-radius:20px;border:1.5px solid rgba(242,169,59,.2);background:transparent;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font-body)}
.canton-btn:hover{border-color:rgba(242,169,59,.4);color:var(--text)}
.canton-btn.active{background:rgba(242,169,59,.12);border-color:rgba(242,169,59,.5);color:var(--gold)}

@media(max-width:640px){
  .game-wrap{min-height:auto!important;height:auto!important;padding:0!important;border:none!important;background:transparent!important;display:flex!important;flex-direction:column!important}
  .game-wrap.running{height:auto!important;max-height:none!important;padding:8px!important;background:var(--dark-card)!important;border:3px solid var(--gold)!important;border-radius:12px!important;overflow:hidden!important}
  .game-wrap.gameover{min-height:65vh!important;padding:8px!important;background:var(--dark-card)!important;border:3px solid var(--gold)!important;border-radius:12px!important}
  .game-start-overlay{position:relative!important;inset:auto!important;padding:10px 8px!important;border-radius:var(--radius)!important;background:var(--dark-card)!important;border:2px solid var(--dark-border)!important;overflow:visible!important;gap:4px!important}
  .game-start-overlay>div:first-child{font-size:28px!important;margin-bottom:0!important}
  .game-start-overlay>div:nth-child(2){font-size:20px!important;margin-bottom:0!important}
  .game-start-overlay>div:nth-child(3){font-size:13px!important;margin-bottom:0!important}
  .game-start-overlay>div:nth-child(4){font-size:12px!important;margin-bottom:2px!important}
  .game-start-overlay .mode-grid{gap:4px!important;margin:4px 0!important;grid-template-columns:repeat(5,1fr)!important}
  .game-start-overlay .mode-card{padding:6px 2px!important}
  .game-start-overlay .mode-card-icon{font-size:18px!important;margin-bottom:1px!important}
  .game-start-overlay .mode-card-name{font-size:10px!important}
  .game-start-overlay .mode-card-sub{font-size:9px!important;display:block!important}
  .game-start-overlay>div[style*="shimmerRule"]{padding:6px 8px!important;line-height:1.5!important;margin:3px 0!important}
  .game-start-overlay>div[style*="shimmerRule"] span{font-size:13px!important}
  .game-start-overlay>div[style*="gap:16px"]{font-size:11px!important;margin-bottom:4px!important}
  .game-start-overlay .btn{font-size:14px!important;padding:8px 28px!important}
  .hr-area{aspect-ratio:3/2!important}
  .patients-row{min-height:auto!important;gap:6px!important}
  .pouches-row{min-height:auto!important;gap:6px!important}
  /* MOBILE FULLSCREEN HEMORUSH — fit viewport, no scroll */
  .game-wrap.fullscreen{padding:10px 6px 6px!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;justify-content:stretch!important;align-items:stretch!important;background:var(--dark)!important;border:none!important;border-radius:0!important}
  .game-wrap.fullscreen.running{height:100dvh!important;max-height:100dvh!important;background:var(--dark)!important;border:none!important;border-radius:0!important}
  .game-wrap.fullscreen .fs-btn{position:absolute!important;top:8px!important;right:8px!important;font-size:18px!important;z-index:50!important}
  .game-wrap.fullscreen .particles{display:none!important}
  /* Start overlay — MUST scroll on small screens */
  .game-wrap.fullscreen .game-start-overlay{position:absolute!important;inset:0!important;padding:12px 10px 10px!important;background:rgba(26,26,26,.97)!important;border:none!important;gap:1.5vh!important;justify-content:flex-start!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .game-wrap.fullscreen .game-start-overlay>div:first-child{font-size:10vw!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(2){font-size:7vw!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(3){font-size:3.8vw!important}
  .game-wrap.fullscreen .game-start-overlay>div:nth-child(4){font-size:3.5vw!important}
  .game-wrap.fullscreen .mode-grid{gap:6px!important;max-width:none!important}
  .game-wrap.fullscreen .mode-card{padding:1.5vh 6px!important}
  .game-wrap.fullscreen .mode-card-icon{font-size:7vw!important}
  .game-wrap.fullscreen .mode-card-name{font-size:3.2vw!important}
  .game-wrap.fullscreen .mode-card-sub{font-size:9px!important;display:block!important}
  .game-wrap.fullscreen .btn{font-size:5vw!important;padding:2vh 10vw!important}
  /* HUD — compact strip */
  .game-wrap.fullscreen .game-hud{padding:6px 8px!important;gap:4px!important;margin-bottom:4px!important;flex-shrink:0!important}
  .game-wrap.fullscreen .hud-box{min-width:auto!important;padding:2px 6px!important}
  .game-wrap.fullscreen .hud-label{font-size:2.5vw!important}
  .game-wrap.fullscreen .hud-val{font-size:5vw!important}
  .game-wrap.fullscreen .hud-box button{font-size:3vw!important;padding:4px 10px!important}
  /* Instruction */
  .game-wrap.fullscreen #g-instruction{font-size:3.5vw!important;padding:6px 8px!important;margin-bottom:3px!important;flex-shrink:0!important}
  /* Game zone — fill remaining space */
  .game-wrap.fullscreen .game-zone{flex:1!important;gap:1.2vh!important;padding:0 4px!important;min-height:0!important;overflow:hidden!important}
  .game-wrap.fullscreen .game-row-label{font-size:3.5vw!important;margin-bottom:0.5vh!important;flex-shrink:0!important}
  .game-wrap.fullscreen .patients-row,.game-wrap.fullscreen .pouches-row{gap:2.5vw!important;flex-shrink:0!important}
  .game-wrap.fullscreen .pat{padding:1.8vh 2.5vw!important;min-width:20vw!important;max-width:28vw!important;border-radius:12px!important;border-width:2px!important}
  .game-wrap.fullscreen .pat-emoji{font-size:8vw!important;margin-bottom:0!important}
  .game-wrap.fullscreen .pat-need{font-size:6.5vw!important;margin-bottom:0!important}
  .game-wrap.fullscreen .pat-lbl{font-size:3vw!important}
  .game-wrap.fullscreen .pat-hint{font-size:2.5vw!important}
  .game-wrap.fullscreen .pouch{padding:1.8vh 3.5vw!important;min-width:18vw!important;border-radius:12px!important;border-width:2px!important}
  .game-wrap.fullscreen .pouch-type{font-size:6.5vw!important}
  .game-wrap.fullscreen .pouch-sub{font-size:2.5vw!important;margin-top:0!important}
  /* Feedback + game over */
  .game-wrap.fullscreen .game-fb{font-size:3.5vw!important;padding:6px 10px!important;margin-top:4px!important;flex-shrink:0!important}
  .game-wrap.fullscreen .game-over-overlay{padding:12px 10px!important;overflow-y:auto!important;justify-content:flex-start!important;padding-top:10vh!important}
  .game-wrap.fullscreen .game-over-overlay>div:first-child{font-size:48px!important;margin-bottom:6px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(2){font-size:20px!important;margin-bottom:4px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(3){font-size:15px!important}
  .game-wrap.fullscreen .game-over-overlay>div:nth-child(4){font-size:13px!important}
  .game-wrap.fullscreen #final-facts{font-size:12px!important;max-width:90%!important;margin-bottom:10px!important}
  .game-wrap.fullscreen .game-over-overlay .btn{font-size:15px!important;padding:10px 24px!important}
}

@media(max-width:640px){
  .chat-container{height:calc(100vh - 180px)!important}
  .chat-head{padding:10px 12px!important;gap:8px!important}
  .chat-sugg{padding:6px 10px!important;gap:4px!important}
  .chat-sg{font-size:12px!important;padding:6px 10px!important}
  .chat-in-wrap{padding:8px 10px!important}
  .chat-msgs{padding:10px!important;gap:10px!important}
}

/* Live ticker */
.ticker-wrap{overflow:hidden;background:rgba(242,169,59,.06);border:1px solid rgba(242,169,59,.12);border-radius:20px;padding:6px 0;margin:12px auto 0;max-width:480px;position:relative}
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:1;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--dark-bg),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,var(--dark-bg),transparent)}
.ticker-track{display:flex;animation:tickerScroll 20s linear infinite;white-space:nowrap;gap:32px;padding:0 16px}
.ticker-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);flex-shrink:0}
.ticker-item .t-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseG 2s infinite}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@keyframes cardShine{0%,100%{opacity:0}50%{opacity:1}}
@keyframes eqBar{0%{height:4px}100%{height:20px}}

/* Galaxy Fold & very narrow screens */
@media(max-width:360px){
  .sec-title{font-size:20px!important}
  .wrapped-stat .ws-num{font-size:26px}
  .cd-ring{width:80px;height:80px}
  .cd-ring div:first-child{font-size:22px!important}
  .donor-card{aspect-ratio:1.5/1}
  .grid-4-resp{grid-template-columns:repeat(2,1fr)!important}
}

/* Wrapped */
.wrapped-card{background:linear-gradient(135deg,var(--wrapped-grad-1),var(--wrapped-grad-2),var(--wrapped-grad-3));border:1px solid rgba(15,149,241,.3);border-radius:var(--radius);padding:20px;text-align:center;position:relative;overflow:hidden}
.wrapped-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(242,169,59,.1),transparent 50%),radial-gradient(circle at 80% 20%,rgba(179,38,30,.1),transparent 50%)}
.wrapped-stat{display:flex;flex-direction:column;align-items:center;padding:12px}
.wrapped-stat .ws-num{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1}
.wrapped-stat .ws-lbl{font-size:13px;color:var(--text-muted);margin-top:4px}

/* Countdown */
.cd-ring{width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.cd-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:4px solid var(--dark-border)}
.cd-ring::after{content:'';position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold);transform:rotate(216deg)}


/* BeeBot floating */
.beebot-fab{position:fixed;bottom:70px;right:16px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--dark);border:none;font-size:26px;cursor:pointer;z-index:1500;box-shadow:0 4px 20px rgba(242,169,59,.4);transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center}
.beebot-fab:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(242,169,59,.6)}
.beebot-panel{position:fixed;bottom:136px;right:16px;width:340px;max-height:480px;background:var(--dark-card);border:1px solid var(--gold);border-radius:var(--radius);z-index:1500;display:none;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.5);overflow:hidden}
.beebot-panel.open{display:flex}
.beebot-header{padding:12px 16px;background:linear-gradient(135deg,rgba(242,169,59,.15),rgba(242,169,59,.05));border-bottom:1px solid var(--dark-border);display:flex;align-items:center;gap:8px}
.beebot-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:340px}
.beebot-msg{padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.5;max-width:85%}
.beebot-msg.bot{background:var(--dark-surface);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
.beebot-msg.user{background:var(--gold);color:var(--dark);align-self:flex-end;border-bottom-right-radius:4px}
.beebot-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--dark-border)}
.beebot-input input{flex:1;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:20px;padding:8px 14px;color:var(--text);font-size:14px;}
.beebot-input button{background:var(--gold);color:var(--dark);border:none;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;flex-shrink:0}
@media(max-width:640px){.beebot-fab{bottom:90px;right:12px;width:48px;height:48px;font-size:22px}.beebot-panel{right:8px;left:8px;width:auto;bottom:150px;max-height:60vh}}

/* Tour guidé */
.tour-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;background:transparent;pointer-events:none}
.tour-highlight{position:absolute;z-index:5001;box-shadow:0 0 0 4000px rgba(0,0,0,.65);border-radius:12px;border:2px solid var(--gold);pointer-events:none;transition:all .4s ease}
.tour-tooltip{position:fixed;z-index:5002;background:var(--dark-card);border:1px solid var(--gold);border-radius:12px;padding:16px;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.5);pointer-events:all}
.tour-tooltip h4{font-size:15px;font-weight:700;color:var(--gold);margin:0 0 6px}
.tour-tooltip p{font-size:13px;color:var(--text-dim);line-height:1.6;margin:0 0 12px}
.tour-step-dots{display:flex;gap:4px;margin-bottom:10px}
.tour-step-dots span{width:8px;height:8px;border-radius:50%;background:var(--dark-border)}
.tour-step-dots span.active{background:var(--gold)}
.tour-btns{display:flex;gap:8px;justify-content:flex-end}
.map-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(.92) saturate(.55)}
/* mode public : éléments réservés masqués, onglets réservés marqués */
body.bmb-public .alpha-only{display:none!important}
body:not(.bmb-public) .public-only{display:none!important}
body.bmb-public .nav-tab.bmb-reserve::after{content:" 🔒";font-size:.75em;opacity:.7}
body.bmb-public .mob-item.bmb-reserve,body.bmb-public .hero-feat.bmb-reserve{position:relative}
body.bmb-public .mob-item.bmb-reserve::after,body.bmb-public .hero-feat.bmb-reserve::after{content:"🔒";position:absolute;top:4px;right:8px;font-size:11px;line-height:1;opacity:.9}
/* ancien écran d'accès neutralisé : l'entrée se fait par acces.js */
#gate-overlay{display:none!important}
.chat-send-lbl{display:none}
@media(max-width:640px){
  #v-chatbot{padding:0!important}
  #v-chatbot .chat-container{position:fixed;left:0;right:0;top:calc(var(--bmb-vvt,0px) + 56px);height:calc(var(--bmb-vvh,100dvh) - 56px - 76px)!important;border-radius:0;border-left:0;border-right:0;z-index:1400}
  html.bmb-kb #v-chatbot .chat-container{height:calc(var(--bmb-vvh,100dvh) - 56px)!important}
  html.bmb-kb .bmb-pill,html.bmb-kb .beebot-fab{display:none!important}
  body:has(#v-chatbot.active) .beebot-fab,body:has(#v-chatbot.active) .bmb-pill,body:has(.beebot-panel.open) .bmb-pill,body:has(.beebot-panel.open) .beebot-fab{display:none!important}
  .chat-sugg{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.chat-sugg::-webkit-scrollbar{display:none}.chat-sg{white-space:nowrap;flex-shrink:0}
  .chat-in-wrap{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;gap:8px!important}
  .chat-in{font-size:16px!important;min-height:44px;padding:10px 14px!important}
  .chat-send{width:auto!important;min-width:44px;height:44px!important;padding:0 16px;font-weight:700;font-size:15px!important;gap:6px;border-radius:12px!important}
  .chat-send-lbl{display:inline}
  .beebot-panel{position:fixed;top:var(--bmb-vvt,0px)!important;left:0!important;right:0!important;bottom:auto!important;height:var(--bmb-vvh,100dvh);max-height:none!important;width:auto!important;border-radius:0!important;border:0!important;z-index:2000}
  .beebot-msgs{max-height:none!important}
  .beebot-input{padding:10px 12px!important;gap:8px!important}
  .beebot-input input{font-size:16px!important;min-height:44px}
  .beebot-input button{width:auto!important;min-width:44px;height:44px!important;border-radius:22px!important;padding:0 16px;font-weight:700;font-size:15px!important}
  body.bmb-panel-open{overflow:hidden}
}

/* v0.7.0 */
.kbd-hint{display:none!important}
.live-toast{border:1px solid var(--text-muted);background:var(--dark-surface);color:var(--text)}
.live-toast .lt-x{margin-left:10px;min-width:32px;min-height:32px;border-radius:8px;border:1px solid var(--text-muted);background:transparent;color:var(--text);font-size:14px;cursor:pointer;flex:none}
[data-profil-ouvrir]{cursor:pointer}

/* Mode démonstration : les blocs fictifs (data-demo) restent masqués tant que la personne ne l'active pas ; les blocs réels (data-reel) s'effacent en démonstration */
html:not(.bmb-demo) [data-demo]{display:none!important}
html.bmb-demo [data-reel]{display:none!important}
/* Alerte : la croix de fermeture doit recevoir le clic */
.live-toast.show{pointer-events:auto}
.live-toast .lt-x{min-width:40px;min-height:40px}
/* HémoRush : modes verrouillés avant le premier passage en Apprentissage */
.mode-card.verrou{opacity:.45;cursor:not-allowed}
.mode-card.verrou .mode-card-name::after{content:" 🔒";font-size:.8em}
/* Accordéons : même logique de couleur partout. Fermé : fond neutre, liseré doré. Ouvert : fond doré léger, bordure dorée */
.acc-toggle.open{background:rgba(242,169,59,.10);border-color:rgba(242,169,59,.45);border-left-color:var(--gold)}
body.light-mode .acc-toggle.open{background:#FFF8EC;border-color:var(--gold)}
#notif-reel .ni-title{font-size:13px}#notif-reel .ni-sub{font-size:12px}
/* Barre du haut sur petit téléphone : le dernier bouton (profil, connexion) reste visible */
@media(max-width:430px){nav{padding:0 10px!important;gap:6px!important}.nav-right{gap:6px!important}.nav-brand{font-size:15px!important;gap:4px!important}}
/* HémoRush : l'écran de départ reste entièrement visible quand la fenêtre est basse, et le cadre garde une hauteur utile sur ordinateur */
.game-start-overlay{justify-content:safe center}
@media(min-width:1025px){.game-wrap:not(.fullscreen){min-height:620px}}