:root {
    --page-bg: #0A0F1D;
    --header-blue: #1188cf;
    --button-blue: #1898e1;
    --text-dark: #252525;
    --text-soft: #666666;
    --card-border: #dddddd;
    --success: #1fa13a;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text-dark);
    font-family: "Roboto", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.mobile-page {
    width: 100%;
    max-width: 510px;
    margin: 0 auto;
    background: var(--page-bg);
    padding-bottom: 92px;
}

.download-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 96px;
    padding: 0 26px;
    background: #e8e8e8;
    border: 1px solid #cfcfcf;
    border-bottom: 0;
}

.download-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.app-badge {
    width: 66px;
    height: 66px;
    overflow: hidden;
    border-radius: 16px;
}

.app-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.download-text {
    color: #262626;
    font-size: 27px;
    font-weight: 500;
}

.download-icon {
    position: relative;
    width: 34px;
    height: 34px;
}

.download-arrow {
    position: absolute;
    left: 14px;
    top: 2px;
    width: 6px;
    height: 18px;
    background: #222;
    border-radius: 3px;
}

.download-arrow::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 11px;
    width: 18px;
    height: 12px;
    background: #222;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.download-arrow::after {
    content: "";
    position: absolute;
    left: -9px;
    bottom: -8px;
    width: 24px;
    height: 4px;
    background: #222;
    border-radius: 2px;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: 0 20px;
    background: var(--header-blue);
    color: var(--white);
}

.logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
}

.logo-box img {
    display: block;
    max-height: 42px;
    width: auto;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #ffffff;
}

.header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    font-style: normal;
    line-height: 1;
}

.icon-headset::before,
.icon-headset::after,
.icon-speaker::before,
.icon-speaker::after,
.icon-moon::before,
.icon-moon::after {
    content: "";
    position: absolute;
}

.icon-headset::before {
    left: 4px;
    top: 1px;
    width: 16px;
    height: 13px;
    border: 4px solid #fff;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}

.icon-headset::after {
    left: 2px;
    top: 12px;
    width: 20px;
    height: 10px;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
    border-radius: 0 0 6px 6px;
}

.icon-speaker::before {
    left: 1px;
    top: 8px;
    width: 10px;
    height: 12px;
    background: #fff;
    clip-path: polygon(0 30%, 35% 30%, 72% 0, 72% 100%, 35% 70%, 0 70%);
}

.icon-speaker::after {
    right: 1px;
    top: 6px;
    width: 13px;
    height: 16px;
    background:
        radial-gradient(circle at 0 50%, transparent 6px, #fff 6px, #fff 7px, transparent 7px),
        radial-gradient(circle at 0 50%, transparent 3px, #fff 3px, #fff 4px, transparent 4px);
}

.icon-moon::before {
    left: 4px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}

.icon-moon::after {
    left: 11px;
    top: 1px;
    width: 18px;
    height: 22px;
    border-radius: 50%;
    background: var(--header-blue);
}

.hero-banner {
    position: relative;
    margin: 0 0 10px;
    padding: 18px 10px 16px;
    background: #ffffff;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 182px;
    overflow: hidden;
    border-radius: 30px;
    background: #102168;
}

.banner-track {
    display: flex;
    height: 100%;
    transition: transform 0.45s ease;
    will-change: transform;
}

.banner-slide {
    flex: 0 0 100%;
    height: 100%;
}

.banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.banner-copy {
    position: relative;
    z-index: 1;
    max-width: 260px;
}

.banner-title {
    margin-bottom: 8px;
    color: #ffd12c;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
    text-shadow:
        2px 2px 0 #113b84,
        -1px 1px 0 #113b84,
        1px -1px 0 #113b84;
}

.banner-subtitle {
    color: #163260;
    font-size: 14px;
    font-weight: 500;
}

.banner-gift {
    position: absolute;
    right: 44px;
    top: 14px;
    width: 122px;
    height: 122px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%),
        linear-gradient(0deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%),
        linear-gradient(135deg, #ff3b3b, #ff6f6f);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.15);
}

.banner-gift::before {
    content: "";
    position: absolute;
    inset: -14px auto auto 18px;
    width: 84px;
    height: 28px;
    border-radius: 40px 40px 8px 8px;
    border: 10px solid #fff0f0;
    border-bottom: 0;
}

.banner-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.95);
    font-size: 52px;
    line-height: 1;
}

.banner-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.banner-prev {
    left: 12px;
}

.banner-next {
    right: 18px;
}

.content-section {
    margin-top: 10px;
    padding: 14px 6px 0;
    background: var(--white);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.quick-section {
    min-height: 110px;
    padding-bottom: 18px;
}

.quick-empty {
    height: 28px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px 18px;
}

.section-heading h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

.view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 34px;
    padding: 0 14px;
    background: var(--button-blue);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 7px rgba(24, 152, 225, 0.35);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.info-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.thumb-card,
.game-thumb {
    position: relative;
    height: 190px;
    margin: 10px 10px 0;
    overflow: hidden;
    border-radius: 18px;
}

.thumb-card {
    background: #6b70ef;
}

.thumb-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.card-caption {
    padding: 12px 12px 16px;
    text-align: center;
}

.caption-title {
    font-size: 15px;
}

.caption-status {
    margin-top: 2px;
    color: var(--success);
    font-size: 15px;
    font-weight: 700;
}

.caption-count {
    margin-top: 6px;
    font-size: 14px;
}

.game-thumb {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
}

.game-thumb img,
.mini-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wingo {
    background: linear-gradient(135deg, #27dfff 0%, #2ba2ff 56%, #2f73ff 100%);
}

.lucky-hit {
    background: linear-gradient(135deg, #ff8f95 0%, #ff7eb7 56%, #ffa4c3 100%);
}

.aviator {
    background: linear-gradient(135deg, #d986ff 0%, #8f9dff 52%, #7cc7ff 100%);
}

.mines {
    background: linear-gradient(135deg, #76ffe5 0%, #47e8c7 45%, #39b9ff 100%);
}

.game-label {
    position: relative;
    z-index: 1;
    color: var(--white);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.game-art {
    position: absolute;
    inset: 0;
}

.ball {
    position: absolute;
    top: 42px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    font-size: 28px;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
    box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.18);
}

.ball-red {
    left: 18px;
    background: #ff3c3c;
}

.ball-purple {
    left: 66px;
    background: #8572ff;
}

.ball-green {
    left: 114px;
    background: #26c06f;
}

.card-shape {
    position: absolute;
    top: 42px;
    left: 70px;
    width: 42px;
    height: 58px;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff, #ececec);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
}

.rotate-left {
    transform: rotate(-20deg);
    left: 56px;
}

.rotate-mid {
    transform: rotate(-6deg);
}

.rotate-right {
    transform: rotate(12deg);
    left: 86px;
}

.plane-shape {
    position: absolute;
    left: 50px;
    top: 72px;
    width: 90px;
    height: 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff6d7b, #d1262f);
    transform: rotate(-24deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.plane-shape::before,
.plane-shape::after {
    content: "";
    position: absolute;
    background: inherit;
}

.plane-shape::before {
    left: 20px;
    top: -14px;
    width: 38px;
    height: 18px;
    transform: skewX(-28deg);
}

.plane-shape::after {
    right: 8px;
    top: 10px;
    width: 24px;
    height: 14px;
    transform: skewX(24deg);
}

.mine-globe {
    position: absolute;
    left: 70px;
    top: 52px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 35%, #6d5cff, #2831a8);
    box-shadow: inset -12px -12px 16px rgba(0, 0, 0, 0.18);
}

.mine-globe::before {
    content: "";
    position: absolute;
    right: -8px;
    top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #525252;
}

.mine-star {
    position: absolute;
    left: 98px;
    top: 38px;
    width: 24px;
    height: 24px;
    background: #ffcb2f;
    clip-path: polygon(50% 0%, 62% 36%, 100% 36%, 70% 58%, 82% 100%, 50% 74%, 18% 100%, 30% 58%, 0% 36%, 38% 36%);
}

.game-name {
    padding: 10px 10px 14px;
    text-align: center;
    font-size: 16px;
}

.triple-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 14px;
}

.mini-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mini-thumb {
    position: relative;
    height: 176px;
    margin: 8px;
    overflow: hidden;
}

.mini-name {
    padding: 10px 8px 14px;
    text-align: center;
    font-size: 15px;
}

.chicken-road {
    background: linear-gradient(135deg, #ff6f2d, #ffcc32);
}

.chicken-road-alt {
    background: linear-gradient(135deg, #ff4d91, #ff9b27);
}

.penalty {
    background: linear-gradient(135deg, #8fd0ff, #d7f3ff);
}

.forest-arrow {
    background: linear-gradient(135deg, #173652, #3c6e34 58%, #a6792c);
}

.hamster-run {
    background: linear-gradient(135deg, #7f3dc8, #cb7bf2 52%, #ffbf67);
}

.plinko-aztec {
    background: linear-gradient(180deg, #101d80, #1732a8 52%, #0a236d);
}

.pg-thumb {
    border-radius: 28px;
}

.pg-neko {
    background: linear-gradient(135deg, #c76aff, #ffd08d);
}

.pg-bounty {
    background: linear-gradient(135deg, #7f4bbf, #ffb16b);
}

.pg-qilin {
    background: linear-gradient(135deg, #ff5a77, #ffb52e 45%, #8d2eff);
}

.pg-caishen {
    background: linear-gradient(135deg, #ffe28c, #ffb65f 48%, #f5e7b7);
}

.pg-ox {
    background: linear-gradient(135deg, #ff7a3c, #ffcf5f 45%, #ff4d3d);
}

.pg-jurassic {
    background: linear-gradient(135deg, #7b2c12, #ff7a1f 48%, #ffe05d);
}

.spribe-thumb {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 18px 20px;
}

.spribe-aviator {
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), transparent 28%), linear-gradient(135deg, #232323, #111111);
}

.spribe-dice {
    background: linear-gradient(135deg, #ab56d6, #7234c8);
}

.spribe-plinko {
    background: linear-gradient(135deg, #1c8db8, #0f6da1);
}

.spribe-mines {
    background: linear-gradient(135deg, #1567c6, #205db0);
}

.mini-label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 10px;
    color: var(--white);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.chicken-body {
    position: absolute;
    left: 38px;
    top: 56px;
    width: 54px;
    height: 42px;
    border-radius: 28px;
    background: #fff8de;
    box-shadow: inset -6px -8px 12px rgba(255, 169, 0, 0.24);
}

.chicken-body::before,
.chicken-body::after {
    content: "";
    position: absolute;
}

.chicken-body::before {
    left: 36px;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff3cc;
}

.chicken-body::after {
    left: 46px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: #ffbf2f;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.coin-mini {
    left: 78px;
    top: 102px;
    width: 20px;
    height: 20px;
}

.player-body {
    position: absolute;
    left: 42px;
    top: 42px;
    width: 40px;
    height: 92px;
    border-radius: 20px 20px 10px 10px;
    background: linear-gradient(180deg, #6c3b2f 0 28px, #2b2d37 28px 100%);
}

.player-body::before {
    content: "";
    position: absolute;
    left: 5px;
    top: -22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cf9c77;
}

.ball-small {
    position: absolute;
    left: 68px;
    top: 108px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, #2a2a2a);
}

.target-board {
    position: absolute;
    left: 28px;
    top: 44px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ff4b1f 0 16%, #ffe78d 16% 32%, #ff7f27 32% 48%, #fff3c7 48% 64%, #8b5a2b 64% 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.arrow-shot {
    position: absolute;
    left: 64px;
    top: 66px;
    width: 46px;
    height: 6px;
    background: #d99d55;
    transform: rotate(-18deg);
    border-radius: 6px;
}

.arrow-shot::before {
    content: "";
    position: absolute;
    right: -10px;
    top: -4px;
    border-left: 12px solid #ff5629;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.arrow-shot::after {
    content: "";
    position: absolute;
    left: -8px;
    top: -4px;
    width: 0;
    height: 0;
    border-right: 10px solid #f5ead7;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.hamster-body {
    position: absolute;
    left: 44px;
    top: 56px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #ffe2b8, #d26f35 68%, #9c4727);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.15);
}

.hamster-body::before,
.hamster-body::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d07c45;
    top: -6px;
}

.hamster-body::before {
    left: 5px;
}

.hamster-body::after {
    right: 5px;
}

.hamster-coin {
    position: absolute;
    left: 92px;
    top: 44px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff3ae, #f1b103);
}

.aztec-mask {
    position: absolute;
    left: 42px;
    top: 38px;
    width: 60px;
    height: 72px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f5cd59, #9b7a20);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.aztec-mask::before,
.aztec-mask::after {
    content: "";
    position: absolute;
    background: #1f887f;
}

.aztec-mask::before {
    left: -12px;
    top: 16px;
    width: 12px;
    height: 34px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.aztec-mask::after {
    right: -12px;
    top: 16px;
    width: 12px;
    height: 34px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pg-badge {
    position: absolute;
    right: 10px;
    bottom: 12px;
    color: #111;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

.pg-neko-face {
    position: absolute;
    left: 32px;
    top: 34px;
    width: 64px;
    height: 70px;
    border-radius: 45% 45% 42% 42%;
    background: radial-gradient(circle at 35% 30%, #fff7bf, #f7bf31 70%, #da8f15);
}

.pg-neko-face::before,
.pg-neko-face::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 18px;
    height: 24px;
    background: #f8c73f;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.pg-neko-face::before {
    left: 4px;
}

.pg-neko-face::after {
    right: 4px;
}

.pg-neko-paw {
    position: absolute;
    left: 72px;
    top: 88px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffd95f;
}

.pg-pirate-face {
    position: absolute;
    left: 46px;
    top: 34px;
    width: 54px;
    height: 70px;
    border-radius: 42% 42% 46% 46%;
    background: linear-gradient(180deg, #f2c5a3, #d98c6c);
}

.pg-pirate-face::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -8px;
    width: 74px;
    height: 28px;
    border-radius: 20px 20px 6px 6px;
    background: #5a2b4f;
}

.pg-gold-coin {
    position: absolute;
    left: 104px;
    top: 56px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff8ba, #f0b006);
}

.pg-dragon-head {
    position: absolute;
    left: 34px;
    top: 26px;
    width: 90px;
    height: 92px;
    border-radius: 42% 58% 54% 46%;
    background: radial-gradient(circle at 35% 30%, #fff79c, #ff7f2e 46%, #da2d1f 74%, #b81277);
    transform: rotate(-12deg);
}

.pg-caishen-face {
    position: absolute;
    left: 42px;
    top: 28px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9bc, #f3bf69 72%, #d49536);
}

.pg-gold-bowl {
    position: absolute;
    left: 36px;
    top: 88px;
    width: 72px;
    height: 28px;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(180deg, #fff0a8, #f4bf20);
}

.pg-ox-face {
    position: absolute;
    left: 40px;
    top: 42px;
    width: 64px;
    height: 54px;
    border-radius: 44% 44% 50% 50%;
    background: radial-gradient(circle at 35% 30%, #ffe0ac, #cb7a2d 72%, #8e451d);
}

.pg-ox-face::before,
.pg-ox-face::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 24px;
    height: 14px;
    border-top: 5px solid #fff9d9;
    border-radius: 50%;
}

.pg-ox-face::before {
    left: -8px;
    transform: rotate(-24deg);
}

.pg-ox-face::after {
    right: -8px;
    transform: rotate(24deg);
}

.pg-ox-ring {
    position: absolute;
    left: 61px;
    top: 80px;
    width: 14px;
    height: 14px;
    border: 3px solid #ffcf54;
    border-radius: 50%;
}

.pg-dino-head {
    position: absolute;
    left: 36px;
    top: 30px;
    width: 86px;
    height: 96px;
    border-radius: 58% 42% 48% 52%;
    background: radial-gradient(circle at 30% 25%, #ffd36b, #de6a1a 54%, #7b240f 78%);
    transform: rotate(-10deg);
}

.spribe-short,
.spribe-title,
.spribe-aviator-text {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.spribe-short {
    display: block;
    font-size: 64px;
    font-weight: 300;
    line-height: 0.9;
}

.spribe-title {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    font-weight: 500;
}

.spribe-aviator-plane {
    position: absolute;
    left: 44px;
    top: 36px;
    width: 110px;
    height: 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff204e, #d80031);
    transform: rotate(-24deg);
}

.spribe-aviator-plane::before,
.spribe-aviator-plane::after {
    content: "";
    position: absolute;
    background: inherit;
}

.spribe-aviator-plane::before {
    left: 24px;
    top: -14px;
    width: 42px;
    height: 18px;
    transform: skewX(-26deg);
}

.spribe-aviator-plane::after {
    right: 10px;
    top: 10px;
    width: 26px;
    height: 12px;
    transform: skewX(22deg);
}

.spribe-aviator-text {
    position: absolute;
    left: 44px;
    bottom: 34px;
    color: #ff204e;
    font-size: 48px;
    font-style: italic;
    font-weight: 700;
}

.spribe-dice-icon,
.spribe-plinko-icon,
.spribe-mines-icon {
    position: absolute;
    right: 22px;
    top: 30px;
}

.spribe-dice-icon {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

.spribe-dice-icon::before,
.spribe-dice-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 70% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 30% 70%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 70% 70%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 3px);
}

.spribe-plinko-icon {
    width: 52px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.spribe-plinko-icon::before {
    content: "";
    position: absolute;
    inset: 8px;
    background:
        radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 50% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 35% 62%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 65% 62%, #fff 0 2px, transparent 3px);
}

.spribe-mines-icon {
    width: 54px;
    height: 54px;
}

.spribe-mines-icon::before,
.spribe-mines-icon::after {
    content: "";
    position: absolute;
}

.spribe-mines-icon::before {
    left: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
}

.spribe-mines-icon::after {
    right: 0;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow:
        0 -13px 0 -9px rgba(255, 255, 255, 0.9),
        -9px 0 0 -9px rgba(255, 255, 255, 0.9),
        9px 0 0 -9px rgba(255, 255, 255, 0.9),
        0 13px 0 -9px rgba(255, 255, 255, 0.9);
}

.footer-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(100%, 510px);
    transform: translateX(-50%);
    background: #ffffff;
    border-top: 1px solid #d7d7d7;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    color: #7d7d7d;
    font-size: 14px;
    font-weight: 500;
}

.footer-item.active {
    color: #0e88d4;
}

.footer-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.footer-home::before,
.footer-promo::before,
.footer-mine::before,
.footer-mine::after {
    content: "";
    position: absolute;
}

.footer-home::before {
    inset: 2px 1px 3px;
    background: currentColor;
    clip-path: polygon(12% 38%, 33% 38%, 42% 24%, 59% 24%, 68% 38%, 88% 38%, 100% 100%, 0 100%);
}

.footer-promo::before {
    left: 3px;
    top: 4px;
    width: 18px;
    height: 15px;
    background: currentColor;
    clip-path: polygon(0 48%, 48% 0, 100% 48%, 52% 96%);
    border-radius: 2px;
}

.footer-promo::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
}

.footer-mine::before {
    left: 4px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.footer-mine::after {
    left: 10px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -5px 8px 0 -1px currentColor, 5px 8px 0 -1px currentColor;
}

.login-page {
    min-height: 100vh;
    background: #f7f7f7;
}

.login-topbar {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 102px;
    padding: 0 24px;
    background: var(--header-blue);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

.login-topbar h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
}

.login-back {
    color: #ffffff;
    font-size: 42px;
    line-height: 1;
}

.login-content {
    padding: 28px 0 120px;
    background: #f7f7f7;
}

.form-alert {
    margin: 0 36px 24px;
    padding: 14px 16px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}

.alert-error {
    background: #fde8e7;
    color: #b3261e;
    border: 1px solid #f3c2be;
}

.alert-success {
    background: #e8f5e9;
    color: #1c7c35;
    border: 1px solid #b8dec0;
}

.alert-warning {
    background: #fff4df;
    color: #9a5a00;
    border: 1px solid #f0d29b;
}

.login-form {
    display: grid;
    gap: 42px;
}

.login-field-group {
    display: grid;
    gap: 8px;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72px;
    margin: 0 36px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
}

.login-field.has-error {
    border-color: #d93025;
}

.field-error {
    display: none;
    margin: 0 36px 0 88px;
    color: #d93025;
    font-size: 14px;
    line-height: 1.3;
}

.field-error.is-visible {
    display: block;
}

.field-text {
    font-size: 22px;
    font-weight: 400;
}

.field-control {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #2c2c2c;
    font: inherit;
    font-size: 22px;
    font-weight: 400;
}

.field-control::placeholder {
    color: #7a7a7a;
    opacity: 1;
}

.field-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 26px;
    cursor: pointer;
}

.dark-value {
    color: #262626;
}

.dark-text {
    color: #262626;
}

.muted-text {
    color: #7a7a7a;
}

.field-icon {
    position: relative;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    flex: 0 0 28px;
}

.phone-icon::before,
.phone-icon::after,
.chat-icon::before,
.chat-icon::after,
.gift-icon::before,
.gift-icon::after,
.key-icon::before,
.key-icon::after {
    content: "";
    position: absolute;
}

.gray-icon::before,
.gray-icon::after {
    border-color: #7d7d7d !important;
    background: #7d7d7d !important;
}

.phone-icon::before {
    left: 5px;
    top: 1px;
    width: 14px;
    height: 24px;
    border: 4px solid #1188cf;
    border-radius: 4px;
}

.phone-icon::after {
    left: 10px;
    bottom: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1188cf;
}

.key-icon::before {
    left: 2px;
    top: 8px;
    width: 10px;
    height: 10px;
    border: 4px solid #7d7d7d;
    border-radius: 50%;
}

.key-icon::after {
    left: 16px;
    top: 14px;
    width: 12px;
    height: 4px;
    background: #7d7d7d;
    box-shadow: 6px 0 0 #7d7d7d, 6px 4px 0 #7d7d7d;
}

.chat-icon::before {
    left: 2px;
    top: 4px;
    width: 24px;
    height: 18px;
    border-radius: 4px;
    background: #7d7d7d;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 36% 82%, 22% 100%, 22% 82%, 0 82%);
}

.chat-icon::after {
    left: 7px;
    top: 11px;
    width: 14px;
    height: 4px;
    background:
        radial-gradient(circle, #fff 0 2px, transparent 3px),
        radial-gradient(circle, #fff 0 2px, transparent 3px),
        radial-gradient(circle, #fff 0 2px, transparent 3px);
    background-size: 4px 4px;
    background-repeat: no-repeat;
    background-position: 0 0, 5px 0, 10px 0;
}

.gift-icon::before {
    left: 2px;
    top: 6px;
    width: 24px;
    height: 18px;
    border: 3px solid #7d7d7d;
    border-radius: 3px;
}

.gift-icon::after {
    left: 11px;
    top: 3px;
    width: 4px;
    height: 24px;
    background: #7d7d7d;
    box-shadow: -8px 7px 0 -1px #7d7d7d, 8px 7px 0 -1px #7d7d7d;
}

.field-caret {
    position: absolute;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.select-field .field-caret,
.field-caret.down {
    border-top: 9px solid #8e8e8e;
}

.field-caret.up {
    top: 19px;
    border-bottom: 9px solid #8e8e8e;
}

.field-caret.down {
    bottom: 19px;
}

.login-submit {
    width: 360px;
    max-width: calc(100% - 72px);
    height: 66px;
    margin: 8px auto 0;
    border: 0;
    border-radius: 2px;
    background: #1188cf;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.register-form {
    gap: 38px;
}

.register-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 194px;
    gap: 20px;
    align-items: center;
    margin: 0 34px;
}

.register-code-field {
    margin: 0;
}

.otp-btn {
    height: 72px;
    border: 1px solid #dfdfdf;
    background: #ffffff;
    color: #2f2f2f;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.login-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.login-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 136px;
    height: 58px;
    padding: 0 22px;
    background: #ffffff;
    color: #2f2f2f;
    font-size: 19px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.login-action-btn.wide {
    min-width: 210px;
}

@media (max-width: 420px) {
    .download-strip {
        min-height: 84px;
        padding: 0 20px;
    }

    .app-badge {
        width: 58px;
        height: 58px;
    }

    .download-text {
        font-size: 24px;
    }

    .banner-slider {
        height: 160px;
        border-radius: 26px;
    }

    .banner-slide img {
        border-radius: 26px;
    }

    .banner-nav {
        font-size: 58px;
    }

    .banner-title {
        font-size: 22px;
    }

    .banner-gift {
        right: 34px;
        width: 106px;
        height: 106px;
    }

    .thumb-card,
    .game-thumb {
        height: 170px;
    }

    .mini-thumb {
        height: 154px;
    }

    .login-topbar {
        height: 86px;
        padding: 0 18px;
    }

    .login-topbar h1 {
        font-size: 24px;
    }

    .form-alert {
        margin: 0 18px 18px;
        font-size: 14px;
    }

    .login-field {
        min-height: 66px;
        margin: 0 18px;
    }

    .field-error {
        margin: 0 18px 0 70px;
    }

    .field-text {
        font-size: 18px;
    }

    .field-control {
        font-size: 18px;
    }

    .login-submit {
        height: 60px;
        max-width: calc(100% - 36px);
        font-size: 20px;
    }

    .register-row {
        grid-template-columns: minmax(0, 1fr) 110px;
        gap: 12px;
        margin: 0 18px;
    }

    .otp-btn {
        height: 66px;
        font-size: 16px;
    }

    .login-actions {
        gap: 12px;
        padding: 0 18px;
    }

    .login-action-btn {
        min-width: 0;
        flex: 1 1 0;
        font-size: 16px;
    }

    .login-action-btn.wide {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .mobile-page {
        max-width: 100%;
    }

    .download-strip,
    .top-header,
    .login-topbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-heading {
        margin-left: 14px;
        margin-right: 14px;
    }

    .content-section {
        padding-left: 4px;
        padding-right: 4px;
    }

    .card-grid,
    .triple-grid {
        gap: 10px;
    }

    .banner-nav {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 560px) {
    .download-strip {
        min-height: 76px;
        gap: 10px;
    }

    .download-left {
        gap: 12px;
        min-width: 0;
    }

    .download-text {
        font-size: 22px;
    }

    .app-badge {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .app-badge img {
        border-radius: 12px;
    }

    .top-header {
        height: 58px;
        padding: 0 14px;
    }

    .logo-box {
        height: 34px;
    }

    .logo-box img {
        max-height: 34px;
    }

    .header-icons {
        gap: 14px;
    }

    .hero-banner {
        padding: 10px 6px 12px;
    }

    .banner-slider {
        height: 138px;
        border-radius: 18px;
    }

    .banner-slide img {
        border-radius: 18px;
    }

    .banner-nav {
        font-size: 42px;
    }

    .banner-prev {
        left: 6px;
    }

    .banner-next {
        right: 10px;
    }

    .section-heading h2 {
        font-size: 17px;
    }

    .view-all {
        min-width: 78px;
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .thumb-card,
    .game-thumb {
        height: 148px;
        margin: 8px 8px 0;
        border-radius: 14px;
    }

    .thumb-card img {
        border-radius: 14px;
    }

    .game-name,
    .mini-name {
        font-size: 13px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .triple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mini-thumb {
        height: 146px;
        margin: 8px;
    }

    .quick-section {
        min-height: 88px;
    }

    .quick-empty {
        height: 18px;
    }

    .login-content {
        padding-top: 20px;
    }

    .login-form,
    .register-form {
        gap: 24px;
    }

    .login-field {
        min-height: 60px;
        margin-left: 14px;
        margin-right: 14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .field-control,
    .field-text {
        font-size: 17px;
    }

    .login-submit {
        width: auto;
        max-width: calc(100% - 28px);
        margin-top: 4px;
    }

    .register-row {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 10px;
        margin-left: 14px;
        margin-right: 14px;
    }

    .otp-btn {
        height: 60px;
        font-size: 15px;
    }

    .footer-nav {
        width: 100%;
    }

    .footer-item {
        min-height: 62px;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .download-strip {
        padding-left: 12px;
        padding-right: 12px;
    }

    .download-text {
        font-size: 19px;
    }

    .header-icons {
        gap: 10px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .triple-grid {
        grid-template-columns: 1fr;
    }

    .thumb-card,
    .game-thumb,
    .mini-thumb {
        height: 170px;
    }

    .section-heading {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }

    .login-actions {
        flex-direction: column;
    }

    .register-row {
        grid-template-columns: 1fr;
    }

    .otp-btn {
        width: 100%;
    }
}