:root {
    --bg: #030817;
    --sonic-blue: #17569B;
    --sonic-red: #DA2528;
    --sonic-white: #FFFFFF;
    --sonic-skin: #FFD78F;
    --panel: #0b3f84;
    --panel-2: #17569B;
    --cyan: #2fe8ff;
    --cyan-soft: rgba(47, 232, 255, .35);
    --gold: #FFD78F;
    --orange: #ff7a18;
    --pink: #DA2528;
    --green: #20ff87;
    --white: #f7fbff;
    --shadow: 0 18px 55px rgba(0, 0, 0, .55);
    font-family: "Trebuchet MS", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    color: var(--white);
    background:
        radial-gradient(circle at 18% 12%, rgba(23, 86, 155, .58), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(218, 37, 40, .20), transparent 24%),
        radial-gradient(circle at 52% 92%, rgba(255, 215, 143, .18), transparent 30%),
        linear-gradient(145deg, #01030c, #082a5a 48%, #020412);
}

#root {
    width: 100%;
    height: 100%;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
    color: inherit;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    gap: 16px;
    align-content: center;
    background: #020614;
    transition: opacity .35s ease, visibility .35s ease;
}

.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader__ring {
    width: 132px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--gold), var(--cyan), #234dff, var(--pink), var(--gold));
    animation: spin 1.1s linear infinite;
    box-shadow: 0 0 35px var(--cyan-soft);
}

.preloader__ring img {
    width: 86px;
    border-radius: 50%;
    animation: counterSpin 1.1s linear infinite;
}

.preloader span {
    color: var(--gold);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-shell {
    width: 100vw;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(6px, 1.2vw, 16px);
}

.lobby-frame {
    position: relative;
    width: min(100%, calc(100dvh * 1.86));
    height: min(100dvh, calc(100vw / 1.86));
    min-height: 360px;
    max-width: 1600px;
    overflow: hidden;
    isolation: isolate;
    border-radius: clamp(14px, 2vw, 34px);
    border: 3px solid rgba(23, 230, 255, .72);
    background:
        linear-gradient(90deg, rgba(8, 37, 86, .94), rgba(8, 8, 44, .88)),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 78px);
    box-shadow: inset 0 0 0 5px rgba(8, 20, 76, .95), inset 0 0 55px rgba(23, 230, 255, .28), var(--shadow);
}

.sonic-bg {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: .26;
    width: clamp(150px, 18vw, 290px);
    filter: drop-shadow(0 0 24px rgba(47, 232, 255, .65));
}

.sonic-bg--left {
    left: -3.8%;
    bottom: 2%;
    transform: rotate(-11deg);
}

.sonic-bg--right {
    right: -4.6%;
    top: 20%;
    transform: scaleX(-1) rotate(-8deg);
    opacity: .30;
}

.phaser-layer,
.game-phaser-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.phaser-layer canvas,
.game-phaser-layer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.lobby-frame::before,
.lobby-frame::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: -1;
    border: 1px solid rgba(23, 230, 255, .28);
    border-radius: inherit;
}

.lobby-frame::after {
    inset: auto 8% 7% 8%;
    height: 16%;
    border: 0;
    background: radial-gradient(ellipse at center, rgba(255, 230, 77, .30), transparent 68%);
}

.speed-lines {
    position: absolute;
    inset: 0;
    opacity: .42;
    background:
        linear-gradient(100deg, transparent 5%, rgba(23, 230, 255, .8) 5.4%, transparent 6.2%),
        linear-gradient(115deg, transparent 62%, rgba(255, 230, 77, .7) 62.5%, transparent 63.3%),
        linear-gradient(75deg, transparent 30%, rgba(255, 43, 194, .55) 30.3%, transparent 31%);
    animation: pulseLines 2.7s ease-in-out infinite;
}

.top-bar {
    position: absolute;
    inset: 2.2% 2.2% auto 2.2%;
    height: clamp(54px, 7.2%, 78px);
    display: grid;
    grid-template-columns: minmax(150px, .9fr) minmax(160px, .9fr) minmax(260px, 1.45fr) minmax(90px, .55fr) minmax(90px, .55fr) minmax(58px, .42fr);
    gap: 10px;
    align-items: center;
    z-index: 3;
}

.player-chip,
.wallet-chip,
.brand-plate,
.top-icon,
.fullscreen-btn {
    min-width: 0;
    height: 100%;
    border: 2px solid var(--cyan);
    background: linear-gradient(180deg, rgba(32, 88, 170, .94), rgba(8, 23, 72, .94));
    box-shadow: inset 0 0 18px rgba(23, 230, 255, .35), 0 0 14px rgba(23, 230, 255, .22);
}

.player-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px 12px 12px 999px;
    overflow: hidden;
}

.player-chip img {
    width: clamp(34px, 4.5vh, 48px);
    height: clamp(34px, 4.5vh, 48px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}

.player-chip strong,
.wallet-chip strong {
    display: block;
    color: var(--gold);
    font-size: clamp(13px, 1.45vw, 23px);
    line-height: 1;
}

.player-chip span {
    color: #9eefff;
    font-size: clamp(9px, .8vw, 13px);
}

.wallet-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px 5px 12px;
    border-radius: 11px;
}

.coin {
    display: grid;
    place-items: center;
    width: clamp(30px, 4.3vh, 42px);
    aspect-ratio: 1;
    border-radius: 50%;
    color: #5a2a00;
    font-weight: 900;
    background: radial-gradient(circle, #fff7a8, #ffb41d 65%, #db6c00);
}

.wallet-chip button {
    width: clamp(30px, 4.2vh, 42px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 8px;
    color: #111;
    font-size: 22px;
    font-weight: 900;
    background: var(--gold);
}

.brand-plate {
    display: grid;
    place-items: center;
    padding: 5px 18px;
    border-radius: 14px;
    border: 2px solid rgba(23, 230, 255, .9);
    background: linear-gradient(180deg, rgba(7, 21, 71, .78), rgba(2, 7, 30, .82));
}

.brand-plate span {
    color: #fff;
    font-size: clamp(18px, 2.1vw, 36px);
    font-weight: 1000;
    text-transform: uppercase;
    text-shadow: 2px 3px 0 #07104a, 0 0 14px rgba(255, 255, 255, .65);
    white-space: nowrap;
}

.brand-plate img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(23,230,255,.55));
}

.top-icon {
    min-width: 0;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.top-icon--gold {
    color: #201100;
    border-color: var(--gold);
    background: linear-gradient(#fff7d8, var(--sonic-skin) 55%, #ffb02f);
}

.fullscreen-btn {
    width: 100%;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.fullscreen-btn span {
    width: 46%;
    aspect-ratio: 1;
    border: 5px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 12px #fff;
}

.winner-strip {
    position: absolute;
    top: calc(2.2% + clamp(54px, 7.2%, 78px) + 10px);
    left: 11.8%;
    right: 4.2%;
    height: clamp(28px, 4.2%, 42px);
    z-index: 3;
    display: flex;
    align-items: center;
    border: 1px solid rgba(23, 230, 255, .75);
    border-radius: 999px;
    background: rgba(2, 9, 38, .72);
    box-shadow: inset 0 0 16px rgba(23, 230, 255, .28);
}

.winner-strip__icon {
    width: 44px;
    color: var(--gold);
    text-align: center;
    font-size: clamp(14px, 1.5vw, 24px);
    text-shadow: 0 0 12px var(--gold);
}

.winner-strip__track {
    overflow: hidden;
    flex: 1;
    white-space: nowrap;
}

.winner-strip__track div {
    display: inline-flex;
    gap: 44px;
    min-width: 200%;
    animation: ticker 18s linear infinite;
}

.winner-strip__track span {
    color: #d8fbff;
    font-size: clamp(10px, 1.04vw, 16px);
    font-weight: 800;
}

.side-rail {
    position: absolute;
    top: 20.2%;
    bottom: 17.4%;
    left: 2.1%;
    width: 8.2%;
    z-index: 4;
    display: grid;
    gap: 2.3%;
}

.rail-btn {
    border: 2px solid rgba(23, 230, 255, .88);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 85, 142, .94), rgba(4, 23, 62, .96));
    box-shadow: inset 0 0 14px rgba(23, 230, 255, .36), 0 5px 0 rgba(0, 0, 0, .28);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    text-transform: uppercase;
    transition: transform .18s ease, filter .18s ease;
}

.rail-btn span {
    color: #e8fcff;
    font-size: clamp(13px, 1.7vw, 28px);
    line-height: 1;
    font-weight: 1000;
}

.rail-btn b {
    color: #d8f7ff;
    font-size: clamp(8px, .9vw, 14px);
}

.rail-btn.is-active {
    border-color: var(--gold);
    background: linear-gradient(180deg, #775300, #20154f);
    filter: drop-shadow(0 0 13px rgba(255, 230, 77, .6));
}

.rail-btn:hover {
    transform: translateX(4px);
}

.featured-card {
    position: absolute;
    top: 24%;
    bottom: 19%;
    left: 12%;
    width: 24%;
    z-index: 2;
    border: 4px solid var(--sonic-skin);
    border-radius: 14px;
    padding: 1.2%;
    background:
        linear-gradient(135deg, rgba(255, 230, 77, .16), transparent 28%),
        linear-gradient(180deg, #0b8fce, #081047 68%, #02071f);
    box-shadow: inset 0 0 0 4px var(--cyan), 0 0 26px rgba(255, 230, 77, .24);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.featured-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 18px rgba(255, 230, 77, .35));
}

.featured-card__badge {
    position: absolute;
    top: -15px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #2b1000;
    font-weight: 1000;
    text-transform: uppercase;
    background: linear-gradient(#fff9e6, var(--sonic-skin) 55%, #ff8a00);
    box-shadow: 0 0 16px rgba(255, 230, 77, .5);
}

.featured-card__art {
    height: 100%;
    border-radius: 10px;
    display: grid;
    place-items: end center;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.95) 0 8%, transparent 9%),
        radial-gradient(circle at 45% 38%, rgba(0, 234, 255, .92) 0 18%, transparent 19%),
        radial-gradient(circle at 52% 54%, rgba(255, 38, 50, .86) 0 11%, transparent 12%),
        linear-gradient(180deg, #62edff, #075cb5 45%, #02091d);
}

.featured-card__art img {
    position: absolute;
    inset: 4.5%;
    width: 91%;
    height: 82%;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: inset 0 0 22px rgba(0,0,0,.45);
}

.featured-card__art span,
.featured-card__art strong {
    display: block;
    color: #f8fdff;
    font-weight: 1000;
    font-size: clamp(26px, 4.4vw, 76px);
    line-height: .84;
    text-shadow: 3px 4px 0 #10205a, 0 0 18px #00eaff;
}

.featured-card__art strong {
    position: relative;
    z-index: 2;
    width: 90%;
    margin-bottom: 5%;
    padding: 7px 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(1, 8, 30, .08), rgba(1, 8, 30, .82));
    font-size: clamp(25px, 4vw, 62px);
    text-align: center;
}

.featured-card__art span {
    color: #67f3ff;
}

.primary-action {
    width: 100%;
    height: 14%;
    min-height: 34px;
    margin-top: 4%;
    border: 0;
    border-radius: 9px;
    color: #220e00;
    font-weight: 1000;
    text-transform: uppercase;
    background: linear-gradient(#fff471, #ff8a00);
    box-shadow: inset 0 -4px 0 rgba(118, 38, 0, .28), 0 0 16px rgba(255, 230, 77, .35);
}

.games-grid {
    position: absolute;
    top: 24%;
    right: 4.2%;
    bottom: 19%;
    left: 38.5%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4.6% 3.4%;
    z-index: 2;
}

.game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 4.2% 4.2% 3.5%;
    border-radius: 13px;
    border: 2px solid rgba(47, 232, 255, .95);
    background:
        linear-gradient(135deg, rgba(23, 230, 255, .30), transparent 30%),
        linear-gradient(180deg, rgba(13, 56, 131, .96), rgba(8, 10, 55, .98));
    box-shadow: inset 0 0 0 3px rgba(16, 84, 158, .9), inset 0 0 22px rgba(23, 230, 255, .24), 0 10px 0 rgba(0,0,0,.18);
    transition: transform .2s ease, filter .2s ease;
    cursor: pointer;
}

.game-card::after,
.featured-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(120deg, transparent 8%, rgba(255,255,255,.22) 18%, transparent 31%),
        radial-gradient(circle at 82% 16%, rgba(255, 215, 143, .28), transparent 20%);
    mix-blend-mode: screen;
}

.game-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none;
}

.game-card:hover {
    transform: translateY(-5px) scale(1.02);
    filter: drop-shadow(0 0 18px rgba(23, 230, 255, .45));
}

.game-card__tag {
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 2;
    color: var(--green);
    font-size: clamp(12px, 1.6vw, 27px);
    font-weight: 1000;
    text-shadow: 2px 2px 0 #09164c, 0 0 8px #18ff85;
}

.game-card__image {
    height: 78%;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.72), transparent 17%),
        linear-gradient(140deg, #ffbe2f, #d71b5f 43%, #2029b4);
}

.game-card__image--fishing {
    background: radial-gradient(circle, #9dfff7, #0971d4 48%, #001a62);
}

.game-card__image--table {
    background: radial-gradient(circle, #ffd87d, #9f2749 47%, #150b45);
}

.game-card__image--skill {
    background: radial-gradient(circle, #fff0a8, #00a9ff 46%, #1b0867);
}

.game-card__image span {
    color: white;
    font-size: clamp(34px, 5.3vw, 86px);
    font-weight: 1000;
    text-shadow: 4px 5px 0 #06104a, 0 0 18px rgba(255,255,255,.65);
}

.game-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s ease;
}

.game-card:hover .game-card__image img {
    transform: scale(1.06);
}

.game-card__name {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 5%;
    min-height: 23%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: clamp(12px, 1.55vw, 25px);
    font-weight: 1000;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 3px 0 #07104a, 0 0 10px #ff7a18;
    line-height: .96;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(2, 8, 28, .12), rgba(2, 8, 28, .86));
}

.bottom-dock {
    position: absolute;
    left: 14%;
    right: 6.5%;
    bottom: 2.2%;
    height: 13.2%;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr 2.1fr 1fr 1fr;
    gap: 1.2%;
    align-items: end;
}

.bottom-dock button {
    min-width: 0;
    height: 82%;
    border: 2px solid var(--cyan);
    border-radius: 16px 16px 8px 8px;
    background: linear-gradient(180deg, rgba(27, 93, 170, .94), rgba(8, 19, 70, .98));
    box-shadow: inset 0 0 20px rgba(23, 230, 255, .34), 0 0 15px rgba(23,230,255,.2);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
}

.bottom-dock span {
    font-size: clamp(18px, 2.4vw, 36px);
    line-height: 1;
}

.bottom-dock b {
    color: #d7f9ff;
    font-size: clamp(9px, .95vw, 15px);
    text-transform: uppercase;
}

.dock-jackpot {
    border-color: var(--gold) !important;
    background: linear-gradient(180deg, #2c145c, #700aa0 45%, #151052) !important;
}

.dock-jackpot small {
    color: var(--gold);
    font-weight: 900;
    text-transform: uppercase;
}

.dock-jackpot strong {
    color: #fff36a;
    font-size: clamp(18px, 2.65vw, 43px);
    line-height: 1;
    text-shadow: 0 0 16px #fff;
}

.modal,
.game-stage {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    place-items: center;
    background: rgba(1, 3, 12, .76);
    backdrop-filter: blur(8px);
}

.modal.is-open,
.game-stage.is-open {
    display: grid;
}

.modal__panel {
    position: relative;
    width: min(92vw, 430px);
    padding: 22px;
    border: 2px solid var(--cyan);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 30, 91, .96), rgba(4, 8, 32, .98));
    box-shadow: 0 0 36px rgba(23, 230, 255, .35);
    animation: modalIn .24s ease-out;
}

.modal__close,
.exit-lobby {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 46px;
    aspect-ratio: 1;
    border: 2px solid #fff;
    border-radius: 12px;
    color: #08205f;
    background: linear-gradient(#fff, #80ebff);
    font-size: 28px;
    font-weight: 1000;
    line-height: 1;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 22px 46px 18px 0;
}

.auth-tabs button {
    min-height: 44px;
    border: 1px solid rgba(23,230,255,.55);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    font-weight: 900;
    text-transform: uppercase;
}

.auth-tabs button.is-active {
    color: #241300;
    border-color: var(--gold);
    background: linear-gradient(#fff47b, #ff8a00);
}

.auth-form {
    display: none;
}

.auth-form.is-active {
    display: grid;
    gap: 12px;
}

.auth-form h2 {
    margin: 0 0 4px;
    color: var(--gold);
    font-size: 28px;
}

.auth-form label {
    display: grid;
    gap: 6px;
    color: #b9f5ff;
    font-size: 14px;
    font-weight: 800;
}

.auth-form input {
    min-height: 46px;
    border: 1px solid rgba(23,230,255,.55);
    border-radius: 10px;
    padding: 0 13px;
    color: #fff;
    outline: 0;
    background: rgba(1, 8, 28, .82);
}

.primary-action {
    height: 48px;
    margin: 8px 0 0;
}

.game-stage {
    background:
        radial-gradient(circle at 50% 30%, rgba(23,230,255,.18), transparent 38%),
        linear-gradient(145deg, #02040c, #051b5c);
    overflow: hidden;
}

.game-stage__screen {
    position: relative;
    z-index: 2;
    width: min(96vw, 1280px);
    height: min(86dvh, 720px);
    border: 4px solid var(--cyan);
    border-radius: 22px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    text-align: center;
    background:
        linear-gradient(rgba(8, 23, 72, .88), rgba(8, 10, 36, .92)),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(23,230,255,.06) 42px 44px);
    box-shadow: inset 0 0 70px rgba(23,230,255,.22);
}

.game-phaser-layer {
    z-index: 1;
    opacity: .82;
}

.game-stage__screen span {
    color: var(--cyan);
    font-weight: 900;
    text-transform: uppercase;
}

.game-stage__screen strong {
    color: var(--gold);
    font-size: clamp(34px, 7vw, 92px);
    text-transform: uppercase;
    text-shadow: 4px 5px 0 #07104a, 0 0 20px #ff7a18;
}

.game-stage__screen p {
    margin: 0;
    color: #d9f8ff;
}

@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes counterSpin {
    to { transform: rotate(-360deg); }
}

@keyframes pulseLines {
    50% { opacity: .72; transform: translateX(8px); }
}

@keyframes modalIn {
    from { transform: translateY(14px) scale(.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 900px) {
    .page-shell {
        padding: 4px;
    }

    .lobby-frame {
        min-height: 0;
        width: 100vw;
        height: 100dvh;
        border-radius: 12px;
    }

    .top-bar {
        height: 48px;
        grid-template-columns: 1fr 1fr 1.15fr 58px 58px 44px;
        gap: 5px;
    }

    .top-icon {
        padding: 0 5px;
        font-size: 10px;
    }

    .brand-plate {
        padding: 4px 8px;
    }

    .winner-strip {
        top: calc(2.2% + 48px + 7px);
        left: 11.5%;
        right: 3.5%;
    }
}

@media (orientation: portrait) {
    .lobby-frame {
        transform: rotate(90deg);
        width: 100dvh;
        height: 100vw;
        max-width: none;
        min-height: 0;
    }

    .page-shell {
        overflow: hidden;
    }
}

@media (max-width: 620px) and (orientation: landscape) {
    .winner-strip {
        left: 12%;
    }

    .player-chip span,
    .bottom-dock b {
        display: none;
    }
}

/* Premium Sonic auth popup */
.modal {
    background:
        radial-gradient(circle at 26% 32%, rgba(23, 86, 155, .34), transparent 26%),
        radial-gradient(circle at 75% 38%, rgba(218, 37, 40, .16), transparent 24%),
        rgba(1, 3, 12, .80);
    backdrop-filter: blur(11px) saturate(1.18);
}

.modal__panel {
    width: min(92vw, 520px);
    max-height: 90dvh;
    overflow: hidden auto;
    padding: 24px 28px 28px;
    border: 3px solid var(--cyan);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), transparent 18%),
        radial-gradient(circle at 18% 12%, rgba(47, 232, 255, .24), transparent 28%),
        radial-gradient(circle at 93% 18%, rgba(255, 215, 143, .18), transparent 24%),
        linear-gradient(180deg, rgba(10, 45, 112, .98), rgba(3, 9, 38, .98));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        inset 0 0 38px rgba(23, 86, 155, .42),
        0 0 36px rgba(47, 232, 255, .38),
        0 24px 70px rgba(0,0,0,.55);
}

.modal__panel::before,
.modal__panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.modal__panel::before {
    width: 180px;
    height: 180px;
    right: -72px;
    top: -78px;
    border: 18px solid rgba(255, 215, 143, .30);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 215, 143, .22);
}

.modal__panel::after {
    inset: 0;
    background:
        linear-gradient(118deg, transparent 8%, rgba(255,255,255,.10) 18%, transparent 30%),
        linear-gradient(62deg, transparent 58%, rgba(218, 37, 40, .17) 59%, transparent 68%);
    mix-blend-mode: screen;
}

.modal__close {
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 52px;
    border-color: var(--sonic-white);
    border-radius: 15px;
    color: #06164f;
    background: linear-gradient(#fff, #b7f6ff);
    box-shadow: 0 0 18px rgba(47,232,255,.42);
}

.auth-brand,
.auth-tabs,
.auth-form {
    position: relative;
    z-index: 2;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    margin: 0 70px 18px 0;
    padding: 10px 14px;
    border: 1px solid rgba(47, 232, 255, .38);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(2, 7, 31, .64), rgba(23, 86, 155, .34));
    box-shadow: inset 0 0 20px rgba(47, 232, 255, .12);
}

.auth-brand img {
    width: min(46vw, 210px);
    max-height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(47,232,255,.48));
}

.auth-brand span {
    color: #c9fbff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.15;
}

.auth-tabs {
    gap: 10px;
    margin: 0 0 22px;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid rgba(47,232,255,.24);
    background: rgba(1, 8, 28, .64);
}

.auth-tabs button {
    min-height: 52px;
    border: 1px solid rgba(47,232,255,.55);
    border-radius: 12px;
}

.auth-tabs button.is-active {
    border-color: var(--sonic-skin);
    background: linear-gradient(#fff7d8, var(--sonic-skin) 58%, #ff9f16);
    box-shadow: 0 8px 18px rgba(255, 215, 143, .26), inset 0 -4px 0 rgba(168, 78, 0, .22);
}

.auth-form.is-active {
    gap: 14px;
}

.auth-form h2 {
    margin: 0;
    color: var(--sonic-skin);
    font-size: clamp(28px, 3vw, 42px);
    text-shadow: 2px 3px 0 #06164f, 0 0 16px rgba(255,215,143,.32);
}

.auth-copy {
    margin: -6px 0 2px;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    font-weight: 700;
}

.auth-form label {
    gap: 7px;
    color: #d8fbff;
    font-weight: 900;
}

.input-shell {
    min-height: 58px;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(47,232,255,.74);
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(23, 86, 155, .34), transparent 28%),
        rgba(1, 8, 28, .86);
    box-shadow: inset 0 0 18px rgba(47,232,255,.10);
}

.input-shell b {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--sonic-skin);
    background: rgba(23, 86, 155, .42);
    border-right: 1px solid rgba(47,232,255,.25);
    font-size: 15px;
    font-weight: 1000;
}

.auth-form .input-shell input {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 0;
    padding: 0 16px;
    background: transparent;
    font-weight: 800;
}

.input-shell:focus-within {
    border-color: var(--sonic-skin);
    box-shadow: inset 0 0 18px rgba(47,232,255,.14), 0 0 18px rgba(255,215,143,.22);
}

.auth-status {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(47,232,255,.36);
    border-radius: 12px;
    color: #d8fbff;
    background: rgba(1, 8, 28, .64);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.modal .primary-action {
    height: 62px;
    margin: 10px 0 0;
    border-radius: 14px;
    font-size: 18px;
    background: linear-gradient(#fff7d8, var(--sonic-skin) 38%, #ff9b12);
    box-shadow: inset 0 -6px 0 rgba(180, 78, 0, .28), 0 12px 24px rgba(255, 215, 143, .28);
}

.modal .primary-action:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 620px) {
    .modal__panel {
        width: min(94vw, 430px);
        padding: 18px;
    }

    .auth-brand {
        margin-right: 60px;
        min-height: 62px;
    }

    .auth-brand span {
        display: none;
    }
}

/* Auth popup must fit without an internal scrollbar */
.modal__panel {
    width: min(90vw, 500px);
    max-height: min(86dvh, 620px);
    overflow: hidden;
    padding: 18px 22px 20px;
}

.auth-brand {
    min-height: 58px;
    margin: 0 62px 12px 0;
    padding: 7px 12px;
}

.auth-brand img {
    max-height: 42px;
    width: min(42vw, 190px);
}

.auth-tabs {
    margin-bottom: 14px;
}

.auth-tabs button {
    min-height: 44px;
}

.auth-form.is-active {
    gap: 10px;
}

.auth-form h2 {
    font-size: clamp(25px, 2.6vw, 36px);
}

.auth-copy {
    margin: -5px 0 0;
    font-size: 13px;
}

.auth-form label {
    gap: 5px;
}

.input-shell {
    min-height: 48px;
    grid-template-columns: 44px 1fr;
}

.auth-form .input-shell input {
    min-height: 48px;
}

.modal .primary-action {
    height: 52px;
    margin-top: 6px;
}

.modal__close {
    width: 48px;
}

@media (max-height: 760px) {
    .modal__panel {
        width: min(86vw, 470px);
        max-height: 82dvh;
        padding: 14px 18px 16px;
    }

    .auth-brand {
        min-height: 50px;
        margin-bottom: 8px;
    }

    .auth-brand img {
        max-height: 36px;
    }

    .auth-brand span,
    .auth-copy {
        display: none;
    }

    .auth-tabs {
        margin-bottom: 10px;
    }

    .auth-tabs button {
        min-height: 40px;
    }

    .auth-form.is-active {
        gap: 8px;
    }

    .auth-form h2 {
        font-size: 28px;
    }

    .input-shell,
    .auth-form .input-shell input {
        min-height: 44px;
    }

    .modal .primary-action {
        height: 48px;
    }
}

.player-chip strong {
    max-width: min(16vw, 170px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-panel {
    width: min(90vw, 620px);
    max-height: min(86dvh, 620px);
}

.finance-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.finance-head div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(47, 232, 255, .48);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(23, 86, 155, .74), rgba(2, 7, 22, .74));
    box-shadow: inset 0 0 22px rgba(47, 232, 255, .12);
}

.finance-head small {
    display: block;
    color: #baf6ff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-head strong {
    display: block;
    margin-top: 4px;
    color: var(--sonic-skin);
    font-size: clamp(18px, 2.3vw, 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.method-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.method-card {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(47, 232, 255, .68);
    border-radius: 14px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 215, 143, .16), transparent 42%),
        linear-gradient(180deg, rgba(23, 86, 155, .92), rgba(4, 13, 46, .96));
    box-shadow: 0 10px 20px rgba(0, 0, 0, .22), inset 0 0 18px rgba(47, 232, 255, .14);
    cursor: pointer;
}

.method-card:hover {
    transform: translateY(-1px);
    border-color: var(--sonic-skin);
}

.method-card__icon {
    width: 70px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 16px rgba(47, 232, 255, .22);
    overflow: hidden;
}

.method-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.method-card__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    text-align: left;
}

.method-card__copy b,
.method-card__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.method-card__copy b {
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.method-card__copy small {
    color: #baf6ff;
    font-size: 12px;
    font-weight: 800;
}

.method-empty {
    grid-column: 1 / -1;
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(47, 232, 255, .54);
    border-radius: 16px;
    color: #d8fbff;
    font-weight: 900;
    text-align: center;
    background: rgba(2, 7, 22, .44);
}

@media (max-width: 720px) {
    .finance-head,
    .method-grid {
        grid-template-columns: 1fr;
    }

    .player-chip strong {
        max-width: 88px;
    }
}

.playable-game {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    place-items: stretch;
    align-content: stretch;
    gap: 14px;
    padding: clamp(14px, 2.2vw, 26px);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23, 86, 155, .34), transparent 34%),
        linear-gradient(180deg, rgba(2, 8, 32, .86), rgba(2, 7, 22, .94));
}

.playable-game__top,
.playable-controls,
.playable-message {
    position: relative;
    z-index: 3;
    border: 2px solid rgba(47, 232, 255, .55);
    border-radius: 14px;
    background: rgba(2, 7, 22, .70);
    box-shadow: inset 0 0 22px rgba(47, 232, 255, .10);
}

.playable-game__top {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
}

.playable-game .playable-game__top span {
    color: var(--cyan);
    font-size: 12px;
}

.playable-game .playable-game__top strong {
    display: block;
    margin-top: 3px;
    color: var(--gold);
    font-size: clamp(26px, 4vw, 54px);
    line-height: .92;
}

.playable-balance {
    display: grid;
    justify-items: end;
    color: #fff;
    font-weight: 900;
}

.playable-balance small {
    color: #9eefff;
    text-transform: uppercase;
}

.playable-game__arena {
    position: relative;
    z-index: 2;
    min-height: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 215, 143, .34);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 215, 143, .16), transparent 30%),
        linear-gradient(145deg, rgba(23, 86, 155, .42), rgba(4, 10, 38, .78));
}

.aviator-plane {
    display: grid;
    place-items: center;
    gap: 8px;
    color: #fff;
    transition: transform .25s ease;
}

.aviator-plane.is-flying {
    animation: flyLine 1.4s ease-in-out infinite alternate;
}

.aviator-plane b {
    font-size: clamp(70px, 14vw, 170px);
    filter: drop-shadow(0 0 18px rgba(218, 37, 40, .65));
}

.aviator-plane strong,
.dragon-field b {
    color: var(--gold);
    font-size: clamp(58px, 9vw, 130px);
    text-shadow: 5px 6px 0 #06104a, 0 0 22px rgba(255, 215, 143, .45);
}

.slot-reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 150px));
    gap: clamp(10px, 2vw, 24px);
}

.slot-reels div {
    height: clamp(100px, 20vh, 170px);
    display: grid;
    place-items: center;
    border: 4px solid var(--gold);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(180deg, #0d176d, #DA2528 54%, #070b2d);
    font-size: clamp(28px, 5vw, 72px);
    font-weight: 1000;
    box-shadow: 0 16px 28px rgba(0, 0, 0, .34), inset 0 0 22px rgba(255, 255, 255, .18);
}

.spin-wheel {
    width: min(62vh, 420px);
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    border: 12px solid var(--gold);
    border-radius: 50%;
    background: conic-gradient(#DA2528 0 16%, #17569B 16% 33%, #FFD78F 33% 50%, #0ec8f8 50% 66%, #8b27ff 66% 83%, #08175a 83% 100%);
    box-shadow: 0 0 38px rgba(255, 215, 143, .34);
}

.spin-wheel.has-spun {
    animation: wheelSpin .8s cubic-bezier(.2,.8,.2,1);
}

.spin-wheel span {
    position: absolute;
    color: #fff;
    font-weight: 1000;
    text-shadow: 2px 2px 0 #06104a;
}

.spin-wheel span:nth-child(1) { transform: translateY(-150px); }
.spin-wheel span:nth-child(2) { transform: rotate(60deg) translateY(-150px); }
.spin-wheel span:nth-child(3) { transform: rotate(120deg) translateY(-150px); }
.spin-wheel span:nth-child(4) { transform: rotate(180deg) translateY(-150px); }
.spin-wheel span:nth-child(5) { transform: rotate(240deg) translateY(-150px); }
.spin-wheel span:nth-child(6) { transform: rotate(300deg) translateY(-150px); }

.target-field {
    width: min(92%, 860px);
    display: grid;
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    gap: clamp(10px, 2vw, 24px);
}

.target-field button {
    aspect-ratio: 1;
    border: 3px solid var(--cyan);
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle, rgba(255, 215, 143, .9), rgba(23, 86, 155, .88) 55%, rgba(4, 10, 38, .96));
    font-size: clamp(28px, 6vw, 76px);
    box-shadow: 0 0 24px rgba(47, 232, 255, .26);
    animation: targetFloat 1.6s ease-in-out infinite alternate;
}

.target-field button:nth-child(even) {
    animation-delay: .35s;
}

.dragon-field {
    display: grid;
    place-items: center;
    gap: 6px;
}

.dragon-field span {
    color: #fff;
    font-size: clamp(20px, 3vw, 42px);
    font-weight: 1000;
}

.playable-controls {
    display: grid;
    grid-template-columns: minmax(160px, 260px) minmax(180px, 1fr);
    gap: 12px;
    padding: 12px;
}

.playable-controls label {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    color: var(--gold);
    font-weight: 1000;
}

.playable-controls input {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(47, 232, 255, .55);
    border-radius: 12px;
    color: #fff;
    background: rgba(2, 7, 22, .86);
    padding: 0 14px;
    font-weight: 1000;
}

.play-btn,
.cashout-btn {
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    color: #120900;
    background: linear-gradient(#fff7d8, var(--gold) 55%, #ff8a00);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 1000;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(255, 138, 0, .24);
}

.cashout-btn {
    color: #fff;
    background: linear-gradient(#2aff96, #07984a);
}

.playable-message {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 9px 14px;
    color: #fff;
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 900;
    text-align: center;
}

.demo-note {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,.62);
    text-align: center;
}

@keyframes flyLine {
    from { transform: translate(-12vw, 9vh) rotate(-8deg); }
    to { transform: translate(12vw, -8vh) rotate(8deg); }
}

@keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}

@keyframes targetFloat {
    from { transform: translateY(8px) scale(.96); }
    to { transform: translateY(-8px) scale(1.04); }
}

@media (max-width: 720px) {
    .playable-game {
        gap: 10px;
    }

    .playable-game__top,
    .playable-controls {
        grid-template-columns: 1fr;
    }

    .playable-game__top {
        display: grid;
    }

    .playable-balance {
        justify-items: start;
    }

    .slot-reels {
        grid-template-columns: repeat(3, minmax(58px, 1fr));
    }

    .target-field {
        grid-template-columns: repeat(3, minmax(50px, 1fr));
    }
}

/* Phaser performance layer: canvas owns gameplay, React owns only the outer HUD. */
.game-stage .game-phaser-layer {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #020716;
}

.game-stage .game-phaser-layer canvas {
    width: min(100vw, calc(100dvh * 16 / 9)) !important;
    height: min(100dvh, calc(100vw * 9 / 16)) !important;
    max-width: 100vw;
    max-height: 100dvh;
    object-fit: contain;
}

.playable-game.game-stage__screen {
    z-index: 3;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.playable-game__top,
.playable-controls,
.playable-message,
.demo-note {
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.playable-canvas-window {
    min-height: 0;
    pointer-events: none;
}

.play-btn:disabled,
.cashout-btn:disabled {
    cursor: wait;
    filter: grayscale(.35) brightness(.85);
}