/* Independent M1 flat playtest. Original V1 and painted presentation stay intact. */
body[data-m1-flat] #result .overlay-card { max-height:calc(100dvh - 24px); overflow:auto; }
body[data-m1-flat] .score-card { display:grid; gap:4px; margin:12px 0; padding:14px; border:1px solid #ab9055; border-radius:8px; background:#263c38; color:#f5e7b8; text-align:center; }
body[data-m1-flat] #result-score { font-size:clamp(30px,7vw,48px); line-height:1.1; font-variant-numeric:tabular-nums; }
body[data-m1-flat] #score-breakdown { color:#efdfb1; font-size:12px; line-height:1.5; }
body[data-m1-flat] .score-note { font-size:12px; line-height:1.5; }
body[data-m1-flat] #share-result { min-height:44px; width:100%; }
body[data-m1-flat] #share-status { display:block; margin:6px 0; }
body[data-m1-flat] #share-copy { width:100%; min-height:100px; box-sizing:border-box; font:13px/1.5 system-ui; }
/* Same portrait type sizes, with less empty card width beside the castle. */
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] .hud[data-control-layout="scene"][data-viewport-fixed="true"][data-scene-shape="regular"] {
  width:148px;
}
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] .hud[data-control-layout="scene"][data-viewport-fixed="true"][data-scene-shape="compact"] {
  width:120px;
}
body[data-m1-flat] #m1-playtest-label {
  position:absolute; z-index:1; right:8px; bottom:calc(100% + 4px);
  display:block; margin:0; padding:2px 7px; border-radius:4px;
  color:#f8efd3; background:#30434deb; box-shadow:inset 0 0 0 1px #b59d665c;
  font-size:11px; line-height:16px; font-weight:600; white-space:nowrap;
  pointer-events:none;
}
body[data-m1-flat] .tower-afford:not([hidden]) {
  display:block; margin:0; color:#943d2b; font-size:10px; line-height:12px;
  font-weight:700; white-space:nowrap;
}
body[data-m1-flat] .tower-button.unaffordable { opacity:1; }
/* Placement is an overlay, never a reason to resize or hide shop controls. */
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] #shop-inline #tower-shop {
  height:64px; min-height:64px; grid-template-rows:64px;
}
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] #tower-shop .tower-button {
  height:64px; min-height:64px; padding:1px; gap:0;
}
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] #tower-shop .tower-icon {
  display:block; width:20px; height:20px;
}
body[data-m1-flat] .game-shell[data-layout-device="portrait"][data-side-controls="false"] #tower-shop :is(.tower-copy strong,.tower-price) {
  font-size:11px; line-height:14px;
}
/* Reserve the shortfall line in every card so icons and labels never jump
 * when a purchase changes affordability. Hidden amounts remain unannounced. */
body[data-m1-flat] .game-shell[data-touch-ui="true"] #tower-shop .tower-afford {
  display:block!important; height:12px; min-height:12px; line-height:12px;
}
body[data-m1-flat] .game-shell[data-touch-ui="true"] #tower-shop .tower-afford[hidden] {
  visibility:hidden;
}
body[data-m1-flat] .game-shell[data-side-controls="true"] #tower-shop {
  grid-template-rows:repeat(2,minmax(58px,1fr)); min-height:118px;
}
body[data-m1-flat] .game-shell[data-side-controls="true"] #tower-shop .tower-button {
  min-height:58px;
}
body[data-m1-flat] .game-shell[data-side-controls="true"] #tower-shop .tower-icon { display:block; }
body[data-m1-flat] #placement-actions[data-awaiting-ground="true"] { width:120px; }
body[data-m1-flat] #placement-actions[data-awaiting-ground="true"] #cancel-placement { width:110px; min-width:110px; }
body[data-m1-flat] #placement-actions[data-side="hint"]::before { display:none; }
body[data-m1-flat] #placement-actions #placement-panel {
  position:static; inset:auto; width:auto; max-width:100%; height:auto; min-height:0;
  margin:0; padding:3px; border:0; border-radius:0; background:none;
  box-shadow:none; overflow:visible; clip-path:none;
}
body[data-m1-flat] #placement-title { display:none; }
body[data-m1-flat] #placement-actions #placement-status {
  display:block; max-width:100%; color:#334d50;
  font-size:12px; line-height:16px; white-space:normal; overflow-wrap:anywhere;
}
body[data-m1-flat] #placement-actions #placement-status.invalid { color:#953c28!important; }
body[data-m1-flat] .game-shell[data-side-controls="true"] #m1-playtest-label {
  position:fixed; top:calc(var(--safe-top) + 5px); bottom:auto;
  right:calc(192px + var(--safe-right) + 8px);
}

/* M1 0.4 paint only. The older M1 sheet still owns every layout metric.
 * Carving stays in the existing frame and two-pixel inner-edge channels;
 * it never adds padding, grid slots, border width, or smaller type. */
body[data-m1-flat] {
  --m1-flat-vine-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M2 4h116M12 4l5-3m7 3 5 3m9-3 5-3m34 3 5 3m9-3 5-3m7 3 5 3' fill='none' stroke='%23694f2e' stroke-width='1.3' opacity='.38'/%3E%3Cpath d='M2 3.5h116M12 3.5l5-3m7 3 5 3m9-3 5-3m34 3 5 3m9-3 5-3m7 3 5 3' fill='none' stroke='%23c7ad6f' stroke-width='.7'/%3E%3Cpath d='m60 .5 4 3.5-4 3.5-4-3.5Z' fill='%23927a49'/%3E%3Cpath d='m60 2 2 2-2 2-2-2Z' fill='%23e5cf94'/%3E%3C/svg%3E");
  --m1-flat-carved-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.5 18V6l4.5-4.5H18M3 16V7l4-4h9' fill='none' stroke='%237c6339' stroke-width='.8' opacity='.65'/%3E%3Cpath d='M2 17V6.5L6.5 2H17M2.5 11c2-2 2-4 1-5m2-2c3 1 5 0 6-1' fill='none' stroke='%23d6bd7d' stroke-width='.75'/%3E%3Cpath d='m2.4 13 .9-2.6 1 1.3ZM13 2.4l-2.6.9 1.3 1Z' fill='%23958d58'/%3E%3C/svg%3E");
  --m1-flat-carved-corner-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg transform='rotate(180 10 10)'%3E%3Cpath d='M1.5 18V6l4.5-4.5H18M3 16V7l4-4h9' fill='none' stroke='%237c6339' stroke-width='.8' opacity='.65'/%3E%3Cpath d='M2 17V6.5L6.5 2H17M2.5 11c2-2 2-4 1-5m2-2c3 1 5 0 6-1' fill='none' stroke='%23d6bd7d' stroke-width='.75'/%3E%3Cpath d='m2.4 13 .9-2.6 1 1.3ZM13 2.4l-2.6.9 1.3 1Z' fill='%23958d58'/%3E%3C/g%3E%3C/svg%3E");
  --m1-flat-end-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 3'%3E%3Cpath d='M1 1.5h15m12 0h15m-24 0 3-1 3 1-3 1Z' fill='none' stroke='%23a58b53' stroke-width='.65'/%3E%3C/svg%3E");
  --m1-flat-inset-frame:
    var(--m1-flat-carved-corner) left top/16px 16px no-repeat,
    var(--m1-flat-carved-corner-br) right bottom/16px 16px no-repeat;
  --m1-panel-paint:
    url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,
    linear-gradient(155deg,#53616a,#35454f 56%,#293740);
  --m1-inset-paint:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(135deg,#f6efdd,#e9e1cf 68%,#d8ceb8);
}

/* The slate casing is the ornament's own channel. Its six-pixel side
 * padding already separates these narrow vines from the portrait cards. */
body[data-m1-flat] .game-dock {
  background:
    var(--m1-flat-vine-edge) center 1px/84px 3px no-repeat,
    var(--m1-flat-carved-corner) 1px 1px/21px 21px no-repeat,
    var(--m1-flat-carved-corner-br) right 1px bottom 1px/21px 21px no-repeat,
    var(--m1-panel-paint)!important;
  box-shadow:inset 0 0 0 1px #bea56d,inset 0 0 0 3px #263640,
    inset 0 4px 0 #ffffff18,0 2px 8px #1c2a3545!important;
}
body[data-m1-flat] .game-shell[data-layout-device="landscape"][data-side-controls="true"] .control-rail {
  background:
    var(--m1-flat-vine-edge) center 1px/102px 3px no-repeat,
    var(--m1-panel-paint)!important;
}
body[data-m1-flat] .game-shell[data-side-controls="true"] .game-dock {
  background:none!important;
  box-shadow:none!important;
}

/* Keep large flourishes off the content faces. Engraved corner paths hug
 * their edges; each original enabled/unavailable/chosen state keeps its tint. */
body[data-m1-flat] :is(.tower-button,.branch-button,#range-upgrade) {
  --m1-flat-card-surface:var(--m1-inset-paint);
  background:var(--m1-flat-inset-frame),var(--m1-flat-card-surface)!important;
  box-shadow:inset 0 0 0 1px #fff8e5a6,inset 0 -2px 0 #a998765e,
    0 1px 0 #152a3550!important;
}
body[data-m1-flat] :is(.tower-button.unaffordable,.branch-button:disabled,#range-upgrade:disabled) {
  --m1-flat-card-surface:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#e8e2d5,#d9d2c4);
}
body[data-m1-flat] :is(.tower-button.active,.branch-button.chosen,#range-upgrade[data-purchased="true"]) {
  --m1-flat-card-surface:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#e5ead3,#c6d1aa);
  box-shadow:inset 0 0 0 1px #a7bd87,inset 0 -2px 0 #79916855!important;
}
body[data-m1-flat] :is(.tower-button,.branch-button,#range-upgrade):enabled:not(.active):not(.chosen):not([data-purchased="true"]):hover {
  --m1-flat-card-surface:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#fff6df,#eee4cb);
}

/* Selected information gets a dedicated top channel. In portrait, Cancel
 * occupies the right64px plus the existing5px panel inset. Ending77px from
 * the edge leaves a measured8px gap rather than painting beneath its face.
 * Desktop/landscape move Cancel outside this information card automatically. */
body[data-m1-flat] .game-shell .selected-info {
  --m1-ornament-end:10px;
  --m1-ornament-channel-height:2px;
  background:var(--m1-inset-paint)!important;
}
body[data-m1-flat] .game-shell .selected-info:has(#close-tower-panel) {
  --m1-ornament-end:77px;
}
body[data-m1-flat] .selected-info::after {
  content:''; position:absolute; left:10px; right:var(--m1-ornament-end);
  top:1px; height:var(--m1-ornament-channel-height);
  background:var(--m1-flat-vine-edge) center/96px 2px no-repeat;
  pointer-events:none;
}

/* Both Cancel locations carry their own quiet end marks. Neither control
 * sits over another panel's corner. These absolute two-pixel channels have
 * no layout footprint, and retain the original44px-or-larger touch target. */
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel) {
  position:relative;
  background:var(--m1-inset-paint)!important;
  box-shadow:inset 0 0 0 1px #fff9e7a6,inset 0 -2px 0 #b5a78b6b,
    0 1px 0 #152a3550!important;
}
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel)::before,
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel)::after {
  content:''; position:absolute; left:6px; right:6px; height:2px;
  background:var(--m1-flat-end-mark) center/32px 2px no-repeat;
  pointer-events:none;
}
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel)::before { top:2px; }
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel)::after { bottom:2px; }
body[data-m1-flat] :is(#cancel-placement,#close-tower-panel):enabled:hover {
  background:
    url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,
    linear-gradient(145deg,#fff7df,#eee5cb)!important;
}

body[data-m1-flat] :is(.settings-card,.forecast-details,.overlay-card,#tower-picker) {
  background:
    var(--m1-flat-vine-edge) center 2px/120px 4px no-repeat,
    var(--m1-flat-carved-corner) left top/25px 25px no-repeat,
    var(--m1-flat-carved-corner-br) right bottom/25px 25px no-repeat,
    var(--m1-inset-paint)!important;
}