/* ==========================================================================
   Bubble Ninja Reborn — core theme
   Design tokens, reset, background layer and the shared atoms (buttons,
   fields, alerts, panels) used by both the landing page and the portal.
   Palette is lifted from the game logo and the loader splash: deep navy
   base, chakra blue lightning, gold/flame for anything the player clicks.
   ========================================================================== */

:root {
    /* base */
    --ink:        #04060d;
    --ink-2:      #080d1a;
    --ink-3:      #0d1424;

    /* surfaces */
    --panel:      rgba(10, 16, 30, .80);
    --panel-2:    rgba(14, 22, 40, .72);
    --panel-sol:  #0b1120;
    --line:       rgba(96, 170, 255, .20);
    --line-2:     rgba(96, 170, 255, .34);

    /* brand */
    --chakra:     #3fc1ff;
    --chakra-2:   #1a72e8;
    --chakra-3:   #0b3f8f;
    --flame:      #ff8a1f;
    --flame-2:    #ff5f0f;
    --gold:       #ffc93c;
    --sharingan:  #e63a2e;
    --leaf:       #3ddc84;

    /* type */
    --text:       #e9eefb;
    --text-2:     #b9c7e0;
    --muted:      #8496b4;

    --font-body:  "Kanit", "Segoe UI", system-ui, sans-serif;
    --font-disp:  "Chakra Petch", "Kanit", "Segoe UI", system-ui, sans-serif;

    /* shape */
    --cut:        14px;
    --radius:     12px;
    --shell:      1320px;

    /* glow */
    --glow-blue:  0 0 0 1px rgba(63, 193, 255, .30), 0 8px 30px -8px rgba(26, 114, 232, .55);
    --glow-gold:  0 0 0 1px rgba(255, 201, 60, .35), 0 8px 30px -8px rgba(255, 138, 31, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--chakra); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-disp); font-weight: 700; line-height: 1.25; }
p { margin: 0; }
[hidden] { display: none !important; }

::selection { background: rgba(63, 193, 255, .30); color: #fff; }

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

/* --------------------------------------------------------------------------
   Background layer
   The video is injected by bg.js only when the device can afford it; the
   poster and the gradient wash below it carry the look on everything else.
   -------------------------------------------------------------------------- */
.nw-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, #10203f 0%, transparent 60%),
        linear-gradient(180deg, #060a14 0%, #04060d 60%, #04060d 100%);
}

.nw-bg__vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}
.nw-bg__vid.is-live { opacity: .55; }

/* Darkens the footage so white Thai text stays readable over any frame. */
.nw-bg__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(8, 20, 44, .30) 0%, rgba(4, 6, 13, .82) 70%),
        linear-gradient(180deg, rgba(4, 6, 13, .55) 0%, rgba(4, 6, 13, .78) 55%, rgba(4, 6, 13, .94) 100%);
}

/* Faint chakra grid — reads as a seal/scroll texture at low opacity. */
.nw-bg__grid {
    position: absolute;
    inset: -2px;
    opacity: .16;
    background-image:
        linear-gradient(rgba(63, 193, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 193, 255, .16) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 100%);
}

/* Background switcher — bg.js removes it when only one clip is available. */
.nw-bgswap {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(8, 13, 26, .80);
    backdrop-filter: blur(8px);
    color: var(--text-2);
    font-size: 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, box-shadow .2s;
}
.nw-bgswap:hover { color: #fff; border-color: var(--chakra); box-shadow: var(--glow-blue); }
.nw-bgswap svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

/* Angular corner cut — the recurring "kunai edge" of the whole design. */
.nw-cut {
    clip-path: polygon(
        var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* Primary button: gold/flame, same family as the BUBBLE wordmark. */
.nw-btn {
    --cut: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 26px;
    border: 0;
    background: linear-gradient(135deg, var(--gold) 0%, var(--flame) 55%, var(--flame-2) 100%);
    color: #2a1400;
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    cursor: pointer;
    clip-path: polygon(
        var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.nw-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nw-btn:active { transform: translateY(0); }
.nw-btn:disabled,
.nw-btn[aria-disabled="true"] {
    filter: grayscale(.7) brightness(.7);
    cursor: not-allowed;
    transform: none;
}

/* Secondary button: chakra blue outline. */
.nw-btn--ghost {
    background: rgba(12, 24, 46, .72);
    border: 1px solid var(--line-2);
    color: var(--text);
}
.nw-btn--ghost:hover {
    border-color: var(--chakra);
    color: #fff;
    filter: none;
    box-shadow: var(--glow-blue);
}

/* Section eyebrow / kicker */
.nw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--chakra);
}
.nw-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--chakra));
}

/* Inline icon sizing used by every inherited SVG in the markup. */
.ico {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -.15em;
}

/* Card / panel shell */
.nw-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Panel heading strip with the diagonal chakra accent. */
.nw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(26, 114, 232, .16) 0%, transparent 65%);
}
.nw-head__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-disp);
    font-size: 18px;
    letter-spacing: .4px;
}
.nw-head__title .nw-flag {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(140deg, var(--chakra-2), var(--chakra-3));
    color: #dff0ff;
    box-shadow: inset 0 0 0 1px rgba(63, 193, 255, .40);
}

/* --------------------------------------------------------------------------
   Form atoms
   -------------------------------------------------------------------------- */
.nw-field { display: grid; gap: 6px; margin-bottom: 14px; }
.nw-field > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.nw-field input[type="text"],
.nw-field input[type="email"],
.nw-field input[type="password"],
.nw-field input[type="number"],
.nw-field select,
.nw-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(4, 8, 18, .70);
    color: var(--text);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.nw-field input::placeholder { color: #5f7190; }
.nw-field input:focus,
.nw-field select:focus {
    outline: none;
    border-color: var(--chakra);
    background: rgba(6, 14, 30, .90);
    box-shadow: 0 0 0 3px rgba(63, 193, 255, .16);
}
.nw-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fc1ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px;
    padding-right: 36px;
}
.nw-field select option { background: var(--panel-sol); color: var(--text); }
.nw-field input:disabled,
.nw-field select:disabled { opacity: .45; cursor: not-allowed; }

.nw-field__hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* password field + reveal toggle */
.nw-input-wrap { position: relative; display: block; }
.nw-input-wrap input { padding-right: 68px; }
.nw-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(12, 24, 46, .90);
    color: var(--chakra);
    font-size: 12px;
    cursor: pointer;
}
.nw-reveal:hover { border-color: var(--chakra); color: #fff; }

/* checkbox row */
.nw-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}
.nw-check input {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--chakra);
    flex: none;
}

/* status line under a form — the JS toggles is-error / is-success */
.nw-msg {
    min-height: 20px;
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--text-2);
}
.nw-msg.is-error   { color: #ff9d95; }
.nw-msg.is-success { color: var(--leaf); }
.nw-msg:empty      { margin: 0; min-height: 0; }

/* alert block */
.nw-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--chakra);
    border-radius: 9px;
    background: rgba(16, 40, 76, .42);
    font-size: 13px;
    color: var(--text-2);
}
.nw-alert > span:first-child { color: var(--chakra); }
.nw-alert.is-unavailable {
    border-left-color: var(--sharingan);
    background: rgba(76, 20, 18, .34);
}
.nw-alert.is-unavailable > span:first-child { color: var(--sharingan); }

/* fieldset used by the top-up choices */
.nw-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    margin: 0 0 16px;
    background: rgba(6, 12, 24, .40);
}
.nw-fieldset > legend {
    padding: 0 8px;
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--gold);
}
.nw-fieldset:disabled { opacity: .5; }

/* empty-state block */
.nw-empty {
    display: grid;
    gap: 6px;
    padding: 34px 22px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: rgba(6, 12, 24, .40);
    text-align: center;
}
.nw-empty b {
    font-family: var(--font-disp);
    font-size: 16px;
    color: var(--text);
}
.nw-empty p { font-size: 13px; color: var(--muted); }

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(63, 193, 255, .35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
    background: rgba(63, 193, 255, .30);
    border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(63, 193, 255, .55); }
*::-webkit-scrollbar-track { background: transparent; }