/*
 * DARK Ascent — juice.css
 * DAJAI DARK theme sharpening + mobile responsiveness + game-feel effects.
 * Loaded LAST so it wins the cascade. Additive — original stylesheets untouched.
 *
 * Palette: obsidian #0a0908 · blood #FF2D55 · gold #ffd400 · off-white #ece8e1
 */

:root {
    --da-obsidian: #0a0908;
    --da-panel: #14110f;
    --da-panel-2: #1b1714;
    --da-blood: #FF2D55;
    --da-gold: #ffd400;
    --da-gold-soft: #e8c87a;
    --da-text: #ece8e1;
    --da-muted: #8a837a;
    --da-line: #2a241f;
}

/* ---------- Base dark skin (sharpen the existing one) ------------------ */
html, body { -webkit-text-size-adjust: 100%; }

body.dark,
body#body.dark {
    background-color: var(--da-obsidian) !important;
    color: var(--da-text) !important;
    background-image:
        radial-gradient(1200px 600px at 50% -10%, rgba(255, 45, 85, 0.06), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(255, 212, 0, 0.05), transparent 60%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

.dark .panel {
    background-color: var(--da-panel) !important;
    border: 1px solid var(--da-line);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.dark h1 {
    color: var(--da-gold) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 0 24px rgba(255, 212, 0, 0.25);
}

.dark .button,
.dark .w3-button.button {
    background-color: var(--da-panel-2) !important;
    border: 1px solid var(--da-gold-soft) !important;
    color: var(--da-gold-soft) !important;
    border-radius: 8px;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.dark .button:hover { background-color: #2a0d12 !important; }
.dark .button:active { transform: translateY(1px); }

.dark .w3-button:hover,
.dark .tabButton:hover { background-color: #2a0d12 !important; color: var(--da-gold) !important; }

.dark .w3-red,
.dark .button.w3-red { background-color: var(--da-blood) !important; border-color: var(--da-blood) !important; color: #fff !important; }

.dark a { color: var(--da-gold-soft); }

/* Tabs */
.dark .tabButton {
    border-radius: 8px 8px 0 0;
    color: var(--da-muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.dark .w3-blue-gray,
.dark .tabButton.w3-blue-gray {
    background-color: var(--da-panel-2) !important;
    color: var(--da-gold) !important;
    box-shadow: inset 0 -2px 0 var(--da-blood);
}

/* Tables / rows */
.dark .w3-bordered tr,
.dark .w3-table-all tr { border-bottom: 1px solid var(--da-line) !important; }
.dark .w3-table td, .dark .w3-table th { padding: 10px 8px; }

/* Progress bars — obsidian track, gold/blood fill glow */
.progress-bar,
.dark .progress-bar {
    background-color: #241f1b;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--da-line);
}
.progress-fill,
.dark .progress-fill {
    background-color: var(--da-gold-soft) !important;
    background-image: linear-gradient(90deg, #b8922f, var(--da-gold));
    transition: width 0.18s ease-out; /* smooth bar fills */
    box-shadow: 0 0 10px rgba(255, 212, 0, 0.25);
}
.progress-fill.current,
.dark .progress-fill.current {
    background-image: linear-gradient(90deg, var(--da-blood), #ff6b88) !important;
    box-shadow: 0 0 12px rgba(255, 45, 85, 0.45);
}
.progress-text { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* Item buttons */
.dark .item-button { background-color: var(--da-panel-2); color: var(--da-text); border: 1px solid var(--da-line); border-radius: 8px; }
.dark .item-button:hover { background-color: #2a0d12; }
.dark .item-button:disabled { opacity: 0.45; }

/* Tooltips readable on dark */
.tooltip .tooltipText { background-color: #000 !important; border: 1px solid var(--da-line); }

/* Death text pop */
#deathText > div:first-child { color: var(--da-blood) !important; text-shadow: 0 0 14px rgba(255,45,85,0.4); }

/* ---------- Mute toggle -------------------------------------------------- */
#soundToggle {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 9999;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--da-line);
    background: rgba(20, 17, 15, 0.85);
    color: var(--da-gold-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#soundToggle:hover { opacity: 1; }
#soundToggle:active { transform: scale(0.92); }

/* ---------- Visual juice effects ---------------------------------------- */

/* Level-up row flash */
@keyframes juiceFlash {
    0%   { background-color: rgba(255, 212, 0, 0.0); }
    20%  { background-color: rgba(255, 212, 0, 0.32); }
    100% { background-color: rgba(255, 212, 0, 0.0); }
}
.juice-flash { animation: juiceFlash 0.6s ease-out; }
.juice-flash .progress-fill { box-shadow: 0 0 16px rgba(255, 212, 0, 0.6); }

/* Gold particle pop */
.juice-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    will-change: transform, opacity;
    box-shadow: 0 0 6px currentColor;
    animation: juiceParticle 0.65s ease-out forwards;
}
@keyframes juiceParticle {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* Currency pop on change */
@keyframes coinPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); color: var(--da-gold); }
    100% { transform: scale(1); }
}
.coin-pop { animation: coinPop 0.35s ease-out; display: inline-block; }

/* Rebirth screen flash */
.juice-screen-flash {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255, 212, 0, 0.55), rgba(255, 212, 0, 0) 60%);
    animation: screenFlash 1s ease-out forwards;
}
.juice-screen-flash.evil {
    background: radial-gradient(circle at 50% 50%, rgba(255, 45, 85, 0.6), rgba(120, 0, 20, 0) 60%);
}
@keyframes screenFlash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .juice-flash, .juice-particle, .coin-pop, .juice-screen-flash,
    .progress-fill { animation: none !important; transition: none !important; }
}

/* ---------- Mobile responsiveness (~390px phones) ----------------------- */

/* Stage wrapper: contain the floated panels (was a fixed 1220x600 box). */
.da-stage { width: 100%; box-sizing: border-box; }
.da-stage::after { content: ""; display: table; clear: both; }

/* Kill the fixed desktop pixel layout so it can reflow. */
.w3-margin > div[style] {
    width: auto !important;
    height: auto !important;
}

/* Default (desktop) keeps the original side-by-side feel but fluid. */
@media (max-width: 1100px) {
    .panel[style] {
        width: auto !important;
        float: none !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    .w3-margin { margin: 8px !important; }
}

@media (max-width: 760px) {
    body { padding-bottom: 24px; }
    .w3-margin { margin: 6px !important; }

    /* Stack: sidebar HUD on top, tabs + content below, full width. */
    .panel {
        width: 100% !important;
        float: none !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box;
    }

    /* Sticky HUD so currency/age stay visible while scrolling lists. */
    .panel:first-of-type {
        position: sticky;
        top: 0;
        z-index: 50;
        max-height: 46vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    h1 { font-size: 1.5rem; margin: 6px 0; text-align: center; }

    /* Tap-friendly tab bar — wrap, no horizontal scroll. */
    .panel[style*="height: 40px"] {
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
    }
    .tabButton.w3-bar-item {
        width: auto !important;
        flex: 1 1 28%;
        min-width: 84px;
        min-height: 44px;     /* Apple HIG tap target */
        font-size: 0.9rem;
        float: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Tables: readable + tappable, no tiny targets, no horizontal scroll. */
    table.w3-table { table-layout: fixed; width: 100% !important; }
    .w3-table td, .w3-table th {
        padding: 8px 5px !important;
        font-size: 0.82rem;
        word-break: break-word;
    }

    /* Hide the lowest-value columns on phones to prevent overflow. */
    .valueType, .skipSkill,
    td.skipSkill, th.skipSkill { display: none !important; }
    .category[style] { width: auto !important; }

    /* Progress bars fill their cell + give a bigger tap height. */
    .progress-bar { width: 100% !important; min-width: 0 !important; }
    .progress-fill { height: 34px !important; }
    .progress-text { padding: 8px 6px; font-size: 0.82rem; }
    .progressBar { min-height: 34px; }

    .quickTaskDisplay .progress-bar,
    #quickTaskDisplay .progress-bar { width: 100% !important; }

    .item-button { width: 100% !important; height: auto !important; min-height: 44px; }

    /* Tooltips: anchor below to avoid going off the right edge on phones. */
    .tooltip .tooltipText {
        left: 0;
        top: 100%;
        width: min(240px, 80vw);
    }

    #soundToggle { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 16px; }

    /* Active-circle indicator for items — keep it from blowing layout. */
    td .w3-circle[style] { width: 32px !important; height: 32px !important; padding: 5px !important; }
    td .w3-circle .active { width: 20px !important; height: 20px !important; }
}

@media (max-width: 420px) {
    h1 { font-size: 1.3rem; }
    .tabButton.w3-bar-item { flex: 1 1 30%; min-width: 0; font-size: 0.82rem; }
    .w3-table td, .w3-table th { font-size: 0.78rem; padding: 7px 4px !important; }
}