/* One control treatment across the table, dialogs and shop. Card faces keep their own motion. */
body
  :is(button:not(.card):not(.joker-card):not(.deck-button):not(.save-row), a.action, .file-import) {
  border-radius: var(--control-radius);
  border: 1px solid var(--control-edge);
  box-shadow: var(--control-shadow);
  font-weight: 700;
  line-height: 1.3;
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.12s ease;
  touch-action: manipulation;
  text-decoration: none;
}
body
  :is(
    .sort button,
    .assist-tools button,
    .hand-bottom button,
    .side-buttons button,
    .hand-guide-nav button,
    .board-tabs button,
    .save-row button,
    .store-manage,
    .skip-animation,
    .close,
    .install-pwa,
    .file-import
  ) {
  background: var(--control-face);
  color: var(--control-text);
}
body
  :is(
    .sort button,
    .assist-tools button,
    .hand-bottom button,
    .side-buttons button,
    .board-tabs button,
    .save-row button
  ) {
  min-height: 32px;
}
body :is(.sort button.active, .hand-guide-nav button.active, .board-tabs button.active) {
  background: #e8d49e;
  color: #263d34;
  border-color: #fae6b6;
  box-shadow:
    0 2px 0 #183c30,
    inset 0 1px 0 #fff4;
}
body .action {
  border-color: #ffffff2e;
  box-shadow:
    0 4px 0 #0b302acc,
    inset 0 1px 0 #ffffff24;
  text-shadow: none;
}
body .side-buttons #new-run {
  background: #704d49;
  color: #f5d6cb;
}
body :is([data-save-action='delete'], [data-cloud-delete], [data-slot-joker], [data-slot-consume]) {
  color: #ffb6ac;
  border-color: #e59a8b55;
}
body .store-buy {
  background: #dfb669;
  color: #233d33;
}
body .special-item .store-buy {
  background: #b7a4d6;
  color: #292b40;
}
body .store-item.sold .store-buy {
  background: #344b42;
  color: #c6d6c8;
}
body .shop-dialog .pack-grid article button {
  background: #9ecfd5;
  color: #223b42;
}
body .assist-tools button:first-child {
  color: #f1d598;
  border-color: #d5b86466;
}
body
  :is(button:not(.card):not(.joker-card):not(.deck-button):not(.save-row), a.action):hover:not(
    :disabled
  ) {
  filter: none;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  body
    :is(button:not(.card):not(.joker-card):not(.deck-button):not(.save-row), a.action):hover:not(
      :disabled
    ) {
    transform: translateY(-1px);
    border-color: #e5eed16e;
    box-shadow:
      0 4px 0 #082e28b3,
      inset 0 1px 0 #ffffff26;
  }
}
body
  :is(button:not(.card):not(.joker-card):not(.deck-button):not(.save-row), a.action):active:not(
    :disabled
  ) {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #082e28b3,
    inset 0 1px 0 #00000012;
}
body button:not(.card):not(.joker-card):disabled {
  opacity: 0.48;
  box-shadow: none;
  transform: none;
  filter: saturate(0.65);
  cursor: not-allowed;
}
body :is(button, a.action):focus-visible,
.file-import:focus-within {
  outline: 2px solid #f3d18a;
  outline-offset: 3px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-actions .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 8px;
  background: #17453799;
}
.top-actions .icon-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top-actions .icon-btn span {
  margin: 0;
  font-size: 12px;
}
.top-actions .install-pwa {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 12px;
}
body .settings-grid :is(select, input[type='checkbox']) {
  accent-color: #dfb669;
}
@media (max-width: 700px) {
  .top-actions {
    max-width: 100%;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
}
@media (max-width: 380px) {
  .top-actions {
    gap: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button:not(.card):not(.joker-card), a.action) {
    transition: none;
  }
}
/* Preserve the centered position of the fixed PWA update prompt. */
#pwa-update,
#pwa-update:hover:not(:disabled),
#pwa-update:active:not(:disabled) {
  transform: translateX(-50%);
}
/* Shared form and feedback tokens. Primary colors meet 4.5:1 for normal text. */
body .blue-btn {
  background: var(--ui-blue);
  color: var(--ui-text);
}
body .red-btn {
  background: var(--ui-red);
  color: var(--ui-text);
}
body .green-btn {
  background: var(--ui-green);
  color: var(--ui-text);
}
body .gold-btn {
  color: #233d33;
  background: var(--ui-gold);
}
.settings-grid fieldset {
  display: grid;
  gap: 8px;
  border: 1px solid #829e9155;
  border-radius: 10px;
  margin: 0;
  padding: 12px;
  min-width: 0;
}
.settings-grid legend {
  padding: 0 6px;
  font-size: 14px;
  color: #dfd8bb;
}
.settings-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid #829e9133;
  min-height: 52px;
  padding: 12px;
  font-size: 14px;
}
.settings-grid .switch-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.settings-grid .switch-control small {
  color: var(--ui-muted);
  font-size: 12px;
}
.settings-grid .switch-control input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  background: #4c645a;
  border: 1px solid #a6bbb0;
  border-radius: 20px;
  flex: none;
  transition: background-color 0.15s;
}
.settings-grid .switch-control input[type='checkbox']::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f2efdf;
  transition: transform 0.15s;
}
.settings-grid .switch-control input[type='checkbox']:checked {
  background: var(--ui-gold);
  border-color: #f0d193;
}
.settings-grid .switch-control input[type='checkbox']:checked::before {
  transform: translateX(16px);
  background: #243e33;
}
.settings-grid :is(select, input[type='range']) {
  min-height: 40px;
}
.settings-grid select {
  border-radius: var(--control-radius);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  padding: 8px 10px;
  font-size: 16px;
}
.settings-grid input[type='range'] {
  grid-column: span 2;
  cursor: pointer;
  accent-color: var(--ui-gold);
  margin: 0;
}
.settings-grid :is(input, select):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 4px;
}
.settings-grid :is(input, select):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-grid label:has(input:disabled) {
  color: var(--ui-muted);
}
.settings-grid .muted {
  font-size: 13px;
  color: var(--ui-muted);
  line-height: 1.6;
  margin: 0 4px;
}
.settings-grid output {
  font-variant-numeric: tabular-nums;
}
.file-import {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.file-import input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
body :is(.sort button, .board-tabs button)[aria-pressed='true'] {
  box-shadow:
    inset 0 -3px 0 #5b6442,
    0 2px 0 #183c30;
}
body :is(.sort button, .board-tabs button):focus-visible {
  outline-offset: 2px;
}
body .close {
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 23px;
  width: 40px;
  height: 40px;
  flex: none;
}
body .modal-actions .action {
  min-height: 44px;
  min-width: 112px;
}
#modal {
  scrollbar-width: thin;
  scrollbar-color: #8ba799 #243c35;
  scroll-padding: 12px;
}
/* The title only receives focus so screen readers announce the dialog; it is not a control. */
#modal-title:focus {
  outline: none;
}
#modal :is(button, input, select, a) {
  scroll-margin-block: 12px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  padding: 12px 23px;
  pointer-events: none;
  max-width: calc(100vw - 24px);
  width: max-content;
  line-height: 1.5;
  font-size: 14px;
  text-align: center;
  z-index: 110;
}
#modal > .toast {
  top: 12px;
  right: 60px;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 84px);
  transform: translateY(-6px);
}
#modal > .toast.show {
  transform: translateY(0);
}
body .update-banner {
  max-width: calc(100vw - 24px);
  min-height: 44px;
  line-height: 1.5;
}
@media (pointer: coarse) {
  body .modal-actions .action,
  body .store-buy,
  body .store-manage,
  body .shop-dialog .store-buy,
  body .shop-dialog .pack-grid article button,
  body .save-row button,
  body .board-tabs button {
    min-height: 44px;
  }
  body .close {
    width: 44px;
    height: 44px;
  }
  .settings-grid label {
    min-height: 56px;
  }
}
@media (max-width: 700px) {
  .top-actions .icon-btn {
    min-width: 32px;
    padding: 4px;
  }
  .top-actions .install-pwa {
    font-size: 11px;
    padding: 4px 5px;
    min-height: 32px;
  }
  .settings-grid fieldset {
    padding: 10px;
  }
  .settings-grid label {
    gap: 12px;
    padding: 10px;
  }
}
@media (forced-colors: active) {
  .settings-grid .switch-control input[type='checkbox'] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 24px;
    height: 24px;
  }
  .settings-grid .switch-control input[type='checkbox']::before {
    display: none;
  }
  body :is(.sort button, .board-tabs button)[aria-pressed='true'] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-grid .switch-control input[type='checkbox'],
  .settings-grid .switch-control input[type='checkbox']::before {
    transition: none;
  }
}

.sync-conflicts {
  padding: 12px;
  border: 1px solid #d3996c;
  border-radius: 10px;
  background: #493d2f;
  margin: 16px 0;
}
.sync-conflicts h3 {
  margin: 0 0 8px;
  color: #f1d598;
}
.sync-conflicts > p {
  font-size: 13px;
  line-height: 1.6;
}
.sync-conflicts .save-row {
  margin-top: 10px;
}

.sync-result {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #718e82;
  border-radius: 10px;
  background: #233f36;
}
.sync-result h3 {
  margin: 0 0 10px;
}
.sync-result p {
  font-size: 14px;
  line-height: 1.65;
}
.sync-result summary {
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
}
.sync-result .save-row {
  margin-block: 8px;
}
.sync-result :focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}

/* One compact, non-color-only seal marker; details stay in the inspector. */
.seal-badge {
  position: absolute;
  right: 7%;
  top: 42%;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  line-height: 1;
  border: 2px solid #fff9;
  box-shadow: 0 1px 3px #0006;
  pointer-events: none;
}
.seal-red {
  background: #a82d39;
  color: #fff1db;
}
.seal-gold {
  background: #e7b64f;
  color: #273b36;
}
.seal-blue {
  background: #246eab;
  color: #fff;
}
.seal-purple {
  background: #7751a1;
  color: #fff;
}
.mini-card small .seal-inline {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  font-size: inherit;
}
.growth-info,
.effect-notice {
  background: #183c35;
  border: 1px solid #89b59b66;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  color: #f1d388 !important;
}