* { box-sizing:border-box; }

html, body {
  min-height:100%;
  margin:0;
  background:#020b16;
  color:#e7fbff;
  font-family:'Crimson Text', serif;
}

body {
  min-height:100vh;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 176, 212, .16), transparent 45%),
    linear-gradient(180deg, #001421, #02070d 72%);
}

.HiddenDepthsPage {
  width:min(680px, calc(100% - 2em));
  margin:0 auto;
  padding:2.5em 0 3em;
}

.GameHeader {
  margin-bottom:1.5em;
  text-align:center;
}

.GameHeader h1 {
  margin:0;
  color:#dffaff;
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 8vw, 3.5rem);
  letter-spacing:.08em;
  text-shadow:0 0 20px #00d8ff;
}

#GameSubtitle {
  margin:.5em 0 0;
  color:#68dced;
  font-size:1.15rem;
  font-style:italic;
}

.GamePanel {
  position:relative;
  padding:1em 1em 3.2em;
  border:1px solid rgba(0, 229, 255, .35);
  border-radius:12px;
  background:rgba(0, 18, 32, .78);
  box-shadow:0 0 30px rgba(0, 180, 255, .12);
}

.GameToolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75em;
  color:#8de8f3;
  font-family:'Cinzel', serif;
  font-size:.8rem;
  letter-spacing:.04em;
}

.GameToolbar strong { color:#ffffff; }

.GameToolbar button,
.FlagModeButton {
  border:1px solid #00cfe8;
  border-radius:6px;
  background:rgba(0, 95, 122, .35);
  color:#dffaff;
  cursor:pointer;
  font-family:'Cinzel', serif;
  font-size:.75rem;
  padding:.45em .75em;
}

.FullscreenButton { display:grid; flex:0 0 36px; width:36px; height:29px; position:absolute; left:.6em; bottom:8px; place-items:center; padding:0 !important; font-size:1.35rem !important; line-height:1; }
.FullscreenButton[hidden] { display:none; }
.FullscreenEnterIcon { display:grid; width:100%; height:100%; place-items:center; line-height:1; transform:translateY(1px); }
.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; }

.QuitButton {
  display:flex;
  align-items:center;
  width:max-content;
  height:29px;
  position:absolute;
  right:.6em;
  bottom:.6em;
  margin:0;
  border:1px solid rgba(0, 229, 255, .5);
  border-radius:6px;
  color:#8de8f3;
  font-family:'Cinzel', serif;
  font-size:.75rem;
  padding:.45em .9em;
  text-decoration:none;
}

.QuitButton:hover,
.QuitButton:focus-visible {
  border-color:#ffd166;
  color:#ffd166;
  outline:none;
}

.GameToolbar button:hover,
.GameToolbar button:focus-visible,
.FlagModeButton:hover,
.FlagModeButton:focus-visible,
.MineCell:focus-visible {
  outline:2px solid #ffd166;
  outline-offset:2px;
}

.GameStatus {
  min-height:1.8em;
  padding:.65em 0;
  color:#bceff5;
  text-align:center;
  font-size:1.05rem;
}

.MinesweeperGrid {
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  gap:3px;
  width:min(540px, 100%);
  margin:0 auto;
  aspect-ratio:1;
}

.MineCell {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  aspect-ratio:1;
  border:1px solid #07546a;
  border-radius:3px;
  background:#043044;
  color:#ffffff;
  cursor:pointer;
  font-family:'Cinzel', serif;
  font-size:clamp(.7rem, 3.5vw, 1.25rem);
  font-weight:700;
  line-height:1;
  padding:0;
  user-select:none;
}

.MineCell:hover { background:#07516a; }
.MineCell.revealed { background:#061a29; cursor:default; }
.MineCell.flagged { color:#ff78b5; }
.MineCell.mine { background:#5c1639; color:#ff9dc7; }

.Number1 { color:#63e6ff; }
.Number2 { color:#73f0bd; }
.Number3 { color:#ffd166; }
.Number4 { color:#c6a7ff; }
.Number5, .Number6, .Number7, .Number8 { color:#ff8cae; }

.FlagModeButton {
  display:none;
  width:100%;
  margin-top:1em;
}

.EndOverlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:1.5em;
  border-radius:12px;
  background:rgba(0, 7, 15, .82);
  backdrop-filter:blur(4px);
}

.EndOverlay[hidden] { display:none; }

.EndOverlayContent {
  width:min(360px, 100%);
  padding:2em 1.5em;
  border:1px solid #00cfe8;
  border-radius:10px;
  background:#061a29;
  box-shadow:0 0 28px rgba(0, 207, 232, .24);
  text-align:center;
}

.EndOverlayTitle {
  margin:0;
  color:#ffd166;
  font-family:'Cinzel', serif;
  font-size:clamp(1.35rem, 5vw, 2rem);
  font-weight:700;
}

.EndOverlayMessage {
  margin:.8em 0 1.4em;
  color:#bceff5;
  font-size:1.1rem;
}

.OverlayRestartButton {
  border:1px solid #00cfe8;
  border-radius:6px;
  background:rgba(0, 95, 122, .5);
  color:#dffaff;
  cursor:pointer;
  font-family:'Cinzel', serif;
  font-size:.8rem;
  padding:.65em 1em;
}

.OverlayRestartButton:hover,
.OverlayRestartButton:focus-visible {
  outline:2px solid #ffd166;
  outline-offset:2px;
}

.GameHelp {
  margin:1.2em auto 0;
  color:rgba(210, 247, 255, .65);
  text-align:center;
  font-size:1rem;
}

@media (max-width:560px) {
  .HiddenDepthsPage { width:calc(100% - 1em); padding-top:1.5em; }
  .GameToolbar { font-size:.68rem; }
  .FlagModeButton { display:block; }
}

@media (orientation:landscape) and (max-height:600px) {
  .HiddenDepthsPage {
    padding-top:.6em;
    padding-bottom:0;
  }

  .GameHeader {
    margin-bottom:.5em;
  }

  .GameHeader h1 {
    font-size:clamp(1.4rem, 7vh, 2.2rem);
  }

  #GameSubtitle {
    margin-top:.2em;
    font-size:1rem;
  }

  .GamePanel {
    padding:.6em;
  }

  .GameStatus {
    padding:.35em 0;
  }

  .MinesweeperGrid {
    width:min(540px, calc(100dvh - 165px));
  }

  .GameHelp {
    display:none;
  }

  .FlagModeButton {
    display:block;
    position:absolute;
    bottom:.6em;
    left:4.4em;
    width:auto;
    margin:0;
  }

  .QuitButton {
    position:absolute;
    z-index:2;
    right:.6em;
    bottom:.6em;
    margin:0;
  }
}