/* ===================== LinaChess - styles ===================== */
:root{
  --r:18px; --r-sm:12px; --shadow:0 10px 30px rgba(20,10,50,.18);
  --shadow-sm:0 4px 14px rgba(20,10,50,.12);
  --track:rgba(255,255,255,.25);
}
/* Thèmes */
[data-theme="bonbon"]{ --bg1:#ff9ed2; --bg2:#a78bfa; --accent1:#ff4d8d; --accent2:#7c5cff; --surface:#fff; --surface2:#fdf2fb; --text:#2a1b3d; --muted:#8a7a9c; --on-accent:#fff; }
[data-theme="ocean"]{ --bg1:#5ee7df; --bg2:#3b82f6; --accent1:#0ea5e9; --accent2:#2563eb; --surface:#fff; --surface2:#eef6ff; --text:#0f2740; --muted:#6783a0; --on-accent:#fff; }
[data-theme="foret"]{ --bg1:#7ee8a2; --bg2:#36b37e; --accent1:#16a34a; --accent2:#0d9488; --surface:#fff; --surface2:#eefcf3; --text:#10331f; --muted:#5f8470; --on-accent:#fff; }
[data-theme="sunset"]{ --bg1:#ffd166; --bg2:#ff6b6b; --accent1:#fb7185; --accent2:#f97316; --surface:#fff; --surface2:#fff5ec; --text:#3a1d12; --muted:#9a7565; --on-accent:#fff; }
[data-theme="galaxie"]{ --bg1:#3b2a78; --bg2:#1b1340; --accent1:#a855f7; --accent2:#22d3ee; --surface:#241a45; --surface2:#2c2055; --text:#f0eaff; --muted:#a99fce; --on-accent:#fff; --track:rgba(255,255,255,.12); }
[data-theme="menthe"]{ --bg1:#a8edea; --bg2:#fed6e3; --accent1:#06b6d4; --accent2:#ec4899; --surface:#fff; --surface2:#f0fbfb; --text:#13343b; --muted:#6c8a90; --on-accent:#fff; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Nunito',system-ui,sans-serif; color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2)); background-attachment:fixed;
  min-height:100vh; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,.logo-text{ font-family:'Baloo 2',cursive; margin:.2em 0; }
button{ font-family:inherit; cursor:pointer; border:none; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
#app{ min-height:100vh; }

/* Boutons */
.btn{ border-radius:999px; padding:.7em 1.3em; font-weight:800; font-size:1rem; transition:transform .12s, box-shadow .12s, filter .12s; }
.btn:active{ transform:scale(.96); }
.btn.primary{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:var(--on-accent); box-shadow:var(--shadow-sm); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:var(--surface2); color:var(--text); }
.btn.sm{ padding:.4em .8em; font-size:.85rem; }
.btn.block{ width:100%; }
.btn.danger{ color:#e11d48; }
.link-btn{ background:none; color:var(--on-accent); text-decoration:underline; opacity:.9; font-weight:700; padding:.5em; }
.icon-btn{ background:var(--surface2); border-radius:12px; width:40px; height:40px; font-size:1.1rem; display:grid; place-items:center; }
.row{ display:flex; align-items:center; }
.row.gap{ gap:.6em; } .row.center{ justify-content:center; }
.input{ width:100%; border:2px solid var(--surface2); background:var(--surface); color:var(--text); border-radius:var(--r-sm); padding:.7em .9em; font-size:1rem; margin:.35em 0; outline:none; }
.input:focus{ border-color:var(--accent1); }
label{ font-weight:700; font-size:.9rem; display:block; margin-top:.6em; }

/* Cards */
.card{ background:var(--surface); border-radius:var(--r); padding:1.1rem; box-shadow:var(--shadow); }

/* Logo */
.logo{ display:flex; align-items:center; gap:.4rem; background:none; }
.logo-mark{ font-size:1.6rem; }
.logo-text{ font-size:1.5rem; font-weight:800; color:var(--text); }
.logo.big{ flex-direction:column; gap:0; color:var(--on-accent); }
.logo.big .logo-mark{ font-size:3.4rem; } .logo.big .logo-text{ font-size:2.6rem; color:var(--on-accent); }

/* ---- Gate ---- */
.gate{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1.2rem; }
.tagline{ color:var(--on-accent); font-weight:700; margin-top:-.4rem; opacity:.95; }
.gate-card{ width:100%; max-width:440px; }
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; margin:.6rem 0; }
.profile-chip{ background:var(--surface2); border-radius:var(--r-sm); padding:.9rem .5rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; position:relative; transition:transform .12s; }
.profile-chip:hover{ transform:translateY(-3px); }
.profile-chip .pseudo{ font-weight:800; }
.profile-chip .lock{ position:absolute; top:.4rem; right:.5rem; font-size:.8rem; }
.tag{ font-size:.65rem; padding:.1em .5em; border-radius:99px; font-weight:800; text-transform:uppercase; }
.tag.admin,.tag.kid{ background:var(--accent2); color:#fff; } .tag.kid{ background:var(--surface2); color:var(--muted); }
.divider{ text-align:center; color:var(--muted); margin:.8rem 0; position:relative; }
.divider::before,.divider::after{ content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--surface2); }
.divider::before{ left:0; } .divider::after{ right:0; }
.avatar{ display:inline-grid; place-items:center; }
.avatar.sm{ font-size:1.3rem; } .avatar.xl{ font-size:3rem; background:var(--surface2); width:74px; height:74px; border-radius:50%; }
.avatar.lg{ font-size:2.2rem; }

/* Theme dots */
.theme-bar{ display:flex; gap:.5rem; margin-top:.6rem; }
.theme-dot{ width:30px; height:30px; border-radius:50%; border:3px solid #fff8; }
.theme-dot.t-bonbon{ background:linear-gradient(135deg,#ff4d8d,#7c5cff);} .theme-dot.t-ocean{ background:linear-gradient(135deg,#0ea5e9,#2563eb);}
.theme-dot.t-foret{ background:linear-gradient(135deg,#16a34a,#0d9488);} .theme-dot.t-sunset{ background:linear-gradient(135deg,#fb7185,#f97316);}
.theme-dot.t-galaxie{ background:linear-gradient(135deg,#a855f7,#22d3ee);} .theme-dot.t-menthe{ background:linear-gradient(135deg,#06b6d4,#ec4899);}

/* ---- Modals ---- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,8,35,.55); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:50; padding:1rem; animation:fade .15s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.card.modal{ width:100%; max-width:420px; max-height:90vh; overflow:auto; animation:pop .18s ease; }
.card.modal.wide{ max-width:560px; }
@keyframes pop{ from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0; }
.chip{ background:var(--surface2); border-radius:99px; padding:.5em 1em; font-weight:700; font-size:.9rem; }
.chip.sel{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.avatar-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:.35rem; margin:.4rem 0; }
.avatar-pick{ font-size:1.5rem; background:var(--surface2); border-radius:10px; padding:.25rem; aspect-ratio:1; }
.avatar-pick.sel{ background:var(--accent1); box-shadow:0 0 0 3px var(--accent2); }
.opp-head,.opp-head.opp{ display:flex; gap:.8rem; align-items:center; }

/* PIN pad */
.pin-dots{ display:flex; gap:.7rem; justify-content:center; margin:1rem 0; }
.pin-dot{ width:16px; height:16px; border-radius:50%; background:var(--surface2); }
.pin-dot.on{ background:var(--accent1); }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.pin-key{ background:var(--surface2); border-radius:14px; padding:1rem; font-size:1.3rem; font-weight:800; color:var(--text); }
.pin-key:active{ background:var(--accent1); color:#fff; }
.promo-row{ display:flex; gap:.6rem; justify-content:center; margin:.6rem 0; }
.promo-btn{ font-size:2.4rem; background:var(--surface2); border-radius:14px; width:64px; height:64px; }
.promo-btn:hover{ background:var(--accent1); color:#fff; }

/* ---- Topbar ---- */
.page{ min-height:100vh; }
.topbar{ display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem; background:var(--surface); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.topnav{ display:flex; gap:.3rem; margin:0 auto 0 1rem; }
.nav-btn{ background:none; padding:.5em 1em; border-radius:99px; font-weight:800; color:var(--muted); }
.nav-btn.active{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.top-right{ display:flex; align-items:center; gap:.5rem; }
.user-chip{ display:flex; align-items:center; gap:.4rem; background:var(--surface2); border-radius:99px; padding:.3em .8em .3em .4em; font-weight:800; color:var(--text); }

/* ---- Home ---- */
.home-main,.page-main{ max-width:1000px; margin:0 auto; padding:1.2rem; }
.section-title{ color:var(--on-accent); margin:1.2rem 0 .6rem; }
.prog-card{ }
.prog-top{ display:flex; gap:1rem; align-items:center; }
.prog-name{ font-family:'Baloo 2'; font-size:1.4rem; font-weight:800; }
.prog-level{ display:flex; gap:.6rem; align-items:center; margin:.2rem 0; }
.badge-lvl{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; padding:.15em .7em; border-radius:99px; font-weight:800; font-size:.85rem; }
.streak{ font-weight:800; }
.xpbar{ height:14px; background:var(--surface2); border-radius:99px; overflow:hidden; margin-top:.3rem; }
.xpfill{ height:100%; background:linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:99px; transition:width .5s; }
.xp-text{ font-size:.8rem; color:var(--muted); margin-top:.2rem; }
.prog-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:1rem; }
.stat-box{ background:var(--surface2); border-radius:var(--r-sm); padding:.7rem; text-align:center; }
.stat-val{ font-family:'Baloo 2'; font-size:1.5rem; font-weight:800; color:var(--accent1); }
.stat-label{ font-size:.75rem; color:var(--muted); font-weight:700; }
.badge-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.badge-row.center{ justify-content:center; }
.badge-pill{ background:var(--surface2); border-radius:99px; padding:.3em .8em; font-size:.8rem; font-weight:700; }
.badge-pill.new{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; animation:pop .3s; }

/* Opponents */
.opp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; }
.opp-card{ background:var(--surface); border-radius:var(--r); padding:1.1rem; text-align:center; box-shadow:var(--shadow-sm); border-top:5px solid var(--accent); transition:transform .14s, box-shadow .14s; position:relative; }
.opp-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.opp-card.locked{ filter:grayscale(.7); opacity:.7; }
.opp-avatar{ font-size:3rem; } .opp-avatar.lg{ font-size:3.4rem; }
.opp-name{ font-family:'Baloo 2'; font-weight:800; font-size:1.1rem; }
.opp-lvl{ display:inline-block; background:var(--accent); color:#fff; border-radius:99px; padding:.1em .7em; font-size:.78rem; font-weight:800; margin:.2rem 0; }
.opp-tag{ font-size:.82rem; color:var(--muted); }
.lock-badge{ position:absolute; top:.6rem; right:.6rem; background:var(--surface2); border-radius:99px; padding:.15em .6em; font-size:.7rem; font-weight:800; }

/* ---- Game ---- */
.game-layout{ display:grid; grid-template-columns:minmax(300px,1fr) 340px; gap:1.2rem; max-width:1100px; margin:0 auto; padding:1rem; align-items:start; }
.board-wrap{ display:flex; flex-direction:column; gap:.5rem; width:100%; max-width:min(66vh,540px); margin:0 auto; }
.cg-board{ width:100%; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.cg-board.flash{ animation:flash .25s; }
@keyframes flash{ 0%{box-shadow:0 0 0 0 var(--accent1)} 50%{box-shadow:0 0 0 8px var(--accent1)} 100%{box-shadow:var(--shadow)} }
.player-bar{ display:flex; justify-content:space-between; align-items:center; background:var(--surface); border-radius:var(--r-sm); padding:.5rem .9rem; box-shadow:var(--shadow-sm); border-left:5px solid var(--accent,var(--accent1)); }
.pb-id{ display:flex; align-items:center; gap:.5rem; font-weight:800; }
.clock{ font-family:'Baloo 2'; font-weight:800; font-size:1.3rem; background:var(--surface2); padding:.1em .6em; border-radius:10px; min-width:74px; text-align:center; }
.clock.active{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.game-side{ display:flex; flex-direction:column; gap:.8rem; }
.moves-card h4{ margin:0 0 .4rem; }
.moves-list{ max-height:130px; overflow:auto; font-family:ui-monospace,monospace; font-size:.9rem; }
.move-row{ display:grid; grid-template-columns:30px 1fr 1fr; gap:.3rem; padding:.1rem 0; }
.mv-no{ color:var(--muted); }
.game-actions{ display:flex; gap:.5rem; }

/* Chat */
.chat-card{ display:flex; flex-direction:column; height:340px; }
.chat-tabs{ display:flex; gap:.3rem; margin-bottom:.5rem; }
.chat-tab{ flex:1; background:var(--surface2); border-radius:10px; padding:.4em; font-weight:800; font-size:.85rem; color:var(--muted); }
.chat-tab.active{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.chat-log{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:.4rem; padding:.3rem; }
.chat-msg{ max-width:85%; padding:.5em .8em; border-radius:14px; font-size:.9rem; line-height:1.3; }
.chat-msg.me{ align-self:flex-end; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.them{ align-self:flex-start; background:var(--surface2); border-bottom-left-radius:4px; }
.chat-msg.typing{ opacity:.6; }
.chat-send{ display:flex; gap:.4rem; margin-top:.4rem; }
.chat-input{ margin:0; }

/* Result modal */
.result .result-emoji{ font-size:3.5rem; text-align:center; animation:pop .4s; }
.result h2{ text-align:center; } .result.win h2{ color:var(--accent1); }
.xp-gain{ text-align:center; font-family:'Baloo 2'; font-size:1.6rem; font-weight:800; color:var(--accent2); margin:.4rem 0; }
.new-badges{ text-align:center; font-weight:800; margin:.6rem 0; }
.coach-bubble{ display:flex; gap:.6rem; background:var(--surface2); border-radius:14px; padding:.8rem; margin:.5rem 0; }
.coach-text{ line-height:1.45; }
.key-moments{ margin-top:.6rem; }
.km{ display:flex; gap:.6rem; align-items:center; background:var(--surface2); border-radius:10px; padding:.4rem .7rem; margin:.3rem 0; }
.km-no{ font-weight:800; color:var(--accent1); } .km-san{ font-family:monospace; font-weight:700; } .km-label{ color:var(--muted); font-size:.85rem; margin-left:auto; }

/* ---- Stats ---- */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
.big-stat{ text-align:center; }
.bs-emoji{ font-size:1.8rem; } .bs-val{ font-family:'Baloo 2'; font-size:2rem; font-weight:800; color:var(--accent1); }
.bs-label{ color:var(--muted); font-weight:700; font-size:.8rem; }
.donut-card{ text-align:center; }
.donut{ width:120px; height:120px; border-radius:50%; margin:0 auto .4rem; display:grid; place-items:center; }
.donut-hole{ width:84px; height:84px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-family:'Baloo 2'; font-size:1.5rem; font-weight:800; color:var(--accent1); }
.donut-title{ font-weight:800; }
.opp-stat{ display:grid; grid-template-columns:130px 1fr auto; gap:.6rem; align-items:center; margin:.5rem 0; }
.opp-stat-name{ font-weight:700; font-size:.9rem; }
.wld-bar{ display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--surface2); }
.bar.win{ background:#22c55e; } .bar.draw{ background:#fbbf24; } .bar.loss{ background:#f87171; }
.wld-num{ font-size:.8rem; color:var(--muted); font-weight:700; }
.weak-row{ display:grid; grid-template-columns:90px 1fr 30px; gap:.6rem; align-items:center; margin:.4rem 0; }
.weak-cat{ font-weight:700; text-transform:capitalize; }
.weak-bar{ height:14px; background:var(--surface2); border-radius:99px; overflow:hidden; }
.weak-fill{ height:100%; background:linear-gradient(90deg,var(--accent1),var(--accent2)); }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.badge-card{ background:var(--surface2); border-radius:var(--r-sm); padding:.8rem; text-align:center; }
.badge-emoji{ font-size:2rem; } .badge-label{ font-size:.8rem; font-weight:700; }

/* ---- History ---- */
.history-list{ display:flex; flex-direction:column; gap:.5rem; }
.hist-row{ display:grid; grid-template-columns:34px 1fr auto auto; gap:.7rem; align-items:center; background:var(--surface); border-radius:var(--r-sm); padding:.7rem 1rem; box-shadow:var(--shadow-sm); border-left:5px solid var(--muted); text-align:left; }
.hist-row.win{ border-left-color:#22c55e; } .hist-row.loss{ border-left-color:#f87171; } .hist-row.draw{ border-left-color:#fbbf24; }
.hist-out{ font-family:'Baloo 2'; font-weight:800; font-size:1.2rem; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--surface2); }
.hist-opp{ font-weight:800; }
.cg-board.replay{ max-width:360px; margin:0 auto; }

/* ---- Admin ---- */
.qr-card{ text-align:center; }
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.qr-img{ width:240px; height:240px; border-radius:var(--r-sm); }
.qr-url{ font-size:.75rem; color:var(--muted); word-break:break-all; }
.admin-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--surface2); flex-wrap:wrap; }
.arow-name{ font-weight:800; }
.admin-row .row.gap{ margin-left:auto; }

/* ---- Divers ---- */
.spinner{ width:42px; height:42px; border:5px solid var(--track); border-top-color:var(--accent1,#fff); border-radius:50%; animation:spin .8s linear infinite; margin:2rem auto; }
.boot-spinner{ min-height:100vh; display:grid; place-items:center; }
@keyframes spin{ to{ transform:rotate(360deg) } }
#toasts{ position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; z-index:100; }
.toast{ background:var(--surface); color:var(--text); padding:.7em 1.2em; border-radius:99px; box-shadow:var(--shadow); font-weight:700; opacity:0; transform:translateY(20px); transition:all .3s; }
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ background:#fee2e2; color:#b91c1c; } .toast.success{ background:#dcfce7; color:#166534; }

/* ---- Responsive ---- */
@media(max-width:880px){
  .game-layout{ grid-template-columns:1fr; }
  .game-side{ order:2; }
  .board-wrap{ order:1; max-width:520px; margin:0 auto; width:100%; }
  .topnav{ order:3; width:100%; margin:.4rem 0 0; justify-content:space-between; }
  .topbar{ padding:.6rem .8rem; }
}
@media(max-width:520px){
  .prog-stats{ grid-template-columns:repeat(2,1fr); }
  .avatar-grid{ grid-template-columns:repeat(6,1fr); }
  .logo-text{ font-size:1.2rem; } .nav-btn{ padding:.5em .7em; font-size:.9rem; }
  .opp-grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .home-main,.page-main{ padding:.8rem; }
  .opp-stat{ grid-template-columns:1fr; gap:.2rem; }
  .admin-tab{ font-size:.82rem; padding:.4em .7em; }
  .form-2col,.form-3col{ grid-template-columns:1fr; }
}

/* ---- Admin riche ---- */
.admin-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 1rem; }
.admin-tab{ background:var(--surface); border-radius:99px; padding:.5em 1em; font-weight:800; color:var(--muted); box-shadow:var(--shadow-sm); }
.admin-tab.active{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.admin-body{ display:flex; flex-direction:column; gap:1rem; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.4rem; }
.card-head h3{ margin:0; }
.admin-row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .2rem; border-bottom:1px solid var(--surface2); flex-wrap:wrap; }
.admin-row:last-child{ border-bottom:none; }
.admin-row .actions{ margin-left:auto; }
.arow-name{ font-weight:800; }
.rank{ font-family:'Baloo 2'; font-weight:800; color:var(--accent1); min-width:34px; }
.opp-dot{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1.2rem; color:#fff; }
.field{ margin:.5rem 0; }
.field label{ margin-bottom:.2rem; }
.field-hint{ font-size:.78rem; margin-top:.2rem; }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.form-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; }
select.input{ appearance:auto; }
textarea.input{ resize:vertical; font-family:inherit; }
.input.color{ height:46px; padding:.2rem; cursor:pointer; }
.check-row{ display:flex; align-items:center; gap:.5rem; font-weight:700; }
.check-row input[type=checkbox]{ width:20px; height:20px; accent-color:var(--accent1); }
.check-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
.check-grid .theme-dot{ width:18px; height:18px; }

/* ---- Musique ---- */
.music-btn.on{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.12) } }
.top-right{ position:relative; }
.music-pop{ position:absolute; top:52px; right:0; width:230px; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:1rem; z-index:40; animation:pop .15s ease; }
.music-title{ font-family:'Baloo 2'; font-weight:800; margin-bottom:.5rem; }
.music-pop label{ margin-top:.7rem; }
.music-pop input[type=range]{ width:100%; accent-color:var(--accent1); }
.music-pop .chip{ font-size:.8rem; padding:.35em .7em; }
.btn.block.sm,.btn.ghost.block,.block.sm{ width:100%; }
.spotify-dock{ position:fixed; bottom:14px; left:14px; width:330px; max-width:92vw; background:var(--surface); border-radius:16px; box-shadow:var(--shadow); z-index:60; overflow:hidden; animation:pop .2s ease; }
.spotify-dock.mini iframe{ display:none; }
.spotify-bar{ display:flex; align-items:center; gap:.4rem; padding:.45rem .7rem; }
.spotify-name{ font-weight:800; font-size:.85rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-x{ background:var(--surface2); color:var(--text); border-radius:8px; width:28px; height:28px; font-weight:800; line-height:1; }
.spotify-dock iframe{ display:block; }
@media(max-width:520px){ .spotify-dock{ left:8px; right:8px; width:auto; } }

/* ---- V2 : drapeaux ---- */
.flag, .flag-mini{ font-size:.95rem; }
.flag-mini{ margin-left:.2rem; }
/* ---- V2 : Communaute ---- */
.community-grid{ display:grid; grid-template-columns:320px 1fr; gap:1rem; align-items:start; }
@media(max-width:820px){ .community-grid{ grid-template-columns:1fr; } }
.online-list{ display:flex; flex-direction:column; gap:.3rem; max-height:60vh; overflow:auto; }
.online-row{ display:flex; align-items:center; gap:.5rem; padding:.4rem .2rem; border-bottom:1px solid var(--surface2); }
.online-row:last-child{ border-bottom:none; }
.online-row .elo{ font-size:.8rem; }
.online-row .btn, .online-row .tag{ margin-left:auto; }
.dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.dot.green{ background:#22c55e; } .dot.busy{ background:#fbbf24; }
.gchat-card{ display:flex; flex-direction:column; height:62vh; }
.gchat-log{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:.45rem; padding:.3rem; }
.gchat-msg{ display:flex; align-items:baseline; gap:.4rem; background:var(--surface2); border-radius:12px; padding:.4em .7em; }
.gchat-msg.me{ background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; }
.gc-av{ font-size:1.1rem; } .gc-who{ font-weight:800; font-size:.85rem; } .gc-text{ word-break:break-word; }
.gchat-send{ display:flex; gap:.4rem; margin-top:.4rem; }
/* ---- V2 : graphiques ---- */
.chart-wrap{ width:100%; } .chart{ width:100%; height:130px; display:block; }
.dash-2col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:680px){ .dash-2col{ grid-template-columns:1fr; } }
.mod-row{ display:flex; gap:.5rem; align-items:center; padding:.4rem .2rem; border-bottom:1px solid var(--surface2); flex-wrap:wrap; font-size:.88rem; }
.mod-who{ font-weight:800; } .mod-text{ flex:1; color:var(--muted); } .mod-reason{ font-size:.78rem; }