/* The painting is the button body. Live text and native interaction stay in HTML. */
:root {
  --painted-amber: #20281f;
  --painted-paper: #fff0ca;
  --painted-focus: #fff0ca;
  --painted-touch: 44px;
  --painted-h: 64px;
  --painted-left-ratio: 1.5435;
  --painted-right-ratio: .7609;
  --painted-source: var(--painted-primary);
  --painted-slice: 0 105 0 213 fill;
  --painted-ink: var(--painted-amber);
  --painted-text-shadow: 0 1px #ffe08d;
  --painted-primary: url('/workshop/assets/controls/primary-painted-v2.webp');
  --painted-market: url('/workshop/assets/controls/market-painted-v2.webp');
  --painted-upgrade: url('/workshop/assets/controls/upgrade-painted-v2.webp');
  --painted-secondary: url('/workshop/assets/controls/secondary-painted-v2.webp');
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) {
  --painted-left: calc(var(--painted-h) * var(--painted-left-ratio));
  --painted-right: calc(var(--painted-h) * var(--painted-right-ratio));
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0;
  width: var(--painted-width, fit-content);
  min-width: var(--painted-min-width, min(100%, 250px));
  max-width: 100%;
  height: var(--painted-h);
  min-height: var(--painted-touch);
  padding: 4px calc(var(--painted-right) + var(--painted-label-gap, 5px)) 4px calc(var(--painted-left) + var(--painted-label-gap, 5px));
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  color: var(--painted-ink);
  font: var(--painted-font-weight, 800) var(--painted-font-size, 25px)/1.12 var(--painted-font-family, Barlow), sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--painted-text-shadow);
  white-space: normal;
  overflow-wrap: normal;
  opacity: 1;
  transform: none;
  translate: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button)::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  background: none;
  border: 0 solid transparent;
  border-image-source: var(--painted-source);
  border-image-slice: var(--painted-slice);
  border-image-width: 0 var(--painted-right) 0 var(--painted-left);
  border-image-repeat: stretch;
  transform: none;
  pointer-events: none;
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button)::after { content: none; }
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) > svg { display: none; }
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) > span { min-width: 0; font: inherit; color: inherit; }

/* Market and tools use their own painted material without competing with amber play. */
:is(.command-dock .shop-button, .report-dialog:has(#report-skip:not([hidden])):has(#report-overtime[hidden]):has(#relic-choice[hidden]) #report-close) {
  --painted-source: var(--painted-market);
  --painted-slice: 0 114 0 180 fill;
  --painted-left-ratio: 1.1688;
  --painted-right-ratio: .7403;
  --painted-ink: var(--painted-paper);
  --painted-text-shadow: 0 2px #061f23;
}
:is(.crew-actions #inspect-upgrade, .upgrade-offer .buy-button) {
  --painted-source: var(--painted-upgrade);
  --painted-slice: 0 117 0 180 fill;
  --painted-left-ratio: 1.2414;
  --painted-right-ratio: .8069;
  --painted-ink: var(--painted-paper);
  --painted-text-shadow: 0 2px #103d29;
  --painted-h: 48px;
  --painted-width: 100%;
  --painted-min-width: 0;
  --painted-font-size: 18px;
}
.crew-actions #inspect-upgrade { grid-column: 1 / -1; }
:is(.duel-menu-header > .duel-button) {
  --painted-source: var(--painted-secondary);
  --painted-slice: 0 114 0 114 fill;
  --painted-left-ratio: .8507;
  --painted-right-ratio: .8507;
  --painted-ink: var(--painted-paper);
  --painted-text-shadow: 0 2px #101a32;
  --painted-h: 48px;
  --painted-min-width: 130px;
  --painted-font-size: 21px;
}
:is(.run-controls .new-game-button, .duel-table .duel-end-turn) {
  --painted-h: 48px;
  --painted-min-width: 184px;
  --painted-font-size: 21px;
}
:is(.entrance-dialog .entrance-primary, .entrance-actions > [data-entrance='new']) {
  --painted-min-width: min(100%, 290px);
}
:is( .save-dialog .start-button, .overtime-exit .start-button, .report-receipt .start-button, .workbench #open.primary, .battle-bridge .battle-bridge-join) {
  --painted-width: 100%;
  --painted-min-width: 0;
}
:is(.workbench #open.primary, .battle-bridge .battle-bridge-join) { --painted-min-width: min(100%, 280px); }
.command-dock .shop-button small { display: none; }
.command-dock .shop-button .keycap { display: none; }
.command-dock .shop-button > span { font: inherit; }
.command-dock .start-button { --painted-min-width: 250px; }
.duel-lobby-intro > .duel-button { margin: 6px 8px 6px 0; }
.duel-menu-header > .duel-button { flex-shrink: 0; }
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button):disabled {
  opacity: 1;
  background: none;
  box-shadow: none;
  color: var(--painted-ink);
  filter: saturate(.2);
  cursor: default;
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button):disabled::before { filter: brightness(.65); opacity: 1; }
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button):focus-visible {
  outline: 3px solid var(--painted-focus);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none;
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button):not(:disabled):active {
  background: none;
  box-shadow: none;
  color: var(--painted-ink);
  transform: none;
  translate: 0 1px;
  filter: brightness(.88);
}
@media (hover: hover) {
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button):not(:disabled):hover {
  background: none;
  box-shadow: none;
  color: var(--painted-ink);
  filter: brightness(1.15);
}
}
@media (prefers-reduced-motion: no-preference) {
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) { transition: filter 100ms ease, translate 100ms ease; }
}
@media (prefers-reduced-motion: reduce) {
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) { transition: none; }
}
@media (max-width: 900px) {
  .command-dock .shop-button { --painted-h: 48px; --painted-min-width: 180px; --painted-font-size: 21px; }
  .command-dock .start-button { --painted-h: 48px; --painted-min-width: 180px; --painted-font-size: 21px; }
}
@media (max-width: 650px) {
  :is(.game .start-button, dialog .start-button, .entrance-dialog .entrance-primary, .entrance-actions > [data-entrance='new'], .workbench #open.primary, .battle-bridge .battle-bridge-join, .duel-lobby-intro > .duel-button, .duel-route > .duel-button:not(.duel-button--quiet), .duel-result-actions > .duel-button:not(.duel-button--quiet)) {
    --painted-h: 52px;
    --painted-width: 100%;
    --painted-min-width: 0;
    --painted-font-size: 22px;
  }
  .entrance-actions > [data-entrance='new'] { flex-basis: 100%; }
  .shop-footer { flex-wrap: wrap; }
  .shop-footer .start-button { flex-basis: 100%; }
  .duel-result-actions > .duel-button { max-width: 100%; }
  .duel-table .duel-end-turn { --painted-min-width: 0; --painted-width: 100%; --painted-font-size: 20px; }
  .run-controls .new-game-button { --painted-min-width: 174px; }
}
/* Three real controls need two compact rows on a narrow phone. */
@media (max-width: 480px) {
  .command-dock {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 5px 8px;
    padding-top: 7px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
  }
  .command-dock .start-group { display: contents; }
  .command-dock .speed-button { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; height: 44px; }
  .command-dock .shop-button { --painted-h: 44px; grid-column: 2; grid-row: 1; --painted-width: 100%; --painted-min-width: 0; --painted-font-size: 20px; }
  .command-dock .start-button { --painted-h: 44px; grid-column: 1 / -1; grid-row: 2; --painted-width: 100%; --painted-min-width: 0; --painted-font-size: 21px; }
  .game { padding-bottom: calc(133px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(128px + env(safe-area-inset-bottom)); }
  .run-controls { flex-wrap: wrap; }
  .run-controls .new-game-button { --painted-width: 100%; }
}
@media (forced-colors: active) {
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button) {
  background: ButtonFace;
  color: ButtonText;
  border: 1px solid ButtonText;
  text-shadow: none;
  filter: none;
}
:is(.game .start-button,
  dialog .start-button,
  .entrance-dialog .entrance-primary,
  .entrance-actions > [data-entrance='new'],
  .run-controls .new-game-button,
  .command-dock .shop-button,
  .crew-actions #inspect-upgrade,
  .upgrade-offer .buy-button,
  .workbench #open.primary,
  .battle-bridge .battle-bridge-join,
  .duel-lobby-intro > .duel-button,
  .duel-route > .duel-button:not(.duel-button--quiet),
  .duel-result-actions > .duel-button:not(.duel-button--quiet),
  .duel-table .duel-end-turn,
  .duel-menu-header > .duel-button)::before { content: none; }
}
/* Receipt state hooks previously replaced the icon; the full painted body stays visible. */
.report-dialog:has(#report-skip:not([hidden])):has(#report-overtime[hidden]):has(#relic-choice[hidden]) #report-close::before,
.report-dialog:has(#relic-choice:not([hidden])) #report-close::before {
  display: block;
  background: none;
}
.report-dialog:has(#relic-choice:not([hidden])) #report-close > svg { display: none; }
@media (max-width: 650px) {
  .duel-table .duel-end-turn { grid-column: 1 / -1; }
}

/* Nested phone panels need more text room than the full-width proof controls. */
@media (max-width: 480px) {
  :is(dialog .start-button,
    .entrance-dialog .entrance-primary,
    .entrance-actions > [data-entrance='new'],
    .workbench #open.primary,
    .battle-bridge .battle-bridge-join,
    .duel-lobby-intro > .duel-button,
    .duel-route > .duel-button:not(.duel-button--quiet),
    .duel-result-actions > .duel-button:not(.duel-button--quiet),
    .duel-table .duel-end-turn) {
    --painted-h: 44px;
    --painted-font-size: 18px;
    --painted-label-gap: 3px;
  }
  .duel-lobby-intro > .duel-button { margin-inline: 0; }
}

/* Collection and Shift labels use a quiet readable weight inside their actual art face. */
body.workbench,body:has(.game) {
 --painted-font-family:Bricolage;--painted-font-weight:650;--painted-font-size:18px;
 --painted-text-shadow:none;
}
.workbench .battle-bridge .battle-bridge-join {--painted-font-size:14px;--painted-text-shadow:none;}
body:has(.game) .run-controls .new-game-button {--painted-min-width:214px;--painted-font-size:16px;}
/* One transparent Spider tag replaces the conflicting inline tag plus amber pseudo-frame. */
:is(#inspect-spider,#reveal-spider) .silk-handoff .battle-bridge-join {
 --painted-source:url('/spider/assets/button-secondary-v1.webp');
 --painted-slice:0 100 0 286 fill;
 --painted-left-ratio:.848665;--painted-right-ratio:.296736;
 --painted-h:56px;--painted-font-size:14px;--painted-font-family:Bricolage;
 --painted-font-weight:600;--painted-text-shadow:none;--painted-ink:#f5e9cb;
 --painted-width:100%;--painted-min-width:0;--painted-label-gap:4px;
 max-width:380px;background:none;text-shadow:none;
}

/* Nested crew actions keep the same quiet label size at every viewport. */
:is(#inspect-battle, #reveal-battle) .battle-bridge .battle-bridge-join {
 --painted-font-size:14px;--painted-font-weight:600;--painted-text-shadow:none;
 font:600 14px/1.2 Bricolage,sans-serif;text-shadow:none;
}

/* Clock in is a physical control, not a full-width footer banner. */
.shop-footer .start-button{--painted-width:280px;--painted-min-width:0;--painted-h:60px;--painted-font-size:23px;flex:none}
.shop-footer>div{flex:1;min-width:0}
@media(max-width:600px){.shop-footer{flex-wrap:wrap;gap:8px}.shop-footer>div{flex-basis:100%}.shop-footer .start-button{--painted-width:min(100%,260px);--painted-h:52px;--painted-font-size:21px;margin-left:auto}}