@font-face {
    font-family: itim;
    src: url('../fonts/itim/Itim-Regular.ttf') format('truetype');
    font-display: swap
}

@font-face {
    font-family: kanit;
    src: url('../fonts/Kanit/Kanit-Regular.ttf') format('truetype');
    font-display: swap
}

:root {
    --cloud-divider-half-height: 8.48vw
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: itim
}

html {
    overflow-x: clip
}

body {
    background: url('/assets/images/dream-runner-x/bg_tile.png') repeat;
    overflow-x: hidden
}

a {
    text-decoration: none !important
}

img {
    height: auto !important
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */

/* T003: replaced display:flex+justify-content:center with position trick on img */
.section__cloud-bottom {
    position: relative;
    width: 100%;
    pointer-events: none;
    z-index: 5
}

.section__cloud-bottom img {
    width: 200%;
    max-width: 3949px; /* native image width — no upscaling beyond this */
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

#pre-register .section__cloud-bottom {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px)
}

/* ─── Hero (#hero) ────────────────────────────────────────────────────────── */

.hero__bg-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: url('/assets/images/dream-runner-x/welcome_bg_P1.png') center/auto 100% no-repeat;
    pointer-events: none;
    z-index: 0
}

#hero {
    position: relative;
    overflow-y: visible;
    padding-bottom: 0;
    max-width: 1400px;
    margin: 0 auto
}

/* T004: replaced display:flex+space-between+align-items with float split */
.hero__header {
    padding: 12px 24px;
    position: relative;
    z-index: 10
}

.hero__header::after {
    content: '';
    display: table;
    clear: both
}

/* T004 */
.hero__logo {
    width: 25%;
    max-width: 240px;
    float: left
}

.hero__topup-button img {
    width: 160px
}

/* T004 */
.hero__topup-button {
    display: none;
    float: right
}

/* T005: replaced display:flex+align-items+justify-content with text-align */
.hero__content {
    position: relative;
    text-align: center;
    min-height: 540px;
    padding-bottom: 20px
}

.hero__char-ace,
.hero__char-vivian,
.hero__char-blaze,
.hero__char-milin {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: clamp(100px, 25%, 440px)
}

.hero__char-ace { 
    left: 1%;
    top: 30%;
}
.hero__char-vivian { 
    left: 8%;
    top: 0%;
}
.hero__char-blaze { 
    right: 8%;
    top: 0%;
}
.hero__char-milin { 
    right: 0;
    top: 30%;
}

.hero__center {
    position: relative;
    text-align: center;
    z-index: 5;
    width: 100%;
    padding: 0 clamp(100px, 11vw, 220px)
}

.hero__center-logo {
    width: 60%;
    display: block;
    margin: 0 auto 14px;
}
.hero__center-logo img {
    margin: 30% 0% 0%;
    width: 100%;
}

.hero__video-frame {
    width: 70%;
    margin: 0 auto 16px;
    position: relative
}

.hero__video-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block
}

.hero__tagline {
    color: #001B62;
    font-size: 1rem;
    margin-bottom: 6px;
    -webkit-text-stroke: 5px #ffffff;
    paint-order: stroke fill
}

.hero__download-label {
    color: #FF00AA;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 16px;
    -webkit-text-stroke: 5px #ffffff;
    paint-order: stroke fill
}

/* T008: replaced display:flex+column+align-items+gap with text-align+block buttons */
.hero__store-buttons {
    text-align: center
}

.hero__store-button {
    display: block;
    margin: 0 auto 10px
}

.hero__store-button:last-child {
    margin-bottom: 0
}

.hero__store-button img {
    width: 160px
}

/* ─── Pre-Register (#pre-register) ───────────────────────────────────────── */

#pre-register {
    padding: 40px 20px 0;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%
}

/* T002: align-items:center is a CSS Grid property here, not flex — preserved */
.pre-register__container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: 12px;
    align-items: center;
    position: relative
}

.pre-register__chicken {
    width: 100%
}

.pre-register__form-area {
    text-align: center
}

.pre-register__form-area > * {
    margin-bottom: 16px
}

.pre-register__form-area > *:last-child {
    margin-bottom: 0
}

.pre-register__characters-row {
    text-align: center
}

.pre-register__chicken-mobile {
    display: inline-block;
    width: 45%;
    vertical-align: bottom
}

.pre-register__price-mobile {
    display: inline-block;
    width: 45%;
    vertical-align: bottom
}

.pre-register__price-image {
    width: 100%
}

.pre-register__heading {
    width: 80%;
    margin: 0 auto;
    display: block
}

.pre-register__input-box {
    width: 100%;
    background: #ffffff;
    border: 2px solid #ffb3d9;
    border-radius: 20px;
    padding: 24px 20px 20px;
    text-align: left
}

.pre-register__email-input {
    width: 100%;
    padding: 10px 20px;
    border: 2px solid #FF00AA;
    border-radius: 24px;
    background: #fff;
    font-family: itim;
    font-size: 1rem;
    outline: none;
    display: block;
    margin: 0 0 12px
}

.pre-register__email-label {
    display: block;
    color: #333333;
    font-family: itim;
    font-size: 0.7rem;
    margin-bottom: 6px;
    text-align: left
}

.pre-register__submit-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: block;
    width: 70%;
    margin: 0 auto
}

.pre-register__submit-button img {
    width: 100%;
    display: block
}

/* T009: replaced display:flex+inset:0+align-items+justify-content with transform centering */
.pre-register__submit-button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: itim;
    font-size: 1rem;
    pointer-events: none
}

/* Pre-register modal */
.pre-register-modal__content {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative
}

.pre-register-modal__close {
    position: absolute;
    top: -12px;
    right: -6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0
}

.pre-register-modal__close img {
    width: 36px
}

/* ─── Character Introduction (#character-intro) ──────────────────────────── */

#character-intro {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%
}

.character-intro__heading {
    display: block;
    max-width: 400px;
    width: 80%;
    margin: 0 auto 8px
}

/* T010: removed display:flex+flex-direction:column — block default is column */

.character-intro__active-image {
    width: 100%;
    display: block
}

.character-intro__info-col {
    padding: 24px;
    overflow: visible;
    background-color: #ffffff;
    border: 2px solid #FF00B9;
    border-radius: 48px;
    box-shadow: 0 0 18px rgba(255, 0, 185, 0.55), 0 0 40px rgba(255, 0, 185, 0.2);
    position: relative
}

.character-intro__info-col::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1.5px dashed rgba(255, 0, 185, 0.45);
    border-radius: 40px;
    pointer-events: none
}

.character-tab__icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative
}


.character-tab__icon img {
    width: 70px;
    display: block
}

.character-tab__icon .character-tab__icon-img--active {
    display: none
}

.character-tab__icon.character-tab--active .character-tab__icon-img--active {
    display: block
}

.character-tab__icon.character-tab--active .character-tab__icon-img--inactive {
    display: none
}

.character-panel__nameplate {
    display: block;
    margin: 12px auto;
    max-width: min(320px, 100%)
}

.character-panel__tagline {
    color: #FF00B9;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
    overflow-wrap: break-word;
    word-break: break-word
}

.character-panel__story {
    color: #001746;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 16px;
    overflow-wrap: break-word;
    word-break: break-word
}

.character-stats {
    margin: 0 auto;
    padding: 0 16px
}

/* T011: replaced display:flex+align-items+gap with inline-block */
.character-stats__row {
    font-size: 0;
    margin-bottom: 10px
}

.character-stats__icon {
    width: 40px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px
}

.character-stats__info {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 48px);
    font-size: 1rem
}

.character-stats__label {
    font-size: 0.85rem;
    color: #001746
}

.character-stats__bar-track {
    width: 100%;
    background: #ffdff8;
    border-radius: 6px;
    height: 14px;
    overflow: hidden
}

.character-stats__bar {
    height: 100%;
    border-radius: 6px
}

.character-stats__bar--speed {
    background: #96e1ff
}

.character-stats__bar--acceleration {
    background: #ffa3d3
}

.character-stats__bar--control {
    background: #87ff7e
}

.character-stats__bar--rotation {
    background: #ffdb93
}

.character-intro__select-header {
    width: 100%;
    display: block;
    pointer-events: none
}

/* T012: replaced display:flex+column+align-items+gap with text-align+block icons */
.character-intro__select-icons {
    text-align: center;
    width: 100%;
    background-color: #FFF8E0;
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #F0C8D8, 0 0 16px 4px rgba(240, 150, 180, 0.55);
    padding: 16px 8px
}

.character-intro__select-icons .character-tab__icon {
    display: block;
    margin: 0 auto 12px
}

.character-intro__select-icons .character-tab__icon:last-child {
    margin-bottom: 0
}

/* ─── Game Features (#game-features) ─────────────────────────────────────── */

#game-features {
    --game-features-preview-scale: 0.6;
    --game-features-preview-brightness: 0.6;
    --game-features-center-padding: 22%;
    --game-features-preview-shift: 20%;
    position: relative;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-x: clip;
}

.game-features__heading {
    max-width: 380px;
    width: 100%;
    margin: 0 auto 24px;
    display: block
}

.game-features__slides-wrapper {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 60px
}

.game-features__slides-wrapper .slick-list {
    overflow: visible
}

.game-features__slides img {
    width: 100%;
    display: block
}

.game-features__slides .slick-slide {
    transform: scale(var(--game-features-preview-scale));
    transform-origin: center center;
    filter: brightness(var(--game-features-preview-brightness));
    transition: transform 500ms ease, filter 500ms ease;
    position: relative;
    z-index: 1
}

.game-features__slides .slick-slide.preview--left {
    transform: scale(var(--game-features-preview-scale)) translateX(var(--game-features-preview-shift));
    transform-origin: right center
}

.game-features__slides .slick-slide.preview--right {
    transform: scale(var(--game-features-preview-scale)) translateX(calc(-1 * var(--game-features-preview-shift)));
    transform-origin: left center
}

.game-features__slides .slick-slide.preview--center,
.game-features__slides .slick-slide.slick-center {
    transform: scale(1);
    filter: brightness(1);
    z-index: 10
}

.game-features__arrow {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0
}

.game-features__arrow img {
    width: 40px
}

.game-features__arrow--prev {
    left: calc(var(--game-features-center-padding) + 4px)
}

.game-features__arrow--next {
    right: calc(var(--game-features-center-padding) + 4px)
}

/* T013: replaced display:flex!important+justify-content+align-items+gap with block+text-align */
.game-features__slides .slick-dots {
    position: absolute;
    bottom: -36px;
    left: 0;
    width: 100%;
    display: block !important;
    text-align: center !important;
    list-style: none;
    padding: 0;
    margin: 0
}

/* T014: replaced display:flex+align-items+justify-content with inline-block */
.game-features__slides .slick-dots li {
    width: clamp(14px, 1.4vw, 22px);
    height: clamp(14px, 1.4vw, 22px);
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px
}

.game-features__slides .slick-dots li button {
    width: clamp(14px, 1.4vw, 22px);
    height: clamp(14px, 1.4vw, 22px);
    background-color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    padding: 0;
    position: relative;
    transition: background-color 250ms ease-in-out
}

.game-features__slides .slick-dots li button::before {
    content: none
}

.game-features__slides .slick-dots li.slick-active button {
    background-color: #FF007D
}

/* ─── Endpage Footer (#endpage) ──────────────────────────────────────────── */

/* T015: replaced display:flex+column+justify-content:flex-end with position:relative+inner:absolute:bottom:0 */
#endpage {
    position: relative;
    z-index: 0;
    background-image: linear-gradient(
        to bottom,
        transparent min(51.16vw, 462px),
        #ffffff min(51.16vw, 462px)
    );
    text-align: center;
    padding-top: 0;
    width: 100%;
}
#endpage-cloud{
    width: 200%;
    max-width: 1800px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow: clip;
    z-index: -1;
}

.endpage__inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    bottom: 0;
    left: 0;
    right: 0
}

/* T016: replaced display:flex+row+align-items:flex-end with inline-block+font-size:0 */
.endpage__columns {
    font-size: 0;
    width: 100%
}

/* T017 */
.endpage__col--char {
    width: 16.5%;
    display: inline-block;
    vertical-align: bottom;
    font-size: 1rem
}

.endpage__col--char img {
    width: 100%;
    display: block
}

/* T017: replaced display:flex+column+align-items+justify-content:flex-end with inline-block */
.endpage__col--center {
    width: 34%;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 16px
}

/* T018: replaced display:flex+justify-content+align-items+gap+flex-wrap with text-align */
.endpage__social-bar {
    text-align: center;
    width: 100%;
    max-width: 480px;
    min-height: 56px;
    background-color: #ffffff;
    border: 3px solid #FF00AA;
    border-radius: 40px;
    padding: 8px 16px;
    margin: 0 auto;
    box-sizing: border-box
}

/* T018 */
.endpage__social-link {
    display: inline-block;
    vertical-align: middle;
    margin: 4px
}

.endpage__social-link img {
    height: 28px !important;
    width: auto
}


.endpage__logo {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 16px auto
}

.endpage__social-heading {
    color: #0057A0;
    font-size: 2.4rem;
    margin-bottom: 12px;
    -webkit-text-stroke: 4px #ffffff;
    paint-order: stroke fill
}

.endpage__copyright {
    font-size: 0.75rem;
    color: #333;
    padding-bottom: 20px
}

.endpage__copyright a {
    color: #0057A0
}

/* ─── Topup Section (hidden, preserved for topup.js) ────────────────────── */

#topup-section {
    padding: 40px 20px
}

.btn-google {
    color: #545454;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 1px #ddd
}

.checkout-button {
    background-color: #eb4b83;
    border-color: #eb4b83
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .hero__center-logo {
        display: none
    }

    /* T035: hero__topup-button hidden on all screen sizes — display:block override removed */
    /* T019: store buttons side-by-side on desktop — inline-block row */
    .hero__store-button {
        display: inline-block;
        margin: 0 5px;
        vertical-align: middle
    }

    .hero__logo {
        width: 75%;
        max-width: 320px
    }

    /* T020: character intro 3-column layout — inline-block */
    .character-intro__layout {
        font-size: 0
    }

    .character-intro__image-col {
        width: 41.5%;
        display: inline-block;
        vertical-align: top;
        font-size: 1rem
    }

    .character-intro__info-col {
        width: 41.5%;
        display: inline-block;
        vertical-align: top;
        font-size: 1rem
    }

    /* T021 */
    .character-intro__select-col {
        width: 17%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        font-size: 1rem
    }

    .character-intro__select-header {
        max-width: 160px;
        margin: 0 auto -24px;
        position: relative;
        z-index: 2
    }

    .character-intro__select-icons {
        width: 80%;
        max-width: fit-content;
        margin: 0 auto;
        padding: 12px 6px
    }
}

@media (min-width: 1280px) {
    .hero__logo {
        max-width: 400px
    }
}

@media (max-width: 540px) {
    #game-features {
        --game-features-center-padding: 15%
    }
}

@media (max-width: 767px) {
    /* Pre-register */
    .pre-register__container {
        grid-template-columns: 1fr;
        width: 100%
    }

    /* Hero */
    .hero__topup-button img {
        width: 100px
    }

    /* T022: removed orphaned flex-direction:column+align-items:center (flex removed from base rule) */
    .hero__content {
        min-height: max(320px, 85vw);
        padding: 0 16px 20px
    }

    .hero__center {
        width: 100%;
        padding: 0 16px
    }

    /* Characters on mobile — shrink all four */
    .hero__char-ace,
    .hero__char-vivian,
    .hero__char-blaze,
    .hero__char-milin {
        width: clamp(50px, 30%, 220px)
    }

    .hero__char-ace { 
        left: 5%;
        top: 15%;
    }
    .hero__char-vivian { 
        left: 12%;
        top: 0%;
    }
    .hero__char-blaze { 
        right: 12%;
        top: 0%;
    }
    .hero__char-milin { 
        right: 5%;
        top: 15%;
    }
    /* Character tabs */
    .character-tab__icon img {
        width: 44px
    }

    /* Game features arrows */
    .game-features__arrow img {
        width: 28px
    }

    /* Section 2: chicken half of price width, overlap price left edge */
    .pre-register__chicken-mobile {
        width: 38%;
        margin-right: -10%;
        position: relative;
        z-index: 0
    }

    .pre-register__price-mobile {
        width: 58%;
        position: relative;
        z-index: 1
    }

    /* Character intro mobile: stacked, panel overlaps image bottom */
    .character-intro__image-col {
        position: relative;
        z-index: 1;
        overflow: visible
    }

    .character-intro__info-col {
        position: relative;
        z-index: 2;
        margin-top: -47%;
        margin-left: 16px;
        margin-right: 16px
    }

    /* Character select: header hidden, icons in 1 row at full width */
    .character-intro__select-col {
        width: 100%;
        padding: 0 16px
    }

    .character-intro__select-header {
        max-width: 40%;
        margin: 0 auto -44px;
        position: relative;
        z-index: 2
    }

    /* T023: replaced flex-direction:row+justify-content+gap with inline-block */
    .character-intro__select-icons {
        text-align: center;
        width: 80%;
        margin: 0 auto;
        padding: 6px 8px
    }

    .character-intro__select-icons .character-tab__icon {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        width: 20%
    }

    .character-intro__select-icons .character-tab__icon img {
        width: 100%
    }
}

@media (max-width: 375px) {
    .hero__store-button img {
        width: 130px
    }

    .character-tab__icon img {
        width: 44px
    }

    .endpage__social-link {
        margin: 2px
    }

    .endpage__social-heading {
        -webkit-text-stroke: 4px #ffffff
    }

    .character-intro__info-col {
        padding-left: 12px;
        padding-right: 12px
    }
}

/* T015 mobile override: restore endpage__inner to static flow when aspect-ratio removed */
@media (max-width: 767px) {
    #endpage {
        aspect-ratio: unset;
        min-height: 420px
    }

    .endpage__inner {
        position: static
    }

    .endpage__col--char {
        display: none
    }

    .endpage__col--center {
        width: 90%;
        max-width: 480px;
        margin: 0 auto
    }

    .endpage__social-bar {
        min-height: 44px
    }

    .endpage__social-heading {
        color: #0057A0;
        font-size: 2rem;
        -webkit-text-stroke: 4px #ffffff;
        paint-order: stroke fill
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .endpage__col--char {
        width: 12.5%
    }

    .endpage__col--center {
        width: 50%
    }

    .endpage__social-link {
        margin: 2px
    }
}