@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #f4f8ff;
  --card: rgba(255, 255, 255, .78);
  --card-solid: #fff;
  --text: #111fa2;
  --muted: #64709d;
  --line: rgba(17, 31, 162, .11);
  --x: #5478ff;
  --o: #ffde42;
  --accent: #5478ff;
  --accent-2: #111fa2;
  --soft: #e8f5ff;
  --cell: rgba(255, 255, 255, .88);
  --shadow: 0 28px 70px rgba(17, 31, 162, .13);
  --focus: rgba(84, 120, 255, .25);
}

html[data-theme="light"] { --bg:#f7faff; --card:rgba(255,255,255,.92); --text:#111fa2; --muted:#65709b; --line:rgba(17,31,162,.1); --x:#5478ff; --o:#ffde42; --accent:#5478ff; --accent-2:#111fa2; --soft:#eaf6ff; --shadow:0 28px 70px rgba(17,31,162,.11); --focus:rgba(84,120,255,.24); }
html[data-theme="dark"] { color-scheme:dark; --bg:#080f55; --card:rgba(13,24,111,.9); --card-solid:#101d82; --text:#f7fbff; --muted:#aabbea; --line:rgba(83,203,243,.14); --x:#5478ff; --o:#ffde42; --accent:#5478ff; --accent-2:#53cbf3; --soft:#152b8f; --cell:rgba(84,120,255,.13); --shadow:0 30px 80px rgba(3,8,55,.42); --focus:rgba(255,222,66,.26); }
html[data-theme="neon"] { color-scheme:dark; --bg:#04082c; --card:rgba(8,15,74,.94); --card-solid:#0b145f; --text:#ffffff; --muted:#93b9dc; --line:rgba(83,203,243,.17); --x:#5478ff; --o:#ffde42; --accent:#53cbf3; --accent-2:#5478ff; --soft:#101d73; --cell:rgba(17,31,162,.64); --shadow:0 25px 80px rgba(83,203,243,.1); --focus:rgba(255,222,66,.28); }

* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",sans-serif; transition:background .35s,color .35s; overflow-x:hidden; }
body::before, body::after { content:""; position:fixed; width:38vw; aspect-ratio:1; border-radius:50%; filter:blur(1px); opacity:.42; pointer-events:none; z-index:-1; }
body::before { top:-15vw; right:-9vw; background:radial-gradient(circle,var(--soft),transparent 68%); }
body::after { bottom:-17vw; left:-10vw; background:radial-gradient(circle,color-mix(in srgb,#ffde42 30%,transparent),transparent 68%); }
button, select { font:inherit; }
button, select, canvas { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }

.app-shell { width:min(100% - 32px, 720px); min-height:100dvh; margin:auto; display:flex; flex-direction:column; padding:26px 0 18px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-.4px; }
.brand-mark { width:29px; display:grid; grid-template-columns:1fr 1fr; gap:3px; transform:rotate(-5deg); }
.brand-mark i { display:block; aspect-ratio:1; border-radius:4px; background:var(--accent); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background:#ffde42; }
.theme-picker { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
select { cursor:pointer; appearance:none; color:var(--text); background:var(--card-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2377718a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; border:1px solid var(--line); border-radius:11px; padding:9px 34px 9px 12px; outline:none; }
select:focus-visible, button:focus-visible, canvas:focus-visible { box-shadow:0 0 0 4px var(--focus); outline:none; }

.game-card { background:var(--card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.28); box-shadow:var(--shadow); border-radius:32px; padding:clamp(22px,5vw,38px); }
.game-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.17em; }
h1 { margin:0; font-family:Manrope,sans-serif; font-size:clamp(26px,5vw,36px); line-height:1.12; letter-spacing:-1.2px; }
.status { margin:8px 0 0; color:var(--muted); font-size:14px; }
.turn-chip { flex:0 0 66px; height:66px; display:grid; place-items:center; align-content:center; background:var(--soft); border-radius:20px; color:var(--x); transition:color .25s,transform .25s; }
.turn-chip span { font:800 28px/1 Manrope,sans-serif; }
.turn-chip small { margin-top:4px; font-size:8px; font-weight:800; letter-spacing:.14em; color:var(--muted); }
.turn-chip.o { color:var(--o); transform:rotate(3deg); }

.settings { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:28px 0 20px; }
.segmented { display:flex; padding:4px; background:var(--soft); border-radius:13px; }
.segment { min-height:36px; padding:0 18px; border:0; border-radius:10px; background:transparent; cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); transition:.2s ease; }
.segment.active { color:var(--text); background:var(--card-solid); box-shadow:0 3px 10px rgba(40,30,70,.08); }
.difficulty { display:grid; gap:5px; }
.difficulty span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.difficulty select { padding-top:8px; padding-bottom:8px; font-size:13px; }
.difficulty.disabled { opacity:.42; pointer-events:none; }

.board-wrap { position:relative; width:min(100%, 430px); aspect-ratio:1; margin:auto; border-radius:25px; overflow:hidden; }
#board { display:block; width:100%; height:100%; cursor:pointer; touch-action:manipulation; }
.thinking { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; background:color-mix(in srgb,var(--card-solid) 52%,transparent); opacity:0; pointer-events:none; transition:opacity .18s; }
.thinking.show { opacity:1; }
.thinking i { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:bounce .7s infinite alternate; }
.thinking i:nth-child(2) { animation-delay:.14s; } .thinking i:nth-child(3) { animation-delay:.28s; }
@keyframes bounce { to { transform:translateY(-9px); opacity:.4; } }

.actions { display:flex; gap:12px; margin:22px auto 0; width:min(100%,430px); }
.button { flex:1; min-height:48px; border-radius:14px; border:0; cursor:pointer; font-size:14px; font-weight:700; transition:transform .15s,filter .15s,opacity .15s; }
.button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.04); }
.button:active:not(:disabled) { transform:translateY(0) scale(.98); }
.button:disabled { opacity:.36; cursor:not-allowed; }
.button span { font-size:18px; vertical-align:-1px; margin-right:4px; }
.button.primary { color:white; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 25%,transparent); }
html[data-theme="neon"] .button.primary { color:#041114; }
.button.secondary { background:var(--soft); color:var(--text); }

.scoreboard { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:26px; margin-top:26px; border-top:1px solid var(--line); }
.score { min-width:0; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; justify-content:center; column-gap:10px; }
.score-icon { grid-row:1/3; align-self:center; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--soft); color:var(--muted); font:800 17px Manrope; }
.x-score .score-icon { color:var(--x); } .o-score .score-icon { color:var(--o); }
.score strong { font:800 20px/1 Manrope; }
.score small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.12em; margin-top:3px; }
footer { margin-top:auto; padding:20px 6px 0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }
footer button { border:0; background:none; padding:5px; cursor:pointer; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:520px) {
  .app-shell { width:min(100% - 20px,720px); padding-top:max(12px,env(safe-area-inset-top)); }
  .topbar { margin:0 7px 12px; } .theme-picker > span { display:none; }
  .game-card { border-radius:26px; padding:22px 18px; }
  .settings { margin-top:22px; } .segment { padding:0 13px; }
  .turn-chip { width:58px; height:58px; flex-basis:58px; border-radius:17px; }
  .score { column-gap:6px; } .score-icon { width:29px; height:29px; }
}
@media (max-height:720px) and (orientation:landscape) {
  .app-shell { width:min(100% - 20px,920px); padding:10px 0; }
  .topbar, footer { display:none; }
  .game-card { display:grid; grid-template-columns:minmax(200px,1fr) minmax(280px,390px); grid-template-rows:auto auto 1fr; column-gap:28px; padding:20px 26px; }
  .game-head { grid-column:1; } .settings { grid-column:1; flex-direction:column; align-items:stretch; justify-content:center; margin:22px 0 14px; }
  .board-wrap { grid-column:2; grid-row:1/4; height:calc(100vh - 40px); width:auto; max-height:430px; align-self:center; }
  .actions { grid-column:1; margin:0; align-self:end; }
  .scoreboard { grid-column:1; padding-top:14px; margin-top:14px; align-self:end; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }