:root{
  --bg: #0f1724; /* dark navy */
  --card: #0b1220;
  --accent: #7dd3fc; /* cyan */
  --muted: #94a3b8;
  --glass: rgba(255,255,255,0.04);
  --win: linear-gradient(90deg,#86efac,#4ade80);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent 10%),var(--bg);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding: 3rem 1rem;
}
.app{max-width:980px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.top h1{font-weight:700;font-size:1.6rem}
.accent{color:var(--accent)}
.controls{display:flex;gap:0.75rem;align-items:center}
.controls label{font-size:0.9rem;color:var(--muted);display:flex;flex-direction:column;align-items:flex-start}
.controls select{margin-top:0.4rem;padding:0.35rem 0.5rem;border-radius:8px;background:var(--card);border:1px solid rgba(255,255,255,0.04);color:inherit}
.btn{background:var(--accent);color:#072127;border:none;padding:0.5rem 0.9rem;border-radius:10px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.board-wrap{display:flex;justify-content:center;align-items:center;margin:1.25rem 0}
.board{width:min(460px,70vmin);height:min(460px,70vmin);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.box{background:var(--glass);border-radius:10px;border:none;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,8vmin,72px);font-weight:800;color:#e6eef8;cursor:pointer;transition:transform .15s ease,background .12s ease;user-select:none}
.box:hover{transform:translateY(-4px);background:rgba(255,255,255,0.03)}
.box:disabled{cursor:default;opacity:0.9}

/* Splash (glass card with glossy sheen) */
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.8));backdrop-filter: blur(6px);z-index:60}
.splash-card{width:min(720px,88vmin);height:min(720px,88vmin);max-width:880px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border-radius:20px;padding:1.5rem;box-shadow:0 36px 90px rgba(2,6,23,0.8);border:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:1rem;align-items:center;position:relative;overflow:visible}
.splash-card h2{margin:0;color:#eaf6ff;font-size:1.6rem}
.splash-card .muted{color:rgba(255,255,255,0.75)}
.splash-controls{display:flex;gap:1rem;flex-wrap:wrap;width:100%;justify-content:center}
.splash-controls label{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:flex-start;color:#dff7ff}
.splash-actions{width:100%;display:flex;justify-content:center;margin-top:0.25rem}

/* glossy sheen */
.splash-card::after{content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%) rotate(-20deg);width:68%;height:28%;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02) 40%, rgba(255,255,255,0));filter:blur(10px);border-radius:50%}

.logo-wrap{display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg, rgba(125,211,252,0.12), rgba(244,114,182,0.08));border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.logo-wrap svg{width:180px;height:180px}

/* glassy select inputs */
.splash-controls select, .controls select{
  -webkit-appearance:none;appearance:none;border:none;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:inherit;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 22px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02);min-width:140px}

.splash-controls select{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%, rgba(0,0,0,0.06) 50%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M0 0 L5 6 L10 0" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:calc(100% - 14px) center, calc(100% - 26px) center}
.controls select{padding-right:28px}

/* animated entrance */
.splash-card{transform:translateY(18px);opacity:0;animation:popIn .5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes popIn{to{transform:none;opacity:1}}

/* bigger, glossy start button */
.splash-actions .btn{padding:0.9rem 1.2rem;font-size:1.05rem;border-radius:14px;background:linear-gradient(90deg,#7dd3fc,#fb7185);box-shadow:0 18px 48px rgba(123,80,255,0.12);color:#02121a;font-weight:700}

/* make board and boxes more colorful */
.board{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:16px}
.box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 20px rgba(12,18,29,0.6)}
.box{transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.box:active{transform:scale(.98)}

/* colored glyphs */
.box[data-glyph="O"]{color:#fb7185}
.box[data-glyph="X"]{color:#7dd3fc}

.highlight{box-shadow:0 8px 30px rgba(66, 255, 160, 0.14);background:linear-gradient(90deg,#86efac,#4ade80);color:#06201a}

.status{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}
#turn{font-weight:600}
.actions{display:flex;gap:.5rem}

.dialog{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);backdrop-filter:blur(4px)}
.dialog.hide{display:none}
.dialog-card{background:linear-gradient(180deg,#071329,#0b1726);padding:1.25rem;border-radius:12px;min-width:280px;color:var(--muted);box-shadow:0 12px 40px rgba(2,6,23,0.6)}
.dialog-card h2{color:#e6eef8;margin-bottom:0.5rem}
.dialog-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}

.footer{margin-top:2rem;text-align:center;color:var(--muted);font-size:0.9rem}

.msg-container{display:flex;gap:1rem;align-items:center}

@media (max-width:520px){
  .controls{flex-direction:column;align-items:flex-start}
  .top{flex-direction:column;align-items:flex-start;gap:.75rem}
}

/* Mobile & tablet optimizations */
@media (max-width:900px){
  body{padding:2rem 0.75rem}
  .app{padding:0 0.5rem}
  .splash-card{width:min(88vmin,640px);height:min(88vmin,640px);padding:1rem}
  .logo-wrap svg{width:140px;height:140px}
  .splash-controls{gap:0.5rem}
  .splash-controls label{min-width:120px}
  .splash-controls select{min-width:110px}
}

@media (max-width:520px){
  /* splash almost full screen on phones */
  .splash-card{width:calc(100vw - 36px);height:calc(100vw - 36px);border-radius:12px;padding:12px;justify-content:flex-start}
  .logo-wrap{padding:10px}
  .logo-wrap svg{width:120px;height:120px}
  .splash-controls{flex-direction:column;align-items:stretch}
  .splash-controls label{width:100%}
  .splash-controls select{width:100%}
  .splash-actions .btn{width:100%}
  .board{width:92vmin;height:92vmin;gap:8px;padding:10px}
  .box{font-size:clamp(20px,10vmin,56px)}
  .top{padding:0 8px}
}

@media (pointer:coarse){
  /* touch friendly: bigger hit targets */
  .box{padding:6px}
  .controls select, .splash-controls select, .btn{padding:12px}
}

.highlight{background:var(--win);color:#06201a}

.hide{display:none}