:root {
    color-scheme:dark;
    --bg:#0d1018;
    --panel:#171c29;
    --panel2:#1d2433;
    --line:#30394d;
    --muted:#9aa6ba;
    --text:#edf2fb;
    --cyan:#5fe1dc;
    --purple:#a78bfa;
    --gold:#f4c76b;
    --green:#69d7a1;
    --red:#ed7d8d;
    --shadow:0 18px 48px #0005;
}
* {
    box-sizing:border-box;
}
html,body {
    margin:0;
    min-height:100%;
    background:radial-gradient(ellipse at 50% -15%,#252b43 0,#111521 42%,var(--bg) 78%);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
button,select {
    font:inherit;
}
button {
    cursor:pointer;
    color:inherit;
}
button:focus-visible,select:focus-visible {
    outline:2px solid var(--cyan);
    outline-offset:3px;
}
.app {
    max-width:1450px;
    margin:auto;
    padding:22px 24px 32px;
}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
}
.logo {
    width:43px;
    height:43px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#27384c,#20213d);
    border:1px solid #53617a;
    font-size:23px;
    box-shadow:0 6px 20px #0005;
}
.brand h1 {
    font-size:21px;
    letter-spacing:.02em;
    margin:0;
    font-weight:850;
}
.brand p {
    margin:2px 0 0;
    color:var(--muted);
    font-size:12px;
}
.top-actions {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.quiet-btn,.primary-btn,.sell-btn,.tool-select,.upgrade-btn,.depth-option,.inv-sell {
    border:1px solid var(--line);
    background:#202738;
    border-radius:10px;
    padding:9px 12px;
    transition:.16s ease;
}
.quiet-btn:hover,.tool-select:hover,.depth-option:hover,.inv-sell:hover {
    background:#2a3448;
    border-color:#65728d;
}
.quiet-btn {
    font-size:12px;
    color:#c7d0df;
}
.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:17px;
}
.stat {
    background:linear-gradient(145deg,#1b2231,#151a26);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:0 5px 18px #0002;
    min-width:0;
}
.stat .k {
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.09em;
}
.stat .v {
    font-size:22px;
    font-weight:800;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.stat .sub {
    font-size:11px;
    color:#8391a9;
    margin-top:2px;
}
.layout {
    display:grid;
    grid-template-columns:280px minmax(360px,1fr) 295px;
    gap:15px;
    align-items:start;
}
.panel {
    background:linear-gradient(160deg,#1a2030,#151a26);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.panel-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 16px;
    border-bottom:1px solid #2c3548;
}
.panel-head h2 {
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0;
}
.panel-head span {
    font-size:11px;
    color:var(--muted);
}
.panel-body {
    padding:13px;
}
.tool-card {
    padding:12px;
    border:1px solid #303a4e;
    background:#1d2534;
    border-radius:12px;
    margin-bottom:9px;
    transition:.15s;
}
.tool-card.selected {
    border-color:#59cfcf;
    box-shadow:0 0 0 1px #59cfcf33,inset 0 0 22px #59cfcf0b;
}
.tool-top {
    display:flex;
    align-items:center;
    gap:10px;
}
.tool-icon {
    height:42px;
    width:42px;
    display:grid;
    place-items:center;
    background:#2b3548;
    border-radius:10px;
    flex:none;
}
.game-icon {
    width:100%;
    height:100%;
    object-fit:contain;
    image-rendering:pixelated;
    filter:drop-shadow(0 2px 2px #0008);
}
.block-symbol {
    width:clamp(210px,27vw,270px);
    height:clamp(210px,27vw,270px);
    object-fit:contain;
    position:relative;
    z-index:1;
    image-rendering:auto;
    filter:drop-shadow(0 8px 7px #0009);
}
.tool-art {
    position:relative;
    width:36px;
    height:36px;
    display:block;
}
.tool-svg {
    width:36px;
    height:36px;
}
.tool-title {
    min-width:0;
    flex:1;
}
.tool-title strong {
    display:block;
    font-size:13px;
}
.tool-title small {
    color:var(--muted);
    font-size:11px;
}
.selected-mark {
    font-size:10px;
    color:var(--cyan);
    font-weight:800;
    letter-spacing:.05em;
}
.tool-meta {
    display:flex;
    justify-content:space-between;
    gap:7px;
    margin:11px 0 6px;
    font-size:10px;
    color:#aeb9cc;
}
.xp-track,.hp-track,.zone-track {
    height:6px;
    background:#0d121c;
    border-radius:99px;
    overflow:hidden;
    border:1px solid #31394a;
}
.xp-fill,.hp-fill,.zone-fill {
    height:100%;
    width:0;
    background:linear-gradient(90deg,#43bbb9,#78e4c9);
    border-radius:99px;
    transition:width .2s;
}
.tool-actions {
    display:flex;
    gap:7px;
    margin-top:10px;
}
.tool-select {
    padding:7px 9px;
    font-size:11px;
    flex:1;
}
.upgrade-btn {
    padding:7px 9px;
    font-size:11px;
    border-color:#6c5a3b;
    background:#352e22;
    color:#ffe0a0;
    flex:1;
}
.upgrade-btn:hover {
    background:#443a28;
}
.upgrade-btn:disabled {
    opacity:.4;
    cursor:not-allowed;
}
.tool-note {
    font-size:10px;
    color:#79869b;
    line-height:1.4;
    margin:10px 2px 1px;
}
.mine-panel {
    min-height:600px;
}
.mine-head {
    padding:16px 18px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #2c3548;
}
.mine-head h2 {
    font-size:15px;
    margin:0;
}
.mine-head p {
    font-size:11px;
    color:var(--muted);
    margin:4px 0 0;
}
.depth-select {
    padding:8px 30px 8px 10px;
    background:#202a3b;
    color:#e9f0fb;
    border:1px solid #3a465b;
    border-radius:9px;
    max-width:190px;
    font-size:12px;
}
.depth-progress {
    padding:13px 18px 0;
}
.depth-progress-top {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
    color:#aab7ca;
    margin-bottom:7px;
}
.depth-progress-top strong {
    color:#eaf0fb;
}
.zone-fill {
    background:linear-gradient(90deg,#8b78f5,#58caca);
}
.mine-stage {
    padding:26px 18px 14px;
    text-align:center;
}
.biome-label {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid #37445b;
    background:#202b3c;
    border-radius:99px;
    color:#cad6e7;
    font-size:11px;
}
.block-wrap {
    width:min(255px,67vw);
    margin:24px auto 17px;
    position:relative;
}
.block-button {
    width:100%;
    aspect-ratio:1;
    border:0;
    border-radius:0;
    position:relative;
    overflow:visible;
    background:transparent;
    padding:0;
    filter:none;
    transition:transform .08s;
    touch-action:manipulation;
}
.block-button:active {
    transform:scale(.965);
}
.block-cube {
    position:absolute;
    inset:0;
    border:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
    display:grid;
    place-items:center;
    background:transparent;
}
/* No se dibuja una caja detrás del bloque 3D. */
.block-cube:before,
.block-cube:after {
    content:none;
    display:none;
}
.block-symbol {
    position:relative;
    z-index:1;
}
.block-button.mining .block-cube {
    animation:hit .15s linear;
}
@keyframes hit {
    0%,100% {
        transform:translate(0);
    }
    25% {
        transform:translate(-4px,2px) rotate(-1deg);
    }
    55% {
        transform:translate(4px,-2px) rotate(1deg);
    }
}
.cracks {
    position:absolute;
    inset:16%;
    z-index:2;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(118deg,transparent 47.5%,#121622b8 48%,transparent 48.5%),linear-gradient(30deg,transparent 58.5%,#121622a8 59%,transparent 59.5%),linear-gradient(155deg,transparent 66.5%,#121622a8 67%,transparent 67.5%);
    mix-blend-mode:multiply;
}
.block-caption {
    font-size:14px;
    font-weight:750;
    margin-top:5px;
}
.block-sub {
    font-size:11px;
    color:var(--muted);
    margin-top:3px;
}
.hp-wrap {
    max-width:295px;
    margin:15px auto 0;
    text-align:left;
}
.hp-top {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#aeb9cb;
    margin-bottom:6px;
}
.hp-fill {
    background:linear-gradient(90deg,#e1787e,#f4c76b);
}
.hintless-note {
    font-size:10px;
    color:#76839a;
    margin-top:16px;
}
.mine-footer {
    padding:15px 18px 18px;
    border-top:1px solid #2b3446;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.mine-footer .small-stat {
    font-size:11px;
    color:var(--muted);
}
.mine-footer .small-stat strong {
    color:#e8effa;
}
.mine-footer .click-tip {
    font-size:10px;
    color:#75839a;
}
.zone-list {
    padding:11px 12px;
    display:grid;
    gap:6px;
}
.depth-option {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    text-align:left;
    padding:9px 10px;
    background:#1d2534;
}
.depth-option.active {
    border-color:#58caca;
    background:#233442;
}
.depth-option:disabled {
    opacity:.42;
    cursor:not-allowed;
}
.depth-option .zone-name {
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:7px;
}
.zone-art {
    width:23px;
    height:23px;
    display:inline-flex;
    flex:none;
}
.zone-art .game-icon {
    width:100%;
    height:100%;
}
.mini-biome-icon {
    width:18px;
    height:18px;
    display:inline-flex;
}
.mini-biome-icon .game-icon {
    width:100%;
    height:100%;
}
.depth-option .zone-range {
    font-size:10px;
    color:#a2aec1;
    margin-top:2px;
}
.depth-option .zone-status {
    font-size:10px;
    color:#80d8ba;
    white-space:nowrap;
}
.depth-option.locked .zone-status {
    color:#8792a5;
}
.inventory-list {
    display:grid;
    gap:7px;
}
.inventory-row {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 9px;
    background:#1e2635;
    border:1px solid #303a4d;
    border-radius:10px;
}
.item-icon {
    width:34px;
    height:34px;
    border-radius:8px;
    background:#2a3447;
    display:grid;
    place-items:center;
    padding:3px;
    flex:none;
}
.item-info {
    flex:1;
    min-width:0;
}
.item-info strong {
    display:block;
    font-size:11px;
}
.item-info small {
    font-size:10px;
    color:#9eabc0;
}
.item-count {
    font-size:11px;
    color:#e2ebf8;
    font-weight:800;
}
.inv-sell {
    font-size:10px;
    padding:5px 7px;
    white-space:nowrap;
}
.empty {
    padding:20px 9px;
    text-align:center;
    font-size:11px;
    color:#8491a7;
    line-height:1.6;
}
.sell-all {
    width:100%;
    margin-top:10px;
    padding:9px;
    border:1px solid #4e705f;
    border-radius:10px;
    background:#20362e;
    color:#a7efc7;
    font-size:11px;
    font-weight:800;
}
.sell-all:hover {
    background:#294638;
}
.sell-all:disabled {
    opacity:.4;
    cursor:not-allowed;
}
.miner-card {
    padding:12px;
    background:#1e2635;
    border:1px solid #303a4d;
    border-radius:11px;
}
.miner-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.miner-row strong {
    font-size:12px;
}
.miner-count {
    color:#81e0cf;
    font-weight:800;
    font-size:19px;
}
.miner-card p {
    color:#9aa8bc;
    font-size:10px;
    line-height:1.5;
    margin:8px 0 10px;
}
.primary-btn {
    width:100%;
    background:linear-gradient(110deg,#287f82,#316c80);
    border-color:#42999a;
    color:#efffff;
    font-size:11px;
    font-weight:800;
    padding:10px;
}
.primary-btn:hover {
    filter:brightness(1.12);
}
.primary-btn:disabled {
    opacity:.4;
    cursor:not-allowed;
    filter:none;
}
.miner-cost {
    color:#f3d08a;
}
.feed {
    margin-top:11px;
    border-top:1px solid #2b3446;
    padding:12px 13px;
}
.feed-title {
    font-size:10px;
    color:#95a2b8;
    text-transform:uppercase;
    letter-spacing:.09em;
    margin-bottom:8px;
}
.feed-line {
    font-size:10px;
    line-height:1.45;
    color:#a9b5c8;
    padding:5px 0;
    border-bottom:1px solid #273042;
}
.feed-line:last-child {
    border-bottom:0;
}
.feed-line b {
    color:#e7effa;
}
.toast {
    position:fixed;
    z-index:20;
    left:50%;
    bottom:22px;
    transform:translate(-50%,15px);
    opacity:0;
    pointer-events:none;
    padding:11px 16px;
    background:#263449;
    border:1px solid #536580;
    border-radius:11px;
    box-shadow:0 14px 38px #0008;
    font-size:12px;
    transition:.22s;
    max-width:min(90vw,430px);
    text-align:center;
}
.toast.show {
    opacity:1;
    transform:translate(-50%,0);
}
.save-state {
    font-size:10px;
    color:#7f91a9;
    display:flex;
    align-items:center;
    gap:5px;
}
.save-dot {
    width:6px;
    height:6px;
    background:#5bd39d;
    border-radius:50%;
    box-shadow:0 0 9px #5bd39d;
}
.footer-note {
    font-size:10px;
    color:#647189;
    text-align:center;
    margin:18px 0 0;
}
.modal-backdrop {
    position:fixed;
    inset:0;
    background:#05070dcc;
    display:none;
    place-items:center;
    z-index:30;
    padding:18px;
}
.modal-backdrop.open {
    display:grid;
}
.modal {
    max-width:390px;
    width:100%;
    background:#1b2231;
    border:1px solid #46536a;
    border-radius:15px;
    padding:20px;
    box-shadow:0 20px 70px #000b;
}
.modal h3 {
    margin:0 0 7px;
    font-size:17px;
}
.modal p {
    color:#aab6c9;
    font-size:12px;
    line-height:1.55;
}
.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:17px;
}
.danger {
    background:#42262e;
    border-color:#75404e;
    color:#ffc2c9;
}
@media(max-width:1120px) {
    .layout {
        grid-template-columns:255px minmax(340px,1fr);
    }
    .right-column {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }
    .right-column>.panel {
        min-width:0;
    }
    .inventory-panel {
        grid-row:span 2;
    }
    .right-column .panel {
        height:100%;
    }
}
@media(max-width:720px) {
    .app {
        padding:14px 12px 24px;
    }
    .topbar {
        align-items:flex-start;
    }
    .brand h1 {
        font-size:18px;
    }
    .top-actions {
        gap:6px;
    }
    .quiet-btn {
        padding:8px;
        font-size:10px;
    }
    .stats {
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }
    .stat {
        padding:11px 12px;
    }
    .stat .v {
        font-size:19px;
    }
    .layout {
        display:flex;
        flex-direction:column;
    }
    .layout>*,.right-column {
        width:100%;
    }
    .left-column {
        order:2;
    }
    .mine-column {
        order:1;
        width:100%;
    }
    .right-column {
        order:3;
        display:flex;
        flex-direction:column;
    }
    .mine-panel {
        min-height:0;
    }
    .mine-head {
        padding:13px;
    }
    .mine-stage {
        padding:20px 12px 13px;
    }
    .block-wrap {
        width:min(230px,64vw);
        margin:20px auto 13px;
    }
    .block-symbol {
        width:clamp(190px,58vw,235px);
        height:clamp(190px,58vw,235px);
    }
    .mine-footer {
        padding:13px;
    }
    .panel-head {
        padding:13px;
    }
    .panel-body {
        padding:11px;
    }
    .zone-list {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .depth-option {
        padding:8px;
    }
    .depth-select {
        max-width:155px;
    }
    .footer-note {
        margin-top:13px;
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        animation:none!important;
        transition:none!important;
    }
}
/* Ajuste de espaciado para el bloque de notas de herramientas. */
.panel-body-compact {
    padding-top:0;
}