:root {
    --bg: #14151f;
    --bg-alt: #1c1e2b;
    --card: #21243380;
    --border: #33364a;
    --text: #e7e8f0;
    --text-dim: #9497ab;
    --muted: var(--text-dim);
    --accent: #7c5cff;
    --accent-2: #ff5c8a;
    --good: #4ade80;
    --bad: #ff6b6b;
    --gold: #ffd166;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at top, #201f33 0%, var(--bg) 55%);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

header.site-header {
    background: linear-gradient(120deg, #262a45, #1a1c2c);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    margin-bottom: 24px;
}

.header-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.brand {
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand .tagline { font-size: 12px; font-weight: 400; color: var(--text-dim); display: block; }

nav.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main-nav a {
    color: var(--text);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}
nav.main-nav a:hover { background: #ffffff14; text-decoration: none; }
nav.main-nav a.active { background: var(--accent); color: #fff; }

.user-box { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bell-wrap { position: relative; }
.bell-btn {
    background: none;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    padding: 4px;
}
.bell-btn.music-on { color: var(--accent); }
.bell-btn.music-pending { animation: musicPendingPulse 1.6s ease-in-out infinite; }
@keyframes musicPendingPulse { 0%, 100% { box-shadow: 0 0 0 0 #7c5cff55; } 50% { box-shadow: 0 0 0 5px #7c5cff00; } }
.bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #1c1e2b;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px #000000aa;
    z-index: 100;
}
.bell-dropdown-header { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.bell-dropdown-header a { font-weight: 600; font-size: 12px; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); text-decoration: none; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #ffffff08; text-decoration: none; }
.notif-item.unread { background: #7c5cff14; }
.notif-item .meta { display: block; margin-top: 2px; }

.bits-pill {
    background: #ffd16622;
    color: var(--gold);
    border: 1px solid #ffd16655;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.level-badge {
    display: inline-block;
    background: #7c5cff22;
    color: var(--accent);
    border: 1px solid #7c5cff55;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    vertical-align: middle;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(6px);
}

.card h2, .card h3 { margin-top: 0; }

.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.flash.error { background: #ff6b6b22; border: 1px solid #ff6b6b55; color: #ffb3b3; }
.flash.success { background: #4ade8022; border: 1px solid #4ade8055; color: #b6f5c9; }
.flash.info { background: #7c5cff22; border: 1px solid #7c5cff55; color: #cfc3ff; }

table.category-list, table.thread-list { width: 100%; border-collapse: collapse; }
table.category-list td, table.thread-list td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.category-list tr:last-child td, table.thread-list tr:last-child td { border-bottom: none; }
.cat-name { font-weight: 700; font-size: 16px; }
.cat-desc { color: var(--text-dim); font-size: 13px; }
.meta { color: var(--text-dim); font-size: 12px; }
.pinned { color: var(--gold); }
.locked { color: var(--bad); }

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: #6a4bef; text-decoration: none; }
.btn.secondary { background: #33364a; }
.btn.secondary:hover { background: #3f4258; }
.btn.danger { background: var(--bad); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%;
    background: #14151fcc;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
textarea { resize: vertical; min-height: 100px; }
label { font-size: 13px; font-weight: 700; color: var(--text-dim); display: block; margin-bottom: 5px; }
.field { margin-bottom: 14px; }

.post {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.post:last-child { border-bottom: none; }
.post-author { width: 120px; flex-shrink: 0; text-align: center; }
.post-author .uname { font-weight: 700; margin-top: 6px; font-size: 14px; }
.post-body { flex: 1; line-height: 1.55; }
.post-text { white-space: pre-wrap; word-wrap: break-word; }
.post-header-row { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; }

.reaction-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.reaction-btn {
    min-width: 44px;
    background: #ffffff0c;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.reaction-btn:hover { border-color: var(--accent); }
.reaction-btn.mine { background: #7c5cff2e; border-color: var(--accent); }
.reaction-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge { background: #ffffff10; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 11px; }

.chat-box { height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #10111ab0; border-radius: 10px; border: 1px solid var(--border); }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg .bubble { background: #2a2d40; padding: 6px 12px; border-radius: 10px; font-size: 14px; }
.chat-msg .uname { font-weight: 700; font-size: 12px; color: var(--accent); }
.chat-msg.own { flex-direction: row-reverse; text-align: right; }
.chat-msg.own .bubble { background: var(--accent); color: #fff; }
.chat-msg.own .uname { justify-content: flex-end; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; }

.avatar.frame-gold { box-shadow: 0 0 0 3px #ffd166, 0 0 10px #ffd16688; }
.avatar.frame-neon { box-shadow: 0 0 0 3px #5cc8ff, 0 0 8px #5cc8ff88; animation: neonPulse 1.6s ease-in-out infinite; }
@keyframes neonPulse { 0%, 100% { box-shadow: 0 0 0 3px #5cc8ff, 0 0 8px #5cc8ff88; } 50% { box-shadow: 0 0 0 3px #5cc8ff, 0 0 18px #5cc8ffdd; } }
.avatar.frame-fire { box-shadow: 0 0 0 3px #ff5c5c, 0 0 16px #ff9f5cbb; }
.avatar.frame-ice { box-shadow: 0 0 0 3px #a0e9ff, 0 0 12px #a0e9ffaa; }
.avatar.frame-shadow { box-shadow: 0 0 0 3px #2a2440, 0 0 16px #6b46c1cc; }
.avatar.frame-bronze { box-shadow: 0 0 0 3px #cd7f32, 0 0 10px #cd7f3288; }
.avatar.frame-celestial { box-shadow: 0 0 0 3px #c084fc, 0 0 14px #7c5cffcc; animation: celestialPulse 2.2s ease-in-out infinite; }
@keyframes celestialPulse { 0%, 100% { box-shadow: 0 0 0 3px #c084fc, 0 0 14px #7c5cffcc; } 50% { box-shadow: 0 0 0 3px #c084fc, 0 0 24px #7c5cffee; } }

.avatar-wrap { position: relative; display: inline-block; vertical-align: middle; }
.avatar-hat {
    position: absolute;
    top: -55%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    pointer-events: none;
    filter: drop-shadow(0 2px 2px #000000aa);
}

.user-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    background: #ffffff0c;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: middle;
}

.rainbow-text {
    background: linear-gradient(90deg, #ff5c8a, #ffd166, #4ade80, #5cc8ff, #7c5cff, #ff5c8a);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    animation: rainbowShift 3s linear infinite;
}
@keyframes rainbowShift { to { background-position: 300% 0; } }

.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 0 2px #14151f;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent-2);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    margin-left: 3px;
    vertical-align: 2px;
}

.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .game-grid { grid-template-columns: 1fr; } }

.game-lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 10px; }
.game-tile {
    display: block;
    position: relative;
    background: linear-gradient(160deg, #262a45, #1a1c2c);
    border: 1px solid var(--tile-color, var(--border));
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.game-tile-link { display: flex; min-height: 100%; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.game-tile-link:hover { color: inherit; text-decoration: none; }
.game-tile:hover { border-color: var(--tile-color, var(--accent)); transform: translateY(-3px); text-decoration: none; box-shadow: 0 8px 24px -8px var(--tile-color, var(--accent)); }
.game-tile-icon { font-size: 40px; margin-bottom: 8px; }
.game-tile-title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.game-tile-blurb { color: var(--text-dim); font-size: 12px; min-height: 32px; }
.game-tile-count { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--good); background: #4ade8018; border-radius: 999px; padding: 3px 10px; display: inline-block; }
.game-tile-meta { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.game-tile-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.game-tile-badge { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--tile-color, var(--accent)); color: #10121c; text-transform: uppercase; letter-spacing: 0.02em; }
.game-tile-fav {
    position: absolute; top: 8px; right: 8px; background: #00000040; border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 14px; cursor: pointer; color: #ffffff88; line-height: 1;
}
.game-tile-fav:hover { color: var(--gold); }
.game-tile-fav.active { color: var(--gold); }
.risk-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.risk-low { color: var(--good); }
.risk-medium { color: var(--gold); }
.risk-high { color: var(--bad); }
.mult-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ffffff10; color: var(--text-dim); }

.lobby-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.lobby-search { flex: 1; min-width: 180px; }
.category-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.category-tab {
    background: #ffffff08; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer;
}
.category-tab:hover { border-color: var(--accent); color: var(--text); }
.category-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.game-tile.hidden-by-filter { display: none; }

/* Slot Machine -- the reels are a PixiJS canvas (assets/js/slots_pixi.js), not DOM/CSS like most
   games; this cabinet frame and the light strip around it are the only part still styled here. */
.slot-cabinet-frame { position: relative; padding: 16px; margin: 14px 0; border-radius: 20px; background: linear-gradient(160deg, #24263500, #0d0e16); border: 2px solid var(--border); overflow: hidden; }
.slot-cabinet-lights { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, #ffd166aa 0 2px, transparent 3px); background-size: 34px 34px; background-position: 0 0; opacity: .35; animation: slotLightsTwinkle 2.4s linear infinite; }
@keyframes slotLightsTwinkle { 0%, 100% { opacity: .18; } 50% { opacity: .45; } }
.slot-canvas-wrap { position: relative; display: flex; justify-content: center; min-height: 120px; }
.autospin-panel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ffffff1c; }
.autospin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; font-size: 13px; }
.autospin-row label { color: #aaa7b5; }
.autospin-row select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: #14151f; color: inherit; }
.autospin-checkbox { display: flex; align-items: center; gap: 6px; }
#autoSpinBtn.active { border-color: color-mix(in srgb, var(--game-accent) 60%, transparent); color: var(--game-accent); }

.shake-loss { animation: shakeLoss 0.4s ease-in-out; }
@keyframes shakeLoss {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}
.flash-red { animation: flashRed 0.5s ease-out; }
@keyframes flashRed {
    0% { background-color: #ff6b6b33; }
    100% { background-color: transparent; }
}

/* RPS vs bot -- a proper "shake then reveal" arena instead of an instant text swap. */
.rps-arena { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 14px 0 6px; }
.rps-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; }
.rps-hand { font-size: 52px; line-height: 1; filter: drop-shadow(0 8px 10px #0006); }
.rps-hand.shaking { animation: rpsShake .45s ease-in-out infinite; }
.rps-hand.reveal-win { animation: rpsWinPulse .5s ease; }
.rps-hand.reveal-lose { animation: rpsLoseShake .4s ease; }
.rps-name { font-size: 12px; font-weight: 800; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.rps-vs { font-size: 12px; font-weight: 900; color: var(--text-dim); opacity: .6; }
.rps-countdown { text-align: center; font-size: 19px; font-weight: 900; min-height: 26px; }
@keyframes rpsShake { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-6deg); } }
@keyframes rpsWinPulse { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rpsLoseShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .rps-hand.shaking { animation: none; } }

.move-buttons { display: flex; gap: 10px; }
.move-buttons button { flex: 1; font-size: 26px; padding: 16px; background: #2a2d40; border: 2px solid var(--border); border-radius: 12px; color: var(--text); cursor: pointer; }
.move-buttons button:hover { border-color: var(--accent); }

.leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.leaderboard-row:last-child { border-bottom: none; }
.rank { width: 26px; font-weight: 800; color: var(--text-dim); }
.rank.top1 { color: var(--gold); }
.rank.top2 { color: #c7c9d9; }
.rank.top3 { color: #d99a5f; }

footer.site-footer { text-align: center; color: var(--text-dim); font-size: 12px; padding: 30px 0; }

.pagination { display: flex; gap: 6px; margin-top: 14px; }
.pagination a, .pagination span { padding: 6px 11px; border-radius: 6px; background: #ffffff10; font-size: 13px; }
.pagination .current { background: var(--accent); color: #fff; font-weight: 700; }

.open-challenges { display: flex; flex-direction: column; gap: 8px; }
.challenge-row { display: flex; justify-content: space-between; align-items: center; background: #ffffff08; padding: 8px 12px; border-radius: 8px; }

/* Real cubes, not text-in-a-box: each die is a preserve-3d box with 6 pip faces, and the JS
   rotates it in X/Y so the physically correct face ends up pointing at the viewer (see
   dieTargetFace()/buildDie3d() in games.js), instead of just swapping a number. Shared by
   Dice Duel, Sic Bo, and Liar's Dice -- wrap so 5 dice don't overflow on narrow screens. */
.dice-display { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin: 20px 0 16px; perspective: 600px; }
.die-bounce { width: 64px; height: 64px; }
.die-bounce.rolling { animation: dieBounceRoll 0.9s cubic-bezier(.36, .07, .19, .97); }
@keyframes dieBounceRoll {
    0% { transform: translateY(0); }
    20% { transform: translateY(-22px); }
    40% { transform: translateY(2px); }
    58% { transform: translateY(-9px); }
    75% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}
.die3d { width: 64px; height: 64px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.die-face {
    position: absolute; inset: 0; padding: 11px; box-sizing: border-box; border-radius: 13px; backface-visibility: hidden;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    background: linear-gradient(155deg, #fdfcf8, #e9e6dc); box-shadow: inset 0 0 0 1px #0000000f, inset 0 -3px 6px #00000014;
}
.die-face .pip { width: 10px; height: 10px; border-radius: 50%; justify-self: center; align-self: center; background: #23242e; box-shadow: inset 0 1px 1px #00000066, 0 1px 0 #ffffff26; }
.pip-tl { grid-column: 1; grid-row: 1; }
.pip-tr { grid-column: 3; grid-row: 1; }
.pip-ml { grid-column: 1; grid-row: 2; }
.pip-mr { grid-column: 3; grid-row: 2; }
.pip-bl { grid-column: 1; grid-row: 3; }
.pip-br { grid-column: 3; grid-row: 3; }
.pip-c { grid-column: 2; grid-row: 2; }
.die-face-1 { transform: translateZ(32px); }
.die-face-2 { transform: rotateY(90deg) translateZ(32px); }
.die-face-3 { transform: rotateX(90deg) translateZ(32px); }
.die-face-4 { transform: rotateX(-90deg) translateZ(32px); }
.die-face-5 { transform: rotateY(-90deg) translateZ(32px); }
.die-face-6 { transform: rotateY(180deg) translateZ(32px); }
@media (prefers-reduced-motion: reduce) { .die-bounce.rolling { animation: none; } .die3d { transition-duration: .01s; } }

/* Wheel of Fortune */
.wheel-wrap { position: relative; width: 200px; height: 200px; margin: 14px auto; }
.wheel {
    position: relative;
    width: 100%; height: 100%; border-radius: 50%; border: 4px solid #33364a;
    transition: transform 3.2s cubic-bezier(0.15, 0.8, 0.15, 1);
    box-shadow: 0 0 0 6px #14151f, 0 8px 24px #000000aa;
}
.wheel-label {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: 0 0;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px #000000aa;
    pointer-events: none;
}
.wheel-pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 22px; color: var(--gold); filter: drop-shadow(0 2px 2px #000); }

/* Crash */
.crash-display {
    --crash-tension: 0;
    position: relative;
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0d0e16, #1a1c2c);
    border: 2px solid var(--border);
    overflow: hidden;
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 calc(20px + 60px * var(--crash-tension)) color-mix(in srgb, #ff6b6b calc(var(--crash-tension) * 100%), transparent);
    transition: box-shadow 0.2s linear;
}
.crash-rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 32px;
    /* Position is driven per-frame by JS (requestAnimationFrame), not a CSS transition -- a
       transition here would fight the JS updates and lag the motion instead of smoothing it. */
}
.crash-multiplier { font-size: 42px; font-weight: 800; color: var(--good); z-index: 1; }
.crash-multiplier.busted { color: var(--bad); }

/* Mines */
.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.mine-tile {
    aspect-ratio: 1;
    border-radius: 8px;
    background: #2a2d40;
    border: 1px solid var(--border);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.mine-tile:hover:not(.revealed):not(.keno-picked):not(:disabled) { background: #383c58; transform: scale(1.05); }
.mine-tile.revealed { background: #4ade8022; border-color: #4ade8066; cursor: default; animation: tilePop 0.35s ease-out; }
.mine-tile.mine-hit { background: #ff6b6b33; border-color: var(--bad); animation: tileBust 0.4s ease-out; }
.mine-tile:disabled { cursor: not-allowed; }
@keyframes tilePop {
    0% { transform: scale(1.4); opacity: 0; }
    60% { transform: scale(0.92); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes tileBust {
    0%, 100% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.12) rotate(-6deg); }
    40% { transform: scale(1.12) rotate(6deg); }
    60% { transform: scale(1.05) rotate(-4deg); }
    80% { transform: scale(1.05) rotate(4deg); }
}
/* Keno states -- its own classes, not Mines' revealed/mine-hit above (a barely-there 13%-opacity
   tint meant for "safe tile", and a red "you hit a mine and lost" that made a Keno match look like
   a bad outcome). keno-picked needs to be bold and unmistakable: this *is* the answer to "which
   numbers did I pick", not a subtle hint. */
.mine-tile.keno-picked { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 0 12px #7c5cff77; transform: scale(1.05); }
.mine-tile.keno-match { background: #ffd16633; border-color: #ffd166; box-shadow: 0 0 12px #ffd16688; color: #ffd166; font-weight: 800; animation: tilePop 0.35s ease-out; }
.mine-tile.keno-miss { background: #ffffff08; border-color: #ffffff1c; opacity: .5; }
.mine-tile.keno-drawn { border-color: #5cc8ff; box-shadow: inset 0 0 0 2px #5cc8ff55; }

/* Blackjack */
.bj-table {
    position: relative; display: flex; flex-direction: column; gap: 22px; margin: 14px 0;
    padding: 26px 18px; border-radius: 22px;
    background: radial-gradient(circle at 50% 0%, #1f6b47, #0d3322 72%);
    border: 7px solid #6b4321; box-shadow: inset 0 0 46px #00000055, 0 14px 30px #0007;
}
.bj-seat-label { margin-bottom: 8px; color: #d7f2e2; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: .03em; }
.bj-hand { display: flex; gap: 10px; justify-content: center; min-height: 96px; flex-wrap: wrap; }
.bj-result-banner {
    position: absolute; left: 50%; top: 50%; z-index: 5; padding: 10px 24px; border-radius: 12px;
    font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; text-align: center;
    opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.75);
    transition: opacity .25s ease, transform .25s ease;
}
.bj-result-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bj-result-banner.win { background: linear-gradient(135deg, #4ade80, #16a34a); color: #06240f; box-shadow: 0 10px 26px #4ade8055; }
.bj-result-banner.lose { background: linear-gradient(135deg, #ff6b6b, #e11d48); color: #2a0509; box-shadow: 0 10px 26px #ff6b6b55; }
.bj-result-banner.push { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #10121c; box-shadow: 0 10px 26px #94a3b855; }

.card-flip { animation: cardFlip 0.35s ease-out; }
@keyframes cardFlip {
    from { transform: rotateY(90deg); opacity: 0; }
    to { transform: rotateY(0deg); opacity: 1; }
}
/* Single shared card face for every card game (Blackjack, Baccarat, Hi-Lo) -- previously Blackjack
   had its own bigger, corner-pipped face while Baccarat/Hi-Lo shared a plain, smaller box, so the
   "flagship" card game didn't actually look any more premium than the others. Suit is optional
   (Baccarat/Hi-Lo draw bare ranks server-side, since suit doesn't affect either game's scoring) --
   see renderCard() in games.js, which falls back to showing the rank in the center pip when absent. */
.playing-card {
    position: relative; width: 72px; height: 100px; border-radius: 9px; background: #fff; color: #14151f;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; box-shadow: 0 3px 8px #00000055;
}
.playing-card.red { color: #d6294a; }
.playing-card.hidden { background: repeating-linear-gradient(45deg, #33364a, #33364a 6px, #3d4058 6px, #3d4058 12px); }
.card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 13px; font-weight: 800; }
.card-corner-top { top: 6px; left: 7px; }
.card-corner-bottom { bottom: 6px; right: 7px; transform: rotate(180deg); }
.card-pip { font-size: 32px; }
.card-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-caption { font-size: 10px; opacity: 0.55; text-align: center; }

/* Toasts */
#toastContainer { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.toast {
    background: #212433; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
    font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px #00000055;
    animation: toastIn 0.25s ease-out;
}
.toast.win { border-color: #4ade8088; }
.toast.lose { border-color: #ff6b6b88; }
.toast.fadeout { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }

/* Confetti */
#confettiLayer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti-piece {
    position: absolute; top: -20px; width: 8px; height: 14px; opacity: 0.9;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0.3; }
}

/* Localized particle burst -- shared by Mines/Keno/Mystery Box/Crash for a "pop" at a specific
   point, as opposed to #confettiLayer's full-viewport rain. Position is set inline in px (from
   getBoundingClientRect(), which is viewport-relative), so this layer must be position:fixed. */
#particleLayer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.burst-particle {
    position: fixed; border-radius: 50%; transform: translate(-50%, -50%);
    animation: particlePop forwards ease-out;
}
@keyframes particlePop {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

/* Misc animation polish */
.btn, .avatar, .card { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.btn:active { transform: scale(0.96); }
.chat-msg { animation: msgIn 0.25s ease-out; }
@keyframes msgIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Target board (Darts / Archery) */
.target-board-wrap { position: relative; width: 200px; height: 200px; margin: 16px auto 8px; }
.target-board {
    width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle, var(--gold) 0 11%, #d6294a 11% 34%, #f3f4fa 34% 37%, #2a2d40 37% 64%, #f3f4fa 64% 67%, #d6294a 67% 100%);
    box-shadow: 0 0 0 6px #14151f, 0 8px 24px #000000aa;
}
.target-board.archery-board {
    background: radial-gradient(circle, var(--gold) 0 11%, var(--accent-2) 11% 34%, #f3f4fa 34% 37%, var(--accent) 37% 64%, #f3f4fa 64% 67%, var(--accent-2) 67% 100%);
}
.projectile {
    position: absolute; top: 50%; left: 50%; font-size: 26px;
    transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
    filter: drop-shadow(0 3px 4px #000000aa);
    transition: top 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), left 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.15s;
}
.projectile.flying { opacity: 1; }
.target-board-wrap.impact .target-board { animation: shakeLoss 0.4s ease-in-out; }
.power-meter { width: 100%; max-width: 280px; height: 22px; margin: 10px auto; background: #0d0e16; border: 2px solid var(--border); border-radius: 999px; overflow: hidden; position: relative; }
.power-meter-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, var(--good), var(--gold), var(--bad)); }
.power-meter-marker { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 6px #fff; }

/* Coin Flip */
.coin-flip-stage { perspective: 700px; width: 110px; height: 110px; margin: 18px auto; }
.coin-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.25, 1); }
.coin-face {
    position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; color: #4a3410;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffd166 45%, #c9922b 100%);
    box-shadow: 0 4px 16px #00000066, inset 0 0 0 4px #c9922baa;
}
.coin-face .coin-letter { font-size: 15px; letter-spacing: 1px; }
.coin-face.coin-back { transform: rotateY(180deg); }

/* Roulette */
.roulette-wheel-wrap { position: relative; width: 340px; height: 340px; max-width: 100%; margin: 16px auto; }
.roulette-wheel {
    position: relative; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #33364a;
    transition: transform 3.4s cubic-bezier(0.15, 0.8, 0.15, 1);
    box-shadow: 0 0 0 6px #14151f, 0 8px 24px #000000aa;
}
.roulette-wheel .wheel-label { font-size: 15px; }
.roulette-wheel-pointer { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 28px; color: var(--gold); filter: drop-shadow(0 2px 2px #000); z-index: 2; }
.roulette-result-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 72px; height: 72px; border-radius: 50%; background: #14151f; border: 3px solid var(--gold);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: #fff;
    box-shadow: 0 2px 10px #000000aa; opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.roulette-result-badge.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Roulette straight-number bet -- click a number on the felt instead of typing it into a
   plain input box. */
.roulette-number-board { display: flex; flex-direction: column; gap: 6px; }
.roulette-number-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.roulette-number-btn {
    padding: 8px 0; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
    font-weight: 800; font-size: 13px; color: #fff; transition: transform .1s, border-color .15s;
}
.roulette-number-btn:hover { transform: translateY(-2px); }
.roulette-number-btn.red { background: #b3243f; }
.roulette-number-btn.black { background: #23242e; }
.roulette-number-btn.zero { background: #1f8a4c; width: 100%; }
.roulette-number-btn.selected { border-color: var(--gold); box-shadow: 0 0 0 2px #ffd16655; }

/* Baccarat */
.baccarat-hands { display: flex; justify-content: space-around; gap: 16px; margin: 14px 0; }
.baccarat-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.baccarat-side .bj-hand { min-height: 128px; justify-content: center; }

/* ===== Bank ===== */

.notif-ticker {
    background: linear-gradient(120deg, #2a2450, #1c1e2b);
    border: 1px solid #7c5cff3a; border-radius: 12px; padding: 11px 16px;
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    display: flex; align-items: center; min-height: 20px; overflow: hidden;
}
.notif-ticker-text { animation: notifFadeIn 0.4s ease; }
@keyframes notifFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.bank-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bank-hero-grid > .savings-hero { grid-column: 1 / -1; }
@media (max-width: 680px) {
    .bank-hero-grid { grid-template-columns: 1fr; }
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px #00000055; border-color: #ffffff22; }
.stat-card-label { font-size: 12px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.stat-card-value { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-card-value.good { color: var(--good); }
.stat-card-value.gold { color: var(--gold); }
.stat-card-value.accent { color: var(--accent); }
.stat-card-value.bad { color: var(--bad); }
.stat-breakdown { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.stat-breakdown-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }
.stat-breakdown-row strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.savings-hero {
    background: linear-gradient(145deg, #2a2450, #1c1e2b 60%);
    border: 1px solid #7c5cff3a;
    border-radius: 20px;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 40px #00000055;
}
.savings-hero::before {
    content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
    background: radial-gradient(circle, #7c5cff33, transparent 70%); pointer-events: none;
}
.savings-hero-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; position: relative; z-index: 1; }
.savings-hero-label { font-size: 13px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.savings-hero-balance { font-size: 44px; font-weight: 800; color: var(--good); margin-top: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.savings-hero-countdown { text-align: right; }
.savings-hero-countdown .count { font-size: 20px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.savings-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-top: 22px; position: relative; z-index: 1; }
.savings-stat { background: #ffffff08; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.savings-stat-label { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.savings-stat-value { font-size: 18px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rate-progress-card { margin-top: 20px; position: relative; z-index: 1; background: #ffffff08; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.rate-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rate-progress-row .from, .rate-progress-row .to { font-size: 12px; color: var(--text-dim); }
.rate-progress-row .from strong, .rate-progress-row .to strong { color: var(--text); font-size: 14px; }
.rate-progress-row .bonus { color: var(--good); font-weight: 700; font-size: 12px; }

.progress-track { background: #ffffff14; border-radius: 999px; overflow: hidden; height: 10px; position: relative; }
.progress-track.thick { height: 14px; }
.progress-fill { background: var(--accent); height: 100%; border-radius: inherit; width: 0%; transition: width 0.6s cubic-bezier(0.22, 0.9, 0.3, 1); }
.progress-fill.good { background: linear-gradient(90deg, #22c55e, var(--good)); }
.progress-fill.gold { background: linear-gradient(90deg, #e0a53a, var(--gold)); }
.progress-fill.warn { background: linear-gradient(90deg, #e05c3a, var(--bad)); }

.money-input-row { display: flex; gap: 8px; }
.money-input-row input { flex: 1; }
.quick-amount-row { display: flex; gap: 6px; margin-top: 8px; }
.quick-amount-btn {
    flex: 1; background: #ffffff0a; border: 1px solid var(--border); color: var(--text-dim);
    padding: 6px 0; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.quick-amount-btn:hover { background: #7c5cff22; border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.quick-amount-btn:active { transform: scale(0.94); }
.quick-amount-btn.max { color: var(--gold); border-color: #ffd16655; }
.quick-amount-btn.max:hover { background: #ffd16622; border-color: var(--gold); }

.loan-figures { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0; }
.loan-figure-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }
.loan-figure-value { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }

.job-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
    text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative; overflow: hidden;
}
.job-card:not(.on-cooldown):hover { transform: translateY(-3px); box-shadow: 0 10px 24px #00000055; border-color: var(--accent); }
.job-card.on-cooldown { opacity: 0.9; }
.loan-tier-card { cursor: pointer; }
.loan-tier-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px #7c5cff55, 0 10px 24px #00000055; transform: translateY(-3px); }

.collections-notice {
    background: #ffd16614; border: 1px solid #ffd16644; color: var(--gold);
    border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; line-height: 1.5;
}
.collections-notice strong { font-variant-numeric: tabular-nums; }
.collections-notice.danger { background: #ff6b6b14; border-color: #ff6b6b44; color: #ffb3b3; }
.job-icon { font-size: 34px; }
.job-name { font-weight: 800; margin-top: 4px; }
.job-blurb { color: var(--text-dim); font-size: 12px; margin: 2px 0 8px; }
.job-reward { font-weight: 700; color: var(--gold); font-size: 14px; margin-bottom: 8px; }
.difficulty-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.difficulty-pill.easy { background: #4ade8022; color: var(--good); border: 1px solid #4ade8055; }
.difficulty-pill.medium { background: #ffd16622; color: var(--gold); border: 1px solid #ffd16655; }
.difficulty-pill.hard { background: #ff6b6b22; color: var(--bad); border: 1px solid #ff6b6b55; }
.job-cooldown-track { margin: 4px 0 8px; }
.job-cooldown-text { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.tx-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: none; }
.tx-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; background: #ffffff0c; }
.tx-details { flex: 1; min-width: 0; }
.tx-type { font-weight: 700; font-size: 14px; }
.tx-detail-sub, .tx-time { color: var(--text-dim); font-size: 11px; }
.tx-amount { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-amount.positive { color: var(--good); }
.tx-amount.negative { color: var(--bad); }

.number-pop { animation: numberPop 0.4s ease; }
@keyframes numberPop { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* Forms used as inline actions (for example, the CSRF-protected logout button). */
.inline-form { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Antinon Arcade — game lobby and shared game cabinet
   -------------------------------------------------------------------------- */

.games-lobby-page,
.game-play-page {
    --arcade-ink: #f7f5ff;
    --arcade-muted: #aaa8bd;
    --arcade-panel: #171825;
    --arcade-panel-soft: #1d1f2e;
    background:
        radial-gradient(circle at 12% 0%, #7c5cff26 0, transparent 29rem),
        radial-gradient(circle at 88% 16%, #ff5c8a1f 0, transparent 27rem),
        #101118;
}

.games-lobby-page .wrap { max-width: 1180px; padding-bottom: 90px; }
.games-lobby-page header.site-header,
.game-play-page header.site-header {
    background: #11121bd9;
    border-bottom-color: #ffffff12;
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 40;
}

.arcade-hero {
    min-height: 430px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: center;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 54px 62px 72px;
    border: 1px solid #ffffff17;
    border-radius: 30px;
    background:
        linear-gradient(120deg, #171826 0%, #1b1931 56%, #25162d 100%);
    box-shadow: 0 30px 80px #05050a80, inset 0 1px #ffffff0d;
}
.arcade-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#ffffff06 1px, transparent 1px),
        linear-gradient(90deg, #ffffff06 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to right, #000, transparent 78%);
    pointer-events: none;
}
.arcade-hero::after {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    right: -95px;
    top: -135px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff5c8a30, #7c5cff16 44%, transparent 70%);
    filter: blur(4px);
}
.arcade-hero-copy { position: relative; z-index: 3; max-width: 610px; }
.arcade-eyebrow,
.section-kicker,
.feature-kicker {
    color: #b8aaff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.arcade-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.arcade-eyebrow span { width: 26px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.arcade-hero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--arcade-ink);
    font-size: clamp(44px, 6vw, 76px);
    line-height: .95;
    letter-spacing: -.055em;
}
.arcade-hero h1 em {
    color: transparent;
    background: linear-gradient(90deg, #b9a8ff, #ff89ad 75%);
    -webkit-background-clip: text;
    background-clip: text;
    font-style: normal;
}
.arcade-hero-copy > p { max-width: 540px; margin: 23px 0 27px; color: #bbb8ca; font-size: 16px; line-height: 1.65; }
.arcade-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.arcade-primary,
.btn.arcade-ghost { padding: 12px 18px; border-radius: 12px; }
.btn.arcade-primary { background: #f3efff; color: #17131f; box-shadow: 0 8px 24px #0005; }
.btn.arcade-primary:hover { background: #fff; transform: translateY(-1px); }
.btn.arcade-primary span { margin-left: 12px; color: var(--accent); }
.btn.arcade-ghost { background: #ffffff08; border: 1px solid #ffffff18; color: #d8d5e4; }
.btn.arcade-ghost:hover { background: #ffffff10; border-color: #ffffff2c; }

.arcade-hero-orbit { position: relative; z-index: 2; width: 330px; height: 330px; justify-self: end; }
.arcade-orbit { position: absolute; border: 1px solid #ffffff16; border-radius: 50%; inset: 30px; animation: arcadeSpin 25s linear infinite; }
.arcade-orbit-two { inset: 70px; border-style: dashed; border-color: #ff88aa55; animation-direction: reverse; animation-duration: 18s; }
.arcade-hero-core {
    position: absolute;
    inset: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffd16655;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #3b334a, #171720 70%);
    box-shadow: 0 0 55px #ffd1661c, inset 0 0 25px #0008;
}
.arcade-hero-core > span { color: var(--gold); font-size: 20px; }
.arcade-hero-core strong { margin: 2px 0; font-size: 24px; font-variant-numeric: tabular-nums; }
.arcade-hero-core small { color: var(--arcade-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.arcade-hero-chip {
    position: absolute;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid #ffffff1c;
    border-radius: 20px;
    background: #202130d9;
    box-shadow: 0 14px 34px #0007, inset 0 1px #ffffff14;
    font-size: 31px;
    backdrop-filter: blur(10px);
    animation: arcadeFloat 4s ease-in-out infinite;
}
.arcade-hero-chip.chip-one { top: 15px; left: 129px; transform: rotate(7deg); }
.arcade-hero-chip.chip-two { left: 4px; bottom: 61px; animation-delay: -1.3s; transform: rotate(-8deg); }
.arcade-hero-chip.chip-three { right: 0; bottom: 49px; animation-delay: -2.2s; transform: rotate(8deg); }
.arcade-hero-stats {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 560px;
    border-top: 1px solid #ffffff0f;
    border-right: 1px solid #ffffff0f;
    border-radius: 0 20px 0 0;
    background: #0d0e15a8;
    backdrop-filter: blur(12px);
}
.arcade-hero-stats div { display: flex; align-items: baseline; gap: 8px; padding: 14px 20px; border-right: 1px solid #ffffff0d; }
.arcade-hero-stats div:last-child { border-right: 0; }
.arcade-hero-stats strong { font-size: 17px; }
.arcade-hero-stats span { color: var(--arcade-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

.reward-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.reward-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    border: 1px solid #ffffff12;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d1f2c, #171821);
    box-shadow: inset 0 1px #ffffff08;
}
.reward-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #ffffff0a; font-size: 23px; }
.reward-copy { min-width: 0; }
.reward-copy span, .reward-copy strong, .reward-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-copy span { margin-bottom: 2px; color: var(--arcade-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reward-copy strong { font-size: 13px; }
.reward-copy small { margin-top: 2px; color: #77788b; font-size: 10px; }
.reward-action { min-width: 68px; padding: 8px 11px; border-radius: 9px; font-size: 11px; background: #ffffff10; border: 1px solid #ffffff15; }
.reward-action:hover { background: var(--accent); }
.reward-action:disabled { background: transparent; border-color: #ffffff0b; }
.reward-daily .reward-icon { background: #ffd16615; }
.reward-hourly .reward-icon { background: #5cc8ff15; }
.reward-spin .reward-icon { background: #c084fc15; }

.arcade-feature-grid { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 14px; margin-bottom: 28px; }
.arcade-feature {
    position: relative;
    min-height: 295px;
    overflow: hidden;
    padding: 25px;
    border: 1px solid #ffffff12;
    border-radius: 20px;
    background: #191a25;
    box-shadow: inset 0 1px #ffffff08;
}
.arcade-feature::after { content: ''; position: absolute; width: 190px; height: 190px; right: -85px; top: -85px; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.jackpot-feature { background: linear-gradient(145deg, #242014, #19191f 70%); }
.jackpot-feature::after { background: #ffd1661f; }
.tournament-feature { background: linear-gradient(145deg, #201a32, #19191f 70%); }
.tournament-feature::after { background: #7c5cff29; }
.wins-feature { background: linear-gradient(145deg, #18232a, #19191f 70%); }
.wins-feature::after { background: #5cc8ff17; }
.feature-kicker { margin-bottom: 20px; color: #8d8b9e; }
.feature-icon { position: absolute; top: 20px; right: 22px; z-index: 1; font-size: 31px; filter: drop-shadow(0 6px 10px #0008); }
.arcade-feature h2 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 23px; letter-spacing: -.025em; }
.arcade-feature > p { position: relative; z-index: 1; min-height: 58px; margin: 0; color: #9695a6; font-size: 12px; line-height: 1.55; }
.feature-value { position: relative; z-index: 1; display: flex; flex-direction: column; margin-top: 17px; }
.feature-value small { color: #777789; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-value strong { margin-top: 2px; color: var(--gold); font-size: 25px; font-variant-numeric: tabular-nums; }
.feature-link { position: absolute; left: 25px; bottom: 22px; color: #e4dfef; font-size: 12px; font-weight: 750; }
.feature-link span { margin-left: 8px; color: var(--gold); }
.tournament-standings { position: absolute; left: 25px; right: 25px; bottom: 19px; display: flex; gap: 5px; overflow: hidden; }
.tournament-rank { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: #ffffff08; color: #aaa8b7; font-size: 9px; }
.tournament-rank strong { color: #e7e4ed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-wins-feed { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.recent-win-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #ffffff0b; }
.recent-win-row:last-child { border-bottom: 0; }
.recent-win-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #ffffff09; }
.recent-win-copy { min-width: 0; font-size: 10px; color: #9998aa; line-height: 1.35; }
.recent-win-copy strong { color: #efecf5; }
.recent-win-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-win-copy time { color: #68697b; font-size: 9px; }

.arcade-recommended,
.game-library { margin-top: 28px; }
.arcade-recommended[hidden], .lobby-empty[hidden] { display: none; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 15px; }
.section-heading h2 { margin: 5px 0 0; font-size: 29px; letter-spacing: -.035em; }
.section-heading p { max-width: 570px; margin: 7px 0 0; color: #858496; font-size: 12px; line-height: 1.5; }
.game-library { padding: 27px; border: 1px solid #ffffff12; border-radius: 24px; background: #15161fbd; box-shadow: 0 24px 60px #05050945; }
.library-count { display: flex; flex-direction: column; align-items: flex-end; }
.library-count strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.library-count span { color: #737486; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.lobby-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 13px; margin: 0 0 19px; }
.lobby-search-wrap { position: relative; display: block; margin: 0; color: inherit; }
.lobby-search-wrap > span { position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-53%); color: #77788c; font-size: 22px; pointer-events: none; }
.lobby-search {
    width: 100%;
    height: 47px;
    padding: 0 16px 0 44px;
    border: 1px solid #ffffff13;
    border-radius: 13px;
    outline: none;
    background: #0e0f16b8;
    color: #f0edf8;
    font: inherit;
    font-size: 13px;
}
.lobby-search:focus { border-color: #8f78ff; box-shadow: 0 0 0 3px #7c5cff20; }
.lobby-search::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.category-tabs { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: thin; }
.category-tab {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid #ffffff12;
    border-radius: 9px;
    background: transparent;
    color: #8f8e9f;
    font-size: 11px;
    font-weight: 750;
}
.category-tab:hover { color: #fff; border-color: #ffffff2b; }
.category-tab.active { border-color: #8c74ff55; background: #7c5cff1e; color: #c9bfff; box-shadow: none; }

.game-lobby-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0; }
.recommended-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-tile {
    display: flex;
    min-width: 0;
    min-height: 300px;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid #ffffff10;
    border-radius: 17px;
    background: #191a24;
    color: var(--arcade-ink);
    text-align: left;
    box-shadow: 0 14px 30px #05050838;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.game-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px #ffffff0a; pointer-events: none; }
.game-tile:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tile-color) 50%, transparent); box-shadow: 0 22px 44px #05050870, 0 0 28px color-mix(in srgb, var(--tile-color) 13%, transparent); }
.game-tile.is-disabled { opacity: .55; filter: grayscale(.6); }
.game-tile.is-disabled:hover { transform: none; box-shadow: 0 14px 30px #05050838; }
.game-tile-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 122px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tile-color) 28%, transparent), transparent 58%),
        linear-gradient(145deg, color-mix(in srgb, var(--tile-color) 8%, #20212c), #11121a);
}
.game-tile-art::before { content: ''; position: absolute; width: 110px; height: 110px; border: 1px solid color-mix(in srgb, var(--tile-color) 23%, transparent); border-radius: 50%; }
.game-tile-icon { position: relative; z-index: 1; margin: 0; font-size: 45px; filter: drop-shadow(0 10px 14px #0008); transition: transform .25s ease; }
.game-tile:hover .game-tile-icon { transform: scale(1.12) rotate(-3deg); }
.game-tile-content { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 15px; }
.game-tile-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.game-tile-title { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.game-tile-arrow { color: #646578; font-size: 15px; transition: color .2s, transform .2s; }
.game-tile:hover .game-tile-arrow { color: var(--tile-color); transform: translate(2px, -2px); }
.game-tile-blurb { min-height: 44px; margin-top: 6px; color: #828294; font-size: 10.5px; line-height: 1.45; }
.game-tile-meta { justify-content: flex-start; gap: 5px; margin-top: 11px; }
.risk-pill, .mult-pill { padding: 3px 7px; font-size: 8.5px; border-radius: 6px; }
.risk-pill { border-color: currentColor; }
.mult-pill { background: #ffffff08; color: #8a8999; }
.game-tile-count { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: #68697a; background: none; font-size: 9px; font-weight: 650; }
.game-tile-count > span { width: 6px; height: 6px; border-radius: 50%; background: #555666; }
.game-tile-count.is-live { color: #75d89a; }
.game-tile-count.is-live > span { background: var(--good); box-shadow: 0 0 0 3px #4ade8016; }
.game-tile-badges { z-index: 3; top: 9px; left: 9px; }
.game-tile-badge { padding: 3px 7px; border-radius: 6px; background: #101119c9; color: #d7d2e1; font-size: 8px; backdrop-filter: blur(8px); }
.game-tile-badge-disabled { background: color-mix(in srgb, var(--bad) 70%, #101119); color: #fff; }
.game-tile-fav {
    z-index: 4;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff13;
    background: #101119b8;
    color: #89899a;
    backdrop-filter: blur(8px);
}
.game-tile-fav:hover, .game-tile-fav.active { color: var(--gold); border-color: #ffd16644; background: #2d2819d9; }
.lobby-empty { padding: 50px 20px; color: #878697; text-align: center; }
.lobby-empty > span { display: block; margin-bottom: 8px; font-size: 37px; filter: grayscale(.5); }
.lobby-empty strong { display: block; color: #d6d3df; }
.lobby-empty p { margin: 5px 0 0; font-size: 11px; }

/* Shared game cabinet: every game keeps its mechanics but gains the same stage and controls. */
.game-play-page {
    --game-accent: var(--accent);
    background:
        radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--game-accent) 22%, transparent), transparent 40rem),
        #0f1017;
}
.game-play-page .wrap { max-width: 1040px; padding-bottom: 90px; }
.game-play-page .wrap > p.meta:first-of-type { max-width: 760px; margin: 0 auto 12px; }
.game-play-page .wrap > p.meta:first-of-type a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #ffffff10;
    border-radius: 9px;
    background: #ffffff05;
    color: #a7a5b5;
    font-size: 11px;
    font-weight: 750;
}
.game-play-page .wrap > p.meta:first-of-type a:hover { border-color: color-mix(in srgb, var(--game-accent) 45%, transparent); color: #fff; text-decoration: none; }
.game-play-page .wrap > .card {
    position: relative;
    width: 100%;
    max-width: 760px !important;
    min-height: 520px;
    overflow: hidden;
    margin: 0 auto;
    padding: 34px clamp(22px, 5vw, 52px) 40px;
    border: 1px solid #ffffff14;
    border-radius: 25px;
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--game-accent) 7%, #1c1d29), #14151e 64%);
    box-shadow: 0 32px 80px #05050980, inset 0 1px #ffffff0b;
    backdrop-filter: blur(16px);
}
.game-play-page .wrap > .card::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 380px;
    height: 220px;
    left: 50%;
    top: -170px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--game-accent) 25%, transparent);
    filter: blur(42px);
    pointer-events: none;
}
.game-play-page .wrap > .card > * { position: relative; z-index: 1; }
.game-play-page .wrap > .card > h2 { margin: 0 0 7px; color: #f8f6ff; font-size: clamp(27px, 5vw, 36px); line-height: 1.1; letter-spacing: -.04em; text-align: center; }
.game-play-page .wrap > .card > h2 + .meta { max-width: 570px; margin: 0 auto 22px; color: #9291a3; font-size: 12px; line-height: 1.55; text-align: center; }
.game-play-page .field { margin: 15px 0; text-align: left; }
.game-play-page .field label { margin-bottom: 7px; color: #aaa8b8; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.game-play-page input[type=number],
.game-play-page select {
    min-height: 46px;
    border: 1px solid #ffffff15;
    border-radius: 11px;
    background: #0d0e15a8;
    color: #f5f2fa;
    font-weight: 700;
    outline: none;
}
.game-play-page input[type=number]:focus,
.game-play-page select:focus { border-color: var(--game-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 17%, transparent); }
.game-play-page .btn { min-height: 45px; border-radius: 11px; background: var(--game-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--game-accent) 18%, transparent); }
.game-play-page .btn:hover { filter: brightness(1.09); transform: translateY(-1px); }
.game-play-page .btn.secondary { background: #292b39; box-shadow: none; }
.game-play-page .btn:active { transform: translateY(1px) scale(.99); }
.game-play-page [id$="Message"] {
    display: flex;
    min-height: 40px !important;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid #ffffff0c;
    border-radius: 10px;
    background: #0b0c121f;
    color: #aaa8b8;
    line-height: 1.35;
}
.game-play-page [id$="Multiplier"] { color: var(--gold) !important; font-variant-numeric: tabular-nums; }
.game-play-page .bet-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 7px; }
.game-play-page .bet-shortcut {
    border: 1px solid #ffffff10;
    border-radius: 7px;
    background: #ffffff05;
    color: #8f8e9e;
    padding: 5px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}
.game-play-page .bet-shortcut:hover { border-color: color-mix(in srgb, var(--game-accent) 45%, transparent); color: #fff; background: color-mix(in srgb, var(--game-accent) 9%, transparent); }
.game-play-page .slot-canvas-wrap,
.game-play-page .crash-display,
.game-play-page .bj-table,
.game-play-page .baccarat-hands,
.game-play-page .mines-grid,
.game-play-page .target-board-wrap,
.game-play-page .coin-flip-stage,
.game-play-page .wheel-wrap,
.game-play-page .roulette-wheel-wrap,
.game-play-page .dice-display {
    filter: drop-shadow(0 18px 30px #0005);
}
.game-play-page .slot-cabinet-frame { border-color: color-mix(in srgb, var(--game-accent) 35%, #33364a); background: linear-gradient(180deg, #090a10, #14151f); }
.game-play-page .mines-grid { padding: 10px; border: 1px solid #ffffff0d; border-radius: 15px; background: #0d0e15a6; }
.game-play-page .mine-tile { border-radius: 10px; border-color: #ffffff12; background: #252735; }
.game-play-page .mine-tile:hover:not(.revealed):not(:disabled) { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 13%, #292b39); }
.game-play-page .move-buttons button { border-color: #ffffff13; background: #222431; }
.game-play-page .move-buttons button:hover { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 10%, #252735); }
.game-play-page .playing-card { box-shadow: 0 14px 30px #0007; }
.game-play-page .roulette-wheel { box-shadow: 0 0 0 7px #0f1017, 0 18px 40px #000b, 0 0 35px color-mix(in srgb, var(--game-accent) 16%, transparent); }

@keyframes arcadeSpin { to { transform: rotate(360deg); } }
@keyframes arcadeFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

@media (max-width: 1000px) {
    .arcade-hero { grid-template-columns: 1fr .72fr; padding: 48px 42px 72px; }
    .arcade-hero-orbit { width: 270px; height: 270px; }
    .arcade-hero-core { inset: 83px; }
    .arcade-hero-chip { width: 58px; height: 58px; font-size: 27px; }
    .arcade-hero-chip.chip-one { left: 105px; }
    .arcade-feature-grid { grid-template-columns: 1fr 1fr; }
    .wins-feature { grid-column: 1 / -1; min-height: 210px; }
    .recent-wins-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .recent-win-row { border: 0; padding: 8px; border-radius: 10px; background: #ffffff05; }
    .game-lobby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .games-lobby-page .wrap, .game-play-page .wrap { padding-inline: 11px; }
    .arcade-hero { display: block; min-height: 500px; padding: 40px 27px 88px; border-radius: 22px; }
    .arcade-hero h1 { font-size: clamp(42px, 14vw, 62px); }
    .arcade-hero-copy > p { font-size: 14px; }
    .arcade-hero-orbit { position: absolute; width: 230px; height: 230px; right: -45px; bottom: 14px; opacity: .42; }
    .arcade-hero-core { inset: 72px; }
    .arcade-hero-chip.chip-one { left: 88px; }
    .arcade-hero-stats { max-width: none; }
    .arcade-hero-stats div { flex-direction: column; gap: 1px; padding: 11px 14px; }
    .reward-dock { grid-template-columns: 1fr; }
    .arcade-feature-grid { grid-template-columns: 1fr; }
    .wins-feature { grid-column: auto; }
    .recent-wins-feed { display: flex; }
    .game-library { padding: 19px 13px; border-radius: 19px; }
    .library-heading { align-items: start; }
    .game-lobby-grid, .recommended-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .game-tile { min-height: 275px; }
    .game-tile-art { height: 104px; }
    .game-tile-content { padding: 12px; }
    .game-tile-blurb { min-height: 52px; font-size: 9.5px; }
    .game-play-page .wrap > .card { min-height: 0; padding: 27px 17px 30px; border-radius: 19px; }
    .game-play-page .roulette-wheel-wrap { transform: scale(.86); margin-block: -6px; }
    .game-play-page .challenge-row { align-items: flex-start; gap: 10px; }
}

@media (max-width: 430px) {
    .arcade-hero-actions .btn { width: 100%; text-align: center; }
    .game-lobby-grid, .recommended-grid { grid-template-columns: 1fr; }
    .game-tile { min-height: 265px; }
    .game-tile-art { height: 112px; }
    .game-tile-blurb { min-height: 38px; }
    .section-heading h2 { font-size: 25px; }
    .library-count { display: none; }
    .reward-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .arcade-feature { min-height: 285px; }
}

/* Notification center ---------------------------------------------------- */
.site-redesign .bell-btn.active, .site-redesign .bell-btn[aria-expanded="true"] { border-color: #8a72ff46; background: #7c5cff18; color: #d7cfff; }
.bell-dropdown[hidden] { display: none; }
.site-redesign .bell-dropdown { top: calc(100% + 13px); width: 390px; max-height: min(610px, calc(100vh - 85px)); padding: 0; overflow: hidden; border: 1px solid #ffffff16; border-radius: 18px; background: #161720f7; box-shadow: 0 28px 75px #000c, inset 0 1px #ffffff08; backdrop-filter: blur(22px); }
.site-redesign .bell-dropdown-header { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 13px; border-bottom: 1px solid #ffffff0d; background: radial-gradient(circle at 100% 0, #7c5cff1d, transparent 13rem); }.bell-dropdown-header > div span, .bell-dropdown-header > div small { display: block; }.bell-dropdown-header > div span { color: #e6e2eb; font-size: 14px; font-weight: 850; }.bell-dropdown-header > div small { margin-top: 3px; color: #777586; font-size: 8px; font-weight: 650; }
.bell-dropdown-header button { padding: 6px 8px; border: 0; border-radius: 7px; background: #ffffff07; color: #aaa6b5; font-size: 8px; font-weight: 800; cursor: pointer; }.bell-dropdown-header button:hover { background: #7c5cff1c; color: #d7cfff; }.bell-dropdown-header button:disabled { opacity: .4; cursor: default; }
.notif-list { max-height: 450px; overflow-y: auto; scrollbar-color: #ffffff1d transparent; }.notif-entry { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 7px; gap: 11px; align-items: center; min-height: 77px; padding: 12px 15px; border-bottom: 1px solid #ffffff09; color: inherit; transition: background .16s; }.notif-entry:hover { background: #ffffff05; text-decoration: none; }.notif-entry.unread { background: linear-gradient(90deg, #7c5cff12, transparent 78%); }.notif-entry.unread::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #8d73ff; }
.notif-entry-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #ffffff0c; border-radius: 12px; background: #ffffff05; font-size: 18px; }.tone-purple .notif-entry-icon, .tone-purple .notification-page-icon { background: #7c5cff12; }.tone-blue .notif-entry-icon, .tone-blue .notification-page-icon { background: #5cc8ff10; }.tone-green .notif-entry-icon, .tone-green .notification-page-icon { background: #4ade8010; }.tone-gold .notif-entry-icon, .tone-gold .notification-page-icon { background: #ffd16611; }.tone-red .notif-entry-icon, .tone-red .notification-page-icon { background: #ff5c5c11; }
.notif-entry-copy { min-width: 0; }.notif-entry-copy strong, .notif-entry-copy > span, .notif-entry-copy time { display: block; }.notif-entry-copy strong { margin-bottom: 3px; color: #8d899a; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.notif-entry-copy > span { overflow: hidden; color: #c5c1cc; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.notif-entry-copy time { margin-top: 4px; color: #626171; font-size: 7px; }.notif-entry.unread .notif-entry-copy > span { color: #eeeaf4; }.notif-entry > i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }.notif-entry.unread > i { background: #8d73ff; box-shadow: 0 0 0 3px #7c5cff12; }
.notif-dropdown-empty { display: grid; min-height: 190px; place-items: center; align-content: center; text-align: center; }.notif-dropdown-empty > span { font-size: 30px; }.notif-dropdown-empty strong { margin: 9px 0 3px; color: #cbc7d3; font-size: 12px; }.notif-dropdown-empty small { color: #6f6d7d; font-size: 8px; }.bell-dropdown-footer { display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid #ffffff0d; background: #111219; color: #a99fda; font-size: 9px; font-weight: 850; }.bell-dropdown-footer:hover { background: #151522; color: #d7ceff; text-decoration: none; }.bell-dropdown-footer i { font-style: normal; }

.page-notifications .wrap { max-width: 1000px !important; }.notifications-shell { overflow: hidden; border: 1px solid #ffffff10; border-radius: 23px; background: linear-gradient(155deg, #191a24, #12131a); box-shadow: 0 28px 70px #0505094f; }.notifications-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 215px; align-items: center; gap: 30px; padding: 35px 40px; overflow: hidden; border-bottom: 1px solid #ffffff0d; background: radial-gradient(circle at 84% 20%, #7c5cff33, transparent 18rem), linear-gradient(145deg, #252139, #181923 70%); }.notifications-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#ffffff0b 1px, transparent 1px); background-size: 19px 19px; mask-image: linear-gradient(to right, transparent 40%, #000); }.notifications-hero > div { position: relative; z-index: 1; }.notifications-kicker { color: #a08cff; font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }.notifications-hero h1 { margin: 7px 0 8px; font-size: 43px; letter-spacing: -.055em; }.notifications-hero p { max-width: 540px; margin: 0; color: #8c899a; font-size: 11px; line-height: 1.55; }
.notifications-orb { display: grid; width: 130px; height: 130px; place-items: center; align-content: center; border: 1px solid #ffffff18; border-radius: 50%; background: linear-gradient(145deg, #322a57, #151621); box-shadow: 0 0 0 9px #7c5cff09, 0 20px 45px #05050988, inset 0 1px #ffffff18; }.notifications-orb span { color: #998dbe; font-size: 7px; font-weight: 900; letter-spacing: .18em; }.notifications-orb strong { margin: -1px 0; font-size: 42px; line-height: 1; }.notifications-orb small { color: #777287; font-size: 7px; }
.notifications-toolbar { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 20px; border-bottom: 1px solid #ffffff0b; background: #111219; }.notification-filters { display: flex; gap: 5px; }.notification-filters button { min-height: 35px; padding: 7px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #777586; font-size: 9px; font-weight: 850; cursor: pointer; }.notification-filters button span { margin-left: 4px; color: #5f5e6e; }.notification-filters button.active { border-color: #7c5cff28; background: #7c5cff12; color: #c6bbf7; }.notification-actions { display: flex; align-items: center; gap: 10px; }.notification-clear { padding: 6px; border: 0; background: transparent; color: #6e6c7c; font-size: 8px; cursor: pointer; }.notification-clear:hover { color: #e58b97; }.notification-clear:disabled { opacity: .35; cursor: default; }
.notifications-feed { padding: 23px 27px 30px; }.notification-day { margin-bottom: 23px; }.notification-day:last-child { margin-bottom: 0; }.notification-day > h2 { margin: 0 0 8px 4px; color: #6f6d7e; font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.notification-day > div { overflow: hidden; border: 1px solid #ffffff0b; border-radius: 15px; background: #0f1016a1; }
.notification-page-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 86px; padding: 15px 17px; border-bottom: 1px solid #ffffff09; color: inherit; transition: background .17s, transform .17s; }.notification-page-item:last-child { border-bottom: 0; }.notification-page-item:hover { background: #ffffff05; text-decoration: none; }.notification-page-item.unread { background: linear-gradient(90deg, #7c5cff10, transparent); }.notification-page-item.unread::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #8d73ff; box-shadow: 0 0 10px #7c5cff66; }
.notification-page-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #ffffff0d; border-radius: 14px; background: #ffffff05; font-size: 21px; }.notification-page-copy { min-width: 0; }.notification-page-copy small, .notification-page-copy strong, .notification-page-copy time { display: block; }.notification-page-copy small { margin-bottom: 4px; color: #7d798a; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.notification-page-copy strong { color: #c9c5d0; font-size: 11px; line-height: 1.4; }.notification-page-item.unread .notification-page-copy strong { color: #f0edf5; }.notification-page-copy time { margin-top: 5px; color: #5f5e6e; font-size: 7px; font-weight: 600; }.notification-page-state { display: flex; align-items: center; gap: 10px; }.notification-page-state b { padding: 4px 6px; border-radius: 6px; background: #7c5cff18; color: #a894ff; font-size: 6px; letter-spacing: .08em; }.notification-page-state i { color: #5f5d6e; font-style: normal; font-size: 13px; }.notification-page-item:hover .notification-page-state i { color: #b6a8f3; transform: translateX(2px); }
.notifications-empty, .notifications-filter-empty { display: grid; min-height: 380px; place-items: center; align-content: center; text-align: center; }.notifications-empty > span, .notifications-filter-empty > span { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid #ffffff0d; border-radius: 20px; background: #ffffff04; font-size: 29px; }.notifications-empty h2, .notifications-filter-empty h2 { margin: 12px 0 4px; font-size: 17px; }.notifications-empty p, .notifications-filter-empty p { margin: 0; color: #777586; font-size: 9px; }

@media (max-width: 650px) {
    .site-redesign .bell-dropdown { position: fixed; top: 62px; right: 9px; left: 9px; width: auto; max-height: calc(100vh - 72px); }.notif-list { max-height: calc(100vh - 185px); }
    .page-notifications .wrap { padding-inline: 9px; }.notifications-shell { border-radius: 18px; }.notifications-hero { display: block; min-height: 250px; padding: 28px 22px; }.notifications-hero h1 { font-size: 37px; }.notifications-orb { width: 91px; height: 91px; margin: 21px 0 0 auto; }.notifications-orb strong { font-size: 31px; }
    .notifications-toolbar { align-items: stretch; flex-direction: column; padding: 12px; }.notification-filters { display: grid; grid-template-columns: 1fr 1fr; }.notification-actions { justify-content: space-between; }.notifications-feed { padding: 18px 11px 23px; }.notification-page-item { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 13px 11px; }.notification-page-icon { width: 40px; height: 40px; }.notification-page-state { display: none; }.notification-page-copy strong { font-size: 10px; }
}

/* Animated lobby rewards ------------------------------------------------- */
.reward-reveal-dialog { width: min(510px, calc(100vw - 20px)); padding: 0; overflow: visible; border: 1px solid #ffffff18; border-radius: 24px; background: #171821; color: #eeeaf4; box-shadow: 0 40px 110px #000d; }.reward-reveal-dialog::backdrop { background: #05060bd4; backdrop-filter: blur(8px); }.reward-reveal-shell { position: relative; min-height: 550px; padding: 30px 32px 26px; overflow: hidden; border-radius: inherit; text-align: center; background: radial-gradient(circle at 50% 35%, #7c5cff24, transparent 18rem), linear-gradient(155deg, #202130, #13141c 72%); }.reward-reveal-shell::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#ffffff0a 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(circle, #000, transparent 70%); pointer-events: none; }.reward-reveal-shell > * { position: relative; z-index: 1; }.reward-reveal-close { position: absolute; z-index: 6; top: 13px; right: 13px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff06; color: #aaa7b5; font-size: 21px; cursor: pointer; }.reward-reveal-close:hover { color: #fff; }.reward-reveal-kicker { color: #a08cff; font-size: 8px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }.reward-reveal-shell h2 { margin: 7px 0 4px; font-size: 26px; letter-spacing: -.04em; }.reward-reveal-status { min-height: 19px; margin: 13px 0 17px; color: #8b8899; font-size: 10px; }.reward-reveal-done { min-width: 170px; }

.daily-gift-stage { position: relative; display: grid; min-height: 360px; place-items: center; margin-top: 4px; }.gift-rays { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.4); background: repeating-conic-gradient(from 0deg, #ffd16633 0 8deg, transparent 8deg 20deg); transition: opacity .45s, transform .7s; }.daily-gift-box { position: relative; width: 165px; height: 150px; transform-origin: center bottom; }.gift-body { position: absolute; bottom: 0; left: 13px; width: 139px; height: 104px; border: 1px solid #ffffff27; border-radius: 7px 7px 15px 15px; background: linear-gradient(135deg, #8a6cff, #593bd1); box-shadow: 0 24px 35px #08090da3, inset 0 1px #ffffff42; }.gift-body i { position: absolute; top: 0; bottom: 0; left: 54px; width: 31px; background: linear-gradient(90deg, #eabf45, #ffd86b, #d9a934); }.gift-lid { position: absolute; z-index: 3; top: 25px; left: 0; width: 165px; height: 42px; border: 1px solid #ffffff2b; border-radius: 9px; background: linear-gradient(135deg, #9a82ff, #6849e2); box-shadow: 0 8px 13px #090a105e, inset 0 1px #ffffff45; transform-origin: 85% 100%; transition: transform .65s cubic-bezier(.2,.8,.25,1), opacity .4s; }.gift-lid i { position: absolute; top: 0; bottom: 0; left: 66px; width: 32px; background: linear-gradient(90deg, #e2b43e, #ffdc71, #d7a62d); }.gift-bow { position: absolute; z-index: 4; top: -2px; left: 50%; display: grid; width: 58px; height: 43px; place-items: center; transform: translateX(-50%); color: #fff0a7; font-size: 25px; filter: drop-shadow(0 4px 4px #0005); transition: transform .65s, opacity .35s; }.daily-gift-box.is-shaking { animation: giftShake .22s ease-in-out infinite; }.daily-gift-box.is-open .gift-lid { opacity: .2; transform: translate(55px, -90px) rotate(34deg); }.daily-gift-box.is-open .gift-bow { opacity: 0; transform: translate(30px, -75px) rotate(30deg); }.gift-reveal-shell:has(.daily-gift-box.is-open) .gift-rays { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: giftRays 8s linear infinite; }
.gift-prize { position: absolute; z-index: 5; top: 48%; left: 50%; display: grid; place-items: center; opacity: 0; transform: translate(-50%, 20px) scale(.65); transition: opacity .4s, transform .55s cubic-bezier(.2,1.4,.3,1); pointer-events: none; }.gift-prize.is-visible { opacity: 1; transform: translate(-50%, -60px) scale(1); }.gift-prize small { color: #9c90ba; font-size: 7px; font-weight: 900; letter-spacing: .16em; }.gift-prize strong { color: #ffd166; font-size: 48px; line-height: 1.05; text-shadow: 0 0 22px #ffd16665; }.gift-prize span { color: #aaa5b5; font-size: 10px; font-weight: 800; text-transform: uppercase; }
@keyframes giftShake { 0%,100% { transform: rotate(-2deg) translateX(-2px); } 50% { transform: rotate(2deg) translateX(2px); } } @keyframes giftRays { to { rotate: 360deg; } }

.wheel-reveal-shell { min-height: 585px; }.daily-wheel-stage { position: relative; display: grid; min-height: 410px; place-items: center; }.daily-wheel-pointer { position: absolute; z-index: 5; top: 37px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-top: 28px solid #ffd166; border-right: 16px solid transparent; border-left: 16px solid transparent; filter: drop-shadow(0 4px 5px #0008); }.daily-prize-wheel { position: relative; width: 330px; height: 330px; border: 8px solid #272938; border-radius: 50%; background: conic-gradient(#6750d9 0 14.2857%, #e75d86 14.2857% 28.5714%, #3e9fca 28.5714% 42.8571%, #e39b43 42.8571% 57.1428%, #45ad79 57.1428% 71.4285%, #9659d5 71.4285% 85.7142%, #d1af3f 85.7142% 100%); box-shadow: 0 25px 45px #050509b8, 0 0 0 5px #ffffff0b, inset 0 0 0 4px #ffffff16; }.daily-prize-wheel::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#ffffff1a 0 1deg, transparent 1deg 51.43deg); pointer-events: none; }.daily-wheel-label { position: absolute; top: 50%; left: 50%; width: 78px; height: 30px; margin: -15px 0 0 -39px; transform: rotate(var(--label-angle)) translateY(-122px); transform-origin: 50% 50%; color: #fff; font-size: 12px; text-shadow: 0 2px 4px #0008; }.daily-wheel-label b { display: block; transform: rotate(90deg); }.daily-wheel-hub { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 92px; height: 92px; place-items: center; align-content: center; transform: translate(-50%, -50%); border: 5px solid #ffd166; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #333544, #11121a 72%); box-shadow: 0 8px 20px #0008, inset 0 1px #ffffff28; }.daily-wheel-hub span { color: #8d899b; font-size: 7px; font-weight: 900; letter-spacing: .13em; }.daily-wheel-hub strong { max-width: 75px; overflow: hidden; color: #fff; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) { .reward-reveal-shell { min-height: 510px; padding: 26px 14px 20px; }.reward-reveal-shell h2 { font-size: 23px; }.daily-gift-stage { min-height: 325px; }.wheel-reveal-shell { min-height: 530px; }.daily-wheel-stage { min-height: 365px; }.daily-prize-wheel { width: 285px; height: 285px; }.daily-wheel-label { transform: rotate(var(--label-angle)) translateY(-104px); font-size: 10px; }.daily-wheel-pointer { top: 33px; }.daily-wheel-hub { width: 80px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .daily-gift-box.is-shaking, .gift-reveal-shell:has(.daily-gift-box.is-open) .gift-rays { animation: none; } }

/* Brand artwork, readable wheels, and aim-based target games --------------- */
.site-redesign .brand-mark {
    overflow: hidden; width: 40px; height: 40px; flex-basis: 40px; border: 0; border-radius: 12px;
    background: #161720; box-shadow: 0 7px 24px #0008, 0 0 0 1px #ffffff12;
}
.site-redesign .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }

.fortune-wheel-wrap { width: 260px; height: 260px; margin-block: 24px 18px; }
.fortune-wheel-wrap .wheel,
.roulette-wheel {
    --counter-turn: 0deg;
    overflow: hidden;
    border: 7px solid #303242;
    background-color: #171821;
    box-shadow: 0 0 0 3px #0a0b10, 0 0 0 9px #1c1d27, 0 20px 44px #000a, inset 0 0 24px #0007;
}
.fortune-wheel-wrap .wheel::before,
.roulette-wheel::before {
    content: ''; position: absolute; z-index: 2; inset: 20%; border: 1px solid #ffffff10; border-radius: 50%;
    background: radial-gradient(circle, #242631 0 56%, #101117 57% 67%, #d7ad4d 68% 72%, #101117 73% 100%);
    box-shadow: 0 6px 20px #000a, inset 0 1px #ffffff10;
}
.fortune-wheel-wrap .wheel::after,
.roulette-wheel::after {
    content: ''; position: absolute; z-index: 1; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, transparent 0 calc(var(--segment-angle) - 1deg), #ffffff26 calc(var(--segment-angle) - 1deg) var(--segment-angle));
    pointer-events: none;
}
.wheel-pocket { position: absolute; z-index: 3; inset: 0; transform: rotate(var(--label-angle)); pointer-events: none; }
.wheel-pocket .wheel-label {
    position: absolute; top: 9px; left: 50%; width: 34px; transform: translateX(-50%) rotate(calc(var(--label-counter) + var(--counter-turn)));
    transform-origin: center; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; text-align: center;
    text-shadow: 0 1px 3px #000, 0 0 5px #000; transition: transform 3.2s cubic-bezier(.15,.8,.15,1);
}
.wheel-center,
.roulette-result-badge {
    position: absolute; z-index: 7; top: 50%; left: 50%; display: flex; width: 78px; height: 78px; align-items: center; justify-content: center;
    flex-direction: column; transform: translate(-50%, -50%); border: 3px solid #dcb64f; border-radius: 50%;
    background: linear-gradient(145deg, #242631, #121319); color: #fff; box-shadow: 0 8px 20px #000b, inset 0 1px #ffffff1a;
}
.wheel-center small, .roulette-result-badge small { color: #898898; font-size: 7px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.wheel-center strong, .roulette-result-badge strong { margin-top: 2px; font-size: 22px; font-variant-numeric: tabular-nums; }
.wheel-pointer, .roulette-wheel-pointer {
    z-index: 10; top: -13px; width: 0; height: 0; border-top: 24px solid #ffd166; border-right: 12px solid transparent; border-left: 12px solid transparent;
    filter: drop-shadow(0 3px 3px #000b); transform: translateX(-50%);
}
.wheel-pointer::after, .roulette-wheel-pointer::after { content: ''; position: absolute; top: -23px; left: -3px; width: 6px; height: 13px; border-radius: 4px; background: #fff1b8; }

.roulette-wheel-wrap { width: 370px; height: 370px; margin-block: 25px 20px; }
.roulette-wheel { --segment-count: 37; }
.roulette-wheel::before { inset: 24%; }
.roulette-wheel .wheel-pocket .wheel-label { top: 12px; width: 22px; font-size: 8.5px; transition-duration: 3.4s; }
.roulette-result-badge { width: 88px; height: 88px; opacity: 1; transition: background .25s, transform .25s; }
.roulette-result-badge.show { animation: resultPulse .45s ease-out; }
@keyframes resultPulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }

.game-archery .target-board-wrap { width: 280px; height: 280px; margin: 22px auto 12px; }
.game-darts .target-board-wrap { width: 320px; height: 320px; margin: 22px auto 12px; }
.game-darts .target-board,
.game-archery .target-board {
    position: absolute; z-index: 2; inset: 10px; width: auto; height: auto; border: 9px solid #24252d;
    box-shadow: 0 0 0 3px #0a0b10, 0 18px 38px #000b, inset 0 0 12px #0008;
}
.game-darts .darts-board {
    background:
        radial-gradient(circle, #d9b258 0 3.5%, #b52e45 3.7% 7.5%, transparent 7.7%),
        radial-gradient(circle, transparent 0 42%, #b52e45 42.5% 48%, transparent 48.5% 70%, #18815f 70.5% 76%, transparent 76.5%),
        repeating-conic-gradient(from -9deg, #e6ddcb 0 9deg, #171820 9deg 18deg);
}
.board-wire { position: absolute; z-index: 2; top: 50%; left: 50%; width: 50%; height: 1px; transform-origin: left center; background: #ffffff39; box-shadow: 0 0 1px #000; }
.wire-one { transform: rotate(0deg); }.wire-two { transform: rotate(45deg); }.wire-three { transform: rotate(90deg); }.wire-four { transform: rotate(135deg); }
.zone-result-banner { position: absolute; left: 50%; top: 50%; z-index: 8; padding: 9px 20px; border-radius: 12px; font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.75); transition: opacity .25s ease, transform .25s ease; }
.zone-result-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zone-result-banner.win { background: linear-gradient(135deg, #ffd166, #ff9f5c); color: #3a2405; box-shadow: 0 10px 26px #ffd16655; }
.zone-result-banner.lose { background: linear-gradient(135deg, #94a3b8, #64748b); color: #0b1220; box-shadow: 0 10px 26px #94a3b855; }

.game-archery .target-board-wrap { overflow: hidden; border: 1px solid #ffffff10; border-radius: 22px; background: linear-gradient(#182b37, #294654 63%, #233d27 64%); box-shadow: inset 0 1px #ffffff0b; }
.archery-scene { position: absolute; inset: 0; overflow: hidden; }
.archery-ground { position: absolute; right: -10%; bottom: -17%; left: -10%; height: 47%; border-radius: 50% 50% 0 0; background: linear-gradient(#325c35, #17291a); }
.archery-cloud { position: absolute; width: 44px; height: 12px; border-radius: 999px; background: #ffffff1b; filter: blur(.2px); }
.archery-cloud::before, .archery-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.archery-cloud::before { left: 8px; width: 20px; height: 20px; }.archery-cloud::after { left: 23px; width: 15px; height: 16px; }
.cloud-one { top: 32px; left: 24px; }.cloud-two { top: 60px; right: 18px; transform: scale(.7); }
.game-archery .target-board.archery-board {
    inset: 28px; border: 6px solid #e6dfd0;
    background: radial-gradient(circle, #ffe05b 0 12%, #e84f55 12.5% 27%, #58a8df 27.5% 43%, #252936 43.5% 59%, #e9e7df 59.5% 76%, #b5ab96 76.5% 100%);
    box-shadow: 0 0 0 5px #6f4c2e, 0 17px 30px #07100a99, inset 0 0 9px #0004;
}
.game-archery .target-board.archery-board::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -55px; width: 9px; height: 64px; transform: translateX(-50%); background: #745034; box-shadow: -45px 45px 0 -2px #745034, 45px 45px 0 -2px #745034; }

.aim-reticle {
    position: absolute; z-index: 5; top: 50%; left: 50%; width: 38px; height: 38px; opacity: .65; transform: translate(-50%, -50%); border: 1px solid #ffffffd6; border-radius: 50%;
    box-shadow: 0 0 0 4px #0003, 0 0 12px #ffffff65; pointer-events: none;
}
.aim-reticle::before, .aim-reticle::after { content: ''; position: absolute; top: 50%; left: 50%; background: #fff; box-shadow: 0 0 3px #000; }
.aim-reticle::before { width: 54px; height: 1px; transform: translate(-50%, -50%); }.aim-reticle::after { width: 1px; height: 54px; transform: translate(-50%, -50%); }
.aim-reticle span { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); border-radius: 50%; background: #ff5c5c; }
.aim-reticle.aiming { opacity: 1; box-shadow: 0 0 0 4px #0003, 0 0 17px color-mix(in srgb, var(--game-accent) 75%, transparent); }
.aim-reticle.locked { width: 27px; height: 27px; opacity: .9; transition: left .42s ease, top .42s ease, width .2s, height .2s; }
.archery-reticle { border-style: dashed; border-color: #ffe9a8; }
.aim-status { display: inline-flex; min-height: 28px; align-items: center; gap: 7px; margin: 0 auto 8px; padding: 6px 11px; border: 1px solid #ffffff0e; border-radius: 999px; background: #0b0c126e; color: #8f8e9f; font-size: 9px; font-weight: 750; text-transform: capitalize; }
.aim-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--game-accent); box-shadow: 0 0 8px var(--game-accent); }
.game-darts .projectile, .game-archery .projectile { z-index: 7; font-size: 27px; text-shadow: 0 3px 5px #000; }
.dart-projectile { color: #f0e2bd; transform: translate(-50%, -50%) rotate(-35deg); }
.arrow-projectile { color: #efe2b7; font-size: 35px !important; transform: translate(-50%, -50%) rotate(-38deg); }

@media (max-width: 430px) {
    .fortune-wheel-wrap { width: 235px; height: 235px; }
    .roulette-wheel-wrap { width: 310px; height: 310px; }
    .roulette-wheel .wheel-pocket .wheel-label { top: 9px; width: 18px; font-size: 7.5px; }
    .game-archery .target-board-wrap { width: 250px; height: 250px; }
    .game-darts .target-board-wrap { width: 270px; height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-pocket .wheel-label { transition: none; }
    .aim-reticle { transition: none !important; }
}

/* Progression, stacked inventory and scratch tickets --------------------- */
.frame-arcade { border: 2px solid #d64cff !important; box-shadow: 0 0 0 2px #4ce6ff70, 0 0 16px #d64cffaa !important; animation: arcadeFrame 2s ease-in-out infinite alternate; }
.frame-void { border: 2px solid #a77bff !important; box-shadow: 0 0 0 2px #090910, 0 0 20px #7c5cffcc, inset 0 0 10px #050508 !important; animation: voidFrame 4s linear infinite; }
.frame-lightning { border: 2px solid #ffe066 !important; box-shadow: 0 0 0 2px #1a1a0f, 0 0 18px #ffe066cc !important; animation: lightningFrame 2.4s ease-in-out infinite; }
@keyframes arcadeFrame { to { box-shadow: 0 0 0 2px #ff4c8870, 0 0 22px #4ce6ffcc; } }
@keyframes voidFrame { 50% { filter: hue-rotate(80deg); transform: rotate(2deg) scale(1.025); } }
@keyframes lightningFrame { 0%, 92%, 100% { filter: brightness(1); } 94% { filter: brightness(1.8); } 96% { filter: brightness(1); } 98% { filter: brightness(1.6); } }
.progression-kicker { display: block; margin-bottom: 7px; color: #9d8bfa; font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.progression-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 285px; align-items: center; gap: 35px; margin-bottom: 18px; padding: 42px 48px; overflow: hidden; border: 1px solid #ffffff12; border-radius: 24px; background: radial-gradient(circle at 80% 30%, #7c5cff3b, transparent 19rem), linear-gradient(145deg, #25213a, #161720 72%); box-shadow: 0 30px 70px #05050955; }
.progression-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to right, transparent 20%, #000); }
.progression-hero-copy { position: relative; z-index: 1; max-width: 650px; }.progression-hero h1 { margin: 0; font-size: clamp(42px, 7vw, 70px); letter-spacing: -.07em; }.progression-hero p { max-width: 540px; margin: 9px 0 25px; color: #9490a3; font-size: 12px; line-height: 1.6; }
.progression-xp-bar { height: 13px; overflow: hidden; border: 1px solid #ffffff0c; border-radius: 999px; background: #090a10; box-shadow: inset 0 2px 7px #0008; }.progression-xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f4cf1, #a47aff, #5cc8ff); box-shadow: 0 0 15px #8a64ff99; transition: width .5s; }
.progression-xp-copy { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; color: #777587; font-size: 9px; }.progression-xp-copy strong { color: #aaa5b6; }
.progression-level-orb { position: relative; z-index: 1; display: grid; width: 170px; height: 170px; place-items: center; align-content: center; border: 1px solid #ffffff1c; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffffff17, transparent 18%), linear-gradient(145deg, #312956, #11121a); box-shadow: 0 0 0 12px #7c5cff0a, 0 24px 50px #050509aa, inset 0 1px #ffffff20; }.progression-level-orb span { color: #9e92c7; font-size: 8px; font-weight: 900; letter-spacing: .2em; }.progression-level-orb strong { margin: -2px 0; font-size: 63px; line-height: 1; letter-spacing: -.08em; }.progression-level-orb small { color: #8d88a1; font-size: 8px; }
.reward-road-card { padding: 27px; border: 1px solid #ffffff10; border-radius: 22px; background: linear-gradient(145deg, #191a24, #12131a); }.reward-road-heading, .inventory-section-heading, .scratch-shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.reward-road-heading h2, .inventory-section-heading h2, .scratch-shop-heading h2 { margin: 0; font-size: 25px; }.reward-road-heading p, .inventory-section-heading > strong { margin: 0; color: #777586; font-size: 9px; }
.reward-road { position: relative; display: flex; flex-direction: column; gap: 8px; }.reward-road::before { content: ''; position: absolute; top: 32px; bottom: 32px; left: 31px; width: 2px; background: linear-gradient(#7c5cff, #7c5cff22); }
.road-node { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 75px; align-items: center; gap: 15px; padding: 9px 14px 9px 0; border: 1px solid #ffffff09; border-radius: 15px; background: #ffffff03; transition: border-color .2s, transform .2s, background .2s; }.road-node.is-ready { border-color: #7c5cff4a; background: linear-gradient(90deg, #7c5cff14, #ffffff03); box-shadow: 0 8px 24px #7c5cff0c; }.road-node.is-ready:hover { transform: translateX(3px); }.road-node.is-claimed { opacity: .66; }
.road-level { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; align-content: center; justify-self: center; border: 2px solid #333343; border-radius: 50%; background: #13141c; box-shadow: 0 0 0 5px #171820; }.road-level span { color: #747282; font-size: 6px; font-weight: 900; letter-spacing: .1em; }.road-level strong { margin-top: -1px; font-size: 16px; }.is-ready .road-level { border-color: #9278ff; box-shadow: 0 0 0 5px #221d3b, 0 0 15px #7c5cff5c; }.is-claimed .road-level { border-color: #4ade8060; color: #75d794; }
.road-reward-copy small { color: #777585; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.road-reward-copy h3 { margin: 5px 0 0; color: #d4d0dc; font-size: 13px; }.is-ready .road-reward-copy small { color: #ab9cf5; }.road-state { min-width: 72px; color: #747282; font-size: 9px; font-weight: 850; text-align: center; }.is-claimed .road-state { color: #6dbb85; }

.scratch-shop-section { margin-bottom: 16px; padding: 28px; border: 1px solid #ffffff10; border-radius: 21px; background: radial-gradient(circle at 95% 0, #ffd16614, transparent 20rem), linear-gradient(145deg, #1d1e29, #15161e); }.scratch-shop-heading { margin-bottom: 7px; }.scratch-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.scratch-shop-ticket { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; min-height: 215px; padding: 21px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ticket-color) 32%, #ffffff0c); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--ticket-color) 12%, #1a1b24), #101119); box-shadow: inset 0 1px #ffffff09; }.scratch-shop-ticket::after { content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 100%; background: var(--ticket-color); opacity: .7; }.ticket-cut { position: absolute; z-index: 2; top: 62%; width: 17px; height: 17px; border-radius: 50%; background: #14151d; }.ticket-cut.left { left: -9px; }.ticket-cut.right { right: -9px; }.scratch-ticket-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #ffffff11; border-radius: 14px; background: #08090e6e; font-size: 25px; }.scratch-ticket-label { color: var(--ticket-color); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.scratch-shop-ticket h3 { margin: 3px 0; font-size: 17px; }.scratch-shop-ticket p { margin: 0; color: #777586; font-size: 9px; line-height: 1.4; }.scratch-ticket-price { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px dashed #ffffff13; }.scratch-ticket-price strong { color: var(--ticket-color); font-size: 17px; }.scratch-ticket-price small { color: #777586; font-size: 8px; }.scratch-shop-ticket .btn { grid-column: 1 / -1; }

.inventory-section { padding: 25px !important; }.inventory-stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.inventory-stack-card { position: relative; margin: 0 !important; padding: 20px 14px !important; text-align: center; border-color: color-mix(in srgb, var(--rarity-color) 40%, transparent) !important; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--rarity-color) 11%, transparent), transparent 9rem), #181923 !important; }.inventory-quantity { position: absolute; top: 11px; right: 11px; display: grid; min-width: 29px; height: 25px; place-items: center; padding: 0 7px; border: 1px solid #ffffff10; border-radius: 9px; background: #0c0d13; color: #d5d1dd; font-size: 10px; font-weight: 900; }.inventory-listed-note { margin-top: 7px; color: #9d8bfa; font-size: 8px; }.inventory-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }.inventory-card-actions .btn { padding-inline: 6px; font-size: 9px; }
.ticket-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.wallet-ticket { position: relative; padding: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ticket-color) 38%, #ffffff0c); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--ticket-color) 11%, #1b1c25), #101117); }.wallet-ticket::after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--ticket-color); }.wallet-ticket-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }.wallet-ticket-top > span { font-size: 27px; }.wallet-ticket-top small { color: var(--ticket-color); font-size: 7px; font-weight: 900; letter-spacing: .12em; }.wallet-ticket-top h3 { margin: 2px 0 0; font-size: 14px; }.wallet-ticket-top > strong { color: #696878; font-family: monospace; font-size: 8px; }.wallet-ticket-prize { display: grid; min-height: 82px; place-items: center; align-content: center; margin: 15px 0 12px; padding: 10px 0; border: 1px dashed #ffffff1c; border-radius: 11px; background: #08090f7d; }.wallet-ticket-prize span { color: #727181; font-size: 7px; letter-spacing: .15em; }.wallet-ticket-prize strong { margin-top: 4px; color: var(--ticket-color); font-size: 23px; }.mini-scratch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }.mini-scratch-grid span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #ffffff08; font-size: 12px; }.mini-scratch-grid span.match { background: linear-gradient(135deg, #ffd16644, #ff9f5c33); }.mini-scratch-grid span.bonus { background: linear-gradient(135deg, #7c5cff55, #a77bff33); }.mini-scratch-grid span.near-miss { background: #ff9f5c22; outline: 1px dashed #ff9f5c66; }.wallet-ticket-expiry { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #6e6c7d; font-size: 8px; }.wallet-ticket-expiry time { color: #9995a5; }.wallet-ticket .btn { width: 100%; }.wallet-ticket.status-expired { filter: grayscale(.8); opacity: .65; }.ticket-empty { display: grid; min-height: 210px; place-items: center; align-content: center; text-align: center; }.ticket-empty > span { font-size: 38px; }.ticket-empty h3 { margin: 9px 0 3px; }.ticket-empty p { margin: 0; color: #777586; font-size: 10px; }
.scratch-dialog { width: min(620px, calc(100vw - 22px)); padding: 0; border: 1px solid #ffffff18; border-radius: 22px; background: #171821; color: #eeeaf4; box-shadow: 0 35px 100px #000c; }.scratch-dialog::backdrop { background: #06060bc9; backdrop-filter: blur(7px); }.scratch-dialog-shell { position: relative; padding: 32px; text-align: center; }.scratch-dialog-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff05; color: #aaa7b5; font-size: 20px; cursor: pointer; }.scratch-dialog-kicker { color: #9d8bfa; font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.scratch-dialog h2 { margin: 6px 0 20px; }.scratch-canvas-wrap { position: relative; overflow: hidden; border: 1px solid #ffffff13; border-radius: 16px; background: radial-gradient(circle, #7c5cff20, #090a10); aspect-ratio: 480 / 400; }.scratch-reveal { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; padding: 12px 0; }.scratch-reveal small { color: #8d899a; font-size: 9px; letter-spacing: .15em; }.scratch-reveal strong { margin-top: 10px; color: #ffd166; font-size: clamp(18px, 3.6vw, 26px); }.scratch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, 1.3vw, 10px); margin-top: 10px; }.scratch-cell { display: grid; place-items: center; width: clamp(30px, 7.5vw, 44px); height: clamp(30px, 7.5vw, 44px); border: 1px solid #ffffff16; border-radius: 9px; background: #0a0b1180; font-size: clamp(16px, 3.8vw, 22px); }.scratch-cell.match { border-color: #ffd16688; background: linear-gradient(135deg, #ffd16633, #ff9f5c22); box-shadow: 0 0 16px #ffd16655; }.scratch-cell.bonus { border-color: #a77bff88; background: linear-gradient(135deg, #7c5cff44, #a77bff22); box-shadow: 0 0 16px #7c5cff55; }.scratch-cell.near-miss { border-color: #ff9f5c55; background: #ff9f5c14; }.scratch-canvas-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }.scratch-dialog p { color: #848192; font-size: 10px; }

@media (max-width: 900px) { .scratch-shop-grid, .ticket-wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); }.inventory-stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) {
    .progression-hero { display: block; min-height: 0; padding: 28px 22px; }.progression-level-orb { width: 105px; height: 105px; margin: 25px auto 0; }.progression-level-orb strong { font-size: 39px; }.progression-hero h1 { font-size: 45px; }.progression-xp-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
    .reward-road-card, .scratch-shop-section, .inventory-section { padding: 19px 14px !important; }.reward-road-heading, .inventory-section-heading, .scratch-shop-heading { align-items: flex-start; flex-direction: column; gap: 9px; }.road-node { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding-right: 9px; }.reward-road::before { left: 25px; }.road-level { width: 42px; height: 42px; }.road-reward-copy h3 { font-size: 10px; }.road-node .btn { padding: 7px 9px; font-size: 9px; }.road-state { min-width: 45px; font-size: 8px; }
    .scratch-shop-grid, .ticket-wallet, .inventory-stack-grid { grid-template-columns: 1fr; }.scratch-shop-ticket { min-height: 205px; }.scratch-dialog-shell { padding: 28px 13px 19px; }.inventory-card-actions { grid-template-columns: 1fr; }
}

/* Scheduled announcements ------------------------------------------------- */
.site-announcement {
    --announcement-color: #8f78ff;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
    margin-bottom: 16px; padding: 11px 12px 11px 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--announcement-color) 42%, transparent);
    border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--announcement-color) 15%, #171821), #171821);
    color: #ded9ee; font-size: 12px; font-weight: 700; transition: opacity .18s, transform .18s;
}
.site-announcement[hidden] { display: none; }
.site-announcement.is-dismissing { opacity: 0; transform: translateY(-5px); }
.announcement-event { --announcement-color: #c084fc; }.announcement-warning { --announcement-color: #ff9f5c; }.announcement-success { --announcement-color: #4ade80; }
.announcement-icon { font-size: 16px; }.announcement-copy { line-height: 1.4; }.announcement-until { color: #858395; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.announcement-dismiss { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #ffffff0d; border-radius: 8px; background: #ffffff05; color: #8d8b9b; font-size: 17px; cursor: pointer; }
.announcement-dismiss:hover { border-color: #ffffff24; color: #fff; }
.announcement-admin-form { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(145px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 10px; align-items: end; }
.announcement-admin-form .field { margin: 0; }.site-redesign input[type=datetime-local] { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #ffffff13; border-radius: 10px; background: #0c0d14a6; color: var(--text); color-scheme: dark; }
.admin-game-maintenance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.admin-game-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #ffffff05; }
.admin-game-row.is-disabled { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.admin-game-icon { font-size: 22px; flex-shrink: 0; }
.admin-game-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-game-row form { flex-shrink: 0; margin: 0; }

/* Balloon Pop ------------------------------------------------------------- */
.path-game-card { position: relative; }
.path-playfield { position: relative; z-index: 2; }
.balloon-game-card { overflow: hidden !important; background: linear-gradient(160deg, #171f33, #15161f 72%) !important; }
.balloon-sky { position: absolute !important; z-index: 0 !important; inset: 110px 0 auto; height: 360px; overflow: hidden; background: linear-gradient(#172941, #223e55 68%, #263b2c); opacity: .8; }
.sky-cloud { position: absolute; width: 70px; height: 18px; border-radius: 999px; background: #ffffff0e; }
.sky-cloud::before, .sky-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.sky-cloud::before { left: 12px; width: 32px; height: 32px; }.sky-cloud::after { left: 36px; width: 25px; height: 25px; }
.cloud-a { top: 38px; left: 8%; }.cloud-b { top: 82px; right: 9%; transform: scale(.72); }
.balloon-hill { position: absolute; bottom: -75px; width: 65%; height: 155px; border-radius: 50%; background: #25472e; }.hill-a { left: -12%; }.hill-b { right: -15%; bottom: -92px; background: #1d3825; }
.balloon-field { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px 11px; min-height: 310px; align-content: center; padding: 18px 22px 8px; border: 1px solid #ffffff0d; border-radius: 20px; background: #07101a38; }
.path-tile { position: relative; border: 0; color: #fff; cursor: pointer; }
.path-tile-balloon { height: 53px; background: transparent; animation: balloonFloat 2.8s ease-in-out infinite; animation-delay: var(--float-delay); }
.balloon-body { position: absolute; top: 0; left: 50%; width: 34px; height: 41px; transform: translateX(-50%); border-radius: 52% 52% 48% 48%; background: radial-gradient(circle at 32% 25%, #ffffff9c 0 7%, transparent 8%), hsl(var(--balloon-hue) 72% 57%); box-shadow: inset -6px -8px 12px #0002, 0 7px 14px #0004; transition: transform .18s, opacity .18s; }
.balloon-knot { position: absolute; z-index: 2; top: 38px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 5px solid transparent; border-bottom: 7px solid hsl(var(--balloon-hue) 65% 42%); border-left: 5px solid transparent; }
.balloon-string { position: absolute; top: 45px; left: 50%; width: 1px; height: 16px; background: #ffffff55; }
.path-tile-balloon:hover:not(:disabled) .balloon-body { transform: translateX(-50%) scale(1.12); filter: brightness(1.12); }
.path-tile-balloon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.path-tile-balloon.revealed, .path-tile-balloon.mine-hit { animation: none; }
.path-tile-balloon.revealed .balloon-body, .path-tile-balloon.mine-hit .balloon-body { opacity: 0; transform: translateX(-50%) scale(1.7); }
.balloon-pop-ring, .balloon-burst { position: absolute; inset: 6px 0 auto; color: #fff1a6; font-size: 10px; font-weight: 950; letter-spacing: .08em; text-shadow: 0 2px 4px #000; animation: balloonPop .4s ease-out; }
.balloon-burst { top: 0; font-size: 25px; }.balloon-spark { position: absolute; top: 25px; left: 56%; color: #ffd166; animation: balloonSpark .7s ease-out forwards; }
@keyframes balloonFloat { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes balloonPop { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.25); } }
@keyframes balloonSpark { to { opacity: 0; transform: translate(14px, -25px) rotate(90deg); } }

/* Chicken Run (cr-* prefix) ------------------------------------------------
   Second full rewrite of the presentation layer -- backend math/session shape is untouched
   (still chicken_start/cross/cashout/state + chicken_multiplier() in game_api.php), but every
   class name, all the markup, and all the animation work here is new: cars are drawn from CSS
   shapes (body + windshield + wheels + headlight) instead of a car emoji, the hen has actual
   scissoring legs under a fixed body so it reads as running rather than sliding, and each
   difficulty gets its own sky (sun/moon disc, stars, storm flash) instead of just a road-color
   swap. See games.js's "Chicken Run" block for the JS side. */
.cr-card { overflow: hidden !important; background: linear-gradient(155deg, #16211c, #14151d 70%) !important; }

.cr-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #ffffff08; }
.cr-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; font-size: 12px; cursor: pointer; transition: background .15s, color .15s; }
.cr-tab-icon { font-size: 15px; }
.cr-tab:hover { color: var(--text); }
.cr-tab[aria-selected="true"] { background: var(--gold); color: #1a1406; }
.cr-tab-meta { margin-top: 6px; font-size: 11px; text-align: center; color: var(--muted); }

/* HUD reads as two small roadside signs instead of plain label/value pairs. */
.cr-hud { display: none; align-items: stretch; gap: 8px; margin: 10px 0 6px; }
.cr-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 68px; padding: 5px 10px; border-radius: 8px; border: 2px solid #e8e4d2; background: linear-gradient(155deg, #2f7a4a, #1f5735); box-shadow: 0 3px 0 #0004, inset 0 1px #ffffff22; }
.cr-sign-gold { border-color: #3a2c06; background: linear-gradient(155deg, #ffd166, #d9962f); }
.cr-sign-label { font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: #eaf3e9; }
.cr-sign-gold .cr-sign-label { color: #3a2c06; }
.cr-sign-value { font-size: 15px; font-weight: 900; color: #fff; }
.cr-sign-gold .cr-sign-value { color: #241a02; }
.cr-progress-track { flex: 1; align-self: center; height: 8px; overflow: hidden; border-radius: 999px; background: #ffffff10; }
.cr-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8ebd6e, #dce8ae); transition: width .35s ease; }

.cr-scene { position: relative; z-index: 2; min-height: 250px; overflow: hidden; border: 1px solid #ffffff0e; border-radius: 21px; box-shadow: inset 0 -45px 70px #07110a99; }

/* Sky: gradient + celestial disc + a star/storm layer, swapped per difficulty. */
.cr-sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(#8fcbe8, #cdeab8 88%, #17251b 89%); transition: background .4s ease; }
.cr-sky.diff-easy { background: linear-gradient(#8fcbe8, #cdeab8 88%, #1d3a22 89%); }
.cr-sky.diff-normal { background: linear-gradient(#e79a5c, #7a5a7a 88%, #241f2e 89%); }
.cr-sky.diff-hard { background: linear-gradient(#2e1f3d, #5c3b3b 88%, #180f1c 89%); }
.cr-sky.diff-hardcore { background: linear-gradient(#05060c, #141a2c 88%, #05060c 89%); }
.cr-sky-body { position: absolute; top: 14px; right: 15%; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7d6, #ffd166); box-shadow: 0 0 26px 6px #ffd16666; }
.cr-sky.diff-normal .cr-sky-body { background: radial-gradient(circle at 35% 30%, #fff3e0, #ff9f5c); box-shadow: 0 0 26px 6px #ff9f5c55; }
.cr-sky.diff-hard .cr-sky-body, .cr-sky.diff-hardcore .cr-sky-body { width: 26px; height: 26px; background: radial-gradient(circle at 35% 30%, #f4f2ff, #b9b6d6); box-shadow: 0 0 22px 5px #b9b6d655; }
.cr-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; background-image: radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 24%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 25% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 32%, #fff, transparent); }
.cr-sky.diff-hard .cr-stars, .cr-sky.diff-hardcore .cr-stars { opacity: .8; }
.cr-sky.diff-hardcore::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #cfe8ff; opacity: 0; pointer-events: none; animation: crLightning 6.5s ease-in-out infinite; }
.cr-treeline { position: absolute; inset: auto 0 11% 0; height: 22px; opacity: .5; background: radial-gradient(ellipse at 8% 100%, #2c4a2f 0 8px, transparent 9px), radial-gradient(ellipse at 24% 100%, #2c4a2f 0 10px, transparent 11px), radial-gradient(ellipse at 42% 100%, #2c4a2f 0 7px, transparent 8px), radial-gradient(ellipse at 61% 100%, #2c4a2f 0 9px, transparent 10px), radial-gradient(ellipse at 79% 100%, #2c4a2f 0 8px, transparent 9px), radial-gradient(ellipse at 95% 100%, #2c4a2f 0 10px, transparent 11px); }

.cr-ambient { position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; overflow: hidden; opacity: .35; pointer-events: none; }
.cr-ambient .cr-car { position: absolute; transform: scale(.7); animation: crAmbientDrive linear infinite; filter: blur(.4px); }

/* Sidewalk curb the hen starts from, fixed to the left of the scrollable lane strip. */
.cr-curb { position: absolute; z-index: 3; top: 10px; bottom: 10px; left: 10px; width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding-bottom: 9px; border-radius: 16px; background: repeating-linear-gradient(0deg, #d8d4c4 0 6px, #c7c3b2 6px 7px); box-shadow: inset 0 3px 8px #0004, 0 4px 10px #0006; }
.cr-curb span { font-size: 22px; filter: drop-shadow(0 4px 4px #0006); }
.cr-curb small { font-size: 7px; font-weight: 900; letter-spacing: .1em; color: #4a4736; }

.cr-road { position: relative; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 80px; gap: 0; overflow-x: auto; min-height: 210px; align-items: stretch; margin: 0; padding: 34px 12px 15px 76px; scroll-snap-type: x proximity; scrollbar-color: #809b653d transparent; }
.cr-lane { position: relative; min-height: 165px; background: repeating-linear-gradient(180deg, #33343f 0 4px, #ffffff33 4px 6px, #33343f 6px 34px), linear-gradient(180deg, #2a2b38, #23253200); background-size: 100% 100%, 100% 100%; border-right: 1px solid #00000030; transition: filter .2s, opacity .2s; }
.cr-lane:last-child { border-right: 0; }
.cr-lane.lane-approaching { overflow: visible; z-index: 4; }
.cr-sign-chip { position: absolute; z-index: 3; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; min-width: 46px; padding: 5px 4px; place-items: center; border-radius: 8px; border: 2px solid #e8e4d2; background: linear-gradient(155deg, #3a3d52, #292b3a); color: #cfd3e6; font-size: 11px; font-weight: 800; box-shadow: 0 3px 0 #0004; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.cr-lane-result { position: absolute; z-index: 3; top: 62%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; filter: drop-shadow(0 7px 6px #0008); }
.cr-lane.lane-next .cr-sign-chip { border-color: var(--gold); color: #1a1406; background: linear-gradient(155deg, #ffe28a, var(--gold)); animation: crChipPulse 1.2s ease-in-out infinite; }
.cr-lane.lane-safe { filter: saturate(.7) brightness(.92); }
.cr-lane.lane-safe .cr-sign-chip { border-color: #8ebd6e; color: #cdeab0; background: linear-gradient(155deg, #3c5a37, #263923); }
.cr-lane.current-crossing { box-shadow: inset 0 0 0 2px #d9e9a66b; }
.cr-lane.lane-crash { animation: crLaneCrash .42s ease-out; }
.cr-lane.lane-crash .cr-sign-chip { border-color: #ff6b6b; color: #ffd3d3; background: linear-gradient(155deg, #6b2f32, #401a1c); }
.cr-lane.lane-crash-disabled { opacity: .5; }

/* CSS-drawn car: rounded body + windshield stripe + two wheels + a headlight dot. No emoji. */
.cr-car { position: absolute; top: 58%; left: -46px; z-index: 7; width: 40px; height: 20px; transform: translateY(-50%); border-radius: 7px 10px 8px 8px; pointer-events: none; }
.cr-car-lane { animation: crLaneCarDrive .42s linear forwards; }
.cr-car::before { content: ''; position: absolute; inset: 3px 10px auto 6px; height: 7px; border-radius: 4px; background: linear-gradient(180deg, #cfe9ff, #9fc4e0); opacity: .85; }
.cr-car::after { content: ''; position: absolute; left: -2px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 6px 2px #fff6c9aa; }
.cr-car-wheel { position: absolute; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #1a1a20; box-shadow: inset 0 0 0 1.5px #45454f; }
.cr-car-wheel.a { left: 6px; }
.cr-car-wheel.b { right: 6px; }
.cr-car.hue-normal { background: linear-gradient(180deg, #e8543f, #b8321f); }
.cr-car.hue-hard { background: linear-gradient(180deg, #7b5cff, #4c33b0); }
.cr-car.hue-hardcore { background: linear-gradient(180deg, #ffd166, #c9922b); }
.cr-car.hue-easy { background: linear-gradient(180deg, #4fb8e8, #2c7fac); }
.cr-car.cr-car-crash { animation: crCarImpact .42s ease-out forwards; }
@keyframes crCarImpact { from { left: -46px; transform: translateY(-50%) rotate(0deg); } to { left: 44%; transform: translateY(-50%) rotate(-8deg); } }

/* The hen: fixed emoji body, but two independent "leg" bars scissor beneath it while running,
   instead of the whole sprite just sliding/bobbing -- reads as an actual running gait. */
.cr-hen { position: absolute; z-index: 6; top: 58%; left: -34px; width: 34px; height: 34px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: left .48s cubic-bezier(.34, 1.56, .64, 1); }
.cr-hen.is-live { opacity: 1; }
.cr-hen-body { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; filter: drop-shadow(0 7px 6px #0009); transform-origin: 50% 80%; }
.cr-hen-leg { position: absolute; bottom: -2px; width: 3px; height: 9px; border-radius: 2px; background: #d9962f; transform-origin: top center; }
.cr-hen-leg.a { left: 12px; }
.cr-hen-leg.b { right: 12px; }
.cr-hen.is-live .cr-hen-leg.a { animation: crLegScissor .3s ease-in-out infinite; }
.cr-hen.is-live .cr-hen-leg.b { animation: crLegScissor .3s ease-in-out infinite reverse; }
.cr-hen.is-hopping .cr-hen-body { animation: crHenHop .48s ease; }
.cr-hen.is-hopping .cr-hen-leg { animation: none; transform: rotate(0deg); }
.cr-hen.is-crashed .cr-hen-body { animation: crHenCrash .6s ease forwards; }
.cr-hen.is-crashed .cr-hen-leg { animation: none; opacity: 0; }
.cr-hen-dust { position: absolute; bottom: -4px; left: 50%; width: 14px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #00000022; opacity: 0; }
.cr-hen.is-live .cr-hen-dust { animation: crDustPulse .3s ease-in-out infinite; }

.cr-history { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 18px; margin-top: 4px; }
.cr-history-chip { font-size: 13px; opacity: .85; }

.cr-bet-chips { display: flex; gap: 6px; margin-top: 6px; }
.cr-bet-chips button { flex: 1; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff05; color: var(--text); font-weight: 700; font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.cr-bet-chips button:hover { border-color: #d4e29d66; background: #ffffff0c; }

@keyframes crLaneCarDrive { from { left: -46px; } to { left: 112%; } }
@keyframes crAmbientDrive { from { left: -10%; } to { left: 110%; } }
@keyframes crLegScissor { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes crDustPulse { 0%, 100% { opacity: 0; transform: translateX(-50%) scale(.7); } 50% { opacity: .5; transform: translateX(-50%) scale(1); } }
@keyframes crHenHop { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-26px) rotate(10deg); } }
@keyframes crHenCrash { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 100% { transform: rotate(120deg) scale(.75) translateY(6px); opacity: .65; } }
@keyframes crLaneCrash { 35% { transform: translateX(-7px); } 70% { transform: translateX(7px); } }
@keyframes crChipPulse { 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes crLightning { 0%, 92%, 100% { opacity: 0; } 93% { opacity: .5; } 94% { opacity: 0; } 95% { opacity: .35; } 96% { opacity: 0; } }

/* Treasure vault ---------------------------------------------------------- */
.treasure-game-card { overflow: hidden !important; background: radial-gradient(circle at 50% 26%, #70511820, transparent 24rem), linear-gradient(155deg, #201d1a, #15161f 66%) !important; }
.treasure-vault { position: relative; min-height: 260px; overflow: hidden; margin: 20px 0 13px; padding: 53px 24px 28px; border: 1px solid #ffffff0f; border-radius: 22px; background: repeating-linear-gradient(90deg, transparent 0 63px, #ffffff03 64px 65px), linear-gradient(#24201d, #111116); box-shadow: inset 0 -50px 60px #0009; }
.treasure-vault::before { content: ''; position: absolute; top: -90px; left: 50%; width: 420px; height: 210px; transform: translateX(-50%); border: 2px solid #7d67455c; border-radius: 50%; box-shadow: 0 0 0 18px #111115, 0 0 0 20px #5f513a44; }
.vault-glow { position: absolute; top: 30%; left: 50%; width: 300px; height: 100px; transform: translateX(-50%); border-radius: 50%; background: #ffd16618; filter: blur(30px); }
.treasure-chest-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(82px, 1fr)); gap: 12px; align-items: end; }
.chest-btn { position: relative; min-width: 0; padding: 0 4px 10px; border: 0; background: transparent; color: #c7bdad; cursor: pointer; transition: opacity .2s, transform .2s; }
.chest-btn:hover:not(:disabled) { transform: translateY(-7px); }.chest-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.chest-number { display: block; margin-bottom: 9px; color: #8d8274; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chest-art { position: relative; display: block; height: 91px; filter: drop-shadow(0 13px 9px #0009); }
.chest-base { position: absolute; right: 5px; bottom: 0; left: 5px; height: 55px; border: 3px solid #4d2b17; border-radius: 5px 5px 11px 11px; background: linear-gradient(90deg, #75401f, #b76b2e 48%, #75401f); box-shadow: inset 0 7px #d9913d55; }
.chest-lid { position: absolute; z-index: 2; right: 4px; bottom: 50px; left: 4px; height: 36px; transform-origin: bottom; border: 3px solid #4d2b17; border-radius: 40px 40px 5px 5px; background: linear-gradient(90deg, #814522, #ca7932 48%, #814522); transition: transform .48s cubic-bezier(.25,.8,.25,1); }
.chest-lid::before, .chest-base::before { content: ''; position: absolute; top: -3px; bottom: -3px; left: 43%; width: 16%; border-inline: 3px solid #6c4b1a; background: #d4a33a; }
.chest-lock { position: absolute; z-index: 4; bottom: 37px; left: 50%; display: grid; width: 23px; height: 26px; place-items: center; transform: translateX(-50%); border: 2px solid #71501c; border-radius: 4px; background: #e2b844; color: #614112; font-size: 9px; transition: transform .35s; }
.chest-prize { position: absolute; z-index: 1; bottom: 43px; left: 50%; opacity: 0; transform: translate(-50%, 12px) scale(.6); font-size: 34px; transition: opacity .3s .2s, transform .45s .15s; filter: drop-shadow(0 0 13px #ffd166); }
.chest-btn.is-opening .chest-lock { animation: lockWiggle .28s linear 2; }.chest-btn.is-open .chest-lid { transform: perspective(100px) rotateX(-70deg) translateY(-8px); }.chest-btn.is-open .chest-lock { transform: translate(-50%, 20px) rotate(18deg); opacity: .35; }.chest-btn.is-open .chest-prize { opacity: 1; transform: translate(-50%, -27px) scale(1); }
.chest-btn.is-unchosen { opacity: .32; filter: grayscale(.65); }.chest-btn.tier-jackpot .chest-art { filter: drop-shadow(0 0 20px #ffd166b8); }.chest-btn.tier-big .chest-art { filter: drop-shadow(0 0 17px #ff9f5cb0); }.chest-btn.tier-prize .chest-art { filter: drop-shadow(0 0 16px #7c5cff8c); }.chest-btn.tier-small .chest-art { filter: drop-shadow(0 0 10px #5cc8ff7c); }.chest-btn.tier-empty .chest-art { filter: grayscale(.8) drop-shadow(0 10px 7px #000); }
.chest-message { display: flex; min-height: 38px; align-items: center; justify-content: center; margin-bottom: 8px; border: 1px solid #ffffff0c; border-radius: 10px; background: #0b0c116b; }
@keyframes lockWiggle { 25% { transform: translateX(-50%) rotate(-8deg); } 75% { transform: translateX(-50%) rotate(8deg); } }

/* Mystery Box -- previously just a static 60px emoji with no interactive state at all; now a real
   box that idles, shakes while "opening", then reveals its prize with a tier-colored glow (same
   tier-color language as the Treasure Vault's chests above: gold/orange/purple/gray). */
.mystery-box-stage { display: flex; justify-content: center; margin: 18px 0 8px; }
.mystery-box { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.mystery-box-art { display: block; font-size: 72px; animation: mysteryIdle 2.4s ease-in-out infinite; transition: opacity .2s ease, transform .2s ease; }
.mystery-box.is-opening .mystery-box-art { animation: mysteryShake .5s ease-in-out; }
.mystery-box.is-open .mystery-box-art { opacity: 0; transform: scale(.6); }
.mystery-box-prize {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 6px; font-size: 17px; font-weight: 800; text-align: center; line-height: 1.15;
    opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .3s ease;
}
.mystery-box.is-open .mystery-box-prize { opacity: 1; transform: scale(1); }
.mystery-box.tier-mega .mystery-box-prize { color: var(--gold); filter: drop-shadow(0 0 14px #ffd166b0); }
.mystery-box.tier-big .mystery-box-prize { color: #ff9f5c; filter: drop-shadow(0 0 12px #ff9f5c99); }
.mystery-box.tier-small .mystery-box-prize { color: #a77bff; filter: drop-shadow(0 0 10px #7c5cff88); }
.mystery-box.tier-nothing .mystery-box-prize { color: #83808f; }
@keyframes mysteryIdle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes mysteryShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-7px) rotate(-5deg); }
    40% { transform: translateX(7px) rotate(5deg); }
    60% { transform: translateX(-5px) rotate(-4deg); }
    80% { transform: translateX(5px) rotate(4deg); }
}

@media (max-width: 900px) { .announcement-admin-form { grid-template-columns: 1fr 1fr; }.announcement-message-field { grid-column: 1 / -1; } }
@media (max-width: 600px) {
    .site-announcement { grid-template-columns: auto 1fr auto; }.announcement-until { display: none; }
    .announcement-admin-form { grid-template-columns: 1fr; }.announcement-message-field { grid-column: auto; }
    .balloon-field { gap: 3px 5px; padding-inline: 8px; }.balloon-body { width: 29px; height: 36px; }.balloon-knot { top: 34px; }.balloon-string { top: 41px; }
    .cr-curb { width: 42px; }.cr-curb span { font-size: 19px; }.cr-road { grid-auto-columns: 70px; padding-left: 60px; }.cr-lane { min-height: 150px; }
    .treasure-vault { padding: 45px 10px 22px; }.treasure-chest-grid { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 3px; }.chest-art { height: 73px; }.chest-base { height: 44px; }.chest-lid { bottom: 40px; height: 29px; }.chest-lock { bottom: 29px; width: 18px; height: 21px; }.chest-prize { font-size: 25px; }.chest-number { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { .path-tile-balloon, .cr-hen-leg, .cr-hen.is-hopping .cr-hen-body, .cr-hen.is-crashed .cr-hen-body, .cr-hen-dust, .cr-car-lane, .cr-car-crash, .cr-ambient .cr-car, .cr-sky.diff-hardcore::after, .cr-lane.lane-next .cr-sign-chip { animation: none; } }

/* Universal game instructions -------------------------------------------- */
.game-help-trigger {
    position: absolute; z-index: 12; top: 18px; right: 18px; display: grid; width: 37px; height: 37px; place-items: center;
    border: 1px solid color-mix(in srgb, var(--game-accent) 43%, #ffffff13); border-radius: 50%;
    background: color-mix(in srgb, var(--game-accent) 11%, #171821); color: color-mix(in srgb, var(--game-accent) 72%, #fff);
    font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 24px #0005, inset 0 1px #ffffff12;
    transition: transform .18s, background .18s, box-shadow .18s;
}
.game-play-page .wrap > .card > .game-help-trigger { position: absolute; z-index: 12; }
.game-help-trigger:hover { transform: translateY(-2px) scale(1.05); background: color-mix(in srgb, var(--game-accent) 20%, #171821); box-shadow: 0 10px 28px color-mix(in srgb, var(--game-accent) 18%, #000); }
.game-help-trigger:focus-visible { outline: 2px solid var(--game-accent); outline-offset: 3px; }
.game-help-dialog {
    width: min(620px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 34px)); overflow: hidden; padding: 0;
    border: 1px solid #ffffff18; border-radius: 23px; background: #171821; color: #ece9f2;
    box-shadow: 0 35px 100px #000d, inset 0 1px #ffffff0c;
}
.game-help-dialog[open] { animation: gameHelpIn .22s ease-out; }
.game-help-dialog::backdrop { background: #06070bbd; backdrop-filter: blur(7px); animation: gameHelpBackdrop .2s ease-out; }
.game-help-shell { display: flex; max-height: min(820px, calc(100vh - 34px)); flex-direction: column; }
.game-help-header { position: relative; display: grid; flex: 0 0 auto; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 24px 25px 20px; overflow: hidden; border-bottom: 1px solid #ffffff0d; background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--game-accent) 20%, transparent), transparent 17rem), linear-gradient(145deg, #222330, #1a1b25); }
.game-help-header::after { content: '?'; position: absolute; right: 65px; top: -38px; color: #ffffff05; font-size: 150px; font-weight: 950; line-height: 1; pointer-events: none; }
.game-help-icon { position: relative; z-index: 1; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #ffffff10; border-radius: 16px; background: #0e0f16a6; font-size: 28px; box-shadow: inset 0 1px #ffffff0b; }
.game-help-kicker { display: block; margin-bottom: 3px; color: color-mix(in srgb, var(--game-accent) 70%, #c8c4d1); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.game-help-header h2 { position: relative; z-index: 1; margin: 0; font-size: 27px; letter-spacing: -.035em; }
.game-help-close { position: relative; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #ffffff0d; border-radius: 10px; background: #ffffff05; color: #aaa7b5; font-size: 21px; cursor: pointer; }
.game-help-close:hover { border-color: #ffffff20; background: #ffffff0b; color: #fff; }
.game-help-body { overflow-y: auto; padding: 23px 25px; scrollbar-color: #ffffff20 transparent; }
.game-help-summary { margin: 0 0 17px; color: #b3b0bd; font-size: 13px; line-height: 1.65; }
.game-help-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 23px; }
.game-help-chips span { min-width: 0; padding: 10px 11px; border: 1px solid #ffffff0d; border-radius: 11px; background: #0c0d135e; }
.game-help-chips small, .game-help-chips strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-help-chips small { margin-bottom: 3px; color: #737284; font-size: 7px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.game-help-chips strong { color: #dedbe5; font-size: 11px; }
.game-help-section { margin-top: 19px; }.game-help-section h3 { margin: 0 0 10px; color: #ebe8f0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.game-help-section ol { margin: 0; padding: 0; list-style: none; counter-reset: game-help-step; }
.game-help-section li { position: relative; min-height: 34px; margin-bottom: 8px; padding: 7px 8px 7px 42px; color: #a9a6b4; font-size: 11px; line-height: 1.45; counter-increment: game-help-step; }
.game-help-section li::before { content: counter(game-help-step); position: absolute; top: 2px; left: 0; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid color-mix(in srgb, var(--game-accent) 32%, #ffffff0c); border-radius: 9px; background: color-mix(in srgb, var(--game-accent) 9%, #111219); color: color-mix(in srgb, var(--game-accent) 72%, #fff); font-size: 10px; font-weight: 900; }
.game-help-section.payout { padding: 14px 15px; border: 1px solid #ffd16624; border-radius: 12px; background: #ffd16608; }
.game-help-section.payout h3 { margin-bottom: 5px; color: #d9b95e; }.game-help-section.payout p { margin: 0; color: #b7af96; font-size: 11px; line-height: 1.55; }
.game-help-tip { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid #ffffff0c; border-radius: 12px; background: #ffffff05; }
.game-help-tip > span { font-size: 17px; }.game-help-tip p { margin: 0; color: #8f8d9c; font-size: 10px; line-height: 1.5; }.game-help-tip strong { display: block; margin-bottom: 2px; color: #c9c5d0; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.game-help-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 25px; border-top: 1px solid #ffffff0d; background: #12131b; }
.game-help-footer > span { color: #656577; font-size: 8px; }.game-help-done { min-width: 92px; padding-block: 8px !important; font-size: 11px !important; }
.game-help-open { overflow: hidden; }
@keyframes gameHelpIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes gameHelpBackdrop { from { opacity: 0; } }

@media (max-width: 600px) {
    .game-help-trigger { top: 13px; right: 13px; width: 34px; height: 34px; }
    .game-help-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); border-radius: 18px; }
    .game-help-shell { max-height: calc(100vh - 18px); }.game-help-header { padding: 19px 17px 16px; }.game-help-icon { width: 45px; height: 45px; font-size: 23px; }.game-help-header h2 { font-size: 22px; }
    .game-help-body { padding: 18px 17px; }.game-help-chips { gap: 5px; }.game-help-chips span { padding: 9px 7px; }.game-help-chips strong { font-size: 9px; }
    .game-help-footer { padding: 12px 17px; }.game-help-footer > span { display: none; }.game-help-done { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .game-help-dialog[open], .game-help-dialog::backdrop { animation: none; } }

/* Messaging system -------------------------------------------------------- */
.page-chat .wrap, .page-messages .wrap { max-width: 1180px !important; }
.chat-eyebrow { display: block; margin-bottom: 5px; color: #9d8bfa; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.chat-page-shell { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 15px; align-items: start; }
.chat-room-panel, .dm-thread-panel, .messages-inbox { overflow: hidden; border: 1px solid #ffffff11; border-radius: 22px; background: linear-gradient(155deg, #1b1c27e8, #14151ee8); box-shadow: 0 28px 70px #0505094f, inset 0 1px #ffffff08; }
.chat-room-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 23px 25px 19px; border-bottom: 1px solid #ffffff0d; background: radial-gradient(circle at 88% 20%, #7c5cff22, transparent 20rem), linear-gradient(145deg, #222132, #191a24); }
.chat-room-symbol { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid #ffffff10; border-radius: 15px; background: #0d0e15a6; font-size: 23px; }
.chat-room-header h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; }.chat-room-header p { margin: 4px 0 0; color: #858394; font-size: 10px; line-height: 1.45; }
.chat-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #4ade8030; border-radius: 999px; background: #4ade800c; color: #72d895; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chat-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px #4ade8015, 0 0 8px #4ade80; }
.page-chat .modern-chat-box, .page-messages .modern-chat-box { height: min(64vh, 650px); min-height: 460px; padding: 24px 25px; border: 0; border-radius: 0; background: linear-gradient(#0d0e1491, #0b0c119c); scrollbar-color: #ffffff1d transparent; }
.modern-chat-box .chat-msg { max-width: 86%; gap: 10px; margin-bottom: 5px; animation: msgIn .22s ease-out; }
.chat-avatar-link { display: block; flex: 0 0 auto; padding-top: 17px; }.chat-avatar-link:hover { text-decoration: none; }
.chat-message-content { min-width: 0; max-width: min(680px, 100%); }
.modern-chat-box .uname { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px 3px; color: #d4d0dd; font-size: 10px; font-weight: 800; }
.modern-chat-box .uname a, .modern-chat-box .uname span { color: inherit; }.modern-chat-box .uname a:hover { color: #fff; text-decoration: none; }
.modern-chat-box .uname time { color: #626273; font-size: 8px; font-weight: 600; }
.page-chat .modern-chat-box .chat-msg .bubble, .page-messages .modern-chat-box .chat-msg .bubble { padding: 10px 13px; border: 1px solid #ffffff0b; border-radius: 4px 14px 14px 14px; background: #22232e; color: #d6d3de; font-size: 12px; line-height: 1.55; box-shadow: 0 6px 16px #0002; overflow-wrap: anywhere; }
.page-chat .chat-msg.is-self .bubble { border-color: #7c5cff21; background: #29253b; }.page-chat .chat-msg.is-self .uname { color: #b9aaff; }
.chat-empty-state { display: flex; min-height: 100%; align-items: center; justify-content: center; flex-direction: column; color: #6f6e7e; text-align: center; }
.chat-empty-state > span { display: grid; width: 60px; height: 60px; place-items: center; margin-bottom: 12px; border: 1px solid #ffffff0d; border-radius: 18px; background: #ffffff04; font-size: 28px; }.chat-empty-state strong { color: #c6c2ce; font-size: 14px; }.chat-empty-state p { max-width: 280px; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.modern-chat-form { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin: 0; padding: 14px 17px; border-top: 1px solid #ffffff0d; background: #12131b; }
.modern-chat-form .composer-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #8f7cf0; font-size: 14px; }
.modern-chat-form input { min-height: 45px !important; padding-right: 48px !important; border-color: #ffffff0e !important; border-radius: 12px !important; background: #0b0c12 !important; font-size: 12px !important; }
.composer-limit { min-width: 28px; color: #5f5f70; font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.chat-send-btn { display: inline-flex !important; min-height: 43px; align-items: center; gap: 8px; padding-inline: 17px !important; }.chat-send-btn i { font-style: normal; font-size: 11px; }
.chat-access-note { display: flex; min-height: 66px; align-items: center; justify-content: center; padding: 15px; border-top: 1px solid #ffffff0d; background: #12131b; color: #898797; font-size: 11px; }
.chat-sidebar { display: flex; flex-direction: column; gap: 12px; }
.chat-side-card { padding: 19px; border: 1px solid #ffffff10; border-radius: 17px; background: linear-gradient(145deg, #1b1c26, #15161f); box-shadow: inset 0 1px #ffffff06; }
.chat-side-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.chat-side-heading h2, .chat-guidelines h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }.chat-side-heading > strong { color: #6f6e7f; font-size: 11px; }
.active-member-list { display: flex; flex-direction: column; gap: 4px; }.active-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 5px; border-radius: 10px; color: inherit; }.active-member:hover { background: #ffffff05; text-decoration: none; }.active-member span strong, .active-member span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.active-member span strong { color: #cac7d1; font-size: 10px; }.active-member span small { margin-top: 2px; color: #696979; font-size: 8px; }.active-member > i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px #4ade8010; }.chat-side-empty { margin: 5px 0; color: #747383; font-size: 9px; }
.chat-guidelines ul { margin: 14px 0 0; padding: 0; list-style: none; }.chat-guidelines li { display: grid; grid-template-columns: 27px 1fr; gap: 7px; align-items: start; margin-bottom: 10px; color: #858393; font-size: 9px; line-height: 1.45; }.chat-guidelines li span { display: grid; height: 21px; place-items: center; border: 1px solid #ffffff0d; border-radius: 6px; background: #ffffff04; color: #716985; font-size: 7px; font-weight: 850; }
.chat-private-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid #7c5cff22; border-radius: 15px; background: #7c5cff0b; color: #b9afdc; }.chat-private-link:hover { border-color: #7c5cff42; background: #7c5cff12; text-decoration: none; }.chat-private-link > span:first-child { font-size: 18px; }.chat-private-link strong, .chat-private-link small { display: block; }.chat-private-link strong { color: #d0cbdc; font-size: 10px; }.chat-private-link small { margin-top: 2px; color: #716f80; font-size: 8px; }.chat-private-link > i { font-style: normal; }

/* Direct-message thread */
.dm-thread-panel { max-width: 900px; margin: 0 auto; }
.dm-thread-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 15px 18px; border-bottom: 1px solid #ffffff0d; background: linear-gradient(145deg, #20212d, #191a24); }
.dm-back { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ffffff0d; border-radius: 10px; background: #ffffff04; color: #aaa7b4; }.dm-back:hover { border-color: #ffffff20; color: #fff; text-decoration: none; }
.dm-person { display: flex; min-width: 0; align-items: center; gap: 11px; color: inherit; }.dm-person:hover { text-decoration: none; }.dm-person > span strong, .dm-person > span small { display: block; }.dm-person > span strong { color: #e0dce6; font-size: 13px; }.dm-person > span small { margin-top: 3px; color: #777687; font-size: 8px; }.dm-person small i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #676777; }.dm-person small.is-online { color: #72cc91; }.dm-person small.is-online i { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.dm-profile-action { padding: 7px 10px; border: 1px solid #ffffff0d; border-radius: 9px; background: #ffffff04; color: #9593a2; font-size: 9px; font-weight: 800; }.dm-profile-action:hover { color: #fff; text-decoration: none; }
.page-messages .dm-chat-box .chat-msg { max-width: 76%; }.page-messages .dm-chat-box .chat-msg.own { margin-left: auto; flex-direction: row-reverse; text-align: left; }.dm-chat-box .chat-msg.own .chat-message-content { display: flex; align-items: flex-end; flex-direction: column; }.dm-chat-box .chat-msg.own .uname { justify-content: flex-end; margin-right: 3px; }
.page-messages .dm-chat-box .chat-msg.own .bubble { border: 0; border-radius: 14px 4px 14px 14px; background: linear-gradient(145deg, #8062f5, #6749dc); color: #fff; box-shadow: 0 8px 20px #6749dc24; }.dm-chat-box .chat-msg.own > .avatar { margin-top: 17px; }

/* Conversation inbox */
.messages-inbox { max-width: 900px; margin: 0 auto; }
.messages-hero { display: flex; min-height: 155px; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 34px; border-bottom: 1px solid #ffffff0d; background: radial-gradient(circle at 85% 0, #7c5cff25, transparent 22rem), linear-gradient(145deg, #252138, #181923 68%); }.messages-hero h1 { margin: 0; font-size: 36px; letter-spacing: -.05em; }.messages-hero p { margin: 7px 0 0; color: #8d8a9a; font-size: 11px; }
.inbox-stats { display: flex; gap: 0; padding: 0 25px; border-bottom: 1px solid #ffffff0b; background: #12131a; }.inbox-stats span { padding: 11px 18px; border-right: 1px solid #ffffff0b; color: #6e6d7e; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }.inbox-stats span:first-child { padding-left: 0; }.inbox-stats strong { margin-right: 4px; color: #beb9ca; font-size: 11px; }
.inbox-toolbar { padding: 15px 20px 10px; }.inbox-toolbar label { position: relative; display: block; margin: 0; }.inbox-toolbar label > span { position: absolute; z-index: 1; top: 50%; left: 13px; transform: translateY(-52%); color: #6d6c7d; font-size: 20px; }.inbox-toolbar input { width: 100%; min-height: 43px; padding-left: 39px; border: 1px solid #ffffff0e; border-radius: 10px; outline: none; background: #0c0d13; color: #e6e2eb; }.inbox-toolbar input:focus { border-color: #8657c8; box-shadow: 0 0 0 3px #8657c820; }
.conversation-list { padding: 5px 20px 20px; }.conversation-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; min-height: 76px; margin-bottom: 5px; padding: 11px 13px; border: 1px solid transparent; border-radius: 13px; color: inherit; transition: background .17s, border-color .17s, transform .17s; }.conversation-row:hover { border-color: #ffffff0d; background: #ffffff05; text-decoration: none; transform: translateX(2px); }.conversation-row.has-unread { border-color: #7c5cff1c; background: #7c5cff09; }
.conversation-avatar { position: relative; }.conversation-avatar > i { position: absolute; right: -1px; bottom: 1px; width: 10px; height: 10px; border: 2px solid #171821; border-radius: 50%; background: #555564; }.conversation-avatar > i.online { background: #4ade80; }
.conversation-copy { min-width: 0; }.conversation-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.conversation-name strong { color: #d9d5e0; font-size: 12px; }.conversation-name time { color: #676677; font-size: 8px; white-space: nowrap; }.conversation-preview { display: block; margin-top: 5px; overflow: hidden; color: #858393; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.has-unread .conversation-preview { color: #aaa5b6; }
.conversation-unread { display: grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 999px; background: #7c5cff; color: #fff; font-size: 9px; font-weight: 900; box-shadow: 0 4px 12px #7c5cff44; }.conversation-arrow { color: #5e5d6e; font-size: 14px; }.conversation-row:hover .conversation-arrow { color: #a796f4; }
.inbox-empty, .inbox-no-results { display: flex; min-height: 330px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }.inbox-empty > span, .inbox-no-results > span { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 12px; border: 1px solid #ffffff0d; border-radius: 19px; background: #ffffff04; font-size: 27px; }.inbox-empty h2, .inbox-no-results strong { margin: 0; color: #cac6d1; font-size: 16px; }.inbox-empty p, .inbox-no-results p { margin: 6px 0 17px; color: #747383; font-size: 10px; }.inbox-no-results[hidden] { display: none; }

@media (max-width: 900px) { .chat-page-shell { grid-template-columns: 1fr; }.chat-sidebar { display: grid; grid-template-columns: 1fr 1fr; }.chat-private-link { grid-column: 1 / -1; } }
@media (max-width: 600px) {
    .page-chat .wrap, .page-messages .wrap { padding-inline: 9px; }.chat-room-panel, .dm-thread-panel, .messages-inbox { border-radius: 17px; }
    .chat-room-header { grid-template-columns: auto 1fr; padding: 18px 15px 15px; }.chat-room-symbol { width: 42px; height: 42px; }.chat-room-header h1 { font-size: 21px; }.chat-room-header p { max-width: 230px; }.chat-live-pill { display: none; }
    .page-chat .modern-chat-box, .page-messages .modern-chat-box { height: 58vh; min-height: 390px; padding: 17px 13px; }.modern-chat-box .chat-msg, .page-messages .dm-chat-box .chat-msg { max-width: 92%; }.modern-chat-box .chat-msg > .avatar, .chat-avatar-link .avatar { width: 30px !important; height: 30px !important; }
    .modern-chat-form { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }.modern-chat-form .composer-icon, .composer-limit { display: none; }.chat-send-btn span { display: none; }.chat-send-btn { width: 43px; justify-content: center; padding: 0 !important; }
    .chat-sidebar { grid-template-columns: 1fr; }.chat-private-link { grid-column: auto; }
    .dm-thread-header { padding: 11px; }.dm-profile-action { display: none; }.dm-person .avatar { width: 36px !important; height: 36px !important; }
    .messages-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 26px 22px; }.messages-hero h1 { font-size: 31px; }.messages-hero .btn { width: 100%; text-align: center; }.inbox-stats { padding-inline: 17px; }.inbox-stats span { flex: 1; padding-inline: 8px; text-align: center; }.conversation-list { padding-inline: 10px; }.conversation-row { padding-inline: 8px; }.conversation-name time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .arcade-orbit, .arcade-hero-chip, .game-tile-icon { animation: none !important; transition: none !important; }
    .game-tile:hover { transform: none; }
}

/* Site-wide design system -------------------------------------------------- */
.site-redesign:not(.games-lobby-page):not(.game-play-page) {
    background:
        radial-gradient(circle at 14% -8%, #7c5cff1e, transparent 34rem),
        radial-gradient(circle at 88% 18%, #ff5c8a0b, transparent 30rem),
        #0f1017;
}
.site-redesign:not(.games-lobby-page):not(.game-play-page) .wrap { max-width: 1120px; }
.site-redesign header.site-header {
    position: sticky; z-index: 80; top: 0; margin-bottom: 30px; padding: 10px 0;
    border-bottom: 1px solid #ffffff0d; background: #11121aeb; box-shadow: 0 12px 38px #05050938;
    backdrop-filter: blur(18px);
}
.site-redesign .header-inner { max-width: 1160px; flex-wrap: nowrap; gap: 18px; }
.site-redesign .brand { flex: 0 1 220px; min-width: 145px; color: #f7f4ff; text-decoration: none; }
.brand-mark {
    display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 11px;
    background: linear-gradient(145deg, #8a6cff, #5e3fe2); color: #fff; font-size: 18px; font-weight: 900;
    box-shadow: 0 8px 24px #7c5cff36, inset 0 1px #ffffff4a;
}
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 16px; letter-spacing: -.02em; }
.site-redesign .brand .tagline { max-width: 170px; margin-top: 4px; overflow: hidden; color: #777789; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.site-redesign nav.main-nav { flex: 1; justify-content: center; flex-wrap: nowrap; }
.site-redesign nav.main-nav > a, .nav-more > summary {
    display: flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid transparent; border-radius: 9px;
    color: #a09eae; font-size: 11px; font-weight: 750; cursor: pointer; list-style: none;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.site-redesign nav.main-nav > a:hover, .nav-more > summary:hover { background: #ffffff07; color: #fff; text-decoration: none; }
.site-redesign nav.main-nav > a.active, .nav-more > summary.active { border-color: #8b73ff31; background: #7c5cff18; color: #c8bdff; }
.nav-more { position: relative; }
.nav-more[open] > summary { background: #ffffff09; color: #fff; }
.nav-more-menu {
    position: absolute; top: calc(100% + 10px); right: 0; width: 255px; padding: 8px; border: 1px solid #ffffff13; border-radius: 14px;
    max-height: min(620px, calc(100vh - 90px)); overflow-y: auto; z-index: 60;
    background: #181922f7; box-shadow: 0 20px 55px #000b; backdrop-filter: blur(18px);
}
.nav-more-menu a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 9px; border-radius: 9px; color: #c7c4d1; }
.nav-more-menu a:hover, .nav-more-menu a.active { background: #ffffff08; color: #fff; text-decoration: none; }
.nav-more-menu a > span:first-child { font-size: 17px; text-align: center; }
.nav-more-menu strong, .nav-more-menu small { display: block; }
.nav-more-menu strong { font-size: 11px; }
.nav-more-menu small { margin-top: 2px; color: #777789; font-size: 8.5px; font-weight: 500; }
.nav-more-menu i { margin: 0; font-style: normal; }
.site-redesign .user-box { flex: 0 0 auto; gap: 7px; }
.site-redesign .bell-btn { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #ffffff0c; border-radius: 9px; background: #ffffff04; font-size: 14px; }
.site-redesign .bits-pill { padding: 5px 8px; border-color: #ffd1662e; background: #ffd16611; font-size: 10px; }
.site-redesign .level-badge { display: inline-flex; min-height: 27px; align-items: center; padding: 4px 8px; border: 1px solid #7c5cff30; border-radius: 8px; background: #7c5cff10; color: #b7aaff; font-size: 9px; font-weight: 900; letter-spacing: .04em; }.site-redesign .level-badge:hover { border-color: #7c5cff60; color: #fff; text-decoration: none; }
.user-identity { display: flex; align-items: center; gap: 6px; color: #e5e2eb; font-size: 11px; font-weight: 750; }
.user-identity:hover { text-decoration: none; }

.site-redesign:not(.games-lobby-page):not(.game-play-page) .card {
    border-color: #ffffff11; border-radius: 18px; background: linear-gradient(145deg, #1c1d28d9, #161720d9);
    box-shadow: 0 20px 48px #0505092b, inset 0 1px #ffffff08; backdrop-filter: blur(14px);
}
.site-redesign:not(.games-lobby-page):not(.game-play-page) .card h2 { letter-spacing: -.035em; }
.site-redesign:not(.games-lobby-page):not(.game-play-page) .card h3 { letter-spacing: -.02em; }
.site-redesign .btn { border: 1px solid #ffffff10; border-radius: 10px; background: linear-gradient(145deg, #886bff, #6849eb); box-shadow: 0 9px 22px #7c5cff25; transition: transform .18s, filter .18s, border-color .18s; }
.site-redesign .btn:hover { filter: brightness(1.09); transform: translateY(-1px); }
.site-redesign .btn.secondary { background: #ffffff09; box-shadow: none; color: #d0cdd8; }
.site-redesign input[type=text], .site-redesign input[type=email], .site-redesign input[type=password], .site-redesign input[type=number], .site-redesign textarea, .site-redesign select {
    min-height: 43px; border-color: #ffffff13; border-radius: 10px; background: #0c0d14a6; outline: none;
}
.site-redesign input:focus, .site-redesign textarea:focus, .site-redesign select:focus { border-color: #8065f2; box-shadow: 0 0 0 3px #7c5cff1b; }
.site-redesign label { color: #a8a5b5; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
.site-redesign .flash { max-width: 1120px; margin-inline: auto; border-radius: 11px; }

/* Forum landing */
.community-hero {
    position: relative; display: grid; min-height: 430px; grid-template-columns: 1.2fr .8fr; overflow: hidden; margin-bottom: 42px;
    padding: 65px 60px 82px; border: 1px solid #ffffff12; border-radius: 25px;
    background: radial-gradient(circle at 82% 38%, #7c5cff2a, transparent 25rem), linear-gradient(145deg, #211e35, #151620 65%);
    box-shadow: 0 32px 80px #0505095c, inset 0 1px #ffffff0b;
}
.community-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to right, transparent, #000); opacity: .25; }
.community-hero-copy { position: relative; z-index: 2; }
.page-kicker { color: #a695ff; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.community-hero h1 { max-width: 680px; margin: 13px 0 17px; color: #faf8ff; font-size: clamp(43px, 6vw, 68px); line-height: .98; letter-spacing: -.062em; }
.community-hero h1 span { color: #9c87ff; }
.community-hero-copy > p { max-width: 540px; margin: 0; color: #9a98aa; font-size: 14px; line-height: 1.65; }
.hero-actions { display: flex; gap: 9px; margin-top: 26px; }
.community-hero-visual { position: relative; z-index: 1; min-height: 240px; }
.hero-orb { position: absolute; display: grid; place-items: center; border: 1px solid #ffffff18; border-radius: 50%; background: #11121ab8; box-shadow: 0 20px 50px #0008, inset 0 1px #ffffff17; backdrop-filter: blur(10px); }
.hero-orb-one { top: 10px; right: 45px; width: 150px; height: 150px; font-size: 57px; }
.hero-orb-two { right: 180px; bottom: 0; width: 90px; height: 90px; font-size: 36px; }
.hero-orb-three { right: 4px; bottom: 10px; width: 72px; height: 72px; color: var(--gold); font-size: 32px; }
.community-stats { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; width: max-content; border-top: 1px solid #ffffff0e; border-right: 1px solid #ffffff0e; border-radius: 0 17px 0 0; background: #0c0d14a6; }
.community-stats div { display: flex; align-items: baseline; gap: 7px; min-width: 118px; padding: 13px 22px; border-right: 1px solid #ffffff0c; }
.community-stats strong { font-size: 17px; }.community-stats span { color: #777687; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.forum-section-heading { margin-bottom: 15px; }.forum-section-heading h2 { margin-bottom: 0; }.forum-section-heading p { margin-top: 5px; }
.forum-directory { overflow: hidden; margin-bottom: 20px; border: 1px solid #ffffff11; border-radius: 20px; background: #171821cc; box-shadow: 0 22px 50px #05050938; }
.forum-directory table td { padding: 18px 20px; border-color: #ffffff0d; }
.category-main { display: flex; align-items: center; gap: 15px; }
.category-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid #ffffff0d; border-radius: 13px; background: #ffffff06; font-size: 20px; }
.forum-directory tr { transition: background .18s; }.forum-directory tr:hover { background: #ffffff05; }
.forum-directory .cat-name a { color: #e9e6ef; }.forum-directory .cat-desc { margin-top: 4px; font-size: 11px; }
.community-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 28px; }
.community-feature { position: relative; min-height: 190px; overflow: hidden; padding: 28px; border: 1px solid #ffffff11; border-radius: 19px; background: linear-gradient(145deg, #1d1e29, #16171f); }
.community-feature::after { content: ''; position: absolute; top: -65px; right: -50px; width: 180px; height: 180px; border-radius: 50%; background: #7c5cff1c; }
.feature-games::after { background: #ff5c8a14; }.community-feature .feature-symbol { position: absolute; z-index: 1; top: 27px; right: 29px; font-size: 32px; }
.community-feature h3 { margin: 0 0 8px; font-size: 20px; }.community-feature p { max-width: 70%; min-height: 35px; line-height: 1.5; }.community-feature > a { display: inline-block; margin-top: 16px; color: #d8d3e4; font-size: 11px; font-weight: 800; }.community-feature > a span { margin-left: 7px; color: #a38eff; }

/* Interior pages: consistent title surface, lists, profiles and forms */
.page-category .wrap > .card:first-of-type, .page-thread .wrap > .card:first-of-type, .page-chat .wrap > .card:first-of-type,
.page-shop .wrap > .card:first-of-type, .page-marketplace .wrap > .card:first-of-type, .page-inventory .wrap > .card:first-of-type,
.page-leaderboard .wrap::before, .page-friends .wrap > .card:first-of-type, .page-messages .wrap > .card:first-of-type,
.page-notifications .wrap > .card:first-of-type, .page-achievements .wrap > .card:first-of-type, .page-bank .wrap > .card:first-of-type,
.page-admin .wrap > .card:first-of-type {
    border-color: #ffffff13; background: radial-gradient(circle at 90% 10%, #7c5cff20, transparent 22rem), linear-gradient(145deg, #211f31, #171821 70%);
}
.page-category .wrap > .card:first-of-type, .page-shop .wrap > .card:first-of-type, .page-marketplace .wrap > .card:first-of-type,
.page-inventory .wrap > .card:first-of-type, .page-achievements .wrap > .card:first-of-type, .page-bank .wrap > .card:first-of-type,
.page-admin .wrap > .card:first-of-type { padding: 28px 30px; }
.page-category .wrap > .card:first-of-type h2, .page-chat .wrap > .card:first-of-type h2, .page-shop .wrap > .card:first-of-type h2,
.page-marketplace .wrap > .card:first-of-type h2, .page-inventory .wrap > .card:first-of-type h2, .page-achievements .wrap > .card:first-of-type h2,
.page-bank .wrap > .card:first-of-type h2, .page-admin .wrap > .card:first-of-type h2 { margin-bottom: 7px; font-size: clamp(25px, 4vw, 34px); }
.page-category table.thread-list tr, .page-admin table.thread-list tr { transition: background .18s; }
.page-category table.thread-list tr:hover, .page-admin table.thread-list tr:hover { background: #ffffff05; }
.page-category table.thread-list td, .page-admin table.thread-list td { border-color: #ffffff0d; }
.page-thread .wrap > .card:nth-of-type(2) { padding: 7px 24px; }
.page-thread .post { gap: 22px; padding: 24px 0; border-color: #ffffff0d; }
.page-thread .post-body { min-height: 115px; padding: 13px 16px; border: 1px solid #ffffff0b; border-radius: 13px; background: #0d0e146b; }
.page-thread .post-header-row { padding-bottom: 9px; border-bottom: 1px solid #ffffff0b; }
.page-thread .reaction-bar { border-top-color: #ffffff0b; }
.page-chat .wrap > .card:first-of-type, .page-messages .wrap > .card:first-of-type { padding: 28px; }
.page-chat .chat-box, .page-messages .chat-box { height: min(58vh, 580px); padding: 18px; border-color: #ffffff0f; border-radius: 15px; background: #0a0b11a3; }
.page-chat .chat-msg, .page-messages .chat-msg { gap: 11px; }.page-chat .chat-msg .bubble, .page-messages .chat-msg .bubble { padding: 9px 13px; border-radius: 4px 13px 13px 13px; background: #242631; }
.page-messages .chat-msg.own .bubble { border-radius: 13px 4px 13px 13px; background: #7053ed; }
.site-redesign .challenge-row { min-height: 57px; margin-bottom: 7px; padding: 10px 13px; border: 1px solid #ffffff0b; border-radius: 11px; background: #ffffff05; }
.site-redesign .leaderboard-row { padding: 11px 5px; border-color: #ffffff0d; }
.page-leaderboard .game-grid { gap: 15px; }.page-leaderboard .game-grid > .card { padding: 23px; }
.page-profile .wrap > .card:first-of-type { padding: 30px; background: radial-gradient(circle at 90% 20%, #7c5cff22, transparent 24rem), linear-gradient(145deg, #211f31, #171821 70%); }
.page-profile .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.page-profile .game-grid > .card { min-height: 175px; }
.page-edit_profile .wrap > .card, .page-login .wrap > .card, .page-register .wrap > .card, .page-forgot_password .wrap > .card,
.page-reset_password .wrap > .card, .page-verify .wrap > .card, .page-new_thread .wrap > .card {
    max-width: 580px !important; margin: 35px auto; padding: clamp(24px, 5vw, 40px) !important; border-radius: 22px !important;
    background: radial-gradient(circle at 90% 0, #7c5cff20, transparent 18rem), linear-gradient(145deg, #1d1e2a, #15161f) !important;
}
.page-edit_profile .wrap > .card h2, .page-login .wrap > .card h2, .page-register .wrap > .card h2, .page-forgot_password .wrap > .card h2,
.page-reset_password .wrap > .card h2, .page-verify .wrap > .card h2, .page-new_thread .wrap > .card h2 { font-size: 30px; }
.page-shop .game-lobby-grid, .page-inventory .game-lobby-grid, .page-achievements .game-lobby-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-shop .game-lobby-grid > .card, .page-inventory .game-lobby-grid > .card, .page-achievements .game-lobby-grid > .card { min-height: 210px; padding: 20px 14px; transition: transform .2s, border-color .2s; }
.page-shop .game-lobby-grid > .card:hover, .page-inventory .game-lobby-grid > .card:hover, .page-achievements .game-lobby-grid > .card:hover { transform: translateY(-3px); border-color: #7c5cff4a; }
.page-marketplace .listing-card, .page-inventory .inventory-card { border-color: #ffffff11 !important; background: #181923 !important; }
.page-admin .wrap { max-width: 1240px !important; }.page-admin table { font-size: 12px; }
.site-footer { border-top: 1px solid #ffffff09; }

@media (max-width: 980px) {
    .site-redesign .header-inner { flex-wrap: wrap; }.site-redesign .brand { flex: 1; }.site-redesign nav.main-nav { order: 3; width: 100%; justify-content: flex-start; overflow: visible; }
    .community-hero { grid-template-columns: 1fr .55fr; padding-inline: 40px; }.community-hero h1 { font-size: 52px; }
    .page-shop .game-lobby-grid, .page-inventory .game-lobby-grid, .page-achievements .game-lobby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .site-redesign header.site-header { position: relative; margin-bottom: 20px; }.site-redesign .header-inner { padding-inline: 11px; gap: 9px; }
    .site-redesign .brand .tagline, .user-identity span, .site-redesign .bits-pill, .site-redesign .user-box .inline-form { display: none; }
    .site-redesign .user-box { margin-left: auto; }.site-redesign nav.main-nav { flex: 0 0 100%; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
    .site-redesign nav.main-nav > a, .nav-more > summary { padding-inline: 10px; white-space: nowrap; }.nav-more { position: static; }.nav-more-menu { left: 11px; right: 11px; width: auto; }
    .community-hero { display: block; min-height: 500px; padding: 42px 25px 90px; }.community-hero h1 { font-size: clamp(40px, 13vw, 56px); }.community-hero-copy > p { max-width: 90%; }.community-hero-visual { position: absolute; right: -55px; bottom: 20px; width: 260px; opacity: .38; }
    .community-stats { width: 100%; }.community-stats div { min-width: 0; flex: 1; padding-inline: 13px; }.community-feature-grid { grid-template-columns: 1fr; }
    .forum-directory table, .forum-directory tbody { display: block; width: 100%; }
    .forum-directory tr { display: grid; grid-template-columns: 1fr 1.25fr; padding: 15px; border-bottom: 1px solid #ffffff0d; }
    .forum-directory tr:last-child { border-bottom: 0; }
    .forum-directory table td { display: block; width: auto !important; padding: 8px 5px; border: 0; }
    .forum-directory .category-main { grid-column: 1 / -1; padding-top: 0; }
    .forum-directory td.meta { text-align: left !important; }
    .page-profile .game-grid { grid-template-columns: 1fr; }.page-thread .post { flex-direction: column; }.page-thread .post-author { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; }.page-thread .post-author .badge-row { justify-content: flex-start !important; }
    .page-shop .game-lobby-grid, .page-inventory .game-lobby-grid, .page-achievements .game-lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-admin table.thread-list { display: block; overflow-x: auto; }
}
@media (max-width: 430px) {
    .site-redesign .brand-copy strong { font-size: 14px; }.site-redesign .bell-btn { width: 29px; height: 29px; }.community-hero { min-height: 540px; }
    .hero-actions { flex-direction: column; align-items: stretch; }.hero-actions .btn { text-align: center; }.community-feature p { max-width: 85%; }
    .page-shop .game-lobby-grid, .page-inventory .game-lobby-grid, .page-achievements .game-lobby-grid { grid-template-columns: 1fr; }
}
/* Engagement hub */
.engagement-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;background:radial-gradient(circle at 85% 20%,rgba(124,92,255,.22),transparent 38%),linear-gradient(135deg,rgba(38,32,62,.96),rgba(22,22,31,.96));overflow:hidden}.engagement-hero h1{margin:4px 0 8px;font-size:clamp(28px,5vw,44px)}.engagement-hero p{margin:0;color:var(--muted);max-width:620px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:#a99aff}.streak-orb{flex:0 0 128px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#ff9f43,#ff5f6d);box-shadow:0 0 42px rgba(255,126,84,.3);border:5px solid rgba(255,255,255,.12)}.streak-orb strong{font-size:30px}.streak-orb span{font-size:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-heading h2,.section-heading p{margin:0}.streak-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.streak-day{position:relative;text-align:center;padding:13px 5px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);color:var(--muted)}.streak-day span{display:block;font-size:11px}.streak-day strong{display:block;margin-top:5px;font-size:13px;color:var(--text)}.streak-day i{position:absolute;right:6px;top:5px;color:#52df8b}.streak-day.done{border-color:rgba(82,223,139,.35);background:rgba(82,223,139,.07)}.streak-day.current{border-color:#ff9f43;box-shadow:0 0 18px rgba(255,159,67,.18);transform:translateY(-3px)}.mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mission-card{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025)}.mission-card.complete{border-color:rgba(82,223,139,.42);background:linear-gradient(100deg,rgba(82,223,139,.08),rgba(255,255,255,.02))}.mission-icon{font-size:28px}.mission-card h3,.mission-card p{margin:0}.mission-card p{font-size:13px;color:var(--muted);margin:3px 0 9px}.mission-card small{color:var(--muted)}.mission-reward{text-align:right;display:grid;gap:7px}.mission-reward>span{font-weight:800;color:#ffd166}.engage-progress{height:7px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.engage-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#5cc8ff)}.engage-progress.large{height:12px}.community-card{display:flex;justify-content:space-between;align-items:center;gap:26px;background:linear-gradient(120deg,rgba(92,200,255,.08),rgba(124,92,255,.1))}.community-card>div:first-child{flex:1}.community-prize{text-align:center;min-width:130px}.community-prize strong,.community-prize span{display:block}.community-prize strong{font-size:28px;color:#ffd166}.community-prize span{color:var(--muted);margin-bottom:10px}.collection-set{border-top:2px solid var(--rarity,#7c5cff)}.rarity-common{--rarity:#9ca3af}.rarity-uncommon{--rarity:#4ade80}.rarity-rare{--rarity:#5cc8ff}.rarity-epic{--rarity:#c084fc}.rarity-legendary{--rarity:#ffd166}.set-reward{display:flex;align-items:center;gap:10px;font-weight:800;color:#ffd166}.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}.album-item{position:relative;min-height:165px;padding:18px;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(255,255,255,.025)}.album-item.found{border-color:var(--rarity);background:rgba(255,255,255,.04)}.album-item.locked{filter:saturate(.2);opacity:.65}.album-emoji{font-size:42px;margin-bottom:10px}.album-item small{color:var(--muted);margin-top:5px}.album-item i{font-size:10px;color:var(--rarity);margin-top:auto;padding-top:8px}.set-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:15px;color:var(--muted);font-size:12px}.stat-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.stat-dashboard article{padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--card);display:grid;gap:5px}.stat-dashboard span{color:var(--muted);font-size:12px}.stat-dashboard strong{font-size:24px}.positive{color:#52df8b!important}.negative{color:#ff6b7a!important}.stats-table{display:grid}.stats-row{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:12px;padding:13px;border-bottom:1px solid var(--border);align-items:center}.stats-row.head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.admin-ban-form{display:grid;grid-template-columns:110px minmax(150px,1fr) minmax(160px,1.4fr) auto;gap:5px;margin:0 0 8px}.admin-ban-form input,.admin-ban-form select{min-width:0;font-size:12px}
@media(max-width:760px){.engagement-hero,.community-card{align-items:flex-start}.streak-orb{flex-basis:95px}.streak-calendar{grid-template-columns:repeat(4,1fr)}.mission-grid{grid-template-columns:1fr}.stat-dashboard{grid-template-columns:repeat(2,1fr)}.stats-row{grid-template-columns:1.3fr repeat(2,1fr)}.stats-row>*:nth-child(4),.stats-row>*:nth-child(5){display:none}.admin-ban-form{grid-template-columns:1fr 1fr}.admin-ban-form input[name=ban_reason]{grid-column:1/-1}}
@media(max-width:480px){.engagement-hero{flex-direction:column}.streak-calendar{grid-template-columns:repeat(2,1fr)}.mission-card{grid-template-columns:auto 1fr}.mission-reward{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.stat-dashboard{grid-template-columns:1fr}}

/* Floating chat widget */
.chat-widget{position:fixed;right:20px;bottom:20px;z-index:150}
.chat-widget-bubble{position:relative;width:56px;height:56px;border-radius:50%;border:1px solid #ffffff16;background:linear-gradient(145deg,#8062f5,#6749dc);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 14px 34px #6749dc4a,0 2px 6px #0006;display:grid;place-items:center;transition:transform .15s}
.chat-widget-bubble:hover{transform:translateY(-2px)}
.chat-widget-bubble .nav-badge{position:absolute;top:-2px;right:-2px;background:var(--accent-2);box-shadow:0 0 0 2px #14151f}
.chat-widget-panel{position:absolute;right:0;bottom:calc(100% + 14px);width:340px;height:460px;display:flex;flex-direction:column;overflow:hidden;background:#161720f7;border:1px solid #ffffff16;border-radius:18px;box-shadow:0 28px 75px #000c,inset 0 1px #ffffff08;backdrop-filter:blur(22px)}
.chat-widget-panel[hidden]{display:none}
.chat-widget-list,.chat-widget-thread{display:flex;flex-direction:column;height:100%}
.chat-widget-list[hidden],.chat-widget-thread[hidden]{display:none}
.chat-widget-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 14px;border-bottom:1px solid #ffffff0d;background:radial-gradient(circle at 100% 0,#7c5cff1d,transparent 13rem)}
.chat-widget-header strong,.chat-widget-header a{font-size:13px}
.chat-widget-header a{font-weight:600;color:#a99fda}
.chat-widget-back{background:none;border:0;color:#c7c4d1;font-size:16px;cursor:pointer;padding:2px 4px}
.chat-widget-header #chatWidgetThreadName{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-widget-conversations{flex:1;overflow-y:auto;padding:6px}
.chat-widget-conversation-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;border-radius:11px;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.chat-widget-conversation-row:hover{background:#ffffff07}
.chat-widget-conversation-row .avatar,.chat-widget-conversation-row .avatar-wrap{flex-shrink:0}
.chat-widget-conversation-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-widget-conversation-copy strong{font-size:12.5px}
.chat-widget-conversation-copy span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-widget-conversations .conversation-unread{flex-shrink:0}
.chat-widget-empty{display:grid;place-items:center;text-align:center;height:100%;color:var(--muted);padding:20px;gap:6px}
.chat-widget-empty span{font-size:26px}
.chat-widget-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.chat-widget-msg{max-width:82%;padding:7px 11px;border-radius:4px 13px 13px 13px;background:#242631;color:#d6d3de;font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.chat-widget-msg.own{align-self:flex-end;border-radius:13px 4px 13px 13px;background:linear-gradient(145deg,#8062f5,#6749dc);color:#fff}
.chat-widget-form{display:flex;gap:8px;padding:10px;border-top:1px solid #ffffff0d}
.chat-widget-form input{flex:1;min-width:0}
.chat-widget-form button{width:36px;border:0;border-radius:9px;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
.chat-widget-verify{padding:10px 14px;border-top:1px solid #ffffff0d;font-size:12px;color:var(--muted)}
@media(max-width:480px){.chat-widget{right:12px;bottom:12px}.chat-widget-panel{width:calc(100vw - 24px);height:min(70vh,520px)}}

/* Music player */
.music-eq{display:flex;align-items:flex-end;gap:3px;height:16px;padding:2px}
.music-eq i{display:block;width:3px;height:4px;border-radius:2px;background:#6f6d7d;transition:background .2s}
.music-eq.playing i{background:#a99aff;animation:musicEqBounce .9s ease-in-out infinite}
.music-eq i:nth-child(1){animation-delay:-.6s}
.music-eq i:nth-child(2){animation-delay:-.3s}
.music-eq i:nth-child(3){animation-delay:-.9s}
.music-eq i:nth-child(4){animation-delay:-.15s}
@keyframes musicEqBounce{0%,100%{height:4px}50%{height:15px}}
.music-panel-body{padding:16px}
.music-playlist-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.music-tab{display:flex;flex-shrink:0;align-items:center;gap:6px;padding:6px 11px;border:1px solid #ffffff10;border-radius:999px;background:#ffffff06;color:#aaa7b5;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.music-tab:hover{background:#ffffff0c;color:#e6e2eb}
.music-tab.active{border-color:#7c5cff55;background:#7c5cff1e;color:#d7cfff}
.music-tab.empty{opacity:.55}
.music-tab small{padding:1px 5px;border-radius:99px;background:#ffffff10;font-size:9px;font-weight:800}
.music-tab.active small{background:#7c5cff33}
.music-now-playing{margin-bottom:14px;color:var(--text);font-size:13px;font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-progress-row{display:flex;align-items:center;gap:9px;margin:-6px 0 16px}
.music-time{flex-shrink:0;width:32px;color:#8a889a;font-size:10px;font-variant-numeric:tabular-nums}
.music-time:last-child{text-align:right}
.music-progress{position:relative;flex:1;height:6px;border-radius:99px;background:#ffffff14;cursor:pointer;touch-action:none}
.music-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#8062f5,#a99aff);pointer-events:none}
.music-empty{padding:18px 10px;color:#6f6d7d;font-size:12px;text-align:center}
.music-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
.music-play-btn{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff16;border-radius:50%;background:linear-gradient(145deg,#8062f5,#6749dc);color:#fff;font-size:17px;cursor:pointer;box-shadow:0 10px 26px #6749dc40}
.music-play-btn:hover{filter:brightness(1.08)}
.music-ctrl-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff10;border-radius:50%;background:#ffffff07;color:#c7c4d1;font-size:13px;cursor:pointer}
.music-ctrl-btn:hover{background:#ffffff10;color:#fff}
.music-volume-row{display:flex;align-items:center;gap:9px;font-size:13px;color:#8a889a}
.music-volume-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:#ffffff14;outline:none}
.music-volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#a99aff;box-shadow:0 2px 6px #0006;cursor:pointer}
.music-volume-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#a99aff;box-shadow:0 2px 6px #0006;cursor:pointer}
.music-playlist{max-height:180px;overflow-y:auto;margin-top:14px;border-top:1px solid #ffffff0d;padding-top:8px}
.music-track-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border:0;border-radius:9px;background:none;color:#c7c4d1;text-align:left;font-size:12.5px;cursor:pointer}
.music-track-row:hover{background:#ffffff07}
.music-track-row.active{color:#d7cfff;background:#7c5cff14}
.music-track-row span{flex-shrink:0;width:16px;text-align:center;color:#6f6d7d;font-size:11px}
.music-track-row.active span{color:#a99aff}

/* Reflex Arena */
.reflex-stage{display:flex;flex-direction:column;align-items:center;gap:16px;margin:10px 0 18px}
.reflex-box{display:grid;place-items:center;width:100%;max-width:420px;height:200px;border-radius:18px;border:1px solid var(--border);background:#22232e;color:var(--text);font-size:26px;font-weight:800;cursor:pointer;user-select:none;transition:background .15s,border-color .15s,transform .1s}
.reflex-stage[data-phase="waiting"] .reflex-box{background:linear-gradient(155deg,#3a1f24,#2a161a);border-color:#ff6b7a55;color:#ff9aa5}
.reflex-stage[data-phase="go"] .reflex-box{background:linear-gradient(155deg,#163a24,#0f2a1a);border-color:#4ade8088;color:#7bffb0;transform:scale(1.02);box-shadow:0 0 30px #4ade8033}
.reflex-stage[data-phase="resolving"] .reflex-box{opacity:.6}
.reflex-stage[data-phase="result"] .reflex-box{background:linear-gradient(155deg,#241f3a,#181426);border-color:#7c5cff88;color:#c7baff}
.reflex-stage[data-phase="result-early"] .reflex-box{background:linear-gradient(155deg,#3a1f24,#2a161a);border-color:#ff6b7a88;color:#ff9aa5}
.reflex-stage[data-phase="idle"] .reflex-box:hover{border-color:#ffffff2a}
.reflex-stat-row{display:flex;justify-content:center;gap:32px;text-align:center;margin-bottom:14px}
.reflex-stat-row span{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.reflex-stat-row strong{font-size:20px;color:var(--text);text-transform:none;letter-spacing:normal}
@media(max-width:480px){.reflex-box{height:160px;font-size:20px}.reflex-stat-row{gap:16px}}

/* The Grind (idle clicker) */
.clicker-stage{position:relative;display:flex;justify-content:center;margin:14px 0 18px}
.clicker-popup{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-weight:900;font-size:20px;color:#ffd166;text-shadow:0 2px 8px #00000099;animation:clickerPopupFloat .7s ease-out forwards;z-index:2}
@keyframes clickerPopupFloat{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}100%{transform:translate(-50%,-220%) scale(1.15);opacity:0}}
.clicker-machine{display:flex;flex-direction:column;align-items:center;gap:8px;width:220px;height:220px;border-radius:50%;border:1px solid #ffffff16;background:radial-gradient(circle at 35% 30%,#3a2f52,#1c1a26);color:var(--text);cursor:pointer;box-shadow:0 20px 50px #0007,inset 0 1px #ffffff0d;transition:transform .08s}
.clicker-machine:active{transform:scale(.96)}
.clicker-machine.pulse{animation:clickerPulse .28s ease-out}
@keyframes clickerPulse{0%{box-shadow:0 20px 50px #0007,0 0 0 0 #7c5cff55}60%{box-shadow:0 20px 50px #0007,0 0 0 18px #7c5cff00}}
.clicker-machine-icon{font-size:64px;animation:clickerSpin 6s linear infinite}
.clicker-machine:active .clicker-machine-icon{animation-duration:.6s}
@keyframes clickerSpin{to{transform:rotate(360deg)}}
.clicker-machine-count{font-size:26px;font-weight:900}
.clicker-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.clicker-shop-item{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025)}
.clicker-shop-item.owned{border-color:rgba(82,223,139,.42);background:linear-gradient(100deg,rgba(82,223,139,.08),rgba(255,255,255,.02))}
.clicker-shop-icon{font-size:30px}
.clicker-shop-copy strong{display:block;margin-bottom:2px}
.clicker-shop-copy small{color:var(--muted)}
.clicker-exchange-row{display:flex;gap:10px}
.clicker-exchange-row input{flex:1}
.clicker-cap-bar{position:relative;height:10px;margin:12px 0 6px;border-radius:6px;background:#ffffff0f;overflow:hidden}
.clicker-cap-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#ffd166,#ff9f5c);transition:width .3s ease}
@media(max-width:640px){.clicker-shop-grid{grid-template-columns:1fr}}
@media(max-width:480px){.clicker-machine{width:170px;height:170px}.clicker-machine-icon{font-size:48px}.clicker-machine-count{font-size:20px}}

/* Loot Birds -- the grid itself is a PixiJS canvas (assets/js/loot_birds_pixi.js), not DOM/CSS
   like every other game's board; this wrapper just centers and responsively scales the canvas
   the script injects into it. */
.loot-birds-canvas-wrap{display:flex;justify-content:center;margin:14px 0;min-height:120px}
.loot-birds-bonus-banner{margin:0 0 12px;padding:12px;border-radius:12px;text-align:center;font-weight:900;font-size:16px;color:#1a1508;background:linear-gradient(135deg,#ffd166,#ff9f5c);box-shadow:0 10px 26px #ff9f5c44;animation:lootBirdsBannerIn .4s ease-out}
@keyframes lootBirdsBannerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Jackpot Vault -- pulling the lever used to swap straight to result text with no buildup at
   all, the one "big rare win" moment on the site with zero suspense. The dial now spins while
   the pull is in flight (mirrors crash's buildup-before-reveal pattern) and the vault itself
   flashes gold on a win or gives a dull shake on a loss. */
.jackpot-vault-wrap{display:flex;align-items:center;justify-content:center;gap:26px;margin:18px 0}
.jackpot-vault{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#4a4d61,#1b1c26 70%);box-shadow:0 0 0 6px #0f1017,inset 0 0 20px #00000080,0 14px 30px #0008;transition:box-shadow .4s ease}
.jackpot-vault-dial{width:56px;height:56px;border-radius:50%;position:relative;background:linear-gradient(155deg,#d9d2b8,#8a8264);box-shadow:inset 0 0 0 2px #00000030}
.jackpot-vault-dial::before{content:'';position:absolute;top:4px;left:50%;width:3px;height:16px;background:#2a2a2a;transform:translateX(-50%);border-radius:2px}
.jackpot-vault.spinning .jackpot-vault-dial{animation:jackpotDialSpin 1.1s linear infinite}
.jackpot-vault.won{animation:jackpotWonPulse .6s ease 2;box-shadow:0 0 0 6px #0f1017,0 0 40px 10px #ffd166b0,inset 0 0 20px #00000080,0 14px 30px #0008}
.jackpot-vault.lost{animation:jackpotThud .4s ease}
@keyframes jackpotDialSpin{to{transform:rotate(360deg)}}
@keyframes jackpotWonPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes jackpotThud{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.jackpot-lever-track{width:26px;height:110px;border-radius:14px;position:relative;background:#1b1c26;box-shadow:inset 0 0 0 2px #00000060}
.jackpot-lever{width:26px;height:26px;border-radius:50%;position:absolute;left:0;top:0;background:linear-gradient(155deg,#e2483c,#a3251c);box-shadow:0 3px 6px #0007;transition:top .4s cubic-bezier(.34,1.56,.64,1)}
.jackpot-lever.pulled{top:84px}
@media (prefers-reduced-motion: reduce){.jackpot-vault.spinning .jackpot-vault-dial{animation:none}.jackpot-vault.won{animation:none}.jackpot-vault.lost{animation:none}.jackpot-lever{transition-duration:.05s}}