@font-face {
  font-family: 'Lilita One';
  src: url('/assets/fonts/lilita-one.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #2b2016;
  --paper: #fdf3d8;
  --coral: #e2543e;
  --gold: #f2c14e;
  --night: #15173a;
  --display: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bar: 52px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.play {
  height: 100svh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--night); color: #fff; font: 16px/1.5 var(--body);
  overflow: hidden; overscroll-behavior: none;
}
:focus-visible { outline: 3px solid #3f8fe0; outline-offset: 2px; }

.bar { flex: none; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; background: var(--ink); border-bottom: 3px solid #000; }
.bar__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 400 1.5rem/1 var(--display); letter-spacing: .04em; }
.bar__actions { display: flex; align-items: center; gap: 8px; }
.bar__btn { font: 700 .85rem/1 var(--body); color: var(--paper); background: transparent; border: 2px solid rgba(253,243,216,.35); border-radius: 999px; padding: 9px 14px; min-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.bar__btn:hover { border-color: var(--gold); color: var(--gold); }
.bar__btn[hidden] { display: none; }
select.bar__btn { appearance: auto; max-width: 8.5em; }
select.bar__btn option { color: #15173a; background: #fff; }
select.bar__btn[hidden] { display: none; }

.stage { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; justify-content: stretch; }
.arena { grid-area: 1 / 2; position: relative; min-width: 0; min-height: 0; background: #000; }
.arena:fullscreen { width: 100%; height: 100%; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
#game[hidden], .gate[hidden] { display: none; }

.slot { display: none; justify-content: center; align-items: center; background: #0d0f26; overflow: hidden; }
.slot ins { display: block; }
.slot--left { grid-area: 1 / 1; }
.slot--right { grid-area: 1 / 3; }
.slot--banner, .slot--mobile { grid-area: 2 / 1 / 3 / 4; }
.has-ads .slot--rail, .has-ads .slot--banner, .has-ads .slot--mobile { display: none; }

@media (min-width: 1100px) and (min-height: 680px) {
  .has-ads .slot--rail.is-on { display: flex; width: 160px; }
}
@media (min-width: 760px) and (min-height: 560px) {
  .has-ads .slot--banner.is-on { display: flex; height: 90px; }
}
@media (max-width: 759px), (max-height: 559px) {
  .has-ads .slot--mobile.is-on { display: flex; height: 50px; }
}

.gate { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #2c2f6e 0%, var(--night) 70%); }
.gate__card { max-width: 380px; display: grid; justify-items: center; gap: 12px; }
.gate__card img { animation: bob 1.4s ease-in-out infinite; }
.gate h1 { margin: 0; font: 400 clamp(1.8rem, 6vw, 2.4rem)/1.1 var(--display); letter-spacing: .02em; text-shadow: 3px 3px 0 #000; }
.gate p { margin: 0; color: #d6d2f0; }
.gate__retry { font: 400 1.2rem/1 var(--display); color: #fff; background: var(--coral); border: 3px solid var(--ink); border-radius: 999px; padding: 12px 26px; min-height: 48px; cursor: pointer; box-shadow: 4px 4px 0 #000; }
.gate__retry[hidden] { display: none; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .gate__card img { animation: none; } }

@media (max-width: 759px) {
  .bar { display: none; }
}