/* =========================================================
   Neon Core — landing page (asaxenadev.com/play/)
   Same world as the game: void black, cyan track light, the green jump control.
   ========================================================= */

:root {
    --void: #03060d;
    --panel: #0a1524;
    --core: #29f3ff;
    --ice: #d8fbff;
    --muted: #8aa9b8;
    --jump: #4dff88;
    --hurdle: #ff2a46;
    --shield: #4aa8ff;
    --orange: #ffa12e;
    --display: 'Orbitron', 'Rajdhani', sans-serif;
    --text: 'Rajdhani', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--void);
    color: var(--ice);
    font: 600 19px/1.5 var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--core);
    outline-offset: 4px;
}

h2 {
    margin: 0 0 28px;
    font: 700 clamp(24px, 3.2vw, 34px)/1.15 var(--display);
    letter-spacing: 0.04em;
    color: var(--ice);
}

h3 {
    margin: 0 0 16px;
    font: 700 18px/1.2 var(--display);
    letter-spacing: 0.05em;
    color: var(--core);
}

/* =========================================================
   Hero: the track runs toward you, the PLAY control sits on it
   ========================================================= */

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: calc(48px + env(safe-area-inset-top)) 20px 48px;
    overflow: hidden;
    isolation: isolate;
}

/* glow on the horizon */
.hero::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 54%;
    height: 220px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(41, 243, 255, 0.22), transparent 70%);
    z-index: -1;
}

.floor {
    position: absolute;
    left: -60%; right: -60%;
    top: 54%; bottom: -10%;
    perspective: 380px;
    perspective-origin: 50% 0;
    z-index: -2;
}

.floor-plane {
    position: absolute;
    inset: 0;
    transform-origin: 50% 0;
    transform: rotateX(64deg);
    background-image:
        linear-gradient(rgba(41, 243, 255, 0.32) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(41, 243, 255, 0.32) 1.5px, transparent 1.5px);
    background-size: 72px 72px;
    background-position: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    animation: floor-run 1.1s linear infinite;
}

/* the lit track down the middle */
.floor-plane::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 16%;
    transform: translateX(-50%);
    border-left: 3px solid var(--core);
    border-right: 3px solid var(--core);
    background: linear-gradient(rgba(41, 243, 255, 0.05), rgba(41, 243, 255, 0.12));
    box-shadow: 0 0 24px rgba(41, 243, 255, 0.6), inset 0 0 30px rgba(41, 243, 255, 0.15);
}

@keyframes floor-run { to { background-position: 50% 72px; } }

.hero-inner {
    position: relative;
    max-width: 760px;
    text-align: center;
    transform: translateY(-6vh);
}

.title {
    margin: 0;
    font: 800 clamp(46px, 10.5vw, 128px)/0.95 var(--display);
    letter-spacing: 0.06em;
    color: var(--ice);
    text-shadow: 0 0 18px rgba(41, 243, 255, 0.75), 0 0 60px rgba(41, 243, 255, 0.35);
}

.pitch {
    max-width: 34ch;
    margin: 22px auto 34px;
    font-size: clamp(18px, 2.2vw, 22px);
    color: #b9dbe6;
}

/* PLAY: drawn like the in-game jump control */
.play {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--jump);
    font: 800 20px/1 var(--display);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    text-shadow: 0 0 10px rgba(77, 255, 136, 0.9);
    border: 3px solid var(--jump);
    background: radial-gradient(circle, rgba(60, 255, 130, 0.22) 0%, rgba(4, 30, 16, 0.75) 72%);
    box-shadow: 0 0 34px rgba(77, 255, 136, 0.5), inset 0 0 30px rgba(77, 255, 136, 0.3);
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.play::before {                       /* outer halo ring */
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(77, 255, 136, 0.4);
}
.play svg {
    width: 42px;
    height: 42px;
    fill: var(--jump);
    filter: drop-shadow(0 0 8px rgba(77, 255, 136, 0.9));
    transform: translateX(3px);
}
.play:hover {
    background: radial-gradient(circle, rgba(90, 255, 150, 0.36) 0%, rgba(6, 44, 22, 0.8) 72%);
    box-shadow: 0 0 48px rgba(77, 255, 136, 0.75), inset 0 0 36px rgba(77, 255, 136, 0.45);
}
.play:active { transform: scale(0.93); }
.play:focus-visible { outline-offset: 16px; }

.play-note {
    margin: 26px 0 0;
    font-size: 16px;
    color: var(--muted);
}

/* =========================================================
   Sections
   ========================================================= */

main > section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
}

/* Screens framed like the game's HUD panels */
.shot-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    align-items: start;
}

.frame { margin: 0; }

/* cyan 1.5px edge that follows the cut corners, like the in-game panels */
.pic {
    --cut: 18px;
    padding: 1.5px;
    background: rgba(41, 243, 255, 0.55);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.pic img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--panel);
    clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
}
.frame-phone { margin-top: 64px; }
.frame-phone .pic { --cut: 12px; }

.frame figcaption {
    margin-top: 12px;
    font-size: 17px;
    color: var(--muted);
}

/* How to play */
.how-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    color: #cfe9f1;
}
.keys {
    display: flex;
    gap: 6px;
    min-width: 172px;
}

kbd {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font: 700 14px var(--display);
    color: var(--core);
    background: linear-gradient(180deg, #0f2236, #08121f);
    border: 1px solid rgba(41, 243, 255, 0.5);
    border-bottom-width: 3px;
    border-radius: 6px;
}
kbd.wide { min-width: 128px; }

.pad {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.pad-stick {
    border: 2px solid rgba(200, 232, 255, 0.45);
    background: radial-gradient(circle, rgba(220, 240, 255, 0.45) 0 30%, transparent 32%);
}
.pad-jump {
    border: 2px solid var(--jump);
    box-shadow: 0 0 10px rgba(77, 255, 136, 0.5);
    background: radial-gradient(circle, rgba(77, 255, 136, 0.35), transparent 70%);
}

.rules ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.rules li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin-bottom: 12px;
    color: #cfe9f1;
}
.mark {
    flex: none;
    width: 10px;
    height: 10px;
    transform: rotate(45deg) translateY(-2px);
}
.mark-data   { background: var(--core); box-shadow: 0 0 8px var(--core); }
.mark-hurdle { background: var(--hurdle); box-shadow: 0 0 8px var(--hurdle); }
.mark-shield { background: var(--shield); box-shadow: 0 0 8px var(--shield); }
.mark-green  { border: 2px solid var(--jump); }
.mark-orange { border: 2px solid var(--orange); }
.mark-star   { background: #ffe066; box-shadow: 0 0 8px #ffe066; }

/* Android */
.android {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    border-top: 1px solid rgba(41, 243, 255, 0.15);
}

.phone {
    padding: 14px 22px;
    border-radius: 34px;
    background: linear-gradient(160deg, #1a2533, #070c14);
    border: 1px solid rgba(160, 200, 220, 0.25);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(41, 243, 255, 0.12);
}
.phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.android-copy p { margin: 0 0 22px; color: #cfe9f1; max-width: 38ch; }

.apk {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    font: 700 16px var(--display);
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--void);
    background: var(--core);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(41, 243, 255, 0.45);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.apk svg { width: 22px; height: 22px; }
.apk:not(.is-soon):hover { box-shadow: 0 0 36px rgba(41, 243, 255, 0.7); }
.apk:not(.is-soon):active { transform: scale(0.96); }
.apk.is-soon {
    cursor: not-allowed;
    color: rgba(216, 251, 255, 0.5);
    background: transparent;
    border: 1.5px dashed rgba(41, 243, 255, 0.45);
    box-shadow: none;
}

.android-copy .apk-status {
    margin: 12px 0 18px;
    font: 700 15px var(--display);
    letter-spacing: 0.06em;
    color: var(--orange);
}
.android-copy .apk-status.ready { color: var(--jump); }
.android-copy .apk-help { font-size: 16px; color: var(--muted); }

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(41, 243, 255, 0.15);
    font-size: 16px;
    color: var(--muted);
}
.footer p { margin: 0; }

/* =========================================================
   Smaller screens
   ========================================================= */

@media (max-width: 820px) {
    main > section { padding: 56px 20px; }
    .shot-grid, .how-grid, .android { grid-template-columns: 1fr; gap: 36px; }
    .frame-phone { margin-top: 0; }
    .phone { order: 2; }
}

@media (max-width: 480px) {
    body { font-size: 18px; }
    .play { width: 132px; height: 132px; font-size: 18px; }
    .keys { min-width: 150px; }
    kbd { min-width: 32px; height: 32px; }
    kbd.wide { min-width: 112px; }
    .footer { flex-direction: column; }
}

/* Short landscape phones: keep the PLAY control on screen */
@media (orientation: landscape) and (max-height: 500px) {
    .hero { min-height: 100svh; padding-top: 24px; padding-bottom: 24px; }
    .hero-inner { transform: none; }
    .title { font-size: clamp(38px, 8vw, 72px); }
    .pitch { margin: 12px auto 18px; font-size: 17px; }
    .play { width: 112px; height: 112px; font-size: 16px; }
    .play svg { width: 32px; height: 32px; }
    .play-note { margin-top: 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .floor-plane { animation: none; }
    html { scroll-behavior: auto; }
}