/* Pick'em page. Builds on ../style.css. */

/* ---------- board ---------- */
.pk-board { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.pk-strip { display: flex; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--b-line); overflow: hidden; }
.ss-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; opacity: .72; transition: opacity .3s; }
.ss-group.cur { opacity: 1; }
.ss-lab { font: 700 9.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--b-dim); }
.ss-group.cur .ss-lab { color: var(--you); }
.ss-chips { display: flex; gap: 5px; }
.chip { display: flex; flex-direction: column; gap: 1px; min-width: 66px; padding: 5px 7px; border-radius: 7px; background: var(--b-panel); border: 1px solid var(--b-line); font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--b-dim); }
.chip span { display: flex; justify-content: space-between; gap: 6px; }
.chip span b { color: var(--b-text); font-weight: 600; }
.chip span.w { color: var(--b-text); }
.chip span.my { box-shadow: inset 2px 0 0 var(--you); padding-left: 4px; margin-left: -4px; }
.chip em { font-style: normal; font-size: 9px; color: var(--b-faint); }
.chip.live { border-color: rgba(255,69,69,.55); }
.chip.live em { color: var(--live); }
.chip.right { border-color: rgba(53,227,154,.45); }
.chip.wrong { border-color: rgba(255,90,110,.4); }

.pk-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; }
.pk-stage { position: relative; padding: 14px 18px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pk-stage-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.pk-stage-h b { font-size: 15px; font-weight: 800; }
.pk-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--b-dim); }
.pk-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px; }
.lg-mine { box-shadow: inset 3px 0 0 var(--you); background: color-mix(in srgb, var(--you) 16%, transparent); }
.lg-pool { background: var(--b-line); }
.pk-games { display: grid; gap: 10px; flex: 1; min-height: 0; align-content: start; }
.pk-games[data-n="8"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-content: stretch; }
.pk-games[data-n="3"] { align-content: center; }
.pk-games[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.pk-games[data-n="1"] { grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; }
.pk-games[data-n="1"] .gc { padding: 18px 20px; }
.pk-games[data-n="1"] .gc-row { font-size: 17px; padding: 8px 0; }
.pk-games[data-n="1"] .gc-row .sc { font-size: 30px; }
.pk-games[data-n="3"] .gc-row .sc { font-size: 24px; }

.gc { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; transition: border-color .3s; animation: lcIn .45s cubic-bezier(.2,.9,.3,1.1); }
.gc.live { border-color: color-mix(in srgb, var(--live) 45%, var(--b-line)); }
.gc-head { display: flex; justify-content: space-between; font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--b-dim); margin-bottom: 4px; }
.gc-clock { color: var(--live); }
.gc.final .gc-clock { color: var(--b-text); }
.gc-row { display: grid; grid-template-columns: 4px auto 1fr auto auto auto; gap: 7px; align-items: center; padding: 4px 6px 4px 0; border-radius: 6px; font-size: 13px; }
.gc-row i { height: 18px; border-radius: 2px; }
.gc-row .ab { font-weight: 800; letter-spacing: .02em; }
.gc-row .city { color: var(--b-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.gc-row .rec { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--b-faint); font-style: normal; }
.gc-row .pool { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--b-dim); min-width: 30px; text-align: right; }
.gc-row .sc { font: 600 20px 'IBM Plex Mono', monospace; min-width: 30px; text-align: right; }
.gc-row.mine { background: color-mix(in srgb, var(--you) 14%, transparent); box-shadow: inset 3px 0 0 var(--you); }
.gc-row.lost { opacity: .5; }
.gc-row.won .sc { color: var(--b-text); }
.gc-row.pop .sc { animation: pop .5s; }
.gc-bar { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; margin: 6px 0 4px; }
.gc-foot { font-size: 11.5px; color: var(--b-dim); line-height: 1.35; margin-top: auto; }
.gc-last { font: 500 11px 'IBM Plex Mono', monospace; color: var(--b-faint); margin: 2px 0 6px; min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-last b { color: var(--b-text); font-weight: 600; }
.gc-prog { height: 2px; background: var(--b-line); border-radius: 1px; margin-bottom: 8px; }
.gc-prog span { display: block; height: 100%; width: 0; background: var(--b-dim); border-radius: 1px; }
.gc.final .gc-prog span { background: var(--b-text); }
.gc-ls table { width: 100%; border-collapse: collapse; font: 500 11px 'IBM Plex Mono', monospace; color: var(--b-dim); }
.gc-ls th, .gc-ls td { padding: 3px 0; text-align: center; border-bottom: 1px solid var(--b-line); }
.gc-ls thead th { color: var(--b-faint); font-weight: 500; font-size: 10px; }
.gc-ls tbody th { text-align: left; color: var(--b-text); font-weight: 600; width: 22%; }
.gc-ls td.t { color: var(--b-text); font-weight: 600; }
.gc-ls td.fut { color: var(--b-faint); opacity: .5; }
.pk-games[data-n="3"] .gc-ls, .pk-games[data-n="1"] .gc-ls { margin: 6px 0 4px; }
.pk-games[data-n="1"] .gc-ls table { font-size: 13px; }
.gc-foot b { color: var(--b-text); }
.gc-foot .ok { color: var(--up); font-weight: 700; }
.gc-foot .no { color: var(--down); font-weight: 700; }
.gc-foot .vs { display: block; color: var(--b-faint); font-size: 10.5px; margin-top: 1px; }
.pk-board .shock, .pk-board .wbanner { z-index: 6; }

.pk-rail { overflow: hidden; }
.h2h { margin-top: 4px; padding: 12px; border: 1px solid var(--b-line); border-radius: 12px; background: var(--b-panel); }
.h2h-top { display: flex; justify-content: space-between; align-items: baseline; }
.h2h-top h4 { margin: 0 !important; }
.h2h-top span { font: 600 12px 'IBM Plex Mono', monospace; }
.h2h-score { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 2px; }
.h2h-score small { display: block; font-size: 11px; color: var(--b-dim); }
.h2h-score b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.h2h-score div:last-child { text-align: right; }
.h2h-vs { font-size: 11px; color: var(--b-faint); }
.h2h-sub { font-size: 11px; color: var(--b-faint); margin-bottom: 6px; }
.hd { display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--b-line); font-size: 12px; color: var(--b-dim); }
.hd b { color: var(--b-text); }
.hd em { font: 500 10.5px 'IBM Plex Mono', monospace; font-style: normal; color: var(--b-faint); }
.hd > span:last-child { text-align: right; font: 600 11px 'IBM Plex Mono', monospace; }
.hd .ok { color: var(--up); font-size: 13px; }
.hd .no { color: var(--down); font-size: 13px; }
.hd .lv { color: var(--live); }
.swap { margin-top: 12px; font-size: 12.5px; color: var(--b-dim); }
.swap h4 { margin-bottom: 4px !important; }
.swap b { color: var(--b-text); }
.swap a { display: inline-block; margin-top: 6px; color: var(--you); font-weight: 700; text-decoration: none; }
.pk-board[data-scoring="classic"] .gc-bar { display: none; }
.pk-board[data-scoring="classic"] .gc-row.mine { background: rgba(29,138,78,.08); box-shadow: inset 3px 0 0 #17160f; }
.pk-board[data-scoring="classic"] .lg-mine { box-shadow: inset 3px 0 0 #17160f; background: rgba(29,138,78,.12); }
.pk-board[data-scoring="classic"] .gc-foot .ok, .pk-board[data-scoring="classic"] .hd .ok { color: #1d8a4e; }
.pk-board[data-scoring="classic"] .gc-foot .no, .pk-board[data-scoring="classic"] .hd .no { color: #c8302c; }
.pk-board[data-scoring="classic"] .chip span.my { box-shadow: inset 2px 0 0 #17160f; }
.pk-board[data-scoring="classic"] .ss-group.cur .ss-lab { color: #8f5700; }
.pk-board[data-scoring="classic"] .swap a { color: #8f5700; }
.pk-board[data-scoring="classic"] .chip.right { border-color: rgba(29,138,78,.5); }
.pk-board[data-scoring="classic"] .chip.wrong { border-color: rgba(200,48,44,.45); }

/* ---------- scoring cards ---------- */
.mode-grid.three { grid-template-columns: repeat(3, 1fr); }
.mode-grid.three .mode li { font-size: 14.5px; }

/* ---------- pick sheet ---------- */
.pk-pick-wrap { grid-template-columns: 1fr 330px; }
.pk-sheet { background: var(--b-bg); color: var(--b-text); border-radius: 20px; padding: 18px 20px 20px; transition: background .4s; }
.pk-sheet .pick-tools div { display: flex; gap: 8px; align-items: center; }
.sheet-head, .sh-row { display: grid; grid-template-columns: 44px 1fr 86px 1fr 104px; gap: 10px; align-items: center; }
.sheet-head { font: 600 10px 'IBM Plex Mono', monospace; color: var(--b-faint); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0 8px; border-bottom: 1px solid var(--b-line); }
.sh-win { margin-top: 12px; font: 700 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--you); }
.sh-row { padding: 5px 0; border-bottom: 1px solid var(--b-line); }
.sh-row .rot { font: 500 11px 'IBM Plex Mono', monospace; color: var(--b-faint); }
.sh-row .ln { font: 600 11.5px 'IBM Plex Mono', monospace; color: var(--b-dim); text-align: center; }
.sh-row .lc { text-align: right; font: 600 12.5px 'IBM Plex Mono', monospace; }
.tb { appearance: none; display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 10px 6px 0; border-radius: 8px; border: 1px solid var(--b-line); background: var(--b-panel); color: var(--b-text); font: 600 13px Inter, sans-serif; cursor: pointer; overflow: hidden; text-align: left; }
.tb i { width: 4px; align-self: stretch; flex: none; }
.tb b { font-weight: 800; }
.tb span { color: var(--b-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tb em { font: 600 11px 'IBM Plex Mono', monospace; font-style: normal; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.07); }
.tb:hover:not(:disabled) { border-color: #3d4352; }
.tb.on { border-color: var(--you); background: color-mix(in srgb, var(--you) 14%, var(--b-panel)); }
.tb:disabled { cursor: default; }
.tb.lost { opacity: .45; }
.tb.on.won { border-color: var(--up); }
.tb.on.lost { border-color: var(--down); opacity: .7; }
.cf { appearance: none; width: 58px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--b-line); background: var(--b-panel); color: var(--b-text); font: 600 13px 'IBM Plex Mono', monospace; text-align: center; cursor: pointer; }
.cf-lock { font-weight: 600; }
.lc .ok { color: var(--up); }
.lc .no { color: var(--down); }
.pk-sheet[data-scoring="classic"] { --b-bg: #fbfaf6; --b-panel: #ffffff; --b-line: #e2ddd0; --b-text: #17160f; --b-dim: #6b675e; --b-faint: #a29d91; border: 1px solid var(--line); }
.pk-sheet[data-scoring="classic"] .tb { border-radius: 4px; }
.pk-sheet[data-scoring="classic"] .tb.on { border-color: #17160f; background: #fff; box-shadow: inset 0 0 0 1px #17160f; }
.pk-sheet[data-scoring="classic"] .sh-win { color: #8f5700; }
.pk-sheet[data-scoring="classic"] .lc .ok { color: #1d8a4e; }
.pk-sheet[data-scoring="classic"] .lc .no { color: #c8302c; }
.pk-sheet[data-scoring="classic"] .seg button.on { background: #17160f; color: #fbfaf6; }

/* ---------- league ---------- */
.h2h-sec { display: grid; grid-template-columns: .95fr 1.05fr; gap: 20px; align-items: start; }
.match { background: var(--b-bg); color: var(--b-text); border-radius: 20px; padding: 20px 22px; transition: background .4s; }
.mc-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--b-line); }
.mc-head b { font-size: 16px; font-weight: 800; }
.mc-head span { font-size: 12px; color: var(--b-dim); }
.mc-score { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.mc-score small { display: block; font-size: 12px; color: var(--b-dim); }
.mc-score b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mc-score div:last-child { text-align: right; }
.mc-score em { font-style: normal; font: 700 12px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--you); }
.mc-sub { font-size: 12.5px; color: var(--b-dim); margin-bottom: 8px; }
.mc-row { display: grid; grid-template-columns: 1fr 1fr 1fr 52px; gap: 8px; padding: 8px 0; border-top: 1px solid var(--b-line); font-size: 13px; color: var(--b-dim); }
.mc-row b { color: var(--b-text); }
.mc-row > b { text-align: right; }
.mc-row .ok { color: var(--up); }
.mc-row .no { color: var(--down); }
.mc-note { margin-top: 10px; font-size: 12.5px; color: var(--b-dim); }
.standings { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.st-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.st-head b { font-size: 16px; font-weight: 800; }
.st-head span { font-size: 12px; color: var(--mut); }
.standings table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.standings th { text-align: left; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding: 10px 6px 6px; }
.standings td { padding: 7px 6px; border-bottom: 1px solid var(--line); color: var(--sub); }
.standings td:nth-child(3) { font: 600 13px 'IBM Plex Mono', monospace; color: var(--ink); }
.standings tr.me td { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--ink); font-weight: 700; }
.standings tr.cut td { border-bottom: 2px dashed var(--gold); }
.standings .ok { color: #13804f; }
.standings .no { color: #c8302c; }

/* ---------- host ---------- */
.host { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.hc-head b { font-size: 16px; font-weight: 800; }
.hc-head span { font-size: 12px; color: var(--mut); }
.hc-lede { margin: 12px 0; font-size: 14px; color: var(--sub); }
.hc-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hc-score div { background: var(--paper); border-radius: 12px; padding: 12px; }
.hc-score small { display: block; font-size: 11.5px; color: var(--mut); }
.hc-score b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.hc-score em { display: block; font-style: normal; font-size: 12px; color: var(--sub); }
.hc-big { margin: 14px 0 8px; font-size: 15px; color: var(--sub); }
.hc-big b { font-size: 26px; color: var(--ink); margin-right: 4px; }
.hc-note { font-size: 13px; color: var(--mut); }

/* ---------- ticket rows ---------- */
.pk-tk { display: grid !important; grid-template-columns: 26px 1fr 58px 34px 30px; gap: 4px; white-space: nowrap; }
.pk-tk span:nth-child(3), .pk-tk span:last-child { text-align: right; }
.pk-tk b { text-align: center; }

/* ---------- calendar ---------- */
.year { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 20px; }
.yr-bar { position: relative; height: 128px; }
.yr-seg { position: absolute; left: calc(var(--a) * 10%); width: calc((var(--b) - var(--a)) * 10%); height: 56px; border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; }
.yr-seg b { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-seg span { font-size: 11.5px; opacity: .8; }
.yr-seg.pk { top: 0; background: var(--b-bg); color: var(--b-text); }
.yr-seg.br { top: 66px; background: var(--you); color: var(--you-ink); }
.yr-months { display: grid; grid-template-columns: repeat(10, 1fr); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; font: 600 11px 'IBM Plex Mono', monospace; color: var(--mut); }
.yr-note { margin-top: 14px; font-size: 13.5px; color: var(--sub); }
.yr-note a { color: var(--gold-ink); font-weight: 700; }

@media (max-width: 1240px) {
  .pk-games[data-n="8"] { grid-template-columns: repeat(2, 1fr); }
  .pk-main { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 1020px) {
  .pk-main, .h2h-sec, .pk-pick-wrap { grid-template-columns: 1fr; }
  .mode-grid.three { grid-template-columns: 1fr; }
  .pk-strip { overflow-x: auto; }
}

/* embed views used by the redo homepage */
body[data-embed="h2h"] > #h2h, body[data-embed="modes"] > #modes { display: block !important; max-width: none; padding: 28px 32px; }
body[data-embed="board"] > .pk-board { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* ---------- quick pick: scratch card and reels ---------- */
.qp { background: var(--b-bg); color: var(--b-text); border-radius: 24px; padding: 18px 20px 20px; }
.qp-top { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--b-line); margin-bottom: 16px; }
.qp-status { font-size: 13px; color: var(--b-dim); }
.qp-card { margin-left: auto; font: 600 12px 'IBM Plex Mono', monospace; color: var(--b-faint); }
.qp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.qp-tools { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.qp-hint { font-size: 12.5px; color: var(--b-dim); max-width: 640px; }
.qp-btn { appearance: none; border: 0; cursor: pointer; background: var(--you); color: var(--you-ink); font: 700 14px Inter, sans-serif; padding: 11px 20px; border-radius: 10px; white-space: nowrap; }
.qp-btn.ghost { background: none; color: var(--b-text); border: 1px solid var(--b-line); }
.qp-btn.wide { width: 100%; margin-top: 12px; }
.qp-btn:disabled { opacity: .38; cursor: default; }
.qp-tile { display: grid; grid-template-columns: 4px auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
.qp-tile i { grid-row: 1 / 3; align-self: stretch; border-radius: 2px; }
.qp-tile b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.qp-tile span { font-size: 11.5px; color: var(--b-dim); line-height: 1.2; }

.qs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.qs-panel { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 12px; padding: 8px; transition: border-color .2s, opacity .2s; }
.qs-panel.open { border-color: color-mix(in srgb, var(--you) 60%, var(--b-line)); }
.qs-panel.locked { opacity: .42; }
.qs-panel.locked canvas { filter: grayscale(.85); cursor: not-allowed; }
.qs-panel.won { border-color: var(--up); }
.qs-panel.lost { border-color: color-mix(in srgb, var(--down) 70%, var(--b-line)); }
.qs-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 7px; }
.qs-head span { font: 500 10px 'IBM Plex Mono', monospace; color: var(--b-faint); }
.qs-head b { font-size: 12.5px; }
.qs-area { position: relative; height: 146px; border-radius: 8px; overflow: hidden; background: var(--b-bg); outline: none; }
.qs-area:focus-visible { box-shadow: 0 0 0 2px var(--you); }
.qs-under { position: absolute; inset: 0; padding: 10px 10px 8px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.qs-under em { font-style: normal; font-size: 11px; color: var(--b-dim); }
.qs-res { font: 600 10.5px 'IBM Plex Mono', monospace; }
.qs-panel.won .qs-res { color: var(--up); }
.qs-panel.lost .qs-res { color: var(--down); }
.qs-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; transition: opacity .4s; }
.qs-area canvas.gone { opacity: 0; pointer-events: none; }

.qr-machine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 16px; padding: 14px; }
.qr-window { position: relative; height: 264px; overflow: hidden; border-radius: 10px; background: var(--b-bg); border: 1px solid var(--b-line); }
.qr-window::before, .qr-window::after { content: ''; position: absolute; left: 0; right: 0; height: 88px; z-index: 2; pointer-events: none; }
.qr-window::before { top: 0; background: linear-gradient(var(--b-bg), color-mix(in srgb, var(--b-bg) 35%, transparent)); }
.qr-window::after { bottom: 0; background: linear-gradient(color-mix(in srgb, var(--b-bg) 35%, transparent), var(--b-bg)); }
.qr-strip { will-change: transform; }
.qr-strip .qp-tile { height: 88px; padding: 0 16px; align-content: center; }
.qr-col { position: relative; }
.qr-col.held .qr-window { border-color: var(--you); }
.qr-col.spinning .qr-info { visibility: hidden; }
.qr-info { min-height: 44px; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.qr-info b { font-size: 12.5px; }
.qr-info span { font-size: 11.5px; color: var(--b-dim); }
.qr-info.won span { color: var(--up); }
.qr-info.lost span { color: var(--down); }
.qr-hold { appearance: none; width: 100%; margin-top: 8px; padding: 7px 0; border-radius: 8px; border: 1px solid var(--b-line); background: none; color: var(--b-dim); font: 700 12px Inter, sans-serif; cursor: pointer; letter-spacing: .04em; }
.qr-col.held .qr-hold { background: var(--you); border-color: var(--you); color: var(--you-ink); }
.qr-hold:disabled { opacity: .35; cursor: default; }
.qr-col .qr-window { --mid: color-mix(in srgb, var(--you) 55%, transparent); }
.qr-col .qr-window .qr-strip { position: relative; z-index: 1; }
.qr-col .qr-window { background-image: linear-gradient(transparent 87px, var(--mid) 87px, var(--mid) 88px, transparent 88px, transparent 175px, var(--mid) 175px, var(--mid) 176px, transparent 176px); }

.qp-side { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 16px; padding: 16px; position: sticky; top: 90px; }
.qp-side h4 { font-size: 14px; margin-bottom: 10px; }
.qp-picks { list-style: none; }
.qp-picks li { display: grid; grid-template-columns: 4px 1fr auto; grid-template-areas: "i b s" "i e s"; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--b-line); }
.qp-picks li i { grid-area: i; border-radius: 2px; }
.qp-picks li b { grid-area: b; font-size: 13.5px; }
.qp-picks li em { grid-area: e; font-style: normal; font: 500 11px 'IBM Plex Mono', monospace; color: var(--b-dim); }
.qp-picks li strong { grid-area: s; align-self: center; font-size: 16px; }
.qp-picks li.won strong { color: var(--up); }
.qp-picks li.lost strong { color: var(--down); }
.qp-picks li.empty { grid-template-columns: 1fr auto; grid-template-areas: "b e"; }
.qp-picks li.empty span { font-size: 13px; color: var(--b-faint); }
.qp-picks li.empty em { grid-area: e; font-family: Inter, sans-serif; color: var(--b-faint); }
.qp-msg { margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.qp-msg.win { color: var(--up); }
.qp-prizes { margin-top: 12px; border: 1px solid var(--b-line); border-radius: 10px; overflow: hidden; }
.qp-prizes div { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--b-line); }
.qp-prizes div:last-child { border-bottom: 0; }
.qp-prizes span { color: var(--b-dim); }
.qp-prizes div.hit { background: color-mix(in srgb, var(--up) 16%, transparent); }
.qp-prizes div.hit span, .qp-prizes div.hit b { color: var(--up); }
.qp-note { margin-top: 10px; font-size: 11.5px; color: var(--b-faint); line-height: 1.45; }
.qp-retail { margin-top: 14px; font-size: 13.5px; color: var(--mut); max-width: 900px; }
.qr-strip .qp-tile b { font-size: 26px; }
.qr-strip .qp-tile span { font-size: 12.5px; }
@media (max-width: 1180px) { .qs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .qp-body { grid-template-columns: 1fr; } .qp-side { position: static; } .qr-machine { gap: 6px; padding: 8px; } .qr-strip .qp-tile { padding: 0 8px; } }
@media (max-width: 640px) {
  .pk-pick-wrap { grid-template-columns: minmax(0, 1fr); }
  .pk-sheet, .pick-sum { min-width: 0; }
  .pk-sheet { overflow-x: auto; padding: 14px 12px 16px; }
  .pk-sheet .pick-tools div { flex-wrap: wrap; }
  .sheet-head, .sh-row { grid-template-columns: 30px minmax(0, 1fr) 46px minmax(0, 1fr) 60px; gap: 6px; }
  .sh-row .tb span { display: none; }
}