/* berdyev.com — core stylesheet
   Layout: one 1080px column, spec-sheet rows, mono for anything that is data.
   Dark-first with a light variant; the visitor's OS setting decides. */

:root{
  --bg:#12100f;
  --surface:#1a1715;
  --surface2:#221e1b;
  --line:#322c27;
  --line-soft:#272320;
  --fg:#ece7e1;
  --fg-dim:#9b918a;
  --accent:#e2703a;
  --accent-soft:#8a4526;
  --ok:#68a98a;
  --warn:#d6a44c;
  --bad:#d9634a;
  --display:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f6f4f1; --surface:#fff; --surface2:#f0ece7;
    --line:#ddd6cd; --line-soft:#e9e3db;
    --fg:#1b1815; --fg-dim:#6d645c;
    --accent:#b4501d; --accent-soft:#e8c4ae;
    --ok:#3f7a5f; --warn:#8a6415; --bad:#a8391c;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f6f4f1; --surface:#fff; --surface2:#f0ece7;
  --line:#ddd6cd; --line-soft:#e9e3db;
  --fg:#1b1815; --fg-dim:#6d645c;
  --accent:#b4501d; --accent-soft:#e8c4ae;
  --ok:#3f7a5f; --warn:#8a6415; --bad:#a8391c;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--display);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%;height:auto}

.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--mono)}
.dim{color:var(--fg-dim)}
.num{font-variant-numeric:tabular-nums}

/* header */
.sitehead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);
}
.sitehead .wrap{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:-.02em;font-size:16px;text-decoration:none}
.logo span{color:var(--accent)}
.sitenav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;min-width:0}
.sitenav a{color:var(--fg-dim);text-decoration:none}
.sitenav a:hover{color:var(--fg)}

/* hero */
.hero{padding-block:64px 44px}
.hero h1{font-size:clamp(32px,6.5vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:16ch}
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px;
}
.stat{background:var(--bg);padding:20px 18px}
.stat .v{font-size:clamp(24px,4.2vw,34px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-top:4px}

/* sections */
.sec{padding-block:56px;border-top:1px solid var(--line-soft)}
.sec h2{font-size:clamp(23px,4vw,31px);font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:10px;
}
.lede{color:var(--fg-dim);max-width:62ch;margin:0 0 26px}

/* empty state */
.empty{border:1px dashed var(--line);border-radius:4px;padding:44px 24px;text-align:center;background:var(--surface)}
.empty .icon{font-family:var(--mono);font-size:26px;color:var(--fg-dim);opacity:.5}
.empty h4{font-size:16px;font-weight:700;margin:12px 0 6px}
.empty p{color:var(--fg-dim);font-size:13.5px;margin:0 auto;max-width:44ch}

/* file boxes and tables */
.filebox{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:22px}
.filebox-head{
  background:var(--surface2);padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ftable{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.ftable tr{border-top:1px solid var(--line-soft)}
.ftable tr:first-child{border-top:0}
.ftable tr:hover{background:var(--surface2)}
.ftable td{padding:10px 14px;vertical-align:middle}
.ftable td.n{width:100%}
.ftable td.n a{color:var(--fg);text-decoration:none}
.ftable td.n a:hover{color:var(--accent);text-decoration:underline}
.ftable td.sz,.ftable td.dt{
  font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);
  white-space:nowrap;text-align:right;
}

.tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);margin-left:10px;
}

/* repo page */
.crumb{font-family:var(--mono);font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.crumb a{color:var(--accent);text-decoration:none}
.crumb .sep{color:var(--fg-dim)}
.repobar{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:16px;
  font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);
}
.readme-head{
  background:var(--surface2);padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);
}
.readme{padding:24px;background:var(--surface);max-width:none}
.readme p{margin:0 0 12px;max-width:70ch}

/* buttons */
.btn{
  font-family:var(--display);font-weight:600;font-size:14px;
  background:var(--accent);color:#12100f;border:1px solid var(--accent);
  padding:10px 18px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block;
}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}

/* flash */
.flash{border-radius:3px;padding:12px 16px;margin-top:18px;font-size:14px;border:1px solid var(--line)}
.flash-success{border-color:var(--ok);color:var(--ok)}
.flash-error{border-color:var(--bad);color:var(--bad)}

/* footer */
.foot{
  border-top:1px solid var(--line-soft);padding-block:30px;margin-top:40px;
  font-family:var(--mono);font-size:11px;color:var(--fg-dim);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* homepage project cards */
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;text-decoration:none;border-radius:4px}
.card:hover{border-color:var(--accent-soft)}
.card h3{font-size:16px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.card h3 .slash{color:var(--fg-dim);font-weight:400}
.card p{margin:0;color:var(--fg-dim);font-size:13.5px;line-height:1.5}
.card .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim)}
.lang{display:flex;align-items:center;gap:5px}
.lang i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--accent)}
.tags{display:flex;gap:6px;flex-wrap:wrap}

/* steam item grid
   Each tile carries its own border and the grid uses a real gap. The older
   1px-gap-over-a-coloured-container trick painted empty cells as visible
   boxes whenever the item count did not exactly fill the last row. */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.item{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;
  text-decoration:none;color:inherit;
}
.item:hover{background:var(--surface2);border-color:var(--accent-soft)}
.item:hover .t{color:var(--accent)}
.item .t{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.item .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--fg-dim);gap:10px}
.item .r b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.synced{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);margin-top:12px}

/* project rows */
.prow{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.prow:last-child{border-bottom:0}
.prow .body{flex:1 1 260px;min-width:0}
.prow h3{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prow p{color:var(--fg-dim);margin:6px 0 0;font-size:14px;max-width:62ch}
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;border-radius:2px}
.badge.ok{color:var(--ok)}.badge.warn{color:var(--warn)}.badge.dim{color:var(--fg-dim)}.badge.accent{color:var(--accent)}

/* skills */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.deflist{display:flex;flex-direction:column;margin:0}
.deflist div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px;min-width:0}
.deflist dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);flex:0 0 auto;margin:0}
.deflist dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere}
.subh{font-size:12px;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.btn.sm{padding:7px 14px;font-size:13px}

/* contact form + tickets */
.formwide{width:100%}
.narrow{max-width:760px;margin:0 auto}
.center{text-align:center}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:6px}
input,textarea,select{width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line);padding:10px 12px;border-radius:3px;font-family:var(--display);font-size:14px}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:18px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>.field{flex:1 1 200px;min-width:0}
.hint{font-size:12px;margin-top:7px;min-height:17px;color:var(--fg-dim)}
.hint.bad{color:var(--accent)}
.form-note{font-size:13px;color:var(--fg-dim);margin-top:14px}
.panel{background:var(--surface);border:1px solid var(--line);padding:24px;border-radius:4px}
.alert{border:1px solid var(--bad);color:var(--bad);border-radius:3px;padding:11px 14px;margin-bottom:18px;font-size:13.5px}
.res{padding:12px 15px;border-radius:3px;margin-top:14px;font-size:13.5px;border:1px solid var(--line)}
.res.ok{border-color:var(--ok)}
.res.warn{border-color:var(--warn);color:var(--warn)}

.cap{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cap .q{flex:1 1 200px;min-width:0;background:var(--surface2);border:1px solid var(--line);border-radius:3px;padding:0 14px;height:46px;display:flex;align-items:center;font-family:var(--mono);font-size:14px}
.cap .ans{flex:0 0 130px;height:46px;padding-block:0;font-family:var(--mono);text-align:center}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--fg-dim);width:46px;height:46px;border-radius:3px;cursor:pointer;font-size:17px;line-height:1;flex:0 0 auto}
.icon-btn:hover{color:var(--accent);border-color:var(--accent-soft)}
.spin{display:inline-block;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.code-in{font-family:var(--mono);letter-spacing:.12em;text-align:center;font-size:16px}
.thread{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.msg{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.msg .h{background:var(--surface2);padding:8px 13px;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.msg .b{padding:13px;font-size:14px;background:var(--surface)}
.msg.me .h{color:var(--accent)}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.status-open{color:var(--warn)}.status-replied{color:var(--ok)}.status-closed{color:var(--fg-dim)}

/* hero paragraph */
.hero-sub{color:var(--fg-dim);font-size:17px;max-width:58ch;margin:18px 0 0;line-height:1.55}

/* availability badge */
.avail{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.avail-ok{color:var(--ok)}
.avail-warn{color:var(--warn)}
.avail-accent{color:var(--accent)}
.avail-dim{color:var(--fg-dim)}
.avail .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

.synced a{color:var(--accent)}
.filebox-head .grow{margin-left:auto;display:flex;gap:8px;align-items:center}

/* modal */
/* [hidden] is a browser default, and any author display rule outranks it.
   Without this the modal is permanently visible. */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);padding:20px;
}
.modal-card{
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:26px;width:100%;max-width:420px;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal-card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;padding-right:24px}
.modal-x{
  position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--fg-dim);
  font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:3px;
}
.modal-x:hover{color:var(--fg)}

/* payment page */
.card-field{
  background:var(--surface2);border:1px solid var(--line);border-radius:3px;
  padding:13px 12px;min-height:46px;
}
.card-field.StripeElement--focus{border-color:var(--accent)}
.paid-tick{
  width:52px;height:52px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ok);color:var(--ok);font-size:24px;
}

/* rich text inside a README */
.readme h2{font-size:21px;font-weight:700;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.readme h3{font-size:17px;font-weight:700;margin:22px 0 8px}
.readme h4{font-size:15px;font-weight:700;margin:18px 0 6px}
.readme ul,.readme ol{margin:0 0 14px;padding-left:22px}
.readme li{margin-bottom:5px}
.readme blockquote{
  margin:0 0 14px;padding:2px 0 2px 16px;border-left:2px solid var(--accent-soft);color:var(--fg-dim);
}
.readme pre{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:14px;overflow-x:auto;margin:0 0 14px}
.readme code{font-family:var(--mono);font-size:12.5px;background:var(--surface2);padding:2px 5px;border-radius:3px}
.readme pre code{background:none;padding:0}
.readme a{color:var(--accent)}
.readme img{max-width:100%;height:auto;border-radius:4px;margin:6px 0}
.readme img.align-center{display:block;margin:14px auto}
.readme img.align-right{display:block;margin:14px 0 14px auto}
.readme img.align-left{display:block;margin:14px auto 14px 0}
.readme hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.readme table{border-collapse:collapse;font-size:13.5px;margin-bottom:14px;width:100%}
.readme th,.readme td{border:1px solid var(--line);padding:7px 12px;text-align:left}
.readme th{background:var(--surface2)}

/* Anything using display on a class needs this, or [hidden] is ignored. */
[hidden]{display:none !important}

/* Workshop section: the stat row needs air before the mod grid */
.sec .stats{margin-bottom:26px}

/* availability badge palette */
.avail-blue{color:#4a9eff}
.avail-sky{color:#5ec8f0}
.avail-teal{color:#3fb99a}
.avail-violet{color:#9a6ee0}
.avail-pink{color:#e070a8}
.avail-lime{color:#8cc63f}
.avail-red{color:var(--bad)}

/* ---------- star ratings ---------- */
.stars{display:inline-flex;align-items:center;gap:1px;color:var(--accent);line-height:1}
.star{width:13px;height:13px;flex:0 0 auto}
.star-empty{opacity:.34}
.starcount{
  font-family:var(--mono);font-size:10px;color:var(--fg-dim);
  margin-left:6px;letter-spacing:.03em;
}

/* ---------- mod tiles with thumbnails ---------- */
.item.has-thumb{padding:0;overflow:hidden}
/* Workshop previews are usually square, the tile is 16:9, and neither giving
   way was good: cropping sliced the art, and a square frame made every tile
   almost twice as tall. So the frame stays 16:9 and short, the art sits inside
   it uncropped, and the gap either side is filled with a blown-up blurred copy
   of the same image. Same file, already cached, no second request. */
.item .thumb,.wsthumb{
  position:relative;width:100%;aspect-ratio:16/9;background:var(--surface2);
  border-bottom:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.item .thumb::before,.wsthumb::before{
  content:'';position:absolute;inset:0;
  background-image:var(--shot);background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.35);
  transform:scale(1.25);          /* hides the soft edge the blur leaves */
  opacity:.55;
}
.item .thumb img,.wsthumb img{
  position:relative;z-index:1;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
/* No backdrop to work with, so just centre the art on the surface colour. */
.item .thumb:not([style*="--shot"])::before,
.wsthumb:not([style*="--shot"])::before{display:none}
.item.has-thumb .itembody{padding:13px 15px;display:flex;flex-direction:column;gap:6px}
.item:not(.has-thumb) .itembody{display:flex;flex-direction:column;gap:6px}

/* ---------- payment call to action ---------- */
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px 26px;
}
.cta h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.cta p{color:var(--fg-dim);margin:6px 0 0;font-size:14px;max-width:52ch}

/* ---------- workshop page ---------- */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:24px 0 14px}
.filterbar input[type=search]{flex:1 1 220px;min-width:0}
.filterbar select{flex:0 0 auto;width:auto;min-width:150px}
.sortbtns{display:flex;gap:4px;flex-wrap:wrap}
.sortbtns button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--fg-dim);
  padding:7px 11px;border-radius:3px;cursor:pointer;
}
.sortbtns button:hover{color:var(--fg);border-color:var(--accent-soft)}
.sortbtns button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.wscount{font-family:var(--mono);font-size:11px;margin-bottom:14px}

.wsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.wscard{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-width:0;
}
.wscard:hover{border-color:var(--accent-soft)}
.wscard:hover .wstitle{color:var(--accent)}
/* .wsthumb shares the thumbnail rules above with .item .thumb */
.wsbody{padding:13px 15px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-width:0}
.wstitle{font-weight:600;font-size:14px;overflow-wrap:anywhere;line-height:1.35}
.wsmeta{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim)}
.wsmeta b{color:var(--fg);font-weight:500}
.wsfoot{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:4px;
  font-family:var(--mono);font-size:10px;color:var(--fg-dim);
}
.wsfoot .tag{margin-left:0}

/* ---------- gitgud index ---------- */
.codeh{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em}

.repogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin-top:6px}
.repocard{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:18px 19px 15px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:border-color .13s;
}
.repocard:hover{border-color:var(--accent-soft)}
.repocard:hover .rctitle{color:var(--accent)}
.repocard.feat{border-left:2px solid var(--accent)}

.rchead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rctitle{font-size:15.5px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere;transition:color .13s}
.rcfeat{
  flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-soft);border-radius:99px;padding:2px 7px;
}
.rcdesc{
  color:var(--fg-dim);font-size:13.5px;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Language mix. Sized by bytes of source, not file count: one huge generated
   file would otherwise read the same as one small hand-written one. */
.langbar{display:flex;height:4px;border-radius:99px;overflow:hidden;background:var(--surface2);margin-top:2px}
.lseg{height:100%;flex:0 0 auto}
.langkey{display:flex;gap:11px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:var(--fg-dim)}
/* The key belongs to the bar above it, so close the parent's gap between them. */
.langbar + .langkey{margin-top:-5px}
.lk{display:inline-flex;align-items:center;gap:5px}
.dotc{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.lseg.l0,.dotc.l0{background:var(--accent)}
.lseg.l1,.dotc.l1{background:#5ec8f0}
.lseg.l2,.dotc.l2{background:#9a6ee0}
.lseg.l3,.dotc.l3{background:#8cc63f}

.rcfoot{
  display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:6px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;color:var(--fg-dim);
}
.rcfoot .tag{margin-left:0}
.rcwhen{margin-left:auto}

/* ---------- steam profile ---------- */
.sphead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

.spcard{
  display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:22px 24px;margin-top:20px;
}
.spavatar{flex:0 0 auto;width:96px;height:96px;border-radius:4px;display:block;background:var(--surface2)}
.spwho{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.spname{font-size:20px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.spstate{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--fg-dim)}
.spstate .sep{opacity:.5}
.spdot{width:7px;height:7px;border-radius:50%;background:var(--fg-dim);flex:0 0 auto}
.spdot.on{background:var(--ok)}
.spdot.priv{background:var(--warn)}
.spmeta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.splevel{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:84px;height:84px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);
}
.splevel .lv{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.splevel .lb{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

.spstats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px;
}
.spstat{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:15px 16px}
.spstat .v{font-size:21px;font-weight:700;letter-spacing:-.02em}
.spstat .l{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:4px;
}

.spxp{margin-top:14px}
.spxpbar{height:5px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.spxpbar span{display:block;height:100%;background:var(--accent)}

.spgames{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.spgame{
  display:flex;align-items:center;gap:13px;padding:11px 15px;
  background:var(--surface);text-decoration:none;color:inherit;min-width:0;
}
.spgame:hover{background:var(--surface2)}
.spgame:hover .spgname{color:var(--accent)}
.spgame img,.spgicon{
  flex:0 0 auto;width:32px;height:32px;border-radius:3px;display:block;background:var(--surface2);
}
.spgname{
  flex:1 1 140px;min-width:0;font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .13s;
}
.spgbar{flex:1 1 90px;min-width:50px;height:4px;border-radius:99px;background:var(--surface2);overflow:hidden}
.spgbar span{display:block;height:100%;background:var(--accent);opacity:.75}
.spgtime{flex:0 0 auto;font-size:10.5px;color:var(--fg-dim);min-width:62px;text-align:right}

/* Lettered stand-in for a game with no icon, so a gap never reads as broken. */
.spgicon{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--fg-dim);
  background:var(--surface2);border:1px solid var(--line);
}
/* .mini is an admin class and admin.css is not loaded out here, so the public
   pages that use it (the gitgud file viewer's Raw and Copy buttons, the show
   more toggle) were rendering as unstyled browser buttons. One rule covers
   both rather than a private one per page. */
.spmore,.wrap .mini{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--fg-dim);
  padding:7px 13px;border-radius:3px;cursor:pointer;text-decoration:none;
  transition:color .13s,border-color .13s;
}
.spmore:hover,.wrap .mini:hover{color:var(--accent);border-color:var(--accent-soft)}
.spmore{margin-top:10px}

.spclean{color:var(--ok)}
.spbanned{color:var(--bad)}

.spfacts{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.spfacts li{
  font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:5px 12px;
}

.spids{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.spid{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.spid .l{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);
}
.spid .v{font-size:12.5px;overflow-wrap:anywhere}

@media (max-width:560px){
  .spgbar{display:none}
  .splevel{width:66px;height:66px}
  .splevel .lv{font-size:21px}
}

/* ---------- logo as an image ---------- */
.logo-img{display:inline-flex;align-items:center}
.logo-img img{display:block;width:auto;max-height:44px}

/* ---------- maintenance ---------- */
body.maint{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.maintbox{
  max-width:520px;width:100%;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:44px 36px;
}
.maintlogo{margin-bottom:26px}
.maintlogo .logo{font-weight:800;letter-spacing:-.02em;font-size:20px}
.maintlogo .logo span{color:var(--accent)}
.maintlogo img{display:inline-block;width:auto}
.maintpill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warn);border:1px solid currentColor;border-radius:99px;padding:4px 12px;margin-bottom:18px;
}
.maintpill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.maintbox h1{font-size:clamp(24px,5vw,32px);font-weight:800;letter-spacing:-.025em;margin-bottom:12px}
.maintbox p{color:var(--fg-dim);font-size:15px;line-height:1.6;margin:0 auto;max-width:44ch}
.maintbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}