/* Landing64 — the CS 1.6 TAB scoreboard (js/tabboard.js). Colours are the game's own, not the page tokens:
   orange 255,140,0 (title, column names, separator) · T 255,64,64 · CT 153,204,255 · panel black at 60% alpha. */
.l64-tabboard { max-width: 1040px; margin: 0 auto 28px; }

/* the "game": the board floats over a dimmed in-game frame, 12.5% in from each side like the real one */
.tb-screen { position: relative; padding: clamp(18px, 3.2vw, 40px) 12.5%; border: 1px solid var(--l64-line-strong); border-radius: var(--l64-radius); overflow: hidden;
	background: linear-gradient(rgba(4, 6, 10, .5), rgba(4, 6, 10, .66)), url(../assets/hero.webp) center 38% / cover no-repeat, #0b0f15; }
.tb-sim { position: absolute; right: 10px; bottom: 8px; font: 700 10px/1 var(--l64-mono); letter-spacing: .2em; color: rgba(255, 255, 255, .55); }

.tb-board { --tb-or: rgb(255, 140, 0); --tb-t: rgb(255, 64, 64); --tb-ct: rgb(153, 204, 255);
	background: rgba(0, 0, 0, .6); border-radius: 6px; padding: 8px 15px 10px;
	font: 400 13px/1 Verdana, Tahoma, "DejaVu Sans", sans-serif; color: #fff; -webkit-font-smoothing: antialiased; transition: opacity .11s linear; }
.tb-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 58px 58px 64px; align-items: center; gap: 0 10px; height: 17px; white-space: nowrap; }
.tb-row > span { overflow: hidden; text-overflow: ellipsis; }
.tb-num, .tb-attr { text-align: right; }
.tb-head { height: 22px; color: var(--tb-or); }
.tb-head .tb-name { font-weight: 700; }
.tb-sep { height: 1px; background: var(--tb-or); margin: 6px -15px 6px; }
.tb-team { height: 20px; margin-top: 2px; font-weight: 700; }
.tb-head .tb-name, .tb-team .tb-name { grid-column: span 2; }   /* titles may run over the empty attribute column */
.tb-head .tb-attr, .tb-team .tb-attr { display: none; }
.tb-dash { font-style: normal; margin: 0 .9em; }
.tb-line { height: 1px; margin: 2px -15px 4px; }
.tb-gap { height: 12px; }
.tb-t { color: var(--tb-t); } .tb-line.tb-t { background: var(--tb-t); }
.tb-ct { color: var(--tb-ct); } .tb-line.tb-ct { background: var(--tb-ct); }
.tb-pl .tb-name { padding-left: 10px; }          /* players are drawn indented under their team */
.tb-me { position: relative; background: rgba(255, 255, 255, .06); margin: 0 -15px; padding: 0 15px; }  /* the game's 15/255 white band */
/* page-level callout (not part of the game UI): a gold YOU tag outside the board, so the pinned row is easy to follow */
.tb-me::before { content: "YOU"; position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 3px 7px 3px 8px;
	background: var(--l64-gold); color: #120d02; font: 800 10px/1 var(--l64-mono); letter-spacing: .14em; clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); padding-right: 12px; }
.tb-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 7px; border-top: 1px solid rgba(255, 140, 0, .45); color: var(--tb-or); font-size: 11px; }

/* page flip: a short blink like the real redraw; your own row stays put and its band flashes */
.tb-board.flip .tb-pl:not(.tb-me) { opacity: 0; }
.tb-board.flipin .tb-pl:not(.tb-me) { animation: tb-in .3s ease both; }
.tb-board.flipin .tb-me { animation: tb-me .5s ease; }
@keyframes tb-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes tb-me { 0%, 30% { background: rgba(255, 255, 255, .26); } 100% { background: rgba(255, 255, 255, .06); } }

/* controls under the screen: a TAB keycap (click it) + page dots + hint */
.tb-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 16px; }
.tb-key { min-width: 92px; height: 46px; padding: 0 16px; border: 1px solid #3a4352; border-radius: var(--l64-radius); cursor: pointer;
	background: linear-gradient(#262d38, #171c24); box-shadow: 0 4px 0 #0a0d12, inset 0 1px 0 rgba(255, 255, 255, .1);
	font: 800 15px/1 var(--l64-mono); letter-spacing: .14em; color: #e9eef5; text-align: left; transition: border-color .2s, color .2s; }
.tb-key span::before { content: "\21B9"; margin-right: 8px; font-weight: 400; }
.tb-key:hover, .tb-key:focus-visible { border-color: var(--l64-gold); color: var(--l64-gold); outline: none; }
.tb-key.down { animation: tb-press .26s ease; }
@keyframes tb-press { 0% { transform: none; } 35% { transform: translateY(4px); box-shadow: 0 0 0 #0a0d12, inset 0 1px 0 rgba(255, 255, 255, .1); } 100% { transform: none; } }
.tb-pager { display: flex; gap: 6px; }
.tb-pager i { width: 26px; height: 4px; background: var(--l64-line-strong); transition: background .25s; }
.tb-pager i.on { background: var(--l64-gold); }
.tb-hint { margin: 0; font: 600 12px/1.5 var(--l64-mono); letter-spacing: .08em; color: var(--l64-soft); text-transform: uppercase; }
.tb-hint b { color: var(--l64-gold); margin-right: 4px; }

@media (max-width: 720px) {
	.tb-screen { padding: 14px 8px 26px; }
	.tb-board { padding: 6px 8px 8px; font-size: 11px; }
	.tb-row { grid-template-columns: minmax(0, 1fr) 34px 36px 40px 44px; gap: 0 4px; height: 16px; }
	.tb-head .tb-name { font-size: 10px; }
	.tb-head .tb-num { font-size: 10px; }
	.tb-sep, .tb-line { margin-left: -8px; margin-right: -8px; }
	.tb-me { margin: 0 -8px; padding: 0 8px; background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--l64-gold); }
	.tb-me::before { display: none; }
	.tb-dash { margin: 0 .4em; }
	.tb-pl .tb-name { padding-left: 6px; }
	.tb-foot { font-size: 10px; }
	.tb-hint span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tb-key.down, .tb-board.flipin .tb-pl, .tb-board.flipin .tb-me { animation: none; } }