:root{
  color-scheme: dark;
  --bg1: rgba(52,150,255,.35);
  --bg2: rgba(8,18,38,.92);
  --card: rgba(18,18,22,.42);
  --border: rgba(255,255,255,.18);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --tile: rgba(255,255,255,.08);
  --tile2: rgba(255,255,255,.12);
  --tileOpen: rgba(255,255,255,.04);
  --accent: rgba(110,200,255,.95);
  --danger: rgba(255, 110, 130, .95);
  --ok: rgba(140, 255, 200, .95);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;
}

/* Background */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(1200px 700px at 80% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.clouds{
  position:absolute;
  inset:-15vh -20vw 0 -20vw;
  opacity:.85;
}
.cloud-layer{
  position:absolute;
  inset:0;
  background-repeat: repeat;
  background-size: 900px 520px;
  animation: drift 65s linear infinite;
  transform: translate3d(0,0,0);
  mix-blend-mode: screen;
}
.cloud-layer.l1{
  top:6vh;
  opacity:.35;
  filter: blur(2px);
  background-image:
    radial-gradient(120px 70px at 120px 90px, rgba(255,255,255,.50), transparent 70%),
    radial-gradient(180px 90px at 260px 120px, rgba(255,255,255,.42), transparent 72%),
    radial-gradient(150px 85px at 420px 105px, rgba(255,255,255,.38), transparent 74%),
    radial-gradient(220px 110px at 600px 135px, rgba(255,255,255,.34), transparent 76%),
    radial-gradient(170px 95px at 760px 110px, rgba(255,255,255,.30), transparent 76%);
  animation-duration: 80s;
}
.cloud-layer.l2{
  top:20vh;
  opacity:.26;
  filter: blur(3.5px);
  background-size: 820px 480px;
  background-image:
    radial-gradient(180px 90px at 160px 120px, rgba(255,255,255,.40), transparent 74%),
    radial-gradient(240px 110px at 360px 150px, rgba(255,255,255,.34), transparent 76%),
    radial-gradient(200px 95px at 560px 125px, rgba(255,255,255,.30), transparent 78%),
    radial-gradient(260px 120px at 740px 160px, rgba(255,255,255,.26), transparent 80%);
  animation-duration: 110s;
}
.cloud-layer.l3{
  top:40vh;
  opacity:.16;
  filter: blur(6px);
  background-size: 760px 440px;
  background-image:
    radial-gradient(260px 110px at 220px 170px, rgba(255,255,255,.26), transparent 80%),
    radial-gradient(320px 140px at 480px 200px, rgba(255,255,255,.22), transparent 82%),
    radial-gradient(280px 120px at 700px 175px, rgba(255,255,255,.20), transparent 84%);
  animation-duration: 150s;
}
@keyframes drift{
  from{ transform: translate3d(-12vw,0,0); }
  to  { transform: translate3d(12vw,0,0); }
}

.wrap{
  position:relative;
  z-index:1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 16px 24px;
}

.top{
  display:flex;
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.logo{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 22px;
}
.brand h1{margin:0;font-size:20px;line-height:1.2}
.sub{margin:2px 0 0;color:var(--muted);font-size:12px}

.panel{
  flex: 1 1 520px;
  min-width: 300px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display:grid;
  gap: 12px;
}

.statRow{
  display:flex;
  gap: 12px;
}

.stat{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.label{font-size:11px;letter-spacing:.12em;color:var(--muted)}
.value{font-variant-numeric: tabular-nums; font-weight: 650;}

.controls{
  display:flex;
  gap: 10px;
  align-items:end;
  flex-wrap: wrap;
}
.control{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}
.control span{font-size:12px;color:var(--muted)}
select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  color: var(--text);
  outline: none;
}

.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(130, 230, 255, .12);
  color: var(--text);
  cursor: pointer;
  font-weight: 650;
}
.btn:hover{ background: rgba(130,230,255,.18); }
.btn:active{ transform: translateY(1px); }

.game{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}

.boardWrap{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:auto;
}

.board{
  display:grid;
  gap: 4px;
  width: fit-content;
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
}

.tile{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--tile);
  font-weight: 800;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  position:relative;
}
.tile:hover{ background: var(--tile2); }
.tile.open{
  cursor: default;
  background: var(--tileOpen);
  border-color: rgba(255,255,255,.10);
}
.tile.flagged::after{
  content:"🚩";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 16px;
}
.tile.mine::after{
  content:"💣";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 16px;
}
.tile.boom{ outline: 2px solid rgba(255, 90, 115, .85); }

/* Number colors */
.n1{color:#7ad7ff}
.n2{color:#92ffb5}
.n3{color:#ffb36c}
.n4{color:#c7a5ff}
.n5{color:#ff7d9a}
.n6{color:#7dffd9}
.n7{color:#f5f5f5}
.n8{color:#cfcfcf}

.help details{color: var(--muted);}
.help summary{cursor:pointer}
.help ul{margin: 10px 0 0 18px; padding: 0;}

.foot{
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  text-align:center;
}
code{opacity:.95}

@media (max-width: 520px){
  .tile{ width: 30px; height: 30px; border-radius: 9px; }
  .control{ min-width: 220px; }
}

@media (prefers-reduced-motion: reduce){
  .cloud-layer{ animation:none; }
}