:root {
  --bg: #050817;
  --panel: rgba(8, 14, 38, .82);
  --panel-2: rgba(14, 18, 48, .74);
  --line: rgba(134, 159, 255, .22);
  --blue: #4fc8ff;
  --blue2: #6978ff;
  --pink: #ff4fd8;
  --pink2: #a95cff;
  --text: #e9edff;
  --muted: #8e98c7;
  --danger: #ff668c;
  --cell-gap: clamp(6px, 1.5vw, 10px);
  --radius: 28px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(93, 87, 255, .16), transparent 42%),
    radial-gradient(circle at 0 62%, rgba(0, 128, 255, .10), transparent 34%),
    radial-gradient(circle at 100% 56%, rgba(255, 0, 200, .10), transparent 36%),
    linear-gradient(180deg, #060a1b 0%, #050714 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; }

.ambient {
  position: fixed;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .11;
  pointer-events: none;
}
.ambient-a { left: -30vw; top: 30vh; background: #006eff; }
.ambient-b { right: -32vw; top: 20vh; background: #ff18c8; }
.scanlines {
  position: fixed; inset: 0; pointer-events: none; opacity: .035;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px);
  mix-blend-mode: soft-light;
}

.app-shell {
  width: min(100%, 650px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.brand-block { text-align: center; margin: 3px 0 20px; }
.brand-mark {
  width: 42px; height: 42px; margin: 0 auto 7px;
  border: 1px solid rgba(143, 164, 255, .28);
  border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 18px rgba(102, 121, 255, .12), 0 0 22px rgba(137, 75, 255, .08);
}
.brand-mark span {
  width: 15px; height: 15px; transform: rotate(45deg);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, var(--blue), var(--pink)) 1;
  box-shadow: 0 0 9px rgba(148, 99, 255, .55);
}
h1 {
  margin: 0;
  font-size: clamp(36px, 9vw, 58px);
  line-height: .95;
  font-weight: 260;
  letter-spacing: .18em;
  padding-left: .18em;
  background: linear-gradient(100deg, #7ee0ff 10%, #a8b7ff 45%, #ef74f0 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 28px rgba(129, 107, 255, .10);
}
.subtitle {
  margin-top: 11px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: #abb4df; font-size: 11px; letter-spacing: .36em; padding-left: .36em;
}
.subtitle span { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, rgba(113, 147, 255, .45)); }
.subtitle span:last-child { background: linear-gradient(90deg, rgba(255, 91, 218, .45), transparent); }

.score-card {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  min-height: 86px;
  border: 1px solid rgba(113, 137, 244, .25);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(5, 15, 43, .82), rgba(26, 8, 43, .56));
  box-shadow: inset 0 0 30px rgba(79, 107, 255, .06), 0 16px 42px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.score-side { display: flex; align-items: center; gap: 12px; padding: 13px 19px; }
.ai-side { justify-content: flex-end; text-align: right; }
.round-box {
  min-width: 86px; padding: 13px 16px; text-align: center;
  display: grid; place-content: center;
  border-left: 1px solid rgba(132, 145, 222, .17);
  border-right: 1px solid rgba(132, 145, 222, .17);
}
.score-label { font-size: 10px; letter-spacing: .21em; color: #a8afd0; font-weight: 700; }
.score-value { margin-top: 1px; font-size: 28px; font-weight: 500; }
.player-side .score-value { color: var(--blue); text-shadow: 0 0 18px rgba(79, 200, 255, .35); }
.ai-side .score-value { color: var(--pink); text-shadow: 0 0 18px rgba(255, 79, 216, .32); }
.round-value { font-size: 22px; margin-top: 5px; color: #d2d5ff; }
.symbol.tiny { font-size: 40px; width: 42px; text-align: center; line-height: 1; font-weight: 240; }
.x-symbol { color: var(--blue); text-shadow: 0 0 12px rgba(79, 200, 255, .55); }
.o-symbol { color: var(--pink); text-shadow: 0 0 12px rgba(255, 79, 216, .5); }

.status-wrap { text-align: center; margin: 23px 0 12px; }
.status-pill {
  min-width: 205px; min-height: 48px; padding: 9px 21px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid rgba(112, 132, 255, .29); border-radius: 999px;
  background: rgba(7, 12, 37, .78);
  font-size: 13px; letter-spacing: .18em; font-weight: 750;
  box-shadow: inset 0 0 18px rgba(80, 103, 255, .05), 0 0 20px rgba(43, 64, 193, .08);
}
.status-pill.thinking { border-color: rgba(255, 80, 218, .27); }
.status-pill.winner { animation: winnerPulse 1s ease-in-out infinite alternate; }
.status-icon { width: 22px; font-size: 24px; line-height: 1; }
.rule-note { margin-top: 8px; color: #65709e; font-size: 9px; letter-spacing: .20em; }

.board-frame {
  position: relative;
  width: 100%; aspect-ratio: 1;
  padding: clamp(10px, 2.3vw, 15px);
  border: 1px solid rgba(100, 135, 255, .42);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(21, 42, 95, .35), rgba(30, 9, 57, .28));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 0 35px rgba(59, 91, 255, .09),
    0 0 55px rgba(255, 40, 216, .045);
}
.board-frame::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(69, 200, 255, .75), rgba(125, 92, 255, .12) 50%, rgba(255, 79, 216, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.board-glow {
  position: absolute; inset: 12%; filter: blur(45px); opacity: .08; pointer-events: none;
  background: conic-gradient(from 90deg, var(--blue), transparent, var(--pink), transparent, var(--blue));
}
.board {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: var(--cell-gap);
}
.cell {
  position: relative;
  appearance: none; border: 1px solid rgba(116, 139, 231, .22); outline: none;
  border-radius: clamp(10px, 2.5vw, 16px);
  background:
    radial-gradient(circle at 50% 50%, rgba(70, 102, 213, .09), transparent 60%),
    linear-gradient(145deg, rgba(12, 25, 60, .85), rgba(10, 12, 37, .88));
  box-shadow: inset 0 0 21px rgba(74, 91, 184, .04), 0 5px 16px rgba(0, 0, 0, .17);
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cell::after {
  content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: #5f72be; opacity: .42; box-shadow: 0 0 7px #517aff;
  transition: opacity .15s ease;
}
.cell:not(.taken):hover { transform: translateY(-1px); border-color: rgba(95, 188, 255, .46); }
.cell:not(.taken):active { transform: scale(.96); }
.cell.taken { cursor: default; }
.cell.taken::after { opacity: 0; }
.cell.win { border-color: rgba(255,255,255,.35); animation: cellWin .85s ease-in-out infinite alternate; }
.mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Arial, sans-serif; line-height: 1; font-weight: 200;
  opacity: 0; transform: scale(.3) rotate(-12deg);
  animation: markIn .25s cubic-bezier(.2,.9,.3,1.35) forwards;
}
.mark.x {
  font-size: clamp(38px, 11vw, 72px); color: #6ed9ff;
  text-shadow: 0 0 7px rgba(100, 219, 255, .78), 0 0 22px rgba(60, 97, 255, .46);
}
.mark.o {
  font-size: clamp(42px, 12vw, 78px); color: #ff7ce8;
  text-shadow: 0 0 7px rgba(255, 98, 226, .78), 0 0 22px rgba(255, 34, 202, .44);
}

.win-line { display:none; }
.controls { display: grid; grid-template-columns: 52px 1fr 52px; gap: 13px; align-items: center; margin-top: 23px; }
button { color: var(--text); border: 0; cursor: pointer; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(9, 17, 46, .72);
  border: 1px solid rgba(105, 129, 221, .25);
  transition: transform .12s ease, border-color .15s ease;
}
.icon-btn:active, .restart-btn:active { transform: scale(.97); }
.icon-btn svg { width: 20px; height: 20px; fill: #8190ca; }
.icon-btn.off svg { opacity: .38; }
.restart-btn {
  height: 58px; border-radius: 999px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 13px;
  letter-spacing: .19em; font-size: 13px; font-weight: 750;
  background: linear-gradient(100deg, rgba(21, 79, 214, .84), rgba(76, 50, 205, .85) 48%, rgba(203, 48, 190, .84));
  border: 1px solid rgba(191, 177, 255, .55);
  box-shadow: 0 0 22px rgba(65, 111, 255, .18), 0 0 24px rgba(255, 54, 212, .11), inset 0 0 18px rgba(255,255,255,.07);
}
.restart-btn::after { content:""; position:absolute; inset:0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.15) 49%, transparent 63%); transform: translateX(-120%); transition: transform .45s ease; }
.restart-btn:hover::after { transform: translateX(120%); }
.restart-btn svg { width: 24px; height: 24px; fill: white; }

footer {
  margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 10px;
  color: #626d9d; font-size: 8px; letter-spacing: .18em; white-space: nowrap;
}
footer i { width: 3px; height: 3px; background: #8d6cff; transform: rotate(45deg); box-shadow: 0 0 6px #9e65ff; }

.toast {
  position: fixed; z-index: 20; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 30px);
  padding: 10px 16px; border-radius: 999px; background: rgba(9,13,33,.94); border: 1px solid rgba(127,141,216,.28);
  color: #dfe5ff; font-size: 11px; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes markIn { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes cellWin { from { box-shadow: inset 0 0 15px rgba(255,255,255,.03); } to { box-shadow: inset 0 0 28px rgba(126, 118, 255, .18), 0 0 17px rgba(126, 118, 255, .10); } }
@keyframes winnerPulse { from { box-shadow: 0 0 8px rgba(118,117,255,.06); } to { box-shadow: 0 0 30px rgba(118,117,255,.19); } }

@media (max-width: 460px) {
  .app-shell { padding-left: 12px; padding-right: 12px; justify-content: flex-start; }
  .brand-block { margin-top: 1px; margin-bottom: 15px; }
  .brand-mark { width: 34px; height: 34px; margin-bottom: 5px; }
  h1 { font-size: 38px; }
  .subtitle { margin-top: 8px; font-size: 8px; }
  .score-card { min-height: 72px; border-radius: 20px; }
  .score-side { padding: 10px 12px; gap: 7px; }
  .round-box { min-width: 68px; padding: 10px 8px; }
  .score-label { font-size: 8px; }
  .score-value { font-size: 24px; }
  .symbol.tiny { font-size: 31px; width: 30px; }
  .status-wrap { margin-top: 16px; margin-bottom: 9px; }
  .status-pill { min-height: 42px; min-width: 178px; font-size: 11px; }
  .board-frame { border-radius: 22px; }
  .controls { margin-top: 16px; grid-template-columns: 46px 1fr 46px; }
  .icon-btn { width: 46px; height: 46px; }
  .restart-btn { height: 52px; }
  footer { margin-top: 14px; font-size: 7px; }
}

@media (max-height: 760px) and (orientation: portrait) {
  .brand-mark { display: none; }
  .brand-block { margin-bottom: 10px; }
  h1 { font-size: 32px; }
  .subtitle { margin-top: 6px; }
  .score-card { min-height: 62px; }
  .status-wrap { margin: 10px 0 7px; }
  .status-pill { min-height: 38px; }
  .rule-note { display: none; }
  .controls { margin-top: 10px; }
  footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}