/* ═══════ RESET & BASE ═══════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;height:100dvh;overflow:hidden;user-select:none;-webkit-user-select:none}
body{
  background:#07101e;
  background-image:
    radial-gradient(ellipse at 5% 5%,rgba(20,184,166,.16) 0,transparent 50%),
    radial-gradient(ellipse at 95% 5%,rgba(239,68,68,.12) 0,transparent 50%),
    radial-gradient(ellipse at 50% 100%,rgba(16,185,129,.09) 0,transparent 50%);
  font-family:Tajawal,sans-serif;color:#fff;
  display:flex;flex-direction:column;align-items:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ═══════ GLASS ═══════ */
.glass{
  background:rgba(15,25,45,.75);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ═══════ BOARD ═══════ */
.board-wrap{
  background:linear-gradient(145deg,#162035,#0b1524);
  border:2px solid #1c2f50;border-radius:1.5rem;
  box-shadow:0 30px 60px -12px rgba(0,0,0,.85),
    inset 0 4px 8px rgba(255,255,255,.05),
    inset 0 -4px 8px rgba(0,0,0,.5);
  padding:.55rem;
}
#grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.32rem}
.cell{
  border-radius:50%;background:#030810;cursor:pointer;
  box-shadow:inset 0 8px 16px rgba(0,0,0,.98),inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
  transition:background .15s;
  aspect-ratio:1/1;
}
.cell.col-hl{background:#060e1e}
.cell.winner-cell .tok{animation:pGlow 1.2s infinite alternate;border:2.5px solid #fff}
.cell.last-move::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:25%;height:25%;border-radius:50%;background:rgba(255,255,255,.9);z-index:12;box-shadow:0 0 8px rgba(255,255,255,.8)}
.cell.winner-cell.last-move::after{display:none}

/* ═══════ TOKENS ═══════ */
.tok{
  position:absolute;top:7%;left:7%;width:86%;height:86%;
  border-radius:50%;z-index:10;
}
.tok.red{
  background:radial-gradient(circle at 33% 30%,#ff9a9a,#ef4444,#991b1b);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.6),inset 0 4px 8px rgba(255,255,255,.3),0 4px 14px rgba(239,68,68,.55);
  border:1.5px solid rgba(252,165,165,.5);
}
.tok.grn{
  background:radial-gradient(circle at 33% 30%,#6ee7b7,#10b981,#065f46);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.6),inset 0 4px 8px rgba(255,255,255,.3),0 4px 14px rgba(16,185,129,.55);
  border:1.5px solid rgba(167,243,208,.5);
}

/* ═══════ ANIMATIONS ═══════ */
@keyframes drop{
  0%  {transform:translateY(-460px) scale(.88);opacity:0}
  62% {transform:translateY(12px) scale(1.05)}
  82% {transform:translateY(-5px) scale(.98)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes pGlow{
  0%  {filter:drop-shadow(0 0 5px currentColor);transform:scale(1)}
  100%{filter:drop-shadow(0 0 22px currentColor);transform:scale(1.07)}
}
@keyframes popIn{
  0%  {transform:scale(.78) translateY(20px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}
@keyframes logoGlow{
  0%  {filter:drop-shadow(0 0 6px rgba(20,184,166,.45))}
  100%{filter:drop-shadow(0 0 18px rgba(20,184,166,.85))}
}
@keyframes spinR{to{transform:rotate(360deg)}}
@keyframes confFall{0%{transform:translateY(-8vh) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(800deg);opacity:0}}
.animate-drop{animation:drop .52s cubic-bezier(.25,.46,.45,.94) forwards}
.animate-pop {animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}

/* ═══════ BUTTONS ═══════ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  border:none;border-radius:.85rem;cursor:pointer;
  font-family:Tajawal,sans-serif;font-weight:800;font-size:.95rem;
  padding:.78rem 1rem;transition:all .2s;color:#fff;width:100%;
}
.btn:active{transform:scale(.96) translateY(1px)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-blue  {background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 8px 20px -5px rgba(59,130,246,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-grn   {background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 20px -5px rgba(16,185,129,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 8px 20px -5px rgba(139,92,246,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-teal  {background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 8px 20px -5px rgba(20,184,166,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-red   {background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 8px 20px -5px rgba(239,68,68,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-amber {background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 20px -5px rgba(245,158,11,.45),inset 0 2px 0 rgba(255,255,255,.18)}
.btn-ghost {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);color:#94a3b8}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ═══════ INPUTS ═══════ */
.inp{
  background:rgba(3,8,16,.8);border:1.5px solid rgba(255,255,255,.1);
  border-radius:.75rem;padding:.7rem 1rem;
  font-family:Tajawal,sans-serif;font-size:.95rem;font-weight:700;
  color:#fff;width:100%;outline:none;text-align:center;
  transition:border-color .2s;
}
.inp:focus{border-color:#14b8a6}
.inp::placeholder{color:#374151}

/* ═══════ SCORE CARDS ═══════ */
.sc-card{
  border-radius:.85rem;padding:.45rem .7rem;
  display:flex;align-items:center;gap:.45rem;
  transition:all .3s;border:1.5px solid transparent;
}
.sc-card.my-turn{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 2px rgba(255,255,255,.1),0 6px 20px -5px rgba(0,0,0,.4);
  transform:scale(1.03);
}

/* ═══════ DIFF PILLS ═══════ */
.dpill{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:.6rem;padding:.45rem .6rem;font-weight:800;font-size:.82rem;
  color:#64748b;cursor:pointer;transition:all .2s;text-align:center;
}
.dpill.on{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:0 5px 14px -4px rgba(59,130,246,.5)}

/* ═══════ TIMER ═══════ */
#timer-track{height:6px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;flex:1}
#timer-fill {height:100%;border-radius:99px;transition:width .95s linear,background .5s}
#timer-num  {font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700;min-width:2ch;text-align:center;transition:color .5s}

/* ═══════ TURN DOT (header) ═══════ */
.tdot{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  transition:background .4s,box-shadow .4s;
}
.tdot.red{background:radial-gradient(circle at 35% 35%,#ff9a9a,#ef4444,#991b1b);box-shadow:0 0 8px #ef4444}
.tdot.grn{background:radial-gradient(circle at 35% 35%,#6ee7b7,#10b981,#065f46);box-shadow:0 0 8px #10b981}

/* ═══════ TOAST ═══════ */
#toast{
  position:fixed;top:16px;left:50%;
  transform:translateX(-50%) translateY(-90px);
  padding:10px 22px;
  background:rgba(7,16,30,.97);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;font-weight:700;font-size:.88rem;z-index:999;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  box-shadow:0 16px 40px -8px rgba(0,0,0,.65);white-space:nowrap;
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err {border-color:rgba(239,68,68,.5);color:#fca5a5}
#toast.ok  {border-color:rgba(16,185,129,.5);color:#6ee7b7}
#toast.info{border-color:rgba(59,130,246,.5);color:#93c5fd}

/* ═══════ SPINNER ═══════ */
.spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spinR .75s linear infinite;display:inline-block;flex-shrink:0}

/* ═══════ CONFETTI ═══════ */
.cf{position:fixed;top:0;z-index:80;pointer-events:none;animation:confFall linear forwards}

/* ═══════ SCREENS ═══════ */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;padding:1rem;overflow-y:auto}
.h{display:none!important}

/* ═══════ PANELS ═══════ */
.panel{
  background:rgba(3,8,16,.55);border:1px solid rgba(255,255,255,.07);
  border-radius:1rem;padding:.85rem;margin-top:.2rem;
}

/* ═══════ WINNER SCREEN ═══════ */
#win-scr{background:rgba(4,9,22,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#win-card{border-radius:1.8rem;padding:1.8rem 1.4rem;text-align:center;max-width:330px;width:100%;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);transform:scale(.85)}
#win-scr.show #win-card{transform:scale(1)}

/* ═══════ LOGO ═══════ */
.logo-img{animation:logoGlow 2s ease-in-out infinite alternate}

/* ═══════ BG BLOBS ═══════ */
.blob{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1;animation:float ease-in-out infinite}

/* ═══════ EMOJI CHAT ═══════ */
#emoji-bar{
  display:none;gap:.3rem;padding:.25rem 0;
  flex-wrap:wrap;justify-content:center;align-items:center;
  flex-shrink:0;
}
.ebt{
  font-size:1.3rem;cursor:pointer;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.6rem;padding:.28rem .42rem;
  transition:all .2s;line-height:1;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-width:38px;min-height:38px;
}
.ebt:active{transform:scale(.82);background:rgba(255,255,255,.15);}

/* floating emoji pop */
/* emoji shown inline in score card only — no flying animation */
#emoji-red, #emoji-grn{
  display:inline-block;line-height:1;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .35s;
}


/* ═══════ STATS SCREEN ═══════ */
#stats-scr{padding:1rem}
.stat-card{
  background:rgba(15,25,45,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);border-radius:1rem;padding:.85rem 1rem;
  display:flex;justify-content:space-between;align-items:center;
}
.stat-row{display:flex;gap:.7rem;font-size:.78rem;color:#94a3b8;font-weight:800}
.stat-num{font-family:Orbitron,sans-serif;color:#fff;font-weight:900}
.stat-label-grp{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}

/* ═══════ DISCONNECT BANNER ═══════ */
#dc-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(239,68,68,.95);backdrop-filter:blur(10px);
  padding:.85rem 1.4rem;border-radius:1rem;font-weight:800;font-size:.95rem;
  z-index:55;display:none;animation:popIn .3s ease;
  box-shadow:0 12px 40px rgba(239,68,68,.4);
  white-space:nowrap;text-align:center;
}
#dc-banner.show{display:block}

/* ═══════ QUICK CHAT MESSAGES ═══════ */
.qc-bar{
  display:none;gap:.3rem;flex-shrink:0;
  flex-wrap:wrap;justify-content:center;align-items:center;
  padding:.18rem 0;
}
.qcb{
  font-size:.76rem;font-weight:800;cursor:pointer;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.25);
  border-radius:.55rem;padding:.32rem .55rem;
  transition:all .2s;line-height:1;color:#5eead4;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.qcb:active{transform:scale(.92);background:rgba(20,184,166,.25)}

/* Chat message bubble shown next to player name */
.chat-bubble{
  position:absolute;background:rgba(15,25,45,.95);
  border:1px solid rgba(20,184,166,.4);
  border-radius:.6rem;padding:.4rem .65rem;
  font-size:.75rem;font-weight:700;color:#5eead4;
  white-space:nowrap;z-index:30;pointer-events:none;
  animation:bubbleIn .25s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  max-width:160px;overflow:hidden;text-overflow:ellipsis;
}
@keyframes bubbleIn{
  0%{opacity:0;transform:translateY(8px) scale(.7)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bubbleOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-8px) scale(.85)}
}

/* ═══════ TAB SWITCHER (lobby) ═══════ */
.tab-grp{display:flex;gap:.3rem;background:rgba(3,8,16,.5);border-radius:.7rem;padding:.25rem;margin-bottom:.7rem}
.tab-btn{flex:1;padding:.5rem .3rem;border:none;background:transparent;color:#64748b;font-family:Tajawal,sans-serif;font-weight:800;font-size:.82rem;border-radius:.5rem;cursor:pointer;transition:all .2s}
.tab-btn.on{background:rgba(20,184,166,.18);color:#14b8a6;box-shadow:0 2px 6px rgba(20,184,166,.15)}

/* Pulse animation for "opp disconnected" indicator on score card */
@keyframes oppPulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.sc-card.opp-dc{animation:oppPulse 1.5s ease-in-out infinite}
.sc-card.opp-dc::after{
  content:"📵";position:absolute;top:-4px;right:-4px;
  font-size:.85rem;background:rgba(239,68,68,.9);
  border-radius:50%;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #07101e;
}
.sc-card{position:relative}

/* Stats button on lobby */
#stats-btn{
  position:absolute;top:1rem;left:1rem;z-index:5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:.7rem;padding:.5rem .7rem;cursor:pointer;
  color:#94a3b8;font-size:1.1rem;
  transition:all .2s;
}
#stats-btn:hover{background:rgba(255,255,255,.12);color:#fff}