/* Toxics Land 4.0 phase 2 - the public home page and the store. Loaded after ui3.css and before tokens.css, so it uses
   the tokens (--t-*) and the public names they map to. Flat: borders group things, no shadows, no gradients
   (tools/design_lint.py checks this file too). */

/* ------------------------------------------------------------------ home: first screen */
.h4-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
  padding: 24px 0 56px; border-bottom: 1px solid var(--line); margin-bottom: 48px;
}
.h4-hero-copy { min-width: 0; }
.h4-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--text2); font-size: 15px; }
.h4-live b { color: var(--text); font-variant-numeric: tabular-nums; }
.h4-live .muted { margin-left: -4px; }
.h4-live .sep { width: 1px; height: 14px; background: var(--line2); margin: 0 6px; }
:root[data-ui] .h4-hero h1, :root .h4-hero h1 { font-size: clamp(46px, 6.2vw, 76px); line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.h4-tag { color: var(--text2); font-size: 19px; line-height: 1.55; max-width: 42ch; margin: 14px 0 0; }

.h4-ip { display: flex; align-items: stretch; margin-top: 28px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); overflow: hidden; max-width: 560px; }
.h4-ip code { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 18px; font: 500 18px/1.3 var(--mono); color: var(--text); overflow-wrap: anywhere; background: none; border: 0; }
.h4-ip .btn { border-radius: 0; min-height: 54px; height: auto; padding: 0 20px; flex: none; }

.h4-steps { list-style: none; margin: 18px 0 0; padding: 0; max-width: 560px; font-size: 15px; }
.h4-steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.h4-steps li:last-child { border-bottom: 1px solid var(--line); }
.h4-steps b { font-weight: 600; color: var(--text); }
.h4-steps span { color: var(--text2); }
.h4-steps code { font: 500 14px var(--mono); color: var(--text); background: none; padding: 0; }
.h4-steps a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.h4-steps a:hover { text-decoration-color: var(--acc); }
.h4-facts { color: var(--muted); font-size: 14px; margin: 14px 0 0; }

.h4-shot { margin: 0; min-width: 0; position: relative; }
.h4-shot img, .h4-shot .h4-vid { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.h4-shot .h4-vid { position: absolute; inset: 0; height: auto; opacity: 0; transition: opacity .4s; }
.h4-shot.has-vid .h4-vid { opacity: 1; }
.h4-shot figcaption { font: 500 12px/1 var(--mono); color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------------ home: the one featured thing */
.h4-feat {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 32px 36px; margin: 0 0 56px;
}
.h4-feat.has-img { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding: 20px; gap: 36px; }
.h4-feat-img { display: block; line-height: 0; }
.h4-feat-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.h4-eye { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.h4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
:root[data-ui] .h4-feat h2, :root .h4-feat h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; margin: 0; }
.h4-feat h2 a { color: inherit; }
.h4-lede { color: var(--text2); font-size: 17px; max-width: 52ch; margin: 12px 0 0; }
.h4-big { font: 700 34px/1.1 var(--display); margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.h4-earn { margin: 16px 0 0; padding: 0 0 0 18px; columns: 2; column-gap: 32px; color: var(--text2); font-size: 15px; }
.h4-earn li { break-inside: avoid; padding: 2px 0; }
.h4-earn li::marker { color: var(--muted); }
.h4-arc { margin: 16px 0 0; font-size: 15px; color: var(--text2); }
.h4-arc b { color: var(--text); font-weight: 600; }
.h4-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.h4-cta .btn { min-height: 44px; }

.h4-ftab { width: 100%; border-collapse: collapse; font-size: 15px; }
.h4-ftab caption { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.h4-ftab td { border-top: 1px solid var(--line); padding: 8px 0; vertical-align: middle; }
.h4-ftab td.rk { width: 28px; color: var(--muted); font-variant-numeric: tabular-nums; }
.h4-ftab td.v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; padding-left: 12px; }
.h4-ftab a { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.h4-ftab a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h4-ftab .head { width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; flex: none; }

/* ------------------------------------------------------------------ home: also on + online */
.h4-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; margin-bottom: 56px; }
.h4-rows { display: flex; flex-direction: column; }
.h4-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.h4-row:first-child { padding-top: 4px; }
.h4-row:hover { text-decoration: none; }
.h4-row:hover b { color: var(--acc); }
.h4-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h4-row-t b { font-size: 16.5px; font-weight: 600; }
.h4-row-t > span { color: var(--muted); font-size: 14px; }
.h4-row-t .bar { margin-top: 8px; max-width: 420px; }
.h4-row-v { font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h4-row-v small { font-size: 15px; color: var(--muted); font-weight: 500; }
.h4-row-v.sm { font: 500 14px/1.3 var(--font); color: var(--text2); }
.h4-side .heads3 { display: flex; flex-wrap: wrap; gap: 6px; }
.h4-dc { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px; min-height: 52px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.h4-dc:hover { border-color: var(--line2); text-decoration: none; }
.h4-dc > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.h4-dc small { color: var(--muted); font-size: 13px; }
.h4-dc .ic { flex: none; width: 18px; height: 18px; color: var(--text2); }

/* ------------------------------------------------------------------ home: tables (top players, servers) and posts */
.h4-sec { margin-bottom: 56px; }
.h4-tblwrap { overflow-x: auto; }
.h4-top, .h4-srv { width: 100%; border-collapse: collapse; font-size: 15px; }
.h4-top thead th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; }
.h4-top tbody th, .h4-srv th { text-align: left; font-weight: 600; padding: 12px 16px 12px 0; white-space: nowrap; }
.h4-top td, .h4-top tbody th, .h4-srv td, .h4-srv th { border-top: 1px solid var(--line); vertical-align: middle; }
.h4-top td { padding: 10px 16px 10px 0; }
.h4-top td a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); vertical-align: middle; max-width: 100%; }
.h4-top td .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h4-top td .head { width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; flex: none; }
.h4-top td .v { display: block; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; margin: 2px 0 0 32px; }
.h4-srv th small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; white-space: normal; }
.h4-srv th .srv3-dot { display: inline-block; margin-right: 8px; vertical-align: middle; }
.h4-srv td { padding: 10px 0; }
.h4-srv td.st { color: var(--text2); padding-right: 16px; white-space: nowrap; }
.h4-srv td.ad { text-align: right; white-space: nowrap; }
.h4-srv td.ad code { font: 500 15px var(--mono); margin-right: 10px; background: none; }

.h4-posts { list-style: none; margin: 0; padding: 0; }
.h4-posts li + li { border-top: 1px solid var(--line); }
.h4-posts a { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; padding: 12px 0; color: var(--text); }
.h4-posts a:hover { text-decoration: none; }
.h4-posts a:hover b { color: var(--acc); }
.h4-posts time { grid-row: span 2; color: var(--muted); font-size: 14px; padding-top: 2px; }
.h4-posts b { font-weight: 600; font-size: 17px; }
.h4-posts span { color: var(--muted); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ home: tablets and phones */
@media (max-width: 960px) {
  .h4-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 8px; }
  .h4-feat, .h4-feat.has-img { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .h4-two { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .h4-hero { padding-bottom: 36px; margin-bottom: 32px; }
  .h4-tag { font-size: 17px; }
  .h4-ip { flex-direction: column; }
  .h4-ip code { padding: 14px 16px; font-size: 17px; justify-content: center; text-align: center; }
  .h4-ip .btn { justify-content: center; min-height: 48px; }
  .h4-steps li { grid-template-columns: 64px minmax(0, 1fr); }
  .h4-feat { padding: 20px; margin-bottom: 40px; }
  .h4-earn { columns: 1; }
  .h4-sec, .h4-two { margin-bottom: 40px; }
  /* the top players table: one block per leaderboard */
  .h4-top thead { display: none; }
  .h4-top, .h4-top tbody, .h4-top tr { display: block; }
  .h4-top tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .h4-top tbody th { display: block; border: 0; padding: 0 0 6px; }
  .h4-top td { display: flex; align-items: center; gap: 8px; border: 0; padding: 4px 0; }
  .h4-top td::before { content: attr(data-place); width: 34px; flex: none; color: var(--muted); font-size: 13px; }
  .h4-top td a { flex: 1; min-width: 0; }
  .h4-top td .v { margin: 0; flex: none; }
  .h4-srv tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); padding: 10px 0; }
  .h4-srv th, .h4-srv td { border: 0; padding: 0; }
  .h4-srv td.ad { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
  .h4-posts a { grid-template-columns: minmax(0, 1fr); }
  .h4-posts time { grid-row: auto; font-size: 13px; }
  .h4-posts span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ------------------------------------------------------------------ store: package lists */
.sv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sv-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sv-row-im { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.sv-row-im img { width: 100%; height: 100%; object-fit: cover; }
.sv-row-im .ic { width: 20px; height: 20px; }
.sv-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-row-t a { color: var(--text); }
.sv-row-t a b { font-size: 16.5px; font-weight: 600; }
.sv-row-t a:hover b { color: var(--acc); }
.sv-row-t > span:not(.sv-owned) { color: var(--muted); font-size: 14px; }
.sv-row-tag { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text2); align-self: flex-start; border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; margin-top: 4px; }
.sv-row-tag.sale { color: var(--acc); border-color: rgba(var(--acc-rgb), .45); }
.sv-row .sv-owned { position: static; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--acc); margin-top: 2px; }
.sv-row .sv-owned[hidden] { display: none; }
.sv-row-p { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-row-p b { font-size: 17px; font-weight: 700; color: var(--text); }
.sv-row-p s { color: var(--muted); font-size: 13px; margin-right: 6px; }
.sv-row-p small { color: var(--muted); font-size: 12.5px; margin-left: 2px; }
.sv-row .sv-add { min-width: 76px; min-height: 40px; justify-content: center; }

/* recently bought: a still line */
.sv-recent.still { flex-wrap: wrap; border-radius: 10px; padding: 10px 14px; }
.sv-recent.still ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text2); }
.sv-recent.still li { display: flex; align-items: center; gap: 8px; }
.sv-recent.still .head { width: 22px; height: 22px; border-radius: 4px; image-rendering: pixelated; }
.sv-recent.still em { font-style: normal; color: var(--text); font-weight: 600; }
.sv-recent.still time { color: var(--muted); font-size: 12.5px; }
.sv-recent-l { color: var(--muted); }

/* ------------------------------------------------------------------ store: rank comparison table */
.sv-ranks { scroll-margin-top: calc(var(--topH, 64px) + 20px); }
.rk-sub { color: var(--text2); font-size: 15px; margin: 0 0 14px; max-width: 70ch; }
.rk-pick { display: none; }
.rk-wrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: var(--card); }
.rk-t { width: 100%; border-collapse: collapse; font-size: 15px; min-width: calc(220px + var(--n) * 128px); }
.rk-t th, .rk-t td { padding: 10px 14px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; }
.rk-t tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--text); width: 220px; }
.rk-t tbody th small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.rk-t thead th { border-top: 0; vertical-align: top; padding: 18px 14px 16px; }
.rk-t thead th > span { display: block; }
.rk-name { font: 700 22px/1.15 var(--display); color: var(--text); }
.rk-best { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--acc); margin-top: 2px; }
.rk-price { font-size: 16px; font-weight: 700; color: var(--text); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.rk-price s { color: var(--muted); font-weight: 400; font-size: 13px; }
.rk-price small { color: var(--muted); font-weight: 400; }
.rk-blurb { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 4px auto 0; max-width: 22ch; font-weight: 400; }
.rk-t thead .sv-add, .rk-t tfoot .sv-add { margin-top: 12px; min-height: 40px; justify-content: center; }
.rk-t .rk-g th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg2); padding: 8px 14px; }
.rk-t .best { background: rgba(var(--acc-rgb), .06); }
.rk-t .rk-g + tr th, .rk-t .rk-g + tr td { border-top: 0; }
.rk-v { font-weight: 600; color: var(--text); }
.rk-v .ic { width: 18px; height: 18px; vertical-align: -3px; }
.rk-v.yes { color: var(--acc); }
.rk-v.no { color: var(--muted); opacity: .6; }
.rk-v.inh { font-weight: 400; color: var(--muted); font-size: 13px; }
.rk-t tfoot td, .rk-t tfoot th { padding-top: 6px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.rk-t tfoot .sv-add { margin-top: 8px; }
.rk-foot { margin-top: 10px; }
@media (max-width: 760px) {
  .rk-pick { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
  .rk-pick button { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); color: var(--text2); font: 600 15px var(--font); cursor: pointer; }
  .rk-pick button[aria-pressed="true"] { border-color: var(--acc); color: var(--text); background: rgba(var(--acc-rgb), .1); }
  .rk-t { min-width: 0; }
  .rk-t tbody th[scope="row"] { width: auto; }
  .rk-t .best { background: none; }
  .rk-t [data-col] { display: none; }
  .rk-t[data-show="0"] [data-col="0"], .rk-t[data-show="1"] [data-col="1"], .rk-t[data-show="2"] [data-col="2"], .rk-t[data-show="3"] [data-col="3"],
  .rk-t[data-show="4"] [data-col="4"], .rk-t[data-show="5"] [data-col="5"], .rk-t[data-show="6"] [data-col="6"], .rk-t[data-show="7"] [data-col="7"],
  .rk-t[data-show="8"] [data-col="8"], .rk-t[data-show="9"] [data-col="9"] { display: table-cell; }
  .rk-t thead th { text-align: left; }
  .rk-blurb { margin-left: 0; max-width: none; }
  .rk-t td { text-align: right; }
  .sv-row { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; }
  .sv-row-im { width: 44px; height: 44px; grid-row: 1 / span 2; align-self: start; }
  .sv-row-t { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .sv-row-p { grid-column: 3; grid-row: 1; }
  .sv-row .sv-add { grid-column: 3; grid-row: 2; min-width: 72px; }
  /* store top: the address is on every page already, and the trust notes wrap */
  .sv-hero .sv-ip { display: none; }
  .sv-trust li { white-space: normal; }
}

/* ------------------------------------------------------------------ 4.0 phone pass (375 px): no sideways scroll, 44 px taps */
@media (max-width: 600px) {
  .tm-bar, .tm-filters { min-width: 0; max-width: 100%; }
  .tm-filters .tm-f { flex: none; min-height: 44px; }
}
@media (max-width: 760px) {
  .crumbs a, nav.crumbs a, .bc a { display: inline-block; padding: 11px 0; }
  .more3 { min-height: 44px; }
  .linkbtn { min-height: 36px; padding: 6px 8px; }
  .heads3.small .head { width: 34px; height: 34px; }
}

/* ------------------------------------------------------------------ 4.1 events calendar (month grid on /events). Flat: borders only. */
.mc-head { flex-wrap: wrap; gap: 10px; }
.mc-nav { gap: 6px; flex-wrap: wrap; align-items: center; }
.mc-nav b { min-width: 150px; text-align: center; font-size: 15px; }
.mc-nav .flip { transform: scaleX(-1); }
.mc-long { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mcal .wd { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 6px 4px; }
.mcal .mc { min-height: 92px; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.mcal .mc:hover { border-color: var(--line2); }
.mcal .mc:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.mcal .mc.out { opacity: .5; }
.mcal .mc.today .dn { background: var(--acc); color: var(--acc-ink); }
.mcal .mc.sel { border-color: var(--acc); }
.mcal .dn { font-size: 12.5px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.mc-ev { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; min-width: 0; color: var(--text2); }
.mc-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-ev i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.mc-ev.k-blue i { background: var(--blue); } .mc-ev.k-red i { background: var(--red); } .mc-ev.k-purple i { background: var(--purple); }
.mc-ev.k-gold i { background: var(--gold); } .mc-ev.k-green i { background: var(--acc); } .mc-ev.k-amber i { background: var(--amber); }
.mc-more { font-size: 11.5px; color: var(--muted); }
.mc-day { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.mc-day h3 { margin: 0 0 6px; font-size: 16px; }
.ev-meta .pill { display: inline-flex; align-items: center; gap: 4px; }
.ev-meta .pill .ic { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .mcal .mc { min-height: 54px; padding: 4px; align-items: center; }
  .mc-ev span, .mc-more { display: none; }
  .mc-ev { justify-content: center; }
  .mcal .wd { padding: 0 0 4px; text-align: center; font-size: 10.5px; }
}
.pill.purple { color: var(--purple); border-color: var(--line2); }

/* 4.1 weekly contest card on /events */
.ct-name { margin: 2px 0 4px; font-size: 19px; }
.ct-board { list-style: none; margin: 10px 0 4px; padding: 0; }
.ct-board li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ct-board li:last-child { border-bottom: 0; }
.ct-board .rk { color: var(--muted); font-weight: 700; }
.ct-board li:nth-child(-n+3) .rk { color: var(--amber); }
.ct-board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-prizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ct-last { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }

/* ------------------------------------------------------------------ 10/05 store v2: two stores, welcome step, Plus card, review */
.sv-bar { position: sticky; top: var(--topH, 64px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.sv-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(var(--fg), .05); border: 1px solid var(--line); }
.sv-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 9px; color: var(--text2); font-weight: 750; font-size: 15px; text-decoration: none !important; transition: background .15s, color .15s; }
.sv-tabs a img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; opacity: .75; }
.sv-tabs a:hover { color: var(--text); }
.sv-tabs a.on { background: var(--sv-acc); color: var(--btn-ink); }
.sv-tabs a.on img { opacity: 1; }
.sv-bar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sv-bar-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sv-bar-who .head { width: 32px; height: 32px; border-radius: 7px; image-rendering: pixelated; background: var(--card3); flex: none; }
.sv-bar-who small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1; }
.sv-bar-who b { display: block; font-size: 14.5px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.sv-who-av.sm { width: 32px; height: 32px; border-radius: 8px; }
.sv-bar-cart { gap: 6px; }
.sv-bar-cart b { font-variant-numeric: tabular-nums; }
.sv-both { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--acc2); }
.sv-both .ic { width: 14px; height: 14px; stroke-width: 3; }
.sv-cat-b { max-width: 70ch; margin-top: 4px; }
.sv-other { color: var(--text2); }

/* cards */
.sv-card.grid .sv-art { aspect-ratio: 1 / 1; }
.sv-card.grid .sv-blurb { -webkit-line-clamp: 2; font-size: 13px; }
@media (min-width: 1100px) { .sv-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* rank table note */
.rk-sub { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--text2); margin: 0 0 12px; }
.rk-sub .ic { width: 16px; height: 16px; color: var(--sv-acc); flex: none; margin-top: 2px; }
.rk-sub b { color: var(--text); }

/* Plus add-on */
.sv-plus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; border-color: color-mix(in srgb, var(--sv-acc) 40%, var(--line)); }
.sv-plus h3 { font-size: 22px; font-weight: 850; margin: 6px 0 4px; }
.sv-plus-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--sv-acc) 16%, transparent); color: var(--sv-acc2); }
.sv-plus-tag .ic { width: 12px; height: 12px; stroke-width: 3; }
.sv-plus-perks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; }
.sv-plus-perks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.sv-plus-perks .ic { width: 16px; height: 16px; color: var(--acc); stroke-width: 3; flex: none; margin-top: 2px; }
.sv-plus-perks b { color: var(--text); }
.sv-plus-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.sv-plus-o { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); }
.sv-plus-o.best { border-color: color-mix(in srgb, var(--sv-money) 60%, transparent); }
.sv-plus-d { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); }
.sv-plus-p { font-size: 20px; font-weight: 900; color: var(--sv-money); font-variant-numeric: tabular-nums; }
.sv-plus-o small { font-size: 12px; color: var(--muted); min-height: 2.4em; }
.sv-plus-o .sv-add { margin-top: 4px; justify-content: center; }
@media (min-width: 900px) { .sv-plus { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .sv-plus-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* welcome step: header, scrolling body, footer that stays put */
.sv-gate .sv-ov-box { max-width: 560px; max-height: min(92vh, 860px); }
.sv-gate .sv-x { top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; }
.sv-gate-in { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
.sv-gate-h { display: flex; align-items: center; gap: 14px; padding: 18px 60px 14px 20px; border-bottom: 1px solid var(--line); flex: none; }
.sv-gate-h .head { width: 48px; height: 48px; border-radius: 10px; image-rendering: pixelated; background: var(--card3); flex: none; }
.sv-gate-h .eyebrow { font-size: 11px; }
.sv-gate-h h2 { font-size: 21px; font-weight: 850; line-height: 1.15; margin: 2px 0; }
.sv-gate-h p { margin: 0; }
.sv-gate-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 6px; display: flex; flex-direction: column; gap: 18px; }
.sv-gate-f { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.sv-gate-f .bad:empty { display: none; }
.sv-gstep { display: flex; gap: 12px; align-items: flex-start; }
.sv-gstep > .grow { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.sv-gn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 900; font-size: 12.5px; border: 1px solid color-mix(in srgb, var(--sv-acc, var(--acc)) 45%, transparent); color: var(--sv-acc2, var(--acc2)); margin-top: 1px; }
.sv-gl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sv-gl { font-weight: 800; font-size: 15px; color: var(--text); }
.sv-gl em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.sv-gate .input.lg { height: 46px; font-size: 16.5px; font-weight: 650; }
.sv-gate .input { height: 42px; }
.sv-gate .seg { align-self: center; }
.sv-gate .sv-seg.sm button { padding: 4px 10px; font-size: 12.5px; }
.sv-gsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-gside { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card2); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; transition: border-color .15s; }
.sv-gside:hover { border-color: color-mix(in srgb, var(--sv-acc, var(--acc)) 55%, transparent); }
.sv-gside.on { border-color: var(--sv-acc, var(--acc)); }
.sv-gside-im { display: block; aspect-ratio: 16 / 9; background: rgba(var(--fg), .04); overflow: hidden; border-bottom: 1px solid var(--line); }
.sv-gside-im img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sv-gside-t { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.sv-gside-t b { font-size: 16px; font-weight: 850; }
.sv-gside-t small { font-size: 12.5px; color: var(--text2); line-height: 1.35; }
.sv-gside-ck { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sv-acc, var(--acc)); color: var(--btn-ink); opacity: 0; transition: opacity .15s; }
.sv-gside-ck .ic { width: 14px; height: 14px; stroke-width: 3; }
.sv-gside.on .sv-gside-ck { opacity: 1; }
#svGInfo.ok, #svGCi.ok { color: var(--acc); } #svGInfo.warn, .sv-gate .warn { color: var(--amber); } #svGInfo.bad, .sv-gate .bad { color: var(--red); }
.sv-gate .tiny { margin: 0; }
.sv-gate .tiny .ic { width: 14px; height: 14px; vertical-align: -2px; }
.sv-gate [hidden] { display: none !important; }
.sv-gcr { display: inline-flex; align-items: center; gap: 6px; }
.sv-gcr img { width: 20px; height: 20px; border-radius: 5px; }
.sv-gskip { align-self: center; color: var(--text2); font-size: 13.5px; }
.sv-gtip { text-align: center; padding-bottom: 6px; }

/* scrollbars in every store window, in the site's colours */
.sv-ov :is(.sv-gate-body, .sv-wm-in, .sv-bd-list, .sv-pm-scroll, .sv-ov-box) { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.sv-ov ::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-ov ::-webkit-scrollbar-track { background: transparent; }
.sv-ov ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 3px solid var(--card); }
.sv-ov ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--sv-acc, var(--acc)) 55%, var(--line2)); }
.sv-ov ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* basket review */
.sv-srv { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; border: 1px solid var(--line2); color: var(--text2); }
.sv-srv.srv-survival { border-color: color-mix(in srgb, var(--acc) 45%, transparent); color: var(--acc2); }
.sv-srv.srv-skyblock { border-color: color-mix(in srgb, var(--blue) 50%, transparent); color: var(--blue); }
.sv-creator { border: 1.5px solid color-mix(in srgb, var(--sv-money, var(--gold)) 55%, transparent); background: color-mix(in srgb, var(--sv-money, var(--gold)) 7%, transparent); gap: 10px; }
.sv-creator.on { border-color: var(--green-line); background: var(--green-soft); flex-direction: row; align-items: center; justify-content: space-between; }
.sv-cr-h { display: flex; gap: 10px; align-items: flex-start; }
.sv-cr-h > .ic { width: 18px; height: 18px; color: var(--sv-money, var(--gold)); flex: none; margin-top: 2px; }
.sv-creator.on .sv-cr-h > .ic { color: var(--acc); }
.sv-cr-h b { display: block; font-size: 14.5px; }
.sv-cr-h small { display: block; font-size: 12.5px; color: var(--text2); }
@media (max-width: 640px) {
  .sv-bar { padding: 6px; gap: 6px; }
  .sv-tabs { flex: 1 1 100%; }
  .sv-tabs a { flex: 1; justify-content: center; padding: 6px 8px; font-size: 14.5px; }
  .sv-tabs a img { width: 22px; height: 22px; }
  .sv-bar-r { flex: 1 1 100%; justify-content: space-between; }
  .sv-bar-who b { max-width: 12ch; }
  .sv-gsides { gap: 8px; }
  .sv-gside-t small { display: none; }
  .sv-gate-h h2 { font-size: 18px; }
  .sv-gate-h { padding: 14px 56px 12px 16px; } .sv-gate-body { padding: 14px 16px 4px; } .sv-gate-f { padding: 10px 16px 12px; }
  .sv-gside-im { aspect-ratio: 16 / 10; }
  .sv-plus-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859.98px) { .sv-bar { position: static; } }   /* phones: the category chips are the sticky row */
.sv-catsec { scroll-margin-top: calc(var(--topH, 64px) + 70px); }
.sv-bar-r .btn.ghost { margin-left: auto; }

/* 10/05 store v2b: roomier store page, cleaner product window, rank table picture */
body:has(main .sv) .wrap { max-width: 1400px; }
@media (min-width: 860px) { .sv-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; } }
@media (min-width: 1180px) { .sv-grid.g3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .sv-feat-row { gap: 18px; } }
.sv-card.grid { border-radius: 16px; }
.sv-card.grid .sv-art { padding: 0; background: var(--card2); border-bottom: 1px solid var(--line); }
.sv-card.grid .sv-art img, .sv-feat .sv-art img { filter: none; }
.sv-card.grid:hover .sv-art img { transform: scale(1.03); }
.sv-card.grid .sv-info { padding: 12px 14px 14px; gap: 6px; }
.sv-card.grid .sv-info h3 { font-size: 16px; }
.sv-card.grid .sv-blurb { color: var(--muted); min-height: 2.7em; }
.sv-card.grid .sv-buy { padding-top: 6px; }
.sv-feat .sv-art { padding: 0; background: var(--card2); border-bottom: 1px solid var(--line); }

/* product window */
@media (min-width: 860px) {
  .sv-pm .sv-ov-box { max-width: 1180px; }
  .sv-pm-in { height: min(780px, 90vh); }
  .sv-pm-art { width: 42%; background: var(--card2); border-right: 1px solid var(--line); }
  .sv-pm-art { display: grid; place-items: center; padding: 28px; }
  .sv-pm-art > img { max-width: 460px; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: none; border-radius: 14px; }
  .sv-pm-scroll { padding: 28px 32px 14px; }
  .sv-pm-foot { padding: 14px 32px 18px; }
}
.sv-pm-t { font-size: 28px; line-height: 1.1; }
.sv-pm-price b { font-size: 28px; }
.sv-lead { font-size: 16.5px; color: var(--text); font-weight: 600; margin: 4px 0 12px; }
.sv-desc { text-align: left; }
.sv-desc [style*="text-align"] { text-align: left !important; }
.sv-desc h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 18px 0 8px; }
.sv-desc ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.sv-desc ul li { position: relative; padding-left: 22px; }
.sv-desc ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--sv-acc, var(--acc)); }
.sv-desc hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.sv-dnote { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); font-size: 14px; }
.sv-dnote > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 4px; }
.sv-dnote p { margin: 0 0 6px; } .sv-dnote p:last-child { margin: 0; }
.sv-pm-scroll { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* rank table corner picture (hidden until the image exists) */
.rk-t .rk-corner { position: relative; vertical-align: middle; padding: 12px; }
.rk-art { display: block; width: 100%; max-width: 230px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; }
.rk-art[data-failed] { display: none; }
@media (max-width: 859.98px) { .rk-art { display: none; } }