/* ─── RESET & BASE ───────────────────────────────────────── */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
html{width:100%;height:100%}
body{
  font-family:"Segoe UI",Roboto,sans-serif;
  background:#f0f4f8;
  display:flex;justify-content:center;align-items:center;
  padding:1rem;
  min-height:100%;
}
/* Ensure [hidden] truly hides even if other rules set display */
[hidden]{ display:none !important; }
body.board-mode{
  height:auto;
  overflow-y:auto;
}

#board > h3 { text-align: center; }

/* ─── CONTAINER SECTIONS ─────────────────────────────────── */
section{
  width:100%;max-width:720px;background:#fff;border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden;
  position:relative;
}
#board{ overflow:visible; }
#join,#board,#howto{padding:1.5rem}

.join-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  padding-top: 3rem;
}

.join-img img {
  width: 250px;
  border-radius: 20px; /* rounded transparent corners */
  display: block; /* avoid inline-gap rendering quirks */
}

/* ─── JOIN SCREEN ───────────────────────────────────────── */
#join h1{text-align:center;font-size:2rem;margin-bottom:1.5rem;color:#333}
#join form{display:flex;flex-direction:column;gap:.75rem}
#join input{
  padding:.75rem 1rem;border:1px solid #ccc;border-radius:6px;font-size:1rem
}
#join .room-row{display:flex; align-items:center; gap:.5rem}
#join .room-row input{flex:1 1 auto; min-width:0}
#join .room-row .share-btn{ white-space:nowrap; position:relative; }
#join .room-row .share-btn.copied::after{
  content:"Copied!"; position:absolute; right:0; top:-1.8rem; transform:translateY(-2px);
  background:#111; color:#fff; font-size:.75rem; padding:.2rem .4rem; border-radius:4px;
  opacity:1; pointer-events:none; white-space:nowrap;
}
#join button:not(.theme-toggle){
  padding:.75rem;background:#0077ff;border:none;border-radius:6px;color:#fff;
  font-weight:600;cursor:pointer;transition:background .2s
}
#join button:not(.theme-toggle):hover{background:#0065d4}

/* ─── DECK PICKER ──────────────────────────────────────── */
#deckPicker{
  border:1px solid #e0e0e0;border-radius:8px;padding:.75rem 1rem;margin-top:.25rem
}
#deckPicker legend{padding:0 .35rem;font-weight:600}
.decks{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem
}
.decks .opt{
  display:flex;align-items:center;gap:.35rem;border:1px solid #ddd;border-radius:6px;
  padding:.35rem .5rem;cursor:pointer
}
.decks .opt input{cursor:pointer}
.custom-deck{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.custom-deck input{padding:.5rem .75rem;border:1px solid #ccc;border-radius:6px}

/* ─── TEAM MENUS ───────────────────────────────────────── */
#teams{margin-top:1.5rem;border-top:1px solid #e0e0e0}
.no-teams {margin-top: 0 !important; border-top:0 !important;}
details.team{margin-top:.75rem;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}
details.team summary{
  cursor:pointer;padding:.75rem 1rem;font-weight:600;list-style:none;position:relative;background:#f7fbff
}
details.team summary::after{
  content:"▼";position:absolute;right:1rem;font-size:.8rem
}
details.team[open] summary::after{content:"▲"}
.profiles{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  padding:.5rem 1rem 1rem
}
.profile{width:80px;text-align:center;cursor:pointer}
.profile img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:#e0e0e0;margin-bottom:.4rem
}
.profile .name{
  font-size:.8rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ─── BOARD HEADER ──────────────────────────────────────── */
header{
  display:flex;flex-direction:column;gap:.75rem;padding-bottom:1rem;
  border-bottom:1px solid #e0e0e0;margin-bottom:1.5rem
}
.top-row{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  position:relative; z-index:10000;
}

#join .top-row {
  position:absolute;
  top:12px; left:16px; right:16px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Join top row placements (flex-based) */
/* Theme toggle naturally left; How-To naturally right */

/* How-To section top row placements */
#howToExitBtn{ grid-column:3; justify-self:end; }

/* Exit button (destructive) */
#exitBtn{
  padding:.4rem .4rem;background:#ff4d4f;color:#fff;border:none;border-radius:6px;display:flex;justify-content:center;align-items:center;
  font-size:.9rem;cursor:pointer;transition:background .2s; justify-self:end;
}
#exitBtn:hover{background:#e04446}
/* Duplicate Exit styles for How-To exit */
#howToExitBtn{
  padding:.4rem .4rem;background:#ff4d4f;color:#fff;border:none;border-radius:6px;display:flex;justify-content:center;align-items:center;
  font-size:.9rem;cursor:pointer;transition:background .2s; justify-self:end; margin-bottom: 1.5rem;
}
#howToExitBtn:hover{background:#e04446}
/* style clear-confetti differently */
#clearConfettiBtn{ background:#6b7280; color:#fff; padding:.4rem .6rem; border-radius:6px; margin-right:auto; border:none; cursor:pointer; }
#clearConfettiBtn:hover{ background:#5f6368; }
/* Pin specific grid columns so center/right never move */
#clearConfettiBtn{ grid-column:1; justify-self:start; }
#themeToggle{ grid-column:2; justify-self:center; }
/* Right-side container holding Share + Exit */
.right-controls{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:.5rem; }
/* Keep space when hidden so layout doesn't shift */
#clearConfettiBtn[hidden]{ display:inline-flex !important; visibility:hidden; }
/* Theme toggle center */
.theme-toggle{
  width:38px; height:38px; border-radius:999px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#e5e7eb; color:#111827; box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition: background .2s, color .2s, transform .12s ease-out;
}
.theme-toggle:hover{ transform: translateY(-1px); }
.theme-toggle .icon{ display:none; }
.theme-toggle .icon.moon{ display:inline-block; }

/* Join How-To button style */
#howToBtn{
  background:#6b7280; color:#fff; padding:.4rem .6rem; border:none; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; line-height:1; font-weight:600;
}
#howToBtn .icon{ display:inline-block; }
#howToBtn:hover{ background:#5f6368; }

/* Board Share button: match join style and tooltip */
#board .top-row .share-btn{
  position:relative; white-space:nowrap;
  background:#0077ff; color:#fff; border:none; border-radius:6px;
  padding:.6rem; font-weight:600; cursor:pointer; transition:background .2s;
}
#board .top-row .share-btn:hover{ background:#0065d4; }
#board .top-row .share-btn.copied::after{
  content:"Copied!"; position:absolute; right:0; top:-1.8rem; transform:translateY(-2px);
  background:#111; color:#fff; font-size:.75rem; padding:.2rem .4rem; border-radius:4px;
  opacity:1; pointer-events:none; white-space:nowrap;
}

header h2{text-align:center;font-size:1.5rem;color:#333;margin:0}
.actions{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.actions button{
  padding:.5rem 1rem;background:#0077ff;color:#fff;border:none;border-radius:6px;
  font-size:.9rem;cursor:pointer;transition:background .2s
}
.actions button:hover{background:#0065d4}
.actions button:disabled{background:#a0c4ff;cursor:not-allowed}
.actions button.cancel{background:#ff4d4f}

/* Subtle call-to-action heartbeat on active Reveal */
.actions #revealBtn.cta-heartbeat{
  animation: ctaHeartbeat 3.2s ease-in-out infinite;
  transform-origin: center;
  /* keep readable during pulse */
  box-shadow: 0 0 0 0 rgba(0,119,255,0.25);
}
@keyframes ctaHeartbeat{
  /* Pulse 1: 0%–24% */
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,255,0.0); }
  8%   { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(0,119,255,0.06); }
  12%  { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(0,119,255,0.10); }
  16%  { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(0,119,255,0.10); }
  24%  { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,255,0.0); }
  /* Short gap: 24%–28% */
  28%  { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,255,0.0); }
  /* Pulse 2 (same length as pulse 1): 28%–52% */
  36%  { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(0,119,255,0.06); }
  40%  { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(0,119,255,0.10); }
  44%  { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(0,119,255,0.10); }
  52%  { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,255,0.0); }
  /* Long rest */
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,255,0.0); }
}
@media (prefers-reduced-motion: reduce){
  .actions #revealBtn.cta-heartbeat{ animation: none; }
}
.actions button.cancel:hover{background:#e04446}
.actions button.new-round{background:#28a745}
.actions button.new-round:hover{background:#218838}

/* ─── LOADING BAR ───────────────────────────────────────── */
#loadingBarContainer{
  width:100%;height:5px;border-radius:3px;overflow:hidden;background:transparent
}
#loadingBar{
  width:0;height:100%;background:#0077ff;opacity:0;
  transition:width 3000ms linear,opacity .2s
}

/* ─── USERS GRID ────────────────────────────────────────── */
.users{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1.5rem
}
.user-card{
  /* Match bg-card visual by removing alpha blending over white */
  background:linear-gradient(180deg, #FEFEFF, #F8FAFC);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.6rem;flex:0 1 110px;max-width:110px;aspect-ratio:1/1;
  backface-visibility:hidden;
  transition: background 2s ease-out, box-shadow 2s ease-out;
  /* For highlight overlay layering */
  position:relative; /* create a positioned context */
  z-index:0; /* create a stacking context for safe pseudo layering */
  /* default highlight color (light mode), overridden in dark */
  --change-highlight: #fffbe6;
}
/* fading overlay used for smooth inner color highlight */
.user-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: var(--change-highlight);
  opacity:0; z-index:-1; /* sit beneath content but above background */
  transition: opacity 2s ease-out;
}
.user-card .avatar{
  width:40px;height:40px;border-radius:50%;background:#e0e0e0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:.4rem
}
.user-card .avatar img{width:100%;height:100%;object-fit:cover}
.user-card .name{font-size:.85rem;margin-top:.2rem; text-align:center;}

/* score + confidence row (flex, centred when single item) */
.user-card .row{
  margin-top:.5rem;display:flex;justify-content:center;align-items:center;
  gap:.4rem;min-height:1.6rem
}
.row .vote,
.row .new-vote{
  font-size:1.4rem;font-weight:700;color:#333;
  min-width:1.4rem;min-height:1.4rem;display:flex;align-items:center;justify-content:center
}
.row .vote.old{ text-decoration: line-through; opacity:.8; }
.row .conf{
  font-size:1.25rem;min-width:1.25rem;min-height:1.25rem;
  display:flex;align-items:center;justify-content:center
}

/* ─── DECKS ON BOARD ───────────────────────────────────── */
.deck,.confdeck{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1rem 0 2rem
}
.deck button,.confdeck button{
  flex:0 1 50px;width:50px;height:50px;border:2px solid #999;border-radius:6px;
  background:#fff;font-weight:600;cursor:pointer;font-size:.9rem;
  transition:background .25s ease,color .25s ease,border-color .25s ease, box-shadow .25s ease, transform .18s ease-out;
  /* For hover animation layering */
  position:relative; overflow:hidden; isolation:isolate;
}
.deck button.selected{background:#5fa9ff;color:#fff; border-color: #0077ff;}
.deck button:disabled{border-color:#ccc;color:#999;cursor:not-allowed}

.confdeck button{border-color:#999;font-size:1.4rem}
.confdeck button.selected{background:#ffe58f;border-color:#ffc107}

/* ─── CREATIVE HOVER (light sweep) ─────────────────────── */
/* Base custom colors for hover states */
:root{
  --pp-blue-selected: #5fa9ff;
  --pp-blue-hover: #e9f4ff;   /* lighter than selected */
  --pp-blue-text: #083a6b;
  --pp-yellow-selected: #ffe58f;
  --pp-yellow-hover: #fff7cf; /* lighter than selected */
  --pp-yellow-text: #5b4300;
}

/* Lighten, but only when not selected */
.deck button:not(.selected):hover{
  background: var(--pp-blue-hover);
  border-color: var(--pp-blue-selected);
  color: var(--pp-blue-text);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(95,169,255,.45), 0 6px 14px rgba(0,119,255,.18);
}
.confdeck button:not(.selected):hover{
  background: var(--pp-yellow-hover);
  border-color: #ffc107;
  color: var(--pp-yellow-text);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(255,193,7,.45), 0 6px 14px rgba(255,193,7,.22);
}

/* Shimmer sweep under the text (text stays on top) */
.deck button:not(.selected)::before,
.confdeck button:not(.selected)::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  /* soft angled sheen with radial glow center */
  background:
    radial-gradient(80px 60px at 8% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,.95) 43%, rgba(255,255,255,.55) 50%, transparent 68%),
    linear-gradient(120deg, transparent 0 10%, rgba(255,255,255,.25) 20%, transparent 35%);
  transform:translateX(-150%) rotate(1deg);
  opacity:0;
  z-index:0; /* sits beneath button text */
}

.deck button:not(.selected):hover::before,
.confdeck button:not(.selected):hover::before{
  animation: ppSheen .85s ease forwards;
}

@keyframes ppSheen{
  0%   { transform:translateX(-150%) rotate(1deg); opacity:.28; }
  35%  { opacity:.7; }
  100% { transform:translateX(150%)  rotate(1deg); opacity:0; }
}

/* ─── ANIMATIONS ────────────────────────────────────────── */
@keyframes cardFlip{
  0%{transform:rotateY(0);opacity:1}
  50%{transform:rotateY(90deg);opacity:0}
  50.01%{transform:rotateY(-90deg);opacity:0}
  100%{transform:rotateY(0);opacity:1}
}
.user-card.flip{animation:cardFlip .8s ease-in-out forwards}

@keyframes cardChangeOut{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(10px);opacity:0}
}
@keyframes cardChangeIn{
  0%{transform:translateY(10px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.user-card.change-out{animation:cardChangeOut .35s ease forwards}
.user-card.change-in{animation:cardChangeIn .35s ease forwards}

/* highlight when a revealed card/confidence changes (immediate glow, fades away) */
.user-card.changed{
  /* outside glow fades via base box-shadow transition */
  box-shadow:0 0 20px 6px rgba(255,193,7,.7);
}
/* when changed, fade in overlay; removal fades it out smoothly */
.user-card.changed::before{ opacity:1; }

/* ─── FOOTER ────────────────────────────────────────────── */
footer{text-align:center;margin-top:1rem;font-size:1rem;color:#333}

/* ─── HOW-TO TYPOGRAPHY ────────────────────────────────── */
#howto h1{ font-size:1.6rem; margin:0 0 .5rem; color:#333; }
#howto h2{ font-size:1.15rem; margin:1rem 0 1rem; color:#333; }
#howto p{ line-height:1.6; margin:.5rem 0; color:#333; }
#howto ol, #howto ul{ padding-left:1.25rem; margin:.5rem 0; }
#howto li{ line-height:1.6; margin:.25rem 0; }

/* Dark mode for how-to text */
body.dark #howto h1,
body.dark #howto h2,
body.dark #howto p,
body.dark #howto li{ color:#e5e7eb; }

/* How-To hero */
.howto-hero{
  display:flex; gap:.75rem; align-items:flex-start; padding:1rem; border:1px solid #e5e7eb;
  background:linear-gradient(180deg, #FEFEFF, #F8FAFC); border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08);
}
.howto-hero .hero-icon{
  width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:#e9f4ff; color:#0077ff; flex:0 0 44px;
}
.howto-hero .hero-text{ flex:1; }
.howto-hero .hero-text p{ margin:.35rem 0; }

/* Steps grid */
.howto-grid{
  display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.how-card{
  display:flex; flex-direction:column; gap:.35rem; padding:.75rem; border:1px solid rgba(0,0,0,.12);
  border-radius:10px; background:linear-gradient(180deg, #FEFEFF, #F8FAFC); box-shadow:0 1px 6px rgba(0,0,0,.08);
}
.how-card .how-icon{
  width:36px; height:36px; border-radius:8px; background:#eef2f7; display:flex; align-items:center; justify-content:center;
  color:#111827;
}
.how-card .how-title{ font-weight:800; color:#111827; }
.how-card p{ margin:0; color:#333; }

/* Tips list */
.howto-tips{ list-style:none; padding:0; margin:.5rem 0; display:flex; flex-direction:column; gap:.35rem; }
.howto-tips li{ display:flex; align-items:flex-start; gap:.5rem; }
.howto-tips .tip-icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:#10b981; }

/* Inline keycap style for keyboard hints */
.keycap{
  display:inline-block;
  padding:.05rem .4rem;
  border:1px solid #cbd5e1;
  border-bottom-width:2px;
  border-radius:6px;
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  color:inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9em;
  line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 -1px 0 rgba(0,0,0,.06);
}
body.dark .keycap{
  background:linear-gradient(180deg, #1f2937, #111827);
  border-color:#374151;
  color:#e5e7eb;
  box-shadow:0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* Dark mode for How-To visuals */
body.dark .howto-hero{ background:linear-gradient(180deg, #1f2937, #111827); border-color:#374151; box-shadow:0 1px 10px rgba(0,0,0,.5); }
body.dark .howto-hero .hero-icon{ background:#0b1220; color:#60a5fa; }
body.dark .how-card{ background:linear-gradient(180deg, #1f2937, #111827); border-color:#374151; box-shadow:0 1px 10px rgba(0,0,0,.5); }
body.dark .how-card .how-icon{ background:#0b1220; color:#e5e7eb; }
body.dark .how-card .how-title{ color:#e5e7eb; }
body.dark .how-card p{ color:#e5e7eb; }

/* ─── CONFETTI OVERLAY (click-through) ───────────────────── */
#fireworksHost{
  position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;
  pointer-events:none;
}
#fireworksHost canvas{ pointer-events:none !important; position:absolute; inset:0; width:100%; height:100%; }

/* ─── BALLOONS OVERLAY ─────────────────────────────────── */
#balloonsHost{
  position:fixed; inset:0; z-index:9998; width:100vw; height:100vh; pointer-events:none; overflow:hidden;
}
#balloonsHost canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ─── TARGET OVERLAY ───────────────────────────────────── */
#targetsHost{
  position:fixed; inset:0; z-index:9998; width:100vw; height:100vh; pointer-events:none; overflow:hidden;
}
#targetsHost .target{
  position:absolute; left:0; top:0; width:64px; height:64px;
  border-radius:50%;
  pointer-events:auto; cursor:crosshair;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
}
/* crisp SVG rendering */
#targetsHost .target svg{ display:block; width:100%; height:100%; shape-rendering:geometricPrecision; }
body.dark #targetsHost .target{
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}

/* ─── BACKGROUND FIBONACCI CARDS ───────────────────────── */
#bgCardsHost{
  position:fixed; inset:0; z-index:-1; width:100vw; height:100vh; pointer-events:none; overflow:hidden;
}
.bg-card{
  position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;
  min-width:40px; min-height:56px; padding:.25rem .4rem; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95));
  color:#111; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  will-change: transform, opacity; opacity:0;
}

/* Hide animated background cards on small screens */
@media (max-width: 767px){
  #bgCardsHost{ display:none !important; }
}

@keyframes driftMove{
  0%{ transform: translate(var(--sx), var(--sy)) rotate(var(--rStart)) scale(var(--scale)); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.9; }
  100%{ transform: translate(var(--ex), var(--ey)) rotate(var(--rEnd)) scale(var(--scale)); opacity:0; }
}

/* ─── NON-SELECTABLE TEXT/IMAGES ───────────────────────── */
/* Prevent highlighting on common text/image elements; keep inputs editable */
body :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,section,header,footer,figure,figcaption,li,ul,ol,label,b,i,summary,img){
  user-select: none; -webkit-user-select: none; -ms-user-select: none; cursor: inherit;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:480px){
  section{padding:1rem}
  .actions{width:100%}
  .actions button{flex:1 1 100%}
  .profiles{gap:.5rem}
  .profile img{width:48px;height:48px}
}

/* ─── DARK MODE ─────────────────────────────────────────── */
body.dark{ background:#0f172a; color:#e5e7eb; }
body.dark section{ background:#111827; box-shadow:0 2px 12px rgba(0,0,0,.5); }
body.dark header{ border-bottom-color:#334155; }
body.dark header h2{ color:#e5e7eb; }

/* Inputs + simple borders */
body.dark #join input,
body.dark .custom-deck input{ background:#0b1220; border-color:#374151; color:#e5e7eb; }
body.dark #deckPicker,
body.dark details.team,
body.dark .decks .opt{ border-color:#374151; }
body.dark details.team summary{ background:#0b1220; color:#e5e7eb; }
body.dark .profile .name{ color:#cbd5e1; }

/* Users */
body.dark .user-card{
  background:linear-gradient(180deg, #1f2937, #111827);
  border-color:#374151; color:#e5e7eb; box-shadow:0 2px 10px rgba(0,0,0,.5);
  /* dark-specific highlight color */
  --change-highlight: #3b2f0a;
}
body.dark .row .vote,
body.dark .row .new-vote{ color:#f3f4f6; }
body.dark .user-card.changed{ box-shadow:0 0 20px 6px rgba(250,204,21,.25); }

/* Decks */
body.dark .deck button,
body.dark .confdeck button{
  background:#374151; border-color:#6b7280; color:#e5e7eb; box-shadow:none;
}
/* Hover: keep grey background, add subtle color hint */
body.dark .deck button:not(.selected):hover{
  background:#374151; border-color:#60a5fa; color:#dbeafe;
  box-shadow: 0 0 0 2px rgba(96,165,250,.30), 0 6px 14px rgba(0,0,0,.35);
}
body.dark .confdeck button:not(.selected):hover{
  background:#374151; border-color:#facc15; color:#fde68a;
  box-shadow: 0 0 0 2px rgba(250,204,21,.28), 0 6px 14px rgba(0,0,0,.35);
}
/* Selected states keep light-mode colors in dark */
body.dark .deck button.selected{ background:#5fa9ff; color:#fff; border-color:#0077ff; }
body.dark .confdeck button.selected{ background:#ffe58f; border-color:#ffc107; color:#111; }

/* Footer */
body.dark footer{ color:#e5e7eb; }

/* Background floating cards */
body.dark .bg-card{
  background:linear-gradient(180deg, rgba(31,41,55,.95), rgba(17,24,39,.95));
  border-color:rgba(255,255,255,.08); color:#e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* ─── BALLOON POP TOAST ────────────────────────────────── */
.pop-toast{
  position:fixed; /* same as host overlays */
  transform: translate(-50%, -50%);
  font-weight:700;
  font-size: 0.85rem;
  color:#111827; /* slate-900 */
  pointer-events:none;
  white-space:nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  will-change: transform, opacity;
  animation: popFloat 1.6s ease-out forwards;
  z-index: 10000; /* above balloons; near fireworks */
}
@keyframes popFloat{
  0%   { opacity: 0; transform: translate(-50%, -40%); }
  8%   { opacity: 1; }
  90%  { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -120%); }
}
body.dark .pop-toast{ color:#f9fafb; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* Theme toggle icon swap in dark */
body.dark .theme-toggle{ background:#374151; color:#f9fafb; }
body.dark .theme-toggle .icon.moon{ display:none; }
body.dark .theme-toggle .icon.sun{ display:inline-block; }

/* Join uses the same .top-row grid; no custom wrapper styles needed */

/* ─── CONNECTION OVERLAY ───────────────────────────────── */
#connOverlay{
  position:fixed; inset:0; z-index:10002; width:100vw; height:100vh;
  background: rgba(0,0,0,.5);
  display:grid; place-items:center;
}
#connOverlay[hidden]{ display:none !important; }
.conn-modal{
  background:#ffffff; color:#111827; border-radius:12px; padding:1rem 1.25rem;
  min-width: 260px; max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  text-align:center; border: 1px solid rgba(0,0,0,.08);
}
.conn-header{ font-weight:800; font-size:1.05rem; margin-bottom:.4rem; }
.conn-body{ font-size:.95rem; color:#111827; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.conn-spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #e5e7eb; border-top-color:#0077ff;
  animation: connSpin 1s linear infinite; margin:.2rem auto .4rem;
}
@keyframes connSpin{ to { transform: rotate(360deg); } }

/* Dark mode styles for modal */
body.dark #connOverlay{ background: rgba(0,0,0,.6); }
body.dark .conn-modal{ background:#111827; color:#e5e7eb; border-color:#374151; }
body.dark .conn-body{ color:#e5e7eb; }
body.dark .conn-spinner{ border-color:#374151; border-top-color:#60a5fa; }

/* ─── HALLOWEEN THEME (enhances dark mode) ───────────────────── */
/* Halloween color palette for dark mode */
body.dark{
  background: #1a0f1f; /* Deep purple-black */
  color: #f0e6ff; /* Light purple-tinted white */
}
body.dark section{
  background: #2d1b3d; /* Dark purple */
  box-shadow: 0 2px 12px rgba(157, 78, 221, 0.3); /* Purple glow */
}
body.dark header{
  border-bottom-color: #4a2c5a; /* Medium purple */
}
body.dark header h2{
  color: #f0e6ff; /* Light purple-tinted white */
}

/* Halloween-themed inputs and borders */
body.dark #join input,
body.dark .custom-deck input{
  background: #1a0f1f;
  border-color: #4a2c5a;
  color: #f0e6ff;
}
body.dark #deckPicker,
body.dark details.team,
body.dark .decks .opt{
  border-color: #4a2c5a;
}
body.dark details.team summary{
  background: #1a0f1f;
  color: #f0e6ff;
}
body.dark .profile .name{
  color: #e0d5ff;
}

/* Halloween user cards */
body.dark .user-card{
  background:linear-gradient(180deg, #2d1b3d, #1a0f1f);
  border-color:#4a2c5a;
  color: #f0e6ff;
  box-shadow:0 2px 10px rgba(157, 78, 221, 0.4);
  /* Halloween highlight color */
  --change-highlight: #4a2c5a;
}
body.dark .row .vote,
body.dark .row .new-vote{
  color: #f0e6ff;
}
body.dark .user-card.changed{
  box-shadow:0 0 20px 6px rgba(255, 107, 53, 0.4); /* Pumpkin orange glow */
}

/* Halloween deck buttons */
body.dark .deck button,
body.dark .confdeck button{
  background:#2d1b3d;
  border-color:#4a2c5a;
  color:#f0e6ff;
  box-shadow:0 2px 8px rgba(157, 78, 221, 0.2);
}
body.dark .deck button:not(.selected):hover{
  background:#2d1b3d;
  border-color:#9d4edd; /* Purple accent */
  color:#f0e6ff;
  box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.5), 0 6px 14px rgba(157, 78, 221, 0.3);
}
body.dark .confdeck button:not(.selected):hover{
  background:#2d1b3d;
  border-color:#ff6b35; /* Pumpkin orange */
  color:#ffe8d6;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.4), 0 6px 14px rgba(157, 78, 221, 0.3);
}
/* Halloween selected states */
body.dark .deck button.selected{
  background: #9d4edd;
  color: #fff;
  border-color: #ff6b35;
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.4);
}
body.dark .confdeck button.selected{
  background: #ff6b35;
  border-color: #9d4edd;
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

/* Halloween footer */
body.dark footer{
  color: #f0e6ff;
}

/* Halloween background cards */
body.dark .bg-card{
  background:linear-gradient(180deg, rgba(45, 27, 61, 0.95), rgba(26, 15, 31, 0.95));
  border-color:rgba(157, 78, 221, 0.3);
  color: #f0e6ff;
  box-shadow:0 2px 8px rgba(157, 78, 221, 0.3);
}

/* Halloween theme toggle */
body.dark .theme-toggle{
  background: #2d1b3d;
  color: #f0e6ff;
  border: 1px solid #4a2c5a;
}

/* Halloween connection modal */
body.dark #connOverlay{ background: rgba(26, 15, 31, 0.8); }
body.dark .conn-modal{
  background:#2d1b3d;
  color:#f0e6ff;
  border-color:#4a2c5a;
  box-shadow: 0 10px 30px rgba(157, 78, 221, 0.3);
}
body.dark .conn-body{ color:#f0e6ff; }
body.dark .conn-spinner{
  border-color:#4a2c5a;
  border-top-color:#ff6b35;
}

/* Halloween how-to sections */
body.dark .howto-hero{
  background:linear-gradient(180deg, #2d1b3d, #1a0f1f);
  border-color:#4a2c5a;
  box-shadow:0 1px 10px rgba(157, 78, 221, 0.3);
}
body.dark .howto-hero .hero-icon{
  background: #1a0f1f;
  color: #ff6b35;
}
body.dark .how-card{
  background:linear-gradient(180deg, #2d1b3d, #1a0f1f);
  border-color:#4a2c5a;
  box-shadow:0 1px 10px rgba(157, 78, 221, 0.3);
}
body.dark .how-card .how-icon{
  background: #1a0f1f;
  color: #f0e6ff;
}
body.dark .how-card .how-title{
  color: #f0e6ff;
}
body.dark .how-card p{
  color: #e0d5ff;
}
body.dark #howto h1,
body.dark #howto h2,
body.dark #howto p,
body.dark #howto li{
  color: #f0e6ff;
}

/* Halloween keycaps */
body.dark .keycap{
  background:linear-gradient(180deg, #2d1b3d, #1a0f1f);
  border-color:#4a2c5a;
  color:#f0e6ff;
  box-shadow:0 1px 0 rgba(157, 78, 221, 0.3), inset 0 -1px 0 rgba(157, 78, 221, 0.2);
}

/* Halloween pop toast */
body.dark .pop-toast{
  color: #f0e6ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ─── HALLOWEEN DECORATIONS ───────────────────────────────── */
.halloween-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  display: none; /* Only shown in dark mode */
}

body.dark .halloween-decorations {
  display: block;
}

/* Ghost animations */
.ghost {
  position: absolute;
  font-size: 40px;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.ghost-1 {
  top: 20%;
  animation: ghostFloat1 20s infinite;
  font-size: 30px;
}

.ghost-2 {
  top: 60%;
  animation: ghostFloat2 25s infinite;
  font-size: 50px;
  animation-delay: 5s;
}

.ghost-3 {
  top: 10%;
  animation: ghostFloat3 18s infinite;
  font-size: 35px;
  animation-delay: 10s;
}

.ghost-4 {
  top: 40%;
  animation: ghostFloat4 22s infinite;
  font-size: 45px;
  animation-delay: 15s;
}

.ghost-5 {
  top: 70%;
  animation: ghostFloat5 28s infinite;
  font-size: 25px;
  animation-delay: 8s;
}

/* Enhanced Fog effect with physics simulation */
.fog-layer {
  position: absolute;
  width: 300%;
  height: 120%;
  opacity: 0.15;
  background: radial-gradient(ellipse at center,
    rgba(157, 78, 221, 0.4) 0%,
    rgba(157, 78, 221, 0.2) 20%,
    rgba(255, 107, 53, 0.15) 40%,
    rgba(157, 78, 221, 0.1) 60%,
    rgba(255, 107, 53, 0.05) 80%,
    transparent 100%);
  filter: blur(8px);
  will-change: transform, opacity, filter;
  mix-blend-mode: screen;
}

.fog-1 {
  animation: fogDrift1 45s infinite ease-in-out;
  animation-delay: 0s;
}

.fog-2 {
  animation: fogDrift2 60s infinite ease-in-out;
  animation-delay: 15s;
}

.fog-3 {
  animation: fogDrift3 55s infinite ease-in-out;
  animation-delay: 30s;
}

/* Additional fog layers for depth */
.fog-4 {
  animation: fogDrift4 50s infinite ease-in-out;
  animation-delay: 10s;
  opacity: 0.1;
  filter: blur(12px);
}

.fog-5 {
  animation: fogDrift5 65s infinite ease-in-out;
  animation-delay: 25s;
  opacity: 0.08;
  filter: blur(15px);
}

/* Floating cobweb animations */
.cobweb {
  position: absolute;
  font-size: 35px;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.cobweb-1 {
  top: 15%;
  animation: cobwebFloat1 24s infinite;
  font-size: 30px;
  animation-delay: 3s;
}

.cobweb-2 {
  top: 45%;
  animation: cobwebFloat2 30s infinite;
  font-size: 40px;
  animation-delay: 12s;
}

.cobweb-3 {
  top: 25%;
  animation: cobwebFloat3 20s infinite;
  font-size: 25px;
  animation-delay: 18s;
}

.cobweb-4 {
  top: 65%;
  animation: cobwebFloat4 28s infinite;
  font-size: 45px;
  animation-delay: 7s;
}

/* Floating pumpkin animations */
.pumpkin {
  position: absolute;
  font-size: 40px;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.pumpkin-1 {
  top: 30%;
  animation: pumpkinFloat1 26s infinite;
  font-size: 35px;
  animation-delay: 2s;
}

.pumpkin-2 {
  top: 55%;
  animation: pumpkinFloat2 32s infinite;
  font-size: 45px;
  animation-delay: 14s;
}

.pumpkin-3 {
  top: 20%;
  animation: pumpkinFloat3 22s infinite;
  font-size: 30px;
  animation-delay: 8s;
}

.pumpkin-4 {
  top: 75%;
  animation: pumpkinFloat4 29s infinite;
  font-size: 50px;
  animation-delay: 19s;
}

/* ─── HALLOWEEN ANIMATIONS ─────────────────────────────────── */
@keyframes ghostFloat1 {
  0% { transform: translate(-100px, 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translate(calc(100vw + 100px), -100px) rotate(360deg); opacity: 0; }
}

@keyframes ghostFloat2 {
  0% { transform: translate(calc(100vw + 100px), 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translate(-100px, -100px) rotate(-360deg); opacity: 0; }
}

@keyframes ghostFloat3 {
  0% { transform: translate(-50px, 100vh) rotate(0deg) scale(0.8); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translate(calc(100vw + 50px), -50px) rotate(180deg) scale(1.2); opacity: 0; }
}

@keyframes ghostFloat4 {
  0% { transform: translate(calc(100vw + 50px), 100vh) rotate(0deg) scale(1.1); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translate(-50px, -50px) rotate(-180deg) scale(0.9); opacity: 0; }
}

@keyframes ghostFloat5 {
  0% { transform: translate(0, 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translate(100vw, -100px) rotate(270deg); opacity: 0; }
}

@keyframes fogDrift1 {
  0% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    opacity: 0.05;
    filter: blur(8px);
  }
  25% {
    transform: translateX(-30%) translateY(-15px) scale(1.1) rotate(2deg);
    opacity: 0.15;
    filter: blur(6px);
  }
  50% {
    transform: translateX(-10%) translateY(-25px) scale(1.2) rotate(-1deg);
    opacity: 0.2;
    filter: blur(4px);
  }
  75% {
    transform: translateX(20%) translateY(-15px) scale(1.1) rotate(1deg);
    opacity: 0.15;
    filter: blur(6px);
  }
  100% {
    transform: translateX(50%) translateY(0) scale(1) rotate(0deg);
    opacity: 0.05;
    filter: blur(8px);
  }
}

@keyframes fogDrift2 {
  0% {
    transform: translateX(0%) translateY(0) scale(1) rotate(0deg);
    opacity: 0.08;
    filter: blur(10px);
  }
  20% {
    transform: translateX(-15%) translateY(20px) scale(0.9) rotate(-2deg);
    opacity: 0.18;
    filter: blur(8px);
  }
  40% {
    transform: translateX(-35%) translateY(30px) scale(0.8) rotate(1deg);
    opacity: 0.22;
    filter: blur(6px);
  }
  60% {
    transform: translateX(-55%) translateY(20px) scale(0.9) rotate(-1deg);
    opacity: 0.18;
    filter: blur(8px);
  }
  80% {
    transform: translateX(-75%) translateY(10px) scale(0.95) rotate(0.5deg);
    opacity: 0.12;
    filter: blur(9px);
  }
  100% {
    transform: translateX(-100%) translateY(0) scale(1) rotate(0deg);
    opacity: 0.08;
    filter: blur(10px);
  }
}

@keyframes fogDrift3 {
  0% {
    transform: translateX(-25%) translateY(0) scale(1.1) rotate(0deg);
    opacity: 0.06;
    filter: blur(12px);
  }
  30% {
    transform: translateX(-10%) translateY(-30px) scale(1.3) rotate(3deg);
    opacity: 0.16;
    filter: blur(7px);
  }
  50% {
    transform: translateX(15%) translateY(-40px) scale(1.4) rotate(-2deg);
    opacity: 0.25;
    filter: blur(5px);
  }
  70% {
    transform: translateX(40%) translateY(-30px) scale(1.2) rotate(1deg);
    opacity: 0.18;
    filter: blur(8px);
  }
  100% {
    transform: translateX(75%) translateY(0) scale(1.1) rotate(0deg);
    opacity: 0.06;
    filter: blur(12px);
  }
}

@keyframes fogDrift4 {
  0% {
    transform: translateX(25%) translateY(0) scale(0.8) rotate(0deg);
    opacity: 0.04;
    filter: blur(15px);
  }
  35% {
    transform: translateX(45%) translateY(25px) scale(0.7) rotate(-3deg);
    opacity: 0.12;
    filter: blur(10px);
  }
  65% {
    transform: translateX(65%) translateY(40px) scale(0.6) rotate(2deg);
    opacity: 0.18;
    filter: blur(8px);
  }
  100% {
    transform: translateX(100%) translateY(0) scale(0.8) rotate(0deg);
    opacity: 0.04;
    filter: blur(15px);
  }
}

@keyframes fogDrift5 {
  0% {
    transform: translateX(-75%) translateY(0) scale(1.2) rotate(0deg);
    opacity: 0.03;
    filter: blur(18px);
  }
  25% {
    transform: translateX(-50%) translateY(-20px) scale(1.4) rotate(4deg);
    opacity: 0.10;
    filter: blur(12px);
  }
  50% {
    transform: translateX(-25%) translateY(-35px) scale(1.5) rotate(-3deg);
    opacity: 0.15;
    filter: blur(9px);
  }
  75% {
    transform: translateX(0%) translateY(-20px) scale(1.3) rotate(2deg);
    opacity: 0.08;
    filter: blur(14px);
  }
  100% {
    transform: translateX(25%) translateY(0) scale(1.2) rotate(0deg);
    opacity: 0.03;
    filter: blur(18px);
  }
}

@keyframes cobwebFloat1 {
  0% { transform: translate(-100px, 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translate(calc(100vw + 100px), -100px) rotate(180deg); opacity: 0; }
}

@keyframes cobwebFloat2 {
  0% { transform: translate(calc(100vw + 100px), 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translate(-100px, -100px) rotate(-180deg); opacity: 0; }
}

@keyframes cobwebFloat3 {
  0% { transform: translate(-50px, 100vh) rotate(0deg) scale(0.8); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translate(calc(100vw + 50px), -50px) rotate(90deg) scale(1.2); opacity: 0; }
}

@keyframes cobwebFloat4 {
  0% { transform: translate(calc(100vw + 50px), 100vh) rotate(0deg) scale(1.1); opacity: 0; }
  10% { opacity: 0.35; }
  90% { opacity: 0.35; }
  100% { transform: translate(-50px, -50px) rotate(-90deg) scale(0.9); opacity: 0; }
}

@keyframes pumpkinFloat1 {
  0% { transform: translate(-100px, 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translate(calc(100vw + 100px), -100px) rotate(360deg); opacity: 0; }
}

@keyframes pumpkinFloat2 {
  0% { transform: translate(calc(100vw + 100px), 100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translate(-100px, -100px) rotate(-360deg); opacity: 0; }
}

@keyframes pumpkinFloat3 {
  0% { transform: translate(-80px, 100vh) rotate(0deg) scale(0.9); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translate(calc(100vw + 80px), -80px) rotate(180deg) scale(1.1); opacity: 0; }
}

@keyframes pumpkinFloat4 {
  0% { transform: translate(calc(100vw + 80px), 100vh) rotate(0deg) scale(1.2); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translate(-80px, -80px) rotate(-180deg) scale(0.8); opacity: 0; }
}

/* ─── HALLOWEEN RESPONSIVE DESIGN ───────────────────────────── */
@media (max-width: 768px) {
  .ghost {
    font-size: 25px !important;
  }
  
  .cobweb {
    font-size: 20px !important;
  }
  
  .pumpkin {
    font-size: 22px !important;
  }
  
  .fog-layer {
    opacity: 0.03; /* Reduce on mobile for performance */
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ghost,
  .cobweb,
  .pumpkin,
  .fog-layer {
    animation: none !important;
  }
}