/* ==========================================================================
   Tic-Tac-Toe — Chat Game Overlay
   Mobile-first stylesheet, 320px and up. No horizontal scroll anywhere.
   (Demo harness styles removed — embedded in Sorry Kitty chat platform)
   ========================================================================== */

:root {
  /* TicTacToe variables for root and overlay */
  --ttt-bg-app:#0b0c12;
  --ttt-backdrop:rgba(6,7,12,0.78);
  --ttt-surface:#15171f;
  --ttt-surface-raised:#1b1e29;
  --ttt-surface-inset:#101219;
  --ttt-border:#272b3a;
  --ttt-border-soft:#1f2230;
  --ttt-text-primary:#f3f4f8;
  --ttt-text-muted:#9498ab;
  --ttt-text-faint:#5c6079;
  --ttt-accent-x:#5b8cff;
  --ttt-accent-x-soft:rgba(91,140,255,0.16);
  --ttt-accent-o:#ff6b8b;
  --ttt-accent-o-soft:rgba(255,107,139,0.16);
  --ttt-gold:#ffcf5c;
  --ttt-win-a:#5b8cff;
  --ttt-win-b:#8f6cff;
  --ttt-success:#3ddc97;
  --ttt-radius-lg:24px;
  --ttt-radius-md:16px;
  --ttt-radius-sm:11px;
  --ttt-ease-out:cubic-bezier(.22,.9,.32,1);
  --ttt-ease-pop:cubic-bezier(.34,1.56,.64,1);
}

/* Box-sizing only inside the overlay */
.ttt-overlay, .ttt-overlay *, .ttt-overlay *::before, .ttt-overlay *::after {
  box-sizing:border-box;
}

/* ==========================================================================
   Overlay shell
   ========================================================================== */

.ttt-overlay{
  --bg-app:#0b0c12;
  --backdrop:rgba(6,7,12,0.78);
  --surface:#15171f;
  --surface-raised:#1b1e29;
  --surface-inset:#101219;
  --border:#272b3a;
  --border-soft:#1f2230;
  --text-primary:#f3f4f8;
  --text-muted:#9498ab;
  --text-faint:#5c6079;
  --accent-x:#5b8cff;
  --accent-x-soft:rgba(91,140,255,0.16);
  --accent-o:#ff6b8b;
  --accent-o-soft:rgba(255,107,139,0.16);
  --gold:#ffcf5c;
  --win-a:#5b8cff;
  --win-b:#8f6cff;
  --success:#3ddc97;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:11px;
  --ease-out:cubic-bezier(.22,.9,.32,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);

  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;
}
.ttt-overlay button{ font-family:inherit; }
.ttt-overlay.is-open{
  visibility:visible;
  pointer-events:auto;
}

.ttt-backdrop{
  position:absolute;
  inset:0;
  background:var(--backdrop);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .28s var(--ease-out);
}
.ttt-overlay.is-open .ttt-backdrop{ opacity:1; }

/* ==========================================================================
   Card — slides up from the bottom on mobile, centers as a modal on larger
   viewports.
   ========================================================================== */

.ttt-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px 24px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  opacity:0;
  transition:transform .32s var(--ease-out), opacity .24s var(--ease-out);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,0.6);
}
.ttt-overlay.is-open .ttt-card{
  transform:translateY(0);
  opacity:1;
}

@media (min-width:560px){
  .ttt-overlay{ align-items:center; }
  .ttt-card{
    border-radius:var(--radius-lg);
    padding:22px;
    transform:translateY(24px) scale(0.96);
  }
  .ttt-overlay.is-open .ttt-card{
    transform:translateY(0) scale(1);
  }
}

/* ==========================================================================
   Close button
   ========================================================================== */

.ttt-icon-btn{
  border:none;
  background:var(--surface-raised);
  color:var(--text-muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.ttt-close-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  border-radius:50%;
  z-index:2;
}
.ttt-close-btn:hover{ color:var(--text-primary); background:var(--border); }
.ttt-close-btn:active{ transform:scale(0.9); }

/* ==========================================================================
   Players header
   ========================================================================== */

.ttt-players{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 30px 0 4px;
}

.ttt-player{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}

.ttt-avatar{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--surface-raised);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ttt-avatar-fallback{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--text-primary);
}
.ttt-avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.ttt-avatar-ring{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#ttt-player-one .ttt-avatar-ring{ }
#ttt-player-two .ttt-avatar-ring{ }
.ttt-player.is-active .ttt-avatar-ring{
  box-shadow:0 0 0 3px var(--ring-color, var(--accent-x));
}
#ttt-player-one.is-active .ttt-avatar-ring{ --ring-color:var(--accent-x); }
#ttt-player-two.is-active .ttt-avatar-ring{ --ring-color:var(--accent-o); }

.ttt-player-name{
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  max-width:100px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ttt-player-score{
  font-family:'Space Grotesk', sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--text-muted);
  line-height:1;
}
#ttt-player-one .ttt-player-score{ color:var(--accent-x); }
#ttt-player-two .ttt-player-score{ color:var(--accent-o); }

.ttt-vs{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--text-faint);
  letter-spacing:0.04em;
  padding:0 4px;
  flex-shrink:0;
}

/* ==========================================================================
   Turn indicator
   ========================================================================== */

.ttt-turn-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:18px auto 14px;
  padding:8px 16px;
  width:max-content;
  max-width:90%;
  background:var(--surface-raised);
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  color:var(--text-muted);
  transition:background .2s ease;
}
.ttt-turn-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-x);
  flex-shrink:0;
  transition:background .2s ease, box-shadow .2s ease;
  box-shadow:0 0 0 3px var(--accent-x-soft);
}
.ttt-turn-indicator.turn-o .ttt-turn-dot{
  background:var(--accent-o);
  box-shadow:0 0 0 3px var(--accent-o-soft);
}
.ttt-turn-indicator.turn-ended{
  opacity:0.5;
}

/* ==========================================================================
   Board
   ========================================================================== */

.ttt-board-wrap{
  position:relative;
  width:min(84vw, 320px);
  aspect-ratio:1/1;
  margin:0 auto;
}

.ttt-board{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:9px;
}

.ttt-board.is-disabled .ttt-cell{
  pointer-events:none;
  cursor:default;
}

.ttt-cell{
  position:relative;
  background:var(--surface-inset);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  min-width:48px;
  min-height:48px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .15s ease, transform .1s ease, border-color .15s ease;
}
.ttt-cell:active:not(.is-filled):not(.is-locked){
  transform:scale(0.94);
}
.ttt-cell:not(.is-filled):not(.is-locked):hover{
  border-color:var(--border);
  background:#161925;
}
.ttt-cell.is-locked{ cursor:default; }

.ttt-cell.is-win{
  background:rgba(255,207,92,0.08);
  border-color:rgba(255,207,92,0.35);
}

.ttt-mark{
  width:56%;
  height:56%;
}
.ttt-mark svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.ttt-mark path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:9;
}
.ttt-mark.mark-x path{ stroke:var(--accent-x); }
.ttt-mark.mark-o path{ stroke:var(--accent-o); }

.ttt-mark path.draw-in{
  stroke-dasharray:180;
  stroke-dashoffset:180;
  animation:ttt-draw-mark .28s var(--ease-out) forwards;
}
.ttt-mark path.draw-in.delay{ animation-delay:.08s; }
@keyframes ttt-draw-mark{ to{ stroke-dashoffset:0; } }

.ttt-mark.pop-in{
  animation:ttt-mark-pop .28s var(--ease-pop) backwards;
}
@keyframes ttt-mark-pop{
  from{ transform:scale(0.5); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* winning strike line */
.ttt-win-line{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.ttt-win-line path{
  fill:none;
  stroke:url(#ttt-win-gradient);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:420;
  stroke-dashoffset:420;
  filter:drop-shadow(0 0 6px rgba(143,108,255,0.65));
}
.ttt-win-line.is-drawn path{
  animation:ttt-win-draw .4s var(--ease-out) forwards;
}
@keyframes ttt-win-draw{ to{ stroke-dashoffset:0; } }

/* board-wide shake used for the draw result */
.ttt-board-wrap.is-draw-shake{
  animation:ttt-shake .4s var(--ease-out);
}
@keyframes ttt-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px) rotate(-0.6deg); }
  40%{ transform:translateX(5px) rotate(0.5deg); }
  60%{ transform:translateX(-4px) rotate(-0.4deg); }
  80%{ transform:translateX(3px) rotate(0.3deg); }
}

.ttt-confetti-canvas{
  position:absolute;
  top:-40%;
  left:-20%;
  width:140%;
  height:180%;
  pointer-events:none;
  z-index:5;
}

/* ==========================================================================
   Draw counter strip
   ========================================================================== */

.ttt-status-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:16px;
  font-size:12px;
  color:var(--text-faint);
}
.ttt-draw-count{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  color:var(--text-muted);
}

/* ==========================================================================
   End-of-round screen
   ========================================================================== */

.ttt-end-screen{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(11,12,18,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.ttt-end-screen.is-visible{
  opacity:1;
  pointer-events:auto;
}

.ttt-end-content{
  width:100%;
  max-width:280px;
  text-align:center;
  background:var(--surface-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 22px 22px;
  transform:translateY(16px) scale(0.92);
  opacity:0;
  transition:transform .34s var(--ease-pop), opacity .26s ease;
}
.ttt-end-screen.is-visible .ttt-end-content{
  transform:translateY(0) scale(1);
  opacity:1;
}

.ttt-end-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-x-soft);
  color:var(--accent-x);
}
.ttt-end-icon svg{ width:28px; height:28px; }
.ttt-end-icon.is-draw{
  background:var(--surface);
  color:var(--text-muted);
}
.ttt-end-icon.is-o{
  background:var(--accent-o-soft);
  color:var(--accent-o);
}

.ttt-end-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  font-weight:700;
  margin:0 0 4px;
}
.ttt-end-sub{
  font-size:13px;
  color:var(--text-muted);
  margin:0 0 22px;
}

.ttt-end-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ttt-btn{
  min-height:48px;
  border-radius:var(--radius-md);
  border:none;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, filter .15s ease, background .15s ease;
}
.ttt-btn:active{ transform:scale(0.96); }

.ttt-btn-primary{
  background:linear-gradient(135deg, var(--accent-x), var(--win-b));
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(91,140,255,0.65);
}
.ttt-btn-primary:hover{ filter:brightness(1.08); }

.ttt-btn-secondary{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-muted);
}
.ttt-btn-secondary:hover{ color:var(--text-primary); border-color:var(--text-faint); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

.ttt-cell:focus-visible,
.ttt-icon-btn:focus-visible,
.ttt-btn:focus-visible{
  outline:2px solid var(--accent-x);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .ttt-card,
  .ttt-backdrop,
  .ttt-mark.pop-in,
  .ttt-mark path.draw-in,
  .ttt-win-line path,
  .ttt-board-wrap.is-draw-shake,
  .ttt-end-content,
  .ttt-end-screen{
    animation:none !important;
    transition:none !important;
  }
  .ttt-win-line path{ stroke-dashoffset:0 !important; }
}

/* small-phone safety net */
@media (max-width:340px){
  .ttt-board-wrap{ width:88vw; }
  .ttt-avatar{ width:48px; height:48px; }
  .ttt-player-name{ font-size:12px; max-width:80px; }
}