/* ================= THE DEEP DIG — idle mining game ================= */
/* Loaded only on pages/mine.php. Reuses the site's existing CSS
   variables (--noir, --brass, etc. from assets/style.css, which is
   loaded first) so it automatically follows whichever theme
   (Noir/Ivory/Blood Red) the visitor has picked. */

.dig-layout{
    display:grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 24px;
    align-items:start;
}
@media (max-width: 860px){
    .dig-layout{ grid-template-columns: 1fr; }
}

/* ---------- left column: stats + dig button ---------- */
.dig-stats{
    background: var(--noir-panel);
    border: 1px solid var(--noir-line);
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 90px;
}
.dig-cash{
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: var(--brass-bright);
    font-weight: 700;
    text-align:center;
    letter-spacing: 0.5px;
}
.dig-rate{
    text-align:center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-dim);
    margin-top: 4px;
}
.dig-depth-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--noir-line);
}
.dig-depth-label{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); text-transform:uppercase; letter-spacing:1px; }
.dig-depth-value{ font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.dig-layer-name{
    text-align:center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--brass);
    margin-top: 6px;
    font-style: italic;
}

.dig-button-wrap{
    position: relative;
    margin: 26px auto 6px;
    width: 168px;
    height: 168px;
}
.dig-button{
    width:100%; height:100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--noir-panel-2), var(--noir));
    border: 3px solid var(--brass);
    color: var(--brass-bright);
    font-size: 3.2rem;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 20px rgba(184,144,63,0.15);
    transition: transform 0.06s ease, box-shadow 0.15s;
    user-select:none;
    -webkit-user-select:none;
}
.dig-button:hover{ border-color: var(--brass-bright); }
.dig-button:active{ transform: scale(0.93); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 0 26px rgba(184,144,63,0.3); }

.dig-float{
    position:absolute;
    left:50%; top:10%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight:700;
    font-size: 1rem;
    color: var(--brass-bright);
    pointer-events:none;
    animation: digFloatUp 0.9s ease-out forwards;
    white-space:nowrap;
}
.dig-float.find{ color: var(--emerald-bright); font-size: 1.15rem; }
@keyframes digFloatUp{
    0%{ opacity:1; transform: translate(-50%, 0) scale(1); }
    100%{ opacity:0; transform: translate(-50%, -70px) scale(1.15); }
}

.dig-hint{
    text-align:center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-dim);
    margin-top: 8px;
}

.dig-save-status{
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--noir-line);
    text-align:center;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-dim);
}
.dig-save-status a{ color: var(--brass-bright); text-decoration:none; border-bottom: 1px dashed var(--brass); }

/* ---------- right column: tabs ---------- */
.dig-tabs{
    display:flex;
    gap: 6px;
    flex-wrap:wrap;
    margin-bottom: 16px;
}
.dig-tab{
    background: var(--noir-panel);
    border: 1px solid var(--noir-line);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform:uppercase;
    letter-spacing: 0.5px;
    padding: 9px 16px;
    border-radius: 4px;
    cursor:pointer;
}
.dig-tab.active{ color: var(--brass-bright); border-color: var(--brass); background: rgba(184,144,63,0.08); }
.dig-tab .count-badge{
    display:inline-block;
    margin-left: 6px;
    background: var(--brass);
    color: #17130a;
    font-size: 0.65rem;
    font-weight:700;
    border-radius: 8px;
    padding: 1px 6px;
}

.dig-panel{ display:none; flex-direction:column; gap: 10px; }
.dig-panel.active{ display:flex; }

/* crew rows */
.crew-row{
    display:flex;
    align-items:center;
    gap: 14px;
    background: var(--noir-panel);
    border: 1px solid var(--noir-line);
    border-radius: 6px;
    padding: 12px 16px;
    cursor:pointer;
    transition: border-color 0.15s, opacity 0.15s;
}
.crew-row:hover{ border-color: rgba(184,144,63,0.5); }
.crew-row.locked{ opacity: 0.4; cursor: default; pointer-events:none; }
.crew-row.affordable{ border-color: var(--brass); }
.crew-icon{ font-size: 1.7rem; flex:none; width: 40px; text-align:center; }
.crew-info{ flex:1; min-width:0; }
.crew-name{ font-family: var(--font-display); font-size: 0.95rem; color: var(--text); }
.crew-sub{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); margin-top: 2px; }
.crew-owned{
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--brass-bright);
    background: var(--noir);
    border: 1px solid var(--noir-line);
    border-radius: 4px;
    padding: 4px 8px;
    flex:none;
}
.crew-cost{
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--brass-bright);
    flex:none;
    text-align:right;
    min-width: 90px;
}
.crew-cost.cant-afford{ color: var(--ink-dim); }

/* upgrade cards */
.upgrade-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.upgrade-card{
    background: var(--noir-panel);
    border: 1px solid var(--noir-line);
    border-radius: 6px;
    padding: 14px;
    cursor:pointer;
    transition: border-color 0.15s, opacity 0.15s;
}
.upgrade-card:hover{ border-color: rgba(184,144,63,0.5); }
.upgrade-card.affordable{ border-color: var(--brass); }
.upgrade-card.owned{ opacity: 0.35; pointer-events:none; }
.upgrade-name{ font-family: var(--font-display); font-size: 0.88rem; color: var(--text); margin-bottom: 4px; }
.upgrade-desc{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); line-height:1.5; margin-bottom: 8px; }
.upgrade-cost{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--brass-bright); }

/* findings / relics */
.relic-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.relic-card{
    background: var(--noir-panel);
    border: 1px solid var(--noir-line);
    border-radius: 6px;
    padding: 14px;
    text-align:center;
}
.relic-card.unfound{ opacity: 0.35; }
.relic-icon{ font-size: 1.8rem; margin-bottom: 6px; }
.relic-name{ font-family: var(--font-display); font-size: 0.8rem; color: var(--text); }
.relic-desc{ font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); margin-top:4px; line-height:1.4; }

/* journal / discovery log */
.journal-list{ display:flex; flex-direction:column; gap:8px; }
.journal-entry{
    background: var(--noir-panel);
    border-left: 3px solid var(--brass);
    border-radius: 4px;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink);
    line-height:1.5;
}
.journal-entry .journal-depth{ color: var(--brass-bright); font-weight:700; margin-right: 8px; }

/* prestige panel */
.prestige-box{
    background: var(--noir-panel);
    border: 1px solid var(--wine);
    border-radius: 8px;
    padding: 22px;
    text-align:center;
}
.prestige-respect{ font-family: var(--font-display); font-size: 2rem; color: var(--brass-bright); }
.prestige-desc{ font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-dim); line-height:1.6; margin: 10px 0 18px; }
.prestige-gain{ color: var(--brass-bright); font-weight:700; }

/* discovery toast + offline-progress modal */
.dig-toast-stack{
    position: fixed;
    right: 16px; bottom: 16px;
    display:flex; flex-direction:column-reverse; gap:8px;
    z-index: 90;
    max-width: 320px;
}
.dig-toast{
    background: var(--noir-panel);
    border: 1px solid var(--brass);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    animation: toastIn 0.25s ease-out, toastOut 0.4s ease-in 4.6s forwards;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(20px);} to{ opacity:1; transform: translateX(0);} }
@keyframes toastOut{ to{ opacity:0; transform: translateX(20px);} }

.dig-modal-backdrop{
    position: fixed; inset:0; background: rgba(0,0,0,0.75);
    display:flex; align-items:center; justify-content:center;
    z-index: 95; padding: 20px;
}
.dig-modal{
    background: var(--noir-panel);
    border: 1px solid var(--brass);
    border-radius: 10px;
    padding: 28px;
    max-width: 380px;
    text-align:center;
}
.dig-modal h3{ font-family: var(--font-display); text-transform:uppercase; letter-spacing:1px; margin: 0 0 12px; color: var(--brass-bright); }
.dig-modal p{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); line-height:1.6; margin: 0 0 20px; }

/* ================= WEATHER / EQUIPMENT / MORALE ================= */
.dig-status-block{
    display:flex; flex-direction:column; gap:10px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--noir-line);
}
.dig-weather{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink);
    background: var(--noir-panel-2); border: 1px solid var(--noir-line);
    border-radius: 8px; padding: 7px 12px;
}
.weather-icon{ font-size: 1rem; }

.condition-row{ display:flex; flex-direction:column; gap:5px; }
.condition-label{
    display:flex; justify-content:space-between;
    font-family: var(--font-mono); font-size: 0.68rem; text-transform:uppercase; letter-spacing:0.5px;
    color: var(--ink-dim);
}
.condition-label span:last-child{ color: var(--text); font-weight:700; }
.condition-bar{ height: 8px; border-radius: 5px; background: var(--noir-panel-2); border: 1px solid var(--noir-line); overflow:hidden; }
.condition-bar-fill{
    height:100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--brass), var(--brass-bright));
    transition: width 0.3s ease;
}
.condition-bar-fill.morale{ background: linear-gradient(90deg, var(--emerald-line), var(--emerald-bright)); }
.condition-bar-fill.low{ background: linear-gradient(90deg, var(--wine), var(--wine-bright)); }
.status-btn{
    align-self:flex-end;
    font-family: var(--font-mono); font-size: 0.68rem; text-transform:uppercase; letter-spacing:0.5px;
    background: var(--noir-panel-2); border: 1px solid var(--brass); color: var(--brass-bright);
    border-radius: 6px; padding: 5px 10px; cursor:pointer;
    transition: background 0.15s, opacity 0.15s;
}
.status-btn:hover{ background: rgba(184,144,63,0.12); }
.status-btn.disabled, .status-btn:disabled{ opacity: 0.35; cursor: default; pointer-events:none; border-color: var(--noir-line); color: var(--ink-dim); }