/* ============================================================
   The new pages: Live, Games, Portfolio, Consulting, the combined Overview page, the Instagram block (Portfolio and
   home), and the live game notifications (the bell in the menu bar and its panel). Loaded on every page through
   _includes/head-extra.html, after site.css.
   ============================================================ */

:root {
  --pg-gold: linear-gradient(90deg, #8a6410 0%, #D4AF37 18%, #FFF0B8 34%, #F5D370 50%, #D4AF37 66%, #B8860B 82%, #8a6410 100%);
  --pg-card: linear-gradient(135deg, #1A1A1A 0%, #070707 73%);
  --pg-line: #2c2923;
  --pg-muted: #a9a39a;
}
/* Numbers in Playfair Display text are drawn in Times New Roman (as on the dashboard): a second face under the same
   family name, for the digits only, checked before Google's Playfair Display face. Devices without Times New Roman
   (most Android phones) get Tinos, its metric twin (assets/fonts/tinos-digits.woff2, digits only, 5 KB). */
@font-face {
  font-family: "Playfair Display";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times New Roman Regular"), url("fonts/tinos-digits.woff2") format("woff2");
  unicode-range: U+0030-0039;
  font-weight: 500;
  font-display: swap;
}
@keyframes pg-border-shimmer { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 320px 0; } }

/* the gold-bordered card every new page uses (the home page's feature cards) */
.game-card, .cs-card, .pf-soon, .lb, .sd-conf, .ig-card, .pf-book-frame, .cs-form, .nt-panel {
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--pg-card) padding-box, var(--pg-gold) border-box;
  background-size: 100% 100%, 320px 100%;
  background-repeat: no-repeat, repeat-x;
  animation: pg-border-shimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .game-card, .cs-card, .pf-soon, .lb, .sd-conf, .ig-card, .pf-book-frame, .cs-form, .nt-panel { animation: none; }
}

/* ---------------------------------------------------------- inside .page-content
   site.css hides every p / li / img in a page until the scroll animation reaches it, and turns every link into gold
   underlined text. The new pages' own components (and anything drawn into them later by script) opt out: the
   component itself fades in instead, and its links keep their own look. */
html.bq-js-ready .page-content :is(.game-card, .cs-card, .cs-steps, .cs-form, .pf-soon, .pf-book, .ba-insta, .lb, .sd) :is(p, li, img, pre, summary) {
  opacity: 1; transform: none; transition: none;
}
.page-content a:is(.game-card, .ig-card, .ig-post, .ig-more, .pf-book-link, .nt-link),
.page-content .pg-jump a {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: inherit; -webkit-text-fill-color: currentColor; animation: none;
}
.page-content a:is(.game-card, .ig-card, .ig-post, .ig-more, .pf-book-link, .nt-link)::after,
.page-content .pg-jump a::after { display: none; }
/* the cards keep the gold border shimmer even though they are links */
.page-content a.game-card, .page-content a.ig-card {
  background: var(--pg-card) padding-box, var(--pg-gold) border-box;
  background-size: 100% 100%, 320px 100%;
  background-repeat: no-repeat, repeat-x;
  animation: pg-border-shimmer 7s linear infinite;
}

.page-content.wide { max-width: 1180px; }

/* ---------------------------------------------------------- the combined Overview page */
.page-content h1.group-title {
  font-size: 46px;
  margin: 0 0 8px;
  padding-top: 8px;
  scroll-margin-top: 96px;
}
.page-content h1.group-title ~ h1.group-title { margin-top: 84px; }
.page-content h1.group-title::after {
  content: ""; display: block; width: 120px; height: 2px; margin: 14px auto 0;
  background: var(--pg-gold); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite;
}
.page-content :is(h2, h3, a[id]) { scroll-margin-top: 96px; }
.with-sidebar .page-content :is(h1, h2) { scroll-margin-top: 96px; }
.pg-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; margin: 20px 0 26px; }
.pg-flow .st { flex: 1 1 150px; max-width: 220px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--pg-line);
  background: linear-gradient(160deg, #1b1916 0%, #0c0b0a 80%); font-size: 14px; line-height: 1.45; color: #d9d4ca; }
.pg-flow .st b { display: block; font-family: "Playfair Display", serif; font-weight: 500; font-size: 17px; color: #F5D370; margin-bottom: 4px; }
.pg-flow .ar { align-self: center; color: #D4AF37; font-size: 20px; }
@media (max-width: 640px) { .pg-flow .ar { transform: rotate(90deg); flex-basis: 100%; text-align: center; } .pg-flow .st { max-width: none; } }

/* the side view on Overview and Portfolio: groups, with the Overview group's five parts under it */
.sidebar-toc.grouped { max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a362e transparent; padding-bottom: 12px; }
.sidebar-toc.grouped a.grp { font-family: "Playfair Display", serif; font-size: 17px; color: #e6e1d6; padding-top: 9px; padding-bottom: 5px; }
.sidebar-toc.grouped a.grp ~ a.grp { margin-top: 10px; }
.sidebar-toc.grouped a.sub { font-size: 14px; padding: 4px 0 4px 26px; color: #9d988f; }
.sidebar-toc a.active { border-left-color: #D4AF37; }

/* ---------------------------------------------------------- page blocks (Live, Games, Consulting) */
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 40px 24px 0; }
.pg-title { text-align: center; font-size: 40px; margin: 0 0 18px; }
.pg-lede { max-width: 760px; margin: 0 auto 30px !important; text-align: center; font-size: 18px; line-height: 1.6; color: #cfc9bd; }
.pg-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 6px; }
.pg-jump a { padding: 6px 14px; border: 1px solid var(--pg-line); border-radius: 999px; font-size: 14px; color: #d9d4ca; transition: border-color .2s, color .2s; }
.pg-jump a:hover { border-color: #D4AF37; color: #F5D370; }
.pg-band { padding: 0 0 8px; }
.pg-section { margin: 46px 0 0; scroll-margin-top: 90px; }
.pg-section:first-of-type { margin-top: 22px; }
.pg-section-title { text-align: center; font-size: 34px; margin: 0 0 6px; }
.pg-section-sub { text-align: center; color: var(--pg-muted); margin: 0 auto 24px !important; max-width: 640px; }
.pg-section-title + .game-grid, .pg-section-title + .cs-grid, .pg-section-title + .cs-steps, .pg-section-title + .cs-form { margin-top: 22px; }
.page-live .ls.ls-grid { margin-top: 18px; }
#games-now, #leaders, #standings { scroll-margin-top: 90px; }

/* ---------------------------------------------------------- Games */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 22px; }
.game-card { display: flex; flex-direction: column; overflow: hidden; color: #f0f0f0; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
a.game-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.25); }
.game-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px 10px 0 0; background: #0b0b0d; }
.game-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.blacktop-ball { position: absolute; width: 22%; left: 50%; top: 52%; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
  animation: pg-dribble 1.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pg-dribble { 0%, 100% { transform: translate(-50%, -62%); } 50% { transform: translate(-50%, -38%) scale(1.02, .97); } }
a.game-card:hover .blacktop-ball { animation-duration: .8s; }
.game-title { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 800 26px/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,.8); }
.game-title em { font-style: normal; background: var(--pg-gold); background-size: 320px 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; animation: bq-brand-shimmer 7s linear infinite; }
.game-meta { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.game-name { font-family: "Playfair Display", serif; font-size: 22px; color: #fff; }
.game-desc { font-size: 15px; line-height: 1.5; color: #c9c3b8; flex: 1; }
.game-play { align-self: flex-start; margin-top: 8px; padding: 7px 16px; border-radius: 999px; font: 700 13px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #111; background: var(--pg-gold); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; }
.game-card.soon { opacity: .78; }
.soon-art { display: flex; align-items: center; justify-content: center; background:
  repeating-linear-gradient(135deg, rgba(212,175,55,.05) 0 12px, rgba(0,0,0,0) 12px 24px), #0d0d0f; }
.soon-art span, .pf-badge { display: inline-block; padding: 5px 12px; border: 1px solid rgba(212,175,55,.5); border-radius: 999px; font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #F5D370; }

/* ---------------------------------------------------------- Portfolio */
.pf-section { margin: 0 0 56px; scroll-margin-top: 90px; }
.pf-section h2 { margin-top: 0; }
.pf-soon { padding: 26px 22px; text-align: center; }
.pf-soon p { margin: 12px 0 0; color: var(--pg-muted); }
.pf-book-link { display: inline-block; margin-top: 12px; font-size: 15px; color: #F5D370; }
.pf-book-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Consulting */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cs-card { padding: 20px 20px 18px; position: relative; }
.cs-card h3 { margin: 0 0 8px; font-size: 22px; }
.cs-card p { margin: 0; color: #c9c3b8; font-size: 15px; line-height: 1.55; }
.cs-card.soon h3 { margin-top: 12px; color: #cfc9bd; }
.cs-steps { list-style: none; counter-reset: cs; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 0; margin: 0; }
.cs-steps li { counter-increment: cs; position: relative; padding: 18px 18px 16px 62px; border: 1px solid var(--pg-line); border-radius: 12px;
  background: linear-gradient(160deg, #1b1916 0%, #0c0b0a 80%); }
.cs-steps li::before { content: counter(cs); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 Arial, sans-serif; color: #111; background: var(--pg-gold); background-size: 320px 100%; }
.cs-steps b { display: block; font-family: "Playfair Display", serif; font-weight: 500; font-size: 19px; color: #fff; margin-bottom: 2px; }
.cs-steps span { color: #c9c3b8; font-size: 15px; }
.cs-form { display: flex; flex-direction: column; gap: 14px; padding: 24px; max-width: 820px; margin: 0 auto; }
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .04em; color: #bdb7ab; }
.cs-form :is(input, select, textarea) { font: 15px/1.4 Arial, sans-serif; color: #f0f0f0; background: #0e0e0f; border: 1px solid #34302a; border-radius: 8px; padding: 10px 12px;
  outline: none; transition: border-color .2s, box-shadow .2s; color-scheme: dark; }
.cs-form :is(input, select, textarea):focus { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.cs-form textarea { resize: vertical; min-height: 110px; }
.cs-send { align-self: flex-start; border: 0; cursor: pointer; padding: 12px 26px; border-radius: 999px; font: 700 14px/1 Arial, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #111; background: var(--pg-gold); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; }
.cs-send:hover { filter: brightness(1.08); }
.cs-note { margin: 0 !important; font-size: 14px; color: var(--pg-muted); }
.cs-note.err { color: #ff8b7d; }
@media (max-width: 640px) { .cs-row { grid-template-columns: 1fr; } .cs-form { padding: 18px; } }

/* ---------------------------------------------------------- Instagram (Behold feed), Portfolio and home */
.ba-insta { max-width: 940px; margin: 0 auto; }
.ba-insta-home { max-width: 940px; margin: 34px auto 10px; padding: 0 24px; }
.ig-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: #f0f0f0; text-decoration: none; text-align: left; }
.ig-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; padding: 2px; background: var(--pg-gold); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; }
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #0d0d0d; border: 2px solid #0d0d0d; }
.ig-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ig-who b { font-size: 18px; color: #fff; }
.ig-who span { font-size: 14px; color: var(--pg-muted); }
.ig-who i { font-style: normal; color: #f0f0f0; font-weight: 700; }
.ig-follow { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font: 700 13px/1 Arial, sans-serif; letter-spacing: .06em; color: #111;
  background: var(--pg-gold); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; white-space: nowrap; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ig-post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #151515; }
.ig-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
.ig-post:hover img { transform: scale(1.05); filter: brightness(.8); }
.ig-kind { position: absolute; top: 7px; right: 8px; font-size: 14px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.ig-more { display: block; text-align: center; margin-top: 12px; font-size: 15px; color: #F5D370; }
.ig-more:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .ig-grid { gap: 3px; }
  .ig-card { gap: 12px; padding: 12px 14px; }
  .ig-avatar { width: 52px; height: 52px; }
  .ig-who b { font-size: 16px; }
  .ig-who span { font-size: 12.5px; }
  .ig-follow { padding: 8px 12px; }
}

/* ---------------------------------------------------------- Live: Leaderboards and Standings */
.lb { padding: 16px 16px 12px; max-width: 900px; margin: 0 auto; }
.lb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; border-bottom: 1px solid var(--pg-line); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab { flex: 0 0 auto; cursor: pointer; padding: 7px 13px; border-radius: 999px; border: 1px solid #34302a; background: #121212; color: #cfc9bd;
  font: 700 12.5px/1 Arial, sans-serif; letter-spacing: .04em; transition: border-color .2s, color .2s, background .2s; }
.lb-tab:hover { border-color: rgba(212,175,55,.6); color: #F5D370; }
.lb-tab.on { color: #111; border-color: transparent; background: var(--pg-gold); background-size: 320px 100%; }
.lb-tab.gold:not(.on) { color: #F5D370; border-color: rgba(212,175,55,.55); }
.lb-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lb-row { display: grid; grid-template-columns: 26px 42px minmax(0, 1fr) auto; grid-template-rows: auto 3px; column-gap: 12px; align-items: center;
  padding: 9px 4px 7px; border-bottom: 1px solid rgba(255,255,255,.05); font-family: "Roboto Condensed Numbers", Arial, Helvetica, sans-serif; }
.lb-row:last-child { border-bottom: 0; }
.lb-rk { font: 700 15px/1 Arial, sans-serif; color: #7d776d; text-align: center; }
.lb-row:nth-child(1) .lb-rk { color: #F5D370; }
.lb-face { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #1c1b19; border: 1px solid #2c2923; }
.lb-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transform: scale(1.35) translateY(8%); }
.lb-nm { min-width: 0; display: flex; flex-direction: column; }
.lb-nm b { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-nm span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--pg-muted); }
.lb-logo { width: 16px; height: 16px; object-fit: contain; }
.lb-val { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.lb-val b { font: 700 20px/1.1 "Roboto Condensed Numbers", Arial, sans-serif; color: #F5D370; }
.lb-val i { font-style: normal; font-size: 11.5px; color: var(--pg-muted); white-space: nowrap; }
.lb-bar { grid-column: 3 / 5; height: 3px; border-radius: 2px; background: rgba(255,255,255,.05); overflow: hidden; margin-top: 5px; }
.lb-bar i { display: block; height: 100%; border-radius: 2px; background: var(--pg-gold); background-size: 320px 100%; }
.lb-note { font-size: 12.5px; color: #8d877d; padding: 10px 4px 2px; line-height: 1.5; }
.lb-empty { list-style: none; padding: 20px 4px; text-align: center; color: var(--pg-muted); }

.sd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sd-conf { padding: 14px 12px 8px; min-width: 0; }
.sd-conf h3 { margin: 0 0 8px 6px; font-size: 21px; }
.sd-table { width: 100%; border-collapse: collapse; font: 14px/1.2 "Roboto Condensed Numbers", Arial, Helvetica, sans-serif; color: #e6e1d6; }
.sd-table th { font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; color: #8d877d; text-align: right; padding: 6px 6px 8px; border-bottom: 1px solid var(--pg-line); }
.sd-table td { text-align: right; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.045); white-space: nowrap; }
.sd-table .l { text-align: left; }
.sd-table td.l { display: flex; align-items: center; gap: 8px; }
.sd-table img { width: 22px; height: 22px; object-fit: contain; }
.sd-seed { width: 16px; text-align: right; color: #7d776d; font-size: 12px; }
.sd-tri { display: none; }
.sd-table tr.cut6 td { border-bottom: 1px dashed rgba(212,175,55,.45); }
.sd-table tr.cut10 td { border-bottom: 1px dashed rgba(255,255,255,.22); }
.sd-table tbody tr:hover td { background: rgba(212,175,55,.05); }
.sd-key { grid-column: 1 / -1; font-size: 12.5px; color: #8d877d; text-align: center; }
@media (max-width: 900px) { .sd { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .sd-nm { display: none; }
  .sd-tri { display: inline; }
  .sd-table .x { display: none; }
  .sd-table td, .sd-table th { padding-left: 4px; padding-right: 4px; }
  .lb { padding: 12px 10px 8px; }
  .lb-row { grid-template-columns: 20px 36px minmax(0, 1fr) auto; column-gap: 9px; }
  .lb-face { width: 36px; height: 36px; }
  .lb-nm b { font-size: 14.5px; }
  .pg-title { font-size: 34px; }
  .pg-section-title { font-size: 28px; }
}

/* ---------------------------------------------------------- live game notifications: the bell and its panel */
.ba-bell { position: relative; order: 5; display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: 6px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.45); background: rgba(0,0,0,.25); color: #F5D370; cursor: pointer; transition: border-color .2s, background .2s; }
.ba-bell[hidden] { display: none; }
.ba-bell:hover { border-color: #F5D370; background: rgba(212,175,55,.12); }
.ba-bell.on { color: #111; background: linear-gradient(135deg, #B8860B, #F5D370, #B8860B); border-color: transparent; }
.ba-bell-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #ff4b3a; box-shadow: 0 0 0 2px #0d0d0d; display: none; }
.ba-bell.nudge .ba-bell-dot { display: block; animation: nt-breathe 1.6s ease-in-out infinite; }
@keyframes nt-breathe { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
@media (max-width: 800px) {
  .ba-bell { order: 2; margin-left: auto; width: 36px; height: 36px; }
  .ba-bell:not([hidden]) ~ .hamburger-btn { margin-left: 4px; }
}

.nt-shade { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 76px 14px 20px; overflow-y: auto; opacity: 0; transition: opacity .2s ease; }
.nt-shade.show { opacity: 1; }
.nt-panel { position: relative; width: 100%; max-width: 460px; padding: 22px 20px 18px; color: #f0f0f0; font: 15px/1.5 Arial, sans-serif; box-shadow: 0 30px 80px rgba(0,0,0,.7);
  transform: translateY(10px); transition: transform .25s ease; }
.nt-shade.show .nt-panel { transform: none; }
.nt-panel h2 { margin: 0 0 4px; font-size: 26px; }
.nt-panel p { margin: 0 0 12px; color: #c9c3b8; }
.nt-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #34302a; background: #141414; color: #ddd; font-size: 18px; line-height: 1; cursor: pointer; }
.nt-x:hover { border-color: #D4AF37; color: #F5D370; }
.nt-h { font: 700 11.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8d877d; margin: 16px 0 8px; }
.nt-opts { display: grid; gap: 6px; }
.nt-opt { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #2c2923; border-radius: 10px; background: #111; cursor: pointer; }
.nt-opt:hover { border-color: rgba(212,175,55,.5); }
.nt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.nt-opt .sw { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: #2a2723; position: relative; transition: background .2s; }
.nt-opt .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8d877d; transition: transform .2s, background .2s; }
.nt-opt input:checked + .sw { background: linear-gradient(135deg, #B8860B, #F5D370); }
.nt-opt input:checked + .sw::after { transform: translateX(16px); background: #111; }
.nt-opt input:focus-visible + .sw { outline: 2px solid #F5D370; outline-offset: 2px; }
.nt-opt b { display: block; font-size: 15px; color: #fff; font-weight: 600; }
.nt-opt small { display: block; font-size: 12.5px; color: #8d877d; line-height: 1.35; }
.nt-teams { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.nt-team { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border: 1px solid #2c2923; border-radius: 8px; background: #111; cursor: pointer;
  font: 700 10.5px/1 Arial, sans-serif; color: #9d988f; letter-spacing: .04em; }
.nt-team img { width: 26px; height: 26px; object-fit: contain; filter: grayscale(1) brightness(.75); transition: filter .2s; }
.nt-team[aria-pressed="true"] { border-color: #D4AF37; color: #F5D370; background: rgba(212,175,55,.08); }
.nt-team[aria-pressed="true"] img { filter: none; }
.nt-players { display: flex; gap: 6px; }
.nt-players input { flex: 1; min-width: 0; font: 15px/1.3 Arial, sans-serif; color: #f0f0f0; background: #0e0e0f; border: 1px solid #34302a; border-radius: 8px; padding: 9px 11px; outline: none; color-scheme: dark; }
.nt-players input:focus { border-color: #D4AF37; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 999px; border: 1px solid rgba(212,175,55,.5); color: #F5D370; font-size: 13px; background: rgba(212,175,55,.06); }
.nt-chip button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: #2a2723; color: #ddd; cursor: pointer; line-height: 1; }
.nt-hint { font-size: 12.5px; color: #8d877d; margin-top: 6px; }
.nt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 11px 20px; border-radius: 999px; font: 700 13.5px/1 Arial, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: #111; background: linear-gradient(90deg, #B8860B, #F5D370, #FFF0B8, #F5D370, #B8860B); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; }
.nt-btn.ghost { background: #151515; color: #ddd; border: 1px solid #34302a; animation: none; }
.nt-btn.ghost:hover { border-color: #D4AF37; color: #F5D370; }
.nt-btn:disabled { opacity: .5; cursor: default; }
.nt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.nt-status { margin-top: 10px; font-size: 13px; color: #8d877d; min-height: 1.4em; }
.nt-status.ok { color: #9fd99b; }
.nt-status.err { color: #ff8b7d; }
.nt-steps { counter-reset: nt; }
.nt-step { display: none; }
.nt-step.on { display: block; animation: nt-in .3s ease; }
@keyframes nt-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.nt-step-art { display: grid; place-items: center; height: 120px; margin: 4px 0 14px; border-radius: 12px; border: 1px solid #2c2923;
  background: radial-gradient(240px 120px at 50% 0%, rgba(212,175,55,.14), rgba(0,0,0,0)), #0f0f10; color: #F5D370; }
.nt-step-art svg { width: 54px; height: 54px; }
.nt-step-art .big { font: 700 20px/1.2 Arial, sans-serif; color: #fff; display: flex; align-items: center; gap: 10px; }
.nt-step h3 { margin: 0 0 4px; font-size: 21px; }
.nt-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.nt-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a362e; }
.nt-dots i.on { background: #D4AF37; }
.nt-point { position: fixed; z-index: 1001; left: 50%; bottom: 14px; transform: translateX(-50%); color: #F5D370; font-size: 30px; animation: nt-bob 1.2s ease-in-out infinite; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
@keyframes nt-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
.nt-toast { position: fixed; z-index: 1002; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; max-width: min(92vw, 420px); padding: 12px 14px; border-radius: 12px;
  background: #141414; border: 1px solid rgba(212,175,55,.5); color: #f0f0f0; font: 14px/1.4 Arial, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.6); transition: opacity .25s, transform .25s; }
.nt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nt-toast b { color: #F5D370; }
@media (max-width: 520px) { .nt-teams { grid-template-columns: repeat(5, 1fr); } .nt-shade { padding-top: 64px; } }

/* ---------------------------------------------------------- Live Leaderboards (home page, under the live windows) */
.lbx { max-width: 1000px; margin: 8px auto 30px; padding: 0 24px; font-family: Arial, sans-serif; }
.lbx-cta { text-align: center; }
.lbx-open { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; color: #F5D370; font: 700 14px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(135deg, #1A1A1A 0%, #070707 73%) padding-box, var(--pg-gold) border-box; background-size: 100% 100%, 320px 100%;
  background-repeat: no-repeat, repeat-x; animation: pg-border-shimmer 7s linear infinite; transition: transform .2s, box-shadow .2s; }
.lbx-open:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(212,175,55,.25); }
.lbx-open i { width: 8px; height: 8px; border-radius: 50%; background: #F5D370; box-shadow: 0 0 8px rgba(245,211,112,.95); animation: nt-breathe 1.6s ease-in-out infinite; }
.lbx-open .caret { transition: transform .25s; }
.lbx-open.open .caret { transform: rotate(180deg); }
.lbx-win { text-align: left; margin-top: 16px; padding: 16px 16px 12px; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--pg-card) padding-box, var(--pg-gold) border-box; background-size: 100% 100%, 320px 100%; background-repeat: no-repeat, repeat-x;
  animation: pg-border-shimmer 7s linear infinite, lbx-in .35s ease; scroll-margin-top: 90px; }
.lbx-win[hidden] { display: none; }
@keyframes lbx-in { from { opacity: 0; transform: translateY(8px); } }
.lbx-top { display: flex; align-items: center; gap: 10px; }
.lbx-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #0e0e0f; border: 1px solid #2c2923; margin: 0 auto; }
.lbx-seg button { border: 0; background: none; cursor: pointer; padding: 9px 24px; border-radius: 999px; font: 700 13px/1 Arial, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #bdb7ab; transition: color .2s, background .2s; }
.lbx-seg button.on { color: #111; background: linear-gradient(90deg, #B8860B, #F5D370, #FFF0B8, #F5D370, #B8860B); background-size: 320px 100%; }
.lbx-close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #34302a; background: #141414; color: #ddd; font-size: 18px; line-height: 1; cursor: pointer; margin-left: -42px; }
.lbx-close:hover { border-color: #D4AF37; color: #F5D370; }
.lbx-views { display: flex; justify-content: center; gap: 4px; margin: 12px 0 10px; border-bottom: 1px solid #2c2923; }
.lbx-views button { border: 0; background: none; cursor: pointer; padding: 9px 14px 10px; font: 700 13.5px/1 Arial, sans-serif; color: #9d988f;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.lbx-views button:hover { color: #e6e1d6; }
.lbx-views button.on { color: #F5D370; border-bottom-color: #D4AF37; }
.lbx-body .lb-tabs { margin-bottom: 4px; }
.lbx-body .lb-list { margin-top: 4px; }
.lb-face.team { background: none; border: 0; border-radius: 0; }
.lb-face.team img { transform: none; object-fit: contain; }
.lbx-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.lbx-search input { flex: 1 1 220px; min-width: 0; font: 15px/1.3 Arial, sans-serif; color: #f0f0f0; background: #0e0e0f; border: 1px solid #34302a; border-radius: 8px; padding: 9px 12px; outline: none; color-scheme: dark; }
.lbx-search input:focus { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.lbx-search span { font-size: 12.5px; color: #8d877d; }
.lbx-tablewrap { max-height: 560px; overflow: auto; border: 1px solid #24211c; border-radius: 10px; scrollbar-width: thin; scrollbar-color: #3a362e transparent; }
.lbx-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 13.5px/1.2 "Roboto Condensed Numbers", Arial, Helvetica, sans-serif; color: #e6e1d6; }
.lbx-table th { position: sticky; top: 0; z-index: 2; background: #121110; cursor: pointer; white-space: nowrap; user-select: none;
  font: 700 11px/1 Arial, sans-serif; letter-spacing: .06em; color: #8d877d; text-align: right; padding: 10px 8px; border-bottom: 1px solid #2c2923; }
.lbx-table th.on { color: #F5D370; }
.lbx-table th .ar { font-size: 8px; margin-left: 3px; }
.lbx-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.045); white-space: nowrap; }
.lbx-table td.on { color: #F5D370; font-weight: 700; }
.lbx-table .rk { text-align: right; color: #6f6a62; width: 28px; cursor: default; }
.lbx-table .nm { text-align: left; position: sticky; left: 0; z-index: 1; background: #0d0d0c; }
.lbx-table th.nm { z-index: 3; background: #121110; cursor: default; }
.lbx-table td.nm { display: flex; align-items: center; gap: 7px; min-width: 170px; }
.lbx-table td.nm b { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.lbx-table td.nm .tm { font-size: 11.5px; color: #8d877d; }
.lbx-table td.nm .lb-logo { width: 18px; height: 18px; object-fit: contain; }
.lbx-table tbody tr:hover td { background: rgba(212,175,55,.06); }
.lbx-table tbody tr:hover td.nm { background: #191714; }
.lbx-none { text-align: center !important; color: #8d877d; padding: 20px !important; }
.lbx-body .sd { margin-top: 6px; }
.lbx-body .sd-conf { animation: none; }
@media (max-width: 640px) {
  .lbx { padding: 0 12px; }
  .lbx-win { padding: 12px 10px 10px; }
  .lbx-seg button { padding: 8px 18px; }
  .lbx-views button { padding: 9px 9px 10px; font-size: 12.5px; }
  .lbx-table td.nm { min-width: 140px; }
  .lbx-table td.nm b { max-width: 120px; }
  .lbx-tablewrap { max-height: 480px; }
}

/* ---------------------------------------------------------- Games: 2 x 2 daily games, then the 2 x 1 arcade */
.game-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
.games-top { margin-top: 4px !important; }
.pg-section-title.small { font-size: 28px; }
.game-card.soon { opacity: 1; }
.game-card.soon .game-art svg { opacity: .82; }
.soon-tag { position: absolute; top: 10px; right: 10px; padding: 5px 10px; border: 1px solid rgba(212,175,55,.55); border-radius: 999px;
  background: rgba(10,10,9,.75); font: 700 10px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F5D370; }
@media (max-width: 640px) {
  .game-grid.two { gap: 12px; }
  .game-grid.two .game-meta { padding: 11px 11px 13px; gap: 4px; }
  .game-grid.two .game-name { font-size: 17px; line-height: 1.2; }
  .game-grid.two .game-desc { font-size: 12.5px; line-height: 1.4; }
  .game-grid.two .game-title { font-size: 15px; bottom: 6px; letter-spacing: .1em; }
  .game-grid.two .game-play { padding: 6px 12px; font-size: 11px; }
  .soon-tag { top: 6px; right: 6px; padding: 4px 7px; font-size: 8.5px; }
  .pg-section-title.small { font-size: 24px; }
}

/* ---------------------------------------------------------- the menu bar: bigger on computers */
@media (min-width: 801px) {
  .site-nav { padding-top: 20px; padding-bottom: 20px; }
  .site-nav .nav-links a { font-size: clamp(18px, 1.55vw, 22px); padding: 6px clamp(12px, 1.1vw, 18px); }
  .site-nav .nav-links a::after { left: clamp(12px, 1.1vw, 18px); right: clamp(12px, 1.1vw, 18px); }
  .site-nav .divider { font-size: clamp(18px, 1.55vw, 22px); }
  .site-nav .site-brand { font-size: clamp(25px, 2vw, 30px); }
  .ba-bell { width: 42px; height: 42px; }
  .ba-bell svg { width: 21px; height: 21px; }
}

/* ---------------------------------------------------------- Portfolio: the Bradley Analytics Book (4:5 pages) */
.pf-book { text-align: center; }
.pf-book-stage { position: relative; width: min(100%, calc(80vh * .8)); aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 12px; overflow: hidden;
  border: 1.5px solid transparent; background: #000 padding-box, var(--pg-gold) border-box; background-size: 100% 100%, 320px 100%;
  animation: pg-border-shimmer 7s linear infinite; }
.pf-book-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pf-bk { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #34302a; background: #141414; color: #F5D370;
  font: 700 18px/1 Arial, sans-serif; cursor: pointer; transition: border-color .2s, background .2s; }
.pf-bk:hover { border-color: #D4AF37; background: rgba(212,175,55,.1); }
.pf-book-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, calc(80vh * .8)); margin: 10px auto 0;
  font-size: 14px; color: #bdb7ab; }
.pf-book-meta .pf-book-link { margin: 0; }
.lbx-open { white-space: nowrap; }
@media (max-width: 640px) { .lbx-open { font-size: 12px; letter-spacing: .09em; padding: 12px 18px; gap: 8px; } }

/* ---------------------------------------------------------- page titles: up close to the tape, level with the side view */
.page-content, .with-sidebar { padding-top: 18px; }
.with-sidebar .page-content { padding-top: 0; min-width: 0; }
.pf-book, .pf-book-bar { max-width: 100%; }
.page-content > h1:first-child, .page-content > h1.group-title:first-child { margin-top: 0; padding-top: 0; line-height: 1.1; }

/* the book's page strip (like the Photos app): every page small, the one shown bigger in the middle */
.pf-book-bar { display: flex; align-items: center; gap: 8px; width: min(100%, 720px); margin: 12px auto 0; }
.pf-strip { flex: 1 1 0; min-width: 0; width: 0; display: flex; align-items: center; gap: 9px; overflow-x: auto; padding: 18px 0; scroll-snap-type: x mandatory; cursor: grab; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pf-strip::-webkit-scrollbar { display: none; }
.pf-strip::before, .pf-strip::after { content: ""; flex: 0 0 calc(50% - 22px); }
.pf-strip.drag { cursor: grabbing; scroll-snap-type: none; }
.pf-th img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pf-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .18s ease; background: #111; }
.pf-shot.on { opacity: 1; }
.pf-shot:not([src]) { display: none; }
.pf-th { will-change: transform; flex: 0 0 auto; width: 44px; height: 55px; padding: 0; border: 1px solid #2c2923; border-radius: 4px; overflow: hidden; background: #1a1916; cursor: pointer; scroll-snap-align: center; opacity: .75; transition: transform .18s ease, opacity .18s, border-color .18s, box-shadow .18s; }
.pf-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-th:hover { opacity: .9; }
.pf-th.on { transform: scale(1.45); opacity: 1; border-color: #D4AF37; box-shadow: 0 0 12px rgba(212,175,55,.4); position: relative; z-index: 1; }
.pf-count b { color: #F5D370; font-family: "Roboto Condensed Numbers", Arial, sans-serif; }

/* ---------------------------------------------------------- Games: the Blacktop window (one big card, animated) */
.bt-card { max-width: 860px; margin: 0 auto; border-radius: 16px; }
.bt-art { aspect-ratio: 21 / 9; border-radius: 14px 14px 0 0; }
.bt-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bt-title { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); text-align: center; pointer-events: none; }
.bt-title span { display: inline-block; font: 900 clamp(38px, 9vw, 92px)/1 "Playfair Display", serif; letter-spacing: .14em; padding-left: .14em;
  background: linear-gradient(90deg, #8a6410 0%, #D4AF37 18%, #FFF0B8 34%, #F5D370 50%, #D4AF37 66%, #B8860B 82%, #8a6410 100%); background-size: 320px 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: bq-brand-shimmer 7s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.85)); }
.bt-meta { gap: 12px; }
.bt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bt-row .game-play { margin-top: 2px; flex: 0 0 auto; }
.bt-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-modes span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.45); color: #F5D370; background: rgba(212,175,55,.06);
  font: 700 12px/1 "Roboto Condensed Numbers", Arial, sans-serif; letter-spacing: .08em; }
@media (max-width: 640px) { .bt-art { aspect-ratio: 16 / 10; } .bt-row { flex-direction: column; gap: 8px; } }

/* ---------------------------------------------------------- the four daily games (shared) */
.gm-back { margin: 0 0 6px !important; font-size: 14px; }
html.bq-js-ready .page-content .gm-back, html.bq-js-ready .page-content :is(.gm-app, .gm-board-box, .gm-modal, .gm-namebox) :is(p, li, img) { opacity: 1; transform: none; transition: none; }
.page-content .gm-app a, .page-content .gm-board-box a { background: none; color: #F5D370; -webkit-text-fill-color: currentColor; animation: none; }
.gm-app { max-width: 900px; margin: 0 auto; padding: 18px; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--pg-card) padding-box, var(--pg-gold) border-box; background-size: 100% 100%, 320px 100%; background-repeat: no-repeat, repeat-x;
  animation: pg-border-shimmer 7s linear infinite; text-align: left; color: #e6e1d6; }
.gm-empty { text-align: center; color: #9d988f; padding: 24px 6px; margin: 0; }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gm-btn { border: 0; cursor: pointer; padding: 11px 22px; border-radius: 999px; font: 700 13.5px/1 Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #111;
  background: linear-gradient(90deg, #B8860B, #F5D370, #FFF0B8, #F5D370, #B8860B); background-size: 320px 100%; animation: bq-brand-shimmer 7s linear infinite; }
.gm-btn.ghost { background: #151515; color: #ddd; border: 1px solid #34302a; animation: none; }
.gm-btn:disabled { opacity: .45; cursor: default; }
.gm-note { font-size: 13.5px; color: #a9a39a; margin: 0; }
.gm-note b { color: #F5D370; }
.gm-board-sec { max-width: 900px; margin-left: auto; margin-right: auto; }
.gm-board { width: 100%; border-collapse: collapse; font: 14.5px/1.3 "Roboto Condensed Numbers", Arial, sans-serif; color: #e6e1d6; }
.gm-board th { font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; color: #8d877d; text-align: right; padding: 8px; border-bottom: 1px solid #2c2923; text-transform: uppercase; }
.gm-board td { text-align: right; padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.gm-board .l { text-align: left; }
.gm-board td.s { color: #F5D370; font-weight: 700; font-size: 16px; }
.gm-board tr.me td { background: rgba(212,175,55,.08); }
.gm-board-note { font-size: 12.5px; color: #8d877d; text-align: center; margin: 10px 0 0 !important; }
.gm-view { cursor: pointer; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(212,175,55,.5); background: none; color: #F5D370; font: 700 11.5px/1 Arial, sans-serif; }
.gm-view:disabled { opacity: .35; cursor: default; }
.gm-shade { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.65); display: flex; align-items: flex-start; justify-content: center; padding: 70px 14px 20px; overflow-y: auto; }
.gm-modal, .gm-namebox { position: relative; width: 100%; max-width: 760px; padding: 20px; border-radius: 14px; border: 1.5px solid transparent;
  background: var(--pg-card) padding-box, var(--pg-gold) border-box; color: #e6e1d6; text-align: left; }
.gm-namebox { max-width: 380px; }
.gm-namebox input { width: 100%; font: 16px/1.3 Arial, sans-serif; color: #f0f0f0; background: #0e0e0f; border: 1px solid #34302a; border-radius: 8px; padding: 10px 12px; color-scheme: dark; }
.gm-modal h3, .gm-namebox h3 { margin: 0 0 12px; font-size: 22px; }
.gm-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #34302a; background: #141414; color: #ddd; font-size: 18px; cursor: pointer; }
.tp-score { font: 700 46px/1 "Roboto Condensed Numbers", Arial, sans-serif; color: #F5D370; text-align: center; margin: 6px 0 10px; }
.tp-score span { display: block; font: 400 13px/1.4 Arial, sans-serif; color: #a9a39a; margin-top: 6px; }
.tp-score.big { font-size: 64px; }

/* Today's Play */
.tp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tp-matchup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 17px/1.2 Arial, sans-serif; }
.tp-team { display: inline-flex; align-items: center; gap: 8px; }
.tp-team img { width: 34px; height: 34px; object-fit: contain; }
.tp-at { color: #8d877d; font-weight: 400; }
.tp-when { color: #a9a39a; font-size: 14px; }
.tp-steps { margin: 6px 0 0; padding-left: 20px; color: #cfc9bd; }
.tp-steps li { margin: 6px 0; }
.tp-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tp-round { font: 700 11.5px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F5D370; }
.tp-title { font-family: "Playfair Display", serif; font-size: 22px; color: #fff; }
.tp-help { font-size: 14px; color: #bdb7ab; margin: 6px 0 10px !important; }
.tp-court-wrap { max-width: 560px; margin: 0 auto; }
.tp-court { width: 100%; height: auto; display: block; border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tp-tok.mine { cursor: grab; }
.tp-tok.cpu { opacity: .9; }
.tp-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.tp-tool { cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1px solid #34302a; background: #141414; color: #ddd; font: 700 13px/1 Arial, sans-serif; }
.tp-tool.on { border-color: #D4AF37; color: #F5D370; background: rgba(212,175,55,.1); }
.tp-result { margin-top: 14px; text-align: center; }
.tp-rtgs { display: flex; justify-content: center; gap: 30px; margin: 6px 0 12px; }
.tp-rtgs div { text-align: center; } .tp-rtgs b { display: block; font: 700 28px/1 "Roboto Condensed Numbers", Arial, sans-serif; color: #fff; } .tp-rtgs span { font-size: 12px; color: #8d877d; letter-spacing: .08em; text-transform: uppercase; }
.tp-four { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tp-four div { border: 1px solid #2c2923; border-radius: 10px; padding: 10px; text-align: center; } .tp-four span { display: block; font-size: 12px; color: #8d877d; } .tp-four b { color: #F5D370; font-size: 20px; }
.tp-final .gm-row { justify-content: center; }
.tp-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tp-mini span { display: block; font-size: 12.5px; color: #a9a39a; margin-bottom: 4px; }
.tp-mini svg { width: 100%; height: auto; border-radius: 8px; }

.pf-book.pf-soft .pf-shot.on { filter: blur(.4px); }