/* Compact field expedition, using the wetland notebook's cream and moss palette. */ #mineContent { max-width: 820px; margin: 0 auto; padding: clamp(10px, 2vw, 18px); color: #3e4d40; } #mineContent * { box-sizing: border-box; } #mineContent .mine-panel { display: grid; gap: 14px; } #mineContent .mine-heading, #mineContent .mine-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #mineContent .mine-heading { padding: 14px 16px; border: 1px solid #d7d7c4; border-radius: 17px; background: linear-gradient(120deg, #f8f4e6, #e9eee1); } #mineContent .mine-eyebrow { display: block; color: #829073; font-size: .62rem; font-weight: 800; letter-spacing: .13em; } #mineContent h2, #mineContent h3, #mineContent h4, #mineContent p { margin-top: 0; } #mineContent .mine-heading h2 { margin: 4px 0; color: #465b46; font: 700 1.45rem/1.1 Georgia, serif; } #mineContent .mine-heading p { margin: 0; color: #6f7968; font-size: .77rem; line-height: 1.45; } #mineContent .mine-depth-badge { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #cbd6bc; border-radius: 30px; background: #f7f8ef; color: #55714d; font-size: .75rem; font-weight: 800; } #mineContent .mine-unlock-note { padding: 10px 12px; border: 1px solid #dfcfaa; border-radius: 11px; background: #fbf1da; color: #79633c; font-size: .78rem; line-height: 1.4; } #mineContent .mine-dig-panel, #mineContent .mine-resource-panel, #mineContent .mine-tool-panel, #mineContent .mine-crafts-panel { padding: 13px; border: 1px solid #d8dccd; border-radius: 16px; background: #fbfaf1; box-shadow: 0 3px 10px rgba(63, 77, 59, .045); } #mineContent .mine-scene { overflow: hidden; border: 1px solid #d4c6aa; border-radius: 13px; background: #e9dfc9; } #mineContent .mine-cutaway { display: block; width: 100%; height: auto; } #mineContent .mine-svg-label { fill: #f8f0df; font: 700 12px Georgia, serif; paint-order: stroke; stroke: rgba(66, 56, 44, .45); stroke-width: 2px; stroke-linejoin: round; } #mineContent .mine-depth-tag rect { filter: drop-shadow(0 2px 3px rgba(47, 41, 31, .2)); } #mineContent .mine-capuchin-art { transform-box: fill-box; transform-origin: 55% 82%; } #mineContent .mine-pickaxe { transform-box: view-box; transform-origin: 75px 117px; transform: scale(.88); will-change: transform; } #mineContent .mine-scene[data-motion="working"] .mine-pickaxe { animation: minePickaxeSwing 1.15s cubic-bezier(.42, 0, .58, 1) infinite; } #mineContent .mine-held-pickaxe-frame { opacity: 0; pointer-events: none; } #mineContent .mine-scene[data-pickaxe="0"] .mine-held-pickaxe-0, #mineContent .mine-scene[data-pickaxe="1"] .mine-held-pickaxe-1, #mineContent .mine-scene[data-pickaxe="2"] .mine-held-pickaxe-2, #mineContent .mine-scene[data-pickaxe="3"] .mine-held-pickaxe-3 { opacity: 1; } #mineContent .mine-mineral-node { opacity: 0; transition: opacity .3s ease, filter .3s ease; } #mineContent .mine-mineral-node.is-possible { opacity: 1; } #mineContent .mine-mineral-node image { filter: drop-shadow(0 1px 2px rgba(17, 13, 9, .4)); } #mineContent .mine-impact-dust { fill: none; stroke: #f3dfb7; stroke-width: 2.4; stroke-linecap: round; pointer-events: none; } #mineContent .mine-impact-burst { opacity: 0; transform-box: fill-box; transform-origin: center; } #mineContent .mine-miner-shadow { transition: transform .12s linear; } #mineContent .mine-scene[data-motion="working"] .mine-mineral-node.is-active .mine-impact-burst { animation: mineImpactDust 1.15s linear infinite; } #mineContent .mine-current-floor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 3px 8px; } #mineContent .mine-current-floor strong, #mineContent .mine-current-floor small { display: block; } #mineContent .mine-current-floor strong { margin-top: 3px; color: #52684d; font-size: .82rem; } #mineContent .mine-current-floor small { margin-top: 3px; color: #7d8572; font-size: .68rem; } #mineContent .mine-current-floor .mine-floor-bonus { color: #8d7345; font-size: .68rem; } #mineContent .mine-floor-stamp { padding: 6px 8px; border: 1px solid #ddd8c6; border-radius: 8px; background: #f0eee2; color: #827760; font-size: .64rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; } #mineContent .mine-floor-stamp.is-cleared { border-color: #c7d6bd; background: #e8f0df; color: #5d7953; } #mineContent .mine-floor-stamp.is-digging { border-color: #dfc47e; background: #fbf0ce; color: #886a30; } #mineContent .mine-progress-track { height: 8px; overflow: hidden; border-radius: 10px; background: #e4e5d8; } #mineContent .mine-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #91a969, #caa354); transition: width .15s linear; } #mineContent .mine-dig-status { min-height: 1.3em; margin: 7px 1px 10px; color: #737e6c; font-size: .7rem; } #mineContent .mine-main-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; } #mineContent .mine-navigation { display: flex; gap: 7px; } #mineContent .mine-button { min-height: 40px; padding: 8px 10px; border: 1px solid #a8b493; border-radius: 9px; background: #eff2e6; color: #4f6749; font: inherit; font-size: .71rem; font-weight: 750; line-height: 1.2; cursor: pointer; transition: background .15s, transform .15s, opacity .15s; } #mineContent .mine-button:hover:not(:disabled) { transform: translateY(-1px); background: #e3ead8; } #mineContent .mine-button:focus-visible { outline: 3px solid #9bb48a; outline-offset: 2px; } #mineContent .mine-button-primary { border-color: #4f7957; background: #5b815d; color: #fffdf3; } #mineContent .mine-button-primary:hover:not(:disabled) { background: #486f50; } #mineContent .mine-button-next-depth { border-color: #a87a35; background: #f7e8bb; color: #694c20; box-shadow: 0 0 0 2px rgba(191, 151, 77, .2); } #mineContent .mine-button-next-depth:hover:not(:disabled) { background: #f1dda5; } #mineContent .mine-button-upgrade { width: 100%; border-color: #c5a55e; background: #f4e8c6; color: #735e36; } #mineContent .mine-button-upgrade:hover:not(:disabled) { background: #eee0b7; } #mineContent .mine-button:disabled { cursor: default; opacity: .56; } #mineContent .mine-lower-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr); gap: 12px; } #mineContent .mine-subheading { margin-bottom: 10px; } #mineContent .mine-subheading h3 { margin: 3px 0 0; color: #50644b; font: 700 1.06rem/1.1 Georgia, serif; } #mineContent .mine-subheading h4 { margin: 3px 0 0; color: #58674f; font: 700 .84rem/1.2 Georgia, serif; } #mineContent .mine-pack-note { color: #88907e; font-size: .68rem; } #mineContent .mine-resources { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; } #mineContent .mine-resource { display: grid; grid-template-columns: 13px 1fr; align-items: center; gap: 3px 6px; padding: 8px 6px; border: 1px solid #e2e3d6; border-radius: 10px; background: #fffdf6; color: #707968; font-size: .68rem; } #mineContent .mine-resource strong { grid-column: 2; color: #465844; font-size: .88rem; font-variant-numeric: tabular-nums; } #mineContent .mine-mineral-mark { width: 11px; height: 11px; border-radius: 3px 5px 3px 5px; background: var(--ore-color); box-shadow: inset 1px 1px 2px rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.12); transform: rotate(35deg); } #mineContent .mine-resource-clay { --ore-color: #bd8a63; } #mineContent .mine-resource-quartz { --ore-color: #c5d7cd; } #mineContent .mine-resource-amethyst { --ore-color: #a88ac2; } #mineContent .mine-resource-gold { --ore-color: #d9b852; } #mineContent .mine-odds { margin-top: 13px; padding-top: 11px; border-top: 1px solid #e6e5d8; } #mineContent .mine-odds > p { margin: -3px 0 8px; color: #808677; font-size: .68rem; line-height: 1.4; } #mineContent .mine-odds ul { display: flex; flex-wrap: wrap; gap: 5px 11px; margin: 0; padding: 0; list-style: none; } #mineContent .mine-odds li { display: inline-flex; align-items: center; gap: 5px; color: #6f7869; font-size: .67rem; } #mineContent .mine-odds li strong { color: #4c6249; font-variant-numeric: tabular-nums; } #mineContent .mine-odds-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ore-color); } #mineContent .mine-odds-clay { --ore-color: #bd8a63; } #mineContent .mine-odds-quartz { --ore-color: #9fb8aa; } #mineContent .mine-odds-amethyst { --ore-color: #987bb1; } #mineContent .mine-odds-gold { --ore-color: #c8a540; } #mineContent .mine-pickaxe-art { width: min(100%, 164px); aspect-ratio: 1; height: auto; margin: -5px auto 5px; background-image: url('pickaxe-set.png'); background-repeat: no-repeat; background-size: 200% 200%; background-position: 0 0; filter: drop-shadow(0 4px 5px rgba(75, 63, 43, .13)); } #mineContent .mine-pickaxe-art[data-level="1"] { background-position: 100% 0; } #mineContent .mine-pickaxe-art[data-level="2"] { background-position: 0 100%; } #mineContent .mine-pickaxe-art[data-level="3"] { background-position: 100% 100%; } #mineContent .mine-tool-panel > p { margin: 0 0 11px; color: #778070; font-size: .7rem; line-height: 1.45; } #mineContent .mine-tool-panel > small { display: block; margin-top: 7px; color: #848a7d; font-size: .68rem; line-height: 1.4; } #mineContent .mine-crafts-panel { padding-bottom: 12px; } #mineContent .mine-craft-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } #mineContent .mine-craft-card { display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: start; gap: 7px; padding: 9px; border: 1px solid #e1dfcf; border-radius: 11px; background: #fffdf5; } #mineContent .mine-craft-card.is-crafted { border-color: #b8cdae; background: #f0f5e8; } #mineContent .mine-craft-gem { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #eee7d1; color: #8c704a; font: 700 1.2rem/1 Georgia,serif; } #mineContent .mine-craft-card h4 { margin: 1px 0 3px; color: #4e624a; font: 700 .8rem/1.18 Georgia,serif; } #mineContent .mine-craft-card p { min-height: 2.7em; margin: 0 0 5px; color: #788071; font-size: .7rem; line-height: 1.4; } #mineContent .mine-craft-card small { color: #8b7956; font-size: .68rem; } #mineContent .mine-button-craft { grid-column: 1 / -1; width: 100%; min-height: 40px; padding: 6px; font-size: .68rem; } #mineContent .mine-rule-note { margin: 0 2px; color: #848b7b; font-size: .68rem; line-height: 1.55; } #mineContent.is-locked .mine-dig-panel, #mineContent.is-locked .mine-lower-grid, #mineContent.is-locked .mine-crafts-panel { opacity: .48; } @keyframes minePickaxeSwing { 0%, 100% { transform: scale(.88) rotate(-10deg); } 26% { transform: scale(.88) rotate(22deg); } 55% { transform: scale(.88) rotate(-8deg); } 78%, 80% { transform: scale(.88) rotate(-35deg); } 86% { transform: scale(.88) rotate(-10deg); } } @keyframes mineImpactDust { 0%, 77% { opacity: 0; transform: scale(.55); } 81% { opacity: .88; transform: scale(1); } 88% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.2); } } @media (max-width: 620px) { #mineContent { padding: 9px; } #mineContent .mine-heading { align-items: flex-start; padding: 12px; } #mineContent .mine-heading h2 { font-size: 1.28rem; } #mineContent .mine-depth-badge { font-size: .72rem; } #mineContent .mine-lower-grid { grid-template-columns: 1fr; } #mineContent .mine-craft-grid { grid-template-columns: 1fr; } #mineContent .mine-craft-card p { min-height: 0; } #mineContent .mine-resources { gap: 4px; } #mineContent .mine-resource { grid-template-columns: 10px 1fr; gap: 4px; padding: 7px 4px; font-size: .66rem; } #mineContent .mine-resource strong { font-size: .8rem; } #mineContent .mine-main-actions { grid-template-columns: 1fr; } #mineContent .mine-navigation { display: grid; grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { #mineContent .mine-progress-track span, #mineContent .mine-mineral-node { transition: none; } #mineContent .mine-pickaxe, #mineContent .mine-impact-burst { animation: none !important; } }