/* ============================================================
   TAVERNWRIGHT — styles
   Brand system extracted from the prototype.
   Palette: sandy canvas, walnut console, clay primary.
   Type: Spectral (serif) / Hanken Grotesk (sans) / JetBrains Mono.
   ============================================================ */
:root{
  --canvas:#d9d5c8; --console:#262219; --console-2:#1c1810; --line-dk:#3d362a;
  --clay:#8a4d2a; --clay-dk:#844a26; --clay-soft:#f1e1d6;
  --card:#f3f1e9; --card-2:#eef0e6; --card-3:#efece2; --inset:#ece9df;
  --border:#cdc5b2; --border-2:#e0d9c8; --border-3:#e3dccb;
  --ink:#211e15; --ink-2:#3a3326; --muted:#9a8d72; --muted-2:#7a6f5a; --cream:#eee9dd; --cream-2:#f7f1e7;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);font-family:var(--sans);color:var(--ink)}
.tw-app{height:100vh;min-height:660px;display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:var(--mono)} .serif{font-family:var(--serif)}
.kicker{font:600 9px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* ---- Site footer (shell chrome, all views) ----------------- */
.site-footer{flex:0 0 auto;background:#161310;color:#8f836c;position:relative;z-index:1}
.site-footer .sf-inner{max-width:1180px;margin:0 auto;padding:8px 18px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:flex-start;justify-content:space-between}
.site-footer .sf-brand{display:flex;align-items:center;gap:9px}
.site-footer .sf-badge{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.site-footer .sf-badge img{width:28px;height:28px;display:block}
.site-footer .sf-title{display:flex;flex-direction:column;line-height:1.15}
.site-footer .sf-name{display:flex;align-items:baseline;gap:7px}
.site-footer .sf-name b{font:700 17px var(--serif);color:#f1e7d4}
.site-footer .sf-name .sf-app{font:600 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#b2a482}
.site-footer .sf-ver{font:600 9px var(--mono);letter-spacing:.08em;color:#9a7b43;margin-top:0}
.site-footer .sf-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.site-footer .sf-link{font:600 12px var(--sans);color:#8f836c;text-decoration:none}
.site-footer .sf-link:hover{color:#cdbfa6}

/* ---- Top bar ------------------------------------------------ */
.topbar{height:50px;flex:0 0 auto;background:var(--console);display:flex;align-items:center;gap:14px;padding:0 16px;color:var(--cream)}
.tb-side{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.tb-right{justify-content:flex-end}
.brand{display:flex;align-items:center;gap:7px}
.brand .brand-mark{display:block;width:20px;height:20px;flex:0 0 auto}
.brand b{font:700 17px var(--serif);color:var(--cream)}
.brand span{font:600 9px var(--mono);letter-spacing:.2em;color:#b2a482}
.div-v{width:1px;height:18px;background:var(--line-dk)}
.sys-pick{display:flex;gap:2px}
.sys-pick button{font:600 13px var(--sans);color:#6a6048;padding-bottom:3px}
.sys-pick button.on{color:var(--cream);box-shadow:inset 0 -2px 0 var(--clay)}
.spacer{margin-left:auto}
.btn-clay{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:8px;background:var(--clay);border:1px solid var(--clay-dk);color:var(--cream-2);font:600 13px var(--sans)}
.btn-clay svg{stroke:currentColor}
.toggle{display:flex;background:var(--console-2);border:1px solid var(--line-dk);border-radius:9px;padding:3px}
.toggle button{padding:6px 16px;border-radius:6px;font:600 13px var(--sans);color:#b2a482}
.toggle button.on{background:var(--clay);color:var(--cream-2)}
.toggle.light{background:#ece9df;border-color:#cac3b3}
.toggle.light button{color:#5f5644;font:600 12px var(--sans);padding:5px 12px;border-radius:7px}
.toggle.light button.on{background:var(--clay);color:var(--cream-2)}
.remembered{display:flex;align-items:center;gap:6px;color:#e6dcc6;font:600 13px var(--sans)}
.remembered svg{fill:#c4a14b;stroke:#c4a14b}

/* ---- Stage -------------------------------------------------- */
.stage{flex:1;min-height:0;position:relative;overflow:hidden}
.scroll{position:absolute;inset:0;overflow:auto;padding:18px}
.wrap{max-width:1180px;margin:0 auto}

/* ---- Section heads / buttons -------------------------------- */
.row{display:flex;align-items:center;gap:10px}
.h-title{font:700 19px var(--serif);color:var(--ink)}
.h-sub{font:500 12px var(--sans);color:var(--muted)}
.btn-add{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:8px;background:var(--clay);border:1px solid var(--clay-dk);color:var(--cream-2);font:600 13px var(--sans);white-space:nowrap;flex:0 0 auto}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:8px;background:var(--card);border:1px solid #cac3b3;color:#5f5644;font:600 13px var(--sans)}
.btn-ghost.on{background:var(--clay);border-color:var(--clay-dk);color:var(--cream-2)}

/* ---- Identity card ------------------------------------------ */
.identity{display:flex;border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--card-2);margin:12px 0 14px}
.totem{width:150px;flex:0 0 auto;border-right:1px solid var(--border-2);background:#e7e4d8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px 10px}
.totem .sign{width:120px;height:175px;border-radius:8px;border:1px dashed #c2b89e;background:repeating-linear-gradient(135deg,#e7e1d2 0 7px,#e1dac9 7px 14px)}
.totem .sign-img{display:block;width:128px;height:auto;max-height:200px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(20,12,4,.32))}
.identity-body{flex:1;padding:14px 18px}
.tav-name{font:700 25px var(--serif);color:var(--ink)}
.pill{font:600 11px var(--sans);color:#a05a3a;background:var(--clay-soft);border:1px solid #e3c8b6;border-radius:6px;padding:3px 9px}
.ambient{display:flex;align-items:center;gap:18px;margin-top:11px;flex-wrap:wrap}
.amb{display:flex;align-items:center;gap:7px}
.amb b{font:600 12px var(--sans);color:var(--ink-2)}
.rightnow{font:italic 400 14px var(--serif);color:#6a6049;margin-top:10px}
.remember-box{width:128px;flex:0 0 auto;border-left:1px solid var(--border-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 8px;text-align:center}
.remember-box svg{fill:var(--clay);stroke:var(--clay)}
.remember-box b{font:700 16px var(--serif);color:var(--ink)}
.remember-box span{font:500 10px var(--sans);color:#8a7e64}

/* ---- Two columns: staff / visitors -------------------------- */
.cols{display:flex;gap:16px;align-items:flex-start}
.col{flex:1;min-width:0}
.col-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;padding:0 2px 7px;border-bottom:2px solid var(--border)}
.col-head b{font:700 16px var(--serif);color:var(--ink)}
.col-head span{font:600 11px var(--sans);color:var(--muted)}
.group{margin-bottom:12px;background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.group-head .lbl{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.group-name{font:600 11px var(--mono);letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.group-blurb{font:italic 400 12px var(--serif);color:var(--muted)}
.group-count{font:600 10px var(--sans);color:var(--muted)}
.people{display:flex;flex-direction:column;gap:7px}
.person{display:flex;align-items:center;gap:10px;background:#f6f4ec;border:1px solid var(--border-3);border-radius:9px;padding:8px 10px;cursor:pointer;transition:all .14s ease}
.person:hover{border-color:#c9bfa3;box-shadow:0 3px 8px rgba(33,24,12,.1);transform:translateY(-1px)}
.person .pdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.person .pbody{flex:1;min-width:0}
.pname-row{display:flex;align-items:baseline;gap:7px}
.pname{font:600 14px var(--serif);color:var(--ink)}
.pmeta{font:600 10px var(--sans);color:var(--muted)}
.pdesc{font:400 12px/1.35 var(--sans);color:var(--muted-2)}
.star{flex:0 0 auto;cursor:pointer}

/* ---- Legend ------------------------------------------------- */
.legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;padding:0 2px}
.legend .li{display:flex;align-items:center;gap:6px;font:500 11px var(--sans);color:#6f6450}
.legend .li i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---- The room panel (atmosphere / menu / band / hooks) ------ */
.room-panel{margin:14px 0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.panel{background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.panel h4{margin:0 0 8px;font:600 9px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.panel .atmo{font:italic 400 13px/1.5 var(--serif);color:var(--muted-2)}
.menu-line{display:flex;justify-content:space-between;gap:10px;font:500 13px var(--sans);color:var(--ink-2);padding:3px 0;border-bottom:1px dashed var(--border-2)}
.menu-line .price{color:var(--clay);font-weight:600;white-space:nowrap}
.special{margin-top:8px;background:#f1e4d6;border:1px solid #e2cdb4;border-radius:8px;padding:8px 10px}
.special b{font:600 13px var(--sans);color:#5a3c22}
.special em{display:block;font:italic 400 12px var(--serif);color:#8a6a44;margin-top:2px}
.hook{font:400 13px/1.45 var(--sans);color:var(--ink-2);padding:4px 0}
.band b{font:600 14px var(--serif);color:var(--ink)}
.band p{margin:4px 0 0;font:400 12px/1.45 var(--sans);color:var(--muted-2)}

/* ---- Board -------------------------------------------------- */
.board{position:absolute;inset:0;display:flex;flex-direction:column}
.board-bar{flex:0 0 auto;background:#e7e3d6;border-bottom:1px solid #cac3b3;display:flex;align-items:center;gap:12px;padding:9px 16px;flex-wrap:wrap}
.board-bar .tav-name{font:700 17px var(--serif)}
.board-tools{flex:0 0 auto;background:#ece8db;border-bottom:1px solid #cac3b3;display:flex;align-items:center;gap:10px;padding:8px 16px;flex-wrap:wrap}
.board-zoom{display:none;align-items:center;gap:10px}  /* zoom is only needed on mobile — shown via mobile.css */
.board-scroll{flex:1;min-height:0;position:relative;overflow:auto;background:radial-gradient(80% 80% at 46% 44%,#efe7d4,#ddd3bd)}
/* The canvas is a FIXED pixel space; the SVG uses the same px units (no viewBox),
   so every thread endpoint lands exactly on its node. .board-stage sizes to the
   ZOOMED canvas so the scroll area stays correct; .board-canvas is scaled inside it. */
.board-stage{position:relative;min-width:100%;min-height:100%}
.board-canvas{position:relative;touch-action:none}
.threads{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;filter:drop-shadow(0 2px 1.5px rgba(20,10,4,.26))}
.thread-hit{stroke:transparent;stroke-width:20;fill:none;pointer-events:stroke;cursor:pointer}
.edge-dot{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:2px solid #f3f1e9;box-shadow:0 1px 3px rgba(20,12,4,.45);cursor:pointer;z-index:4;transition:transform .1s ease}
.edge-dot:hover{transform:translate(-50%,-50%) scale(1.35)}
.tag{position:absolute;transform:translate(-50%,-50%) scale(1);transform-origin:center center;padding:2px 10px;font:italic 600 11px var(--serif);color:#5e4420;z-index:6;white-space:nowrap;pointer-events:auto;cursor:pointer;background:linear-gradient(155deg,#f4e9cb,#e6d2a1);border:1px solid #c7b687;border-radius:9px 4px 8px 5px/5px 9px 4px 8px;box-shadow:0 2px 4px rgba(20,12,4,.3);transition:transform .22s cubic-bezier(.34,1.45,.5,1)}
.tag::before{content:"";position:absolute;inset:-2px -3px;z-index:-1;background:inherit;border:1px solid #c7b687;border-radius:inherit;filter:url(#tag-torn)}
@media (hover:hover){.tag:hover{transform:translate(-50%,-50%) scale(2);z-index:60}}
.tag.big{transform:translate(-50%,-50%) scale(2);z-index:60}
.connect-pill{position:absolute;left:50%;top:112px;transform:translateX(-50%);background:#211c12;color:#e9e0cc;border-radius:999px;padding:10px 18px;display:flex;align-items:center;gap:10px;font:600 13px var(--sans);box-shadow:0 8px 24px rgba(10,6,2,.42);z-index:20;white-space:nowrap}
.connect-pill b{color:#e9c98a}
.connect-pill .cancel{color:#d9a85a;cursor:pointer;font-weight:600}
.node{position:absolute;transform:translate(-50%,-50%);background:#f7f4ec;border:1px solid var(--border-3);border-radius:10px;padding:7px 10px;width:156px;box-shadow:0 3px 9px rgba(33,24,12,.16);cursor:grab;z-index:3;user-select:none;touch-action:none}
.node:hover{box-shadow:0 8px 18px rgba(33,24,12,.24);border-color:#c2a878}
.node:active{cursor:grabbing}
.node.focused{border-color:var(--clay);box-shadow:0 0 0 3px rgba(148,82,48,.25)}
.node .nrow{display:flex;align-items:center;gap:6px}
.node .ndot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.node .nname{font:600 13.5px var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.node .nstar{flex:0 0 auto;cursor:pointer;display:flex}
.node .nmeta{font:600 9.5px var(--sans);color:var(--muted);margin-top:2px}
.node .ndesc{font:400 10.5px/1.32 var(--sans);color:#7a6f5a;margin-top:2px}
/* hover-highlight: fade everyone not in the hovered card's web */
.board-canvas .node.dim{opacity:.24;transition:opacity .12s ease}
.board-canvas .thread.dim,.board-canvas .edge-dot.dim,.board-canvas .tag.dim{opacity:.1;transition:opacity .12s ease}

/* ---- Popovers / modals -------------------------------------- */
.overlay{position:absolute;inset:0;background:rgba(26,18,9,.5);z-index:40;display:flex;align-items:center;justify-content:center}
.modal{width:560px;max-width:92vw;max-height:88vh;overflow:auto;background:var(--card);border:1px solid #cac3b3;border-radius:14px;box-shadow:0 26px 64px rgba(10,6,2,.5)}
.modal-head{background:linear-gradient(100deg,#2e2719,#231c12);padding:14px 18px;color:var(--cream)}
.modal-head .k{font:600 10px var(--mono);letter-spacing:.13em;color:#c4a14b;text-transform:uppercase}
.modal-head .t{font:700 23px var(--serif);color:#f0e6d0;margin-top:2px}
.modal-body{padding:16px 18px}
.field{margin-bottom:14px}
.field>label{display:block;font:600 9px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.namebox{display:flex;gap:8px}
.namebox input{flex:1;height:44px;border:1px solid #cac3b3;border-radius:9px;background:var(--inset);padding:0 14px;font:600 17px var(--serif);color:var(--ink)}
.dice{width:44px;height:44px;border-radius:9px;background:var(--clay);border:1px solid var(--clay-dk);color:var(--cream-2);display:grid;place-items:center}
.dd{position:relative}
.dd-btn{width:100%;height:40px;border:1px solid #cac3b3;border-radius:9px;background:var(--inset);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:600 14px var(--sans);color:var(--ink-2)}
.dd-menu{position:absolute;left:0;right:0;top:44px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 28px rgba(20,12,4,.3);z-index:50;overflow:hidden;max-height:240px;overflow-y:auto}
.dd-opt{padding:9px 12px;font:600 13px var(--sans);color:var(--ink-2);cursor:pointer}
.dd-opt:hover{background:var(--card-3)}
.dd-opt.active{background:var(--clay);color:var(--cream-2)}
.setup-actions{display:flex;gap:10px;margin-top:6px}
.btn-primary{flex:1;height:46px;border-radius:10px;background:var(--clay);border:1px solid var(--clay-dk);color:var(--cream-2);font:700 14px var(--sans)}
.btn-soft{height:46px;padding:0 14px;border-radius:10px;background:var(--card-3);border:1px solid var(--border);color:var(--muted-2);font:600 13px var(--sans)}
.menu-pop{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:0 12px 28px rgba(20,12,4,.3);z-index:30;overflow:hidden;width:212px}
.menu-pop .mh{padding:9px 12px;border-bottom:1px solid var(--border-2)}
.menu-pop .mi{display:flex;align-items:center;gap:8px;padding:7px 12px;font:600 12px var(--sans);color:#5a5142;cursor:pointer}
.menu-pop .mi:hover{background:var(--card-3)}

/* ---- Person detail card (focus) ----------------------------- */
.detail .modal-head{border-bottom:2px solid var(--clay)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag-chip{font:600 11px var(--sans);color:#e6c98c;background:rgba(196,161,75,.14);border:1px solid #5a4a2a;border-radius:6px;padding:3px 9px}
.detail-grid{display:flex}
.detail-left{width:208px;flex:0 0 auto;background:var(--inset);border-right:1px solid var(--border-2);padding:13px}
.detail-right{flex:1;min-width:0;padding:13px 15px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--card);border:1px solid var(--border-2);border-radius:9px;padding:8px 3px;text-align:center;min-width:0}
.stat .v{font:700 20px var(--serif);color:var(--ink);line-height:1}
.stat .k{font:600 8px var(--mono);letter-spacing:.02em;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.defense{display:flex;gap:8px;margin:10px 0}
.def-box{flex:1;background:var(--card);border:1px solid var(--border-2);border-radius:9px;padding:7px;text-align:center}
.def-box .v{font:700 18px var(--serif);color:var(--ink)}
.def-box .k{font:600 8px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font:500 11px var(--sans);color:#4a4234;background:var(--card);border:1px solid var(--border-2);border-radius:6px;padding:4px 8px}
.attack{margin-top:7px;background:#f1e4d6;border:1px solid #e2cdb4;border-radius:8px;padding:7px 9px}
.attack b{font:600 12px var(--sans);color:#5a3c22}
.attack span{display:block;font:600 8px var(--mono);letter-spacing:.05em;color:#a06a3c;text-transform:uppercase;margin-top:2px}
.read{font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.motive,.secret{margin-top:9px;border-radius:8px;padding:9px 11px}
.motive{background:#f1e4d6;border:1px solid #e2cdb4;border-left:3px solid #9d5a33}
.secret{background:#efe9d6;border:1px solid #e0d3a8;border-left:3px solid #9a7b1e}
.motive .k,.secret .k{font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.motive .k{color:#9d5a33}.secret .k{color:#9a7b1e}
.motive p,.secret p{margin:0;font:400 13px/1.4 var(--sans)}
.motive p{color:#5a3c22}.secret p{color:#5a4a22}
.detail-foot{padding:12px 15px;border-top:1px solid var(--border-2);background:#f6f3ea}
.ssub{font:600 10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.conns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.conn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border-2);border-radius:9px;padding:8px 11px;min-width:150px}
.conn i{width:18px;height:3px;border-radius:2px;flex:0 0 auto}
.conn .cn b{display:block;font:600 13px var(--serif);color:var(--ink)}
.conn .cn span{font:italic 500 11px var(--sans);color:var(--muted)}

/* ---- thread editor popover ---------------------------------- */
.thread-pop{position:absolute;width:262px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 32px rgba(20,12,4,.34);z-index:70;overflow:hidden}
.thread-pop .th{background:var(--console);padding:8px 13px;display:flex;align-items:center;justify-content:space-between;color:#c4a14b;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.thread-pop .tb{padding:12px 13px}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.seg .opt{font:600 11px var(--sans);border-radius:7px;padding:4px 9px;border:1px solid var(--border);background:var(--inset);color:#5f5644;cursor:pointer}
.seg .opt.on{background:var(--clay);border-color:var(--clay-dk);color:var(--cream-2)}
.thread-pop input{width:100%;height:34px;border:1px solid #cac3b3;border-radius:7px;background:var(--inset);padding:0 10px;font:500 13px var(--sans);color:var(--ink-2)}
.thread-foot{display:flex;gap:8px;margin-top:10px}
.thread-foot button{flex:1;height:32px;border-radius:7px;font:600 12px var(--sans)}
.btn-del{background:#f6e7e2;border:1px solid #e3c2b8;color:#b2503f}

.muted{color:var(--muted)} .small{font-size:12px}
@media (max-width:780px){ .cols{flex-direction:column} .room-panel{grid-template-columns:1fr} .identity{flex-wrap:wrap} }

/* ---- Landing / tavern generator ----------------------------- */
.landing{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:var(--canvas);overflow:auto}
.landing .logo{width:360px;max-width:78vw;height:auto;filter:drop-shadow(0 10px 22px rgba(40,28,12,.20))}
.landing .tagline{font:italic 500 17px var(--serif);color:#6a6049;margin-top:-6px}
.gen-bar{display:flex;align-items:center;gap:10px;background:#f7f5ee;border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:0 12px 32px rgba(40,28,12,.13);flex-wrap:wrap;justify-content:center;max-width:96vw}
.gen-bar input{height:46px;width:236px;border:1px solid #cac3b3;border-radius:9px;background:#fff;padding:0 14px;font:600 16px var(--serif);color:var(--ink)}
.gen-dd{position:relative}
.gen-dd .dd-btn{height:46px;min-width:148px;background:#fff}
.gen-bar .dice{width:46px;height:46px}
.gen-open{height:46px;padding:0 18px;border-radius:9px;background:var(--clay);border:1px solid var(--clay-dk);color:var(--cream-2);font:700 14px var(--sans);display:inline-flex;align-items:center;gap:8px}
.gen-surprise{background:none;border:none;color:#7a6f5a;font:600 13px var(--sans);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.gen-surprise svg{stroke:#7a6f5a}
/* landing layout switch (Classic / Open) */
/* Centered segmented layout switch under the tagline (matches Shoppekeep). */
.landing-switch{display:inline-flex;align-items:center;gap:9px;z-index:6}
.landing-switch .ls-lab{font:600 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.landing-switch .ls-seg{display:inline-flex;gap:3px;background:#e6ded0;border:1px solid var(--border);border-radius:9px;padding:3px}
.landing-switch .ls-btn{padding:5px 12px;border:none;background:none;color:var(--muted-2);font:700 11px var(--sans);cursor:pointer;border-radius:7px}
.landing-switch .ls-btn.on{background:var(--clay);color:var(--cream-2)}
/* open variant: scrolls from the top, smaller logo to make room */
.landing-open{justify-content:flex-start;padding-top:30px;gap:12px}
.landing-open .logo{width:248px}
.open-panel{width:860px;max-width:94vw;background:#eee9dd;border:1px solid #d2ccbd;border-radius:18px;box-shadow:0 14px 36px rgba(40,28,12,.14);padding:22px 24px 24px;margin-top:2px}
.op-h{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8d8264;margin-bottom:9px}
.op-sec{margin-top:18px}
.open-panel .op-sec:first-child{margin-top:2px}
.op-center{text-align:center}
.seg2-center{justify-content:center}
.name-trouble{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.name-trouble .trouble-col{display:flex;flex-direction:column}
.name-trouble .trouble-col .seg2-row{margin-top:9px;min-height:48px;align-items:center}
.seg2-row{display:flex;gap:8px;flex-wrap:wrap}
.seg2{padding:9px 16px;border:1px solid #d2ccbd;border-radius:9px;background:#e8e1cd;color:#3b372d;font:600 13px var(--sans);cursor:pointer}
.seg2:hover{border-color:var(--clay);background:#e2dac4}
.seg2.on{background:var(--clay);border-color:var(--clay-dk);color:#eee9dd}
.seg2.on:hover{background:var(--clay);color:#eee9dd}
/* the house — hero cards */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bgrp{cursor:pointer;border:1px solid #d2ccbd;background:#e8e1cd;border-radius:12px;transition:border-color .12s,background .12s}
.bgrp:hover{border-color:var(--clay);background:#e2dac4}
.bgrp .bg-ico{color:#968a6b;display:inline-flex}
.bgrp.sel{background:var(--clay);border-color:var(--clay-dk)}
.bgrp.sel:hover{background:var(--clay)}
.bgrp.sel .bg-label{color:#eee9dd}
.bgrp.sel .bg-ico{color:#eee9dd}
.bgrp.card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:15px 10px;min-height:104px;text-align:center}
.bgrp.card .bg-ico{width:36px;height:36px;border-radius:9px;background:#ddd4bf;align-items:center;justify-content:center}
.bgrp.card.sel .bg-ico{background:rgba(255,255,255,.16)}
.bgrp.card .bg-label{font:700 14px var(--serif);color:#3b372d;line-height:1.2}
.bgrp.card .bg-sub{display:block;margin-top:2px;font:400 10.5px var(--sans);letter-spacing:.01em;color:#9a8e72}
.bgrp.card.sel .bg-sub{color:#ddd2bb}
/* where it stands — tiles */
.tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.bgrp.tile{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px}
.bgrp.tile .bg-label{font:600 13.5px var(--sans);color:#3b372d}
.bgrp.card.sel .bg-label,.bgrp.tile.sel .bg-label{color:#eee9dd}
/* name + cta */
.op-h-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.op-hint{font:italic 400 12px var(--serif);color:#968a6b}
.name-line{display:flex;gap:10px;margin-top:9px}
.name-line input{flex:1;height:48px;border:1px solid #cac3b3;border-radius:10px;background:#fbfaf5;padding:0 16px;font:600 18px var(--serif);color:var(--ink)}
.name-line .dice{width:48px;height:48px}
.open-cta{width:100%;height:50px;margin-top:18px;border:1px solid var(--clay-dk);border-radius:11px;background:var(--clay);color:#eee9dd;font:700 15px var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.open-cta:hover{background:var(--clay-dk)}
.op-surprise{margin-top:13px;width:100%;justify-content:center;color:var(--clay)}
.op-surprise svg{stroke:var(--clay)}
@media (max-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}.tile-row{grid-template-columns:repeat(2,1fr)}.name-trouble{grid-template-columns:1fr}}

/* ---- Scene action buttons ----------------------------------- */
.scene-actions{display:flex;align-items:center;gap:8px;margin-left:auto;position:relative;flex:0 0 auto}

/* ---- Menu / Room modal lists -------------------------------- */
.modal .sec-h{font:600 9px var(--mono);letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin:14px 0 7px}
.modal .sec-h:first-child{margin-top:2px}
.modal .atmo-prose{font:italic 400 15px/1.55 var(--serif);color:#5a5142}
.modal .band-line b{font:600 15px var(--serif);color:var(--ink)}
.modal .band-line p{margin:4px 0 0;font:400 13px/1.45 var(--sans);color:var(--muted-2)}
.modal .hook{font:400 13px/1.5 var(--sans);color:var(--ink-2);padding:4px 0}

/* ---- checkbox (add-tie + remember) -------------------------- */
.checkbox{width:20px;height:20px;border-radius:6px;border:1.5px solid #b9ad94;background:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--sans);color:#fff;flex:0 0 auto}
.checkbox.on{background:var(--clay);border-color:var(--clay-dk)}
.menu-pop .tie-row{border-bottom:1px solid var(--border-2)}

/* ---- detail header / abilities / combat / footer ------------ */
.modal.detail{width:610px}
.modal-head{display:flex;align-items:flex-start;gap:10px}
.modal-head .t{flex:1;min-width:0}
.head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chev{width:30px;height:28px;border-radius:7px;border:1px solid #5a4a2a;background:rgba(196,161,75,.12);color:#e6c98c;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.chev:hover{background:rgba(196,161,75,.22)}
/* detail header: stacked role+name, inline name controls, ancestry dropdown */
.head-main{flex:1;min-width:0}
.t-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.t-row .t{flex:0 1 auto;margin-top:0}
.name-ico{width:24px;height:24px;border-radius:6px;border:1px solid #5a4a2a;background:rgba(196,161,75,.12);color:#e6c98c;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;font-size:13px}
.name-ico:hover{background:rgba(196,161,75,.24)}
.name-ico svg{stroke:currentColor}
.name-input{font:700 20px var(--serif);color:#f5ecd6;background:rgba(255,255,255,.08);border:1px solid #5a4a2a;border-radius:6px;padding:1px 8px;min-width:0;flex:1 1 auto}
.race-dd-wrap{position:relative}
.tag-btn{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.tag-btn:hover{background:rgba(196,161,75,.22)}
.race-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;background:var(--card);border:1px solid #cac3b3;border-radius:9px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.2);max-height:264px;overflow:auto;min-width:128px}
.race-opt{font:600 12px var(--sans);color:#4a4234;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.race-opt:hover{background:#efe7d6}
.race-opt.active{background:var(--clay);color:var(--cream-2)}
/* per-section reroll icon */
.ssub-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini-reroll{width:22px;height:20px;border-radius:5px;border:1px solid #d4ccbb;background:var(--card);color:#9a8d72;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mini-reroll:hover{background:#efe7d6;color:#6f6450}
.mini-reroll svg{stroke:currentColor}
.abilities{display:flex;flex-direction:column;gap:6px}
.ability{background:var(--card);border:1px solid var(--border-2);border-radius:8px;padding:8px 10px;font:600 12px var(--sans);color:#4a4234}
.combat{margin-top:12px;background:var(--card);border:1px solid var(--border-2);border-radius:9px;padding:10px 11px}
.combat .cline{font:700 14px var(--serif);color:var(--ink)}
.combat .catk{font:600 12px var(--sans);color:#5a3c22;margin-top:4px}
.combat .crole{font:600 8px var(--mono);letter-spacing:.06em;color:#a06a3c;text-transform:uppercase;margin-top:3px}
.foot-bar{display:flex;align-items:center;gap:9px}
.foot-bar .spacer{flex:1}
.remember-check{display:flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--ink-2);cursor:pointer}

/* ---- thread editor: colour-coded type pills + picker -------- */
.rt-seg .rt-opt{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--sans);border-radius:7px;padding:4px 9px 4px 7px;border:1px solid var(--border);background:#fff;color:#4a4234;cursor:pointer}
.rt-seg .rt-opt i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.rt-seg .rt-opt.on{border-color:#b6a27a;background:#f3ead9;box-shadow:inset 0 0 0 1px #d8c39a}
.thread-pop .hint{font:italic 400 11.5px/1.4 var(--serif);color:#8a7f68;margin:-2px 0 9px}
.color-row{display:flex;align-items:center;gap:9px;margin:-2px 0 10px}
.color-row input[type=color]{width:34px;height:26px;padding:0;border:1px solid #cac3b3;border-radius:6px;background:#fff;cursor:pointer}
.color-row .cl{font:600 11px var(--sans);color:#5f5644}
.color-row .reset-col{font:600 11px var(--sans);color:var(--clay);cursor:pointer;margin-left:auto}
.seg .opt{cursor:pointer}

/* ---- info-bar meters + Food/Vibe buttons -------------------- */
.amb .meter{display:inline-flex;gap:2px}
.amb .meter i{width:11px;height:8px;border-radius:2px;background:#d8cfba;border:1px solid #cdc3ac}
.amb .meter i.on{background:#7a4a2a;border-color:#6a3f22}
.tav-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:12px 14px;border-left:1px solid var(--border-2);background:var(--card-2)}
.tav-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-width:106px;height:38px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:#faf8f1;font:600 13px var(--sans);color:#5a5142;cursor:pointer}
.tav-btn:hover{border-color:#c2a878;background:#fff}
.tav-btn svg{color:var(--clay)}

/* ---- board-style modals (Food + Vibe) ----------------------- */
.modal.board-modal{width:625px;max-width:94vw;display:flex;flex-direction:column;max-height:88vh;overflow:hidden}
.board-head{flex:0 0 auto;background:linear-gradient(100deg,#2e2719,#231c12);padding:13px 16px;display:flex;align-items:center;gap:10px;color:var(--cream)}
.bh-left{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.bh-badge{width:34px;height:34px;border-radius:9px;background:var(--clay);display:inline-flex;align-items:center;justify-content:center;color:#f3e7d6;flex:0 0 auto}
.bh-badge.spark{background:#a9762f}
.board-head .bk{font:600 9px var(--mono);letter-spacing:.14em;color:#c4a14b;text-transform:uppercase}
.board-head .bt{font:700 20px var(--serif);color:#f0e6d0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bh-btn{height:32px;padding:0 13px;border-radius:8px;border:1px solid #5a4a2a;background:rgba(196,161,75,.12);color:#e6c98c;font:600 12px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bh-btn:hover{background:rgba(196,161,75,.22)}
.bh-x{width:30px;height:30px;border-radius:7px;border:1px solid #4a4030;background:rgba(255,255,255,.05);color:#cbb896;font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.board-body{flex:1;min-height:0;overflow:auto;padding:16px 20px;background:#f5f1e7}
.board-body .sec-h{font:600 9px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin:16px 0 9px}
.board-body .sec-h.gold{color:#b0863a;margin-top:2px}

/* menu items */
.m-item{margin-bottom:13px}
.m-item .m-top{display:flex;align-items:baseline;gap:6px}
.m-item .m-top b{font:600 15px var(--serif);color:var(--ink);flex:0 1 auto}
.m-item .m-leader{flex:1 1 auto;min-width:14px;height:0;border-bottom:1px dotted #d0c3a4;transform:translateY(-4px)}
.m-item .m-price{font:600 12px var(--mono);color:#9a5a2a;white-space:nowrap;flex:0 0 auto}
.m-item .m-price.free{color:var(--muted)}
.m-item i{display:block;font:italic 400 12.5px var(--serif);color:#8a7f68;margin-top:1px}
.m-section{background:#faf6ec;border:1px solid #e7ddc6;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.m-section .m-item:last-child{margin-bottom:0}
.m-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:0}
.m-cols .m-section{margin-bottom:0}

/* vibe */
.vibe-quote{font:600 23px/1.28 var(--serif);color:var(--ink);margin:2px 0 12px}
.vibe-prose{font:400 14.5px/1.6 var(--sans);color:var(--ink-2)}
.vibe-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:18px}
.chips.vert{flex-direction:column;align-items:flex-start}
.notice-box{margin-top:18px;background:#efe9d8;border:1px solid #e0d6b8;border-radius:10px;padding:11px 14px}
.notice{display:flex;align-items:flex-start;gap:9px;padding:4px 0}
.notice .eye{color:#9a8048;flex:0 0 auto;margin-top:2px}
.notice i{font:italic 400 13.5px/1.45 var(--serif);color:#5f5642}
.conns-box{margin-top:16px;background:#ece9e0;border:1px solid #dcd5c4;border-radius:10px;padding:11px 14px}
.conn{display:flex;align-items:center;gap:9px;padding:4px 0}
.conn-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.conn-names{font:600 13.5px var(--sans);color:var(--ink)}
.conn-amp{color:var(--muted);font-weight:400}
.conn-rel{font:italic 400 13px var(--serif);color:#6a6150}
.conn-rel::before{content:"— ";color:var(--muted)}
.conn-empty{font:italic 400 13px var(--serif);color:var(--muted);padding:3px 0}

/* ---- detail: bearing line + clothing chip ------------------- */
.bearing{font:italic 400 13px/1.5 var(--serif);color:#6a6049}
.chip.cloth{background:#efe7d6;border-color:#dccdb6;color:#6a5a44}

/* ============================================================
   PAINT PICKER (Choose Your Paint) — creation page
   ============================================================ */
.paint-dd{position:relative}
.paint-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:var(--inset);color:var(--ink-2);font:600 13px var(--sans);cursor:pointer}
.paint-btn .paint-cur{position:relative;width:20px;height:20px;flex:0 0 auto;border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.paint-btn .paint-lab{white-space:nowrap}
.paint-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:60;padding:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 36px rgba(20,12,4,.34);display:grid;grid-template-columns:repeat(8,1fr);gap:7px;max-height:300px;overflow:auto;width:max-content;max-width:min(96vw,360px)}
.paint-sw{position:relative;width:30px;height:30px;border-radius:7px;overflow:hidden;cursor:pointer;box-shadow:0 0 0 2px rgba(120,100,70,.22)}
.paint-sw:hover{box-shadow:0 0 0 2px var(--clay)}
.paint-sw.sel{box-shadow:0 0 0 2px var(--clay),0 0 0 4px rgba(138,77,42,.3)}
/* classic form: stack the choices row and the paint+CTA row */
.gen-bar{flex-direction:column}
.gen-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.gen-row-cta{gap:12px}

/* ============================================================
   DARK THEME — applied on .tw-app.tw-dark when a dark paint is
   chosen. Additive layer only; the light rules above are untouched.
   ============================================================ */
.tw-app.tw-dark{
  --card:#2b2419; --card-2:#312a1f; --card-3:#3a3227; --inset:#241e16;
  --border:#4a3d2b; --border-2:#403524; --border-3:#4e402e;
  --ink:#f2e6cf; --ink-2:#e4d8c1; --muted:#a99e83; --muted-2:#c2b79b;
  --clay-soft:#3a2a1e;
}
.tw-app.tw-dark .tagline,.tw-app.tw-dark .rightnow,.tw-app.tw-dark .bearing{color:var(--muted-2)}
.tw-app.tw-dark .btn-ghost{background:var(--card);border-color:var(--border);color:var(--ink-2)}
.tw-app.tw-dark .legend .li,.tw-app.tw-dark .menu-pop .mi,.tw-app.tw-dark .remember-box span{color:var(--ink-2)}
/* identity / totem */
.tw-app.tw-dark .totem{background:#241e16}
.tw-app.tw-dark .totem .sign{border-color:#4a3d2b;background:repeating-linear-gradient(135deg,#2c2519 0 7px,#262015 7px 14px)}
/* scene people */
.tw-app.tw-dark .person{background:#2a231a}
.tw-app.tw-dark .person:hover{border-color:#5a4a32}
/* board chrome + nodes + tags */
.tw-app.tw-dark .board-bar{background:#2a241b;border-bottom-color:#463a2a}
.tw-app.tw-dark .board-tools{background:#241f17;border-bottom-color:#463a2a}
.tw-app.tw-dark .node{background:#2c261c;border-color:var(--border-3)}
.tw-app.tw-dark .node:hover{border-color:#6a5636}
.tw-app.tw-dark .node .ndesc{color:var(--muted-2)}
.tw-app.tw-dark .edge-dot{border-color:#1c1810}
.tw-app.tw-dark .tag{background:linear-gradient(155deg,#3a3122,#2c2518);color:#e9dcc0;border-color:#5a4a32}
.tw-app.tw-dark .tag::before{border-color:#5a4a32}
/* modals: heads already dark; bodies + warm panels */
.tw-app.tw-dark .modal{border-color:#463a2a}
.tw-app.tw-dark .board-body{background:#221c14}
.tw-app.tw-dark .m-section{background:#2a241b;border-color:#463a2a}
.tw-app.tw-dark .m-item .m-leader{border-bottom-color:#4a3d2b}
.tw-app.tw-dark .m-item .m-price{color:#d79a5a}
.tw-app.tw-dark .m-item i,.tw-app.tw-dark .modal .atmo-prose,.tw-app.tw-dark .special em{color:var(--muted-2)}
.tw-app.tw-dark .notice-box{background:#2a241b;border-color:#463a2a}
.tw-app.tw-dark .notice i{color:var(--ink-2)}
.tw-app.tw-dark .notice .eye{color:#c9a24a}
.tw-app.tw-dark .conns-box{background:#262019;border-color:#40372a}
.tw-app.tw-dark .conn-rel{color:var(--muted-2)}
/* detail warm panels + text */
.tw-app.tw-dark .attack,.tw-app.tw-dark .motive,.tw-app.tw-dark .special{background:#2f2417;border-color:#4a3a24}
.tw-app.tw-dark .secret{background:#2b2717;border-color:#48401f}
.tw-app.tw-dark .attack b,.tw-app.tw-dark .motive p,.tw-app.tw-dark .special b,.tw-app.tw-dark .combat .catk{color:#e6cfae}
.tw-app.tw-dark .secret p{color:#e3d6ad}
.tw-app.tw-dark .attack span,.tw-app.tw-dark .combat .crole{color:#c88f5a}
.tw-app.tw-dark .chip,.tw-app.tw-dark .ability,.tw-app.tw-dark .race-opt{color:var(--ink-2)}
.tw-app.tw-dark .chip.cloth{background:#2f2718;border-color:#4a3d2b;color:var(--ink-2)}
.tw-app.tw-dark .detail-foot{background:#221c14}
.tw-app.tw-dark .mini-reroll{border-color:#4a3d2b}
.tw-app.tw-dark .mini-reroll:hover{background:#2f2718}
.tw-app.tw-dark .race-opt:hover{background:#332a1e}
.tw-app.tw-dark .rt-seg .rt-opt{background:#241e16;color:var(--ink-2)}
.tw-app.tw-dark .rt-seg .rt-opt.on{background:#33291b;border-color:#6a5636;box-shadow:inset 0 0 0 1px #6a5636}
.tw-app.tw-dark .color-row input[type=color]{background:#241e16;border-color:#4a3d2b}
/* meters + tav buttons */
.tw-app.tw-dark .amb .meter i{background:#3a3226;border-color:#4a3d2b}
.tw-app.tw-dark .amb .meter i.on{background:#c08a4a;border-color:#a8763a}
.tw-app.tw-dark .tav-btn{background:#2c261c;border-color:#4a3d2b;color:var(--ink-2)}
.tw-app.tw-dark .tav-btn:hover{background:#352d20;border-color:#6a5636}
/* creation controls */
.tw-app.tw-dark .gen-bar{background:#2a241b;border-color:#463a2a}
.tw-app.tw-dark .gen-bar input,.tw-app.tw-dark .gen-dd .dd-btn,.tw-app.tw-dark .name-line input,.tw-app.tw-dark .namebox input,.tw-app.tw-dark .dd-btn,.tw-app.tw-dark .paint-btn{background:#241e16;border-color:#4a3d2b;color:var(--ink)}
.tw-app.tw-dark .gen-surprise{color:var(--muted-2)}
.tw-app.tw-dark .gen-surprise svg{stroke:var(--muted-2)}
.tw-app.tw-dark .landing-switch .ls-seg{background:#241e16;border-color:#463a2a}
.tw-app.tw-dark .open-panel{background:#241e16;border-color:#3f3427}
.tw-app.tw-dark .op-h,.tw-app.tw-dark .op-hint,.tw-app.tw-dark .bgrp.card .bg-sub{color:var(--muted)}
.tw-app.tw-dark .seg2,.tw-app.tw-dark .bgrp{background:#2c261c;border-color:#463a2a}
.tw-app.tw-dark .seg2{color:var(--ink-2)}
.tw-app.tw-dark .seg2:hover,.tw-app.tw-dark .bgrp:hover{background:#352d20;border-color:#6a5636}
.tw-app.tw-dark .bgrp .bg-ico{color:var(--muted-2)}
.tw-app.tw-dark .bgrp.card .bg-ico{background:#3a3226}
.tw-app.tw-dark .bgrp.card .bg-label,.tw-app.tw-dark .bgrp.tile .bg-label{color:var(--ink-2)}
.tw-app.tw-dark .checkbox{background:#241e16;border-color:#5a4a32}
/* paint menu on dark */
.tw-app.tw-dark .paint-menu{background:#2b2419;border-color:#4a3d2b}

/* ============================================================
   SAVED GUESTS — invite button (creation) + picker + marker
   ============================================================ */
.gen-invite{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:8px 15px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted-2);font:600 13px var(--sans);cursor:pointer}
.gen-invite:hover{border-color:var(--clay);color:var(--ink-2)}
.gen-invite .gi-count{background:var(--clay);color:var(--cream-2);border-radius:999px;padding:1px 8px;font:700 11px var(--sans)}
.gen-invite .gi-sel{color:var(--clay);font:600 12px var(--sans)}
.inv-modal{width:440px;max-width:94vw;display:flex;flex-direction:column;max-height:82vh;overflow:hidden}
.inv-list{flex:1;min-height:0;overflow:auto;padding:10px 12px;background:#f5f1e7}
.inv-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border-2);border-radius:10px;background:var(--card);margin-bottom:8px;cursor:pointer}
.inv-row:hover{border-color:#c2a878}
.inv-row .pdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.inv-body{flex:1;min-width:0;display:flex;flex-direction:column}
.inv-name{font:600 14px var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-meta{font:500 11px var(--sans);color:var(--muted)}
.inv-del{flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:1px solid var(--border-2);background:none;color:var(--muted);cursor:pointer;font-size:13px}
.inv-del:hover{border-color:#b2503f;color:#b2503f;background:#f6e7e2}
.inv-empty{padding:26px 16px;text-align:center;font:600 14px var(--serif);color:var(--muted-2)}
.inv-empty span{display:block;margin-top:6px;font:400 12px var(--sans);color:var(--muted)}
.inv-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--border-2);background:var(--card)}
.inv-foot .btn-clay{margin-left:auto}
.guest-tag{font:600 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay);background:var(--clay-soft);border:1px solid #e3c8b6;border-radius:5px;padding:1px 5px;flex:0 0 auto}
.node .guest-tag{background:none;border:none;color:var(--clay);font-size:12px;padding:0;flex:0 0 auto}
.tw-app.tw-dark .inv-list{background:#221c14}
.tw-app.tw-dark .inv-row:hover{border-color:#6a5636}
.tw-app.tw-dark .inv-del:hover{background:#3a201c;border-color:#b2503f}
.tw-app.tw-dark .guest-tag{border-color:#4a3d2b}
/* creation actions row (Surprise · Invite · Load tavern) + saved-taverns picker */
.landing-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;margin-top:4px}
.gen-invite.gen-primary{background:var(--clay);border-color:var(--clay);color:var(--cream-2)}
.gen-invite.gen-primary:hover{background:#7a4526;border-color:#7a4526;color:#fff}
.gen-invite.gen-primary .gi-count{background:var(--cream-2);color:var(--clay)}
.gen-invite.gen-primary .gi-sel{color:var(--cream-2)}
.tv-row .tv-sign{width:34px;height:34px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#efe8d8;overflow:hidden;font-size:17px}
.tv-row .tv-sign img{width:100%;height:100%;object-fit:cover}
.tw-app.tw-dark .tv-row .tv-sign{background:#2b2318}