:root {
  --neon-green: #00ff00;
  --neon-red: #ff0033;
  --bg-dark: #121212;
  --cell-bg: rgba(255, 255, 255, 0.1);
  --cell-open: rgba(0, 0, 0, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; touch-action: none; }

body {
  font-family: 'Outfit', 'M PLUS Rounded 1c', sans-serif;
  background-color: var(--bg-dark); color: #fff;
  height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;
}

#app {
  width: 100%; height: 100%; max-width: 500px;
  background: url('bg.png') center/cover no-repeat;
  display: flex; flex-direction: column; padding: 20px; position: relative;
}

#app::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(5px); z-index: 1;
}

header, .game-wrapper { position: relative; z-index: 2; }

/* HUB Button Included via Script later, but add specific if needed */
.hub-btn { z-index: 100 !important; }

header {
  margin-top: 50px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.logo { font-size: 2.28rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--neon-green); }
.logo span { color: var(--neon-green); }

.header-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 8px;
  width: min(360px, 100%);
}
.stat-box {
  min-width: 0; background: rgba(0, 255, 0, 0.1); border: 1px solid var(--neon-green); padding: 6px 10px;
  border-radius: 10px; text-align: center; font-weight: 800; font-size: 0.72rem; color: var(--neon-green);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}
.stat-box span { font-size: 1.16rem; display: block; line-height: 1.15; }

#mode-btn {
  background: var(--neon-green); color: #000; border: none; padding: 10px 16px; border-radius: 20px;
  font-weight: 900; font-size: 0.96rem; width: min(360px, 90%); cursor: pointer; box-shadow: 0 0 15px var(--neon-green);
  transition: 0.2s;
}
#mode-btn.mode-flag { background: var(--neon-red); box-shadow: 0 0 15px var(--neon-red); color: #fff; }

.game-wrapper {
  flex: 1; display: flex; justify-content: center; align-items: center; margin-top: 16px;
}

#grid {
  display: grid; gap: 2px;
  background: rgba(255, 255, 255, 0.2); border: 2px solid var(--neon-green); padding: 2px; border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.cell {
  width: 35px; height: 35px; background: var(--cell-bg); display: flex; justify-content: center; align-items: center;
  font-size: 1.2rem; font-weight: 900; cursor: pointer; border-radius: 4px; border-top: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3);
}

.cell.open { background: var(--cell-open); border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 0 5px rgba(0,0,0,0.8); }
.cell.mine { background: var(--neon-red); box-shadow: 0 0 15px var(--neon-red); border-color: #ffcccc; }
.cell.flag { background: rgba(255, 0, 51, 0.2); }

/* Number Colors */
.n1 { color: #00ff00; text-shadow: 0 0 5px #00ff00; }
.n2 { color: #00ccff; text-shadow: 0 0 5px #00ccff; }
.n3 { color: #ff3366; text-shadow: 0 0 5px #ff3366; }
.n4 { color: #bc00ff; text-shadow: 0 0 5px #bc00ff; }
.n5 { color: #ffd700; text-shadow: 0 0 5px #ffd700; }

.overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 50; backdrop-filter: blur(5px); text-align: center;
}
#end-title { font-size: 3rem; color: var(--neon-red); margin-bottom: 10px; text-shadow: 0 0 20px var(--neon-red); }
#end-desc { margin-bottom: 30px; font-weight: 800; font-size: 1.2rem; }
#claim-btn, #retry-btn {
  min-width: 180px;
  border: none;
  padding: 13px 34px;
  border-radius: 30px;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
}
#claim-btn {
  margin-bottom: 10px;
  background: var(--neon-green);
  color: #001008;
}
#claim-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
#retry-btn { background: #fff; color: #000; }
.hidden { display: none !important; }

@media (max-width: 390px), (max-height: 700px) {
  #app { padding: 16px 12px; }
  header { margin-top: 42px; gap: 9px; }
  .logo { font-size: 1.85rem; }
  .header-info { grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 6px; }
  .stat-box { padding: 5px 8px; font-size: 0.64rem; }
  .stat-box span { font-size: 0.98rem; }
  #mode-btn { padding: 9px 12px; font-size: 0.82rem; }
  .game-wrapper { margin-top: 10px; }
  .cell { width: 31px; height: 31px; font-size: 1rem; }
}