.mv-strip { --mv-grid-unit: 3cqw; --mv-edge-depth: .25cqw; position: relative; display: block; width: 100%; min-width: 0; container-type: inline-size; isolation: isolate; overflow: hidden; border-radius: 6px; background: #24362c; box-shadow: 0 3px 8px #0005; }
.mv-strip > .mv-backdrop { display: block; width: 100%; height: 100%; object-fit: fill; filter: brightness(.52) saturate(.66); pointer-events: none; }
.mv-strip .mv-cell { position: absolute; inset-block: 5% 6%; display: grid; place-items: center; box-sizing: border-box; margin: 0; padding: .4cqw; border: 1px solid #e6e4b71a; border-radius: 6px; background: #14271ce0; color: #c1ccbc; transition: background .1s, box-shadow .1s; }
.mv-strip button.mv-cell { cursor: pointer; min-width: 0; min-height: 0; font: inherit; }
.mv-strip button.mv-cell:disabled { cursor: default; opacity: 1; }
.mv-strip button.mv-cell:not(:disabled):hover { background: #34402be8; }
.mv-strip .mv-cell.mv-next { border-left: 2px solid #d7c17a; }
.mv-strip .mv-cell.mv-mined { background: repeating-linear-gradient(135deg, #17271eeb 0 6px, #24372be8 6px 7px); box-shadow: inset 0 3px 8px #0009; border-color: #c1c6ae26; }
.mv-mined-mark { font-size: clamp(12px, 2vw, 22px); line-height: 1; opacity: .6; text-shadow: 0 1px 2px #000; }
.mv-strip .mv-cell.mv-selected { background: #3c4026eb; box-shadow: inset 0 0 0 2px #e2b14b; border-color: #f2d991; }
.mv-strip .mv-cell.mv-preview { background: #4a4930eb; box-shadow: inset 0 0 0 2px #fff0a7; border-color: #fff1b0; }
.mv-strip button.mv-cell:focus-visible { outline: 3px solid #fff3b1; outline-offset: -3px; z-index: 3; }
.mv-tokens { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .55cqw; pointer-events: none; filter: drop-shadow(2px 5px 3px #000c); }
.mv-token { position: relative; display: inline-grid; place-items: center; width: 92%; height: 86%; min-height: 0; isolation: isolate; transform: rotate(-3deg); }
/* Resources share one icon size. Goods use one grid pitch across every strip;
   long one-row tiles turn vertically to fit without reducing their scale. */
.mv-strip .mv-tokens > .mv-token { flex: 0 0 auto; width: 6.4cqw; height: 6.4cqw; }
.mv-strip .mv-tokens > .mv-token-good { width: calc(var(--mv-display-width) * var(--mv-grid-unit)); height: calc(var(--mv-display-height) * var(--mv-grid-unit)); transform: none; }
.mv-token > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.mv-token > .mv-token-edge-back { transform: translate(0, 4px); filter: brightness(.20) saturate(.55); }
.mv-token > .mv-token-edge-front { transform: translate(0, 2px); filter: brightness(.48) saturate(.6); }
.mv-token > .mv-token-face { filter: drop-shadow(0 -1px 0 #ffedb575); }
.mv-strip .mv-token-good > img { inset: auto; left: 50%; top: 50%; width: calc(var(--mv-grid-width) * var(--mv-grid-unit)); height: calc(var(--mv-grid-height) * var(--mv-grid-unit)); object-fit: fill; transform: translate(-50%, -50%) rotate(var(--mv-art-turn)); }
.mv-strip .mv-token-good > .mv-token-edge-back { transform: translate(-50%, calc(-50% + var(--mv-edge-depth))) rotate(var(--mv-art-turn)); }
.mv-strip .mv-token-good > .mv-token-edge-front { transform: translate(-50%, calc(-50% + var(--mv-edge-depth) / 2)) rotate(var(--mv-art-turn)); }
.mv-token-coin { width: 78%; }
.mv-token-ore { transform: none; }
.mv-ore-model { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 3px 1px #0008); }
.mv-ore-fallback { position: relative; display: block; width: 90%; height: 94%; }
.mv-ore-fallback > i { position: absolute; inset: 0; display: block; background-size: cover; }
.mv-ore-top { clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%); filter: brightness(1.15); }
.mv-ore-left { clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%); filter: brightness(.65); }
.mv-ore-right { clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); filter: brightness(.9); }
@media (prefers-reduced-motion: reduce) { .mv-strip .mv-cell { transition: none; } }

.mv-strip { --mv-grid-unit: var(--game-cell); --mv-edge-depth: calc(var(--game-cell) / 12); width: calc(var(--game-cell) * 32); max-width: none; }
.mv-strip .mv-tokens > .mv-token:not(.mv-token-good) { width: var(--game-cell); height: var(--game-cell); transform: none; }
.mv-strip .mv-tokens > .mv-token[data-resource-id="wood"], .mv-strip .mv-tokens > .mv-token[data-resource-id="stone"] { height: calc(var(--game-cell) * 2); }
.mv-strip .mv-tokens > .mv-token[data-resource-id="fishing"] { width: calc(var(--game-cell) * 3); height: calc(var(--game-cell) * 2); }
.mv-strip .mv-token-cutout:not(.mv-token-good) > img { object-fit: fill; }
#mountainList, #mountainDetail, .mountain-plan-group { overflow-x: auto; min-width: 0; }
.mountain-choice-strip { width: calc(var(--game-cell) * 32); }
.mountain-material-option > .mv-token { width: var(--game-cell); height: calc(var(--game-cell) * 2); }
.mountain-material-option > .mv-token-ore { height: var(--game-cell); }
