/* goal888 game + account pages (g8.js). Uses the app.css tokens; light and dark follow the site theme. */
.pg{display:grid;gap:12px}
/* app.css .card has no padding of its own (list cards pad their rows); game cards hold text and forms */
.pg .card{padding:14px 16px}
.pg .card h2{margin:0 0 4px;font-size:18px}
.pg-more summary{cursor:pointer;font-weight:600}
.pg-nav,.pg-tabs{display:flex;flex-wrap:wrap;gap:6px}
.pg-nav a,.pg-tabs a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);text-decoration:none;font-size:14px;background:var(--surface)}
.pg-nav a.on,.pg-tabs a.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.pg-auth{display:grid;gap:8px}
.pg .card:empty{display:none}
/* the sign-in card is filled by g8.js after /api/me: reserve its final height up front (signed-out: text + 44px Google button; signed-in hint from g8.me: one row) so nothing below moves */
.pg #pg-auth{min-height:152px}
html[data-me] .pg #pg-auth{min-height:66px}
.pg #pg-auth:empty{display:grid}
#g8-gsi{height:44px;overflow:hidden}
.pg-who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-link{background:none;border:0;color:var(--accent-text);cursor:pointer;font:inherit;padding:0 4px;text-decoration:underline}
/* scoring table above the daily card; the payback column shows only where placed points are on (g8.js adds .tp) */
.pg .pg-sbox{padding:10px 16px}
.pg-sbox summary{cursor:pointer;font-weight:600}
.pg-sb{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.pg-sb th,.pg-sb td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.pg-sb th{font-weight:600;color:var(--text-2);font-size:13px}
.pg-sb .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-sb tr:last-child td{border-bottom:0}
.pg-sbox .sx{display:none}
.pg-sbox.tp .sx{display:table-cell}
.pg-sb-more{margin:6px 0 0;font-size:13px}
.pg-card{display:grid;gap:8px}
.pg-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.pg-card-h h2{margin:0;font-size:18px}
.pg-note{margin:0;font-size:13px}
.pg-m{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:6px}
.pg-m.joker{box-shadow:inset 3px 0 0 var(--gold);padding-left:8px}
.pg-m-top{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pg-comp{font-weight:600;color:var(--text-2)}
.pg-st{margin-left:auto;font-variant-numeric:tabular-nums}
.pg-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-weight:600}
.pg-teams a{color:var(--text);text-decoration:none;display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-teams a:last-child{justify-content:flex-end;text-align:right}
.pg-teams .crest{width:22px;height:22px;border-radius:6px;background:var(--c1,#888);color:#fff;font-size:9px;display:inline-grid;place-items:center;flex:none}
.pg-teams img.crest{background:none;border-radius:0;object-fit:contain}
.pg-score{font-variant-numeric:tabular-nums;font-size:18px;min-width:48px;text-align:center}
.pg-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface-2)}
.pg-step button{width:36px;height:38px;border:0;background:none;color:var(--text);font-size:18px;cursor:pointer}
.pg-goal{width:42px;height:38px;border:0;background:none;color:var(--text);text-align:center;font:600 18px var(--font,inherit);-moz-appearance:textfield}
.pg-goal::-webkit-inner-spin-button,.pg-goal::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pg-dash{font-weight:700}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:13px;cursor:default}
button.pill{cursor:pointer}
.pill.jk.on{background:var(--gold);border-color:var(--gold);color:#1a1300}
.pill.k-exact{background:var(--up-soft);color:var(--up)}
.pill.k-diff,.pill.k-result{background:var(--accent-soft);color:var(--accent-ink,var(--accent))}
.pill.k-miss,.pill.k-late,.pill.k-void,.pill.k-open{color:var(--muted)}
.pg-mine{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pg-mypick{font-weight:700;font-variant-numeric:tabular-nums}
.pg-tb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.pg-tb input,.pg-inline input,.pg-signup input,.pg-signup select{height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);padding:0 10px;font:inherit}
.pg-tb input{width:70px}
.pg-more summary{cursor:pointer;font-weight:600}
.pg-signup{display:grid;gap:6px;max-width:420px}
.pg-signup h2{margin:0 0 4px;font-size:17px}
.pg-signup .chk{display:flex;gap:6px;align-items:center}
.pg-err{color:var(--down);margin:0;min-height:1em}
.pg-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.pg-leagues{margin:0;padding-left:18px}
.pg-board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pg-board th,.pg-board td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.pg-board th{font-size:12px;color:var(--muted);font-weight:600}
.pg-board td.pts{font-weight:700}
.pg-board tr.me td{background:var(--accent-soft)}
.pg-form-dots{letter-spacing:2px}
.pg-rules ol{margin:0;padding-left:20px;display:grid;gap:6px}
.pg-kinds{font-size:13px}
.pg-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:50;font-size:14px;max-width:calc(100vw - 32px)}
.pg-toast.bad{background:var(--down);color:#fff}
@media (max-width:640px){.hide-m{display:none}.pg-score{font-size:16px;min-width:40px}}
.pg .btn,.pg-toast .btn{width:auto;margin-top:0}
/* free prediction points page (tpoints.go) */
.tp-preview{border:1px dashed var(--gold);color:var(--text-2);font-size:14px}
.tp-hero{display:grid;gap:12px;grid-template-columns:1fr;background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
@media (min-width:720px){.tp-hero{grid-template-columns:1.4fr 1fr;align-items:center}}
.tp-hero h2{font-size:22px}
.tp-hero p{margin:4px 0}
.tp-me{display:grid;gap:8px;justify-items:start;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);min-height:96px}
.tp-bal{display:grid;line-height:1.1}
.tp-bal small{color:var(--muted);font-size:13px}
.tp-bal b{font-size:34px;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.tp-daily{min-height:44px}
.btn-alt{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.tp-hist summary{cursor:pointer;font-size:14px;color:var(--text-2)}
.tp-hist-t{width:100%}
.tp-hist-t th{font-size:12px;font-weight:500;color:var(--text-2);text-align:left}
.tp-hist-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-hist-t .tp-bal-col{color:var(--text);font-weight:600}
.tp-boards{display:grid;gap:12px}
@media (min-width:720px){.tp-boards{grid-template-columns:1fr 1fr}}
.tp-prize-list,.tp-winners{margin:6px 0;padding-left:20px}
.tp-how ol{margin:6px 0;padding-left:20px;display:grid;gap:4px}
.tp-rules h2{font-size:17px;margin:14px 0 4px}
.tp-rules p{margin:4px 0;line-height:1.65}
.tp-stakebox{margin-top:6px;gap:6px;flex-wrap:wrap;align-items:center}
.tp-stakebox .tp-amt{width:72px}
.pill.tp-stake.won{background:var(--accent-soft,#d8f5ea);color:var(--accent-text)}
.pill.tp-stake.lost{opacity:.75}
/* quick "who wins" pick + next-step hints (only one element of a row pulses at a time) */
.pg-q{margin:2px 0 0;font-size:14px}
.pg-1x2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.pg-1x2-b{display:grid;gap:2px;justify-items:center;align-content:center;min-height:52px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-width:0}
.pg-1x2-b b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-1x2-b span{color:var(--text-2);font-size:12px}
.pg-1x2-b.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.pg-1x2-b.on span{color:var(--accent-text)}
.pg-1x2-b.derived{border-style:dashed}
.pg-1x2-b:focus-visible,.pg-tog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-scoreform[hidden]{display:none}
.pg-tog{font-size:14px}
.pg-hint{display:block;min-height:1em;font-size:12px}
.pg-hint:empty{display:none}
.pg-status{margin:0;font-size:13px;color:var(--accent-text);min-height:0}
.pg-status:empty{display:none}
@keyframes pgPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.pg-pulse{animation:pgPulse 1.6s ease-out infinite;border-color:var(--accent)!important;border-radius:12px}
.pg-step.pg-pulse{border-radius:999px}
.btn.pg-pulse{border-radius:999px}
@media (prefers-reduced-motion:reduce){.pg-pulse{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}}
.tp-rules-line{font-size:13px;color:var(--text-2)}
@media (max-width:420px){.pg-1x2-b{min-height:56px;padding:6px 4px}.pg-1x2-b b{font-size:13px}}
/* invite friends (ref.go) + sign-in identity */
.tp-ref{display:grid;gap:10px;padding:14px 16px}
.tp-ref h2,.tp-ref h3{margin:0}
.tp-ref-row{display:flex;gap:8px;flex-wrap:wrap}
.tp-ref-link{flex:1 1 200px;min-width:0;font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.tp-ref-bot{overflow-wrap:anywhere}
.tp-ref-qr{background:#fff;border-radius:10px;padding:6px;width:160px;height:160px}
.tp-ref-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tp-ref-stats div{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.tp-ref-stats b{font-size:20px;font-variant-numeric:tabular-nums}
.tp-ref-stats small{color:var(--text-2);font-size:12px}
.tp-ref-t{width:100%}
.tp-ref-t th{font-size:12px;font-weight:500;color:var(--text-2);text-align:left}
.tp-ref-t .num{text-align:right;font-variant-numeric:tabular-nums}
.tp-ref-t td{font-size:13px;white-space:nowrap}
.tp-ref-rules summary{cursor:pointer;font-size:14px;color:var(--text-2)}
.tp-ref-banner{padding:10px 14px;border-left:3px solid var(--accent,#2BD99F)}
.tp-hist-t tr.tp-rev td{color:var(--text-2);text-decoration:line-through}
.tp-hist-t td{white-space:nowrap}
.pg-id{display:grid;gap:4px;padding:10px 0}
.pg-id h2{margin:0;font-size:16px}
.pg-id p{margin:0}
/* long history / invite tables scroll inside their card instead of widening the page */
.pg{grid-template-columns:minmax(0,1fr)}
.tp-hero{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.tp-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.tp-me,.tp-hist,.tp-ref{min-width:0;max-width:100%}
.tp-me .scroll-x,.tp-ref .scroll-x{max-width:100%;overflow-x:auto}
.pg-avatar{display:flex;gap:12px;align-items:center;margin:12px 0;min-height:72px}
.pg-avatar-img{display:inline-flex;flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.pg-avatar-letter{align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);font-size:32px;font-weight:700}
.pg-avatar-info{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pg-short{overflow-wrap:anywhere}
.pg-av-dlg{max-width:min(520px,calc(100vw - 32px));width:100%;border:1px solid var(--border,#2a3744);border-radius:12px;background:var(--surface,#121b25);color:inherit;padding:16px}
.pg-av-dlg::backdrop{background:rgba(0,0,0,.6)}
.pg-av-dlg h2{margin:0 0 8px;font-size:18px}
.pg-av-dlg h3{margin:14px 0 6px;font-size:14px}
.pg-av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.pg-av-pick{padding:0;border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;width:60px;height:60px;display:grid;place-items:center}
.pg-av-pick img{border-radius:50%;display:block}
.pg-av-pick:hover,.pg-av-pick:focus-visible{border-color:var(--accent)}
.pg-av-pick.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-text,var(--accent))}
.pg-av-note{font-size:12px;margin:6px 0}
.pg-av-msg{min-height:20px;margin:8px 0;font-size:13px}
.pg-av-msg.bad{color:#e5484d}
.pg-av-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pg-av-foot{flex-wrap:wrap}
.pg-av-foot .btn{flex:0 0 auto;min-width:120px}
/* claim CTAs (g8.js renderCtas): strip under the sign-in card, 3-step box, mini buttons. The strip keeps one fixed height
   from the first paint (filled after /api/me) so nothing below it moves. */
.tpx-strip{display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:64px;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),var(--surface));overflow:hidden}
.tpx-strip.off{display:none}
.tpx-t{min-width:0;display:grid;gap:1px}
.tpx-t b{font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpx-t small{font-size:12px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpx-a{display:flex;gap:6px;align-items:center;flex:none}
.tpx-a .btn,.tpx-steps .btn{padding:7px 12px;font-size:14px;min-height:36px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.tpx-chip{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap}
.tpx-chip.ok{border-color:var(--accent);color:var(--accent-text);margin:6px 0 0}
.tpx-steps-slot{min-height:228px}
html[data-me] .tpx-steps-slot{min-height:0}
.tpx-steps{display:grid;gap:8px;position:relative;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.tpx-steps h3{margin:0;font-size:16px}
.tpx-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:tpx}
.tpx-steps li{counter-increment:tpx;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-left:30px;position:relative;min-height:36px}
.tpx-steps li::before{content:counter(tpx);position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.tpx-steps li span{flex:1 1 150px;font-size:14px}
.tpx-qr{display:none;margin:0;text-align:center;font-size:11px;color:var(--muted)}
.tpx-qr img{display:block;width:112px;height:112px;background:#fff;border-radius:8px;padding:4px;box-sizing:border-box;margin:0 auto 2px}
.tpx-nv{margin:0;font-size:12px}
@media (min-width:900px){.tpx-steps{grid-template-columns:1fr auto;column-gap:16px}.tpx-steps h3,.tpx-steps ol,.tpx-chip.ok,.tpx-nv{grid-column:1}.tpx-qr{display:block;grid-column:2;grid-row:1/span 4;align-self:center}}
.tpx-mini{padding:5px 10px;font-size:13px;min-height:32px;margin-top:6px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.gx-chip .tpx-mini{margin:0 0 0 auto;flex:none}
.gx-chip{flex-wrap:wrap}
@media (max-width:560px){.tpx-strip{gap:8px;padding:8px;flex-wrap:wrap;min-height:104px}html[data-me] .tpx-strip{min-height:64px;flex-wrap:nowrap}.tpx-a{width:100%;justify-content:flex-start}html[data-me] .tpx-a{width:auto}.tpx-t small{display:none}.tpx-t b{white-space:normal;font-size:14px}.tpx-a .btn{padding:6px 9px;font-size:13px}}
.tpx-steps-slot{grid-column:1/-1}