:root {
  --gold: #e0c15a;
  --gold-bright: #ffd75e;
  --panel-bg: rgba(18, 14, 10, 0.94);
  --panel-border: #4a3d2a;
  --ok: #5fae4a;
  --warn: #e0a52f;
  --danger: #c94f4f;
}

#app-shell {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: radial-gradient(ellipse at center, #1a1410 0%, #0a0806 70%, #050403 100%);
  overflow: hidden;
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------- menu -- */
#screen-menu {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(224,105,47,0.18), transparent 60%),
    linear-gradient(180deg, #1a120c, #0a0705 80%);
  text-align: center;
  gap: 18px;
}
.menu-title {
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  color: var(--gold-bright);
  letter-spacing: 2px;
  text-shadow: 0 0 22px rgba(224,105,47,0.55), 0 4px 0 #000;
  margin: 0;
}
.menu-sub { color: #b8a888; font-size: 1rem; letter-spacing: 3px; margin: 0 0 8px; text-transform: uppercase; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; width: min(320px, 84vw); }
.btn-menu {
  padding: 14px 18px; border-radius: 8px;
  background: linear-gradient(180deg, #5a3d1f, #3a2410);
  border: 1px solid var(--panel-border);
  color: var(--gold-bright); font-weight: 700; letter-spacing: 1.5px; font-size: 1rem;
  box-shadow: 0 3px 0 #1a1006, inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .12s;
}
.btn-menu:hover { transform: translateY(-1px); }
.btn-menu:active { transform: translateY(1px); }
.btn-menu.primary { background: linear-gradient(180deg, #c9401f, #7a2210); color: #fff2d8; font-size: 1.1rem; padding: 16px 20px; }

.menu-flames { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.flame-particle { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffb35e, #c9401f00); animation: rise 6s linear infinite; opacity: .7; }
@keyframes rise { from { transform: translateY(0) translateX(0); opacity: .8; } to { transform: translateY(-100vh) translateX(20px); opacity: 0; } }

/* ------------------------------------------------------------- levels --- */
#screen-levels, #screen-leaderboard { justify-content: flex-start; padding-top: 48px; }
#screen-levels { background: linear-gradient(180deg, #14100c, #0a0705); }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: min(760px, 92vw); max-height: 68vh; overflow-y: auto; padding: 4px; }
.level-card {
  background: linear-gradient(180deg, #241a10, #140f0a);
  border: 1px solid var(--panel-border); border-radius: 10px; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gold-bright);
}
.level-card.locked { opacity: .45; color: #887a60; }
.level-num { font-size: 1.6rem; font-weight: 700; }
.level-name { font-size: .72rem; letter-spacing: .5px; text-align: center; min-height: 28px; }
.level-best { font-size: .68rem; color: #b8a888; }
.level-lock { font-size: .68rem; }
.screen-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.screen-title { font-size: 1.6rem; color: var(--gold-bright); margin: 0; }

/* --------------------------------------------------------- rotate hint -- */
#rotate-hint {
  position: fixed; inset: 0; z-index: 999; background: #0a0806; color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; font-size: 1.1rem; gap: 10px; flex-direction: column;
}
#rotate-hint .rotate-icon { font-size: 3rem; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

/* ------------------------------------------------------------- seo body - */
.site-header, .site-footer { max-width: 900px; margin: 0 auto; padding: 20px; color: #b8a888; }
.seo-content { max-width: 900px; margin: 0 auto; padding: 20px; line-height: 1.7; color: #c9bfa8; }
.seo-content h1, .seo-content h2 { color: var(--gold-bright); font-family: 'Cinzel', Georgia, serif; }
.seo-content a { color: var(--gold); text-decoration: underline; }
.ad-slot { max-width: 900px; margin: 12px auto; min-height: 90px; display: flex; align-items: center; justify-content: center; color: #665a44; border: 1px dashed #332a1c; font-size: .8rem; }