/* © Ashok-777 */
/* GitHub: https://github.com/Ashok-777 */
:root{
  --bg:#0f1a21;
  --tile:#1f2b33;
  --x:#2ec4b6;
  --o:#ffca3a;
  --muted:#c6cdd4;
  --panel:#0b1316;
  --accent:#ffd166;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:Inter, "Segoe UI", Arial, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* App container */
.app{width:360px;max-width:94vw;padding:12px}

/* Common */
.center{display:flex;flex-direction:column;align-items:center;justify-content:center}
.title{font-size:34px;letter-spacing:4px;color:var(--o);margin-bottom:12px;text-align:center}

/* Landing */
.pixel-row{display:flex;gap:12px;margin-bottom:10px}
.pixel{width:72px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800}
.pixel.x{background:var(--x);color:#041617}
.pixel.o{background:var(--o);color:#141414}
#pressStart{font-weight:800;animation:blink 1.1s infinite;margin-bottom:8px}
@keyframes blink{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.btn{padding:12px 22px;border-radius:10px;border:none;background:var(--x);color:#041617;font-weight:800;cursor:pointer}

/* Mode select + slider */
.mode-row{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.switch{position:relative;display:inline-block;width:54px;height:30px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#304047;border-radius:30px}
.switch .slider:before{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.22s}
.switch input:checked + .slider{background:#2b6b64}
.switch input:checked + .slider:before{transform:translateX(24px)}
.setup-row{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.slider-wrap{width:260px;display:flex;flex-direction:column;align-items:center;color:#fff;font-weight:700}
input[type="range"]{width:100%}

/* Top bar and icons */
.top-bar{display:flex;justify-content:space-between;align-items:center;margin:18px 0}
.turn{background:#1f2b33;padding:8px 14px;border-radius:10px;font-weight:700}
.icon{background:#304047;border:none;color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.icon.exit{background:var(--o);color:#141414;border:2px solid rgba(255,255,255,0.06);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.volume{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#1f2b33;border:none;cursor:pointer}

/* Round Info (STYLE C: large title) */
.round-info{
  text-align:center;
  font-weight:800;
  font-size:20px;
  letter-spacing:1px;
  margin:6px 0 12px 0;
}

/* Board */
.board{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}
.cell{background:var(--tile);height:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:56px;cursor:pointer;user-select:none;box-shadow:0 8px 0 rgba(0,0,0,.12);transition:transform .08s ease}
.cell:active{transform:scale(.98)}
.cell.disabled{pointer-events:none;opacity:.98}
.x{color:var(--x)}
.o{color:var(--o)}
.win{animation:pop .36s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Score */
.score-row{display:flex;gap:12px;margin:18px 0;justify-content:space-between}
.score{flex:1;padding:12px;border-radius:10px;text-align:center;font-weight:700}
.xscore{background:var(--x);color:#041617}
.tie{background:var(--muted);color:#111}
.oscore{background:var(--o);color:#111}

/* Split strike halves */
.strike-left,.strike-right{
  position:absolute;height:6px;background:var(--o);border-radius:6px;top:50%;left:50%;
  transform-origin:center;transform:translate(-50%,-50%) scaleX(0);transition:transform 360ms cubic-bezier(.2,.9,.3,1);z-index:40;box-shadow:0 4px 12px rgba(0,0,0,.35)
}
.hidden{display:none}

/* Modal & winner */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:200}
.modal{background:var(--panel);padding:16px;border-radius:12px;text-align:center}
.modal button{margin:8px;padding:8px 14px;border-radius:8px;border:none;cursor:pointer}
.winner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:300}
.win-card{background:linear-gradient(180deg,#071a1e,#02202a);padding:20px;border-radius:12px;text-align:center}
.win-card h2{color:var(--o);margin-bottom:8px}
.win-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:290}

/* Responsive tweaks for desktop & mobile */
@media (max-width:420px){
  .cell{height:calc((92vw - 2*3.5vw)/3);font-size:calc(8vw + 8px)}
  .app{width:92vw}
}
/* Desktop larger tweak */
@media (min-width:900px){
  .app{width:480px}
  .round-info{font-size:22px}
  .cell{height:120px;font-size:68px}
        }
/* © Ashok-777 */
/* GitHub: https://github.com/Ashok-777 */