/* =====================================================
   Petit Bac - habillage visuel v2 (charge apres style.css)
   ===================================================== */

/* ---------- Base ---------- */
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.icon-after{margin-left:.5em}
.icon-before{margin-right:.5em}
.icon-coin{color:#f5c542}
.icon-warn{color:#ffb56c}
.medal{width:1.5em;height:1.5em;vertical-align:-.35em}
.medal-1{color:#f5c542}
.medal-2{color:#c9d1dc}
.medal-3{color:#d98c4e}
.button>.icon:first-child:not(.icon-after):not(.icon-before),.nav-item>.icon:first-child{margin-right:.4em}
.button>span>.icon{margin:0}
.card-icon .icon{width:1em;height:1em}
.achievement h3 .icon,.friend-profile-achievements .icon{color:#f5c542}
.notification-badge .icon{display:none}
html.no-ads :is(.ads-container,#ads-footer){display:none!important}
html.no-ads body{padding-bottom:0!important}
:root{--ads-h:0px}
html:not(.no-ads) body:has(#ads-footer:not(.hidden)){--ads-h:64px}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 520px at 80% -6%,#3b2b6e66,transparent 62%),radial-gradient(760px 520px at 0% 100%,#1c3a6e4d,transparent 62%),var(--bg);background-attachment:fixed}
*{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent}
::selection{background:#8d75ff66}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.avatar{color:#fff}

@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#auth-view,#home-view,#room-view,#game-view,#profile-view,#shop-view,#inventory-view{animation:view-in .35s ease-out both}

/* ---------- Barre du haut et icones ---------- */
.topbar{position:sticky;top:0;z-index:12;height:72px;gap:12px;margin:0 -28px;padding:0 28px;
  background:#10121acc;backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid #ffffff14}
.brand{margin-right:auto}
.brand-mark{box-shadow:0 6px 18px #8d75ff55}
.brand-logo{width:34px;height:34px;border-radius:10px;box-shadow:0 6px 18px #8d75ff55;flex:none}
.hero-logo{display:block;width:76px;height:76px;margin-bottom:22px;border-radius:22px;box-shadow:0 14px 40px #7b61f566}
.user-bar{gap:10px}
.enhancement-controls{margin-left:0;gap:8px}

/* Centrage reel des pictogrammes */
.icon-button{display:inline-grid;place-items:center;padding:0;width:38px;height:38px;flex:0 0 auto;
  border-radius:12px;font-size:17px;line-height:1;background:#ffffff0c;transition:background .18s,transform .18s,border-color .18s}
.icon-button:hover{background:#ffffff1c;transform:translateY(-1px)}
.icon-button:active{transform:scale(.94)}
.enhancement-controls .icon-button{padding:0;font-size:17px}
body.mobile-mode .icon-button{padding:0}
.messages-toggle{position:relative}
.notification-badge{right:-6px;top:-6px}
.ads-close{display:grid;place-items:center;padding:0;line-height:1}

.user-chip{display:flex;align-items:center;gap:9px;min-height:38px;padding:5px 14px 5px 5px;border-radius:999px;
  border:1px solid #ffffff12;transition:transform .18s,box-shadow .18s}
.user-chip:hover{transform:translateY(-1px)}
.user-chip .header-avatar{width:28px;height:28px}
.user-chip[data-title]:not([data-title=""])::after{display:inline-block;margin:0;padding:2px 8px;border-radius:999px;
  background:#0b0d14b3;color:var(--title-color,#fff);font-size:9px;font-weight:var(--title-weight,800);font-style:var(--title-fs,normal);
  text-shadow:var(--title-shadow,none);line-height:1.3}
.friend-profile-preview-title{color:var(--title-color,#c9baff);font-weight:var(--title-weight,800);font-style:var(--title-fs,normal);text-shadow:var(--title-shadow,none)}
.rank-chip{background:#8d75ff14;font-weight:700}

/* ---------- Boutons, champs ---------- */
.button{border-radius:12px;letter-spacing:.01em}
.button:active{transform:scale(.97)}
.primary,.button.primary{background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 8px 22px #8d75ff3d}
.button.outline:hover{background:#ffffff0d}
.button.light{box-shadow:0 8px 22px #0003}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #8d75ff2e}
.modal{backdrop-filter:blur(6px)}
.modal-card{border-radius:22px;box-shadow:0 30px 90px #0008}
.toast{border-radius:14px;box-shadow:0 14px 40px #0007}

/* ---------- Cartes et panneaux ---------- */
.auth-card,.panel{background:linear-gradient(150deg,#1e2131f2,#161824f2);border:1px solid #ffffff14;border-radius:24px;
  box-shadow:0 20px 60px #0003,inset 0 1px 0 #ffffff0d}
.hero-copy h1 span{background:linear-gradient(90deg,#b49eff,#f08cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-row h1 span:not(.wave){background:linear-gradient(90deg,#bba8ff,#f08cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.level-ring{box-shadow:0 0 22px #8d75ff40,inset 0 0 14px #8d75ff22}
.xp-track{height:6px}
.xp-track i{background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 10px #8d75ff88;transition:width .5s}

.play-card{min-height:262px;border-radius:26px;isolation:isolate;transition:transform .25s,box-shadow .25s}
.play-card::before{content:"";position:absolute;z-index:-1;width:360px;height:360px;right:-130px;top:-150px;border-radius:50%;
  background:radial-gradient(circle,#ffffff30,transparent 65%)}
.play-card::after{content:"";position:absolute;z-index:-1;width:220px;height:220px;left:-90px;bottom:-110px;border-radius:50%;
  border:1px solid #ffffff1f;box-shadow:0 0 0 26px #ffffff08,0 0 0 52px #ffffff05}
.play-card:hover{transform:translateY(-4px);box-shadow:0 26px 64px #0006}
.quick-card{background:linear-gradient(135deg,#5845c4,#8b69ef 58%,#b67ff6);box-shadow:0 20px 54px #6b4fe040}
.private-card{background:linear-gradient(135deg,#1b1f35,#251f3b 60%,#33254f);border:1px solid #ffffff1c}
.card-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#ffffff1f;font-size:22px;line-height:1}
.play-card h2{font-size:28px;letter-spacing:-.02em}

.stat-box,.profile-stat,.achievement,.daily-quest,.friend-profile-stats>div,.profile-avatar-card{border:1px solid #ffffff0f}
.stat-box{background:linear-gradient(150deg,#161927,#12141d)}
.daily-quest,.achievement,.profile-stat{transition:transform .2s,border-color .2s}
.daily-quest:hover,.achievement:hover,.profile-stat:hover{transform:translateY(-2px);border-color:#8d75ff50}
.friend-row:hover,.player-row:hover{background:#ffffff06}

.bottom-nav{position:sticky;bottom:calc(16px + var(--ads-h));z-index:10;width:max-content;max-width:100%;padding:6px;margin:34px auto 0;
  border-radius:20px;background:#171923d9;backdrop-filter:blur(14px);border:1px solid #ffffff18;box-shadow:0 14px 44px #0006}
.nav-item{border-radius:14px;transition:background .18s,color .18s}
.nav-item:hover{background:#ffffff0c;color:#fff}
.nav-item.active{background:linear-gradient(110deg,#8d75ff30,#d886fb22);color:#e4dbff;border-color:#8d75ff44}

/* ---------- Boutique et inventaire ---------- */
.shop-sections{display:grid;gap:34px;margin-top:4px}
.shop-balance{display:inline-flex;align-items:center;gap:8px;margin:16px 0 22px;padding:9px 18px;border-radius:999px;
  background:linear-gradient(120deg,#8d75ff2a,#d886fb1a);border:1px solid #8d75ff44;color:#e6dcff;font-size:14px;font-weight:800}
.shop-filters{display:flex;flex-wrap:wrap;gap:8px}
.shop-filter{padding:8px 15px;border-radius:999px;border:1px solid #ffffff18;background:#ffffff08;color:#cbc9da;font-size:12px;font-weight:700;transition:.15s}
.shop-filter:hover{background:#ffffff14}
.shop-filter.active{border-color:transparent;background:linear-gradient(110deg,var(--purple),var(--pink));color:#fff;box-shadow:0 6px 20px #8d75ff44}
.shop-section h2,.inventory-section h2{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font-size:18px}
.shop-section h2 small,.inventory-section h2 small{padding:3px 10px;border-radius:999px;background:#ffffff0d;color:var(--muted);font:600 11px "DM Sans",sans-serif}
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.shop-item{position:relative;display:flex;flex-direction:column;gap:5px;padding:13px;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#1d2030,#141621);border:1px solid #ffffff14;transition:transform .2s,box-shadow .2s,border-color .2s}
.shop-item:hover{transform:translateY(-4px);box-shadow:0 18px 44px #0006}
.shop-item h3{margin:8px 0 0;font-size:14px;line-height:1.25}
.shop-item p{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.shop-item .button{margin-top:auto;width:100%}
.shop-item.owned:not(.inventory-equipped){opacity:.94}
.shop-item-common{border-color:#ffffff14}
.shop-item-rare{border-color:#3b82f666}
.shop-item-rare:hover{box-shadow:0 18px 44px #3b82f630}
.shop-item-epic{border-color:#a855f77a}
.shop-item-epic:hover{box-shadow:0 18px 44px #a855f73a}
.shop-item-legendary{border-color:#fbbf2490;background:linear-gradient(160deg,#2b2413,#18161b)}
.shop-item-legendary::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#fbbf24,#ff7ac6,#fbbf24)}
.shop-item-legendary:hover{box-shadow:0 18px 50px #fbbf2440}
.inventory-equipped{outline:2px solid var(--purple);outline-offset:-2px}
.rarity-tag{padding:3px 9px;border-radius:999px;background:#ffffff10;color:#c9c7d8;font-size:10px;font-weight:800;letter-spacing:.03em}
.shop-item-rare .rarity-tag{background:#3b82f624;color:#92bbff}
.shop-item-epic .rarity-tag{background:#a855f724;color:#d6acff}
.shop-item-legendary .rarity-tag{background:#fbbf2426;color:#ffd56b}

.cosmetic-preview{position:relative;height:96px;display:grid;place-items:center;overflow:hidden;border-radius:14px;
  background:radial-gradient(circle at 50% 0,#ffffff16,transparent 70%),#0e1018;border:1px solid #ffffff0d}
.cosmetic-preview .shop-avatar-preview{width:72px;height:72px;margin:0;border-radius:16px}
.preview-chip{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;
  background:var(--b-bg,#ffffff16);color:var(--b-fg,#fff);box-shadow:var(--b-ring,none);font-size:12px;font-weight:700}
.preview-chip .avatar{width:26px;height:26px;border-radius:50%;font-size:11px}
.preview-avatar{width:58px;height:58px;border-radius:18px;font-size:22px}
.preview-title{align-content:center;gap:5px;text-align:center}
.preview-title strong{font-size:13px}
.preview-title span{padding:2px 9px;border-radius:999px;background:#0b0d14b3;color:var(--title-color,#cdbfff);font-size:10px;font-weight:var(--title-weight,800);font-style:var(--title-fs,normal);text-shadow:var(--title-shadow,none)}

/* Couleur du titre (inventaire) */
.title-color-section{padding:16px;border-radius:20px;background:linear-gradient(150deg,#1d2030,#141621);border:1px solid #ffffff14}
.title-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.title-color-preview{padding:6px 14px;border-radius:999px;background:#0b0d14b3;font-size:14px;font-weight:800;color:#cdbfff}
.title-color-swatches{display:flex;flex-wrap:wrap;gap:8px}
.title-color-swatch{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid #ffffff30;transition:transform .15s}
.title-color-swatch:hover{transform:scale(1.12)}
.title-color-swatch.active{border-color:#fff;box-shadow:0 0 0 3px #8d75ff88}
.title-color-picker{width:42px;height:34px;padding:2px;border-radius:10px;border:1px solid #ffffff30;background:transparent;cursor:pointer}

/* Pseudo avec badge et titre (salon, messagerie) */
.identity{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.identity-badge{display:inline-flex;align-items:center;border-radius:999px}
.identity-badge:not([data-badge=default]){padding:2px 10px;background:var(--b-bg,transparent);color:var(--b-fg,inherit);box-shadow:var(--b-ring,none)}
.identity-badge[data-styled="1"]:not([data-badge=default]){background:linear-gradient(#0b0d1488,#0b0d1488),var(--b-bg,transparent)}
.identity-name{font-weight:700;font-size:12px}
.identity-title{padding:1px 8px;border-radius:999px;background:#0b0d14b3;color:var(--title-color,#cdbfff);font-size:10px;font-weight:var(--title-weight,800);font-style:var(--title-fs,normal);text-shadow:var(--title-shadow,none)}
.identity.clickable,.avatar.clickable{cursor:pointer}
.player-name{display:flex!important;align-items:center;flex-wrap:wrap;gap:4px}
.host-tag{padding:1px 7px;border-radius:999px;background:#8d75ff26;color:#cdbfff;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.chat-sender{margin-bottom:5px}
.chat-sender .identity-name{font-size:11px}
.friend-profile-button .identity{overflow:hidden}
.review-player{white-space:nowrap}
.review-player .avatar{display:inline-grid;vertical-align:middle;width:28px;height:28px;margin-right:8px;font-size:11px;border-radius:10px}
.review-player .identity{vertical-align:middle}
.score-card .score-label{display:block;font-size:11px;color:inherit}
.score-card .identity{display:inline-flex;justify-content:center;margin:0}
.score-card .identity-badge{display:inline-flex;margin:0}
.score-card .identity-name{display:inline;margin:0;font-size:11px;color:inherit}
.score-card .identity-name:not([data-style]){color:#f4f3f8}
:root[data-color-scheme=light] .score-card:not(:first-child) .identity-name:not([data-style]){color:#1b1a2e}
.score-card .identity-title{display:inline;margin:0;font-size:9px;color:var(--title-color,#cdbfff)}
.score-details .identity{vertical-align:middle}
.preview-style{font:800 22px "Space Grotesk",sans-serif}
.preview-glyph{font-size:30px;animation:glyph-float 2.2s ease-in-out infinite}
@keyframes glyph-float{50%{transform:translateY(-6px) scale(1.08)}}
.preview-theme{background:var(--theme-bg,linear-gradient(135deg,#171923,#40304f))}
.preview-theme i{position:absolute;left:14px;right:14px;bottom:14px;height:28px;border-radius:10px;background:#ffffff22;border:1px solid #ffffff30}
.preview-theme b{position:absolute;left:14px;top:14px;width:38px;height:8px;border-radius:6px;background:#ffffff66}

/* Couleurs des badges (variables reutilisees partout) */
[data-badge=mint]{--b-bg:#73e2be;--b-fg:#14221e}
[data-badge=sunset]{--b-bg:#ee9c78;--b-fg:#271813}
[data-badge=royal]{--b-bg:#272235;--b-fg:#f2d78e;--b-ring:0 0 0 1px #d8b75c}
[data-badge=neon]{--b-bg:#171d35;--b-fg:#b7c8ff;--b-ring:0 0 0 1px #708cff,0 0 14px #708cff80}
[data-badge=ocean]{--b-bg:#4aa8ff;--b-fg:#04172e}
[data-badge=rose]{--b-bg:#ff8fb8;--b-fg:#33101f}
[data-badge=lime]{--b-bg:#b6f04a;--b-fg:#1c2a05}
[data-badge=amethyst]{--b-bg:linear-gradient(135deg,#a35bff,#6a3dd6);--b-fg:#fff;--b-ring:0 0 14px #a35bff66}
[data-badge=midnight]{--b-bg:linear-gradient(135deg,#1b2a5c,#0e1738);--b-fg:#b9c8ff;--b-ring:0 0 0 1px #4a66d9}
[data-badge=ingot]{--b-bg:linear-gradient(135deg,#ffe27a,#f5c542 45%,#b8860b);--b-fg:#3a2800;--b-ring:0 0 16px #f5c54277}
.user-chip[data-badge]{background:var(--b-bg,#ffffff10);color:var(--b-fg,#fff);box-shadow:var(--b-ring,none);
  -webkit-background-clip:border-box;background-clip:border-box}
.friend-cosmetic-preview.cosmetic-badge[data-badge],.friend-profile-preview-badge[data-badge]{background:var(--b-bg,#ffffff18);color:var(--b-fg,#fff);box-shadow:var(--b-ring,none)}

/* Styles de titre (couleur ou degrade via variables) */
[data-style=green],[data-title-style=green]{--tc:#67ff9b}
[data-style=red],[data-title-style=red]{--tc:#ff6174}
[data-style=cyan],[data-title-style=cyan]{--tc:#62edff}
[data-style=violet],[data-title-style=violet]{--tc:#b98cff}
[data-style=gold],[data-title-style=gold]{--tc:transparent;--ts:linear-gradient(90deg,#fff0a3,#d49a1c,#fff3bd)}
[data-style=rainbow],[data-title-style=rainbow]{--tc:transparent;--ts:linear-gradient(90deg,#f66,#fc5,#6f6,#6cf,#a6f)}
[data-style=ocean],[data-title-style=ocean]{--tc:transparent;--ts:linear-gradient(90deg,#00c6ff,#0072ff)}
[data-style=sunset],[data-title-style=sunset]{--tc:transparent;--ts:linear-gradient(90deg,#ff9a44,#fc6076)}
[data-style=ice],[data-title-style=ice]{--tc:transparent;--ts:linear-gradient(90deg,#e0f7ff,#6ec6ff,#e0f7ff)}
:is(.preview-style,.friend-profile-preview-title,.friend-cosmetic-preview,.identity-name):is([data-style=green],[data-style=red],[data-style=cyan],[data-style=violet],[data-style=gold],[data-style=rainbow],[data-style=ocean],[data-style=sunset],[data-style=ice]),
.user-chip:is([data-title-style=green],[data-title-style=red],[data-title-style=cyan],[data-title-style=violet],[data-title-style=gold],[data-title-style=rainbow],[data-title-style=ocean],[data-title-style=sunset],[data-title-style=ice]) #profile-shortcut-name{
  background:var(--ts,none);-webkit-background-clip:text;background-clip:text;color:var(--tc)}
.preview-style[data-style=flash]{animation:cosmetic-pulse 1.1s ease-in-out infinite}
.user-chip[data-title-style] #profile-shortcut-name{filter:drop-shadow(0 0 1px #000a) drop-shadow(0 1px 1px #0006)}
/* Fond assombri derriere un nom en degrade pour garder la lisibilite */
.user-chip:is([data-title-style=green],[data-title-style=red],[data-title-style=cyan],[data-title-style=violet],[data-title-style=gold],[data-title-style=rainbow],[data-title-style=ocean],[data-title-style=sunset],[data-title-style=ice])[data-badge]{
  background:linear-gradient(#0b0d1488,#0b0d1488),var(--b-bg,#ffffff10)}
.user-chip:is([data-title-style=green],[data-title-style=red],[data-title-style=cyan],[data-title-style=violet],[data-title-style=gold],[data-title-style=rainbow],[data-title-style=ocean],[data-title-style=sunset],[data-title-style=ice])::after{color:var(--title-color,#fff)}

/* Cadres */
.avatar[data-frame=royal]{box-shadow:0 0 0 2px #d8b75c,0 0 14px #d8b75c55}
.avatar[data-frame=pulse]{animation:frame-pulse 1.4s ease-in-out infinite}
.avatar[data-frame=emerald]{box-shadow:0 0 0 2px #2ee59d,0 0 16px #2ee59d77}
.avatar[data-frame=rose]{box-shadow:0 0 0 2px #ff7eb6,0 0 16px #ff7eb677}
.avatar[data-frame=shadow]{box-shadow:0 0 0 2px #6b6b8f,0 0 0 5px #6b6b8f33,0 0 22px #000c}
.avatar[data-frame=aurora]{animation:aurora-ring 4s linear infinite}
@keyframes frame-pulse{50%{box-shadow:0 0 0 2px #b481ff,0 0 20px #b481ffaa}}
@keyframes aurora-ring{
  0%,100%{box-shadow:0 0 0 2px #5cffc9,0 0 18px #5cffc977}
  33%{box-shadow:0 0 0 2px #7c9cff,0 0 18px #7c9cff77}
  66%{box-shadow:0 0 0 2px #e07cff,0 0 18px #e07cff77}}

/* Themes */
[data-theme=matrix]{--theme-bg:linear-gradient(135deg,#07140d,#153721 55%,#10121a)}
[data-theme=space]{--theme-bg:radial-gradient(ellipse at 85% 15%,#7252a5,#242039 48%,#10121a)}
[data-theme=synthwave]{--theme-bg:linear-gradient(145deg,#4a1c67,#a34483 45%,#211936)}
[data-theme=cyberpunk]{--theme-bg:linear-gradient(120deg,#103746,#432041 70%,#171923)}
[data-theme=forest]{--theme-bg:linear-gradient(160deg,#0b2218,#14452e 55%,#0d1a14)}
[data-theme=ocean]{--theme-bg:linear-gradient(170deg,#06203a,#0b4a78 55%,#061a2c)}
[data-theme=sunset]{--theme-bg:linear-gradient(165deg,#2b1445,#c2415e 55%,#f59e4b)}
[data-theme=candy]{--theme-bg:linear-gradient(150deg,#3a1a4f,#d65db1 55%,#ffb3e0)}
body[data-theme=forest]{background:radial-gradient(900px 520px at 82% 0,#2fbf7a30,transparent 60%),linear-gradient(180deg,#07150f,#0b1f16 60%,#08110d);--purple:#3ddc84;--pink:#b6f04a}
body[data-theme=ocean]{background:radial-gradient(900px 520px at 20% 0,#1fa2ff30,transparent 60%),linear-gradient(180deg,#041526,#08304f 60%,#04101c);--purple:#1fa2ff;--pink:#5ee7df}
body[data-theme=sunset]{background:radial-gradient(900px 520px at 50% 100%,#ff7e5f40,transparent 62%),linear-gradient(180deg,#1d0f33,#4a1d52 55%,#7a2a4d);--purple:#ff7e5f;--pink:#feb47b}
body[data-theme=candy]{background:radial-gradient(900px 520px at 80% 0,#ff9ad540,transparent 60%),linear-gradient(180deg,#2a1440,#4c1f63 60%,#331a4a);--purple:#ff7ac6;--pink:#9d7bff}
.friend-profile-preview:is([data-theme=forest],[data-theme=ocean],[data-theme=sunset],[data-theme=candy]),
.friend-cosmetic-preview:is([data-theme=forest],[data-theme=ocean],[data-theme=sunset],[data-theme=candy]){background:var(--theme-bg)}

/* Effets de saisie */
.answer-field.typing-particle:is([data-effect=hearts],[data-effect=stars],[data-effect=snow])::after{
  position:absolute;right:12px;bottom:12px;pointer-events:none;animation:particle-rise .65s ease-out forwards}
.answer-field.typing-particle[data-effect=hearts]::after{content:"\1F496"}
.answer-field.typing-particle[data-effect=stars]::after{content:"\2B50"}
.answer-field.typing-particle[data-effect=snow]::after{content:"\2744\FE0F"}
.friend-cosmetic-preview[data-effect=hearts]{filter:drop-shadow(0 0 8px #ff6fb1)}
.friend-cosmetic-preview[data-effect=stars]{filter:drop-shadow(0 0 8px #ffd84a)}
.friend-cosmetic-preview[data-effect=snow]{filter:drop-shadow(0 0 8px #9ee0ff)}

/* ---------- Mobile ---------- */
@media(hover:none) and (pointer:coarse){
  .icon-button{width:42px;height:42px}
}
@media(max-width:780px){
  .topbar{margin:0 -16px;padding:0 16px}
}
@media(max-width:440px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px}
  .cosmetic-preview{height:84px}
  .play-card h2{font-size:24px}
  .user-chip[data-title]:not([data-title=""])::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  #auth-view,#home-view,#room-view,#game-view,#profile-view,#shop-view,#inventory-view,.preview-glyph,.avatar[data-frame=aurora],.avatar[data-frame=pulse]{animation:none!important}
}

/* =====================================================
   MODE CLAIR - contraste complet
   ===================================================== */
:root[data-color-scheme=light]{--bg:#f4f3fb;--muted:#62667c;--line:#e3e1f0;--purple:#6b5ff7;--pink:#b05cf0;color:#1b1a2e;color-scheme:light}
:root[data-color-scheme=light] body{
  background:radial-gradient(820px 480px at 85% -6%,#d9d0ff99,transparent 60%),radial-gradient(720px 480px at 0% 100%,#cfe4ff99,transparent 60%),#f6f5fb;background-attachment:fixed}
:root[data-color-scheme=light] .topbar{background:#ffffffcc;border-bottom-color:#e6e4f2}
:root[data-color-scheme=light] .auth-card,
:root[data-color-scheme=light] .panel{background:#fff;border-color:#e6e4f2;box-shadow:0 12px 40px #5b4bd01a}
:root[data-color-scheme=light] .brand{color:#1b1a2e}
:root[data-color-scheme=light] .user-chip[data-badge]{background:var(--b-bg,#efeef8);color:var(--b-fg,#1b1a2e);border-color:#e0def0}
:root[data-color-scheme=light] .user-chip:is([data-title-style=green],[data-title-style=red],[data-title-style=cyan],[data-title-style=violet],[data-title-style=gold],[data-title-style=rainbow],[data-title-style=ocean],[data-title-style=sunset],[data-title-style=ice])[data-badge]{
  background:linear-gradient(#0b0d14c4,#0b0d14c4),var(--b-bg,#efeef8);border-color:transparent}
:root[data-color-scheme=light] .user-chip[data-title]:not([data-title=""])::after{background:#0b0d14c0}
:root[data-color-scheme=light] .icon-button{background:#f1effb;border-color:#e0def0;color:#1b1a2e}
:root[data-color-scheme=light] .icon-button:hover{background:#e6e3f7}
:root[data-color-scheme=light] .rank-chip{background:#efeaff}

/* Titres, textes et libelles qui restaient clairs */
:root[data-color-scheme=light] :is(.hero-stats b,.timer,.mini-level strong,.settings-section h3,.toggle-card strong,.friend-name,.friend-profile-button,.social-friend,.auth-form label,.settings-grid label,.answer-field label,.invitation-card span,.shame-card p,.pearls-track p,.chat-sticker span,.score-details p,.modifier-banner p,.review-heading){color:#1b1a2e}
:root[data-color-scheme=light] :is(.hero-copy>p,.daily-quest>p,.room-aside p,.modal-card p,.friend-profile-cosmetics){color:#5a5e75}
:root[data-color-scheme=light] :is(.letter-stage strong,.room-header strong,.player-row .player-score,.text-button,.shop-balance,.level-ring,.chat-message>strong,.daily-quest-heading span,.daily-streak-day span,.settings-section h3 span,.shame-card h3,.pearls-carousel h3,.modifier-banner strong,.friend-profile-section-heading,.aside-icon){color:#5b4bd0}
:root[data-color-scheme=light] .letter-stage strong{text-shadow:none}
:root[data-color-scheme=light] .hero-copy h1 span,
:root[data-color-scheme=light] .welcome-row h1 span:not(.wave){background:linear-gradient(90deg,#6b5ff7,#c04ff0);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-color-scheme=light] .shop-balance{background:#efeaff;border-color:#d8cfff}
:root[data-color-scheme=light] .shop-filter{background:#fff;border-color:#e0def0;color:#4a4d66}
:root[data-color-scheme=light] .shop-filter.active{background:linear-gradient(110deg,var(--purple),var(--pink));border-color:transparent;color:#fff}
:root[data-color-scheme=light] .shop-section h2 small,
:root[data-color-scheme=light] .inventory-section h2 small{background:#eeecf8}

/* Cartes sombres converties en cartes claires */
:root[data-color-scheme=light] :is(.stat-box,.profile-stat,.achievement,.friend-profile-stats>div,.profile-avatar-card,.lobby-invite-panel,.daily-quest,.daily-streak-day,.pearls-carousel,.score-details,.room-aside,.score-card:not(:first-child),.friend-cosmetic-card,.host-summary,.gif-picker,.invitation-card,.shame-card,.settings-fields .toggle-card,.auth-tabs){
  background:#f6f5fc;border-color:#e6e4f2;color:#1b1a2e}
:root[data-color-scheme=light] .shop-item{background:#fff;border-color:#e3e0f2;box-shadow:0 6px 22px #5b4bd012}
:root[data-color-scheme=light] .shop-item-rare{border-color:#3b82f688}
:root[data-color-scheme=light] .shop-item-epic{border-color:#a855f78c}
:root[data-color-scheme=light] .shop-item-legendary{background:linear-gradient(160deg,#fffaeb,#fff);border-color:#f3b73c}
:root[data-color-scheme=light] .shop-item-rare .rarity-tag{color:#1f5fd0}
:root[data-color-scheme=light] .shop-item-epic .rarity-tag{color:#7a2fc2}
:root[data-color-scheme=light] .shop-item-legendary .rarity-tag{color:#a76a00}
:root[data-color-scheme=light] .rarity-tag{background:#00000010;color:#555a70}
:root[data-color-scheme=light] .cosmetic-preview{background:#f1effb;border-color:#e6e4f2}
:root[data-color-scheme=light] .preview-chip{background:var(--b-bg,#e4e1f5);color:var(--b-fg,#1b1a2e)}
:root[data-color-scheme=light] .preview-title strong{color:#1b1a2e}
:root[data-color-scheme=light] .preview-title span{color:var(--title-color,#cdbfff)}
:root[data-color-scheme=light] .title-color-section{background:#fff;border-color:#e3e0f2}
:root[data-color-scheme=light] .identity-badge[data-styled="1"]{padding:2px 10px;background:linear-gradient(#0b0d14c4,#0b0d14c4),var(--b-bg,transparent)}
:root[data-color-scheme=light] .title-color-swatch{border-color:#00000026}
:root[data-color-scheme=light] .preview-style:not([data-style=gold]):not([data-style=rainbow]):not([data-style=ocean]):not([data-style=sunset]):not([data-style=ice]):not([data-style=green]):not([data-style=red]):not([data-style=cyan]):not([data-style=violet]){color:#1b1a2e}
:root[data-color-scheme=light] .preview-theme{background:var(--theme-bg,linear-gradient(135deg,#171923,#40304f))}
:root[data-color-scheme=light] .friend-cosmetic-preview{color:#5b4bd0}
:root[data-color-scheme=light] .daily-quest-track{background:#e4e1f2}
:root[data-color-scheme=light] .auth-tab{color:#62667c}
:root[data-color-scheme=light] .auth-tab.active{background:#fff;color:#1b1a2e;box-shadow:0 2px 8px #0000001a}
:root[data-color-scheme=light] .modifier-banner{background:linear-gradient(110deg,#ece8ff,#f8e9ff);border-color:#d3c8ff}
:root[data-color-scheme=light] .forbidden-letter{background:#fff0f2}

/* Cartes volontairement colorees : texte blanc force */
:root[data-color-scheme=light] .quick-card{background:linear-gradient(135deg,#5845c4,#8b69ef 58%,#b67ff6)}
:root[data-color-scheme=light] .private-card{background:linear-gradient(135deg,#2b2f55,#3a2f68 60%,#4c3585);border-color:#ffffff22}
:root[data-color-scheme=light] .play-card :is(h2,h3,.card-icon){color:#fff}
:root[data-color-scheme=light] .play-card p{color:#ffffffd9}
:root[data-color-scheme=light] .play-card .eyebrow{color:#ffffffb8}
:root[data-color-scheme=light] .play-card .button.outline{color:#fff;border-color:#ffffff55;background:transparent}
:root[data-color-scheme=light] .play-card .button.outline:hover{background:#ffffff1f}
:root[data-color-scheme=light] .xp-track{background:#e4e1f2}
:root[data-color-scheme=light] .play-card .button.primary{background:linear-gradient(110deg,#6b5ff7,#b05cf0);color:#fff}
:root[data-color-scheme=light] .score-card:first-child,
:root[data-color-scheme=light] .score-card:first-child :is(b,span){background:transparent;color:#fff}
:root[data-color-scheme=light] .score-card:first-child{background:linear-gradient(140deg,#5a49b4,#3a2f78)}
:root[data-color-scheme=light] .letter-roulette :is(span,strong){color:#fff}
:root[data-color-scheme=light] .friend-profile-preview{color:#fff}
:root[data-color-scheme=light] .toast{color:#fff}
:root[data-color-scheme=light] .streamer-toggle{background:linear-gradient(120deg,#e6fbf3,#f3fffb)!important;border-color:#8fdcc0!important}
:root[data-color-scheme=light] .streamer-toggle strong{color:#0f7a58}
:root[data-color-scheme=light] .streamer-toggle em,
:root[data-color-scheme=light] .streamer-status{color:#0f7a58}
:root[data-color-scheme=light] .streamer-status{background:#e6fbf3;border-color:#8fdcc0}
:root[data-color-scheme=light] .host-only-badge,
:root[data-color-scheme=light] .host-settings-icon{color:#5b4bd0;background:#efeaff;border-color:#d3c8ff}

/* Fenetres, messagerie, formulaires */
:root[data-color-scheme=light] .modal{background:#1b1a2e88}
:root[data-color-scheme=light] .modal-card{background:#fff;border-color:#e6e4f2;color:#1b1a2e}
:root[data-color-scheme=light] .modal-close{color:#333}
:root[data-color-scheme=light] .social-drawer{background:#fffffff5}
:root[data-color-scheme=light] .social-friend.active,
:root[data-color-scheme=light] .social-friend:hover,
:root[data-color-scheme=light] .social-friend-row.active,
:root[data-color-scheme=light] .social-friend-row:hover{background:#efeaff;border-color:#e0d8ff}
:root[data-color-scheme=light] .friend-profile-button:hover{background:#efeaff}
:root[data-color-scheme=light] .chat-message{background:#efeef8}
:root[data-color-scheme=light] .chat-message.mine{background:#e2dbff}
:root[data-color-scheme=light] .chat-message time{color:#7a7e95}
:root[data-color-scheme=light] :is(input,textarea,select){border-color:#d6d3e6;background:#fff;color:#1b1a2e}
:root[data-color-scheme=light] :is(input,textarea,select):focus{border-color:#6b5ff7;box-shadow:0 0 0 3px #6b5ff733}
:root[data-color-scheme=light] .button.outline{border-color:#d6d3e6;color:#5b4bd0;background:#fff}
:root[data-color-scheme=light] .button.outline:hover{background:#f1eeff}
:root[data-color-scheme=light] .button.light{background:#fff;color:#2e244b}
:root[data-color-scheme=light] .nav-item{color:#6a6e85}
:root[data-color-scheme=light] .nav-item:hover{background:#efeaff;color:#1b1a2e}
:root[data-color-scheme=light] .nav-item.active{background:#ece7ff;border-color:#d3c8ff;color:#5b4bd0}
:root[data-color-scheme=light] .bottom-nav{background:#ffffffe6;border-color:#e6e4f2;box-shadow:0 12px 36px #5b4bd01f}
:root[data-color-scheme=light] .answer-chip{color:#1b1a2e}
:root[data-color-scheme=light] .answer-chip.contested{color:#c5222b;background:#fff5f7}

/* Filets separateurs presque invisibles sur fond blanc */
:root[data-color-scheme=light] :is(.friend-row,.player-row,.room-header,.settings-grid,.review-table th,.review-table td,.phase-controls,.profile-avatar-section,.host-settings-heading,.host-settings-footer,.conversation-header,.chat-form,.social-friends,.lobby-friend){border-color:#e6e4f2}
:root[data-color-scheme=light] .friend-row:hover,
:root[data-color-scheme=light] .player-row:hover{background:#f6f5fc}

/* ===== Invitations, invités, événement flash ===== */
.guest-play{margin-top:10px}
.guest-banner,.event-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;margin-bottom:14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:14px}
.guest-banner{justify-content:space-between}
.event-banner{background:linear-gradient(120deg,rgba(255,189,67,.18),rgba(255,92,138,.16));border-color:rgba(255,189,67,.45)}
.event-banner strong{display:inline-flex;align-items:center;gap:6px}
.event-countdown{font-variant-numeric:tabular-nums;color:#ffd166}
.modal-split{display:flex;gap:10px;margin-top:14px}.modal-split .button{flex:1}
.end-actions{display:grid;gap:12px;justify-items:center;margin-top:12px}
.guest-end-cta{display:grid;gap:8px;justify-items:center;text-align:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.guest-end-cta p{margin:0}
.is-guest #messages-toggle,.is-guest .daily-panel,.is-guest .dashboard-grid,.is-guest .mini-level,.is-guest #header-rank,.is-guest #lobby-invite-panel{display:none!important}
.event-banner{flex-direction:column;align-items:flex-start}.event-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.leave-game{margin-left:auto}
.game-topline{flex-wrap:wrap;align-items:center}