/* base.css — styles globaux Président */

/* ── Reset & base ── */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--felt-dark);color:var(--cream);height:100vh;overflow:hidden}
.screen{display:none;height:100vh;overflow:hidden}.screen.active{display:flex;flex-direction:column;height:100vh}
#screen-home{align-items:stretch;justify-content:flex-start;position:relative;overflow-y:auto}
.home-inner{text-align:center;max-width:440px;padding:2rem}

/* ── Home layout ── */
.home-page-inner{
  position:relative;z-index:1;
  width:100%;max-width:1540px;margin:0 auto;
  padding:clamp(12px,1.6vw,24px) clamp(20px,3.5vw,52px) clamp(16px,2vw,32px);
}
.home-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:clamp(12px,1.8vw,24px);
}
.home-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.5vw,64px);
  align-items:center;
  margin-bottom:clamp(16px,2.2vw,32px);
}
.home-left{display:flex;flex-direction:column}
.home-title{font-size:clamp(26px,2.8vw,46px);line-height:1.1;margin-bottom:clamp(8px,1vw,14px)}
.home-subtitle{font-size:clamp(13px,1.05vw,16px);color:var(--hf-ink-soft);font-weight:600;line-height:1.55;margin-bottom:clamp(14px,1.6vw,22px)}
.home-btns{display:flex;gap:10px;margin-bottom:clamp(12px,1.5vw,22px);flex-wrap:wrap}
.home-cta-btn{padding:clamp(11px,1.1vw,15px) clamp(18px,1.8vw,26px);font-size:clamp(13px,.95vw,15px)}

.home-right{display:flex;flex-direction:column;align-items:center}
.home-bubble{
  display:inline-block;max-width:min(420px,90%);
  background:var(--hf-card);border:2px solid var(--hf-ink);border-radius:18px;
  padding:clamp(9px,1vw,14px) clamp(13px,1.5vw,22px);
  font-size:clamp(12px,.95vw,14px);font-weight:700;color:var(--hf-ink);line-height:1.4;
  margin-bottom:4px;text-align:center;
}
.home-suit-icon{font-size:clamp(26px,3vw,40px);line-height:1;margin:3px 0}
.home-illus-wrap{width:100%;display:flex;align-items:center;justify-content:center}
.home-illus-img{
  width:auto;max-width:100%;
  height:auto;max-height:clamp(180px,28vh,380px);
  object-fit:contain;
}
.home-family-footer{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}

.home-families-section{margin-top:0}
.home-family-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.home-footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(10px,1.2vw,20px);flex-wrap:wrap;gap:10px}

/* Responsive */
@media(max-width:840px){
  .home-hero-grid{grid-template-columns:1fr}
  .home-right{display:none}
  .home-family-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-height:700px){
  .home-title{font-size:clamp(22px,2.4vw,34px)}
  .home-subtitle{margin-bottom:10px}
  .home-btns{margin-bottom:10px}
  .home-illus-img{max-height:22vh}
  .home-hero-grid{margin-bottom:12px}
}
.account-bar{position:absolute;top:1.2rem;right:1.4rem;display:flex;align-items:center;gap:.7rem;z-index:2}
.account-bar .acc-btn{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.2px;padding:.55rem 1.1rem;border-radius:9px;cursor:pointer;transition:all .18s;white-space:nowrap}
.account-bar .acc-btn.acc-btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--felt-dark);border:none;box-shadow:0 3px 12px rgba(201,168,76,.3)}
.account-bar .acc-btn.acc-btn-primary:hover{box-shadow:0 5px 16px rgba(201,168,76,.45);transform:translateY(-1px)}
.account-bar .acc-btn.acc-btn-ghost{background:rgba(245,230,200,.06);color:var(--cream);border:1.3px solid rgba(245,230,200,.25)}
.account-bar .acc-btn.acc-btn-ghost:hover{background:rgba(245,230,200,.12);border-color:rgba(245,230,200,.4)}
.account-chip{display:flex;align-items:center;gap:.55rem;background:rgba(201,168,76,.1);border:1.3px solid rgba(201,168,76,.35);border-radius:22px;padding:.35rem .9rem .35rem .35rem;cursor:pointer;transition:all .18s}
.account-chip:hover{background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.5)}
.acc-avatar{width:30px;height:30px;min-width:30px;max-width:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;object-fit:cover;overflow:hidden}
.account-chip .acc-pseudo{font-size:.85rem;color:var(--cream);font-weight:600}
.acc-logout-btn{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;color:rgba(239,68,68,.75);cursor:pointer;padding:.55rem .8rem;border-radius:9px;border:1.3px solid rgba(239,68,68,.3);background:rgba(239,68,68,.06);transition:all .18s}
.acc-logout-btn:hover{color:#fff;background:rgba(239,68,68,.55);border-color:rgba(239,68,68,.55)}
.form-error{font-size:.78rem;color:#f87171;margin-top:-.3rem;margin-bottom:.6rem;min-height:1em}
.avatar-upload-row{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:1.3rem}
.avatar-preview{width:84px;height:84px;border-radius:50%;background:rgba(201,168,76,.12);border:2px solid rgba(201,168,76,.35);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:var(--gold-light);overflow:hidden}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-upload-btn{font-size:.78rem;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.stats-box{background:rgba(15,31,23,.5);border:1px solid rgba(245,230,200,.1);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.5rem}
.stats-title{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:700;margin-bottom:.7rem}
.stats-total{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;font-size:.72rem}
.stats-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid rgba(245,230,200,.06)}
.stats-row:last-child{border-bottom:none}
.stats-label{font-size:.83rem;font-weight:600;padding:.15rem .55rem;border-radius:6px}
.stats-value{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:var(--cream)}
.danger-zone{border-top:1px solid rgba(239,68,68,.2);padding-top:1.1rem;text-align:center}
.danger-zone-title{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;color:rgba(239,68,68,.6);font-weight:700;margin-bottom:.6rem}
.danger-link{font-size:.8rem;color:rgba(239,68,68,.75);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.danger-link:hover{color:#f87171}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;font-family:'Inter',sans-serif;font-weight:700;padding:.85rem 1.2rem;border-radius:10px;cursor:pointer;font-size:.92rem;transition:all .18s}
.btn-danger:hover{box-shadow:0 5px 18px rgba(239,68,68,.4);transform:translateY(-1px)}
.delete-account-overlay{position:fixed;inset:0;background:rgba(5,12,8,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:600;padding:1.5rem}
.delete-account-overlay.show{display:flex}
.delete-account-box{background:rgba(26,30,42,.92);border:1px solid rgba(239,68,68,.3);border-radius:18px;padding:2.4rem 2.2rem;width:100%;max-width:420px;box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}

.privacy-overlay{position:fixed;inset:0;background:rgba(5,12,8,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:600;padding:1.5rem}
.privacy-overlay.show{display:flex}
.privacy-box{position:relative;background:rgba(26,30,42,.96);border:1px solid rgba(201,168,76,.3);border-radius:18px;padding:2.2rem;width:100%;max-width:560px;max-height:82vh;box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column}
.privacy-box h2{color:var(--gold,#e8c96a);margin-bottom:1rem;text-align:center}
.privacy-content{overflow-y:auto;padding-right:6px;color:rgba(230,220,200,.88);font-size:13.5px;line-height:1.55}
.privacy-content h3{color:var(--gold,#e8c96a);font-size:14px;margin:16px 0 6px}
.privacy-content h3:first-child{margin-top:0}
.privacy-content p{margin-bottom:8px}
.privacy-content ul{margin:0 0 8px 18px}
.privacy-content li{margin-bottom:4px}
.delete-account-box h2{font-family:'Playfair Display',serif;font-weight:700;font-size:1.4rem;margin-bottom:.5rem}
.invite-friend-btn{display:flex;align-items:center;justify-content:center;gap:.4rem}
.invite-friend-overlay{position:fixed;inset:0;background:rgba(5,12,8,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:600;padding:1.5rem}
.invite-friend-overlay.show{display:flex}
.invite-friend-box{position:relative;background:rgba(26,58,42,.94);border:1px solid rgba(201,168,76,.3);border-radius:18px;padding:2.2rem 2rem;width:100%;max-width:420px;max-height:80vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}
.invite-friend-box h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-light);font-size:1.35rem;margin-bottom:.4rem}
.invite-friend-row{display:flex;align-items:center;gap:.7rem;background:rgba(15,31,23,.5);border:1px solid rgba(245,230,200,.08);border-radius:10px;padding:.65rem .9rem;margin-top:.7rem;text-align:left}
.invite-friend-row.offline{opacity:.45}
.invite-friend-name{flex:1;font-size:.88rem;font-weight:600;color:var(--cream)}
.invite-friend-status{font-size:.7rem;color:var(--muted)}
.invite-friend-status.online{color:#6fcf97}
.game-invite-overlay{position:fixed;inset:0;background:rgba(5,12,8,.8);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:700;padding:1.5rem}
.game-invite-overlay.show{display:flex}
.game-invite-box{position:relative;background:rgba(26,58,42,.95);border:1px solid rgba(201,168,76,.4);border-radius:18px;padding:2.4rem 2.2rem;width:100%;max-width:420px;box-shadow:0 28px 80px rgba(0,0,0,.7);text-align:center}
.game-invite-box h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-light);font-size:1.4rem;margin-bottom:.4rem}
.friend-profile-overlay{position:fixed;inset:0;background:rgba(5,12,8,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:650;padding:1.5rem}
.friend-profile-overlay.show{display:flex}
.friend-profile-box{
  position:relative;background:#fff;border-radius:22px;
  width:100%;max-width:480px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  text-align:center;overflow:hidden;
}
.friend-profile-header{
  background:linear-gradient(135deg,#2d7a55,#1f5c3e);
  padding:2rem 2rem 1.5rem;position:relative;
}
.friend-profile-header::before{content:'♠';position:absolute;left:8%;top:10%;font-size:48px;opacity:.08;color:#fff}
.friend-profile-header::after{content:'♣';position:absolute;right:6%;bottom:5%;font-size:42px;opacity:.08;color:#fff}
.friend-profile-body{padding:1.2rem 1.4rem 1.4rem;max-height:60vh;overflow-y:auto}
.friend-profile-avatar{width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff;margin:0 auto .8rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.friend-profile-avatar img{width:100%;height:100%;object-fit:cover}
.friend-profile-name{font-family:Baloo 2,sans-serif;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:.3rem}
.signup-banner{margin-top:1.6rem;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.25);border-radius:12px;padding:1rem 1.2rem;text-align:left}
.signup-banner-title{font-size:.85rem;font-weight:700;color:var(--gold-light);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.signup-banner .signup-benefits{margin:0 0 .9rem;gap:.5rem}
.signup-banner .benefit-card{padding:.6rem .7rem}
.signup-banner .benefit-icon{width:30px;height:30px;font-size:.95rem}
.signup-banner .benefit-title{font-size:.8rem}
.signup-banner .benefit-desc{font-size:.72rem}
.signup-banner .btn{width:100%;padding:.6rem;font-size:.82rem}
.signup-popup-close{position:absolute;top:1rem;right:1.1rem;cursor:pointer;color:var(--muted);font-size:1.1rem;transition:color .15s}
.signup-popup-close:hover{color:var(--cream)}
.signup-benefits{display:flex;flex-direction:column;gap:.65rem;margin:1.4rem 0 1.7rem;text-align:left}
.benefit-card{display:flex;align-items:center;gap:.9rem;background:rgba(15,31,23,.55);border:1px solid rgba(245,230,200,.1);border-radius:12px;padding:.8rem .9rem}
.benefit-icon{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.benefit-text{flex:1;min-width:0}
.benefit-title{font-size:.88rem;font-weight:700;color:var(--gold-light);margin-bottom:.2rem;line-height:1.3}
.benefit-desc{font-size:.78rem;color:var(--muted);line-height:1.4}
.logo-cards{display:flex;justify-content:center;margin-bottom:2rem;position:relative;height:90px}
.logo-card{width:58px;height:82px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;position:absolute;box-shadow:2px 4px 12px rgba(0,0,0,.55)}
.logo-card:nth-child(1){transform:rotate(-18deg) translate(-44px,8px)}
.logo-card:nth-child(2){transform:rotate(-6deg) translate(-4px,0);color:var(--red)}
.logo-card:nth-child(3){transform:rotate(6deg) translate(36px,-4px)}
.logo-card:nth-child(4){transform:rotate(18deg) translate(76px,4px);color:var(--red)}
h1{font-family:'Playfair Display',serif;font-size:3.2rem;color:var(--gold);letter-spacing:2px;text-shadow:0 2px 20px rgba(201,168,76,.3);margin-bottom:.4rem}
.subtitle{color:var(--muted);font-size:.9rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:2.5rem}
.home-actions{display:flex;flex-direction:column;gap:1rem}
/* home responsive handled via .home-* classes */
.btn{padding:.85rem 2rem;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:.5px}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--felt-dark);box-shadow:0 4px 15px rgba(201,168,76,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,168,76,.45)}
.btn-secondary{background:transparent;color:var(--cream);border:1.5px solid rgba(245,230,200,.3)}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-sm{padding:.5rem 1.1rem;font-size:.85rem;border-radius:7px}
#screen-lobby{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,var(--felt) 0%,var(--felt-dark) 70%)}
.lobby-box{background:rgba(26,58,42,.6);border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:2.5rem;width:100%;max-width:500px;backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lobby-box h2{font-family:'Playfair Display',serif;color:var(--gold);font-size:1.6rem;margin-bottom:1.5rem;text-align:center}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.form-group input,.form-group select{width:100%;padding:.75rem 1rem;background:rgba(15,31,23,.7);border:1px solid rgba(245,230,200,.2);border-radius:8px;color:var(--cream);font-family:'Inter',sans-serif;font-size:.95rem;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{border-color:var(--gold)}
.form-group input::placeholder{color:var(--muted)}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:2.6rem !important}
.pwd-toggle{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1rem;color:var(--muted);user-select:none;transition:color .15s;line-height:1}
.pwd-toggle:hover{color:var(--gold-light)}
.pwd-strength{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.pwd-strength-bar{height:4px;border-radius:3px;background:rgba(245,230,200,.12);overflow:hidden}
.pwd-strength-bar-fill{height:100%;border-radius:3px;transition:width .2s,background-color .2s;width:0%}
.pwd-rules{display:flex;flex-wrap:wrap;gap:.4rem .6rem;font-size:.7rem}
.pwd-rule{color:var(--muted);transition:color .15s}
.pwd-rule.ok{color:#6fcf97}
.pwd-rule .pwd-rule-icon{margin-right:.25rem}
.code-display{background:rgba(15,31,23,.8);border:1px solid rgba(201,168,76,.3);border-radius:10px;padding:1rem 1.5rem;text-align:center;margin-bottom:1.5rem}
.code-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.4rem}
.code-value{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--gold);letter-spacing:8px}
.copy-hint{font-size:.75rem;color:var(--muted);margin-top:.3rem;cursor:pointer}.copy-hint:hover{color:var(--gold)}
.player-list{margin-bottom:1.5rem}
.player-list-title{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.8rem}
.player-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;background:rgba(15,31,23,.5);border-radius:7px;margin-bottom:.4rem;font-size:.9rem}
.player-avatar{width:28px;height:28px;min-width:28px;max-width:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--felt-dark);overflow:hidden}
.player-avatar-img{width:100%;height:100%;object-fit:cover}
.clickable-avatar,.clickable-name{cursor:pointer;transition:opacity .15s}
.clickable-avatar:hover,.clickable-name:hover{opacity:.75}
.host-badge{font-size:.7rem;background:rgba(201,168,76,.2);color:var(--gold);padding:.2rem .5rem;border-radius:4px;margin-left:auto}
.waiting-dots{color:var(--muted);font-size:.85rem;font-style:italic}
#screen-game{background:#0d1810}
.debug-bar{display:flex;align-items:center;gap:.5rem;padding:.35rem 1rem;background:rgba(0,0,0,.65);border-bottom:1px solid rgba(255,80,80,.18);flex-wrap:wrap;flex-shrink:0}
.debug-label{font-size:.62rem;color:#ff8080;text-transform:uppercase;letter-spacing:1px;font-weight:700;white-space:nowrap}
.debug-player-btn{padding:.2rem .6rem;border-radius:20px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--muted);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;white-space:nowrap}
.debug-player-btn:hover{border-color:rgba(255,255,255,.3);color:var(--cream)}
.debug-player-btn.active{background:rgba(255,100,100,.18);border-color:#ff8080;color:#ffb0b0}
.debug-sep{width:1px;height:14px;background:rgba(255,255,255,.1);flex-shrink:0}
.debug-toggle{font-size:.62rem;color:#ff8080;cursor:pointer;text-decoration:underline;text-underline-offset:2px;margin-left:auto;white-space:nowrap}
.game-header-hf{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1.2rem;background:#1a1208;border-bottom:1px solid rgba(201,168,76,.22);flex-shrink:0;box-shadow:0 2px 14px rgba(0,0,0,.5);z-index:2}
.game-header-left{display:flex;align-items:center;gap:10px}
.game-header-right{display:flex;align-items:center;gap:10px}
.game-manche-badge{background:rgba(239,111,83,.18);color:#ef8a6a;border:1px solid rgba(239,111,83,.3)}
.game-code-badge-hf{font-size:.72rem;color:#e8c96a;background:rgba(201,168,76,.12);border:1.5px solid rgba(201,168,76,.4);border-radius:8px;padding:.4rem .8rem;letter-spacing:1.5px;font-weight:800;cursor:pointer;font-family:Baloo 2,sans-serif}
.game-code-badge-hf:hover{background:#f7e6bd}
.game-code-badge-hf::before{content:'Code ';font-weight:700;letter-spacing:normal}
.end-code-row{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:rgba(255,255,255,.65);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:.3rem .85rem}
.end-code-value{font-family:Baloo 2,sans-serif;font-weight:800;font-size:.82rem;color:#fff;letter-spacing:3px}
.end-code-copy{cursor:pointer;opacity:.7;transition:opacity .15s}
.end-code-copy:hover{opacity:1}
.spectator-msg{color:var(--cream);font-size:.95rem;line-height:1.6;margin-bottom:.5rem}
.spectator-spinner{width:34px;height:34px;border:3px solid rgba(201,168,76,.2);border-top-color:var(--gold);border-radius:50%;margin:1.2rem auto 0;animation:spectator-spin 1s linear infinite}
@keyframes spectator-spin{to{transform:rotate(360deg)}}
.kick-btn{margin-left:auto;font-size:.75rem;color:rgba(239,68,68,.5);cursor:pointer;padding:.2rem .5rem;border-radius:5px;transition:all .15s}
.kick-btn:hover{color:#f87171;background:rgba(239,68,68,.12)}
.revolution-badge{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:white;padding:.25rem .75rem;border-radius:20px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;animation:pulse 1.4s infinite;display:none;box-shadow:0 0 14px rgba(185,28,28,.6)}
.revolution-badge.active{display:block}
.chor-badge{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:white;padding:.25rem .75rem;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.5px;display:none;box-shadow:0 0 10px rgba(37,99,235,.5)}
.chor-badge.active{display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.game-body-hf{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative}
.game-table-zone{flex:1;position:relative;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#111c13 0%,#0a100b 100%)}
.other-players{position:absolute;inset:0;pointer-events:none}
.other-player{position:absolute;background:transparent;border:none;border-radius:0;padding:.3rem .5rem;text-align:center;min-width:72px;transition:all .3s;pointer-events:auto;transform:translate(-50%,-50%)}
.other-player.active-turn .op-avatar{box-shadow:0 0 0 3px rgba(201,168,76,.6),0 0 18px rgba(201,168,76,.4)!important;border-color:var(--gold)!important}
.other-player.passed .op-avatar{opacity:.45}.other-player.finished .op-avatar{opacity:.3}
.op-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto .3rem;background:rgba(20,12,4,.6);border:2.5px solid rgba(201,168,76,.5);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:Baloo 2,sans-serif;font-weight:700;font-size:1.2rem;color:#ef8a6a;box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,76,.15)}
.op-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.op-name{font-size:.73rem;font-weight:800;color:#fff;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.8)}
.op-cards{font-size:.65rem;font-weight:700;color:rgba(255,240,200,.85);text-shadow:0 1px 4px rgba(0,0,0,.9)}.op-role{font-size:.62rem;color:#ef8a6a;margin-top:.1rem;font-weight:700}
.op-mini-cards{display:none}
.op-mini-card{width:10px;height:15px;background:#f5e8cc;border-radius:2px;border:1px solid rgba(180,140,80,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4)}
.table-area{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.table-surface{position:relative;width:min(520px,70vw);height:min(310px,42vw);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.table-shadow{position:absolute;inset:-14px;box-shadow:0 24px 60px rgba(60,40,20,.25),0 8px 20px rgba(60,40,20,.18);border-radius:130px}
.table-rail{position:absolute;inset:0;border-radius:130px;background:radial-gradient(ellipse at 28% 18%,#8b5523 0%,#5a3310 38%,#2d1508 72%,#180b04 100%);box-shadow:0 12px 40px rgba(0,0,0,.7),inset 0 3px 0 rgba(255,210,130,.18),inset 0 -3px 8px rgba(0,0,0,.7)}
.table-rail::before{content:'';position:absolute;inset:5px;border-radius:125px;border:1.5px solid rgba(201,168,76,.22)}
.table-felt{position:absolute;inset:14px;border-radius:116px;background:radial-gradient(ellipse at 38% 30%,#1e5c38 0%,#174830 35%,#0f3320 65%,#081c10 100%);box-shadow:inset 0 12px 40px rgba(0,0,0,.65),inset 0 -6px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden}
.table-felt::before{content:'';position:absolute;top:0;left:8%;right:8%;height:42%;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05) 0%,transparent 72%);border-radius:50%;pointer-events:none}
.table-felt::after{content:'\2660  \2665  \2666  \2663';position:absolute;bottom:12px;right:20px;font-size:.72rem;color:rgba(255,255,255,.055);letter-spacing:5px;pointer-events:none;font-family:serif}
.pile-content{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.pile-cards{display:flex;gap:8px;justify-content:center;align-items:center}
.pile-info{font-size:.72rem;color:rgba(245,230,200,.55);text-align:center;letter-spacing:.5px;font-weight:500}
.empty-pile-hint{font-size:.8rem;color:rgba(180,220,190,.28);font-style:italic;text-align:center}
.pile-card{width:78px;height:114px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:2px 6px 16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.65);position:relative;overflow:hidden;animation:cardDrop .2s cubic-bezier(.2,1.1,.4,1)}
@keyframes cardDrop{from{transform:translateY(-20px) scale(.88);opacity:0}to{transform:none;opacity:1}}
.pile-card .pc-corner{position:absolute;top:4px;left:5px;font-size:.62rem;font-weight:700;line-height:1.15;text-align:center;z-index:2;white-space:nowrap}
.pile-card .pc-corner-br{position:absolute;bottom:4px;right:5px;font-size:.62rem;font-weight:700;line-height:1.15;text-align:center;z-index:2;white-space:nowrap;transform:none}
.pile-card .pc-center{font-size:1.8rem;line-height:1}
.pile-card .c-suit{font-size:1.6rem;line-height:1}
.pile-card .c-pips{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:80px;width:54px;padding:2px 4px}
.pile-card .pip{font-size:.84rem;line-height:1;user-select:none}
.pile-card .pip.flip{transform:rotate(180deg);display:inline-block}
.pile-card.red{color:var(--red)}.pile-card.black{color:#1a1a2e}
.pile-card .pc-fig-full{position:absolute;inset:0;overflow:hidden;border-radius:9px}
.pile-card .pc-fig-full img{width:100%;height:100%;object-fit:cover;display:block}
.shared-log-wrap{
  position:fixed;bottom:0;left:0;
  width:min(320px,40vw);
  height:min(200px,26vh);
  box-sizing:border-box;
  display:none;flex-direction:column;overflow:hidden;
  background:rgba(6,14,9,.96);
  border-top:1px solid rgba(201,168,76,.2);
  border-right:1px solid rgba(201,168,76,.15);
  border-radius:0 8px 0 0;
  z-index:50;
  pointer-events:auto;
  animation:logSlideUp .22s ease;
}
.shared-log-wrap.log-open{display:flex}
@keyframes logSlideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.shared-log-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .7rem .2rem;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.shared-log-title{font-size:.55rem;text-transform:uppercase;letter-spacing:2px;color:rgba(201,168,76,.6);font-weight:700}
.shared-log-clear{font-size:.55rem;color:rgba(138,171,150,.3);cursor:pointer;transition:color .15s}
.shared-log-clear:hover{color:rgba(138,171,150,.7)}
.shared-log{flex:1;overflow-y:scroll;overflow-x:hidden;padding:.3rem .6rem .35rem;display:flex;flex-direction:column;gap:1px;box-sizing:border-box}
.shared-log::-webkit-scrollbar{width:2px}
.shared-log::-webkit-scrollbar-thumb{background:rgba(201,168,76,.15);border-radius:2px}
.log-entry{font-size:.67rem;line-height:1.45;display:flex;align-items:baseline;gap:.3rem;padding:.03rem 0;color:#d8d0c0}
.log-entry .li{flex-shrink:0;width:.85rem;text-align:center;font-size:.6rem;color:rgba(216,208,192,.22)}
.log-entry .log-who{color:#7a8f7a;font-weight:500}
.log-entry .log-cards{color:#ffffff;font-weight:600}
.log-entry.pass{color:#21AB8E}
.log-entry.pass .li{color:rgba(33,171,142,.45)}
.log-entry.win,.log-entry.important{color:#ffd700;font-weight:700;text-shadow:0 0 8px rgba(255,215,0,.25)}
.log-entry.win .li,.log-entry.important .li{color:#e8b800}
.log-entry.system{color:#e8a830;font-style:italic;font-size:.62rem}
.log-entry.system .li{display:none}
.log-entry.revolution{color:#f04040;font-weight:700}
.log-entry.revolution .li{color:#c02020}
.log-entry.contre{color:#00d4d4;font-weight:700}
.log-entry.contre .li{color:#009898}
.log-entry.chor{color:#4488ff;font-weight:600}
.log-entry.chor .li{color:#2255cc}
::-webkit-scrollbar{width:3px}.shared-log::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:2px}.log-entry{font-size:.7rem;line-height:1.5;display:flex;align-items:baseline;gap:.35rem;padding:.04rem .2rem;border-radius:3px;color:#c8bfb0}.log-entry:hover{background:rgba(255,255,255,.03)}.log-entry .li{flex-shrink:0;font-size:.65rem;width:1rem;text-align:center;color:rgba(200,191,176,.3)}.player-area-hf{flex-shrink:0;padding:.35rem 1rem .5rem;background:linear-gradient(180deg,#1a1208 0%,#120d05 100%);border-top:2px solid rgba(201,168,76,.25);box-shadow:0 -6px 24px rgba(0,0,0,.6);position:relative}
.player-info-bar-hf{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.player-name-badge-hf{display:flex;align-items:center;gap:.5rem}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:#fff;flex-shrink:0;font-family:Baloo 2,sans-serif;overflow:hidden;border:2px solid rgba(201,168,76,.4);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.avatar img{width:100%;height:100%;object-fit:contain;object-position:top}
.player-name-text{font-weight:700;font-size:.88rem;color:#e8d8b0;font-family:Baloo 2,sans-serif}
.player-role-badge{font-size:.65rem;padding:.18rem .55rem;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.turn-indicator-hf{font-size:.72rem;padding:.25rem .75rem;border-radius:20px;font-weight:700;white-space:nowrap;font-family:Baloo 2,sans-serif}
.turn-your{background:linear-gradient(135deg,#c9a84c,#e8c96a);color:#1a1208;font-weight:800;animation:pulse 1.4s infinite}
.turn-wait{background:rgba(255,255,255,.07);color:rgba(200,185,150,.6)}
.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:auto;align-items:flex-end;padding:.2rem .5rem .1rem}
.card{width:82px;height:120px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:10px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:2px 5px 12px rgba(60,40,20,.22),inset 0 1px 0 rgba(255,255,255,.75);position:relative;user-select:none;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.card:hover:not(.disabled){transform:translateY(-12px);box-shadow:2px 12px 26px rgba(60,40,20,.32)}
.card.selected{transform:translateY(-18px);border-color:var(--hf-coral);box-shadow:0 0 0 2.5px var(--hf-coral),2px 14px 28px rgba(60,40,20,.35)}
.card.disabled{opacity:.4;cursor:not-allowed}
.card.force-locked{opacity:.22;filter:grayscale(.7);cursor:not-allowed}
.card.red{color:var(--red)}.card.black{color:#18181b}
.card .c-tl{position:absolute;top:4px;left:5px;font-size:.72rem;font-weight:800;line-height:1.15;text-align:center;z-index:2;white-space:nowrap}
.card .c-br{position:absolute;bottom:4px;right:5px;font-size:.72rem;font-weight:800;line-height:1.15;text-align:center;z-index:2;white-space:nowrap;transform:none}
.card .c-suit{font-size:1.9rem;line-height:1}
.card .c-figure-full{position:absolute;inset:0;overflow:hidden;border-radius:9px}
.card .c-figure-full img{width:100%;height:100%;object-fit:cover;display:block}
.card .c-pips{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:80px;width:58px;padding:2px 4px}
.pip-row{display:flex;justify-content:space-around;width:100%}
.pip{font-size:.94rem;line-height:1;user-select:none}
.pip.flip{transform:rotate(180deg);display:inline-block}
.card.chor-valid{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f6,2px 5px 12px rgba(60,40,20,.22)}
.actions-hf{display:flex;gap:.5rem;justify-content:center;padding:.35rem 0 .2rem;flex-wrap:wrap;min-height:0;align-items:center;border-top:1px solid rgba(201,168,76,.12)}
/* NOTIFICATIONS */
.notif{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);background:linear-gradient(135deg,rgba(14,28,20,.97),rgba(24,48,32,.97));border:1px solid rgba(201,168,76,.45);color:var(--cream);padding:1rem 2.8rem;border-radius:16px;font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;letter-spacing:.4px;z-index:500;opacity:0;transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.2,.35,1);pointer-events:none;text-align:center;white-space:nowrap;max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(16px)}
.notif.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.notif.notif-win{border-color:rgba(201,168,76,.75);color:var(--gold-light);background:linear-gradient(135deg,rgba(20,32,14,.97),rgba(40,52,20,.97))}
.notif.notif-rev{border-color:rgba(239,68,68,.65);color:#fca5a5;background:linear-gradient(135deg,rgba(32,10,10,.97),rgba(60,18,18,.97))}
.notif.notif-chor{border-color:rgba(59,130,246,.65);color:#bfdbfe;background:linear-gradient(135deg,rgba(10,18,38,.97),rgba(18,32,68,.97))}
.notif.notif-info{border-color:rgba(138,171,150,.4);color:var(--cream)}
.notif.notif-block{border-color:rgba(239,68,68,.85);color:#fff;background:linear-gradient(135deg,rgba(60,8,8,.98),rgba(90,15,15,.98));font-size:1.05rem;padding:1rem 2.8rem;box-shadow:0 0 30px rgba(239,68,68,.5),0 10px 40px rgba(0,0,0,.7)}
.notif.notif-rev{border-color:rgba(239,68,68,.65);color:#fca5a5;background:linear-gradient(135deg,rgba(32,10,10,.97),rgba(60,18,18,.97))}
.notif.notif-chor{border-color:rgba(59,130,246,.65);color:#bfdbfe;background:linear-gradient(135deg,rgba(10,18,38,.97),rgba(18,32,68,.97))}
.notif.notif-info{border-color:rgba(138,171,150,.4);color:var(--cream)}
/* END SCREEN */
#screen-end{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#1a3d28 0%,#0d1e12 100%)}
#screen-spectator{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,var(--felt) 0%,var(--felt-dark) 70%)}
#screen-login,#screen-register{align-items:center;justify-content:center}
#screen-profile{align-items:stretch;justify-content:flex-start}
.auth-box{background:rgba(26,58,42,.7);border:1px solid rgba(201,168,76,.3);border-radius:18px;padding:2.6rem 2.4rem;width:100%;max-width:440px;backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.auth-icon{width:54px;height:54px;margin:0 auto 1.1rem;border-radius:50%;background:linear-gradient(135deg,rgba(201,168,76,.25),rgba(201,168,76,.08));border:1.3px solid rgba(201,168,76,.4);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.auth-box h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-light);font-size:1.65rem;text-align:center;margin-bottom:.3rem}
.auth-subtitle{text-align:center;font-size:.83rem;color:var(--muted);margin-bottom:1.8rem}
.auth-switch{text-align:center;margin-top:1.3rem;font-size:.83rem;color:var(--muted)}
.auth-switch a{color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.auth-switch a:hover{color:var(--gold-light)}

/* ── Friends system ── */
.friends-btn{position:relative}
.friends-badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 .3rem;box-shadow:0 0 0 2px var(--felt-dark)}
#screen-friends{align-items:center;justify-content:center;background:linear-gradient(180deg,var(--hf-bg1) 0%,var(--hf-bg2) 45%,var(--hf-bg3) 100%)}
.friends-box{background:rgba(26,58,42,.7);border:1px solid rgba(201,168,76,.3);border-radius:18px;padding:2.2rem 2rem;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.friends-box h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-light);font-size:1.5rem;text-align:center;margin-bottom:1.3rem}
.friends-search-row{display:flex;gap:.5rem;margin-bottom:1.6rem}
.friends-search-row input{flex:1;padding:.7rem .9rem;background:rgba(15,31,23,.7);border:1px solid rgba(245,230,200,.2);border-radius:8px;color:var(--cream);font-family:'Inter',sans-serif;font-size:.9rem;outline:none}
.friends-search-row input:focus{border-color:var(--gold)}
.friends-search-results{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem}
.friends-section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:700;margin:1.4rem 0 .7rem}
.friends-section-title:first-of-type{margin-top:0}
.friend-row{display:flex;align-items:center;gap:.7rem;background:rgba(15,31,23,.5);border:1px solid rgba(245,230,200,.08);border-radius:10px;padding:.6rem .8rem}
.friend-row .friend-name{flex:1;font-size:.88rem;color:var(--cream);font-weight:600}
.friend-row-status{align-items:center}
.friend-avatar-wrap{position:relative;flex-shrink:0}
.presence-dot{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#6b7280;border:2px solid var(--felt-dark)}
.presence-dot.online{background:#6fcf97}
.friend-info{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.friend-info .friend-name{font-size:.88rem}
.friend-status{font-size:.7rem;color:var(--muted)}
.friend-status.online{color:#6fcf97;font-weight:600}
.friend-row .friend-action-btn{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;padding:.4rem .7rem;border-radius:7px;cursor:pointer;border:none;transition:all .15s}
.friend-action-btn.accept{background:rgba(111,207,151,.18);color:#6fcf97;border:1px solid rgba(111,207,151,.4)}
.friend-action-btn.accept:hover{background:#6fcf97;color:var(--felt-dark)}
.friend-action-btn.decline,.friend-action-btn.remove{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.friend-action-btn.decline:hover,.friend-action-btn.remove:hover{background:#ef4444;color:#fff}
.friend-action-btn.add{background:rgba(201,168,76,.15);color:var(--gold-light);border:1px solid rgba(201,168,76,.4)}
.friend-action-btn.add:hover{background:var(--gold);color:var(--felt-dark)}
.friends-empty{text-align:center;font-size:.82rem;color:var(--muted);padding:.8rem 0;font-style:italic}
.end-box{
  background:#fff;
  border-radius:22px;
  max-width:420px;width:92%;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  text-align:center;
  animation:hfRiseIn .4s ease both;
}
.end-box-header{
  background:linear-gradient(135deg,#2d7a55 0%,#1f5c3e 100%);
  padding:1.6rem 2rem 1.4rem;
  position:relative;
  overflow:hidden;
}
.end-box-header::before{
  content:'♠';position:absolute;left:10%;top:10%;font-size:52px;opacity:.08;color:#fff;
}
.end-box-header::after{
  content:'♣';position:absolute;right:8%;bottom:5%;font-size:48px;opacity:.08;color:#fff;
}
.end-box-body{padding:1.2rem 1.4rem 1.5rem;}
.end-box h2{font-family:Baloo 2,sans-serif;color:#fff;font-size:1.65rem;font-weight:800;margin:0 0 .5rem;}
/* end-box h2 moved to .end-box */
.results-list{margin-bottom:1.1rem}
.result-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem 1rem;
  background:#faf7f2;
  border-radius:14px;margin-bottom:.55rem;text-align:left;
  border:1.5px solid #f0e8d8;
  transition:transform .15s;
}
.result-item:hover{transform:translateX(3px)}
.result-item.result-item-me{background:#fff8ee;border-color:#e7c97a;}
.result-item-spectator{opacity:.65;border:1px dashed #ddd}
.result-item-spectator{opacity:.65;border:1px dashed #ddd}
#screen-end .btn-primary{
  background:linear-gradient(135deg,#2d7a55,#1f5c3e);
  color:#fff;border-radius:14px;font-weight:800;
  box-shadow:0 4px 14px rgba(31,92,62,.35);
  font-family:Baloo 2,sans-serif;
}
#screen-end .btn-primary:hover{
  background:linear-gradient(135deg,#359467,#246e4a);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(31,92,62,.45);
}
#screen-end .btn-secondary{
  background:#fff;color:#4a3c28;
  border:1.5px solid #e0d5c0;
  border-radius:14px;font-weight:700;
  font-family:Baloo 2,sans-serif;
}
#screen-end .btn-secondary:hover{background:#f5f0e8;border-color:#c9b894;color:#2c1f0a}
.result-rank{font-size:1.2rem;width:26px;text-align:center}.result-name{font-weight:600;flex:1}
.result-role{font-size:.68rem;padding:.16rem .5rem;border-radius:20px;font-weight:600}
/* EXCHANGE OVERLAY */
.exchange-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;z-index:100;backdrop-filter:blur(6px)}
.exchange-overlay.active{display:flex}
/* Full-screen exchange layout: sidebar left + main right */
.ex-screen-inner{display:flex;width:100%;min-height:100vh}
.ex-sidebar{width:220px;flex-shrink:0;background:rgba(0,0,0,.4);border-right:1px solid rgba(201,168,76,.12);padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.ex-sidebar-title{font-family:'Playfair Display',serif;color:var(--gold);font-size:.9rem;letter-spacing:1px;text-align:center;padding-bottom:.8rem;border-bottom:1px solid rgba(201,168,76,.15);margin-bottom:.6rem}
.ex-round-badge{text-align:center;font-size:.7rem;color:var(--muted);margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}
.ex-player-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:8px;margin-bottom:.25rem;transition:all .3s;border:1px solid transparent}
.ex-player-row.active-step{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.28)}
.ex-player-row.waiting-step{opacity:.45}
.ex-player-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:var(--felt-dark);flex-shrink:0}
.ex-player-info{flex:1;min-width:0}
.ex-player-name{font-size:.72rem;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-player-role-txt{font-size:.6rem;color:var(--muted);margin-top:.1rem}
.ex-player-status{font-size:.85rem;flex-shrink:0}
.ex-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem}
.ex-panel,.ex-waiting{max-width:640px;width:100%}
.ex-waiting{text-align:center;padding:3rem 2rem}
.ex-waiting-icon{font-size:2.8rem;margin-bottom:1rem;display:inline-block;animation:wspin 2s linear infinite}
@keyframes wspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ex-waiting-title{font-family:'Playfair Display',serif;font-size:1.8rem;color:var(--gold);margin-bottom:.8rem}
.ex-waiting-desc{color:var(--muted);font-size:.9rem;line-height:1.7}
.ex-panel h3{font-family:'Playfair Display',serif;color:var(--gold);margin-bottom:.35rem;font-size:1.3rem;letter-spacing:.5px}
.ex-panel p{color:var(--muted);font-size:.82rem;line-height:1.6;margin-bottom:1rem}
.ex-roles{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.2rem;padding:.7rem 1.2rem;background:rgba(0,0,0,.35);border-radius:12px;border:1px solid rgba(255,255,255,.07)}
.ex-role-chip{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.ex-role-chip .ex-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:var(--felt-dark)}
.ex-role-chip .ex-name{font-size:.72rem;font-weight:600;color:var(--cream)}
.ex-role-chip .ex-badge{font-size:.62rem;padding:.18rem .55rem;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.ex-arrow{font-size:1.8rem;color:var(--gold);opacity:.7;margin-top:8px}
.ex-progress{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.2rem}
.ex-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s}
.ex-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(201,168,76,.7)}
.ex-dot.done{background:rgba(201,168,76,.45)}
.ex-restriction{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:8px;padding:.55rem 1rem;margin-bottom:1rem;font-size:.78rem;color:var(--gold-light);text-align:center}
.exchange-hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:1.2rem;min-height:100px;align-items:flex-end;padding:.6rem;background:rgba(0,0,0,.15);border-radius:12px}
.card.ex-locked{opacity:.18;cursor:not-allowed;filter:grayscale(.6)}
.card.ex-locked:hover{transform:none!important;box-shadow:2px 5px 12px rgba(0,0,0,.38)!important}
.ex-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem}
.ex-counter{font-size:.82rem;color:var(--muted);font-weight:500}
.ex-counter span{color:var(--gold-light);font-weight:700}
.ex-counter{font-size:.8rem;color:var(--muted);font-weight:500}
.ex-counter span{color:var(--gold-light);font-weight:700}
/* ROLES */
.role-president{background:rgba(201,168,76,.2);color:var(--gold)}.role-vp{background:rgba(138,171,150,.18);color:#a0c4ac}
.role-citoyen{background:rgba(100,100,180,.18);color:#a0a8d8}.role-sous-trou{background:rgba(200,100,80,.15);color:#d8a090}
.role-trou{background:rgba(185,28,28,.2);color:var(--red-light)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:rgba(201,168,76,.22);border-radius:2px}
.rev-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;pointer-events:none;transition:opacity .6s ease}.rev-overlay.show{opacity:1}.rev-overlay img{width:100%;height:100%;object-fit:contain;display:block}

.pli-end-popup{position:fixed;z-index:350;transform:translate(-50%,-12px) scale(.92);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;cursor:pointer}
.pli-end-popup.show{opacity:1;transform:translate(-50%,-100%) scale(1);pointer-events:auto}
.pli-end-card{width:min(320px,74vw);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);background:#151107}
.pli-end-card img{display:block;width:100%;height:auto}
.pli-end-bubble{background:var(--cream,#f5e6c8);color:#2b2013;font-weight:700;font-size:13.5px;line-height:1.35;text-align:center;padding:10px 14px 12px;font-family:Georgia,'Times New Roman',serif}

.reaction-picker{position:absolute;top:calc(100% + 8px);right:0;z-index:120;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#1b140b;border:1px solid rgba(201,168,76,.35);border-radius:14px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.95);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.reaction-picker.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.reaction-opt{width:52px;height:52px;border-radius:10px;overflow:hidden;cursor:pointer;border:1.5px solid rgba(255,255,255,.08);transition:border-color .15s,transform .15s}
.reaction-opt:hover{border-color:var(--gold,#c9a84c);transform:scale(1.06)}
.reaction-opt img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

.reaction-bubble{position:fixed;z-index:360;transform:translate(-50%,-14px) scale(.3);opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.34,1.56,.64,1),transform .28s cubic-bezier(.34,1.56,.64,1)}
.reaction-bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.reaction-bubble.leave{transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translate(-50%,-115%) scale(.85)}
.reaction-bubble.below{transform:translate(-50%,14px) scale(.3)}
.reaction-bubble.below.show{transform:translate(-50%,0) scale(1)}
.reaction-bubble.below.leave{transform:translate(-50%,15%) scale(.85)}
.reaction-bubble img{width:112px;height:112px;object-fit:cover;object-position:top;border-radius:50%;border:4px solid var(--gold,#c9a84c);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 10px 28px rgba(0,0,0,.6),0 0 24px rgba(201,168,76,.35);background:#151107;display:block}
.av0{background:#e76f51}.av1{background:#2a9d8f}.av2{background:#e9c46a}.av3{background:#264653}
.av4{background:#f4a261}.av5{background:#457b9d}.av6{background:#a8dadc}.av7{background:#6d6875}
@media(max-width:520px){.card{width:66px;height:96px}.table-surface{width:min(310px,85vw);height:min(190px,50vw)}.pile-card{width:62px;height:90px}.op-avatar{width:38px;height:38px}.other-player{min-width:70px;padding:.35rem .5rem}.op-name{max-width:72px}.op-mini-card{width:8px;height:12px}}
@media(max-width:900px) and (min-width:521px){
  .table-surface{width:min(460px,58vw);height:min(275px,36vw)}
  .op-avatar{width:44px;height:44px}
  .shared-log-wrap{width:min(280px,36vw)}
  .card{width:72px;height:106px}
  .card .c-suit{font-size:1.6rem}
  .card .c-tl,.card .c-br{font-size:.7rem}
  .pile-card{width:66px;height:96px}
}
@media(max-height:750px) and (min-width:521px){
  .table-surface{width:min(480px,62vw);height:min(285px,36vh)}
  .game-header-hf{padding:.4rem 1rem}
  .player-area-hf{padding:.25rem .8rem .4rem}
  .player-info-bar-hf{margin-bottom:.1rem}
  .hand{gap:4px;padding:.1rem .3rem 0}
  .card{width:70px;height:102px}
  .card .c-suit{font-size:1.5rem}
  .card:hover:not(.disabled){transform:translateY(-9px)}
  .card.selected{transform:translateY(-13px)}
  .actions-hf{padding:.1rem 0}
  .shared-log-wrap.log-open{height:min(160px,18vh)}
}
@media(max-height:680px){
  .table-surface{width:min(440px,62vw);height:min(260px,34vh)}
  .card{width:62px;height:90px}
  .card .c-suit{font-size:1.3rem}
  .card .c-tl,.card .c-br{font-size:.62rem}
  .card:hover:not(.disabled){transform:translateY(-7px)}
  .card.selected{transform:translateY(-10px)}
  .game-header-hf{padding:.3rem .8rem}
  .player-area-hf{padding:.2rem .8rem .3rem}
  .hand{gap:3px}
  .op-avatar{width:36px;height:36px}
  .other-player{min-width:68px;padding:.3rem .5rem}
  .op-name{max-width:76px;font-size:.65rem}
  .op-mini-card{width:8px;height:11px}
  .shared-log-wrap.log-open{height:min(140px,16vh)}
}
@media(max-height:680px){.player-area-hf{padding:.25rem 1rem .4rem}.player-area-hf .hand{margin-top:.2rem}.op-avatar{width:36px;height:36px}.op-mini-card{width:8px;height:11px}}

.rules-btn{position:fixed;bottom:1rem;right:1rem;width:clamp(54px,4vw,80px);height:auto;border-radius:0;
  background:none;border:none;cursor:pointer;z-index:300;padding:0;
  display:flex;align-items:flex-end;justify-content:center;
  transition:all .2s ease;opacity:.58;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.rules-btn.rules-btn-lg{width:clamp(70px,6vw,110px);bottom:1.3rem;right:1.3rem}
.rules-btn img{width:100%;height:auto;display:block}
.rules-btn:hover{opacity:1;transform:scale(1.08);filter:drop-shadow(0 3px 14px rgba(201,168,76,.4))}
.rules-modal-overlay{position:fixed;inset:0;background:rgba(60,45,30,.55);backdrop-filter:blur(6px);
  z-index:600;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(12px,2vh,2rem) clamp(10px,2vw,1.5rem);overflow-y:auto}
.rules-modal-overlay.active{display:flex}
.rules-modal-overlay .deck{margin:0 auto}
.rules-modal-overlay .tile{min-height:auto}
.rules-modal-overlay .deck{
  width:100%;
  max-width:min(600px,94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
}.rules-modal-overlay .tile-wrap{
  position:relative;
  width:100%;
  perspective:1200px;
}.rules-modal-overlay .tile{
  position:relative;
  width:100%;
  background:var(--hf-card);
  border:1px solid var(--hf-border-soft);
  border-radius:clamp(16px,2vw,24px);
  padding:clamp(1.4rem,3vh,2.4rem) clamp(1.2rem,3vw,2.2rem) clamp(1.2rem,2.5vh,2rem);
  box-shadow:0 30px 70px rgba(60,40,20,.3);
  overflow:hidden;
  display:none;
  animation:fadeSlide .35s ease;
  min-height:0;
}.rules-modal-overlay .tile.active{display:block}.rules-modal-overlay @keyframes fadeSlide{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.tile::before{content:none}
.rules-modal-overlay .eyebrow{
  font-size:.7rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--hf-tan);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.1rem;
  position:relative;
  z-index:1;
}.rules-modal-overlay .eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--hf-border), transparent);
}.rules-modal-overlay h1{
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:clamp(1.3rem,2.5vw,1.9rem);
  text-align:center;
  color:var(--hf-ink);
  margin-bottom:1.5rem;
  position:relative;
  z-index:1;
}.rules-modal-overlay /* ---- Tuile 1 specific ---- */
.cards-row{
  display:flex;
  justify-content:center;
  margin-bottom:1.5rem;
  position:relative;
  height:78px;
}.rules-modal-overlay .mini-card{
  width:48px;height:68px;
  background:#fffdf9;
  border:1.5px solid var(--hf-border);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:1.4rem;
  position:absolute;
  box-shadow:2px 6px 16px rgba(60,40,20,.18);
}.rules-modal-overlay .mini-card:nth-child(1){transform:rotate(-16deg) translate(-58px,6px);color:var(--hf-ink)}.rules-modal-overlay .mini-card:nth-child(2){transform:rotate(-5deg) translate(-19px,-2px);color:var(--hf-coral)}.rules-modal-overlay .mini-card:nth-child(3){transform:rotate(5deg) translate(19px,-2px);color:var(--hf-ink)}.rules-modal-overlay .mini-card:nth-child(4){transform:rotate(16deg) translate(58px,6px);color:var(--hf-coral)}.rules-modal-overlay .fact{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:clamp(.5rem,1.1vh,.85rem) 0;
  border-bottom:1px solid var(--hf-border-soft);
  position:relative;z-index:1;
}.rules-modal-overlay .fact:last-of-type{border-bottom:none}.rules-modal-overlay .fact-icon{
  width:36px;height:36px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--hf-violet-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}.rules-modal-overlay .fact-text{
  font-size:clamp(.8rem,1.2vw,.96rem);
  font-weight:600;
  color:var(--hf-ink);
  line-height:1.5;
  padding-top:.1rem;
}.rules-modal-overlay .fact-text b{color:var(--hf-coral);font-weight:700}.rules-modal-overlay .goal-banner{
  margin:clamp(.7rem,1.4vh,1.4rem) 0 clamp(.8rem,1.5vh,1.6rem);
  background:var(--hf-coral-soft);
  border:1px solid #f3cbb8;
  border-radius:16px;
  padding:clamp(.7rem,1.3vh,1.1rem) 1.2rem;
  text-align:center;
  position:relative;z-index:1;
}.rules-modal-overlay .goal-label{
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--hf-coral);
  margin-bottom:.4rem;
}.rules-modal-overlay .goal-text{
  font-family:Baloo 2,sans-serif;
  font-size:clamp(.9rem,1.5vw,1.15rem);
  font-weight:700;
  color:var(--hf-ink);
}.rules-modal-overlay .goal-text b{color:var(--hf-coral)}.rules-modal-overlay .roles-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.5rem,.9vw,.9rem);
  margin-top:.3rem;
  position:relative;z-index:1;
}.rules-modal-overlay .role-pill{
  flex:1;
  text-align:center;
  padding:clamp(.55rem,1.2vh,.9rem) .5rem;
  border-radius:14px;
  font-size:clamp(.68rem,1vw,.78rem);
  font-weight:700;
}.rules-modal-overlay .role-pill.president{
  background:var(--hf-gold-soft);
  border:1px solid #f0d9a3;
  color:#a9762e;
}.rules-modal-overlay .role-pill.trou{
  background:var(--hf-coral-soft);
  border:1px solid #f3cbb8;
  color:#c75a4a;
}.rules-modal-overlay .role-pill .emoji{display:block;font-size:1.4rem;margin-bottom:.3rem}.rules-modal-overlay .roles-arrow{color:var(--hf-ink-mute);font-size:1.1rem;opacity:.7}.rules-modal-overlay .footer-note{
  text-align:center;
  margin-top:1.5rem;
  font-size:.8rem;
  color:var(--hf-ink-mute);
  font-weight:600;
  font-style:italic;
  position:relative;z-index:1;
}.rules-modal-overlay /* ---- Tuile 2 specific (roles table) ---- */
.role-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:16px;
  padding:.85rem 1.1rem;
  margin-bottom:.7rem;
  position:relative;z-index:1;
}.rules-modal-overlay .role-card.highlight-gold{border-color:#f0d9a3;background:var(--hf-gold-soft)}.rules-modal-overlay .role-card.highlight-red{border-color:#f3cbb8;background:var(--hf-coral-soft)}.rules-modal-overlay .role-rank{
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:.82rem;
  color:var(--hf-ink-mute);
  width:32px;
  flex-shrink:0;
  text-align:center;
}.rules-modal-overlay .role-emoji{font-size:1.6rem;width:38px;flex-shrink:0;text-align:center}.rules-modal-overlay .role-info{flex:1}.rules-modal-overlay .role-name{font-weight:700;font-size:.95rem;color:var(--hf-ink);margin-bottom:.15rem}.rules-modal-overlay .role-card.highlight-gold .role-name{color:#a9762e}.rules-modal-overlay .role-card.highlight-red .role-name{color:#c75a4a}.rules-modal-overlay .role-perk{font-size:.82rem;color:var(--hf-ink-soft);font-weight:600;line-height:1.4}.rules-modal-overlay .tip-box{
  margin-top:1.3rem;
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  background:var(--hf-gold-soft);
  border-left:3px solid var(--hf-gold);
  border-radius:10px;
  padding:.85rem 1rem;
  font-size:.85rem;
  font-weight:600;
  line-height:1.5;
  color:var(--hf-ink);
  position:relative;z-index:1;
}.rules-modal-overlay .tip-box .tip-emoji{font-size:1.1rem;flex-shrink:0}.rules-modal-overlay /* ---- Navigation ---- */
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:560px;
  margin-top:1.4rem;
  gap:1rem;
}.rules-modal-overlay .nav-btn{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:clamp(.55rem,1.2vh,.8rem) clamp(.9rem,1.8vw,1.4rem);
  border-radius:14px;
  border:2px solid var(--hf-border);
  background:var(--hf-card);
  color:var(--hf-ink);
  font-family:Baloo 2,sans-serif;
  font-size:clamp(.78rem,1.1vw,.9rem);
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
}.rules-modal-overlay .nav-btn:hover:not(:disabled){border-color:var(--hf-sage);color:var(--hf-sage)}.rules-modal-overlay .nav-btn:disabled{opacity:.35;cursor:not-allowed}.rules-modal-overlay .nav-btn.next{
  background:var(--hf-coral);
  color:#fff;
  border:none;
  box-shadow:0 10px 22px rgba(239,111,83,.32);
}.rules-modal-overlay .nav-btn.next:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.rules-modal-overlay .dots{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:center;
  max-width:160px;
}.rules-modal-overlay .dot{
  width:clamp(5px,.8vw,7px);height:clamp(5px,.8vw,7px);
  border-radius:50%;
  background:var(--hf-border);
  transition:all .25s;
  flex-shrink:0;
  cursor:pointer;
}.rules-modal-overlay .dot:hover{background:var(--hf-coral)}.rules-modal-overlay .dot.active{background:var(--hf-coral);width:20px;border-radius:4px}.rules-modal-overlay .close-btn{
  margin-top:1.1rem;
  background:transparent;
  border:none;
  color:var(--hf-ink-mute);
  font-family:'Nunito',sans-serif;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:color .2s;
  padding:.4rem .6rem;
}.rules-modal-overlay .close-btn:hover{color:var(--hf-coral)}.rules-modal-overlay /* ---- Tuile 3 : valeur des cartes ---- */
.value-scale{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
  position:relative;z-index:1;
}.rules-modal-overlay .value-chip{
  width:34px;height:46px;
  background:var(--card-bg);
  border:1.5px solid var(--card-border);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:var(--hf-ink);
}.rules-modal-overlay .value-chip.strong{
  border-color:var(--hf-coral);
  box-shadow:0 0 0 2px rgba(239,111,83,.25);
  color:var(--hf-coral);
  transform:scale(1.08);
}.rules-modal-overlay .value-arrow{color:var(--hf-ink-mute);font-size:.85rem;opacity:.6}.rules-modal-overlay .info-line{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:.75rem 0;
  position:relative;z-index:1;
}.rules-modal-overlay .info-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--hf-coral);
  margin-top:.5rem;
  flex-shrink:0;
}.rules-modal-overlay .info-line p{font-size:.92rem;font-weight:600;color:var(--hf-ink);line-height:1.55}.rules-modal-overlay .info-line p b{color:var(--hf-coral)}.rules-modal-overlay .warn-box{
  margin-top:1.3rem;
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  background:var(--hf-coral-soft);
  border-left:3px solid var(--hf-coral);
  border-radius:10px;
  padding:.85rem 1rem;
  font-size:.85rem;
  font-weight:600;
  line-height:1.5;
  color:var(--hf-ink);
  position:relative;z-index:1;
}.rules-modal-overlay .warn-box .warn-emoji{font-size:1.1rem;flex-shrink:0}.rules-modal-overlay /* ---- Tuile 4 : déroulement ---- */
.step-card{
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:16px;
  padding:1rem 1.1rem;
  margin-bottom:.8rem;
  position:relative;z-index:1;
}.rules-modal-overlay .step-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--hf-coral);
  font-weight:800;
  margin-bottom:.5rem;
}.rules-modal-overlay .step-card p{font-size:.92rem;font-weight:600;color:var(--hf-ink);line-height:1.55}.rules-modal-overlay .step-card p b{color:var(--hf-coral)}.rules-modal-overlay .choice-row{
  display:flex;
  gap:.7rem;
  margin-top:.4rem;
}.rules-modal-overlay .choice-card{
  flex:1;
  background:var(--hf-card);
  border:1.5px solid var(--hf-border);
  border-radius:14px;
  padding:.9rem .9rem;
  position:relative;z-index:1;
}.rules-modal-overlay .choice-card.play{border-color:#f0d9a3;background:var(--hf-gold-soft)}.rules-modal-overlay .choice-card.pass{border-color:var(--hf-border)}.rules-modal-overlay .choice-icon{font-size:1.3rem;margin-bottom:.4rem}.rules-modal-overlay .choice-title{font-weight:700;font-size:.88rem;margin-bottom:.3rem;color:var(--hf-ink)}.rules-modal-overlay .choice-card.play .choice-title{color:#a9762e}.rules-modal-overlay .choice-desc{font-size:.78rem;font-weight:600;color:var(--hf-ink-soft);line-height:1.45}.rules-modal-overlay /* ---- Tuile 5 : combinaisons ---- */
.combo-grid{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  position:relative;z-index:1;
}.rules-modal-overlay .combo-row{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:16px;
  padding:.75rem 1rem;
}.rules-modal-overlay .combo-cards{
  display:flex;
  gap:.25rem;
  flex-shrink:0;
  width:108px;
}.rules-modal-overlay .combo-card-mini{
  width:26px;height:36px;
  background:#fffdf9;
  border:1px solid var(--hf-border);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:.68rem;
  color:var(--hf-ink);
}.rules-modal-overlay .combo-info{flex:1}.rules-modal-overlay .combo-name{font-weight:700;font-size:.88rem;color:var(--hf-ink);margin-bottom:.15rem}.rules-modal-overlay .combo-desc{font-size:.76rem;font-weight:600;color:var(--hf-ink-soft);line-height:1.4}.rules-modal-overlay /* ---- Tuile 6 : révolution ---- */
.rev-block{
  background:var(--hf-bg2);
  border-radius:16px;
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
  position:relative;z-index:1;
  border:1px solid var(--hf-border-soft);
}.rules-modal-overlay .rev-block.revolution{border-color:#f3cbb8;background:var(--hf-coral-soft)}.rules-modal-overlay .rev-block.contre{border-color:#a8c8e8;background:#e8f0fa}.rules-modal-overlay .rev-title{
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--hf-ink);
  margin-bottom:.6rem;
  display:flex;align-items:center;gap:.5rem;
}.rules-modal-overlay .rev-block.revolution .rev-title{color:#c75a4a}.rules-modal-overlay .rev-block.contre .rev-title{color:#4a7ab8}.rules-modal-overlay .rev-block p{font-size:.88rem;font-weight:600;line-height:1.55;margin-bottom:.5rem;color:var(--hf-ink)}.rules-modal-overlay .rev-order{
  font-family:Baloo 2,sans-serif;
  font-weight:700;
  font-size:.85rem;
  text-align:center;
  background:rgba(0,0,0,.06);
  border-radius:10px;
  padding:.55rem;
  letter-spacing:.5px;
  color:var(--hf-ink);
}.rules-modal-overlay /* ---- Tuile 7 : règles spéciales ---- */
.special-card{
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:16px;
  padding:1rem 1.1rem;
  margin-bottom:.8rem;
  position:relative;z-index:1;
}.rules-modal-overlay .special-title{
  display:flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;
  color:var(--hf-coral);
  margin-bottom:.5rem;
}.rules-modal-overlay .special-card p{font-size:.86rem;font-weight:600;line-height:1.5;color:var(--hf-ink)}.rules-modal-overlay .special-card p b{color:var(--hf-coral)}.rules-modal-overlay .mini-flow{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-top:.6rem;
}.rules-modal-overlay .mini-flow-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--hf-ink-soft);
  padding:.35rem .6rem;
  background:rgba(0,0,0,.05);
  border-radius:8px;
}.rules-modal-overlay .mini-flow-item b{color:var(--hf-ink)}.rules-modal-overlay /* ---- Tuile 8 : échanges ---- */
.exchange-row{
  display:flex;
  align-items:center;
  gap:.8rem;
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:16px;
  padding:.85rem 1rem;
  margin-bottom:.7rem;
  position:relative;z-index:1;
}.rules-modal-overlay .exchange-num{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--hf-gold-soft);
  border:1px solid #f0d9a3;
  color:#a9762e;
  font-weight:700;
  font-size:.78rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}.rules-modal-overlay .exchange-flow{
  flex:1;
  font-size:.85rem;
  font-weight:600;
  color:var(--hf-ink);
  line-height:1.5;
}.rules-modal-overlay .exchange-flow b{color:#a9762e}.rules-modal-overlay .exchange-arrow{color:var(--hf-coral);font-size:1rem}.rules-modal-overlay /* ---- Tuile 9 : comment gagner ---- */
.win-ladder{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-bottom:1.4rem;
  position:relative;z-index:1;
}.rules-modal-overlay .ladder-step{
  display:flex;
  align-items:center;
  gap:.8rem;
  background:var(--hf-bg2);
  border:1px solid var(--hf-border-soft);
  border-radius:14px;
  padding:.65rem .9rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--hf-ink);
}.rules-modal-overlay .ladder-step .arrow-ic{color:var(--hf-coral);font-size:1rem}.rules-modal-overlay .win-crown{
  text-align:center;
  font-size:2.2rem;
  margin:1rem 0 .6rem;
  position:relative;z-index:1;
}.rules-modal-overlay .win-final{
  text-align:center;
  font-family:Baloo 2,sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--hf-ink);
  position:relative;z-index:1;
  line-height:1.5;
}


/* ── Thème & composants ── */

:root{--felt:#1a3a2a;--felt-dark:#0f1f17;--cream:#f5e6c8;--gold:#c9a84c;--gold-light:#e8c96a;--red:#b91c1c;--red-light:#ef4444;--muted:#8aab96;--card-bg:#fdfaf4;--card-border:#e0cda0;}
/* ── Thème "Humour Familles" (écrans hors-jeu : profil, salon, connexion, règles) ── */
:root{
  --hf-bg1:#fff5e9;--hf-bg2:#faf0e0;--hf-bg3:#f6ead5;
  --hf-ink:#2c2622;--hf-ink-soft:#7a6e60;--hf-ink-mute:#a98e72;
  --hf-coral:#ef6f53;--hf-coral-soft:#fdeede;
  --hf-sage:#3f9c8f;--hf-sage-soft:#eaf6f3;
  --hf-gold:#e7a93c;--hf-gold-soft:#fbf1dd;--hf-tan:#b98a4e;
  --hf-violet:#8a5a7a;--hf-violet-soft:#ecebf0;
  --hf-card:#fffdf9;--hf-border:#ece0cc;--hf-border-soft:#f0e0c8;
  --hf-shadow:rgba(150,100,50,.18);--hf-shadow-soft:rgba(150,100,50,.1);
}
.hf-screen{font-family:'Nunito',system-ui,sans-serif;color:var(--hf-ink);background:linear-gradient(180deg,var(--hf-bg1) 0%,var(--hf-bg2) 45%,var(--hf-bg3) 100%);position:relative;overflow-y:auto !important;height:100vh}
.hf-screen *{box-sizing:border-box}
.hf-suit-deco{position:absolute;z-index:0;opacity:.1;pointer-events:none;animation:hfFloatSuit 7s ease-in-out infinite}
@keyframes hfFloatSuit{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-12px) rotate(var(--rot,0deg))}}
@keyframes hfRiseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hfFadeIn{from{opacity:0}to{opacity:1}}
.hf-title{font-family:Baloo 2,sans-serif;font-weight:800;color:var(--hf-ink)}
.hf-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.04em}
.hf-card{background:var(--hf-card);border:1.5px solid var(--hf-border-soft);border-radius:20px;box-shadow:0 14px 30px var(--hf-shadow-soft)}
.hf-btn{font-family:Baloo 2,sans-serif;font-weight:700;border-radius:16px;cursor:pointer;border:none;transition:filter .15s,transform .15s,border-color .15s,color .15s}
.hf-btn:hover{filter:brightness(1.06)}
.hf-btn-primary{background:var(--hf-coral);color:#fff;box-shadow:0 12px 26px rgba(239,111,83,.36)}
.hf-btn-ghost{background:var(--hf-card);border:2px solid var(--hf-border);color:var(--hf-ink)}
.hf-btn-ghost:hover{border-color:var(--hf-sage);color:var(--hf-sage)}
.hf-btn-dark{background:var(--hf-ink);color:var(--hf-bg1)}
.hf-input{width:100%;padding:13px 16px;border-radius:14px;border:2px solid var(--hf-border);background:#fff;color:var(--hf-ink);font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;outline:none;transition:border-color .15s}
.auth-split-card{display:flex;width:min(1180px,94vw);min-height:min(720px,88vh);max-height:92vh;background:var(--hf-card);border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(60,40,20,.22)}
.auth-split-left{flex:0 0 46%;padding:clamp(32px,4vw,48px);display:flex;flex-direction:column;color:#fff;position:relative;overflow:hidden}
.auth-split-left .hf-suit-deco{position:absolute}
.auth-split-logo{display:flex;align-items:center;gap:14px;cursor:pointer;margin-bottom:clamp(28px,6vh,64px)}
.auth-split-logo-icon{width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.auth-split-logo .hf-title{font-size:23px;color:#fff;line-height:1.1}
.auth-split-logo-sub{font-size:13px;font-weight:700;color:rgba(255,255,255,.78)}
.auth-split-bubble{display:inline-block;align-self:flex-start;max-width:88%;background:#fff;color:var(--hf-ink);border-radius:18px;padding:16px 21px;font-size:16px;font-weight:700;line-height:1.45;margin-bottom:18px;box-shadow:0 8px 18px rgba(0,0,0,.12);position:relative;z-index:1}
.auth-split-illustration{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;position:relative;z-index:1}
.auth-split-illustration img{max-width:100%;max-height:100%;object-fit:contain}
.auth-split-footer{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:rgba(255,255,255,.92);margin-top:14px}
.auth-split-dots{display:flex;gap:5px}
.auth-split-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.auth-split-dots span:first-child{background:#fff}
.auth-split-right{flex:1;padding:clamp(36px,4.5vw,56px) clamp(36px,4.2vw,54px);overflow-y:auto;display:flex;flex-direction:column;justify-content:center}
.auth-split-right .hf-label{font-size:13.5px;margin-bottom:8px}
.auth-split-right .hf-input{padding:15px 18px;font-size:16px;border-radius:15px}
.auth-split-right .hf-btn-primary{font-size:16px}
.auth-split-right h2{font-family:Baloo 2,sans-serif;font-weight:700;color:var(--hf-ink);font-size:clamp(28px,3.2vw,36px);margin-bottom:8px}
.auth-split-sub{font-size:15px;color:var(--hf-ink-soft);font-weight:600;margin-bottom:28px}
.auth-split-sep{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--hf-ink-mute);font-size:13px;font-weight:700}
.auth-split-sep::before,.auth-split-sep::after{content:'';flex:1;height:1px;background:var(--hf-border)}
.auth-pwd-rules-inline{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px;margin-bottom:4px}
.auth-pwd-rule{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--hf-ink-mute)}
.auth-pwd-rule .dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--hf-ink-mute);flex-shrink:0}
.auth-pwd-rule.ok{color:var(--hf-sage)}
.auth-pwd-rule.ok .dot{background:var(--hf-sage);border-color:var(--hf-sage)}
.forgot-link{display:block;text-align:right;font-size:13px;font-weight:700;color:var(--hf-tan);text-decoration:none;cursor:pointer;margin-top:10px;margin-bottom:22px}

/* ── Profile page ── */
.profile-grid{display:grid;grid-template-columns:minmax(min(300px,38vw),min(400px,36vw)) 1fr;gap:clamp(14px,2vw,24px);align-items:start}
@media (max-width:900px){.profile-grid{grid-template-columns:1fr}}
@media (max-height:700px){
  .profile-player-card .profile-card-banner{height:70px}
  .profile-avatar-circle{width:72px;height:72px}
  .profile-avatar-wrap{margin-top:-36px;padding-bottom:16px}
  .profile-pseudo-big{font-size:17px;margin-top:8px}
  .profile-member-since{margin-bottom:10px}
  .profile-stat-value{font-size:19px}
  .profile-titles-card,.profile-side-card,.profile-badges-card{padding:16px 18px}
  .profile-badge-grid{gap:10px}
  .profile-badge-icon{width:46px;height:46px;font-size:20px;border-radius:12px}
}
.profile-player-card{background:var(--hf-card);border-radius:22px;overflow:hidden;box-shadow:0 16px 36px var(--hf-shadow-soft);margin-bottom:20px}
.profile-card-banner{height:96px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:16px}
.profile-role-badge{background:rgba(255,255,255,.92);color:var(--hf-ink);font-family:Baloo 2,sans-serif;font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;display:flex;align-items:center;gap:6px}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;padding:0 24px 24px;margin-top:-46px}
.profile-avatar-circle{position:relative;width:92px;height:92px;border-radius:50%;border:5px solid var(--hf-card);box-shadow:0 8px 20px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}
.profile-avatar-camera{position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;background:var(--hf-card);border:2px solid var(--hf-bg1);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.profile-pseudo-big{font-family:Baloo 2,sans-serif;font-weight:700;font-size:21px;color:var(--hf-ink);margin-top:12px}
.profile-member-since{font-size:12.5px;color:var(--hf-ink-mute);font-weight:600;margin-top:2px;margin-bottom:18px}
.profile-stats-row{display:flex;width:100%;border-top:1.5px solid var(--hf-border-soft)}
.profile-stat{flex:1;text-align:center;padding:16px 4px;position:relative}
.profile-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:18px;bottom:18px;width:1px;background:var(--hf-border-soft)}
.profile-stat-value{font-family:Baloo 2,sans-serif;font-weight:700;font-size:24px}
.profile-stat-label{font-size:11.5px;color:var(--hf-ink-mute);font-weight:700;margin-top:2px}
.profile-titles-card{background:var(--hf-card);border-radius:22px;padding:22px 24px;box-shadow:0 16px 36px var(--hf-shadow-soft)}
.profile-titles-header{display:flex;align-items:baseline;gap:9px;margin-bottom:16px}
.profile-titles-header .hf-title{font-size:18px}
.profile-titles-header span{font-size:12.5px;font-weight:700;color:var(--hf-ink-mute)}
.profile-title-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.profile-title-row:last-child{margin-bottom:0}
.profile-title-emoji{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.profile-title-body{flex:1;min-width:0}
.profile-title-top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:5px}
.profile-title-bar-bg{height:7px;border-radius:4px;background:var(--hf-border-soft);overflow:hidden}
.profile-title-bar-fill{height:100%;border-radius:4px}
.profile-side-card{background:var(--hf-card);border-radius:22px;padding:24px 26px;box-shadow:0 16px 36px var(--hf-shadow-soft);margin-bottom:20px}
.profile-side-card h3{font-family:Baloo 2,sans-serif;font-weight:700;font-size:18px;color:var(--hf-ink);margin-bottom:4px}
.profile-side-card .desc{font-size:13px;color:var(--hf-ink-soft);font-weight:600;margin-bottom:16px}
.profile-pseudo-row{display:flex;gap:10px}
.profile-section-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;cursor:pointer;
  font-family:Baloo 2,sans-serif;font-weight:700;font-size:18px;
  color:var(--hf-ink);padding:0;margin-bottom:0;
  user-select:none;
}
.profile-section-toggle .toggle-arrow{
  font-size:12px;color:var(--hf-ink-mute);transition:transform .22s;
}
.profile-section-toggle.open .toggle-arrow{transform:rotate(180deg)}
.profile-section-body{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s;max-height:0;opacity:0}
.profile-section-body.open{max-height:600px;opacity:1}
/* Badges */
.profile-badges-card{background:var(--hf-card);border-radius:22px;padding:22px 24px;box-shadow:0 16px 36px var(--hf-shadow-soft);margin-bottom:20px;overflow:visible}
.profile-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:16px;margin-top:12px;overflow:visible}
.profile-badge-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default;overflow:visible}
.profile-badge-icon{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;border:2.5px solid transparent;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.profile-badge-icon:hover{transform:scale(1.08)}
.profile-badge-icon.locked{filter:grayscale(1);opacity:.35}
.profile-badge-icon.unlocked{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.profile-badge-label{font-size:.6rem;font-weight:700;color:var(--hf-ink-mute);text-align:center;line-height:1.2;max-width:68px}
.profile-badge-item{position:relative}
.profile-badge-tooltip{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%);
  background:#1a1208;
  color:#f5e8cc;
  border-radius:10px;
  padding:9px 13px;
  font-size:.72rem;
  font-weight:600;
  line-height:1.45;
  width:180px;
  text-align:center;
  z-index:200;
  pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.profile-badge-tooltip .tt-title{
  font-weight:800;font-size:.78rem;
  color:#e8c96a;margin-bottom:4px;display:block;
}
.profile-badge-tooltip .tt-phrase{
  font-style:italic;color:#c8b890;font-size:.68rem;
  display:block;margin-top:3px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px;
}
.profile-badge-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#1a1208;
}
.profile-badge-item:hover .profile-badge-tooltip{display:block}
.profile-badge-progress{width:56px;height:4px;background:var(--hf-border-soft);border-radius:2px;overflow:hidden;margin-top:2px}
.profile-badge-progress-fill{height:100%;border-radius:2px;transition:width .4s}
.profile-pseudo-row .hf-input{flex:1}
.profile-danger-card{background:var(--hf-coral-soft);border-radius:22px;padding:22px 26px;box-shadow:0 16px 36px var(--hf-shadow-soft)}
.profile-danger-title{display:flex;align-items:center;gap:7px;font-family:Baloo 2,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;color:#c75a4a;margin-bottom:10px}
.profile-danger-card p{font-size:13px;color:#8a5c52;font-weight:600;line-height:1.5;margin-bottom:16px}
.btn-danger-outline{background:transparent;border:2px solid #e8a89e;color:#d05f4d;font-family:Baloo 2,sans-serif;font-weight:700;padding:11px 20px;border-radius:14px;cursor:pointer;font-size:14px}
.btn-danger-outline:hover{background:#fff;border-color:#d05f4d}

/* ── Friends screen (white left, purple right) ── */
.friends-split-left{flex:0 0 54%;padding:clamp(28px,3.2vw,40px);overflow-y:auto;display:flex;flex-direction:column}
.friends-split-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.friends-split-title-row{display:flex;align-items:center;gap:13px}
.friends-split-icon{width:46px;height:46px;border-radius:14px;background:var(--hf-violet-soft);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.friends-split-title-row .hf-title{font-size:21px}
.friends-split-subtitle{font-size:13px;font-weight:700;color:var(--hf-ink-mute)}
.friends-search-input-wrap{position:relative;margin-bottom:22px}
.friends-search-input-wrap input{padding-left:42px}
.friends-search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.6}
.friends-section-label{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--hf-tan);margin-bottom:10px;margin-top:4px}
.friends-row-card{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:15px;margin-bottom:9px}
.friends-row-card.pending{background:var(--hf-gold-soft)}
.friends-row-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:Baloo 2,sans-serif;color:#fff;font-size:15px;flex-shrink:0;position:relative;overflow:hidden}
.friends-row-presence{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--hf-card)}
.friends-row-name{font-weight:700;font-size:14.5px;color:var(--hf-ink)}
.friends-row-status{font-size:12px;font-weight:700;color:var(--hf-ink-mute)}
.friends-row-status.online{color:var(--hf-sage)}
.friends-row-status.in-game{color:var(--hf-coral)}
.friends-btn-accept{background:var(--hf-sage);color:#fff;font-family:Baloo 2,sans-serif;font-weight:700;font-size:13px;padding:9px 16px;border-radius:11px;border:none;cursor:pointer}
.friends-btn-decline{width:34px;height:34px;border-radius:11px;background:var(--hf-card);border:1.5px solid var(--hf-border);cursor:pointer;font-size:14px;color:var(--hf-ink-mute)}
.friends-btn-invite{background:var(--hf-coral);color:#fff;font-family:Baloo 2,sans-serif;font-weight:700;font-size:13px;padding:9px 18px;border-radius:11px;border:none;cursor:pointer}
.friends-btn-invite:disabled{background:var(--hf-border);color:var(--hf-ink-mute);cursor:default}
.friends-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.friends-empty-state img{max-width:240px;margin-bottom:18px;opacity:.9}
.friends-empty-state h3{font-family:Baloo 2,sans-serif;font-weight:700;font-size:17px;color:var(--hf-ink);margin-bottom:8px}
.friends-empty-state p{font-size:13.5px;color:var(--hf-ink-soft);font-weight:600;line-height:1.5;max-width:340px}
.friends-split-right{flex:1;padding:clamp(28px,3.2vw,40px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;position:relative;overflow:hidden;background:linear-gradient(160deg,#9a6a8c,#7d4f72)}
.friends-split-right .hf-suit-deco{position:absolute}
.friends-salon-badge{background:rgba(255,255,255,.16);font-family:Baloo 2,sans-serif;font-weight:700;font-size:12px;padding:7px 16px;border-radius:999px;margin-bottom:20px;letter-spacing:.03em}
.friends-split-right img{max-width:78%;max-height:240px;object-fit:contain;margin-bottom:20px;position:relative;z-index:1}
.friends-split-right h2{font-family:Baloo 2,sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,28px);line-height:1.25;margin-bottom:12px;position:relative;z-index:1}
.friends-split-right p{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.55;max-width:380px;position:relative;z-index:1}
@media (max-width:780px){.auth-split-card{flex-direction:column;width:94vw;max-height:92vh}.auth-split-left{flex:0 0 auto;max-height:42vh}.auth-split-right{overflow-y:auto}}

.hf-input:focus{border-color:var(--hf-coral)}
.hf-input::placeholder{color:#cdbfa4;font-weight:600}
.hf-label{font-size:12.5px;font-weight:800;color:var(--hf-ink-soft);margin-bottom:7px;display:block}
.avatar-upload-btn-hf{font-size:13px;font-weight:800;color:var(--hf-coral);cursor:pointer}
.avatar-upload-btn-hf:hover{text-decoration:underline}