/* Sikt Bench page (/bench) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/bench/fonts/fraunces.woff2) format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url(/bench/fonts/vt323.woff2) format("woff2"); }
.sb { max-width: 1120px; display: grid; gap: 24px; padding-bottom: 32px; }
.sb > * { min-width: 0; }
.sb-title { position: relative; padding: 110px 0 12px; text-align: center; overflow: hidden; }
.sb-title img { position: absolute; top: 76px; left: 50%; width: 230px; height: auto; margin-left: 300px; opacity: .9; filter: drop-shadow(0 0 16px rgba(57,255,20,.35)); }
.sb-title h1 { margin: 0; font: 900 clamp(58px, 11vw, 132px)/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; color: var(--text); letter-spacing: -.01em; text-shadow: 0 0 34px rgba(57,255,20,.3); }
.sb-title p { margin: 10px 0 0; font: 34px/1 "VT323", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); text-shadow: 0 0 12px rgba(57,255,20,.5); }
.sb-title p span { color: var(--text); text-shadow: none; }
.sb-card { background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; padding: 30px clamp(18px, 4vw, 40px); }
.sb h2 { font: 800 clamp(28px, 4vw, 44px)/1.1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 144; margin: 0; color: var(--text); }
.sb-sub { margin: 6px 0 20px; color: var(--text-2); font-size: clamp(15px, 2vw, 19px); }
.sb-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sb-row { display: grid; grid-template-columns: 24px 30px 170px 1fr 86px; align-items: center; gap: 14px; }
.sb-n { color: var(--text-3); font-size: 20px; }
.sb-m { font: 800 22px "Fraunces", Georgia, serif; color: var(--text); white-space: nowrap; }
.sb-t { height: 24px; background: var(--s2); border-radius: 4px; overflow: hidden; }
.sb-t i { display: block; height: 100%; border-radius: 4px; }
.sb-v { font: 900 32px "Fraunces", Georgia, serif; color: var(--text); text-align: right; }
.sb-lead { color: var(--acc); }
.sb-has-c .sb-row { grid-template-columns: 24px 30px 170px 1fr 86px 150px; }
.sb-c { font: 700 26px "Fraunces", Georgia, serif; color: var(--text-2); text-align: right; }
.sb-heads { display: grid; grid-template-columns: 1fr 86px 150px; gap: 14px; align-items: end; margin: 0 0 6px; font-size: 12px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.sb-scroll { overflow-x: auto; }
.sb-grid { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: 17px; }
.sb-grid th { font-weight: 500; color: var(--text-2); padding: 6px; text-align: center; white-space: nowrap; }
.sb-grid tbody th { text-align: left; color: var(--text); padding-right: 14px; }
.sb-grid td { background: var(--s2); color: var(--text); text-align: center; padding: 12px 6px; border-radius: 6px; min-width: 50px; }
.sb-grid thead td { background: none; }
.sb-grid td.sb-win { background: var(--acc); color: #05070a; font-weight: 600; }
.sb-about { max-width: 760px; }
.sb-about h2 { font-size: 26px; margin-bottom: 10px; }
.sb-about p { color: var(--text-2); margin: 0 0 12px; } .sb-about b { color: var(--text); }
@media (max-width: 900px) { .sb-title img { width: 130px; left: auto; right: 0; margin-left: 0; top: 68px; opacity: .6; } }
@media (max-width: 620px) {
  .sb-row { grid-template-columns: 18px 24px 1fr 62px; gap: 8px 10px; }
  .sb-has-c .sb-row { grid-template-columns: 18px 24px 1fr 62px; }
  .sb-has-c .sb-t { grid-column: 1 / 4; }
  .sb-has-c .sb-c { grid-column: 4; grid-row: 2; font-size: 15px; font-weight: 600; line-height: 1; }
  .sb-heads { display: block; font-size: 10px; letter-spacing: .04em; } .sb-heads span { display: block; }
  .sb-heads span:nth-child(2) { font-size: 12px; color: var(--text-2); }
  .sb-row img { width: 24px; height: 24px; } .sb-m { font-size: 19px; } .sb-v { font-size: 26px; }
  .sb-t { grid-column: 1 / -1; grid-row: 2; height: 14px; }
  .sb-grid { font-size: 14px; border-spacing: 3px; } .sb-grid td { min-width: 38px; padding: 10px 2px; }
  .sb-grid tbody th { white-space: normal; min-width: 0; width: 30%; font-size: 13px; padding: 4px 6px 4px 0; }
  .sb-grid thead th { font-size: 12px; padding: 4px 1px; }
}
@media (max-width: 420px) {
  .sb-grid { font-size: 13px; border-spacing: 2px; table-layout: fixed; } .sb-grid td { min-width: 0; padding: 9px 0; }
  .sb-grid thead td { width: 27%; }
  .sb-grid tbody th { width: 27%; font-size: 12px; padding: 4px 4px 4px 0; }
  .sb-grid thead th { font-size: 11px; padding: 4px 0; }
}
