/* Cinematic split entrance. Each full panel is one native, keyboard-accessible link. */
:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2f1e9;
  background: #000;
  --green: #97f248;
  --gold: #ffbe5a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: #000; }
p, h1, h2 { margin: 0; }
.portal {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: max(100svh, 760px);
  overflow: hidden;
  background: #020403;
}
.portal-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #020403 url('../images/landing-duel.png') center 58% / cover no-repeat;
}
.portal-masthead {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 4vw;
  pointer-events: none;
  background: linear-gradient(#000b, transparent);
}
.location, .masthead-line { font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.location { display: flex; align-items: center; gap: 10px; color: #d8dfd6; }
.location > span { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 14px #aaff55; }
.masthead-line { color: #b0b8b0; font-size: .75rem; }
.world {
  --accent: var(--green);
  position: relative;
  min-width: 0;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(100px, 16svh, 155px) 4vw 78px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.world--track { --accent: var(--gold); padding-left: 13vw; }
.world-art { display: none; }
.world-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000b 0, #0004 38%, transparent 64%, #000e 100%);
  pointer-events: none;
  transition: opacity .35s ease;
}
.world--store::after, .world--track::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  transition: opacity .35s ease;
}
.world--store::after { background: linear-gradient(135deg, #579d171a, transparent 45%); box-shadow: inset 0 2px 0 var(--green); }
.world--track::after { background: linear-gradient(225deg, #e8771522, transparent 45%); box-shadow: inset 0 2px 0 var(--gold); }
.world-heading, .world-bottom { position: relative; z-index: 2; }
.world-heading { max-width: 100%; }
.world-category { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; font-size: .875rem; letter-spacing: .12em; font-weight: 800; color: var(--accent); }
.world-category > span { color: #d3d9cd88; font-size: .7rem; letter-spacing: 0; padding-right: 13px; border-right: 1px solid #9eae9966; }
.store-name, .track-name {
  font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif;
  font-style: italic;
  font-weight: 900;
  line-height: .89;
  letter-spacing: -.035em;
  text-shadow: 0 4px 20px #000a;
}
.store-name { font-size: clamp(4rem, 7.05vw, 8rem); }
.store-name > span { color: var(--accent); }
.track-name { font-size: clamp(6rem, 11.05vw, 12rem); line-height: .75; }
.track-name > span { display: block; margin-top: .22em; font-size: .365em; line-height: 1; letter-spacing: -.015em; color: var(--accent); }
.world-description { margin-top: 23px; max-width: 320px; font-size: clamp(1rem, 1.12vw, 1.2rem); color: #d3d9d2; line-height: 1.55; text-shadow: 0 2px 10px #000; }
.world-bottom { margin-top: 260px; }
.world-details { font-size: .75rem; letter-spacing: .08em; color: #b4baad; font-weight: 700; margin-bottom: 13px; }
.world-details > span { color: var(--accent); margin: 0 5px; opacity: .75; }
.world-enter { display: inline-flex; align-items: center; gap: 45px; font-size: .875rem; letter-spacing: .08em; font-weight: 900; color: #f4f6ed; border-bottom: 1px solid #b8c5b65c; padding-bottom: 10px; transition: border-color .25s ease, color .25s ease; }
.enter-arrow { font-size: 1.7rem; line-height: 1; color: var(--accent); transition: transform .25s ease; }
.world:hover .world-enter, .world:focus-visible .world-enter { color: var(--accent); border-color: var(--accent); }
.world:hover .enter-arrow, .world:focus-visible .enter-arrow { transform: translate(5px, -4px); }
.world:hover .world-shade { opacity: .75; }
.world:hover::after, .world:focus-visible::after { opacity: 1; }
.world:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.portal-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(transparent 4%, #73857577 20%, transparent 35%, transparent 65%, #ae854c77 80%, transparent 96%);
}
.choice-seal {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: clamp(218px, 22vw, 340px);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid #b5c0ac80;
  border-radius: 50%;
  background: radial-gradient(circle, #0c110bed 0 64%, #080b07 65%);
  box-shadow: 0 0 0 6px #0009, 0 0 0 7px #b5c0ac26, 0 15px 60px #000e;
}
.choice-seal::before {
  content: '';
  position: absolute;
  inset: -11px;
  border: 2px solid transparent;
  border-top-color: var(--green);
  border-bottom-color: var(--gold);
  border-radius: 50%;
  opacity: .8;
}
.seal-ticks {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: repeating-conic-gradient(#bac8b0aa 0deg 1deg, transparent 1deg 10deg);
  mask: radial-gradient(circle closest-side, transparent 94%, #000 95%);
}
.seal-inner {
  position: absolute;
  inset: 13%;
  border: 1px solid #9cab913b;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.seal-kicker, .seal-footer { font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: #b0b7a8; }
.seal-inner h1 { font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif; font-size: clamp(2rem, 3.3vw, 3.4rem); font-weight: 900; line-height: .94; margin: .17em 0 .22em; letter-spacing: -.015em; }
.seal-inner h1 span { color: #e5edce; }
.seal-footer { color: #e5c886; }
.portal-address { position: absolute; z-index: 4; bottom: 24px; left: 0; right: 0; text-align: center; font-size: .75rem; letter-spacing: .1em; color: #9a9f93; pointer-events: none; }
.portal-address > span { margin: 0 8px; color: #e0c884; }
@media (min-width: 1800px) {
  .world { padding-left: max(4vw, calc((100vw - 1650px) / 2)); }
  .world--track { padding-left: 13vw; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .portal { min-height: max(100svh, 720px); }
  .world { padding-top: 105px; padding-left: 4vw; padding-bottom: 70px; }
  .world--track { padding-left: max(12vw, 110px); }
  .world-category { font-size: .75rem; gap: 8px; }
  .world-category > span { padding-right: 8px; }
  .store-name { font-size: 7.2vw; }
  .track-name { font-size: 11vw; }
  .world-description { font-size: 1rem; }
  .world-bottom { margin-top: 240px; }
  .world-enter { gap: 28px; font-size: .875rem; }
  .world-details { font-size: .75rem; letter-spacing: .02em; }
  .choice-seal { width: 200px; top: 54%; }
  .seal-inner h1 { font-size: 1.9rem; }
}
@media (max-width: 760px) {
  .portal { grid-template-columns: 1fr; grid-auto-rows: 1fr; min-height: auto; }
  .portal-art { display: none; }
  .portal-masthead { padding: 19px 24px; }
  .masthead-line { display: none; }
  .location { font-size: .75rem; letter-spacing: .13em; }
  .world { min-height: max(540px, 75svh); padding: 75px 26px 58px; }
  .world--track { padding: 80px 26px 68px; }
  .world-art { display: block; position: absolute; inset: 0; background-image: url('../images/landing-duel.png'); background-size: 200% auto; background-repeat: no-repeat; }
  .world--store .world-art { background-position: left bottom; }
  .world--track .world-art { background-position: right bottom; }
  .world-shade { background: linear-gradient(180deg, #000b, #0006 35%, transparent 62%, #000e 98%); }
  .world-category { font-size: .875rem; margin-bottom: 15px; }
  .store-name { font-size: clamp(3.9rem, 14.3vw, 6rem); }
  .track-name { font-size: clamp(5.6rem, 23vw, 9rem); }
  .world-description { font-size: 1rem; margin-top: 17px; }
  .world-bottom { margin-top: 150px; }
  .world-enter { font-size: .875rem; gap: 40px; }
  .world-details { font-size: .75rem; }
  .choice-seal { width: 126px; top: 50%; left: auto; right: 21px; transform: translateY(-50%) rotate(-8deg); }
  .choice-seal::before { inset: -6px; border-width: 1px; }
  .seal-inner h1 { font-size: 1.35rem; }
  .seal-kicker, .seal-footer { display: none; }
  .portal-divider { top: 50%; left: 0; right: 0; width: auto; height: 1px; bottom: auto; background: linear-gradient(90deg, #97f24877, #ffbe5a77); }
  .portal-address { font-size: .75rem; bottom: 22px; letter-spacing: .035em; }
}
@media (max-width: 380px) {
  .world { padding-left: 22px; padding-right: 22px; }
  .store-name { font-size: 14vw; }
  .world-description { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .world:focus-visible { outline-color: Highlight; }
  .world { border: 1px solid CanvasText; }
  .world-shade, .portal-art, .world-art { display: none; }
  .choice-seal { background: Canvas; border-color: CanvasText; }
}