* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- MENU SCREENS (main menu, difficulty, squad, shop) ---------- */
.menu-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: radial-gradient(circle at 50% 20%, #2c3652 0%, #1e272e 70%);
    color: #d2dae2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
    overflow-y: auto;
}
.menu-screen.hidden { display: none; }
.menu-screen {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 transparent;
}
.menu-screen::-webkit-scrollbar { width: 6px; }
.menu-screen::-webkit-scrollbar-track { background: transparent; }
.menu-screen::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 3px; }
.menu-screen::-webkit-scrollbar-thumb:hover { background: #5c6a7f; }

.menu-title {
    color: #ffd93d;
    font-size: 26px;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.menu-sub {
    color: #f6e58d;
    font-size: 14px;
    margin: 0 0 10px 0;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(320px, 90vw);
}
.menu-buttons.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }

.menu-btn {
    background: #2f3640;
    color: #dcdde1;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s ease;
    touch-action: manipulation;
}
.menu-btn:hover { background: #3a4150; transform: translateY(-1px); }
.menu-btn.primary {
    background: #0fb9b1;
    color: #1e272e;
    border-color: #0fb9b1;
}
.menu-btn.primary:hover { background: #17e0d6; }
.menu-btn.primary:disabled { opacity: 0.4; cursor: default; transform: none; }
.menu-btn.small { font-size: 13px; padding: 8px 14px; background: #232830; }
.menu-btn.danger {
    background: #2f3640;
    color: #eb3b5a;
    border-color: rgba(235,59,90,0.4);
}
.menu-btn.danger:hover { background: #3a2229; border-color: #eb3b5a; }

/* ---------- tower side panel: opens on tower select, centered right of the canvas ---------- */
.tower-panel.hidden { display: none; }
.tower-panel {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 220px;
    background: #1c2027ee;
    backdrop-filter: blur(4px);
    border: 2px solid #7f8fa6;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 6;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.tp-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tp-swatch {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: 0 0 auto;
}
.tp-name { font-weight: bold; font-size: 15px; }
.tp-rarity { font-size: 11px; text-transform: uppercase; font-weight: bold; }
.tp-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    color: #dcdde1;
    background: #14161a55;
    border-radius: 8px;
    padding: 8px 10px;
}
.tower-panel .menu-btn { padding: 10px 12px; font-size: 13px; }
.tp-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #2f3640;
    color: #b2bec3;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-close:hover { background: #3a2229; color: #eb3b5a; }

.menu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 720px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 6px;
}
.squad-pick { cursor: pointer; }
.squad-pick:hover { background: #2b323c; }

.menu-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.menu-tab {
    background: #232830;
    color: #7f8fa6;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px 8px 0 0;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}
.menu-tab.active { background: #2f3640; color: #ffd93d; border-bottom: 2px solid #ffd93d; }

.shop-scroll {
    width: min(560px, 92vw);
    max-height: 58vh;
    overflow-y: auto;
    padding: 4px 8px;
}
.shop-scroll.hidden { display: none; }

.odds-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.odds-row {
    display: grid;
    grid-template-columns: 16px 1fr auto 56px;
    align-items: center;
    gap: 10px;
    background: #232830;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
}
.odds-swatch { width: 14px; height: 14px; border-radius: 50%; }
.odds-name { color: #dcdde1; }
.odds-rarity { font-size: 10.5px; font-weight: bold; text-transform: uppercase; }
.odds-pct { color: #74b9ff; font-weight: bold; text-align: right; }

.menu-coins {
    color: #f6e58d;
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 6px 0;
}

.menu-back {
    background: #232830;
    color: #7f8fa6;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    touch-action: manipulation;
}
.menu-back:hover { background: #2b323c; color: #dcdde1; }

.difficulty-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, 90vw);
}
.difficulty-list .menu-btn { text-align: left; }

.squad-hint {
    color: #7f8fa6;
    font-size: 13px;
    margin: 0 0 4px 0;
}

.shop-section { width: min(560px, 92vw); }
.shop-section h3 { margin: 16px 0 8px 0; font-size: 13px; color: #dcdde1; }

#ui-bar { position: relative; }
#menuHomeBtn {
    background: #353b48;
    color: #dcdde1;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 15px;
    cursor: pointer;
    margin-right: 4px;
    touch-action: manipulation;
}
#menuHomeBtn:hover { background: #414855; }

html, body {
    height: 100%;
    overscroll-behavior: none;
}

body {
    margin: 0;
    background: radial-gradient(circle at 50% 20%, #2c3652 0%, #1e272e 70%);
    color: #d2dae2;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}

#rotate-notice {
    display: none;
    position: fixed;
    inset: 0;
    background: #1e272e;
    color: #d2dae2;
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 20px;
}
.rotate-icon {
    font-size: 48px;
    animation: rotateHint 1.6s ease-in-out infinite;
}
@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

#game-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 960px;
}

#ui-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #2f3640;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
}

.stats {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.stats .sep {
    margin: 0 8px;
    color: #576574;
}

#waveDisplay { color: #f7b731; }
#moneyDisplay { color: #f6e58d; }
#hpDisplay { color: #ff7675; }
#scoreDisplay { color: #74b9ff; }

.controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.tower-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.no-chars-hint {
    font-size: 12px;
    color: #ffd93d;
    font-weight: bold;
}

.case-tier-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.case-tier-btn {
    background: #232830;
    color: #dcdde1;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: center;
    min-width: 120px;
    touch-action: manipulation;
}
.case-tier-btn:hover:not(:disabled) { background: #2b323c; }
.case-tier-btn:disabled { opacity: 0.45; cursor: default; }
.case-tier-name { font-weight: bold; font-size: 13px; }
.case-tier-price { color: #f6e58d; font-size: 12px; margin-top: 2px; }

.mon-stats {
    font-size: 10px;
    color: #7f8fa6;
}

.controls button {
    background: #485460;
    color: white;
    border: 2px solid transparent;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.15s ease;
    touch-action: manipulation;
}

.controls button:hover {
    background: #576574;
    transform: translateY(-1px);
}

.controls button.active {
    border-color: #0fb9b1;
    background: #1e272e;
    box-shadow: 0 0 8px rgba(15, 185, 177, 0.5);
}

#meta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    flex-wrap: wrap;
}

.difficulty-select {
    background: #353b48;
    color: #ffd93d;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12.5px;
    cursor: pointer;
}

.offer-card {
    background: #232830;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    width: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mon-stats-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    color: #b2bec3;
    width: 100%;
    margin: 2px 0;
}
.mon-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    white-space: nowrap;
    gap: 6px;
}
.mon-stat-row span { overflow: hidden; text-overflow: ellipsis; }

.case-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px;
}
.case-box {
    font-size: 64px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.rarity-odds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.rarity-odds-pill {
    border: 1px solid;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.menu-btn.cant-afford {
    opacity: 0.45;
    cursor: default;
}
.drop-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid;
    border-radius: 10px;
    padding: 12px 20px;
    background: #232830;
    animation: dropPop 0.35s ease;
}
@keyframes dropPop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- locked (not-yet-owned) case slot: dark silhouette, no color/art ---------- */
.offer-card.locked {
    background: #1a1d23;
    border-color: #2b2f38;
}
.offer-card.locked .skin-swatch {
    background: #14161a !important;
    border: 2px dashed #33383f;
    position: relative;
}
.offer-card.locked .skin-swatch::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a3f47;
    font-size: 20px;
    font-weight: bold;
}
.offer-card.locked .skin-name,
.offer-card.locked .mon-rarity {
    color: #4a5058;
}

.char-flavor {
    font-size: 9.5px;
    color: #7f8fa6;
    font-style: italic;
    line-height: 1.25;
    min-height: 22px;
}

/* ---------- case roulette ---------- */
.roulette-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 96px;
    margin: 4px auto;
    overflow: hidden;
    border-radius: 10px;
    background: #181b20;
    border: 1px solid #2b2f38;
}
.roulette-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    will-change: transform;
}
.roulette-item {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    margin: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    border: 2px solid;
}
.roulette-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: #ffd93d;
    box-shadow: 0 0 8px rgba(255,217,61,0.8);
    pointer-events: none;
}
.roulette-wrap.hidden { display: none; }
.drop-reveal.hidden { display: none; }
.case-controls {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

/* rarity-colored pulse flash after the roulette settles */
@keyframes rarityPulse {
    0%   { box-shadow: 0 0 0 0 var(--pulse-color, #fff); }
    50%  { box-shadow: 0 0 28px 10px var(--pulse-color, #fff); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.drop-reveal.pulse {
    animation: dropPop 0.35s ease, rarityPulse 0.9s ease 0.1s;
}

.meta-btn {
    background: #353b48;
    color: #f6e58d;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12.5px;
    cursor: pointer;
    transition: 0.15s ease;
    touch-action: manipulation;
}
.meta-btn:hover {
    background: #414855;
    transform: translateY(-1px);
}

.hint {
    margin: 0 0 0 auto;
    font-size: 12px;
    color: #7f8fa6;
}

.canvas-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 960px;
    background-color: #33492f;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    cursor: crosshair;
    touch-action: none;
}

#restartBtn {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50px);
    background: #0fb9b1;
    color: #1e272e;
    border: none;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
    transition: 0.15s ease;
    touch-action: manipulation;
}

#restartBtn:hover {
    background: #17e0d6;
    transform: translate(-50%, 50px) scale(1.03);
}

#restartBtn.visible {
    display: block;
}

/* ---------- MODALS ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal-overlay.hidden {
    display: none;
}
.modal {
    background: #2f3640;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px 22px;
    width: min(480px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    -webkit-overflow-scrolling: touch;
}
.modal.hidden {
    display: none;
}
.modal h2 {
    margin: 0 0 14px 0;
    color: #ffd93d;
    font-size: 19px;
}
.modal h3 {
    margin: 16px 0 8px 0;
    font-size: 13px;
    color: #dcdde1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 4px;
}

.earned-msg {
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.4);
    color: #2ecc71;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    margin: 0 0 14px 0;
}
.earned-msg.hidden { display: none; }

#leaderboardList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #232830;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    flex-wrap: wrap;
}
.lb-rank {
    color: #ffd93d;
    font-weight: bold;
    min-width: 28px;
}
.lb-score {
    color: #74b9ff;
    font-weight: bold;
    min-width: 60px;
}
.lb-wave {
    color: #d2dae2;
    flex: 1;
}
.lb-date {
    color: #7f8fa6;
    font-size: 11px;
}
.lb-empty {
    text-align: center;
    color: #7f8fa6;
    padding: 20px 0;
    font-size: 13px;
}

.shop-balance {
    color: #f6e58d;
    font-weight: bold;
    margin: 0 0 4px 0;
}

.skin-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mon-card {
    background: #232830;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    width: 110px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.mon-card.equipped { border-color: #0fb9b1; }
.mon-card.locked { opacity: 0.55; }
.mon-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
.mon-name { font-size: 11.5px; color: #dcdde1; }
.mon-rarity { font-size: 10px; font-weight: bold; text-transform: uppercase; }

.skin-card {
    background: #232830;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    width: 110px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.skin-card.equipped {
    border-color: #0fb9b1;
}
.skin-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
.skin-name {
    font-size: 11.5px;
    color: #dcdde1;
}
.skin-btn {
    background: #485460;
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    touch-action: manipulation;
}
.skin-btn:hover:not(:disabled) {
    background: #576574;
}
.skin-btn:disabled {
    background: #0fb9b1;
    color: #1e272e;
    cursor: default;
}
.skin-btn.cant-afford {
    opacity: 0.5;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.modal-secondary {
    background: #353b48;
    color: #f6e58d;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    touch-action: manipulation;
}
.modal-close {
    background: #0fb9b1;
    color: #1e272e;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    touch-action: manipulation;
}
.modal-close:hover {
    background: #17e0d6;
}

/* ---------- RESPONSIVE: phones & tablets ---------- */

/* Narrow screens (phone widths even in landscape): tighten spacing */
@media (max-width: 700px) {
    body { padding: 6px; }
    #ui-bar { padding: 8px 10px; }
    .stats { font-size: 12px; }
    .stats .sep { margin: 0 5px; }
    .controls { flex-wrap: nowrap; }
    .tower-buttons { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .tower-buttons button { flex: 0 0 auto; }
    .controls button { padding: 6px 9px; font-size: 11.5px; }
    .hint { display: none; } /* not enough room; upgrade tip still discoverable via play */
    .meta-btn { font-size: 11.5px; padding: 5px 10px; }
}

/* Phones held in portrait: block play and ask for rotation.
   Tablets are excluded via the min-width check so they can stay portrait if desired. */
@media (orientation: portrait) and (max-width: 820px) and (pointer: coarse) {
    #rotate-notice { display: flex; }
    #game-container { display: none; }
}

/* Short landscape viewports (phones on their side): fit height instead of width */
@media (orientation: landscape) and (max-height: 480px) {
    body { padding: 0; height: 100vh; overflow: hidden; }
    #game-container { gap: 0; max-width: 100vw; width: 100vw; height: 100vh; position: relative; }
    #meta-bar { display: none; }

    /* header becomes a translucent overlay pinned to the top of the play area
       instead of taking its own row, so the canvas can use the full screen */
    #ui-bar {
        position: absolute; top: 0; left: 0; right: 0; z-index: 5;
        background: rgba(47,54,64,0.72);
        padding: 3px 8px; border-radius: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .stats { font-size: 9.5px; }
    .stats .sep { margin: 0 4px; }
    .controls { gap: 4px; flex-wrap: nowrap; }
    .tower-buttons { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .tower-buttons button { flex: 0 0 auto; }
    .controls button { padding: 3px 6px; font-size: 9px; border-radius: 4px; }

    .canvas-wrap { height: 100vh; max-height: 100vh; width: 100%; }
    canvas { width: auto; height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; }
}


/* ---------- shop slots: full character preview ---------- */
/* not-yet-owned slots are heavily dimmed, owned ones stay bright */
.case-card { width: 138px; }
.case-badge {
    font-size: 8.5px; font-weight: bold; letter-spacing: 0.3px;
    padding: 1px 7px; border-radius: 6px;
}
.case-card.owned .case-badge { background: rgba(32,191,107,0.18); color: #20bf6b; }
.case-card.is-new .case-badge { background: rgba(255,217,61,0.18); color: #ffd93d; }
.case-card.is-new { filter: brightness(0.4) saturate(0.45); }
.mon-stat-special { text-align: center; font-weight: bold; color: #dcdde1; padding-top: 1px; }

/* ---------- archive ---------- */
.library-grid { max-width: 780px; max-height: 62vh; }
.lib-rarity-title {
    flex-basis: 100%; text-align: left; margin: 8px 4px 0;
    font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
}
.lib-card { width: 132px; transition: filter 0.2s, opacity 0.2s; }
.lib-card.lib-owned { background: #2a313b; }
.lib-card.lib-locked { opacity: 0.38; filter: grayscale(0.85); }

@media (orientation: landscape) and (max-height: 480px) {
    .case-card .char-flavor { display: none; }
    .library-grid { max-height: 48vh; }
}


/* ---------- pause overlay ---------- */
.pause-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,12,16,0.62); backdrop-filter: blur(2px);
    border-radius: 10px;
}
.pause-overlay.hidden { display: none; }
.pause-card {
    display: flex; flex-direction: column; gap: 10px;
    width: min(270px, 80%); padding: 18px;
    background: #1c2027; border: 2px solid #4a5568; border-radius: 12px;
    text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.pause-card h2 { margin: 0 0 4px 0; font-size: 20px; color: #dcdde1; }
.pause-card .menu-btn { width: 100%; }
.pause-card .menu-btn.armed { background: #7a2333; color: #fff; }
@media (orientation: landscape) and (max-height: 480px) {
    .pause-card { padding: 12px; gap: 7px; }
}

/* cards keep their own height instead of stretching to the tallest one in the row (no empty gaps) */
.menu-grid { align-items: flex-start; }
.offer-card { height: fit-content; }


/* ---------- case tiers ---------- */
.case-controls { flex-wrap: wrap; gap: 10px; }
.case-tier-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 128px; padding: 10px 14px;
}
.case-tier-btn .tier-name { font-size: 13px; }
.case-tier-btn .tier-price { font-size: 17px; color: #ffd93d; }
.case-tier-btn .tier-odds { font-size: 10.5px; font-weight: normal; color: #a4b0be; }
.case-tier-btn.tier-basic  { border-color: rgba(178,190,195,0.55); }
.case-tier-btn.tier-silver { border-color: rgba(116,185,255,0.8); }
.case-tier-btn.tier-gold   { border-color: rgba(255,217,61,0.9); background: #3a3624; }
.drop-reveal .case-badge.dup   { background: rgba(116,185,255,0.18); color: #74b9ff; }
.drop-reveal .case-badge.fresh { background: rgba(32,191,107,0.18); color: #20bf6b; }