* { box-sizing:border-box; }

html, body {
  width:100%;
  min-height:100%;
  margin:0;
  overflow:hidden;
  background:#080b16;
  color:#f1f3ff;
  font-family:'Crimson Text', serif;
}

body { min-height:100dvh; background:radial-gradient(circle at 50% 0%, #222b55 0, #080b16 58%, #03040a 100%); }

.TicTacToePage {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:100dvh;
  margin:0 auto;
  padding:.5rem;
  text-align:center;
}

.TicTacToeView {
  width:520px;
  margin:0 auto;
  transform-origin:center center;
}

#game-title { margin:0; color:#ffffff; font-family:'Cinzel', serif; font-size:clamp(2rem, 10vw, 3.5rem); letter-spacing:.08em; text-shadow:0 0 24px #9b7dff; }
#game-subtitle { margin:.6em 0 1.6em; color:#c2b6ff; font-size:1.2rem; font-style:italic; }

.TicTacToePanel { width:100%; margin:0 auto; padding:1.25em; border:1px solid #7661dc; border-radius:14px; background:rgba(12, 15, 35, .88); box-shadow:0 0 30px rgba(115, 86, 255, .18); }
.Scoreboard { display:flex; align-items:center; justify-content:space-between; gap:.5em; color:#bbb5dc; font-family:'Cinzel', serif; font-size:.75rem; }
.Scoreboard strong { color:#ffffff; font-size:1.1rem; }
#turnMessage { color:#c2b6ff; font-size:.8rem; }
.RoundMessage { margin:.75em 0 0; color:#bbb5dc; font-family:'Cinzel', serif; font-size:.75rem; }

.DifficultyControl { margin:1em 0 0; padding:0; border:0; color:#bbb5dc; font-family:'Cinzel', serif; font-size:.75rem; }
.DifficultyControl legend { margin:0 auto .5em; padding:0; }
.DifficultyOptions { display:flex; justify-content:center; gap:.5em; }
.DifficultyOption { cursor:pointer; }
.DifficultyOption input { position:absolute; opacity:0; }
.DifficultyOption span { display:block; min-width:5.5em; padding:.45em .65em; border:1px solid #7661dc; border-radius:5px; background:#141936; color:#ffffff; font-family:'Cinzel', serif; text-align:center; }
.DifficultyOption input:checked + span { border-color:#ffd166; background:#24214a; color:#ffd166; }
.DifficultyOption input:focus-visible + span { outline:2px solid #ffd166; outline-offset:3px; }

.TicTacToeBoard { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:min(360px, 100%); margin:1.5em auto; }
.Cell { display:flex; align-items:center; justify-content:center; aspect-ratio:1; border:1px solid #4a4774; border-radius:8px; background:#141936; color:#ffffff; cursor:pointer; font-family:'Cinzel', serif; font-size:clamp(2rem, 12vw, 4rem); font-weight:900; line-height:1; }
.Cell:hover { background:#202653; }
.Cell:disabled { cursor:default; }
.Cell.x { color:#64e6ff; text-shadow:0 0 16px #00cfe8; }
.Cell.o { color:#ff83c4; text-shadow:0 0 16px #ff2e88; }
.Cell.winner { border-color:#ffd166; box-shadow:0 0 16px rgba(255, 209, 102, .55); }

.GameControls { display:flex; justify-content:center; align-items:center; gap:.6em; margin-top:1em; }
.GameButton, .FullscreenButton, .QuitButton { border:1px solid #9b7dff; border-radius:6px; background:#24214a; color:#ffffff; cursor:pointer; font-family:'Cinzel', serif; }
.GameButton { padding:.6em 1em; }
.QuitButton { display:inline-flex; align-items:center; margin:0; padding:.5em .9em; color:#c2b6ff; text-decoration:none; }
.GameButton:hover, .GameButton:focus-visible, .Cell:focus-visible, .FullscreenButton:focus-visible, .QuitButton:focus-visible { outline:2px solid #ffd166; outline-offset:3px; }
.FullscreenButton { display:grid; width:2.4rem; height:2.25rem; place-items:center; padding:0; font-size:1.35rem; line-height:1; }
.FullscreenButton[hidden] { display:none; }
.FullscreenButton.active .FullscreenEnterIcon { display:none; }
.FullscreenExitIcon { display:none; font-size:1.7rem; }
.FullscreenButton.active .FullscreenExitIcon { display:block; }

.GameHelp { margin-top:1.5em; color:rgba(225, 224, 245, .7); font-size:1.05rem; }
.RoundOverlay { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:1.5em; background:rgba(3, 4, 10, .72); }
.RoundOverlay[hidden] { display:none; }
.RoundOverlayPanel { width:min(420px, 100%); padding:2em 1.5em; border:1px solid #ffd166; border-radius:12px; background:#141936; box-shadow:0 0 32px rgba(255, 209, 102, .25); text-align:center; }
.RoundOverlayTitle { margin:0; color:#ffd166; font-family:'Cinzel', serif; font-size:1.35rem; font-weight:700; }
.RoundOverlayMessage { margin:.8em 0 0; color:#f1f3ff; font-size:1.1rem; }

@media (max-width:600px) {
  .TicTacToePage { padding:.5rem; }
  #game-subtitle, .GameHelp { display:none; }
  #game-title { font-size:clamp(1.75rem, 10vw, 2.75rem); }
  .TicTacToePanel { padding:.8em; }
  .TicTacToeBoard { margin:1em auto; width:360px; }
  .GameControls { margin-top:1em; }
}

@media (max-height:620px) {
  .TicTacToePage { padding:.5rem; }
  .TicTacToePanel { padding:.55em; }
  .RoundMessage { margin:.35em 0 0; }
  .DifficultyControl { margin-top:.45em; }
  .TicTacToeBoard { margin:.65em auto; width:300px; }
}

@media (orientation:landscape) and (max-height:700px) {
  #game-subtitle, .GameHelp { display:none; }
  .TicTacToePage { justify-content:flex-start; align-items:center; padding:.25rem .5rem; }
  .TicTacToeView { transform-origin:top center; }
  .TicTacToePanel { padding:.55em; }
  .RoundMessage { margin:.35em 0 0; }
  .DifficultyControl { margin-top:.45em; }
  .TicTacToeBoard { margin:.65em auto; width:300px; }
  .GameControls { margin-top:.7em; }
}

@media (orientation:landscape) and (max-height:420px) {
  .TicTacToeBoard { width:260px; }
}