:root { --free-bar-h: 74px; }
.free-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.table[data-free] {
  --gem-ring: var(--ink-3);
}

.free-chip-row { display: inline-flex; align-items: center; gap: var(--step-2); }
.free-marked { color: var(--ink-2); font-size: 12px; font-weight: 600; }

.free-notice {
  position: fixed;
  top: var(--step-4);
  left: 0;
  right: 0;
  z-index: var(--z-notice);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--step-2) var(--step-3);
  width: max-content;
  max-width: min(560px, calc(100vw - 2 * var(--step-3)));
  margin: 0 auto;
  padding: var(--step-3) var(--step-4);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  box-shadow: var(--win-shadow);
 
}
.free-notice-text { flex: 1 1 auto; margin: 0; font-size: var(--type-read); }
.free-notice-seconds { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.free-notice-actions { display: flex; gap: var(--step-2); margin-left: auto; }

[data-shape="tall"] .free-notice { top: auto; bottom: calc(var(--tall-dock) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; margin: 0; border-width: 1px 0; border-radius: 0; }

.ui-notices .free-notice, .ui-notices .free-ask { position: static; width: auto; max-width: none; margin: 0; inset: auto; border: 1px solid var(--line-2); border-radius: var(--round-2); }

:root[data-input="touch"] .shell-confirm[data-free-confirm] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  border-radius: var(--round-2) var(--round-2) 0 0;
  padding-bottom: calc(var(--step-4) + env(safe-area-inset-bottom, 0px));
 
}

.table[data-free] [data-free-obj] { cursor: grab; transition: opacity var(--motion-1) var(--ease-inout); }
.table[data-free] [data-free-obj].dragging { opacity: 0.45; cursor: grabbing; }

.free-tabs { display: flex; gap: var(--step-2); margin-bottom: var(--step-2); }
.free-tab {
  min-height: 28px;
  padding: 0 var(--step-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) { .free-tab:hover { color: var(--ink-1); } }
.free-tab.on { color: var(--ink-1); border-bottom-color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .table[data-free] [data-free-obj] { transition: none; }
}
:root[data-motion="reduce"] .table[data-free] [data-free-obj] { transition: none; }

.free-menu { overflow-y: auto; }
.free-menu .cardmenu-item { min-height: 32px; }
.free-hint {
  position: fixed;
  z-index: var(--z-anchored);
  display: flex;
  flex-direction: column;
  gap: var(--step-1);
  padding: var(--step-2) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  box-shadow: var(--win-shadow);
  font-size: 12px;
  pointer-events: none;
}
.free-hint-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--step-3); }
.free-hint-mouse { color: var(--ink-3); }
.free-hint-does { color: var(--ink-1); font-weight: 700; letter-spacing: 0.04em; }
.free-hint-does .ui-kbd { margin: 0 1px; }
.free-box { position: fixed; z-index: 44; border: 1px solid var(--ink-2); pointer-events: none; }
.free-selected-count {
  position: fixed;
  bottom: var(--step-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 44;
  padding: var(--step-1) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.free-hand-corner { position: absolute; top: 4px; right: 4px; z-index: 6; display: flex; align-items: center; gap: var(--step-2); }
.free-hand-eye {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--ink-3);
  cursor: pointer;
}
.free-hand-eye.on { color: var(--ink-1); }
@media (hover: hover) { .free-hand-eye:hover { color: var(--ink-1); } }
.free-hand-words { color: var(--ink-2); font-size: 12px; font-weight: 600; }

.table[data-free] [data-free-obj] { touch-action: none; }
.table[data-free] [data-zone$=":mainDeck"], .table[data-free] [data-zone$=":runeDeck"] { touch-action: none; }

.free-hold {
  position: fixed;
  inset: 0;
  z-index: var(--z-anchored);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-2);
  padding: var(--step-3) var(--step-3) calc(var(--step-3) + env(safe-area-inset-bottom, 0px));
  touch-action: none;
 
}
.free-hold-dim { position: absolute; inset: 0; background: var(--shroud); }
.free-hold-card { position: relative; flex: none; display: flex; justify-content: center; }
.free-hold-card .cf { zoom: 0.5; pointer-events: none; }
.free-hold-words { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; color: var(--ink-2); font-size: 12px; text-align: center; }
.free-hold-slide { font-weight: 600; color: var(--ink-1); }
.free-hold-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--step-2);
  width: 100%;
  max-width: 420px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.free-hold-row {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  min-height: 56px;
  padding: 0 var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.free-hold-row .cardmenu-label { min-width: 0; overflow-wrap: anywhere; }
.free-hold-row.lit { border-color: var(--ink-1); background: var(--surface-2); outline: 2px solid var(--ink-2); outline-offset: 1px; }

.free-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--surface-overlay);
  border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.free-dockline { margin: 0; padding: var(--step-1) var(--step-3); min-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; }
.free-bar-items { display: flex; }
.free-bar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch);
  padding: var(--step-1) 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: scale var(--motion-1) var(--ease-standard);
}
.free-bar-item:active { color: var(--ink-1); scale: var(--tap-row); transition-duration: 0s; }
.free-bar-icon { display: grid; place-items: center; }

.table[data-free] .hand-dock .free-hand-corner { position: sticky; right: var(--step-2); top: var(--step-1); align-self: start; flex: none; margin-left: auto; }

.table[data-free]:not([data-shape="wide"]) { padding-bottom: var(--free-bar-h); }

.table[data-free][data-shape="short"] .hand-dock { bottom: 0; }

.free-rail .mark-slot { pointer-events: none; }
.free-rail .mark-slot > .mark-seal { pointer-events: auto; }
.mark-slot.is-free .seal-hex { stroke-dasharray: 2.4 1.8; }
.table[data-free] .cf-might:is(.up, .down) { --might-rim: var(--ink-2); }
.free-words { z-index: 7; }
.free-word { pointer-events: auto; }
.free-word.label { border-style: dashed; }
.free-word.copy { pointer-events: none; font-style: italic; }

.free-hand-tools { position: absolute; right: 4px; bottom: 4px; z-index: 6; display: flex; align-items: center; gap: var(--step-2); }
.free-actions-btn, .free-browser-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--step-1);
  height: 28px;
  padding: 0 var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.free-actions-btn.on, .free-browser-btn.on { color: var(--ink-1); border-color: var(--ink-3); }
@media (hover: hover) { .free-actions-btn:hover, .free-browser-btn:hover { color: var(--ink-1); border-color: var(--ink-3); } }
.table[data-free] .hand-dock .free-hand-tools { position: sticky; right: var(--step-2); bottom: var(--step-1); align-self: end; flex: none; margin-left: auto; }
.free-actions {
  position: fixed;
  z-index: var(--z-anchored);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: var(--step-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  box-shadow: var(--win-shadow);
}
.free-action { min-height: 36px; }

.free-control {
  position: fixed;
  z-index: var(--z-anchored);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: var(--step-2) var(--step-3) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  box-shadow: var(--win-shadow);
}
.free-control-head { display: flex; align-items: center; gap: var(--step-2); margin-bottom: var(--step-2); }
.free-control-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.free-control-card { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12px; }
.free-control-close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
@media (hover: hover) { .free-control-close:hover { color: var(--ink-1); background: var(--surface-2); } }
.free-control-body { display: flex; flex-direction: column; gap: var(--step-1); }
.free-stepper { display: grid; grid-template-columns: 1fr 32px 44px 32px; align-items: center; gap: var(--step-1); min-height: 36px; }
.free-stepper-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.free-stepper-value { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.free-stepper-value.printed { color: var(--ink-3); font-weight: 500; }
.free-step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--ink-1);
  cursor: pointer;
}
@media (hover: hover) { .free-step:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.free-slot { display: flex; align-items: center; gap: var(--step-1); }
.free-slot-pick {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-1);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.free-slot.on .free-slot-pick { color: var(--ink-1); border-color: var(--ink-2); }
.free-slot-clear { min-height: 32px; padding: 0 var(--step-2); border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer; }
@media (hover: hover) { .free-slot-clear:hover { color: var(--ink-1); } }
.free-label-input {
  min-height: 36px;
  margin-top: var(--step-1);
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-well);
  color: var(--ink-1);
  font: inherit;
  font-size: 14px;
}
.free-label-input.bad { border-color: var(--bad); }
.free-label-limit { margin: 0; color: var(--ink-3); font-size: 12px; }
.free-label-limit.bad { color: var(--bad-ink); }
.free-label-save { align-self: flex-end; min-height: 32px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-1); color: var(--ink-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .free-label-save:hover { border-color: var(--ink-3); background: var(--surface-2); } }

.free-control.sheet, .free-actions.sheet, .free-tokens.sheet, .free-browser.sheet {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  max-height: 70vh;
  border-width: 1px 0 0;
  border-radius: var(--round-2) var(--round-2) 0 0;
  padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px));
 
}
.free-control.sheet .free-step { width: 44px; height: 44px; }
.free-control.sheet .free-stepper { grid-template-columns: 1fr 44px 52px 44px; min-height: 48px; }
.free-control.sheet .free-slot-pick, .free-control.sheet .free-label-save, .free-control.sheet .free-label-input { min-height: 44px; }
.free-control.sheet .free-control-close { width: 44px; height: 44px; }
.free-actions.sheet .free-action { min-height: 48px; }
.free-tokens.sheet .free-control-close, .free-browser.sheet .free-control-close { width: 44px; height: 44px; }
.free-browser.sheet { max-height: 80vh; }

.free-plus {
  position: absolute; top: 2px; right: 2px; z-index: 6;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--surface-1); color: var(--ink-2);
  cursor: pointer;
}
.free-plus::after { content: ""; position: absolute; inset: -11px; }
@media (hover: hover) { .free-plus:hover { color: var(--ink-1); border-color: var(--ink-3); } }
.table[data-shape="tall"] .stage .free-plus { width: 32px; height: 32px; }

.free-tokens, .free-browser {
  position: fixed; z-index: var(--z-anchored);
  max-height: calc(100vh - 16px); overflow-y: auto;
  padding: var(--step-2) var(--step-3) var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-2);
  background: var(--surface-overlay); color: var(--ink-1);
  box-shadow: var(--win-shadow);
}
.free-browser { left: 0; right: 0; margin-inline: auto; width: fit-content; top: 10vh; max-width: calc(100vw - 16px); max-height: 80vh; display: flex; flex-direction: column; gap: var(--step-2); }
.free-browser.sheet { margin-inline: 0; width: auto; max-width: none; }
.free-tokens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--step-2); }
.free-token { display: flex; flex-direction: column; align-items: center; gap: var(--step-1); padding: var(--step-1); border: 1px solid transparent; border-radius: var(--round-2); background: transparent; color: var(--ink-1); font: inherit; cursor: pointer; }
.free-token:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
@media (hover: hover) { .free-token:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.free-token-name { font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.free-tokens.sheet .free-tokens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.free-browser-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-1); }
.free-browser-to-label { color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-right: var(--step-1); }
.free-chip-btn { min-height: 28px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-1); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .free-chip-btn:hover { color: var(--ink-1); border-color: var(--ink-3); } }
.free-chip-btn.on { color: var(--ink-1); border-color: var(--ink-1); background: var(--surface-2); }
.free-browser.sheet .free-chip-btn { min-height: 40px; }
.free-browser-search { width: 100%; min-height: 36px; box-sizing: border-box; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1); font: inherit; }
.free-browser-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.preview-free { list-style: none; margin: var(--step-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--step-1); }
.preview-free .free-label { border-style: dashed; }


.table[data-free] .score-ladder .node[data-free-score] { cursor: pointer; }
@media (hover: hover) { .table[data-free] .score-ladder .node[data-free-score]:hover { border-color: var(--ink-1); } }
.table[data-free] .score-ladder .node[data-free-score]:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }

.free-coin {
  position: absolute; top: 4px; left: 4px; z-index: 7;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ink-3); border-radius: 50%;
  background: var(--surface-overlay); color: var(--ink-1);
  cursor: pointer; opacity: 0;
}
.free-coin::after { content: ""; position: absolute; inset: -8px; }
.table[data-free] [data-obj]:hover > .free-coin, .free-coin:focus-visible, .free-coin.on { opacity: 1; }

.table[data-free] [data-free-tilt="exhaust"] { rotate: var(--exhaust-pay-turn); }
.table[data-free] [data-free-tilt="exhaust"] :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks) { rotate: calc(-1 * var(--exhaust-pay-turn)); }
.table[data-free] .card[data-free-tilt="recycle"] { translate: 0 -6px; }
.table[data-free] .card[data-free-tilt="recycle"]:not([data-ring]) > .cf::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .table[data-free] [data-free-obj] { transition: rotate var(--motion-1) var(--ease-standard), translate var(--motion-1) var(--ease-standard), opacity var(--motion-1) var(--ease-standard); }
}

.free-xp, .free-floating {
  position: absolute; z-index: 6;
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 4px;
  border: 1px solid var(--line-2); border-radius: var(--round-2);
  background: var(--surface-overlay); color: var(--ink-1);
  font-size: 11px;
}
.free-xp { bottom: 100%; left: 0; }
.free-floating { top: 100%; left: 0; }
.free-floating-label { color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.free-unpay { min-height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1); font: inherit; font-size: 11px; cursor: pointer; }
.free-bar .free-unpay, .table[data-shape="tall"] .stage .free-unpay { min-height: 44px; }
.free-rail-row { display: grid; grid-template-columns: auto 22px 26px 22px; align-items: center; gap: 2px; }
.free-rail-name { color: var(--ink-2); padding-right: 4px; }
.free-rail-value { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.free-rail-step {
  position: relative; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--surface-1); color: var(--ink-1);
  cursor: pointer;
}
@media (hover: hover) { .free-rail-step:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.table[data-shape="tall"] .stage .free-rail-step { width: 44px; height: 44px; }
.table[data-shape="tall"] .stage .free-rail-row { grid-template-columns: auto 44px 30px 44px; }

.free-suggest, .free-showdown {
  position: absolute; z-index: 8;
  display: flex; align-items: center; gap: var(--step-1);
  padding: 2px var(--step-1);
  border: 1px solid var(--ink-2); border-radius: 999px;
  background: var(--surface-overlay); color: var(--ink-1);
  font-size: 12px; font-weight: 600;
}
.free-suggest { bottom: 4px; left: 4px; }
.free-showdown { top: 4px; left: 50%; transform: translateX(-50%); flex-wrap: wrap; justify-content: center; }
.free-suggest-press, .free-showdown-btn {
  display: inline-flex; align-items: center; gap: var(--step-1);
  min-height: 28px; padding: 0 var(--step-2);
  border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-1);
  font: inherit; cursor: pointer;
}
@media (hover: hover) { .free-suggest-press:hover, .free-showdown-btn:hover { background: var(--line-2); } }
.free-suggest-close { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
@media (hover: hover) { .free-suggest-close:hover { color: var(--ink-1); } }
.free-showdown-focus { padding: 0 var(--step-1); color: var(--ink-2); }
.table[data-shape="tall"] .stage :is(.free-suggest-press, .free-showdown-btn) { min-height: 44px; }
.table[data-shape="tall"] .stage .free-suggest-close { width: 44px; height: 44px; }

.free-might-shown { position: absolute; top: 4px; right: 4px; z-index: 5; display: inline-flex; align-items: baseline; gap: var(--step-1); color: var(--ink-2); font-size: 11px; pointer-events: none; }
.free-might-sum { color: var(--ink-1); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.free-score-rail { display: flex; flex-direction: column; gap: 2px; padding: 2px var(--step-2); }
.free-score-seat { display: grid; gap: 1px; }
.free-score-name { color: var(--ink-3); font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.free-score-discs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.free-score-disc { min-height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-1); color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
button.free-score-disc { min-height: 44px; }
.free-score-disc.on { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-2); }

.free-floating.at-near { top: 0; bottom: auto; left: calc(100% + 6px); }
.free-floating.at-far { bottom: 0; top: auto; left: auto; right: calc(100% + 6px); }
.free-bar .free-floating { position: static; flex-direction: row; align-items: center; justify-content: center; gap: var(--step-2); border-width: 1px 0 0; border-radius: 0; padding: 0 var(--step-2); }
.free-bar .free-floating-label { display: none; }
.free-bar .free-rail-row { grid-template-columns: auto 44px 30px 44px; }
.free-might-shown { right: 32px; white-space: nowrap; }
.table[data-shape="tall"] .stage .free-might-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.table[data-shape="tall"] .stage .free-showdown { top: auto; bottom: 4px; left: 4px; right: 4px; transform: none; border-radius: var(--round-2); flex-wrap: nowrap; }
.table[data-shape="tall"] .stage .free-showdown-focus { display: none; }
.table[data-shape="tall"] .stage .free-showdown-btn { flex: 1 1 0; justify-content: center; white-space: normal; text-align: center; }

.free-peek {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sheet);
  display: flex; flex-direction: column; gap: var(--step-2);
  max-height: 58vh; padding: var(--step-2) var(--step-3) var(--step-3);
  border-bottom: 1px solid var(--line-2); background: var(--surface-overlay); color: var(--ink-1);
  box-shadow: var(--win-shadow);
 
}
.free-peek-close, .free-peek-tool, .free-peek-group, .free-peek-act {
  min-height: 32px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface-1); color: var(--ink-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.free-peek-close { margin-left: auto; }
.free-peek-tool.on { border-color: var(--ink-3); background: var(--surface-2); }
@media (hover: hover) { .free-peek-close:hover, .free-peek-tool:hover, .free-peek-group:hover, .free-peek-act:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.free-peek-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.free-peek-count { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.free-peek-cards { display: flex; gap: var(--step-3); overflow-x: auto; padding-bottom: var(--step-2); min-height: 0; }
.free-peek-card { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--step-1); padding: var(--step-1); border: 1px solid transparent; border-radius: var(--round-2); cursor: grab; }
.free-peek-card.on { border-color: var(--ink-2); background: var(--surface-2); }
.free-peek-face .cf { zoom: 1.6; pointer-events: none; }
.free-peek-check {
  position: absolute; top: 6px; left: 6px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--ink-3); border-radius: 6px; background: var(--surface-1); color: transparent; cursor: pointer;
}
.free-peek-check[aria-checked="true"] { color: var(--ink-1); border-color: var(--ink-1); background: var(--surface-2); }
.free-peek-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-1); max-width: 150px; }
.free-peek-act { min-height: 28px; padding: 0 var(--step-2); font-size: 12px; }
.free-peek.sheet { top: 0; bottom: 0; max-height: none; border-bottom: 0; overflow-y: auto; padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px)); }
.free-peek.sheet .free-peek-cards { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
.free-peek.sheet .free-peek-close, .free-peek.sheet .free-peek-tool, .free-peek.sheet .free-peek-group, .free-peek.sheet .free-peek-act { min-height: 44px; }
.free-peek.sheet .free-peek-check { width: 36px; height: 36px; }

.free-looking { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 6; margin: 0; padding: 2px var(--step-1); border-radius: var(--round-1); background: var(--surface-overlay); color: var(--ink-2); font-size: 11px; font-weight: 600; text-align: center; pointer-events: none; }

.free-chain { display: flex; flex-direction: column; gap: var(--step-2); min-height: 0; padding: var(--step-2) 0; }
.free-chain-acts { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.free-chain-btn {
  min-height: 32px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface-1); color: var(--ink-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.free-chain-btn.on { border-color: var(--ink-3); background: var(--surface-2); }
@media (hover: hover) { .free-chain-btn:hover { border-color: var(--ink-3); background: var(--surface-2); } }
.free-chain-btn.on { color: var(--ink-1); border-color: var(--ink-1); }
.free-chain-resolve { flex: 1 1 100%; order: -1; min-height: 48px; border-radius: var(--round-2); background: var(--surface-2); font-size: 16px; }

.free-chain-slot { margin: 0; height: 20px; line-height: 20px; }
.free-chain-approved { display: inline-block; color: var(--ink-2); font-size: 12px; font-weight: 600; animation: chain-fade-in var(--motion-1) var(--ease-standard); }
.free-chain-why { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-3); font-size: 12px; }
.free-chain-clear[data-idle] { visibility: hidden; }
.free-chain[data-free-targeting] { outline: 1px dashed var(--ink-3); outline-offset: 2px; }

.free-tray { display: flex; flex-direction: column; gap: var(--step-1); }
.free-tray-card.is-slot { visibility: hidden; }
.free-tray[data-empty] > .free-tray-title { visibility: hidden; }
.free-tray-title { margin: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.free-tray-cards { display: flex; gap: var(--step-2); overflow-x: auto; padding-bottom: var(--step-1); }
.free-tray-card { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--step-1); }
.free-tray-card[draggable="true"] { cursor: grab; }
.free-tray-face .cf { pointer-events: none; }
.free-tray-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-1); max-width: 150px; }
.free-tray-acts .free-chain-btn { min-height: 28px; padding: 0 var(--step-2); font-size: 12px; }
.dock [data-free-item] { cursor: grab; }
.table[data-shape="tall"] .free-chain-btn, .table[data-shape="short"] .free-chain-btn, .table[data-shape="tall"] .free-chain-why, .table[data-shape="short"] .free-chain-why { min-height: 44px; }

.free-panel { display: flex; flex-direction: column; gap: var(--step-2); }
.free-turnbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step-2); padding: var(--step-2) 0 0; }
.free-turn { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.free-turn-who { color: var(--ink-2); font-size: 12px; font-weight: 500; }
.free-turn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.free-turn-btn, .free-toggles-btn, .free-invite-btn, .free-save-btn, .free-handoff-btn { display: inline-flex; align-items: center; gap: var(--step-2); }
.free-turn-btn { min-height: 40px; border-color: var(--ink-3); background: var(--surface-2); }
.free-ask {
  position: fixed; z-index: var(--z-notice); left: 0; right: 0; margin-inline: auto; bottom: 96px; display: flex; flex-direction: column; gap: var(--step-3);
  width: min(360px, calc(100vw - 32px)); padding: var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2);
  background: var(--surface-overlay); box-shadow: var(--win-shadow);
}
.free-ask-title { margin: 0; font-size: 14px; font-weight: 600; }
.free-ask-acts { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.free-ask .free-chain-resolve { order: 0; flex: 1 1 100%; min-height: 44px; }
.free-toggles, .free-dice {
  position: fixed; z-index: var(--z-anchored); display: flex; flex-direction: column; gap: var(--step-1); width: 320px; max-height: calc(100vh - 16px); overflow-y: auto;
  padding: var(--step-2); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-overlay); box-shadow: var(--win-shadow);
}
.free-dice { left: 0; right: 0; margin-inline: auto; bottom: 96px; width: min(280px, calc(100vw - 32px)); }
.free-dice[style] { right: auto; margin-inline: 0; }
.free-toggles-head { display: flex; align-items: center; justify-content: space-between; }
.free-toggles-title, .free-dice-title { margin: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.free-toggles-close { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.free-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); min-height: 36px; padding: 0 var(--step-2);
  border: 1px solid transparent; border-radius: var(--round-1); background: transparent; color: var(--ink-1); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
@media (hover: hover) { .free-toggle:hover { background: var(--surface-2); } }
.free-toggle.on { border-color: var(--line-2); }
.free-toggle-state { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ink-3); border-radius: 4px; }
.free-toggle.on .free-toggle-state { border-color: var(--ink-1); }
.free-toggle-count { padding: 0 var(--step-2); }
.free-dice-row { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.free-die { min-width: 52px; justify-content: center; }
.free-toggles.sheet, .free-dice.sheet {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; margin-inline: 0; max-height: 80vh; border-width: 1px 0 0; border-radius: var(--round-2) var(--round-2) 0 0;
  padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px));
}
.free-toggles.sheet .free-toggle, .free-toggles.sheet .free-toggle-count { min-height: 48px; }
.free-toggles.sheet .free-step { width: 44px; height: 44px; }
.free-toggles.sheet .free-stepper { grid-template-columns: 1fr 44px 52px 44px; }
.free-toggles.sheet .free-toggles-close { width: 44px; height: 44px; }
.free-dice.sheet .free-die { min-height: 48px; min-width: 64px; }

.free-invite-line, .free-invite-copied { margin: 0; color: var(--ink-2); font-size: 13px; }
.free-invite-copied:empty { display: none; }
.free-invite-link { width: 100%; min-height: 40px; padding: 0 var(--step-2); border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-2); color: var(--ink-1); font: inherit; font-size: 13px; }
.free-invite-row { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); }
.free-invite-code { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.free-save-title { margin: 0; min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.free-save-label { display: grid; gap: var(--step-1); }
.free-save-label-text, .free-save-ask { margin: 0; color: var(--ink-2); font-size: 13px; }
.free-save-ask { color: var(--ink-1); font-weight: 600; }
.sandbox-refused { color: var(--ink-1); }
.free-ping-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-overlay); color: var(--ink-2); cursor: pointer; }
@media (hover: hover) { .free-ping-btn:hover { color: var(--ink-1); border-color: var(--ink-3); } }
:root[data-input="touch"] .free-ping-btn { width: 44px; height: 44px; }

.free-ping-ring { position: absolute; inset: 0; border: 3px solid var(--ink-1); border-radius: var(--round-2); pointer-events: none; opacity: 0; animation: free-ping var(--loop-wait) var(--ease-standard) 3 both; }
.table[data-free] .card[data-free-ping]::after { content: ""; position: absolute; z-index: 5; inset: 0; border: 2px solid var(--ink-1); border-radius: inherit; pointer-events: none; opacity: 0; animation: free-ping var(--loop-wait) var(--ease-standard) 3 both; }
@keyframes free-ping {
  from { opacity: calc(var(--echo-light) * var(--echo-peak)); transform: scale(1); }
  to { opacity: 0; transform: scale(var(--echo-grow)); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .free-ping-ring, :root:not([data-motion="full"]) .table[data-free] .card[data-free-ping]::after { animation: none; }
}
:root[data-motion="reduce"] .free-ping-ring, :root[data-motion="reduce"] .table[data-free] .card[data-free-ping]::after { animation: none; }

.free-rewind-btn, .free-forward-btn { display: inline-flex; align-items: center; gap: var(--step-2); }
.free-rewind-waiting { flex: 1 1 100%; margin: 0; color: var(--ink-2); font-size: 12px; }
.free-rewind-ask-text { margin: 0; color: var(--ink-1); font-size: 13px; }
.log-line.struck .log-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.log-line.struck { color: var(--ink-3); opacity: 0.6; }
.free-rewinding {
  position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; pointer-events: none; color: var(--ink-1);
  animation: free-rewind-fade var(--loop-wait) var(--ease-standard) both;
}
.free-clock { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); background: var(--surface-overlay); border-radius: 999px; padding: var(--step-3); box-sizing: content-box; }
.free-clock-hand { transform-origin: 12px 12px; transform-box: view-box; animation: free-rewind-spin var(--loop-wait) var(--ease-inout) both; }
.free-clock-short { transform-origin: 12px 12px; transform-box: view-box; animation: free-rewind-spin var(--loop-wait) var(--ease-inout) both reverse; }
@keyframes free-rewind-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes free-rewind-fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .free-clock-hand, :root:not([data-motion="full"]) .free-clock-short { animation: none; }
  :root:not([data-motion="full"]) .free-rewinding { animation: free-rewind-fade var(--loop-wait) linear both; }
}
:root[data-motion="reduce"] .free-clock-hand, :root[data-motion="reduce"] .free-clock-short { animation: none; }
:root[data-motion="reduce"] .free-rewinding { animation: free-rewind-fade var(--loop-wait) linear both; }

.free-help { position: fixed; inset: 0; z-index: var(--z-modal-scrim); }
.free-help-box { position: fixed; border: 2px solid var(--ink-1); border-radius: var(--round-1); pointer-events: none; box-sizing: border-box; }
.free-help-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--ink-1); color: var(--surface-1); font-size: 12px; font-weight: 700; }
.free-help-box.on { border-width: 4px; background: rgba(255, 255, 255, 0.12); }
.free-help-pick { display: flex; align-items: center; gap: var(--step-2); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.free-help-zone.on .free-help-lines { color: var(--ink-1); }
.free-help-panel.at-left { right: auto; left: 8px; }
.free-help-box .free-help-n { position: absolute; top: -10px; left: -10px; }
.free-help-panel {
  position: fixed; top: 8px; right: 8px; bottom: auto; max-height: 60vh; display: flex; flex-direction: column; gap: var(--step-2); width: 328px; max-width: calc(100vw - 16px);
  padding: var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-overlay); box-shadow: var(--win-shadow);
}
.free-help-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.free-help-title { margin: 0 auto 0 0; font-size: 15px; font-weight: 600; }
.free-help-tab.on { border-color: var(--ink-1); }
.free-help-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--step-3); }
.free-help-zone-title { display: flex; align-items: center; gap: var(--step-2); margin: 0 0 var(--step-1); font-size: 13px; font-weight: 600; }
.free-help-lines { margin: 0; padding-left: var(--step-4); color: var(--ink-2); font-size: 13px; }
.free-help-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--step-2); }
.free-help-key { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); font-size: 13px; }
.free-help-text { margin: 0; color: var(--ink-1); font-size: 14px; }
.free-help.sheet .free-help-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 36vh; border-width: 1px 0 0; border-radius: var(--round-2) var(--round-2) 0 0; padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px)); }
.free-help.sheet .free-help-panel.at-top { top: 0; bottom: auto; border-width: 0 0 1px; border-radius: 0 0 var(--round-2) var(--round-2); padding-bottom: var(--step-3); padding-top: calc(var(--step-3) + env(safe-area-inset-top, 0px)); }
.free-help.sheet .free-chain-btn { min-height: 44px; }
.zone-empty-name { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; color: var(--ink-3); font-size: 11px; pointer-events: none; }
.zone-champion .zone-empty-name, .zone-legend .zone-empty-name { top: 50%; bottom: auto; transform: translateY(-50%); }
.zone-empty-banished { left: auto; right: 0; bottom: auto; width: auto; }

.sandbox-page { padding-block: var(--step-5); }
.sandbox-body { display: flex; flex-direction: column; gap: var(--step-4); max-width: 880px; margin-inline: auto; }
.sandbox-head { display: flex; flex-direction: column; gap: var(--step-2); }
.sandbox-title { margin: 0; font-size: 28px; font-weight: 600; }
.sandbox-line, .sandbox-note, .sandbox-chosen, .sandbox-switch-why { margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.sandbox-note:empty { display: none; }
.sandbox-saves { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-2); }
.sandbox-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-4); align-items: start; }
.sandbox-picker > :not(.sandbox-side) { grid-column: 1 / -1; }
.sandbox-side { display: flex; flex-direction: column; gap: var(--step-3); min-width: 0; padding: var(--step-3); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1); }
.sandbox-decks, .sandbox-shelf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--step-2); max-height: 320px; overflow-y: auto; }
.sandbox-pick { width: 100%; min-height: 44px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-1); color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; }
.sandbox-pick.on { box-shadow: 0 0 0 2px var(--ink-1) inset; }
.sandbox-side-title { margin: 0; font-size: var(--type-section); font-weight: 600; }
.sandbox-pick-body { display: flex; flex-direction: column; gap: var(--step-4); }
.sandbox-pick-group { display: flex; flex-direction: column; gap: var(--step-2); }
.sandbox-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--step-2); }
.sandbox-more { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: var(--step-2); }
.sandbox-more-line { color: var(--ink-2); font-size: var(--type-note); }
.sandbox-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--step-2); }
.sandbox-legends { margin-top: var(--step-2); }
.sandbox-list { width: 100%; min-height: 160px; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sandbox-deal { display: flex; flex-direction: column; gap: var(--step-1); }
.sandbox-saves-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--step-2); width: 100%; max-width: 640px; }
.sandbox-save-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step-2); padding: var(--step-2) var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); }
.sandbox-save-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.sandbox-save-name { font-weight: 600; overflow-wrap: anywhere; }
.sandbox-save-facts { color: var(--ink-2); font-size: 13px; }
.sandbox-save-acts { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.sandbox-save-rename { width: 100%; }
@media (max-width: 640px), (pointer: coarse) { .sandbox-save-acts .ui-btn { min-height: var(--touch); } }
.sandbox-faults { padding: var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-1); }
.sandbox-fault-side { margin: 0 0 var(--step-1); font-weight: 600; }
.sandbox-fault-list { margin: 0; padding-left: var(--step-4); color: var(--ink-2); font-size: var(--type-note); }
.lobby-sandbox-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: var(--step-2) var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-1); color: var(--ink-1); text-decoration: none; }
@media (hover: hover) { .lobby-sandbox-row:hover { border-color: var(--ink-3); } }
.lobby-sandbox-row:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.lobby-sandbox-title { font-weight: 600; }
.lobby-sandbox-line { color: var(--ink-2); font-size: var(--type-note); }
.joining-again { margin-bottom: var(--step-2); }
:root[data-compact] .sandbox-picker { grid-template-columns: 1fr; }
:root[data-compact] .sandbox-page { padding-block: var(--step-3); }

.free-share { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--step-2); min-width: 0; max-width: 100%; }
.free-share-name { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); font-weight: 600; }
.free-share-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-2); min-width: 0; }

.free-share-bar { bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
.free-share-bar .free-share { padding: var(--step-2) var(--step-3); justify-content: space-between; }
.table[data-free]:has(.free-share-bar) { padding-bottom: calc(var(--free-bar-h) + var(--rail-h)); }

body:has(.free-share-bar) .site-footer { padding-bottom: calc(var(--free-bar-h) + var(--step-2)); }
.free-share-by { color: var(--ink-2); font-size: 12px; }
@media (max-width: 640px), (pointer: coarse) { .free-share .ui-btn { min-height: var(--touch); } }

.free-handoff-row { display: grid; gap: var(--step-1); }
.free-handoff-opts { display: flex; flex-wrap: wrap; gap: var(--step-1); }
.free-handoff-opt, .free-handoff-refusal { min-height: 32px; text-align: left; }
.free-handoff-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--step-1); }

.table[data-free] .card[data-free-pointed]:not([data-ring]) > .cf::after,
.table[data-free] .card[data-free-selected]:not([data-ring]) > .cf::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; }
.table[data-free] .card[data-free-pointed]:not([data-ring]) > .cf::after { box-shadow: inset 0 0 0 2px var(--ink-1); }
.table[data-free] .card[data-free-selected]:not([data-ring]) > .cf::after { box-shadow: inset 0 0 0 2px var(--ink-2); }
.free-toggles.sheet .free-handoff-opt, .free-toggles.sheet .free-handoff-refusal { min-height: 44px; }
.free-handoff-sheet { max-height: 80vh; overflow-y: auto; }

.free-engine-btn, .free-engine-withdraw { display: inline-flex; align-items: center; gap: var(--step-2); }
.free-engine-pill { flex: 1 1 100%; margin: 0; color: var(--ink-2); font-size: 12px; }
.free-engine-sheet:not(.sheet) { width: 400px; max-width: calc(100vw - 16px); }
.free-engine-sheet { max-height: 80vh; overflow-y: auto; }
.free-engine-sheet .free-invite-row { position: sticky; bottom: 0; padding-top: var(--step-1); background: var(--surface-overlay); }
.free-engine-head { margin: 0; color: var(--ink-1); font-size: 13px; font-weight: 600; }
.free-engine-line { margin: 0; color: var(--ink-2); font-size: 13px; }
.free-engine-counts { display: grid; gap: 2px; }
.free-engine-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--step-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.free-engine-row > span { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.free-engine-row > .free-engine-label, .free-engine-row > span:first-child { text-align: left; color: var(--ink-2); }
.free-engine-row.is-head { color: var(--ink-1); font-weight: 600; }
.free-engine-marks, .free-engine-since, .free-engine-mark { display: grid; gap: var(--step-1); }
.free-engine-duration { color: var(--ink-2); font-size: 12px; }
.free-engine-ask { max-height: 70vh; overflow-y: auto; }
.free-engine-ask-body { display: grid; gap: var(--step-2); }
.free-resumed-lines { display: grid; gap: var(--step-1); }
.free-resumed-line { margin: 0; }

.free-chip-col { display: grid; gap: var(--step-1); justify-items: start; min-width: 0; }
.free-ranked { display: grid; gap: var(--step-1); min-width: 0; max-width: 46ch; }
.free-ranked > p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.free-ranked-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-1); }
.free-ranked-clock.is-urgent, .free-ranked-line.is-away { color: var(--bad-ink); }
.free-ranked-clock.is-paused { color: var(--ink-3); }
.free-engine-warn, .free-notice-detail { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.35; }
.free-notice-detail { flex: 1 1 100%; }


.side-right > .free-panel { flex: 0 0 auto; padding-top: var(--step-1); border-top: 1px solid var(--line-1); }
.free-tray.is-strips { display: flex; flex-direction: column; gap: 3px; }
.free-tray-aside { display: flex; flex-direction: column; gap: 3px; }
.free-tray-strips { display: flex; flex-direction: column; gap: 3px; }
.free-tray.is-strips > .free-tray-card + .free-tray-aside { margin-top: var(--step-1); }

.free-tray-card.is-strip { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 var(--step-2) 3px; border-radius: 6px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.free-tray-card.is-strip > .free-tray-face { display: flex; align-items: center; height: 30px; min-width: 0; overflow: hidden; }
.free-tray-card.is-strip .free-tray-acts { flex-wrap: nowrap; justify-content: flex-start; max-width: none; }
.free-tray-card.is-strip .free-tray-acts .free-chain-btn { flex: 0 1 auto; min-width: 0; min-height: 26px; padding: 0 var(--step-2); }
:root[data-input="touch"] .free-tray-card.is-strip .free-tray-acts .free-chain-btn { min-height: var(--touch); }

.table[data-free] .side-region { min-height: 112px; }



.table[data-free][data-shape="tall"] { --hold-reserve: calc(2 * var(--touch) + 3 * var(--step-2)); --hold-ask: 0px; }
.table[data-free][data-shape="tall"][data-shape][data-shape] .side-right > .free-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 var(--step-2); gap: var(--step-2); height: calc(var(--hold-reserve) - var(--step-2)); border-top: 0; overflow: visible;
}
.table[data-free][data-shape="tall"] .free-turnbar { flex-wrap: nowrap; justify-content: flex-start; height: var(--touch); padding: 0; gap: var(--step-2); }
.table[data-free][data-shape="tall"] .free-turn { flex: 0 1 38%; min-width: 0; font-size: 12px; line-height: 1.2; }
.table[data-free][data-shape="tall"] .free-turn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table[data-free][data-shape="tall"] .free-save-title { display: none; }
.table[data-free][data-shape="tall"] .free-turn-acts { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; gap: var(--step-1); }
.table[data-free][data-shape="tall"] .free-turn-acts::-webkit-scrollbar { display: none; }
.table[data-free][data-shape="tall"] .free-turn-acts > * { flex: none; scroll-snap-align: start; }
.table[data-free][data-shape="tall"] .free-turn-acts .free-chain-btn { min-height: var(--touch); padding-inline: var(--step-2); white-space: nowrap; }
.table[data-free][data-shape="tall"] .free-rewind-waiting { display: none; }
.table[data-free][data-shape="tall"] .free-chain { position: static; display: flex; align-items: center; gap: var(--step-2); height: var(--touch); }
.table[data-free][data-shape="tall"] .free-chain-acts { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; align-items: center; gap: var(--step-2); }
.table[data-free][data-shape="tall"] .free-chain-acts .free-chain-resolve { flex: 1 1 0; order: 0; min-width: 88px; min-height: var(--touch); font-size: 15px; }
.table[data-free][data-shape="tall"] .free-chain-acts .free-chain-btn:not(.free-chain-resolve) { flex: none; padding-inline: var(--step-2); }
.table[data-free][data-shape="tall"] .free-chain-why { flex: 0 1 auto; min-height: 0; max-width: 48%; font-size: 12px; line-height: 1.15; }
.table[data-free][data-shape="tall"] .free-chain-slot { flex: 0 0 64px; height: var(--touch); line-height: var(--touch); text-align: center; overflow: hidden; }
.table[data-free][data-shape="tall"] .free-chain-clear { display: none; }
.table[data-free][data-shape="tall"] .free-tray { position: absolute; left: var(--step-2); right: var(--step-2); bottom: 100%; margin-bottom: var(--step-2); padding: var(--step-2); border-radius: var(--round-2); background: var(--surface-overlay); box-shadow: inset 0 0 0 1px var(--line-2), var(--win-shadow); z-index: 4; }
.table[data-free][data-shape="tall"] .free-tray[data-empty] { display: none; }

.table[data-free][data-shape="tall"] .stage :is(.zone-mainDeck, .zone-runeDeck) { pointer-events: auto; }

.table[data-free][data-shape="short"] .side-right > .free-panel { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--step-1); padding: 0; border-top: 0; overflow: visible; }
.table[data-free][data-shape="short"] .free-turnbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--step-1); padding: 0; }
.table[data-free][data-shape="short"] .free-turn { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: var(--step-2); min-width: 0; font-size: 12px; line-height: 1.2; }
.table[data-free][data-shape="short"] .free-turn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table[data-free][data-shape="short"] .free-save-title, .table[data-free][data-shape="short"] .free-rewind-waiting, .table[data-free][data-shape="short"] .free-chain-clear { display: none; }
.table[data-free][data-shape="short"] .free-turn-acts { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; gap: var(--step-1); }
.table[data-free][data-shape="short"] .free-turn-acts::-webkit-scrollbar { display: none; }
.table[data-free][data-shape="short"] .free-turn-acts > * { flex: none; scroll-snap-align: start; }
.table[data-free][data-shape="short"] .free-turn-acts .free-chain-btn { min-height: var(--touch); padding-inline: var(--step-2); white-space: nowrap; }
.table[data-free][data-shape="short"] .free-chain { display: flex; align-items: center; gap: var(--step-1); height: var(--touch); }
.table[data-free][data-shape="short"] .free-chain-acts { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; align-items: center; gap: var(--step-1); overflow-x: auto; scrollbar-width: none; }
.table[data-free][data-shape="short"] .free-chain-acts .free-chain-resolve { flex: 1 0 88px; order: 0; min-height: var(--touch); font-size: 15px; }
.table[data-free][data-shape="short"] .free-chain-acts .free-chain-btn:not(.free-chain-resolve) { flex: none; padding-inline: var(--step-2); }
.table[data-free][data-shape="short"] .free-chain-why { flex: 0 1 auto; min-height: 0; max-width: 45%; font-size: 12px; line-height: 1.15; }
.table[data-free][data-shape="short"] .free-chain-slot { position: absolute; right: 0; top: 0; height: 16px; line-height: 16px; }
.table[data-free][data-shape="short"] .free-tray { position: absolute; right: calc(100% + var(--step-2)); bottom: 0; width: 240px; padding: var(--step-2); border-radius: var(--round-2); background: var(--surface-overlay); box-shadow: inset 0 0 0 1px var(--line-2), var(--win-shadow); z-index: 4; }
.table[data-free][data-shape="short"] .free-tray[data-empty] { display: none; }

.table[data-free][data-shape="short"] .dock-pill { right: auto; left: var(--step-2); top: var(--step-2); width: auto; max-width: 104px; padding: 0 var(--step-2); }
.table[data-free][data-shape="short"] .dock-pill > :not(.dock-pill-title, .chain-light) { display: none; }


.free-panel-toggle { display: none; }
@media (max-width: 399.98px) {
  .table[data-free][data-shape="tall"] { --hold-reserve: calc(40px + var(--step-2)); }
  .table[data-free][data-shape="tall"] .free-panel-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; order: 3; width: 40px; min-height: 40px; padding: 0; }
  .table[data-free][data-shape="tall"] .free-turnbar { height: 40px; }
  .table[data-free][data-shape="tall"] .free-turn { flex: 1 1 0; }
  .table[data-free][data-shape="tall"] .free-turn-acts { order: 2; }
  .table[data-free][data-shape="tall"] .free-panel:not([data-panel-open]) .free-turn-acts { flex: none; overflow: visible; }
  .table[data-free][data-shape="tall"] .free-panel:not([data-panel-open]) .free-turn-acts > :not(.free-turn-btn),
  .table[data-free][data-shape="tall"] .free-panel:not([data-panel-open]) .free-chain { display: none; }
  .table[data-free][data-shape="tall"] .free-panel:not([data-panel-open]) .free-turn-btn { min-height: 36px; }
  .table[data-free][data-shape="tall"][data-shape][data-shape] .side-right > .free-panel[data-panel-open] {
    box-sizing: border-box; height: calc(2 * var(--touch) + 4 * var(--step-2)); padding-block: var(--step-2); z-index: 5;
    background: var(--surface-overlay); border-radius: var(--round-2) var(--round-2) 0 0; box-shadow: inset 0 0 0 1px var(--line-2), var(--win-shadow);
  }
}