/* Harper / the card room. Playbook references documented in PLAYBOOK-SOURCES.md. */
:root { --accent-rgb:111 134 255; --accent:#6f86ff; }
[hidden] { display:none !important; }
.sky .world { opacity:.34; transition:opacity .8s; }
.sky::after { content:""; position:absolute; inset:0; background:url('./assets/grain-gradient.webp') center/cover; mix-blend-mode:soft-light; opacity:.17; }
#texture { position:absolute; inset:0; width:100%; height:100%; opacity:.22; image-rendering:pixelated; mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 50% 70%,#000,transparent 75%); }
.sky .pool { background:radial-gradient(ellipse at 50% 60%,rgb(var(--accent-rgb) / .11),transparent 67%); }
.sky .softbox { opacity:.3; }
.grain { opacity:.065; }
html.has-prints .talk { font-size:clamp(18px,2.4vw,28px); font-weight:450; letter-spacing:-.035em; }
html.running .talks { opacity:0; }
.deck-nav { position:absolute; z-index:31; bottom:calc(var(--table-bottom) + 26px); left:50%; transform:translateX(-50%); width:max-content; max-width:94vw; display:grid; justify-items:center; gap:9px; }
.deck-browse,.deck-tools { display:flex; align-items:center; gap:8px; }
.deck-browse { position:absolute; bottom:82px; }
.deck-nav button { border:1px solid #ffffff16; background:#131620dd; color:#dce0ed; border-radius:999px; min-height:34px; padding:6px 13px; font:500 12px/1.2 var(--font); cursor:pointer; backdrop-filter:blur(14px); transition:background .2s,transform .2s; }
.deck-nav button:hover { background:#252b40;transform:translateY(-2px); }
.deck-nav button:focus-visible,.deck-thumb:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.deck-nav button:disabled { opacity:.4;cursor:default;transform:none; }
#deckDownload { background:rgb(var(--accent-rgb) / .18); border-color:rgb(var(--accent-rgb) / .3); }
#deckClear { color:#b7a6ad; }
#deckPosition { min-width:50px;text-align:center;font:500 12px var(--mono);color:#9da5bb;font-variant-numeric:tabular-nums; }
#deckHint { margin:0;font:400 11px var(--font);letter-spacing:.025em;color:#8f98ae; }
.deck-rail { position:absolute;z-index:31;left:50%;bottom:calc(var(--table-bottom) + 83px);transform:translateX(-50%);display:flex;gap:6px;max-width:72vw;overflow-x:auto;padding:5px 8px;scrollbar-width:none; }
.deck-thumb { flex:none;position:relative;appearance:none;border:1px solid #ffffff26;border-radius:8px;padding:2px;background:#11131c;cursor:pointer;opacity:.55;transition:opacity .2s,transform .25s; }
.deck-thumb img { width:25px;height:29px;object-fit:cover;border-radius:5px;display:block; }
.deck-thumb[aria-pressed=true] { opacity:1;border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 12px rgb(var(--accent-rgb) / .2); }
.deck-thumb i.complete { position:absolute;right:0;bottom:0;width:6px;height:6px;background:#a6e7bc;border-radius:50%;border:1px solid #10141c; }
.deck-browse { display:none; }
.deck-nav .deck-browse { display:flex;position:static; }
.deck-rail { bottom:calc(var(--table-bottom) + 111px); }
/* Print nodes stay intact, so model-specific reveals still animate the actual image. */
.table .print { cursor:grab;outline:none; }
.table .print:focus-visible .sheet { outline:2px solid var(--accent);outline-offset:6px; }
.table .print .sheet,.table .print.free .sheet { background:#181c27;border-radius:18px;box-shadow:0 1px 0 #ffffff24 inset,0 0 0 1px #ffffff12,0 28px 70px #0008;padding:4px; }
.table .print .img-wrap { border-radius:14px; }
.table .print .faceA,.table .print .faceB { object-fit:contain; }
.table .print.free .img-wrap { background-color:#191d29;background-image:linear-gradient(45deg,#242938 25%,transparent 25%),linear-gradient(-45deg,#242938 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#242938 75%),linear-gradient(-45deg,transparent 75%,#242938 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0; }
.table .print.free .faceA { filter:none; }
.table .print .margin,.table .print.free .margin { position:absolute;left:auto;right:12px;bottom:12px;top:auto;height:auto;transform:none;opacity:1;gap:0;z-index:20; }
.table .print .acts { opacity:1;gap:2px;padding:3px;border:1px solid #ffffff20;border-radius:12px;background:#10141dbb;backdrop-filter:blur(16px);box-shadow:0 3px 18px #0003; }
.table .print .pa { display:grid;width:32px;height:32px;border-radius:9px;color:#e0e5f2; }
.table .print .pa:hover { color:white;background:#ffffff15; }
.table .print .pa[disabled] { display:none; }
.table .print .pa-save { color:#b7c3ff; }
.table .print .pa-undo,.table .print .pa-retry { display:none; }
.table .print.deck-open.has-steps .pa-undo,.table .print.deck-open.has-steps .pa-retry { display:grid; }
.table .print.deck-back .acts { visibility:hidden; }
.table .print.deck-back .print-lift { transform:none !important; }
.table .print.deck-back .img-wrap::after { content:"";position:absolute;inset:0;background:#070b2133;pointer-events:none; }
.table .print.deck-dragging { cursor:grabbing; }
.table .print.deck-working .pa { pointer-events:none;opacity:.3; }
.table .print.deck-working .sheet { outline:1px solid rgb(var(--accent-rgb) / .5); }
.compare-original { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:10;display:none;clip-path:inset(0 calc(100% - var(--compare,50%)) 0 0);pointer-events:none;background:#0d0f16; }
.compare-control { display:none;position:absolute;inset:0;z-index:11; }
.comparing .compare-original,.comparing .compare-control { display:block; }
.comparing .fx,.comparing .faceB { visibility:hidden; }
.compare-before,.compare-after { position:absolute;top:12px;font:500 10px/1 var(--font);padding:6px 9px;background:#10131dcc;color:white;border:1px solid #ffffff30;border-radius:999px;pointer-events:none; }
.compare-before { left:10px; }.compare-after { right:10px; }
.compare-line { position:absolute;left:var(--compare,50%);top:0;bottom:0;width:1px;background:#fffd;box-shadow:0 0 10px #0008;pointer-events:none; }
.compare-line b { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:36px;border:1px solid #ffffff88;background:#151925bb;backdrop-filter:blur(10px);border-radius:20px;display:grid;place-items:center;color:white;font:16px var(--font); }
.compare-range { appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:none; }
.compare-control:focus-within { outline:2px solid var(--accent);outline-offset:-3px; }
html.deck-expanded .talks { opacity:0; }
html.deck-expanded .deck-rail { bottom:109px; }
html.deck-expanded .deck-nav { bottom:12px; }
html.deck-expanded .wheel,html.deck-expanded .dock,html.deck-expanded .how { opacity:0;pointer-events:none; }
html.deck-expanded .sky .world { opacity:.12; }
/* The wheel: seven small, related game identities; each owns its material. */
.wheel .tool-title { overflow:visible;padding:8px 12px 18px;font-size:clamp(36px,4vw,60px);-webkit-text-stroke:0;letter-spacing:-.045em; }
.wheel .tool-title::before,.wheel .tool-title::after { display:none; }
.tool-logo { display:block;position:relative; }
.tool-caption { display:block;margin-top:10px;font:600 9px/1 var(--mono);letter-spacing:.24em;color:#a4abc0;text-align:center;-webkit-text-stroke:0;text-shadow:none; }
.wheel .tool-title[data-tool=cutout] .tool-logo { font-weight:900;font-style:italic;text-transform:uppercase;color:#edf0ff;text-shadow:2px 3px 0 #5363ae,4px 6px 0 #28315a;letter-spacing:-.07em; }
.wheel .tool-title[data-tool=cutout] .tool-logo::after { content:'';position:absolute;inset:49% -4% auto;height:2px;background:#a5b9ff;box-shadow:0 0 12px #7b99ff;transform:rotate(-5deg); }
.wheel .tool-title[data-tool=portrait] .tool-logo { font:italic 600 1.06em/.98 Georgia,serif;letter-spacing:-.075em;color:#e6cbff;text-shadow:0 2px 1px #645079,0 0 20px #a685ce55; }
.wheel .tool-title[data-tool=backdrop] .tool-logo { font-weight:850;letter-spacing:-.075em;color:#ffd6df;text-shadow:0 3px #b96388,0 6px #603c62; }
.wheel .tool-title[data-tool=sticker] .tool-logo { font-family:var(--font-rounded);font-weight:900;letter-spacing:-.06em;color:#f8ca6d;-webkit-text-stroke:1px #fff5d2;filter:drop-shadow(3px 4px 0 #8e6331);transform:rotate(-4deg); }
.wheel .tool-title[data-tool=relight] .tool-logo { color:transparent;font-weight:750;letter-spacing:-.065em;background:linear-gradient(110deg,#947147 5%,#ffd292 25%,#fff9e6 42%,#bf8a48 54%,#ffdf9c 75%);background-size:230% 100%;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 9px #f7ba5633); }
.wheel .tool-title[data-tool=relight][aria-selected=true] .tool-logo { animation:relight-title 5s ease-in-out infinite; }
.wheel .tool-title[data-tool=relight] .tool-logo::after { content:'✦';position:absolute;right:-.22em;top:-.2em;font:normal .34em var(--font);color:#fff0cb;filter:drop-shadow(0 0 6px #ffd899); }
.wheel .tool-title[data-tool=upscale] .tool-logo { font-weight:900;font-stretch:condensed;color:#dce2ff;text-transform:uppercase;letter-spacing:-.08em;text-shadow:2px 2px 0 #7e88ba,4px 4px 0 #45496a,6px 6px 0 #23283f; }
.wheel .tool-title[data-tool=erase] .tool-logo { font-weight:850;font-style:italic;color:#e9d2ed;text-shadow:0 3px #816080;mask-image:linear-gradient(100deg,#000 65%,#0007 95%,transparent); }
.wheel .tool-title[data-tool=depth] .tool-logo,.wheel .tool-title[data-tool=parallax] .tool-logo { color:#bbf4f4;text-shadow:0 3px #5a8f9c,0 6px #264e66; }
@keyframes relight-title { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
/* Download / load / run are deliberately different states, driven by real events. */
.model-status { position:absolute;z-index:32;top:74px;left:50%;transform:translateX(-50%);width:min(400px,90vw);display:flex;align-items:center;gap:12px;padding:12px 16px 17px;border:1px solid #ffffff18;border-radius:18px;background:#121621e8;box-shadow:0 15px 60px #0004;backdrop-filter:blur(18px); }
.model-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }
.model-copy { flex:1; }
.model-stop { flex:none;border:1px solid currentColor;border-radius:999px;padding:6px 10px;background:transparent;color:inherit;font:600 11px var(--font);cursor:pointer; }
.model-stop:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.model-copy b { font:550 13px var(--font);color:#e2e6f3; }
.model-copy>span { font:400 11px var(--font);color:#a2abc2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.model-glyph { width:30px;height:32px;position:relative;flex:none; }
.model-glyph i { position:absolute;left:4px;top:3px;width:22px;height:15px;border:1px solid var(--accent);background:rgb(var(--accent-rgb) / .12);border-radius:4px;transform:rotate(-12deg);animation:model-cards 1.6s infinite; }
.model-glyph i:nth-child(2) { top:8px;animation-delay:.15s; }.model-glyph i:nth-child(3) { top:13px;animation-delay:.3s; }.model-glyph i:nth-child(4) { top:18px;animation-delay:.45s; }
.model-status[data-phase=download] .model-glyph i { animation-name:model-download; }
.model-progress { position:absolute;height:2px;bottom:0;left:16px;right:16px;overflow:hidden;border-radius:2px;background:#ffffff12; }
.model-progress i { display:block;height:100%;background:var(--accent);transform:scaleX(var(--progress,.2));transform-origin:left;transition:transform .18s linear; }
.model-progress.indeterminate i { width:30%;transform:none;animation:model-progress 1.5s ease-in-out infinite; }
@keyframes model-progress { from{translate:-120% 0}to{translate:430% 0} }
@keyframes model-cards { 50%{transform:translateY(-3px) rotate(12deg);opacity:.5} }
@keyframes model-download { 0%{transform:translateY(-8px) rotate(-12deg);opacity:0}40%,80%{opacity:1}100%{transform:translateY(5px) rotate(-12deg);opacity:0} }
.card-busy { display:none;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:15;align-items:center;gap:4px;padding:8px 12px;background:#111620dc;border:1px solid #ffffff22;border-radius:999px;color:#dce5ff;pointer-events:none; }
.deck-working .card-busy { display:flex; }
.card-busy i { width:3px;height:11px;background:var(--accent);border-radius:2px;animation:working 1s infinite; }.card-busy i:nth-child(2){animation-delay:.15s}.card-busy i:nth-child(3){animation-delay:.3s}
.card-busy span { font:500 10px var(--font);margin-left:5px; }
@keyframes working {50%{transform:scaleY(.35);opacity:.4}}
html.running[data-running-tool=sticker] .card-busy i { border-radius:50%;width:6px;height:6px; }
html.running[data-running-tool=relight] .card-busy { box-shadow:0 0 22px #ffc27a44; }
html.running[data-running-tool=erase] .card-busy i { animation-name:model-download; }
.notch-act:disabled { opacity:.4;cursor:default; }
@media(max-width:719px) {
  html.has-prints .talk { font-size:19px; }
  .deck-nav { gap:7px; }
  .deck-nav button { min-height:32px;font-size:11px;padding:6px 10px; }
  .deck-rail { max-width:86vw; }
  .deck-thumb img { width:21px;height:25px; }
  .table .print.deck-open .pa-retry { display:none; }
  .wheel .tool-title { font-size:38px; }
  .tool-caption { font-size:8px;letter-spacing:.17em; }
  .model-status { top:62px; }
  .notch #saveAll { display:none; }
}
@media(max-height:650px) {
  html.has-prints .talks { display:none; }
  .deck-rail { display:none; }
  #deckHint { display:none; }
  .deck-nav { gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  .model-glyph i,.model-progress.indeterminate i,.card-busy i,.wheel .tool-title .tool-logo { animation:none !important; }
  .deck-nav button,.deck-thumb,.sky .world { transition:none; }
}

/* Keep the deck controls in one compact row, below the cards. */
.deck-nav { grid-template-columns:auto auto;gap:10px 16px; }
#deckHint { position:absolute;bottom:calc(100% + 12px);white-space:nowrap; }
.deck-rail { left:auto;right:28px;top:40%;bottom:auto;transform:translateY(-50%);flex-direction:column;max-height:50vh;overflow-y:auto; }
@media(max-width:719px) {
 .deck-nav { gap:7px;grid-template-columns:1fr; }
 .deck-rail { right:8px;gap:4px;max-height:40vh; }
 .deck-thumb img { width:20px;height:24px; }
 .table .print .stamp { display:none; }
 html.deck-expanded .deck-rail { bottom:auto; }
}
@media(max-height:650px) { .deck-nav { grid-template-columns:auto auto; } }

.wheel { height:calc(var(--table-bottom) + 40px); }
html.has-prints .talk { top:76px !important; }
@media(max-width:719px){html.has-prints .talk{top:62px !important;}}

.wheel .tool-title[data-tool=blur] .tool-logo { font-weight:650;color:#e0ddff;letter-spacing:-.08em;text-shadow:2px 2px 0 #8a82b0,0 0 12px #c5c0f366; }

html.can-undo .notch { opacity:1;translate:0 0;pointer-events:auto; }
html.can-undo:not(.has-prints) .notch #saveAll,html.can-undo:not(.has-prints) .notch #clear { display:none; }

/* One action, one model: a quiet companion control opens a generous chooser. */
.dock { flex-direction:row;gap:12px; }
.dock .lmb { order:0; }
.model-trigger { order:1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:164px;height:52px;box-sizing:border-box;padding:8px 15px;border:1px solid #ffffff1c;border-radius:16px;background:#121621aa;backdrop-filter:blur(16px);color:#dde2ef;text-align:left;cursor:pointer;transition:border-color .2s,background .2s; }
.model-trigger>span:first-child { display:grid;gap:5px;min-width:0; }
.model-trigger small { font:500 9px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#8c96af; }
.model-trigger b { font:500 12px/1.15 var(--font);max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.model-chevron { color:#8c96af;font:16px var(--font); }
.model-trigger:hover { border-color:rgb(var(--accent-rgb) / .55);background:#202536cc; }
.model-trigger:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.model-dialog { box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid #ffffff24;border-radius:26px;color:#e9edf8;background:radial-gradient(ellipse at 0 0,rgb(var(--accent-rgb) / .12),transparent 65%),#131620;box-shadow:0 30px 120px #0009;overflow-y:auto; }
.model-dialog::backdrop { background:#060911b3;backdrop-filter:blur(12px); }
.model-dialog[open] { animation:chooser-in .26s cubic-bezier(.16,1,.3,1) both; }
.model-dialog-head { display:flex;align-items:center;justify-content:space-between; }
.model-eyebrow { font:500 10px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent); }
.model-dialog-head button { width:32px;height:32px;border:1px solid #ffffff13;border-radius:50%;background:#ffffff05;color:#aab3c8;font:22px var(--font);cursor:pointer; }
.model-dialog h2 { margin:17px 0 9px;font:500 26px/1.12 var(--font);letter-spacing:-.045em; }
.model-dialog #modelIntro { margin:0 0 24px;color:#929db5;font:400 13px/1.65 var(--font);max-width:300px; }
.model-options { display:grid;gap:10px; }
.model-option { display:flex;align-items:center;gap:14px;width:100%;padding:18px 15px;border:1px solid #ffffff13;border-radius:17px;background:#ffffff03;color:#e4e9f4;text-align:left;cursor:pointer;transition:background .18s,border-color .18s; }
.model-option:hover { background:#ffffff08;border-color:#ffffff32; }
.model-option[aria-pressed=true] { background:rgb(var(--accent-rgb) / .09);border-color:rgb(var(--accent-rgb) / .5); }
.model-option:focus-visible,.model-dialog-head button:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.model-emblem { display:grid;place-items:center;flex:none;width:38px;height:44px;color:var(--accent);font:32px/1 Georgia,serif;text-shadow:0 0 20px rgb(var(--accent-rgb) / .3); }
.model-option-copy { display:grid;gap:7px;flex:1;min-width:0; }
.model-option-copy b { font:550 14px/1.25 var(--font); }
.model-option-copy>span { font:400 12px/1.4 var(--font);color:#a3adc4; }
.model-storage { font:400 10px/1.4 var(--font);color:#727e98; }
.model-check { font:14px var(--font);color:#68728a; }
.model-option[aria-pressed=true] .model-check { color:var(--accent); }
.model-footnote { display:flex;align-items:center;gap:8px;margin:22px 0 0;color:#79869e;font:400 11px/1.5 var(--font); }
.device-readiness { margin:8px 0 0;color:#a3adc4;font:400 11px/1.45 var(--font); }
@keyframes chooser-in { from { opacity:0;transform:translateY(14px) scale(.97); } to { opacity:1;transform:none; } }
@media(max-width:719px) {
  .dock { gap:10px; }
  .dock .lmb { width:auto;flex:1;min-width:0; }
  .model-trigger { width:138px;flex:none; }
  .model-trigger b { max-width:95px;font-size:11px; }
  .dock .queue { position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 8px); }
  .model-dialog { padding:22px; }
  .model-option { padding:16px 12px;gap:10px; }
}
@media(prefers-reduced-motion:reduce) { .model-dialog[open] { animation:none; } .model-trigger,.model-option { transition:none; } }

@media(max-width:719px) {
  html.deck-expanded .deck-rail { left:50%;right:auto;top:auto;bottom:135px;transform:translateX(-50%);flex-direction:row;max-width:88vw; }
}