/* ===========================
GLOBAL
=========================== */
:root {
  --bg: #05070a;
  --max: 520px;
  --side: 10px;
  --gap: 4px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: 
    radial-gradient(circle at 72% 0%, rgba(183,126,63,.18) 0%, rgba(183,126,63,0) 42%),
    radial-gradient(circle at 18% 18%, rgba(42,63,82,.18) 0%, rgba(42,63,82,0) 46%),
    linear-gradient(180deg, #090b0e 0%, #06080b 38%, #05070a 100%);
  overflow-x: hidden;
}

/* ===========================
3. HERO AMBIENT EXTENSION
=========================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/assets/hero/hero.png") center top / cover no-repeat;
  opacity: .10;
  filter: blur(36px);
  transform: scale(1.08);
  pointer-events: none;
  z-index: -1;
}

.lobby {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) var(--side) max(18px, env(safe-area-inset-bottom));
}

.hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  margin: 0 0 var(--gap);
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}

.hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0;
}

/* ===========================
4. MENU DEPTH
=========================== */
.menu-button {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.14);
}

.menu-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.menu-button:active {
  transform: scale(.99);
}

@media (hover: hover) and (pointer: fine) {
  .menu-button:hover {
    transform: translateY(-1px) scale(1.004);
    filter: brightness(1.04);
  }
}

.hidden-archive { 
  opacity: .82; 
  pointer-events: none; 
}

@media (max-width: 390px) {
  :root {
    --side: 8px;
    --gap: 7px;
  }
}

.menu-button{position:relative;}
.badge{
position:absolute;top:10px;right:12px;z-index:5;
padding:4px 9px;border-radius:999px;
font:700 10px/1 sans-serif;letter-spacing:.08em;
color:#111;background:#ffd25c;
box-shadow:0 4px 12px rgba(0,0,0,.28);
pointer-events:none;
}
.badge-update{background:#7fd8ff;}