/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  --bg:#0e0e10;--surface:#17171a;--surface2:#1f1f24;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.15);
  --text:#f0ede8;--muted:#888580;--accent:#c9a84c;--accent2:#e8c87a;
  --red:#e05555;--green:#4caf7d;--blue:#5b9bd5;
  --card-bg:#faf7f2;--card-border:#e0d8c8;--radius:14px;

  /* Desktop card size: 150 × 200 px */
  --card-w:150px;--card-h:200px;
  --card-rank:2.2rem;--card-suit:2.6rem;--card-pts-size:0.95rem;
  --card-radius:12px;

  --play-max:1400px;
  --opp-col:240px;
}
@media(max-width:1200px){
  :root{
    --card-w:120px;--card-h:168px;
    --card-rank:1.75rem;--card-suit:2.1rem;--card-pts-size:0.8rem;
    --play-max:100%;--opp-col:200px;
  }
}
@media(max-width:900px){
  :root{
    --card-w:90px;--card-h:126px;
    --card-rank:1.3rem;--card-suit:1.55rem;--card-pts-size:0.68rem;
    --opp-col:160px;
  }
}
@media(max-width:600px){
  :root{
    --card-w:66px;--card-h:92px;
    --card-rank:0.95rem;--card-suit:1.15rem;--card-pts-size:0.58rem;
    --opp-col:100%;
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
.serif{font-family:'Playfair Display',serif;}
.screen{display:none;min-height:100vh;padding:2rem 1rem;}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;}
/* play-screen overrides the generic .screen — has its own rules in the Play section below */

/* ── Connect / lobby ───────────────────────────────────────────────── */
.connect-card{background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:2.5rem 2rem;width:100%;max-width:440px;text-align:center;}
.game-title{font-size:2.8rem;font-weight:700;color:var(--accent);letter-spacing:-0.02em;line-height:1.1;}
.game-subtitle{font-size:0.9rem;color:var(--muted);margin-top:0.5rem;letter-spacing:0.05em;text-transform:uppercase;}
.divider{height:1px;background:var(--border);margin:1.8rem 0;}
label{display:block;font-size:0.78rem;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.4rem;text-align:left;}
input[type=text],input[type=email],input[type=password]{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:1rem;padding:0.7rem 1rem;outline:none;transition:border-color 0.2s;margin-bottom:1rem;}
input:focus{border-color:var(--accent);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0.75rem 1.5rem;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.95rem;cursor:pointer;transition:all 0.2s;font-weight:400;white-space:nowrap;}
.btn:hover{background:var(--surface2);}
.btn-gold{background:var(--accent);border-color:var(--accent);color:#0e0e10;font-weight:500;width:100%;}
.btn-gold:hover{background:var(--accent2);border-color:var(--accent2);}
.btn-outline{border-color:var(--border2);width:100%;margin-top:0.5rem;}
.btn-sm{padding:0.4rem 0.9rem;font-size:0.82rem;}
.btn-danger{border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:rgba(224,85,85,0.1);}
.error-msg{color:var(--red);font-size:0.85rem;margin-top:0.5rem;min-height:1.2em;}
.lobby-card{background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:2rem;width:100%;max-width:520px;}
.room-code{font-size:2.5rem;font-weight:700;color:var(--accent);letter-spacing:0.15em;text-align:center;padding:1rem;background:var(--surface2);border-radius:10px;margin:0.8rem 0;cursor:pointer;transition:background 0.2s;}
.room-code:hover{background:#2a2a30;}
.player-list{margin:0.5rem 0;}
.player-item{display:flex;align-items:center;gap:10px;padding:0.55rem 0;border-bottom:1px solid var(--border);font-size:0.9rem;}
.player-item:last-child{border-bottom:none;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0e0e10;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;}
.avatar.bot{background:#3a3a50;color:var(--muted);}
.badge{font-size:0.68rem;padding:2px 8px;border-radius:20px;margin-left:auto;white-space:nowrap;}
.badge-host{background:rgba(201,168,76,0.2);color:var(--accent);}
.badge-you{background:rgba(91,155,213,0.2);color:var(--blue);}
.badge-bot{background:rgba(100,100,150,0.2);color:#9090c0;}
.server-hint{font-size:0.78rem;color:var(--muted);text-align:center;margin-bottom:0.8rem;}
.bot-controls{display:flex;gap:8px;margin:0.8rem 0;align-items:center;}
.bot-count{font-size:0.82rem;color:var(--muted);flex:1;}
.session-bar{display:flex;gap:10px;flex-wrap:wrap;margin:0.5rem 0 1rem;}
.session-chip{background:var(--surface2);border-radius:20px;padding:4px 12px;font-size:0.8rem;color:var(--muted);}
.session-chip strong{color:var(--accent);}

/* ── Play screen ───────────────────────────────────────────────────── */
#play-screen{
  background:radial-gradient(ellipse at 50% 0%,#1a2a1a 0%,var(--bg) 60%);
  display:none;flex-direction:column;align-items:center;
  min-height:100vh;height:100vh;overflow:hidden;
  padding:0.75rem 1rem 0;
  box-sizing:border-box;
}
#play-screen.active{display:flex;justify-content:flex-start;}

.play-header{display:flex;align-items:center;gap:8px;width:100%;max-width:var(--play-max);margin-bottom:0.6rem;flex-wrap:wrap;flex-shrink:0;}
.info-chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:0.82rem;color:var(--muted);white-space:nowrap;}
.info-chip strong{color:var(--text);}
.info-chip.trump strong{color:var(--accent);}
@media(max-width:600px){
  .play-header{gap:5px;margin-bottom:4px;}
  .play-header a{display:none;}
  .chip-bid{display:none;}
  .chip-trick{display:none;}
  .info-chip{padding:4px 9px;font-size:0.76rem;}
}

/* Table area — grows to fill remaining vertical space in play-screen */
.table-area{
  width:100%;max-width:var(--play-max);
  display:grid;grid-template-columns:var(--opp-col) 1fr;
  gap:14px;margin-bottom:6px;
  flex:1;min-height:0;align-items:stretch;
}
@media(max-width:900px){
  .table-area{grid-template-columns:1fr;flex:0 0 auto;}
}
@media(max-width:600px){.table-area{gap:8px;}}

/* Left column: opponents + trump/partner + log stacked */
.left-col{
  display:flex;flex-direction:column;gap:8px;min-height:0;
}
.opponents-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
  overflow-y:auto;flex:1;min-height:0;
}
@media(max-width:900px){.left-col{display:none;}}

/* Trick + Hand side by side, fill full height of right column */
.game-main{
  display:flex;flex-direction:row;
  gap:14px;align-items:stretch;
  min-width:0;min-height:0;
}
@media(max-width:900px){
  .game-main{flex-direction:column;gap:8px;}
}

.opp-section-title{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:10px;font-weight:600;}
.opp-player{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:0.85rem;}
.opp-player:last-child{border-bottom:none;}
.opp-name{flex:1;color:var(--text);}
.opp-pts{font-size:0.8rem;color:var(--accent);font-weight:600;}

.trick-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;
  flex:0 0 auto;width:fit-content;
  justify-content:center;
}
@media(max-width:600px){
  .trick-panel{padding:10px 8px;width:100%;justify-content:flex-start;}
  .trick-cards{gap:6px 10px;flex:none;}
  .trick-slot-label{font-size:0.7rem;}
  .trick-cards .card-pts{display:none;}
  .trick-cards .card::before,.trick-cards .card::after{display:none;}
}
.trick-cards .card{width:var(--card-w);height:var(--card-h);cursor:default;}
.trick-cards .card:hover,.trick-cards .card.selected{transform:none;box-shadow:0 3px 8px rgba(0,0,0,0.28);}
.trick-cards{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:10px 16px;
  justify-content:center;
  align-items:start;
  flex:1;
  padding-bottom:4px;
}
.trick-slot{display:flex;flex-direction:column;align-items:center;gap:6px;}
.trick-slot-label{font-size:0.78rem;color:var(--muted);font-weight:500;}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{
  width:var(--card-w);height:var(--card-h);
  background:var(--card-bg);border:1.5px solid var(--card-border);
  border-radius:var(--card-radius,10px);
  display:grid;
  grid-template-rows:1fr auto 1fr;
  grid-template-columns:1fr;
  align-items:center;justify-items:center;
  position:relative;cursor:pointer;
  transition:transform 0.18s,box-shadow 0.18s;
  user-select:none;flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,0.28);
}
.card:hover{transform:translateY(-10px);box-shadow:0 14px 32px rgba(0,0,0,0.6);}
.card.selected{transform:translateY(-16px);box-shadow:0 18px 40px rgba(201,168,76,0.5);border:2.5px solid var(--accent);}
.card.illegal{opacity:0.28;cursor:not-allowed;transform:none !important;box-shadow:none;}
.card-rank{grid-row:1;font-size:var(--card-rank);font-weight:800;line-height:1;align-self:end;margin-bottom:2px;}
.card-suit{grid-row:2;font-size:var(--card-suit);line-height:1;}
.card-pts{grid-row:3;align-self:end;font-size:var(--card-pts-size);color:var(--accent);font-weight:700;margin-bottom:6px;}
.card.spade .card-rank,.card.club .card-rank{color:#111;}
.card.heart .card-rank,.card.diamond .card-rank{color:#c0392b;}
.card.spade .card-suit,.card.club .card-suit{color:#111;}
.card.heart .card-suit,.card.diamond .card-suit{color:#c0392b;}
.card::before,.card::after{
  content:attr(data-corner);position:absolute;
  font-size:calc(var(--card-rank) * 0.6);font-weight:800;line-height:1.1;white-space:pre;text-align:center;
}
.card::before{top:5px;left:7px;}
.card::after{bottom:5px;right:7px;transform:rotate(180deg);}
.card.spade::before,.card.spade::after,.card.club::before,.card.club::after{color:#111;}
.card.heart::before,.card.heart::after,.card.diamond::before,.card.diamond::after{color:#c0392b;}
.card.kali{
  border:2.5px solid var(--accent);
  background:linear-gradient(160deg,#fffde8 60%,#fff5c2 100%);
  box-shadow:0 0 0 2px rgba(201,168,76,0.5),0 4px 18px rgba(201,168,76,0.35);
  animation:kaliGlow 2.4s ease-in-out infinite;
}
@keyframes kaliGlow{
  0%,100%{box-shadow:0 0 0 2px rgba(201,168,76,0.5),0 4px 18px rgba(201,168,76,0.35);}
  50%{box-shadow:0 0 0 3px rgba(201,168,76,0.8),0 6px 28px rgba(201,168,76,0.55);}
}
.card.kali .card-rank{color:#8a6a00;}
.card.kali .card-suit{color:#8a6a00;}
.card.kali::before,.card.kali::after{color:#8a6a00;}

/* ── Face cards (J/Q/K) — subtle cream background, letters shown normally ── */
.card.face{background:linear-gradient(160deg,#faf7f2 60%,#f5f0e8 100%);}
.card.face .card-rank{font-size:calc(var(--card-rank) * 1.15);}
.card.face .card-suit{font-size:calc(var(--card-suit) * 1.1);}

/* ── Hand area ─────────────────────────────────────────────────────── */
.hand-area{
  width:100%;max-width:var(--play-max);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:0 20px 0;margin-bottom:8px;
  min-width:0;
  transition:background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.game-main .hand-area{
  flex:1;width:auto;max-width:none;
  display:flex;flex-direction:column;justify-content:center;
  margin-bottom:0;
}
@media(min-width:901px){
  .game-main .hand-area{
    background:var(--surface2);
    border-color:rgba(255,255,255,0.12);
  }
}
@media(min-width:901px){
  .game-main .hand-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,var(--card-w));
    gap:12px;
    overflow:visible;
    padding:16px;
    justify-content:center;
    scroll-snap-type:unset;
  }
  .game-main .hand-cards .card{
    scroll-snap-align:unset;
  }
}
.hand-area--your-turn{
  background:rgba(201,168,76,0.07);
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(201,168,76,0.25), 0 4px 24px rgba(201,168,76,0.12);
  animation:handPulse 2s ease-in-out infinite;
}
@keyframes handPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(201,168,76,0.25),0 4px 24px rgba(201,168,76,0.12);}
  50%{box-shadow:0 0 0 3px rgba(201,168,76,0.45),0 4px 32px rgba(201,168,76,0.22);}
}
.hand-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:600;padding-top:14px;margin-bottom:0;}
.hand-area--your-turn .hand-label{color:var(--accent);}
.hand-cards{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;padding-top:26px;padding-bottom:10px;scroll-snap-type:x mandatory;justify-content:flex-start;}
.hand-cards .card{scroll-snap-align:start;flex-shrink:0;}
.hand-cards::-webkit-scrollbar{height:4px;}
.hand-cards::-webkit-scrollbar-track{background:transparent;}
.hand-cards::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
@media(max-width:600px){
  /* 3×2 grid so all 8 cards (max hand) fit without scrolling */
  .hand-cards{display:grid;grid-template-columns:repeat(4,var(--card-w));gap:8px;padding-top:10px;padding-bottom:10px;justify-content:center;overflow-x:visible;}
  .hand-cards .card{scroll-snap-align:unset;}
}
.play-btn-row{display:flex;gap:10px;padding:10px 0 14px;background:var(--surface);}

/* ── Log area ──────────────────────────────────────────────────────── */
.log-area{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;overflow:hidden;flex-shrink:0;}
@media(max-width:600px){.log-area{display:none;}}
.log-line{font-size:0.82rem;color:var(--muted);padding:2px 0;line-height:1.5;}
.log-line.hl{color:var(--accent);font-weight:500;}
.log-line.good{color:var(--green);}
.log-line.bad{color:var(--red);}

/* ── Bid screen ────────────────────────────────────────────────────── */
.section-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin:1rem 0 0.5rem;}
.bid-screen-inner{width:100%;max-width:min(960px,100%);}
@media(max-width:600px){.bid-screen-inner{max-width:100%;}}
.bid-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.trump-buttons{display:flex;gap:10px;flex-wrap:wrap;}
.trump-btn{width:64px;height:64px;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;font-size:1.9rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;color:var(--text);}
@media(max-width:600px){.trump-btn{width:54px;height:54px;font-size:1.6rem;}}
.trump-btn:hover{background:var(--surface);border-color:var(--accent);}
.trump-btn.selected{border:2px solid var(--accent);background:rgba(201,168,76,0.12);}
.partner-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;max-height:calc(var(--card-h) * 2 + 36px);overflow-y:auto;padding-right:4px;}
.partner-grid::-webkit-scrollbar{width:4px;}
.partner-grid::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
@media(max-width:600px){.partner-grid{gap:6px;max-height:calc(var(--card-h)*2 + 28px);}}
#bid-hand{display:grid;grid-template-columns:repeat(4, var(--card-w));gap:10px;justify-content:center;margin-bottom:1rem;padding-top:22px;}

/* ── Mini cards (used in trump/partner info panel) ──────────────────── */
.card.mini{
  width:44px !important;height:60px !important;
  border-radius:6px !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.3) !important;
  cursor:default !important;
  flex-shrink:0 !important;
}
.card.mini:hover{transform:none !important;box-shadow:0 2px 6px rgba(0,0,0,0.3) !important;}
.card.mini .card-rank{font-size:0.85rem !important;}
.card.mini .card-suit{font-size:1rem !important;}
.card.mini .card-pts{display:none !important;}
.card.mini::before,.card.mini::after{display:none !important;}

/* ── Trump + called cards panel (compact strip inside trick-panel) ───── */
#trump-partner-panel{
  display:none;width:100%;max-width:var(--play-max);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px 12px;margin-bottom:0;
  align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;width:100%;
}
.tp-section{display:flex;align-items:center;gap:6px;}
.tp-label{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);font-weight:600;white-space:nowrap;}
.tp-divider{width:1px;height:22px;background:var(--border2);flex-shrink:0;margin:0 4px;}
/* Trump suit badge — white card look */
.trump-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:6px;
  font-size:0.88rem;font-weight:800;
  background:#ffffff;border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  white-space:nowrap;letter-spacing:0.01em;
}
.trump-badge.heart,.trump-badge.diamond{color:#c0392b;}
.trump-badge.spade,.trump-badge.club{color:#1a1a2e;}
/* Called-card chip — white card look */
.tp-card-slot{display:inline-flex;align-items:center;gap:5px;}
.tp-card-badge{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px 9px;border-radius:6px;
  font-size:0.88rem;font-weight:800;
  background:#ffffff;border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.tp-card-badge.heart,.tp-card-badge.diamond{color:#c0392b;}
.tp-card-badge.spade,.tp-card-badge.club{color:#1a1a2e;}
.tp-card-badge.revealed{border-color:var(--green);box-shadow:0 2px 8px rgba(76,175,77,0.35);}
.tp-card-name{font-size:0.7rem;color:var(--muted);white-space:nowrap;font-weight:500;}
.tp-card-name.revealed{color:var(--green);font-weight:700;}
/* Panel label bump — slightly brighter next to white cards */
#trump-partner-panel .tp-label{color:rgba(136,133,128,0.9);font-size:0.62rem;}
#trump-partner-panel .tp-divider{background:rgba(255,255,255,0.12);}
.tp-mobile-only{display:none;}
@media(max-width:600px){.tp-mobile-only{display:flex;}}

/* Mobile trump/partner mirror — hidden on desktop, shown between trick and hand on mobile */
#trump-partner-panel-mobile{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px 12px;
  align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;
}
#trump-partner-panel-mobile .tp-label{color:rgba(136,133,128,0.9);font-size:0.62rem;}
#trump-partner-panel-mobile .tp-divider{background:rgba(255,255,255,0.12);}
@media(min-width:901px){#trump-partner-panel-mobile{display:none !important;}}

/* ── Result screen ─────────────────────────────────────────────────── */
.result-card{background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:2.5rem 2rem;width:100%;max-width:600px;}
@media(max-width:600px){.result-card{padding:1.5rem 1rem;}}
.result-title{font-size:2.4rem;font-weight:700;margin-bottom:0.5rem;}
.result-win{color:var(--green);}
.result-lose{color:var(--red);}
.scores-table{width:100%;border-collapse:collapse;font-size:0.9rem;margin:0.8rem 0;}
.scores-table th{text-align:left;padding:6px 10px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);}
.scores-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text);}
.scores-table tr.winner td{color:var(--green);font-weight:600;}
.lb-table{width:100%;border-collapse:collapse;font-size:0.86rem;margin-top:0.5rem;}
.lb-table th{text-align:left;padding:5px 10px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);}
.lb-table td{padding:5px 10px;border-bottom:1px solid var(--border);color:var(--text);}
.lb-table tr:first-child td{color:var(--accent);}

/* ── Misc ──────────────────────────────────────────────────────────── */
.waiting-msg{text-align:center;padding:2rem;color:var(--muted);font-size:0.95rem;}
.pulse{animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
#toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:0.75rem 1.5rem;font-size:0.9rem;color:var(--text);z-index:9999;transition:transform 0.3s ease;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
#toast.show{transform:translateX(-50%) translateY(0);}
.lb-tabs{display:flex;gap:8px;margin-bottom:0.75rem;}
.lb-tab{padding:5px 16px;border-radius:20px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:0.82rem;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.lb-tab.active{background:var(--surface2);color:var(--text);border-color:var(--accent);}

/* ── Profile nav bar ───────────────────────────────────────────────── */
.kt-nav{
  position:sticky;top:0;z-index:200;
  background:rgba(14,14,16,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1.5rem;
}
.kt-nav-brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;}
.kt-nav-title{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--accent);font-weight:700;}
.kt-nav-sub{font-size:0.7rem;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;}
.kt-nav-right{display:flex;align-items:center;gap:10px;}

/* Profile avatar button */
.profile-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:24px;padding:5px 12px 5px 5px;
  cursor:pointer;transition:all 0.2s;color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:0.85rem;position:relative;
}
.profile-btn:hover{border-color:var(--accent);background:var(--surface);}
.profile-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#0e0e10;
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;flex-shrink:0;
}

/* Profile dropdown panel */
.profile-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:300px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  z-index:9999;overflow:hidden;
  opacity:0;transform:translateY(-8px);
  pointer-events:none;
  transition:opacity 0.18s,transform 0.18s;
}
.profile-dropdown.open{opacity:1;transform:translateY(0);pointer-events:auto;}

.pd-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.pd-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#0e0e10;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0;}
.pd-name{font-size:0.95rem;font-weight:600;color:var(--text);}
.pd-email{font-size:0.75rem;color:var(--muted);margin-top:1px;word-break:break-all;}

.pd-section{padding:12px 16px;border-bottom:1px solid var(--border);}
.pd-section:last-child{border-bottom:none;}
.pd-section-title{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:600;margin-bottom:10px;}

.pd-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;}
.pd-row-label{font-size:0.82rem;color:var(--muted);}
.pd-row-value{font-size:0.85rem;color:var(--text);font-weight:500;}
.pd-row-value.accent{color:var(--accent);}
.pd-row-value.green{color:var(--green);}
.pd-row-value.red{color:var(--red);}

.pd-loading{text-align:center;padding:20px 16px;font-size:0.82rem;color:var(--muted);}

/* Recent games list */
.pd-game-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--border);font-size:0.78rem;
}
.pd-game-item:last-child{border-bottom:none;}
.pd-game-left{color:var(--muted);}
.pd-game-left strong{color:var(--text);font-size:0.8rem;}
.pd-game-right{font-weight:600;font-size:0.82rem;}

.pd-footer{padding:10px 16px;}
.pd-signout{
  width:100%;padding:7px;border-radius:8px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.83rem;cursor:pointer;
  transition:all 0.2s;white-space:nowrap;
}
.pd-signout:hover{background:rgba(224,85,85,0.1);border-color:var(--red);color:var(--red);}

/* Profile wrapper needs relative positioning */
.profile-wrap{position:relative;}