/* M1 playable art MVP — original stone/rune UI, 2026-10-15.
 * This sheet changes paint only. V1 owns dock/rail dimensions, DOM order,
 * card typography sizes, touch targets, safe areas, hidden state and layers.
 * Fine inset edges/ornaments never reserve more battlefield space.
 */
body[data-m1-mvp] {
  --m1-ink:#263844;
  --m1-muted:#526064;
  --m1-gold:#b99a5c;
  --m1-gold-light:#e1c783;
  --m1-stone:#354450;
  --m1-cream:#ece6d4;
  --m1-panel-paint:
    url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,
    linear-gradient(155deg,#52616b,#35444e 56%,#293641);
  --m1-inset-paint:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#f5efde,#e8e1cf 70%,#d9d0ba);
  color:var(--m1-ink);
  background:#6e865c;
}

/* A slim slate frame beneath the direct tower and game controls. Existing
 * border widths remain unchanged; the gold carving is painted inward. */
body[data-m1-mvp] .game-dock {
  background:
    url('./assets/m1-ui/leaf-corner.svg') left top/18px 18px no-repeat,
    url('./assets/m1-ui/leaf-corner-br.svg') right bottom/18px 18px no-repeat,
    var(--m1-panel-paint)!important;
  outline-color:#ab985e;
  box-shadow:inset 0 0 0 1px #a08b58,inset 0 0 0 3px #28343e,
    inset 0 4px 0 #ffffff17,0 2px 8px #1c2a3545!important;
}
body[data-m1-mvp] .game-shell[data-layout-device="landscape"][data-side-controls="true"] .control-rail {
  background:var(--m1-panel-paint)!important;
  box-shadow:inset 1px 0 #bda369,inset 3px 0 #25333e!important;
}
body[data-m1-mvp] .game-shell[data-layout-device="landscape"][data-side-controls="true"] .game-dock {
  background:none!important;
  box-shadow:none!important;
}

/* Smooth pale stone insets carry the legible content. The backdrop is a
 * structural modal control, deliberately excluded from all button paint. */
body[data-m1-mvp] button:where(:not(#panel-backdrop)),
body[data-m1-mvp] .settings-menu summary {
  color:var(--m1-ink)!important;
  background:var(--m1-inset-paint)!important;
  border-color:#a69466!important;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px #fff9e780,inset 0 -2px 0 #b5a78b6b,
    0 1px 0 #152a3550!important;
  text-shadow:0 1px #ffffff72;
}
body[data-m1-mvp] button:where(:not(#panel-backdrop)):enabled:hover,
body[data-m1-mvp] .settings-menu summary:hover {
  background:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#fff7df,#eee5cb)!important;
  border-color:#d3b56a!important;
  box-shadow:inset 0 0 0 1px #f6dc9680,inset 0 -2px 0 #b5a78b6b,
    0 1px 0 #152a3550!important;
}
body[data-m1-mvp] button:where(:not(#panel-backdrop)):enabled:active,
body[data-m1-mvp] .settings-menu summary:active {
  box-shadow:inset 0 2px 4px #746c5545,inset 0 0 0 1px #b6a26d!important;
}
body[data-m1-mvp] :is(button,summary,[role="button"],a,input):focus-visible {
  outline:3px solid #f0d083;
  outline-offset:2px;
}
body[data-m1-mvp] button:disabled {
  text-shadow:none;
}

/* The five choices retain the original canvas, name, price and exact grid.
 * Restrained gold cuts in two corners make the cards feel hand carved. */
body[data-m1-mvp] :where(.tower-button,.branch-button,#range-upgrade,.selected-info) {
  background:
    url('./assets/m1-ui/rune-corner.svg') left top/13px 13px no-repeat,
    url('./assets/m1-ui/rune-corner-br.svg') right bottom/13px 13px no-repeat,
    var(--m1-inset-paint)!important;
  border-color:#b5a06b!important;
  box-shadow:inset 0 0 0 1px #fff9e780,inset 0 -2px 0 #b5a78b6b,
    0 1px 0 #152a3550!important;
}
body[data-m1-mvp] :is(.tower-copy strong,.branch-copy strong,#selected-name,#range-upgrade strong) {
  color:#283c47!important;
}
body[data-m1-mvp] :is(.tower-price,.branch-price,#range-price,#refund-value) {
  color:#77571f!important;
  font-variant-numeric:tabular-nums;
}
body[data-m1-mvp] :is(.selected-values,.branch-stats,#range-detail) {
  color:#4b605c!important;
}
body[data-m1-mvp] .selected-values b {
  color:#283e46!important;
  font-variant-numeric:tabular-nums;
}
body[data-m1-mvp] :is(.branch-afford,#range-afford,.placement-hint .invalid,#placement-reason.invalid) {
  color:#953c28!important;
}
body[data-m1-mvp] .tower-button.unaffordable,
body[data-m1-mvp] .branch-button:disabled,
body[data-m1-mvp] #range-upgrade:disabled {
  background:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#e7e2d6,#d9d4c7)!important;
  border-color:#aaa391!important;
  color:#66716b!important;
}
body[data-m1-mvp] .tower-button.unaffordable .tower-price {
  color:#8a5732!important;
}
body[data-m1-mvp] .tower-button.unaffordable .tower-icon,
body[data-m1-mvp] .branch-button:disabled .upgrade-preview {
  filter:saturate(.72);
}
/* Purchased/chosen controls are disabled by design. Their confirmation
 * paint follows unavailable paint so the existing chosen state stays clear. */
body[data-m1-mvp] .tower-button.active,
body[data-m1-mvp] .branch-button.chosen,
body[data-m1-mvp] #range-upgrade[data-purchased="true"],
body[data-m1-mvp] .view-settings button[aria-pressed="true"] {
  background:
    url('./assets/m1-ui/rune-corner.svg') left top/13px 13px no-repeat,
    url('./assets/m1-ui/rune-corner-br.svg') right bottom/13px 13px no-repeat,
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#e4ead1,#c8d3aa)!important;
  border-color:#77936b!important;
  box-shadow:inset 0 0 0 1px #a7bd87,inset 0 -2px 0 #79916855!important;
}
body[data-m1-mvp] .branch-button.chosen .branch-afford {
  color:#35513b!important;
}

/* Deep leaf green makes Start/Build immediately distinct. Gold is an inset
 * highlight, never a thicker border than the original primary control. */
body[data-m1-mvp] button.primary {
  color:#fff7df!important;
  border-color:#c9ae67!important;
  background:
    url('./assets/m1-ui/rune-corner.svg') left top/13px 13px no-repeat,
    url('./assets/m1-ui/rune-corner-br.svg') right bottom/13px 13px no-repeat,
    url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,
    linear-gradient(145deg,#4d7451,#2d533b 74%,#23452f)!important;
  box-shadow:inset 0 0 0 1px #6d8b55,inset 0 -2px 0 #193e2b,
    0 1px 0 #162a2755!important;
  text-shadow:0 1px 1px #173724;
}
body[data-m1-mvp] button.primary:enabled:hover {
  background:
    url('./assets/m1-ui/rune-corner.svg') left top/13px 13px no-repeat,
    url('./assets/m1-ui/rune-corner-br.svg') right bottom/13px 13px no-repeat,
    linear-gradient(145deg,#5c875d,#3a6447)!important;
  border-color:#efd083!important;
}
body[data-m1-mvp] button.primary:disabled {
  color:#eeecdd!important;
  background:linear-gradient(145deg,#71816a,#596a56)!important;
  border-color:#b1a174!important;
  text-shadow:none;
}
body[data-m1-mvp] #remove-tower {
  color:#674719!important;
  background:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#f5e6bb,#dac18c)!important;
  border-color:#c0a16b!important;
}
body[data-m1-mvp] :is(#cancel-placement,#close-tower-panel) {
  color:#30434e!important;
  border-color:#9d9d8c!important;
}
body[data-m1-mvp] .cancel-symbol {
  color:#30434e;
  font-weight:800;
}
body[data-m1-mvp] .sell-coin {
  filter:drop-shadow(0 1px 0 #79582055);
}

/* Resources are dark carved slate. Numbers stay bright and tabular, with
 * no letterspacing or size changes. Scene planners still own their anchor. */
body[data-m1-mvp] .hud,
body[data-m1-mvp] #desktop-status .hud {
  color:#fff6dc!important;
  background:
    url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,
    linear-gradient(145deg,#4b5963,#2d3b47)!important;
  border-color:#b39b62!important;
  box-shadow:inset 0 0 0 1px #baa16a,inset 0 0 0 3px #283641,
    inset 0 4px 0 #ffffff0e,0 2px 6px #1c2a3545!important;
}
body[data-m1-mvp] #desktop-status {
  box-shadow:0 2px 7px #1c2a3545!important;
}
body[data-m1-mvp] .map-heading strong {
  color:#fff4d3;
  font-family:Georgia,'Times New Roman',serif;
  text-shadow:0 1px 1px #111f2c;
}
body[data-m1-mvp] .resource-copy strong {
  color:#fff7df!important;
  text-shadow:0 1px 1px #182832;
}
body[data-m1-mvp] .resource-label {
  color:#eee1ba!important;
}
body[data-m1-mvp] .wave-forecast,
body[data-m1-mvp] #desktop-status .wave-forecast {
  color:var(--m1-ink)!important;
  background:var(--m1-inset-paint)!important;
  border-color:#b5a06b!important;
  box-shadow:inset 0 0 0 1px #b8a477,0 2px 5px #1d2e3433!important;
}
body[data-m1-mvp] :is(#wave-label,.enemy-count,.forecast-open-icon) {
  color:#2e424c!important;
}
body[data-m1-mvp] #desktop-status .wave-forecast {
  box-shadow:inset 0 0 0 1px #b8a477!important;
}
body[data-m1-mvp] .game-shell[data-layout-device="landscape"][data-side-controls="true"] .selected-info {
  background:var(--m1-inset-paint)!important;
}

/* Modal panels keep V1's inert background, root layer and sticky Close.
 * Leaf interlace is limited to their corners and is never over body copy. */
body[data-m1-mvp] :is(.settings-card,.forecast-details,.overlay-card,#tower-picker) {
  color:var(--m1-ink)!important;
  background:
    url('./assets/m1-ui/leaf-corner.svg') left top/24px 24px no-repeat,
    url('./assets/m1-ui/leaf-corner-br.svg') right bottom/24px 24px no-repeat,
    var(--m1-inset-paint)!important;
  border-color:#a28b55!important;
  box-shadow:inset 0 0 0 1px #fbefd0,inset 0 0 0 4px #b9a77555,
    0 6px 24px #14263255!important;
}
body[data-m1-mvp] #v1-ui-layer :is(.settings-heading,.forecast-heading) {
  background:var(--m1-inset-paint)!important;
  box-shadow:0 1px #b9a7757a;
}
body[data-m1-mvp] :is(.overlay-card h2,.shop-heading h2,.forecast-heading strong,.settings-heading strong) {
  color:#304652!important;
  font-family:Georgia,'Times New Roman',serif;
}
body[data-m1-mvp] :is(.overlay-card .eyebrow,.shop-heading small,#build-version,.prototype-label) {
  color:#75603a!important;
}
body[data-m1-mvp] :is(.settings-card small,.settings-card .v1-test-note,#forecast-detail-content,.overlay-card p) {
  color:#4b5d60;
}
body[data-m1-mvp] .settings-card a {
  color:#355a55;
}
body[data-m1-mvp] .settings-card input {
  accent-color:#517252;
}
body[data-m1-mvp] .rotation-lab-link {
  border-color:#ada078;
  background:#f6efdc70;
}
body[data-m1-mvp] #forecast-detail-content .enemy-card {
  background:#d7d3c44d;
  box-shadow:inset 0 0 0 1px #b9b2a44d;
}
body[data-m1-mvp] #forecast-detail-content .enemy-trait {
  color:#526267;
}
body[data-m1-mvp] :is(.map-card.active,.map-card.chosen) {
  border-color:#7d9368!important;
  box-shadow:inset 0 0 0 1px #8baa70!important;
}
body[data-m1-mvp] :is(.placement-actions,.feedback,.camera-controls) {
  color:var(--m1-ink);
  background:var(--m1-inset-paint)!important;
  border-color:#a58f5b!important;
  box-shadow:inset 0 0 0 1px #fff6dd70,0 2px 7px #19323c55!important;
}
body[data-m1-mvp] .placement-actions::before {
  background:#ede6d2;
  border-color:#a58f5b;
}
body[data-m1-mvp] .pause-note {
  color:#fff4d6;
  background:#2a3b48eb;
  box-shadow:inset 0 0 0 1px #b69c666b;
}
body[data-m1-mvp] :is(#placement-status,#placement-reason) {
  color:#334d50;
}
body[data-m1-mvp] .game-shell[data-layout-device="portrait"][data-side-controls="false"] #placement-status {
  color:#f6edce;
}
body[data-m1-mvp] .settings-card .storage-notice {
  background:#f4e4b7;
  color:#674827;
  border-color:#b19459;
}

/* Four camera stops: two44px targets plus a small44px-high readable label.
 * Runtime places this floating group; it reserves no rail/dock space. */
body[data-m1-mvp] #m1-view-controls {
  display:flex;
  align-items:center;
  gap:3px;
  width:126px;
  height:44px;
  color:#fff0cd;
  border-radius:6px;
  background:var(--m1-panel-paint);
  box-shadow:inset 0 0 0 1px #b7a06b,0 2px 5px #20313b44;
  pointer-events:auto;
}
body[data-m1-mvp] #m1-view-controls[hidden] {
  display:none!important;
}
body[data-m1-mvp] #m1-view-controls :is(#m1-rotate-left,#m1-rotate-right) {
  flex:none;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  font-size:24px;
  line-height:1;
}
body[data-m1-mvp] #m1-view-label {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:44px;
  font-size:10px;
  line-height:13px;
  text-align:center;
  color:#fff2d1;
  font-variant-numeric:tabular-nums;
}
body[data-m1-mvp] #m1-view-controls [aria-hidden="true"] {
  pointer-events:none;
}