/* Game pieces on top of the MSB design system: sign-in, sub-navigation,
   the Blitz clock, the lobby, boards, the trophy cabinet and the admin desk. */

a.msb-nav-link { display: inline-block; }
a.msb-tabbar-item { display: block; }

/* Sign-in */
.auth-shell { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; padding: 2.25rem 2rem; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: .25rem; font-weight: 700; }
.auth-subtitle { color: var(--msb-text-muted); margin-bottom: 1.5rem; font-size: .92rem; }
.alert-info { background: var(--msb-mint-tint); color: var(--msb-ink-mid); font-size: .88rem; }

/* Sub-navigation inside a page (Markets / Portfolio / History) */
.subnav { display: inline-flex; background: var(--msb-surface); border: 1px solid var(--msb-border); border-radius: 999px; padding: 3px; gap: 2px; box-shadow: var(--msb-shadow); }
.subnav button { border: 0; background: none; border-radius: 999px; padding: .35rem .9rem; font-weight: 600; font-size: .86rem; color: var(--msb-text-muted); }
.subnav button.on { background: var(--msb-ink); color: #fff; }
.page-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.season-tag { font-size: .85rem; color: var(--msb-text-muted); }
.season-tag b { color: var(--msb-text); }

/* Blitz clock bar */
.blitz-bar { display: flex; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; background: linear-gradient(150deg, var(--msb-ink) 0%, var(--msb-ink-mid) 65%, var(--msb-ink-dark) 100%); color: #fff; border-radius: var(--msb-radius); padding: .9rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--msb-shadow); }
.blitz-bar .clock { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 6rem; line-height: 1; }
.blitz-bar .clock.low { color: #ffb4ab; }
.blitz-bar .lbl { color: rgba(255,255,255,.7); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.blitz-bar .val { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.blitz-bar .val.up { color: var(--msb-mint); }
.blitz-bar .val.down { color: #ffb4ab; }
.blitz-bar .progress-line { flex: 1 1 140px; height: 6px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.blitz-bar .progress-line i { display: block; height: 100%; background: var(--msb-mint); transition: width 1s linear; }
.pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill-ranked { background: var(--msb-mint); color: var(--msb-ink); }
.pill-practice { background: rgba(255,255,255,.14); color: #fff; }
.pill-muted { background: var(--msb-bg); color: var(--msb-text-muted); }
.pill-good { background: var(--msb-success-bg); color: var(--msb-success); }
.pill-bad { background: var(--msb-danger-bg); color: var(--msb-danger); }

/* Lobby */
.hero { position: relative; overflow: hidden; padding: 1.75rem; background: linear-gradient(150deg, var(--msb-ink) 0%, var(--msb-ink-mid) 65%, var(--msb-ink-dark) 100%); color: #fff; border: 0; }
.hero h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; }
.hero p { color: rgba(255,255,255,.78); margin-bottom: 1.1rem; max-width: 46rem; }
.hero .bg-icon { position: absolute; right: -1rem; top: -1.5rem; font-size: 9rem; color: rgba(255,255,255,.06); pointer-events: none; }
.hero .facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-bottom: 1.25rem; }
.hero .facts .k { color: var(--msb-mint); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero .facts .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-mint { background: var(--msb-mint); color: var(--msb-ink); border-color: var(--msb-mint); font-weight: 700; }
.btn-mint:hover, .btn-mint:disabled { background: #5fe6ad; border-color: #5fe6ad; color: var(--msb-ink); }
.btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--msb-bg); border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; }
.chip b { margin-right: .3rem; }
.hero .chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.hero .msg { color: #ffb4ab !important; }

/* Boards */
.board { width: 100%; font-size: .88rem; border-collapse: collapse; }
.board th { color: var(--msb-text-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; border-bottom: 1px solid var(--msb-border); text-align: right; }
.board td { padding: .5rem .5rem; border-bottom: 1px solid var(--msb-border); text-align: right; white-space: nowrap; }
.board th:nth-child(-n+2), .board td:nth-child(-n+2) { text-align: left; }
.board td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.board tr:last-child td { border-bottom: none; }
.board tr.me td { background: var(--msb-mint-tint); }
.board .rk { width: 2.2rem; font-weight: 700; color: var(--msb-text-muted); }
.board .rk.g { color: #c99a06; } .board .rk.s { color: #8c97a0; } .board .rk.b { color: #b0703a; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--msb-border); background: var(--msb-surface); border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; font-weight: 600; color: var(--msb-text-muted); }
.tabs button.on { background: var(--msb-ink); color: #fff; border-color: var(--msb-ink); }

/* Trophy cabinet */
.cabinet { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.trophy { border: 1px solid var(--msb-border); border-radius: var(--msb-radius-sm); padding: .85rem; display: flex; gap: .7rem; align-items: flex-start; background: var(--msb-surface); min-width: 0; }
.trophy .ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--msb-bg); color: var(--msb-text-muted); flex-shrink: 0; }
.trophy.won .ic { background: var(--msb-mint); color: var(--msb-ink); }
.trophy .t { font-weight: 700; font-size: .9rem; }
.trophy .d { color: var(--msb-text-muted); font-size: .76rem; line-height: 1.35; }
.trophy .n { font-size: .74rem; color: var(--msb-mint-action); font-weight: 700; margin-top: .2rem; }
.trophy:not(.won) .t { color: var(--msb-text-muted); }

/* Result */
.result-score { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }

/* Admin */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.stat { background: var(--msb-surface); border: 1px solid var(--msb-border); border-radius: var(--msb-radius-sm); padding: .75rem .9rem; box-shadow: var(--msb-shadow); min-width: 0; }
.stat .k { color: var(--msb-text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat .v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .s { color: var(--msb-text-muted); font-size: .75rem; }
.tbl td.wrap { white-space: normal; min-width: 12rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.25rem; }
.admin-nav a { border: 1px solid var(--msb-border); background: var(--msb-surface); border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; font-weight: 600; color: var(--msb-ink); text-decoration: none; }
.admin-nav a:hover { border-color: var(--msb-ink); }
.admin-section { scroll-margin-top: 1rem; margin-bottom: 1.25rem; }
.form-text-sm { font-size: .74rem; color: var(--msb-text-muted); }
.editrow td { background: var(--msb-bg); }
.tbl th.l, .tbl td.l, #co th:nth-child(2), #co td:nth-child(2), #players td:nth-child(2), #users td:nth-child(2) { text-align: left; }