/* STAGE-4 — shared styles for roster.html and playbook.html */
:root{
--ground:#EFF1F3; --surface:#FFFFFF; --surface-2:#E4E7EB; --sunk:#F6F7F9;
--ink:#14181E; --ink-2:#49515D; --ink-3:#79828F;
--rule:#D3D8DE; --rule-2:#E5E9ED;
--ct:#245FA8; --ct-ink:#1A4880; --ct-wash:rgba(36,95,168,.10); --ct-edge:rgba(36,95,168,.30);
--t:#9A6B12; --t-ink:#7E5709; --t-wash:rgba(176,124,26,.13); --t-edge:rgba(176,124,26,.34);
--alert:#AF3527; --alert-wash:rgba(175,53,39,.09); --alert-edge:rgba(175,53,39,.28);
--shadow:0 1px 2px rgba(16,22,30,.05), 0 8px 24px -14px rgba(16,22,30,.28);
--tex:rgba(16,22,30,.05); --tex2:rgba(16,22,30,.055);
--c-blue:#2E6FC4; --c-green:#3B9A5E; --c-yellow:#D4A828; --c-purple:#7A56C2; --c-orange:#B4531A;
--sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--disp:"Archivo", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ground:#0C0F13; --surface:#14181F; --surface-2:#1C222B; --sunk:#10141A;
--ink:#E7EAEE; --ink-2:#A4ADB9; --ink-3:#6F7885;
--rule:#262D38; --rule-2:#1E242D;
--ct:#6FA2E2; --ct-ink:#9DC2F0; --ct-wash:rgba(111,162,226,.13); --ct-edge:rgba(111,162,226,.32);
--t:#DCA847; --t-ink:#EFC479; --t-wash:rgba(220,168,71,.13); --t-edge:rgba(220,168,71,.32);
--alert:#E4796A; --alert-wash:rgba(228,121,106,.11); --alert-edge:rgba(228,121,106,.30);
--shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
--tex:rgba(255,255,255,.038); --tex2:rgba(255,255,255,.045);
--c-blue:#5A93DE; --c-green:#57B97C; --c-yellow:#E8C452; --c-purple:#9B7BDD; --c-orange:#CC6A2C;
}
}
:root[data-theme="dark"]{
--ground:#0C0F13; --surface:#14181F; --surface-2:#1C222B; --sunk:#10141A;
--ink:#E7EAEE; --ink-2:#A4ADB9; --ink-3:#6F7885;
--rule:#262D38; --rule-2:#1E242D;
--ct:#6FA2E2; --ct-ink:#9DC2F0; --ct-wash:rgba(111,162,226,.13); --ct-edge:rgba(111,162,226,.32);
--t:#DCA847; --t-ink:#EFC479; --t-wash:rgba(220,168,71,.13); --t-edge:rgba(220,168,71,.32);
--alert:#E4796A; --alert-wash:rgba(228,121,106,.11); --alert-edge:rgba(228,121,106,.30);
--shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
--tex:rgba(255,255,255,.038); --tex2:rgba(255,255,255,.045);
--c-blue:#5A93DE; --c-green:#57B97C; --c-yellow:#E8C452; --c-purple:#9B7BDD; --c-orange:#CC6A2C;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
margin:0; background:var(--ground); color:var(--ink);
font-family:var(--sans); font-size:15px; line-height:1.6;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
/* ---------- app bar ---------- */
.appbar{
position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
background:color-mix(in srgb, var(--ground) 92%, transparent);
backdrop-filter:saturate(1.5) blur(12px);
border-bottom:1px solid var(--rule);
}
.appbar-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-block:9px}
.brand{display:flex; align-items:center; gap:10px; grid-row:1; grid-column:2; justify-self:center; text-decoration:none; color:inherit}
.appright{
display:flex; align-items:center; gap:14px;
grid-row:1; grid-column:3; justify-self:end;
}
.logo{width:46px; height:46px; border-radius:11px; display:block; flex:0 0 auto}
.wordmark{font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:.005em; line-height:1}
.sections{display:flex; gap:3px; grid-row:1; grid-column:1; justify-self:start}
@media (max-width:820px){
.appbar-in{grid-template-columns:minmax(0,1fr) auto; row-gap:8px; column-gap:10px}
.brand{grid-row:1; grid-column:1; justify-self:start; min-width:0}
.appright{grid-row:1; grid-column:2; justify-self:end; min-width:0}
.sections{grid-row:2; grid-column:1 / -1; justify-self:start}
.logo{width:36px; height:36px; border-radius:9px}
.wordmark{font-size:19px; white-space:nowrap}
}
.sections a{
display:inline-block; text-decoration:none; border:1px solid transparent; cursor:pointer;
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em;
text-transform:uppercase; color:var(--ink-3); padding:7px 12px; border-radius:3px; line-height:normal;
}
.sections a:hover{color:var(--ink-2)}
.sections a[aria-selected="true"], .sections a[aria-current="page"]{color:var(--ink); background:var(--surface); border-color:var(--rule)}
.sections a:focus-visible, .themeseg button:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.count{
font-family:var(--mono); font-size:9.5px; font-weight:500; color:var(--ink-3);
margin-left:7px; letter-spacing:.04em;
}
.eyebrow{
font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3);
}
/* ---------- nav rows ---------- */
.navrow{border-bottom:1px solid var(--rule); background:var(--ground)}
#view-playbook > .navrow{
position:sticky; top:calc(var(--appbar-h, 66px) + env(safe-area-inset-top,0px)); z-index:28;
background:color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter:saturate(1.5) blur(12px);
}
.btn.editsave{min-width:72px; font-weight:700; letter-spacing:.14em}
.btn.editsave.go{background:color-mix(in srgb, var(--c-green) 18%, var(--surface)); border-color:color-mix(in srgb, var(--c-green) 55%, var(--rule)); color:var(--c-green)}
.btn.editsave.go:hover{background:color-mix(in srgb, var(--c-green) 28%, var(--surface))}
.btn.editsave.stop{background:color-mix(in srgb, var(--alert) 18%, var(--surface)); border-color:color-mix(in srgb, var(--alert) 60%, var(--rule)); color:var(--alert)}
.btn.editsave.stop:hover{background:color-mix(in srgb, var(--alert) 28%, var(--surface))}
.btn.undo{color:var(--ink-2)}
.navrow.sub{border-bottom-color:var(--rule-2)}
.navrow-in{display:flex; align-items:center; gap:10px; padding-block:8px; overflow-x:auto; scrollbar-width:thin}
.navrow-in.centred{justify-content:center}
@media (max-width:820px){ .navrow-in.centred{justify-content:flex-start} }
/* CT / T sit at the left of the map row, map tabs stay centred */
.maprow{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
gap:10px; padding-block:8px;
}
.sidegrp{
grid-column:1; justify-self:start; display:flex; flex-direction:column;
gap:3px; flex:0 0 auto;
}
.maptools{grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; flex:0 0 auto}
.maptools .dirty{display:none}
.appright{min-height:24px}
.maptabs{
grid-column:2; display:flex; gap:10px; justify-content:center;
overflow-x:auto; scrollbar-width:thin; min-width:0;
}
.sidegrp .sidetab{
padding:3px 10px; font-size:9.5px; letter-spacing:.16em; min-width:40px; text-align:center;
}
@media (max-width:820px){
.maprow{grid-template-columns:auto 1fr; gap:7px 10px}
.sidegrp{grid-column:1; grid-row:1; justify-self:start}
.maptools{grid-column:2; grid-row:1; justify-self:end}
.maptabs{grid-column:1 / -1; grid-row:2; justify-content:flex-start}
}
.tabgroup{display:flex; gap:3px; flex:1 1 auto; min-width:0}
[draggable="true"]{cursor:grab}
.dragging{opacity:.4}
.drop-before, .drop-after{position:relative}
.drop-before::after, .drop-after::after{
content:""; position:absolute; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--t);
}
.drop-before::after{left:-5px} .drop-after::after{right:-5px}
.book.ct .drop-before::after, .book.ct .drop-after::after{background:var(--ct)}
.maptabs .drop-before::after, .maptabs .drop-after::after{background:var(--ink)}
/* ---------- shared bits ---------- */
.co{
font-family:var(--mono); font-size:.86em; font-weight:500;
background:var(--surface-2); padding:.08em .34em; border-radius:2px;
white-space:nowrap; letter-spacing:-.01em;
}
.sec-label{
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.15em;
text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;
}
/* ---------- intro panels ---------- */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-block:40px; border-radius:4px; overflow:hidden}
.panel{background:var(--surface); padding:22px 20px}
.panel h3{font-family:var(--disp); font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px}
.panel p{margin:0; font-size:14px; color:var(--ink-2)}
.panel ul{margin:6px 0 0; padding-left:17px; font-size:14px; color:var(--ink-2)}
.panel li{margin-bottom:4px}
/* ---------- map section ---------- */
.map{padding-block:46px; border-top:1px solid var(--rule)}
.map:first-of-type{border-top:none}
.map-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,330px); gap:28px 40px; align-items:end}
@media (max-width:780px){.map-head{grid-template-columns:1fr; align-items:start}}
.map-name{font-family:var(--disp); font-weight:800; font-size:clamp(30px,5.2vw,46px); line-height:1; letter-spacing:-.025em; margin:8px 0 0}
.map-sub{margin:12px 0 0; color:var(--ink-2); font-size:14.5px; max-width:58ch}
.vaulted-tag{
display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
text-transform:uppercase; border:1px solid var(--rule); color:var(--ink-3);
padding:2px 7px; border-radius:2px; margin-left:10px; vertical-align:middle;
}
/* side-split chart */
.split{}
.split-top{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px}
.split-top .l{color:var(--ct)}
.split-top .r{color:var(--t)}
.split-bar{display:flex; height:26px; border-radius:2px; overflow:hidden; background:var(--surface-2)}
.split-bar i{display:block; height:100%}
.split-bar .ct-fill{background:var(--ct)}
.split-bar .t-fill{background:var(--t)}
.split-bar.nodata{
background:repeating-linear-gradient(135deg,var(--surface-2) 0 7px,var(--sunk) 7px 14px);
border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.split-nums{display:flex; justify-content:space-between; font-family:var(--mono); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:6px}
.split-nums .l{color:var(--ct)} .split-nums .r{color:var(--t)}
.split-note{margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-3); font-family:var(--mono); letter-spacing:.01em}
/* patch watch */
.patch{
margin-top:26px; border-left:3px solid var(--alert); background:var(--alert-wash);
padding:14px 16px; border-radius:0 3px 3px 0;
}
.patch .sec-label{color:var(--alert); margin-bottom:7px}
.patch ul{margin:0; padding-left:17px; font-size:14px; color:var(--ink-2)}
.patch li{margin-bottom:5px}
.patch li:last-child{margin-bottom:0}
.patch time{font-family:var(--mono); font-size:12px; color:var(--ink); font-weight:500}
/* sides */
.sides{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px}
@media (max-width:860px){.sides{grid-template-columns:1fr}}
.side{background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
.side-head{
display:flex; align-items:center; gap:10px; padding:13px 18px;
font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase;
border-bottom:1px solid var(--rule);
}
.side-head span{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:none; color:var(--ink-3); margin-left:auto}
.side.ct .side-head{background:var(--ct-wash); color:var(--ct-ink); border-bottom-color:var(--ct-edge)}
.side.t .side-head{background:var(--t-wash); color:var(--t-ink); border-bottom-color:var(--t-edge)}
.side-body{padding:6px 18px 18px}
.blk{padding-top:15px; margin-top:15px; border-top:1px solid var(--rule-2)}
.blk:first-child{border-top:none; margin-top:0}
.blk ul{margin:0; padding-left:17px}
.blk li{margin-bottom:6px; font-size:14px; color:var(--ink-2)}
.blk li:last-child{margin-bottom:0}
.blk li b{color:var(--ink); font-weight:600}
.side.ct .blk li b{color:var(--ct-ink)}
.side.t .blk li b{color:var(--t-ink)}
/* setup roster */
.roster{list-style:none; margin:0; padding:0; display:grid; gap:0}
.roster li{
display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:baseline;
padding:7px 0; border-bottom:1px dashed var(--rule-2); margin:0; font-size:14px;
}
.roster li:last-child{border-bottom:none}
.roster .n{
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em;
color:var(--ink-3); text-transform:uppercase;
}
.side.ct .roster .n{color:var(--ct)}
.side.t .roster .n{color:var(--t)}
/* round scripts */
.scripts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:22px}
.script{background:var(--sunk); padding:15px 17px}
.script .sec-label{margin-bottom:6px}
.script p{margin:0; font-size:13.5px; color:var(--ink-2)}
/* footnote */
.foot{border-top:1px solid var(--rule); margin-top:10px; padding-block:40px 60px; color:var(--ink-2); font-size:14px}
.foot h3{font-family:var(--disp); font-size:16px; font-weight:700; margin:0 0 10px; color:var(--ink)}
.foot p{max-width:72ch}
.foot a{color:var(--ct)}
.srcs{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:4px 24px; margin-top:14px; padding:0; list-style:none}
.srcs li{font-size:12.5px; font-family:var(--mono); letter-spacing:-.005em}
.srcs a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule)}
.srcs a:hover{color:var(--ct); border-bottom-color:var(--ct)}
/* ---------- roster ---------- */
.roster-head{padding-block:30px 4px; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:flex-end; justify-content:space-between}
.roster-head h2{font-family:var(--disp); font-weight:800; font-size:clamp(22px,3.4vw,30px); line-height:1; letter-spacing:-.025em; margin:8px 0 0}
.roster-head p{margin:12px 0 0; color:var(--ink-2); font-size:14.5px; max-width:56ch}
.savebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dirty{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--alert)}
.dirty.clean{color:var(--ink-3)}
.btn{
appearance:none; cursor:pointer; font-family:var(--mono); font-size:11px;
letter-spacing:.1em; text-transform:uppercase; padding:9px 15px; border-radius:3px;
border:1px solid var(--rule); background:var(--surface); color:var(--ink-2);
}
.btn:hover:not(:disabled){color:var(--ink); border-color:var(--ink-3)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.btn.primary{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn.primary:hover:not(:disabled){opacity:.87; color:var(--ground)}
.btn.primary:disabled{background:transparent; color:var(--ink-3); border-color:var(--rule); opacity:1}
.btn.ghost{border-color:transparent; color:var(--ink-3); padding:6px 9px}
.btn.ghost:hover{color:var(--alert)}
.roster-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding-block:14px 0; min-height:0}
.roster-top .ghead{grid-column:2}
.roster-top .savebar{grid-column:3; justify-self:end}
.ghead{font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:.08em; text-transform:uppercase; margin:0; text-align:center}
.ghead.subs-head{margin-top:40px; color:var(--ink-2)}
.rgrid{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; margin-top:16px}
/* ---------- team shelf: a row of team-wide links above the starters ---------- */
.shelf{
display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px auto 4px; max-width:1180px;
padding:8px 10px; border:1px solid var(--rule); border-radius:5px;
background-color:var(--surface); background-image:repeating-linear-gradient(135deg, var(--tex) 0 1px, transparent 1px 9px);
box-shadow:var(--shadow);
}
.shelf-item{
display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
border:1px solid var(--rule); border-radius:4px; background:var(--sunk); padding:6px 12px 6px 8px;
transition:border-color .12s ease, background .12s ease;
}
.shelf-item:hover{border-color:var(--ink-3); background:var(--surface-2)}
.shelf-item:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.shelf-item img{width:26px; height:26px; border-radius:6px; display:block}
.shelf-item > span:not(.ext){display:flex; flex-direction:column; line-height:1.15; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:-.01em}
.shelf-item small{font-family:var(--sans); font-weight:400; font-size:11.5px; color:var(--ink-3); letter-spacing:0}
.shelf-item .ext{font-size:12px; color:var(--ink-3); margin-left:2px}
.shelf-item:hover .ext{color:var(--ink)}
@media (max-width:600px){ .shelf{justify-content:center} }
.rgrid > *{flex:1 1 300px; max-width:358px; min-width:0}
.rgrid.subs > *{flex:1 1 196px; max-width:228px}
.rgrid.subs .card{padding:13px; gap:9px}
.rgrid.subs .av{width:42px; height:42px; font-size:15px}
.rgrid.subs .card-top{grid-template-columns:42px minmax(0,1fr); gap:10px}
.rgrid.subs .f .handle{font-size:14px}
.rgrid.subs .f input, .rgrid.subs .f select, .rgrid.subs .f textarea{font-size:13.5px; padding:5px 7px}
.rgrid.subs .f label{font-size:9.5px; letter-spacing:.1em}
.rgrid.subs .roles{gap:7px}
.rgrid.subs .chip{font-size:9.5px; padding:2px 5px}
.rgrid.subs textarea{min-height:42px}
/* profile links */
.links{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.lnk{
width:30px; height:30px; display:block; border-radius:7px; overflow:hidden;
text-decoration:none; background:none; box-shadow:0 0 0 1px var(--rule);
}
.lnk img{width:100%; height:100%; display:block; object-fit:cover}
.lnk-steam{border-radius:50%}
/* the four logos sit at different sizes inside their tiles; scale each so the marks read the same */
.lnk-faceit{background:#FF4B00} .lnk-faceit img{transform:scale(1.1)}
/* Leetify and Medal are dark tiles that melt into the card, so they read smaller than the
bright Steam disc and FACEIT square: lift their tiles, ring them, and enlarge the marks */
.lnk-leetify{background:#2A2833; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent)} .lnk-leetify img{transform:scale(1.42); background:transparent}
.lnk-medal{background:#262626; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent)} .lnk-medal img{transform:scale(1.06)}
.lnk:hover{filter:brightness(1.15); box-shadow:0 0 0 1px var(--ink-3)}
.lnk:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.linkedit{
appearance:none; background:none; border:1px dashed var(--rule); border-radius:4px; cursor:pointer;
height:28px; padding:0 10px; color:var(--ink-3);
font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
}
.linkedit:hover{color:var(--ink-2); border-color:var(--ink-3)}
.linkedit:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.editpanel{display:none; flex-direction:column; gap:11px; padding-top:12px; border-top:1px dashed var(--rule-2)}
.card.editing .editpanel{display:flex}
.card-foot .editbtn{margin-right:auto}
.card:not(.editing) .card-foot .acts{display:none}
.card.cdirty{box-shadow:var(--shadow), 0 0 0 2px var(--t-edge)}
.card.cdirty .cog{color:var(--t-ink); border-color:var(--t-edge)}
.idcol{display:flex; flex-direction:column; gap:8px; min-width:0}
.handleout{
font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.015em;
margin:0; line-height:1.1; overflow-wrap:anywhere;
}
.handleout.dim{color:var(--ink-3); font-weight:600}
/* long names step down a size instead of breaking mid-word; the line stays 24px so the picture still lines up */
.card-top .handleout{line-height:24px}
.card-top .handleout.long{font-size:18px}
.bioout{margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}
.bioout.dim{color:var(--ink-3); font-style:italic; font-size:12.5px}
.bioout.dim:empty{display:none}
.bioline{margin:4px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-2); display:flex; align-items:center; flex-wrap:wrap; gap:0 10px}
.bioline > span{min-width:0; overflow-wrap:anywhere}
.bioline .sep{display:inline-block; width:1px; height:12px; background:var(--ink-3); opacity:.55; flex:0 0 auto}
.bioline .ph{color:var(--ink-3); font-style:italic}
.f3{display:grid; grid-template-columns:1.2fr .6fr 1.4fr; gap:8px}
@media (max-width:480px){ .f3{grid-template-columns:1fr 1fr} .f3 .f:last-child{grid-column:1/-1} }
/* favourites strip */
.favs{border-top:1px dashed var(--rule-2); padding-top:12px}
.favgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.fav{display:flex; flex-direction:column; gap:4px; min-width:0}
.fav.mid{text-align:center; align-items:center}
.fav > .favk{line-height:1.35; min-height:2.7em; display:flex; align-items:flex-end; justify-content:center}
.favk{
font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3);
}
.favv{
font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:-.005em;
color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}
.favv.dim{color:var(--ink-3); font-weight:500}
.favv.tenure small{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:5px}
.mapic{display:block; width:22px; height:22px; object-fit:contain; flex:0 0 auto}
.mapbadge{
display:inline-flex; align-items:center; gap:7px; min-width:0;
padding:4px 9px 4px 5px; border:1px solid var(--rule); border-radius:999px;
background:var(--surface-2); align-self:flex-start;
}
.fav.mid .mapbadge{align-self:center}
/* the gun pill is 30px of icon + padding + border = 40px; the map icon and the tenure figure match that height */
.favpic{display:flex; align-items:center; justify-content:center; height:40px}
.mapic.favmap{width:38px; height:38px}
.fav.mid .favv{display:flex; align-items:baseline; justify-content:center; min-height:40px; line-height:40px}
.favv.tenure{font-size:20px; letter-spacing:-.01em}
.favv.tenure small{margin-left:6px; line-height:1}
.favpic.gun{
height:auto; padding:4px 12px; border-radius:999px; max-width:100%;
background:color-mix(in srgb, var(--cc, var(--ink-3)) 26%, #fff);
border:1px solid color-mix(in srgb, var(--cc, var(--ink-3)) 45%, var(--rule));
}
.favgun{display:block; height:30px; width:auto; max-width:100%; object-fit:contain}
svg.favgun{width:56px}
.mapbadge span{
font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:-.005em;
color:var(--ink); white-space:nowrap;
}
.card[data-color] .mapbadge{
background:color-mix(in srgb, var(--cc) 14%, var(--surface));
border-color:color-mix(in srgb, var(--cc) 34%, var(--rule));
}
.mapsel{display:flex; align-items:center; gap:8px}
.mapsel select{flex:1 1 auto; min-width:0}
.mapsel-ic{display:flex; width:24px; height:24px; flex:0 0 auto; align-items:center; justify-content:center}
.mapsel-ic .mapic{width:24px; height:24px}
.subtab.hasic{display:inline-flex; align-items:center; gap:7px}
.mapic.tabic{width:18px; height:18px; opacity:.72; transition:opacity .12s}
.subtab:hover .mapic.tabic{opacity:.95}
.subtab[aria-selected="true"] .mapic.tabic{opacity:1}
/* map tabs use the shared shelf look (see .pb-tile in chrome.css): icon + bold name, no box */
.maptabs{gap:4px}
.maptabs .subtab{
position:relative; border:none; background:none; border-radius:3px;
font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.03em;
color:var(--ink-3); padding:7px 10px; gap:9px; transition:color .12s ease;
}
.maptabs .subtab:hover{color:var(--ink); background:none}
.maptabs .subtab[aria-selected="true"]{color:var(--ink); background:none; border:none}
.maptabs .subtab[aria-selected="true"]:not(.drop-before):not(.drop-after)::after{content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:var(--brand)}
.maptabs .mapic.tabic{width:28px; height:28px; opacity:.8}
.maptabs .subtab:hover .mapic.tabic, .maptabs .subtab[aria-selected="true"] .mapic.tabic{opacity:1}
@media (max-width:600px){
.maptabs .subtab{padding:6px 8px; gap:7px; font-size:13px}
.maptabs .mapic.tabic{width:24px; height:24px}
}
.mapic.capic{width:17px; height:17px; margin-right:-3px}
/* bio sits on the same line as the cog */
.biorow{display:flex; align-items:flex-end; gap:12px; border-top:1px dashed var(--rule-2); padding-top:12px}
.bioblock{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0}
.cog{
appearance:none; cursor:pointer; background:none; border:1px solid transparent; border-radius:4px;
width:30px; height:30px; display:grid; place-items:center; padding:0; flex:0 0 auto; color:var(--ink-3);
}
.cog:hover{color:var(--ink); border-color:var(--rule); background:var(--sunk)}
.cog:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.cog svg{width:17px; height:17px}
.card.editing .cog{color:var(--ink); border-color:var(--rule); background:var(--sunk)}
.panelacts{display:flex; gap:4px; justify-content:flex-end; padding-top:2px}
.favedit{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.rgrid.subs .av{width:56px; height:56px; font-size:18px}
.rgrid.subs .card-top{grid-template-columns:56px minmax(0,1fr); gap:11px}
.rgrid.subs .handleout{font-size:17px}
.rgrid.subs .favgrid{grid-template-columns:1fr 1fr; gap:9px}
.rgrid.subs .favv{font-size:14px}
.rgrid.subs .favpic{height:32px} .rgrid.subs .mapic.favmap{width:30px; height:30px} .rgrid.subs .fav.mid .favv{min-height:32px; line-height:32px} .rgrid.subs .favv.tenure{font-size:24px}
.card-foot .acts{display:flex; gap:3px; margin-left:auto}
/* ---------- CT / T books ---------- */
.sidetab{
appearance:none; cursor:pointer; background:var(--sunk); border:1px solid var(--rule);
border-radius:3px; padding:7px 22px; color:var(--ink-3);
font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.12em;
}
.sidetab:hover{color:var(--ink-2)}
.sidetab:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.sidetab[data-side="ct"][aria-selected="true"]{background:var(--ct-wash); color:var(--ct-ink); border-color:var(--ct-edge)}
.sidetab[data-side="t"][aria-selected="true"] {background:var(--t-wash); color:var(--t-ink); border-color:var(--t-edge)}
.sidetab[data-side="sheet"][aria-selected="true"]{background:var(--surface); color:var(--ink); border-color:var(--rule)}
.book{
margin:18px 0 52px; border:1px solid var(--rule); border-radius:5px; overflow:hidden;
background-color:var(--surface);
background-image:repeating-linear-gradient(135deg, var(--tex) 0 1px, transparent 1px 9px);
}
/* T: sand, brushed vertically. Same build as CT, lines turned 90deg. */
.book.t{
border-color:color-mix(in srgb, var(--t) 40%, var(--rule));
background-color:color-mix(in srgb, var(--t) 12%, var(--surface));
background-image:
repeating-linear-gradient(90deg, color-mix(in srgb, var(--t) 16%, transparent) 0 1px, transparent 1px 3px),
linear-gradient(10deg, transparent 0 38%, color-mix(in srgb, #fff 6%, transparent) 50%, transparent 62%),
repeating-linear-gradient(0deg, transparent 0 40px, color-mix(in srgb, #fff 3%, transparent) 40px 41px);
}
.book.t .pc-bar{
background-color:color-mix(in srgb, var(--t) 22%, var(--surface));
background-image:
repeating-linear-gradient(90deg, color-mix(in srgb, var(--t) 22%, transparent) 0 1px, transparent 1px 3px),
linear-gradient(10deg, transparent 0 35%, color-mix(in srgb, #fff 8%, transparent) 50%, transparent 65%);
border-bottom-color:var(--t-edge);
}
/* CT: police blue, brushed metal. */
.book.ct{
border-color:color-mix(in srgb, var(--ct) 40%, var(--rule));
background-color:color-mix(in srgb, var(--ct) 12%, var(--surface));
background-image:
repeating-linear-gradient(0deg, color-mix(in srgb, var(--ct) 16%, transparent) 0 1px, transparent 1px 3px),
linear-gradient(100deg, transparent 0 38%, color-mix(in srgb, #fff 6%, transparent) 50%, transparent 62%),
repeating-linear-gradient(90deg, transparent 0 40px, color-mix(in srgb, #fff 3%, transparent) 40px 41px);
}
.book.ct .pc-bar{
background-color:color-mix(in srgb, var(--ct) 24%, var(--surface));
background-image:
repeating-linear-gradient(0deg, color-mix(in srgb, var(--ct) 22%, transparent) 0 1px, transparent 1px 3px),
linear-gradient(100deg, transparent 0 35%, color-mix(in srgb, #fff 8%, transparent) 50%, transparent 65%);
border-bottom-color:var(--ct-edge);
}
.book.ct .pc-round{color:var(--ct-ink); border-color:var(--ct-edge)}
.book.ct .pc-bar .entrytab{color:var(--ct-ink)}
.book.ct .pc-bar .entrytab:hover{background:color-mix(in srgb, var(--ct) 16%, transparent)}
.book.ct .pc-bar .entrytab[aria-selected="true"]{color:#fff; background:var(--ct); border-color:var(--ct)}
.book.ct .pc-ico:hover{color:var(--ct-ink); border-color:var(--ct-edge)}
.book.ct .mbt[aria-pressed="true"]{background:var(--ct-wash); border-color:var(--ct-edge); color:var(--ct-ink)}
.book.ct .mb-chip.on{background:var(--ct-wash); border-color:var(--ct)}
.book.ct .armor.on{border-color:var(--ct-edge); background:var(--ct-wash)}
.book.ct .entryname{border-color:var(--ct)}
.pc-body{padding:14px 16px 18px}
.roles-list{margin:2px 0 16px}
.rcols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px 26px}
@media (max-width:760px){ .rcols{grid-template-columns:1fr} }
.rcol{min-width:0}
.rk{
display:block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.15em;
text-transform:uppercase; color:var(--ink-3); margin:0 0 7px;
}
.book.t .rk{color:var(--t-ink)}
.book.ct .rk{color:var(--ct-ink)}
.sumbox{
margin:4px 0 14px; padding:12px 16px 13px; border:1px solid var(--rule); border-radius:4px;
background:var(--surface); box-shadow:var(--shadow);
}
.book.t .sumbox{border-color:color-mix(in srgb, var(--t) 45%, var(--rule)); border-left:4px solid var(--t)}
.book.ct .sumbox{border-color:color-mix(in srgb, var(--ct) 45%, var(--rule)); border-left:4px solid var(--ct)}
.sumk{
margin:0 0 6px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-3);
}
.book.t .sumk{color:var(--t-ink)} .book.ct .sumk{color:var(--ct-ink)}
.sumbox .strat-sum{margin:0; font-size:15px; line-height:1.55; color:var(--ink)}
.sumbox .strat-sum.dimline{color:var(--ink-3); font-style:italic}
.buystrip{margin-top:0}
.mapboard{margin-top:14px; position:relative}
.peek{
position:absolute; z-index:20; left:50%; transform:translateX(-50%); top:58px;
width:min(560px, calc(100% - 24px));
}
.peek .role.peek-card{box-shadow:0 18px 50px -12px rgba(0,0,0,.7), 0 0 0 1px var(--rule)}
.peek .role-head{padding:10px 14px; cursor:grab; user-select:none}
.peek.dragging .role-head{cursor:grabbing}
.peek.dragging{opacity:.92}
.peek .role-body{padding:12px 14px 14px}
.peek .rcols{grid-template-columns:minmax(0,1fr)}
.peek .rcol + .rcol{margin-top:6px}
.peek .rcol:has(.steps li.ph){display:none}
.peek-none{
display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--rule);
border-radius:4px; padding:10px 14px; font-size:13.5px; color:var(--ink-2); box-shadow:var(--shadow);
}
.peek-none b{color:var(--ink)}
.mb-tools.ro .mb-chip{cursor:pointer}
.book-head{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--rule)}
.book-head h3{font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.09em; text-transform:uppercase; margin:0}
.book.ct .book-head{background:var(--ct-wash); border-bottom-color:var(--ct-edge)}
.book.ct .book-head h3{color:var(--ct-ink)}
.book.t .book-head{background:var(--t-wash); border-bottom-color:var(--t-edge)}
.book.t .book-head h3{color:var(--t-ink)}
.book-head .icon-btn{
appearance:none; cursor:pointer; background:none; border:1px solid transparent; border-radius:3px;
width:24px; height:24px; display:grid; place-items:center; color:inherit; opacity:.75;
font-family:var(--mono); font-size:15px; line-height:1; padding:0;
}
.book-head .icon-btn:hover{opacity:1; border-color:currentColor}
.book-head .icon-btn:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.book-head .rtype{margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.entrytabs{display:flex; gap:8px; flex-wrap:wrap; padding:11px 18px 0; align-items:center}
.tgroup{
display:inline-flex; align-items:center; gap:3px; padding:3px 6px 3px 4px; border-radius:999px;
border:1px solid var(--rule); background:color-mix(in srgb, var(--surface) 70%, transparent);
}
.tgun{display:grid; place-items:center; width:38px; height:22px; margin-right:2px; opacity:.85}
.tgun img{width:36px; height:20px; object-fit:contain; display:block; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
:root:not([data-theme="light"]) .tgun img, :root[data-theme="dark"] .tgun img{filter:brightness(1.35) drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.tgroup .entrytab{padding:4px 10px; border-radius:999px}
.tgroup .entryname{border-radius:999px; padding:4px 10px}
.pc-edhint{font-size:11.5px; color:var(--ink-3)}
.pc-links.ed .pc-edrow select{flex:0 0 auto}
.entrytab, .entryname, .crt-mode .vtitle{text-transform:uppercase}
.entrytab{
appearance:none; cursor:pointer; background:none; border:1px solid transparent; border-radius:3px;
padding:6px 12px; color:var(--ink-3); font-family:var(--sans); font-size:13.5px; font-weight:500;
}
.entrytab:hover{color:var(--ink-2); background:var(--surface-2)}
.entrytab[aria-selected="true"]{color:var(--ink); border-color:var(--rule); background:var(--sunk)}
.entrytab:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.entryname{
font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); background:var(--sunk);
border:1px solid var(--ct); border-radius:3px; padding:5px 10px; max-width:190px;
}
/* ---- T strat book bar ---- */
.pc-bar{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
padding:11px 14px; border-bottom:1px solid var(--t-edge);
background-color:var(--t-wash);
background-image:repeating-linear-gradient(135deg, var(--tex2) 0 1px, transparent 1px 9px);
}
.pc-round{
font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
font-weight:600; color:var(--t-ink); background:var(--surface);
border:1px solid var(--t-edge); border-radius:3px; padding:5px 6px; flex:0 0 auto;
}
.pc-round:focus{outline:2px solid var(--t); outline-offset:-1px}
.pc-bar .entrytabs{padding:0; gap:6px; flex:1 1 auto; min-width:0}
.pc-bar .entrytab{
display:inline-flex; align-items:baseline; gap:7px;
padding:5px 12px; border:1px solid transparent; border-radius:3px; background:none;
font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.01em;
color:var(--t-ink); opacity:.7;
}
.pc-bar .entrytab small{
font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.8;
}
.pc-bar .entrytab:hover{opacity:1; background:color-mix(in srgb, var(--t) 14%, transparent)}
.pc-bar .entrytab[aria-selected="true"]{
opacity:1; color:#14181E; background:var(--t); border-color:var(--t);
text-shadow:none;
}
.pc-bar .entrytab[aria-selected="true"] small{opacity:.75}
.pc-bar .entryname{border-color:var(--t); font-family:var(--disp); font-weight:700; font-size:14.5px}
.pc-ico{
width:30px; height:28px; display:grid; place-items:center; flex:0 0 auto; cursor:pointer;
background:none; border:1px solid transparent; border-radius:3px;
color:var(--ink-3); font-size:17px; line-height:1;
}
.pc-ico:hover{color:var(--t-ink); border-color:var(--t-edge); background:var(--surface)}
.pc-ico:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.pc-ico svg{width:17px; height:17px}
.pc-ico.wide{
width:auto; padding:0 12px; font-family:var(--mono); font-size:10.5px;
letter-spacing:.1em; text-transform:uppercase; font-weight:600;
color:var(--t-ink); border-color:var(--t); background:var(--surface);
}
.pc-src{
font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
color:var(--t-ink); text-decoration:none; border-bottom:1px solid var(--t-edge);
flex:0 0 auto; margin-left:2px;
}
.pc-edrow{display:flex; align-items:center; gap:9px; margin:0 0 4px}
.pc-edrow label{
font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.pc-edrow{flex-wrap:wrap}
.pc-edrow select{
font-family:var(--mono); font-size:11px; color:var(--ink); background:var(--sunk);
border:1px solid var(--rule); border-radius:3px; padding:4px 6px;
}
.pc-edrow label + label{margin-left:8px}
.pc-srcin{
font-family:var(--mono); font-size:11px; color:var(--ink); background:var(--sunk);
border:1px solid var(--rule); border-radius:3px; padding:4px 7px; flex:1 1 260px; min-width:0;
}
.pc-srcin:focus{outline:2px solid var(--t); outline-offset:-1px; border-color:var(--t)}
.strat-sum.dimline{color:var(--ink-3)}
.bookbody{padding:16px 18px 20px}
.tablewrap{overflow-x:auto}
.setup{width:100%; min-width:720px; border-collapse:separate; border-spacing:0 6px}
.setup col.c-pos{width:132px}
.setup col.c-player{width:168px}
.setup th{
text-align:left; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; color:var(--ink-3); padding:0 10px 4px; border-bottom:1px solid var(--rule-2);
}
.setup td{padding:9px 10px; vertical-align:top; background-color:var(--sunk); border-block:1px solid var(--rule-2)}
.setup td:first-child{border-left:1px solid var(--rule-2); border-radius:4px 0 0 4px}
.setup td:last-child{border-right:1px solid var(--rule-2); border-radius:0 4px 4px 0}
/* each row takes the assigned player's colour */
.setup tr[data-color="blue"] {--cc:var(--c-blue)}
.setup tr[data-color="green"] {--cc:var(--c-green)}
.setup tr[data-color="yellow"]{--cc:var(--c-yellow)}
.setup tr[data-color="purple"]{--cc:var(--c-purple)}
.setup tr[data-color="orange"]{--cc:var(--c-orange)}
.setup tr[data-color] td{
background-color:color-mix(in srgb, var(--cc) 13%, var(--surface));
border-color:color-mix(in srgb, var(--cc) 34%, var(--rule-2));
}
.sitesel{
appearance:none; cursor:pointer; background:none; border:1px solid transparent; border-radius:3px;
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
color:var(--ct); padding:4px 6px; width:62px;
}
.book.t .sitesel{color:var(--t)}
.sitesel:hover{border-color:var(--rule)}
.sitesel:focus{outline:2px solid var(--ct); outline-offset:-1px}
.cellin{
font-family:var(--sans); font-size:13.5px; color:var(--ink); background:none;
border:1px solid transparent; border-radius:3px; padding:5px 7px; width:100%; min-width:0;
}
.cellin.pos{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em}
.cellin:hover{border-color:var(--rule)}
.cellin:focus{outline:2px solid var(--ct); outline-offset:-1px; background:var(--sunk); border-color:var(--ct)}
.pbtn{
display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
background:none; border:1px solid transparent; border-radius:3px; padding:5px 7px;
font-family:var(--sans); font-size:13.5px; color:var(--ink); text-align:left;
}
.pbtn:hover{border-color:var(--rule)}
.pbtn:focus-visible{outline:2px solid var(--ct); outline-offset:-1px}
.pbtn .pdot{width:11px; height:11px; border-radius:2px; flex:0 0 auto; border:1px solid rgba(128,128,128,.3); box-shadow:inset 0 0 0 11px var(--surface-2)}
.pbtn .pdot[style*='var(--c-']{box-shadow:none}
.pbtn.empty{color:var(--ink-3)}
.ppop{
position:absolute; z-index:60; min-width:180px; background:var(--surface); border:1px solid var(--rule);
border-radius:4px; box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:2px;
}
.ppop button{
display:flex; align-items:center; gap:9px; cursor:pointer; background:none;
border:1px solid transparent; border-radius:3px; padding:7px 9px; color:var(--ink);
font-family:var(--sans); font-size:13.5px; text-align:left;
}
.ppop button:hover{background:var(--surface-2); border-color:var(--rule)}
.ppop button:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.ppop .pdot{width:11px; height:11px; border-radius:2px; flex:0 0 auto; border:1px solid rgba(128,128,128,.3); box-shadow:inset 0 0 0 11px var(--surface-2)}
.ppop .pdot[style*='var(--c-']{box-shadow:none}
.notelist{margin:0; padding-left:17px; cursor:text; min-height:26px}
.notelist li{font-size:13px; color:var(--ink-2); margin-bottom:5px; line-height:1.5}
.notelist li:last-child{margin-bottom:0}
.notelist .ph{list-style:none; margin-left:-17px; color:var(--ink-3); font-style:italic; font-size:12.5px}
.notelist.bul:hover .ph{color:var(--ink-2)}
.entrytab.fixed[aria-selected="true"]{border-style:solid}
.entrytab.fixed{font-weight:600}
.noteedit{
font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink); background:var(--sunk);
border:1px solid var(--ct); border-radius:3px; padding:7px 9px; width:100%; min-height:78px; resize:vertical;
}
.notewrap{display:flex; flex-direction:column; gap:5px; width:100%}
.notewrap .noteedit{border-radius:0 0 3px 3px; margin-top:0}
.fmtbar{
display:flex; align-items:center; gap:4px; flex-wrap:wrap;
padding:5px 6px; background:var(--surface-2); border:1px solid var(--rule); border-radius:3px 3px 0 0;
margin-bottom:-6px;
}
.fmt{
appearance:none; cursor:pointer; background:var(--surface); border:1px solid var(--rule); border-radius:3px;
color:var(--ink-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:3px 8px; line-height:1.4;
}
.fmt:hover{color:var(--ink); border-color:var(--ink-3)}
.fmt.b{font-weight:700} .fmt.i{font-style:italic}
.fmt.pl{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink)}
.fmt-dot{width:9px; height:9px; border-radius:2px; background:var(--pc, var(--ink-3)); flex:0 0 auto}
.fmt-sep{width:1px; height:18px; background:var(--rule); margin:0 3px}
.fmt-hint{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-3)}
@media (max-width:640px){ .fmt-hint{display:none} }
.addrow{display:flex; justify-content:center; gap:10px; margin-top:14px}
.addrow .hint{font-family:var(--mono); font-size:11px; color:var(--ink-3); align-self:center}
.card-foot{flex-wrap:wrap; row-gap:6px}
.rgrid.subs .card-foot .meta{font-size:9px}
.rgrid.subs .btn.ghost{padding:5px 6px; font-size:9px; letter-spacing:.06em}
.card{
position:relative; background-color:var(--surface); border:1px solid var(--rule); border-radius:4px;
box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:14px; overflow:hidden;
background-image:
repeating-linear-gradient(135deg, var(--tex) 0 1px, transparent 1px 9px),
radial-gradient(circle at 1px 1px, var(--tex2) 1px, transparent 1.6px);
background-size:auto, 17px 17px;
}
.card > *{position:relative; z-index:1}
/* ---- flip: a dog-eared corner turns the card over ---- */
.rgrid{perspective:1100px}
.card{will-change:transform; transform-origin:50% 50%}
.card.flipping{pointer-events:none}
/* second half of the turn: the card is past 90deg, so un-mirror whatever face is showing
and park the corner on the card's far edge so it stays top-right on screen */
.card.past > .cfront, .card.past > .cback{transform:rotateY(180deg)}
.card.past .flip{right:auto; left:-1px; transform:rotateY(180deg); border-radius:4px 0 0 0}
.card{--fold:var(--ink-3); --fold-w:20px}
.card[data-color]{--fold:var(--cc)}
.flip{
position:absolute; top:-1px; right:-1px; width:48px; height:48px; padding:0; border:0; background:none;
cursor:pointer; z-index:3; overflow:hidden; border-radius:0 4px 0 0; -webkit-tap-highlight-color:transparent;
}
.flip::before, .flip::after, .flip i{
content:""; position:absolute; top:0; right:0; width:var(--fold-w); height:var(--fold-w); pointer-events:none;
transition:width .28s cubic-bezier(.34,1.4,.64,1), height .28s cubic-bezier(.34,1.4,.64,1), opacity .2s, transform .2s;
animation:fold-breathe 3.4s ease-in-out infinite;
}
.flip::after{ /* the void behind the lifted corner, deeper toward the crease */
clip-path:polygon(0 0, 100% 0, 100% 100%);
background:linear-gradient(225deg, var(--ground) 0 18%, color-mix(in srgb, var(--ground) 78%, #000) 50%);
z-index:0;
}
.flip i{ /* soft shadow the flap throws onto the card */
clip-path:polygon(-30% -30%, 130% 130%, -30% 130%);
background:linear-gradient(225deg, transparent 0 47%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.2) 78%, rgba(0,0,0,0) 96%);
filter:blur(2.5px); transform:translate(-2px,3px); opacity:.6; z-index:1;
}
.flip::before{ /* the flap: the card's coloured underside, lit at the crease, shaded at the tip */
clip-path:polygon(0 0, 100% 100%, 0 100%);
background:
linear-gradient(225deg, transparent 0 50%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 57%),
linear-gradient(225deg, transparent 0 50%, color-mix(in srgb, var(--fold) 58%, #fff) 50%, var(--fold) 74%, color-mix(in srgb, var(--fold) 72%, #000) 100%);
z-index:2;
}
.flip:hover::before, .flip:hover::after, .flip:hover i,
.flip:focus-visible::before, .flip:focus-visible::after, .flip:focus-visible i{--fold-w:34px; animation:none}
.flip:hover i, .flip:focus-visible i{opacity:.75; transform:translate(-3px,5px)}
.flip:active::before, .flip:active::after, .flip:active i{--fold-w:30px}
.flip:focus-visible{outline:2px solid var(--ct); outline-offset:-2px}
@keyframes fold-breathe{0%,74%,100%{width:var(--fold-w); height:var(--fold-w)} 84%{width:calc(var(--fold-w) + 6px); height:calc(var(--fold-w) + 6px)}}
@media (prefers-reduced-motion:reduce){.flip::before, .flip::after, .flip i{animation:none}}
.cfront, .cback{display:flex; flex-direction:column; gap:inherit; min-width:0}
.card.flipped .cfront, .card:not(.flipped) .cback{display:none}
.cback{flex:1 1 auto}
.cb-head{display:flex; align-items:baseline; gap:10px; padding-right:36px}
.cb-head .favk{margin-left:auto}
.vprev{
position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:1px solid var(--rule);
border-radius:5px; overflow:hidden; cursor:pointer; background:#0C1015; color:#fff;
}
.vprev img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.vprev .vsrc{
position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; color:rgba(255,255,255,.72); text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.vprev .play{
position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%);
border-radius:50%; background:rgba(12,16,21,.72); border:2px solid rgba(255,255,255,.85);
display:grid; place-items:center; transition:transform .15s, background .15s;
box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.vprev .play svg{width:22px; height:22px; margin-left:4px; fill:#fff}
.vprev:hover .play{transform:translate(-50%,-50%) scale(1.08); background:var(--alert)}
.vprev:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.vprev.none{cursor:default; display:grid; place-items:center; background:var(--sunk); color:var(--ink-3); border-style:dashed}
.vprev.none .vmsg{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:0 16px; line-height:1.8}
.vprev.none svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; margin-bottom:6px}
.cback .cb-links{display:flex; align-items:center; gap:10px; margin-top:auto}
.cback .cb-links a{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); text-decoration:none}
.cback .cb-links a:hover{color:var(--ink)}
/* reference + video pills */
.pc-links{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px}
.pc-links.ed{flex-direction:column; gap:6px; margin:2px 0 12px}
.pc-links.ed .pc-edrow{flex-wrap:nowrap}
.pc-links.ed .pc-edrow label{flex:0 0 76px}
.pill-link{
display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 9px; border-radius:999px;
font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-2); background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow);
text-decoration:none; cursor:pointer; line-height:1.4; transition:border-color .15s, color .15s, transform .15s;
}
.pill-link svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pill-link .ext{font-size:11px; margin-left:-2px; opacity:.7}
.pill-link:hover{transform:translateY(-1px)}
.book.t .pill-link:hover, .book.t .pill-link:focus-visible{color:var(--t-ink); border-color:var(--t)}
.book.ct .pill-link:hover, .book.ct .pill-link:focus-visible{color:var(--ct-ink); border-color:var(--ct)}
.pill-link:focus-visible{outline:2px solid var(--t); outline-offset:2px}
/* ---- the Mirage CRT: a beige set with the video on its screen ---- */
.vbox.crt-mode{width:min(980px, 92vw, calc((100vh - 230px) * 1.55))}
.crt{--case:#C7BC9F; --case-hi:#DCD3BA; --case-lo:#9C9176; --case-deep:#6E6550; filter:drop-shadow(0 30px 60px rgba(0,0,0,.65))}
.crt[style*="--tv"]{
--case:var(--tv);
--case-hi:color-mix(in srgb, var(--tv) 74%, #fff);
--case-lo:color-mix(in srgb, var(--tv) 78%, #000);
--case-deep:color-mix(in srgb, var(--tv) 52%, #000);
}
.crt-body{
position:relative; border-radius:26px 26px 18px 18px; padding:4.2% 4.6% 0;
background:
linear-gradient(180deg, var(--case-hi) 0, var(--case) 22%, var(--case) 78%, var(--case-lo) 100%);
box-shadow:
inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.25),
inset 6px 0 10px -6px rgba(255,255,255,.35), inset -6px 0 10px -6px rgba(0,0,0,.3);
}
.crt-body::before{ /* worn plastic grain */
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.35;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px),
radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 40%),
radial-gradient(circle at 85% 95%, rgba(0,0,0,.18), transparent 45%);
}
.crt-bezel{
position:relative; border-radius:18px; padding:2.4%;
background:linear-gradient(180deg, #2A2823, #17160F);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 4px 10px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.4);
}
.crt .crt-screen{
position:relative; border-radius:12px / 16px; background:#000; overflow:hidden; box-shadow:none;
aspect-ratio:16/9; max-height:none;
}
.crt-screen .crt-glass{ /* curved glass: soft reflection + vignette */
position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:
linear-gradient(115deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.05) 22%, transparent 40%),
radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,.45) 100%);
box-shadow:inset 0 0 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.05);
animation:crt-clear .7s ease-out 2s forwards; /* the glass effects step aside once the picture is on */
}
.crt-screen .crt-scan{
position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.22;
background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
mix-blend-mode:multiply;
animation:crt-clear .7s ease-out 2s forwards;
}
@keyframes crt-clear{to{opacity:0; visibility:hidden}}
.crt-screen .crt-static{ /* the set warming up: snow, then the picture blooms in */
position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:
url("data:image/svg+xml;utf8,") #6b7178;
animation:crt-snow .1s steps(2) infinite, crt-on 1s ease-out forwards;
}
@keyframes crt-snow{0%{background-position:0 0} 100%{background-position:53px 37px}}
@keyframes crt-on{0%{opacity:1; transform:scaleY(.02)} 18%{opacity:1; transform:scaleY(1)} 70%{opacity:.9} 100%{opacity:0; visibility:hidden}}
.crt-panel{
position:relative; display:flex; align-items:center; gap:4%; height:clamp(44px, 7.5vw, 72px); padding:0 2% 0 3%;
border-radius:0 0 6px 6px;
}
.crt-grille{
flex:0 0 22%; height:52%; border-radius:3px; opacity:.85;
background:repeating-linear-gradient(90deg, var(--case-deep) 0 2px, transparent 2px 6px);
}
.crt-ctrls{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:clamp(6px, 1.4vw, 14px)}
.crt-ctrls i{display:block; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--case-hi), var(--case-lo) 70%, var(--case-deep)); box-shadow:0 1px 1px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.25)}
.crt-ctrls .knob{width:clamp(12px, 2vw, 20px); height:clamp(12px, 2vw, 20px)}
.crt-ctrls .key{width:clamp(9px, 1.4vw, 14px); height:clamp(6px, .9vw, 9px); border-radius:2px}
.crt-ctrls .knob + .key{margin-left:clamp(6px, 1.5vw, 14px)}
.crt-ctrls .led{width:6px; height:6px; margin-left:clamp(6px, 1.5vw, 14px); background:#E33F2C; box-shadow:0 0 6px 1px rgba(255,80,50,.8)}
.crt-tag{
flex:0 0 auto; font-family:var(--mono); font-size:clamp(7px, 1vw, 10px); letter-spacing:.2em; text-transform:uppercase;
color:var(--case-deep); opacity:.85; text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.crt-tray{
height:clamp(10px, 1.8vw, 18px); margin:0 -4.6%; border-radius:0 0 18px 18px;
background:linear-gradient(180deg, var(--case-lo), var(--case-deep));
box-shadow:inset 0 2px 3px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.12);
}
.crt-mode .vbar{padding-top:14px}
@media (prefers-reduced-motion:reduce){.crt-screen .crt-static{animation:crt-on .5s ease-out forwards}}
/* import dialog */
.pc-ico.imp svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ibox{position:relative; width:min(720px, 94vw); background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:6px; padding:18px 20px 16px; box-shadow:0 24px 80px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 48px)}
.ibox h3{margin:0; font-family:var(--disp); font-size:20px; font-weight:800; letter-spacing:-.01em}
.ibox .ihint{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}
.ibox textarea{width:100%; min-height:260px; flex:1 1 auto; resize:vertical; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink); background:var(--sunk); border:1px solid var(--rule); border-radius:4px; padding:10px 12px; tab-size:2}
.ibox textarea:focus{outline:2px solid var(--t); outline-offset:-1px; border-color:var(--t)}
.ifoot{display:flex; align-items:center; gap:8px}
.iprev{font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.iprev.ok{color:var(--t-ink)} .iprev.bad{color:var(--alert)}
.idest{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.idest label{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.idest select{font-family:var(--mono); font-size:11.5px; color:var(--ink); background:var(--sunk); border:1px solid var(--rule); border-radius:3px; padding:5px 8px; max-width:100%}
.ibm{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ink-2); line-height:1.5; padding:9px 12px; background:var(--sunk); border:1px dashed var(--rule); border-radius:4px}
.ibm svg{width:16px; height:16px; flex:0 0 auto; margin-top:2px; fill:none; stroke:var(--ink-3); stroke-width:1.8; stroke-linejoin:round}
.bmlink{display:inline-block; padding:2px 9px; border-radius:999px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--surface); border:1px solid var(--ink-3); text-decoration:none; cursor:grab; box-shadow:var(--shadow)}
.bmlink:active{cursor:grabbing}
.nl{
display:inline; padding:0 .1em; margin:0; border:0; background:none; font:inherit; font-weight:700; color:inherit;
cursor:pointer; border-bottom:1.5px dotted currentColor; line-height:inherit; text-align:left;
}
.nl svg{width:.72em; height:.72em; margin-left:.18em; vertical-align:-.02em; fill:currentColor; opacity:.7}
.book.t .nl{color:var(--t-ink)} .book.ct .nl{color:var(--ct-ink)}
.nl:hover{border-bottom-style:solid} .nl:hover svg{opacity:1}
.nl.vl{font-weight:600}
.ul{color:inherit; font-weight:600; text-decoration:none; border-bottom:1.5px dotted currentColor}
.ul:hover{border-bottom-style:solid}
.ul .ext{font-size:.8em; margin-left:.15em; opacity:.7}
.book.t .ul{color:var(--t-ink)} .book.ct .ul{color:var(--ct-ink)}
.nl:focus-visible{outline:2px solid var(--t); outline-offset:2px; border-radius:2px}
.vframe .vimg{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.vbar .vsrc-link{margin-left:auto} .vbar .vsrc-link + a{margin-left:0}
/* video player overlay */
.vmodal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px; background:rgba(6,8,11,.86); backdrop-filter:blur(6px)}
.vmodal[hidden]{display:none}
.vbox{position:relative; width:min(1080px, 92vw); max-height:calc(100vh - 48px)}
.vframe{width:100%; aspect-ratio:16/9; max-height:calc(100vh - 110px); background:#000; border-radius:6px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.6)}
.vframe iframe, .vframe video{width:100%; height:100%; display:block; border:0; background:#000}
.vbar{display:flex; align-items:center; gap:14px; padding:10px 2px 0; color:rgba(255,255,255,.75); font-family:var(--mono); font-size:11px; letter-spacing:.06em}
.vbar .vtitle{font-family:var(--disp); font-size:15px; font-weight:700; color:#fff; letter-spacing:-.005em}
.vbar a{color:rgba(255,255,255,.7); text-decoration:none; margin-left:auto}
.vbar a:hover{color:#fff}
.vclose{
position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
background:#14181D; color:#fff; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2;
}
.vclose:hover{background:var(--alert)}
.card[data-color="blue"] {--cc:var(--c-blue)}
.card[data-color="green"] {--cc:var(--c-green)}
.card[data-color="yellow"]{--cc:var(--c-yellow)}
.card[data-color="purple"]{--cc:var(--c-purple)}
.card[data-color="orange"]{--cc:var(--c-orange)}
.card[data-color]{
background-color:color-mix(in srgb, var(--cc) 11%, var(--surface));
border-color:color-mix(in srgb, var(--cc) 40%, var(--rule));
}
.card[data-color] .card-foot{border-top-color:color-mix(in srgb, var(--cc) 26%, var(--rule-2))}
/* colour picker */
.swatches{display:flex; gap:5px; align-items:center}
.sw{
width:17px; height:17px; padding:0; border-radius:50%; cursor:pointer;
border:1px solid rgba(128,128,128,.45); background:var(--sw);
}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ground), 0 0 0 3.5px var(--ink-2)}
.sw:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.sw-none{--sw:transparent; position:relative}
.sw-none::after{content:""; position:absolute; inset:3px; border-top:1.5px solid var(--ink-3); transform:rotate(-45deg)}
.sw-blue{--sw:var(--c-blue)} .sw-green{--sw:var(--c-green)} .sw-yellow{--sw:var(--c-yellow)}
.sw-purple{--sw:var(--c-purple)} .sw-orange{--sw:var(--c-orange)}
.cfront{container-type:inline-size}
/* picture runs from the top of the name down to the bottom of the profile icons (22px name + role tag + 30px icons = 97px), kept square */
.card-top{display:grid; grid-template-columns:97px minmax(0,1fr); gap:13px; align-items:start; position:relative}
/* only the name and role tag need to stay clear of the rating; the profile icons sit below it and use the full width */
.card-top .handleout, .card-top .rolechips{max-width:calc(100cqw - 110px - (100cqw - 24px) / 3 - 2px)}
/* season rating, top right — sits in the same column as Tenure below it (the favorites grid is
three equal columns with 12px gaps, so this box is exactly one of those columns wide) */
.rating{position:absolute; top:12px; right:0; width:calc((100% - 24px) / 3);
display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1; text-align:center}
.rating b{font-family:var(--disp); font-weight:800; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.rating.hi b{color:var(--c-green, #3B9A5E)}
.rating.lo b{color:var(--alert)}
.rating.zero b{color:var(--ink-3)}
.rgrid.subs .card-top{grid-template-columns:56px minmax(0,1fr); gap:9px}
.rgrid.subs .card-top .handleout, .rgrid.subs .card-top .rolechips{max-width:calc(100cqw - 65px - 62px)}
.rgrid.subs .rating{top:10px; width:56px; right:0} .rgrid.subs .rating b{font-size:17px}
.rgrid.subs .lnk{width:24px; height:24px; border-radius:6px}
.av{
position:relative; width:97px; height:97px; border-radius:5px; overflow:hidden;
border:1px solid var(--rule); background:var(--surface-2); padding:0; cursor:pointer;
display:grid; place-items:center; color:var(--ink-3);
font-family:var(--disp); font-weight:800; font-size:31px; letter-spacing:-.02em;
}
.av img{width:100%; height:100%; object-fit:cover; display:block}
.av:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.av .hint{
position:absolute; inset:auto 0 0 0; background:rgba(10,14,20,.76); color:#fff;
font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
padding:3px 0; opacity:0; transition:opacity .12s;
}
.av:hover .hint, .av:focus-visible .hint{opacity:1}
.av.ro, .card:not(.editing) .av{cursor:default}
.av.ro .hint, .card:not(.editing) .av .hint{display:none}
.f{display:flex; flex-direction:column; gap:4px}
.f label{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.f input, .f select, .f textarea{
font-family:var(--sans); font-size:15px; color:var(--ink);
background:var(--sunk); border:1px solid var(--rule); border-radius:3px;
padding:7px 9px; width:100%; min-width:0;
}
.f input:focus, .f select:focus, .f textarea:focus{outline:2px solid var(--ct); outline-offset:-1px; border-color:var(--ct)}
.f input[readonly], .f select:disabled, .f textarea[readonly]{background:transparent; border-color:transparent; padding-left:0; color:var(--ink-2)}
.f .handle{font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.01em}
.f textarea{resize:vertical; min-height:52px; line-height:1.5}
.f .err{font-family:var(--mono); font-size:10.5px; color:var(--alert); min-height:0}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rolechips{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.chip{
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
padding:3px 7px; border-radius:2px; background:var(--ct-wash); color:var(--ct-ink); border:1px solid var(--ct-edge);
}
.chip.sec{background:var(--t-wash); color:var(--t-ink); border-color:var(--t-edge)}
.steamrow{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.steamrow a{font-family:var(--mono); font-size:11.5px; color:var(--ct); text-decoration:none; border-bottom:1px solid var(--ct-edge); word-break:break-all}
.steamrow a:hover{border-bottom-color:var(--ct)}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--rule-2); padding-top:11px; margin-top:auto}
.card-foot .meta{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.addcard{
border:1px dashed var(--rule); background:transparent; border-radius:4px; padding:18px;
display:flex; flex-direction:column; gap:12px; box-shadow:none;
}
.addcard h3{font-family:var(--disp); font-size:15px; font-weight:700; margin:0}
.addcard p{margin:0; font-size:13px; color:var(--ink-3)}
.note{
margin-top:26px; border-left:3px solid var(--rule); padding:2px 0 2px 15px;
font-size:13.5px; color:var(--ink-2); max-width:70ch;
}
.note b{color:var(--ink)}
.toast{
position:fixed; left:50%; transform:translateX(-50%);
bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:50;
background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:3px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; box-shadow:var(--shadow);
max-width:calc(100vw - 32px);
}
.whoami .wh-role{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
/* ---------- settings menu ---------- */
.settings{position:relative; flex:0 0 auto}
.btn.sm.settings-btn{
width:30px; height:30px; padding:0; margin:0; display:grid; place-items:center; align-self:center;
background:none; border:1px solid transparent; color:var(--ink-2); overflow:visible; line-height:0;
}
.btn.sm.settings-btn svg{width:24px; height:24px; display:block; overflow:visible}
.btn.sm.settings-btn:hover:not(:disabled), .btn.sm.settings-btn:focus, .btn.sm.settings-btn[aria-expanded="true"]{
background:none; border-color:transparent; color:var(--ink); box-shadow:none;
}
.btn.sm.settings-btn:focus-visible{outline:2px solid var(--ct); outline-offset:2px}
.settings-btn[aria-expanded="true"]{color:var(--ink); border-color:var(--ink-3); background:var(--surface)}
.menu{
position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:230px;
background:var(--surface); border:1px solid var(--rule); border-radius:5px; box-shadow:var(--shadow);
padding:6px; display:flex; flex-direction:column; gap:2px;
}
.mi{
display:flex; flex-direction:column; gap:1px; text-align:left; text-decoration:none; cursor:pointer;
appearance:none; background:none; border:1px solid transparent; border-radius:3px; padding:8px 10px;
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.mi small{font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-3)}
.mi:hover{background:var(--surface-2); border-color:var(--rule)}
.mi.out{color:var(--alert)}
.mi-group{padding:8px 10px 6px; border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); margin:2px 0}
.mi-label{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.seg{display:flex; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.seg button{
appearance:none; border:none; cursor:pointer; background:var(--ground); color:var(--ink-3); flex:1 1 0;
display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 8px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.seg button svg{width:14px; height:14px}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
/* ---------- theme switch ---------- */
.themeseg{
display:flex; grid-row:1; grid-column:3; justify-self:end; gap:1px; flex:0 0 auto;
background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden;
}
.themeseg button{
appearance:none; border:none; cursor:pointer; background:var(--ground); color:var(--ink-3);
width:36px; height:28px; display:grid; place-items:center; padding:0;
}
.themeseg button:hover{color:var(--ink-2)}
.themeseg button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.themeseg button svg{width:15px; height:15px}
/* ---------- sub-tab strips ---------- */
.subtabs{border-bottom:1px solid var(--rule); background:var(--ground)}
.subtabs-in{display:flex; gap:4px; overflow-x:auto; padding-block:9px; scrollbar-width:thin}
.subtab{
appearance:none; background:none; border:1px solid transparent; cursor:pointer;
font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-3); padding:6px 12px; border-radius:3px;
white-space:nowrap; flex:0 0 auto;
}
.subtab:hover{color:var(--ink-2); background:var(--surface-2)}
.subtab[aria-selected="true"]{color:var(--ink); background:var(--surface); border-color:var(--rule)}
.subtab:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.subtab .count{margin-left:8px; font-size:9.5px; color:var(--ink-3); letter-spacing:.04em}
.subtabs.lvl3{border-bottom:none; background:none; margin-top:20px}
.subtabs.lvl3 .subtabs-in{padding-block:0}
/* ---------- strat board ---------- */
.strat-head h3{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.015em; margin:26px 0 0}
.strat-meta{margin:6px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.strat-meta a{color:var(--ct); text-decoration:none; border-bottom:1px solid var(--ct-edge); word-break:break-all}
.strat-meta a:hover{border-bottom-color:var(--ct)}
/* ---- play card ---- */
.playcard{margin:16px 18px 24px; border:1px solid var(--rule); border-radius:5px; background:var(--surface); box-shadow:var(--shadow)}
.pc-head{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:13px 16px; background:var(--t-wash); border-bottom:1px solid var(--t-edge); border-radius:5px 5px 0 0;
}
.mapic.pcic{width:30px; height:30px; flex:0 0 auto}
.pc-id{min-width:0; flex:1 1 220px}
.pc-name{
font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.015em;
margin:0; color:var(--ink); overflow-wrap:anywhere;
}
.pc-meta{
display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:3px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.pc-meta a{color:var(--t-ink); text-decoration:none; border-bottom:1px solid var(--t-edge)}
.pc-dot{opacity:.5}
.pc-type{color:var(--t-ink); font-weight:600}
.pc-typesel{
font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
color:var(--t-ink); background:var(--surface); border:1px solid var(--t-edge);
border-radius:3px; padding:3px 5px; font-weight:600;
}
.pc-save{
cursor:pointer; padding:7px 13px; font-family:var(--mono); font-size:10.5px;
letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
background:var(--surface); border:1px solid var(--rule); border-radius:3px; flex:0 0 auto;
}
.pc-save:hover{border-color:var(--t); color:var(--t-ink)}
.pc-save:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.pc-body{padding:14px 16px 6px}
.strat-sum.ed{cursor:text; border-radius:3px; padding:2px 5px; margin-left:-5px}
.strat-sum.ed:hover{background:var(--surface-2)}
.strat-sum .ph{color:var(--ink-3); font-style:italic}
.pc-addrole{margin:0 0 22px}
.rlabelin{
font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
color:var(--ink-3); background:none; border:1px solid transparent; border-radius:3px;
padding:2px 4px; margin-left:-4px; max-width:190px;
}
.rlabelin:hover{border-color:var(--rule)}
.rlabelin:focus{outline:none; border-color:var(--t); background:var(--surface); color:var(--ink-2)}
.buysin{
font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink); font-weight:600;
background:none; border:1px solid transparent; border-radius:3px; padding:2px 5px; min-width:190px;
}
.buysin:hover{border-color:var(--rule)}
.buysin:focus{outline:none; border-color:var(--t); background:var(--surface)}
.steps.edit{cursor:text; border-radius:3px; padding:4px 4px 4px 22px; margin-left:-6px}
.steps.edit:hover{background:var(--surface-2)}
.steps li.ph{color:var(--ink-3); font-style:italic; list-style:none; margin-left:-18px}
.role-foot{display:flex; justify-content:flex-end; padding:0 16px}
.rdel{
cursor:pointer; background:none; border:none; padding:4px 2px;
font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.rdel:hover{color:var(--t-ink)}
.rdel:focus-visible{outline:2px solid var(--t); outline-offset:1px}
/* ---- role card tinted by assigned player ---- */
.role[data-color="blue"] {--cc:var(--c-blue)}
.role[data-color="green"] {--cc:var(--c-green)}
.role[data-color="yellow"]{--cc:var(--c-yellow)}
.role[data-color="purple"]{--cc:var(--c-purple)}
.role[data-color="orange"]{--cc:var(--c-orange)}
.role[data-color]{border-color:color-mix(in srgb, var(--cc) 42%, var(--rule))}
.role[data-color] .role-head{
background:color-mix(in srgb, var(--cc) 19%, var(--surface-2));
border-bottom-color:color-mix(in srgb, var(--cc) 36%, var(--rule));
}
.role[data-color] .role-body,
.role[data-color] .rtoggle{background:color-mix(in srgb, var(--cc) 9%, var(--surface))}
.role[data-color] .uslot,
.role[data-color] .wicon,
.role[data-color] .wsel{background:color-mix(in srgb, var(--cc) 10%, var(--sunk))}
.rname{display:flex; align-items:center; gap:10px; flex:1 1 170px; min-width:0; flex-wrap:wrap}
.role.collapsed .rname{flex-wrap:nowrap}
.rbtn{
display:inline-flex; align-items:center; gap:8px; align-self:flex-start; max-width:100%;
font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--ink);
background:var(--surface); border:1px solid var(--rule); border-radius:3px;
padding:5px 9px; cursor:pointer;
}
.rbtn:hover:not(:disabled){border-color:var(--ink-3)}
.rbtn:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.rbtn:disabled{cursor:default; background:none; border-color:transparent; padding-left:0}
.rbtn.empty{color:var(--ink-3); font-weight:600}
.rbtn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rlabel{
font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
color:var(--ink-3);
}
/* ---- strat map board ---- */
.mapboard{margin:14px 0 4px; border:1px solid var(--rule); border-radius:4px; background:var(--surface); overflow:hidden}
.mb-tools{
display:grid; grid-template-columns:1fr auto 1fr;
grid-template-areas:"start mid end" ". pal .";
align-items:center; gap:8px 10px;
padding:8px 10px; background:var(--surface-2); border-bottom:1px solid var(--rule);
}
.mb-tools.ro{grid-template-areas:"pal pal pal"}
.mbg.start{grid-area:start}
.mbg.mid{grid-area:mid}
.mbg.end{grid-area:end}
.mbg.size{grid-area:size; justify-content:flex-start; gap:9px}
.mbg.pal{grid-area:pal; justify-content:center}
.mbg{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.mbg.start{justify-content:flex-start}
.mbg.mid{justify-content:center}
.mbg.end{justify-content:flex-end}
@media (max-width:860px){
.mb-tools{grid-template-columns:1fr; grid-template-areas:"start" "mid" "end" "size" "pal"; gap:7px}
.mb-tools.ro{grid-template-areas:"pal"}
.mbg.start, .mbg.mid, .mbg.end, .mbg.size, .mbg.pal{justify-content:center}
}
.mb-tools .sep{width:1px; height:22px; background:var(--rule); margin:0 3px}
.mb-tools .grow{flex:1 1 auto}
.mbt{
display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:5px 8px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-2); background:var(--sunk); border:1px solid var(--rule); border-radius:3px;
}
.mbt:hover{border-color:var(--ink-3); color:var(--ink)}
.mbt:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.mbt[aria-pressed="true"]{background:var(--t-wash); border-color:var(--t-edge); color:var(--t-ink)}
.mbt svg{width:16px; height:16px}
.mb-size{width:104px; accent-color:var(--t)}
.mb-lab{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.rbtn .pdot{
width:12px; height:12px; border-radius:3px; flex:0 0 auto;
border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.mb-tools .pdot{
width:13px; height:13px; border-radius:3px; flex:0 0 auto;
border:1px solid var(--rule); background:transparent;
}
.mb-wrap{max-width:820px; margin:0 auto}
.mb-layers{
display:flex; gap:6px; justify-content:center; padding:8px 10px 0; background:var(--surface);
}
.mb-layer{
cursor:pointer; padding:6px 14px; font-family:var(--mono); font-size:10.5px;
letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
background:var(--sunk); border:1px solid var(--rule); border-radius:3px;
}
.mb-layer:hover{color:var(--ink); border-color:var(--ink-3)}
.mb-layer:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.mb-layer[aria-selected="true"]{
background:var(--t-wash); border-color:var(--t-edge); color:var(--t-ink); font-weight:600;
}
.mb-row{display:flex; align-items:stretch; gap:12px; justify-content:center; padding:10px 12px 12px}
.mb-pal{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.mb-pal-k{
font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
color:var(--ink-3); padding:0 2px 2px;
}
.mb-pal-h{
font-family:var(--mono); font-size:9px; line-height:1.5; letter-spacing:.04em;
color:var(--ink-3); padding:4px 2px 0;
}
.mb-chip{
display:flex; align-items:center; gap:8px; cursor:grab; padding:4px 9px 4px 4px; min-width:104px;
background:var(--sunk); border:1px solid var(--rule); border-radius:4px; text-align:left;
touch-action:none; user-select:none;
}
.mb-chip:active:not(:disabled){cursor:grabbing}
.mb-chip:disabled{cursor:default}
.mb-ghost{
position:fixed; z-index:60; width:34px; height:34px; margin:-17px 0 0 -17px;
border-radius:6px; display:grid; place-items:center; pointer-events:none; opacity:.93;
font-family:var(--mono); font-size:13px; font-weight:700; color:#0E1116;
border:2px solid rgba(0,0,0,.4); box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.mb-stage.dropping{outline:2px dashed var(--t); outline-offset:-4px}
.mb-chip:hover:not(:disabled){border-color:var(--ink-3)}
.mb-chip:focus-visible{outline:2px solid var(--t); outline-offset:1px}
.mb-chip:disabled{cursor:default}
.mb-chip-ic{
width:24px; height:24px; border-radius:4px; flex:0 0 auto;
display:grid; place-items:center; color:#0E1116;
font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
border:1px solid rgba(0,0,0,.28);
}
.mb-chip-n{
font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--ink-2);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mb-chip.on{background:var(--t-wash); border-color:var(--t); box-shadow:0 0 0 1px var(--t) inset}
.mb-chip.on .mb-chip-n{color:var(--ink); font-weight:600}
.mb-chip.placed .mb-chip-ic::after{
content:''; position:absolute; margin:14px 0 0 14px; width:8px; height:8px; border-radius:50%;
background:var(--ink); box-shadow:0 0 0 2px var(--sunk);
}
.mb-chip.placed .mb-chip-ic{position:relative}
.mb-chip.placed .mb-chip-n{opacity:.55}
@media (max-width:640px){
.mb-pal{gap:5px}
.mb-chip{min-width:0}
}
.mb-stage{
position:relative; width:100%; max-width:820px; margin:0 auto; aspect-ratio:1/1; background:#14181D;
background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:6.25% 6.25%, 6.25% 6.25%;
touch-action:none; user-select:none; overflow:hidden;
}
.mb-stage.draw{cursor:crosshair}
.mb-stage img.mb-bg{
position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
filter:brightness(1.22) saturate(1.08);
}
.mb-stage img.mb-bg.ct-rot{transform:rotate(180deg)}
.mb-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.mb-hint{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.44);
line-height:1.9; pointer-events:none; padding:0 20px;
}
.mi-sel{stroke:#fff; stroke-width:3; stroke-dasharray:6 5; fill:none}
.mb-cap{
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
padding:8px 11px; border-top:1px solid var(--rule); background:var(--surface-2);
font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.board{
margin:16px 0 44px; padding:12px; background:var(--sunk);
border:1px solid var(--rule); border-radius:4px; overflow-x:auto;
}
.board img{display:block; width:100%; max-width:100%; height:auto; border-radius:2px}
/* ---------- strat role cards ---------- */
.buystrip{
display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
background:var(--sunk); border:1px solid var(--rule); border-radius:4px;
padding:12px 16px; margin-top:24px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-3);
}
.buystrip .tot{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.buystrip .tot b{color:var(--ink); font-weight:600}
.buystrip svg{width:17px; height:17px}
.roles-list{display:flex; flex-direction:column; gap:14px; margin:20px 0 46px}
.role{background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
.role-head{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--rule);
}
.role-head h4{
font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em;
margin:0; flex:1 1 130px;
}
.kit{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.uslots{display:flex; gap:5px}
.uslot{
width:34px; height:34px; display:grid; place-items:center; cursor:pointer; padding:0;
background:var(--sunk); border:1px solid var(--rule); border-radius:3px; color:var(--ink-3);
}
.uslot:hover:not(:disabled){border-color:var(--ink-3)}
.uslot:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.uslot svg{width:20px; height:20px}
.uslot .plus{font-family:var(--mono); font-size:15px; color:var(--ink-3); opacity:.45; line-height:1}
.uslot:disabled{cursor:default}
.armors{display:flex; gap:5px}
.armor{
width:34px; height:34px; display:grid; place-items:center; cursor:pointer; padding:0;
background:var(--sunk); border:1px solid var(--rule); border-radius:3px; opacity:.32;
filter:grayscale(1);
}
.armor .ricon{width:26px; height:26px}
.armor.on{opacity:1; filter:none; border-color:var(--t-edge); background:var(--t-wash)}
.armor:hover:not(:disabled){opacity:1; border-color:var(--ink-3)}
.armor:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.armor:disabled{cursor:default}
.role[data-color] .armor{background:color-mix(in srgb, var(--cc) 10%, var(--sunk))}
.role[data-color] .armor.on{background:var(--t-wash)}
.buystrip .apix{width:19px; height:19px}
.u-smoke{color:#8E99A6} .u-flash{color:#D8B43C} .u-he{color:#6F8A3E}
.u-molotov{color:#D4622A} .u-decoy{color:#5B88B5}
.wpick{display:flex; align-items:center; gap:8px}
.wicon{
width:46px; height:27px; display:grid; place-items:center; flex:0 0 auto;
background:var(--sunk); border:1px solid var(--rule); border-radius:3px; color:var(--ink-2);
}
.wicon svg{width:33px; height:17px}
.ricon{display:block; object-fit:contain; image-rendering:auto}
.wicon{width:54px; height:32px}
.wicon .wpix{width:50px; height:29px}
.uslot .ricon{width:23px; height:23px}
.buystrip .ricon{width:19px; height:19px}
.mbt .ricon{width:17px; height:17px}
.upop .ricon{width:19px; height:19px}
:root:not([data-theme="light"]) .ricon,
:root[data-theme="dark"] .ricon{
filter:brightness(1.5) contrast(.96) drop-shadow(0 0 1px rgba(255,255,255,.28));
}
.wbtn{cursor:pointer; padding:0; appearance:none}
.wbtn:hover:not(:disabled){border-color:var(--ink-3)}
.wbtn:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.wbtn:disabled{cursor:default}
.wpop{
position:absolute; z-index:60; background:var(--surface); border:1px solid var(--rule);
border-radius:4px; box-shadow:var(--shadow); padding:8px; display:grid;
grid-template-columns:repeat(3, minmax(150px, 1fr)); gap:10px 14px; max-width:calc(100vw - 24px);
}
.wpop h5{margin:0 0 4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.wpop button{
display:flex; align-items:center; gap:8px; width:100%; cursor:pointer; background:none;
border:1px solid transparent; border-radius:3px; padding:4px 6px; color:var(--ink);
font-family:var(--sans); font-size:13px; text-align:left;
}
.wpop button:hover{background:var(--surface-2); border-color:var(--rule)}
.wpop button[aria-pressed="true"]{background:var(--t-wash); border-color:var(--t-edge)}
.wpop .ricon{width:34px; height:20px; flex:0 0 auto}
.wpop svg{width:30px; height:15px; flex:0 0 auto}
@media (max-width:640px){ .wpop{grid-template-columns:1fr 1fr} }
.wsel{
font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink);
background:var(--sunk); border:1px solid var(--rule); border-radius:3px; padding:6px 8px; max-width:148px;
}
.wsel:focus{outline:2px solid var(--ct); outline-offset:-1px; border-color:var(--ct)}
.role-body{padding:14px 16px 4px}
.role-body .buys{margin:0 0 11px; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-3)}
.role-body .buys b{color:var(--ink); font-weight:600}
.steps{margin:0; padding-left:18px}
.steps li{margin-bottom:7px; font-size:14px; color:var(--ink-2); line-height:1.55}
.steps li b{color:var(--ink); font-weight:600}
.steps li b.pn, .notelist li b.pn{font-weight:700}
.steps li i, .notelist li i{color:var(--ink-2)}
.role.collapsed .role-body{display:none}
.rtoggle{
display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:10px 16px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-3);
}
.role.collapsed .rtoggle{padding-top:13px}
.rtoggle:hover{color:var(--ct)}
.rtoggle:focus-visible{outline:2px solid var(--ct); outline-offset:-2px}
.upop{
position:absolute; z-index:60; background:var(--surface); border:1px solid var(--rule);
border-radius:4px; box-shadow:var(--shadow); padding:6px; display:flex; gap:3px;
}
.upop button{
width:44px; height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
background:none; border:1px solid transparent; border-radius:3px; cursor:pointer; padding:0;
font-family:var(--mono); font-size:7.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.upop button:hover{background:var(--surface-2); border-color:var(--rule); color:var(--ink-2)}
.upop button:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.upop button svg{width:20px; height:20px}
.upop .plus{font-size:15px; opacity:.45; line-height:1}
.btn.sm{padding:7px 12px; font-size:10px}
.savebar.mini{gap:9px; flex:0 0 auto}
.savebar.mini .dirty{font-size:10.5px}
.ov-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:22px 40px; align-items:start; padding-block:30px 0}
@media (max-width:780px){.ov-top{grid-template-columns:1fr; align-items:start}}
.ov-sub{margin:0; color:var(--ink-2); font-size:15px; max-width:62ch}
.ov-note{margin:26px 0 46px; font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink-3); max-width:80ch}
.playstrip{display:flex; gap:5px; flex-wrap:wrap; padding-block:24px 0}
.playstrip button{
appearance:none; cursor:pointer; background:var(--sunk); border:1px solid var(--rule);
border-radius:3px; padding:7px 13px; color:var(--ink-2);
font-family:var(--mono); font-size:11px; letter-spacing:.05em;
}
.playstrip button:hover{border-color:var(--ink-3); color:var(--ink)}
.playstrip button[aria-selected="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.playstrip button:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.strat{margin-bottom:40px}
.empty{
border:1px dashed var(--rule); border-radius:4px; padding:26px 20px; margin-top:20px;
color:var(--ink-3); font-size:14px;
}
.empty p{margin:0 0 6px} .empty p:last-child{margin:0} .empty b{color:var(--ink-2)}
.strat{margin-bottom:44px}
.strat-sum{margin:9px 0 0; font-size:14.5px; color:var(--ink-2)}
.wsheet{margin-top:8px}
/* ---------- mirage worksheet ---------- */
.sheet-meta{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
background:var(--surface); border:1px solid var(--rule); border-radius:4px;
padding:16px 18px; margin-top:24px; box-shadow:var(--shadow);
}
.wsheet .side-body{padding:6px 18px 18px}
.wsheet .blk .f + .f{margin-top:12px}
.wsheet .prompt{margin:0 0 9px; font-size:12.5px; color:var(--ink-3); line-height:1.5}
.wsheet textarea{min-height:86px}
.wsheet .setup-row{
display:grid; grid-template-columns:44px minmax(0,1fr); gap:11px; align-items:center;
padding:5px 0; border-bottom:1px dashed var(--rule-2);
}
.wsheet .setup-row:last-child{border-bottom:none}
.wsheet .setup-row .n{
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.wsheet .side.ct .setup-row .n{color:var(--ct)}
.wsheet .side.t .setup-row .n{color:var(--t)}
.wsheet .setup-row input{
font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--sunk);
border:1px solid var(--rule); border-radius:3px; padding:6px 9px; width:100%; min-width:0;
}
.wsheet .setup-row input:focus{outline:2px solid var(--ct); outline-offset:-1px; border-color:var(--ct)}
.sheet-scripts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:22px}
.sheet-scripts .f label{margin-bottom:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}