/* Shared blue-metal theme inspired by the reference image. */
:root {
    --theme-ink: #07172b;
    --theme-panel: #0b2b50;
    --theme-panel-raised: #104478;
    --theme-panel-light: #17619a;
    --theme-blue: #147db5;
    --theme-cyan: #27d4df;
    --theme-cyan-soft: #8ef5ed;
    --theme-silver: #bccbd1;
    --theme-silver-light: #e3edf0;
    --theme-green: #35ad69;
    --theme-green-dark: #167342;
    --theme-gold: #ffd43b;
}

html { min-height: 100%; background: #98a9b0; }
body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    color: #eaf8ff !important;
    background: transparent !important;
}
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(4, 73, 151, .10), rgba(3, 38, 104, .22)),
        url("/images/ui/pack-page-background.webp");
    background-position: center 42%;
    background-size: cover;
    background-repeat: no-repeat;
}

body, button, input, select, textarea { font-family: 'Kanit', sans-serif; }
h1, h2, h3, h4 { color: #eafaff; }
a:not(nav a) { color: var(--theme-cyan-soft); }
a:not(nav a):hover { color: white; }

nav {
    background: linear-gradient(180deg, #176c9d 0%, #0e3c68 42%, #09294d 100%) !important;
    border-bottom: 2px solid var(--theme-cyan) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .22) !important;
}
.main-content, .guide-container {
    box-sizing: border-box;
    background: linear-gradient(150deg, rgba(15, 67, 111, .88), rgba(6, 30, 59, .93)) !important;
    border: 2px solid rgba(199, 224, 231, .78);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(4, 17, 28, .42), inset 0 1px rgba(255,255,255,.16);
}
.main-content { max-width: 1180px; width: calc(100% - 40px); }
.leaderboard-page .leaderboard-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.guide-container { padding: 24px !important; }
nav a { color: #dcf5ff !important; }
nav a:hover, .username-display { color: var(--theme-cyan) !important; }
.logout-link { color: #ff8178 !important; }
.user-status-top {
    background: linear-gradient(180deg, rgba(4, 28, 52, .8), rgba(7, 43, 73, .9)) !important;
    border: 1px solid rgba(89, 226, 235, .55) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 8px #061326;
}
.coins-display, .coin-icon, .wealth-amount, .price-tag { color: var(--theme-gold) !important; }
.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #eafaff !important;
    line-height: 0;
    text-decoration: none;
}
.notification-bell-picture, .notification-bell-image { display:block; width:100%; height:auto; }
.notification-bell-image { object-fit:contain; }
.notification-bell:hover { border:0 !important; background:transparent !important; filter:brightness(1.08); }
@media (max-width: 760px) {
    .notification-bell { width:36px !important; min-width:36px !important; min-height:0 !important; padding:0 !important; }
}
.nav-links .admin-nav-link {
    padding: 7px 12px;
    border: 1px solid rgba(255, 212, 59, .65);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(135, 95, 20, .55), rgba(76, 51, 8, .65));
    color: #ffe27b !important;
    font-weight: 700;
}
.nav-links .admin-nav-link:hover { border-color: #fff0a0; background: linear-gradient(180deg, #98722a, #62440e); color: white !important; }
.notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 4px;
    border: 1px solid #ffe8a1;
    border-radius: 999px;
    background: #e94f59;
    color: white;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(0,0,0,.4);
}
.notification-badge[hidden] { display: none; }
.notifications-page { min-height: 65vh; padding: clamp(20px, 4vw, 42px) !important; }
.notifications-header { margin: 0 auto 26px; text-align: center; }
.notifications-header h1 { margin: 4px 0 8px; color: var(--theme-cyan-soft) !important; }
.notifications-header p { margin: 0; color: #b9d2df; }
.notifications-header .notifications-eyebrow { color: var(--theme-gold); font-size: .86rem; letter-spacing: .06em; }
.notifications-list { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(92, 199, 218, .48);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(12, 54, 91, .9), rgba(6, 31, 58, .95));
    box-shadow: 0 7px 18px rgba(0,0,0,.2);
}
.notification-sale { border-left: 4px solid #39c88a; }
.notification-admin-mail { border-left:4px solid #f4c84c; }
.notification-admin-mail.is-unread { border-color:rgba(255,220,112,.72); background:linear-gradient(145deg,rgba(37,58,79,.96),rgba(14,35,59,.98)); box-shadow:0 0 18px rgba(255,214,91,.09),0 7px 18px rgba(0,0,0,.2); }
.notification-mail-hint { color:#f1d98d !important; }
.notification-open-mail { margin-top:10px; min-height:38px; padding:7px 14px; border:1px solid rgba(255,220,112,.55); border-radius:9px; background:linear-gradient(135deg,#8b6a1e,#58410f); color:#fff3c4; font:700 14px 'Kanit',sans-serif; cursor:pointer; }
.notification-open-mail:hover { filter:brightness(1.15); }
.notification-open-mail:disabled { opacity:.65; cursor:wait; }
.notification-card-image { width: 62px; height: 86px; flex: none; object-fit: contain; border-radius: 6px; background: #06182b; }
.notification-content { min-width: 0; flex: 1; }
.notification-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notification-title-row h2 { margin: 0; color: #eafaff; font-size: 1.05rem; }
.notification-title-row time { flex: none; color: #91afc0; font-size: .78rem; }
.notification-content p { margin: 5px 0 0; color: #bed3df; }
.notification-content .notification-sale-detail { margin-top: 10px; line-height: 1.8; }
.notification-sale-detail strong { color: #f3fbff; }
.notification-sale-detail .notification-net { color: var(--theme-gold); }
.notifications-empty { max-width: 600px; margin: 55px auto; padding: 34px 20px; border: 1px dashed rgba(122,198,215,.48); border-radius: 14px; color: #bad0de; text-align: center; }
.notifications-empty > span { font-size: 38px; }
.notifications-empty h2 { margin: 8px 0; color: #eafaff; }
.notifications-empty a { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: 9px; background: #148c74; color: white !important; text-decoration: none; }

/* Daily reward: present three identical backs, then focus the chosen card. */
.daily-bonus-card {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% -35%, rgba(64, 212, 229, .2), transparent 65%), linear-gradient(145deg, #104878, #082548) !important;
    border: 1px solid rgba(90, 224, 236, .75) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.15) !important;
}
.daily-bonus-card h3 { margin: 0 0 8px; color: #f3fbff; text-shadow: 0 2px 12px rgba(39,212,223,.24); }
.daily-bonus-card > p { color: #b8d4e4; }
.energy-cards { gap: clamp(16px, 4vw, 34px); margin-top: 24px; -webkit-perspective: 1000px; }
.energy-card {
    position: relative;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: daily-card-hover 3.4s ease-in-out infinite;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .35s ease;
}
.energy-card:nth-child(2) { animation-delay: -.8s; }
.energy-card:nth-child(3) { animation-delay: -1.6s; }
.energy-inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.75,.2,1); }
.energy-card.flipped .energy-inner { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.energy-back, .energy-front {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 14px !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.energy-back { transform: rotateY(0deg) translateZ(1px); }
.energy-back {
    border: 1px solid rgba(113, 231, 238, .8) !important;
    background: radial-gradient(circle at center, rgba(104,242,238,.16) 0 2px, transparent 3px) 0 0 / 18px 18px, linear-gradient(145deg, #1681a5, #0d3868 72%) !important;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.055), inset 0 0 30px rgba(42,219,231,.18) !important;
}
.energy-back::after { content: "✦"; color: #c1ffff; font-size: 42px; filter: drop-shadow(0 0 9px #37e4ec); }
.energy-front {
    border: 1px solid #fff0a8 !important;
    background: radial-gradient(circle at 50% 30%, #fff7c5, #ffd34d 65%, #e99d22) !important;
    color: #152b46 !important;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), 0 0 32px rgba(255,205,65,.5) !important;
    transform: rotateY(180deg) translateZ(1px);
    flex-direction: column;
    gap: 3px;
    font-size: 24px;
    font-weight: 900;
}
.daily-reward-amount { display: block; font-size: clamp(21px, 5vw, 29px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.daily-reward-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.energy-card:hover:not(.flipped) { transform: translateY(-9px) scale(1.045); }
.energy-card.is-selected { z-index: 2; animation: none; transform: translateY(-9px) scale(1.07); }
.energy-card.is-selected .energy-inner { filter: drop-shadow(0 0 22px rgba(77,242,245,.65)); }
.energy-card.is-dismissed { pointer-events: none; opacity: .24; filter: grayscale(.7); transform: scale(.94); }
.daily-bonus-card.is-revealing .energy-card.is-selected:not(.flipped) { animation: daily-card-pulse .8s ease-in-out infinite alternate; }
.daily-bonus-card.is-claimed .energy-card.is-dismissed { opacity: .12; }
@keyframes daily-card-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes daily-card-pulse { from { filter: drop-shadow(0 0 5px rgba(77,242,245,.35)); } to { filter: drop-shadow(0 0 21px rgba(77,242,245,.9)); } }
@media (prefers-reduced-motion: reduce) {
    .energy-card, .energy-inner, .daily-bonus-card.is-revealing .energy-card.is-selected:not(.flipped) { animation: none !important; transition-duration: .01ms !important; }
}

.pack-group, .daily-bonus-card, .wealth-dashboard, .upgrade-container,
.game-card, .leaderboard-wrapper, .guide-step, .step-card,
.collection-container, .col-set-section, .market-panel, .modal-content,
.auth-container, .alert-box, .card-list-modal {
    background: linear-gradient(150deg, rgba(17, 76, 125, .97), rgba(7, 35, 68, .98)) !important;
    border-color: rgba(50, 212, 224, .72) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .42), inset 0 1px rgba(220, 250, 255, .14) !important;
}
.loader { background: linear-gradient(150deg, #104878, #071f3e) !important; border-color: #6edce6 !important; }
.loader p, .loader .stats, .loader #detail { color: #d2edf5 !important; }
.pack-group { border: 1px solid rgba(73, 206, 224, .5); }
.pack-group h2, .collection-container h2 { color: var(--theme-cyan) !important; border-color: var(--theme-cyan) !important; }
.pack-option, .inventory-item, .selectable-card, .energy-card, .game-card,
.col-card-slot, .listing-card {
    background: linear-gradient(155deg, #15558a, #0a2e56) !important;
    border-color: rgba(155, 207, 222, .72) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 7px 18px rgba(0,0,0,.36) !important;
}
.pack-option:hover, .inventory-item:hover, .selectable-card:hover {
    border-color: var(--theme-cyan) !important;
    box-shadow: 0 0 20px rgba(39, 212, 223, .35), inset 0 1px rgba(255,255,255,.2) !important;
}
.pack-option.selected { background: linear-gradient(155deg, #17619a, #0a315d) !important; border-color: var(--theme-gold) !important; }
.inventory-item p .card-display-name, .upgrade-card-name, .seller-name { color: #effbff !important; }
.rarity-tag.pr, .rarity-tag.promo { background: #238a83 !important; color: #fff !important; }
.rarity-tag.tr { background: #318b78 !important; color: #effff8 !important; }
.rarity-tag.prs { background: #8d55bd !important; color: #fff !important; }
.rarity-tag.k { background: #75a92b !important; color: #fff !important; }
.rarity-tag.ace { background: #237db9 !important; color: #fff !important; }
.rarity-tag.chr { background: #c05d9a !important; color: #fff !important; }
.rarity-tag.csr { background: #c63f79 !important; color: #fff !important; }
.rarity-info-heading { margin: 24px 0 0; color: var(--theme-cyan) !important; }
.rarity-info-card[data-rarity="PR"] { --theme-rarity-color: #59d7c4; }
.rarity-info-card[data-rarity="TR"] { --theme-rarity-color: #68c6ae; }
.rarity-info-card[data-rarity="PRS"] { --theme-rarity-color: #c494f0; }
.rarity-info-card[data-rarity="K"] { --theme-rarity-color: #b4e56b; }
.rarity-info-card[data-rarity="ACE"] { --theme-rarity-color: #69c9f5; }
.rarity-info-card[data-rarity="CHR"] { --theme-rarity-color: #f394c9; }
.rarity-info-card[data-rarity="CSR"] { --theme-rarity-color: #ff82ad; }
.rarity-info-note { margin-top: 14px; color: #bed4df; font-size: .85rem; }
.rarity-info-note code { color: var(--theme-cyan-soft); }

.filter-btn, .col-select, .modal-filter-select, .modal-search-input,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background-color: #092746 !important;
    color: #effbff !important;
    border-color: rgba(125, 191, 211, .66) !important;
}
input::placeholder, textarea::placeholder { color: #a9c6d1 !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(39, 212, 223, .45); border-color: var(--theme-cyan) !important; }

.btn-open-inner, .btn-action, .btn-upgrade, .btn-spin, .btn-confirm,
.btn-ui-green, .btn-start, #close-reveal, .btn-submit, .btn-login, .btn-register,
.btn-primary, .btn-buy, .btn-buy-card, .btn-redeem {
    background: linear-gradient(180deg, #54d58d 0%, #27985b 48%, #187445 100%) !important;
    color: #f5fff9 !important;
    border: 1px solid #a5ffd0 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.42), 0 4px 0 #0b5031, 0 7px 15px rgba(0,0,0,.3) !important;
}
/* The open-pack artwork already contains its own shape; keep the button hit area transparent. */
.btn-open-inner, .btn-open-inner:hover, .btn-open-inner:disabled, #close-reveal, #close-reveal:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    padding: 0 !important;
}
.btn-upgrade.image-button, .btn-upgrade.image-button:hover, .btn-upgrade.image-button:active, .btn-upgrade.image-button:disabled {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    padding: 0 !important;
}
.inventory-item .image-action-button, .inventory-item .image-action-button:hover,
.inventory-item .image-action-button:active, .inventory-item .image-action-button:disabled,
.inventory-item .image-action-button.btn-sell, .inventory-item .image-action-button.btn-sell:hover,
.inventory-item .image-action-button.btn-sell:active, .inventory-item .image-action-button.btn-sell:disabled {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
}
.btn-open-inner:hover, .btn-action:hover, .btn-upgrade:hover, .btn-spin:hover,
.btn-confirm:hover, .btn-primary:hover, .btn-buy:hover, .btn-redeem:hover {
    filter: brightness(1.12);
}
.filter-btn.active, .btn-action.btn-sell, .btn-ui-red { background: linear-gradient(180deg, #24a9d3, #116b9e) !important; border-color: #91edff !important; color: white !important; }
.btn-ui-gray, .btn-close, .btn-cancel-trade, .btn-action.btn-cancel { background: linear-gradient(180deg, #728b99, #405967) !important; border-color: #c0d5de !important; color: white !important; }
#confirm-cancel-btn { background: linear-gradient(180deg, #ef7165, #bc3838) !important; border-color: #ffc0b7 !important; }
button:disabled { filter: grayscale(.7); opacity: .62; }

.inventory-grid, .grid-cards, .col-card-grid { color: #eefaff; }
.upgrade-info-panel, .listing-card, .slot-display, .machine-info, .payout-info,
.col-card-slot, .col-progress-bar, .pack-summary, .filter-container {
    border-color: rgba(105, 202, 220, .45) !important;
}
.card-slot { background: linear-gradient(145deg, #0b2d52, #071c36) !important; border-color: #6da4bd !important; }
.card-slot.filled, .col-highlight { border-color: var(--theme-cyan) !important; box-shadow: 0 0 18px rgba(39, 212, 223, .25) !important; }
.plus-sign, .val-highlight { color: var(--theme-cyan) !important; }

/* Slot machine uses the same blue cabinet; payout gold remains a status color. */
.game-card { --machine-glow: rgba(39, 212, 223, .3); }
.slot-display, .slot-reel, .slot-window { background-color: #071d36 !important; border-color: rgba(88, 219, 232, .56) !important; }
.slot-reel.is-spinning, .slot-reel.is-match .slot-window { border-color: var(--theme-cyan) !important; }
.btn-spin { background: linear-gradient(180deg, #54d58d, #187445) !important; }

.modal-overlay, .game-alert, .game-alert-mask, .modal-content-mask { backdrop-filter: blur(7px); }
.mobile-nav-toggle { background: linear-gradient(180deg, #176c9d, #0a3158) !important; border-color: var(--theme-cyan) !important; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
    body::before { background-position: center 35%; }
    .main-content { width: calc(100% - 16px) !important; border-radius: 13px; }
    .guide-container { padding: 14px 12px !important; border-radius: 14px; }
    nav a { color: #e8faff !important; }
    .nav-links a { background: linear-gradient(145deg, rgba(20, 87, 139, .95), rgba(8, 42, 76, .98)) !important; border-color: rgba(55, 202, 220, .35) !important; }
    .pack-group, .upgrade-container, .collection-container, .game-card,
    .leaderboard-wrapper, .guide-container, .auth-container { box-shadow: 0 8px 22px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.1) !important; }
}

/* Keep the daily reward panel's dedicated highlight above shared panel styling. */
.daily-bonus-card {
    background: radial-gradient(ellipse at 50% -35%, rgba(64, 212, 229, .2), transparent 65%), linear-gradient(145deg, #104878, #082548) !important;
    border-color: rgba(90, 224, 236, .75) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.15) !important;
}
.daily-streak-panel { width:min(780px,100%); margin:18px auto 0; padding:14px 16px; border:1px solid rgba(123,220,229,.3); border-radius:12px; background:rgba(3,23,44,.42); text-align:left; }
.daily-streak-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.daily-streak-summary > div { display:grid; gap:2px; }
.daily-streak-summary > div span { color:#9fc3d4; font-size:.82rem; }
.daily-streak-summary > div strong { color:#fff2b2; font-size:1.12rem; }
.daily-streak-summary p { margin:0; color:#c4dbe5; font-size:.9rem; text-align:right; }
.daily-streak-summary p strong { color:var(--theme-gold); }
.daily-streak-track { height:8px; margin:11px 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.daily-streak-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2ccbbd,#ffe16c); box-shadow:0 0 12px rgba(69,225,220,.42); transition:width .5s ease; }
.daily-streak-milestones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.daily-streak-details { margin-top:8px; }
.daily-streak-details > summary { width:max-content; max-width:100%; color:#8fe8ed; font-size:.78rem; font-weight:700; cursor:pointer; }
.daily-streak-details > summary:hover { color:#fff; }
.daily-streak-details .daily-streak-milestones { margin-top:8px; }
.streak-milestone { display:grid; gap:2px; padding:7px 8px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(255,255,255,.035); color:#91aabe; font-size:.75rem; text-align:center; transition:background .2s,border-color .2s,color .2s; }
.streak-milestone strong { color:#b2c4d0; font-size:.78rem; }
.streak-milestone.is-earned { border-color:rgba(255,214,88,.65); background:rgba(255,205,58,.12); color:#ffe99a; }
.streak-milestone.is-earned strong { color:#ffe17a; }
.daily-streak-note { display:block; margin-top:8px; color:#829fb2; font-size:.75rem; text-align:center; }
.daily-bonus-card.jackpot-win { border-color:#ffe17a !important; box-shadow:0 0 30px rgba(255,214,82,.55),0 16px 36px rgba(0,0,0,.3) !important; animation:daily-jackpot-reveal .9s ease-out; }
.energy-card.jackpot { animation:none !important; }
.energy-card.jackpot .energy-front { border-color:#fff4b5 !important; background:radial-gradient(circle at 50% 22%,#fffde8,#ffe376 44%,#e58a2c) !important; box-shadow:inset 0 0 0 5px rgba(255,255,255,.35),0 0 38px rgba(255,217,87,.9) !important; }
.energy-card.jackpot::before { content:'✦  ✧  ✦'; position:absolute; z-index:4; top:-15px; left:0; width:100%; color:#fff1a1; font-size:17px; letter-spacing:5px; text-align:center; text-shadow:0 0 12px #ffc83d; pointer-events:none; animation:daily-jackpot-sparkle 1s ease-in-out infinite alternate; }
.daily-reward-streak { display:block; max-width:100%; color:#375069; font-size:clamp(8px,2vw,10px); font-weight:800; line-height:1.15; }
.daily-bonus-card.daily-bonus-completed { margin-bottom:20px !important; padding:18px clamp(12px,2vw,24px) !important; }
.daily-bonus-card.daily-bonus-completed h3 { margin-bottom:4px; font-size:1.15rem; }
.daily-bonus-card.daily-bonus-completed > p { display:none; }
.daily-bonus-card.daily-bonus-completed .daily-streak-panel { margin-top:8px; padding:10px 14px; }
.daily-bonus-card.daily-bonus-completed .daily-streak-track { height:6px; margin:8px 0; }
.daily-bonus-card.is-claimed .energy-cards { display:none !important; }
@keyframes daily-jackpot-reveal { 0% { box-shadow:0 0 0 rgba(255,214,82,0); } 45% { box-shadow:0 0 44px rgba(255,214,82,.75); } 100% { box-shadow:0 0 30px rgba(255,214,82,.55); } }
@keyframes daily-jackpot-sparkle { from { opacity:.55; transform:translateY(2px) scale(.92); } to { opacity:1; transform:translateY(-4px) scale(1.08); } }

/* Use a flat center-fold reveal to avoid 3D backface artifacts on mobile browsers. */
.energy-cards { perspective: none !important; -webkit-perspective: none !important; }
.energy-inner,
.energy-card.flipped .energy-inner {
    transform: none !important;
    -webkit-transform: none !important;
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
}
.energy-back,
.energy-front {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: opacity .08s linear;
}
.energy-front { visibility: hidden; opacity: 0; }
.energy-card.show-reward .energy-back { visibility: hidden; opacity: 0; }
.energy-card.show-reward .energy-front { visibility: visible; opacity: 1; }
.energy-card.is-flipping { animation: none !important; }
.energy-card.is-flipping .energy-inner { animation: daily-center-fold .7s cubic-bezier(.45,0,.55,1) both; }
.daily-reward-amount { color: #102b49 !important; text-shadow: 0 1px rgba(255,255,255,.45); }
.daily-reward-streak { color:#375069 !important; }
.energy-card.jackpot .energy-front { transform:none !important; }
@keyframes daily-center-fold {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    45%, 55% { transform: scaleX(.025); opacity: .35; }
}
@media (max-width: 600px) {
    .daily-streak-panel { margin-top:14px; padding:11px 9px; }
    .daily-streak-summary { align-items:flex-start; flex-direction:column; gap:4px; }
    .daily-streak-summary p { text-align:left; font-size:.82rem; }
    .daily-streak-milestones { gap:4px; }
    .streak-milestone { padding:6px 3px; font-size:.68rem; }
    .streak-milestone strong { font-size:.67rem; }
    .daily-streak-note { font-size:.68rem; }
    .daily-bonus-card.daily-bonus-completed { margin-bottom:16px !important; padding:13px 10px !important; }
    .daily-bonus-card.daily-bonus-completed h3 { font-size:1rem; }
    .daily-bonus-card.daily-bonus-completed .daily-streak-panel { margin-top:6px; padding:8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .energy-card.jackpot::before, .daily-bonus-card.jackpot-win { animation:none !important; }
}

/* Compact pack finder and expandable set groups on the home page. */
.pack-finder {
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(190px,260px) auto;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    padding:12px;
    border:1px solid rgba(88,210,225,.38);
    border-radius:12px;
    background:linear-gradient(145deg,rgba(5,34,62,.88),rgba(8,49,81,.78));
    text-align:left;
}
.pack-search-wrap { position:relative; display:flex; align-items:center; min-width:0; }
.pack-search-wrap > span { position:absolute; left:12px; color:#9ddce2; font-size:22px; line-height:1; pointer-events:none; }
.pack-search-wrap input, .pack-filter-wrap select {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:9px 12px;
    border:1px solid rgba(115,209,225,.42);
    border-radius:9px;
    background:#082847;
    color:#effaff;
    font:inherit;
}
.pack-search-wrap input { padding-left:40px; }
.pack-search-wrap input::placeholder { color:#9bb6c6; }
.pack-search-wrap input:focus, .pack-filter-wrap select:focus { outline:2px solid rgba(55,218,224,.25); border-color:#42d6df; }
.pack-filter-wrap { display:flex; align-items:center; gap:8px; min-width:0; color:#a9c9d7; font-size:.86rem; white-space:nowrap; }
.pack-search-count { color:#a9c5d4; font-size:.82rem; text-align:right; white-space:nowrap; }
.pack-search-empty { margin:10px 0; padding:22px 12px; border:1px dashed rgba(112,202,219,.45); border-radius:12px; color:#b4ccda; }
.pack-search-empty[hidden], .pack-group[hidden] { display:none !important; }
.pack-group { padding:18px !important; }
.pack-group:not([open]) { padding-bottom:12px !important; }
.pack-group-summary { display:flex; align-items:center; gap:12px; min-height:42px; cursor:pointer; list-style:none; }
.pack-group-summary::-webkit-details-marker { display:none; }
.pack-group-summary h2 { display:block !important; min-width:0; margin:0 !important; padding:0 !important; border:0 !important; color:#bffbff !important; font-size:1.15rem !important; letter-spacing:.035em !important; text-align:left; }
.pack-group-count { margin-left:auto; color:#9bb9ca; font-size:.8rem; white-space:nowrap; }
.pack-group-chevron { color:#52dce5; font-size:1.25rem; transition:transform .18s ease; }
.pack-group[open] .pack-group-chevron { transform:rotate(180deg); }
.pack-group .pack-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,190px)); justify-content:center; justify-items:center; gap:16px; }
.pack-group .pack-option { box-sizing:border-box; width:100%; max-width:190px; }
@media (max-width:760px), (orientation: landscape) and (max-height:520px) and (max-width:1024px) {
    .pack-finder { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:9px; }
    .pack-search-wrap { grid-column:1 / -1; }
    .pack-filter-wrap { gap:6px; font-size:.78rem; }
    .pack-filter-wrap select { min-height:42px; padding:8px; font-size:14px; }
    .pack-search-count { justify-self:end; font-size:.75rem; }
    .pack-group { padding:12px 10px !important; }
    .pack-group-summary { gap:7px; min-height:40px; }
    .pack-group-summary h2 { font-size:1rem !important; }
    .pack-group-count { font-size:.72rem; }
    .pack-group .pack-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
    .pack-group .pack-option { width:auto !important; }
}
@media (prefers-reduced-motion:reduce) { .pack-group-chevron { transition:none; } }

.mission-board { margin:0 0 18px; border:1px solid rgba(88,210,225,.38); border-radius:12px; background:linear-gradient(145deg,rgba(5,34,62,.88),rgba(8,49,81,.78)); text-align:left; }
.mission-board > summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 14px; color:#eafcff; cursor:pointer; list-style:none; }
.mission-board > summary::-webkit-details-marker { display:none; }
.mission-board-title { color:#8fe8ed; font-weight:900; }
.mission-board-summary { color:#a9c5d4; font-size:.88rem; }
.mission-board-chevron { margin-left:auto; color:#52dce5; font-size:1.2rem; transition:transform .18s ease; }
.mission-board[open] .mission-board-chevron { transform:rotate(180deg); }
.mission-board-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 12px 12px; }
.mission-locked-state { display:grid; gap:9px; padding:4px 16px 16px; color:#bdd0dc; }
.mission-locked-state strong { color:#ffe17a; }
.mission-locked-state small { color:#9bb8c9; }
.mission-unlock-progress { height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); }
.mission-unlock-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#31cbbd,#ffe17a); transition:width .25s ease; }
.mission-period { min-width:0; padding:11px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(1,17,33,.35); }
.mission-period > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mission-period h3 { margin:0; color:#d8f8fa; font-size:1rem; }
.mission-period > header small, .mission-empty { color:#91adc4; }
.mission-empty { margin:12px 0 4px; }
.mission-item { display:grid; grid-template-columns:minmax(0,1fr) 155px 80px 86px; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); }
.mission-item.is-claimed { opacity:.68; }
.mission-item-info { display:grid; gap:2px; min-width:0; }
.mission-item-info strong { color:#f0fbff; }
.mission-item-info span, .mission-progress-wrap small { color:#9bb8c9; font-size:.82rem; }
.mission-progress-wrap { display:grid; grid-template-columns:100px max-content; align-items:center; gap:6px; width:155px; min-width:155px; box-sizing:border-box; }
.mission-progress-wrap small { white-space:nowrap; }
.mission-progress-track { width:100px; min-width:100px; height:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); }
.mission-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#31cbbd,#7be9a2); }
.mission-reward { width:80px; color:#ffdf66; text-align:center; white-space:nowrap; }
.mission-claim-button { min-width:86px; min-height:36px; padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#213d56; color:#a7bac8; font:inherit; font-weight:800; }
.mission-claim-button.is-ready { border-color:rgba(97,237,188,.5); background:linear-gradient(180deg,#36bd84,#167b59); color:#fff; cursor:pointer; }
.mission-claim-button:disabled { cursor:default; opacity:.78; }
@media (max-width:760px), (orientation:landscape) and (max-height:520px) and (max-width:1024px) {
    .mission-board-content { grid-template-columns:minmax(0,1fr); gap:8px; padding:0 8px 8px; }
    .mission-item { grid-template-columns:minmax(0,1fr) auto; gap:6px 9px; }
    .mission-progress-wrap { grid-column:1; grid-row:2; grid-template-columns:minmax(0,1fr) max-content; width:100%; min-width:0; }
    .mission-progress-track { width:100%; min-width:0; }
    .mission-reward { grid-column:2; grid-row:1; width:auto; }
    .mission-claim-button { grid-column:2; grid-row:2; }
    .mission-period > header { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .mission-board-chevron { transition:none; } }

/* Site-wide seasonal palettes. The normal palette intentionally keeps the original look. */
body[data-site-theme="halloween"] {
    --theme-ink:#160f24;
    --theme-panel:#241631;
    --theme-panel-raised:#3b2350;
    --theme-panel-light:#59326b;
    --theme-blue:#754092;
    --theme-cyan:#ff853f;
    --theme-cyan-soft:#ffc27a;
    --theme-silver:#bcb0c5;
    --theme-silver-light:#f0e8f3;
    --theme-green:#84b94e;
    --theme-green-dark:#456d2b;
    --theme-gold:#ffd34f;
}
body[data-site-theme="christmas"] {
    --theme-ink:#071e20;
    --theme-panel:#0b3438;
    --theme-panel-raised:#12534b;
    --theme-panel-light:#1b7056;
    --theme-blue:#16745e;
    --theme-cyan:#69e4c2;
    --theme-cyan-soft:#a7f1d6;
    --theme-silver:#b8d2d0;
    --theme-silver-light:#e8f5ed;
    --theme-green:#48b879;
    --theme-green-dark:#226c47;
    --theme-gold:#ffd65a;
}
body[data-site-theme="newyear"] {
    --theme-ink:#11132e;
    --theme-panel:#1b2045;
    --theme-panel-raised:#302e68;
    --theme-panel-light:#48428a;
    --theme-blue:#4c4d9d;
    --theme-cyan:#62dff5;
    --theme-cyan-soft:#b6edff;
    --theme-silver:#bfc5e0;
    --theme-silver-light:#eef1ff;
    --theme-green:#4dc994;
    --theme-green-dark:#27795e;
    --theme-gold:#ffd45d;
}

body[data-site-theme="halloween"]::before {
    background-image:radial-gradient(ellipse at 14% 14%,rgba(255,113,47,.19),transparent 30%),radial-gradient(ellipse at 86% 76%,rgba(130,54,177,.22),transparent 34%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),linear-gradient(125deg,#171020,#2a1737 48%,#111324);
}
body[data-site-theme="christmas"]::before {
    background-image:radial-gradient(ellipse at 12% 18%,rgba(236,63,78,.18),transparent 31%),radial-gradient(ellipse at 88% 80%,rgba(89,226,174,.15),transparent 34%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px),linear-gradient(125deg,#123c37,#174b43 48%,#122d38);
}
body[data-site-theme="newyear"]::before {
    background-image:radial-gradient(circle at 18% 21%,rgba(255,208,82,.18) 0 2px,transparent 3px),radial-gradient(circle at 80% 29%,rgba(109,222,255,.2) 0 2px,transparent 3px),radial-gradient(ellipse at 18% 20%,rgba(86,69,181,.32),transparent 32%),radial-gradient(ellipse at 82% 24%,rgba(201,81,166,.2),transparent 28%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),linear-gradient(125deg,#11152f,#20204d 52%,#101b39);
}
body[data-site-theme="halloween"] nav,
body[data-site-theme="christmas"] nav,
body[data-site-theme="newyear"] nav {
    background:linear-gradient(180deg,var(--theme-panel-light),var(--theme-panel-raised) 45%,var(--theme-ink)) !important;
    border-bottom-color:var(--theme-cyan) !important;
}
body[data-site-theme="halloween"] .main-content,
body[data-site-theme="halloween"] .guide-container,
body[data-site-theme="christmas"] .main-content,
body[data-site-theme="christmas"] .guide-container,
body[data-site-theme="newyear"] .main-content,
body[data-site-theme="newyear"] .guide-container {
    background:linear-gradient(150deg,color-mix(in srgb,var(--theme-panel-raised) 91%,transparent),color-mix(in srgb,var(--theme-ink) 97%,transparent)) !important;
    border-color:color-mix(in srgb,var(--theme-cyan) 52%,white 10%) !important;
}
body[data-site-theme="halloween"] .admin-shell,
body[data-site-theme="christmas"] .admin-shell,
body[data-site-theme="newyear"] .admin-shell {
    border-color:color-mix(in srgb,var(--theme-cyan) 55%,transparent) !important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--theme-panel) 97%,transparent),color-mix(in srgb,var(--theme-ink) 98%,transparent) 58%,color-mix(in srgb,var(--theme-panel-raised) 96%,transparent)) !important;
}
body[data-site-theme="halloween"] .admin-panel,
body[data-site-theme="halloween"] .summary-tile,
body[data-site-theme="christmas"] .admin-panel,
body[data-site-theme="christmas"] .summary-tile,
body[data-site-theme="newyear"] .admin-panel,
body[data-site-theme="newyear"] .summary-tile {
    border-color:color-mix(in srgb,var(--theme-cyan) 30%,transparent) !important;
    background:color-mix(in srgb,var(--theme-ink) 78%,var(--theme-panel)) !important;
}

/* Lightweight seasonal details sit behind the interface and never capture input. */
.page-backgrounded *,
.page-backgrounded *::before,
.page-backgrounded *::after { animation-play-state: paused !important; }

.seasonal-effects {
    position:fixed;
    z-index:-1;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    contain:strict;
}
.seasonal-effects-newyear { z-index:2; }
.halloween-shadow {
    position:absolute;
    display:block;
    width:var(--icon-size);
    height:var(--icon-size);
    color:#08060d;
    opacity:var(--icon-opacity);
    filter:drop-shadow(0 0 5px rgba(255,125,52,.3));
    animation:halloween-shadow-drift var(--twinkle-time) ease-in-out var(--twinkle-delay) infinite;
}
.halloween-shadow svg { display:block; width:100%; height:100%; fill:currentColor; }
.shadow-pumpkin { color:#08070b; filter:drop-shadow(0 0 5px rgba(255,127,46,.36)); }
.shadow-bat { color:#08060d; }
@keyframes halloween-shadow-drift {
    0%,100% { opacity:.3; transform:translate3d(0,0,0) rotate(-4deg); }
    50% { opacity:var(--icon-opacity); transform:translate3d(var(--float-x),var(--float-y),0) rotate(5deg); }
}
.christmas-snowflake {
    position:absolute;
    top:-8px;
    width:var(--snow-size);
    height:var(--snow-size);
    border-radius:50%;
    background:#f4ffff;
    opacity:var(--snow-opacity);
    box-shadow:0 0 7px rgba(202,247,255,.65);
    animation:christmas-snow-fall var(--snow-duration) linear var(--snow-delay) infinite;
}
@keyframes christmas-snow-fall {
    0% { transform:translate3d(0,-5vh,0); }
    50% { transform:translate3d(var(--snow-drift),52vh,0); }
    100% { transform:translate3d(0,110vh,0); }
}
.newyear-firework {
    position:absolute;
    width:1px;
    height:1px;
    color:var(--burst-color);
}
.firework-trail {
    position:absolute;
    left:-1px;
    top:0;
    width:2px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(to top,transparent,var(--burst-color));
    box-shadow:0 0 8px var(--burst-color);
    transform:translateY(var(--rocket-drop));
    opacity:0;
    animation:firework-rocket 1.2s ease-out forwards;
}
@keyframes firework-rocket {
    0% { opacity:0; transform:translateY(var(--rocket-drop)); }
    12% { opacity:.95; }
    90%,100% { opacity:0; transform:translateY(0); }
}
.firework-particle {
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--particle-color,var(--burst-color));
    box-shadow:0 0 8px 1px var(--particle-color,var(--burst-color));
    opacity:0;
    animation:firework-burst 1.75s cubic-bezier(.14,.74,.33,1) 1s forwards;
}
@keyframes firework-burst {
    0% { opacity:0; transform:translate3d(0,0,0) scale(.1); }
    10% { opacity:1; transform:translate3d(0,0,0) scale(1.1); }
    100% { opacity:0; transform:translate3d(var(--dx),var(--dy),0) scale(.15); }
}
.firework-flash {
    position:absolute;
    left:-3px;
    top:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--burst-color);
    box-shadow:0 0 22px 9px var(--burst-color);
    opacity:0;
    animation:firework-glow .75s ease-out 1s forwards;
}
@keyframes firework-glow {
    0%,100% { opacity:0; transform:scale(.1); }
    22% { opacity:.8; transform:scale(1); }
    75% { opacity:.25; transform:scale(2.2); }
}
@media (prefers-reduced-motion:reduce) {
    .seasonal-effects { display:none; }
}