* { box-sizing:border-box; }

html, body {
  min-height:100%;
  margin:0;
  background:#070b18;
  color:#f4f5ff;
  font-family:'Crimson Text', serif;
}

body {
  min-height:100vh;
  overflow:auto;
  background:radial-gradient(circle at 50% 0%, #25315f 0, #090d1d 58%, #03040a 100%);
}

.ConnectFourPage {
  width:min(650px, calc(100% - 2em));
  margin:0 auto;
  padding:3em 0;
  text-align:center;
}

#game-title {
  margin:0;
  color:#ffffff;
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 10vw, 3.5rem);
  letter-spacing:.07em;
  text-shadow:0 0 24px #6c8cff;
}

#game-subtitle {
  margin:.6em 0 1.6em;
  color:#c4ceff;
  font-size:1.2rem;
  font-style:italic;
}

.ConnectFourPanel {
  padding:1.25em;
  border:1px solid #6c8cff;
  border-radius:14px;
  background:rgba(10, 17, 46, .9);
  box-shadow:0 0 30px rgba(74, 112, 255, .2);
}

.Scoreboard {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5em;
  color:#c4ceff;
  font-family:'Cinzel', serif;
  font-size:.8rem;
}

.Scoreboard strong { color:#ffffff; font-size:1.1rem; }
#turnMessage { flex:1; color:#ffffff; font-size:.8rem; text-align:center; }

.DifficultyControl {
  width:fit-content;
  max-width:100%;
  margin:1em auto 0;
  padding:.25em .5em .35em;
  border:1px solid rgba(120, 145, 255, .55);
  border-radius:6px;
  color:#c4ceff;
  font-size:.68rem;
  text-align:center;
}

.DifficultyControl legend { margin:0 auto .2em; padding:0 .25em; color:#ffd166; text-align:center; text-transform:uppercase; letter-spacing:.08em; }
.DifficultyOptions { display:flex; width:max-content; max-width:100%; margin-inline:auto; align-items:center; justify-content:center; gap:.55em; }
.DifficultyOption { display:inline-flex; align-items:center; gap:.2em; cursor:pointer; }
.DifficultyOption input { width:.85em; height:.85em; margin:0; accent-color:#ffd166; }
.DifficultyOption label:focus-within, .DifficultyOption:focus-within { color:#ffd166; }

.ConnectFourBoard {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:clamp(4px, 1vw, 8px);
  width:min(560px, 100%);
  margin:1.5em auto;
  padding:clamp(7px, 1.5vw, 14px);
  border:2px solid #4263c5;
  border-radius:12px;
  background:#18327d;
  box-shadow:inset 0 0 24px rgba(0, 0, 0, .35), 0 0 20px rgba(57, 101, 235, .25);
}

.DiscCell {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  min-width:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:#07122f;
  box-shadow:inset 0 3px 5px rgba(0, 0, 0, .35);
  cursor:pointer;
}

.DiscCell:hover { background:#0c1d4a; }
.DiscCell.red { background:#ff4f72; box-shadow:0 0 14px rgba(255, 79, 114, .65); }
.DiscCell.yellow { background:#ffd166; box-shadow:0 0 14px rgba(255, 209, 102, .65); }
.DiscCell.winner { outline:3px solid #ffffff; outline-offset:-3px; }
.DiscCell:disabled { cursor:default; }

.GameControls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  margin-top:1em;
}

.GameButton,
.FullscreenButton,
.QuitButton {
  border:1px solid #7891ff;
  border-radius:6px;
  background:#202d68;
  color:#ffffff;
  cursor:pointer;
  font-family:'Cinzel', serif;
  padding:.6em 1em;
  text-decoration:none;
}

.GameButton { width:7rem; height:2.25rem; padding:0 1em; }
.FullscreenButton { display:grid; width:2.4rem; min-width:2.4rem; height:2.25rem; min-height:2.25rem; place-items:center; padding:0; font-size:1.35rem; line-height:1; }
.FullscreenButton[hidden] { display:none; }
.FullscreenEnterIcon { transform:translateY(2px); }
.FullscreenButton.active .FullscreenEnterIcon { display:none; }
.FullscreenExitIcon { display:none; grid-template-columns:repeat(2, 12px); grid-template-rows:repeat(2, 12px); place-items:center; font-family:monospace; font-size:.8rem; line-height:1; }
.FullscreenButton.active .FullscreenExitIcon { display:grid; }

.GameButton:hover,
.GameButton:focus-visible,
.FullscreenButton:focus-visible,
.QuitButton:hover,
.QuitButton:focus-visible,
.DiscCell:focus-visible {
  outline:2px solid #ffd166;
  outline-offset:3px;
}

.QuitButton {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:7rem;
  height:2.25rem;
  margin:0;
  padding:0 .9em;
  background:transparent;
  color:#c4ceff;
}

.GameHelp {
  margin-top:1.5em;
  color:rgba(225, 230, 255, .7);
  font-size:1.05rem;
}

@media (max-width:600px) {
  .ConnectFourPage { width:calc(100% - 1em); padding-top:2em; }
  .Scoreboard { font-size:.68rem; }
  .DifficultyOptions { gap:.25em; }
  .ConnectFourBoard { margin-top:.75em; }
  .GameHelp { margin-top:0; }
}

@media (orientation:landscape) and (max-height:700px) {
  html, body { overflow:hidden; }
  .ConnectFourPage { width:100%; padding:.35em .5em; }
  #game-title { font-size:clamp(1.25rem, 5vw, 2rem); }
  #game-subtitle, .GameHelp { display:none; }
  .ConnectFourPanel { padding:.45em; }
  .Scoreboard { font-size:.65rem; }
  .Scoreboard strong, #turnMessage { font-size:.7rem; }
  .DifficultyControl { margin:.35em auto 0; padding:.2em .4em .3em; font-size:.6rem; }
  .ConnectFourBoard { width:min(560px, calc(100vw - 1rem), calc(100vh - 9rem)); margin:.45em auto; }
  .GameControls { margin-top:.45em; }
  .GameButton, .FullscreenButton, .QuitButton { height:1.9rem; }
}