:root{
  --bg:#14150f; --surface:#1d1e18; --surface-2:#262820; --sunk:#111208;
  --ink:#efeee7; --muted:#a5a398; --faint:#7e7c72;
  --line:#31332a; --line-strong:#464940; --accent:#e0a83a;
  --s-want:#8b8980; --s-sim:#a984d0; --s-buy:#d9a53c; --s-build:#5fbe8a;
  --s-draft:#8b8980; --s-building:#d9a53c; --s-complete:#5fbe8a;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:Karla,system-ui,sans-serif;
  -webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}

/* ---------- app bar ---------- */
/* One slim bar. In the Room the tablet (bottom left) is the way to Decks and
   Cards, so the bar keeps only the name, settings and sync there; the tabs
   come back on the full Decks and Cards pages. */
body{--barh:48px}
body[data-view="room"]{--barh:40px}
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  height:calc(var(--barh) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  background:rgba(20,21,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{cursor:pointer}
body[data-view="room"] .appbar .tabs{display:none}
body[data-view="room"] .bartools{margin-left:auto}
body[data-view="room"] .brand small{display:none}
body[data-view="room"] .brand{font-size:15px}
body[data-view="room"] .cog{width:28px;height:28px}
@media (max-width:520px){.brand small{display:none}.appbar{gap:8px}.tabs button{padding:6px 10px;font-size:13px}}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:16px;line-height:1}
.brand small{display:block;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs button{border:1px solid transparent;background:transparent;color:var(--muted);
  padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:600}
.tabs button.on{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
.sync{display:flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.sync[data-kind="cloud"] i{background:var(--s-build)}
@media (max-width:430px){.sync span{display:none}}

main{padding:16px 14px 80px;max-width:1180px;margin:0 auto}

/* ---------- decks list ---------- */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:18px}
.sumtop{font-size:15px}.sumtop b{font-size:20px}
.sumtop span{float:right;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted)}
.meter{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--sunk);margin:10px 0 8px}
.mkey{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.mkey em{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.game h2{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;margin:22px 0 10px}
.game h2 small{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-left:10px}
.rows{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.deck{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--s-want);
  border-radius:7px;padding:12px 14px}
.deck[data-stage="sim"]{border-left-color:var(--s-sim)}
.deck[data-stage="buy"]{border-left-color:var(--s-buy)}
.deck[data-stage="build"]{border-left-color:var(--s-build)}
.dtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dname{background:none;border:0;padding:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:15.5px;cursor:pointer;text-align:left}
.dname:hover{color:var(--accent)}
.box{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:3px;
  background:var(--surface-2);border:1px solid var(--line-strong)}
.lbl{font-size:12px;color:var(--muted)}
.drow2{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}
.flag{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 6px}
.haveline{display:flex;align-items:center;gap:10px;margin:8px 0}
.havebar{flex:1;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.havebar i{display:block;height:100%;background:var(--accent)}
.havetxt{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.needpill{font-family:"JetBrains Mono",monospace;font-size:10px;padding:2px 8px;border-radius:999px;
  background:rgba(217,165,60,.15);color:var(--s-buy)}
.needpill.clear{background:rgba(95,190,138,.15);color:var(--s-build)}
.steps{display:flex;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden}
.steps button{flex:1;background:transparent;border:0;border-right:1px solid var(--line);padding:6px 2px;
  font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted);cursor:pointer}
.steps button:last-child{border-right:0}
.steps button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700}

/* ---------- deck sheet ---------- */
.sheet-dim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:30}
.sheet-dim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;top:50%;width:min(940px,94vw);max-height:90vh;overflow:auto;z-index:31;
  transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;transition:all .28s;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;padding:20px}
.sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.sheet .x{position:sticky;top:0;float:right;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.sheet h2{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;margin:0}
.sheet .line{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin:6px 0 0}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
/* Buttons are label-maker tape: cream embossed strips with notched ends,
   the main action in stamp red — the same stuff as the lid stickers. */
.mini{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;border:0;border-radius:2px;cursor:pointer;text-decoration:none;color:#2a2118;
  background:linear-gradient(180deg,#fbf5e6,#e9dfc6);display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.15;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.14);text-shadow:0 1px 0 rgba(255,255,255,.6);
  transition:transform .08s,filter .15s;-webkit-tap-highlight-color:transparent}
.mini:hover{filter:brightness(1.05)}
.mini:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.mini:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent),inset 0 -2px 0 rgba(0,0,0,.14)}
.mini svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mini.on{background:linear-gradient(180deg,#f6dc9c,#e2b85c)}
.prog{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent)}
.progtxt{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin:6px 0 14px}
.clist{list-style:none;margin:0;padding:0}
.clist li{display:grid;grid-template-columns:36px 44px 30px 1fr auto;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line)}
.clist li.done .nm{text-decoration:line-through;color:var(--faint)}
.thumb{width:36px;height:50px;border-radius:3px;object-fit:cover;background:var(--sunk);cursor:zoom-in}
.thumb.ph{display:block}
.clist .q{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.clist .r{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;border:1px solid currentColor;
  border-radius:3px;padding:1px 3px;text-align:center}
.r[data-r="C"]{color:#8c8a82}.r[data-r="U"]{color:#5fbe8a}.r[data-r="R"]{color:#6e9fef}
.r[data-r="SR"]{color:#a984d0}.r[data-r="L"],.r[data-r="LR"]{color:#d9a53c}.r[data-r="E"]{color:#e0776a}
.clist .nm s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint);margin-left:8px}
.clist .nm u{text-decoration:none;font-size:9px;color:#e0776a;border:1px solid currentColor;border-radius:3px;padding:0 3px;margin-left:6px}
.ticks{display:flex;gap:4px}
.ticks button{width:22px;height:22px;border-radius:4px;border:1.5px solid var(--line-strong);
  background:transparent;cursor:pointer}
.ticks button[aria-pressed="true"]{background:var(--s-build);border-color:var(--s-build)}
.bigcard{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.8);display:grid;place-items:center;cursor:zoom-out}
.bigcard img{max-width:min(90vw,560px);max-height:90vh;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.7)}

/* ---------- cards tab ---------- */
.cardbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.cardbar input[type=search]{flex:1 1 260px;padding:9px 12px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--surface)}
.cardbar select{padding:8px 10px;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface)}
.chips{display:flex;gap:4px}
.gamepick{flex:0 0 auto}
.gamepick button{padding:8px 12px;font-size:11px}
.inkchip{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);background:transparent;
  color:var(--muted);font-weight:700;cursor:pointer}
.inkchip.on{background:var(--ic);border-color:var(--ic);color:#0d0d0a}
.tog{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.count{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--faint);margin-left:auto}
.cardgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.card{position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  overflow:hidden;cursor:pointer;transition:transform .14s,border-color .14s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card img{display:block;width:100%;aspect-ratio:359/500;object-fit:cover;background:var(--sunk)}
.card figcaption{padding:7px 9px 9px}
.card figcaption b{display:block;font-size:12.5px;line-height:1.2}
.card figcaption span{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--faint);margin-top:3px}
.card .own,.card .used{position:absolute;top:7px;font-family:"JetBrains Mono",monospace;font-size:10px;
  font-weight:700;padding:2px 6px;border-radius:999px;font-style:normal}
.card .own{left:7px;background:var(--s-build);color:#08120c}
.card .used{right:7px;background:rgba(0,0,0,.72);color:#fff}
.gridnote{grid-column:1/-1;text-align:center;color:var(--faint);font-size:12.5px}
.cardsheet .cardbig{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:22px;align-items:start}
.cardsheet .cardbig img{width:100%;border-radius:12px}
.cardmeta h2{margin-bottom:8px}
.cardmeta .own{color:var(--s-build);font-weight:700}
.cardmeta .dim{color:var(--faint)}
.cardmeta h6{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--faint);
  margin:16px 0 6px;text-transform:uppercase}
.cardmeta ul{margin:0;padding-left:18px}
.cardmeta s{text-decoration:none;color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:11px}
@media (max-width:660px){.cardsheet .cardbig{grid-template-columns:1fr}}

/* ---------- room: see the v3 block at the end ---------- */

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;opacity:0;pointer-events:none;
  transition:opacity .25s;background:#1b1712;color:#f4ecda;border:1px solid var(--line-strong);
  font-family:"JetBrains Mono",monospace;font-size:11.5px;padding:9px 15px;border-radius:6px}
.toast.on{opacity:1}

/* ---------- account ---------- */
.sync{border:1px solid transparent;background:none;cursor:pointer;padding:5px 8px;border-radius:5px}
.sync:hover{border-color:var(--line-strong);color:var(--muted)}
.sync[data-kind="local"] i{background:var(--faint)}
.sheet.acct{width:min(460px,94vw)}
.acctnote{font-size:13.5px;line-height:1.55;color:var(--muted);margin:14px 0 0}
.acctnote code{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink)}
.acctform{display:flex;gap:6px;margin:16px 0 0}
.acctform input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;color:var(--ink);
  background:var(--sunk);border:1px solid var(--line-strong);border-radius:5px}
.acctform input:focus{outline:none;border-color:var(--accent)}
.acctform .mini{white-space:nowrap}
.acctmsg{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  margin:10px 0 0;min-height:14px}
.acctmsg.bad{color:#d9605a}

/* ================= v2: deck building, settings, editable wall ================= */

.bartools{display:flex;align-items:center;gap:6px}
.cog{width:30px;height:30px;border-radius:5px;border:1px solid transparent;background:none;
  color:var(--faint);font-size:15px;cursor:pointer;line-height:1}
.cog:hover{border-color:var(--line-strong);color:var(--ink)}

.mini.go{background:linear-gradient(180deg,#c9372c,#a4231c);color:#fff6ea;text-shadow:0 -1px 0 rgba(0,0,0,.35)}
.mini.danger{color:#a4231c}
.mini:disabled{opacity:.45;cursor:default;filter:none;transform:none}
.pad{padding:10px 0}
.dim{color:var(--faint)}

/* ---- empty state ---- */
.empty{text-align:center;padding:64px 16px;max-width:520px;margin:0 auto}
.empty h2{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;margin:0 0 10px}
.empty p{color:var(--muted);line-height:1.6;margin:0 0 20px}
.empty .tools{justify-content:center}

/* ---- in-app dialogs ---- */
.askwrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(0,0,0,.6);padding:20px}
.askbox{background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;
  padding:20px;width:min(400px,94vw)}
.askbox p{margin:0 0 14px;font-size:14.5px;line-height:1.5}
.askbox input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;
  margin:0 0 14px;color:var(--ink);background:var(--sunk);border:1px solid var(--line-strong);border-radius:5px}
.askbox input:focus{outline:none;border-color:var(--accent)}
.askrow{display:flex;gap:8px;justify-content:flex-end}

/* ---- deck sheet additions ---- */
.legal{font-family:"JetBrains Mono",monospace;font-size:11px;margin:6px 0 0}
.legal.ok{color:var(--s-build)}
.legal.bad{color:#d9605a}
.clist.editing li{grid-template-columns:36px 44px 30px 1fr auto}
.qstep{display:flex;gap:4px}
.qstep button{width:28px;height:28px;border-radius:5px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;line-height:1}
.qstep button:hover{border-color:var(--accent)}
.qstep button[data-d="x"]{color:#d9605a}
.okflag{border-color:#2f5f46 !important;color:var(--s-build) !important}
.badflag{border-color:#6b3a36 !important;color:#d9605a !important}
.fresh{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;border:1px solid var(--line-strong);color:var(--muted)}
.fresh.f-stale{border-color:#6b3a36;color:#d9605a}
.cogsm{margin-left:auto;background:none;border:1px solid transparent;color:var(--faint);
  width:26px;height:26px;border-radius:5px;cursor:pointer}
.cogsm:hover{border-color:var(--line-strong);color:var(--ink)}

/* ---- settings fields ---- */
.settings h6,.deck h6{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:20px 0 8px}
.fieldrow{display:flex;gap:8px;flex-wrap:wrap}
.fieldrow input,.fieldrow select{flex:1;min-width:120px;font:inherit;font-size:14px;padding:8px 10px;
  color:var(--ink);background:var(--sunk);border:1px solid var(--line-strong);border-radius:5px}
.fieldrow input:focus,.fieldrow select:focus{outline:none;border-color:var(--accent)}
.sheet textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;line-height:1.5;
  min-height:70px;padding:8px 10px;margin-top:8px;color:var(--ink);background:var(--sunk);
  border:1px solid var(--line-strong);border-radius:5px;resize:vertical}
.sheet textarea:focus{outline:none;border-color:var(--accent)}
.steps.wide{display:flex;gap:6px;flex-wrap:wrap}
.steps.wide button{flex:1;min-width:84px;padding:9px 6px}
.swatches{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:5px;border:2px solid transparent;cursor:pointer}
.sw.on{border-color:var(--accent)}
.sw-blue{background:#2f62c9}.sw-green{background:#2a8a58}.sw-black{background:#2a2a30}
.sw-purple{background:#7a4bab}.sw-white{background:#eae6da}.sw-red{background:#c23a29}
.sw-orange{background:#d06f1d}.sw-teal{background:#13857f}

.log{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.log th{text-align:left;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--line-strong)}
.log td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--muted)}

/* ---- card grid: building mode ---- */
.addbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--accent);border-radius:8px;
  padding:10px 12px;margin:0 0 12px;font-size:13.5px}
.addbar span{font-family:"JetBrains Mono",monospace;font-size:11px;margin-left:8px}
.addbar span.ok{color:var(--s-build)} .addbar span.bad{color:#d9605a}
.addbtns{display:flex;gap:6px}
.card.indeck{outline:2px solid var(--accent);outline-offset:-2px}
.addq{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;
  justify-content:space-between;background:rgba(10,10,8,.9);border-radius:6px;padding:3px 6px}
.addq button{width:26px;height:26px;border-radius:4px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:15px;line-height:1}
.addq b{font-family:"JetBrains Mono",monospace;font-size:13px}
.adddecks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.adddecks s{text-decoration:none;color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:10px}

/* ---- CRT library ---- */
.vlist{margin-top:10px}
.vrow{display:grid;grid-template-columns:76px 1fr auto auto auto;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.vrow.on{background:rgba(224,168,58,.07)}
.vrow img{width:76px;height:44px;object-fit:cover;border-radius:4px;background:var(--sunk)}
.vph{width:76px;height:44px;display:grid;place-items:center;border-radius:4px;background:var(--sunk);
  font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--faint)}
.vrow b{display:block;font-size:13.5px}
.vrow s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--faint)}

/* ---- deck from a prompt ---- */
.sheet.gen{width:min(560px,94vw)}
.genlist{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:18px;font-size:13px}
.genlist li{break-inside:avoid;padding:3px 0;border-bottom:1px solid var(--line)}
.genlist li b{font-family:"JetBrains Mono",monospace;font-size:11px;margin-right:6px}
.genlist li s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint);margin-left:6px}
@media (max-width:520px){.genlist{columns:1}}

/* ---- paper skin ---- */
body[data-skin="paper"]{--bg:#efe9dc;--surface:#f7f2e6;--surface-2:#e7dfcd;--sunk:#e2dac6;
  --ink:#2b2820;--muted:#5d5747;--faint:#8b836e;--line:#d6cdb6;--line-strong:#bfb49a;--accent:#9a6b1f}
body[data-skin="paper"] .appbar{background:#f7f2e6;border-bottom-color:#cfc4aa}
body[data-skin="paper"] .deck{box-shadow:0 1px 0 #d8cfb8}
body[data-skin="paper"] .card img{filter:saturate(.96)}

/* ================= v3: the Room — wall, workbench, camera ================= */

.roomstage{position:fixed;left:0;right:0;top:calc(var(--barh) + env(safe-area-inset-top) + 1px);bottom:0;overflow:hidden;touch-action:none;

  background:radial-gradient(120% 80% at 50% 0%,#241d1a,#0d0b0a 70%)}
.room{position:absolute;inset:0}
.world{position:absolute;left:0;top:0;transform-origin:0 0;
  transition:transform .85s cubic-bezier(.65,0,.25,1)}
.room.noanim .world,.room.noanim .desk{transition:none}
@media (prefers-reduced-motion:reduce){.world,.desk{transition:none !important}}

/* the wall */
.wall{position:absolute;left:0;top:0;width:100%;overflow:hidden;
  background:var(--noise),repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 2px,transparent 2px 54px),
  linear-gradient(180deg,#3a3128,#463a2e 45%,#2e271f)}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.poster{position:absolute;border-radius:2px;background:#1a1a22;
  box-shadow:0 10px 22px rgba(0,0,0,.55);transform:rotate(var(--r,0deg))}
/* the art clips inside its own body so the edit tools above the poster show */
.poster .pbody{position:absolute;inset:0;overflow:hidden;border-radius:2px}
.witem.tappable{cursor:pointer}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .pin{position:absolute;left:50%;top:5px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 35% 35%,#fff,#c0392b);z-index:3}
.poster .swap{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;z-index:4;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:26px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s}
.poster:hover .swap{opacity:1}
.p-neon{background:radial-gradient(60% 45% at 50% 62%,rgba(255,110,190,.75),transparent 60%),linear-gradient(180deg,#1b1038,#3c1b5e 45%,#7b1f5a)}
.p-neon .sun{position:absolute;left:50%;top:44%;width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,#ffd86b,#ff5f9e 60%);box-shadow:0 0 40px rgba(255,120,180,.7)}
.p-neon .grid{position:absolute;left:-20%;right:-20%;bottom:0;height:42%;transform:perspective(220px) rotateX(64deg);transform-origin:bottom;
  background:repeating-linear-gradient(90deg,rgba(120,240,255,.6) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(120,240,255,.5) 0 1px,transparent 1px 16px)}
.p-neon b{position:absolute;left:0;right:0;top:8%;text-align:center;font-family:Bangers,cursive;font-size:30px;color:#fff;text-shadow:0 0 12px #ff5fa2}
.p-neon i{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.38em;color:#9ff4ff}
.p-mech{background:linear-gradient(160deg,#10222e,#0a1520)}
.p-mech .mech{position:absolute;inset:14% 18% 18%;clip-path:polygon(50% 0,88% 22%,74% 100%,26% 100%,12% 22%);
  background:linear-gradient(180deg,#2e4d63,#16232e)}
.p-mech .eye{position:absolute;left:50%;top:32%;width:44px;height:7px;transform:translateX(-50%);border-radius:4px;background:#7ff0ff;box-shadow:0 0 16px #7ff0ff}
.p-mech b{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;letter-spacing:.2em;color:#cfefff}
.p-tour{background:linear-gradient(180deg,#f6efdd,#e4d6b6);color:#231a10}
.p-tour b{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:Bangers,cursive;font-size:25px;color:#b3251f}
.p-tour .rows{position:absolute;left:10%;right:10%;top:33%;bottom:20%;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  line-height:1.5;color:#3b2c18;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden}
.p-tour .rows span{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dotted #b6a279;min-height:0}
.p-tour .rows em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tour .rows em:last-child{flex:none}
.p-tour .seal{position:absolute;left:50%;bottom:7%;transform:translateX(-50%) rotate(-8deg);border:2px solid #b3251f;color:#b3251f;
  font-family:"JetBrains Mono",monospace;font-size:8px;letter-spacing:.2em;padding:2px 7px;border-radius:3px}
/* the shelf: a plank off the wall and tapes with tops and sides, in the item's
   own perspective — the eye sits on the wall's centre line (--po) and a little
   above the shelf, so the plank's top and the tapes' tops read */
.shelf{position:absolute;--dp:40px;perspective:1500px;perspective-origin:var(--po,50%) -140%;transform-style:preserve-3d}
.shelf .plank{position:absolute;left:0;right:0;bottom:0;height:13px;transform-style:preserve-3d}
.shelf .plank i{position:absolute;display:block}
.shelf .pfront{inset:0;transform:translateZ(var(--dp));background:linear-gradient(180deg,#7b5c3c,#3f2d1c);
  box-shadow:0 10px 16px rgba(0,0,0,.5)}
.shelf .ptop{left:0;right:0;top:0;height:var(--dp);transform-origin:top;transform:rotateX(90deg);
  background:linear-gradient(180deg,#6a4c30,#9a7550);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.vhs{position:absolute;bottom:13px;width:23px;height:92px;transform-style:preserve-3d}
.vhs b{position:absolute;display:block;background:var(--c,#333)}
.vhs .vtop{left:0;right:0;top:0;height:var(--dp);transform-origin:top;transform:rotateX(90deg);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1)),var(--c,#333)}
.vhs .vside{top:0;bottom:0;right:0;width:var(--dp);transform-origin:right;transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.25)),var(--c,#333)}
.vhs .vsideL{top:0;bottom:0;left:0;width:var(--dp);transform-origin:left;transform:rotateY(-90deg);
  background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,.25)),var(--c,#333)}
.vhs i{position:absolute;inset:0;transform:translateZ(var(--dp));border-radius:2px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.1) 30%,rgba(0,0,0,.28)),var(--c,#333);
  font-style:normal;font-family:"JetBrains Mono",monospace;font-size:7px;font-weight:700;color:#2a2118;text-align:center;line-height:17px;overflow:hidden}
.vhs i::before{content:"";position:absolute;left:3px;right:3px;top:9px;bottom:9px;background:#f2ead6;border-radius:1px}
.vhs i{writing-mode:vertical-rl;padding:9px 3px}
.vhs i{color:#2a2118}
.vhs i::before{z-index:-1}

.witem{position:absolute;transform:rotate(var(--r,0deg))}
.room.editing .witem{outline:1px dashed rgba(224,168,58,.5);cursor:grab}
.room.editing .witem.dragging{outline-color:var(--accent);cursor:grabbing;z-index:20}
.wtools{position:absolute;left:0;top:-44px;display:flex;gap:4px;z-index:12}
.wtools.tin{top:6px;left:6px}
.room.editing .witem .wtools,.room.editing .witem .whandle{display:none}
.room.editing .witem.sel{z-index:30;outline:2px solid var(--accent)}
.room.editing .witem.sel .wtools{display:flex}
.room.editing .witem.sel .whandle{display:block}
.room.editing .crt{overflow:visible}
.wtools button{width:38px;height:38px;border-radius:5px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:17px;line-height:1}
.wtools button[data-w="del"]{color:#d9605a}
.whandle{position:absolute;right:-9px;bottom:-9px;width:26px;height:26px;border-radius:4px;
  background:var(--accent);cursor:nwse-resize;z-index:12}
.w-note{background:#e8e2c9;color:#2a2a22;border-radius:2px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);display:grid;place-items:center;padding:14px}
.w-note p{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:28px;line-height:1.25;text-align:center}

/* the CRT bezel on the wall; the picture is the .tv layer */
.crt{position:absolute;border-radius:14px;background:linear-gradient(180deg,#d9d2c0,#a89f8b);
  box-shadow:0 16px 30px rgba(0,0,0,.6);padding:16px 16px 78px;box-sizing:border-box;overflow:hidden}
.crt .screen{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;background:#0b1418;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8)}
.crt .tube{position:absolute;inset:0}
.crt .static{position:absolute;inset:0;background:var(--noise);opacity:.5;animation:snow .28s steps(2) infinite}
@keyframes snow{to{background-position:60px 40px}}
.crt .nosig{position:absolute;left:0;right:0;top:46%;text-align:center;font-family:"JetBrains Mono",monospace;
  font-size:16px;letter-spacing:.3em;color:#9fd7c8}
.nosigadd{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:4;
  padding:9px 15px;border-radius:5px;border:1px solid #6a6a5a;background:rgba(20,20,16,.9);
  color:#cfcab8;font-family:"JetBrains Mono",monospace;font-size:14px;cursor:pointer}
.nosigadd:hover{border-color:var(--accent);color:var(--accent)}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px)}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:radial-gradient(70% 55% at 30% 12%,rgba(255,255,255,.18),transparent 60%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.nofx .scan,.nofx .glare{display:none}
.crtfoot{position:absolute;left:14px;right:14px;bottom:8px;height:62px;display:flex;align-items:center;gap:6px}
.crtbtn{height:48px;min-width:48px;padding:0 12px;border-radius:5px;border:1px solid #3b3a33;
  background:#23231d;color:#d8d2c0;cursor:pointer;font-size:22px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crtbtn.wide{flex:1;min-width:0;font-family:"JetBrains Mono",monospace;font-size:16px;text-align:left}
.crtbtn:hover{border-color:var(--accent);color:var(--accent)}

/* the TV layer: one iframe, docked or parked */
.tv{position:fixed;z-index:21;overflow:hidden;background:#07141a;
  left:14px;top:66px;width:min(240px,40vw);height:calc(min(240px,40vw) * .5625 + 40px);
  border-radius:10px;border:1px solid var(--line-strong);box-shadow:0 12px 30px rgba(0,0,0,.6);
  transition:opacity .25s}
.tv.docked{border-radius:10px;border:0;box-shadow:none;background:#0b1418}
.tv.moving,.tv.off,.tv.hid{opacity:0;pointer-events:none}
.tv.off{display:none}
.tv.editing{pointer-events:none}
.tv .tvpic{position:absolute;inset:0 0 40px}
.tv.docked .tvpic{inset:0}
.tv .tvpic iframe{width:100%;height:100%;border:0;display:block}
.tv .scan,.tv .glare{bottom:40px}
.tv.docked .scan,.tv.docked .glare{bottom:0}
.tv .pipfoot{left:5px;right:5px;bottom:4px;height:32px;gap:3px}
.tv .pipfoot .crtbtn{height:28px;min-width:28px;padding:0 7px;font-size:14px;line-height:1}
.tv .pipfoot .crtbtn.wide{font-size:11px}
.tv .pipfoot [data-c="fx"]{display:none}
.tv.pip{width:min(240px,34vw);height:calc(min(240px,34vw) * .5625 + 34px)}
.tv.pip .tvpic{bottom:34px} .tv.pip .scan,.tv.pip .glare{bottom:34px}
.tv.pip .pipfoot{height:28px;bottom:3px} .tv.pip .pipfoot .crtbtn{height:26px;min-width:24px;padding:0 5px;font-size:12px}
.tv.pip .pipfoot .crtbtn.wide{font-size:10px}
.tv.docked .pipfoot{display:none}
/* parked: off the Room, in the corner of whatever page is up, still playing */
.tv.away{left:auto;top:auto;right:14px;bottom:14px;width:min(300px,52vw);height:calc(min(300px,52vw) * .5625 + 36px);
  animation:tvpark .3s ease-out}
.tv.away .tvpic,.tv.away .scan,.tv.away .glare{bottom:36px}
.tv.away .pipfoot{height:30px;bottom:3px}
.tv.away .pipfoot .crtbtn{height:28px;min-width:26px;padding:0 6px;font-size:13px}
.tv.away .pipfoot .crtbtn.wide{font-size:10.5px}
.tv.away .pipfoot [data-c="off"]{font-size:11px}
@keyframes tvpark{from{opacity:0;transform:translateY(12px) scale(.96)}}
body.tvaway:not([data-view="list"]) #view,body.tvaway .decksview{padding-bottom:calc(min(300px,52vw) * .5625 + 60px)}

/* the desk */
.deskwrap{position:absolute;left:0;perspective:6200px;perspective-origin:50% 0}
.desk{position:absolute;left:0;top:0;transform-origin:50% 0;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.65,0,.25,1);
  background:var(--noise),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 9px,rgba(255,255,255,.035) 9px 10px,transparent 10px 30px),
  linear-gradient(90deg,#3c2615,#6d4527 16%,#5b391f 42%,#71492a 62%,#4b2e19 84%,#33200f);
  box-shadow:inset 0 0 200px rgba(0,0,0,.55)}

/* a deck box standing on end: the front face is the label you read */
.box{position:absolute;width:var(--w);height:var(--d);transform-style:preserve-3d;cursor:grab;touch-action:none}
.box.drag{cursor:grabbing;z-index:50;transition:none !important}
/* filtering the rack: boxes glide to their new slots, the others slide off the desk */
.desk.rackslide .box,.desk.rackslide .rdiv,.desk.rackslide .rghost{
  transition:left .55s cubic-bezier(.65,0,.25,1),top .55s cubic-bezier(.65,0,.25,1),transform .55s cubic-bezier(.65,0,.25,1),visibility 0s}
.box.away,.rdiv.away,.rghost.away{transform:translateX(-1900px);visibility:hidden;pointer-events:none}
.desk.rackslide .away{transition:left .55s,top .55s,transform .55s cubic-bezier(.65,0,.25,1),visibility 0s .55s}
.box .f{position:absolute;left:0;top:0;width:100%;height:100%;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) .6px,transparent 1.1px) 0 0/3px 3px,var(--c)}
.box .top{transform:translateZ(var(--h));border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.box .front{height:var(--h);top:auto;bottom:0;transform-origin:bottom;transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),color-mix(in srgb,var(--c),black 12%);
  display:flex;align-items:center;padding:0 6px;box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.box .lbl{position:relative;flex:1;min-width:0;background:linear-gradient(180deg,#fdfaf0,#ece4d0);border-radius:3px;color:#1b1712;
  box-shadow:0 3px 6px rgba(0,0,0,.45);padding:6px 7px 7px;overflow:hidden}
.box .lbl b{display:block;font-family:"JetBrains Mono",monospace;font-size:19px;font-weight:700;line-height:1}
.box .lbl i{display:block;font-style:normal;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:13px;
  line-height:1.05;color:#4a3a28;margin-top:3px;max-height:28px;overflow:hidden}
.box .lbl em{position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.box .lbl u{display:block;height:5px;background:rgba(0,0,0,.35);border-radius:3px;margin-top:5px;overflow:hidden;text-decoration:none}
.box.spare{cursor:pointer}
.box.spare .lbl{background:repeating-linear-gradient(135deg,#f3eddd 0 6px,#e6dcc4 6px 12px)}
.box.spare .lbl i{color:#8a7657;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.box.spare .top{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2)),var(--c);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--c),black 20%)}
.box .lbl u i{display:block;height:100%;background:var(--accent);margin:0;max-height:none}
.box .side{width:var(--h);left:auto;right:0;transform-origin:right;transform:rotateY(90deg);background:color-mix(in srgb,var(--c),black 32%)}
.box .sideL{width:var(--h);left:0;transform-origin:left;transform:rotateY(-90deg);background:color-mix(in srgb,var(--c),black 38%)}
.box .sh{position:absolute;left:-4%;top:10%;width:108%;height:110%;border-radius:40%;background:rgba(0,0,0,.55);filter:blur(10px);transform:translateZ(-1px)}
.box.onmat .lbl{box-shadow:0 0 0 3px var(--accent),0 3px 6px rgba(0,0,0,.45)}
.box.stacked .top{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 -6px 0 -2px rgba(0,0,0,.25),0 -12px 0 -4px rgba(0,0,0,.2)}
.box .stackn{position:absolute;right:-6px;top:-6px;transform:translateZ(calc(var(--h) + 6px));
  background:var(--accent);color:#1b1712;font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;
  width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px}

/* a group divider standing in the rack, and the empty slot that adds a box */
.rdiv{position:absolute;width:26px;height:8px;transform-style:preserve-3d;pointer-events:none}
.rdiv .f{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) + 30px);transform-origin:bottom;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#f4ecd8,#d9cdb0);border-radius:5px 5px 1px 1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.rdiv .f b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;
  letter-spacing:.22em;color:#6a5c48;white-space:nowrap}
.rghost{position:absolute;box-sizing:border-box;border:2px dashed rgba(255,255,255,.32);border-radius:6px;transform:translateZ(1px);
  display:grid;place-items:center;cursor:pointer}
.rghost b{font-family:"JetBrains Mono",monospace;font-size:17px;color:rgba(255,255,255,.62);letter-spacing:.1em}
.rghost:hover{border-color:var(--accent)} .rghost:hover b{color:var(--accent)}

/* the build queue: a card file */
.qfile{position:absolute;transform-style:preserve-3d}
.qfile .f{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,#efe7d4,#d8cdb4)}
.qfile .top{transform:translateZ(var(--h));border-radius:3px;
  background:repeating-linear-gradient(90deg,#efe9dc 0 2px,#ddd5c2 2px 3px);box-shadow:inset 0 0 0 9px #e8e0cc,inset 0 0 20px rgba(0,0,0,.28)}
.qfile .front{height:var(--h);top:auto;bottom:0;transform-origin:bottom;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#f2ecdd,#cfc4a9);display:flex;align-items:center;padding:0 18px;gap:12px}
.qfile .front .st{background:#b3251f;color:#fff6ea;border-radius:3px;padding:5px 12px;
  font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:700;letter-spacing:.2em;white-space:nowrap}
.qfile .front .ct{font-family:"JetBrains Mono",monospace;font-size:15px;color:#6a5c48;letter-spacing:.12em;white-space:nowrap}
.qfile .side{width:var(--h);left:auto;right:0;transform-origin:right;transform:rotateY(90deg);background:#c8bda2}
.qfile .sideL{width:var(--h);left:0;transform-origin:left;transform:rotateY(-90deg);background:#c8bda2}
.qfile .tabs{position:absolute;inset:0;transform:translateZ(calc(var(--h) + 6px));transform-style:flat}
.tab{position:absolute;border-radius:4px;cursor:pointer;background:linear-gradient(180deg,#fffaf0,#f0e7d3);
  box-shadow:0 3px 7px rgba(0,0,0,.35);color:#20180f;overflow:hidden;border-left:9px solid var(--t);
  transition:transform .14s,box-shadow .14s}
.tab:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 18px rgba(0,0,0,.45)}
.tab{touch-action:none}
.tab.drag{transition:none;z-index:40;transform:scale(1.04);box-shadow:0 18px 26px rgba(0,0,0,.55);cursor:grabbing}
.tab.onmat{box-shadow:0 0 0 3px var(--accent),0 3px 7px rgba(0,0,0,.35)}
.tab b{position:absolute;left:12px;right:52px;top:6px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab s{position:absolute;right:11px;top:7px;text-decoration:none;font-family:"JetBrains Mono",monospace;
  font-size:13px;font-weight:700;color:#8a7657}
.tab .meta{position:absolute;left:12px;right:11px;bottom:6px;font-family:"JetBrains Mono",monospace;font-size:13px;
  color:#6a5c48;display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.tab .meta span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.qempty{position:absolute;left:0;right:0;top:40%;margin:0;text-align:center;color:#8a7657;
  font-family:"JetBrains Mono",monospace;font-size:16px}
.addlist{position:absolute;transform:translateZ(92px);font-family:"JetBrains Mono",monospace;font-size:18px;
  padding:9px 14px;border:2px dashed rgba(255,255,255,.35);border-radius:6px;color:rgba(255,255,255,.7);cursor:pointer}
.addlist:hover{border-color:var(--accent);color:var(--accent)}

/* the mat: the deck laid out */
.mat{position:absolute;border-radius:10px;transform:translateZ(1px);box-sizing:border-box;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/10px 10px,
  linear-gradient(135deg,#22323a,#0f181d);box-shadow:inset 0 0 44px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:visible}
.mat:not(:has(.mgrid)){padding:16px 20px;gap:12px;overflow:hidden}
.mat .mt{font-family:"JetBrains Mono",monospace;font-size:18px;letter-spacing:.24em;color:rgba(150,215,225,.5)}
.mat .medit{position:absolute;right:16px;top:14px}
.matempty{margin:auto;text-align:center;color:rgba(150,215,225,.55);font-family:"JetBrains Mono",monospace;font-size:18px;line-height:1.6}
.matempty b{color:rgba(190,235,240,.9)}
/* Rows of 4 on a phone, 10 wide; the grid is as tall as the deck needs and may
   run off the mat's bottom edge (the room reserves the depth for it). */
.mgrid{display:grid;grid-template-columns:repeat(var(--cols,10),var(--cw));gap:var(--gap,10px);align-content:start;
  flex:none;box-sizing:border-box;transform:translateZ(2px)}
.mgrid > .matempty{grid-column:1/-1;margin:40px auto}
.mstack{position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transform:translateY(var(--sw,0));transition:transform .18s}
.mstack .mart{position:relative;aspect-ratio:359/500;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#f3ead4,#d8cbab);color:#2a2118;box-shadow:0 4px 8px rgba(0,0,0,.45)}
.mstack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mstack .nm{position:absolute;left:0;right:0;bottom:0;padding:14px 7px 6px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 45%);color:#fff}
.mstack .nm b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstack .nm s{display:block;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstack .mart:not(:has(img)) .nm{top:0;background:none;color:#2a2118;padding-top:38px}
.mstack .mart:not(:has(img)) .nm b{white-space:normal;font-size:13px}
.mstack em{position:absolute;right:5px;top:5px;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  background:#1b1712;color:#fff;border-radius:3px;padding:2px 5px}
/* one tick per copy, under the card: the same checklist as the deck panel */
.mstack .tk{display:flex;gap:4px;height:var(--tkh,22px);cursor:pointer}
.mstack .tk i{flex:1;border-radius:4px;border:2px solid rgba(190,235,240,.55);background:rgba(8,14,16,.6);box-sizing:border-box;position:relative}
.mstack .tk i.on{background:var(--accent);border-color:var(--accent)}
.mstack .tk i.on::after{content:"";position:absolute;left:50%;top:44%;width:26%;height:46%;max-width:9px;max-height:16px;border:solid #1b1712;border-width:0 3px 3px 0;
  transform:translate(-50%,-50%) rotate(45deg)}
.mstack.have .tk i.on{background:var(--s-build);border-color:var(--s-build)}
/* the +1 / −1 that floats off a card when you swipe it */
.mstack .bump{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:30px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);opacity:0;pointer-events:none}
.mstack .bump.go{animation:bump .7s ease-out}
@keyframes bump{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}
.mat.tall .mstack .nm b{font-size:17px}
.mat.tall .mstack .nm s{font-size:11px}
.mat.tall .mstack em{font-size:17px;padding:3px 7px}
.mat.tall .mstack .tk{gap:6px}
.mat.tall .mstack .tk i{border-width:3px;border-radius:6px}
.mat.tall .mstack .st button{width:52px;height:52px;font-size:30px;border-radius:8px}
/* dealing: cards fly out of the box onto the mat, and back in on "Put away" */
/* the mat stays one flat plane while dealing (a 3D mat gets split by the
   compositor); the cards slide out from under the box instead of over it */
.mat.dealing{overflow:visible;transform:none}
.mstack.deal{animation:dealin .62s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--dl,0ms)}
.mstack.undeal{animation:dealout .46s cubic-bezier(.55,0,.8,.35) both;animation-delay:var(--dl,0ms)}
@keyframes dealin{from{transform:translate(var(--fx),var(--fy)) scale(.34) rotate(-9deg);opacity:0}
  18%{opacity:1}to{transform:none;opacity:1}}
@keyframes dealout{from{transform:none;opacity:1}82%{opacity:1}to{transform:translate(var(--fx),var(--fy)) scale(.34) rotate(7deg);opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mstack.deal,.mstack.undeal{animation:none}.mstack .bump.go{animation:none}}
.mstack .st{position:absolute;left:5px;top:5px;display:flex;gap:4px}
.mstack .st button{width:30px;height:30px;border-radius:5px;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,8,.85);
  color:#fff;font-size:18px;line-height:1;cursor:pointer}
.mstack .st button:disabled{opacity:.35}

/* the shut card file: only its front and lid show */
.qfile .front .qpull{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:700;letter-spacing:.14em;
  color:#2a2118;background:#fbf5e6;border-radius:2px;padding:5px 12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.qfile .front,.qfile .qlid{cursor:pointer}
.qfile.shut .top{display:flex;align-items:center;justify-content:center}
.qfile .qlid{font-family:"JetBrains Mono",monospace;font-size:17px;letter-spacing:.1em;color:#6a5c48}
.qfile .front .qpull{white-space:nowrap}
/* nothing waiting: a low shut tray, calm, with the New list tape on its front */
.qfile.empty .front,.qfile.empty .qlid{cursor:default}
.qfile.empty .front{gap:10px;padding:0 14px}
.qfile.empty .front .st{background:#8d8472;font-size:14px;padding:4px 10px}
.qfile.empty .front .ct{font-size:13px}
.qfile.empty .front .qnew{margin-left:auto;cursor:pointer;font-size:13px}
.qfile.empty .qlid{font-size:15px;color:#8b7d66}

/* the tray along the near edge of the desk: the deck on the mat and what you do with it */
.dtray{position:absolute;left:0;right:var(--drw,0px);bottom:0;z-index:10;display:none;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:var(--noise),linear-gradient(180deg,#5a3a20,#3a2413);box-shadow:0 -1px 0 rgba(255,255,255,.12) inset,0 -10px 24px rgba(0,0,0,.45);
  border-top:1px solid #6d4a2b;transition:right .6s cubic-bezier(.65,0,.25,1)}
.dtray.on{display:block}
.dtray .grip{display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,236,210,.35);margin:-3px auto 8px;cursor:grab}
.dthead{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;min-width:0}
.dthead b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px;color:#fff3e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dthead s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.dthead s.ok{color:#8fdcae}.dthead s.bad{color:#f0a296}.dthead i{font-style:normal}
.dtbtns{display:flex;flex-wrap:wrap;gap:8px}
.dtray .mini{font-size:12px;padding:10px 14px}
@media (max-width:520px){
  .dtray{padding-top:8px}
  .dthead{margin-bottom:7px}.dthead b{font-size:15px}.dthead s{font-size:9.5px}
  .dtray .mini{font-size:10.5px;padding:9px 10px;letter-spacing:.05em;gap:5px}.dtray .mini svg{width:13px;height:13px}.dtbtns{gap:5px}
  .dtray .mini[data-m="mat"] span,.dtray .mini .lbl{display:none}}
.dthint{font-family:"JetBrains Mono",monospace;font-size:10px;color:rgba(255,236,210,.7);margin:-3px 0 8px;letter-spacing:.04em}

body.tablet-on .dtray{visibility:hidden}

/* the card drawer at the MAT stop: wide, from the right; portrait, up out of the tray */
.drawer{position:absolute;right:0;top:0;bottom:0;width:36%;min-width:340px;max-width:640px;z-index:8;
  background:rgba(20,21,15,.97);border-left:1px solid var(--line-strong);overflow:auto;padding:14px;
  transform:translateX(105%);transition:transform .6s cubic-bezier(.65,0,.25,1)}
.drawer.on{transform:none}
.drawer .cardgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.drawer .cardbar input[type=search]{flex-basis:100%}
@media (max-width:899px),(orientation:portrait){
  .stops{left:auto;right:10px;transform:none}
  .drawer{left:0;right:0;top:auto;bottom:var(--trayh,0px);width:auto;min-width:0;max-width:none;height:calc((100% - var(--trayh,0px)) * .55);border-left:0;
    border-top:1px solid var(--line-strong);border-radius:14px 14px 0 0;transform:translateY(calc(100% + var(--trayh,0px) + 10px));transition:transform .45s cubic-bezier(.2,.8,.2,1),height .35s}
  .drawer[data-size="full"]{height:calc(100% - var(--trayh,0px) - 44px)}
  .drawer.on{transform:none}
}

/* the stop switcher */
.stops{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:9;display:flex;gap:4px;align-items:center;
  background:rgba(20,21,15,.82);border:1px solid var(--line);border-radius:999px;padding:4px}
.stops button[data-stop]{border:1px solid transparent;background:transparent;color:var(--muted);
  padding:6px 12px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:600}
.stops button[data-stop][aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
.stops .mini{margin-left:6px}
.room[data-stop="desk"] ~ .stops #wedit,.room[data-stop="mat"] ~ .stops #wedit{display:none}
.room[data-frame="portrait"][data-stop="desk"] ~ .stops #wedit{display:inline-block}
.stops .wedit{white-space:nowrap}

/* the rack filter, DESK stop only */
.rackf{position:absolute;left:10px;top:10px;z-index:9;display:none;gap:2px;align-items:center;
  background:rgba(20,21,15,.82);border:1px solid var(--line);border-radius:999px;padding:3px}
.room[data-stop="desk"] ~ .rackf{display:flex}
.rackf button{border:1px solid transparent;background:transparent;color:var(--muted);padding:5px 10px;border-radius:999px;
  cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
.rackf .s{display:none}
.mh .own{font-style:normal}
.rackf button s{text-decoration:none;opacity:.6;font-family:"JetBrains Mono",monospace;font-size:10.5px;margin-left:2px}
.rackf button[aria-pressed]{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
@media (max-width:899px),(orientation:portrait){
  .stops{padding:3px;gap:2px;top:8px;right:8px;left:auto;transform:none}
  .stops button[data-stop]{padding:3px 8px;font-size:11px}
  .stops .mini{margin-left:3px;padding:3px 8px;font-size:11px;min-height:0;line-height:1.2}
  .stops .wedit{padding:4px 8px}
  .stops .wedit span{display:none}
  .rackf{left:8px;top:8px}
  .rackf{padding:2px}
  .rackf button{padding:3px 8px;font-size:11px}
  .rackf .l{display:none}
  .rackf .s{display:inline}
}

/* sheets opened from the Room */
.pfields{display:grid;gap:8px}
.pf{display:grid;gap:4px}
.pf span{font-size:12px;color:var(--muted)}
.pf input{font:inherit;font-size:14px;padding:8px 10px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:5px}
.pf input:focus{outline:none;border-color:var(--accent)}
.prows{display:grid;gap:6px}
.prow input{min-width:0 !important}
.prow .mini{flex:none}
.chipbox{display:inline-flex;align-items:center;gap:6px}
.chipbox .dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.chipbox s{text-decoration:none;opacity:.6;font-size:11px}


/* ================= v5: decks view in the Room's materials, the tablet ================= */

/* the Decks page is the desk: wood under paper */
.decksview{position:relative;margin:-16px -14px -80px;padding:18px 14px 90px;min-height:calc(100vh - 56px);
  background:var(--noise),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 9px,rgba(255,255,255,.035) 9px 10px,transparent 10px 30px),
  linear-gradient(90deg,#3c2615,#6d4527 16%,#5b391f 42%,#71492a 62%,#4b2e19 84%,#33200f);
  box-shadow:inset 0 0 160px rgba(0,0,0,.5)}
.decksview > *{max-width:1180px;margin-left:auto;margin-right:auto}
.tscreen .decksview{margin:0;min-height:100%;padding:16px 14px 40px}
.paper{background:linear-gradient(180deg,#fbf6ea,#ebe2cc);color:#231a10;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.decksview .empty{padding:40px 22px;margin-top:40px}
.decksview .empty p{color:#5d4d38}

/* the pipeline on a clipboard */
.clipboard{position:relative;background:linear-gradient(180deg,#fbf6ea,#ebe2cc);color:#231a10;border-radius:8px;
  padding:26px 18px 14px;box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.06);margin-bottom:22px}
.clipboard .clip{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:120px;height:26px;border-radius:6px;
  background:linear-gradient(180deg,#c9c3b4,#8f8a7e);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 -3px 0 rgba(0,0,0,.2)}
.cbtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.stamp{background:#b3251f;color:#fff6ea;border-radius:3px;padding:4px 10px;font-family:"JetBrains Mono",monospace;
  font-size:12px;font-weight:700;letter-spacing:.2em}
.cbnums{font-family:"JetBrains Mono",monospace;font-size:11px;color:#6a5c48;letter-spacing:.04em}
.pipe{display:flex;align-items:stretch;gap:6px;margin:14px 0 10px}
.pcol{flex:1;border-radius:5px;padding:8px 10px;background:#fffaf0;box-shadow:0 2px 5px rgba(0,0,0,.14);
  border-top:5px solid var(--s-draft)}
.pcol[data-s="sim"]{border-top-color:var(--s-sim)} .pcol[data-s="building"]{border-top-color:var(--s-building)}
.pcol[data-s="complete"]{border-top-color:var(--s-complete)}
.pcol b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:26px;line-height:1}
.pcol span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6a5c48}
.parrow{align-self:center;font-style:normal;color:#a8987a;font-size:18px}
.clipboard .meter{background:rgba(0,0,0,.12)}
.clipboard .tools{margin:12px 0 0}

/* games: a row of paper dividers along the top of one folder. Each tab is tinted
   by its game (--g); the one in front is the folder's own paper and runs flush
   into it, the rest sit a little lower, tucked behind the folder's edge. */
.gfile{position:relative;margin-top:4px;--g:#5aa9e6}
.gtabs{position:relative;z-index:1;display:flex;align-items:flex-end;padding:12px 8px 0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;filter:drop-shadow(0 -1px 2px rgba(0,0,0,.28))}
.gtabs::-webkit-scrollbar{display:none}
.gtab{--p:color-mix(in srgb,var(--g) 15%,#f7efdc);position:relative;flex:none;display:flex;align-items:center;gap:8px;
  margin:0 -12px 0 0;padding:10px 26px 12px 22px;border:0;cursor:pointer;color:#6a5c48;font:inherit;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 22%,#efe4c8),color-mix(in srgb,var(--g) 14%,#dfd2b2));
  box-shadow:inset 0 4px 0 var(--g);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%);
  border-radius:6px 6px 0 0;transform:translateY(6px);transition:transform .16s ease,color .16s;z-index:calc(10 - var(--i,0))}
.gtab:last-child{margin-right:0}
.gtab:hover{transform:translateY(2px);color:#231a10}
.gtab:focus-visible{outline:none;color:#231a10;text-decoration:underline}
.gtab[aria-selected="true"]{z-index:20;transform:none;color:#231a10;background:var(--p);padding-bottom:14px;cursor:default}
.gtab b{font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700;letter-spacing:.18em;
  color:color-mix(in srgb,var(--g) 55%,#231a10)}
.gtab .gname{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;white-space:nowrap}
.gtab em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;
  background:rgba(0,0,0,.08);border-radius:9px;padding:2px 7px;color:#5d4d38}
.gtab[aria-selected="true"] em{background:var(--g);color:#1b1712}
.gbody{position:relative;z-index:2;border-radius:8px;padding:16px 14px 18px;min-height:120px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 15%,#f7efdc),color-mix(in srgb,var(--g) 8%,#e9dfc6) 420px,color-mix(in srgb,var(--g) 8%,#e9dfc6));
  box-shadow:0 16px 22px -8px rgba(0,0,0,.55),0 2px 3px rgba(0,0,0,.2)}
.gbody.flip > :not(.gcap){animation:gflip .24s ease-out}
@keyframes gflip{from{opacity:0;transform:translateY(8px)}}
.ghead{display:flex;align-items:center;gap:8px;margin:18px 2px 10px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#3b2f22}
.ghead:first-child,.gcap + .ghead{margin-top:2px}
.gcap{display:none;margin:0 2px 10px;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;color:#3b2f22}
.ghead i{width:22px;height:5px;border-radius:2px}
.ghead small{margin-left:auto;font-weight:400;letter-spacing:.1em;color:#8a7657}
/* the tablet's screen is narrower than the page: only the front tab keeps its name */
@media (max-width:1400px){.tscreen .gtab:not([aria-selected="true"]) .gname{display:none}}
@media (max-width:640px){
  .gtabs{padding:10px 2px 0}
  .gtab{padding:9px 16px 11px 14px;gap:5px;margin-right:-10px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%)}
  .gtab b{font-size:12px;letter-spacing:.1em}
  .gtab em{padding:2px 5px}
  .gtab[aria-selected="true"]{padding-bottom:13px}
  .gtab .gname{display:none}
  .gcap{display:block}
  .gbody{padding:12px 10px 14px;border-radius:6px}
}
@media (prefers-reduced-motion:reduce){.gtab,.gbody.flip > *{transition:none;animation:none}}

/* a deck: a divider card out of the build queue */
.dcard{position:relative;background:linear-gradient(180deg,#fffaf0,#f0e7d3);color:#20180f;border-radius:6px;
  padding:11px 13px 10px 16px;box-shadow:0 4px 10px rgba(0,0,0,.28);border-left:9px solid var(--g,#5aa9e6);
  transition:transform .14s,box-shadow .14s}
.dcard:hover{transform:translateY(-3px);box-shadow:0 12px 20px rgba(0,0,0,.32)}
.dcard .dtop{display:flex;align-items:center;gap:8px}
.dcard .dname{font-size:17px;color:#20180f;line-height:1.1}
.dcard .dname:hover{color:#b3251f}
.dcard .cogsm{color:#8a7657}
.dcard .cogsm:hover{border-color:#cdbf9f;color:#20180f}
.dmeta{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#6a5c48;margin:5px 0 8px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.dmeta .okflag,.dmeta .badflag,.dmeta .fresh{border:1px solid;border-radius:3px;padding:1px 5px;font-size:9.5px;letter-spacing:.08em}
.dmeta .okflag{color:#2f7a52 !important;border-color:#8fc7a6 !important}
.dmeta .badflag{color:#b3251f !important;border-color:#e0a79f !important}
.dmeta .fresh{color:#9a6a12;border-color:#e2c27f;background:none}
.dmeta .fresh.f-stale{color:#b3251f;border-color:#e0a79f}
.dmid{display:flex;align-items:center;gap:12px}
.boxchip{position:relative;display:inline-flex;align-items:baseline;gap:6px;flex:none;
  background:linear-gradient(180deg,#fdfaf0,#ece4d0);border-radius:3px;padding:4px 26px 4px 8px;
  box-shadow:0 0 0 3px var(--c),0 3px 6px rgba(0,0,0,.3);margin:3px}
.boxchip b{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700}
.boxchip i{font-style:normal;font-size:11px;color:#6a5c48;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boxchip em{position:absolute;right:7px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3)}
.boxchip.none{box-shadow:none;border:1.5px dashed #b9a988;background:none;padding:3px 8px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:#8a7657}
.dprog{flex:1;min-width:0}
.dprog u{display:block;height:6px;background:rgba(0,0,0,.14);border-radius:3px;overflow:hidden;text-decoration:none}
.dprog u i{display:block;height:100%;background:var(--accent)}
.dcard[data-stage="complete"] .dprog u i{background:var(--s-complete)}
.dprog span{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#6a5c48;margin-top:4px}
.dprog b{color:#20180f}
.dstages{display:flex;gap:4px;margin-top:10px}
.dstages button{flex:1;border:1px solid #d6c9aa;background:#fffaf0;border-radius:4px;padding:5px 2px;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:10px;color:#8a7657;letter-spacing:.04em}
.dstages button[aria-pressed="true"]{color:#1b1712;font-weight:700;border-color:transparent;background:var(--s-sim)}
.dstages button[data-s="building"][aria-pressed="true"]{background:var(--s-building)}
.dstages button[data-s="complete"][aria-pressed="true"]{background:var(--s-complete)}
.dcard[data-stage="draft"] .dstages{opacity:.55}

/* ---- Cards tab: the art carries the counters; the caption carries what you own ---- */
.card .art{position:relative}
.card .art .own,.card .art .used,.card .art .metab,.card .art .prev{position:absolute;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  font-weight:700;padding:2px 6px;border-radius:999px;font-style:normal;white-space:nowrap}
.card .art .own{left:6px;top:6px;background:var(--s-build);color:#08120c}
.card .art .used{right:6px;top:6px;background:rgba(0,0,0,.75);color:#fff}
.card .art .metab{left:6px;bottom:6px;background:rgba(20,21,15,.88);color:var(--accent);border:1px solid rgba(224,168,58,.5)}
.card .addq ~ .metab,.card .art:has(.addq) .metab{bottom:52px}
/* preview-set cards (data/lor-preview.json): not in the Core pool until release */
.card .art .prev{right:6px;bottom:6px;background:#6d4bd8;color:#fff;letter-spacing:.04em;text-transform:uppercase}
.card .art:has(.addq) .prev{bottom:52px}
.cardmeta .prevline{color:#8f75f0;font-weight:600}
.card .addq{left:6px;right:6px;bottom:6px;padding:4px;gap:4px;background:rgba(10,10,8,.9);border:1px solid rgba(255,255,255,.14)}
.card .addq b{flex:1;text-align:center;color:#f4ecda;display:flex;flex-direction:column;align-items:center;line-height:1}
.card .addq b span{font-size:17px}
.card .addq b s{text-decoration:none;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#a5a398;margin-top:2px}
.card .addq.on{border-color:var(--accent)}
.card .addq.on b span{color:var(--accent)}
.card .addq button{width:34px;height:34px;font-size:18px}
.card .addq button:disabled{opacity:.35}
.ownq{display:flex !important;align-items:center;gap:6px;margin-top:7px !important;font-size:10px !important}
.ownq button{width:24px;height:24px;border-radius:4px;border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink);cursor:pointer;font-size:14px;line-height:1;padding:0}
.ownq button:disabled{opacity:.35;cursor:default}
.ownq i{flex:1;text-align:center;font-style:normal;font-family:"JetBrains Mono",monospace;color:var(--muted)}
.metanote{flex-basis:100%;margin:0;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint)}
.metanote a{color:var(--muted)}
.cardbar select:disabled{opacity:.5}

/* ---- the tablet ---- */
.tablet{position:fixed;inset:0;z-index:25;display:grid;place-items:end center;padding:0 10px;
  background:rgba(8,6,4,0);pointer-events:none;transition:background .3s}
body.tablet-on .tablet{background:rgba(8,6,4,.55);pointer-events:auto}
.tframe{position:relative;width:min(1100px,100%);height:min(88vh,calc(100vh - 70px));display:flex;flex-direction:column;
  background:#141410;border-radius:26px 26px 0 0;padding:12px 12px 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 0 0 2px #2b2b24,inset 0 0 0 7px #0c0c0a;
  transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.tablet-on .tframe{transform:none}
.tcam{position:absolute;left:50%;top:4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2b2e30;box-shadow:inset 0 0 0 1.5px #0a0a0a}
.tbar{display:flex;align-items:center;gap:10px;padding:4px 6px 10px}
.tseg{display:flex;gap:3px;background:rgba(255,255,255,.06);border-radius:999px;padding:3px}
.tseg button{border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer;font-weight:600;font-size:13px}
.tseg button[aria-pressed]{background:var(--surface-2);color:var(--ink)}
.thint{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint);letter-spacing:.1em}
.tclose{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.tscreen{flex:1;overflow:auto;border-radius:14px 14px 0 0;background:var(--bg);-webkit-overflow-scrolling:touch}
.tscreen > .cardbar,.tscreen > .addbar{margin:12px 12px 12px}
.tscreen > .cardgrid{padding:0 12px 30px}
/* peeking in from the near edge of the desk */
.tpeek{position:fixed;left:14px;bottom:calc(var(--trayh,0px) - 14px);z-index:22;display:none;width:170px;height:62px;border:0;cursor:pointer;
  border-radius:14px 14px 0 0;background:#141410;box-shadow:0 -6px 18px rgba(0,0,0,.55),inset 0 0 0 2px #2b2b24;
  padding:9px 9px 0;transition:transform .2s}
.tpeek i{position:absolute;inset:9px 9px 0;border-radius:8px 8px 0 0;
  background:linear-gradient(160deg,#2a3440,#1a1f26 60%);box-shadow:inset 0 0 20px rgba(120,200,230,.18)}
.tpeek b{position:relative;display:block;margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.18em;color:#bfe5f0}
.tpeek s{position:absolute;right:12px;top:12px;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9px;
  color:#7e8c93;border:1px solid #3c4a52;border-radius:3px;padding:0 4px}
.tpeek:hover{transform:translateY(-8px)}
body[data-view="room"] .tpeek{display:block}
body[data-view="room"][data-stop="mat"] .tpeek,body.tablet-on .tpeek{display:none}
@media (max-width:899px),(orientation:portrait){
  .tframe{height:calc(100vh - 64px);border-radius:20px 20px 0 0;padding:10px 8px 0}
  .thint{display:none}
  .tpeek{width:130px;height:54px;left:10px}
  .tpeek b{font-size:9px;letter-spacing:.12em}
}
.pcol{min-width:0}
.pcol span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.parrow{display:none}.pipe{gap:5px}.pcol{padding:7px 7px}.pcol b{font-size:22px}.pcol span{font-size:8.5px;letter-spacing:.06em}}
body[data-view="list"] main{max-width:none;padding:0}
body[data-view="list"] .decksview{margin:0;padding:18px 14px 90px}


/* ================= v6: room materials, inventory ================= */
.wall{background:var(--wallbg,var(--noise)) !important}
.desk{background:var(--deskbg,var(--noise)) !important}
.decksview{background:var(--deskbg) !important}
.matsws{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px}
.matsws button{position:relative;height:46px;border-radius:6px;border:2px solid transparent;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.matsws button[aria-pressed]{border-color:var(--accent)}
.matsws button s{position:absolute;left:0;right:0;bottom:0;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9px;
  background:rgba(10,10,8,.72);color:#f4ecda;padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* inventory: own · in decks · free, and sharing */
.invrow{display:flex !important;flex-wrap:wrap;gap:3px 6px;align-items:center;margin-top:5px !important}
.inv{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--muted);font-style:normal}
.inv.out{color:#b8743a}
.inv.none{color:var(--faint)}
.share,.inv.share{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;font-style:normal;color:#9a5a00;
  background:rgba(217,165,60,.18);border:1px solid rgba(217,165,60,.55);border-radius:3px;padding:0 4px}
.clist .nm .inv{display:block;margin-top:2px}
.clist .nm .inv.more{color:var(--s-build)}
.cardmeta .own .inv{font-size:12px}
.clist li.done .nm{text-decoration:none;color:var(--faint)}


/* ================= v7: paste, stats, prices, proxies, finishes ================= */
/* paste a list */
.sheet.paste textarea{width:100%;min-height:220px;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.5;
  padding:10px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;resize:vertical}
.acctmsg.ok{color:var(--s-build)}
.genlist li s{color:var(--faint)}

/* deck stats: cost curve, types, colours — counted in copies */
.dstatsw{margin:0 0 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.dstatsw summary{cursor:pointer;padding:8px 12px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
.dstatsw summary::before{content:"";width:0;height:0;border:5px solid transparent;border-left-color:var(--faint);margin-right:-2px;transition:transform .15s}
.dstatsw[open] summary::before{transform:rotate(90deg)}
.dstats{display:grid;gap:12px 22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:4px 12px 12px}
.dstats h6{margin:0 0 6px;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dstats h6 small{letter-spacing:.04em;text-transform:none;color:var(--muted);margin-left:6px}
.dstats .dim{grid-column:1/-1;margin:0;font-size:11px;color:var(--faint)}
.scurve{display:flex;gap:3px;align-items:flex-end;height:74px}
.scurve span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;position:relative}
.scurve i{display:block;width:100%;max-width:34px;background:var(--accent);border-radius:3px 3px 0 0;position:relative;overflow:hidden;min-height:0;flex:none}
.scurve i em{position:absolute;left:0;right:0;top:0;
  background:repeating-linear-gradient(135deg,rgba(20,21,15,.55) 0 3px,transparent 3px 6px)}
.scurve b{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink);line-height:1;margin:0 0 3px;order:-1;height:11px}
.scurve s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--faint);margin-top:4px;line-height:1}
.sbars{display:grid;gap:4px}
.sb{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;font-size:11.5px}
.sb i{grid-column:1/-1;order:3;display:block;height:6px;border-radius:3px;background:var(--accent);opacity:.9}
.sb b{font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px}
.sb u{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink)}

/* prices: TCGplayer market via Lorcast */
.sheet .line .val{color:var(--muted)} .sheet .line .val b.miss{color:var(--s-buy);font-weight:600} .sheet .line .val i{color:var(--faint);font-style:normal}
.clist .nm .pr{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--s-buy);margin-left:8px}
.clist .nm .pr:hover{text-decoration:underline}
.clist li.done .nm .pr{color:var(--faint)}
.card figcaption .price{font-style:normal;color:var(--s-buy)}
.cardmeta .line.price a{color:var(--accent)} .cardmeta .line.price small{color:var(--faint)}

/* your collection, summed up (Settings) */
.collrow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.collrow b{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;min-width:80px}
.collrow span{color:var(--muted)} .collrow em{margin-left:auto;font-style:normal;font-family:"JetBrains Mono",monospace;color:var(--s-buy)}
.setruns{display:grid;gap:5px;margin:10px 0 4px}
.setruns span{display:grid;grid-template-columns:52px 1fr 64px;gap:8px;align-items:center;font-size:11px}
.setruns b{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--muted)}
.setruns i{display:block;height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.setruns u{display:block;height:100%;background:var(--accent);text-decoration:none}
.setruns s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--faint);text-align:right}
.ownq .foil{color:var(--accent)}

/* ================= v7: the Room — lids, flat dividers at the mat, the playmat ================= */
/* a sticker on every lid, so a box reads from straight above (the Mat stop) */
.box .top .lid{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);padding:4px 5px;border-radius:3px;
  background:rgba(253,250,240,.9);color:#1b1712;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.box .top .lid b{display:block;font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:700;line-height:1}
.box .top .lid i{display:block;font-style:normal;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:9.5px;
  line-height:1.05;color:#4a3a28;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box.spare .top .lid{background:rgba(243,237,221,.85)} .box.spare .top .lid i{color:#8a7657;letter-spacing:.1em;text-transform:uppercase}
/* the group dividers stand up at Wall and Desk; from straight above they would
   be a line, so at the Mat they lie down on the desk and stay readable */
.rdiv .f{transition:transform .85s cubic-bezier(.65,0,.25,1)}
.room.noanim .rdiv .f{transition:none}
.room[data-stop="mat"] .rdiv .f{transform:rotateX(0deg);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.room[data-stop="mat"] .rdiv .f b{font-size:15px;color:#4a3a28}
/* the playmat's picture */
.mat.pic{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0f181d}
.mat.pic::before{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,14,.72),rgba(8,12,14,.25) 34%,transparent 60%)}
.mat.pic > *{position:relative}
.mat.pic .mt{color:rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.mat.pic .matempty{color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.mat .medit{position:absolute;right:14px;top:12px;font-size:12px;padding:6px 10px;opacity:.75}
.mat .medit:hover{opacity:1}
.mat.dealing.pic::before{display:none}

/* the TV: Twitch, Vimeo and your own video alongside YouTube */
.tv .tvpic video{width:100%;height:100%;object-fit:cover;display:block;background:#000;cursor:pointer}
.vph{font-size:9px;line-height:1.1;text-align:center;padding:0 3px}

.acctform.hidden{display:none}
#acctcode{letter-spacing:.35em;font-family:"JetBrains Mono",monospace;font-size:17px;text-align:center}

/* ---------- rich search (v8) ---------- */
.qwrap{position:relative;display:flex;flex:1 1 260px;min-width:0}
.qwrap input{flex:1;min-width:0;padding-right:34px}
.qhelp{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);cursor:pointer;font-weight:700}
.qhelp:hover{color:var(--accent);border-color:var(--accent)}
.qtips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.qtips[hidden]{display:none}
.qtips button{display:inline-flex;gap:6px;align-items:baseline;padding:5px 8px;border-radius:5px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:inherit;font-size:12px}
.qtips button:hover{border-color:var(--accent)}
.qtips code,.qtips p code{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--accent)}
.qtips span{color:var(--muted)}
.qtips p{flex-basis:100%;margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.qnote{flex-basis:100%;margin:0;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.qnote:empty{display:none}
.cardtext .abil{margin:8px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-line}

/* ---------- goldfish simulator (v8) ---------- */
.sheet.sim{width:min(980px,96vw)}
.simpick h6{margin:14px 0 6px}
.simchips{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto;padding:2px}
.simchips button{font:inherit;font-size:12px;padding:5px 8px;border-radius:5px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.simchips button.on{border-color:var(--accent);background:rgba(224,168,58,.14)}
.simchips s{text-decoration:none;color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:10px}
.simwrap{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:8px}
.simt{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:12.5px}
.simt th,.simt td{padding:6px 7px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.simt tr:first-child th{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);border-bottom:0}
.simt tr.sub th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400}
.simt th:first-child{text-align:left;position:sticky;left:0;background:var(--bg);min-width:170px;white-space:normal;font-weight:600}
.simt th:first-child s{text-decoration:none;color:var(--faint);font-weight:400;font-size:11px}
.simt .dr{color:var(--muted);border-right:1px solid var(--line)}
.simt tr.soft td{color:var(--faint)}
.simt tr.track th:first-child{color:var(--accent)}
.simhow{margin-top:10px;font-size:13px;color:var(--muted)}
.simhow summary{cursor:pointer;font-weight:600;color:var(--ink)}
.simhow p{line-height:1.55;margin:8px 0 0}

/* ---------- duels.ink mapping + testing record (v9) ---------- */
.testing{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.testing .trow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.testing .rec{font-family:"Bricolage Grotesque",sans-serif;font-size:20px}
.testing .rec .w,.mrec .w,.log td.w{color:var(--s-build)}
.testing .rec .l,.mrec .l,.log td.l{color:#d9605a}
.testing .tpct{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.testing .tdots{display:inline-flex;gap:3px;margin-left:auto}
.testing .tdots i{width:9px;height:9px;border-radius:2px;background:#d9605a}
.testing .tdots i.w{background:var(--s-build)}
.testing .tsplit{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--muted);align-items:center}
.testing .tsplit b{color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:12px}
.testing .tsplit s{text-decoration:none;color:var(--faint);font-size:11px}
.linkbtn{margin-left:auto;background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:12px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sheet.duelsmap{width:min(860px,96vw)}
.duelsmap h6{display:flex;align-items:center;gap:8px}
.duelsmap h6 s,.mfold summary s{text-decoration:none;color:var(--faint);font-weight:400}
.duelsmap h6 .mini{margin-left:auto;text-transform:none;letter-spacing:0}
.mlist{list-style:none;margin:0;padding:0}
.mrow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mrow .mfacts{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.mrow .mcol{font-weight:600}
.mrow .mrec{font-family:"JetBrains Mono",monospace;font-size:12px}
.mrow .mrec s,.mrow .mlast{text-decoration:none;color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:11px}
.mrow .msugg{grid-column:1;font-size:13px;color:var(--muted)}
.mrow .msugg b{color:var(--ink)}
.mrow .mact{grid-column:2;grid-row:1 / span 2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.mrow select{font:inherit;font-size:12.5px;padding:6px 8px;border-radius:5px;border:1px solid var(--line-strong);
  background:var(--sunk);color:var(--ink);max-width:210px}
@media (max-width:620px){.mrow{grid-template-columns:1fr}.mrow .mact{grid-column:1;grid-row:auto;justify-content:flex-start}}
.mfold{margin-top:12px}
.mfold summary{cursor:pointer;font-weight:600;padding:6px 0}

/* starter decks (v9) */
.sheet.starters .stlist h6 { margin: 14px 0 6px; }
.strows { display: grid; gap: 6px; }
.strow { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; text-align: left;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.strow:hover, .strow:focus-visible { border-color: var(--accent); }
.strow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strow .stmeta { grid-column: 2; opacity: .7; font-size: .85em; }
.stmiss { margin: 6px 0 0; padding-left: 18px; columns: 2 12em; font-size: .9em; }
.stmiss li { break-inside: avoid; }

/* ================= v10: Owned cards ================= */
.sheet.owned{width:min(760px,96vw)}
.owned .ogames,.owned .ofilt{margin:12px 0 0}
.owned .ofilt s{text-decoration:none;opacity:.6;font-family:"JetBrains Mono",monospace;font-size:10.5px;margin-left:3px}
.olist{list-style:none;margin:6px 0 0;padding:0}
.orow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.orow .thumb{width:44px;aspect-ratio:359/500;border-radius:4px;object-fit:cover;background:var(--surface-2);display:block}
.onm{min-width:0;display:flex;flex-direction:column;gap:3px}
.onm b{font-weight:700;font-size:14.5px}
.onm s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--faint)}
.onums{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.ouse{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted)}
.ouse i{font-style:normal}.ouse b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink)}
.oshare{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:3px;cursor:pointer}
.oshare input{width:18px;height:18px;accent-color:var(--accent)}
.oside{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.oside em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;text-align:right}
.oside em.buy{color:var(--s-building)}.oside em.chk{color:#e0776a;max-width:150px}.oside em.ok{color:var(--s-complete)}
.ostep{display:flex;align-items:center;gap:4px}
.ostep button{width:36px;height:36px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font-size:18px;cursor:pointer}
.ostep span{min-width:38px;text-align:center;display:flex;flex-direction:column;line-height:1}
.ostep span b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px}
.ostep span s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.oempty{padding:28px 0;text-align:center;color:var(--muted)}
@media (max-width:560px){.orow{grid-template-columns:40px 1fr}.oside{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}.oside em.chk{max-width:none;text-align:left}}
@media (max-width:520px){.brand small{display:none}.appbar{gap:8px}.tabs button{padding:6px 10px;font-size:13px}}
/* ---- v10 (27 Sep): phone fixes, drawer handle, draggable small set ---- */
/* Nothing may widen the page: iOS zooms a too-wide page out, which is what left
   the app bar covering only part of the screen. */
html,body{overflow-x:clip;max-width:100%}
/* iOS zooms into any field under 16px when it's focused, and often stays zoomed. */
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}
.tvgrip{position:absolute;left:0;right:0;top:0;height:22px;z-index:3;display:none;cursor:grab;touch-action:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.tvgrip i{position:absolute;left:50%;top:7px;width:34px;height:4px;margin-left:-17px;border-radius:2px;background:rgba(255,255,255,.55)}
.tv.pip .tvgrip,.tv.away .tvgrip{display:block}
.tv.pip .pipfoot,.tv.away .pipfoot{touch-action:none;cursor:grab}
.tv.dragging{box-shadow:0 18px 40px rgba(0,0,0,.6);cursor:grabbing;transition:none}
.tv.dragging iframe{pointer-events:none}
.tv.snapping{transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1)}

/* box skins: faces take the skin's backgrounds; the label stays cream on top */
.box.skinned .top{background:var(--sk-top);background-size:cover}
.box.skinned .front{background:var(--sk-front)}
.box.skinned .side,.box.skinned .sideL{background:var(--sk-side)}
.box.skinned .side{filter:brightness(.78)} .box.skinned .sideL{filter:brightness(.7)}
/* on a skinned lid the sticker moves to a corner so the art shows */
.box.skinned .top .lid{left:auto;right:6%;top:auto;bottom:7%;transform:none;padding:2px 5px;max-width:70%}
.box.skinned .top .lid i{display:none}
.box.skinned .front .lbl{flex:0 1 86%;margin:0 auto}
/* picking boxes for a batch change */
.room.picking .box{cursor:pointer}
.room.picking .box:not(.picked) .top{filter:saturate(.55) brightness(.8)}
.box.picked .top{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 3px var(--accent)}
.box.picked .front .lbl{box-shadow:0 0 0 3px var(--accent)}
.selbar{position:absolute;left:50%;bottom:14px;transform:translate(-50%,160%);z-index:12;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  justify-content:center;max-width:calc(100% - 20px);padding:8px 10px;border-radius:14px;background:rgba(20,21,15,.94);
  border:1px solid var(--line-strong);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.selbar.on{transform:translate(-50%,0)}
.selbar b{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--accent);margin-right:4px}
.selbar .mini:disabled{opacity:.4;cursor:default}
.rackf button[data-sel]{margin-left:2px;border-color:var(--line-strong)}
.room.picking ~ .rackf button[data-sel]{background:var(--accent);color:#1b1712}
/* design tiles in a sheet */
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin:6px 0 4px}
.skins button{border:2px solid transparent;border-radius:8px;background:none;padding:3px;cursor:pointer;color:var(--muted)}
.skins button.on{border-color:var(--accent);color:var(--ink)}
.skins i{display:block;aspect-ratio:104/64;border-radius:5px;background-size:cover !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.skins s{display:block;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10px;margin-top:4px;text-align:center}
@media (max-width:899px),(orientation:portrait){.selbar{bottom:62px;gap:4px;padding:6px 8px}.selbar .mini{padding:5px 8px;font-size:10px}}

/* the deal, flown in a flat screen-space layer (room.js flyCards) */
.dealfly{position:fixed;inset:0;z-index:19;pointer-events:none}
.dealfly .mstack{box-shadow:0 8px 18px rgba(0,0,0,.45)}

/* switching decks from the build bar in the Mat drawer */
.drawer .addbar b.switch,.dthead b.switch{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drawer .addbar b.switch::after,.dthead b.switch::after{content:" ⇅";color:var(--accent);font-weight:600}
.swlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-bottom:6px}
.swlist button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px 8px 12px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);border-left:4px solid var(--t,var(--accent));background:var(--surface);color:var(--ink)}
.swlist button b{font-family:"Bricolage Grotesque",sans-serif;font-size:14px}
.swlist button s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted)}
.swlist button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* the brand: the box-on-the-desk mark, with the name beside it on wider screens;
   a phone shows the mark alone so the tabs get the room */
a.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;flex:none}
.brand .mark{width:calc(var(--barh) - 12px);height:calc(var(--barh) - 12px);border-radius:7px;display:block;flex:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.35)}
.brand .words{display:block}
/* a phone shows the mark alone — no name, no tag line — so the tabs get the room */
@media (max-width:640px){.brand .words{display:none}.tabs{margin-left:auto}}

/* Den Pop posters (posters.js): SVG art, paper grain on top, one small loop each */
.poster .pbody .pv{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster .pbody:has(.pv)::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--noise);mix-blend-mode:multiply;opacity:.3}
.pv *{transform-box:fill-box}
.pv-bob{animation:pvbob 4s ease-in-out infinite}
.pv-foam{stroke-dasharray:4 6;animation:pvfoam 3s linear infinite}
.pv-flick{animation:pvflick 2.6s infinite}
.pv-moth{animation:pvdrift 5s ease-in-out infinite}.pv-moth2{animation:pvdrift 6.5s ease-in-out -2s infinite}
.pv-tw{animation:pvtw 2.4s ease-in-out infinite}.pv-tw2{animation:pvtw 3.1s ease-in-out -1s infinite}
.pv-blink{animation:pvblink 1.1s steps(1) infinite}
.pv-hop{animation:pvbob 1.6s ease-in-out infinite}
.pv-dash{animation:pvdash 1s linear infinite}
.pv-smoke{animation:pvsmoke 2.2s ease-in-out infinite;transform-origin:left center}
.pv-car{animation:pvslide 2.2s ease-in-out infinite;transform-box:view-box}
.pv-tail{animation:pvflick 1.3s infinite}
.pv-pennant,.pv-flag{animation:pvwave 1.4s ease-in-out infinite;transform-origin:left center}
.pv-birds{animation:pvbirds 9s linear infinite}
@keyframes pvbob{50%{transform:translateY(-4px)}}
@keyframes pvfoam{to{stroke-dashoffset:-40}}
@keyframes pvflick{0%,100%{opacity:.95}40%{opacity:.72}45%{opacity:1}70%{opacity:.85}}
@keyframes pvdrift{50%{transform:translate(8px,-10px) rotate(8deg)}}
@keyframes pvtw{50%{opacity:.2}}
@keyframes pvblink{50%{opacity:0}}
@keyframes pvdash{to{stroke-dashoffset:-13}}
@keyframes pvsmoke{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12) translateX(-4px);opacity:.75}}
@keyframes pvslide{0%,100%{translate:0 0}50%{translate:3px -1px}}
@keyframes pvwave{50%{transform:skewY(-8deg) scaleX(.92)}}
@keyframes pvbirds{0%{transform:translate(-20px,6px)}100%{transform:translate(220px,-14px)}}
@media (prefers-reduced-motion:reduce){.pv *{animation:none!important}}

/* deck from a prompt: where it runs, the coffee pool, your own key */
.genvia{display:grid;gap:6px;margin:4px 0 8px}
.genvia label{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:7px;cursor:pointer}
.genvia label.dim{opacity:.55;cursor:default}
.genvia input{margin-top:3px;accent-color:var(--accent)}
.genvia b{display:block;font-size:14px}.genvia s{display:block;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin-top:2px}
.genpool{margin:4px 0 10px}
.genpool .bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.genpool .bar i{display:block;height:100%;background:var(--accent)}
.genpool p{margin:5px 0 0;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted)}
.genpool a{color:var(--accent)}
.byok{margin:4px 0 10px}.byok summary{cursor:pointer;font-size:13px;color:var(--muted)}
.byok .fieldrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ================= v11: deck boxes as closed solids, with lids that open ================= */
/* Faces overlap their neighbours by a hair so no seam shows through; the old
   top had rounded corners over square sides, which is where the gaps were. */
.box .f{backface-visibility:visible}
.box .front{left:-.5px;width:calc(100% + 1px);border-radius:0}
.box .side,.box .sideL{top:-.5px;height:calc(100% + 1px);border-radius:0}
.box .back{height:var(--h);top:auto;bottom:100%;left:-.5px;width:calc(100% + 1px);transform-origin:bottom;transform:rotateX(-90deg);
  background:color-mix(in srgb,var(--c),black 22%)}
.box .inner{transform:translateZ(5px);background:linear-gradient(180deg,#0b0a08,#1c1813);box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
/* the lid: a group at the top of the box, hinged along the back edge */
.box .lidg{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 0;
  transform:translateZ(var(--h));transition:transform .45s cubic-bezier(.3,.7,.25,1)}
.box .lidg .top{transform:none;border-radius:0;left:-.5px;top:-.5px;width:calc(100% + 1px);height:calc(100% + 1px)}
.box .lk{display:none;background:color-mix(in srgb,var(--c),black 8%)}
.box .lkf{left:-.5px;width:calc(100% + 1px);height:var(--lh);top:100%;transform-origin:top;transform:rotateX(-90deg)}
.box .lkb{left:-.5px;width:calc(100% + 1px);height:var(--lh);top:0;transform-origin:top;transform:rotateX(-90deg);filter:brightness(.8)}
.box .lkl{width:var(--lh);height:calc(100% + 1px);top:-.5px;left:0;transform-origin:left;transform:rotateY(90deg);filter:brightness(.62)}
.box .lkr{width:var(--lh);height:calc(100% + 1px);top:-.5px;left:auto;right:0;transform-origin:right;transform:rotateY(-90deg);filter:brightness(.72)}
.box.skinned .lk,.box.skinned .back{background:var(--sk-side)}
/* tuck box: printed card stock; the top flap folds back */
.box.shape-tuck .front{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 10px 0 -8px rgba(255,255,255,.14)}
.box.shape-tuck.open .lidg{transform:translateZ(var(--h)) rotateX(118deg)}
/* flip-top: a deep lid with its own skirt, magnetic, hinged at the back */
.box.shape-flip{--lh:calc(var(--h) * .22)}
.box.shape-flip .lk{display:block}
.box.shape-flip .lkf{box-shadow:inset 0 -2px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.35)}
.box.shape-flip .front{padding-top:calc(var(--h) * .2)}
.box.shape-flip .lbl,.box.shape-shell .lbl{padding:4px 6px 5px}.box.shape-flip .lbl i,.box.shape-shell .lbl i{max-height:14px}
.box.shape-flip.open .lidg{transform:translateZ(var(--h)) rotateX(104deg)}
/* deck shell: hard plastic with a gloss; the cap lifts straight off */
.box.shape-shell{--lh:calc(var(--h) * .22)}
.box.shape-shell .lk{display:block}
.box.shape-shell .f:not(.inner){background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%,rgba(0,0,0,.12))}
.box.shape-shell.skinned .front{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 35%),var(--sk-front)}
.box.shape-shell .front{padding-top:calc(var(--h) * .2)}
.box.shape-shell .lidg .top{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c),black 18%),inset 0 0 18px rgba(255,255,255,.18)}
.box.shape-shell.open .lidg{transform:translateZ(calc(var(--h) + 64px)) rotateX(14deg) rotateZ(-6deg)}
/* the sticker stays put on a shut lid; it goes with the lid when it opens */
.box.open .top .lid{visibility:hidden}
@media (prefers-reduced-motion:reduce){.box .lidg{transition:none}}
.steps.shapes{margin-bottom:6px}

/* ---------------- v11: desks ---------------- */
body[data-view="room"]{overscroll-behavior-x:none}
.deskbar{position:absolute;right:10px;top:10px;z-index:9;display:flex;align-items:center;gap:2px;
  background:rgba(20,21,15,.82);border:1px solid var(--line);border-radius:999px;padding:3px}
.deskbar button{border:0;background:transparent;color:var(--muted);height:30px;min-width:30px;border-radius:999px;cursor:pointer;font-size:16px;font-weight:700}
.deskbar button:disabled{opacity:.3;cursor:default}
.deskbar .dkname{font-size:12.5px;font-weight:700;color:var(--ink);padding:0 10px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deskbar .dkname s{text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--faint);margin-left:4px}
.deskbar button:not(:disabled):hover{background:var(--surface-2);color:var(--ink)}
@media (max-width:899px),(orientation:portrait){
  .deskbar{right:auto;left:8px;top:44px;padding:2px}
  .deskbar button{height:26px;min-width:26px;font-size:14px}
  .deskbar .dkname{font-size:11px;max-width:130px;padding:0 6px}
}
.roomstage .room{transition:transform .23s cubic-bezier(.5,0,.75,0),opacity .23s}
.roomstage.deskout-l .room{transform:translateX(-18%);opacity:0}
.roomstage.deskout-r .room{transform:translateX(18%);opacity:0}
.roomstage.deskin-l .room{transform:translateX(-18%);opacity:0;transition:none}
.roomstage.deskin-r .room{transform:translateX(18%);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.roomstage .room{transition:none}}
.desksheet .desktabs{margin-bottom:4px}
.desksheet .dgames button{text-transform:none}
.picrow{align-items:center}
.picrow .steps{display:inline-flex;margin:0}
/* ---------------- v11: keyboard hints ---------------- */
.mini kbd{display:none;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;line-height:1;padding:2px 4px;margin-left:2px;
  border-radius:3px;background:rgba(0,0,0,.12);color:inherit;opacity:.75}
.mini.go kbd{background:rgba(0,0,0,.25)}
@media (hover:hover) and (pointer:fine){.dtray .mini kbd{display:inline-block}}
.keysl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 8px;align-items:center}
.keysl dt{white-space:nowrap}.keysl dd{margin:0;color:var(--muted);font-size:13.5px}
.keysl kbd,.keys kbd{display:inline-block;min-width:22px;text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
  padding:3px 6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line-strong);border-bottom-width:2px;color:var(--ink)}

/* ---------------- v11: Magic ---------------- */
/* Scryfall: never cover the artist / copyright line — no name bar over Magic art */
.mstack.mtg .nm{display:none}
.card .art img[src*="scryfall"]{object-fit:contain;background:#111}
.steps.mfmt{margin-bottom:6px}
.metanote.fan{font-size:9.5px;line-height:1.35;opacity:.8}
.card.mtgc .addq{position:relative;left:auto;right:auto;bottom:auto;margin-top:6px}

/* ---------------- v11: intake + imports ---------------- */
.sheet.intake{width:min(620px,96vw)}
.intake h6 .opt{text-decoration:none;font-weight:500;letter-spacing:.08em;color:var(--faint);margin-left:6px;text-transform:none}
.intake .steps.wide{margin-bottom:8px}
.tagrow,.fromrow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.tag{font:600 12.5px Karla,sans-serif;border:1px solid var(--line-strong);background:transparent;color:var(--muted);border-radius:999px;padding:5px 11px;cursor:pointer}
.tag.on{background:var(--surface-2);color:var(--ink);border-color:var(--accent)}
.fromrow .tag{font-size:11.5px;padding:4px 9px}
.intake textarea{width:100%;font:13px/1.45 "JetBrains Mono",monospace;background:var(--sunk);color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;padding:10px}
.drop{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;min-height:110px;padding:14px;cursor:pointer;
  border:2px dashed var(--line-strong);border-radius:8px;background:var(--sunk)}
.drop:hover{border-color:var(--accent)}
.drop b{font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
.drop s{text-decoration:none;font-size:12px;color:var(--faint)}
.howto{border-left:3px solid var(--accent);padding-left:10px}
.colmap summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin:6px 0}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:6px 0 10px}
.colgrid label{display:grid;gap:3px;font-size:11.5px;color:var(--muted)}
.colgrid select{font-size:13px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:5px}
.intake .mini.on{background:linear-gradient(180deg,#f6dc9c,#e2b85c)}
.cardbar.mtg #cmeta,.cardbar.mtg #carch,.cardbar.mtg #metanote{display:none}

/* ---------------- v11: the deck panel ---------------- */
.dprimary{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.mini.star{background:linear-gradient(180deg,#f6dc9c,#e0a83a);color:#2a1d08;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line-strong);margin:4px 0 12px;overflow-x:auto}
.dtabs button{border:0;background:transparent;color:var(--muted);font:700 13px Karla,sans-serif;padding:9px 12px;cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.dtabs button[aria-selected]{color:var(--ink);border-bottom-color:var(--accent)}
.dtabs kbd{display:none;font:700 9px "JetBrains Mono",monospace;padding:1px 4px;border-radius:3px;background:var(--surface-2);color:var(--faint)}
@media (hover:hover) and (pointer:fine){.dprimary .mini kbd,.dtabs kbd,.dpane .mini kbd{display:inline-block}}
.dpane h6:first-child{margin-top:4px}
.progtxt .linkbtn{margin-left:10px}
.dempty{padding:16px 0}.dempty p{margin:0 0 6px}

/* ---------------- v11: binders ---------------- */
.box.binder{cursor:grab}
.box.binder .f{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.1) 30%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.25)),var(--c)}
.box.binder .side,.box.binder .sideL{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2)),color-mix(in srgb,var(--c),black 25%)}
.box.binder .top{background:repeating-linear-gradient(90deg,#f3eee2 0 2px,#d9d2c0 2px 3px);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c),black 10%)}
.box.binder .front{padding:6px 4px;align-items:stretch}
.box.binder .spine{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.box.binder .spine b{writing-mode:vertical-rl;transform:rotate(180deg);background:#fbf5e6;color:#1b1712;border-radius:2px;padding:4px 2px;
  font:700 12px "JetBrains Mono",monospace;letter-spacing:.06em}
.box.binder .spine i{writing-mode:vertical-rl;transform:rotate(180deg);flex:1;min-height:0;overflow:hidden;font:800 10px "Bricolage Grotesque",sans-serif;color:rgba(255,255,255,.92);text-shadow:0 1px 1px rgba(0,0,0,.4)}
.box.binder .spine em{width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);flex:none}
.box.binder .spine u{display:none}
.box.binder .lidg{transition:none}
.box.binder.open .lidg{transform:translateZ(var(--h))}
.box.binder .top .lid{font-size:10px}
.box.binder.onmat .spine b{box-shadow:0 0 0 3px var(--accent)}
/* spines on the wall shelf */
.vhs.bspine{width:34px;height:100px;cursor:pointer}
.vhs.bspine i{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:10px;padding:8px 5px 30px;overflow:hidden}
.vhs.bspine .ring{position:absolute;left:50%;bottom:9px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);transform:translateZ(calc(var(--dp) + .5px))}
.vhs.bspine.onmat i::before{box-shadow:0 0 0 2px var(--accent)}
/* at the Mat a binder opens to pocket pages */
.mat.binderview{background:linear-gradient(90deg,transparent calc(50% - 7px),rgba(0,0,0,.35) calc(50% - 7px) calc(50% + 7px),transparent calc(50% + 7px)),
  repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px),linear-gradient(135deg,#2c2f36,#17191d)}
.mat.tall.binderview{background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px),linear-gradient(135deg,#2c2f36,#17191d)}
.mat.binderview .mstack .mart{box-shadow:0 0 0 5px rgba(235,240,245,.12),0 0 0 6px rgba(235,240,245,.25),0 3px 8px rgba(0,0,0,.4)}
.mat.binderview .mstack .mart::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 30%,transparent 70%,rgba(255,255,255,.08));pointer-events:none}

/* ---------------- v11: Awaiting as hanging files, and the list on paper ---------------- */
.qfile .tab.hang{overflow:visible;border-left:0;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#e6d4a3,#cdb782 70%,#bda772);
  box-shadow:0 -1px 0 rgba(0,0,0,.18),0 3px 6px rgba(0,0,0,.3)}
.qfile .tab.hang::after{content:"";position:absolute;left:-6px;right:-6px;top:3px;height:4px;border-radius:2px;background:linear-gradient(90deg,#8d9296,#c9ced2 50%,#8d9296)}
.qfile .tab.hang b{position:absolute;top:-22px;left:var(--tx,4%);right:auto;max-width:34%;height:24px;padding:3px 8px 0;z-index:2;
  background:rgba(255,255,255,.88);border:2px solid var(--t);border-bottom:0;border-radius:5px 5px 0 0;font-size:13px;line-height:1.2;
  box-shadow:0 -2px 4px rgba(0,0,0,.18)}
.qfile .tab.hang s{top:auto;bottom:6px;right:10px}
.qfile .tab.hang .meta{bottom:6px;right:52px}
.qfile .tab.hang:hover{transform:translateY(-8px)}
.qfile .tab.hang.onmat{box-shadow:0 0 0 3px var(--accent),0 3px 7px rgba(0,0,0,.35)}
.listpaper{position:absolute;z-index:11;display:none;overflow:auto;padding:16px 18px 14px;color:#2a2118;border-radius:3px;
  background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(90,140,200,.22) 21px 22px) 0 44px,#fffdf6;
  box-shadow:0 18px 40px rgba(0,0,0,.55);transform:rotate(-.8deg);animation:paperin .35s cubic-bezier(.2,.8,.2,1)}
.listpaper.on{display:block}
@keyframes paperin{from{transform:translateY(40px) rotate(-.8deg);opacity:0}to{transform:rotate(-.8deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.listpaper{animation:none}}
.listpaper .clipx{position:absolute;left:50%;top:-2px;width:64px;height:14px;margin-left:-32px;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#999,#6d6d6d)}
.listpaper .px{position:sticky;top:0;float:right;margin:-6px -6px 0 8px;border:0;cursor:pointer;background:#b3251f;color:#fff6ea;
  font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em;padding:6px 10px;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%)}
.listpaper h4{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.listpaper h4 b{font:800 18px "Bricolage Grotesque",sans-serif}
.listpaper h4 s{text-decoration:none;font:700 11px "JetBrains Mono",monospace;color:#b3251f}
.listpaper ol{list-style:none;margin:0;padding:0;columns:2 160px;column-gap:22px;font:500 12.5px/22px "JetBrains Mono",monospace}
.listpaper li{break-inside:avoid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listpaper li b{display:inline-block;min-width:22px;color:#6a5c48}
.listpaper li.got{color:#2f7d52}
.listpaper .linkbtn{display:block;margin:8px 0 0 auto;color:#8a5a14}