:root {
    color-scheme: dark;
    --bg: #17181d;
    --surface: #202126;
    --surface-2: #292a30;
    --surface-3: #313238;
    --text: #f8f8f5;
    --muted: #96979f;
    --gold: #f1c75b;
    --gold-deep: #a66d16;
    --green: #34c98f;
    --danger: #f06a6a;
    --line: rgba(255, 255, 255, 0.09);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: #101115; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 8%, rgba(241, 199, 91, 0.08), transparent 28%),
        var(--bg);
    color: var(--text);
    font-family: "Noto Sans SC", sans-serif;
    letter-spacing: 0;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.app-shell { width: 100%; min-height: 100vh; padding-bottom: calc(108px + var(--safe-bottom)); }
.topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    height: 72px;
    padding: 10px 16px;
    background: rgba(23, 24, 29, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}
.topbar h1 { margin: 0; text-align: center; font-size: 21px; font-weight: 800; }
.icon-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    cursor: pointer;
}
.icon-button svg { width: 24px; height: 24px; }
.menu-button { justify-self: end; }

.hero {
    position: relative;
    min-height: 265px;
    overflow: hidden;
    background: #3b1015;
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero > img:not([src]), .hero > img[src=""] { display: none; }
.hero-placeholder { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: 9%; background: radial-gradient(circle at 78% 48%, rgba(255, 202, 67, .24), transparent 18%), repeating-radial-gradient(circle at 78% 48%, transparent 0 28px, rgba(241, 199, 91, .08) 29px 31px), linear-gradient(125deg, #4a0b13, #170b0d 58%, #2b1d0b); }
.hero-placeholder span { display: grid; place-items: center; width: 116px; height: 116px; border: 2px solid #c9912c; border-radius: 50%; color: #f4d574; font-size: 30px; font-weight: 900; box-shadow: 0 0 0 13px rgba(201,145,44,.12), inset 0 0 32px rgba(241,199,91,.16); }
.hero.has-image .hero-placeholder { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 6, 9, .88), rgba(24, 6, 9, .14) 66%, rgba(24, 6, 9, .32)); }
.hero-copy { position: relative; z-index: 2; width: 62%; padding: 35px 0 48px 28px; }
.brand-mark { display: block; margin-bottom: 10px; color: #ffe59b; font-size: 12px; font-weight: 900; }
.hero h2 { margin: 0; color: #ffe29b; font-size: clamp(34px, 11vw, 58px); line-height: .98; text-shadow: 0 3px 0 #6f290c; }
.hero p { margin: 14px 0 17px; color: #fff3ce; font-size: 16px; }
.hero p strong { color: var(--gold); font-size: 25px; }
.hero-copy button, .gold-button {
    min-height: 42px;
    border: 1px solid #ffe297;
    border-radius: 7px;
    padding: 0 22px;
    background: linear-gradient(180deg, #f7dc86, #c9922f);
    color: #2a2112;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(201, 146, 47, .2);
}
.carousel-dots { position: absolute; z-index: 3; right: 18px; bottom: 14px; display: flex; gap: 7px; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.42); }
.carousel-dots button.active { width: 28px; border-radius: 9px; background: var(--gold); }

.content-section { padding: 22px 18px 0; }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.section-heading > span { width: 4px; height: 25px; border-radius: 4px; background: var(--gold); }
.section-heading h2 { margin: 0; font-size: 21px; font-weight: 800; }
.section-heading.plain { margin-top: 18px; }
.featured-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 84vw); gap: 14px; overflow-x: auto; padding: 0 1px 7px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.featured-track::-webkit-scrollbar { display: none; }
.game-card { position: relative; overflow: hidden; border: 1px solid rgba(241,199,91,.5); border-radius: 8px; background: #111217; scroll-snap-align: start; }
.game-cover { position: relative; aspect-ratio: 1.82/1; overflow: hidden; background: #090909; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.game-card:hover .game-cover img { transform: scale(1.025); }
.game-cover::after { content: ""; position: absolute; inset: 44% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.92)); }
.game-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 10px; border-radius: 15px; background: #e8bd53; color: #2d210d; font-size: 12px; font-weight: 900; }
.game-summary { position: absolute; z-index: 2; right: 17px; bottom: 14px; left: 17px; }
.game-summary h3 { margin: 0 0 3px; font-size: 20px; }
.game-summary p { margin: 0; color: #d8d8d8; font-size: 12px; }
.game-actions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; padding: 12px; }
.game-actions button { min-height: 44px; border-radius: 7px; font-weight: 800; cursor: pointer; }
.game-actions .secondary { border: 1px solid rgba(241,199,91,.35); background: #292725; color: #d9be7a; }

.leaderboard { display: flex; align-items: center; gap: 8px; height: 42px; margin: 17px 18px 0; padding: 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #24262b; color: #d9b75c; font-size: 12px; }
.leaderboard-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #111217; color: #dadbe0; }
.leaderboard-icon svg { width: 16px; }
.leaderboard strong { white-space: nowrap; }
.leaderboard-ticker { display: flex; min-width: 0; gap: 18px; overflow: hidden; white-space: nowrap; color: #b9bac0; }
.leaderboard-ticker b { color: var(--gold); }

.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding-bottom: 24px; }
.game-tile { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.game-tile img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #08090b; }
.game-tile div { padding: 10px 11px 12px; }
.game-tile h3 { margin: 0 0 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.game-tile p { margin: 0; color: var(--muted); font-size: 11px; }

.bottom-nav {
    position: fixed;
    z-index: 30;
    right: max(14px, calc((100vw - 680px) / 2 + 14px));
    bottom: calc(12px + var(--safe-bottom));
    left: max(14px, calc((100vw - 680px) / 2 + 14px));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 74px;
    padding: 9px 5px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 27px;
    background: rgba(44, 45, 52, .97);
    box-shadow: 0 12px 38px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
}
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: #85868e; font-size: 12px; cursor: pointer; }
.bottom-nav button svg { width: 23px; height: 23px; }
.bottom-nav button.active { color: #fff; }

.subpage { padding: 22px 18px; animation: enter .24s ease both; }
.page-title { margin: 0 0 18px; font-size: 25px; }
.balance-panel { padding: 22px; border: 1px solid rgba(241,199,91,.35); border-radius: 8px; background: linear-gradient(145deg, #302c24, #202126 58%); }
.balance-panel small { color: #c4b88f; }
.balance-panel strong { display: block; margin: 5px 0 18px; font-size: 34px; }
.balance-panel .actions { display: flex; gap: 10px; }
.outline-button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-3); cursor: pointer; }
.notice { margin-top: 16px; padding: 13px 15px; border-left: 3px solid var(--gold); background: var(--surface); color: #c7c8cd; font-size: 13px; line-height: 1.7; }
.list-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.list-panel h3 { margin: 0 0 10px; font-size: 15px; }
.ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; border-top: 1px solid var(--line); }
.ledger-row strong, .ledger-row small { display: block; }
.ledger-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.ledger-row > span { color: #e58a8a; font-weight: 800; }
.ledger-row > span.positive { color: var(--green); }
.empty-line { padding: 22px 0; color: var(--muted); text-align: center; }
.feature-list { display: grid; gap: 10px; margin-top: 20px; }
.feature-row { display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.feature-row svg { flex: 0 0 auto; color: var(--gold); }
.feature-row div { flex: 1; }
.feature-row strong { display: block; margin-bottom: 3px; }
.feature-row small { color: var(--muted); }
.chat-empty { display: grid; place-items: center; min-height: 48vh; text-align: center; color: var(--muted); }
.chat-empty.compact { min-height: 34vh; }
.chat-empty svg { width: 50px; height: 50px; margin-bottom: 12px; color: var(--gold); }
.profile-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border-radius: 8px; }
.avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(145deg, #f5d77d, #a56b15); color: #201b12; font-weight: 900; }
.profile-card h3, .profile-card p { margin: 0; }
.profile-card p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.chat-page { display: flex; min-height: calc(100vh - 180px); flex-direction: column; }
.message-list { display: flex; flex: 1; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.message-bubble { align-self: flex-start; max-width: 84%; padding: 10px 12px; border-radius: 8px 8px 8px 2px; background: var(--surface-2); }
.message-bubble.mine { align-self: flex-end; border-radius: 8px 8px 2px 8px; background: #5f4a20; }
.message-bubble p { margin: 0; line-height: 1.55; }
.message-bubble small { display: block; margin-top: 5px; color: #aaa; font-size: 9px; }
.message-form { position: sticky; bottom: 96px; display: grid; grid-template-columns: 1fr 45px; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.message-form input { min-width: 0; border: 0; border-radius: 6px; padding: 0 12px; background: #17181d; color: #fff; }
.message-form button { width: 45px; padding: 0; }
.message-form svg { width: 18px; }

.wallet-page, .promotion-page, .conversation-page, .account-page { padding-top: 34px; }
.wallet-summary { padding: 24px 22px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: linear-gradient(145deg, #24252a, #1d1e23); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.wallet-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.wallet-heading svg { width: 21px; }
.wallet-summary > strong { display: block; max-width: 100%; margin: 8px 0 20px; overflow: hidden; color: var(--gold); font-size: clamp(30px, 10vw, 42px); text-overflow: ellipsis; }
.wallet-split { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.wallet-split > div + div { border-left: 1px solid var(--line); }
.wallet-split small, .wallet-split b { display: block; }
.wallet-split small { color: var(--muted); font-size: 12px; }
.wallet-split b { margin-top: 7px; font-size: 20px; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
.wallet-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.wallet-actions svg { width: 17px; }
.records-heading { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.records-heading h3 { margin: 0; }
.records-heading button { border: 0; background: transparent; color: var(--gold); }
.transaction-list { min-height: 245px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.empty-state { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.empty-state svg { width: 56px; height: 56px; margin-bottom: 14px; color: #6f7077; }
.empty-state strong { color: #d4d5da; }
.empty-state small { margin-top: 6px; }

.reward-tiers { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: #24252a; text-align: center; }
.reward-tiers > div + div { border-left: 1px solid var(--line); }
.reward-tiers small, .reward-tiers strong { display: block; }
.reward-tiers small { min-height: 35px; color: var(--muted); font-size: 11px; }
.reward-tiers strong { display: inline; color: var(--gold); font-size: 25px; }
.reward-tiers span { margin-left: 3px; color: #bc9650; font-size: 10px; }
.invite-code-button { display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: center; gap: 10px; margin: 15px 0; border: 1px solid #f2cf73; border-radius: 8px; background: linear-gradient(180deg, #f3d477, #bd851f); color: #2a2112; font-size: 18px; font-weight: 800; }
.invite-code-button svg { width: 21px; }
.invite-code-button b { padding-left: 9px; border-left: 1px solid rgba(42,33,18,.22); font-size: 12px; }
.commission-panel { padding: 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: #24252a; }
.commission-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.commission-heading time { font-size: 12px; }
.commission-panel > small { display: block; margin-top: 24px; color: var(--muted); text-align: center; }
.commission-panel > strong { display: block; max-width: 100%; margin: 5px 0 20px; overflow: hidden; font-size: clamp(30px, 10vw, 40px); text-align: center; text-overflow: ellipsis; }
.commission-lines { display: grid; gap: 15px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.commission-lines div { display: flex; justify-content: space-between; color: var(--muted); }
.commission-lines b { color: #e4e4e6; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr; padding-top: 20px; text-align: center; }
.invite-stats > div + div { border-left: 1px solid var(--line); }
.invite-stats small, .invite-stats strong { display: block; }
.invite-stats small { color: var(--muted); }
.invite-stats strong { margin-top: 7px; font-size: 20px; }
.promotion-empty { min-height: 200px; }

.conversation-list { display: grid; gap: 2px; margin: 0 -18px; }
.conversation-list button { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 84px; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); padding: 10px 20px; background: transparent; text-align: left; }
.conversation-list button > svg { width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: #111217; color: #9a9ba2; }
.conversation-list .service-chat > svg { background: #17694b; color: #fff; }
.conversation-list strong, .conversation-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list strong { font-size: 16px; }
.conversation-list small { margin-top: 6px; color: var(--muted); }
.conversation-list time { align-self: start; margin-top: 8px; color: #777981; font-size: 10px; }
.conversation-list button > b { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 10px; background: var(--gold); color: #211b11; font-size: 10px; }
.chat-back { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; border: 0; background: transparent; color: var(--gold); }
.chat-back svg { width: 18px; }

.account-hero { display: flex; flex-direction: column; align-items: center; padding-top: 8px; text-align: center; }
.account-avatar { display: grid; width: 112px; height: 112px; place-items: center; border: 2px solid #777982; border-radius: 50%; background: linear-gradient(145deg, #ece8e2, #9ca0a9); color: #33343a; font-size: 36px; font-weight: 900; }
.account-hero h2 { margin: 17px 0 4px; font-size: 27px; }
.account-hero p { margin: 0; color: var(--muted); }
.account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.account-stats > div { position: relative; min-height: 90px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.account-stats small { display: block; color: var(--muted); }
.account-stats strong { display: inline-block; margin-top: 8px; font-size: 30px; }
.account-stats span { margin-left: 5px; color: var(--muted); }
.more-title { margin: 27px 0 17px; }
.account-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; }
.account-tools button { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; color: #e6e6e8; font-size: 12px; }
.account-tools svg { width: 30px; height: 30px; color: #a7a8ae; }
.account-tools span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-label { display: block; margin-top: 42px; color: #515258; text-align: center; }
.compliance-modal { text-align: center; }
.compliance-modal > svg { width: 62px; height: 62px; margin-bottom: 14px; padding: 15px; border-radius: 50%; background: rgba(52,201,143,.14); color: var(--green); }
.compliance-modal .modal-actions { justify-content: stretch; }
.compliance-modal .modal-actions button { width: 100%; }

body.room-open { background: #1c1d22; }
body.room-open .app-shell { padding-bottom: 0; }
body.room-open .topbar { grid-template-columns: 48px 1fr 48px; background: rgba(29, 30, 35, .98); }
body.room-open .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.room-open .bottom-nav { display: none; }
.game-room { display: flex; height: calc(100dvh - 72px); min-height: 480px; flex-direction: column; overflow: hidden; padding: 14px 14px 126px; background: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), #202126; background-size: 100% 48px; }
.room-pin { position: relative; z-index: 8; display: grid; grid-template-columns: 20px minmax(0,1fr) 38px; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 50px; padding: 6px 7px 6px 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(55,56,63,.96); box-shadow: 0 8px 22px rgba(0,0,0,.22); color: #e1e1e4; }
.room-pin > svg { width: 18px; color: var(--gold); transform: rotate(-18deg); }
.room-pin span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.room-pin button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: #23242a; color: #bfc0c5; }
.room-pin button svg { width: 18px; }
.room-stage { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 8px; padding: 12px 14px; border-left: 3px solid #23bfd1; background: rgba(20,21,25,.58); }
.room-stage small, .room-stage strong { display: block; }
.room-stage small { margin-bottom: 3px; color: #aeb0b7; }
.room-stage strong { font-size: 16px; }
.room-countdown { display: grid; width: 45px; height: 45px; place-items: center; border: 4px solid #21bfd2; border-radius: 50%; color: #d8faff; font-size: 15px; font-weight: 900; box-shadow: inset 0 0 0 3px #26353a; }
.room-messages { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; overflow-y: auto; padding: 2px 4px 18px; scrollbar-width: thin; scrollbar-color: #55565d transparent; }
.room-message { position: relative; max-width: min(84%, 420px); padding: 9px 12px 21px; border-radius: 7px; background: #35363c; box-shadow: 0 2px 5px rgba(0,0,0,.13); }
.room-message small { display: block; margin-bottom: 5px; color: #aeb0b7; font-size: 10px; }
.room-message p { margin: 0; color: #f1f1f2; font-size: 15px; line-height: 1.55; }
.room-message time { position: absolute; right: 9px; bottom: 5px; color: #91939a; font-size: 9px; }
.room-message.notice { max-width: 100%; border-left: 3px solid var(--gold); background: #2b2c31; }
.room-message.mine { align-self: flex-end; background: #564820; }
.room-message.win { border-left: 3px solid var(--green); background: #263c35; }
.room-message.lose { border-left: 3px solid var(--danger); background: #3b292c; }
.room-start-banner { display: flex; width: min(88%, 450px); min-height: 88px; align-self: center; align-items: center; justify-content: center; gap: 18px; margin: 4px 0; overflow: hidden; border: 1px solid #bd842c; border-radius: 7px; background: radial-gradient(circle at 35% 40%, rgba(255,220,113,.28), transparent 24%), linear-gradient(110deg, #1a1207, #5a350b 52%, #130e08); color: #ffdc72; box-shadow: inset 0 0 0 2px #1a1207, inset 0 0 0 3px #9d6f29; }
.room-start-banner span { font-family: Georgia, serif; font-size: 46px; font-weight: 900; font-style: italic; text-shadow: 0 2px #5e2a00; }
.room-start-banner strong { font-size: 20px; }
.room-balance { position: fixed; z-index: 20; right: max(14px, calc((100vw - 680px) / 2 + 14px)); bottom: 82px; left: max(14px, calc((100vw - 680px) / 2 + 14px)); display: flex; height: 34px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px 7px 0 0; background: #2a2b31; color: #aaa; font-size: 10px; }
.room-balance strong { color: var(--gold); font-size: 14px; }
.room-balance small { margin-left: auto; color: #777980; }
.room-compose { position: fixed; z-index: 20; right: max(14px, calc((100vw - 680px) / 2 + 14px)); bottom: max(10px, var(--safe-bottom)); left: max(14px, calc((100vw - 680px) / 2 + 14px)); display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: 8px; height: 72px; padding: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 0 0 9px 9px; background: #2f3036; box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
.bet-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.bet-options button { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: #202126; color: #d7d7da; font-weight: 800; }
.bet-options button.selected { border-color: #f1cd6a; background: #66501f; color: #fff1bd; }
.bet-options button:disabled { opacity: .45; }
.room-submit { border: 1px solid #f2d475; border-radius: 6px; background: linear-gradient(180deg, #efd375, #bd8524); color: #2b210e; font-weight: 900; }
.room-submit:disabled { border-color: #4e4f55; background: #414249; color: #8f9096; }
.rules-modal { max-height: min(82vh, 700px); overflow: hidden; padding: 0; }
.rules-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.rules-heading small { color: var(--gold); font-size: 10px; font-weight: 900; }
.rules-heading h3 { margin: 3px 0 0; }
.rules-heading .icon-button { width: 36px; height: 36px; }
.rules-heading .icon-button svg { width: 19px; }
.rules-content { max-height: calc(min(82vh, 700px) - 75px); overflow-y: auto; padding: 18px; }
.rules-content section + section { margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); }
.rules-content b { color: #f3d278; }
.rules-content p { margin: 8px 0 0; font-size: 13px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.rules-grid span { display: flex; justify-content: space-between; padding: 10px; border-radius: 6px; background: #202126; font-size: 13px; }
.rules-grid em { color: var(--gold); font-style: normal; }

body[data-template="niuniu68"] {
    --bg: #101116;
    --surface: #1c1e24;
    --surface-2: #25272e;
    --surface-3: #30323a;
    --gold: #ef3e4b;
    --gold-deep: #981923;
    background: linear-gradient(155deg, rgba(216,45,58,.1), transparent 34%), #101116;
}
body[data-template="niuniu68"] .topbar { background: rgba(16,17,22,.97); border-bottom-color: rgba(239,62,75,.25); }
body[data-template="niuniu68"] .hero { margin: 12px 14px 0; min-height: 238px; border-radius: 8px; background: #360d12; }
body[data-template="niuniu68"] .hero-placeholder { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px), linear-gradient(125deg, #8d1822, #24090d 62%, #111216); }
body[data-template="niuniu68"] .hero-placeholder span { border-color: #ff5964; color: #fff; box-shadow: 0 0 0 13px rgba(239,62,75,.15), inset 0 0 32px rgba(239,62,75,.25); }
body[data-template="niuniu68"] .brand-mark, body[data-template="niuniu68"] .hero h2 { color: #fff; text-shadow: 0 3px #65121a; }
body[data-template="niuniu68"] .hero-copy button, body[data-template="niuniu68"] .gold-button { border-color: #ff6b75; background: linear-gradient(180deg, #fb5360, #c3212d); color: #fff; box-shadow: 0 8px 24px rgba(197,31,44,.24); }
body[data-template="niuniu68"] .section-heading > span { background: #ef3e4b; }
body[data-template="niuniu68"] .game-card { border-color: rgba(239,62,75,.55); }
body[data-template="niuniu68"] .game-badge { background: #ef3e4b; color: #fff; }
body[data-template="niuniu68"] .game-actions .secondary { border-color: #434650; background: #24262c; color: #e5e5e8; }
body[data-template="niuniu68"] .bottom-nav { border-radius: 8px; background: rgba(28,30,36,.98); }
body[data-template="niuniu68"] .bottom-nav button.active { color: #ff5662; }
body[data-template="niuniu68"] .room-pin { border-color: rgba(239,62,75,.28); background: #292b32; }
body[data-template="niuniu68"] .room-pin > svg, body[data-template="niuniu68"] .rules-content b, body[data-template="niuniu68"] .rules-grid em { color: #ff5964; }
body[data-template="niuniu68"] .room-stage { border-left-color: #ef3e4b; }
body[data-template="niuniu68"] .room-countdown { border-color: #ef3e4b; color: #fff; box-shadow: inset 0 0 0 3px #412127; }
body[data-template="niuniu68"] .room-start-banner { border-color: #d5313e; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px), linear-gradient(110deg, #1c090b, #941b25 55%, #17090b); color: #fff; box-shadow: inset 0 0 0 2px #1b090b, inset 0 0 0 3px #d5313e; }
body[data-template="niuniu68"] .room-balance strong { color: #ff5964; }
body[data-template="niuniu68"] .bet-options button.selected { border-color: #ff5964; background: #721b23; color: #fff; }
body[data-template="niuniu68"] .room-submit { border-color: #ff6772; background: linear-gradient(180deg, #f44a57, #b91f2a); color: #fff; }

body[data-template="niuniu68"] { --bg: #050505; --surface: #11100d; --surface-2: #191710; --surface-3: #272116; --gold: #f1c956; --gold-deep: #8f651e; background: radial-gradient(circle at 50% 18%, rgba(188,136,36,.11), transparent 32%), #050505; }
body[data-template="niuniu68"] .app-shell { background: #050505; }
body[data-template="niuniu68"] .topbar { border-bottom-color: rgba(222,177,69,.22); background: rgba(5,5,5,.97); }
body[data-template="niuniu68"] .topbar h1 { color: #f8f2df; font-family: Georgia, "Noto Sans SC", serif; }
body[data-template="niuniu68"] .icon-button { border: 1px solid rgba(218,171,64,.22); background: #17140e; color: #e6bf57; }
body[data-template="niuniu68"] .bottom-nav { border-color: rgba(213,165,54,.18); border-radius: 0; background: rgba(15,12,8,.98); }
body[data-template="niuniu68"] .bottom-nav button.active { color: #f1c956; }
body[data-template="niuniu68"] .bottom-nav button img { width: 28px; height: 28px; object-fit: contain; opacity: .48; filter: grayscale(.7); }
body[data-template="niuniu68"] .bottom-nav button.active img { opacity: 1; filter: none; }
body[data-template="niuniu68"] .bottom-nav button.active::before { content: ""; position: absolute; top: 4px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle,rgba(216,169,64,.2),transparent 70%); pointer-events: none; }
body[data-template="niuniu68"] .bottom-nav button span { position: relative; z-index: 1; }
body[data-template="niuniu68"] .room-pin { border-color: rgba(218,171,64,.3); background: #201c14; }
body[data-template="niuniu68"] .room-pin > svg, body[data-template="niuniu68"] .rules-content b, body[data-template="niuniu68"] .rules-grid em { color: #f1c956; }
body[data-template="niuniu68"] .room-stage { border-left-color: #e1b343; }
body[data-template="niuniu68"] .room-countdown { border-color: #e1b343; color: #fff4cb; box-shadow: inset 0 0 0 3px #3c311c; }
body[data-template="niuniu68"] .room-start-banner { border-color: #c99734; background: radial-gradient(circle at 35% 40%, rgba(255,221,118,.2), transparent 22%), linear-gradient(110deg, #100d08, #583b0f 55%, #0d0b08); color: #f7d56f; }
body[data-template="niuniu68"] .room-submit { border-color: #f2d572; background: linear-gradient(180deg, #f5d66f, #a8731b); color: #1d1609; }

.king-lobby { padding-bottom: 18px; }
.king-brandbar { display: grid; grid-template-columns: 42px 1fr 38px; align-items: center; gap: 10px; padding: 12px 16px 9px; background: #050505; }
.king-brandbar > div:nth-child(2) strong, .king-brandbar > div:nth-child(2) small { display: block; }
.king-brandbar > div:nth-child(2) strong { color: #f4e9cc; font-family: Georgia, "Noto Sans SC", serif; font-size: 16px; }
.king-brandbar > div:nth-child(2) small { margin-top: 1px; color: #766341; font-size: 7px; letter-spacing: 1.6px; }
.king-brandbar > button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(218,171,64,.24); border-radius: 50%; background: #131008; color: #e4b84e; }
.king-brandbar > button svg { width: 17px; }
.king-brandmark { position: relative; display: grid; width: 42px; height: 42px; place-content: center; overflow: hidden; border: 1px solid #bd8e31; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #5d461e, #100c07 64%); text-align: center; }
.king-brandmark::before, .king-brandmark::after { content: ""; position: absolute; top: 4px; width: 14px; height: 19px; border-top: 3px solid #e1b64f; }
.king-brandmark::before { left: 3px; transform: rotate(-36deg); }
.king-brandmark::after { right: 3px; transform: rotate(36deg); }
.king-brandmark b { color: #f5ce65; font-family: Georgia, serif; font-size: 17px; line-height: 1; }
.king-brandmark span { margin-top: 1px; color: #b98e37; font-size: 5px; letter-spacing: .8px; }
.king-ticker { display: flex; height: 38px; align-items: center; gap: 40px; overflow: hidden; border-block: 1px solid #75251d; background: linear-gradient(90deg, #801b14, #b02a1d, #801b14); color: #ffe5ad; font-size: 12px; font-weight: 800; white-space: nowrap; }
.king-ticker span { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; animation: kingTicker 18s linear infinite; }
.king-ticker span svg { width: 14px; }
.king-ticker.compact { height: 34px; margin: 14px 0 22px; padding-left: 12px; border-radius: 4px; }
.king-carousel { position: relative; min-height: 214px; margin: 0 12px; overflow: hidden; border: 1px solid rgba(230,187,82,.38); border-radius: 6px; background: #100c07; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.king-slide { position: absolute; inset: 0; display: none; overflow: hidden; }
.king-slide.active { display: block; animation: enter .3s ease both; }
.king-slide img { width: 100%; height: 100%; object-fit: cover; }
.king-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.87), rgba(0,0,0,.22) 72%); }
.king-slide > div:last-child { position: absolute; z-index: 2; top: 28px; left: 22px; max-width: 66%; }
.king-slide small { display: inline-block; padding: 4px 8px; border: 1px solid #d8a63d; border-radius: 4px; color: #f3c95c; font-weight: 800; }
.king-slide h2 { margin: 9px 0 5px; color: #f7d168; font-size: 25px; line-height: 1.15; }
.king-slide p { margin: 0; color: #eee5d2; font-size: 13px; }
.king-slide-copy > button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; margin-top: 14px; padding: 0 12px; border: 1px solid rgba(255,227,153,.55); border-radius: 3px; background: linear-gradient(180deg,#f0cb69,#a8731f); color: #171005; font-size: 11px; font-weight: 900; }
.king-slide-copy > button svg { width: 13px; }
.king-slide-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 78% 55%, rgba(218,170,61,.28), transparent 28%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px); }
.king-slide-art span { position: absolute; right: 6%; bottom: -17px; color: rgba(239,196,91,.28); font-family: Georgia, serif; font-size: 118px; font-weight: 900; line-height: 1; text-shadow: 0 0 28px rgba(235,180,56,.18); }
.king-slide-art i { position: absolute; right: 12%; top: 16%; width: 84px; height: 84px; border: 1px solid rgba(234,190,81,.3); transform: rotate(45deg); }
.king-slide-art i:nth-child(2) { transform: rotate(45deg) scale(.72); }
.king-slide-art i:nth-child(3) { transform: rotate(45deg) scale(.46); }
.king-slide-art i:nth-child(4) { transform: rotate(45deg) scale(.2); background: rgba(229,184,75,.28); }
.king-slide-red .king-slide-art { background: radial-gradient(circle at 78% 55%, rgba(178,41,35,.38), transparent 30%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px); }
.king-slide-red .king-slide-art span { color: rgba(224,81,56,.28); }
.king-slide-jade .king-slide-art { background: radial-gradient(circle at 78% 55%, rgba(42,127,102,.35), transparent 30%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px); }
.king-slide-jade .king-slide-art span { color: rgba(70,169,135,.25); font-size: 84px; }
.king-dots { position: absolute; z-index: 3; right: 0; bottom: 10px; left: 0; display: flex; justify-content: center; gap: 8px; }
.king-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #555; }
.king-dots button.active { width: 30px; border-radius: 5px; background: #f1c956; }
.king-balance { display: flex; min-height: 116px; align-items: center; justify-content: space-between; margin: 18px 14px 0; padding: 18px 20px; border: 1px solid rgba(224,177,64,.5); border-radius: 8px 8px 0 0; background: radial-gradient(circle at 85% 50%, rgba(226,177,62,.12), transparent 24%), #090806; }
.king-balance span { display: flex; align-items: center; gap: 8px; color: #dabb6e; font-size: 14px; }
.king-balance span svg { width: 18px; }
.king-balance strong { display: block; margin-top: 7px; color: #ffd76d; font-size: 42px; line-height: 1; }
.king-balance strong small { margin-right: 7px; font-size: 15px; }
.king-balance em { display: block; margin-top: 8px; color: #706959; font-size: 10px; font-style: normal; }
.king-balance > button { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(231,188,79,.42); border-radius: 50%; background: #17130b; color: #e9bd54; }
.king-money-actions { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 14px; border: 1px solid rgba(224,177,64,.3); border-top: 0; border-radius: 0 0 8px 8px; }
.king-money-actions button { display: flex; min-width: 0; min-height: 86px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-right: 1px solid rgba(224,177,64,.15); background: #090806; color: #eee8dc; }
.king-money-actions button:last-child { border-right: 0; }
.king-money-actions button i { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(225,179,71,.3); border-radius: 50%; background: #171208; }
.king-money-actions svg { width: 15px; color: #e8bb51; }
.king-money-actions span { font-size: 11px; }
.king-money-actions small { overflow: hidden; max-width: 100%; color: #665f51; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.king-home-heading { display: flex; align-items: end; justify-content: space-between; margin: 26px 16px 11px; }
.king-home-heading h3, .king-home-heading small { display: block; margin: 0; }
.king-home-heading h3 { margin-top: 2px; color: #eee7d8; font-size: 16px; }
.king-home-heading small { color: #8e6d2f; font-size: 8px; letter-spacing: 1.2px; }
.king-home-heading button { display: flex; align-items: center; gap: 2px; border: 0; background: transparent; color: #877f70; font-size: 10px; }
.king-home-heading button svg { width: 14px; }
.king-game-feature { display: grid; width: calc(100% - 28px); min-height: 94px; grid-template-columns: 58px minmax(0,1fr) 38px; align-items: center; gap: 12px; margin: 0 14px; padding: 13px; border: 1px solid rgba(225,178,68,.34); border-radius: 7px; background: radial-gradient(circle at 16% 50%, rgba(211,157,45,.16), transparent 23%), linear-gradient(100deg,#181208,#090806 68%); color: #eee8da; text-align: left; }
.king-game-feature > span:nth-child(2) { min-width: 0; }
.king-game-feature > span:nth-child(2) > em, .king-game-feature > span:nth-child(2) > strong, .king-game-feature > span:nth-child(2) > small { display: block; }
.king-game-feature > span:nth-child(2) > em { width: max-content; padding: 2px 5px; border-radius: 2px; background: #9d281c; color: #ffd8a3; font-size: 8px; font-style: normal; }
.king-game-feature > span:nth-child(2) > strong { margin: 5px 0 4px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.king-game-feature > span:nth-child(2) > small { overflow: hidden; color: #777064; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.king-game-feature > span:last-child { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ad812e; border-radius: 50%; color: #e2b74f; }
.king-game-feature > span:last-child svg { width: 15px; fill: currentColor; }
.king-game-logo { display: grid; width: 58px; height: 58px; place-content: center; border: 1px solid #bc8d30; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#76551e,#110c06 65%); color: #f0c65d; text-align: center; }
.king-game-logo b { font-family: Georgia,serif; font-size: 22px; line-height: 1; }
.king-game-logo small { margin-top: 2px; font-size: 6px; letter-spacing: 1px; }
.king-mission { display: grid; min-height: 66px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; margin: 0 14px 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; background: #0c0b09; }
.king-mission > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 6px; background: #1a150c; color: #d8aa43; }
.king-mission > span svg { width: 17px; }
.king-mission strong, .king-mission small { display: block; }
.king-mission strong { color: #ded8cc; font-size: 12px; }
.king-mission small { margin-top: 4px; color: #716c63; font-size: 9px; }
.king-mission > b { color: #b99a55; font-size: 10px; }

body[data-template="niuniu68"][data-current-route="lobby"] .topbar { display: none; }
body[data-template="niuniu68"][data-current-route="lobby"] #app-content { padding-top: 0; }
.king-lobby { min-height: 100%; background: radial-gradient(ellipse at 50% 74%, rgba(145,104,34,.14), transparent 34%), #030303; }
.king-brandbar { grid-template-columns: 46px 1fr 46px; min-height: 112px; padding: 14px 13px 10px; }
.king-brandbar > span { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,#725a28); }
.king-brandbar > div:nth-child(2) { position: relative; text-align: center; }
.king-brandbar > div:nth-child(2)::before, .king-brandbar > div:nth-child(2)::after { content: ""; position: absolute; top: 16px; width: 42px; height: 1px; background: linear-gradient(90deg,transparent,#80652d); }
.king-brandbar > div:nth-child(2)::before { right: calc(100% + 12px); }
.king-brandbar > div:nth-child(2)::after { left: calc(100% + 12px); transform: rotate(180deg); }
.king-brandbar > div:nth-child(2) strong { color: #f4f1ea; font-size: 25px; letter-spacing: 1px; }
.king-brandbar > div:nth-child(2) small { margin-top: 9px; color: #a58843; font-size: 9px; letter-spacing: 4px; }
.king-brandbar > button { width: 43px; height: 43px; border-radius: 13px; background: linear-gradient(145deg,#1b170f,#0d0b08); box-shadow: inset 0 0 18px rgba(224,177,64,.08); }
.king-brandbar > button svg { width: 20px; fill: rgba(232,190,82,.18); }
.king-ticker { height: 40px; border-block-color: #843126; background: linear-gradient(90deg,#7e2118,#a62d20,#7e2118); color: #ffe5a5; font-size: 11px; }
.king-carousel { min-height: 176px; margin: 15px 13px 0; border-color: rgba(230,187,82,.48); border-radius: 20px; background: #090806; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.king-slide::after { display: none; }
.king-slide img { width: 100%; height: 100%; object-fit: cover; }
.king-slide:nth-child(2) img, .king-slide:nth-child(3) img { padding: 18px; object-fit: contain; background: radial-gradient(circle,#251b0c,#060504 67%); }
.king-dots { bottom: 8px; }
.king-dots button { width: 7px; height: 7px; background: #575757; }
.king-dots button.active { width: 28px; background: #e8c353; }
.king-balance { position: relative; min-height: 148px; margin: 26px 14px 0; padding: 25px 108px 21px 22px; overflow: visible; border-color: rgba(218,174,68,.52); border-radius: 22px 22px 0 0; background: linear-gradient(110deg,#080704,#030303 72%); }
.king-balance > div:first-child { position: relative; z-index: 2; }
.king-balance span { color: #d5b258; font-size: 12px; }
.king-balance span > img { width: 19px; height: 19px; object-fit: contain; }
.king-balance span > button { display: inline-grid; width: 24px; height: 24px; place-items: center; border: 0; background: transparent; color: #80765e; }
.king-balance span > button svg { width: 17px; }
.king-balance strong { margin-top: 15px; color: #f1cd62; font-size: 40px; white-space: nowrap; }
.king-balance strong b { font: inherit; }
.king-balance > button { position: relative; z-index: 3; width: 39px; height: 39px; }
.king-balance-mascot { position: absolute; z-index: 1; right: 2px; bottom: 0; width: 108px; max-height: 136px; object-fit: contain; object-position: bottom; pointer-events: none; }
.king-money-actions { position: relative; z-index: 3; grid-template-columns: repeat(3,1fr); margin: 0 14px; border-color: rgba(218,174,68,.48); border-radius: 0 0 22px 22px; background: rgba(2,2,2,.9); }
.king-money-actions button { min-height: 104px; gap: 5px; background: linear-gradient(160deg,rgba(33,27,14,.7),rgba(2,2,2,.96) 55%); }
.king-money-actions button:first-child { border-radius: 0 0 0 21px; }
.king-money-actions button:last-child { border-radius: 0 0 21px 0; }
.king-money-actions button i { width: 38px; height: 38px; border: 0; background: transparent; }
.king-money-actions button i img { width: 34px; height: 34px; object-fit: contain; }
.king-money-actions button i svg { width: 27px; height: 27px; }
.king-money-actions span { color: #eee7d9; font-size: 14px; font-weight: 800; }
.king-money-actions small { color: #756c5c; font-size: 8px; }
.king-blindbox { position: relative; min-height: 680px; margin-top: -1px; padding: 42px 14px 34px; overflow: hidden; border-top: 1px solid rgba(218,174,68,.2); background: radial-gradient(ellipse 74% 23% at 50% 81%, transparent 68%, rgba(205,158,56,.38) 68.5%, transparent 69.4%), radial-gradient(ellipse 88% 29% at 50% 84%, transparent 67%, rgba(171,126,39,.28) 67.5%, transparent 68.4%), radial-gradient(ellipse 106% 36% at 50% 87%, transparent 66%, rgba(128,91,28,.22) 66.5%, transparent 67.4%), radial-gradient(ellipse at 50% 48%,rgba(133,94,26,.2),transparent 31%), linear-gradient(90deg,rgba(171,126,37,.1),transparent 5%,transparent 95%,rgba(171,126,37,.1)); text-align: center; }
.king-blindbox::before { content: ""; position: absolute; inset: 18px 8px 34px; border: 1px solid rgba(191,143,44,.52); border-bottom-color: rgba(191,143,44,.18); border-radius: 48% 48% 42% 42% / 18% 18% 10% 10%; box-shadow: inset 12px 0 18px -18px rgba(255,214,104,.9), inset -12px 0 18px -18px rgba(255,214,104,.9), 0 0 9px rgba(126,86,24,.22); pointer-events: none; }
.king-blindbox::after { content: ""; position: absolute; right: -15%; bottom: 54px; left: -15%; height: 170px; border: 1px solid rgba(187,138,41,.34); border-radius: 50%; box-shadow: 0 -18px 44px rgba(129,89,25,.1), inset 0 18px 35px rgba(179,129,34,.08); pointer-events: none; }
.king-blindbox-label { position: absolute; z-index: 2; top: 76px; left: 8px; padding: 6px 10px; border: 1px solid #70531e; border-radius: 4px; background: #080705; color: #c6a04b; font-size: 11px; }
.king-crest { display: block; width: min(76%,290px); height: 274px; margin: 10px auto 0; object-fit: contain; opacity: .78; filter: sepia(.2) brightness(.72) contrast(1.15); }
.king-chest { position: relative; display: block; width: 226px; height: 190px; margin: -2px auto 0; border: 0; background: transparent; }
.king-chest::before { content: ""; position: absolute; right: -24px; bottom: 12px; left: -24px; height: 42px; border-radius: 50%; background: radial-gradient(ellipse,rgba(244,191,60,.35),transparent 68%); filter: blur(8px); }
.king-chest img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(235,180,51,.35)); }
.king-blindbox h3 { margin: -4px 0 0; color: #f0e7d1; font-size: 20px; }
.king-blindbox p { margin: 10px 0 28px; color: #7d776c; font-size: 13px; }
.king-blindbox p b { color: #b79953; }
.king-blindbox .king-entry-row { position: relative; z-index: 2; grid-template-columns: 1fr 1.1fr; margin: 0; border: 0; gap: 10px; }
.king-blindbox .king-entry-row button { min-height: 64px; border: 1px solid #72551f; border-radius: 12px; background: #070604; color: #eee6d5; font-size: 14px; font-weight: 800; }
.king-blindbox .king-entry-row button:last-child { border-color: #f5d97c; background: linear-gradient(180deg,#f8df88,#d4a93b); color: #332308; box-shadow: inset 0 1px rgba(255,255,255,.55); }
.king-blindbox .king-entry-row img { width: 25px; height: 25px; object-fit: contain; }
.king-blindbox .king-entry-row svg { width: 15px; }
.king-feature { position: relative; min-height: 180px; margin-top: 22px; padding: 34px 28px; overflow: hidden; border-block: 1px solid rgba(224,177,64,.25); background: radial-gradient(circle at 70% 55%, rgba(215,165,51,.18), transparent 27%), #080705; }
.king-feature small { display: inline-block; padding: 5px 11px; border: 1px solid #a77928; border-radius: 5px; color: #e4b94f; }
.king-feature h3 { margin: 14px 0 4px; font-size: 24px; }
.king-feature p { margin: 0; color: #918b7d; }
.king-emblem { position: absolute; right: 12%; bottom: -22px; color: rgba(226,180,68,.25); font-family: Georgia, serif; font-size: 130px; font-weight: 900; }
.king-entry-row { display: grid; grid-template-columns: 1fr 1fr; margin: 0 20px; border: 1px solid rgba(224,177,64,.25); border-top: 0; }
.king-entry-row button { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 8px; border: 0; border-right: 1px solid rgba(224,177,64,.2); background: #0c0a07; color: #e9c467; }
.king-entry-row button:last-child { border-right: 0; }
.king-entry-row svg { width: 18px; }
.king-page { padding: 22px 18px 30px; animation: enter .24s ease both; }
.king-page > h3 { margin: 25px 0 12px; color: #eee5cf; font-size: 16px; }
.king-section-title { display: flex; align-items: center; justify-content: space-between; }
.king-section-title h2, .king-section-title p { margin: 0; }
.king-section-title p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.king-section-title button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(224,177,64,.25); border-radius: 50%; background: #14110b; color: #e8bd55; }
.king-progress, .king-wallet-card { margin-top: 18px; padding: 20px; border: 1px solid rgba(224,177,64,.3); border-radius: 8px; background: #0d0b08; }
.king-progress > div:first-child, .king-wallet-card > div { display: flex; justify-content: space-between; }
.king-progress p { color: var(--muted); font-size: 12px; }
.king-progress > button, .king-share { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e5bd5a; border-radius: 6px; background: linear-gradient(#f2cf6a,#a9751f); color: #1c1508; font-weight: 900; }
.progress-track { height: 7px; margin-top: 14px; overflow: hidden; border-radius: 4px; background: #2b271e; }
.progress-track i { display: block; width: 2%; height: 100%; background: #e7ba50; }
.king-awards, .king-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.king-awards article, .king-stats div { min-height: 76px; padding: 15px; border: 1px solid rgba(224,177,64,.22); border-radius: 7px; background: linear-gradient(145deg,#17130b,#0a0907); }
.king-awards small, .king-awards strong { display: block; }
.king-awards small, .king-stats span { color: #a99d80; font-size: 11px; }
.king-awards strong { margin-top: 8px; color: #f1c956; font-size: 18px; }
.king-awards p { color: #888278; font-size: 11px; line-height: 1.6; }
.king-stats div { display: flex; align-items: center; justify-content: space-between; }
.king-stats b { color: #edc45b; font-size: 21px; }
.king-disclaimer, .king-safety { margin-top: 18px; color: #6e6a61; font-size: 11px; line-height: 1.7; text-align: center; }
.king-page-balance { display: grid; grid-template-columns: 1fr auto 36px; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(224,177,64,.25); background: #0c0a07; }
.king-page-balance span { color: #9d9687; }
.king-page-balance strong { color: #f1c956; font-size: 20px; }
.king-page-balance button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; background: transparent; color: #dcb450; }
.king-room-list { display: grid; gap: 9px; }
.king-room-list > button { display: grid; grid-template-columns: 48px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; min-height: 76px; padding: 10px 13px; border: 1px solid rgba(224,177,64,.2); border-radius: 7px; background: linear-gradient(100deg,#17130c,#090806); color: #eee; text-align: left; }
.king-room-list > button > span:nth-child(2) { min-width: 0; }
.king-room-list strong, .king-room-list small { display: block; }
.king-room-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.king-room-list strong em { margin-left: 6px; color: #f1c956; font-size: 9px; font-style: normal; }
.king-room-list small { margin-top: 4px; color: #918c82; }
.king-room-list > button > b { color: #c6a34e; font-size: 11px; }
.king-room-list svg { width: 16px; color: #87713c; }
.king-room-logo { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #b88b30; border-radius: 50%; background: radial-gradient(circle,#6c4b18,#110d07 68%); color: #f5d36b; font-family: Georgia,serif; font-weight: 900; }
.king-coming { display: flex; min-height: 70px; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); background: #0e0e0d; }
.king-coming span { color: #d7ad4c; font-size: 11px; }
.king-coming strong { flex: 1; }
.king-coming small { color: #6f6e69; }
.king-support, .king-support-card { display: flex; width: 100%; align-items: center; gap: 12px; border: 1px solid rgba(224,177,64,.18); border-radius: 7px; padding: 13px; background: #100e0a; color: #eee; text-align: left; }
.king-support > span, .king-support-card > span:nth-child(2) { flex: 1; }
.king-support strong, .king-support small, .king-support-card strong, .king-support-card small, .king-support-card p { display: block; margin: 0; }
.king-support small, .king-support-card small, .king-support-card p { margin-top: 3px; color: #8e897e; font-size: 11px; }
.king-wallet-card > span { color: #a69e8d; }
.king-wallet-card > strong { display: block; margin: 10px 0 22px; color: #f1c956; font-size: 38px; }
.king-wallet-card > strong small { margin-right: 7px; font-size: 13px; }
.king-wallet-card > div { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.king-wallet-card > div span { color: #8d887e; font-size: 11px; }
.king-wallet-card > div b { display: block; margin-top: 5px; color: #ddd3bc; font-size: 15px; }
.king-wallet-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.king-wallet-actions button { display: flex; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; background: #11100d; color: #c9c3b7; font-size: 11px; }
.king-wallet-actions svg { width: 18px; color: #dfb44f; }
.king-invite-hero { padding: 8px 2px 20px; }
.king-invite-hero small { color: #d6aa49; font-weight: 800; }
.king-invite-hero h2 { margin: 6px 0; font-size: 28px; }
.king-invite-hero p { margin: 0; color: var(--muted); }
.king-code { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px; border: 1px solid #d2a744; border-radius: 7px; background: #121008; color: #eee; text-align: left; }
.king-code span { color: #9e9787; }
.king-code strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #f3cb62; font-size: 20px; }
.king-code small { color: #67645e; }
.king-qr { display: flex; align-items: center; gap: 15px; margin-top: 10px; padding: 17px; border: 1px solid var(--line); background: #10100e; }
.king-qr > svg { width: 48px; height: 48px; color: #e4b84e; }
.king-qr strong, .king-qr p { display: block; margin: 0; }
.king-qr p { margin-top: 5px; color: #817d74; font-size: 11px; }
.king-share { margin-top: 10px; }
.king-invite-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
.king-invite-steps div { min-width: 0; padding: 13px 8px; border-top: 1px solid #755a25; text-align: center; }
.king-invite-steps b { display: grid; width: 25px; height: 25px; place-items: center; margin: 0 auto 7px; border-radius: 50%; background: #bd8d2d; color: #171005; }
.king-invite-steps span, .king-invite-steps small { display: block; }
.king-invite-steps small { margin-top: 4px; color: #77736b; font-size: 9px; }
.king-profile-head { display: flex; align-items: center; gap: 15px; padding: 10px 0 24px; }
.king-profile-avatar { display: grid; width: 70px; height: 70px; flex: 0 0 auto; place-items: center; border: 2px solid #ba8d34; border-radius: 50%; background: linear-gradient(145deg,#e7c264,#6d4b15); color: #191207; font-size: 24px; font-weight: 900; }
.king-profile-avatar.small { width: 52px; height: 52px; font-size: 17px; }
.king-profile-head h2 { margin: 0 0 5px; }
.king-profile-head button { border: 0; padding: 0; background: transparent; color: #d2ad54; font-size: 11px; }
.king-profile-head p { margin: 6px 0 0; color: #807c73; font-size: 11px; }
.king-security { border: 1px solid rgba(224,177,64,.2); background: #0e0c09; }
.king-security > div:first-child { display: flex; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); }
.king-security h3 { margin: 0; }
.king-security > div:first-child b { color: #e7bc54; }
.king-security-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.king-security-grid button { display: flex; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #ddd; font-size: 11px; }
.king-security-grid button:last-child { border-right: 0; }
.king-security-grid svg { color: #d8ad4a; }
.king-security-grid span, .king-security-grid small { display: block; }
.king-security-grid small { margin-top: 4px; color: #77736b; font-size: 9px; }
.king-tools { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px 6px; }
.king-tools button { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; color: #c9c4b8; font-size: 11px; }
.king-tools svg { width: 26px; height: 26px; color: #c79d40; }
.king-tools span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.king-version { display: block; margin-top: 40px; color: #4f4b43; text-align: center; }
.king-support-card { min-height: 96px; }
.king-faq { display: grid; gap: 1px; }
.king-faq button { display: flex; min-height: 52px; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); background: #0f0e0c; color: #ddd7c9; }
.king-faq svg { width: 16px; color: #80775f; }

@keyframes kingTicker { to { transform: translateX(-100%); } }

.modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgba(0,0,0,.72); }
.modal { width: min(100%, 520px); padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.modal h3 { margin: 0 0 7px; }
.modal p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; z-index: 80; right: 18px; bottom: 108px; left: 18px; max-width: 420px; margin: auto; padding: 12px 16px; border-radius: 7px; background: #f4d578; color: #2a2112; font-weight: 700; text-align: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
.skeleton { min-height: 240px; background: linear-gradient(90deg, #222 25%, #303137 50%, #222 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (min-width: 700px) {
    body { padding: 22px 0; }
    .app-shell { width: min(100%, 680px); margin: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 70px rgba(0,0,0,.45); }
    .topbar { top: 22px; }
    .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .hero { min-height: 235px; }
    .hero-copy { padding-left: 20px; }
    .featured-track { grid-auto-columns: 89vw; }
    .content-section { padding-right: 14px; padding-left: 14px; }
    .reward-tiers { padding-right: 2px; padding-left: 2px; }
    .account-tools { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}