/* Emergency Backup — THE CLUBHOUSE's own styles (js/hockey/): the crest, the rink, the line board, the game sheet, the
   trade desk, the race. Loaded after the frame's three stylesheets and never instead of them: everything here is a class
   the frame does not have. Colours come from the club on screen (--head, --accent, --team) as the rest of the frame's do. */
:root { --ice: #9fd0ee; --red: #d62828; --blue: #2f6fd6; }

/* ---- marks ---- */
.crest { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex: none; border: 2px solid var(--ring, #fff); box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.28); vertical-align: middle; }
.crest b { font-size: 12px; font-weight: 800; letter-spacing: .3px; line-height: 1; }
.crest.big { width: 84px; height: 84px; border-width: 4px; box-shadow: 0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 3px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.5), 0 0 28px color-mix(in srgb, var(--accent) 40%, transparent); }
.crest.big b { font-size: 23px; }
.crest.lgm { background: #13233f; color: #fff; --ring: #5aa9e6; }
.ctx-emblem { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.ctx-info { display: flex; flex-wrap: wrap; gap: 3px 18px; margin-top: 5px; font-size: 13px; font-weight: 600; color: #e6e6ea; }
.ctx-info span { white-space: nowrap; } .ctx-info em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--muted); margin-right: 6px; }
.ctx-info a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.3); }
.menu-btn .dot { background: #5aa9e6; }
.h-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.legend { font-size: 12px; margin-top: 8px; } .mt0 { margin-top: 8px; margin-bottom: 0; }
.cl { display: inline-block; margin-left: 5px; font-size: 10px; font-weight: 800; color: #111; background: var(--good); border-radius: 3px; padding: 0 4px; vertical-align: 1px; }
.cl.p { background: var(--gold); } .cl.e { background: #5d6470; color: #ddd; }
.form { display: inline-flex; gap: 2px; vertical-align: middle; } .form i { font-style: normal; font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: #111; padding: 0 2px; }
.form .W { background: var(--good); } .form .L { background: var(--bad); } .form .O { background: var(--warn); }
a.res { font-weight: 700; white-space: nowrap; } a.res b { display: inline-block; min-width: 14px; } a.res.good { color: var(--good); } a.res.bad { color: var(--bad); } a.res.warn { color: var(--warn); } a.res:hover { filter: brightness(1.25); }
.va { color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-block; min-width: 17px; }
tr.po td { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.hc-r { margin-top: 6px; gap: 5px; flex-wrap: wrap; } .hc-r .lbl { font-size: 9.5px; }
svg.ic { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- small numbers in a row ---- */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.kpis.k3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis.k4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: #232629; border: 1px solid #000; border-top: 2px solid color-mix(in srgb, var(--head) 85%, transparent); border-radius: 6px; padding: 8px 10px; text-align: center; min-width: 0; }
.kpi b { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi > span { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .6px; } .kpi small { display: block; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--accent) 75%, #fff); }
.card .kpi { background: #1a1d20; }
.meter { margin: 2px 0 10px; } .meter .track { height: 12px; border-radius: 6px; } .meter .track > i { border-radius: 6px; } .meter span { display: block; margin-top: 4px; font-size: 13px; }
.capbar { position: relative; height: 12px; border-radius: 6px; background: #15181b; overflow: hidden; min-width: 120px; }
.capbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--good) 70%, #000), var(--good)); border-radius: 6px; } .capbar i.tight { background: linear-gradient(90deg, #a9871a, var(--warn)); } .capbar i.over { background: var(--bad); }
.capbar u { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #5d6470 0 4px, #3a4046 4px 8px); }
td.capc { min-width: 170px; } .capnum { margin-top: 6px; font-size: 13px; }

/* ---- the dashboard's panels ---- */
.srow.rs, .hrow.rs { grid-template-columns: minmax(0, 1fr) 32px 38px 46px; } .srow.rs { padding: 2.5px 8px; font-size: 13.5px; } .srow.dimr { opacity: .6; }
.nrow.sb { font-weight: 600; } .nrow.sb .w { color: #fff; font-weight: 800; } .nrow.sb .tb { margin-right: 4px; } .nrow.unread b, .mrow.unread b { color: var(--accent); }
.nrow.mineg { background: color-mix(in srgb, var(--team) 24%, transparent); } .nrow.nw .when { min-width: 40px; }
.nx { padding: 2px 12px 10px; } .nx-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; } .nx-mid { text-align: center; } .nx-mid b { display: block; font-size: 17px; letter-spacing: 1px; color: var(--accent); } .nx-mid span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.nx-names { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; } .nx-names a { color: #fff; font-weight: 800; font-size: 14px; text-align: center; }
.cmp { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; padding: 3px 0; border-top: 1px solid #2c3135; font-size: 14px; } .cmp b:last-child { text-align: right; } .cmp span { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--muted); } .cmp.wide { grid-template-columns: 84px minmax(0, 1fr) 84px; padding: 5px 0; font-size: 16px; }
.nx-foot { margin-top: 7px; font-size: 12.5px; color: #cfd3d7; line-height: 1.45; }
.gkrow { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #2c3135; } .gkrow b { display: block; font-size: 15px; } .gkrow small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .4px; } .gkrow div + div { text-align: center; }
.calm { font-size: 15px; letter-spacing: .5px; margin: 0 6px; } .cday.away { background: var(--panel); } .cday .res { font-size: 12px; }
.card.pad0c { padding: 12px 0 0; } .card.pad0c > h3 { padding: 0 12px; } .card.pad0c .tablewrap { border-radius: 0 0 6px 6px; }

/* ---- the roster report ---- */
.issue { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #2c3135; font-size: 14px; } .issue:last-child { border-bottom: 0; }
.issue i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 3px; background: var(--warn); color: #111; flex: none; min-width: 66px; text-align: center; } .issue.lv2 i { background: var(--bad); } .issue.ok i { background: var(--good); }
.setrow.s2 { grid-template-columns: minmax(0, 1fr) auto; } .setrow.s3 { grid-template-columns: 110px 250px minmax(0, 1fr); }

/* ---- the rink ---- */
svg.rink { width: 100%; height: auto; display: block; }
.rk-ice { fill: #17222c; stroke: #5d7384; stroke-width: 2.5; } .rk-blue { stroke: var(--blue); stroke-width: 3.5; fill: none; } .rk-blue.thin { stroke-width: 1.4; } .rk-centre { stroke: var(--red); stroke-width: 3.5; } .rk-goal { stroke: var(--red); stroke-width: 1.2; opacity: .8; }
.rk-red { stroke: var(--red); stroke-width: 1.3; fill: none; opacity: .85; } .rk-dot { fill: var(--red); } .rk-cdot { fill: var(--blue); } .rk-crease { fill: color-mix(in srgb, var(--blue) 35%, transparent); stroke: var(--red); stroke-width: 1; } .rk-net { fill: none; stroke: #9aa7b1; stroke-width: 1.2; }
.tok circle { stroke-width: 2; } .tok text { font-size: 9.5px; font-weight: 800; text-anchor: middle; font-family: var(--font); } .tok .nm { fill: #f1f1f2; font-size: 8.5px; paint-order: stroke; stroke: #0a0c0e; stroke-width: 2.5px; } .tok .ov { fill: #aab4bc; font-size: 6.5px; font-weight: 700; paint-order: stroke; stroke: #0a0c0e; stroke-width: 2px; }
.tok.hurt circle { stroke: var(--bad); stroke-dasharray: 3 2; } .tok.empty circle { fill: none; stroke: #5d6470; stroke-dasharray: 3 2; } .tok.empty text { fill: #7d858c; } svg.rink a:hover .tok circle { filter: brightness(1.3); }

/* ---- the line board ---- */
.pickbar { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-left: 4px solid var(--accent); border-radius: 5px; padding: 8px 14px; margin-bottom: 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pickbar.idle { background: var(--panel); border-left-color: var(--head); color: #d9dde0; }
.lnboard { background: var(--panel); border-radius: 6px; padding: 4px 12px 12px; }
.ln-head { display: grid; grid-template-columns: minmax(0, 1fr) 70px 64px; gap: 8px; margin: 12px 0 6px; padding: 0 2px 4px; border-bottom: 2px solid color-mix(in srgb, var(--head) 85%, transparent); font-size: 12px; font-weight: 800; letter-spacing: .6px; color: #a9a9ae; } .ln-head span + span { text-align: center; font-size: 10px; }
.ln-row { display: grid; grid-template-columns: 26px repeat(3, minmax(0, 1fr)) 70px 64px; gap: 8px; align-items: stretch; margin-bottom: 6px; } .ln-row.pair { grid-template-columns: 26px repeat(2, minmax(0, 1fr)) minmax(0, 1fr) 70px 64px; } .ln-row.pair .ln-s { grid-column: 5; } .ln-row.pair .ln-r { grid-column: 6; }
.ln-n { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--muted); border-radius: 4px; } a.ln-n:hover { background: var(--head); color: #fff; } .ln-row.on .ln-n { background: var(--accent); color: #111; }
.ln-s, .ln-r { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); } .ln-r .g { font-size: 15px; min-width: 36px; padding: 2px 4px; }
.seat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 8px; align-items: center; background: #262c31; border: 1.5px solid #000; border-left: 4px solid color-mix(in srgb, var(--head) 90%, #fff); border-radius: 5px; padding: 6px 9px 6px 30px; min-height: 48px; min-width: 0; }
.seat > i { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: #cfd6da; background: rgba(0,0,0,.28); writing-mode: vertical-rl; transform: rotate(180deg); }
.seat > b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .seat > b em { font-style: normal; color: var(--muted); font-size: 11.5px; margin-right: 6px; } .seat > b u { text-decoration: none; font-size: 9.5px; color: var(--warn); margin-left: 5px; border: 1px solid var(--warn); border-radius: 3px; padding: 0 3px; }
.seat > .g { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; } .seat > span:last-child { grid-column: 1; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.can { cursor: pointer; } .seat.can:hover { background: #303840; } .seat.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, #262c31); box-shadow: 0 0 0 1px var(--accent); } .seat.target { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 70%, #000); }
.seat.hurt { border-left-color: var(--bad); background: #33201f; } .seat.empty { border-style: dashed; border-color: #5d6470; background: #1b1f22; } .seat.dropover, .brow.dropover { outline: 2px solid var(--accent); } .seat.dragging, .brow.dragging { opacity: .4; }
.brow { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13.5px; border-bottom: 1px solid #2c3135; } .brow[data-ui], .brow[data-clearui] { cursor: pointer; } .brow[data-ui]:hover { background: #2d3338; } .brow.sel { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .brow.hurt { opacity: .55; } .brow .st { min-width: 54px; text-align: right; color: var(--muted); font-size: 12px; }
.unit { background: var(--panel); border-radius: 6px; padding: 10px 12px 12px; margin-bottom: 12px; } .unit > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; letter-spacing: .3px; color: #c9c9cc; } .unit > header span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.unit-seats { display: grid; gap: 8px; } .unit-seats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .unit-seats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .unit-seats.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gkcard { display: flex; gap: 16px; align-items: center; background: var(--panel); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; border-left: 4px solid var(--head); } .gkcard.hurt { border-left-color: var(--bad); } .gkcard h4 { margin: 0; font-size: 18px; } .gkcard .ctx-face { width: 70px; height: 80px; } .gkcard .ctx-face svg { width: 62px; height: 67px; }
.gkstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .gkstats div { background: #1a1d20; border-radius: 4px; padding: 4px 6px; text-align: center; } .gkstats b { display: block; font-size: 16px; } .gkstats span { font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.gkr { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 8px; } .gkr .lbl { font-size: 9.5px; } .gkact { display: flex; flex-direction: column; gap: 6px; flex: none; }
.srow2.tac { grid-template-columns: minmax(200px, 1.1fr) minmax(140px, 1fr) minmax(0, 1.6fr); padding: 9px 0; } .srow2.tac b.acc { display: block; font-size: 13px; }
.card.staff > i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .7px; color: var(--accent); } .card.staff h4 { margin: 2px 0 10px; font-size: 20px; }

/* ---- league pages ---- */
.card.club { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-left: 4px solid var(--head); } .card.club b { display: block; font-size: 15px; } .card.club span { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card.club .grow { min-width: 0; }
.race { display: grid; grid-template-columns: 22px 220px minmax(120px, 1fr) 38px minmax(0, 250px); gap: 10px; align-items: center; padding: 4px 0; font-size: 13.5px; } .race .rk { color: var(--muted); text-align: right; } .race > b { text-align: right; font-size: 15px; } .race .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .race .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race.me { background: color-mix(in srgb, var(--team) 24%, transparent); border-radius: 4px; } .race.cut { border-bottom: 2px solid var(--warn); padding-bottom: 6px; margin-bottom: 4px; }
.race-bar { position: relative; height: 14px; background: #15181b; border-radius: 3px; } .race-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; border-right: 2px solid rgba(255,255,255,.75); } .race-bar u { position: absolute; top: 3px; bottom: 3px; background: rgba(255,255,255,.14); } .race-bar s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warn); }
.assets { max-height: calc(100vh - 360px); min-height: 300px; } .as-h { position: sticky; top: 0; z-index: 1; background: var(--head); padding: 3px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; }
.asset { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13.5px; border-bottom: 1px solid #2c3135; cursor: pointer; color: inherit; } .asset:hover { background: #2d3338; color: inherit; } .asset > i { width: 14px; height: 14px; border: 1.5px solid #77787d; border-radius: 3px; flex: none; }
.asset.on { background: color-mix(in srgb, var(--accent) 20%, transparent); } .asset.on > i { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px #1e2226; } .asset.off { opacity: .45; cursor: default; } .asset .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.deal .nrow { padding: 3px 2px; } .card.deal .empty { padding: 4px 2px; } .tgauge { margin: 12px 0 8px; } .tgauge .track { height: 10px; } .tgauge .row { margin-top: 3px; font-size: 11.5px; } .why1 { margin: 0 0 5px; font-size: 13.5px; }
.card.offer { margin-bottom: 12px; border-left: 4px solid var(--accent); } .card.offer h3 { margin: 0; text-transform: none; font-size: 15px; color: #fff; }
.bk-col h3 { margin-bottom: 2px; color: var(--accent); } .bk-team .sd { min-width: 16px; font-size: 11px; font-weight: 800; } .bk-ser .lbl { font-size: 9.5px; }
.champ .big { color: var(--gold); } .aw-w { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.aw-row { display: flex; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid #2c3135; } .aw-row:last-child { border-bottom: 0; } .aw-row > svg { width: 30px; height: 30px; flex: none; } .aw-i svg { width: 18px; height: 18px; vertical-align: -4px; } .cups svg { width: 16px; height: 16px; vertical-align: -3px; }
.card.clock .big { margin: 2px 0 4px; }

/* ---- a player ---- */
.rbar.tot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 800; }
.offer-form select { width: 100%; height: 28px; } .card.talk { border-left: 4px solid var(--accent); }

/* ---- a game ---- */
.gsum { background: linear-gradient(180deg, color-mix(in srgb, var(--head) 38%, var(--panel)), var(--panel)); border-radius: 6px; padding: 14px 16px 12px; }
.scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 12px; }
.sl-t { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; opacity: .78; } .sl-t.win { opacity: 1; } .sl-t b { font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; } .sl-t span { font-size: 12.5px; color: var(--muted); font-weight: 700; } .sl-t.win b { color: #fff; }
.sl-m { display: flex; flex-direction: column; align-items: center; gap: 4px; } .sl-m .scorebig b { font-size: 58px; min-width: 50px; text-align: center; } .sl-m .at { font-size: 30px; color: var(--muted); }
.gsum .linescore { background: rgba(0,0,0,.25); max-width: 760px; margin: 0 auto; }
.per-h { background: color-mix(in srgb, var(--head) 80%, transparent); padding: 3px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; margin-top: 2px; }
.grow1 { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 14px; border-bottom: 1px solid #2c3135; } .grow1 .when { min-width: 42px; color: var(--muted); font-weight: 700; font-size: 12.5px; flex: none; } .grow1 .tb { margin: 0; }
.odds { font-size: 11.5px; font-weight: 800; color: var(--ice); border: 1px solid color-mix(in srgb, var(--ice) 45%, transparent); border-radius: 3px; padding: 0 5px; white-space: nowrap; flex: none; } .sc { font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; flex: none; }
.stars3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 10px 8px; }
.star3 { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #232629; border-radius: 6px; padding: 8px 6px; text-align: center; min-width: 0; } .star3:hover { background: #2d3338; color: inherit; } .star3 > i { font-style: normal; color: var(--gold); font-size: 13px; letter-spacing: 1px; height: 16px; }
.star3 .ctx-face { width: 60px; height: 68px; } .star3 .ctx-face svg { width: 53px; height: 57px; } .star3 .ctx-face i, .star3 .ctx-face b { font-size: 10px; } .star3 > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .star3 > span { font-size: 11.5px; color: var(--muted); } .star3 > em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); }
.tbar { display: grid; grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 10px; align-items: center; padding: 5px 0; } .tbar > b { font-size: 16px; } .tbar > b:last-child { text-align: right; } .tbar span { display: block; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--muted); margin-bottom: 3px; }
.tbar-t { display: flex; height: 7px; border-radius: 4px; overflow: hidden; gap: 2px; } .tbar-t i { display: block; height: 100%; } .tbar.txt { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-top: 1px solid #2c3135; } .tbar.txt span { margin: 0; }
.panel.h3s > header > span { flex: 1; } .panel.h3s > header > span:nth-child(2) { text-align: center; } .panel.h3s > header > span:nth-child(3) { text-align: right; }
.pbp-row { display: flex; align-items: center; gap: 8px; padding: 3.5px 10px; font-size: 13.5px; border-bottom: 1px solid #262b2f; } .pbp-row .when { min-width: 42px; color: var(--muted); font-weight: 700; font-size: 12px; flex: none; } .pbp-row .tb { margin: 0; }
.pbp-row.goal { background: color-mix(in srgb, var(--good) 11%, transparent); font-size: 14.5px; padding: 6px 10px; } .pbp-row.k-PEN, .pbp-row.k-PULL, .pbp-row.k-CHANGE { background: color-mix(in srgb, var(--warn) 7%, transparent); } .pbp-row.k-BLOCK { color: #b9bfc4; } .pbp-row.k-OT, .pbp-row.k-SO { font-weight: 700; }
td.oddsc { min-width: 220px; } .oddsrow { position: relative; height: 16px; background: #15181b; border-radius: 3px; } .oddsrow i { position: absolute; left: 0; top: 0; bottom: 0; background: #47637a; border-radius: 3px; } .oddsrow i.mid { background: #3f8fb8; } .oddsrow i.hi { background: var(--ice); } .oddsrow b { position: absolute; right: 6px; top: 0; font-size: 11.5px; line-height: 16px; text-shadow: 0 0 3px #000; }

/* ---- the office ---- */
.nrow.task b { color: var(--warn); } .nrow.yr.done { opacity: .5; } .nrow.yr.next { color: var(--accent); font-weight: 800; } .nrow.yr .when { min-width: 18px; }
.mailg { align-items: stretch; } .mlist { max-height: calc(100vh - 300px); overflow: auto; } textarea.notebook { min-height: 340px; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; }
.studio-by { margin-bottom: 14px; }

/* ---- the start screen: the title is the brand's picture, shadows and all ---- */
.mm-logo.art { filter: none; margin-bottom: 1.2vh; } .mm-logo.art img { height: clamp(96px, 19vh, 190px); max-width: 94vw; object-fit: contain; }
.wz-team em { font-style: normal; font-size: 12.5px; font-weight: 800; opacity: .8; min-width: 22px; text-align: right; } .wz-team .grow { overflow: hidden; text-overflow: ellipsis; }
.wz-line input[type=text] { min-width: 0; } .wz-sum dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1500px) { .race { grid-template-columns: 22px 180px minmax(100px, 1fr) 38px; } .race .muted:last-child { display: none; } .gkstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1250px) { .unit-seats.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } .scoreline { gap: 10px; } .sl-m .scorebig b { font-size: 44px; } .ctx-info { display: none; } }

/* the bracket: three columns of the same width */
.bracket { align-items: center; } .bracket .bk-col { flex: 1 1 0; min-width: 0; } .bk-games { line-height: 1.5; }

/* ---- the second pass: meet the team, the offseason centre ---- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.pcard { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: 6px; padding: 9px 12px; border-left: 4px solid var(--head); min-width: 0; } .pcard:hover { background: var(--panel2); color: inherit; } .pcard.hurt { border-left-color: var(--bad); }
.pcard .ctx-face { width: 62px; height: 72px; } .pcard .ctx-face svg { width: 55px; height: 60px; } .pcard .ctx-face i, .pcard .ctx-face b { font-size: 10px; }
.pcard .grow b { display: block; font-size: 15.5px; } .pcard .grow span { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-r { text-align: center; flex: none; } .pc-r .g { font-size: 18px; min-width: 38px; padding: 2px 4px; } .pc-r small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.ostep { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #2c3135; color: inherit; } .ostep:hover { background: var(--panel2); color: inherit; } .ostep > i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #33393e; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; flex: none; }
.ostep b { display: block; font-size: 15px; } .ostep span { display: block; font-size: 12.5px; color: var(--muted); } .ostep.done { opacity: .5; } .ostep.done > i { background: var(--good); color: #111; } .ostep.next > i { background: var(--accent); color: #111; } .ostep.next b { color: var(--accent); } .ostep em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: #111; background: var(--accent); border-radius: 3px; padding: 1px 7px; }
.card.ach { margin: 0; } .card.ach b { font-size: 15px; } .card.ach .muted { margin-top: 4px; font-size: 12.5px; }

/* ---- game day: a game being watched; the organisation; shopping a player ---- */
.wprog { height: 5px; background: #15181b; border-radius: 3px; margin: 2px auto 10px; max-width: 760px; overflow: hidden; } .wprog i { display: block; height: 100%; background: var(--accent); transition: width .15s linear; }
.wctl { justify-content: center; flex-wrap: wrap; gap: 6px; } .wctl .lbl { margin: 0 2px 0 10px; } .wctl .grow { flex: 0 0 12px; }
.pbp-row.fresh { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .pbp-row.goal.fresh { background: color-mix(in srgb, var(--good) 22%, transparent); }
.orow { display: flex; align-items: center; gap: 7px; padding: 3px 10px; font-size: 13.5px; border-bottom: 1px solid #262b2f; } .orow .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orow.farm { color: #cfd3d7; } .orow.hurt { opacity: .6; } .orow .dim { min-width: 18px; text-align: right; font-size: 12px; }
.oline { background: color-mix(in srgb, var(--head) 70%, transparent); padding: 2px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; margin-top: 4px; }
.track.devt { height: 9px; min-width: 110px; overflow: visible; } .track.devt > i { background: var(--accent); } .track.devt > s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold); }
.shoprow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #2c3135; font-size: 13.5px; } .shoprow > a:first-child { min-width: 210px; flex: none; } .shoprow.no { opacity: .6; } .shoprow .grow { min-width: 0; }
textarea.pnote { min-height: 110px; }

/* ---- the third pass: the scouts' estimates, the bench during a game, rows that fit ---- */
.g.fog { font-style: italic; border-bottom: 1px dotted currentColor; border-radius: 3px 3px 0 0; } .dots { color: var(--accent); font-size: 9px; letter-spacing: 1.5px; vertical-align: 1px; } .dots i { color: #4a4f55; font-style: normal; }
.c6 { grid-template-columns: 18px minmax(0, 1fr) 26px 24px 24px 24px 32px; } .srow.c6 { padding: 2.5px 8px; font-size: 13.5px; } .srow.c6 .rk { color: var(--muted); font-size: 12px; } .srow.c6.cut { border-bottom: 2px solid var(--accent); } .srow.c6.me { background: color-mix(in srgb, var(--team) 26%, transparent); }
.lead-say { font-size: 17px; font-weight: 700; margin: 0 0 10px; } .card.talk .srow2.tac { padding: 6px 0; grid-template-columns: minmax(170px, 1fr) minmax(120px, 1fr) minmax(0, 1.5fr); }
.setrow input[type=number] { width: 110px; height: 26px; }
@media (max-width: 1750px) { .grid.boxg { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a league read from a data file: its clubs' own marks in place of the drawn badge (hockey/kit.js K.crest, K.badge) ---------- */
.crest.logo { background: none !important; border: 0; box-shadow: none; border-radius: 0; overflow: hidden; }
.crest.logo img { height: 124%; width: auto; max-width: none; flex: none; }
.crest.logo.big { box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.tbl { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 19px; margin-right: 7px; overflow: hidden; vertical-align: -5px; flex: none; }
.tbl img { height: 128%; width: auto; max-width: none; flex: none; }
.tbl.sm { width: 23px; height: 16px; margin-right: 5px; vertical-align: -4px; }
.tbl.big { width: 58px; height: 58px; margin: 0; }
.menu-btn .tbl { margin: 0 9px 0 0; }
/* standings by division and conference; a bracket of four rounds */
.conf-h { margin: 14px 2px 6px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); } .stand > .conf-h:first-child { margin-top: 2px; }
.stand { gap: 10px; } tr.inrow td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.bracket.r4 .bk-ser { padding: 5px 8px; } .bracket.r4 .bk-col { gap: 8px; } .bracket.r4 .bk-games { font-size: 11px; }
/* the start screen: the Classic edition says so; a league with divisions lists its clubs under them */
.mm-logo.art { position: relative; } .mm-edition { position: absolute; right: 2%; bottom: 4%; margin: 0 !important; padding: 3px 12px; border-radius: 4px; background: var(--or, #f47a20); color: #111 !important; font-size: 13px !important; font-weight: 900; letter-spacing: 4px !important; }
.wz-cols.divs .wz-team { font-size: 14.5px; padding: 1.5px 8px; } .wz-cols.divs h5 { margin: 7px 0 2px 8px; font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase; } .wz-cols.divs h6 { margin-left: 8px; }
.wz-team .tbl { width: 34px; height: 22px; margin: 0; } .mm-crest .tbl { width: 54px; height: 40px; margin: 0; }
.lbl.dv { padding: 5px 8px 2px; font-size: 10px; letter-spacing: .8px; color: var(--accent); }
.mm-drift { margin: 2px 6px 10px; padding: 7px 10px; border-left: 3px solid var(--warn, #f3d12b); background: rgba(243, 209, 43, .09); border-radius: 3px; font-size: 12.5px; line-height: 1.4; color: #e9edf2; }
/* ---------- reading (after soccer's scripts/audit/contrast.js): the frame's quiet grey is under 3 to 1 on a panel and on a club-tinted page, and a dimmed row drops under it again ---------- */
:root { --dim: #8d8f97; }
tr.dimrow td { opacity: .82; } .shoprow.no { opacity: .85; } .ach { opacity: .8; } .ach.got { opacity: 1; }
.btn.hi[disabled], button.btn.hi:disabled { opacity: 1; filter: saturate(.55) brightness(.8); }
.tag.blu { background: #7fbcec; color: #111; }
.oldclub { color: var(--muted); font-style: italic; }
/* the trophies beside a name in the header (after Ten-Day's .cups and Franchise Tag's .honors): a drawn cup for each title, big enough
   to count, lit, with a glint that runs across them now and then; each opens the season it was won. --hon is the height of a cup. */
:root { --hon: 52px; }
.hcups { display: flex; align-items: flex-end; gap: 6px; flex: none; height: var(--hon); margin: -9px 0 -5px 2px; }
.hcup { position: relative; display: block; line-height: 0; transition: transform .12s ease; }
.hcup img { height: var(--hon); width: auto; display: block; filter: brightness(1.16) contrast(1.06) drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 7px rgba(255, 214, 110, .42)); }
.hcup::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat; background-size: 320% 100%; background-position: 135% 0; -webkit-mask: var(--cup) center / contain no-repeat; mask: var(--cup) center / contain no-repeat; mix-blend-mode: screen; animation: hglint 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes hglint { 0%, 72% { background-position: 135% 0; } 100% { background-position: -35% 0; } }
.hcup:hover { transform: translateY(-4px) scale(1.07); } .hcup:hover img { filter: brightness(1.34) contrast(1.06) drop-shadow(0 5px 7px rgba(0, 0, 0, .75)) drop-shadow(0 0 13px rgba(255, 220, 120, .8)); }
.hmore { align-self: center; margin: 0 5px 0 2px; padding: 4px 9px; border-radius: 4px; font-size: 15px; font-weight: 800; letter-spacing: .3px; color: #201800; background: linear-gradient(180deg, #ffe680, #d4a514); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .hmore:hover { color: #201800; filter: brightness(1.12); }
.haw { display: flex; align-items: center; align-self: center; transition: transform .12s ease; } .haw:hover { transform: translateY(-3px); } .haw svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) drop-shadow(0 0 5px rgba(255, 214, 110, .3)); } .haw b { font-size: 14px; font-weight: 800; color: var(--gold); margin-left: -3px; }
@media (prefers-reduced-motion: reduce) { .hcup::after { animation: none; } .hcup, .haw { transition: none; } }
@media (max-width: 1250px) { :root { --hon: 42px; } }
/* the trophies as they are (the real league only: js/hockey/real/trophies/): a picture wherever a drawn trophy would stand */
img.tart { height: 30px; width: auto; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.aw-row > img.tart { height: 48px; width: 42px; object-fit: contain; }
.aw-i img.tart { height: 24px; }
.haw img.tart { height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) drop-shadow(0 0 6px rgba(255, 214, 110, .35)); }
.cups img.tart { height: 26px; margin-left: 1px; }
.ped .art img.tart { height: 96px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.co-chip img.tart { height: 18px; margin: -4px 6px -3px -3px; filter: none; }
/* the dressing-room rail (HISTORY > NUMBERS): sweaters hanging in number order, after Named Later's .jsy-* rail and Ten-Day's.
   The rail is each card's top edge, so it runs unbroken across a row; a sweater swings in when the page opens and sways under the pointer. */
.jsy-head { display: flex; align-items: baseline; gap: 14px; } .jsy-head h2 { margin: 0; }
.jsy-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 26px 0; margin-top: 12px; padding: 0 6px; }
.jsy { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 7px; text-decoration: none; color: inherit; }
.jsy::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 3px; background: linear-gradient(180deg, #d5dae2, #7b8492 60%, #4b525e); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.jsy svg.sweater { width: 118px; height: auto; display: block; transform-origin: 50% 5px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .55)); animation: jsy-in .5s ease-out both; animation-delay: calc(var(--i, 0) * .03s); }
@keyframes jsy-in { 0% { transform: rotate(7deg) translateY(-6px); opacity: 0; } 60% { transform: rotate(-3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.jsy b { margin-top: 5px; font-size: 13.5px; font-weight: 700; text-align: center; line-height: 1.15; } .jsy span { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .3px; text-align: center; }
a.jsy:hover svg.sweater { transform: rotate(-5deg) translateY(1px); } a.jsy:hover b { color: var(--accent); }
.jsy-rail.wall { gap: 22px 0; } .jsy.ret { padding-top: 0; } .jsy.ret::before { display: none; }
.jsy-frame { padding: 9px 9px 5px; border-radius: 5px; border: 3px solid #c9a24a; background: linear-gradient(180deg, #2b2218, #17120c); box-shadow: inset 0 0 0 2px #6f571f, inset 0 0 18px rgba(0, 0, 0, .6), 0 8px 14px rgba(0, 0, 0, .5); }
.jsy.ret svg.sweater { width: 98px; transform-origin: 50% 50%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); } .jsy.ret:hover .jsy-frame { box-shadow: inset 0 0 0 2px #6f571f, inset 0 0 18px rgba(0, 0, 0, .5), 0 8px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 214, 110, .35); }
.jsy.ret b { color: #ffd872; }
.jsy-rail.small { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 20px 0; } .jsy-rail.small svg.sweater { width: 84px; } .jsy-rail.small .jsy b { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .jsy svg.sweater { animation: none; transition: none; } }
/* ==== THE PARITY PAGES (js/hockey/screens/parity.js). Every class here begins pz- so that none meets the frame's own. ==== */
/* two players side by side */
.pz-top { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.pz-who { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 8px; background: linear-gradient(100deg, color-mix(in srgb, var(--ca) 34%, var(--panel)), var(--panel) 75%); border-left: 4px solid var(--ca); min-width: 0; }
.pz-who.r { flex-direction: row-reverse; text-align: right; background: linear-gradient(260deg, color-mix(in srgb, var(--cb) 34%, var(--panel)), var(--panel) 75%); border-left: 0; border-right: 4px solid var(--cb); }
.pz-who .grow b { display: block; font-size: 21px; font-weight: 900; line-height: 1.15; } .pz-who .grow i { display: block; font-style: normal; font-size: 13px; color: var(--muted); } .pz-who .g.box { font-size: 22px; padding: 6px 10px; }
.pz-who .ctx-face { width: 62px; height: 72px; flex: none; } .pz-who .ctx-face svg { width: 55px; height: 60px; } .pz-who .ctx-face i, .pz-who .ctx-face b { font-size: 10px; }
.pz-swap { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--panel); font-size: 22px; font-weight: 900; color: var(--muted); } a.pz-swap:hover { color: #fff; text-decoration: none; background: var(--head); }
.pz-picks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .pz-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .pz-pick > span { width: 170px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.pz-vs { display: grid; grid-template-columns: 64px minmax(0, 1fr) 132px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 4.5px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, .05); } .pz-vs:last-child { border-bottom: 0; }
.pz-vs > span { text-align: center; color: var(--muted); font-size: 12.5px; } .pz-vs > b { font-weight: 700; color: #c9ced6; white-space: nowrap; } .pz-vs > b:last-child { text-align: right; } .pz-vs > b.pz-up { color: #fff; font-weight: 900; }
.pz-bar { height: 8px; border-radius: 4px; background: #15181b; position: relative; overflow: hidden; } .pz-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; } .pz-bar.l i { right: 0; background: var(--ca); } .pz-bar.r i { left: 0; background: var(--cb); }
.pz-big { font-size: 24px; font-weight: 900; margin: 0 0 6px; }
/* the final score of your own game */
.pz-back { position: fixed; inset: 0; z-index: 8900; display: grid; place-items: center; padding: 24px; background: rgba(4, 6, 8, .74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pz-fs { width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--panel); border-radius: 10px; border-top: 4px solid var(--c); box-shadow: 0 24px 80px rgba(0, 0, 0, .7); padding: 16px 20px 14px; }
.pz-fs-k { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--c); text-align: center; }
.pz-fs-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 10px 0 12px; } .pz-fs-at { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); }
.pz-fs-side { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: #1b1e22; min-width: 0; opacity: .78; } .pz-fs-side.win { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.pz-fs-side .grow b { display: block; font-size: 18px; font-weight: 900; line-height: 1.15; } .pz-fs-side .grow b a { color: inherit; } .pz-fs-side .grow i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); } .pz-fs-side u { text-decoration: none; font-size: 42px; font-weight: 900; line-height: 1; }
.pz-fs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; } .pz-fs h4 { margin: 10px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--muted); } .pz-fs-cols > div > h4:first-child { margin-top: 0; }
.pz-fs-per { width: 100%; border-collapse: collapse; font-size: 13.5px; } .pz-fs-per th { font-size: 10.5px; color: var(--muted); font-weight: 800; padding: 2px 6px; text-align: center; } .pz-fs-per td { padding: 4px 6px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .07); } .pz-fs-per td:first-child { text-align: left; font-weight: 800; }
.pz-fs-goal { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .05); } .pz-fs-goal > span:first-child { flex: none; width: 74px; color: var(--muted); font-size: 12px; } .pz-fs-goal em { flex: none; width: 34px; font-style: normal; font-weight: 800; font-size: 11.5px; } .pz-fs-goal i { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--c); }
.pz-fs-star { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13.5px; } .pz-fs-star > span:first-child { flex: none; width: 40px; color: #ffd872; font-size: 12px; font-weight: 800; }
.pz-fs-stat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 4px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, .05); } .pz-fs-stat span { color: var(--muted); font-size: 12.5px; } .pz-fs-stat b:last-child { text-align: right; }
.pz-fs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); } .pz-fs-off { margin-left: auto; font-size: 12px; color: var(--muted); cursor: pointer; } .pz-fs-off:hover { color: #fff; }
@media (max-width: 900px) { .pz-fs-cols { grid-template-columns: 1fr; } }
/* the Hall of Fame as a room: a dark wall, bronze plaques */
.pz-hall { margin-top: 14px; padding: 18px 18px 22px; border-radius: 10px; background: radial-gradient(ellipse at 50% -10%, rgba(255, 216, 114, .13), transparent 60%), linear-gradient(180deg, #1c1611, #100d0a); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .25), inset 0 0 60px rgba(0, 0, 0, .55); }
.pz-hof-h { margin: 14px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 2.4px; color: #d9b65c; text-align: center; } .pz-hof-h:first-child { margin-top: 0; }
.pz-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
a.pz-plq { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 12px; border-radius: 6px; text-align: center; color: #2a1c08; background: linear-gradient(160deg, #e2c27a 0%, #b88a3a 38%, #8f6626 72%, #c9a251 100%); box-shadow: inset 0 0 0 2px rgba(255, 236, 180, .45), inset 0 0 0 4px rgba(74, 48, 12, .55), 0 6px 14px rgba(0, 0, 0, .55); transition: transform .14s ease, box-shadow .14s ease; }
a.pz-plq:hover { text-decoration: none; color: #2a1c08; transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgba(255, 236, 180, .6), inset 0 0 0 4px rgba(74, 48, 12, .55), 0 12px 22px rgba(0, 0, 0, .6); }
.pz-plq-art { height: 84px; display: flex; align-items: center; justify-content: center; } .pz-plq-art svg { width: 78px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); } .pz-plq-mono { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; background: rgba(42, 28, 8, .22); box-shadow: inset 0 0 0 2px rgba(42, 28, 8, .4); }
.pz-plq b { font-size: 15.5px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; line-height: 1.15; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); } .pz-plq span { font-size: 12px; font-weight: 700; } .pz-plq i { font-style: normal; font-size: 12px; margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(42, 28, 8, .35); width: 86%; }
.pz-plq u { text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .pz-plq em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: 1px; margin-top: 2px; }
.pz-hof-empty { margin-top: 14px; padding: 46px 20px; border-radius: 10px; text-align: center; background: linear-gradient(180deg, #1c1611, #100d0a); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .25); } .pz-hof-empty b { display: block; font-size: 15px; letter-spacing: 3px; color: #d9b65c; } .pz-hof-empty span { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { a.pz-plq { transition: none; } }
/* a player's ACTIONS menu (frame.js EB.playerActions): his name on top, groups that open to the side, and what cannot apply to him
   shown greyed with the reason (after Franchise Tag's) */
.menu.pact .menu-list { overflow: visible; max-height: none; min-width: 280px; left: auto; right: 0; }
.pa-name { display: block; padding: 6px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 800; color: #fff; } .pa-name small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.pa-sub { position: relative; } .pa-sub > a.pa-h { cursor: default; } .pa-sub > a.pa-h em { font-style: normal; color: var(--muted); }
.pa-sub > .pa-list { display: none; position: absolute; top: -7px; right: calc(100% + 2px); min-width: 268px; padding: 6px; border-radius: 6px; background: #323236; border: 1px solid #111; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); z-index: 72; }
.pa-sub:hover > .pa-list, .pa-sub:focus-within > .pa-list { display: block; } .pa-sub:hover > a.pa-h { background: var(--head); color: #fff; }
.pa-list hr, .menu.pact .menu-list hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 5px 4px; }
.pa-off { display: block; padding: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #8d8f97; cursor: default; white-space: nowrap; }
.pa-off small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8d8f97; white-space: normal; max-width: 250px; line-height: 1.3; }
.pa-off.pa-now { color: #e3e5e9; } .pa-off.pa-now::before { content: '✓ '; color: var(--accent); }
.pa-tick { color: var(--accent); font-weight: 800; } .pa-off.pa-where { color: #e3e5e9; font-weight: 800; letter-spacing: .5px; } .pa-list a em, .pa-off em { font-style: normal; color: var(--muted); margin-left: auto; padding-left: 14px; } .pa-off.pa-now { display: flex; }
.pa-off.pa-now small { display: inline; margin: 0 0 0 8px; }
/* SHOP A PLAYER as a market */
.pz-shop { display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.pz-rlist { max-height: 420px; overflow: auto; } a.pz-rost { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 13px; color: #cfd4dc; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, .05); } a.pz-rost:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
a.pz-rost.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; } a.pz-rost b { width: 34px; text-align: right; font-size: 12.5px; } a.pz-rost .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; } .pz-mbar > span { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted); margin-right: 4px; } .pz-mbar > span.sp { margin-left: 14px; }
.pz-market { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pz-mk { display: flex; flex-direction: column; background: var(--panel); border-radius: 8px; border-top: 4px solid var(--c); padding: 10px 12px 10px; min-width: 0; } .pz-mk.best { box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(0, 0, 0, .45); }
.pz-mk header { display: flex; align-items: center; gap: 10px; } .pz-mk header b { display: block; font-size: 15.5px; font-weight: 900; line-height: 1.15; } .pz-mk header b a { color: inherit; } .pz-mk header i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.pz-mk header em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .8px; padding: 2px 6px; border-radius: 3px; background: #3a4048; white-space: nowrap; } .pz-mk header em.win { background: #2f7d4f; color: #fff; } .pz-mk header em.build { background: #4a5a8a; color: #fff; }
.pz-mk-fit { margin: 8px 0 6px; font-size: 13px; color: #cfd4dc; } .pz-mk-get { flex: 1; } .pz-mk-get > div { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, .06); } .pz-mk-get .pos.pk { background: #5a4a1a; color: #ffd872; }
.pz-mk-cmp { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .pz-mk-cmp b { color: #fff; } .pz-mk-bar { position: relative; height: 8px; border-radius: 4px; background: #15181b; margin-bottom: 4px; } .pz-mk-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); } .pz-mk-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; }
.pz-mk footer { display: flex; align-items: center; gap: 6px; margin-top: 10px; justify-content: flex-end; } .pz-mk-best { margin-right: auto; font-size: 10.5px; font-weight: 900; letter-spacing: 1px; color: var(--gold); }
.pz-mk-no { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #1b1e22; font-size: 13px; color: var(--muted); line-height: 1.9; } .pz-mk-no b { color: #cfd4dc; font-weight: 700; margin-right: 6px; }
@media (max-width: 1100px) { .pz-shop { grid-template-columns: 1fr; } }
/* a drawn face (js/facegen.js) in the place the helmet used to be: the sticker stands free of the box, his position and number on tabs at its foot */
.ctx-face.fg { position: relative; width: 104px; height: 112px; background: none; border: 0; overflow: visible; justify-content: center; }
.ctx-face.fg svg { width: 108px; height: 132px; margin-top: -6px; }
.ctx-face.fg i, .ctx-face.fg b { position: absolute; top: auto; bottom: -2px; padding: 1px 6px; border-radius: 3px; background: rgba(12, 14, 18, .88); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .3px; } .ctx-face.fg i { left: 0; font-style: normal; } .ctx-face.fg b { left: auto; right: 0; }
.star3 .ctx-face.fg { width: 66px; height: 72px; } .star3 .ctx-face.fg svg { width: 70px; height: 86px; margin-top: -4px; }
.pcard .ctx-face.fg, .pz-who .ctx-face.fg { width: 66px; height: 74px; } .pcard .ctx-face.fg svg, .pz-who .ctx-face.fg svg { width: 70px; height: 86px; margin-top: -4px; }
.star3 .ctx-face.fg i, .star3 .ctx-face.fg b, .pcard .ctx-face.fg i, .pcard .ctx-face.fg b, .pz-who .ctx-face.fg i, .pz-who .ctx-face.fg b { font-size: 9.5px; padding: 0 4px; }