/* ============================================================================
   RYKOZ STORE - the flat theme, in Rykoz's own dress.
   Loaded AFTER the page's inline styles so it wins. Flat cards, generous
   radii, blue + gold on near-black. Deliberately NOT Steam's trade dress: no
   navy two-row header with uppercase tabs, no green discount block, no
   big-image-plus-four-thumbnails featured panel, no list-with-preview-pane,
   no square gradient tiles, and none of Steam's section names.
   ========================================================================== */
:root{
  --bg:#0b0e14; --bg2:#10141d; --panel:#151a26; --panel2:#1b2231; --edge:#28324a; --edge2:#38445f;
  --text:#e9edf5; --muted:#93a0b8; --dim:#5c6880;
  --acc:#3d8bfd; --acc2:#6fb1ff; --gold:#f5c76a; --gold2:#ffe0a0; --ok:#43d68b; --danger:#ff6b77;
  --r:12px; --r2:16px; --shadow:0 14px 40px rgba(0,0,0,.45);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
html{scroll-behavior:smooth;background:var(--bg)}
/* longhands on purpose: a background SHORTHAND with the colour in a non-final
   layer is invalid, and because it contains var() the browser computes it to
   transparent instead of ignoring it - the page went white on rykoz.com */
body{background-color:var(--bg);
     background-image:radial-gradient(1100px 520px at 15% -180px,rgba(61,139,253,.16),transparent 65%),radial-gradient(900px 480px at 95% -140px,rgba(245,199,106,.08),transparent 60%);
     background-repeat:no-repeat;color:var(--text);font:14.5px/1.55 var(--font)}
a{color:var(--acc2)} a:hover{color:#fff}
h1,h2,h3,h4{color:#fff;font-weight:700}
button{border-radius:10px}
input,select,textarea{background:var(--bg2);border:1px solid var(--edge);border-radius:10px;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
.wrap{max-width:1240px;padding:0 22px}

/* ------------------------------------------------------------- header: search in the middle, tabs below */
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(16,20,29,.96),rgba(11,14,20,.94));backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,199,106,.22);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.topbar .wrap{height:auto;display:block}
.topbar .row1{display:flex;align-items:center;gap:18px;height:66px}
.logo{font:800 21px/1 ui-monospace,Consolas,monospace;letter-spacing:.5px;color:#fff}
.logo em{color:var(--gold);font-style:normal}
.topbar .searchbox{flex:1;max-width:560px;margin:0 auto;order:0}
.searchbox input{height:40px;border-radius:999px;padding:0 16px 0 42px;background:var(--panel);border:1px solid var(--edge);font-size:14px}
.searchbox input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(61,139,253,.18)}
.searchbox svg{left:15px;right:auto;opacity:.6}
.sugg{border-radius:14px}
.topnav{margin-left:0;gap:8px}
.topnav a,.topnav button{height:38px;padding:0 13px;border-radius:999px;font:600 13px/1 var(--font);color:var(--muted);border:1px solid transparent;background:transparent}
.topnav a:hover,.topnav button:hover{color:#fff;background:var(--panel);border-color:var(--edge)}
.topnav .cta{background:linear-gradient(135deg,var(--acc),#2668c9);color:#fff;font-weight:700;border:0}
.topnav .cta:hover{filter:brightness(1.12);color:#fff}
.livechip{height:38px;border-radius:999px;padding:0 13px;background:var(--panel);border:1px solid var(--edge);color:var(--muted);font-size:12.5px}
#rcChip{background:linear-gradient(135deg,rgba(245,199,106,.16),rgba(245,199,106,.06));border-color:rgba(245,199,106,.45);color:var(--gold2);font-weight:700}
#rcChip #rcTopup{margin-left:8px;width:auto;height:24px;padding:0 10px;border-radius:999px;border:0;background:var(--gold);color:#1a1200;font:800 11px/1 var(--font);letter-spacing:.03em;cursor:pointer}
#rcChip #rcTopup:hover{background:var(--gold2)}
#navCart{border:1px solid var(--edge)!important;background:var(--panel)!important}
/* row 2: the big tabs, and the page jumps as chips */
.topbar .row2{display:flex;align-items:center;gap:14px;height:50px;border-top:1px solid rgba(255,255,255,.04)}
.mainnav{display:flex;gap:6px;align-items:center;height:auto}
.mainnav a,.mainnav button{height:36px;padding:0 16px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);font:700 13.5px/1 var(--font);letter-spacing:0;text-transform:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:none}
.mainnav a:hover,.mainnav button:hover{color:#fff;background:var(--panel);border-color:var(--edge);box-shadow:none}
.mainnav a.on,.mainnav button.on,.mainnav .gp-focus{color:#fff;background:linear-gradient(135deg,var(--acc),#2668c9);border-color:transparent;box-shadow:0 6px 18px rgba(61,139,253,.28)}
.subnav{display:flex;gap:6px;align-items:center;margin-left:auto}
.subnav button{height:30px;padding:0 12px;border-radius:999px;background:transparent;border:1px solid var(--edge);color:var(--muted);font:600 12px/1 var(--font);cursor:pointer;white-space:nowrap}
.subnav button:hover,.subnav button.on,.subnav .gp-focus{color:#fff;border-color:var(--acc);background:rgba(61,139,253,.12)}
.subnav #navCat{border-color:rgba(245,199,106,.4);color:var(--gold2)}
html.embedded #navLauncher{display:none}
@media(max-width:1080px){.topbar .row1{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px}.topbar .searchbox{order:3;flex-basis:100%;max-width:none}.topbar .row2{height:auto;flex-wrap:wrap;padding:8px 0;row-gap:6px}.subnav{margin-left:0}}

/* ------------------------------------------------------------- sections */
.sech{font:800 18px/1.2 var(--font);color:#fff;letter-spacing:-.01em;margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.sech::before{content:"";width:5px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--acc))}
.sechrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 14px}
.sechrow .sech{margin:0}
.seemore{background:transparent;border:1px solid var(--edge);color:var(--muted);font:600 12.5px/1 var(--font);padding:8px 14px;border-radius:999px;cursor:pointer}
.seemore:hover{color:#fff;border-color:var(--acc)}

/* ------------------------------------------------------------- spotlight: one cinematic banner + a filmstrip */
.hero{border:0;overflow:visible;background:transparent}
.hero .wrap{display:block;padding:18px 22px 0}
.hero .feat,.hero .feat:hover,.hero .feat:focus-visible,.hero .feat.gp-focus{margin:0;width:auto;max-width:none;transform:none;border:0;border-radius:0;outline:none;cursor:default;box-shadow:none;background:transparent}
.spot{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--edge)}
.featmain{position:relative;aspect-ratio:21/9;min-height:280px;cursor:pointer;outline:none;overflow:hidden}
.featmain>img,.featmain>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 6s ease}
.featmain:hover>img{transform:scale(1.06)}
.featmain .grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,14,20,.92) 0%,rgba(11,14,20,.55) 45%,rgba(11,14,20,.15) 100%),linear-gradient(0deg,rgba(11,14,20,.9) 0%,transparent 55%)}
.featmain .rank{position:absolute;top:16px;left:18px;background:linear-gradient(135deg,var(--gold),#e0a83c);color:#1a1200;font:800 12px/1 var(--font);letter-spacing:.06em;padding:7px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(245,199,106,.3)}
.featmain .live{position:absolute;top:16px;right:18px;background:rgba(11,14,20,.7);border:1px solid rgba(67,214,139,.4);color:var(--ok);font:700 12px/1 var(--font);padding:7px 12px;border-radius:999px;display:flex;gap:6px;align-items:center}
.featmain .txt{position:absolute;left:26px;right:26px;bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.featmain .info{min-width:0;max-width:58ch}
.featmain h3{margin:0 0 6px;font:800 clamp(24px,3.6vw,40px)/1.1 var(--font);color:#fff;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.featmain .fverd{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.featmain .fverd b{font-weight:700}
.featmain .feattags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.featmain .feattags span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:11.5px;padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.featmain .cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--acc),#2668c9);color:#fff;font:800 14px/1 var(--font);padding:12px 18px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 8px 22px rgba(61,139,253,.3)}
.featmain .cta:hover{filter:brightness(1.12)}
.featmain .side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.featmain .shots{display:flex;gap:6px}
.featmain .shots img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,.15);cursor:pointer;background:#000;transition:border-color .15s,transform .15s}
.featmain .shots img:hover,.featmain .shots img.on{border-color:var(--gold);transform:translateY(-2px)}
.featmain.gp-focus,.featmain:focus-visible{outline:3px solid var(--acc2);outline-offset:-3px}
.spotstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:10px;background:var(--bg2);border-top:1px solid var(--edge)}
@media(max-width:900px){.spotstrip{grid-template-columns:repeat(3,1fr)}}
.spotstrip .st{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:16/9;border:2px solid transparent;outline:none;transition:border-color .15s,transform .15s}
.spotstrip .st img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75;transition:opacity .15s}
.spotstrip .st b{position:absolute;left:8px;right:8px;bottom:6px;font:700 12px/1.2 var(--font);color:#fff;text-shadow:0 1px 6px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotstrip .st:hover img,.spotstrip .st.on img{opacity:1}
.spotstrip .st.on{border-color:var(--gold);transform:translateY(-2px)}
.spotstrip .st.gp-focus{border-color:var(--acc2)}
.spotstrip .st .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold)}
.spotstrip .st.on .bar{width:100%;transition:width 7s linear}
.featarrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(11,14,20,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:3;backdrop-filter:blur(6px)}
.featarrow:hover{background:var(--acc)}
.featarrow.l{left:14px}.featarrow.r{right:14px}
.featdots{display:none}

/* ------------------------------------------------------------- price + discount pills: discounts are GREEN, money is gold */
:root{--disc1:#43d68b;--disc2:#25a85e;--discink:#04140b;--discedge:rgba(67,214,139,.5)}
.disc{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px 10px 3px 3px;font-variant-numeric:tabular-nums}
.discpct{background:linear-gradient(135deg,var(--disc1),var(--disc2));color:var(--discink);font:800 12.5px/1 var(--font);padding:6px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(67,214,139,.25)}
.discprices{display:flex;align-items:baseline;gap:6px;line-height:1}
.discprices s{color:var(--dim);font-size:11.5px}
.discprices b{color:#fff;font-size:13.5px;font-weight:800}
.disc.plain{padding:5px 12px} .disc.plain .discprices b{color:var(--gold2)}
.disc.free{padding:5px 12px} .disc.free .discprices b{color:var(--ok)}
.disc.cs{padding:5px 12px} .disc.cs .discprices b{color:#c9b6ff;font-weight:700;font-size:12.5px}
.price{color:var(--gold);font-weight:800}
.price.free{color:var(--ok)}
.price s{color:var(--dim)!important;font-size:12px!important;font-weight:500}
.price b{color:#fff!important}
.saletag,.robotag,.tottag{order:-1;margin:0 6px 0 0!important;border:0;border-radius:999px;padding:4px 8px!important;font:800 11.5px/1 var(--font)!important;vertical-align:middle}
.saletag{background:linear-gradient(135deg,var(--disc1),var(--disc2));color:var(--discink)}
.robotag{background:#1f4f6a;color:#9be8ff}
.tottag{background:linear-gradient(135deg,var(--disc1),var(--disc2));color:var(--discink)}
.pricewrap .price{display:inline-flex;align-items:center;gap:6px}

/* ------------------------------------------------------------- ribbons as pills */
.ribbon{position:absolute;top:10px;left:10px;z-index:2;padding:5px 11px;border-radius:999px;font:800 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(11,14,20,.75);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.ribbon.deal{color:#7fe0a8;border-color:rgba(67,214,139,.45)}
.ribbon.sale{color:#7fe0a8;border-color:var(--discedge)}
.ribbon.new{color:#9be8ff;border-color:rgba(111,177,255,.5)}
.ribbon.soon{color:#c9b6ff;border-color:rgba(185,167,255,.5)}
.ribbon.robo{color:#7fe0cf;border-color:rgba(127,224,207,.5)}
.ribbon.luck{color:#ffd15c;border-color:rgba(255,209,92,.5)}
.ribbon.rescue{color:#ff9a7a;border-color:rgba(255,154,122,.5)}

/* ------------------------------------------------------------- deals row */
.dealrowwrap{position:relative;padding:4px 0 6px}
.dealrow2{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px}
.dealrow2::-webkit-scrollbar{display:none}
.capsule{position:relative;flex:0 0 286px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;cursor:pointer;outline:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.capsule:hover,.capsule.gp-focus,.capsule:focus-visible{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--shadow)}
.capsule .cm{aspect-ratio:16/9;background:var(--bg2);overflow:hidden}
.capsule .cm img{width:100%;height:100%;object-fit:cover;display:block}
.capsule .cb{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.capsule .cb .t{min-width:0;font:700 13.5px/1.3 var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dealarrow{position:absolute;top:44%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:rgba(11,14,20,.85);color:#fff;font-size:20px;cursor:pointer;z-index:2}
.dealarrow.l{left:-10px}.dealarrow.r{right:-10px}
.dealarrow:hover{background:var(--acc);border-color:transparent}

/* ------------------------------------------------------------- the values strip */
.values{border:0;background:transparent}
.values .wrap{grid-template-columns:repeat(6,1fr);gap:10px;padding:22px 22px 4px}
@media(max-width:1100px){.values .wrap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.values .wrap{grid-template-columns:repeat(2,1fr)}}
.val{grid-template-columns:36px 1fr;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:12px 13px;animation:none;box-shadow:none}
.val::before,.val::after{display:none}
.val:hover{transform:translateY(-2px);border-color:var(--edge2);box-shadow:none}
.val .ic{width:36px;height:36px;font-size:17px;border-radius:10px;border:1px solid rgba(var(--vc),.35);background:rgba(var(--vc),.14);box-shadow:none}
.val:hover .ic{transform:none}
.val b{font-size:13px;font-weight:800;color:#fff}
.val span{font-size:11.5px;margin-top:7px;color:var(--muted);line-height:1.5}

/* ------------------------------------------------------------- fresh & rising: pill tabs + a card grid (no preview pane) */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--edge);border-radius:999px;margin-bottom:14px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs button{background:transparent;border:0;border-radius:999px;color:var(--muted);font:700 13px/1 var(--font);padding:9px 15px;cursor:pointer;white-space:nowrap;position:relative}
.tabs button:hover{color:#fff}
.tabs button.on{color:#fff;background:linear-gradient(135deg,var(--acc),#2668c9);box-shadow:0 4px 14px rgba(61,139,253,.28)}
.tabs button.on::after{display:none}
.tabs button.gp-focus{outline:2px solid var(--acc2)}
.listwrap{display:block;background:transparent}
.listprev{display:none}
.listcol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:900px){.listcol{grid-template-columns:1fr}}
.listrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);cursor:pointer;outline:none;color:var(--text);transition:transform .15s,border-color .15s}
.listrow:hover,.listrow.on,.listrow.gp-focus{transform:translateY(-2px);border-color:var(--acc);color:#fff}
.listrow img,.listrow .noart{width:150px;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg2);border-radius:8px}
.listrow .noart{display:grid;place-items:center;color:var(--dim);font:700 15px ui-monospace,monospace}
.listrow .lt{min-width:0}
.listrow .lt b{display:block;font:700 14.5px/1.3 var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listrow .lt span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.listrow .lt .ld{margin-top:4px;font-size:11.5px;color:var(--dim)}
.listrow .lt .lv{display:block;font-size:11.5px;margin-top:3px}
.listrow .lp{display:flex;align-items:center}

/* ------------------------------------------------------------- browse by tag: rounded art tiles, gold label */
.cattiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1000px){.cattiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cattiles{grid-template-columns:repeat(2,1fr)}}
.cattile{position:relative;aspect-ratio:1.6;border-radius:14px;overflow:hidden;cursor:pointer;outline:none;display:flex;align-items:flex-end;padding:10px;isolation:isolate;border:1px solid var(--edge);transition:transform .18s,border-color .18s}
.cattile .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) brightness(.85);transition:transform .3s}
.cattile .tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,14,20,.85) 100%),linear-gradient(135deg,rgba(var(--h1),.35),rgba(var(--h2),.15));opacity:1}
.cattile:hover,.cattile.gp-focus{transform:translateY(-3px);border-color:var(--gold)}
.cattile:hover .bg{transform:scale(1.06)}
.cattile .lbl{position:relative;z-index:1;background:rgba(11,14,20,.75);border:1px solid rgba(245,199,106,.55);color:var(--gold2);font:800 12.5px/1 var(--font);letter-spacing:.02em;padding:8px 13px;border-radius:999px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px)}
.cattile.on{border-color:var(--gold)}
.cattile.on .lbl{background:var(--gold);color:#1a1200}

/* ------------------------------------------------------------- all games grid */
.gridhead{padding:30px 0 12px;align-items:center}
.gridhead .sech{margin:0}
.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:6px 0 70px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--shadow)}
.card.gp-focus{border-color:var(--acc2)}
.cmedia{background:var(--bg2)}
.agebadge{border-radius:999px;background:rgba(11,14,20,.75);border:1px solid rgba(255,255,255,.14);font-size:11px;padding:3px 9px}
.livebadge{border-radius:999px;background:rgba(11,14,20,.75);border:1px solid rgba(67,214,139,.35)}
.cbody{padding:11px 12px 12px}
.cbody h3{font:700 15px/1.3 var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdev{font-size:12px;color:var(--dim);margin-bottom:7px}
.ctags{gap:5px;margin-bottom:9px}
.ctag{background:var(--bg2);border:1px solid var(--edge);color:var(--muted);border-radius:999px;font-size:11px;padding:2px 9px}
.mode{border-radius:999px;font-size:10.5px}
.skel{border-radius:var(--r)}
.psctag{color:var(--dim);font-size:9.5px}

/* ------------------------------------------------------------- drawers + account panel */
.chip{border-radius:999px}
.acard{background:var(--bg2);border:1px solid var(--edge);border-radius:var(--r)}
.akey button,.abtn{border-radius:10px}
.abtn.green{background:linear-gradient(135deg,var(--acc),#2668c9);color:#fff;font-weight:800;border:0}
.abtn.green:hover{filter:brightness(1.12);border-color:transparent}
.rcbig b{color:var(--gold)}
.aprof{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.aprof .av{width:72px;height:72px;border-radius:50%;background:var(--panel2);border:2px solid var(--edge2);overflow:hidden;display:grid;place-items:center;font-size:26px;color:#fff;position:relative;cursor:pointer}
.aprof .av img{width:100%;height:100%;object-fit:cover}
.aprof .av .ch{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.6);color:#fff;font-size:10px;text-align:center;padding:3px 0}
.aprof .gi{display:flex;gap:6px}
.aprof input[type=text],.aprof input[type=password]{flex:1;min-width:0;padding:8px 10px;font-size:13px}
.apwd{display:grid;gap:6px;margin-top:8px}
.apwd input{padding:8px 10px;font-size:13px}
.amsg{font-size:12px;min-height:16px;margin-top:6px}
.amsg.ok{color:var(--ok)}.amsg.err{color:#ff8b93}

/* ------------------------------------------------------------- game page */
.overlay{background:rgba(4,6,10,.86);backdrop-filter:blur(8px);padding:16px}
.detail{width:min(1140px,100%);background:var(--bg2);border:1px solid var(--edge);border-radius:var(--r2);box-shadow:var(--shadow)}
.dhead{padding:16px 22px;border-bottom:1px solid var(--edge)}
.dhead h2{font:800 24px/1.2 var(--font);color:#fff}
.dhead .dhr{display:flex;gap:8px;align-items:center}
.dhead .hub{background:var(--panel);border:1px solid var(--edge);color:#fff;font:700 12.5px/1 var(--font);padding:9px 13px;border-radius:999px;cursor:pointer;height:auto}
.dhead .hub:hover{border-color:var(--acc);background:rgba(61,139,253,.12)}
.xbtn{border-radius:50%}
.dbody{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:18px;padding:18px 22px 0}
.dmedia{padding:0}
.stage{border-radius:var(--r)}
.thumbs{gap:6px}
.thumb{border-radius:8px}
.dinfo{padding:0}
.gpcap{aspect-ratio:16/9;background:var(--bg);border-radius:var(--r);overflow:hidden;margin-bottom:12px;border:1px solid var(--edge)}
.gpcap img{width:100%;height:100%;object-fit:cover;display:block}
.gpshort{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 12px;max-height:6.2em;overflow:hidden}
.ratebox{margin:0 0 12px;border-radius:var(--r)}
.dmeta{border-top:0;padding-top:0;margin-top:0;font-size:12.5px}
.dmeta span:first-child{color:var(--dim);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;min-width:96px}
.dmeta span:last-child{color:var(--acc2);text-align:right}
.gptags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.gptags span{background:var(--panel);border:1px solid var(--edge);color:var(--muted);font-size:11px;padding:3px 10px;border-radius:999px}
.gpsidehead{font:700 11px/1 var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:14px 0 8px}
.buybox{margin:18px 22px 0;background:linear-gradient(135deg,rgba(61,139,253,.12),rgba(245,199,106,.07));border:1px solid var(--edge2);border-radius:var(--r2);padding:16px 18px 14px}
.buybox .bbt{font:800 19px/1.2 var(--font);color:#fff;margin:0 0 4px}
.buybox .bbsub{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.buybox .bbrow{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.buybox .bbrow .dprice{margin:0;font-size:22px;color:var(--gold);font-weight:800;display:flex;align-items:center;gap:8px}
.buybox .bbrow .dprice .dold{font-size:13px}
.buybox .buy{width:auto;padding:0 20px;height:42px;font:800 14.5px/1 var(--font);border-radius:999px}
.buybox .buy.owned{height:42px;border-radius:999px}
.buybox .ghostbtn{width:auto!important;margin:0!important;height:42px;padding:0 16px;border-radius:999px;background:var(--panel);color:#fff;border:1px solid var(--edge);font-weight:700}
.buybox .ghostbtn:hover{border-color:var(--acc)}
.buybox .refundnote{margin:10px 0 0;font-size:12px;color:var(--muted)}
.buybox .pscline{padding:6px 0 0;font-size:11.5px;color:var(--dim)}
.buybox .roborow{margin-top:10px}
.gpbody{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:18px;padding:20px 22px 8px}
@media(max-width:860px){.dbody,.gpbody{grid-template-columns:1fr;padding-left:14px;padding-right:14px}.buybox{margin:14px}}
.gpfeat{display:flex;flex-direction:column;gap:6px}
.gpfeat .gf{display:flex;align-items:center;background:var(--panel);border:1px solid var(--edge);border-radius:10px;overflow:hidden;font-size:12.5px}
.gpfeat .gf i{width:34px;height:34px;display:grid;place-items:center;background:rgba(61,139,253,.12);font-style:normal;font-size:14px;flex:none}
.gpfeat .gf span{padding:0 10px;color:var(--text)}
.gpfeat .gf.warn span{color:#ffb454}
.gpfeat .gf.bad span{color:#ff8b93}
.statrow{margin:0;gap:14px}
.ddesc{padding:0;color:var(--muted);font-size:13.5px;line-height:1.65;max-width:none}
.ddesc h4{color:#fff;font:800 14px/1 var(--font);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--edge)}
.dreviews{padding:20px 22px 8px;border-top:1px solid var(--edge)}
.reportln{padding:8px 22px 18px}
.dcomm{padding:20px 22px 8px;border-top:1px solid var(--edge)}
.dcomm .dch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dcomm .dch h4{margin:0;color:#fff;font:800 14px/1 var(--font)}
.dcomm .dcrows{display:flex;flex-direction:column;gap:6px}
.dcomm .fthread{padding:8px 10px}
.dcomm .dcempty{color:var(--muted);font-size:13px;padding:10px 0}

/* ------------------------------------------------------------- shared popout chrome */
.rkov{position:fixed;inset:0;z-index:115;background:rgba(4,6,10,.86);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:18px}
.rkov.on{display:flex}
.rkpanel{width:min(1180px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--edge);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden;animation:rkpin .2s ease-out}
@keyframes rkpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rkhead{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--edge);flex:none}
.rkhead h2{margin:0;font:800 18px/1.2 var(--font);color:#fff}
.rkhead .crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rkhead .crumb a{color:var(--acc2);cursor:pointer}
.rkhead .crumb a:hover{color:#fff}
.rkhead .sp{flex:1}
.rkhead button.x{background:var(--bg2);border:1px solid var(--edge);color:var(--muted);border-radius:50%;width:34px;height:34px;font-size:15px;cursor:pointer}
.rkhead button.x:hover{color:#fff;border-color:var(--acc)}
.rkhead .hbtn{background:var(--bg2);border:1px solid var(--edge);color:#fff;font:700 12.5px/1 var(--font);padding:10px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.rkhead .hbtn:hover{border-color:var(--acc)}
.rkhead .hbtn.green{background:linear-gradient(135deg,var(--acc),#2668c9);border:0;color:#fff;font-weight:800}
.rkbody{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.rkbtn{background:var(--panel2);border:1px solid var(--edge);color:#fff;font:700 12.5px/1 var(--font);padding:9px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.rkbtn:hover{border-color:var(--acc);background:rgba(61,139,253,.12)}
.rkbtn.green{background:linear-gradient(135deg,var(--acc),#2668c9);border-color:transparent;color:#fff;font-weight:800}
.rkbtn.green:hover{filter:brightness(1.12)}
.rkbtn.warn{border-color:rgba(255,107,119,.4);color:#ff8b93} .rkbtn.warn:hover{background:rgba(255,107,119,.14)}
.rkbtn.sm{padding:6px 10px;font-size:11.5px}
.rkbtn:disabled{opacity:.5;cursor:default}
.rkmsg{font-size:12.5px;min-height:16px}
.rkmsg.ok{color:var(--ok)}.rkmsg.err{color:#ff8b93}
.rkempty{color:var(--muted);text-align:center;padding:40px 10px;font-size:13.5px}

/* ------------------------------------------------------------- top-up popout */
#rkTopupOv .rkpanel{width:min(560px,100%)}
.tpbal{display:flex;align-items:baseline;gap:8px;padding:16px 18px 4px}
.tpbal b{font-size:34px;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:800}
.tpbal span{color:var(--muted);font-size:12.5px}
.tpbody{padding:8px 18px 18px}
.tpbody .buytabs button{border-radius:999px}
.tpbody .apackrow .info b{color:var(--gold)}
.tpverify{padding:30px 18px;text-align:center}
.tpverify .big{font-size:44px;line-height:1;margin-bottom:10px}
.tpverify h3{margin:0 0 6px;font-weight:800;font-size:20px}
.tpverify p{color:var(--muted);font-size:13px;margin:0 0 14px}
.tpverify .bar{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;margin:0 auto 14px;max-width:360px}
.tpverify .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .5s linear}
.tpverify.done .bar i{background:linear-gradient(90deg,var(--ok),#7fe0a8);width:100%}

/* ------------------------------------------------------------- community popout */
#rkForumsOv .rkpanel{height:calc(100vh - 36px)}
.fwrap{display:grid;grid-template-columns:270px minmax(0,1fr);height:100%;min-height:0}
@media(max-width:900px){.fwrap{grid-template-columns:1fr}.fside{display:none}.fwrap.side .fside{display:block}.fwrap.side .fmain{display:none}}
.fside{background:var(--bg);border-right:1px solid var(--edge);overflow:auto;scrollbar-width:thin;padding:10px 0 20px}
.fside .fsh{font:700 10.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 14px 6px}
.fboard{display:flex;gap:10px;align-items:center;padding:8px 12px;margin:0 6px;border-radius:10px;cursor:pointer;color:var(--text);outline:none}
.fboard:hover,.fboard.on,.fboard.gp-focus{background:rgba(61,139,253,.14);color:#fff}
.fboard.on{box-shadow:inset 3px 0 0 var(--gold)}
.fboard .fbi{width:36px;height:36px;border-radius:9px;background:var(--panel2);display:grid;place-items:center;font-size:16px;flex:none;overflow:hidden}
.fboard .fbi img{width:100%;height:100%;object-fit:cover}
.fboard .fbt{min-width:0}
.fboard .fbt b{display:block;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fboard .fbt span{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmain{overflow:auto;scrollbar-width:thin;padding:0 0 30px;min-width:0}
.fbanner{position:relative;padding:22px 22px 16px;background:linear-gradient(135deg,rgba(61,139,253,.14),transparent 60%);display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--edge)}
.fbanner .fcov{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--bg);flex:none;border:1px solid var(--edge)}
.fbanner h3{margin:0;font:800 22px/1.2 var(--font);color:#fff}
.fbanner p{margin:4px 0 0;color:var(--muted);font-size:13px;max-width:70ch}
.fbanner .fbtns{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ftools{display:flex;align-items:center;gap:10px;padding:12px 22px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.ftools .sp{flex:1}
.fthreads{display:flex;flex-direction:column;gap:6px;padding:0 22px}
.fthread{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);cursor:pointer;outline:none;color:var(--text);transition:border-color .15s,transform .15s}
.fthread:hover,.fthread.gp-focus{border-color:var(--acc);transform:translateY(-1px);color:#fff}
.fthread .fav{width:40px;height:40px;border-radius:50%;background:var(--panel2);overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:700}
.fthread .fav img{width:100%;height:100%;object-fit:cover}
.fthread .ftt{min-width:0}
.fthread .ftt b{display:block;font-weight:700;font-size:14.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fthread .ftt span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fthread .ftm{text-align:right;font-size:11.5px;color:var(--muted);white-space:nowrap}
.fthread .ftm b{display:block;color:#fff;font-weight:700;font-size:13px}
.fthread.pinned{border-color:rgba(245,199,106,.5)}
.fthread.locked .ftt b::before{content:"🔒 ";font-size:12px}
.fthread.pinned .ftt b::before{content:"📌 ";font-size:12px}
.fpager{display:flex;justify-content:center;gap:6px;padding:16px 22px}
.fpager button{min-width:34px;background:var(--panel2);border:1px solid var(--edge);color:var(--muted);padding:7px 10px;border-radius:999px;cursor:pointer}
.fpager button.on{background:var(--acc);color:#fff;border-color:transparent}
.fpager button:disabled{opacity:.35;cursor:default}
.fcompose{margin:12px 22px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:16px}
.fcompose h4{margin:0 0 10px;font:800 15px/1.2 var(--font);color:#fff}
.fcompose input,.fcompose textarea{width:100%;padding:10px 12px;font:13.5px var(--font);margin-bottom:8px;box-sizing:border-box}
.fcompose textarea{min-height:110px;resize:vertical}
.fcompose .frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fcompose .emo{display:flex;gap:4px;flex-wrap:wrap}
.fcompose .emo button{background:var(--bg2);border:1px solid var(--edge);border-radius:8px;padding:4px 7px;font-size:15px;cursor:pointer}
.fthead{padding:20px 22px 10px}
.fthead .ftags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.fthead .ftags span{background:var(--panel);border:1px solid var(--edge);color:#fff;font-size:11px;padding:3px 10px;border-radius:999px}
.fthead h3{margin:0 0 6px;font:800 24px/1.2 var(--font);color:#fff}
.fthead .fmeta{color:var(--muted);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fthead .fmods{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fposts{display:flex;flex-direction:column;gap:10px;padding:6px 22px}
.fpost{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
@media(max-width:760px){.fpost{grid-template-columns:1fr}}
.fauthor{background:var(--bg2);border-right:1px solid var(--edge);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fauthor .rankring{--rc:#6c757d;--rs:3s;width:64px;height:64px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,var(--rc),transparent 60%,var(--rc));animation:rkring var(--rs) linear infinite}
@keyframes rkring{to{transform:rotate(360deg)}}
.fauthor .rankring>div{width:100%;height:100%;border-radius:50%;background:var(--panel2);overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;animation:rkring var(--rs) linear infinite reverse}
.fauthor .rankring img{width:100%;height:100%;object-fit:cover}
.fauthor .an{font-size:13.5px;font-weight:700;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fauthor .ab{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.fauthor .ab span{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--edge);color:#fff;letter-spacing:.03em;text-transform:uppercase}
.fauthor .ab span.adm{background:rgba(255,107,119,.18);border-color:rgba(255,107,119,.5)}
.fauthor .ab span.dev{background:rgba(61,139,253,.18);border-color:rgba(61,139,253,.5)}
.fauthor .ab span.rk{background:var(--rc,#6c757d);border-color:transparent}
.fauthor .as{font-size:10.5px;color:var(--dim)}
.fauthor details{width:100%;margin-top:6px;font-size:11px;color:var(--muted);text-align:left}
.fauthor details summary{cursor:pointer;color:var(--gold)}
.fauthor details .mrow{display:flex;gap:4px;margin-top:5px}
.fauthor details input,.fauthor details select{flex:1;min-width:0;padding:4px 6px;font-size:11px;border-radius:6px}
.fbodyc{padding:12px 16px 12px;min-width:0}
.fbodyc .fph{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--edge);margin-bottom:10px}
.fbodyc .fph .sp{flex:1}
.votepill{display:inline-flex;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--edge);border-radius:999px;padding:2px 6px}
.votepill button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:6px}
.votepill button:hover{color:#fff;background:rgba(255,255,255,.08)}
.votepill button.up{color:var(--ok)!important}.votepill button.down{color:#ff8b93!important}
.votepill b{color:#fff;font-weight:700;font-size:12.5px;min-width:14px;text-align:center}
.fcontent{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}
.fquote{background:rgba(61,139,253,.08);border-left:3px solid var(--acc);border-radius:8px;padding:8px 12px;margin:0 0 10px;font-size:13px;color:var(--muted);white-space:pre-wrap}
.fquote .qh{font-weight:700;color:var(--acc2);font-size:12px;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.fquote .qh a{cursor:pointer;font-weight:400;font-size:11.5px}
.fvideo{position:relative;width:100%;max-width:400px;aspect-ratio:16/9;margin:8px 0;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--edge)}
.fvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ftips{margin-top:10px;padding-top:8px;border-top:1px solid var(--edge);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ftips .tt{background:rgba(245,199,106,.14);border:1px solid rgba(245,199,106,.4);color:var(--gold2);padding:3px 9px;border-radius:999px;font-weight:700}
.ftips .tippers{display:flex;gap:4px;flex-wrap:wrap}
.ftips .tippers span{background:var(--bg2);border:1px solid var(--edge);padding:2px 8px;border-radius:999px}
.ftips .tipbox{display:flex;gap:4px;margin-left:auto}
.ftips .tipbox input{width:80px;padding:5px 8px;font-size:12px;border-radius:8px}
.freply{margin:14px 22px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:16px}
.freply h4{margin:0 0 10px;font:800 15px/1.2 var(--font);color:#fff}
.freply textarea{width:100%;min-height:96px;padding:10px 12px;font:13.5px var(--font);resize:vertical;box-sizing:border-box;margin-bottom:8px}
.flocked{margin:14px 22px;padding:12px 16px;background:rgba(255,107,119,.1);border:1px solid rgba(255,107,119,.35);border-radius:var(--r);color:#ffb3ba;font-size:13px}
.fsignin{margin:14px 22px;padding:12px 16px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);color:var(--muted);font-size:13px}
.fsignin a{cursor:pointer}
.fboards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding:0 22px}
.fbcard{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:12px 14px;cursor:pointer;outline:none;color:var(--text);transition:border-color .15s,transform .15s}
.fbcard:hover,.fbcard.gp-focus{border-color:var(--acc);transform:translateY(-2px);color:#fff}
.fbcard .fbi{width:56px;height:56px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:22px;overflow:hidden}
.fbcard .fbi img{width:100%;height:100%;object-fit:cover}
.fbcard b{display:block;font-weight:700;font-size:15px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbcard .d{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbcard .s{font-size:11.5px;color:var(--dim);margin-top:3px}
.fbcard .s em{font-style:normal;color:var(--acc2)}

/* ------------------------------------------------------------- admin popout */
#rkAdmOv{position:fixed;inset:0;z-index:112;background:rgba(4,6,10,.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}
#rkAdmOv .rkpanel{height:calc(100vh - 36px)}
.admtabs{display:flex;gap:4px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--edge);flex:none;overflow-x:auto;scrollbar-width:none}
.admtabs button{background:transparent;border:1px solid transparent;border-radius:999px;color:var(--muted);font:700 13px/1 var(--font);padding:9px 14px;cursor:pointer;position:relative;white-space:nowrap}
.admtabs button.on{color:#fff;background:linear-gradient(135deg,var(--acc),#2668c9)}
.admtabs button.on::after{display:none}
.admtabs button:hover{color:#fff}
.admbody{padding:16px 18px 24px;display:flex;flex-direction:column;gap:12px}
.admcard{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px}
.admcard h3{margin:0 0 10px;font:800 13px/1 var(--font);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.admrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.admrow input,.admrow select,.admrow textarea{padding:8px 10px;font:13px var(--font)}
.admrow input[type=text],.admrow input[type=search]{flex:1;min-width:160px}
.admuser{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start}
.admuser .av{width:72px;height:72px;border-radius:50%;background:var(--panel2);border:2px solid var(--edge2);overflow:hidden;display:grid;place-items:center;font-size:26px;color:#fff}
.admuser .av img{width:100%;height:100%;object-fit:cover}
.admuser h4{margin:0;font:800 18px/1.2 var(--font);color:#fff}
.admuser .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 14px;margin:8px 0 10px;font-size:12.5px}
.admuser .kv span{color:var(--dim)} .admuser .kv b{color:#fff;font-weight:600;margin-left:6px}
.admuser .badge{border-radius:999px;background:var(--panel2);color:#fff;font-size:10.5px;margin-right:4px}
.admuser .badge.adm{background:rgba(255,107,119,.2)}.admuser .badge.ban{background:rgba(255,107,119,.35)}.admuser .badge.ok{background:rgba(67,214,139,.2)}
.admtable{width:100%;border-collapse:collapse;font-size:12.5px}
.admtable th{text-align:left;color:var(--dim);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--edge)}
.admtable td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04)}
.admlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.admlink{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px;cursor:pointer;outline:none;display:flex;gap:12px;align-items:center;color:var(--text);transition:border-color .15s,transform .15s}
.admlink:hover,.admlink.gp-focus{border-color:var(--acc);transform:translateY(-2px);color:#fff}
.admlink .ic{font-size:22px}
.admlink b{display:block;font-weight:700;color:#fff;font-size:14px}
.admlink span{font-size:11.5px;color:var(--muted)}

/* ------------------------------------------------------------- "sell your game" + launcher popouts */
#rkManageOv .rkpanel{height:calc(100vh - 36px)}
#rkManageOv .mtitle{display:none}
#rkManageOv .managewrap{padding:8px 0 60px}
#rkManageOv .msub{margin-top:8px}
#rkLauncherOv .rkpanel{width:min(760px,100%)}
.lbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:12px}
.lsub{margin:0;color:var(--muted);font-size:13.5px}
.lcard{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px}
.lcard h3{margin:0 0 8px;font:800 15px/1.2 var(--font);color:#fff}
.lcard p{margin:0 0 12px;color:var(--muted);font-size:13.5px;line-height:1.55}
.lcard a.rkbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin:2px 8px 2px 0}
.lrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.lnote{margin-top:10px;font-size:12px;color:var(--dim)}
.lsteps{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:13px}
.lsteps li{margin-bottom:6px}
.lcard code{background:var(--bg2);border:1px solid var(--edge);border-radius:6px;padding:1px 6px;font:12.5px ui-monospace,Consolas,monospace}

/* ------------------------------------------------------------- fortune: AUTO */
#slAuto{font-weight:800;letter-spacing:1px}
#slAuto.on{background:linear-gradient(180deg,#3a2a10,#2b1c0a);border-color:#ffd15c;color:#ffd15c;box-shadow:0 0 12px rgba(255,209,92,.35);animation:rkAutoPulse 1.4s ease-in-out infinite}
#slAuto:disabled{opacity:.4;cursor:default}
@keyframes rkAutoPulse{0%,100%{box-shadow:0 0 8px rgba(255,209,92,.25)}50%{box-shadow:0 0 18px rgba(255,209,92,.6)}}
.fortunespin.stop{background:linear-gradient(180deg,#7a2f2f,#5a1f1f)}

/* ------------------------------------------------------------- misc */
.gp-focus{outline:3px solid var(--acc2)!important;outline-offset:2px;box-shadow:none!important;border-radius:10px}
footer{border-top:1px solid var(--edge);color:var(--dim)}

/* ------------------------------------------------------------- FLAT CARDS
   The flat geometry from the first pass was the right call - flat is not
   Steam's, its palette and layout were. Cards go back to near-square corners
   and a tone change on hover instead of a lift; the header pills, the
   spotlight, the palette and the section names stay as they are. */
:root{--r:4px;--r2:6px}
.detail,.rkpanel,.spot,.buybox{border-radius:var(--r2)}
.cattile,.fboard,.fbcard .fbi,.fboard .fbi,.aprof .av,.admuser .av,.gpfeat .gf,.tpverify .bar,.fcompose .emo button,.fauthor details input,.fauthor details select,.ftips .tipbox input{border-radius:var(--r)}
.thumb,.listrow img,.listrow .noart,.fbanner .fcov,.fvideo,.fquote,.spotstrip .st,.featmain .shots img,.capsule .cm,.lcard code{border-radius:3px}
.aprof .av,.admuser .av,.fthread .fav,.fauthor .rankring,.fauthor .rankring>div{border-radius:50%}
.card:hover,.capsule:hover,.capsule:focus-visible,.listrow:hover,.listrow.on,.fthread:hover,.fbcard:hover,.admlink:hover,.val:hover{transform:none;box-shadow:none;background:var(--panel2);border-color:var(--edge2)}
.card.gp-focus,.capsule.gp-focus,.listrow.gp-focus,.fthread.gp-focus,.fbcard.gp-focus,.admlink.gp-focus,.cattile.gp-focus,.spotstrip .st.on,.spotstrip .st.gp-focus{transform:none;box-shadow:none}
.cattile:hover{transform:none}
.cattile:hover .bg{transform:none}
.cattile .lbl,.featmain .rank,.featmain .live,.ribbon{border-radius:var(--r)}

/* ------------------------------------------------------------- search: flat, and the results panel no longer inherits the box's width */
.topbar .searchbox{flex:1 1 420px;min-width:260px;max-width:620px;margin:0 16px}
.topnav{margin-left:auto}
.searchbox input{border-radius:var(--r)}
.searchbox input:focus{box-shadow:none}
.sugg{border-radius:var(--r);left:0;right:auto;width:min(680px,calc(100vw - 48px));box-shadow:var(--shadow);border-color:var(--edge2)}
.sugg .shead{padding:10px 14px 4px}
.srow{padding:8px 12px;gap:12px}
.srow img,.srow .noimg{border-radius:3px}
.srow .st{font-size:14px}
.sfoot{border-radius:0}
.schip{border-radius:var(--r)}

/* ------------------------------------------------------------- hover media on deal capsules and list rows: the clip, or the screenshots */
.capsule .cm{position:relative}
.capsule .cm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.capsule .cm video.playing{opacity:1}
.listrow .lm{position:relative;width:150px;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:var(--bg2);flex:none}
.listrow .lm img,.listrow .lm video{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.listrow .lm video{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.listrow .lm video.playing{opacity:1}
.listrow .lm .noart{width:100%;height:100%;border-radius:0}
@media(hover:none){.capsule .cm video,.listrow .lm video{display:none}}

/* ------------------------------------------------------------- the values strip, re-laid out
   icon on the left spanning both rows, title top-right, text directly under
   the title, everything top-aligned - three per row so nothing wraps three deep */
.values .wrap{grid-template-columns:repeat(3,1fr);gap:12px;padding:24px 22px 6px}
@media(max-width:900px){.values .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.values .wrap{grid-template-columns:1fr}}
.val{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:5px;align-items:start;padding:16px 18px 17px}
.val .ic{grid-column:1;grid-row:1 / span 2;width:42px;height:42px;font-size:19px;border-radius:var(--r);margin-top:1px}
.val b{grid-column:2;grid-row:1;display:block;font:800 14.5px/1.3 var(--font);color:#fff;margin:0}
.val span{grid-column:2;grid-row:2;display:block;margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ------------------------------------------------------------- the list tabs, flat: a bar with an underlined active tab, no pill */
.tabs{display:flex;gap:2px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--edge);border-radius:0;margin-bottom:12px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs button{border-radius:0;padding:11px 16px;background:transparent;color:var(--muted);font:700 13.5px/1 var(--font);position:relative;box-shadow:none}
.tabs button:hover{color:#fff;background:rgba(255,255,255,.04)}
.tabs button.on{color:#fff;background:rgba(61,139,253,.12);box-shadow:inset 0 -3px 0 var(--acc)}
.tabs button.on::after{display:none}
.tabs button.gp-focus{outline-offset:-2px}

/* ------------------------------------------------------------- spotlight trailer: only after a held hover, fading in over the cover */
.featmain>video{opacity:0;transition:opacity .4s}
.featmain>video.playing{opacity:1}

/* ---- Terms / Privacy popout: the former Bootstrap pages' utility classes, in our tokens ---- */
#rkLegalOv .rkpanel{height:calc(100vh - 36px)}
.legaldoc{max-width:860px;margin:0 auto;padding:18px 22px 30px;line-height:1.55;font-size:14.5px;color:var(--text)}
.legaldoc h1{font-size:24px;margin:0 0 4px;color:#fff}
.legaldoc h4,.legaldoc h5{margin:24px 0 8px;font-size:17px;color:#fff}
.legaldoc h5{font-size:15px}
.legaldoc p{margin:0 0 10px}
.legaldoc .fw-bold{font-weight:800}.legaldoc .fw-semibold{font-weight:600}
.legaldoc .text-muted{color:var(--muted)}
.legaldoc .small{font-size:13px}.legaldoc .d-block{display:block}
.legaldoc .mb-1{margin-bottom:4px}.legaldoc .mb-2{margin-bottom:8px}.legaldoc .mt-4{margin-top:24px}.legaldoc .my-4{margin:24px 0}.legaldoc .p-3{padding:16px}
.legaldoc .rounded{border-radius:var(--r2)}.legaldoc .border{border:1px solid var(--edge)}
.legaldoc .text-decoration-none{text-decoration:none}
.legaldoc a{color:var(--acc2)}.legaldoc a:hover{color:#fff}
.legaldoc ul,.legaldoc ol{padding-left:22px;margin:0 0 10px}
.legaldoc figure{background:#f4f6f9;color:#1f2937;border-color:#d0d5dd!important}
.legaldoc [style*="border-left:3px solid #dee2e6"]{border-left-color:var(--edge2)!important}
/* ---- Mini Rykoz store page + framed editor ---- */
#rkMiniOv.full .rkpanel{height:calc(100vh - 36px)}
#rkMiniOv.full .rkpanel{width:calc(100vw - 24px)!important;max-width:none}
#rkMiniOv .rkbody{padding:0;display:flex;flex-direction:column}
#rkMiniOv .rkhead a.rkbtn{text-decoration:none}
#mrFrame{flex:1;width:100%;border:0;background:#14171c;min-height:0}
.mrhome{padding:20px 22px 28px;display:grid;gap:18px}
.mrhero h3{margin:0 0 6px;font:800 22px/1.2 var(--font);color:#fff}
.mrhero p{color:var(--muted);margin:0 0 12px;max-width:760px;font-size:14px;line-height:1.55}
.mrbtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.mrbtns a.rkbtn{display:inline-flex;align-items:center;text-decoration:none}
.mrfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.mrfacts ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.6}
.mrh{margin:4px 0 0;font:800 16px/1.2 var(--font);color:#fff}
.mrgames{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mrgame{display:block;border-radius:var(--r);overflow:hidden;background:var(--panel2);border:1px solid var(--edge);color:var(--text);text-decoration:none}
.mrgame:hover{border-color:var(--acc)}
.mrgame img,.mrgame .nocover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panel)}
.mrgame span{display:block;padding:6px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ---- user profile popout + clickable names + earned titles ---- */
#rkUserOv{z-index:130}
.ulink{color:var(--acc2);text-decoration:none;cursor:pointer}.ulink:hover{color:#fff;text-decoration:underline}
.utitle{display:inline-block;padding:2px 9px;border-radius:999px;font:700 11px/1.5 var(--font);border:1px solid;text-decoration:none;vertical-align:middle;white-space:nowrap}
.utitle i{font-style:normal;font-weight:400;opacity:.8}
.utitle.t1{color:#9fb3d1;border-color:#3b4a66;background:rgba(159,179,209,.08)}
.utitle.t2{color:#43d68b;border-color:rgba(67,214,139,.5);background:rgba(67,214,139,.08)}
.utitle.t3{color:#c99cff;border-color:rgba(201,156,255,.5);background:rgba(201,156,255,.08)}
.utitle.t4{color:var(--gold);border-color:rgba(245,199,106,.55);background:rgba(245,199,106,.1)}
a.utitle:hover{filter:brightness(1.2)}
.rescuedby{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px}
.rescuer{display:inline-flex;align-items:center;gap:7px}
.rescuer i{font-style:normal;font-size:11.5px}
.uprof{padding:20px 22px 26px;display:grid;gap:20px}
.uphead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.upav{width:84px;height:84px;border-radius:50%;background:var(--panel2);border:3px solid var(--rk,var(--edge2));display:flex;align-items:center;justify-content:center;font:800 30px var(--font);color:#fff;overflow:hidden;flex:none}
.upav img{width:100%;height:100%;object-fit:cover}
.upwho{flex:1;min-width:200px}
.upwho h3{margin:0;font:800 22px/1.2 var(--font);color:#fff}
.upsub{color:var(--muted);font-size:13px;margin:4px 0 8px}
.upbadges{display:flex;gap:6px;flex-wrap:wrap}
.upbadges span{font:700 11px/1.5 var(--font);padding:2px 9px;border-radius:999px;border:1px solid var(--edge2);color:var(--muted)}
.upbadges .adm{color:#ff8b93;border-color:rgba(255,107,119,.5)}
.upbadges .dev{color:var(--acc2);border-color:rgba(61,139,253,.5)}
.upstats{display:flex;gap:22px}
.upstats div{text-align:center}
.upstats b{display:block;font:800 20px/1.1 var(--font);color:#fff}
.upstats span{font-size:11.5px;color:var(--muted)}
.upsec h4{margin:0 0 10px;font:800 15px/1.2 var(--font);color:#fff}
.uptitles{display:flex;flex-wrap:wrap;gap:8px}
.uptitles .utitle{font-size:12px;padding:4px 11px}
.upempty{margin:0;color:var(--dim);font-size:13px}
.upgames{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.upgame{display:block;border-radius:var(--r);overflow:hidden;background:var(--panel2);border:1px solid var(--edge);color:var(--text);text-decoration:none}
.upgame:hover{border-color:var(--acc)}
.upgame img,.upgame .nocover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panel)}
.upgame span{display:block;padding:6px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upthreads{display:grid;gap:6px}
.upthreads a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);color:var(--text);text-decoration:none}
.upthreads a:hover{border-color:var(--acc)}
.upthreads a span{font-size:12px;color:var(--muted)}


/* ---- phones: nothing may be wider than the screen. The nav rows scroll
   sideways inside the header instead of pushing the page out; the spotlight
   drops its side column so the text stays under the badge; cards shrink to
   the screen; popouts use the whole screen. ---- */
@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100vw}
  .wrap{padding:0 14px}
  .topbar .row1{gap:10px;padding:8px 0;row-gap:6px}
  .logo{font-size:18px}
  .topnav{gap:4px}
  .topnav a,.topnav button{height:34px;padding:0 10px;font-size:12.5px}
  .topbar .searchbox{margin:0;min-width:0;flex-basis:100%}
  .topbar .row2{flex-direction:column;align-items:stretch;gap:6px;padding:6px 0 8px;height:auto}
  .mainnav,.subnav{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;max-width:100%;margin:0;padding:0 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mainnav::-webkit-scrollbar,.subnav::-webkit-scrollbar{display:none}
  .mainnav a,.mainnav button{flex:none;height:34px;padding:0 13px;font-size:13px;white-space:nowrap}
  .subnav button{flex:none}
  .hero .wrap{padding:12px 14px 0}
  .featmain{aspect-ratio:auto;min-height:0;height:340px}
  .featmain .txt{left:16px;right:16px;bottom:16px}
  .featmain .side{display:none}
  .featmain h3{font-size:24px}
  .featmain .rank,.featmain .live{font-size:11px;padding:6px 10px}
  .featmain .live{top:14px;right:14px}
  .featarrow{width:36px;height:36px;font-size:18px;top:auto;bottom:16px;transform:none}
  .featarrow.l{left:auto;right:58px}
  .spotstrip{grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
  .capsule{flex:0 0 min(286px,80vw)}
  .listcol{grid-template-columns:1fr}
  .listrow{grid-template-columns:110px minmax(0,1fr) auto;gap:10px}
  .cattiles{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .values .wrap{grid-template-columns:1fr}
  .sech{font-size:16px;margin:22px 0 10px}
  .sechrow{margin:22px 0 10px}
  .rkov{padding:8px}
  .rkpanel{max-height:calc(100vh - 16px);border-radius:var(--r)}
  #rkLegalOv .rkpanel,#rkMiniOv.full .rkpanel{height:calc(100vh - 16px)}
  #rkMiniOv.full .rkpanel{width:calc(100vw - 16px)!important}
  .rkhead{padding:10px 12px;gap:8px}
  .rkhead h2{font-size:15px}
  .legaldoc{padding:14px 12px 24px}
  .uprof,.mrhome{padding:14px 12px 20px}
  .upstats{gap:14px}
  footer .frow{gap:12px}
}
/* tablets: a min-height on an aspect-ratio box transfers into a MIN-WIDTH
   (320px tall at 21:9 is 747px wide) - below 1000px the banner follows the
   container instead */
@media(max-width:1000px){.featmain{aspect-ratio:16/9;min-height:0}}
@media(max-width:760px){
  /* after the tablet rule on purpose: on phones the banner is a fixed height, no ratio at all */
  .spot .featmain{aspect-ratio:auto;min-height:0;height:340px}
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;white-space:nowrap}
}

/* ---- sale = light green, flat squares, a light sweeping left to right ---- */
:root{--disc1:#8affc1;--disc2:#4ade80;--discink:#04140b;--discedge:rgba(138,255,193,.55)}
.disc{border-radius:2px;padding:3px 8px 3px 3px}
.discpct{border-radius:2px;box-shadow:none;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--disc1),var(--disc2))}
.saletag,.robotag,.tottag{border-radius:2px;position:relative;overflow:hidden}
.saletag,.tottag{background:linear-gradient(135deg,var(--disc1),var(--disc2));color:var(--discink)}
.ribbon{border-radius:2px}
.ribbon.deal,.ribbon.sale{color:#8affc1;border-color:var(--discedge)}
.discpct::after,.saletag::after,.tottag::after,.ribbon.sale::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);transform:skewX(-18deg);animation:rkSweep 2.6s ease-in-out infinite;pointer-events:none}
@keyframes rkSweep{0%{left:-70%}60%,100%{left:140%}}
/* the game-page price: a flat square box */
.buybox .bbrow .dprice{background:var(--panel2);border:1px solid var(--edge);border-radius:2px;padding:8px 12px}
/* ---- wishlist ---- */
.wishbtn{position:absolute;top:8px;right:8px;z-index:4;width:30px;height:30px;border:1px solid rgba(255,255,255,.22);background:rgba(11,14,20,.72);color:#fff;border-radius:2px;font:700 15px/1 var(--font);cursor:pointer;opacity:0;transition:opacity .15s,border-color .15s,color .15s;display:flex;align-items:center;justify-content:center;padding:0}
.card:hover .wishbtn,.capsule:hover .wishbtn,.card.gp-focus .wishbtn,.capsule.gp-focus .wishbtn,.wishbtn.on,.wishbtn:focus-visible{opacity:1}
.wishbtn:hover{border-color:#ff6b9a;color:#ff6b9a}
.wishbtn.on{color:#ff6b9a;border-color:rgba(255,107,154,.7)}
.wishbtn:disabled{opacity:.5}
@media(hover:none){.wishbtn{opacity:1}}
.ghostbtn.on{color:#ff6b9a;border-color:rgba(255,107,154,.6)}
.seccount{font:700 12px/1 var(--font);color:var(--muted);background:var(--panel2);border:1px solid var(--edge);border-radius:2px;padding:4px 7px;margin-left:8px;vertical-align:middle}
.secnote{font-size:12.5px;color:var(--dim)}
/* ---- hover: an animated light runs around the selected card ---- */
@property --rkang{syntax:"<angle>";inherits:false;initial-value:0deg}
.card,.capsule,.listrow,.cattile,.upgame,.mrgame,.spotstrip .st{position:relative}
.card::after,.capsule::after,.listrow::after,.cattile::after,.upgame::after,.mrgame::after,.spotstrip .st::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s;background:conic-gradient(from var(--rkang),transparent 0 62%,rgba(111,177,255,.15) 74%,var(--acc2) 86%,#fff 93%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.card:hover::after,.capsule:hover::after,.listrow:hover::after,.cattile:hover::after,.upgame:hover::after,.mrgame:hover::after,.spotstrip .st:hover::after,.card.gp-focus::after,.capsule.gp-focus::after,.listrow.gp-focus::after,.cattile.gp-focus::after{opacity:1;animation:rkOrbit 1.4s linear infinite}
@keyframes rkOrbit{to{--rkang:360deg}}
@media(prefers-reduced-motion:reduce){.discpct::after,.saletag::after,.tottag::after,.ribbon.sale::after{animation:none;display:none}.card:hover::after,.capsule:hover::after,.listrow:hover::after,.cattile:hover::after{animation:none}}


/* ---- the RLDTA blueprint inside the legal popout: the old page's styles, scoped ---- */
#rkLegalOv{z-index:130}
.lgnav{display:flex;gap:6px;flex-wrap:wrap}
.legaldoc.rldta{--blue:var(--acc2);--code-bg:var(--bg2);--gold-ink:#0e0f14;--danger:#ff7380;max-width:860px}
.legaldoc.rldta header.doc{border-bottom:1px solid var(--edge);padding:4px 0 18px;margin-bottom:8px}
.legaldoc.rldta .docmeta{font:12px ui-monospace,Consolas,monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;display:flex;gap:14px;flex-wrap:wrap}
.legaldoc.rldta .docmeta .st{color:var(--ok)}
.legaldoc.rldta h1{font:700 30px/1.15 ui-monospace,Consolas,monospace;letter-spacing:-.01em;margin:10px 0 6px;color:#fff}
.legaldoc.rldta .sub{color:var(--muted);font-size:15px;max-width:62ch;margin:0}
.legaldoc.rldta h2{font:700 18px/1.3 ui-monospace,Consolas,monospace;margin:40px 0 12px;color:#fff}
.legaldoc.rldta h2 .no{color:var(--acc2);margin-right:10px}
.legaldoc.rldta h3{font:600 15px/1.4 var(--font);margin:26px 0 8px;color:#fff}
.legaldoc.rldta p{max-width:70ch;margin:0 0 14px}
.legaldoc.rldta ul{max-width:70ch;padding-left:22px;margin:0 0 14px}.legaldoc.rldta li{margin-bottom:6px}
.legaldoc.rldta strong{font-weight:650}
.legaldoc.rldta code,.legaldoc.rldta kbd{font:13px ui-monospace,Consolas,monospace;background:var(--bg2);border:1px solid var(--edge);border-radius:4px;padding:1px 6px}
.legaldoc.rldta figure{margin:26px 0;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:18px 18px 12px;overflow:hidden;color:var(--text)}
.legaldoc.rldta figure svg{display:block;max-width:100%;height:auto;margin:0 auto}
.legaldoc.rldta figcaption{font-size:13px;color:var(--muted);margin-top:10px;max-width:78ch}
.legaldoc.rldta figcaption b{color:var(--text);font-weight:600}
.legaldoc.rldta .verdict{background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--ok);border-radius:var(--r);padding:16px 18px;margin:18px 0}
.legaldoc.rldta .verdict p{margin:0 0 8px}.legaldoc.rldta .verdict p:last-child{margin:0}
.legaldoc.rldta table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14px}
.legaldoc.rldta th{font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;border-bottom:1px solid var(--edge)}
.legaldoc.rldta td{padding:9px 12px;border-bottom:1px solid var(--edge);vertical-align:top}
.legaldoc.rldta .mono,.legaldoc.rldta td.mono{font:13px ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.legaldoc.rldta .holdbar{height:12px;border-radius:3px;background:var(--acc);display:inline-block;vertical-align:middle}
.legaldoc.rldta .holdzero{width:3px;background:var(--ok)}
.legaldoc.rldta .tablewrap{overflow-x:auto}
.legaldoc.rldta .done{color:var(--ok);font-weight:650}
.legaldoc.rldta .todo{color:var(--gold);font-weight:650}
.legaldoc.rldta .qa dt{font-weight:650;margin-top:16px}.legaldoc.rldta .qa dd{margin:4px 0 0;color:var(--muted);max-width:68ch}
.legaldoc.rldta a{color:var(--acc2)}