*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#080810;
  --surface:#0d0d18;
  --surface2:#13131f;
  --surface3:#1a1a28;
  --border:rgba(255,255,255,0.06);
  --border-hi:rgba(255,255,255,0.14);
  --text:#f0f0f5;
  --muted:#52526a;
  --accent:#f59e0b;
  --p1:#4f8ef7;
  --p2:#e060b0;
  --poison:#f04040;
  --safe:#20c060;
  --cell:clamp(34px,5vw,52px);
  --gap:clamp(4px,0.6vw,7px);
  --radius:10px;
  --font-display:'Syne',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html,body{
  height:100%;min-height:100dvh;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
}

/* ── NOISE OVERLAY ── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.025;pointer-events:none;z-index:0;
}

/* ── SCREENS ── */
.screen{display:none;width:100%;height:100dvh;overflow:auto;position:relative;z-index:1}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ── SETTINGS BTN ── */
.settings-btn{
  position:absolute;top:1.2rem;right:1.2rem;
  background:none;border:1px solid var(--border);
  color:var(--muted);font-size:1.1rem;width:36px;height:36px;
  border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s;z-index:10;
}
.settings-btn:hover{color:var(--text);border-color:var(--border-hi)}

/* ── HOME ── */
.home-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:1.1rem;text-align:center;padding:2rem;width:100%;max-width:360px;
}
.home-eyebrow{
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-family:var(--font-mono);
}
.home-title{
  font-size:clamp(3.8rem,13vw,6.5rem);font-weight:800;
  line-height:.88;letter-spacing:-.02em;
  color:var(--text);
}
.home-title span{
  background:linear-gradient(120deg,var(--accent),var(--poison));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.home-desc{color:var(--muted);font-size:.85rem;max-width:240px;line-height:1.6;font-weight:400}

/* ── TABS ── */
.home-tabs{
  display:flex;gap:2px;background:var(--surface2);
  border-radius:10px;padding:3px;border:1px solid var(--border);
  width:100%;
}
.htab{
  flex:1;padding:.42rem 0;border-radius:7px;border:none;
  background:transparent;color:var(--muted);
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:background .15s,color .15s;letter-spacing:.02em;
}
.htab.active{background:var(--surface3);color:var(--text)}

/* ── TAB PANELS ── */
.tab-panel{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:100%}

/* ── FIELDS ── */
.field{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-size:.95rem;font-family:var(--font-display);font-weight:600;
  padding:.65rem 1rem;width:100%;outline:none;
  transition:border-color .2s;
}
.field::placeholder{color:var(--muted);font-weight:400}
.field:focus{border-color:var(--accent)}
.field-center{text-align:center}
.field-code{
  font-family:var(--font-mono);font-size:1.35rem;font-weight:700;
  letter-spacing:.25em;color:var(--accent);text-align:center;
  border-color:rgba(245,158,11,.25);width:160px;
}
.field-code:focus{border-color:var(--accent)}

/* ── BUTTONS ── */
.btn-primary{
  padding:.75rem 2rem;
  background:var(--accent);
  border:none;border-radius:var(--radius);
  color:#000;font-size:.9rem;font-weight:800;
  font-family:var(--font-display);cursor:pointer;
  letter-spacing:.03em;
  transition:transform .15s,opacity .15s,background .2s;
}
.btn-primary:hover{transform:scale(1.03);opacity:.9}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.3;cursor:not-allowed;transform:none!important}
.btn-block{width:100%;border-radius:var(--radius)}
.btn-sm-p{padding:.65rem 1.25rem;font-size:.85rem}

.btn-outline{
  padding:.75rem 2rem;background:transparent;
  border:1px solid var(--border-hi);border-radius:var(--radius);
  color:var(--text);font-size:.9rem;font-weight:700;
  font-family:var(--font-display);cursor:pointer;
  transition:transform .15s,border-color .2s;
}
.btn-outline:hover{transform:scale(1.03);border-color:var(--accent)}

.chip-btn{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:var(--font-display);font-size:.75rem;font-weight:600;
  padding:.35rem .75rem;border-radius:6px;cursor:pointer;
  transition:color .2s,border-color .2s;letter-spacing:.02em;
}
.chip-btn:hover{color:var(--text);border-color:var(--border-hi)}
.danger-chip{color:rgba(240,64,64,.6);border-color:rgba(240,64,64,.15)}
.danger-chip:hover{color:var(--poison);border-color:rgba(240,64,64,.4)}
.chip-lg{padding:.7rem 1.5rem;font-size:.85rem;border-radius:var(--radius)}

.icon-btn{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:color .2s,background .2s;
}
.icon-btn:hover{color:var(--text);background:var(--surface3)}

/* ── HOME BUTTONS ROW ── */
.home-btns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%}
.home-btns .btn-primary,.home-btns .btn-outline{flex:1;min-width:120px}
.join-row{display:flex;gap:.5rem;align-items:center;justify-content:center;width:100%}
.error-msg{color:var(--poison);font-size:.8rem;font-family:var(--font-mono)}

/* ── BROWSE ── */
.browse-header{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.1rem 0 .4rem;
}
.browse-hint{font-size:.7rem;color:var(--muted);font-family:var(--font-mono)}
.room-list{
  display:flex;flex-direction:column;gap:.4rem;width:100%;
  max-height:260px;overflow-y:auto;
}
.room-empty{
  text-align:center;color:var(--muted);font-size:.8rem;
  font-family:var(--font-mono);padding:1.5rem 0;
}
.room-card{
  display:flex;align-items:center;gap:.75rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.65rem .9rem;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.room-card:hover{border-color:var(--border-hi);background:var(--surface3)}
.room-card.full{opacity:.4;cursor:not-allowed}
.rc-code{
  font-family:var(--font-mono);font-size:.85rem;font-weight:700;
  color:var(--accent);letter-spacing:.12em;min-width:60px;
}
.rc-players{flex:1;display:flex;flex-direction:column;gap:1px}
.rc-pname{
  font-size:.75rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:.3rem;
}
.rc-pname::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--safe);flex-shrink:0;
}
.rc-pname.p2::before{background:var(--p2)}
.rc-pname.empty{color:var(--muted);font-weight:400}
.rc-pname.empty::before{background:var(--border-hi)}
.rc-badge{
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:4px;
}
.rc-badge.open{color:var(--safe);background:rgba(32,192,96,.1);border:1px solid rgba(32,192,96,.2)}
.rc-badge.playing{color:var(--accent);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.18)}
.rc-badge.full{color:var(--muted);background:transparent;border:1px solid var(--border)}

/* ── LOBBY ── */
.lobby-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:1.3rem;padding:2.5rem;text-align:center;
}
.eyebrow{
  font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.lobby-code{
  font-family:var(--font-mono);font-size:3rem;font-weight:700;
  letter-spacing:.35em;color:var(--accent);line-height:1;
}
.sub-text{font-size:.8rem;color:var(--muted)}
.lobby-players{display:flex;align-items:center;gap:1.5rem}
.lobby-slot{display:flex;align-items:center;gap:.5rem}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--border-hi);transition:background .4s}
.lp-dot.on{background:var(--safe)}
.lp-name{font-size:.9rem;font-weight:700}
.lp-name.muted{color:var(--muted);font-weight:400}
.vs-divider{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}

/* ── SETUP ── */
#s-setup{justify-content:flex-start;padding:1rem 1rem 2rem}
.setup-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;gap:.9rem;padding:1.2rem 1rem;}
.setup-header{text-align:center;padding-bottom:.2rem}
.setup-who{font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.section-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.accent-text{color:var(--accent)}

.emoji-picker{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.ep-btn{
  width:38px;height:38px;border-radius:7px;border:1.5px solid transparent;
  background:var(--surface2);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s,border-color .1s;
}
.ep-btn:hover{transform:scale(1.12)}
.ep-btn.selected{border-color:var(--accent);background:rgba(245,158,11,.1)}

.setup-grid{
  display:grid;grid-template-columns:repeat(6,var(--cell));
  gap:var(--gap);justify-content:center;
}
.setup-cell{
  width:var(--cell);height:var(--cell);border-radius:7px;
  border:1.5px solid var(--border);background:var(--surface2);
  font-size:clamp(.9rem,2vw,1.3rem);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s,border-color .15s,background .15s;
}
.setup-cell:hover{transform:scale(1.08);border-color:var(--border-hi)}
.setup-cell.is-poison{border-color:var(--poison);background:rgba(240,64,64,.12)}

/* ── WAITING ── */
.waiting-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;text-align:center;padding:2.5rem;
}
.pulse-ring{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--accent);
  animation:pulse-ring 1.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.85);opacity:1}
  70%{transform:scale(1.2);opacity:.2}
  100%{transform:scale(.85);opacity:1}
}
.waiting-title{font-size:1.4rem;font-weight:800;color:var(--safe);letter-spacing:-.01em}

/* ── GAME ── */
#s-game{justify-content:flex-start;padding:0;height:100dvh;overflow:hidden;flex:1;min-width:0}
.game-topbar{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0;
  gap:.75rem;
}
.round-tag{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  color:var(--muted);letter-spacing:.1em;min-width:28px;
}
.turn-tag{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;color:var(--accent);
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);
  border-radius:5px;padding:.22rem .6rem;
  transition:color .3s,background .3s,border-color .3s;
}
.turn-tag.my-turn{
  color:var(--safe);background:rgba(32,192,96,.1);
  border-color:rgba(32,192,96,.25);
}

.game-instruction{
  text-align:center;font-size:.9rem;font-weight:700;color:var(--text);
  padding:.85rem 1rem .25rem;letter-spacing:-.01em;
}
.target-label{
  text-align:center;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  padding-bottom:.4rem;
}

.game-grid{
  display:grid;grid-template-columns:repeat(6,var(--cell));
  gap:var(--gap);justify-content:center;
  padding:.4rem 1rem;flex:1;align-content:center;
  overflow:hidden;
}
.gcell{
  width:var(--cell);height:var(--cell);border-radius:7px;
  border:1.5px solid var(--border);background:var(--surface2);
  font-size:clamp(.9rem,2vw,1.3rem);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s,border-color .12s,background .12s;
}
.gcell:hover:not(:disabled){
  transform:translateY(-3px) scale(1.07);
  border-color:var(--border-hi);
  background:var(--surface3);
}
.gcell:active:not(:disabled){transform:scale(.95)}
.gcell.gcell-poison{
  background:rgba(240,64,64,.15);
  border-color:rgba(240,64,64,.5);cursor:default;
}
.gcell.gcell-done{opacity:.12;cursor:default}

/* STATUS BAR */
.game-status-bar{
  width:100%;display:flex;align-items:center;justify-content:center;gap:2rem;
  padding:.7rem 1rem .9rem;border-top:1px solid var(--border);flex-shrink:0;
}
.gsb-player{display:flex;align-items:center;gap:.5rem}
.gsb-name{font-size:.75rem;font-weight:700;color:var(--muted);font-family:var(--font-mono)}
.pip-row{display:flex;gap:4px}
.pip{
  width:10px;height:10px;border-radius:50%;
  background:var(--border-hi);transition:background .3s,transform .25s;
}
.pip.hit{background:var(--poison);transform:scale(1.25)}
.gsb-sep{width:1px;height:24px;background:var(--border)}

/* ── OVERLAY ── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;
  z-index:50;backdrop-filter:blur(12px);
}
.overlay.hidden{display:none}

/* REVEAL */
.reveal-card{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes pop-in{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
.reveal-candy{font-size:5.5rem;filter:drop-shadow(0 0 30px rgba(255,255,255,.2))}
.reveal-result{font-size:2.3rem;font-weight:800;letter-spacing:.04em}
.reveal-result.safe{color:var(--safe)}
.reveal-result.poison{color:var(--poison)}
.reveal-sub{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}

/* END */
.end-card{
  background:var(--surface);border:1px solid var(--border-hi);
  border-radius:18px;padding:2.2rem 1.75rem;max-width:360px;width:90%;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;
  position:relative;z-index:2;
  animation:pop-in .4s cubic-bezier(.175,.885,.32,1.275);
}
.end-emoji{font-size:4rem;filter:drop-shadow(0 0 20px rgba(255,255,255,.15))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.end-emoji{animation:float 2.2s ease-in-out infinite}
.end-winner{
  font-size:2rem;font-weight:800;letter-spacing:-.02em;
  color:var(--text);
}
.end-winner.you-won{
  background:linear-gradient(120deg,var(--accent),var(--safe));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.end-winner.you-lost{color:var(--muted)}
.end-detail{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.05em}
.end-stats{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:.8rem 1.1rem;
  font-family:var(--font-mono);font-size:.75rem;color:var(--muted);
  line-height:1.9;width:100%;text-align:left;
}
.end-stats strong{color:var(--text)}
.end-btns{display:flex;gap:.6rem;width:100%}
.end-btns .btn-primary{flex:1}

/* CONFETTI */
#confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cp{position:absolute;width:7px;height:7px;border-radius:2px;animation:confetti-fall linear forwards}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}

/* FLASH */
#flash-layer{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0}

/* SHAKE */
@keyframes shake{
  0%,100%{transform:translate(0)}
  15%{transform:translate(-6px,2px)}
  30%{transform:translate(6px,-2px)}
  45%{transform:translate(-4px,2px)}
  60%{transform:translate(4px,-2px)}
  75%{transform:translate(-2px,1px)}
  90%{transform:translate(2px,-1px)}
}
body.shaking{animation:shake .42s ease}

/* ── SETTINGS OVERLAY ── */
.settings-card{
  background:var(--surface);border:1px solid var(--border-hi);
  border-radius:18px;padding:1.5rem;width:min(480px,93vw);
  max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:1rem;
  animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275);
}
.settings-header{display:flex;align-items:center;justify-content:space-between}
.settings-title{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.settings-section-label{
  font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  padding-top:.25rem;
}

/* THEME GRID */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.theme-tile{
  border:1.5px solid var(--border);border-radius:10px;
  padding:.7rem .6rem;cursor:pointer;
  transition:border-color .15s,transform .1s;
  display:flex;flex-direction:column;gap:.4rem;
  position:relative;
}
.theme-tile:hover{border-color:var(--border-hi);transform:scale(1.02)}
.theme-tile.active-theme{border-color:var(--accent)}
.theme-tile .t-preview{display:flex;gap:3px;justify-content:center}
.theme-tile .t-dot{width:10px;height:10px;border-radius:50%}
.theme-tile .t-name{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  text-align:center;color:var(--text);letter-spacing:.05em;
}
.theme-tile .t-del{
  position:absolute;top:4px;right:5px;
  background:none;border:none;color:var(--muted);font-size:.75rem;
  cursor:pointer;line-height:1;padding:2px;
  transition:color .2s;display:none;
}
.theme-tile:hover .t-del{display:block}
.theme-tile .t-del:hover{color:var(--poison)}
.theme-tile .t-check{
  position:absolute;top:4px;right:5px;
  font-size:.7rem;color:var(--accent);display:none;
}
.theme-tile.active-theme .t-check{display:block}

/* CUSTOM THEME BUILDER */
.custom-theme-builder{display:flex;flex-direction:column;gap:.8rem}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ct-swatch-col{display:flex;flex-direction:column;gap:.6rem}
.swatch-group{display:flex;flex-direction:column;gap:.3rem}
.swatch-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.swatch-row{display:flex;align-items:center;gap:.5rem}
.color-swatch{
  width:32px;height:32px;border-radius:6px;border:1.5px solid var(--border);
  cursor:pointer;padding:0;background:none;
  transition:border-color .2s;flex-shrink:0;
}
.color-swatch:hover{border-color:var(--border-hi)}
.hex-input{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;color:var(--text);
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  padding:.35rem .6rem;width:100%;outline:none;
  transition:border-color .2s;letter-spacing:.04em;
}
.hex-input:focus{border-color:var(--accent)}
.ct-name-row{width:100%}
.ct-actions{display:flex;gap:.5rem;align-items:center}

/* SAVED THEMES */
.saved-themes-list{display:flex;flex-direction:column;gap:.35rem}
.saved-theme-row{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:.55rem .8rem;cursor:pointer;
  transition:border-color .15s;
}
.saved-theme-row:hover{border-color:var(--border-hi)}
.saved-theme-row.active-theme{border-color:var(--accent)}
.st-dots{display:flex;gap:3px}
.st-dot{width:8px;height:8px;border-radius:50%}
.st-name{flex:1;font-size:.8rem;font-weight:700}
.st-del{
  background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:.8rem;padding:2px 4px;
  transition:color .2s;
}
.st-del:hover{color:var(--poison)}

/* ── RESPONSIVE ── */
/* Tablet portrait (iPad ~768px) */
@media(max-width:900px){
  .chat-panel{width:220px}
}
/* Tablet narrow / large phone landscape */
@media(max-width:700px){
  :root{--cell:clamp(32px,6.5vw,44px);--gap:4px}
}
/* Phone portrait */
@media(max-width:480px){
  :root{--cell:clamp(28px,8vw,38px);--gap:3px}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .ct-row{grid-template-columns:1fr}
  .game-instruction{font-size:.8rem;padding:.6rem .75rem .2rem}
  .game-topbar{padding:.45rem .75rem}
}
/* Very short screens (landscape phone) */
@media(max-height:500px){
  :root{--cell:clamp(24px,5vh,36px);--gap:3px}
  .game-instruction{padding:.35rem .75rem .1rem;font-size:.75rem}
  .game-topbar{padding:.35rem .75rem}
  .game-status-bar{padding:.4rem 1rem .5rem}
}

/* ── CHAT SIDEBAR ── */
.chat-toggle-btn{position:relative;display:flex;align-items:center;gap:.3rem}
.chat-unread{
  background:var(--poison);color:#fff;font-size:.6rem;font-weight:700;
  border-radius:999px;padding:.05rem .35rem;min-width:16px;text-align:center;
  font-family:var(--font-mono);
}

/* Sidebar wrapper — sits beside #s-game */
#game-with-chat{
  display:flex;width:100%;height:100dvh;overflow:hidden;
  position:relative;
}
#s-game{
  flex:1;min-width:0;height:100dvh;
  transition:flex .28s cubic-bezier(.4,0,.2,1);
}
.chat-panel{
  width:260px;flex-shrink:0;
  background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;height:100dvh;
  transform:translateX(100%);
  position:absolute;right:0;top:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:100;
}
.chat-panel.open{
  transform:translateX(0);
  position:relative;
}
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem .5rem;border-bottom:1px solid var(--border);flex-shrink:0;
}
.chat-title{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chat-messages{
  flex:1;overflow-y:auto;padding:.75rem .85rem;
  display:flex;flex-direction:column;gap:.5rem;
  scroll-behavior:smooth;
}
.chat-msg{display:flex;flex-direction:column;gap:.15rem;max-width:88%}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg.theirs{align-self:flex-start;align-items:flex-start}
.chat-msg-meta{
  font-size:.58rem;font-family:var(--font-mono);color:var(--muted);
  display:flex;align-items:center;gap:.25rem;
}
.chat-msg-bubble{
  padding:.35rem .65rem;border-radius:12px;
  font-size:.8rem;line-height:1.45;word-break:break-word;
}
.chat-msg.mine .chat-msg-bubble{
  background:var(--accent);color:#000;font-weight:600;
  border-radius:12px 12px 3px 12px;
}
.chat-msg.theirs .chat-msg-bubble{
  background:var(--surface3);color:var(--text);
  border:1px solid var(--border);
  border-radius:12px 12px 12px 3px;
}
.chat-msg-system{
  align-self:center;font-size:.6rem;font-family:var(--font-mono);
  color:var(--muted);padding:.18rem .55rem;
  background:var(--surface2);border-radius:8px;border:1px solid var(--border);
  text-align:center;
}
.chat-input-row{
  display:flex;gap:.4rem;padding:.55rem .7rem .7rem;
  border-top:1px solid var(--border);flex-shrink:0;
}
.chat-input{
  flex:1;background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);border-radius:10px;padding:.4rem .65rem;
  font-family:var(--font-display);font-size:.8rem;outline:none;
  min-width:0;
}
.chat-input:focus{border-color:var(--border-hi)}
.chat-send-btn{
  background:var(--accent);color:#000;border:none;border-radius:10px;
  padding:.4rem .75rem;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:opacity .15s;flex-shrink:0;
}
.chat-send-btn:hover{opacity:.85}

/* On mobile, chat overlays instead of pushing content */
@media(max-width:600px){
  .chat-panel{
    position:fixed;right:0;top:0;height:100dvh;
    width:min(280px,85vw);
    box-shadow:-8px 0 32px rgba(0,0,0,.6);
    transform:translateX(100%);
  }
  .chat-panel.open{
    position:fixed;
    transform:translateX(0);
  }
}

/* ── SOCIAL SIDEBAR ── */
.social-btn{
  position:absolute;top:1.2rem;left:1.2rem;
  background:none;border:1px solid var(--border);
  color:var(--muted);font-size:.85rem;height:36px;padding:0 .75rem;
  border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  transition:color .2s,border-color .2s;z-index:10;font-family:var(--font-display);font-weight:600;
}
.social-btn:hover{color:var(--text);border-color:var(--border-hi)}
.social-badge{
  background:var(--safe);color:#000;font-size:.58rem;font-weight:700;
  border-radius:999px;padding:.05rem .32rem;min-width:16px;text-align:center;
  font-family:var(--font-mono);
}

.social-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;
  backdrop-filter:blur(4px);
}
.social-overlay.hidden{display:none}

.social-panel{
  position:fixed;left:0;top:0;height:100dvh;width:300px;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:300;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:8px 0 40px rgba(0,0,0,.5);
}
.social-panel.open{transform:translateX(0)}

.social-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem .6rem;border-bottom:1px solid var(--border);flex-shrink:0;
}
.social-title{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

/* Identity setup */
.social-setup{
  display:flex;flex-direction:column;gap:.6rem;padding:.85rem 1rem;
  align-items:center;text-align:center;
}
.social-setup-title{font-size:1rem;font-weight:700}
.social-setup-sub{font-size:.78rem;color:var(--muted);line-height:1.5}
.social-code-preview{
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:.3rem .75rem;
}

/* Main social */
.social-main-scroll{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
}
#social-main{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;padding-bottom:1rem;
}
.social-me{
  display:flex;align-items:center;gap:.65rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0;
}
.social-me-emoji{font-size:1.5rem}
.social-me-info{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.social-me-name{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-me-code{font-family:var(--font-mono);font-size:.6rem;color:var(--muted)}

.social-section-label{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:.8rem 1rem .35rem;
}
.social-count,.social-req-count{
  background:var(--surface3);border-radius:999px;
  padding:.05rem .35rem;font-size:.6rem;font-family:var(--font-mono);
  color:var(--muted);
}
.social-req-count{background:var(--accent);color:#000;}

.social-add-row{
  display:flex;gap:.4rem;padding:0 .75rem;
}
.social-error{
  font-size:.72rem;color:var(--poison);padding:.3rem 1rem 0;
  font-family:var(--font-mono);
}

.social-friends-list{
  display:flex;flex-direction:column;flex:1;
}
.social-empty{
  font-size:.78rem;color:var(--muted);padding:.6rem 1rem;
  font-family:var(--font-mono);text-align:center;
}

/* Friend row */
.friend-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;cursor:pointer;
  transition:background .12s;border-bottom:1px solid var(--border);
}
.friend-row:hover{background:var(--surface2)}
.friend-avatar{
  font-size:1.25rem;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface2);border:1px solid var(--border);
  flex-shrink:0;position:relative;
}
.friend-status-dot{
  position:absolute;bottom:0;right:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--border-hi);border:1.5px solid var(--surface);
}
.friend-status-dot.online{background:var(--safe)}
.friend-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.08rem}
.friend-name{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-status{font-size:.65rem;color:var(--muted);font-family:var(--font-mono)}
.friend-unread{
  background:var(--accent);color:#000;font-size:.6rem;font-weight:700;
  border-radius:999px;padding:.05rem .35rem;font-family:var(--font-mono);
}

/* Request row */
.req-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-bottom:1px solid var(--border);
}
.req-name{flex:1;font-size:.84rem;font-weight:600}
.req-actions{display:flex;gap:.35rem}
.req-accept{
  background:var(--safe);color:#000;border:none;border-radius:7px;
  padding:.25rem .6rem;font-size:.72rem;font-weight:700;cursor:pointer;
}
.req-decline{
  background:var(--surface3);color:var(--muted);border:1px solid var(--border);
  border-radius:7px;padding:.25rem .6rem;font-size:.72rem;cursor:pointer;
}

/* DM panel */
.dm-panel{
  position:fixed;left:300px;top:0;height:100dvh;width:300px;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:300;
  transform:translateX(-600px);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:8px 0 40px rgba(0,0,0,.4);
}
.dm-panel.open{transform:translateX(0)}
.dm-header{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem .75rem .5rem;border-bottom:1px solid var(--border);flex-shrink:0;
}
.dm-with-emoji{font-size:1.2rem}
.dm-with-name{font-size:.88rem;font-weight:700;flex:1}

/* Invite notification toast */
.invite-toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--accent);
  border-radius:14px;padding:.85rem 1.25rem;
  display:flex;align-items:center;gap:.85rem;
  box-shadow:0 8px 32px rgba(0,0,0,.6);z-index:400;
  animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.toast-text{font-size:.85rem;font-weight:600}
.toast-sub{font-size:.72rem;color:var(--muted);font-family:var(--font-mono)}
.toast-accept{background:var(--accent);color:#000;border:none;border-radius:8px;padding:.4rem .9rem;font-weight:700;cursor:pointer;font-size:.82rem}
.toast-decline{background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:.4rem .7rem;cursor:pointer;font-size:.82rem}

@media(max-width:600px){
  .social-panel{width:min(300px,90vw)}
  .dm-panel{left:0;width:min(300px,90vw);transform:translateX(-100%)}
  .dm-panel.open{transform:translateX(0)}
}