/* Game chrome, tab art, modals, forge rarity + Clash strike animations.
   Utility classes come from /static/css/tailwind.css (built via npm run build:css). */

@font-face { font-family: 'MainFont'; src: url('/static/fonts/main.ttf') format('truetype'); }
@font-face { font-family: 'HeadingFont'; src: url('/static/fonts/heading.ttf') format('truetype'); }

body { margin: 0; background: #121212; font-family: 'MainFont', Segoe UI, sans-serif; color: white; overflow-y: scroll; overflow-x: hidden; }
.pulse-update { animation: stat-pulse 0.4s ease-out; }
.entropy-float-gain {
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -8px);
    color: #ffb8ff; font-size: 12px; font-weight: bold; pointer-events: none;
    white-space: nowrap; opacity: 1; z-index: 5;
    transition: transform 0.9s ease-out, opacity 0.9s ease-out;
    text-shadow: 0 0 8px rgba(255,184,255,0.8);
}
.entropy-float-gain.float-away {
    transform: translate(-50%, -28px);
    opacity: 0;
}
.reveal-item { animation: quick-reveal 0.35s both ease-out; }
.fade-list { transition: opacity 0.5s ease; opacity: 1; }

/* Nav shell tunables (left sidebar on desktop, bottom tab bar on mobile). */
:root {
    --sidebar-width: 220px;
    --bottom-nav-height: 60px;
    --bottom-nav-total-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    --content-clearance-nav-only: calc(var(--bottom-nav-total-height) + 16px);
    --content-clearance-with-footer: calc(var(--bottom-nav-total-height) + 72px);
    --desktop-footer-height: 112px;
}

/* Home subpages use Tailwind .hidden / .block (toggled in tabs.js) - do not
   force display:none here or it overrides .block when app.css loads after Tailwind. */
.tab-content, .main-tab-content { display: none; }
.tab-content.active, .main-tab-content.active { display: block; }

.platform-badge { display: inline-flex; align-items: center; vertical-align: middle; }
.discord-svg-icon { width: 14px; height: 14px; fill: #5865F2; filter: drop-shadow(0 0 2px rgba(88,101,242,0.4)); }
.flag-badge { font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* Clash strike animation tunables */
#clash-combat-phase { --clash-strike-distance: 45px; --clash-strike-duration: 0.35s; }
@media (min-width: 768px) {
    #clash-combat-phase { --clash-strike-distance: 120px; --clash-strike-duration: 0.5s; }
}

.tab-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;
    min-height: 100%;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.45; pointer-events: none; user-select: none; z-index: 0;
}
#app-content { position: relative; isolation: isolate; background-color: #121212; }
#recent-feed-container { background: transparent; }
.bg-forge { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_forge.webp'); }
.bg-ledger { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_ledger.webp'); }
.bg-clash { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_clash.webp'); }
.bg-quests { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_quests.webp'); }
.bg-leaderboards { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_leaderboards.webp'); }
.bg-home-inventory { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_home_inventory.webp'); }
.bg-home-stats { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_home_stats.webp'); }
.bg-home-codex { background-image: linear-gradient(to bottom, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.95) 100%), url('/static/images/bg_home_codex.webp'); }
.relative-z1 { position: relative; z-index: 1; }

.upgrade-action-btn {
    appearance: none !important; -webkit-appearance: none !important; background: #1a1a1a !important; color: #a335ee !important;
    border: 1px solid #a335ee !important; border-radius: 15px !important; padding: 4px 12px !important; font-family: 'MainFont', sans-serif !important;
    font-size: 12px !important; font-weight: bold !important; cursor: pointer !important; transition: 0.2s ease !important;
}
.upgrade-action-btn:hover:not(:disabled) {
    background: #a335ee !important; color: white !important; box-shadow: 0 0 12px rgba(163, 53, 238, 0.7) !important; transform: scale(1.05) !important;
}

.twinned-transition, .twinned-transition * { transition: background-color 0.6s ease-in-out, background-image 0.6s ease-in-out, opacity 0.6s ease-in-out, color 0.6s ease-in-out, border-color 0.6s ease-in-out, text-shadow 0.6s ease-in-out, box-shadow 0.6s ease-in-out, filter 0.6s ease-in-out !important; }
.twinned-blackout { background-image: none !important; background-color: #000 !important; border-color: #000 !important; box-shadow: 0 0 20px #000 !important; }
.twinned-blackout * { color: #000 !important; text-shadow: none !important; border-color: #000 !important; box-shadow: none !important; }
.twinned-blackout img { filter: brightness(0) !important; border-color: #000 !important; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
@media (max-width: 767px) {
    .modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
    #mobile-top-strip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: #1a1a1a !important; }
    #tab-intro-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #clash-next-btn-container { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
body.is-dragging .slot-tooltip { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Shared keyframes used by custom classes (also mirrored in tailwind.config for utilities) */
@keyframes quick-reveal {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes stat-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.5); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- FORGE RARITY ANIMATIONS --- */
@keyframes rare-pulse {
    0% { box-shadow: 0 0 0px var(--rarity-color); border-color: #fff; transform: scale(0.98); }
    50% { box-shadow: 0 0 40px var(--rarity-color); border-color: var(--rarity-color); transform: scale(1.02); }
    100% { box-shadow: var(--rarity-shadow); border-color: var(--rarity-color); transform: scale(1); }
}
@keyframes epic-flashy {
    0% { box-shadow: 0 0 0px var(--rarity-color); transform: translateY(15px) scale(0.95); filter: brightness(2); border-color: #fff; }
    30% { box-shadow: 0 0 50px var(--rarity-color), inset 0 0 20px var(--rarity-color); transform: translateY(-5px) scale(1.04); filter: brightness(1.5); border-color: var(--rarity-color); }
    100% { box-shadow: var(--rarity-shadow); transform: translateY(0) scale(1); filter: brightness(1); border-color: var(--rarity-color); }
}
@keyframes legendary-epicness {
    0% { box-shadow: 0 0 0px var(--rarity-color); transform: scale(0.8) rotate(-3deg); opacity: 0; filter: contrast(1.5); }
    20% { opacity: 1; box-shadow: 0 0 80px var(--rarity-color), inset 0 0 40px #fff; transform: scale(1.1) rotate(2deg); border-color: #fff; }
    50% { box-shadow: 0 0 50px var(--rarity-color); transform: scale(1.05) rotate(-1deg); border-color: var(--rarity-color); }
    100% { box-shadow: var(--rarity-shadow); transform: scale(1) rotate(0deg); filter: contrast(1); border-color: var(--rarity-color); }
}
@keyframes artifact-ominous {
    0% { box-shadow: 0 0 10px var(--rarity-color); transform: scale(0.95); filter: contrast(1.5) saturate(2); border-color: #fff; }
    10% { transform: scale(1.03) translateX(-3px); box-shadow: -15px 0 40px var(--rarity-color); }
    20% { transform: scale(1.03) translateX(3px); box-shadow: 15px 0 40px var(--rarity-color); }
    30% { transform: scale(1.06); box-shadow: 0 0 80px var(--rarity-color), inset 0 0 50px var(--rarity-color); border-color: #fff; }
    100% { box-shadow: var(--rarity-shadow); transform: scale(1); filter: contrast(1) saturate(1); border-color: var(--rarity-color); }
}

.animate-rare-pulse { animation: rare-pulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-epic-flashy { animation: epic-flashy 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-legendary-epicness { animation: legendary-epicness 1.5s ease-out forwards; }
.animate-artifact-ominous { animation: artifact-ominous 2.2s cubic-bezier(0.36, 0, 0.66, -0.56) forwards; }

/* --- CLASH STRIKE / FADE (named classes - not Tailwind arbitrary values) --- */
@keyframes clash-strike-right {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    50% { transform: translateX(var(--clash-strike-distance, 120px)) scale(1.2) rotate(5deg); z-index: 10; }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}
@keyframes clash-strike-left {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    50% { transform: translateX(calc(var(--clash-strike-distance, 120px) * -1)) scale(1.2) rotate(-5deg); z-index: 10; }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}
@keyframes clash-slash-right {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    35% { transform: translateX(calc(var(--clash-strike-distance, 120px) * 0.55)) rotate(18deg) scale(1.15); z-index: 10; }
    55% { transform: translateX(var(--clash-strike-distance, 120px)) rotate(-8deg) scale(1.25); z-index: 10; }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes clash-slash-left {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    35% { transform: translateX(calc(var(--clash-strike-distance, 120px) * -0.55)) rotate(-18deg) scale(1.15); z-index: 10; }
    55% { transform: translateX(calc(var(--clash-strike-distance, 120px) * -1)) rotate(8deg) scale(1.25); z-index: 10; }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes clash-pierce-right {
    0% { transform: translateX(0) scaleX(1) scaleY(1); }
    45% { transform: translateX(var(--clash-strike-distance, 120px)) scaleX(1.35) scaleY(0.92); z-index: 10; }
    100% { transform: translateX(0) scaleX(1) scaleY(1); }
}
@keyframes clash-pierce-left {
    0% { transform: translateX(0) scaleX(1) scaleY(1); }
    45% { transform: translateX(calc(var(--clash-strike-distance, 120px) * -1)) scaleX(1.35) scaleY(0.92); z-index: 10; }
    100% { transform: translateX(0) scaleX(1) scaleY(1); }
}
@keyframes clash-smash-right {
    0% { transform: translate(0,0) scale(1); }
    30% { transform: translate(calc(var(--clash-strike-distance, 120px) * 0.35), -18px) scale(1.05); z-index: 10; }
    55% { transform: translate(var(--clash-strike-distance, 120px), 14px) scale(1.28); z-index: 10; }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes clash-smash-left {
    0% { transform: translate(0,0) scale(1); }
    30% { transform: translate(calc(var(--clash-strike-distance, 120px) * -0.35), -18px) scale(1.05); z-index: 10; }
    55% { transform: translate(calc(var(--clash-strike-distance, 120px) * -1), 14px) scale(1.28); z-index: 10; }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes clash-fade-out {
    to { opacity: 0; transform: scale(0.5) rotate(15deg); filter: blur(10px); }
}

.animate-clash-strike-right { animation: clash-strike-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-strike-left { animation: clash-strike-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-slash-right { animation: clash-slash-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-slash-left { animation: clash-slash-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-pierce-right { animation: clash-pierce-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-pierce-left { animation: clash-pierce-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-smash-right { animation: clash-smash-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-smash-left { animation: clash-smash-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-fade-out { animation: clash-fade-out 0.5s forwards; }
.animate-float-temp { animation: float 2s ease-in-out infinite; }