/* Option 1: Batumi After Dark. Presentation only; no game/runtime changes. */
:root { --bg: #061525; --bg-2: #0a1c2e; --panel: #0e2134; --panel-2: #142b40; --line: #294052; --muted: #b0bed0; }
html { scroll-padding-top: 100px; }
[hidden] { display: none !important; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 6px; }
.skip-link { position: fixed; top: 10px; left: 20px; z-index: 30; padding: 12px 20px; background: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.wrap { max-width: 1504px; padding-inline: clamp(24px, 4vw, 64px); }
header { background: rgba(6, 21, 37, .94); border-color: rgba(205, 222, 242, .18); }
.nav { height: 92px; gap: 24px; }
.logo { text-transform: uppercase; font-size: 20px; letter-spacing: .15em; gap: 14px; flex-shrink: 0; }
.logo img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; box-shadow: 0 0 0 1px #ffc56550, 0 4px 20px #0004; }
.logo-wordmark { display: grid; gap: 5px; line-height: 1; }
.logo-wordmark > span { color: #ffc565; font-size: 10px; letter-spacing: .22em; }
.menu { margin-left: auto; }
.menu a { color: #e2e8f2; font-weight: 400; }
.nav .spacer { display: none; }
.lang { border-radius: 6px; min-height: 42px; color: #e2e8f2; }
.nav-play { border: 1px solid var(--amber); background: transparent; border-radius: 10px; color: var(--amber); min-height: 46px; padding-inline: 25px; font-weight: 600; }
.nav-play:hover { color: #2a1200; }
.hero { min-height: 660px; }
.hero-art { background: none; transform: none; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right 54%; }
.hero-veil { background: linear-gradient(90deg, rgba(3, 15, 30, .74), rgba(3, 15, 30, .25) 47%, transparent 67%), linear-gradient(0deg, rgba(6, 21, 37, .65), transparent 24%); }
.hero-grid { display: flex; align-items: center; min-height: clamp(660px, calc(100svh - 180px), 840px); padding-block: 80px 84px; }
.hero-copy { width: min(62%, 840px); }
.eyebrow { font-size: 11px; letter-spacing: .3em; gap: 18px; }
.eyebrow::before { display: none; }
.eyebrow::after { content: ''; width: 44px; height: 1px; background: #8e9dab; }
h1 { margin: 32px 0 28px; font-size: clamp(58px, 6.35vw, 100px); letter-spacing: -.045em; line-height: 1.04; text-shadow: none; font-weight: 850; max-width: none; }
h1 br { display: inline; }
h1 em { color: #ffc565; }
[lang="ka"] h1 { font-size: clamp(44px, 4.9vw, 76px); line-height: 1.22; letter-spacing: -.035em; }
.hero .lede { max-width: 32ch; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.5; color: #e3e9f2; text-shadow: 0 2px 12px #061525; }
.hero .cta-row { margin-top: 38px; gap: 28px; }
.hero .btn { min-height: 64px; padding-inline: 34px; border-radius: 11px; font-size: 18px; }
.hero .btn-primary { background: linear-gradient(135deg, #ffc565, #ff932e); box-shadow: 0 8px 30px #e9932529; }
.hero-secondary { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: #f0f3f9; border-bottom: 1px solid var(--amber); font-size: 16px; }
.hero-secondary:hover { color: var(--amber); }
.hero-notice { margin: 32px 0 0; border-top: 1px solid #68809765; padding-top: 17px; color: #c6d1df; font-size: 12px; width: fit-content; max-width: 100%; }
.art-caption { position: absolute; right: 4%; bottom: 24px; font-size: 10px; letter-spacing: .12em; color: #d2dce9; text-shadow: 0 1px 5px #000; }
.discovery { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding-block: 42px 46px; border-top: 1px solid #6d829665; }
.discovery h2 { margin: 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -.035em; }
.discovery h2 em { font-style: normal; color: #ffc565; }
.discovery-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.discovery-links a { position: relative; display: grid; align-content: start; min-width: 0; overflow-wrap: anywhere; gap: 12px; padding: 4px 18px 12px; border-left: 1px solid var(--line); color: #eef2f8; text-decoration: none; font-size: 14px; }
.discovery-number { color: #ffc565; font-size: 12px; }
.discovery-arrow { color: var(--amber); }
.discovery-links a:hover { background: #ffffff05; color: var(--amber); }
.section { padding-block: 68px; }
.section-head { margin-bottom: 30px; }
.section-head h2 { font-weight: 750; }
.section-head p { max-width: 70ch; line-height: 1.65; }
.facts { margin: 0 0 24px; }
.fact { background: transparent; border: 0; border-radius: 0; border-left: 1px solid var(--line); padding-inline: 20px; }
.step, .fair .card, .callout { background: #0c1f31; box-shadow: none; border-radius: 12px; }
.table-frame { border-radius: 16px; background: #324457; padding: 1px; box-shadow: 0 20px 60px #0003; }
footer { padding-top: 36px; }
@media (max-width: 1100px) {
  .nav { gap: 14px; }
  .logo { font-size: 18px; letter-spacing: .1em; }
  .menu a { padding-inline: 8px; font-size: 13px; }
  .menu a[href="#fair"] { display: none; }
  .hero-copy { width: 64%; }
  .discovery { gap: 24px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .nav { height: 78px; gap: 12px; }
  .logo { font-size: 18px; letter-spacing: .1em; gap: 10px; }
  .logo img { width: 56px; height: 56px; }
  .logo-wordmark > span { font-size: 8px; letter-spacing: .14em; }
  .lang { margin-left: auto; font-size: 12px; padding-inline: 10px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-grid { order: 1; min-height: 0; width: 100%; padding-block: 46px 20px; }
  .hero-copy { width: 100%; }
  .hero-art { position: relative; inset: auto; order: 2; height: clamp(250px, 68vw, 400px); z-index: 0; }
  .hero-art img { object-position: right 58%; }
  .hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg), transparent 22%, transparent 84%, var(--bg)); }
  .hero-veil { display: none; }
  h1 { font-size: clamp(46px, 9.6vw, 72px); margin-block: 23px; }
  [lang="ka"] h1 { font-size: clamp(31px, 7.1vw, 52px); }
  .eyebrow { font-size: 10px; letter-spacing: .2em; }
  .hero .lede { font-size: 18px; max-width: 32ch; }
  .hero .cta-row { gap: 18px; margin-top: 26px; }
  .hero .btn { width: auto; min-height: 56px; padding-inline: 24px; font-size: 16px; }
  .hero-secondary { font-size: 14px; }
  .hero-notice { font-size: 11px; line-height: 1.65; margin-top: 22px; padding-top: 14px; }
  .art-caption { z-index: 1; font-size: 9px; bottom: 14px; right: 24px; left: 24px; text-align: right; }
  .discovery { grid-template-columns: 1fr; padding-block: 32px; gap: 28px; }
  .discovery-links a { padding-inline: 12px; font-size: 12px; }
  .discovery-links a:first-child { padding-left: 0; border-left: 0; }
  .section { padding-block: 44px; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .steps, .callouts, .fair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}