:root{
  --bg:#0b1020;
  --panel:#111a33;
  --panel2:#0f1730;
  --text:#eaf0ff;
  --muted:#a7b3d6;
  --accent:#5cc8ff;
  --accent2:#7dffb6;
  --danger:#ff5c7a;
  --outline: rgba(234,240,255,0.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background: radial-gradient(1200px 700px at 20% 0%, #17265a 0%, var(--bg) 55%), var(--bg);
  color: var(--text);
}

#app{min-height:100%;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--outline);
  background: rgba(15,23,48,0.65);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:20;
}
.brandTitle{font-weight:800; letter-spacing:0.3px;}
.brandSub{font-size:12px; color:var(--muted); margin-top:2px;}
.topbarRight{display:flex; gap:10px; align-items:center;}

main{padding:16px;}
.screen{max-width:1200px; margin:0 auto;}
.hidden{display:none !important;}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--outline);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.panelInner{
  background: rgba(17,26,51,0.65);
  border:1px solid var(--outline);
  border-radius:12px;
  padding:12px;
}

h2,h3{margin:0 0 10px 0;}

.row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
label{font-size:12px; color:var(--muted);}
input,select{
  border:1px solid var(--outline);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  border-radius:10px;
  padding:10px 10px;
  outline:none;
}
input::placeholder{color: rgba(234,240,255,0.45);}

.grid2{display:grid; grid-template-columns: 1fr; gap:12px;}
@media (min-width: 760px){
  .grid2{grid-template-columns: 1fr 1fr;}
}

.btn{
  border:1px solid var(--outline);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn.full{width:100%;}
.btn.primary{
  background: linear-gradient(180deg, rgba(92,200,255,0.25), rgba(92,200,255,0.08));
  border-color: rgba(92,200,255,0.35);
}
.btn.danger{
  background: linear-gradient(180deg, rgba(255,92,122,0.22), rgba(255,92,122,0.08));
  border-color: rgba(255,92,122,0.35);
}
.btn.ghost{background: transparent;}

.error{
  margin-top:12px;
  border:1px solid rgba(255,92,122,0.35);
  background: rgba(255,92,122,0.08);
  color: var(--text);
  border-radius:12px;
  padding:10px;
}

.layout{display:grid; grid-template-columns: 1fr; gap:14px;}
@media (min-width: 980px){
  .layout{grid-template-columns: 340px 1fr;}
}
.sidebar{display:flex; flex-direction:column; gap:14px;}

.players{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.playerItem{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid var(--outline); border-radius:12px; background: rgba(0,0,0,0.12);}
.playerBadge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--outline); color:var(--muted);}
.playerBadge.host{border-color: rgba(125,255,182,0.35); color: rgba(125,255,182,0.95);}

.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.pill{
  border:1px solid var(--outline);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color: var(--muted);
  background: rgba(0,0,0,0.10);
}

.nowRow{display:flex; gap:12px; align-items:center; margin-bottom:12px;}
.nowBall{
  width:64px; height:64px;
  border-radius:50%;
  border:1px solid rgba(92,200,255,0.25);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(92,200,255,0.12) 45%, rgba(0,0,0,0.10) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
}
.timer{font-weight:800; font-size:22px;}
.small{color:var(--muted); font-size:12px;}
/* Three.js stage container */
.bingo3dStage{
  width: 100%;
  height: 220px;
  margin: 10px 0 12px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: radial-gradient(900px 260px at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.25));
  overflow: hidden;
  position: relative;
}
@media (max-width: 920px){
  .bingo3dStage{ height: 180px; }
}
.bingo3dStage canvas{ display:block; width:100%; height:100%; }


.board{min-height: 60vh;}
.cardsArea{display:grid; grid-template-columns: 1fr; gap:14px;}
@media (min-width: 760px){
  .cardsArea{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (min-width: 1180px){
  .cardsArea{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.card{
  border:1px solid var(--outline);
  border-radius:14px;
  padding:12px;
  background: rgba(15,23,48,0.55);
}
.cardHeader{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.cardTitle{font-weight:900; letter-spacing:0.4px;}
.cardId{font-size:12px; color:var(--muted);}

.bingoGrid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.gridHead{
  text-align:center;
  font-weight:900;
  padding:8px 0;
  border-radius:10px;
  border:1px solid var(--outline);
  background: rgba(0,0,0,0.12);
}
.cell{
  position:relative;
  border:1px solid var(--outline);
  border-radius:12px;
  padding:12px 6px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: rgba(0,0,0,0.12);
  cursor:pointer;
  user-select:none;
}
.cell.free{cursor:default; color: rgba(125,255,182,0.95);}
.cell.disabled{opacity:0.55; cursor:not-allowed;}
.cell.marked{
  border-color: rgba(125,255,182,0.55);
  background: radial-gradient(circle at 30% 25%, rgba(125,255,182,0.22), rgba(125,255,182,0.10) 45%, rgba(0,0,0,0.10) 70%);
}
.cell.marked::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:2px solid rgba(125,255,182,0.65);
}

.historyWrap{display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 0 0;}
.histBall{
  position: relative;
  border:1px solid var(--outline);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--text);
  background: rgba(0,0,0,0.10);
}
.muted{color:var(--muted);}


/* Full-screen 3D ball overlay */
.ballOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  pointer-events: none; /* do not block gameplay */
}
.ballStage{display:flex; flex-direction:column; align-items:center; gap:14px;}

/* More realistic 3D ball with zoom-in pop */
.ball3d{
  --ballColor: #3aa6ff;
  width:190px;
  height:190px;
  border-radius:50%;
  position:relative;
  transform-style: preserve-3d;

  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.82), rgba(255,255,255,0.18) 26%, rgba(0,0,0,0) 34%),
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.22), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,0.38), rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--ballColor) 92%, #ffffff 8%), color-mix(in srgb, var(--ballColor) 70%, #000000 30%) 70%);

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.60),
    inset 0 18px 34px rgba(255,255,255,0.15),
    inset 0 -18px 34px rgba(0,0,0,0.28);
}

/* Drop shadow under ball */
.ball3d::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width: 150px;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
  filter: blur(1px);
  opacity: 0.9;
  z-index:-1;
}

/* Extra glossy sheen */
.ball3d::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 46%),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 56%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Letter-based colors */
.ball3d.ball-B{ --ballColor: #2f9bff; }
.ball3d.ball-I{ --ballColor: #7d58ff; }
.ball3d.ball-N{ --ballColor: #21c07a; }
.ball3d.ball-G{ --ballColor: #ff5b8a; }
.ball3d.ball-O{ --ballColor: #ffcc3a; }

/* White face */
.ballFace{
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.78) 55%, rgba(225,230,245,0.92) 72%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,0.12), rgba(0,0,0,0) 55%);
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,0.10),
    0 10px 24px rgba(0,0,0,0.30);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ballText{text-align:center;}
.ballLetter{font-weight:900; font-size:26px; color: rgba(10,14,24,0.78); letter-spacing:2px;}
.ballNumber{font-weight:1000; font-size:68px; line-height:1; color: rgba(10,14,24,0.92);}
.overlayHint{color: rgba(234,240,255,0.82); font-weight:700;}

/* Zoom from center on each draw */
.ball3d.pop{
  animation: popInTB 520ms cubic-bezier(.2,.9,.25,1.25) both;
}


  to{transform: rotateY(360deg) rotateX(10deg);}

.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;

  background: rgba(20, 25, 40, 0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}


/* History columns */
#historyWrap {
  display: flex;
  gap: 12px;
}

.histCol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.histColHead {
  text-align: center;
  font-weight: 700;
  opacity: 0.8;
}

/* Inline row for controls */
.inline {
  display: flex;
  gap: 10px;
  align-items: center;
}
.inline select { flex: 1; }


/* Winner overlay */
.winnerOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.winnerOverlay.hidden { display: none; }

.winnerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.winnerCard {
  position: relative;
  width: min(520px, 92vw);
  padding: 28px 22px 18px;
  border-radius: 18px;
  background: rgba(20, 20, 26, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  text-align: center;
  overflow: hidden;
}

.winnerTitle {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 4px 0 6px;
  text-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

.winnerName {
  font-size: 34px;
  font-weight: 800;
  margin: 6px 0 8px;
  animation: nameSlide 650ms ease-out both;
}

.winnerSub {
  opacity: 0.85;
  margin-bottom: 14px;
}

@keyframes bingoPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

@keyframes nameSlide {
  0% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Fireworks / confetti */
.fireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 18px;
  opacity: 0.95;
  transform: translateY(-20px) rotate(0deg);
  border-radius: 3px;
  animation: confettiFall 1400ms ease-in forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(520deg); opacity: 0; }
}



/* Winner title glow + shake */
.winnerTitle.glow {
  animation: bingoPop 800ms ease-out both, bingoGlow 1100ms ease-in-out infinite;
}

.winnerCard.shake {
  animation: cardShake 600ms ease-in-out 0ms 1;
}

@keyframes bingoGlow {
  0%, 100% { text-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 14px rgba(255,255,255,0.22); }
  50% { text-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 24px rgba(255,255,255,0.45), 0 0 44px rgba(255,255,255,0.22); }
}

@keyframes cardShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-8px) rotate(-0.6deg); }
  30% { transform: translateX(8px) rotate(0.6deg); }
  45% { transform: translateX(-6px) rotate(-0.4deg); }
  60% { transform: translateX(6px) rotate(0.4deg); }
  75% { transform: translateX(-3px) rotate(-0.2deg); }
  100% { transform: translateX(0); }
}


/* Topbar music player */
.bgMusic {
  max-width: 220px;
  height: 34px;
  margin-left: 8px;
}

@media (max-width: 700px) {
  .bgMusic {
    max-width: 140px;
  }
}


@keyframes popInTB{
  0%   { transform: perspective(900px) scale(0.25) rotateX(-120deg); opacity: 0; }
  55%  { transform: perspective(900px) scale(1.10) rotateX(18deg);   opacity: 1; }
  80%  { transform: perspective(900px) scale(0.98) rotateX(-8deg);   opacity: 1; }
  100% { transform: perspective(900px) scale(1.00) rotateX(0deg);    opacity: 1; }
}



/* BINGO letter color system */
:root{
  --bingoB: #2f9bff;
  --bingoI: #7d58ff;
  --bingoN: #21c07a;
  --bingoG: #ff5b8a;
  --bingoO: #ffcc3a;
}

.L-B{ --letterColor: var(--bingoB); }
.L-I{ --letterColor: var(--bingoI); }
.L-N{ --letterColor: var(--bingoN); }
.L-G{ --letterColor: var(--bingoG); }
.L-O{ --letterColor: var(--bingoO); }

/* Card header pills */
.gridHead{
  position: relative;
}
.gridHead.L-B, .gridHead.L-I, .gridHead.L-N, .gridHead.L-G, .gridHead.L-O{
  border-color: color-mix(in srgb, var(--letterColor) 55%, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--letterColor) 18%, transparent);
  color: rgba(240,245,255,0.95);
}
.gridHead.L-B::after, .gridHead.L-I::after, .gridHead.L-N::after, .gridHead.L-G::after, .gridHead.L-O::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--letterColor) 35%, transparent), transparent 58%);
  opacity: 0.8;
  pointer-events:none;
}

/* History pills */
.histBall.L-B, .histBall.L-I, .histBall.L-N, .histBall.L-G, .histBall.L-O{
  border-color: color-mix(in srgb, var(--letterColor) 55%, rgba(255,255,255,0.12));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--letterColor) 20%, transparent),
    0 10px 22px rgba(0,0,0,0.25);
}
.histBall.L-B::after, .histBall.L-I::after, .histBall.L-N::after, .histBall.L-G::after, .histBall.L-O::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--letterColor) 38%, transparent), transparent 55%);
  opacity: 0.9;
  pointer-events:none;
}

.histColHead{
  font-weight: 900;
}
.histColHead.L-B, .histColHead.L-I, .histColHead.L-N, .histColHead.L-G, .histColHead.L-O{
  color: color-mix(in srgb, var(--letterColor) 80%, white 20%);
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}


/* Modal */
.modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
}
.modal.hidden{ display:none; }

.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.modalCard{
  position: relative;
  width: min(560px, 92vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  border-radius: 18px;
  background: rgba(20, 20, 26, 0.94);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modalTitle{
  font-weight: 900;
  font-size: 18px;
}
.modalBody{
  padding: 14px 16px 4px;
}
.modalFooter{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:flex-end;
}

input[type="range"]{
  width: 100%;
}


/* Chat */
.chatPanel h3{ margin-bottom:10px; }
.chatMessages{
  height: 220px;
  overflow: auto;
  border: 1px solid var(--outline);
  background: rgba(0,0,0,0.85);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chatMsg{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(234,240,255,0.10);
  background: rgba(17,26,51,0.95);
}
.chatMeta{
  display:flex;
  gap:8px;
  align-items:baseline;
}
.chatName{ font-weight: 900; }
.chatTime{ font-size:12px; color: var(--muted); }
.chatText{ white-space: pre-wrap; word-break: break-word; }
.chatText .mention{
  color: rgba(125,255,182,0.95);
  font-weight: 900;
}

.chatInputRow{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}
.chatInputRow input{ flex: 1; }
.chatHint{ margin-top:8px; font-size:12px; }

/* Mention popup */
.mentionOverlay{
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
}
.mentionOverlay.hidden{ display:none; }

.mentionBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.mentionCard{
  position: relative;
  width: min(520px, 92vw);
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgba(20, 20, 26, 0.94);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.mentionTitle{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.mentionFrom{
  color: var(--muted);
  margin-bottom: 10px;
}
.mentionText{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
}


/* Mention autocomplete */
.chatPanel{ position: relative; }

.mentionSuggestions{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 78px; /* above input row */
  max-height: 180px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(17,26,51,0.92);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 5;
}
.mentionSuggestions.hidden{ display:none; }

.mentionItem{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select:none;
}
.mentionItem:hover, .mentionItem.active{
  background: rgba(255,255,255,0.08);
}
.mentionItem .left{
  display:flex;
  gap: 10px;
  align-items:center;
}
.mentionBadge{
  font-weight: 900;
  opacity: 0.9;
}
.mentionItem .sub{
  font-size: 12px;
  color: var(--muted);
}


/* Chat drawer (mobile) */
.chatDrawerBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  /*backdrop-filter: blur(3px);*/
  z-index: 9000;
}
.chatDrawerBackdrop.hidden{ display:none; }

@media (max-width: 920px) {
  /* Make chat panel a drawer on small screens */
  .chatPanel{
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: 10px;
    top: 70px;
    z-index: 9001;
    transform: translateY(110%);
    transition: transform 240ms ease;
    margin: 0 !important;
  }
  .chatPanel.open{
    transform: translateY(0%);
  }
  .chatMessages{
    height: calc(100% - 92px);
  }
}