/* Stackup editorial pass: square boxes, one accent, hairline rules, quiet art. Loaded after styles.css. */
*,*::before,*::after{border-radius:0!important}
*{--acc:#7aa2ff!important;--acc2:#161c33!important;--lime:#7aa2ff;--pink:#7aa2ff}
:root{--bg:#0b0c10;--bg2:#101218;--glass:transparent;--glass2:rgba(255,255,255,.04);--solid:#12141b;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);--text:#f2f3f6;--mut:#a7adbb;--dim:#7f8696;--acc-hi:#9db8ff;--acc-soft:rgba(122,162,255,.14)}
body{background:var(--bg)}
:focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px}
/* quiet backdrop: the chosen game's art becomes a faint monochrome wash */
#mood{height:min(64vh,560px)}
#mood i{filter:blur(24px) grayscale(.85) brightness(.55);inset:-40px}
#mood i.on{opacity:.2}
/* type: restrained, tracked small caps for labels, tabular numbers */
h1{font-weight:800;letter-spacing:-.005em;text-transform:none;font-size:clamp(2.3rem,7vw,4.4rem);line-height:.98}
h2{text-transform:none;font-size:1.35rem;letter-spacing:0}
.kicker,.mode,.live,.team-h,.sq-h,.req-h,.mt,.rg,.tag{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.live{color:var(--acc-hi)}
.live::before{background:var(--acc-hi)!important;box-shadow:none!important}
/* header: flat, hairline */
.top{background:var(--bg)!important;backdrop-filter:none;border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);letter-spacing:.08em}
.desk a{letter-spacing:.04em}
.desk a.on::after,.desk a[aria-current]::after{height:2px;background:var(--acc-hi)}
.tabbar{background:var(--bg)!important;backdrop-filter:none;border-top:1px solid var(--line)}
.tabbar .plus i{background:var(--acc)!important;color:#0b0c10;box-shadow:none}
.tabbar .plus.on i{background:var(--acc-hi)!important}
/* buttons: square, flat; primary is solid accent, secondary is a hairline box */
.btn{border:1px solid var(--line2);background:transparent;box-shadow:none;font-weight:700;letter-spacing:.04em;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.btn:active{transform:none}
.btn.pri,.btn.xl.pri{background:var(--acc)!important;color:#0b0c10!important;border-color:var(--acc);box-shadow:none!important;filter:none}
.btn.pri:hover{background:var(--acc-hi)!important;filter:none;box-shadow:none}
.btn.xl{font-family:var(--ui);text-transform:none;letter-spacing:.02em;font-size:1.05rem}
.btn.ghost,.btn.glass{background:transparent;backdrop-filter:none}
/* chips and filters: rectangles on hairlines */
.chip,.mt,.rg,.tag,.gf .gchip,.f-togs .tog,.seg button{border:1px solid var(--line);background:transparent;backdrop-filter:none;box-shadow:none}
.mt.on{color:var(--acc-hi)}
.gf{gap:0;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:14px}
.gf .gchip{border:0;border-bottom:2px solid transparent;background:transparent;padding:10px 14px 10px 8px;min-height:48px;color:var(--mut)}
.gf .gchip .gi{width:26px;height:26px;opacity:.9}
.gf .gchip:hover{background:rgba(255,255,255,.04)}
.gf .gchip[aria-pressed=true]{background:transparent;border-color:transparent transparent var(--acc-hi);box-shadow:none;color:var(--text)}
.seg{border:1px solid var(--line2);background:transparent}
.seg button[aria-pressed=true],.seg [aria-checked=true]{background:var(--acc)!important;color:#0b0c10!important}
.pick-btn,select,input,textarea{background:transparent;border:1px solid var(--line2);box-shadow:none}
.pick-list{background:var(--solid);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.6);backdrop-filter:none}
/* panels: no glass */
.panel{background:transparent;border:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.panel.hot{background:linear-gradient(180deg,rgba(122,162,255,.08),transparent);border-color:rgba(122,162,255,.4)}
/* the board is a list, not a wall of covers */
.tiles,.tiles.one{display:flex!important;flex-direction:column;gap:0;border-top:1px solid var(--line2)}
.tile{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;background:transparent;border:0;border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;padding:20px 4px;box-shadow:none!important;overflow:visible}
.tile:hover{transform:none;background:rgba(255,255,255,.03);border-color:var(--line);box-shadow:none}
.tile .tile-art{height:auto;padding:0;background:none!important;display:block}
.tile .tile-art::after{display:none}
.tile .tile-art .glogo{display:block}
.tile .tile-art .glogo img{max-height:30px;max-width:56px;object-fit:contain;filter:grayscale(.2)}
.tile .tile-art .glogo-t{font-size:.95rem}
.tile .flag{display:none}
.tile-body{padding:0;gap:8px}
.tile h3{font-size:1.2rem;font-weight:700}
.tile.full{opacity:.5}
.tile.mine,.tile.soon{border-color:var(--line);box-shadow:none}
.tile.mine{background:rgba(122,162,255,.07);border-left:2px solid var(--acc-hi);padding-left:12px}
.tile.soon .cd{color:var(--acc-hi)}
.tile .cta{background:transparent!important;color:var(--text)!important;border:1px solid var(--line2);box-shadow:none;min-height:36px;letter-spacing:.06em;text-transform:uppercase;font-size:.74rem}
.tile:hover .cta{background:var(--acc)!important;color:#0b0c10!important;border-color:var(--acc)}
.tile.mine .cta{border-color:var(--acc-hi);color:var(--acc-hi)!important}
.cd{letter-spacing:.02em}
.cd.soon{color:var(--acc-hi)}
.cd.big{background:transparent;border:1px solid var(--line2)}
.cd.big.soon{border-color:var(--acc-hi)}
/* seats: filled = solid block with the generated avatar, empty = outlined square */
.seats{gap:4px}
.seats .av{border:0;flex:0 1 30px;min-width:16px}
.av.empty,.seats .empty{background:transparent;border:1px solid var(--line2);color:var(--dim)}
.sc{letter-spacing:0}
.sc b{color:var(--acc-hi)}
/* lobby and queue */
.slot,.team,.seat,.rseat{border:1px solid var(--line);background:transparent;backdrop-filter:none}
.slot.me,.team .me{border-color:var(--acc-hi);background:rgba(122,162,255,.07)}
.team{border-top:2px solid var(--acc)}
.vs{border:1px solid var(--line2)}
.msg{border:1px solid var(--line);background:transparent}
.msg.me{background:rgba(122,162,255,.14);border-color:rgba(122,162,255,.5);color:var(--text)}
.chat{background:transparent;border:1px solid var(--line)}
.hero{padding:44px 0 22px}
.hero-txt p{font-size:1.08rem;color:var(--mut)}
.empty,.empty-hero{border:1px solid var(--line);background:transparent}
.reveal-seats .rseat{border:1px solid var(--line2)}
.radar::before,.radar::after{border-color:rgba(122,162,255,.35)}
.note{border:1px solid var(--line2);background:transparent;color:var(--text)}
#toast{background:var(--text);color:var(--bg);border:0;box-shadow:none}
.foot{color:var(--dim);border-top:1px solid var(--line);margin-top:40px}
@media(min-width:960px){.tile{grid-template-columns:72px minmax(0,1fr);padding:22px 8px}.tile .tile-art .glogo img{max-width:64px;max-height:34px}}
.seats .av.empty{border:1px solid var(--line2)!important;background:transparent!important;color:var(--dim)}
.seats .av.empty svg,.seats .av.empty .ic{width:12px;height:12px}
.sect-h,.board>section>h2{color:var(--text)}
.filters,.f-row{flex-wrap:wrap}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
@media(max-width:560px){.seg button{padding-left:12px;padding-right:12px}}
.tabbar .plus i{width:30px;height:30px;margin-top:0;background:transparent!important;border:1px solid var(--acc-hi);box-shadow:none}
.tabbar .plus svg{fill:var(--acc-hi)}
.tabbar .plus.on i{background:var(--acc)!important}
.tabbar .plus.on svg{fill:#0b0c10}
.brand svg *,.brand img{filter:grayscale(1) brightness(1.4)}
/* empty board: type-led, one slow accent drift behind, no box art */
.empty-hero{min-height:360px;align-items:center}
.eh-in{justify-items:start;text-align:left;padding:48px 28px;max-width:640px}
.eh-in h2{font-size:clamp(2rem,6vw,3.2rem);font-weight:800;line-height:1;margin:0}
.eh-in p{color:var(--mut)}
.eh-btns{justify-content:flex-start}
.eh-btns .btn{flex:0 1 auto}
.eflow{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/64px 64px,var(--bg)}
.eflow i{position:absolute;width:62%;height:140%;top:-20%;background:radial-gradient(closest-side,rgba(122,162,255,.22),transparent);filter:blur(20px);animation:eflow 18s ease-in-out infinite alternate}
.eflow i+i{width:40%;right:-6%;background:radial-gradient(closest-side,rgba(157,184,255,.12),transparent);animation-duration:26s;animation-direction:alternate-reverse}
@keyframes eflow{from{transform:translateX(-10%)}to{transform:translateX(55%)}}
@media(prefers-reduced-motion:reduce){.eflow i{animation:none}}
@media(max-width:560px){.eh-in{padding:36px 18px}.eh-btns .btn{flex:1 1 100%;max-width:none}}