/* Deck Designer
   Four surfaces: the ink top bar, an ink rail of section symbols down the left, one ivory editing
   panel beside it (it folds away, the rail stays), and the card table (felt by default) as the stage.
   One accent (lacquer orange) for actions and selection. Display type is IvyPresto; UI is
   Hanken Grotesk; measurements are DM Mono. One radius (8px) for every control. */

/* IvyPresto Display (The Type Founders), licensed by Joseph for web use. */
@font-face { font-family: 'IvyPresto Display'; src: url('../assets/fonts/IvyprestoDisplay-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IvyPresto Display'; src: url('../assets/fonts/IvyprestoDisplay-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }

:root {
  --ink: #1C1A17;
  --ink-2: #4B463E;
  --ink-3: #7A7468;
  --paper: #F4F0E7;
  --paper-2: #EAE4D7;
  --paper-3: #DFD7C6;
  --rule: rgba(28, 26, 23, .12);
  --rule-2: rgba(28, 26, 23, .22);
  --accent: #F28A1E;
  --accent-2: #E0770B;
  --felt: #1D4A3B;
  --felt-deep: #143628;
  --on-stage: #EFE9DB;
  --on-stage-2: #B9C8BC;
  --stage-ctl: rgba(8, 24, 17, .42);
  --stage-ctl-2: rgba(8, 24, 17, .6);
  --danger: #B3261E;
  --display: 'IvyPresto Display', 'Cormorant Garamond', Georgia, serif;
  --ui: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --r: 8px;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop-shadow: 0 18px 40px rgba(20, 16, 10, .24), 0 2px 8px rgba(20, 16, 10, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 14px/1.45 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
#defs-root { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: inline-flex; flex: none; }
.ico svg { display: block; }
::selection { background: #F8C58E; color: var(--ink); }

/* ---------------------------------------------------------------- layout */
.app { --rw: 72px; --pw: 348px; height: 100vh; height: 100dvh; display: grid; grid-template-columns: var(--rw) var(--pw) minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); transition: grid-template-columns .3s var(--ease); }
.topbar { grid-column: 1 / -1; }
.rail { grid-row: 2; grid-column: 1; min-height: 0; }
.panel { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-right: 1px solid var(--rule-2); }
.panel > * { width: var(--pw); } /* fixed, so nothing reflows while the panel folds */
.stage { grid-row: 2; grid-column: 3; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* folded: the panel closes to nothing and the rail stays, so every section is still one press away */
.app.folded { grid-template-columns: var(--rw) 0px minmax(0, 1fr); }
.app.folded .panel { border-right-width: 0; visibility: hidden; transition: visibility 0s .3s; }
/* preview: rail and panel step aside and the table takes the window */
.app.preview { grid-template-columns: minmax(0, 1fr); transition: none; }
.app.preview .panel, .app.preview .rail { display: none; }
.app.preview .stage { grid-column: 1; }
body:not(.ready) .app { visibility: hidden; }

/* ---------------------------------------------------------------- top bar */
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 16px 0 18px; background: var(--ink); color: var(--paper); position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.logo { width: 30px; height: 30px; display: block; }
.logo svg { width: 100%; height: 100%; display: block; }
.wordmark { font: 300 24px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.name-wrap { display: flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 16px; border-left: 1px solid rgba(244, 240, 231, .18); color: rgba(244, 240, 231, .6); min-width: 0; }
.deck-name { background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--paper); font: 500 15px/1.2 var(--ui); padding: 4px 0; width: 17ch; min-width: 0; outline: none; transition: border-color .2s; field-sizing: content; min-inline-size: 6ch; max-inline-size: 28ch; }
.deck-name:hover { border-bottom-color: rgba(244, 240, 231, .3); }
.deck-name:focus { border-bottom-color: var(--accent); }
.spacer { flex: 1; }
.tb-group { display: flex; align-items: center; gap: 4px; }
.tb-group + .tb-group { margin-left: 8px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background .18s, color .18s, transform .18s var(--spring); }
.btn:active { transform: scale(.97); }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn.primary { background: var(--accent); color: var(--ink); font-weight: 600; }
.btn.primary:hover { background: #F79B39; }
.btn.dark { color: var(--paper); }
.btn.dark:hover { background: rgba(244, 240, 231, .1); }
.btn.ghost { color: var(--ink); background: var(--paper-2); }
.btn.ghost:hover { background: var(--paper-3); }
.btn.ghost.on { background: var(--ink); color: var(--paper); }
.btn.felt { color: var(--on-stage); background: var(--stage-ctl); }
.btn.felt:hover { background: var(--stage-ctl-2); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); color: var(--ink); transition: background .18s, opacity .18s; }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn.dark { color: var(--paper); }
.icon-btn.dark:hover { background: rgba(244, 240, 231, .1); }
.icon-btn.felt { color: var(--on-stage); width: 30px; height: 30px; }
.icon-btn.felt:hover { background: var(--stage-ctl-2); }
.icon-btn:disabled { opacity: .32; background: none; }
.icon-btn .count { position: absolute; right: 3px; bottom: 4px; font: 500 9.5px/1 var(--mono); color: rgba(244, 240, 231, .7); }
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mini { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--paper); color: var(--ink); }
.mini:hover { background: #fff8ec; }

/* ---------------------------------------------------------------- rail */
.rail { display: flex; flex-direction: column; background: var(--ink); color: var(--paper); border-top: 1px solid rgba(244, 240, 231, .1); position: relative; z-index: 3; }
.rail-list { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 7px; overflow-y: auto; scrollbar-width: none; }
.rail-list::-webkit-scrollbar { display: none; }
.rail-btn { position: relative; flex: none; display: grid; justify-items: center; gap: 4px; padding: 7px 2px 6px; border-radius: var(--r); color: var(--paper); opacity: .6; transition: opacity .15s, background .15s; }
.rail-btn .ico { transition: color .15s, transform .3s var(--spring); }
.rail-l { font: 500 10.5px/1 var(--ui); letter-spacing: .015em; }
.rail-btn:hover { opacity: 1; background: rgba(244, 240, 231, .07); }
.rail-btn.cur { opacity: .9; }
.rail-btn.on { opacity: 1; background: rgba(244, 240, 231, .13); }
.rail-btn.on .ico { color: var(--accent); }
.rail-btn.on::before { content: ''; position: absolute; left: -7px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
/* the part of a card under the pointer lights its symbol */
.rail-btn.hint { opacity: 1; }
.rail-btn.hint .ico { color: var(--accent); transform: scale(1.16); }
.rail-btn:focus-visible { outline-offset: -2px; }
/* three groups: start, the parts of a face, finish */
.rail-btn[data-group="0"] + .rail-btn[data-group="1"], .rail-btn[data-group="1"] + .rail-btn[data-group="2"] { margin-top: 13px; }
.rail-btn[data-group="0"] + .rail-btn[data-group="1"]::after, .rail-btn[data-group="1"] + .rail-btn[data-group="2"]::after { content: ''; position: absolute; left: 12px; right: 12px; top: -8px; height: 1px; background: rgba(244, 240, 231, .16); }
.rail-fold { flex: none; display: grid; place-items: center; height: 44px; color: var(--paper); opacity: .6; border-top: 1px solid rgba(244, 240, 231, .1); transition: opacity .15s, background .15s; }
.rail-fold:hover { opacity: 1; background: rgba(244, 240, 231, .07); }
.rail-fold:focus-visible { outline-offset: -3px; }

/* ---------------------------------------------------------------- editing panel */
.panel-head { flex: none; display: grid; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--rule-2); background: var(--paper); transition: background .2s; }
.sec-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sec-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--ink); }
.sec-title { flex: 1; min-width: 0; margin: 0; font: 300 31px/1 var(--display); letter-spacing: -.01em; }
.panel-head.ping .sec-icon { animation: sec-ping .7s var(--ease); }
@keyframes sec-ping { 0% { box-shadow: 0 0 0 0 rgba(242, 138, 30, .55); transform: scale(1); } 30% { transform: scale(1.14); } 100% { box-shadow: 0 0 0 14px rgba(242, 138, 30, 0); transform: scale(1); } }
.kicker { font: 700 11.5px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }

/* "Applies to": who an edit changes. Broad choices in a row, the narrow ones behind More */
.scope { display: grid; gap: 7px; }
.scope-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.scope-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) auto; gap: 5px; }
.scope-opt { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 38px; padding: 0 8px; border-radius: var(--r); background: var(--paper-2); font: 600 13px/1 var(--ui); white-space: nowrap; transition: background .15s, color .15s, transform .25s var(--spring); }
.scope-opt:hover { background: var(--paper-3); transform: translateY(-1px); }
.scope-opt.on { background: var(--ink); color: var(--paper); }
.scope-opt .ico { opacity: .8; }
.scope-opt.more { padding: 0 8px 0 11px; font-weight: 500; color: var(--ink-2); }
.scope-opt.more.on { font-weight: 600; color: var(--paper); }
.scope-opt.more .ico { margin-left: -1px; }
.scope-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; }
.scope-row.on { background: #FBEBD9; }
.scope-row.na { opacity: .5; }
.scope-vis { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; border-radius: 6px; background: var(--paper-2); font-weight: 600; font-size: 13px; }
.scope-row.on .scope-vis { background: var(--accent); }
.scope-txt { display: grid; gap: 2px; min-width: 0; }
.scope-txt b { font-weight: 600; font-size: 13.5px; }
.scope-txt small { font-size: 12px; font-weight: 400; color: var(--ink-2); white-space: normal; line-height: 1.3; }
/* a little card: the deck's own paper and suit color, so it reads on any palette */
.mc { display: inline-grid; place-items: center; width: 15px; height: 21px; border-radius: 3px; font: 400 12px/1 var(--ui); box-shadow: 0 0 0 1px rgba(28, 26, 23, .2); }
.mc-row { display: inline-flex; }
.mc-row .mc + .mc { margin-left: -5px; }
.so-run { font: 500 11.5px/1 var(--mono); opacity: .75; }
/* editing a subset: the choice turns orange and the head tints */
.panel.scoped .panel-head { background: #FBEBD9; }
.panel.scoped .scope-opt:not(.on) { background: rgba(255, 255, 255, .6); }
.panel.scoped .scope-opt.on, .panel.scoped .scope-opt.more.on { background: var(--accent); color: var(--ink); }
.scope-ov { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.scope-ov .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.scope-ov .link { margin-left: auto; }

.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; }
.tab-pane { display: grid; gap: 22px; padding: 18px 18px 28px; }
.tab-pane:focus { outline: none; }
/* deck-wide settings say so while one card, a rank or a suit is being edited */
.panel.scoped .field[data-wide] > .field-head::after { content: 'All cards'; margin-left: auto; padding: 3px 7px; border-radius: 5px; background: var(--paper-2); font: 500 11px/1 var(--ui); color: var(--ink-2); }
.panel.scoped .field[data-wide] > .field-head .field-val:empty { display: none; }

/* the way through: back a step, or on to the next part */
.panel-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-top: 1px solid var(--rule-2); background: var(--paper); }
.btn.next { flex: 1; justify-content: center; height: 42px; gap: 8px; background: var(--paper-2); font-weight: 600; }
.btn.next .next-k { font-weight: 500; color: var(--ink-2); transition: color .18s; }
.btn.next .ico:last-child { margin-left: 4px; transition: transform .3s var(--spring); }
.btn.next:hover { background: var(--ink); color: var(--paper); }
.btn.next:hover .next-k { color: rgba(244, 240, 231, .7); }
.btn.next:hover .ico:last-child { transform: translateX(4px); }
.btn.next.primary { background: var(--accent); color: var(--ink); }
.btn.next.primary .next-k { display: none; }
.btn.next.primary:hover { background: #F79B39; }

.field { display: grid; gap: 9px; min-width: 0; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hint-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink-3); transition: background .15s, color .15s; }
.hint-btn:hover, .hint-btn.on { background: var(--paper-2); color: var(--ink); }
.field-val { font: 400 12.5px/1 var(--mono); color: var(--ink-2); }
.field-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.stack { display: grid; gap: 10px; }

/* segmented */
.seg { position: relative; display: flex; padding: 3px; gap: 2px; border-radius: var(--r); background: var(--paper-2); isolation: isolate; min-width: 0; }
.seg-ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 6px; background: var(--ink); z-index: -1; transition: transform .38s var(--spring), width .38s var(--spring), opacity .2s; }
.seg-btn { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: color .2s; }
.seg-btn span { overflow: hidden; text-overflow: ellipsis; }
.seg-btn:hover:not(.on) { color: var(--ink); background: rgba(28, 26, 23, .06); }
.seg-btn.on { color: var(--paper); }
.seg.small .seg-btn { height: 26px; font-size: 12px; padding: 0 9px; }
.seg-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .25); }
.seg.dark { background: var(--stage-ctl); }
.seg.dark .seg-ind { background: var(--on-stage); }
.seg.dark .seg-btn { color: var(--on-stage); }
.seg.dark .seg-btn:hover:not(.on) { background: rgba(255, 255, 255, .08); }
.seg.dark .seg-btn.on { color: var(--ink); }

/* slider */
.slider { position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.sl-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.sl-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 2px; }
.sl-thumb { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(20, 16, 10, .25); transition: transform .25s var(--spring), box-shadow .2s; }
.slider:hover .sl-thumb, .slider.drag .sl-thumb { transform: scale(1.12); }
.slider.drag .sl-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px rgba(242, 138, 30, .28); }
.sl-thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--accent); }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px 7px; border-radius: var(--r); background: var(--paper-2); transition: background .18s, transform .3s var(--spring); min-width: 0; }
.tile:hover { background: var(--paper-3); transform: translateY(-2px); }
.tile:active { transform: translateY(0) scale(.98); }
.tile.on { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.tile.on::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tile-art { display: grid; place-items: center; width: 100%; min-height: 34px; pointer-events: none; }
.tile-label { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.on .tile-label { font-weight: 700; }
.suit-row { width: 100%; height: auto; display: block; }
.minis .tile { padding: 9px 3px 7px; }
.minis .tile-label { white-space: normal; font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-card { display: block; width: min(100%, 52px); aspect-ratio: var(--ratio, 250 / 350); }
.mini-card svg { display: block; width: 100%; height: 100%; }
.pal .tile-art { height: 62px; }
.pal-pair { position: relative; display: block; width: 58px; height: 60px; }
.pal-pair > span { position: absolute; top: 0; width: 38px; aspect-ratio: var(--ratio, 250 / 350); }
.pal-pair > span:first-child { left: 0; transform: rotate(-7deg); }
.pal-pair > span:last-child { right: 0; top: 4px; transform: rotate(8deg); }
.pal-pair svg { display: block; width: 100%; height: 100%; }
.looks .tile { padding: 10px 4px 8px; }
.looks .tile-art { height: 82px; }
.looks .tile-label { font: 300 17px/1 var(--display); }
.looks .tile.on .tile-label { font-weight: 300; }
.fan3 { position: relative; display: block; width: 88px; height: 76px; }
.fan3 > span { position: absolute; bottom: 0; left: 50%; width: 44px; aspect-ratio: var(--ratio, 250 / 350); transform-origin: 50% 120%; transition: transform .45s var(--spring); }
.fan3 > span:nth-child(1) { transform: translateX(-50%) rotate(-15deg); }
.fan3 > span:nth-child(2) { transform: translateX(-50%) rotate(0deg) translateY(-3px); }
.fan3 > span:nth-child(3) { transform: translateX(-50%) rotate(15deg); }
.looks .tile:hover .fan3 > span:nth-child(1) { transform: translateX(-50%) rotate(-24deg); }
.looks .tile:hover .fan3 > span:nth-child(2) { transform: translateX(-50%) rotate(0deg) translateY(-8px); }
.looks .tile:hover .fan3 > span:nth-child(3) { transform: translateX(-50%) rotate(24deg); }
.fan3 svg { display: block; width: 100%; height: 100%; }
.size-glyph { display: grid; place-items: center; height: 48px; }
.shape-glyph { display: block; overflow: visible; }
.shape-glyph path { fill: var(--paper); stroke: var(--ink); }
.tile.on .shape-glyph path { fill: var(--accent); }
.corners .size-glyph { height: 52px; overflow: hidden; align-items: start; }
.corners .tile { padding-left: 3px; padding-right: 3px; }
.corners .tile-label { font-size: 11.5px; text-overflow: clip; }
.size-note { font: 400 10.5px/1 var(--mono); color: var(--ink-2); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; font-size: 13px; font-weight: 500; text-align: left; }
.switch-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--paper-3); flex: none; transition: background .2s; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 16, 10, .3); transition: transform .35s var(--spring); }
.switch[aria-checked="true"] .switch-track { background: var(--ink); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(16px); }
.stage-bar .switch { color: var(--on-stage); padding: 0 10px 0 6px; border-radius: var(--r); background: var(--stage-ctl); height: 32px; }
.stage-bar .switch-track { background: rgba(255, 255, 255, .18); }
.stage-bar .switch[aria-checked="true"] .switch-track { background: var(--on-stage); }
.stage-bar .switch[aria-checked="true"] .switch-knob { background: var(--felt-deep); }

/* swatches */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
.swatches.inline { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.swatches.inline .swatch { grid-auto-flow: column; align-items: center; justify-items: start; gap: 8px; }
.swatches.inline .sw-chip { width: 32px; height: 32px; }
.swatches.inline .sw-label { font-size: 12.5px; text-align: left; color: var(--ink); }
.swap-ico { display: inline-flex; }
.swatch { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.sw-chip { width: 38px; height: 38px; border-radius: var(--r); transition: transform .3s var(--spring); }
.sw-chip.light { box-shadow: inset 0 0 0 1px var(--rule-2); }
.swatch:hover .sw-chip { transform: translateY(-2px) scale(1.05); }
.sw-label { font-size: 11px; line-height: 1.2; color: var(--ink-2); text-align: center; }

/* font picker */
.fp { display: grid; gap: 10px; }
.fp-top { display: flex; gap: 8px; }
.fp-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r); background: var(--paper-2); color: var(--ink-2); cursor: text; }
.fp-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.fp-q { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; color: var(--ink); }
.fp-q::-webkit-search-cancel-button { display: none; }
.fp-top .btn { height: 36px; }
.fp-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--paper-2); font-size: 12.5px; font-weight: 500; transition: background .15s, color .15s; }
.chip:hover { background: var(--paper-3); }
.layers { display: flex; flex-wrap: wrap; gap: 6px; }
.layer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 500; transition: background .15s, color .15s, transform .25s var(--spring); }
.layer .ico { opacity: .7; }
.layer span:not(.ico) { text-decoration: line-through; text-decoration-color: var(--rule-2); }
.layer.on { background: var(--ink); color: var(--paper); }
.layer.on .ico { opacity: 1; }
.layer.on span:not(.ico) { text-decoration: none; }
.layer:hover { transform: translateY(-1px); }
.chip.on { background: var(--ink); color: var(--paper); }
.fp-box { position: relative; border-radius: var(--r); background: var(--paper-2); }
.fp-list { display: grid; gap: 2px; align-content: start; height: 262px; overflow-y: auto; padding: 5px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 6px; text-align: left; }
.fp-row:hover, .fp-row:focus-visible { background: var(--paper); outline: none; }
.fp-row.on { background: var(--ink); color: var(--paper); }
.fp-sample { font-size: 22px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-name { display: grid; justify-items: end; font-size: 12px; font-weight: 600; max-width: 128px; text-align: right; line-height: 1.2; }
.fp-name em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.fp-row.on .fp-name em { color: rgba(244, 240, 231, .7); }
.fp-more { height: 1px; }
.fp-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 13px; color: var(--ink-2); }

/* index corner previews */
.idx .tile-art { aspect-ratio: 1 / .9; }
.corner-art { display: block; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.corner-art svg { display: block; width: 100%; height: 100%; }

/* image slots */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: var(--r); background: var(--paper-2); min-width: 0; }
.slot-art { display: grid; place-items: center; width: 44px; height: 44px; }
.slot-art svg, .slot-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-empty { font: 400 12px/1.2 var(--mono); color: var(--ink-2); text-align: center; }
.slot-art { padding: 0; border-radius: 6px; cursor: pointer; }
.slot-blank { display: grid; place-items: center; width: 72%; aspect-ratio: 5 / 7; border-radius: 5px; background: var(--paper); border: 1.5px dashed var(--rule-2); color: var(--ink-2); transition: border-color .15s, color .15s; }
.slot-art:hover .slot-blank { border-color: var(--ink); color: var(--ink); }
.slot-label { font-size: 12px; font-weight: 600; }
.slot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.slots .slot-actions .mini span:not(.ico) { display: none; }
.slots .slot-actions .mini { padding: 0 7px; }
.slot-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--paper); color: var(--ink); }
.slot-x:hover { background: var(--ink); color: var(--paper); }
.field > .slot, .stack > .slot { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; padding: 10px 12px; column-gap: 12px; }
.field > .slot .slot-art, .stack > .slot .slot-art { grid-row: span 2; width: 64px; height: 64px; }
.field > .slot .slot-label, .stack > .slot .slot-label { display: none; }
.field > .slot .slot-actions, .stack > .slot .slot-actions { justify-content: flex-start; }

.seed { display: flex; align-items: center; gap: 6px; }
.seed-no { font: 500 13px/1 var(--mono); min-width: 64px; text-align: center; }
.seed .btn:last-child { margin-left: auto; }
.text-in { width: 110px; height: 38px; padding: 0 12px; border-radius: var(--r); border: 0; background: var(--paper-2); font: 500 16px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; outline: none; }
.text-in:focus { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------------------------------------------------------------- tooltips, popovers, menus, toasts */
.tip { position: fixed; left: 0; top: 0; z-index: 100; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity .15s; }
.tip.on { opacity: 1; }
.pop { position: fixed; z-index: 60; background: var(--paper); border-radius: 10px; box-shadow: var(--pop-shadow); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .16s, transform .28s var(--spring); }
.pop.on { opacity: 1; transform: none; }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; font: 300 21px/1 var(--display); border-bottom: 1px solid var(--rule); }
.pop-sub { font: 400 12px/1 var(--mono); color: var(--ink-2); }
.hist { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 460px); overflow-y: auto; }
.hist-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; text-align: left; font-size: 13px; }
.hist-row:hover { background: var(--paper-2); }
.hist-row.now { background: var(--ink); color: var(--paper); }
.hist-row.undone { color: var(--ink-3); }
.hist-row.undone .hist-label { text-decoration: line-through; text-decoration-color: var(--rule-2); }
.hist-time { font: 400 11.5px/1.5 var(--mono); opacity: .8; white-space: nowrap; }
.menu { padding: 6px; display: grid; gap: 2px; }
.menu-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; text-align: left; font-size: 14px; font-weight: 500; }
.menu-row:hover { background: var(--paper-2); }
.menu-row kbd { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-2); }
.menu-row.danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--rule); margin: 4px 6px; }
.cp { display: grid; gap: 10px; padding: 12px; width: 236px; }
.cp-sv { position: relative; height: 132px; border-radius: 6px; cursor: crosshair; touch-action: none; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)); }
.cp-knob, .cp-hknob { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .35); pointer-events: none; }
.cp-hue { position: relative; height: 14px; border-radius: 7px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hknob { top: 50%; }
.cp-row { display: flex; gap: 8px; align-items: center; }
.cp-chip { width: 34px; height: 34px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-2); flex: none; }
.cp-hex { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--paper-2); font: 500 14px/1 var(--mono); text-transform: uppercase; outline: none; }
.cp-hex:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.cp-set { display: grid; gap: 6px; }
.cp-title { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.cp-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-s { width: 24px; height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule-2); transition: transform .15s var(--spring); }
.cp-s:hover { transform: scale(1.12); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; box-shadow: var(--pop-shadow); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .2s, transform .4s var(--spring); }
.toast.on { opacity: 1; transform: none; }
.toast.error .ico { color: #FF9A8A; }
.toast .ico { color: var(--accent); }

/* ---------------------------------------------------------------- modals */
.scrim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(16, 13, 9, .55); opacity: 0; transition: opacity .22s; }
.scrim.on { opacity: 1; }
.modal { width: min(100%, 620px); max-height: calc(100dvh - 40px); overflow: auto; background: var(--paper); border-radius: 14px; box-shadow: var(--pop-shadow); transform: translateY(14px) scale(.98); transition: transform .45s var(--spring); }
.scrim.on .modal { transform: none; }
.modal:focus { outline: none; }
.export, .pad { padding: 22px 24px 24px; display: grid; gap: 18px; }
.export-head, .pad-head { display: flex; justify-content: space-between; align-items: center; }
.export h2, .pad h2 { margin: 0; font: 300 34px/1 var(--display); letter-spacing: -.01em; }
.export-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 16px; border-radius: 10px; background: var(--paper-2); }
.opt { display: grid; gap: 7px; }
.opt .seg { background: var(--paper); }
.opt-label { font-size: 12.5px; font-weight: 600; }
.opt.toggles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.outs { display: grid; gap: 8px; }
.outs.busy { opacity: .45; pointer-events: none; }
.out { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 10px; background: var(--paper-2); text-align: left; transition: background .15s, transform .3s var(--spring); }
.out:hover { background: var(--ink); color: var(--paper); transform: translateX(3px); }
.out:hover .out-sub { color: rgba(244, 240, 231, .72); }
.out:hover .out-ic { background: var(--accent); color: var(--ink); }
.out-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r); background: var(--paper); transition: background .15s; }
.out-text { display: grid; gap: 2px; min-width: 0; }
.out-title { font-weight: 600; font-size: 15px; }
.out-sub { font-size: 13px; color: var(--ink-2); }
.prog { display: grid; gap: 8px; }
.prog-track { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.prog-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.prog-row { display: flex; justify-content: space-between; align-items: center; font: 400 13px/1 var(--mono); color: var(--ink-2); }

.modal-pad { width: min(100%, 820px); }
.pad-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.pad-group { display: flex; align-items: center; gap: 6px; }
.pad-brush { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); background: var(--paper-2); }
.pad-brush span { border-radius: 50%; background: var(--ink); }
.pad-brush.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); }
.pad-ink { width: 28px; height: 28px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-2); transition: transform .25s var(--spring); }
.pad-ink.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.pad .swatch { grid-auto-flow: column; align-items: center; gap: 6px; }
.pad .sw-chip { width: 28px; height: 28px; border-radius: 6px; }
.pad-area { display: grid; place-items: center; padding: 14px; border-radius: 10px; background: repeating-conic-gradient(#E6E0D3 0 25%, #F4F0E7 0 50%) 0 0 / 18px 18px; }
.pad-frame { position: relative; max-width: 100%; max-height: 58vh; width: auto; height: 58vh; }
.pad-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1px var(--rule-2); border-radius: 4px; }
.pad-guide { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(28, 26, 23, .35); pointer-events: none; }
.pad-foot { display: flex; align-items: center; gap: 8px; }
.pad-note { margin-right: auto; font-size: 12.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- stage */
/* The table is one element's background: lamp light, vignette, a surface texture and color. Blending
   inside a single background is cheap; a blended overlay layer made every repaint (e.g. moving the
   window to another monitor) re-composite the whole stage. Each texture is a 1024 px tile with no visible seam
   (tools/textures.py), large enough that the repeat is not noticeable. */
.stage { position: relative; color: var(--on-stage); isolation: isolate;
  --light: radial-gradient(120% 90% at 50% 38%, rgba(255, 244, 214, .09), transparent 55%);
  --vignette: radial-gradient(140% 110% at 50% 45%, transparent 58%, rgba(0, 0, 0, .34));
  --tex: url('../assets/textures/felt.webp'); --tex-size: 760px; --tex-blend: soft-light;
  background: var(--light), var(--vignette), var(--tex) 0 0 / var(--tex-size) var(--tex-size), var(--felt);
  background-blend-mode: normal, normal, var(--tex-blend), normal; }
.stage[data-tone="linen"] { --felt: #E7E1D5; --on-stage: #1C1A17; --on-stage-2: #4B463E; --stage-ctl: rgba(28, 26, 23, .08); --stage-ctl-2: rgba(28, 26, 23, .14);
  --light: linear-gradient(transparent, transparent); --vignette: radial-gradient(140% 110% at 50% 45%, transparent 60%, rgba(60, 45, 20, .12));
  --tex: url('../assets/textures/linen.webp'); --tex-size: 1024px; }
.stage[data-tone="linen"] .seg.dark .seg-ind { background: var(--ink); }
.stage[data-tone="linen"] .seg.dark .seg-btn.on { color: var(--paper); }
.stage[data-tone="linen"] .stage-bar .switch[aria-checked="true"] .switch-track { background: var(--ink); }
.stage[data-tone="linen"] .stage-bar .switch[aria-checked="true"] .switch-knob { background: #fff; }
.stage[data-tone="slate"] { --felt: #353B40; --felt-deep: #1E2226; --on-stage: #ECE8DF; --on-stage-2: #B4B0A8; --stage-ctl: rgba(255, 255, 255, .07); --stage-ctl-2: rgba(255, 255, 255, .13);
  --tex: url('../assets/textures/slate.webp'); --tex-size: 1024px; --tex-blend: overlay;
  --light: radial-gradient(120% 90% at 50% 30%, rgba(220, 235, 245, .08), transparent 60%); }
.stage-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap; position: relative; z-index: 2; }
.stage-ctx { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.stage-body { flex: 1; min-height: 0; overflow: auto; position: relative; container: stage / inline-size; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.stage[data-view="card"] .stage-body, .stage[data-view="fan"] .stage-body { overflow: hidden; }

/* deck grid */
.deck-view { --cw: 96px; padding: 6px 26px 40px; display: grid; gap: 22px; }
.deck-view[data-grid="s"] { gap: 16px; }
.deck-row { display: grid; gap: 10px; }
.deck-row-label { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 300 italic 25px/1 var(--display); color: var(--on-stage); }
.deck-row-label .sym { font: 400 21px/1 var(--ui); font-style: normal; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.stage[data-tone="felt"] .deck-row-label .sym, .stage[data-tone="slate"] .deck-row-label .sym { filter: brightness(1.15) saturate(.9); }
.deck-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.deck-view[data-grid="s"] .deck-cards { gap: 8px; }
.dcard { position: relative; display: grid; gap: 7px; justify-items: center; width: var(--cw); transition: transform .45s var(--spring); scroll-margin: 28px; }
/* card shadows and selection rings are drawn inside each card's SVG from its outline (render.js,
   ui option), so round, hex and cut-corner cards get true shadows. --ring colors the ring. */
.dc-face { display: block; width: 100%; aspect-ratio: var(--ratio); }
.dc-face svg { display: block; width: 100%; height: 100%; }
.dcard:hover { transform: translateY(-5px) rotate(-.6deg); }
.dcard:active { transform: translateY(-2px) scale(.98); }
.dcard.sel { transform: translateY(-8px); --ring: var(--accent); }
.dcard.scoped:not(.sel) { --ring: #F7B267; }
.dcard:focus-visible { outline: none; --ring: var(--accent); }
.dc-dot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--felt); transform: scale(0); transition: transform .35s var(--spring); }
.dcard.custom .dc-dot { transform: scale(1); }
.dc-label { display: none; font: 500 12px/1 var(--ui); color: var(--on-stage-2); }
.deck-view.labels .dc-label { display: block; }

/* single card */
.card-view { height: 100%; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(0, .35fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 18px; padding: 0 26px 18px; }
.cv-info { grid-row: 1; align-self: center; display: grid; gap: 14px; max-width: 460px; padding-bottom: 40px; }
.cv-title { margin: 0; font: 300 italic clamp(40px, 6.4cqw, 88px)/.95 var(--display); letter-spacing: -.02em; color: var(--on-stage); text-wrap: balance; }
.cv-status { margin: 0; font: 400 14px/1.4 var(--mono); color: var(--on-stage-2); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-center { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 12px; }
.cv-nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--on-stage); background: var(--stage-ctl); transition: background .15s, transform .3s var(--spring); }
.cv-nav:hover { background: var(--stage-ctl-2); transform: scale(1.06); }
.cv-stage { position: relative; perspective: 1400px; padding: 30px 10px; display: grid; place-items: center; }
.cv-card { position: relative; height: min(62vh, 560px, calc((100cqw - 150px) * var(--hw, 1.4))); aspect-ratio: var(--ratio); transform-style: preserve-3d; cursor: grab; touch-action: none; border-radius: 3.2%; }
.cv-card.grab { cursor: grabbing; }
.cv-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; border-radius: 6px; }
.cv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; }
.cv-face.back { transform: rotateY(180deg); }
.cv-art, .cv-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The sheen of coated stock under a lamp: one broad diagonal band of light that slides across the card as
   it tilts. Its stops follow a bell curve and peak at 15 percent white, so it has no edge to notice.
   (No blend modes here: one on a child would flatten the 3D card.) */
.cv-glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--go, 0); --p: var(--gp, 50%);
  background: linear-gradient(var(--ga, 114deg),
    rgba(255, 255, 255, 0) calc(var(--p) - 44%), rgba(255, 255, 255, .012) calc(var(--p) - 34%), rgba(255, 255, 255, .034) calc(var(--p) - 26%),
    rgba(255, 255, 255, .07) calc(var(--p) - 18%), rgba(255, 255, 255, .112) calc(var(--p) - 10%), rgba(255, 255, 255, .142) calc(var(--p) - 4%),
    rgba(255, 255, 255, .15) var(--p),
    rgba(255, 255, 255, .142) calc(var(--p) + 4%), rgba(255, 255, 255, .112) calc(var(--p) + 10%), rgba(255, 255, 255, .07) calc(var(--p) + 18%),
    rgba(255, 255, 255, .034) calc(var(--p) + 26%), rgba(255, 255, 255, .012) calc(var(--p) + 34%), rgba(255, 255, 255, 0) calc(var(--p) + 44%)); }
.cv-shadow { position: absolute; left: 12%; right: 12%; bottom: 14px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(18px); transform-origin: 50% 50%; }
.stage[data-tone="linen"] .cv-shadow { background: rgba(60, 45, 20, .35); }
.cv-strip { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; overflow-x: auto; padding: 10px 4px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.st-card { flex: none; width: 40px; border-radius: 3px; transition: transform .35s var(--spring); }
.st-card:hover { transform: translateY(-4px); }
.st-card.on { transform: translateY(-6px); --ring: var(--accent); }
.st-face { display: block; aspect-ratio: var(--ratio); }
.st-face svg { display: block; width: 100%; height: 100%; }

/* fan */
.fan-view { position: relative; height: 100%; min-height: 420px; overflow: hidden; --fw: 160px; --fr: 520px; }
.hand { position: absolute; width: 0; height: 0; }
.fcard { position: absolute; left: 0; top: calc(var(--fr) * -1); width: var(--fw); aspect-ratio: var(--ratio); transform-origin: 50% var(--fr); }
.fc-face, .pile-face { display: block; width: 100%; height: 100%; }
.fc-face svg, .pile-face svg { display: block; width: 100%; height: 100%; }
.fcard.sel { --ring: var(--accent); }
.fcard:focus-visible { outline: none; --ring: var(--accent); }
.pile { position: absolute; width: var(--fw); aspect-ratio: var(--ratio); transition: transform .4s var(--spring); }
.pile-face { position: absolute; inset: 0; }
.pile-face:nth-child(1) { transform: translate(6px, 7px) rotate(3deg); }
.pile-face:nth-child(2) { transform: translate(4px, 4.5px) rotate(1.6deg); }
.pile-face:nth-child(3) { transform: translate(2px, 2px) rotate(.5deg); }
.pile:hover { transform: translateY(-4px) rotate(-1deg); }
.pile:active { transform: translateY(0) scale(.98); }

/* print */
.print-view { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 10px 26px 30px; }
.sheet { width: min(100%, 64vh * .77, 760px); background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 20px 44px rgba(0, 0, 0, .34); }
.sheet svg { display: block; width: 100%; height: 100%; }
.sheet-label { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--on-stage-2); text-align: center; }
.pager { display: flex; align-items: center; gap: 2px; padding: 1px; border-radius: var(--r); background: var(--stage-ctl); }
.page-no { font: 500 12.5px/1 var(--mono); min-width: 52px; text-align: center; }
.boot-error { margin: 40px; font: 400 15px/1.5 var(--mono); }

/* view transitions: cards travel between layouts */
::view-transition-group(*) { animation-duration: .52s; animation-timing-function: cubic-bezier(.3, 1.15, .4, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------------------------------------------------------------- narrow screens */
/* medium screens: a narrower panel */
@media (max-width: 1240px) {
  .app { --rw: 66px; --pw: 324px; }
}
/* a narrow table (small window, or both panels open) stacks the card view: title above the card */
@container stage (max-width: 1000px) {
  .card-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .cv-info { grid-row: 1; padding: 6px 0 0; max-width: none; }
  .cv-title { font-size: clamp(34px, 7cqw, 56px); }
  .cv-center { grid-row: 2; grid-column: 1; justify-content: center; min-width: 0; }
  .cv-strip { grid-row: 3; }
  .cv-card { height: min(52vh, 480px, calc((100cqw - 150px) * var(--hw, 1.4))); }
}
/* small screens: the table stays on top while the rail (now a strip) and the open section scroll under it */
@media (max-width: 860px) {
  .app, .app.folded { --sh: max(50dvh, 340px); height: auto; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--sh) auto auto; transition: none; }
  .stage { grid-column: 1; grid-row: 2; position: sticky; top: 0; z-index: 4; height: var(--sh); }
  .rail { grid-column: 1; grid-row: 3; position: sticky; top: var(--sh); z-index: 4; flex-direction: row; border-top: 0; }
  .rail-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; }
  .rail-btn { width: 58px; }
  .rail-btn.on::before { left: 14px; right: 14px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 2px 2px 0 0; }
  .rail-btn[data-group="0"] + .rail-btn[data-group="1"], .rail-btn[data-group="1"] + .rail-btn[data-group="2"] { margin-top: 0; margin-left: 13px; }
  .rail-btn[data-group="0"] + .rail-btn[data-group="1"]::after, .rail-btn[data-group="1"] + .rail-btn[data-group="2"]::after { left: -8px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .rail-fold, .sec-head .icon-btn { display: none; }
  .panel, .app.folded .panel { grid-column: 1; grid-row: 4; border-right: 0; overflow: visible; visibility: visible; }
  .panel > * { width: auto; }
  .panel-scroll { overflow: visible; }
  .panel-foot { position: sticky; bottom: 0; z-index: 2; }
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  .name-wrap { margin-left: 0; padding-left: 12px; }
  .wordmark { font-size: 21px; }
  .app.preview { grid-template-rows: auto auto; }
  .app.preview .stage { grid-row: 2; position: relative; height: auto; min-height: calc(100dvh - 58px); }
  .deck-view { padding: 4px 14px 30px; }
  .card-view, .print-view { padding: 0 14px 16px; }
  .cv-nav { width: 38px; height: 38px; }
  .cv-card, .app:not(.preview) .cv-card { height: min(50vh, 420px, calc((100cqw - 130px) * var(--hw, 1.4)), calc(var(--sh) - 210px)); }
  .app.preview .cv-card { height: min(50vh, 420px, calc((100cqw - 130px) * var(--hw, 1.4))); }
  .card-view { grid-template-columns: minmax(0, 1fr); }
  .cv-center { min-width: 0; }
  .export-opts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .name-wrap { order: 3; width: 100%; border-left: 0; padding-left: 0; }
  .deck-name { width: 100%; }
  .tb-group + .tb-group { margin-left: 0; }
  .btn.dark span:not(.ico) { display: none; }
  .stage-bar { padding: 10px 12px; }
  .stage-ctx { margin-left: 0; }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .export, .pad { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- round 2 additions */
/* toasts with an action */
.toast.has-action { pointer-events: auto; padding-right: 8px; }
.toast-act { margin-left: 6px; height: 30px; padding: 0 12px; border-radius: 6px; background: rgba(244, 240, 231, .12); color: var(--paper); font-weight: 600; font-size: 13px; }
.toast-act:hover { background: var(--accent); color: var(--ink); }

/* looks: actions, your looks */
.looks-actions { display: flex; gap: 8px; }
.looks-actions .btn { flex: 1; justify-content: center; }
.tile-wrap { position: relative; display: grid; min-width: 0; }
.tile-wrap .slot-x { opacity: 0; transition: opacity .15s; z-index: 1; }
.tile-wrap:hover .slot-x, .tile-wrap:focus-within .slot-x { opacity: 1; }
.save-look { display: grid; gap: 12px; padding: 14px; }
.save-look .field-label { display: grid; gap: 7px; }
.look-name { height: 38px; padding: 0 12px; border: 0; border-radius: var(--r); background: var(--paper-2); font: 500 15px/1 var(--ui); outline: none; }
.look-name:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.save-row { display: flex; justify-content: flex-end; gap: 6px; }

/* drag and drop */
.dcard.drop-over { transform: translateY(-8px) scale(1.04); --ring: var(--accent); }
.cv-stage.drop-over .cv-card { outline: 3px dashed var(--accent); outline-offset: 10px; border-radius: 6px; }
.slot.drop-over { box-shadow: inset 0 0 0 2px var(--accent); background: #FBE3C8; }

/* export: print now leads */
.out.print-now { background: var(--ink); color: var(--paper); }
.out.print-now .out-sub { color: rgba(244, 240, 231, .72); }
.out.print-now .out-ic { background: var(--accent); color: var(--ink); }
.out.print-now:hover { background: #2B2823; }

/* shortcuts sheet */
.modal-keys { width: min(100%, 640px); }
.keys { padding: 22px 24px 26px; display: grid; gap: 18px; }
.keys h2 { margin: 0; font: 300 34px/1 var(--display); letter-spacing: -.01em; }
.keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.keys-title { margin: 0 0 8px; font: 600 13px/1.2 var(--ui); color: var(--ink); }
.keys dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.keys dt { display: flex; gap: 4px; }
.keys dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 -1px 0 var(--rule-2); font: 500 12.5px/1 var(--mono); color: var(--ink); }
.menu-row kbd { min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; }
@media (max-width: 520px) { .keys-grid { grid-template-columns: 1fr; } }

/* printing straight from the browser */
#print-root { display: none; }
@media print {
  html, body { height: auto; background: #fff; overflow: visible; }
  body > *:not(#print-root):not(#defs-root) { display: none !important; }
  #print-root { display: block; }
  .print-page { break-after: page; overflow: hidden; }
  .print-page svg { display: block; width: 100%; height: 100%; }
}

/* ---------------------------------------------------------------- edit and preview
   Edit: rail and panel, and the table shows only cards (no titles, row names or card names).
   Preview: they step aside and the table becomes a presentation, with names and titles. */
.app:not(.preview) .cv-info,
.app:not(.preview) .deck-row-label,
.app:not(.preview) .dc-label,
.app:not(.preview) .names-toggle { display: none; }
.app:not(.preview) .deck-view { gap: 26px; padding-top: 12px; }
.app:not(.preview) .card-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.app:not(.preview) .cv-center { grid-row: 1; grid-column: 1; justify-content: center; min-width: 0; }
.app:not(.preview) .cv-strip { grid-row: 2; }
.app:not(.preview) .cv-card { height: min(60vh, 600px, calc((100cqw - 150px) * var(--hw, 1.4))); }

/* the mode switch in the top bar */
.seg.mode { background: rgba(244, 240, 231, .1); }
.seg.mode .seg-ind { background: var(--paper); }
.seg.mode .seg-btn { color: rgba(244, 240, 231, .82); height: 32px; padding: 0 12px; }
.seg.mode .seg-btn:hover:not(.on) { background: rgba(244, 240, 231, .08); color: var(--paper); }
.seg.mode .seg-btn.on { color: var(--ink); }
@media (max-width: 520px) { .seg.mode .seg-btn span:not(.ico) { display: none; } }

/* ---------------------------------------------------------------- the export window
   Left: the sheet the printer receives, with paging and print settings. Right: every output. */
.modal-export { width: min(100%, 1180px); }
.export-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.export-preview { display: grid; gap: 12px; min-width: 0; }
.sheet-wrap { display: flex; justify-content: center; align-items: center; height: min(58dvh, 600px); padding: 14px; border-radius: 10px; background: var(--paper-3); }
.export .sheet { height: 100%; width: auto; max-width: 100%; }
.sheet-bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.export .sheet-label { margin: 0; text-align: left; color: var(--ink-2); font-size: 12.5px; }
.pager.light { background: var(--paper-2); color: var(--ink); flex: none; }
.export .export-opts { grid-template-columns: auto 1fr; align-items: end; }
.export-outs { display: grid; gap: 16px; min-width: 0; }
.export-outs > .opt { padding: 14px 16px; border-radius: 10px; background: var(--paper-2); }
.export-outs > .opt .seg { background: var(--paper); }
@media (max-width: 900px) {
  .export-body { grid-template-columns: minmax(0, 1fr); }
  .sheet-wrap { height: min(52dvh, 520px); }
}

/* ---------------------------------------------------------------- card motion */
.dc-face { transition: transform .35s var(--ease); }
/* the bendable card: raster slices on a curve, shown only while the card flexes */
.cv-bend { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.cv-bend[hidden] { display: none; }
.bs { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.bs-f, .bs-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-repeat: no-repeat; }
.bs-b { transform: rotateY(180deg); }
.cv-card.bending > .cv-face { visibility: hidden; }

/* ---------------------------------------------------------------- cutouts and effects */
.cuts { display: grid; gap: 10px; }
.cut { display: grid; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--paper-2); }
.cut-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.cut-head .slot-x { position: static; }
.cut-shapes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.cut-shape { display: grid; place-items: center; height: 34px; border-radius: 6px; background: var(--paper); color: var(--ink); transition: background .15s, color .15s; }
.cut-shape:hover { background: #fff8ec; }
.cut-shape.on { background: var(--ink); color: var(--paper); }
.cut .seg { background: var(--paper); }
.cut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fx-list { display: grid; gap: 8px; }
.fx-row { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); }
.fx-row.on { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fx-head { display: flex; align-items: center; gap: 10px; }
.fx-head .switch { font-weight: 600; min-width: 108px; }
.fx-note { flex: 1; font-size: 12.5px; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* effects that skip text draw a card's art twice: once filtered without its text, once as text only */
.fxn text { visibility: hidden; }
.fxt * { visibility: hidden; }
.fxt text, .fxt text * { visibility: visible; }

/* ---------------------------------------------------------------- pointing at a card
   Every face carries an overlay of its parts (ui/parts.js). A part lights when the pointer is over
   it (.on), or when its section's symbol in the rail is hovered (the stage's data-hl). */
.dc-face { position: relative; }
.dc-art { display: block; width: 100%; height: 100%; }
.dc-parts, .cv-parts { position: absolute; inset: 0; pointer-events: none; }
.parts { display: block; width: 100%; height: 100%; overflow: visible; }
.parts g { opacity: 0; fill: rgba(242, 138, 30, .2); stroke: var(--accent); stroke-width: 2; transition: opacity .14s; }
.parts g > * { vector-effect: non-scaling-stroke; }
.parts g[data-part="border"] { fill: rgba(242, 138, 30, .5); stroke: none; }
.parts g[data-part="back"] { fill: rgba(242, 138, 30, .14); stroke-width: 3; }
.parts g.on { opacity: 1; }
.stage[data-hl="index"] .parts g[data-sec="index"], .stage[data-hl="border"] .parts g[data-sec="border"],
.stage[data-hl="pips"] .parts g[data-sec="pips"], .stage[data-hl="aces"] .parts g[data-sec="aces"],
.stage[data-hl="courts"] .parts g[data-sec="courts"], .stage[data-hl="jokers"] .parts g[data-sec="jokers"],
.stage[data-hl="back"] .parts g[data-sec="back"],
.stage[data-hl="suits"] .parts g[data-sec="index"], .stage[data-hl="suits"] .parts g[data-sec="pips"], .stage[data-hl="suits"] .parts g[data-sec="aces"] { opacity: 1; }
.app.preview .parts { display: none; }
/* a choice in "Applies to" being weighed: its cards ring a little softer than a made choice */
.deck-view.previewing .dcard.scoped:not(.sel) { --ring: #F7B267; }

/* what is selected, in the stage bar */
.sel-chip { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 2px 0 7px; border-radius: var(--r); background: var(--stage-ctl); color: var(--on-stage); }
.chip-face { display: block; width: 16px; aspect-ratio: var(--ratio); }
.chip-face svg { display: block; width: 100%; height: 100%; }
.chip-name { padding: 0 3px 0 7px; font: 600 13.5px/1 var(--ui); }
.sel-chip .icon-btn.felt { width: 28px; height: 28px; }
.app.preview .sel-chip { display: none; }

/* the one-time hint */
.coach { position: absolute; left: 50%; top: 64px; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--pop-shadow); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -10px) scale(.97); transition: opacity .25s, transform .45s var(--spring); }
.coach.on { opacity: 1; transform: translate(-50%, 0); }
.coach .ico { color: var(--accent-2); }

/* the card view's Flip button sits right under the card */
.cv-col { display: grid; justify-items: center; min-width: 0; }
.cv-col .cv-stage { padding-bottom: 20px; }
.cv-flip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: var(--r); background: var(--stage-ctl); color: var(--on-stage); font-size: 13px; font-weight: 500; transition: background .15s, transform .3s var(--spring); }
.cv-flip:hover { background: var(--stage-ctl-2); transform: translateY(-1px); }

/* ---------------------------------------------------------------- placing an uploaded image */
.modal-crop { width: min(100%, 720px); }
.crop { padding: 22px 24px 22px; display: grid; gap: 16px; }
.crop h2 { margin: 0; font: 300 34px/1 var(--display); letter-spacing: -.01em; }
.crop-stage { display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#E6E0D3 0 25%, #F4F0E7 0 50%) 0 0 / 18px 18px; }
.crop-canvas { display: block; max-width: 100%; touch-action: none; cursor: grab; outline: none; }
.crop-canvas.grab { cursor: grabbing; }
.crop-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.crop-tools { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 22px; align-items: end; }
.crop-btns { display: flex; gap: 6px; }
@media (max-width: 640px) { .crop-tools { grid-template-columns: 1fr; } .crop { padding: 18px 16px; } }

/* ---------------------------------------------------------------- the printing guide (Export window) */
.export-head .seg { margin: 0 auto 0 22px; }
.pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: start; }
.pg-col { display: grid; gap: 10px; min-width: 0; }
.pg h3 { margin: 10px 0 0; font: 300 23px/1.1 var(--display); letter-spacing: -.005em; }
.pg h3:first-child { margin-top: 0; }
.pg-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; padding: 14px 16px; border-radius: 10px; background: var(--paper-2); font-size: 13.5px; }
.pg-facts dt { font-weight: 600; }
.pg-facts dd { margin: 0; color: var(--ink-2); }
.pg-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pg-rules li { display: grid; gap: 2px; font-size: 13px; line-height: 1.4; }
.pg-rules span { color: var(--ink-2); }
.pg-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.pg-list { display: grid; gap: 8px; }
.pg-maker { display: grid; gap: 5px; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); color: inherit; text-decoration: none; transition: background .15s, transform .3s var(--spring); }
.pg-maker:hover { background: var(--paper-3); transform: translateX(3px); }
.pg-maker.best { background: var(--ink); color: var(--paper); }
.pg-maker.best:hover { background: #2B2823; }
.pg-maker.off { opacity: .62; }
.pg-head { display: flex; align-items: baseline; gap: 9px; }
.pg-head b { font-size: 15px; }
.pg-where { font-size: 12.5px; opacity: .7; }
.pg-tag { margin-left: auto; padding: 3px 8px; border-radius: 5px; background: rgba(28, 26, 23, .08); font: 600 11.5px/1 var(--ui); white-space: nowrap; }
.pg-maker.best .pg-tag { background: var(--accent); color: var(--ink); }
.pg-head .ico { align-self: center; opacity: .7; }
.pg-price { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; font-weight: 600; }
.pg-price .ico { margin-top: 2px; opacity: .75; flex: none; }
.pg-list + .pg-note, .pg .chip + .pg-list { margin-top: 8px; }
.pg-min { font-size: 13px; font-weight: 500; }
.pg-about { font-size: 12.5px; line-height: 1.45; opacity: .78; }
@media (max-width: 900px) { .pg { grid-template-columns: minmax(0, 1fr); } .export-head .seg { margin-left: 10px; } }