* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  background: #1b1230;
  color: #fff;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ---------- Gate ---------- */
#gate {
  display: flex; align-items: center; justify-content: center;
  background: #1b1230;
}
.gate-box { text-align: center; }
.gate-title { font-size: 28px; margin-bottom: 16px; opacity: .85; }
.gate-display {
  font-size: 40px; letter-spacing: 12px; height: 56px; margin-bottom: 24px;
}
.keypad {
  display: grid; grid-template-columns: repeat(3, 84px); gap: 14px;
  justify-content: center;
}
.keypad .k {
  width: 84px; height: 84px; border-radius: 50%;
  background: #352257; color: #fff; border: none;
  font-size: 30px; font-weight: 600;
}
.keypad .k:active { background: #4a3178; }
.keypad .back { font-size: 26px; background: #2a1c47; }
.gate-error { margin-top: 18px; color: #ff8a8a; font-size: 18px; }

/* ---------- Grid ---------- */
#grid {
  background: #1b1230;
  overflow-y: auto;
  padding: 24px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.tile {
  background: #2a1c47; border: none; border-radius: 18px;
  padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
}
.tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.tile-title {
  padding: 12px 14px; font-size: 17px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-empty { text-align: center; font-size: 22px; opacity: .7; margin-top: 60px; }

/* ---------- Player ---------- */
#player { background: #000; }
#yt-player, #yt-player iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.end-cover { position: absolute; inset: 0; background: #000; z-index: 5; }

.home-btn {
  position: fixed; top: env(safe-area-inset-top, 16px); left: env(safe-area-inset-left, 16px);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(20, 12, 36, 0.78); color: #fff; border: 2px solid rgba(255,255,255,0.35);
  font-size: 30px; z-index: 20;
}

.skip-hint {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(70px, env(safe-area-inset-bottom));
  background: rgba(20, 12, 36, 0.78); border: 2px solid rgba(255,255,255,0.35);
  padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600;
  z-index: 15; pointer-events: none;
}