/* Rarity colours are generated dynamically in interface.php via inline <style> */

/* ── Page layout ─────────────────────────────────────────────── */
.cases_page { margin-top: 0; }

/* ── Tabs ────────────────────────────────────────────────────── */
.cases_tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 24px;
}

.cases_tab {
    background: var(--button);
    color: var(--span);
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s, color .2s;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cases_tab.active,
.cases_tab:hover { background: var(--green); color: #fff; }

.cases_tab_content { display: none; }
.cases_tab_content.active { display: block; }

/* ── Case cards ──────────────────────────────────────────────── */
.cases_cards_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 8px 0 32px;
}

.cases_card {
    position: relative;
    background: var(--card);
    border-radius: 18px;
    width: 240px;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    cursor: default;
}

.cases_card:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,.4); }

/* Gradient overlay — fades bg reel into solid card colour at bottom */
.cases_card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, var(--card) 62%);
    z-index: 1;
    pointer-events: none;
}

/* ── Background item reel ─────────────────────────────────────── */
.cases_card_bg_reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.cases_card_bg_track {
    display: flex;
    gap: 8px;
    padding: 10px 8px;
    align-items: center;
    will-change: transform;
    animation: cases_card_bg_scroll linear infinite;
}

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

/* Reel variant — compact cases_item_card inside bg reel */
.cases_item_card--reel {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    opacity: 0.78;
    flex-shrink: 0;
}
.cases_item_card--reel::before { height: 18px; }
.cases_item_card--reel::after  { bottom: 18px; }
.cases_item_card--reel .cases_item_card_name { height: 18px; line-height: 18px; font-size: .5rem; }
.cases_item_card--reel img { width: 46px; height: 40px; object-fit: contain; position: relative; z-index: 2; }
.cases_item_card--reel .cases_item_card_placeholder { width: 42px; height: 36px; font-size: .75rem; }

/* ── Card content (above gradient) ───────────────────────────── */
.cases_card_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 20px 20px;
}

.cases_case_price_badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

.cases_card_name { font-weight: 700; font-size: 1.05rem; color: var(--text-default); text-align: center; }
.cases_card_count { font-size: .8rem; color: var(--span-middle); }

.cases_open_btn { width: 100%; margin-top: 4px; font-size: .85rem; }
.cases_open_btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Roll overlay ────────────────────────────────────────────── */
.cases_roll_overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.82);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}

.cases_roll_box {
    background: var(--card);
    border-radius: 20px;
    padding: 32px 0 28px;
    width: min(900px, 98vw);
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}

.cases_roll_title {
    font-weight: 700; font-size: 1.15rem; color: var(--text-default);
    padding: 0 28px;
}

.cases_confirm_cost {
    margin: 0;
    color: var(--text-default);
    text-align: center;
    font-size: .92rem;
    line-height: 1.45;
}

.cases_confirm_cost strong {
    color: var(--theme);
    font-weight: 700;
}

.cases_reel_outer {
    position: relative;
    width: 100%; height: 144px;
    overflow: hidden;
    background: var(--button);
    border-top: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.04);
}

/* Fade masks on left/right edges */
.cases_reel_outer::before,
.cases_reel_outer::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 120px;
    z-index: 4; pointer-events: none;
}
.cases_reel_outer::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.cases_reel_outer::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

.cases_reel_track { display: flex; gap: 8px; padding: 8px; will-change: transform; }

/* Item card — 4:3 landscape (160×120) */
.cases_reel_item {
    flex-shrink: 0;
    position: relative;
    width: 160px; height: 120px;
    border-radius: 0;
    background: var(--bg);
    overflow: hidden;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
}

/* Rarity color strip — solid bar at the bottom, base layer */
.cases_reel_item::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22px;
    background: var(--rc, #9e9e9e);
    z-index: 0;
}

/* Rarity gradient — fades from strip upward to transparent at ~55% */
.cases_reel_item::after {
    content: '';
    position: absolute;
    bottom: 22px; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, var(--rc, #9e9e9e), transparent);
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
}

.cases_reel_item img {
    position: relative;
    z-index: 2;
    width: 88px; height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.cases_reel_item_placeholder {
    position: relative;
    z-index: 2;
    width: 64px; height: 64px;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff;
    margin-top: 4px;
}

/* Name label sits inside the colored strip */
.cases_reel_item span {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22px;
    line-height: 22px;
    z-index: 3;
    font-size: .6rem; font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.cases_reel_cursor {
    position: absolute;
    left: 50%; top: 0; bottom: 0; width: 3px;
    transform: translateX(-50%);
    background: #ff9800;
    box-shadow: 0 0 12px #ff9800;
    pointer-events: none; z-index: 5;
}

/* ── Result dedicated modal ──────────────────────────────────── */
.cases_result_modal_overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.82);
    z-index: 9100;
    display: flex; align-items: center; justify-content: center;
    animation: cases_fade_in .2s ease;
}

.cases_result_modal_box {
    position: relative;
    background: var(--card);
    border-radius: 24px;
    padding: 48px 56px 40px;
    min-width: 320px; max-width: min(480px, 95vw);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
    overflow: hidden;
    animation: cases_scale_in .35s cubic-bezier(.34,1.56,.64,1);
}

.cases_result_modal_glow {
    position: absolute; inset: -80px;
    border-radius: 50%; filter: blur(60px);
    opacity: 0.2; pointer-events: none;
    /* animation applied by JS with per-item intensity */
}

@keyframes cases_result_glow_pulse {
    0%, 100% {
        opacity: var(--glow-min, 0.15);
        transform: scale(1);
    }
    50% {
        opacity: var(--glow-max, 0.4);
        transform: scale(var(--glow-scale, 1.1));
    }
}

/* Tier 3 (epic): outer box pulses */
.cases_glow_tier_3 {
    animation: cases_result_box_pulse 0.8s ease-in-out infinite;
}

/* Tier 4 (legendary): outer box pulses fast + extra ring */
.cases_glow_tier_4 {
    animation: cases_result_box_pulse 0.45s ease-in-out infinite;
}

@keyframes cases_result_box_pulse {
    0%, 100% { box-shadow: 0 0 0px transparent; }
    50%       { box-shadow: 0 0 55px var(--glow-color), 0 0 110px var(--glow-color); }
}

.cases_result_modal_label {
    position: relative; z-index: 1;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--span-middle); margin-bottom: 4px;
}

.cases_result_modal_img { position: relative; z-index: 1; }
.cases_result_modal_img img {
    width: 140px; height: 140px; object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.5));
}
.cases_result_modal_placeholder {
    width: 140px; height: 140px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 2.4rem; color: #fff;
}

.cases_result_modal_name {
    position: relative; z-index: 1;
    font-weight: 800; font-size: 1.4rem; color: var(--text-default);
    line-height: 1.2;
}

.cases_result_modal_rarity {
    position: relative; z-index: 1;
    font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
}

.cases_result_modal_close {
    position: relative; z-index: 1;
    margin-top: 12px;
}

/* ── Shared item card ─────────────────────────────────────────── */
.cases_item_card {
    position: relative;
    background: var(--bg);
    overflow: hidden;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
}

/* Rarity color strip — base layer */
.cases_item_card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22px;
    background: var(--rc, #555);
    z-index: 0;
}

/* Rarity gradient — fades upward from strip */
.cases_item_card::after {
    content: '';
    position: absolute;
    bottom: 22px; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, var(--rc, #555), transparent);
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}

.cases_item_card img {
    position: relative;
    z-index: 2;
    object-fit: contain;
    display: block;
}

.cases_item_card_placeholder {
    position: relative;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
}

/* Name in strip */
.cases_item_card_name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22px; line-height: 22px;
    z-index: 3;
    font-size: .6rem; font-weight: 700;
    color: #fff; text-align: center;
    padding: 0 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* sm — picker modal */
.cases_item_card--sm { width: 130px; height: 98px; }
.cases_item_card--sm img { width: 88px; height: 62px; }
.cases_item_card--sm .cases_item_card_placeholder { width: 62px; height: 52px; font-size: .9rem; }

/* md — normal shop + admin pool */
.cases_item_card--md { width: 160px; height: 120px; }
.cases_item_card--md img { width: 108px; height: 80px; }
.cases_item_card--md .cases_item_card_placeholder { width: 80px; height: 68px; font-size: 1.1rem; }

/* lg — featured shop */
.cases_item_card--lg { width: 200px; height: 150px; }
.cases_item_card--lg::before { height: 26px; }
.cases_item_card--lg::after  { bottom: 26px; }
.cases_item_card--lg .cases_item_card_name { height: 26px; line-height: 26px; font-size: .68rem; }
.cases_item_card--lg img { width: 136px; height: 100px; }
.cases_item_card--lg .cases_item_card_placeholder { width: 100px; height: 84px; font-size: 1.5rem; }

/* xl — featured shop (large left column) */
.cases_item_card--xl { width: 280px; height: 210px; }
.cases_item_card--xl::before { height: 30px; }
.cases_item_card--xl::after  { bottom: 30px; }
.cases_item_card--xl .cases_item_card_name { height: 30px; line-height: 30px; font-size: .75rem; }
.cases_item_card--xl img { width: 180px; height: 130px; }
.cases_item_card--xl .cases_item_card_placeholder { width: 140px; height: 110px; font-size: 2rem; }

/* Empty slot variant */
.cases_item_card--empty { background: var(--button); }
.cases_item_card--empty::before { background: var(--button); }
.cases_item_card--empty::after  { display: none; }
.cases_item_card_empty_icon {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    opacity: .3; color: var(--span);
}
.cases_item_card_empty_icon svg { width: 28px; height: 28px; }
.cases_item_card_empty_icon span { font-size: .72rem; }

/* Price tag — top-left inside card */
.cases_item_card_price {
    position: absolute;
    top: 7px; left: 7px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: 3px 8px;
    z-index: 4;
    backdrop-filter: blur(4px);
    letter-spacing: .03em;
}

/* Featured badge */
.cases_item_card_badge {
    position: absolute; top: 6px; right: 6px;
    background: #ff9800; color: #fff;
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: 2px 7px;
    z-index: 4;
}

/* Hover lift for shop */
.cases_item_card--shop { transition: transform .18s; cursor: pointer; }
.cases_item_card--shop:hover { transform: translateY(-3px); }
.cases_item_card--shop.cases_item_card--buying {
    opacity: .72;
    pointer-events: none;
}
.cases_item_card--shop.cases_item_card--purchased {
    box-shadow: inset 0 0 0 2px rgba(76,175,80,.65);
}

/* Admin overlay with edit/delete on hover */
.cases_item_card_admin { cursor: pointer; }
.cases_item_card_actions {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.72);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity .15s;
    z-index: 10;
}
.cases_item_card_admin:hover .cases_item_card_actions { opacity: 1; }

/* Selected state (picker multi-select) */
.cases_item_card--selected { box-shadow: inset 0 0 0 2px var(--rc, #9e9e9e); }
.cases_item_card_check {
    position: absolute; top: 5px; right: 5px;
    width: 18px; height: 18px;
    background: rgba(0,0,0,.65);
    display: none; align-items: center; justify-content: center;
    z-index: 10; font-size: 11px; color: #fff;
    border-radius: 50%;
}
.cases_item_card--selected .cases_item_card_check { display: flex; }

/* ── Item pool toolbar ────────────────────────────────────────── */
.cases_items_toolbar {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 20px;
}

.cases_items_filters {
    display: flex; gap: 7px; flex-wrap: wrap;
}

.cases_filter_btn {
    background: var(--button);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--span);
    font-size: .75rem; font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-transform: uppercase; letter-spacing: .05em;
}
.cases_filter_btn:hover { background: var(--bg); color: var(--text-default); }
.cases_filter_btn.active { background: var(--bg); color: var(--text-default); border-color: currentColor; }

.cases_items_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* ── Daily shop ───────────────────────────────────────────────── */
.cases_shop_header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}

.cases_shop_title { font-weight: 700; font-size: 1.2rem; color: var(--text-default); }
.cases_shop_reset { font-size: .85rem; color: var(--span-middle); }

.cases_timer_value {
    font-weight: 700; font-variant-numeric: tabular-nums; color: #ff9800;
}

.cases_shop_label {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--span-middle); margin-bottom: 12px;
}

/*
 * Shop layout — 3 equal columns:
 *   [Featured 1 — 1/3]  [Featured 2 — 1/3]  [2×2 normal — 1/3]
 *
 * All three columns are the same width.
 * The featured cards are fluid (width:100%, height:var(--shop-h)).
 * The normal 2×2 grid fills that same height, each cell = half width × half height.
 */
:root { --shop-h: 320px; }

.cases_shop_layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 32px;
}

/* Featured slot: stretches card to fill the column */
.cases_shop_featured_slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

/* Fluid featured card: fills column width, fixed height */
.cases_item_card--featured-fluid {
    width: 100%;
    height: var(--shop-h);
}
.cases_item_card--featured-fluid::before { height: 28px; }
.cases_item_card--featured-fluid::after  { bottom: 28px; }
.cases_item_card--featured-fluid .cases_item_card_name { height: 28px; line-height: 28px; font-size: .72rem; }
.cases_item_card--featured-fluid img { width: 65%; height: 65%; object-fit: contain; }
.cases_item_card--featured-fluid .cases_item_card_placeholder { width: 50%; height: 50%; font-size: 1.6rem; }

/* Normal column: 2×2 grid matching the same total height */
.cases_shop_normal_col { min-width: 0; }
.cases_shop_normal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, calc((var(--shop-h) - 10px) / 2));
    gap: 10px;
}

/* Normal shop cards fill their grid cell */
.cases_shop_normal .cases_shop_slot_wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}
.cases_shop_normal .cases_item_card {
    width: 100%;
    flex: 1;
    min-height: 0;
}
.cases_shop_normal .cases_item_card::before { height: 20px; }
.cases_shop_normal .cases_item_card::after  { bottom: 20px; }
.cases_shop_normal .cases_item_card .cases_item_card_name { height: 20px; line-height: 20px; font-size: .6rem; }
.cases_shop_normal .cases_item_card img { width: 60%; height: 55%; object-fit: contain; }
.cases_shop_normal .cases_item_card .cases_item_card_placeholder { width: 45%; height: 45%; font-size: .9rem; }

.cases_shop_slot_wrap {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}

/* ── Admin sections ──────────────────────────────────────────── */
.cases_admin_section {
    background: var(--card); border-radius: 16px;
    padding: 24px; margin: 16px 0 24px;
}

.cases_admin_header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; font-weight: 700; font-size: 1.05rem; color: var(--text-default);
}

.cases_admin_table { width: 100%; border-collapse: collapse; font-size: .88rem; color: var(--span); }

.cases_admin_table th {
    text-align: left; padding: 8px 12px;
    border-bottom: 1px solid var(--border-bottom-line);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--span-middle); font-weight: 600;
}

.cases_admin_table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-bottom-line);
    vertical-align: middle;
}

.cases_rarity_dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 6px; vertical-align: middle;
    /* background set via inline style */
}

/* Rarity swatch (colour preview square in table) */
.cases_rarity_swatch {
    display: inline-block;
    width: 20px; height: 20px; border-radius: 4px;
    vertical-align: middle;
}

/* Rarity total indicators */
.cases_rarity_warning {
    background: rgba(255,152,0,.12);
    border: 1px solid rgba(255,152,0,.4);
    border-radius: 8px; padding: 10px 14px;
    font-size: .87rem; color: var(--span);
    margin-bottom: 16px;
}

.cases_rarity_ok {
    background: rgba(76,175,80,.1);
    border: 1px solid rgba(76,175,80,.35);
    border-radius: 8px; padding: 10px 14px;
    font-size: .87rem; color: var(--span);
    margin-bottom: 16px;
}

.cases_badge_featured {
    background: #ff9800; color: #fff;
    font-size: .65rem; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .06em;
}

.cases_btn_sm { font-size: .78rem; padding: 5px 12px; margin-right: 4px; }
.cases_btn_danger { color: var(--red) !important; }

/* Icon-only action buttons */
.cases_icon_btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--button);
    border: none; border-radius: 8px;
    color: var(--span);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.cases_icon_btn svg { width: 16px; height: 16px; }
.cases_icon_btn:hover { background: var(--bg); color: var(--text-default); }
.cases_icon_btn--danger { color: var(--red); }
.cases_icon_btn--danger:hover { background: rgba(255,80,80,.12); color: var(--red); }

/* Admin modals */
.cases_modal_overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 8000;
    display: flex; align-items: center; justify-content: center;
}

.cases_modal_box {
    background: var(--card); border-radius: 16px; padding: 28px;
    width: min(480px, 95vw); max-height: 90vh; overflow-y: auto;
}

.cases_modal_title { font-weight: 700; font-size: 1.05rem; margin-bottom: 20px; color: var(--text-default); }

.cases_form_row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.cases_form_row label {
    font-size: .8rem; font-weight: 600;
    color: var(--span-middle); text-transform: uppercase; letter-spacing: .06em;
}

.cases_form_check { flex-direction: row; align-items: center; }
.cases_form_check label { text-transform: none; letter-spacing: normal; font-size: .88rem; color: var(--span); gap: 8px; display: flex; align-items: center; }

.cases_input {
    background: var(--input-form); border: 1px solid var(--button);
    border-radius: 8px; padding: 9px 12px;
    color: var(--span); font-size: .9rem; width: 100%;
}
.cases_input:focus { outline: none; border-color: var(--green); }

/* Colour picker */
.cases_input_color {
    width: 40px; height: 38px;
    border: 1px solid var(--button); border-radius: 8px;
    background: var(--input-form); cursor: pointer; padding: 2px 4px;
    flex-shrink: 0;
}

.cases_modal_actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Image upload area */
.cases_upload_area {
    border: 2px dashed var(--button);
    border-radius: 10px; padding: 18px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; transition: border-color .2s, background .2s;
    color: var(--span-middle); text-align: center;
}
.cases_upload_area:hover { border-color: var(--green); background: rgba(0,0,0,.04); }

.cases_upload_icon { width: 24px; height: 24px; color: var(--span-middle); }

.cases_upload_hint { font-size: .74rem; opacity: .55; }

.cases_upload_preview {
    margin-top: 8px; max-height: 80px; border-radius: 8px;
    object-fit: contain; border: 1px solid var(--button);
}

/* Cases config */
.cases_config_block { border: 1px solid var(--border-bottom-line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.cases_config_title { font-weight: 700; font-size: .95rem; margin-bottom: 14px; color: var(--text-default); }
.cases_config_row { display: flex; gap: 24px; flex-wrap: wrap; }
.cases_config_current, .cases_config_add { flex: 1 1 220px; }

.cases_config_label {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--span-middle); font-weight: 600; margin-bottom: 8px;
}

.cases_config_chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 36px; }

.cases_chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 12px; border-radius: 20px;
    font-size: .78rem; font-weight: 600; color: #fff;
    background: var(--button); border: 1px solid transparent;
    /* border-color set by inline style in cases_config.php */
}

.cases_chip_remove {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; opacity: .7;
}
.cases_chip_remove:hover { opacity: 1; }
.cases_empty_chip { opacity: .4; font-size: .82rem; color: var(--span); }

/* Schedule */
.cases_sched_day {
    margin-bottom: 28px;
}
.cases_sched_day_label {
    font-weight: 700; font-size: .88rem; color: var(--text-default);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-bottom-line);
}

/* Clear button overlaid inside a schedule slot card */
.cases_sched_clear_btn {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 5;
    background: rgba(0,0,0,.6);
    border: none; border-radius: 50%;
    width: 22px; height: 22px;
    color: #fff; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.cases_item_card:hover .cases_sched_clear_btn { opacity: 1; }

/* Edit/remove icon overlay for scheduled-day cards */
.cases_sched_card_actions {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 5;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.cases_item_card:hover .cases_sched_card_actions { opacity: 1; }
.cases_sched_card_btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    background: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(4px);
}
.cases_sched_card_btn svg { width: 13px; height: 13px; }

/* Roll close button */
.cases_roll_close { margin-top: 4px; }

/* Skip button — subtle, sits below the reel */
.cases_roll_skip_btn {
    background: none;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: rgba(255,255,255,.4);
    font-size: .78rem;
    padding: 5px 18px;
    cursor: pointer;
    transition: color .15s, border-color .15s, opacity .7s ease;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: -8px;
    opacity: 1;
}
.cases_roll_skip_btn:hover:not(:disabled) {
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,.4);
}
.cases_roll_skip_btn.cases_skip_fading {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

/* Shop slot price */
.cases_slot_price {
    font-size: .8rem; font-weight: 700; color: var(--text-default);
    opacity: .8;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes cases_fade_up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cases_fade_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cases_scale_in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes cases_cursor_pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #ff9800; }
    50%       { opacity: .4; box-shadow: 0 0 18px #ff9800; }
}

/* Case cards — staggered entrance */
.cases_cards_grid .cases_card {
    animation: cases_fade_up .4s ease both;
}
.cases_cards_grid .cases_card:nth-child(1) { animation-delay: .04s; }
.cases_cards_grid .cases_card:nth-child(2) { animation-delay: .09s; }
.cases_cards_grid .cases_card:nth-child(3) { animation-delay: .14s; }
.cases_cards_grid .cases_card:nth-child(4) { animation-delay: .19s; }
.cases_cards_grid .cases_card:nth-child(5) { animation-delay: .24s; }
.cases_cards_grid .cases_card:nth-child(6) { animation-delay: .29s; }

/* Tab content — fade up on activation */
.cases_tab_content.active {
    animation: cases_fade_up .3s ease both;
}

/* Shop slots — staggered entrance */
.cases_shop_featured_slot { animation: cases_fade_up .38s ease both; }
.cases_shop_layout > .cases_shop_featured_slot:nth-child(1) { animation-delay: .04s; }
.cases_shop_layout > .cases_shop_featured_slot:nth-child(2) { animation-delay: .12s; }

.cases_shop_normal_col { animation: cases_fade_up .38s ease both; animation-delay: .20s; }
.cases_shop_normal .cases_shop_slot_wrap { animation: cases_fade_up .3s ease both; }
.cases_shop_normal .cases_shop_slot_wrap:nth-child(1) { animation-delay: .24s; }
.cases_shop_normal .cases_shop_slot_wrap:nth-child(2) { animation-delay: .28s; }
.cases_shop_normal .cases_shop_slot_wrap:nth-child(3) { animation-delay: .32s; }
.cases_shop_normal .cases_shop_slot_wrap:nth-child(4) { animation-delay: .36s; }

/* Roll overlay + box */
.cases_roll_overlay { animation: cases_fade_in .18s ease; }
.cases_roll_box     { animation: cases_scale_in .25s cubic-bezier(.34,1.56,.64,1); }

/* Modal box */
.cases_modal_box { animation: cases_scale_in .22s cubic-bezier(.34,1.56,.64,1); }

/* Admin section entrance */
.cases_admin_section { animation: cases_fade_up .35s ease both; }

/* Reel cursor — pulse while spinning */
.cases_reel_cursor { animation: cases_cursor_pulse 1s ease-in-out infinite; }

/* ── Confirm modal ───────────────────────────────────────────────────────── */
.cases_confirm_box {
    background: var(--card); border-radius: 20px;
    padding: 32px 28px 24px; width: min(740px, 96vw);
    max-height: 84vh; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    animation: cases_scale_in .25s cubic-bezier(.34,1.56,.64,1);
}
.cases_confirm_box .cases_modal_title { font-size: 1.2rem; margin-bottom: 0; }
.cases_confirm_sub { color: var(--span-middle); font-size: .88rem; margin: 0; }
.cases_confirm_box .cases_contents_grid {
    justify-content: center;
    padding: 8px 0 4px;
}

.cases_shop_confirm_box .cases_modal_title {
    line-height: 1.4;
}

.cases_shop_confirm_box .cases_modal_title strong {
    color: var(--text-default);
    font-weight: 800;
}

.cases_shop_confirm_preview {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.cases_item_card--shop_preview {
    width: 220px;
    height: 170px;
}

.cases_item_card--shop_preview img {
    width: 130px;
    height: 110px;
}

.cases_item_card--shop_preview .cases_item_card_placeholder {
    width: 90px;
    height: 90px;
    font-size: 1.5rem;
}

.cases_item_card--shop_preview .cases_item_card_name {
    height: 26px;
    line-height: 26px;
    font-size: .78rem;
}

.cases_shop_confirm_actions {
    justify-content: center;
    margin-top: 10px;
}

.cases_confirm_cost--error {
    color: #ff6b6b;
}

.cases_confirm_cost--error strong {
    color: #ff6b6b;
}

/* ── Case contents modal ─────────────────────────────────────────────────── */
.cases_contents_box {
    background: var(--card); border-radius: 20px;
    padding: 28px 28px 22px;
    width: min(820px, 96vw); max-height: 84vh;
    display: flex; flex-direction: column;
    animation: cases_scale_in .25s cubic-bezier(.34,1.56,.64,1);
}
.cases_contents_box .cases_modal_title { font-size: 1.1rem; margin-bottom: 0; }
.cases_contents_grid {
    flex: 1; overflow-y: auto;
    display: flex; flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 18px 0 10px;
}

/* ── Item picker modal ───────────────────────────────────────────────────── */
.cases_picker_box {
    background: var(--card); border-radius: 20px;
    width: min(860px, 96vw); max-height: 84vh;
    display: flex; flex-direction: column; overflow: hidden;
    animation: cases_scale_in .25s cubic-bezier(.34,1.56,.64,1);
}

.cases_picker_header {
    padding: 20px 24px 16px; flex-shrink: 0;
    border-bottom: 1px solid var(--border-bottom-line);
    display: flex; flex-direction: column; gap: 12px;
}

.cases_picker_grid {
    flex: 1; overflow-y: auto; padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    align-content: start;
}

.cases_picker_footer {
    padding: 14px 24px; flex-shrink: 0;
    border-top: 1px solid var(--border-bottom-line);
    display: flex; justify-content: flex-end; gap: 10px;
}

.cases_picker_item {
    background: var(--button);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 8px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    cursor: pointer;
    transition: border-color .12s, transform .12s, background .12s;
    text-align: center; user-select: none;
}
.cases_picker_item:hover   { transform: translateY(-2px); background: var(--bg); }
.cases_picker_item.selected { background: var(--bg); }

.cases_picker_item img {
    width: 60px; height: 60px; object-fit: contain; border-radius: 8px;
}

.cases_picker_thumb {
    width: 60px; height: 60px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; color: #fff;
}

.cases_picker_info {
    display: flex; flex-direction: column; gap: 3px; width: 100%;
}

.cases_picker_name {
    font-size: .76rem; font-weight: 600; color: var(--text-default);
    line-height: 1.2; word-break: break-word;
}

.cases_picker_rarity {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}

.cases_picker_price {
    font-size: .7rem; color: var(--span-middle); font-weight: 600;
}

/* ── Schedule slot row ───────────────────────────────────────────────────── */
.cases_sched_slot_row {
    display: flex; gap: 8px; align-items: center;
}
.cases_sched_pick_btn {
    flex: 1; display: flex; align-items: center; gap: 8px;
    text-align: left; overflow: hidden;
}
.cases_sched_pick_btn span {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .88rem;
}

/* ── Open ×3 button ──────────────────────────────────────────────────────── */
.cases_open3_btn {
    background: linear-gradient(135deg, #1a3a1a, #1e4d1e) !important;
    border-color: var(--green) !important;
    color: var(--green) !important;
}
.cases_open3_btn:hover {
    background: var(--green) !important;
    color: #fff !important;
}

/* ── Multi-roll overlay ──────────────────────────────────────────────────── */
.cases_multi_roll_overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    animation: cases_fade_in .18s ease;
}
.cases_multi_roll_box {
    background: var(--card);
    border-radius: 20px;
    padding: 24px 0 24px;
    width: min(900px, 98vw);
    display: flex; flex-direction: column; gap: 16px;
    animation: cases_scale_in .25s cubic-bezier(.34,1.56,.64,1);
}
.cases_multi_roll_header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
}
.cases_multi_reels {
    display: flex; flex-direction: column; gap: 10px;
}
.cases_multi_reel_row {
    position: relative;
}
/* Smaller reel variant for multi-roll */
.cases_reel_outer--multi {
    height: 104px;
}
.cases_reel_outer--multi .cases_reel_item {
    width: 130px; height: 96px;
    padding-top: 4px;
}
.cases_reel_outer--multi .cases_reel_item img {
    width: 70px; height: 60px;
}
.cases_reel_outer--multi .cases_reel_item_placeholder {
    width: 54px; height: 50px;
}
.cases_reel_outer--multi .cases_reel_item::before { height: 18px; }
.cases_reel_outer--multi .cases_reel_item::after  { bottom: 18px; }
.cases_reel_outer--multi .cases_reel_item span    { height: 18px; line-height: 18px; font-size: .55rem; }

/* ── Multi-result modal ──────────────────────────────────────────────────── */
.cases_multi_result_box {
    background: var(--card);
    border-radius: 20px;
    padding: 28px 32px 24px;
    width: min(740px, 96vw);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    animation: cases_scale_in .28s cubic-bezier(.34,1.56,.64,1);
}
.cases_multi_result_cards {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
.cases_multi_result_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cases_multi_result_card_name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-default);
    text-align: center;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cases_multi_result_card_rarity {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}