/* Common Era Dev Portal styles. The chrome is a plain, dense working tool: near-neutral surfaces with a trace of warmth, one accent, Public Sans throughout, small consistent radii, no decorative texture. All colour comes from tokens defined once below, with a dark set swapped in via [data-theme="dark"] on (the sidebar toggle writes it, remembered per browser). COLOUR HAS A JOB. The accent marks selection and primary actions. The attention colour (--attn) marks work that is unfinished or waiting on somebody - unreviewed cards, art that is still a placeholder, deck copy that has not been written. Everything else stays neutral. The CARDS keep their own face: `.card` and the hand-size `.hcard` render on --card-face with --card-ink, because the point of the database is seeing a card as it really looks. Only their presentation on the page (grid spacing, selection ring, drop shadow) is chrome and follows the tokens. */ :root{ /* surfaces, lightest to heaviest */ --bg:#ECEBE9; /* app canvas - deliberately darker than the sidebar */ --surface:#FEFEFD; /* panels, inputs, rows */ --surface-2:#F4F3F1; /* hover fills, inset wells */ --surface-3:#E9E8E5; /* pressed / heavier wells */ --sidebar:#F9F8F7; /* lines */ --border:#E3E1DE; --border-strong:#C9C6C1; /* type */ --text:#1B1A18; --text-2:#63615C; --text-3:#918E88; /* the accent is a medium grey: selection and primary actions read as neutral, so ATTENTION amber is the only colour that carries meaning */ --accent:#6E6B65; --accent-hover:#57544F; --accent-soft:rgba(110,107,101,.13); --accent-on:#FFFFFF; /* ATTENTION - anything unfinished or waiting on someone */ --attn:#B4640E; --attn-soft:rgba(180,100,14,.12); /* semantic */ --danger:#B3402E; --danger-soft:rgba(179,64,46,.10); --success:#4A6B3A; --review:#B4640E; /* unreviewed marker - an attention state */ --shadow-card:0 1px 2px rgba(28,26,22,.09),0 4px 12px rgba(28,26,22,.07); --shadow-pop:0 8px 28px rgba(28,26,22,.16); --font-ui:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif; --r:6px; --r-sm:4px; --r-lg:8px; /* the card face and its inks. The inks are darker than a white face strictly needs, so the small print stays readable at card size. */ --card-face:#FFFFFF; --card-ink:#14181D; --card-ink-2:#5A6270; --card-ink-3:#6E7783; /* card geometry - copied from the game, do not retune */ --cw:120px; --ch:176px; --hwc:163px; --hwh:239px; } [data-theme="dark"]{ --bg:#282725; --surface:#2F2E2C; --surface-2:#373533; --surface-3:#403E3B; --sidebar:#232220; --border:#3F3D3A; --border-strong:#55524D; --text:#EAE9E6; --text-2:#A5A39E; --text-3:#7C7A75; --accent:#A9A69F; --accent-hover:#BEBBB4; --accent-soft:rgba(169,166,159,.16); --accent-on:#1A1917; --attn:#E0954A; --attn-soft:rgba(224,149,74,.16); --danger:#EF8878; --danger-soft:rgba(239,136,120,.14); --success:#8FC47A; --review:#E0954A; --shadow-card:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.38); --shadow-pop:0 10px 34px rgba(0,0,0,.6); } *{box-sizing:border-box;} body{margin:0;background:var(--bg);font-family:var(--font-ui);font-size:14px; font-variant-numeric:tabular-nums;font-synthesis:none;color:var(--text); display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;} /* ---- thin unobtrusive scrollbars ---- */ *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background-color:var(--text-3);background-clip:padding-box;} ::-webkit-scrollbar-corner{background:transparent;} /* ============================ sidebar ============================ */ #sidebar{width:244px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border); display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;font-family:var(--font-ui);} .sb-brand{padding:24px 18px 20px;border-bottom:1px solid var(--border);} .sb-brand-title{font-size:21px;font-weight:700;letter-spacing:.01em;color:var(--text);line-height:1.2;} .sb-brand-sub{font-size:12px;font-weight:500;color:var(--text-3);margin-top:2px;letter-spacing:.02em;} /* destinations: quiet rows, accent bar + tinted fill on the active one */ .sb-mainnav{padding:12px 10px 14px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border);} .sb-nav-btn{width:100%;padding:13px 14px;border:none;border-radius:var(--r-sm);background:none;color:var(--text-2); font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;text-align:left; transition:background .1s,color .1s;position:relative;} .sb-nav-btn:hover{background:var(--surface-2);color:var(--text);} .sb-nav-btn.active{background:var(--accent-soft);color:var(--accent);font-weight:600;} .sb-nav-btn.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent);} /* remembered card/deck sub-items under the nav */ .sb-subnav{display:flex;flex-direction:column;} .sb-subitem{width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 24px;border:none;border-radius:var(--r-sm); background:none;color:var(--text-3);font-family:inherit;font-size:13px;cursor:pointer;text-align:left;} .sb-subitem:hover{background:var(--surface-2);color:var(--text);} .sb-subitem.active{background:var(--surface-2);color:var(--text);font-weight:500;} .sb-sub-dot{width:4px;height:4px;border-radius:50%;background:var(--text-3);flex-shrink:0;} .sb-subitem.active .sb-sub-dot{background:var(--accent);} .sb-sub-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sb-section{padding:16px 18px;border-bottom:1px solid var(--border);} .sb-label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.03em;} /* collapsible section headers with a drawn chevron */ .sb-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;} .sb-head:hover .sb-label{color:var(--text);} .sb-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s;flex-shrink:0;} .sb-section.collapsed .sb-caret{transform:rotate(-45deg);} .sb-body{margin-top:9px;} .sb-section.collapsed .sb-body{display:none;} .sb-input{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); padding:6px 9px;font-family:inherit;font-size:12.5px;color:var(--text);outline:none; transition:border-color .12s,box-shadow .12s;} .sb-input:hover{border-color:var(--text-3);} .sb-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .sb-input::placeholder{color:var(--text-3);} select.sb-input{cursor:pointer;} .sb-sortrow{display:flex;gap:6px;align-items:stretch;} .sb-util-btn{padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface); color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-align:center; transition:background .1s,color .1s,border-color .1s;} .sb-util-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3);} .fchips{display:flex;gap:6px;align-items:center;} .fchip{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--border-strong);cursor:pointer; opacity:.4;transition:opacity .1s,box-shadow .1s;padding:0;} .fchip:hover{opacity:.75;} .fchip.on{opacity:1;box-shadow:0 0 0 2px var(--sidebar),0 0 0 3.5px var(--accent);} /* filter tags */ .sb-tags{display:flex;flex-wrap:wrap;gap:5px;} .sb-tag{padding:4px 9px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface); color:var(--text-2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer; transition:background .1s,color .1s,border-color .1s;} .sb-tag:hover{background:var(--surface-2);color:var(--text);} .sb-tag.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} /* a quiet divider inside a tag group (core sets | expansions) */ .sb-taggroup{width:100%;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em; color:var(--text-3);margin:6px 0 1px;} /* toggle switches */ .tgl-row{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;} .tgl{width:30px;height:18px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-strong); position:relative;flex-shrink:0;transition:background .15s,border-color .15s;} .tgl-knob{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface); box-shadow:0 1px 2px rgba(28,26,22,.3);transition:left .15s;} .tgl-row.on .tgl-knob{left:14px;} .tgl-row.on .tgl{background:var(--accent);border-color:var(--accent);} .tgl-row.on[data-ct="burn"] .tgl{background:#C0392B;border-color:#C0392B;} .tgl-row.on[data-ct="mint"] .tgl{background:#1B7F3B;border-color:#1B7F3B;} .tgl-lbl{font-size:12.5px;font-weight:500;color:var(--text-2);} .tgl-row:hover .tgl-lbl{color:var(--text);} /* active filters */ .sb-clear{border:none;background:none;color:var(--danger);font-size:12px;font-weight:500;padding:2px 4px; border-radius:var(--r-sm);cursor:pointer;font-family:inherit;} .sb-clear:hover{background:var(--danger-soft);} .af-chips{display:flex;flex-wrap:wrap;gap:5px;} .af-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 12px;border-radius:99px; background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-size:12.5px;font-weight:500;} .af-chip .fac-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;border:1px solid var(--border-strong);} .af-x{cursor:pointer;font-size:12px;line-height:1;color:var(--text-3);padding:1px 2px;font-style:normal;} .af-x:hover{color:var(--danger);} /* cost/stat min-max rows */ .stat-inrow{display:flex;align-items:center;gap:8px;} .stat-inrow span{font-size:12px;color:var(--text-3);flex-shrink:0;} .sb-range-val{color:var(--text-3);font-weight:400;margin-left:6px;} .sb-bottom{margin-top:auto;border-bottom:none;display:flex;flex-direction:column;gap:10px;padding-bottom:14px;} .sb-count{font-size:13px;font-weight:400;color:var(--text-3);line-height:1.5;white-space:pre-line;} .sb-mode{font-size:11px;color:var(--text-3);} /* light/dark switch: a small segmented control */ .sb-theme{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-sm);width:max-content;} .sb-theme button{border:none;background:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600; padding:6px 12px;border-radius:3px;cursor:pointer;letter-spacing:.02em;} .sb-theme button:hover{color:var(--text);} .sb-theme button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,26,22,.12);} /* signed-in user + sign out */ .sb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-3);} .sb-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sb-me{display:flex;align-items:center;gap:8px;border:none;background:none;padding:2px;border-radius:var(--r-sm); cursor:pointer;font:inherit;color:var(--text-2);min-width:0;flex:1;text-align:left;} .sb-me:hover{background:var(--surface-2);color:var(--text);} .sb-logout{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);border-radius:var(--r-sm); font-size:12px;padding:5px 10px;cursor:pointer;font-family:inherit;flex-shrink:0;} .sb-logout:hover{background:var(--surface-2);color:var(--text);} /* nav "soon" tag on sections that are not live yet */ .sb-nav-btn.soon{opacity:.75;} /* a destination the viewer cannot open wears a small padlock, not a word */ .sb-lock{float:right;display:inline-flex;align-items:center;color:var(--text-3);margin-left:8px;} .sb-lock svg{width:13px;height:13px;display:block;} .sb-nav-btn:hover .sb-lock{color:var(--text-2);} /* a count of outstanding work, on a nav destination */ .sb-badge{float:right;min-width:18px;text-align:center;font-size:10px;font-weight:700;line-height:16px; padding:0 5px;border-radius:99px;background:var(--attn-soft);color:var(--attn);border:1px solid var(--attn);} .sb-nav-btn.active .sb-badge{background:var(--attn);color:#fff;} /* ============================ content ============================ */ #content{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--font-ui);background:var(--bg);} main{padding:26px 30px 14px;} .grid-info{font-size:12px;font-weight:500;color:var(--text-3);padding:0 2px 14px;} /* ---- the card filter bar ---- Laid out like the game's card library: every control is a labelled group, and related controls share one segmented bar with internal dividers. Picking from a list drops a chip underneath; clicking the chip removes that filter. */ .fbar{position:relative;z-index:20;flex-shrink:0;padding:13px 30px 11px;background:var(--surface); border-bottom:1px solid var(--border);} .fb-wrap{display:flex;flex-wrap:wrap;gap:11px 20px;align-items:flex-start;} .fb-group{display:flex;flex-direction:column;gap:5px;} .fb-lbl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);} /* one segmented control: children sit flush, divided by hairlines */ .fb-bar{display:inline-flex;align-items:stretch;height:31px;border:1px solid var(--border-strong); border-radius:var(--r-sm);overflow:hidden;background:var(--surface);} .fb-bar>*{height:100%;border-radius:0;box-sizing:border-box;} .fb-bar>*+*{border-left:1px solid var(--border-strong);} .fb-bar select,.fb-bar input{border:none;background:transparent;color:var(--text);font-family:inherit; font-size:12px;padding:0 9px;outline:none;} .fb-bar select{cursor:pointer;} /* a pick-list: choosing a value adds a chip and the control resets */ .fb-pick{min-width:108px;} .fb-bar input{width:172px;} .fb-bar input::placeholder{color:var(--text-3);} .fb-bar select:focus,.fb-bar input:focus{background:var(--surface-2);} /* a text segment that toggles on and off */ .fb-segs{display:flex;} .fb-segs>*+*{border-left:1px solid var(--border-strong);} .fb-seg{display:flex;align-items:center;justify-content:center;padding:0 11px;font-size:10.5px;font-weight:600; color:var(--text-2);cursor:pointer;background:transparent;user-select:none;white-space:nowrap;} .fb-seg:hover{background:var(--surface-2);color:var(--text);} .fb-seg.on{background:var(--accent);color:var(--accent-on);} /* a round pip: factions in their colour, mint/burn in theirs */ .fb-pip{width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;} .fb-pip:hover{background:var(--surface-2);} .fb-pip .pip{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.35); box-shadow:none;opacity:.35;transition:opacity .12s,box-shadow .12s;} .fb-pip.on .pip{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent);} .fb-pip.mint .pip{background:#1B7F3B;} .fb-pip.burn .pip{background:#C0392B;} /* faction pips carry their colour inline, from FACTION_COLORS */ .fb-pip.fac .pip{border-color:rgba(0,0,0,.3);} /* mint and burn are ON by default (they include rather than exclude) */ .fb-pip[data-ct] .pip{opacity:1;} .fb-pip[data-ct]:not(.on) .pip{opacity:.28;} /* flip-direction button */ .fb-dir{display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:10px;color:var(--text-2); cursor:pointer;user-select:none;} .fb-dir:hover{background:var(--surface-2);color:var(--text);} /* live filters, as chips you can click away */ .fb-active{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px; padding-top:10px;border-top:1px solid var(--border);} .fb-active[hidden]{display:none;} .af-chip{cursor:pointer;transition:background .1s,border-color .1s,color .1s;} .af-chip:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);} .af-chip:hover .af-x{color:var(--danger);} /* Cards view: grid on top, preview of the selected card docked below */ #view-list{display:flex;flex-direction:column;padding:0;height:100vh;} #view-list[hidden]{display:none;} /* an id+display rule otherwise beats the hidden attribute */ .cards-top{flex:1;min-height:0;overflow-y:auto;padding:24px 30px 16px;} /* sizes to whatever is in it, up to a ceiling - an empty preview is a thin strip */ .card-preview{flex:0 0 auto;max-height:44vh;min-height:0;overflow-y:auto;background:var(--surface); border-top:1px solid var(--border);padding:20px 30px;} .card-preview:has(.cp-hint){padding:12px 30px;} .cp-hint{font-size:13px;color:var(--text-3);padding:10px 2px;} /* selected grid card: a calm accent ring on the wrapper (the card clips overflow) */ .card-sel-wrap{position:relative;flex-shrink:0;transition:transform .14s;} .card-sel-wrap::before{content:'';position:absolute;inset:-4px;border-radius:11px;pointer-events:none;z-index:3; border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .card-grid .card-sel-wrap:hover{transform:translateY(-3px);z-index:2;} /* preview slides in when a card is picked, out when cleared */ @keyframes barslide{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}} @keyframes barslideout{from{transform:none;opacity:1;}to{transform:translateY(14px);opacity:0;}} .cp-wrap,.dk-prev-wrap{animation:barslide .18s ease;} .cp-wrap.bar-out,.dk-prev-wrap.bar-out{animation:barslideout .16s ease forwards;} .cp-wrap{display:flex;flex-direction:column;} .cp-head-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;} .cp-cols{display:flex;gap:22px;align-items:flex-start;} .cp-art{width:200px;height:200px;object-fit:cover;border:1px solid var(--border);border-radius:var(--r); background:var(--surface-2);flex-shrink:0;} .cp-body{flex:1;min-width:0;} .cp-title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text);} .cp-num{font-size:11px;color:var(--text-3);} .cp-fields{display:flex;flex-wrap:wrap;gap:5px 22px;margin-bottom:9px;} .cp-fl{color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600;margin-right:6px;} .cp-fv{color:var(--text);font-size:12px;} .cp-rules{font-size:13px;color:var(--text);line-height:1.55;margin-bottom:6px;max-width:660px;} .cp-rules .glyph{height:14px;vertical-align:-2px;} .cp-flavor{font-size:12px;font-style:italic;color:var(--text-3);line-height:1.5;margin-bottom:12px;max-width:660px;} .cp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .atd{display:inline-flex;align-items:center;gap:6px;} .atd-sel{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text); font-family:inherit;font-size:12px;padding:5px 8px;cursor:pointer;outline:none;} .atd-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} /* preview side panel: recent changes + comments */ .cp-side{flex:1;min-width:220px;max-width:340px;border-left:1px solid var(--border);padding-left:20px;} .cp-side-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:8px;} .cp-rev{font-size:12px;color:var(--text-2);padding:5px 0;border-top:1px solid var(--border);line-height:1.45;} .cp-rev:first-of-type{border-top:none;} .cp-rev-field{color:var(--text);} .cp-rev-old{color:var(--danger);} .cp-rev-new{color:var(--success);} .cp-rev-meta{color:var(--text-3);font-size:10px;margin-top:1px;} .cp-cmt{font-size:12px;padding:5px 0;border-top:1px solid var(--border);} .cp-cmt:first-of-type{border-top:none;} .cp-cmt-who{color:var(--text);font-weight:600;font-size:11px;} .cp-cmt-when{color:var(--text-3);font-size:10px;} .cp-cmt-body{color:var(--text-2);line-height:1.45;margin-top:1px;} .cp-empty{font-size:12px;font-style:italic;color:var(--text-3);} /* ======================= the card grid ======================= */ .card-grid{display:flex;flex-wrap:wrap;gap:22px;} /* The card. Fixed 120x176 in the grid and 163x239 at hand size - the same 1:1.47 proportion in both, so the two read as one card. The stat chip floats in the bottom-right corner rather than taking its own row, which is what lets the art keep its height. The text block absorbs any overflow, so a long name or a two-row sector list can never shove anything off the card. */ .card{width:var(--cw);height:var(--ch);border-radius:6px;border:1px solid var(--border-strong);background:var(--card-face); position:relative;z-index:1;cursor:pointer;transition:transform .14s,box-shadow .14s;display:flex; flex-direction:column;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-card);} .card-grid .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);z-index:2;} /* unreviewed changes: an attention-coloured ring on a wrapper (the card clips overflow) */ .upd-wrap{position:relative;flex-shrink:0;transition:transform .14s;} .upd-wrap::before{content:'';position:absolute;inset:-3px;border-radius:9px;pointer-events:none;z-index:3; border:2px solid var(--review);} .card-grid .upd-wrap:hover{transform:translateY(-3px);z-index:2;} .c-art{position:relative;flex-shrink:0;overflow:hidden;height:84px;} .c-art img{width:100%;height:100%;object-fit:cover;display:block;} .c-pips{position:absolute;top:5px;left:5px;display:flex;flex-direction:column;gap:3px;z-index:2;} .c-pip{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;} .c-pip.pay{background:#14181D;} .c-pip.burn{background:#C0392B;} .c-pip.mint{background:#1B7F3B;} .c-div{height:5px;flex-shrink:0;} .c-txt{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--card-face);padding:4px 8px;} .c-name{font-size:12px;font-weight:700;line-height:1.15;color:var(--card-ink);letter-spacing:-.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .c-meta{margin-top:5px;padding-right:32px;} /* keeps the rows clear of the stat chip */ .c-type{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--card-ink-2); line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* sectors may run to two rows rather than being cut off */ .c-sect{font-size:10.5px;color:var(--card-ink-3);line-height:1.25;margin-top:3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .c-rules{flex:1 1 auto;min-height:0;overflow:hidden;font-size:8.5px;color:var(--card-ink);line-height:1.45; padding:0 9px 6px;background:var(--card-face);} .c-rules .glyph,.c-rules img{height:11px;vertical-align:-2px;margin:0 1px;} .c-stat{position:absolute;right:5px;bottom:4px;line-height:0;z-index:3;} /* hand size: the same card, scaled up, with room for rules text */ .hcard{width:var(--hwc);height:var(--hwh);cursor:default;} .hcard .c-art{height:96px;} .hcard .c-txt{flex:0 0 auto;padding:6px 9px 4px;} .hcard .c-name{font-size:12.5px;} .hcard .c-type,.hcard .c-sect{font-size:10.5px;} .hcard .c-stat{right:6px;bottom:5px;} .hand-zoom{zoom:1.55;width:var(--hwc);} .card.cancelled{filter:grayscale(.85) brightness(.78);} .card.cancelled::after{content:'CANCELLED';position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-16deg); font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(160,30,20,.9);border:2px solid rgba(160,30,20,.75); border-radius:4px;padding:2px 7px;background:rgba(245,240,232,.85);z-index:3;} /* ============================ shared blocks ============================ */ .page-h1{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:2px 0 2px;} .page-sub{font-size:13px;color:var(--text-3);margin:0 0 22px;} .sample-badge{display:inline-block;margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:3px;padding:2px 7px;vertical-align:2px;} .panel,.det-panel,.an-panel,.pub-panel,.dk-stat-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);} .panel{padding:18px 22px;} .panel h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:0 0 7px;} .panel p{font-size:13px;color:var(--text-2);margin:0;line-height:1.55;} .panel .soon{font-style:italic;color:var(--text-3);} .footline{padding:10px 26px 22px;font-size:11px;color:var(--text-3);margin-top:auto;} /* buttons: one neutral default, one accent primary */ .dt-btn,.edit-btn,.pub-btn,.cmt-post,.fld-btn,.de-btn,.ver-btn{ border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text); font-family:inherit;font-weight:500;cursor:pointer;transition:background .1s,border-color .1s,color .1s;} .dt-btn:hover,.edit-btn:hover,.cmt-post:hover,.fld-btn:hover,.de-btn:hover,.ver-btn:hover:not(:disabled),.pub-btn.ghost:hover{ background:var(--surface-2);border-color:var(--text-3);} .dt-btn{padding:6px 14px;font-size:12.5px;margin-left:8px;} .dt-btn.primary,.pub-btn,.fld-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} .dt-btn.primary:hover,.pub-btn:hover,.fld-btn.go:hover{background:var(--accent-hover);border-color:var(--accent-hover);} .edit-btn{padding:6px 16px;font-size:12.5px;} .edit-btn.disabled{opacity:.5;cursor:default;} .backlink,.deck-back{font-size:12.5px;font-weight:500;color:var(--text-2);text-decoration:none;cursor:pointer;} .backlink:hover,.deck-back:hover{color:var(--accent);} .detail-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 16px;} .detail-cols{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;} .detail-left{width:256px;flex-shrink:0;} .detail-right{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px;} .detail-flavor{font-size:13px;font-style:italic;color:var(--text-3);line-height:1.55;margin:14px 4px 0;max-width:255px;} .card-meta{font-size:12px;color:var(--text-2);padding:10px 4px 0;line-height:1.7;} .card-meta b{color:var(--text);font-weight:600;} .rev-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--attn);margin-top:8px;} .rev-flag .dot{width:7px;height:7px;border-radius:50%;background:var(--review);} .mark-rev{border:none;background:none;color:var(--accent);font-size:11px;cursor:pointer;text-decoration:underline; font-family:inherit;padding:0;margin-left:4px;} /* text inputs, everywhere */ .ef-input,.ef-area,.fld-input,.fld-area,.de-lookup-in,.dk-desc-in,.dk-title-in,.cmt-add textarea{ width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text); font-family:var(--font-ui);font-size:13px;padding:6px 9px;outline:none;transition:border-color .12s,box-shadow .12s;} .ef-input:focus,.ef-area:focus,.fld-input:focus,.fld-area:focus,.de-lookup-in:focus,.dk-desc-in:focus, .dk-title-in:focus,.cmt-add textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .ef-area,.fld-area{resize:vertical;min-height:70px;line-height:1.5;} .ef-row{margin-bottom:11px;} .ef-label{display:block;font-size:11px;font-weight:500;color:var(--text-2);margin-bottom:4px;} .ef-3{display:flex;gap:8px;} .ef-3 .ef-cell{flex:1;} /* comments */ .cmt-add{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;} .cmt-add textarea{resize:vertical;min-height:52px;line-height:1.5;} .cmt-post{align-self:flex-start;padding:5px 13px;font-size:12px;} .cmt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;} .cmt-head{font-size:11px;margin-bottom:3px;} .cmt-who{color:var(--text);font-weight:600;} .cmt-when{color:var(--text-3);margin-left:6px;} .cmt-body{font-size:14px;color:var(--text-2);line-height:1.5;white-space:pre-wrap;} .cmt-empty,.pub-empty,.fld-empty,.dk-preview-hint{font-size:12px;font-style:italic;color:var(--text-3);} /* ---- attention: anything unfinished or waiting on someone ---- */ .needs{color:var(--attn);} .fld-empty.needs{font-style:normal;font-weight:500;} /* a status chip: amber while there is still work, quiet once it is done */ .stat-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:99px; padding:1px 9px;border:1px solid;} .stat-chip.needs{color:var(--attn);background:var(--attn-soft);border-color:var(--attn);} .stat-chip.done{color:var(--success);background:var(--surface-2);border-color:var(--border-strong);} /* a cost, shown as pips rather than words - the same reading as on the card: black = pay, red = burn, green = mint */ .cost-pips{display:inline-flex;align-items:center;gap:3px;vertical-align:-1px;} .pip{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0; box-shadow:0 0 0 1px var(--surface),0 0 0 1.5px rgba(0,0,0,.18);} .pip.pay{background:#14181D;} .pip.burn{background:#C0392B;} .pip.mint{background:#1B7F3B;} [data-theme="dark"] .pip.pay{background:#D6D3CD;} [data-theme="dark"] .pip{box-shadow:0 0 0 1px var(--surface),0 0 0 1.5px rgba(255,255,255,.22);} .cost-free{font-size:12px;color:var(--text-3);font-style:italic;} /* a set or expansion the card belongs to */ .set-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em; background:var(--surface-2);border:1px solid var(--border);border-radius:99px; padding:1px 9px;margin:0 4px 3px 0;color:var(--text);} .fld-multi{margin-top:1px;} /* a value the portal inferred rather than one that was recorded */ .fld-note{font-size:10.5px;color:var(--text-3);font-style:italic;margin-left:4px;} /* revision history */ .rev{padding:10px 0;border-top:1px solid var(--border);font-size:12px;} .rev:first-of-type{border-top:none;} .rev-meta{color:var(--text-3);margin-bottom:2px;} .rev-meta b{color:var(--text);font-weight:600;} .rev-field{color:var(--text);} .rev-old{color:var(--danger);} .rev-new{color:var(--success);} .rev-arrow{color:var(--text-3);margin:0 5px;} /* ============================ Decks ============================ */ .deck-grid{display:flex;flex-wrap:wrap;gap:14px;} .deck-card{width:210px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden; cursor:pointer;transition:border-color .12s,box-shadow .12s;} .deck-card:hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .deck-bar{height:4px;} .deck-body{padding:12px 14px 14px;} .deck-name{font-size:15px;font-weight:600;color:var(--text);line-height:1.2;} .deck-meta{font-size:11px;color:var(--text-3);margin-top:4px;} .deck-desc{font-size:12px;color:var(--text-2);margin-top:8px;line-height:1.45;} #view-decks{padding:0;} .dk-list-screen{padding:0;height:100vh;display:flex;flex-direction:column;} .dk-list-top{flex:1;min-height:0;overflow-y:auto;padding:20px 26px 22px;} .dk-list-top .page-h1{margin-top:0;} .dk-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;} .dk-list-bottom{flex:0 0 auto;height:calc(50vh + 176px);max-height:72vh;min-height:0;overflow-y:auto; padding:16px 26px 22px;border-top:1px solid var(--border);background:var(--surface);} .dk-prev-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;} .dk-prev-title{font-size:16px;font-weight:600;color:var(--text);} .dk-prev-count{font-size:12px;color:var(--text-3);} .dk-prev-grid{display:flex;flex-wrap:wrap;gap:14px;} .dk-prev-card{position:relative;} .dk-prev-qty{position:absolute;top:-6px;right:-6px;background:var(--accent);color:var(--accent-on);font-size:11px;font-weight:600; border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px; box-shadow:0 1px 3px rgba(28,26,22,.3);z-index:4;} /* A deck in the list. Every tile is the SAME fixed size so the grid lines up. The tile wears the CARD face, so a deck reads as a card-like object; the faction mix is carried entirely by the bar, so there are no faction tags. */ .pg-deck-card{width:196px;height:288px;border-radius:var(--r);border:1px solid var(--border); background:var(--card-face);display:flex;flex-direction:column;overflow:hidden;cursor:pointer; position:relative;flex-shrink:0;transition:border-color .12s,box-shadow .12s;} .pg-deck-card:not(.pg-deck-blank):hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .pg-deck-card.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .pg-dc-art{height:118px;flex-shrink:0;overflow:hidden;background:var(--surface-2);} .pg-dc-art img{width:100%;height:100%;object-fit:cover;display:block;} /* the faction bar doubles as the rule between the art and the text */ .pg-dc-bar{height:12px;width:100%;flex-shrink:0;} /* the text block absorbs any overflow so the tile height never changes */ .pg-dc-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:9px 11px 10px;display:flex;flex-direction:column; background:var(--card-face);} .pg-dc-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--card-ink);line-height:1.2;text-align:center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* the two short log lines, stacked like a precon box */ .pg-dc-lines{margin-top:7px;text-align:center;} .pg-dc-line{font-size:10px;font-weight:600;color:var(--card-ink);line-height:1.35; text-transform:uppercase;letter-spacing:.07em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* a hairline separates the two log lines; both lines are styled identically */ .pg-dc-line + .pg-dc-line{margin-top:4px;padding-top:4px;border-top:1px solid rgba(20,24,29,.14);} /* a log line that has not been written yet reads as outstanding work */ .pg-dc-line.empty{color:var(--attn);opacity:.8;font-weight:500;font-style:italic;} .pg-dc-desc{font-size:10.5px;color:var(--card-ink-2);line-height:1.4;margin-top:7px;flex:1 1 auto;min-height:0;padding-right:20px; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} /* the core-set letter, in the tile's bottom-right corner. Deliberately the only serif on the page, so it reads as a mark rather than as copy. */ .pg-dc-set{position:absolute;right:9px;bottom:6px;z-index:2; font-family:'DM Serif Display',Georgia,'Times New Roman',serif;font-size:21px;line-height:1; color:var(--card-ink-3);opacity:.85;pointer-events:none;} .pg-deck-card:hover .pg-dc-set{color:var(--card-ink-2);opacity:1;} /* leaders that do not have a deck yet: same footprint, dashed, no card face */ .pg-deck-blank{border-style:dashed;background:none;cursor:default;} .pg-deck-blank .pg-dc-body{background:none;} .pg-blank-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%; padding:12px;text-align:center;} .pg-blank-name{font-size:12px;font-weight:600;color:var(--text-3);line-height:1.2;} .pg-blank-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-top:6px;} /* ---- both editor pages are three columns ---- info (the editable fields) | the middle column | activity, pinned far right. The middle and activity columns are the same fixed width so neither dominates; the info column is the one that gives ground when the window narrows. */ .deck-editor{display:flex;height:100vh;} .de-col{display:flex;flex-direction:column;min-height:0;} .de-info{flex:1 1 420px;min-width:290px;} .de-mid{flex:0 0 340px;border-left:1px solid var(--border);} .de-build{flex:0 1 768px;min-width:440px;border-left:1px solid var(--border); display:flex;flex-direction:column;min-height:0;} .de-act{flex:0 0 340px;border-left:1px solid var(--border);} /* Each hideable column owns its own switch: a chevron in its header collapses it to a narrow labelled rail, and the rail's chevron brings it back. */ .de-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0; padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);} .de-head-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .de-collapse,.de-expand{border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer; font:inherit;font-size:17px;font-weight:600;line-height:1;padding:5px 11px;border-radius:var(--r-sm); transition:background .1s,color .1s,border-color .1s;} .de-collapse:hover,.de-expand:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3);} .de-colbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;} /* the rail only exists while the column is collapsed */ .de-rail{display:none;} body.hide-mid .de-mid,body.hide-act .de-act,body.hide-build .de-build{ flex:0 0 44px;min-width:44px;} body.hide-mid .de-mid .de-head,body.hide-mid .de-mid .de-colbody, body.hide-act .de-act .de-head,body.hide-act .de-act .de-colbody, body.hide-build .de-build .de-head,body.hide-build .de-build .de-colbody{display:none;} body.hide-mid .de-mid .de-rail,body.hide-act .de-act .de-rail,body.hide-build .de-build .de-rail{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:9px 0;height:100%;} .de-rail-lbl{writing-mode:vertical-rl;font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.09em;color:var(--text-3);user-select:none;} .deck-back{display:inline-block;padding:14px 20px 6px;} .de-build .de-cards-sec,.de-cards-sec{flex:1.4;overflow-y:auto;padding:4px 20px 14px;min-height:0;} .de-holding-sec{flex:.85;overflow-y:auto;padding:12px 20px 14px;min-height:110px;border-top:1px solid var(--border);} .de-lookup-sec{flex:1;overflow-y:auto;padding:12px 20px 16px;min-height:0;border-top:1px solid var(--border);} .dk-col-h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin:0 0 10px;} .de-sub{font-size:11px;font-weight:400;color:var(--text-3);text-transform:none;letter-spacing:0;} .de-toggle{cursor:pointer;display:flex;align-items:center;gap:9px;user-select:none;} .de-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;flex-shrink:0;} .de-holding-sec.collapsed,.de-lookup-sec.collapsed{flex:0 0 auto;overflow:hidden;} .de-holding-sec.collapsed .de-caret,.de-lookup-sec.collapsed .de-caret{transform:rotate(-45deg);} .de-holding-sec.collapsed .de-sec-body,.de-lookup-sec.collapsed .de-sec-body{display:none;} .de-holding-sec.collapsed .dk-col-h2,.de-lookup-sec.collapsed .dk-col-h2{margin:0;} .de-btn{flex-shrink:0;width:21px;height:21px;border-radius:var(--r-sm);font-size:14px;line-height:1; display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--text-2);} /* lookup: a small search + faction/type filters, then results */ .de-lk-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;} .de-lookup-in{width:190px;flex-shrink:0;} .de-lk-fac{display:flex;gap:5px;} .de-lk-fac .fchip.on{box-shadow:0 0 0 2px var(--surface-2),0 0 0 3.5px var(--accent);} .de-lk-type{width:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); color:var(--text);font-family:inherit;font-size:12.5px;padding:6px 9px;outline:none;} .de-hint{font-size:11px;color:var(--text-3);margin-top:8px;} /* card list: pills grouped by type */ .dk-cards{overflow-y:auto;min-height:0;padding:0 22px 16px 4px;} .dk-cols{column-width:212px;column-gap:16px;} .dk-cg{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:9px;} .pg-list-type-lbl{font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase; margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--border);} .pg-list-type-lbl:first-child{margin-top:0;padding-top:0;border-top:none;} .pg-list-item{display:flex;align-items:center;gap:5px;margin-bottom:4px;} .pg-list-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;} .pg-list-qty{font-size:9px;font-weight:500;color:var(--text-3);flex-shrink:0;min-width:18px;text-align:right;} .copy-num{width:12px;flex-shrink:0;text-align:center;font-size:10px;font-weight:600;color:var(--text-3);} .dup-dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);flex-shrink:0;} /* pills size to their own title, not the column width */ .pg-list-pill{display:inline-flex;align-items:center;border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto;min-height:24px; background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:border-color .1s;} .pg-list-pill:hover{border-color:var(--text-3);} .pg-list-pill-bar{width:4px;flex-shrink:0;align-self:stretch;} .pg-list-pill-name{font-size:11.5px;font-weight:500;padding:5px 10px 5px 8px;white-space:nowrap;flex:0 0 auto; line-height:1.2;color:var(--text);} /* the notes board */ .dk-notes{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:24px;padding:24px 26px 32px;color:var(--text);} .dk-sec-h{font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em; display:flex;align-items:center;gap:8px;} .nsec-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:11px;font-weight:600; color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;} .nsec-h:hover{color:var(--text);} .nsec-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s;flex-shrink:0;} .nsec.collapsed .nsec-caret{transform:rotate(-45deg);} .nsec.collapsed .nsec-body{display:none;} /* One deck field: a fixed label column, the value, then the lock - matching the card page, so the button always shares a line with its label. `display:contents` on the row wrapper lifts the value and the buttons into the grid. */ .dk-fld{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:0 16px;align-items:start; padding:13px 12px;margin:0 -12px 4px;border-radius:var(--r-sm);transition:background .1s;} .dk-fld:hover{background:var(--surface-2);} .dk-fld.editing{background:var(--accent-soft);} .dk-fld-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3); padding-top:4px;line-height:1.4;} /* the lock / submit buttons in a deck field row (the third grid column) */ .dk-title-actions{display:flex;gap:5px;align-items:center;} .dk-fld-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3);opacity:.8;} .dk-desc-row{display:contents;} .dk-desc-in{flex:1;min-width:0;resize:vertical;min-height:64px;line-height:1.5;} .dk-desc-txt{flex:1;min-width:0;} .dk-desc{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:6px;} /* single-line deck fields (title, log lines, core set) */ .dk-line-in{min-height:0;height:32px;resize:none;} .dk-logline{font-weight:600;color:var(--text);} /* descriptor tags players pick at match end */ .pt-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;} .pt-tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-sm);padding:3px 9px;font-size:12px;color:var(--text-2);} .pt-tag b{color:var(--text);font-weight:600;} .pt-sub{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px;} .pt-cmts{max-height:220px;overflow-y:auto;padding-right:4px;} /* count + stat boxes */ .dk-count-grid{display:flex;flex-wrap:wrap;gap:8px;} .dk-count-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);min-width:60px;padding:9px 10px; text-align:center;flex:1 0 auto;} .dk-count-box.total{background:var(--accent-soft);border-color:var(--accent);} .dk-count-num{font-size:19px;font-weight:600;color:var(--text);line-height:1;} .dk-count-box.total .dk-count-num{color:var(--accent);} .dk-count-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:5px;} .dk-pt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;} .dk-pt-ver{display:flex;align-items:center;gap:8px;margin-bottom:12px;} .dk-pt-ver .ver-lbl{font-size:13px;font-weight:600;color:var(--text);flex:1;} .ver-btn{width:24px;height:22px;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;} .ver-btn:disabled{opacity:.35;cursor:default;} .dk-pt-tiles{display:flex;gap:8px;} .dk-pt-tile{flex:1;text-align:center;} .dk-pt-num{font-size:18px;font-weight:600;color:var(--text);line-height:1;} .dk-pt-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:5px;} /* per-card playtest stat grid */ .cs-group-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:0 0 8px;} .cs-group-lbl:not(:first-child){margin-top:14px;} .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .cs-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:9px 10px;} .cs-num{font-size:17px;font-weight:600;color:var(--text);line-height:1;} .cs-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-top:5px;line-height:1.25;} /* ============================ card detail ============================ */ .det-left-col{flex:1;overflow-y:auto;padding:26px 30px 34px;min-height:0;} .det-hd{margin-bottom:22px;} .det-name{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.2;} .det-meta{font-size:13px;color:var(--text-3);margin-top:5px;} .det-hd-actions{margin-top:12px;} .det-panel{padding:4px 20px;max-width:820px;} /* the card's Decks section, under its fields in the info column */ .det-decks{max-width:780px;margin-top:20px;} /* the deck's identity fields, in the card page's panel */ .dk-ident{padding:8px 20px 12px;} .dk-ident .dk-fld{margin-left:-12px;margin-right:-12px;} .dk-ident .dk-fld + .dk-fld{border-top:1px solid var(--border);} /* One field row: a fixed label column, the value, then the lock. Label and button share a line, so the eye never has to track across empty space. */ .fld{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:0 16px;align-items:start; padding:13px 12px;margin:0 -10px;border-top:1px solid var(--border);border-radius:var(--r-sm); transition:background .1s;} .fld:hover{background:var(--surface-2);} .fld.editing{background:var(--accent-soft);} .fld:first-child{border-top:none;} .fld-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600; padding-top:3px;line-height:1.4;} .fld-value{font-size:14px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word;} .fld-value .glyph{height:14px;vertical-align:-2px;} .fld-art{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);border:1px solid var(--border); display:block;background:var(--surface-2);} .fld-actions{display:flex;gap:5px;align-items:center;} .fld-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:4px 9px;line-height:1;} .fld-btn.icon{padding:5px;} .fld-btn svg{width:14px;height:14px;display:block;} .fld-cost3{display:flex;gap:7px;} .fld-cost3 .c3{flex:1;} .fld-cost3 .c3 span{display:block;font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;} /* ============================ Playtest / Publish ============================ */ .tile-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;min-width:130px;} .tile-num{font-size:24px;font-weight:600;color:var(--text);line-height:1.1;} .tile-lbl{font-size:11px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.04em;} .an-panel,.pub-panel{padding:18px 22px;margin-bottom:20px;max-width:680px;} .an-panel h3,.pub-panel h3{font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;} .an-table{width:100%;border-collapse:collapse;} .an-table td,.an-table th{font-size:13px;padding:6px 8px;text-align:left;color:var(--text-2);border-top:1px solid var(--border);} .an-table th{color:var(--text-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-top:none;} .an-bar{height:6px;border-radius:3px;background:var(--accent);display:inline-block;vertical-align:middle;} .num-cell{text-align:right;color:var(--text-3);} .pub-list{list-style:none;margin:0;padding:0;} .pub-list li{font-size:13px;color:var(--text-2);padding:5px 0;border-top:1px solid var(--border);} .pub-list li:first-child{border-top:none;} .pub-note{font-size:13px;color:var(--text-2);margin:0 0 12px;line-height:1.55;} .pub-btn{padding:7px 16px;font-size:12.5px;font-weight:600;} .pub-btn.ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text);} .muted{color:var(--text-3);} /* the vocabulary playtesters use to describe cards */ .tag-list{display:flex;flex-direction:column;} .tag-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);} .tag-row:first-child{border-top:none;} .tag-pill{font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px; background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);} .tag-pill.sugg{color:var(--attn);background:var(--attn-soft);border-color:var(--attn);} .tag-by{flex:1;font-size:11px;color:var(--text-3);} .tag-acts{display:flex;gap:5px;flex-shrink:0;} .tag-count{color:var(--attn);} .tag-add{display:flex;gap:8px;align-items:center;} .tag-add .fld-input{flex:1;} /* ---- playtest stats ---- */ .cs-warn{font-size:11.5px;color:var(--attn);background:var(--attn-soft);border:1px solid var(--attn); border-radius:var(--r-sm);padding:6px 10px;margin-bottom:14px;} .cs-note{font-size:9px;color:var(--text-3);margin-top:3px;line-height:1.2;} /* a descriptor tag with a little share-of-votes meter */ .pt-tag{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 10px;} .pt-tag b{color:var(--text);font-weight:700;font-size:13px;} .pt-meter{display:block;width:100%;height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden;} .pt-meter>span{display:block;height:100%;background:var(--accent);} /* matchup spread */ .mu-list{display:flex;flex-direction:column;gap:6px;} .mu-row{display:flex;align-items:center;gap:10px;font-size:12.5px;} .mu-name{flex:0 0 130px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mu-bar{flex:1;height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden;min-width:60px;} .mu-bar>span{display:block;height:100%;} .mu-bar>span.up{background:var(--success);} .mu-bar>span.down{background:var(--danger);} .mu-pct{flex:0 0 38px;text-align:right;font-weight:600;font-size:12px;} .mu-pct.up{color:var(--success);} .mu-pct.down{color:var(--danger);} /* ---- a comment pinned to one aspect of a card or deck ---- */ .cmt-aspect{display:flex;align-items:center;gap:8px;} .cmt-aspect label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .cmt-aspect select{width:auto;min-width:150px;} .cmt-asp{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:99px; padding:1px 8px;margin-right:8px;vertical-align:1px;} /* ---- people ---- */ .user-link{color:var(--text);font-weight:600;text-decoration:none;} .user-link:hover{color:var(--accent);text-decoration:underline;} .usr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;max-width:960px;} .usr-card{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid var(--border); border-radius:var(--r);background:var(--surface);text-decoration:none;color:inherit; transition:border-color .12s,box-shadow .12s;} .usr-card:hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .usr-main{min-width:0;} .usr-name{font-size:15px;font-weight:600;color:var(--text);} .usr-sub{font-size:12px;color:var(--text-3);margin-top:2px;} .usr-role{text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:700;} .usr-nums{font-size:11.5px;color:var(--text-2);margin-top:5px;} .usr-head{display:flex;gap:16px;align-items:center;margin:14px 0 22px;} .usr-stats{max-width:760px;margin-bottom:8px;} .usr-cols{display:flex;gap:30px;flex-wrap:wrap;margin:22px 0 8px;} .usr-cols>div{flex:1 1 240px;min-width:0;} .usr-list{display:flex;flex-direction:column;} .usr-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border); font-size:13px;color:var(--text-2);} .usr-row:first-child{border-top:none;} .usr-row b{color:var(--text);} /* ---- the Changes feed ---- */ .ch-fbar{border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;max-width:1100px;} .ch-count{font-size:12px;color:var(--text-3);margin-bottom:10px;} .ch-n{opacity:.6;font-weight:500;margin-left:3px;} .ch-list{display:flex;flex-direction:column;max-width:820px;} .ch-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--border);} .ch-item:first-child{border-top:none;} /* the kind pill. Its modifier is namespaced (ch-card, not card) because bare words like "card" collide with the game card element's own class. */ .ch-kind{flex:0 0 auto;align-self:flex-start;display:block;width:64px;height:auto; text-align:center;font-size:9.5px;font-weight:700;line-height:1.5;text-transform:uppercase; letter-spacing:.06em;padding:2px 0;border-radius:99px;border:1px solid var(--border-strong); color:var(--text-3);background:var(--surface-2);margin-top:2px;box-shadow:none;} .ch-kind.ch-comment{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .ch-kind.ch-publish{color:var(--attn);border-color:var(--attn);background:var(--attn-soft);} .ch-main{flex:1;min-width:0;} .ch-what{color:var(--text-2);} /* ============================ activity timeline ============================ */ .act-sec{display:block;} .act-body{display:block;} .act-tabs{display:flex;gap:2px;margin-bottom:14px;padding:2px;border:1px solid var(--border);background:var(--surface-2); border-radius:var(--r-sm);overflow:hidden;width:max-content;} .act-tab{border:none;background:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600; padding:5px 12px;border-radius:3px;cursor:pointer;} .act-tab:hover{color:var(--text);} .act-tab.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,26,22,.12);} .tl-item{padding:12px 0;border-top:1px solid var(--border);} .tl-item:first-child{border-top:none;} .tl-meta{font-size:11px;color:var(--text-3);} .tl-meta b{color:var(--text);font-weight:600;} .tl-field{color:var(--text);} .tl-detail{font-size:12px;margin-top:3px;} .tl-detail .rev-old{color:var(--danger);} .tl-detail .rev-new{color:var(--success);} .tl-body{font-size:14px;color:var(--text-2);margin-top:3px;line-height:1.5;} .tl-comment{border-left:2px solid var(--accent);padding-left:10px;} /* ============================ card page: Decks section ============================ */ .dk-cols2{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;} .dk-col2{flex:1 1 190px;min-width:0;} .dk-col2-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3); margin-bottom:8px;} .dks{display:flex;flex-direction:column;gap:1px;} .dk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0; border-top:1px solid var(--border);} .dk-row:first-child{border-top:none;} .dk-link{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;} .dk-link:hover{color:var(--accent);text-decoration:underline;} .dk-zones{display:flex;gap:5px;flex-shrink:0;} .dk-zone{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:99px;white-space:nowrap;} .dk-zone.deck{background:var(--accent-soft);color:var(--accent);} .dk-zone.hold{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border);} .dk-add{display:flex;gap:7px;align-items:center;} .dk-add-sel{flex:1;min-width:0;} .dk-add-btn{flex-shrink:0;width:34px;height:34px;border:1px solid var(--border-strong);border-radius:var(--r-sm); background:var(--surface);color:var(--text-2);font-size:19px;line-height:1;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;justify-content:center;transition:background .1s,border-color .1s,color .1s;} .dk-add-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} .dk-add-none{font-size:12px;font-style:italic;color:var(--text-3);} /* ============================ art lightbox ============================ */ .fld-art,.cp-art{cursor:zoom-in;} .lightbox{position:fixed;inset:0;z-index:700000;background:rgba(14,12,10,.86);display:flex;align-items:center; justify-content:center;cursor:zoom-out;} .lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.6);} .lb-close{position:fixed;top:14px;right:20px;background:none;border:none;color:rgba(255,255,255,.85);font-size:26px; line-height:1;cursor:pointer;} .lb-close:hover{color:#fff;} /* ============================ avatars + account ============================ */ /* an avatar is a claimed card's art */ .avatar{border-radius:50%;object-fit:cover;display:block;flex-shrink:0;border:1px solid var(--border-strong);background:var(--surface-2);} .avatar.blank{border-style:dashed;} #acct-modal{position:fixed;inset:0;z-index:700001;background:rgba(20,18,15,.55);display:flex; align-items:center;justify-content:center;padding:24px;} #acct-modal[hidden]{display:none;} .acct-box{width:640px;max-width:100%;max-height:88vh;overflow-y:auto;background:var(--surface); border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:18px 20px 20px;} .acct-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .acct-title{font-size:16px;font-weight:600;letter-spacing:-.01em;} .acct-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 14px;align-items:center; padding:9px 0;border-top:1px solid var(--border);} .acct-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600;} .acct-val{display:flex;align-items:center;gap:10px;font-size:13px;} .acct-pickname{font-weight:600;} .acct-pickwrap{margin-top:14px;} .acct-search{margin-bottom:9px;} .acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:7px;max-height:270px;overflow-y:auto; padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);} .acct-pick{position:relative;padding:0;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden; background:none;cursor:pointer;aspect-ratio:1/1;} .acct-pick img{width:100%;height:100%;object-fit:cover;display:block;} .acct-pick:hover{border-color:var(--text-3);} .acct-pick.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);} .acct-pick.taken{cursor:default;opacity:.35;} .acct-taken{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;background:rgba(20,18,15,.72);color:#fff;padding:1px 0;} .acct-msg{font-size:12px;color:var(--danger);min-height:16px;margin-top:8px;} .acct-actions{display:flex;justify-content:flex-end;margin-top:6px;} /* ============================ login gate ============================ */ #login-gate{position:fixed;inset:0;z-index:800000;background:var(--bg);display:flex;align-items:center; justify-content:center;padding:20px;} #login-gate[hidden]{display:none;} .login-box{width:330px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-card);padding:26px 26px 22px;} .login-brand{margin-bottom:18px;} .login-title{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--text);} .login-sub{font-size:12px;color:var(--text-3);letter-spacing:.02em;margin-left:2px;} #login-form{display:flex;flex-direction:column;gap:9px;} #login-form input{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 11px; font-family:inherit;font-size:13.5px;color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s;} #login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} #login-btn{background:var(--accent);color:var(--accent-on);border:1px solid var(--accent);border-radius:var(--r-sm);padding:9px; font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin-top:2px;} #login-btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);} #login-btn:disabled{opacity:.55;cursor:default;} .login-msg{font-size:12px;color:var(--danger);min-height:16px;line-height:1.4;} .login-note{font-size:11px;color:var(--text-3);margin-top:14px;} /* ============================ "Coming soon" ============================ */ .coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;} .cs-badge{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:4px 12px;margin-bottom:14px;} .cs-title{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--text);} .cs-sub{font-size:13px;color:var(--text-3);margin-top:8px;} /* ---- non-owners are read-only: hide every edit affordance (RLS also blocks writes) ---- */ body:not(.is-owner) .fld-btn, body:not(.is-owner) .de-btn, body:not(.is-owner) .cmt-add, body:not(.is-owner) .mark-rev, body:not(.is-owner) .atd, body:not(.is-owner) .de-holding-sec, body:not(.is-owner) .de-lookup-sec, body:not(.is-owner) #dk-open-editor{display:none !important;} /* ---- hover tooltip ---- */ .tt{position:fixed;z-index:600000;pointer-events:none;width:310px;padding:0;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-pop); color:var(--text);display:none;overflow:hidden;} .tt-art{width:100%;height:150px;object-fit:cover;display:block;border-bottom:1px solid var(--border);background:var(--surface-2);} .tt-body{padding:11px 14px 13px;} .ttn{font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text);} .tt-meta{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:4px;} .tt-sect{font-size:11px;color:var(--text-3);margin-top:2px;} .ttr{font-size:12.5px;line-height:1.55;color:var(--text);margin-top:9px;} .ttr img,.ttr .glyph{height:13px;vertical-align:-2px;margin:0 1px;} .ttf{font-size:11.5px;font-style:italic;line-height:1.5;color:var(--text-3);margin-top:8px; padding-top:7px;border-top:1px solid var(--border);} .fc-White{color:#8A8A80;}.fc-Blue{color:#3B7DD8;}.fc-Gold{color:#9A8410;} .fc-Red{color:#C0392B;}.fc-Black{color:#6B7280;}.fc-multi{color:#8A8020;} [data-theme="dark"] .fc-White{color:#B8B8AE;}[data-theme="dark"] .fc-Blue{color:#6BA0FF;} [data-theme="dark"] .fc-Gold{color:#D9C24A;}[data-theme="dark"] .fc-Red{color:#F1786C;} [data-theme="dark"] .fc-Black{color:#9BA4B0;}[data-theme="dark"] .fc-multi{color:#D0C55A;}