/* TBDTCG Dev Portal styles.
   The cards, hover tooltip, and update ring are pixel-copies of the playtest
   game (see docs/style-guide.md). The chrome keeps its current layout but
   wears the game's own skin: warm parchment sidebar, gold + ink accents,
   Public Sans / DM Serif type, cards on the game's wood table. */

:root{
  --bg:#1A1A18; --panel:#2A2A28; --line:#141414;
  --gold:#E8C870; --gold-mut:rgba(195,165,111,.4); --title-gold:#e4cf42;
  --parch:#F5F0E8; --ink:#1A1208; --ink-soft:#3A2E1A; --tan:#C8B89A; --tan-soft:#8A7A5E;
  --sb-bg:#DDD6C6; --sb-edge:#C0B8A8; --sb-ink:#2A2420; --sb-fill:#3A342C;
  --txt:rgba(255,255,255,.72); --txt-dim:rgba(255,255,255,.45); --txt-faint:rgba(255,255,255,.3);
  --font-ui:'Public Sans',system-ui,sans-serif;
  --cw:120px; --ch:176px; --hwc:163px; --hwh:239px;
}

*{box-sizing:border-box;}
/* font-synthesis:none matches the game: DM Serif Display has no real bold, and
   letting the browser fake one smears the card names into mush */
body{margin:0;background:var(--bg);font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-synthesis:none;color:var(--txt);display:flex;min-height:100vh;}

/* ---- extremely minimal scrollbars: a thin translucent oval on transparent ---- */
*{scrollbar-width:thin;scrollbar-color:rgba(140,140,140,.42) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(140,140,140,.4);border-radius:99px;border:3px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(140,140,140,.62);background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}

/* ---- left toolbar: the game's parchment sidebar ---- */
#sidebar{width:236px;flex-shrink:0;background:var(--sb-bg);border-right:3px solid var(--sb-edge);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;font-family:var(--font-ui);}
.sb-brand{padding:18px 16px 14px;border-bottom:1px solid rgba(0,0,0,.1);}
.sb-brand-title{font-family:'DM Serif Display',serif;font-size:30px;color:var(--sb-ink);line-height:1.1;}
.sb-brand-sub{font-size:12px;font-weight:500;color:rgba(0,0,0,.45);margin-top:1px;}

/* main destinations: full-width rows, no rounding, a gold accent bar on the
   active one (the previous Windows-10 nav treatment) */
.sb-mainnav{padding:6px 0 10px;display:flex;flex-direction:column;border-bottom:1px solid rgba(0,0,0,.1);}
.sb-nav-btn{width:100%;padding:10px 16px;border:none;border-radius:0;background:none;color:rgba(0,0,0,.6);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:background .1s,color .1s;}
.sb-nav-btn:hover{background:rgba(0,0,0,.06);color:var(--sb-ink);}
.sb-nav-btn.active{background:rgba(0,0,0,.07);color:var(--sb-ink);font-weight:600;box-shadow:inset 3px 0 0 #B8942E;}
/* remembered card/deck sub-items under the nav */
.sb-subitem{width:100%;display:flex;align-items:center;gap:8px;padding:7px 16px 7px 26px;border:none;background:none;color:rgba(0,0,0,.52);font-family:inherit;font-size:12px;cursor:pointer;text-align:left;}
.sb-subitem:hover{background:rgba(0,0,0,.05);color:var(--sb-ink);}
.sb-subitem.active{background:rgba(0,0,0,.06);color:var(--sb-ink);font-weight:500;}
.sb-sub-dot{width:5px;height:5px;border-radius:50%;background:#B8942E;flex-shrink:0;}
.sb-sub-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.sb-section{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.1);}
.sb-label{font-size:12px;font-weight:600;color:rgba(0,0,0,.5);}

/* 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(--sb-ink);}
.sb-caret{width:8px;height:8px;border-right:1.6px solid rgba(0,0,0,.4);border-bottom:1.6px solid rgba(0,0,0,.4);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;flex-shrink:0;}
.sb-section.collapsed .sb-caret{transform:rotate(-45deg);}
.sb-body{margin-top:10px;}
.sb-section.collapsed .sb-body{display:none;}

.sb-input{width:100%;background:rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.2);border-radius:6px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--sb-ink);outline:none;transition:border-color .12s,box-shadow .12s;}
.sb-input:hover{border-color:rgba(0,0,0,.35);}
.sb-input:focus{border-color:#B99C62;box-shadow:0 0 0 3px rgba(195,165,111,.28);}
.sb-input::placeholder{color:rgba(0,0,0,.35);}
select.sb-input{cursor:pointer;}
.sb-sortrow{display:flex;gap:6px;align-items:stretch;}
.sb-util-btn{padding:8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,.2);background:rgba(0,0,0,.06);color:rgba(0,0,0,.6);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:center;transition:background .1s,color .1s;}
.sb-util-btn:hover{background:rgba(0,0,0,.14);color:var(--sb-ink);}
.fchips{display:flex;gap:6px;align-items:center;}
.fchip{width:24px;height:24px;border-radius:5px;border:1px solid rgba(0,0,0,.3);cursor:pointer;opacity:.32;transition:opacity .1s,box-shadow .1s;padding:0;}
.fchip:hover{opacity:.65;}
.fchip.on{opacity:1;box-shadow:0 0 0 2px var(--sb-bg),0 0 0 3.5px rgba(0,0,0,.45);}

/* filter tags; active = ink fill, parchment text */
.sb-tags{display:flex;flex-wrap:wrap;gap:5px;}
.sb-tag{padding:5px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.16);background:rgba(0,0,0,.05);color:rgba(0,0,0,.6);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background .1s,color .1s;}
.sb-tag:hover{background:rgba(0,0,0,.11);color:var(--sb-ink);}
.sb-tag.on{background:var(--sb-fill);border-color:var(--sb-fill);color:var(--parch);}

/* toggle switches */
.tgl-row{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.tgl{width:34px;height:20px;border-radius:999px;background:rgba(0,0,0,.18);position:relative;flex-shrink:0;transition:background .15s;}
.tgl-knob{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#F5F0E8;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s;}
.tgl-row.on .tgl-knob{left:16px;}
.tgl-row.on .tgl{background:#B99C62;}
.tgl-row.on[data-ct="burn"] .tgl{background:#C03020;}
.tgl-row.on[data-ct="mint"] .tgl{background:#2A7A30;}
.tgl-lbl{font-size:13px;font-weight:500;color:rgba(0,0,0,.6);}
.tgl-row:hover .tgl-lbl{color:var(--sb-ink);}

/* active filters: ink tokens with a remove x */
.sb-clear{border:none;background:none;color:#B23A2A;font-size:12px;font-weight:500;padding:2px 4px;border-radius:5px;cursor:pointer;font-family:inherit;}
.sb-clear:hover{background:rgba(178,58,42,.12);}
.af-chips{display:flex;flex-wrap:wrap;gap:5px;}
.af-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:6px;background:var(--sb-fill);color:var(--parch);font-size:12px;font-weight:500;}
.af-chip .fac-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;border:1px solid rgba(255,255,255,.35);}
.af-x{cursor:pointer;font-size:12px;line-height:1;opacity:.6;padding:1px 2px;font-style:normal;}
.af-x:hover{opacity:1;color:var(--gold);}

/* cost/stat min-max dropdown rows */
.stat-inrow{display:flex;align-items:center;gap:8px;}
.stat-inrow span{font-size:12px;color:rgba(0,0,0,.45);flex-shrink:0;}
.sb-range-val{color:rgba(0,0,0,.45);font-weight:400;margin-left:6px;}

.sb-bottom{margin-top:auto;border-bottom:none;display:flex;flex-direction:column;gap:8px;padding-bottom:16px;}
.sb-count{font-size:12px;font-weight:400;color:rgba(0,0,0,.5);line-height:1.5;white-space:pre-line;}
.sb-mode{font-size:11px;color:rgba(0,0,0,.35);}

/* ---- content area: the game's wood table ---- */
#content{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--font-ui);
  background:repeating-linear-gradient(88deg,transparent,transparent 3px,rgba(255,255,255,.025) 3px,rgba(255,255,255,.025) 6px),
             repeating-linear-gradient(176deg,transparent,transparent 14px,rgba(0,0,0,.07) 14px,rgba(0,0,0,.07) 15px),
             linear-gradient(168deg,#9C7A5A 0%,#8A6A4C 18%,#A6825E 36%,#7A5E42 54%,#9C7A5A 72%,#8A6A4C 88%,#7A5E42 100%);}
main{padding:18px 24px 8px;}
.grid-info{font-size:12px;font-weight:500;color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.4);padding:2px 2px 16px;}

/* Cards view: grid on top, a preview of the selected card in a bottom bar
   (the game's action-bar grey) */
#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:18px 24px 10px;}
.card-preview{flex:0 0 34vh;min-height:0;overflow-y:auto;background:#2A2A28;border-top:2px solid #141414;padding:16px 24px;}
.cp-hint{font-size:13px;color:rgba(255,255,255,.5);padding:10px 2px;}

/* selected grid card gets the deck-select gold ring (on a wrapper, like the
   green update ring) */
.card-sel-wrap{position:relative;flex-shrink:0;transition:transform .15s;}
.card-sel-wrap .card{border-color:#C3A56F;}
.card-sel-wrap::before{content:'';position:absolute;inset:-6px;border-radius:14px;padding:6px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:pop-hl-spin 2.6s linear infinite;
  background:conic-gradient(from var(--pop-hl-angle),#F0DCA0,#C3A56F,#E8C870,#A8863E,#F0DCA0);}
.card-grid .card-sel-wrap:hover{transform:translateY(-6px) scale(1.03);z-index:2;}
.card-grid .card-sel-wrap:hover .card{transform:none;box-shadow:3px 12px 26px rgba(0,0,0,.8);}

/* stats bars slide in when shown, and slide out when deselected */
@keyframes barslide{from{transform:translateY(22px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes barslideout{from{transform:none;opacity:1;}to{transform:translateY(22px);opacity:0;}}
.cp-wrap,.dk-prev-wrap{animation:barslide .24s ease;}
.cp-wrap.bar-out,.dk-prev-wrap.bar-out{animation:barslideout .2s ease forwards;}
/* title + Open-card button up top (like the deck preview), info below */
.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:20px;align-items:flex-start;}
.cp-art{width:210px;height:210px;object-fit:cover;border:1px solid rgba(255,255,255,.15);background:#1A1A18;flex-shrink:0;}
.cp-body{flex:1;min-width:0;}
.cp-title{font-family:'DM Serif Display',serif;font-size:21px;color:#F5F0E8;}
.cp-num{font-size:11px;color:rgba(255,255,255,.35);}
.cp-fields{display:flex;flex-wrap:wrap;gap:5px 22px;margin-bottom:9px;}
.cp-fl{color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;font-size:10px;margin-right:6px;}
.cp-fv{color:rgba(255,255,255,.85);font-size:12px;}
.cp-rules{font-size:13px;color:rgba(255,255,255,.82);line-height:1.5;margin-bottom:6px;max-width:660px;}
.cp-rules .glyph{height:14px;vertical-align:-2px;}
.cp-flavor{font-size:12px;font-style:italic;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:12px;max-width:660px;}
.cp-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.atd{display:inline-flex;align-items:center;gap:6px;}
.atd-sel{background:#3A342C;border:1px solid rgba(255,255,255,.2);color:#F5F0E8;font-family:inherit;font-size:12px;padding:6px 8px;cursor:pointer;}
/* preview side panel: recent changes + comments (fills the space) */
.cp-side{flex:1;min-width:220px;max-width:340px;border-left:1px solid rgba(255,255,255,.1);padding-left:20px;}
.cp-side-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.42);margin-bottom:8px;}
.cp-rev{font-size:12px;color:rgba(255,255,255,.75);padding:5px 0;border-top:1px solid rgba(255,255,255,.07);line-height:1.4;}
.cp-rev:first-of-type{border-top:none;}
.cp-rev-field{color:rgba(255,255,255,.9);}
.cp-rev-old{color:#E39B9B;}
.cp-rev-new{color:#8FE39A;}
.cp-rev-meta{color:rgba(255,255,255,.35);font-size:10px;margin-top:1px;}
.cp-cmt{font-size:12px;padding:5px 0;border-top:1px solid rgba(255,255,255,.07);}
.cp-cmt:first-of-type{border-top:none;}
.cp-cmt-who{color:var(--gold);font-weight:600;font-size:11px;}
.cp-cmt-when{color:rgba(255,255,255,.35);font-size:10px;}
.cp-cmt-body{color:rgba(255,255,255,.75);line-height:1.4;margin-top:1px;}
.cp-empty{font-size:12px;font-style:italic;color:rgba(255,255,255,.35);}

/* ---- the card grid: the game's own card element on the wood table ---- */
.card-grid{display:flex;flex-wrap:wrap;gap:17px;}

/* .card copied from the game's styles.css - same size, border, radius,
   white base, and shadow as a card in play */
.card{width:var(--cw);height:var(--ch);border-radius:8px;border:1.5px solid #C8B89A;background:#fff;position:relative;z-index:1;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;box-shadow:2px 3px 8px rgba(0,0,0,.55);}
.card-grid .card:hover{transform:translateY(-6px) scale(1.03);box-shadow:3px 12px 26px rgba(0,0,0,.8);z-index:2;}

/* unreviewed changes: the deck-select screen's spinning gradient ring, in green.
   The ring lives on a wrapper because the card itself clips overflow. */
@property --pop-hl-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
@keyframes pop-hl-spin{to{--pop-hl-angle:360deg;}}
.upd-wrap{position:relative;flex-shrink:0;transition:transform .15s;}
.upd-wrap .card{border-color:#55C060;}
.upd-wrap::before{
  content:'';position:absolute;inset:-3px;border-radius:11px;padding:2.5px;pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:pop-hl-spin 2.6s linear infinite;
  background:conic-gradient(from var(--pop-hl-angle),#A0E8A0,#4CB858,#7FD888,#2E8B3C,#A0E8A0);}
.card-grid .upd-wrap:hover{transform:translateY(-6px) scale(1.03);z-index:2;}
.card-grid .upd-wrap:hover .card{transform:none;box-shadow:3px 12px 26px rgba(0,0,0,.8);}

/* the hand-card layout at the game's hand size, used on the detail page;
   height is content-driven so long rules text is never clipped */
.hcard{width:var(--hwc);height:auto;min-height:var(--hwh);cursor:default;}
.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;}

/* ---- detail view (right area, toolbar stays) ---- */
.detail-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 16px;}
.backlink{font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.4);text-decoration:none;}
.backlink:hover{color:var(--gold);}
.edit-btn{border:1px solid var(--gold-mut);border-radius:6px;padding:8px 18px;font-size:13px;font-weight:500;color:var(--gold);background:rgba(0,0,0,.25);}
.edit-btn.disabled{opacity:.5;cursor:default;}
.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:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.4);line-height:1.55;margin:14px 4px 0;max-width:255px;}
.card-meta{font-size:12px;color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.35);padding:10px 4px 0;line-height:1.7;}
.card-meta b{color:rgba(255,255,255,.8);font-weight:500;}

.panel{background:rgba(0,0,0,.32);border-radius:10px;padding:14px 18px;}
.panel h3{font-size:12px;font-weight:500;color:rgba(255,255,255,.5);margin:0 0 7px;}
.panel p{font-size:13px;color:var(--txt-dim);margin:0;line-height:1.55;}
.panel .soon{font-style:italic;color:var(--txt-faint);}

.footline{padding:10px 24px 24px;font-size:11px;color:rgba(255,255,255,.45);text-shadow:0 1px 2px rgba(0,0,0,.35);margin-top:auto;}

/* ---- page headers (Decks / Analytics / Publish) ---- */
.page-h1{font-family:'DM Serif Display',serif;font-size:26px;color:#F5F0E8;text-shadow:0 1px 3px rgba(0,0,0,.5);margin:2px 0 2px;}
.page-sub{font-size:12px;color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.4);margin:0 0 18px;}
.sample-badge{display:inline-block;margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#3A2E14;background:var(--gold);border-radius:4px;padding:2px 7px;vertical-align:2px;}

/* ---- detail: edit/save/cancel actions + form + comments + history ---- */
.dt-btn{border:1px solid var(--gold-mut);border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--gold);background:rgba(0,0,0,.28);cursor:pointer;font-family:inherit;margin-left:8px;}
.dt-btn:hover{background:rgba(0,0,0,.42);}
.dt-btn.primary{background:var(--gold);border-color:var(--gold);color:#2A2010;}
.dt-btn.primary:hover{background:#F0D486;}
.rev-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#8FE39A;text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:8px;}
.rev-flag .dot{width:8px;height:8px;border-radius:50%;background:#4CB858;box-shadow:0 0 6px #4CB858;}
.mark-rev{border:none;background:none;color:var(--gold);font-size:11px;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0;margin-left:4px;}

.ef-row{margin-bottom:11px;}
.ef-label{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.55);margin-bottom:4px;}
.ef-input,.ef-area{width:100%;background:#F5F0E8;border:1px solid #C8B89A;border-radius:6px;color:#1A1208;font-family:'Public Sans',sans-serif;font-size:13px;padding:7px 9px;outline:none;}
.ef-input:focus,.ef-area:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.ef-area{resize:vertical;min-height:58px;line-height:1.5;}
.ef-3{display:flex;gap:8px;}
.ef-3 .ef-cell{flex:1;}

/* comments */
.cmt-add{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.cmt-add textarea{width:100%;background:#F5F0E8;border:1px solid #C8B89A;border-radius:6px;color:#1A1208;font-family:'Public Sans',sans-serif;font-size:13px;padding:8px 10px;outline:none;resize:vertical;min-height:44px;}
.cmt-add textarea:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.cmt-post{align-self:flex-start;border:1px solid var(--gold-mut);background:rgba(0,0,0,.25);color:var(--gold);border-radius:6px;padding:6px 14px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;}
.cmt-post:hover{background:rgba(0,0,0,.4);}
.cmt{padding:9px 0;border-top:1px solid rgba(255,255,255,.09);}
.cmt:first-of-type{border-top:none;}
.cmt-head{font-size:11px;margin-bottom:3px;}
.cmt-who{color:var(--gold);font-weight:600;}
.cmt-when{color:rgba(255,255,255,.35);margin-left:6px;}
.cmt-body{font-size:13px;color:rgba(255,255,255,.78);line-height:1.5;white-space:pre-wrap;}
.cmt-empty{font-size:12px;font-style:italic;color:rgba(255,255,255,.35);}

/* revision history */
.rev{padding:7px 0;border-top:1px solid rgba(255,255,255,.09);font-size:12px;}
.rev:first-of-type{border-top:none;}
.rev-meta{color:rgba(255,255,255,.4);margin-bottom:2px;}
.rev-meta b{color:rgba(255,255,255,.7);font-weight:600;}
.rev-field{color:rgba(255,255,255,.85);}
.rev-old{color:#E39B9B;}
.rev-new{color:#8FE39A;}
.rev-arrow{color:rgba(255,255,255,.4);margin:0 5px;}

/* ---- Decks sample ---- */
.deck-grid{display:flex;flex-wrap:wrap;gap:16px;}
.deck-card{width:210px;background:rgba(0,0,0,.3);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.deck-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5);}
.deck-bar{height:6px;}
.deck-body{padding:12px 14px 14px;}
.deck-name{font-family:'DM Serif Display',serif;font-size:17px;color:#F5F0E8;line-height:1.15;}
.deck-meta{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;}
.deck-desc{font-size:12px;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.45;}
.deck-back{font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.4);text-decoration:none;cursor:pointer;}
.deck-back:hover{color:var(--gold);}

/* ---- Analytics sample ---- */
.tile-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.tile{background:rgba(0,0,0,.3);border-radius:10px;padding:14px 20px;min-width:130px;}
.tile-num{font-family:'DM Serif Display',serif;font-size:28px;color:#F5F0E8;line-height:1.1;}
.tile-lbl{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;text-transform:uppercase;letter-spacing:.04em;}
.an-panel{background:rgba(0,0,0,.3);border-radius:10px;padding:14px 18px;margin-bottom:16px;max-width:620px;}
.an-panel h3{font-size:12px;font-weight:600;color:rgba(255,255,255,.6);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:rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.08);}
.an-table th{color:rgba(255,255,255,.45);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-top:none;}
.an-bar{height:7px;border-radius:4px;background:var(--gold);display:inline-block;vertical-align:middle;}

/* ---- Publish ---- */
.pub-panel{background:rgba(0,0,0,.3);border-radius:10px;padding:16px 20px;margin-bottom:16px;max-width:620px;}
.pub-panel h3{font-size:12px;font-weight:600;color:rgba(255,255,255,.6);margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;}
.pub-list{list-style:none;margin:0;padding:0;}
.pub-list li{font-size:13px;color:rgba(255,255,255,.75);padding:5px 0;border-top:1px solid rgba(255,255,255,.08);}
.pub-list li:first-child{border-top:none;}
.pub-empty{font-size:12px;font-style:italic;color:rgba(255,255,255,.4);}
.pub-btn{border:1px solid var(--gold);background:var(--gold);color:#2A2010;border-radius:6px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.pub-btn:hover{background:#F0D486;}
.pub-btn.ghost{background:rgba(0,0,0,.25);color:var(--gold);}
.pub-btn.ghost:hover{background:rgba(0,0,0,.4);}

/* ---- card detail: two columns like the deck editor (fields | notes board) ---- */
.det-left-col{flex:1;overflow-y:auto;padding:20px 24px 28px;min-height:0;}
.det-hd{margin-bottom:16px;}
.det-name{font-family:'DM Serif Display',serif;font-size:26px;color:#F5F0E8;text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.1;}
.det-meta{font-size:12px;color:rgba(255,255,255,.5);text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:3px;}
.det-hd-actions{margin-top:12px;}
.det-panel{background:rgba(0,0,0,.3);border-radius:10px;padding:6px 16px;}
/* the notes board reuses .dk-notes; card sections are collapsible via nsec */
#det-notes .nsec-body .rev,#det-notes .nsec-body .cmt{}

/* one editable field row: label + value/inputs on the left, lock (or submit+
   cancel) on the right */
.fld{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.09);}
.fld:first-child{border-top:none;}
.fld-main{flex:1;min-width:0;}
.fld-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.42);margin-bottom:4px;}
.fld-value{font-size:13px;color:rgba(255,255,255,.86);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.fld-value .glyph{height:14px;vertical-align:-2px;}
.fld-empty{color:rgba(255,255,255,.3);font-style:italic;}
.fld-art{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.15);display:block;background:#2A2A28;}
.fld-actions{flex-shrink:0;display:flex;gap:5px;align-items:center;}
.fld-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold-mut);background:rgba(0,0,0,.25);color:var(--gold);border-radius:6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;padding:5px 10px;line-height:1;}
.fld-btn:hover{background:rgba(0,0,0,.42);}
.fld-btn.icon{padding:6px;}
.fld-btn.go{background:var(--gold);border-color:var(--gold);color:#2A2010;}
.fld-btn.go:hover{background:#F0D486;}
.fld-btn svg{width:15px;height:15px;display:block;}
.fld-input,.fld-area{width:100%;background:#F5F0E8;border:1px solid #C8B89A;border-radius:6px;color:#1A1208;font-family:'Public Sans',sans-serif;font-size:13px;padding:7px 9px;outline:none;}
.fld-input:focus,.fld-area:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.fld-area{resize:vertical;min-height:70px;line-height:1.5;}
.fld-cost3{display:flex;gap:7px;}
.fld-cost3 .c3{flex:1;}
.fld-cost3 .c3 span{display:block;font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:2px;}

/* ---- Decks: a list screen and an editor screen (like the Cards section) ---- */
#view-decks{padding:0;}

/* list screen: top = deck grid, bottom = full-size preview of the selected deck */
.dk-list-screen{padding:0;height:100vh;display:flex;flex-direction:column;}
.dk-list-top{flex:1;min-height:0;overflow-y:auto;padding:18px 24px 22px;}
.dk-list-top .page-h1{margin-top:0;}
.dk-grid{display:flex;flex-wrap:wrap;gap:22px;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:14px 24px 22px;border-top:2px solid #141414;background:#2A2A28;}
.dk-preview-hint{font-size:13px;color:rgba(255,255,255,.5);text-shadow:0 1px 2px rgba(0,0,0,.4);padding:12px 2px;}
.dk-prev-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.dk-prev-title{font-family:'DM Serif Display',serif;font-size:20px;color:#F5F0E8;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.dk-prev-count{font-size:12px;color:rgba(255,255,255,.5);text-shadow:0 1px 2px rgba(0,0,0,.4);}
.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(--gold);color:#2A2010;font-size:11px;font-weight:700;border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 1px 4px rgba(0,0,0,.55);z-index:4;}

/* deck card: name / leader / brief description (the game's style) */
.pg-deck-card{width:130px;min-height:188px;border-radius:9px;border:2px solid rgba(255,255,255,.15);background:#F5F0E8;display:flex;flex-direction:column;overflow:visible;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:2px 4px 12px rgba(0,0,0,.6);position:relative;flex-shrink:0;}
.pg-deck-card:not(.pg-deck-blank):hover{transform:translateY(-6px) scale(1.03);box-shadow:3px 12px 28px rgba(0,0,0,.8);}
.pg-deck-blank{border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03);box-shadow:none;cursor:default;overflow:hidden;}
.pg-blank-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:184px;padding:10px;text-align:center;}
.pg-blank-name{font-family:'DM Serif Display',serif;font-size:13px;color:rgba(255,255,255,.4);line-height:1.2;}
.pg-blank-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-top:6px;}
.pg-dc-inner{border-radius:7px;overflow:hidden;display:flex;flex-direction:column;flex:1;}
.pg-dc-bar{height:6px;width:100%;flex-shrink:0;}
.pg-dc-name{font-family:'DM Serif Display',serif;font-size:12px;font-weight:500;color:#1A1208;padding:6px 8px 2px;line-height:1.2;}
.pg-dc-leader{font-size:8px;color:#6A5840;padding:0 8px 5px;letter-spacing:.04em;text-transform:uppercase;}
.pg-dc-desc{font-size:8px;color:#4A3820;padding:0 8px;line-height:1.4;flex:1;}
.pg-dc-fac{display:flex;gap:3px;flex-wrap:wrap;padding:6px 8px 7px;}
.pg-dc-pip{font-size:7px;padding:1px 5px;border-radius:2px;letter-spacing:.04em;}

/* editor screen: two columns, full height */
.deck-editor{display:flex;height:100vh;}
.de-left{flex:0 0 768px;display:flex;flex-direction:column;min-height:0;}
/* neat columns: pills flow top-to-bottom then across; copies of a card stay
   together in one column; left sides align */
.dk-cols{column-width:212px;column-gap:16px;}
.dk-cg{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:9px;}
.pg-list-item{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.dup-dot{width:6px;height:6px;border-radius:50%;background:#E8C870;flex-shrink:0;}
.deck-back{display:inline-block;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.4);text-decoration:none;cursor:pointer;padding:14px 20px 6px;}
.deck-back:hover{color:var(--gold);}
.de-cards-sec{flex:1.4;overflow-y:auto;padding:4px 20px 14px;min-height:0;}
.de-holding-sec{flex:0.85;overflow-y:auto;padding:12px 20px 14px;min-height:110px;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.1);}
.de-lookup-sec{flex:1;overflow-y:auto;padding:12px 20px 16px;min-height:0;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.14);}
.dk-col-h2{font-family:'DM Serif Display',serif;font-size:15px;color:#F5F0E8;text-shadow:0 1px 3px rgba(0,0,0,.5);margin:0 0 10px;}
.de-sub{font-size:12px;font-weight:400;color:rgba(255,255,255,.45);text-shadow:none;}
/* collapsible holding / add-cards sections (collapsed by default) */
.de-toggle{cursor:pointer;display:flex;align-items:center;gap:9px;user-select:none;}
.de-caret{width:8px;height:8px;border-right:1.7px solid rgba(255,255,255,.55);border-bottom:1.7px solid rgba(255,255,255,.55);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-right{flex:1;min-width:360px;background:var(--sb-bg);border-left:1px solid rgba(0,0,0,.22);display:flex;flex-direction:column;min-height:0;}

/* add / remove controls on the card-list pills */
.de-btn{flex-shrink:0;width:22px;height:22px;border-radius:5px;border:1px solid var(--gold-mut);background:rgba(0,0,0,.3);color:var(--gold);cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.de-btn:hover{background:rgba(0,0,0,.5);}

/* 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;background:#F5F0E8;border:1px solid #C8B89A;color:#1A1208;font-family:'Public Sans',sans-serif;font-size:13px;padding:7px 10px;outline:none;}
.de-lookup-in:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.de-lk-fac{display:flex;gap:5px;}
.de-lk-fac .fchip{border-color:rgba(255,255,255,.28);opacity:.35;}
.de-lk-fac .fchip:hover{opacity:.7;}
.de-lk-fac .fchip.on{opacity:1;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 0 3.5px rgba(255,255,255,.55);}
.de-lk-type{width:auto;background:#2A2A28;border:1px solid rgba(255,255,255,.2);color:#F5F0E8;}
.de-hint{font-size:11px;color:rgba(255,255,255,.4);margin-top:8px;}
/* selected deck: the deck-select spinning ring, in gold */
.pg-deck-card.sel{transform:translateY(-6px) scale(1.03);box-shadow:3px 12px 28px rgba(0,0,0,.8);border-color:#C3A56F;}
.pg-deck-card.sel::before{content:'';position:absolute;inset:-6px;border-radius:14px;padding:6px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:pop-hl-spin 2.6s linear infinite;
  background:conic-gradient(from var(--pop-hl-angle),#F0DCA0,#C3A56F,#E8C870,#A8863E,#F0DCA0);}

/* middle column: card pills grouped by type; width shrinks to the pills */
.dk-cards{overflow-y:auto;min-height:0;padding:0 22px 16px 4px;}
.pg-list-type-lbl{font-family:'Public Sans',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);}
.pg-list-type-lbl:first-child{margin-top:0;padding-top:0;border-top:none;}
/* a small 1/2/3 to the left of each copy of a multi-copy card */
.copy-num{width:12px;flex-shrink:0;text-align:center;font-size:10px;font-weight:600;color:rgba(255,255,255,.5);}
.pg-list-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;}
.pg-list-qty{font-family:'Public Sans',sans-serif;font-size:9px;font-weight:500;color:rgba(255,255,255,.6);flex-shrink:0;min-width:18px;text-align:right;}
/* pills size to their own title, not the column width */
.pg-list-pill{display:inline-flex;align-items:center;border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.4);flex:0 0 auto;min-height:26px;background:#F5F0E8;cursor:pointer;}
.pg-list-pill-bar{width:10px;flex-shrink:0;align-self:stretch;}
.pg-list-pill-name{font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;padding:6px 11px 6px 7px;white-space:nowrap;flex:0 0 auto;line-height:1.2;color:#1A1208;}

/* right column: the notes board, all on parchment (its own sidebar) */
.dk-notes{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:20px;padding:20px 22px 28px;color:var(--sb-ink);}
.dk-sec-h{font-size:11px;font-weight:600;color:rgba(0,0,0,.5);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;}

/* collapsible notes section: header toggles the body */
.nsec-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:11px;font-weight:600;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.nsec-h:hover{color:rgba(0,0,0,.75);}
.nsec-caret{width:7px;height:7px;border-right:1.6px solid rgba(0,0,0,.45);border-bottom:1.6px solid rgba(0,0,0,.45);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;}

/* editable description field */
.dk-desc-row{display:flex;align-items:flex-start;gap:10px;}
.dk-desc-in{flex:1;min-width:0;background:#fff;border:1px solid rgba(0,0,0,.25);color:#2A2420;font-family:'Public Sans',sans-serif;font-size:13px;line-height:1.5;padding:7px 9px;outline:none;resize:vertical;min-height:64px;}
.dk-desc-in:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.dk-desc-txt{flex:1;min-width:0;}

/* 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:#fff;border:1px solid rgba(0,0,0,.16);padding:4px 10px;font-size:12px;color:#2A2420;}
.pt-tag b{color:#8A6A1E;font-weight:700;}
.pt-sub{font-size:10px;font-weight:600;color:rgba(0,0,0,.42);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px;}
/* read-only playtester comments in a scrollable box */
.pt-cmts{max-height:220px;overflow-y:auto;padding-right:4px;}

/* editable deck title + description at the very top */
.dk-title-row{display:flex;align-items:flex-start;gap:10px;}
.dk-title{font-family:'DM Serif Display',serif;font-size:24px;color:var(--sb-ink);line-height:1.12;flex:1;min-width:0;}
.dk-title-in{flex:1;font-size:20px;font-family:'DM Serif Display',serif;background:#fff;border:1px solid rgba(0,0,0,.25);color:#1A1208;padding:5px 9px;outline:none;min-width:0;}
.dk-title-in:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.dk-title-actions{flex-shrink:0;display:flex;gap:5px;}
.dk-desc{font-size:13px;color:rgba(0,0,0,.62);line-height:1.5;margin-top:6px;}

/* card-count boxes */
.dk-count-grid{display:flex;flex-wrap:wrap;gap:8px;}
.dk-count-box{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.13);min-width:60px;padding:8px 10px;text-align:center;flex:1 0 auto;}
.dk-count-box.total{background:var(--sb-fill);border-color:var(--sb-fill);}
.dk-count-num{font-family:'DM Serif Display',serif;font-size:22px;color:var(--sb-ink);line-height:1;}
.dk-count-box.total .dk-count-num{color:var(--parch);}
.dk-count-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.5);margin-top:4px;}
.dk-count-box.total .dk-count-lbl{color:rgba(245,240,232,.7);}

/* playtest stats: current version + a version scrubber */
.dk-pt{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.14);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(--sb-ink);flex:1;}
.ver-btn{border:1px solid rgba(0,0,0,.25);background:#fff;color:#2A2420;border-radius:6px;width:26px;height:24px;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.ver-btn:hover:not(:disabled){background:#EFEAE0;}
.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-family:'DM Serif Display',serif;font-size:20px;color:var(--sb-ink);line-height:1;}
.dk-pt-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.5);margin-top:4px;}

/* revision history + comment threads on parchment */
.dk-notes .rev{padding:7px 0;border-top:1px solid rgba(0,0,0,.1);font-size:12px;}
.dk-notes .rev:first-of-type{border-top:none;}
.dk-notes .rev-meta{color:rgba(0,0,0,.45);margin-bottom:2px;}
.dk-notes .rev-meta b{color:rgba(0,0,0,.7);font-weight:600;}
.dk-notes .rev-field{color:var(--sb-ink);}
.dk-notes .rev-old{color:#B4462E;}
.dk-notes .rev-new{color:#3B7A2E;}
.dk-notes .rev-arrow{color:rgba(0,0,0,.35);margin:0 5px;}
.dk-notes .cmt-add{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.dk-notes .cmt-add textarea{background:#fff;border:1px solid rgba(0,0,0,.25);color:#1A1208;}
.dk-notes .cmt-add textarea:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
.dk-notes .cmt-post{background:var(--sb-fill);color:var(--parch);border:none;}
.dk-notes .cmt-post:hover{background:#4A4238;}
.dk-notes .cmt{background:#fff;border:1px solid rgba(0,0,0,.14);padding:9px 13px;margin-bottom:8px;}
.dk-notes .cmt-head{font-size:11px;margin-bottom:4px;}
.dk-notes .cmt-who{color:#8A6A1E;font-weight:700;}
.dk-notes .cmt-when{color:rgba(0,0,0,.4);}
.dk-notes .cmt-body{color:#2A2420;font-size:13px;}
.dk-notes .cmt-empty{color:rgba(0,0,0,.4);}

/* ---- squared chrome: only cards, pills, and buttons keep rounded corners;
   everything else uses the flat Windows-10 treatment ---- */
.sb-input,.fld-input,.fld-area,.af-chip,.sb-tag,.fchip,.fld-art,
.panel,.det-panel,.dk-stat-panel,.pub-panel,.an-panel,.tile,.grid-info,
.dk-notes .cmt,.dk-notes .cmt-add textarea{border-radius:0;}

/* ---- full-size art lightbox ---- */
.fld-art,.cp-art{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:700000;background:rgba(10,10,8,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 50px rgba(0,0,0,.8);}
.lb-close{position:fixed;top:16px;right:22px;background:none;border:none;color:rgba(255,255,255,.85);font-size:28px;line-height:1;cursor:pointer;}
.lb-close:hover{color:#fff;}

/* ---- activity section: tabs + combined timeline ---- */
.act-tabs{display:flex;gap:2px;margin-bottom:14px;border:1px solid rgba(0,0,0,.14);border-radius:6px;overflow:hidden;width:max-content;}
.act-tab{border:none;background:none;color:rgba(0,0,0,.55);font-family:inherit;font-size:12px;font-weight:500;padding:7px 14px;cursor:pointer;}
.act-tab:hover{background:rgba(0,0,0,.05);color:var(--sb-ink);}
.act-tab.on{background:var(--sb-fill);color:var(--parch);}
.tl-item{padding:9px 0;border-top:1px solid rgba(0,0,0,.1);}
.tl-item:first-child{border-top:none;}
.tl-meta{font-size:11px;color:rgba(0,0,0,.5);}
.tl-meta b{color:rgba(0,0,0,.75);font-weight:600;}
.tl-field{color:var(--sb-ink);}
.tl-detail{font-size:12px;margin-top:3px;}
.tl-detail .rev-old{color:#B4462E;}.tl-detail .rev-new{color:#3B7A2E;}
.tl-body{font-size:13px;color:#2A2420;margin-top:3px;line-height:1.45;}
.tl-comment{border-left:2px solid rgba(184,148,46,.5);padding-left:10px;}

/* theme / strategy fields */
.dk-fld{margin-bottom:12px;}
.dk-fld-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,.45);margin-bottom:5px;}

/* ---- per-card playtest stat grid ---- */
.cs-group-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.5);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:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.13);padding:9px 10px;}
.cs-num{font-family:'DM Serif Display',serif;font-size:19px;color:var(--sb-ink);line-height:1;}
.cs-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:rgba(0,0,0,.5);margin-top:5px;line-height:1.25;}

/* ---- login gate ---- */
#login-gate{position:fixed;inset:0;z-index:800000;background:#1A1A18;display:flex;align-items:center;justify-content:center;padding:20px;}
#login-gate[hidden]{display:none;}
.login-box{width:340px;max-width:100%;background:var(--sb-bg);border:1px solid var(--sb-edge);border-radius:2px;padding:26px 26px 22px;}
.login-brand{margin-bottom:18px;}
.login-title{font-family:'DM Serif Display',serif;font-size:26px;color:var(--sb-ink);}
.login-sub{font-size:12px;color:rgba(0,0,0,.45);letter-spacing:.02em;}
#login-form{display:flex;flex-direction:column;gap:10px;}
#login-form input{background:#fff;border:1px solid rgba(0,0,0,.25);border-radius:2px;padding:10px 12px;font-family:inherit;font-size:14px;color:#1A1208;outline:none;}
#login-form input:focus{border-color:#B8942E;box-shadow:0 0 0 2px rgba(184,148,46,.3);}
#login-btn{background:var(--sb-fill);color:var(--parch);border:none;border-radius:2px;padding:11px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-top:2px;}
#login-btn:hover:not(:disabled){background:#4A4238;}
#login-btn:disabled{opacity:.5;cursor:default;}
.login-msg{font-size:12px;color:#B23A2A;min-height:16px;line-height:1.4;}
.login-note{font-size:11px;color:rgba(0,0,0,.4);margin-top:14px;}

/* ---- "Coming soon" section placeholder ---- */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;}
.cs-badge{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#3A2E14;background:var(--gold);border-radius:4px;padding:4px 12px;margin-bottom:16px;}
.cs-title{font-family:'DM Serif Display',serif;font-size:32px;color:#F5F0E8;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.cs-sub{font-size:13px;color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:8px;}

/* ---- nav "soon" tag on not-yet-live sections ---- */
.sb-nav-btn.soon{opacity:.6;}
.sb-nav-btn.soon::after{content:'soon';font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.2);border-radius:3px;padding:1px 5px;margin-left:8px;vertical-align:1px;}

/* ---- signed-in user + sign out ---- */
.sb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:rgba(0,0,0,.5);}
.sb-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-logout{border:1px solid rgba(0,0,0,.2);background:none;color:rgba(0,0,0,.6);border-radius:5px;font-size:11px;padding:4px 9px;cursor:pointer;font-family:inherit;flex-shrink:0;}
.sb-logout:hover{background:rgba(0,0,0,.06);color:var(--sb-ink);}

/* ---- 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;}

/* ---- the game's hover tooltip, copied from its styles.css ---- */
.tt{position:fixed;z-index:600000;pointer-events:none;background:#F5F0E8;border:1px solid #C8B89A;border-radius:9px;padding:14px 16px;width:320px;font-size:14px;color:#1A1208;box-shadow:0 8px 28px rgba(0,0,0,.75);display:none;}
.ttn{font-family:'DM Serif Display',serif;font-size:18px;color:#1A1208;margin-bottom:4px;font-weight:500;}
.ttr{line-height:1.6;margin-top:4px;color:#4A3820;font-size:14px;}
.ttf{font-style:italic;color:#8A7860;margin-top:4px;border-top:1px solid #D8C8A8;padding-top:4px;font-size:12px;}
.fc-White{color:#A8A8A0;}.fc-Blue{color:#1A4A8C;}.fc-Gold{color:#5A4A00;}.fc-Red{color:#8C2020;}.fc-Black{color:#4A4A4A;}.fc-multi{color:#8A8020;}