:root {
  
  --gold: #e0453a;
  --gold-dark: #b8322a;
  --acc-rgb: 224, 69, 58;
  --bg: #06140f;
  --bg2: #0a1d15;
  --card: #0f241b;
  --card2: #163327;
  --line: #224434;
  --text: #f0f0f0;
  --muted: #a2a2b8;
  --dim: #7a7a92;
  --good: #4ade80;
  --bad: #f87171;
  --radius: 12px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; }
img { max-width: 100%; }
a { color: var(--gold); }
button { font-family: inherit; }
button, a, [data-pick], [data-slot] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body.is-locked { overflow: hidden; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.wrap-wide { max-width: 1100px; }



.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold);
}
.brand { display: flex; align-items: center; text-decoration: none; min-height: 36px; min-width: 40px; }
.brand-logo { height: 38px; width: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; } 

.brand .brand-game { display: none; height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 767px) {
  .ca-in .brand .brand-logo, .ca-in .brand .brand-fallback { display: none; }
  .ca-in .brand .brand-game { display: block; }
  .ca-in #screen-home .hero { display: none; }
  .ca-in #screen-home .ca-home-spot { margin-top: 14px; } 
}
@media (max-width: 380px) { .ca-in .brand .brand-game { height: 36px; } }
.brand-fallback { font-weight: 900; font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.header-nav { display: flex; align-items: center; gap: 14px; }
.header-nav a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.header-nav .nav-rules {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 12px; border-radius: 10px;
  border: 1.5px solid rgba(var(--acc-rgb), .55); color: var(--gold); background: rgba(var(--acc-rgb), .08);
  font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
@media (hover: hover) { .header-nav .nav-rules:hover { border-color: var(--gold); background: rgba(var(--acc-rgb), .16); color: var(--gold); } }

.header-nav .nav-lb[hidden] { display: none; }
body[data-screen="draft"] .header-nav .nav-lb { display: none; }
@media (hover: hover) { .header-nav a:hover { color: var(--gold); } }
body[data-screen="draft"] .header-nav a { display: none; }
.header-nav .btn-again { display: none; }
.btn-again .lbl-short { display: none; }
@media (max-width: 480px) {
  .header-nav { gap: 6px; }
  .header-nav .btn-again { min-height: 40px; padding: 8px 10px; font-size: 11px; letter-spacing: .3px; }
  .header-nav .icon-btn { width: 40px; height: 40px; }
  .btn-again .lbl-long { display: none; }
  .header-nav .nav-rules { min-height: 40px; padding: 8px 10px; font-size: 10.5px; }
  .btn-again .lbl-short { display: inline; }
  .brand-logo { height: 32px; }
  body[data-screen="draft"] .btn-again > span[aria-hidden] { display: none; } 
}
body[data-screen="draft"] .header-nav .btn-again { display: inline-flex; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
@media (hover: hover) { .icon-btn:hover { color: var(--gold); border-color: var(--gold); } }
.icon-btn .ico-on { display: none; }
.icon-btn.is-on { color: var(--gold); }
.icon-btn.is-on .ico-on { display: block; }
.icon-btn.is-on .ico-off { display: none; }



.screen { display: none; }
.screen.is-active { display: block; animation: fadeUp .25s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }



.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius); border: 2px solid transparent;
  font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--gold); color: #111; }
@media (hover: hover) { .btn-primary:hover { background: var(--gold-dark); } }
.btn-primary:disabled { background: #3a1a17; color: #a0706a; cursor: wait; }
.btn-ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
@media (hover: hover) { .btn-ghost:hover { background: var(--gold); color: #111; } }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 12px; }
.btn-row { display: flex; gap: 10px; margin: 16px 0 10px; }
.btn-row .btn { flex: 1; min-width: 0; }
@media (max-width: 380px) { .btn-row .btn-decide { font-size: 12.5px; letter-spacing: 0; padding-left: 4px; padding-right: 4px; } .btn-row .btn-decide-lbl { gap: 4px; } .btn-row .btn-decide-lock .btn-decide-lbl { padding: 6px 10px; } } 
@media (max-width: 340px) { .btn-row:has(> .btn-decide) { flex-wrap: wrap; } .btn-row .btn-decide { flex-basis: 100%; } } 

.text-link {
  display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; min-height: 36px; margin: 10px auto 0; padding: 8px 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .text-link:hover { border-color: rgba(255, 255, 255, .45); } }
.center { text-align: center; }



.hero { text-align: center; padding: 18px 0 8px; }
.hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); opacity: .85; }
.hero-title { margin: 8px 0 10px; line-height: 1; }
.hero-logo { display: block; margin: 0 auto; width: 100%; max-width: 300px; height: auto; } 
.cast-logo-fx { --logo-fx-img: url(../assets/logos/1000tries.png); } 
.hero-wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 900; letter-spacing: -1px; }
.wm-num { font-size: clamp(64px, 20vw, 104px); color: var(--gold); text-shadow: 0 0 40px rgba(var(--acc-rgb), .35); }
.wm-word { font-size: clamp(30px, 9vw, 48px); color: #fff; }
.hero-pitch { color: #c8c8d8; font-size: 16px; line-height: 1.55; max-width: 520px; margin: 0 auto 14px; } 
.hero-pitch strong { color: var(--gold); font-weight: 900; }

.hero-pitch a, .faq-item p a, .doc p a, .doc li a { padding: 1px 6px; border-radius: 6px; background: rgba(var(--acc-rgb), .12); color: var(--gold); font-weight: 800; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (hover: hover) { .hero-pitch a:hover, .faq-item p a:hover, .doc p a:hover, .doc li a:hover { background: rgba(var(--acc-rgb), .24); color: #fff; } }


.mode-kicker { margin: 20px 2px 14px; font: 900 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); text-align: left; }
.mode-picker { display: grid; gap: 10px; margin: 22px 0 16px; }
.mode-kicker + .mode-picker { margin-top: 0; }

.mode-go { grid-area: go; align-self: center; margin-left: 8px; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; white-space: nowrap; }
#startBtn[hidden] { display: none; }
.mode-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico line" "chips chips";
  column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; width: 100%;
  padding: 14px 16px; border-radius: 14px;
  background: var(--card); border: 2px solid var(--line); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
@media (hover: hover) { .mode-card:hover { border-color: #4a4a66; } }
.mode-card:active { transform: scale(.99); }
.mode-card.is-on { border-color: var(--gold); background: linear-gradient(135deg, rgba(var(--acc-rgb), .18), rgba(var(--acc-rgb), .04)); box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(var(--acc-rgb), .12); }
.mode-ico { grid-area: ico; font-size: 30px; line-height: 1; }
.mode-name { grid-area: name; font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -.3px; }
.mode-card.is-on .mode-name { color: var(--gold); }
.mode-line { grid-area: line; font-size: 14px; font-weight: 700; color: #d6d6e4; }
.mode-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mode-chip { font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px; border-radius: 6px; background: #22223a; color: #b8b8cc; flex: 1 1 auto; text-align: center; white-space: nowrap; }
.mode-card { grid-template-columns: auto 1fr auto; grid-template-areas: "ico name go" "ico line go" "chips chips chips"; }
.mode-card.is-on .mode-chip { background: rgba(var(--acc-rgb), .16); color: var(--gold); }
.mode-tag { position: absolute; top: -9px; right: 12px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; background: var(--gold); color: #111; }


.mode-card.is-spin { border-color: #3b2f6b; background: linear-gradient(135deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .03) 70%), var(--card); }
@media (hover: hover) { .mode-card.is-spin:hover { border-color: #7c5cff; } }
.mode-card.is-spin .mode-name { color: #c4b5fd; }
.mode-card.is-spin .mode-chip { background: rgba(124, 92, 255, .18); color: #c4b5fd; }
.mode-card.is-spin.is-on { border-color: #8b5cf6; background: linear-gradient(135deg, rgba(124, 92, 255, .32), rgba(124, 92, 255, .07) 70%), var(--card); box-shadow: 0 0 0 1px #8b5cf6, 0 8px 28px rgba(124, 92, 255, .28); }
.mode-card.is-spin.is-on .mode-name { color: #fff; }
.mode-tag-spin { background: #7c3aed; color: #fff; }


.mode-card.is-nrlw { border-color: #134e4a; background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(20, 184, 166, .03) 70%), var(--card); }
.mode-card.is-nrlw .mode-name { color: #5eead4; }
.mode-card.is-nrlw .mode-chip { background: rgba(20, 184, 166, .16); color: #5eead4; }
.mode-card.is-nrlw.is-on { border-color: #14b8a6; background: linear-gradient(135deg, rgba(20, 184, 166, .3), rgba(20, 184, 166, .07) 70%), var(--card); box-shadow: 0 0 0 1px #14b8a6, 0 8px 28px rgba(20, 184, 166, .25); }
.mode-card.is-nrlw.is-on .mode-name { color: #fff; }
.mode-tag-nrlw { background: #0d9488; color: #fff; }


.mode-card.is-hard { border-color: #5a1f26; background: linear-gradient(135deg, rgba(220, 38, 38, .16), rgba(220, 38, 38, .03) 70%), var(--card); }
@media (hover: hover) { .mode-card.is-hard:hover { border-color: #b91c1c; } }
.mode-card.is-hard .mode-name { color: #fca5a5; }
.mode-card.is-hard .mode-chip { background: rgba(220, 38, 38, .16); color: #fca5a5; }
.mode-card.is-hard.is-on { border-color: #ef4444; background: linear-gradient(135deg, rgba(220, 38, 38, .28), rgba(220, 38, 38, .06) 70%), var(--card); box-shadow: 0 0 0 1px #ef4444, 0 8px 28px rgba(220, 38, 38, .25); }
.mode-card.is-hard.is-on .mode-name { color: #fff; }
.mode-tag-hard { background: #dc2626; color: #fff; box-shadow: 0 0 12px rgba(220, 38, 38, .55); animation: hardPulse 1.8s ease-in-out infinite; }
@keyframes hardPulse { 0%, 100% { box-shadow: 0 0 8px rgba(220, 38, 38, .45); } 50% { box-shadow: 0 0 18px rgba(239, 68, 68, .8); } }
.mode-diff { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; }
.md-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9a9ab0; }
.md-bar { display: inline-flex; gap: 3px; }
.md-bar i { width: 14px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, #f59e0b, #dc2626); }
.md-bar i:nth-child(1) { background: #f59e0b; } .md-bar i:nth-child(2) { background: #f97316; } .md-bar i:nth-child(3) { background: #ef4444; } .md-bar i:nth-child(4) { background: #dc2626; } .md-bar i:nth-child(5) { background: #b91c1c; }
.md-txt { font-size: 11px; font-weight: 900; color: #f87171; text-transform: uppercase; letter-spacing: .5px; }

.pack-note { font-size: 12px; color: var(--dim); text-align: center; margin: 10px 0 0; }
.pack-note:empty { display: none; }

.promo-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center;
  margin: 22px 0 0; padding: 14px 48px 14px 14px;
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, #1b1633, #120f22); border: 1px solid #3b2f6b;
}
@media (hover: hover) { .promo-card:hover { border-color: var(--gold); } }
.promo-logo { grid-row: 1 / span 3; width: 108px; height: auto; display: block; }
.promo-card > span:not(.promo-arrow) { grid-column: 2; }
.promo-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #a99be0; }
.promo-title { font-size: 17px; font-weight: 900; color: #fff; }
.promo-sub { font-size: 13px; color: #b8b8cc; }
.promo-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--gold); }



.faq { margin: 26px 0 0; }
.faq-title { font-size: 20px; font-weight: 900; margin: 0 0 10px; }
.faq-item { margin-bottom: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--gold); transition: transform .25s, color .25s; }
.faq-item[open] .faq-ico { transform: rotate(45deg); color: #fff; }
.faq-item p { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.6; color: #b8b8cc; }

.faq-fold > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; cursor: pointer; list-style: none; background: var(--card); border: 1px solid var(--line); }
.faq-fold > summary::-webkit-details-marker { display: none; }
.faq-fold > summary .faq-title { flex: 1 1 auto; margin: 0; }
.faq-fold[open] > summary { margin-bottom: 10px; }
.faq-fold[open] > summary .faq-ico { transform: rotate(45deg); color: #fff; }
@media (hover: hover) { .faq-fold > summary:hover { border-color: rgba(var(--acc-rgb), .5); } }



.watch { margin: 26px 0 0; }
.watch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-title { font-size: 20px; font-weight: 900; margin: 0; }
.watch-all { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .watch-all:hover { border-color: rgba(255, 255, 255, .45); } }
.watch-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.watch-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 16px;
  scrollbar-width: none;
}
.watch-track::-webkit-scrollbar { display: none; }

@media (min-width: 600px) { .watch-track { grid-auto-columns: 46%; } }
.vcard {
  display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
@media (hover: hover) { .vcard:hover { transform: translateY(-2px); border-color: var(--gold); } }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplay {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 32px; transform: translate(-50%, -50%);
  border-radius: 9px; background: rgba(255, 0, 0, .9); opacity: 0; transition: opacity .15s;
}
.vplay::after { content: ""; position: absolute; left: 19px; top: 9px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@media (hover: hover) { .vcard:hover .vplay { opacity: 1; } }
.vbody { display: grid; gap: 6px; padding: 12px 14px 14px; }
.vtitle { font-size: 14px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vdate { font-size: 12px; color: var(--muted); font-weight: 600; }

.acast-embed { margin: 18px 0 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.acast-embed iframe { display: block; border: 0; }



.scoreboard {
  position: sticky; top: 58px; z-index: 40;
  background: rgba(14, 14, 26, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.sb-inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px 12px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
.sb-left { display: grid; line-height: 1.25; }
.sb-mode { font-size: 12px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.sb-picks { font-size: 12px; color: var(--muted); font-weight: 600; }
.sb-center { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.sb-total { font-size: clamp(30px, 9vw, 42px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.sb-of { font-size: 14px; font-weight: 700; color: var(--muted); }
.sb-right { text-align: right; }
.btn-again {
  display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 7px 12px; border-radius: 10px;
  background: transparent; border: 1.5px solid rgba(var(--acc-rgb), .55); color: var(--gold);
  font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .btn-again:hover { border-color: var(--gold); background: rgba(var(--acc-rgb), .1); } }
.sb-help { font-size: 13px; font-weight: 800; color: #d8d8e8; }
.sb-help.is-good { color: var(--good); }
.sb-help.is-bad { color: var(--bad); }
@property --bar { syntax: '<color>'; inherits: true; initial-value: #3b5b8a; }
.sb-bar { position: relative; grid-column: 1 / -1; height: 12px; border-radius: 8px; background: #1d1d33; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.sb-fill {
  --bar: #3b5b8a; --glow: rgba(59, 91, 138, .3);
  position: relative; height: 100%; width: 0; border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 55%, #000), var(--bar));
  box-shadow: 0 0 12px var(--glow);
  transition: width 1.1s cubic-bezier(.22, 1.2, .36, 1), --bar .8s, box-shadow .8s, background .8s;
}

.sb-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .16) 14px 22px);
  background-size: 200% 100%; animation: sbSheen 1.6s linear infinite;
}
@keyframes sbSheen { from { background-position: 0 0; } to { background-position: -60px 0; } }
.sb-bar.is-pulse .sb-fill { animation: sbPulse .9s ease .35s; }
@keyframes sbPulse { 0% { filter: brightness(1); } 35% { filter: brightness(1.6); box-shadow: 0 0 22px var(--glow), 0 0 4px #fff; } 100% { filter: brightness(1); } }
.sb-bar.is-levelup { animation: sbShake .5s ease .8s; }
@keyframes sbShake { 0%, 100% { transform: none; } 25% { transform: scaleY(1.5); } 60% { transform: scaleY(.9); } }
.sb-bar[data-stage="hot"] .sb-fill::after { animation-duration: .7s; }
.sb-bar[data-stage="hit"] .sb-fill { box-shadow: 0 0 18px var(--glow); }
.sb-gain {
  position: absolute; top: -4px; transform: translate(-50%, 0); pointer-events: none;
  font-size: 12px; font-weight: 900; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8); opacity: 0;
}
.sb-gain.is-on { animation: sbGain 1.5s ease-out .3s both; }
@keyframes sbGain { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -20px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -28px); } }



.draft-grid { display: grid; gap: 16px; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); }
.panel-meta { font-size: 12px; color: var(--muted); font-weight: 600; }



.pitch {
  display: grid; gap: 8px; padding: 12px 8px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 36px, transparent 36px 72px),
    linear-gradient(180deg, #0f2a17, #0b1f12);
  border: 1px solid #1d3b25;
}
.pitch-row { display: flex; justify-content: center; gap: 6px; }
.slot {
  position: relative; flex: 0 1 84px; min-width: 0; min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; padding: 6px 4px; text-align: center; font: inherit; color: inherit;
}
.slot.is-empty { border: 2px dashed rgba(255, 255, 255, .32); background: rgba(0, 0, 0, .25); }
.slot.is-empty .slot-code { font-size: 16px; font-weight: 900; color: rgba(255, 255, 255, .8); }
.slot.is-empty .slot-pos { font-size: 10px; color: rgba(255, 255, 255, .6); font-weight: 600; }
.slot.is-filled {
  background: var(--club); color: var(--club-text);
  border: 2px solid var(--club-accent);
  box-shadow: inset 0 4px 0 var(--club-accent), 0 4px 12px rgba(0, 0, 0, .35);
}
.slot.is-filled .slot-code { position: absolute; top: 5px; left: 6px; font-size: 9px; font-weight: 900; opacity: .75; }
.slot-abbr { position: absolute; top: 5px; right: 6px; font-size: 9px; font-weight: 900; color: var(--club-accent); }
.slot-name { font-size: 12px; font-weight: 900; line-height: 1.25; margin-top: 10px; max-width: 100%; overflow-x: clip; overflow-y: visible; white-space: nowrap; } 
.slot-tries { font-size: 18px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.slot.is-flash { animation: flash 1s ease; }
@keyframes flash { 0% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.slot.is-tweakable { cursor: pointer; animation: wiggle 1.2s ease-in-out infinite; }
@media (hover: hover) { .slot.is-tweakable:hover { outline: 3px solid var(--bad); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }


.wc.wc-reroll { border-color: #0f766e; background: linear-gradient(160deg, rgba(20, 184, 166, .22), rgba(20, 184, 166, .06)); }
.wc.wc-reroll .wc-left { color: #5eead4; }
.wc.wc-scout { border-color: #b45309; background: linear-gradient(160deg, rgba(245, 158, 11, .22), rgba(245, 158, 11, .06)); }
.wc.wc-scout .wc-left { color: #fcd34d; }
.wc.wc-tweak { border-color: #be185d; background: linear-gradient(160deg, rgba(236, 72, 153, .22), rgba(236, 72, 153, .06)); }
.wc.wc-tweak .wc-left { color: #f9a8d4; }
@media (hover: hover) { .wc.wc-reroll:hover:not(:disabled) { border-color: #2dd4bf; } .wc.wc-scout:hover:not(:disabled) { border-color: #fbbf24; } .wc.wc-tweak:hover:not(:disabled) { border-color: #f472b6; } }
.wc.wc-tweak.is-armed { border-color: var(--bad); background: #2a1116; }
.wc-ico { font-size: 13px; }


.wc { position: relative; overflow: hidden; --wc: var(--gold); --wc-rgb: var(--acc-rgb); }
.wc.wc-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; }
.wc.wc-scout  { --wc: #fbbf24; --wc-rgb: 251, 191, 36; }
.wc.wc-tweak  { --wc: #f472b6; --wc-rgb: 244, 114, 182; }
.wc:not(:disabled):not(.is-spent):not(.is-armed) { animation: wcCharge 2.6s ease-in-out infinite; }
.wc:not(:disabled):not(.is-spent):not(.is-armed)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); animation: wcSweep 4.2s ease-in-out infinite;
}
.wildcards .wc:nth-child(2) { animation-delay: .4s; } .wildcards .wc:nth-child(2)::after { animation-delay: 1.2s; }
.wildcards .wc:nth-child(3) { animation-delay: .8s; } .wildcards .wc:nth-child(3)::after { animation-delay: 2.4s; }
@keyframes wcCharge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wc-rgb), 0); } 50% { box-shadow: 0 0 14px rgba(var(--wc-rgb), .45), inset 0 0 10px rgba(var(--wc-rgb), .15); } }
@keyframes wcSweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.wc .wc-ico { display: inline-block; }
@media (hover: hover) { .wc:hover:not(:disabled) .wc-ico { animation: wcWobble .5s ease; } }
.wc:active:not(:disabled) { transform: scale(.94); }
@keyframes wcWobble { 0%, 100% { transform: none; } 30% { transform: rotate(-14deg) scale(1.2); } 65% { transform: rotate(10deg) scale(1.1); } }
.wc.is-armed { animation: wcArmed .9s ease-in-out infinite; }
@keyframes wcArmed { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .0); } 50% { box-shadow: 0 0 0 3px rgba(248, 113, 113, .35), 0 0 16px rgba(248, 113, 113, .5); } }


.wc.just-used { animation: wcSpent .9s ease both; }
@keyframes wcSpent {
  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--wc-rgb), .8); filter: brightness(1.8); }
  30% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(var(--wc-rgb), 0), 0 0 26px rgba(var(--wc-rgb), .8); }
  100% { opacity: .3; transform: none; box-shadow: none; filter: none; }
}


.wc-burst { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; pointer-events: none; --wc: var(--gold); --wc-rgb: var(--acc-rgb); }
.wc-burst-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; }
.wc-burst-scout  { --wc: #fbbf24; --wc-rgb: 251, 191, 36; }
.wc-burst-tweak  { --wc: #f472b6; --wc-rgb: 244, 114, 182; }
.wc-burst::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(var(--wc-rgb), .28), rgba(7, 7, 11, .35) 55%, transparent 80%); animation: wcbFade 1.3s ease both; }
.wcb-ring { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--wc); opacity: 0; animation: wcbRing 1s cubic-bezier(.2, .7, .3, 1) both; }
.wcb-ring2 { animation-delay: .15s; border-width: 2px; }
.wcb-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 28px 16px; border-radius: 20px;
  background: linear-gradient(160deg, #1d1a36, #0f0d1d); border: 2px solid var(--wc);
  box-shadow: 0 0 0 4px rgba(var(--wc-rgb), .18), 0 0 40px rgba(var(--wc-rgb), .55), 0 20px 50px rgba(0, 0, 0, .6);
  animation: wcbCard 1.3s cubic-bezier(.2, .9, .3, 1.2) both; max-width: calc(100vw - 48px); text-align: center;
}
.wcb-ico { font-size: 46px; line-height: 1; animation: wcbIco 1.3s ease both; }
.wc-burst-reroll .wcb-ico { animation-name: wcbSpin; }
.wcb-title { font: 900 26px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.3px; color: #fff; text-transform: uppercase; font-style: italic; }
.wcb-sub { font: 700 13px/1.3 Inter, system-ui, sans-serif; color: var(--wc); }
.wcb-sub:empty { display: none; }
@keyframes wcbFade { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wcbRing { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes wcbCard { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 22% { opacity: 1; transform: scale(1.08) rotate(1deg); } 34%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92) translateY(-14px); } }
@keyframes wcbIco { 0% { transform: scale(.2); } 30% { transform: scale(1.35); } 45%, 100% { transform: scale(1); } }
@keyframes wcbSpin { 0% { transform: scale(.2) rotate(-180deg); } 35% { transform: scale(1.3) rotate(200deg); } 55%, 100% { transform: scale(1) rotate(360deg); } }


.offer-cards.is-rerolled .pcard { animation: rerollIn .55s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes rerollIn { 0% { opacity: 0; transform: perspective(700px) rotateX(-75deg) translateY(-14px); } 60% { opacity: 1; transform: perspective(700px) rotateX(10deg); } 100% { transform: none; } }


.tries-badge.is-popping { display: inline-block; animation: triesPop .7s ease both; }
.tries-badge.is-popping strong { color: var(--gold); text-shadow: 0 0 12px rgba(var(--acc-rgb), .8); }
@keyframes triesPop { 0% { transform: scale(.5); opacity: 0; } 45% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }



.pp-intro { font-size: 13px; color: #c0c0d0; margin: 0 0 10px; }
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.pp-grid.is-four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .pp-grid.is-four { grid-template-columns: repeat(4, 1fr); } }
.pp-btn {
  position: relative; display: grid; justify-items: center; gap: 1px; padding: 12px 6px; min-height: 64px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, rgba(124, 92, 255, .22), rgba(124, 92, 255, .06)); border: 1.5px solid #6d4fd8; color: #fff;
}
.pp-code { font-size: 22px; font-weight: 900; line-height: 1; }
.pp-name { font-size: 11px; font-weight: 700; color: #c4b5fd; }
.pp-count { position: absolute; top: -8px; right: -4px; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 999px; background: #8b5cf6; color: #fff; text-transform: uppercase; }
@media (hover: hover) { .pp-btn:hover { border-color: #a78bfa; background: rgba(124, 92, 255, .3); } }
.pp-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.slot.is-choose { cursor: pointer; border-color: rgba(167, 139, 250, .8); background: rgba(124, 92, 255, .16); }
.slot.is-choose .slot-code { color: #c4b5fd; }
.slot.is-chosen { border: 2px solid #a78bfa; background: rgba(124, 92, 255, .3); box-shadow: 0 0 16px rgba(139, 92, 246, .55); }


.remove-mode {
  display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(236, 72, 153, .14), rgba(236, 72, 153, .03)); border: 1.5px dashed #be185d;
}
.rm-ico { font-size: 30px; line-height: 1; }
.rm-title { margin: 6px 0 0; font-size: 17px; font-weight: 900; color: #fff; }
.rm-sub { margin: 0 0 4px; font-size: 13px; color: #d6c3d0; max-width: 320px; }
.rm-arrow { font-size: 26px; color: #f472b6; animation: moreBob 1.2s ease-in-out infinite; margin-bottom: 6px; }
.remove-mode .btn { max-width: 260px; min-height: 42px; }
.pitch.is-tweaking { outline: 2px dashed #ec4899; outline-offset: 4px; }

.share-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; align-items: end; }
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.share-opt-img { display: block; width: 100%; max-width: 170px; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.share-opt-lbl { text-align: center; line-height: 1.25; }
.share-opt-lbl b { display: block; font-size: 14px; color: #fff; }
.share-opt-lbl small { font-size: 11px; color: var(--muted); }
.share-opt .btn { width: 100%; margin: 0; }
.share-preview { display: block; width: 100%; max-width: 300px; margin: 10px auto 4px; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); }


.btn-res { gap: 8px; border: 2px solid transparent; white-space: nowrap; }
@media (max-width: 480px) { .btn-res { font-size: 14px; padding: 12px 10px; gap: 6px; letter-spacing: .3px; } #results .panel-meta { white-space: nowrap; } #results .panel-title { font-size: 12px; } }
.btn-res-again { background: var(--gold); color: #111; }
.btn-res-share { background: #16a34a; color: #fff; }
.btn-res-mode { background: #14141f; color: var(--gold); border-color: var(--gold); margin-top: 2px; }

.res-acts { display: grid; gap: 10px; margin: 16px 0 10px; }
.res-acts .btn-res-again { min-height: 56px; font-size: 17px; }
.res-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-two .btn-res-mode { margin-top: 0; }
@media (max-width: 480px) { .res-acts .btn-res-again { font-size: 16px; } }

.panel-head.is-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
#results .panel-head.is-stack .panel-meta { white-space: normal; }
@media (hover: hover) {
  .btn-res-again:hover { background: var(--gold-dark); }
  .btn-res-share:hover { background: #15803d; }
  .btn-res-mode:hover { background: rgba(var(--acc-rgb), .12); }
}



.slot.is-preview { border-color: rgba(var(--acc-rgb), .7); background: rgba(var(--acc-rgb), .1); }
.slot.is-preview .slot-code { color: var(--gold); }
.pitch.is-placing .slot.is-empty:not(.is-target) { opacity: .35; }
.pitch.is-placing .slot.is-filled { opacity: .55; }
.slot.is-target {
  cursor: pointer; border: 2px solid var(--gold); background: rgba(var(--acc-rgb), .2);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .25), 0 0 22px rgba(var(--acc-rgb), .55);
  animation: targetPulse 1.1s ease-in-out infinite;
}
.slot.is-target .slot-code, .slot.is-target .slot-pos { color: #fff; }
.slot.is-target::after {
  content: "Place here"; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #111;
}
@media (hover: hover) { .slot.is-target:hover { background: rgba(var(--acc-rgb), .38); transform: scale(1.05); } }
@keyframes targetPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .25), 0 0 16px rgba(var(--acc-rgb), .45); } 50% { box-shadow: 0 0 0 5px rgba(var(--acc-rgb), .35), 0 0 28px rgba(var(--acc-rgb), .75); } }
.pcard.is-selected, .srow.is-selected { outline: 3px solid var(--gold); outline-offset: 2px; }
.place-hint { color: var(--gold); font-weight: 900; }



.wildcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wc {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; min-height: 52px;
  border-radius: 10px; border: 1.5px solid #3b2f6b; background: #17132b; color: #fff; cursor: pointer; text-align: center;
}
@media (hover: hover) { .wc:hover:not(:disabled) { border-color: var(--gold); } }
.wc:disabled { opacity: .4; cursor: not-allowed; }
.wc.is-spent { opacity: .3; }
.wc.is-armed { border-color: var(--bad); background: #2a1116; opacity: 1; }
.wc-label { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: 12px; font-weight: 900; line-height: 1.15; text-align: center; }
.wc-left { font-size: 10px; color: #a99be0; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

.tweak-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  background: #2a1116; border: 1px solid var(--bad); font-size: 13px; color: #fecaca;
}



.offer-cards { display: grid; gap: 10px; }
.pcard {
  display: grid; grid-template-columns: 1fr; width: 100%; padding: 0; overflow: hidden; text-align: left;
  border-radius: 14px; border: 2px solid var(--club); background: var(--card2); color: var(--text); cursor: pointer;
  animation: dealIn .35s ease both;
  transition: transform .12s, box-shadow .15s;
}

@media (hover: hover) { .pcard:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 2px var(--gold); } }
.pcard:disabled { opacity: .5; cursor: not-allowed; }
@keyframes dealIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.pcard-plate {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--club); color: var(--club-text);
  border-left: 8px solid var(--club-accent);
}
.pcard-abbr { font-size: 13px; font-weight: 900; letter-spacing: 1px; padding: 2px 7px; border-radius: 5px; background: var(--club-accent); color: var(--club); }
.pcard-club { font-size: 13px; font-weight: 800; line-height: 1.15; min-width: 0; text-wrap: balance; } 
.pcard-body { display: grid; gap: 6px; padding: 12px 14px 4px; }
.pcard-name { font-size: 20px; font-weight: 900; line-height: 1.15; }
.pcard-meta, .srow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pcard-span { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 4px; }

.pcard-nats { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 2px; }
.pcard-nats i { display: inline-grid; place-items: center; min-width: 26px; height: 15px; padding: 0 3px; border-radius: 3px; font: 900 8px/1 'Inter', sans-serif; font-style: normal;
  letter-spacing: .2px; color: var(--n2); background: var(--n1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

.pcard-dc { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(58, 120, 181, .18); border: 1px solid rgba(58, 120, 181, .6); color: #cfe3ff; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.chip { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 4px; background: #2a2a44; color: #c7d2fe; letter-spacing: .3px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 12px; }
.pcard-cta { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.tries-badge { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tries-badge strong { font-size: 18px; color: #6b6b85; font-weight: 900; margin-right: 2px; }
.tries-badge.is-revealed strong { color: var(--gold); }



.reel { display: grid; grid-template-columns: 1fr auto 2fr; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.reel-box {
  display: grid; align-content: center; gap: 2px; height: 76px; overflow: hidden; padding: 8px 12px; border-radius: 12px;
  background: var(--bg2); border: 2px solid var(--line); text-align: center;
}
.reel-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.reel-val {
  font-size: 17px; font-weight: 900; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-year .reel-val { font-variant-numeric: tabular-nums; }
.reel-x { align-self: center; color: var(--dim); font-size: 22px; }
.reel.is-landed .reel-box:first-child { border-color: var(--gold); }
.reel.is-landed .reel-box:first-child .reel-val { color: var(--gold); }
.reel-year .reel-val { font-size: 24px; }
.reel-club[style] { background: var(--club); border-color: var(--club-accent); color: var(--club-text); }
.reel-club[style] .reel-lbl { color: var(--club-text); opacity: .7; }


.sort-toggle { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.sort-btn {
  display: grid; gap: 1px; justify-items: center; padding: 8px 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 900;
}
.sort-btn + .sort-btn { border-left: 1px solid var(--line); }
.sort-btn .sort-dir { font-size: 11px; font-weight: 700; opacity: .8; }
.sort-btn.is-on { background: rgba(var(--acc-rgb), .16); color: var(--gold); }
@media (hover: hover) { .sort-btn:hover:not(.is-on) { color: #fff; } }
.squad-group {
  position: sticky; top: 0; z-index: 1; padding: 6px 4px 4px; margin-top: 2px;
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  background: var(--card);
}
.squad-wrap { position: relative; }
.squad-wrap::after {
  content: ""; position: absolute; left: 0; right: 6px; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0), var(--card) 85%); transition: opacity .2s;
}
.squad-wrap.at-end::after, .squad-wrap.no-scroll::after { opacity: 0; }
.squad-more {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #111;
  font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5); animation: moreBob 1.4s ease-in-out infinite; transition: opacity .2s;
}
.squad-wrap.at-end .squad-more, .squad-wrap.no-scroll .squad-more, .squad-wrap.scrolled .squad-more { opacity: 0; }
@keyframes moreBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 3px); } }
.squad::-webkit-scrollbar { width: 6px; }
.squad::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb), .55); border-radius: 3px; }
.squad::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 3px; }
.squad { scrollbar-color: rgba(var(--acc-rgb), .55) rgba(255, 255, 255, .05); scrollbar-width: thin; }
.squad-group-fixed { position: static; background: none; padding: 2px 2px 6px; }
.squad { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-left: 6px solid var(--club);
}
@media (hover: hover) { .srow:hover:not(:disabled) { border-color: var(--gold); border-left-color: var(--club); background: #232338; } }
.srow:disabled { opacity: .5; cursor: not-allowed; }
.srow-main { display: grid; gap: 3px; min-width: 0; }
.srow-name { font-size: 15px; font-weight: 800; }
.note { font-size: 12px; color: var(--muted); margin: 0 0 10px; }



.reveal {
  display: grid; justify-items: center; gap: 2px; padding: 26px 16px; border-radius: 14px;
  background: var(--club); color: var(--club-text); border: 3px solid var(--club-accent);
  animation: dealIn .3s ease both;
}
.reveal-name { font-size: 18px; font-weight: 900; text-align: center; }
.reveal-num { font-size: 64px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; animation: pop .5s ease both .1s; }
.reveal-lbl { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .8; text-align: center; text-wrap: balance; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }



.decision { text-align: center; padding: 8px 4px; }
.decision-big { font-size: 34px; font-weight: 900; color: var(--bad); margin: 4px 0; }
.decision p { color: #c8c8d8; }

.decision.is-over .decision-big { color: var(--good); }
.decision.is-over .decision-big small { font-size: 16px; font-weight: 800; color: #c8c8d8; }

.decision-more { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(244, 114, 182, .55);
  background: rgba(236, 72, 153, .12); color: #f9a8d4; font: 800 12.5px/1.2 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .decision-more:hover { border-color: #f472b6; color: #fff; } }



.sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.sheet-body {
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  position: relative; width: 100%; max-width: 480px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 2px solid var(--gold); border-radius: 18px 18px 0 0;
  animation: sheetUp .22s ease both;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-title { font-size: 18px; font-weight: 900; margin: 0 0 2px; }
.sheet-sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

.chooser-card { overflow: hidden; border-radius: 14px; border: 2px solid var(--club); background: var(--card2); margin-bottom: 14px; }
.chooser-card .pcard-plate { display: flex; }
.chooser-name { display: block; padding: 10px 14px 12px; font-size: 20px; font-weight: 900; }
.chooser-card.is-goat { border-color: var(--gold); }
.chooser-card.is-goat .pcard-plate { background: linear-gradient(135deg, #7a5a12, #f1c073 40%, #fff1c4 55%, #f1c073 70%, #7a5a12); color: #1a1204; }
.chooser-card.is-goat .chooser-name { color: var(--gold); }
.chooser-q { margin: 0 0 10px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.chooser-spots {
  display: flex; justify-content: center; gap: 12px; padding: 18px 12px 22px; margin-bottom: 12px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 30px, transparent 30px 60px), linear-gradient(180deg, #0f2a17, #0b1f12);
  border: 1px solid #1d3b25;
}
.chooser-spot {
  position: relative; flex: 0 1 120px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 2px solid var(--gold); background: rgba(var(--acc-rgb), .2); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .25), 0 0 18px rgba(var(--acc-rgb), .5);
  animation: targetPulse 1.1s ease-in-out infinite;
}
.chooser-spot:active { transform: scale(.96); background: rgba(var(--acc-rgb), .38); }
.cs-code { font-size: 26px; font-weight: 900; line-height: 1; }
.cs-pos { font-size: 12px; font-weight: 700; opacity: .85; }
.cs-tag {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--gold); color: #111;
}
.chooser-back { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-height: 38px; margin: 10px auto 0; padding: 8px 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
@media (hover: hover) { .chooser-back:hover { border-color: rgba(255, 255, 255, .45); } }

.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 300; transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: #242438; border: 1px solid var(--gold); color: #fff; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }



.result-hero { text-align: center; padding: 22px 16px 18px; border-radius: 18px; margin-top: 4px; }
.result-hero.is-win { background: radial-gradient(circle at 50% 0, rgba(var(--acc-rgb), .28), rgba(var(--acc-rgb), .04) 70%); border: 2px solid var(--gold); }
.result-hero.is-fail { background: radial-gradient(circle at 50% 0, rgba(248, 113, 113, .18), rgba(248, 113, 113, .03) 70%); border: 2px solid #5a2630; }
.result-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }

.result-total { display: grid; justify-items: center; margin: 4px 0 2px; }
.rt-num {
  font-size: clamp(88px, 24vw, 150px); font-weight: 900; line-height: .95; letter-spacing: -3px; font-variant-numeric: tabular-nums; 
  padding: 0 .12em; 
  
  background: linear-gradient(180deg, #ffc2ba 0%, var(--gold) 45%, var(--gold-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(var(--acc-rgb), .25);
}
.rt-of { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #b8b8cc; }

.result-title {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 4px; padding: 7px 16px; border-radius: 999px;
  font-size: clamp(16px, 4.6vw, 20px); font-weight: 900; line-height: 1.1; letter-spacing: .8px; text-transform: uppercase;
}
.is-fail .result-title { background: rgba(248, 113, 113, .16); color: #fca5a5; border: 1.5px solid rgba(248, 113, 113, .55); }
.is-win .result-title { background: rgba(74, 222, 128, .16); color: #86efac; border: 1.5px solid rgba(74, 222, 128, .55); }
.result-sub { color: #c8c8d8; margin: 10px 0 0; }
.result-luck { display: block; width: fit-content; margin: 12px auto 0; max-width: 36ch; padding: 7px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: #d6d6e4; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.result-luck.is-lucky { color: #bbf7d0; background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .4); }
.result-luck.is-tough { color: #cbd5e1; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .35); }

.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rrow {
  display: grid; grid-template-columns: 34px 46px 1fr auto; align-items: center; gap: 8px;
  padding: 0 12px 0 0; border-radius: 10px; overflow: hidden;
  background: var(--card2); border: 1px solid var(--line);
}
.rrow-code { font-size: 11px; font-weight: 900; color: var(--muted); text-align: center; }
.rrow-club {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  background: var(--club); color: var(--club-text); border-left: 4px solid var(--club-accent);
  font-size: 11px; font-weight: 900; padding: 10px 0;
}
.rrow.is-empty .rrow-club { display: none; }
.rrow.is-empty { grid-template-columns: 34px 1fr auto; padding: 10px 12px 10px 0; color: var(--dim); }
.rrow-name { font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 8px 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 5px; line-height: 1.25; }
.rrow-tries { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rrow.is-best { border-color: var(--gold); }
.best-tag { font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: var(--gold); color: #111; white-space: nowrap; line-height: 1.2; }
.rsum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.rsum span { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.rsum strong { font-size: 24px; font-weight: 900; color: var(--gold); }
#results .panel { margin-top: 18px; }



.cp-partner { margin: 18px 0 0; }
.cp-partner-link { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.cp-partner-link img { display: block; width: 100%; height: auto; }

.cp-takeover {
  position: fixed; inset: 0; z-index: 400; padding: 16px; height: 100vh; height: 100dvh; overscroll-behavior: contain; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92);
}
.cp-takeover-link { display: block; max-width: 480px; border-radius: 16px; overflow: hidden; }

.cp-takeover-link img { display: block; width: auto; height: auto; max-width: min(100%, 480px); max-width: min(calc(100vw - 32px), 480px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
.cp-takeover-bar { width: 100%; max-width: 480px; height: 6px; margin-top: 8px; border-radius: 4px; background: #333; overflow: hidden; }
.cp-takeover-fill { height: 100%; width: 100%; background: var(--gold); transition: width .1s linear; }
.cp-takeover-label { margin-top: 6px; font-size: 11px; color: #888; }



.nf { text-align: center; padding-top: 40px; padding-bottom: 20px; }
.nf-code { font-size: clamp(96px, 30vw, 160px); font-weight: 900; line-height: 1; color: var(--gold); font-style: italic; letter-spacing: -4px; text-shadow: 0 0 40px rgba(var(--acc-rgb), .3); }
.nf-title { font-size: clamp(30px, 8vw, 40px); font-weight: 900; margin: 6px 0 8px; }
.nf-sub { color: #c0c0d0; max-width: 380px; margin: 0 auto 22px; }
.nf-btn { max-width: 360px; }



.site-footer { margin-top: 28px; padding: 18px 16px 32px; text-align: center; border-top: 1px solid #1a1a2a; }
.socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; }
.socials a { color: var(--gold); opacity: .85; }
@media (hover: hover) { .socials a:hover { opacity: 1; } }
.footer-links { font-size: 12px; color: var(--dim); margin: 0 0 10px; }
.footer-links a { color: #9a9ab0; text-decoration: none; }
@media (hover: hover) { .footer-links a:hover { color: var(--gold); } }
.footer-copy { font-size: 11px; font-weight: 600; color: #78788e; margin: 0 0 6px; }
.footer-legal { font-size: 11px; color: #78788e; max-width: 620px; margin: 0 auto; line-height: 1.6; text-wrap: pretty; }



.doc h1 { font-size: clamp(28px, 7vw, 38px); font-weight: 900; margin: 12px 0 4px; }
.doc .updated { font-size: 12px; color: var(--dim); margin: 0 0 20px; }
.doc h2 { font-size: 15px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin: 26px 0 8px; }
.doc p, .doc li { color: #c0c0d0; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: #fff; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.doc td { color: #c0c0d0; }

@media (max-width: 560px) {
  .doc thead { display: none; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .doc td { padding: 2px 0; border: 0; }
  .doc td:first-child { margin-bottom: 2px; color: #fff; font-size: 15px; }
  .doc td[data-l]::before { content: attr(data-l) ": "; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
}
.doc .cta { margin-top: 26px; }



.how-it-works {
  margin: 20px 0 0; padding: 16px 14px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #121226, #0d0d1a); border: 1px solid #25254a;
}
.hiw-title { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; margin-bottom: 12px; }
.hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hiw-tile {
  padding: 10px 10px 9px; border-radius: 10px; text-align: center;
  background: rgba(var(--acc-rgb), .07); border: 1px solid rgba(var(--acc-rgb), .18);
}
.hiw-ico { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.hiw-name { font-size: 14px; font-weight: 800; color: var(--gold); margin-bottom: 2px; }
.hiw-desc { font-size: 12.5px; color: #a0a0b8; line-height: 1.4; }
.hiw-goal {
  padding: 10px 14px; border-radius: 10px; text-align: center;
  background: rgba(var(--acc-rgb), .07); border: 1px solid rgba(var(--acc-rgb), .2);
}
.hiw-goal-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.hiw-goal-text { font-size: 16px; font-weight: 900; color: #fff; }
.hiw-foot { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
#homeAd:not(:empty) { margin-top: 4px; }

.rules-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin: 14px auto 0; padding: 12px 16px;
  border-radius: 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--acc-rgb), .14), rgba(var(--acc-rgb), .04));
  border: 1.5px solid rgba(var(--acc-rgb), .45);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
@media (hover: hover) { .rules-btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--acc-rgb), .15); } }
.rules-ico { font-size: 24px; line-height: 1; }
.rules-txt { display: grid; flex: 1; line-height: 1.25; text-align: left; }
.rules-txt strong { font-size: 15px; font-weight: 900; color: var(--gold); }
.rules-txt small { font-size: 12px; color: var(--muted); font-weight: 600; }
.rules-arrow { font-size: 20px; color: var(--gold); transition: transform .15s; }
@media (hover: hover) { .rules-btn:hover .rules-arrow { transform: translateX(3px); } }



.sheet.is-rules { align-items: center; padding: 16px; }
.sheet.is-rules .sheet-body {
  max-width: 640px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 18px;
  border: 1px solid var(--gold); padding: 22px 18px 18px;
}
.sheet-x {
  position: sticky; top: 0; float: right; z-index: 2; width: 38px; height: 38px; margin: -8px -6px 0 8px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .sheet-x:hover { border-color: var(--gold); color: var(--gold); } }
.rules-pop h1 { margin-top: 0; }
.rules-pop table { display: block; overflow-x: auto; }



.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 8px 14px;
  border-radius: 10px; border: 1.5px solid var(--gold); color: var(--gold);
  font-size: 13px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
}
@media (hover: hover) { .back-link:hover { background: var(--gold); color: #111; } }
.header-nav .nav-play {
  padding: 7px 14px; border-radius: 10px; background: var(--gold); color: #111; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
}
@media (hover: hover) { .header-nav .nav-play:hover { background: var(--gold-dark); color: #111; } }



.sheet-grab { width: 48px; height: 4px; border-radius: 2px; background: #2a2a4a; margin: 0 auto 18px; }
.sheet-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 6px; }
.sheet-title.center, .sheet-sub.center { text-align: center; }
.sheet-gap { margin-top: 10px; }


.sheet.is-confirm .sheet-backdrop { background: rgba(5, 5, 10, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: wcbFade2 .2s ease both; }
@keyframes wcbFade2 { from { opacity: 0; } to { opacity: 1; } }
.sheet.is-confirm .sheet-body {
  overflow-x: hidden; text-align: center; padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--acc-rgb), .16), transparent 60%), linear-gradient(180deg, #1b1830, #0f0d1d);
  border: 2px solid var(--gold); border-bottom: 0;
  box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .12), 0 -10px 40px rgba(var(--acc-rgb), .18);
}
.confirm-ico {
  width: 64px; height: 64px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 30px;
  border-radius: 50%; border: 2px solid var(--gold); background: rgba(var(--acc-rgb), .12);
  box-shadow: 0 0 0 5px rgba(var(--acc-rgb), .1), 0 0 24px rgba(var(--acc-rgb), .4);
  animation: confirmIco .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes confirmIco { 0% { transform: scale(.3) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sheet.is-confirm .sheet-title { font-size: 24px; line-height: 1.15; font-style: italic; text-transform: uppercase; letter-spacing: -.3px; margin: 2px 0 6px; }
.sheet.is-confirm .sheet-sub { font-size: 14px; margin-bottom: 18px; }
.sheet.is-confirm .btn { min-height: 52px; font-size: 16px; border-radius: 12px; }
.sheet.is-confirm .btn-primary { box-shadow: 0 6px 22px rgba(var(--acc-rgb), .3); }

@media (min-width: 720px) {
  .sheet.is-confirm { align-items: center; padding: 24px; }
  .sheet.is-confirm .sheet-body {
    max-width: 440px; padding: 28px 28px 24px; border-radius: 22px; border-bottom: 2px solid var(--gold);
    box-shadow: 0 0 0 5px rgba(var(--acc-rgb), .12), 0 0 50px rgba(var(--acc-rgb), .22), 0 30px 70px rgba(0, 0, 0, .6);
    animation: confirmIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
  }
  .sheet.is-confirm .sheet-grab { display: none; }
}
@keyframes confirmIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }


.yt-sub {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 14px 10px 10px; box-sizing: border-box;
  border-radius: 14px; background: #FF0000; color: #fff; text-decoration: none; text-align: left;
  box-shadow: 0 6px 22px rgba(255, 0, 0, .3); transition: transform .12s, background .15s;
}
@media (hover: hover) { .yt-sub:hover { background: #e00000; transform: translateY(-1px); } }
.yt-sub:active { transform: scale(.98); }
.yt-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; background: #fff; }
.yt-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.yt-kicker { font-size: 11px; font-weight: 700; opacity: .85; }
.yt-label { font-size: 15px; font-weight: 900; line-height: 1.2; }
.yt-logo { width: 30px; height: 21px; flex-shrink: 0; }



.goat { font-style: normal; }
.pcard.is-goat, .reveal.is-goat, .slot.is-goat, .rrow.is-goat, .srow.is-goat {
  --goat: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%);
}
.pcard.is-goat { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(241, 192, 115, .35); }
.pcard.is-goat .pcard-plate { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-left-color: #1a1204; animation: goatShine 3s linear infinite; }
.pcard.is-goat .pcard-abbr { background: #1a1204; color: var(--gold); }
.pcard.is-goat .pcard-name { color: var(--gold); }
.slot.is-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; box-shadow: 0 0 18px rgba(241, 192, 115, .55); animation: goatShine 3s linear infinite; }
.slot.is-goat .slot-abbr { color: #1a1204; font-size: 15px; top: 2px; right: 4px; line-height: 1; }
.reveal.is-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; animation: dealIn .3s ease both, goatShine 3s linear infinite; }
.rrow.is-goat { border-color: var(--gold); background: linear-gradient(90deg, rgba(241, 192, 115, .22), var(--card2) 70%); }
.rrow.is-goat .rrow-club { background: var(--goat); color: #1a1204; border-left-color: #1a1204; }
.rrow.is-goat .rrow-name, .rrow.is-goat .rrow-tries { color: var(--gold); }
.srow.is-goat { border-color: var(--gold); background: linear-gradient(90deg, rgba(241, 192, 115, .2), var(--card2) 75%); }
.srow.is-goat .srow-name { color: var(--gold); }
@keyframes goatShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }



@media (max-width: 899px) {
  .wrap-wide.draft-grid { padding-top: 12px; gap: 12px; }
  .panel { padding: 12px; border-radius: 14px; }
  .panel-head { margin-bottom: 8px; }
  .wildcards { gap: 6px; margin-bottom: 8px; }
  .wc { min-height: 40px; padding: 5px 4px; }
  .wc-label { font-size: 11.5px; line-height: 1.2; }
  .offer-cards { gap: 8px; }
  .pcard { grid-template-columns: 1fr auto; border-radius: 12px; }
  .pcard-plate { grid-column: 1 / -1; padding: 6px 12px; border-left-width: 6px; }
  .pcard-abbr { font-size: 11px; }
  .pcard-club { font-size: 12px; }
  .pcard-body { padding: 8px 4px 9px 12px; gap: 4px; }
  .pcard-name { font-size: 17px; }
  .pcard-foot { padding: 8px 12px 9px 4px; align-self: center; }
  .pcard-cta { display: none; }
  .reel { margin-bottom: 8px; gap: 6px; }
  .reel-box { height: 70px; padding: 6px 10px; }
  .reel-val { font-size: 14px; line-height: 1.15; }
  .reel-club .reel-val { font-size: 14px; }
  .reel-year .reel-val { font-size: 20px; }
  .squad { gap: 5px; max-height: 58vh; }
  .srow { padding: 7px 10px; }
  .srow-name { font-size: 14px; }
  .reveal { padding: 18px 12px; }
  .reveal-num { font-size: 52px; }
  .sb-inner { padding: 8px 16px 10px; row-gap: 6px; }
}


@media (max-width: 899px) {
  #screen-home .wrap { padding-top: 6px; }
  .hero { padding: 6px 0 2px; }
  .hero-title { margin: 2px 0 6px; }
  .hero-logo { max-width: 165px; }
  .hero-pitch { font-size: 14px; line-height: 1.45; max-width: 340px; }
  .mode-picker { gap: 8px; margin: 12px 0 10px; }
  .mode-card { padding: 10px 12px; column-gap: 10px; }
  .mode-ico { font-size: 24px; }
  .mode-name { font-size: 20px; }
  .mode-line { font-size: 13px; }
  .mode-chips { margin-top: 6px; }
  .mode-chip { font-size: 11px; padding: 2px 7px; }
  #startBtn { min-height: 52px; font-size: 17px; letter-spacing: 1px; }
}



@media (min-width: 900px) {
  .draft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; padding-top: 20px; }
  .offer-panel { position: sticky; top: 150px; }
  .offer-cards { gap: 12px; }
  .slot { flex-basis: 108px; min-height: 84px; }
  .slot-name { font-size: 14px; }
  .slot-tries { font-size: 22px; }
  .pitch { gap: 10px; padding: 16px 10px; }
  .pitch-row { gap: 10px; }
  
  .mode-picker { gap: 12px; }
  .mode-card { padding: 16px 18px; }
  .promo-logo { width: 140px; }
  .wrap:not(.wrap-wide) { max-width: 760px; }
}

@media (max-width: 380px) {
  .slot { min-height: 62px; }
  .slot-name { font-size: 10.5px; }
  .slot-tries { font-size: 15px; }
  .pitch-row { gap: 4px; }
  .sb-help { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


@keyframes wcBonusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), 0); } 50% { box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .22); } }
@media (prefers-reduced-motion: reduce) { .wc.wc-bonus { animation: none; } }


.btn-decide { position: relative; overflow: hidden; border-width: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .12s ease, box-shadow .12s ease; }
.btn-decide:active { transform: translateY(1px) scale(.99); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.btn-decide-lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-decide-remove { color: #fdf2f8; border-color: #db2777; background: linear-gradient(160deg, rgba(236, 72, 153, .42), rgba(190, 24, 93, .26)); }
@media (hover: hover) { .btn-decide-remove:hover { border-color: #f472b6; } }
.btn-decide-lock { color: #111; border-color: var(--gold); background: #2e100e; }
.btn-decide-lock .lock-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #ff8f84, var(--gold) 55%, var(--gold-dark)); transform-origin: left center; animation: lockDrain 10s linear forwards; }
.btn-decide-lock .lock-secs { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .78); color: var(--gold); font-size: 13px; }
@keyframes lockDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .btn-decide-lock .lock-fill { animation: none; } }
.btn-decide-lock .btn-decide-lbl { padding: 7px 14px; border-radius: 999px; background: rgba(10, 10, 15, .82); color: var(--gold); }
.btn-decide-lock .lock-secs { background: transparent; color: #fff; min-width: 20px; height: auto; }
.btn-decide { min-height: 54px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.btn-decide-lbl { white-space: nowrap; }
.btn-decide-lock .btn-decide-lbl { padding: 6px 12px; }
.btn-decide-lock .lock-fill { animation: none; transform: scaleX(1); transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { .btn-decide-lock .lock-fill { transition: none; } }


.squad-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.squad-tools .sort-toggle, .squad-tools .squad-group-fixed { margin-bottom: 8px; }
.squad-search-btn { width: 46px; min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: #fff; font-size: 17px; cursor: pointer; }
.squad-search-btn[aria-expanded="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.squad-search { width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--gold); background: var(--bg2); color: #fff; font: 600 15px Inter, sans-serif; }
.squad-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .25); }
.squad-none { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; }


body[data-mode] { --mode: var(--gold); --mode-rgb: var(--acc-rgb); }
body[data-mode="exact"] { --mode: #f87171; --mode-rgb: 220, 38, 38; }
body[data-mode="spin"] { --mode: #c4b5fd; --mode-rgb: 124, 92, 255; }
body[data-mode="nrlw"] { --mode: #5eead4; --mode-rgb: 20, 184, 166; }
body[data-mode="wc"] { --mode: #7dd3fc; --mode-rgb: 14, 165, 233; } 
body[data-mode] .site-header { border-bottom-color: var(--mode); }
body[data-mode] main { background: radial-gradient(120% 420px at 50% 0, rgba(var(--mode-rgb), .12), transparent 70%); }
body[data-mode] .scoreboard { border-bottom-color: rgba(var(--mode-rgb), .5); background: linear-gradient(180deg, rgba(var(--mode-rgb), .14), rgba(var(--mode-rgb), .02)), rgba(14, 14, 26, .96); }
body[data-mode] .sb-mode { color: var(--mode); }
body[data-mode] .panel { border-color: rgba(var(--mode-rgb), .22); }
body[data-mode] .panel-title { color: var(--mode); }
body[data-mode="exact"] .sb-mode::before { content: "\1F525  "; }

body[data-mode="wc"] .sb-inner { grid-template-columns: minmax(max-content, 1fr) auto 1fr; }
body[data-mode="wc"] .sb-mode { white-space: nowrap; }

.wc-look { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; filter: brightness(.95); } 
.wc-look svg { display: block; width: 100%; height: 100%; }

.pcard-plate.has-look { position: relative; isolation: isolate; overflow: hidden; }
.pcard-plate.has-look .pcard-club { background: rgba(8, 10, 18, .74); color: #fff; padding: 2px 8px; border-radius: 6px; }

.slot.is-filled.has-look { isolation: isolate; background: var(--wc-field, var(--club)); }
.slot.is-filled.has-look .slot-name, .slot.is-filled.has-look .slot-tries { color: #fff; background: rgba(8, 10, 18, .74); border-radius: 5px; padding: 0 4px; }
.slot.is-filled.has-look .slot-code, .slot.is-filled.has-look .slot-abbr { color: #fff; opacity: 1; background: rgba(8, 10, 18, .6); padding: 1px 3px; border-radius: 3px; }

.mode-wc-strip i.has-look { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.mode-wc-strip i.has-look span { text-shadow: 0 0 3px rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .9); }

body[data-mode="exact"] .scoreboard { animation: hardLine 2.6s ease-in-out infinite; }
@keyframes hardLine { 50% { border-bottom-color: #ef4444; box-shadow: 0 6px 18px -8px rgba(239, 68, 68, .7); } }
@media (prefers-reduced-motion: reduce) { body[data-mode="exact"] .scoreboard { animation: none; } }

.mode-card[data-mode="plus"]:not(.is-on) { border-color: #5a1d18; background: linear-gradient(135deg, rgba(var(--acc-rgb), .14), rgba(var(--acc-rgb), .02) 70%), var(--card); }
.mode-card[data-mode="plus"]:not(.is-on) .mode-name { color: #ffb0a8; }
.mode-card[data-mode="plus"]:not(.is-on) .mode-chip { background: rgba(var(--acc-rgb), .12); color: #ff968b; }
#startBtn[data-pick="exact"] { background: linear-gradient(135deg, #b91c1c, #ef4444); color: #fff; box-shadow: 0 6px 22px rgba(220, 38, 38, .35); }
#startBtn[data-pick="spin"] { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; box-shadow: 0 6px 22px rgba(124, 92, 255, .35); }
#startBtn[data-pick="nrlw"] { background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; box-shadow: 0 6px 22px rgba(20, 184, 166, .3); }
#startBtn[data-pick="wc"] { background: linear-gradient(135deg, #0369a1, #0ea5e9); color: #fff; box-shadow: 0 6px 22px rgba(14, 165, 233, .3); }

.mode-card.is-wc { border-color: #075985; background: linear-gradient(135deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .03) 70%), var(--card);
  grid-template-areas: "strip strip strip" "ico name go" "ico line go" "chips chips chips"; padding-top: 18px; }
.mode-card.is-wc .mode-name { color: #bae6fd; }
.mode-card.is-wc .mode-chip { background: rgba(14, 165, 233, .18); color: #bae6fd; }
.mode-card.is-wc.is-on { border-color: #0ea5e9; background: linear-gradient(135deg, rgba(14, 165, 233, .34), rgba(14, 165, 233, .07) 70%), var(--card); box-shadow: 0 0 0 1px #0ea5e9, 0 8px 28px rgba(14, 165, 233, .28); }
.mode-card.is-wc.is-on .mode-name { color: #fff; }
@media (hover: hover) { .mode-card.is-wc:hover { border-color: #0ea5e9; } }
.mode-tag-wc { background: #0284c7; color: #fff; }
.mode-wc-strip { grid-area: strip; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; }
.mode-wc-strip i { display: grid; place-items: center; height: 22px; border-radius: 5px; font: 900 9px/1 'Inter', sans-serif; font-style: normal; letter-spacing: .2px;
  color: var(--n2); background: linear-gradient(to bottom, var(--n1) 0 72%, var(--n3) 72% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
@media (max-width: 380px) { .mode-wc-strip i { height: 18px; font-size: 7.5px; letter-spacing: 0; } }


.pcard.is-legend, .slot.is-legend, .reveal.is-legend, .rrow.is-legend, .srow.is-legend {
  --leg: linear-gradient(135deg, #3a2210 0%, #8a5a2b 28%, #d9a66b 50%, #8a5a2b 72%, #3a2210 100%);
}
.pcard.is-immortal, .slot.is-immortal, .reveal.is-immortal, .rrow.is-immortal, .srow.is-immortal {
  --imm: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%);
}
.pcard-tier { margin-left: auto; flex-shrink: 0; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }


.pcard.is-legend { border-color: #b07a42; background: linear-gradient(180deg, #2a1c12, var(--card2) 60%); box-shadow: 0 0 0 1px rgba(176, 122, 66, .5), 0 0 16px rgba(176, 122, 66, .25); }
.pcard.is-legend .pcard-plate { background: var(--leg); color: #fff4e2; border-left-color: #2a1608; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.pcard.is-legend .pcard-abbr { background: #2a1608; color: #e7c08f; }
.pcard.is-legend .pcard-name { color: #e7c08f; }
.pcard.is-legend .pcard-tier { background: #2a1608; color: #e7c08f; border: 1px solid rgba(231, 192, 143, .5); }
.slot.is-legend { background: var(--leg); color: #fff4e2; border-color: #e7c08f; box-shadow: 0 0 14px rgba(217, 166, 107, .45); text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.slot.is-legend .slot-abbr { color: #2a1608; text-shadow: none; }
.reveal.is-legend { background: var(--leg); color: #fff4e2; border-color: #e7c08f; box-shadow: 0 0 26px rgba(217, 166, 107, .45); }
.rrow.is-legend { border-color: #b07a42; background: linear-gradient(90deg, rgba(217, 166, 107, .2), var(--card2) 70%); }
.rrow.is-legend .rrow-club { background: var(--leg); color: #fff4e2; }
.rrow.is-legend .rrow-name, .rrow.is-legend .rrow-tries, .srow.is-legend .srow-name { color: #e7c08f; }
.srow.is-legend { border-color: #b07a42; }


.pcard.is-immortal { border: 2px solid #f1c073; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(180deg, #23222c, var(--card2) 65%);
  box-shadow: 0 0 0 1px #fff1c4, 0 0 26px rgba(255, 255, 255, .28), 0 0 18px rgba(241, 192, 115, .35); }
.pcard.is-immortal .pcard-plate { background: var(--imm); background-size: 200% 100%; color: #14161d; border-left-color: #f1c073; animation: goatShine 4s linear infinite; }
.pcard.is-immortal .pcard-abbr { background: #14161d; color: #f1c073; }
.pcard.is-immortal .pcard-club { color: #14161d; }
.pcard.is-immortal .pcard-name { color: #ffffff; text-shadow: 0 0 12px rgba(241, 192, 115, .65); }
.pcard.is-immortal .pcard-tier { background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); color: #1a1204; box-shadow: 0 0 10px rgba(241, 192, 115, .6); }
.slot.is-immortal { background: var(--imm); background-size: 200% 100%; color: #14161d; border: 2px solid #f1c073;
  box-shadow: 0 0 0 1px #fff1c4, 0 0 20px rgba(255, 255, 255, .5), 0 0 12px rgba(241, 192, 115, .6); animation: goatShine 4s linear infinite; }
.slot.is-immortal .slot-abbr { color: #9a6a1a; }
.reveal.is-immortal { background: var(--imm); background-size: 200% 100%; color: #14161d; border-color: #f1c073;
  box-shadow: 0 0 0 2px #fff1c4, 0 0 40px rgba(255, 255, 255, .45), 0 0 26px rgba(241, 192, 115, .55); animation: dealIn .3s ease both, goatShine 4s linear infinite; }
.reveal.is-immortal .reveal-num { color: #1a1204; text-shadow: 0 0 18px rgba(241, 192, 115, .9); }
.rrow.is-immortal { border-color: #f1c073; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(241, 192, 115, .1) 40%, var(--card2) 75%); }
.rrow.is-immortal .rrow-club { background: var(--imm); color: #14161d; }
.rrow.is-immortal .rrow-name, .srow.is-immortal .srow-name { color: #ffffff; text-shadow: 0 0 10px rgba(241, 192, 115, .6); }
.rrow.is-immortal .rrow-tries { color: #ffe2a8; }
.srow.is-immortal { border-color: #f1c073; }


.panel-head.is-legends, .panel-head.is-immortal { flex-wrap: wrap; row-gap: 2px; }
.panel-head.is-legends .panel-title, .panel-head.is-immortal .panel-title { white-space: nowrap; }
.panel-head.is-legends .panel-title { color: #e7c08f; }
.panel-head.is-immortal .panel-title { background: linear-gradient(90deg, #f1c073, #fff, #f1c073); -webkit-background-clip: text; background-clip: text; color: transparent; }


.pack-intro { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; align-content: center; gap: 22px; cursor: pointer; overflow: hidden;
  background: radial-gradient(55% 40% at 50% 40%, rgba(var(--pi-rgb), .3), transparent 70%), rgba(6, 6, 12, .96); animation: piIn .25s ease both; }
.pack-intro.is-legends { --pi-rgb: 217, 166, 107; --pi-edge: #e7c08f; --pi-face: linear-gradient(115deg, #3a2210 0%, #8a5a2b 30%, #e2b77a 45%, #8a5a2b 60%, #3a2210 100%); --pi-ink: #fff4e2; }
.pack-intro.is-immortal { --pi-rgb: 255, 236, 190; --pi-edge: #f1c073; --pi-face: linear-gradient(115deg, #a9b0bd 0%, #e6eaf0 30%, #ffffff 45%, #e6eaf0 60%, #a9b0bd 100%); --pi-ink: #14161d; }
.pack-intro.is-out { animation: piOut .28s ease both; }
.pi-rays { position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(var(--pi-rgb), .22) 0deg 5deg, transparent 5deg 15deg); animation: piSpin 12s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 42%); mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 42%); }
.is-immortal .pi-rays { opacity: .8; animation-duration: 8s; }
.pi-card { position: relative; width: min(46vw, 190px); aspect-ratio: 5 / 7; perspective: 800px; animation: piCard 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.pi-card-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 16px; border: 3px solid var(--pi-edge);
  background: var(--pi-face); background-size: 250% 100%; color: var(--pi-ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 0 44px rgba(var(--pi-rgb), .7), 0 18px 40px rgba(0, 0, 0, .6);
  animation: piShine 2.4s linear infinite; }
.pi-emblem { font-size: 54px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.pi-card-word { font: italic 900 22px/1 Inter, sans-serif; letter-spacing: 2px; }
.pi-text { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 20px; animation: piText .5s ease both .45s; }
.pi-kicker { font-size: 12px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--pi-edge); }
.pi-title { font: italic 900 clamp(34px, 9vw, 56px)/1 Inter, sans-serif; text-transform: uppercase; color: #fff; text-shadow: 0 0 24px rgba(var(--pi-rgb), .8); text-wrap: balance; }
.pi-sub { font-size: 15px; font-weight: 700; color: #e6e6f0; max-width: 32ch; text-wrap: balance; }
@keyframes piIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes piOut { to { opacity: 0; transform: scale(1.04); } }
@keyframes piSpin { to { transform: rotate(360deg); } }
@keyframes piCard { 0% { transform: rotateY(90deg) scale(.4); opacity: 0; } 55% { transform: rotateY(-12deg) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes piShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes piText { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pack-intro, .pi-rays, .pi-card, .pi-card-face, .pi-text, .pcard.is-immortal .pcard-plate, .slot.is-immortal, .reveal.is-immortal { animation: none !important; } }

.chooser-card.is-legend { border-color: #b07a42; }
.chooser-card.is-legend .pcard-plate { background: linear-gradient(135deg, #3a2210, #8a5a2b 28%, #d9a66b 50%, #8a5a2b 72%, #3a2210); color: #fff4e2; }
.chooser-card.is-legend .chooser-name { color: #e7c08f; }
.chooser-card.is-immortal { border-color: #f1c073; box-shadow: 0 0 0 1px #fff1c4, 0 0 20px rgba(241, 192, 115, .35); }
.chooser-card.is-immortal .pcard-plate { background: linear-gradient(135deg, #8e97a6, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6); color: #14161d; }
.chooser-card.is-immortal .chooser-name { color: #fff; text-shadow: 0 0 10px rgba(241, 192, 115, .6); }


.site-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.scoreboard { top: calc(58px + env(safe-area-inset-top, 0px)); }
.toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.sheet-body { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); }
.sheet.is-rules { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.sheet.is-rules .sheet-body { max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))); }
.cp-takeover { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .offer-panel { top: calc(150px + env(safe-area-inset-top, 0px)); } }



.wc.wc-lock { cursor: pointer; }




.wildcards.has-4 { grid-template-columns: repeat(2, 1fr); }
.wc.wc-sub { --wc: #f1c073; --wc-rgb: 241, 192, 115; border-color: #a16207; background: linear-gradient(160deg, rgba(241, 192, 115, .22), rgba(241, 192, 115, .06)); }
.wc.wc-sub .wc-left { color: var(--gold); }
.wc.wc-sub.is-armed { border-color: var(--gold); box-shadow: 0 0 14px rgba(241, 192, 115, .45); }
.wc-pass-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .6); background: rgba(241, 192, 115, .14); font-size: 9.5px !important; letter-spacing: .6px; }

.slot.is-subcan { cursor: pointer; animation: wiggle 1.2s ease-in-out infinite; outline: 3px solid #3b82f6; outline-offset: 1px; box-shadow: 0 0 14px rgba(59, 130, 246, .55); }
.slot.is-subfrom { outline: 3px solid #fff; outline-offset: 1px; }
.slot.is-subno { opacity: .35; filter: grayscale(.5); }
.slot.is-subto { cursor: pointer; outline: 3px dashed #60a5fa; outline-offset: 1px; animation: wiggle 1.2s ease-in-out infinite; background: rgba(59, 130, 246, .14); font: inherit; color: inherit; }


.footer-sound { display: flex; justify-content: center; margin: 0 0 12px; }
.icon-btn.sound-foot { width: auto; height: 36px; padding: 0 14px 0 12px; gap: 8px; border-radius: 999px; font: 800 12px/1 Inter, sans-serif; letter-spacing: .4px; }


#dailyCard, #dlyPop, .dly-result { --gold: #fb923c; --gold-dark: #f97316; }
.dly-home { margin: 0 0 16px; }
.dly-card, .dly-result { padding: 14px; border-radius: 16px; border: 1.5px solid rgba(251, 146, 60, .6);
  background: radial-gradient(120% 90% at 0% 0%, rgba(251, 146, 60, .22), transparent 55%), linear-gradient(135deg, #1d1a33, #111020);
  box-shadow: 0 0 0 4px rgba(251, 146, 60, .1), 0 10px 30px rgba(0, 0, 0, .35); }
.dly-card.is-compact { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 7px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.dly-card.is-compact .dly-meta, .dly-card.is-compact .dly-reward-chip { margin-top: 3px; }
.dly-card.is-compact:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dly-card.is-done { border-color: rgba(251, 146, 60, .45); }
.dly-card.is-won, .dly-result.is-won { border-color: var(--good); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14), 0 10px 30px rgba(0, 0, 0, .35); }
.dly-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(251, 146, 60, .12); border: 2px solid rgba(251, 146, 60, .6); }
.dly-mid { display: grid; min-width: 0; }
.dly-kicker { color: var(--gold); font: 900 11px/1.2 var(--font); letter-spacing: 1.2px; text-transform: uppercase; }
.dly-card .dly-kicker { margin-bottom: 2px; }
.dly-title { color: #fff; font: italic 900 16px/1.1 var(--font); text-transform: uppercase; letter-spacing: -.3px; padding-right: .12em; text-wrap: balance; } 
.dly-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; font: 700 12px/1.2 var(--font); color: #b8b8cc; }
.dly-meta b { color: var(--gold); }
.dly-card.is-won .dly-meta b { color: var(--good); }
.dly-dots { display: inline-flex; gap: 4px; flex: none; }
.dly-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #5c5c78; display: inline-grid; place-items: center; font: 900 9px/1 var(--font); font-style: normal; color: #0c0c14; }
.dly-dot.is-done { background: #d6d6e4; border-color: #d6d6e4; }
.dly-dot.is-best { background: var(--gold); border-color: var(--gold); }
.dly-dot.is-win { background: var(--good); border-color: var(--good); }
.dly-dot.is-miss { background: var(--bad); border-color: var(--bad); }
.btn.dly-go-btn { min-height: 40px; padding: 0 16px; font-size: 13px; white-space: nowrap; box-shadow: 0 6px 22px rgba(251, 146, 60, .3); }
.btn.dly-go-btn.btn-ghost { box-shadow: none; }
.btn.dly-go-btn.is-won { background: var(--good); border-color: var(--good); color: #052e14; }

.dly-pop { position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.dly-pop[hidden] { display: none; }
.dly-pop-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.dly-pop-body { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(251, 146, 60, .16), transparent 60%), linear-gradient(180deg, #1b1830, #0f0d1d);
  border: 2px solid var(--gold); border-bottom: 0; box-shadow: 0 0 0 4px rgba(251, 146, 60, .12), 0 -10px 40px rgba(251, 146, 60, .18); animation: sheetUp .25s ease both; }
.dly-pop-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2a2a4a; background: rgba(255, 255, 255, .04); color: #9a9ab0; font-size: 15px; cursor: pointer; }
@media (hover: hover) { .dly-pop-x:hover { color: var(--gold); border-color: var(--gold); } }
.dly-pop-grab { width: 48px; height: 4px; border-radius: 2px; background: #2a2a4a; margin: 0 auto 16px; }
.dly-pop-ico { width: 64px; height: 64px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 50%;
  border: 2px solid var(--gold); background: rgba(251, 146, 60, .12); box-shadow: 0 0 0 5px rgba(251, 146, 60, .1), 0 0 24px rgba(251, 146, 60, .4); }
.dly-pop .dly-kicker { font-size: 11px; letter-spacing: 2px; margin-bottom: 8px; }
.dly-pop-title { font: italic 900 26px/1.1 var(--font); text-transform: uppercase; letter-spacing: -.3px; color: #fff; margin: 0 0 8px; text-wrap: balance; }
.dly-pop-story { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.dly-task { margin: 0 0 16px; padding: 14px 12px 12px; border-radius: 14px; background: rgba(251, 146, 60, .07); border: 1px solid rgba(251, 146, 60, .4); }
.dly-task-line { margin: 0 0 11px; font: 800 18px/1.3 var(--font); color: #fff; text-wrap: balance; }
.dly-task-line b { color: var(--gold); }
.dly-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dly-facts > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid #2a2a44; }
.dly-facts b { font: 900 16px/1.2 var(--font); color: var(--gold); }
.dly-facts span { font: 700 11.5px/1.3 var(--font); color: #a9a9bd; }

.dly-reward { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: rgba(74, 222, 128, .08); border: 1px dashed rgba(74, 222, 128, .55); }
.dly-reward > span:not(.dly-reward-ico) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dly-reward-ico { flex: none; font-size: 22px; line-height: 1; }
.dly-reward b { color: #fff; font: 900 14px/1.25 var(--font); }
.dly-reward small { color: #b8e8c8; font: 700 11.5px/1.35 var(--font); }
.dly-nw { white-space: nowrap; } 
.dly-reward small.dly-reward-streak { margin-top: 3px; color: #fdba74; } 
.dly-reward.is-earned { margin: 10px 0 12px; border-style: solid; background: rgba(74, 222, 128, .12); flex-wrap: wrap; }
.dly-reward .dly-claim { flex: 1 1 100%; margin-top: 4px; }
.dly-reward-chip { justify-self: start; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .45);
  color: #b8e8c8; font: 800 11px/1.5 var(--font); white-space: nowrap; }
.dly-reward-chip.is-won { color: var(--good); }
.dly-also { margin: -8px 0 16px; color: #8d8da5; font: 700 12px/1.4 var(--font); }
.dly-goes-h { font: 900 11px/1 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.dly-pop .dly-goes { margin: 0 0 14px; }
.dly-pop .dly-done { margin: 0 0 12px; }
.dly-rank { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; width: 100%; min-height: 46px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(251, 146, 60, .55); background: rgba(251, 146, 60, .12); color: #fff; font: 700 14px/1.25 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dly-rank b { color: var(--gold); font-size: 17px; line-height: 1; }
.dly-rank small { color: var(--muted); font-size: 12px; font-weight: 600; }
.dly-rank-t { text-align: center; }
.dly-rank small, .dly-rank-a { white-space: nowrap; } 
.dly-rank-go { color: var(--gold); font-size: 18px; line-height: 1; transition: transform .15s; }
@media (hover: hover) { .dly-rank:hover { background: rgba(251, 146, 60, .2); border-color: var(--gold); } .dly-rank:hover .dly-rank-go { transform: translateX(3px); } }
.dly-pop-acts { display: grid; gap: 10px; margin-top: 4px; }
.dly-pop-acts .btn { width: 100%; margin: 0; }
.dly-pop-acts .btn-primary { box-shadow: 0 6px 22px rgba(251, 146, 60, .3); }
.dly-pop-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.dly-pop-row .btn { min-height: 46px; padding: 0 10px; font-size: 13.5px; }
@media (min-width: 720px) {
  .dly-pop { align-items: center; padding: 24px; }
  .dly-pop-body { max-width: 440px; padding: 28px 28px 24px; border-radius: 22px; border-bottom: 2px solid var(--gold); }
  .dly-pop-grab { display: none; }
}
.dly-goes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.dly-go { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.dly-go b { color: #fff; font: 900 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.dly-go small { color: var(--dim); font: 800 10px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; }
.dly-go.is-win { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .08); }
.dly-go.is-win b { color: var(--good); }
.dly-go.is-left b { color: var(--bad); }

.dly-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dly-actions .btn { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
.dly-actions .btn-primary, .dly-done { flex: 1 1 100%; }
.dly-done { color: var(--muted); font-size: 12.5px; }
.dly-result { margin: 0 0 16px; text-align: center; }
.dly-score { margin: 6px 0 2px; color: #fff; font: 900 40px/1 var(--font); font-variant-numeric: tabular-nums; }
.dly-score small { font-size: 16px; color: var(--muted); }
.dly-best { color: var(--muted); font-size: 13px; }
.dly-best b { color: #fff; }

.dly-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 2px 0 4px; font-size: 12.5px; font-weight: 800; }
.dly-rules .is-ok { color: #86efac; }
.dly-rules .is-no { color: #fca5a5; }


.wildcards.has-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wildcards.has-5 > .wc { grid-column: span 2; }
.wildcards.has-5 > .wc-sub, .wildcards.has-5 > .wc-key { grid-column: span 3; }
.wildcards.has-5 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-5 .wc-ico { font-size: 17px; line-height: 1; }

.wc-key { border-color: #b45309; background: linear-gradient(160deg, rgba(241, 192, 115, .2), rgba(180, 83, 9, .06)); }
.wc-key .wc-left { color: #f1c073; }
.wc-key.is-ready { box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .45); }
.wc-key.is-used { opacity: .8; cursor: default; } 

.key-swap { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 0; padding: 11px 14px; box-sizing: border-box;
  border-radius: 12px; border: 1.5px dashed rgba(var(--acc-rgb), .6); background: rgba(var(--acc-rgb), .06); color: var(--gold); font: 800 13.5px/1.2 var(--font); cursor: pointer; }
@media (hover: hover) { .key-swap:hover { background: rgba(var(--acc-rgb), .14); border-style: solid; } }


html { text-wrap-style: pretty; }

h1, h2, h3, h4, h5, p, li, dt, dd, small, label, button, figcaption, summary, td, th, div, b, strong, span, em { text-wrap-style: balance; }

.doc p, .doc li, .dly-pop-story { text-wrap-style: pretty; } 


@media (max-width: 400px) { .header-nav { gap: 2px; } .site-header { padding-left: 12px; padding-right: 12px; } }



.mode-card.mode-main { padding: 18px 18px 16px; column-gap: 14px; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico line" "chips chips" "go go"; }
.mode-main .mode-ico { font-size: 38px; align-self: center; }
.mode-main .mode-name { font-size: 32px; }
.mode-main .mode-line { font-size: 14.5px; }
.mode-main .mode-chips { margin-top: 12px; }
.mode-main .mode-go { justify-self: stretch; margin: 12px 0 0; padding: 13px 12px; border-radius: 12px; background: var(--gold); color: #111; font-size: 15px; letter-spacing: 1px; text-align: center; }
@media (hover: hover) { .mode-main:hover .mode-go { background: #f0675d; } }

.mode-more-kicker { margin: 10px 2px 0; font: 900 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.mode-more { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.mode-mini { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 96px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid #2a2a44;
  background: var(--card); color: #fff; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .15s ease; }
.mode-mini:active { transform: scale(.97); }
.mm-ico { font-size: 24px; line-height: 1; }
.mm-name { font-size: clamp(12.5px, 3.6vw, 16px); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.mm-tag { font-size: clamp(9.5px, 2.6vw, 11px);  font-weight: 800; letter-spacing: .2px; line-height: 1.2; color: #a8a8c0; white-space: nowrap; }
.mode-mini.is-exact { border-color: #5a1f26; background: linear-gradient(160deg, rgba(220, 38, 38, .2), rgba(220, 38, 38, .03) 75%), var(--card); }
.mode-mini.is-exact .mm-name { color: #fca5a5; } .mode-mini.is-exact .mm-tag { color: #f87171; }
.mode-mini.is-spin { border-color: #3b2f6b; background: linear-gradient(160deg, rgba(124, 92, 255, .2), rgba(124, 92, 255, .03) 75%), var(--card); }
.mode-mini.is-spin .mm-name { color: #c4b5fd; } .mode-mini.is-spin .mm-tag { color: #a78bfa; }
.mode-mini.is-nrlw { border-color: #134e4a; background: linear-gradient(160deg, rgba(20, 184, 166, .2), rgba(20, 184, 166, .03) 75%), var(--card); }
.mode-mini.is-nrlw .mm-name { color: #5eead4; } .mode-mini.is-nrlw .mm-tag { color: #2dd4bf; }
.mode-mini.is-wc { border-color: #075985; background: linear-gradient(160deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .03) 75%), var(--card); }
.mode-mini.is-wc .mm-name { color: #bae6fd; } .mode-mini.is-wc .mm-tag { color: #7dd3fc; }
.mode-mini.is-wc.is-on { border-color: #0ea5e9; box-shadow: 0 0 0 1px #0ea5e9; }
@media (hover: hover) { .mode-mini.is-exact:hover { border-color: #b91c1c; } .mode-mini.is-spin:hover { border-color: #7c5cff; } .mode-mini.is-nrlw:hover { border-color: #14b8a6; } .mode-mini.is-wc:hover { border-color: #0ea5e9; } }
.mode-mini.is-exact.is-on { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.mode-mini.is-spin.is-on { border-color: #8b5cf6; box-shadow: 0 0 0 1px #8b5cf6; }
.mode-mini.is-nrlw.is-on { border-color: #14b8a6; box-shadow: 0 0 0 1px #14b8a6; }


.header-nav .nav-new { display: none; }
body[data-screen="draft"] .header-nav .nav-new { display: inline-flex; }
.btn-quiet { background: transparent; border-color: transparent; color: #b8b8cc; margin-top: 4px; }
@media (hover: hover) { .btn-quiet:hover { color: #fff; } }


@keyframes playShine { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.mode-card.mode-main .mode-go { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 12px; border-radius: 13px; border: 0; font-size: 16.5px; font-weight: 900; letter-spacing: 1.4px; color: #1a0504;
  background: linear-gradient(180deg, #ffaaa0 0%, #ec5448 45%, #c23529 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(110, 20, 14, .35), 0 8px 22px rgba(var(--acc-rgb), .35), 0 0 0 1px rgba(255, 194, 186, .5); }
.mode-card.mode-main .mode-go i { font-style: normal; font-size: 13px; transition: transform .15s ease; }
.mode-card.mode-main .mode-go::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); animation: playShine 3.6s ease-in-out infinite; }
@media (hover: hover) { .mode-card.mode-main:hover .mode-card.mode-main .mode-go { filter: brightness(1.06); } .mode-card.mode-main:hover .mode-card.mode-main .mode-go i { transform: translateX(3px); } }
.mode-card.mode-main:active .mode-card.mode-main .mode-go { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(110, 20, 14, .35), 0 4px 12px rgba(var(--acc-rgb), .3); }
@media (prefers-reduced-motion: reduce) { .mode-card.mode-main .mode-go::after { animation: none; display: none; } }



.wildcards.has-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcards.has-6 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-5 > .wc:nth-child(n+4) { grid-column: span 3; }

.wc.wc-goat, .confirm-ico.goat-ico, .btn.btn-goat { --goat: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%); }
.wc.wc-goat { border-color: var(--gold); color: #1a1204; background: var(--goat); background-size: 200% 100%; }
.wc.wc-goat .wc-left { color: #3a2a08; font-weight: 900; }
.wc.wc-goat.is-ready { animation: goatShine 3s linear infinite; box-shadow: 0 0 16px rgba(241, 192, 115, .45); }
.wc.wc-goat:disabled { opacity: .5; animation: none; }
@media (prefers-reduced-motion: reduce) { .wc.wc-goat.is-ready { animation: none; } }
.confirm-ico.goat-ico { background: var(--goat); border-color: #fff1c4; }
.btn.btn-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; animation: goatShine 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn.btn-goat { animation: none; } }

.wc-paid-note { margin: -4px 0 10px; text-align: center; font-size: 11.5px; font-weight: 700; color: #fca5a5; }


@keyframes plSheen { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } }
.pcard.is-plat { position: relative; border-color: #bfdbfe; background: linear-gradient(170deg, #12307a, #0a1a45 70%); box-shadow: 0 0 0 1px rgba(191, 219, 254, .35), 0 6px 22px rgba(59, 130, 246, .22); }
.pcard.is-plat::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); background-size: 250% 100%; animation: plSheen 3s ease-in-out infinite; }
.pcard.is-plat .pcard-plate { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-left-color: #bfdbfe; }
.pcard.is-plat .pcard-abbr { background: #bfdbfe; color: #0a1a45; }
.pcard.is-plat .pcard-name { color: #fff; }
.pcard.is-plat .pcard-span { color: #bfdbfe; }
.pcard-tier.pcard-pm { background: #bfdbfe; color: #0a1a45; letter-spacing: .6px; }
.pcard.is-medal { border-color: #f1c073; box-shadow: 0 0 0 1px rgba(241, 192, 115, .55), 0 6px 24px rgba(241, 192, 115, .25); }
.pcard.is-medal .pcard-plate { border-left-color: #f1c073; }
.pcard.is-medal .pcard-tier.pcard-pm { background: #f1c073; color: #1a1204; }
.slot.is-plat { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-color: #bfdbfe; box-shadow: 0 0 14px rgba(147, 197, 253, .45); }
.slot.is-plat .slot-abbr { color: #bfdbfe; }
.slot.is-medal { border-color: #f1c073; box-shadow: 0 0 16px rgba(241, 192, 115, .55); }
.slot.is-medal .slot-abbr { color: #f1c073; }
.reveal.is-plat { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-color: #bfdbfe; box-shadow: 0 0 26px rgba(147, 197, 253, .45); }
.reveal.is-medal { border-color: #f1c073; box-shadow: 0 0 28px rgba(241, 192, 115, .5); }
@media (prefers-reduced-motion: reduce) { .pcard.is-plat::after { animation: none; } }

.pcard.is-prem { position: relative; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(246, 210, 122, .22), 0 6px 22px rgba(246, 210, 122, .14);
  background: linear-gradient(var(--card2), var(--card2)) padding-box, linear-gradient(135deg, #8a5a14, #f6d27a 30%, #fff1c1 48%, #d4a23c 66%, #8a5a14) border-box; }
.pcard.is-prem::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); background-size: 250% 100%; animation: plSheen 3s ease-in-out infinite; }
.pcard.is-prem .pcard-tier.pcard-pm { background: linear-gradient(135deg, #d4a23c, #fff1c1 50%, #d4a23c); color: #1a1204; }
.pcard.is-prem.is-medal { box-shadow: 0 0 0 1px rgba(240, 171, 252, .45), 0 6px 24px rgba(240, 171, 252, .25);
  background: linear-gradient(var(--card2), var(--card2)) padding-box, linear-gradient(135deg, #c7d2fe, #f0abfc 30%, #99f6e4 55%, #fde68a 80%, #c7d2fe) border-box; }
.pcard.is-prem.is-medal .pcard-tier.pcard-pm { background: linear-gradient(115deg, #c7d2fe, #f0abfc, #99f6e4, #fde68a); color: #1a1204; }
.slot.is-prem { border-color: #ffd978; box-shadow: inset 0 4px 0 var(--club-accent), 0 0 14px rgba(246, 210, 122, .5); }
.slot.is-prem.is-medal { border-color: #f0abfc; box-shadow: inset 0 4px 0 var(--club-accent), 0 0 16px rgba(240, 171, 252, .55); }
.reveal.is-prem { border-color: #ffd978; box-shadow: 0 0 26px rgba(246, 210, 122, .45); }
.reveal.is-prem.is-medal { border-color: #f0abfc; box-shadow: 0 0 28px rgba(240, 171, 252, .5); }
@media (prefers-reduced-motion: reduce) { .pcard.is-prem::after { animation: none; } }



.wildcards.has-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcards.has-7 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-7 > .wc:last-child { grid-column: span 3; }
.wildcards.has-7 > .wc:last-child .wc-label { flex-direction: row; gap: 6px; }

.wc.wc-imm { border-color: var(--gold); color: #fff; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(160deg, #2b2a33, #121219 85%); }
.wc.wc-imm .wc-left { color: #ffc2ba; font-weight: 900; }
.wc.wc-imm.is-have .wc-left { display: inline-block; align-self: center; padding: 2px 8px; border-radius: 999px; color: #14161d;
  background: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%); background-size: 200% 100%; animation: goatShine 4s linear infinite; }
.wc.wc-imm.is-ready { box-shadow: 0 0 16px rgba(var(--acc-rgb), .4); }
.wc.wc-imm:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .wc.wc-imm.is-have .wc-left { animation: none; } }

.pcard.is-ileg { position: relative; border: 3px solid var(--gold); box-shadow: 0 0 0 1px #ffc2ba, 0 0 20px rgba(var(--acc-rgb), .55), 0 0 42px rgba(var(--acc-rgb), .22); animation: dealIn .35s ease both, ilPulse 2.4s ease-in-out .4s infinite; }
.pcard.is-ileg::after { content: ''; position: absolute; top: -60%; left: -80%; width: 40%; height: 220%; transform: rotate(20deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 194, 186, .3), transparent); animation: ilShine 3.4s ease-in-out 1s infinite; }
@keyframes ilPulse { 0%, 100% { box-shadow: 0 0 0 1px #ffc2ba, 0 0 16px rgba(var(--acc-rgb), .45), 0 0 34px rgba(var(--acc-rgb), .18); } 50% { box-shadow: 0 0 0 1px #ffc2ba, 0 0 28px rgba(var(--acc-rgb), .78), 0 0 56px rgba(var(--acc-rgb), .32); } }
@keyframes ilShine { 0% { left: -80%; } 55%, 100% { left: 150%; } }
.pcard.is-ileg .pcard-plate { border-left-color: var(--gold); }
.pcard.is-ileg .pcard-name { color: #fff; text-shadow: 0 0 10px rgba(var(--acc-rgb), .55); }
.pcard-tier.pcard-il { background: linear-gradient(135deg, #ff8f84, #ffc2ba 50%, #ff8f84); color: #1a1204; box-shadow: 0 0 10px rgba(var(--acc-rgb), .5); letter-spacing: .5px; }
.slot.is-ileg { border: 3px solid var(--gold); box-shadow: 0 0 0 1px #ffc2ba, 0 0 16px rgba(var(--acc-rgb), .6); }
.reveal.is-ileg { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 194, 186, .6), 0 0 28px rgba(var(--acc-rgb), .45); }
.rrow.is-ileg { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold), 0 0 12px rgba(var(--acc-rgb), .3); }
.srow.is-ileg, .chooser-card.is-ileg { border-color: var(--gold); }
.panel-head.is-ilegend { flex-wrap: wrap; row-gap: 2px; }
.panel-head.is-ilegend .panel-title { white-space: nowrap; color: #ffc2ba; }
.wc.wc-ileg { border-color: var(--gold); color: #fff; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(160deg, #1d1b26, #0b0a11 85%); }
.wc.wc-ileg .wc-label { white-space: normal; text-align: center; }
.wc.wc-ileg .wc-left { color: #ffc2ba; font-weight: 900; }
.wc.wc-ileg.is-ready { box-shadow: 0 0 16px rgba(var(--acc-rgb), .4); }
.wc.wc-ileg:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .pcard.is-ileg, .pcard.is-ileg::after { animation: none; } }

.imm-back { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0 0; text-align: center; }
.imm-back small { color: #ffc2ba; font-size: 11.5px; font-weight: 700; }


.pick-clock { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; margin: 0 0 10px; padding: 0 11px;
  border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2); transition: background .2s, border-color .2s; }
.pick-clock i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .16)); transition: width .2s linear, background .2s; }
.pick-clock .pc-lbl, .pick-clock b { position: relative; color: #fff; white-space: nowrap; }
.pick-clock .pc-lbl { font: 800 12px/1 Inter, sans-serif; letter-spacing: .3px; }
.pick-clock .pc-wait { display: none; }
.pick-clock b { font: 900 14px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.pick-clock.is-low { background: rgba(220, 38, 38, .2); border-color: #fca5a5; animation: pickClockPulse .6s ease-in-out infinite alternate; }
.pick-clock.is-low i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.pick-clock.is-low b { font-size: 15px; }
.pick-clock.is-paused { border-style: dashed; border-color: rgba(255, 255, 255, .35); }
.pick-clock.is-paused i { opacity: .45; }
.pick-clock.is-paused .pc-run { display: none; }
.pick-clock.is-paused .pc-wait { display: inline; }
@keyframes pickClockPulse { to { box-shadow: 0 0 14px rgba(248, 113, 113, .65); } }
@media (prefers-reduced-motion: reduce) { .pick-clock i { transition: none; } .pick-clock.is-low { animation: none; } }

#offerPanel.is-clock-paused .offer-cards { position: relative; }
#offerPanel.is-clock-paused .offer-cards .pcard { pointer-events: none; user-select: none; -webkit-user-select: none; }
#offerPanel.is-clock-paused .offer-cards .pcard > * { filter: blur(12px); opacity: .3; }
#offerPanel.is-clock-paused .offer-cards::after { content: '\23F8\FE0F  Clock Paused'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  padding: 9px 16px; border-radius: 999px; background: rgba(8, 10, 18, .88); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  font: 900 13px/1 Inter, sans-serif; letter-spacing: .4px; white-space: nowrap; pointer-events: none; }


.sb-daily { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 2px; width: 100%; margin: 2px 0 0;
  padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(251, 146, 60, .45); background: rgba(251, 146, 60, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sb-daily-k { grid-column: 1; font: 900 10.5px/1.2 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #fb923c; }
.sb-daily-t { grid-column: 1; font: 700 13px/1.3 Inter, sans-serif; color: #f4f4f8; text-wrap: pretty; }
.sb-daily-t b { color: #fff; font-weight: 900; }
.sb-daily-i { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; line-height: 1; color: #fb923c; }
@media (hover: hover) { .sb-daily:hover { background: rgba(251, 146, 60, .16); } }

.mode-card.mode-main.is-wc { grid-template-areas: "strip strip" "ico name" "ico line" "chips chips" "go go"; padding-top: 20px; }
.mode-card.mode-main.is-wc .mode-go { background: linear-gradient(180deg, #0ea5e9, #0369a1); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(14, 165, 233, .3); }
@media (hover: hover) { .mode-card.mode-main.is-wc:hover .mode-go { background: linear-gradient(180deg, #38bdf8, #0284c7); } }

.dly-reward.is-missed { background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .6); }
.dly-reward.is-missed b { color: #f87171; }
.dly-reward.is-missed small:not(.dly-reward-streak) { color: #fecaca; }
.dly-reward-chip.is-missed { color: #fca5a5; background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .55); }


.pitch {
  padding: 38px 22px; border-radius: 50% / 13%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(255, 255, 255, .14) 34px 36px, transparent 36px),
    radial-gradient(ellipse 46% 20% at 50% 0%, transparent 0 98%, rgba(255, 255, 255, .12) 98% 100%, transparent 100%),
    radial-gradient(ellipse 46% 20% at 50% 100%, transparent 0 98%, rgba(255, 255, 255, .12) 98% 100%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 36px, transparent 36px 72px),
    linear-gradient(180deg, #123a1e, #0b2512);
  border: 2px solid #2f6b3c;
}
.pitch-row:nth-child(2) { margin-bottom: 6px; }
.pitch-row:nth-child(4) { margin-bottom: 6px; }

.pitch-row:first-child, .pitch-row:last-child { padding: 0 6%; }
.pitch-row:first-child .slot, .pitch-row:last-child .slot { min-width: 0; }


.ou-home { margin: 12px 0 4px; } .ou-home .mode-mini { width: 100%; min-height: 84px; }

.ou-home .oup { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 12px; min-height: 0; padding: 10px 12px; text-align: left;
  border: 1.5px solid rgba(56, 189, 248, .6); background: radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, .22), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(74, 222, 128, .14), transparent 60%), #0d1622; overflow: hidden; }
.oup-new { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: #38bdf8; color: #04121f; font: 900 9.5px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 0 12px rgba(56, 189, 248, .55); }
.oup-pair { display: flex; align-items: center; gap: 5px; }
.oup-card { display: grid; justify-items: center; width: 60px; padding: 4px 2px 6px; border-radius: 8px; background: linear-gradient(180deg, var(--club) 0 38%, #141a26 38%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.oup-card i { max-width: 57px; overflow: hidden; text-overflow: clip; white-space: nowrap; font: 900 8.5px/1 var(--font); font-style: normal; color: var(--club-text); letter-spacing: 0; } 
.oup-card b { margin-top: 7px; font: 900 16px/1 var(--font); color: #fff; }
.oup-card.is-q b { color: #7dd3fc; animation: oupQ 1.6s ease-in-out infinite; }
.oup-arrows { display: grid; gap: 3px; }
.oup-arrows em { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-style: normal; font-size: 8px; color: #04121f; }
.oup-arrows .is-up { background: #4ade80; animation: oupPulse 1.4s ease-in-out infinite; }
.oup-arrows .is-dn { background: #f87171; animation: oupPulse 1.4s ease-in-out .7s infinite; }
.oup-t { display: grid; gap: 3px; min-width: 0; }
.oup-t b { padding-right: 40px; font: 900 17px/1.1 var(--font); color: #fff; }
.oup-t small { font: 600 12px/1.3 var(--font); color: #a5b4c8; text-wrap: balance; }
.oup-go { align-self: end; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #38bdf8; color: #04121f; font-size: 11px; }
@keyframes oupPulse { 0%, 100% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.12); box-shadow: 0 0 10px currentColor; } }
@keyframes oupQ { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .oup-arrows em, .oup-card.is-q b { animation: none; } }
.mode-mini.is-ou { grid-column: 1 / -1; border-color: rgba(56, 189, 248, .55); background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(74, 222, 128, .08)); }
#screen-ou .wrap { max-width: 560px; margin: 0 auto; padding: 10px 14px 40px; }
.ou-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; font: 900 13px/1 var(--font); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ou-back { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 17px; cursor: pointer; }
.ou-load { padding: 60px 0; text-align: center; color: var(--muted); }


.ou-start { display: grid; gap: 14px; text-align: center; }
.ou-logo { margin: 0; font: 900 clamp(30px, 9vw, 42px)/1 var(--font); letter-spacing: -.5px; text-transform: uppercase; color: #fff; }
.ou-up { color: var(--good); } .ou-dn { color: var(--bad); }
.ou-lede { margin: 0; color: var(--muted); font: 600 15px/1.45 var(--font); text-wrap: balance; } .ou-lede b { color: #fff; }
.ou-pair.is-demo { pointer-events: none; transform: scale(.92); margin: -6px 0; }
.ou-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ou-tiles:has(> :last-child:nth-child(odd)) { grid-template-columns: 1fr; }
.ou-tiles:has(> :last-child:nth-child(odd)) .ou-tile { min-height: 60px; }
.ou-tiles:has(> :last-child:nth-child(odd)) .ou-tile-l { grid-auto-flow: column; align-items: center; justify-content: start; gap: 10px; }

.ou-tile { --oc: 148, 163, 184; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 84px; padding: 11px 12px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 2px solid rgba(var(--oc), .45); background: linear-gradient(150deg, rgba(var(--oc), .30), rgba(var(--oc), .07) 70%), var(--card); color: var(--text); }
.ou-c-goals { --oc: 239, 68, 68; } .ou-c-games { --oc: 59, 130, 246; } .ou-c-aflw { --oc: 168, 85, 247; } 
.ou-tile-l { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ou-tile-ico { font-size: 20px; }
.ou-tile-l b { font: 900 15px/1.15 var(--font); color: #fff; text-wrap: balance; }
.ou-tile-n { display: grid; justify-items: center; gap: 3px; }
.ou-tile-n b { font: 900 40px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(var(--oc), .7); }
.ou-tile-n small { font: 900 10px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; color: rgb(var(--oc)); filter: brightness(1.35); }
.ou-tile-n.is-new b { font-size: 22px; color: rgba(255, 255, 255, .4); text-shadow: none; }
.ou-tile.is-on { border-color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 20px rgba(var(--oc), .3); }
.ou-play { width: 100%; padding: 16px; border-radius: 14px; font: 900 16px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; }
.ou-play i { font-style: normal; font-size: 12px; margin-left: 6px; }

.ou-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: 100%; min-height: 40px; margin: 4px auto 0; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: 800 13.5px/1.2 var(--font); cursor: pointer; }
@media (hover: hover) { .ou-link:hover { border-color: rgba(255, 255, 255, .45); } }


.ou-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ou-streak { display: inline-flex; align-items: baseline; gap: 6px; } .ou-streak i { font-style: normal; font-size: 20px; }
.ou-streak b { font: 900 34px/1 var(--font); color: #fff; } .ou-streak small { font: 800 12px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ou-catpill { padding: 7px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 800 12px/1 var(--font); color: var(--text); }
.ou-clock { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-bottom: 12px; }
.ou-clock i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--bad), #fbbf24 35%, var(--good)); transform-origin: left; animation: ou-clock linear forwards; }
.ou-clock.is-stop i { animation-play-state: paused; }
.ou-clock.is-free { height: auto; overflow: visible; background: none; text-align: center; } 
.ou-clock.is-free span { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(244, 114, 182, .5); background: rgba(244, 114, 182, .12); color: #f9a8d4; font: 800 12px/1.2 Inter, sans-serif; }
@keyframes ou-clock { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ou-clock i { animation: none; } }


.ou-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ou-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 236px; overflow: hidden; border-radius: 16px; border: 2px solid var(--club);
  background: linear-gradient(180deg, color-mix(in srgb, var(--club) 34%, var(--card2)) 0%, var(--card2) 72%); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.ou-card.is-new { animation: ouIn .3s ease both; }
@keyframes ouIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ou-plate { position: relative; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 10px; background: var(--club); color: var(--club-text); border-left: 6px solid var(--club-accent); overflow: hidden; }
.ou-flag { flex: none; display: block; width: 36px; height: 24px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.ou-flag svg { width: 100%; height: 100%; display: block; }
.ou-abbr { flex: none; font: 900 11.5px/1 var(--font); letter-spacing: .8px; padding: 3px 6px; border-radius: 5px; background: var(--club-accent); color: var(--club); }
.ou-club { min-width: 0; font: 800 11.5px/1.15 var(--font); white-space: nowrap; overflow: hidden; }
.ou-club.is-wrap { white-space: normal; text-wrap: balance; } 
.ou-body { display: grid; align-content: center; gap: 4px; padding: 12px 10px 6px; text-align: center; }
.ou-name { font: 900 19px/1.12 var(--font); color: #fff; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ou-years { font: 700 11.5px/1.2 var(--font); color: var(--muted); }
.ou-num { display: grid; justify-items: center; gap: 1px; margin: 0 8px 10px; padding: 10px 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.ou-num b { font: 900 40px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
.ou-num small { font: 800 11px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ou-num b.is-q { color: rgba(255, 255, 255, .35); animation: ouQ 1.4s ease-in-out infinite; }
@keyframes ouQ { 50% { color: rgba(255, 255, 255, .7); } }
.ou-card.is-good { box-shadow: 0 0 0 3px var(--good), 0 0 26px rgba(74, 222, 128, .45); } .ou-card.is-good .ou-num b { color: var(--good); }
.ou-card.is-bad { box-shadow: 0 0 0 3px var(--bad), 0 0 26px rgba(248, 113, 113, .45); } .ou-card.is-bad .ou-num b { color: var(--bad); }
.ou-vs { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line); font: 900 12px/1 var(--font); letter-spacing: .5px; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.ou-q { margin: 12px 0 0; text-align: center; color: var(--muted); font: 600 14px/1.4 var(--font); text-wrap: balance; } .ou-q b { color: #fff; }
.ou-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ou-call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; border-radius: 16px; border: 0; font: 900 20px/1 var(--font); letter-spacing: .6px;
  text-transform: uppercase; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 6px 16px rgba(0, 0, 0, .3); }
.ou-call span { font-size: 16px; }

.ou-key { display: none; margin-left: 4px; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, .18); font: 800 11px/1 var(--font); letter-spacing: 1px; }
@media (hover: hover) and (pointer: fine) { .ou-key { display: inline-block; } }
.ou-call.is-over { background: linear-gradient(180deg, #5ee08f, #22c55e); color: #052e16; } .ou-call.is-under { background: linear-gradient(180deg, #fb8a8a, #ef4444); color: #450a0a; }
.ou-call:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.ou-call:disabled { opacity: .45; cursor: default; }
.ou-wild { grid-template-columns: 1fr; margin: 12px 0 0; } 
@media (max-width: 360px) { .ou-name { font-size: 16.5px; } .ou-num b { font-size: 32px; } .ou-card { min-height: 214px; } }


.ou-out { display: grid; gap: 12px; text-align: center; }
.ou-out-h { font: 900 30px/1 var(--font); color: #fff; text-transform: uppercase; }
.ou-pair.is-small .ou-card { min-height: 0; } .ou-pair.is-small .ou-name { font-size: 16px; } .ou-pair.is-small .ou-num b { font-size: 30px; }
.ou-out-why { margin: 0; color: var(--muted); font: 600 14.5px/1.4 var(--font); text-wrap: balance; }
.ou-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ou-again { padding: 14px; border-radius: 14px; font: 900 15px/1 var(--font); text-transform: uppercase; letter-spacing: .5px; }
.ou-ghost { padding: 14px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font: 900 15px/1 var(--font); text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.ou-note { text-align: center; color: var(--good); font: 700 13px/1.3 var(--font); }

.ou-decide { text-align: center; }
.ou-decide .decision { padding: 0 2px; }
.ou-decide .decision p { margin: 4px 0 0; text-wrap: balance; }
.ou-decide .btn-row { margin: 14px 0 2px; }
.ou-decide-rib { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ou-decide-rib small { position: relative; z-index: 1; font: 800 11.5px/1 var(--font); color: #fbcfe8; }


.ou-res { display: grid; gap: 12px; }
.ou-hero { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px 16px; border-radius: 18px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(74, 222, 128, .16), transparent 60%), linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); }
.ou-hero-k { font: 900 12px/1.2 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ou-hero-n { display: inline-flex; align-items: center; gap: 6px; font: 900 76px/1 var(--font); color: #fff; letter-spacing: -2px; font-variant-numeric: tabular-nums; animation: ouPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ou-hero-n i { font-style: normal; font-size: 40px; letter-spacing: 0; }
.ou-hero-s { display: inline-flex; align-items: center; gap: 8px; font: 800 13px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.ou-best { padding: 4px 8px; border-radius: 999px; font: 900 11px/1 var(--font); font-style: normal; letter-spacing: .6px; background: var(--good); color: #052e16; }
.ou-best.is-old { background: rgba(255, 255, 255, .1); color: var(--text); }
.ou-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; margin-top: 8px; }
.ou-strip i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font: 900 10px/1 var(--font); font-style: normal; animation: ouIn .25s ease both; }
.ou-strip .is-ok { background: rgba(74, 222, 128, .2); color: var(--good); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .45); }
.ou-strip .is-x { background: var(--bad); color: #450a0a; }
.ou-strip .is-rib { background: rgba(236, 72, 153, .25); color: #fbcfe8; box-shadow: inset 0 0 0 1px rgba(236, 72, 153, .6); font-size: 9px; }
.ou-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ou-stats span { display: grid; gap: 4px; justify-items: center; padding: 11px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ou-stats b { font: 900 20px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ou-stats small { font: 800 10.5px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ou-run { padding-bottom: 8px; }
.ou-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 440px; overflow-y: auto; }
.ou-step { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.ou-step.is-bad { background: rgba(248, 113, 113, .12); box-shadow: inset 0 0 0 1.5px rgba(248, 113, 113, .6); }
.ou-step-i { font: 900 12px/1 var(--font); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.ou-step.is-bad .ou-step-i { color: var(--bad); }
.ou-chip { width: 34px; height: 24px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--club); color: var(--club-text); box-shadow: inset 3px 0 0 var(--club-accent); }
.ou-chip b { font: 900 9.5px/1 var(--font); letter-spacing: .4px; }
.ou-chip svg { width: 100%; height: 100%; display: block; }
.ou-step-p { display: grid; gap: 2px; min-width: 0; text-align: left; }
.ou-step-p b { font: 800 14px/1.15 var(--font); color: #fff; overflow-wrap: anywhere; text-wrap: balance; } 
.ou-step-p small { font: 700 10.5px/1 var(--font); color: var(--dim); }
.ou-step-v { font: 900 18px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; text-align: right; min-width: 30px; }
.ou-step.is-bad .ou-step-v { color: var(--bad); } .ou-step.is-bad .ou-step-p small { color: #fca5a5; font-weight: 800; }
.ou-tag { padding: 5px 7px; border-radius: 999px; font: 900 10px/1 var(--font); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; min-width: 62px; text-align: center; }
.ou-tag.is-o { background: rgba(74, 222, 128, .16); color: var(--good); }
.ou-tag.is-u { background: rgba(251, 146, 60, .16); color: #fdba74; }
.ou-tag.is-x { background: var(--bad); color: #450a0a; }
.ou-tag.is-start { background: rgba(255, 255, 255, .08); color: var(--muted); }
.ou-step-note { padding: 4px 0; text-align: center; font: 900 11px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; color: #f9a8d4; }
@keyframes ouPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ou-hero-n, .ou-strip i { animation: none; } }
@media (max-width: 360px) { .ou-step { grid-template-columns: 18px 30px minmax(0, 1fr) auto auto; gap: 6px; } .ou-tag { min-width: 0; } .ou-step-v { font-size: 16px; } }

.ou-rewind { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(6, 8, 14, .82); animation: ouRwIn .25s ease both, ouRwOut .3s ease 1.25s forwards; overflow: hidden; }
.ou-rw-rays { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(from 0deg, rgba(236, 72, 153, .16) 0 8deg, transparent 8deg 22deg); animation: ouRwSpin 1.5s linear both; mask-image: radial-gradient(circle, #000 0 30%, transparent 62%); -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 62%); }
.ou-rw-ico { position: relative; font-size: 64px; line-height: 1; filter: drop-shadow(0 0 22px rgba(236, 72, 153, .8)); animation: ouRwIco .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.ou-rw-t { position: relative; font: 900 italic 34px/1 var(--font); letter-spacing: .5px; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(236, 72, 153, .7); animation: ouRwPop .5s cubic-bezier(.2, .9, .3, 1.3) .15s both; }
.ou-rw-s { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .5); font: 900 22px/1 var(--font); color: #86efac; animation: ouRwPop .5s cubic-bezier(.2, .9, .3, 1.3) .45s both; }
.ou-rw-s small { font: 800 12px/1 var(--font); text-transform: uppercase; letter-spacing: .6px; }
.ou-rw-s i { font-style: normal; font-size: 18px; }
@keyframes ouRwIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ouRwOut { to { opacity: 0; } }
@keyframes ouRwSpin { from { transform: rotate(0deg) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: rotate(-200deg) scale(1.1); opacity: .6; } }
@keyframes ouRwIco { 0% { transform: scale(.3) rotate(0deg); opacity: 0; } 60% { transform: scale(1.15) rotate(-360deg); opacity: 1; } 100% { transform: scale(1) rotate(-360deg); } }
@keyframes ouRwPop { from { transform: scale(.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ou-rewind, .ou-rw-rays, .ou-rw-ico, .ou-rw-t, .ou-rw-s { animation: none; } }

.ou-card.is-rr-out { animation: ouRrOut .35s ease-in both; }
.ou-card.is-rerolled { animation: ouRrIn .6s cubic-bezier(.2, .9, .3, 1.15) both; box-shadow: 0 0 0 2px #2dd4bf, 0 0 28px rgba(45, 212, 191, .55); }
@keyframes ouRrOut { to { transform: perspective(600px) rotateY(90deg) scale(.9); opacity: 0; } }
@keyframes ouRrIn { 0% { transform: perspective(600px) rotateY(-90deg) scale(.9); opacity: 0; } 60% { transform: perspective(600px) rotateY(8deg) scale(1.03); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ou-card.is-rr-out, .ou-card.is-rerolled { animation: none; } }

.spot-promo.is-ou { gap: 12px; padding: 10px 12px; border: 1.5px solid rgba(56, 189, 248, .6); background: radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, .24), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(74, 222, 128, .16), transparent 60%), #0d1622; }
.spot-promo.is-ou .oup-pair { flex: none; }
.spot-promo.is-ou .spot-promo-txt b { font-size: 17px; }
.oup-kick { font: 900 9.5px/1 var(--font); font-style: normal; letter-spacing: 1.2px; text-transform: uppercase; color: #7dd3fc; }
.oup-play { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding-left: 2px; box-sizing: border-box; border-radius: 50%; background: #38bdf8; color: #04121f; font-size: 13px; box-shadow: 0 0 14px rgba(56, 189, 248, .45); } 
.spot-promo.is-ou .spot-promo-txt small { text-wrap: balance; }


.pitch {
  position: relative; isolation: isolate; padding: 64px 30px; border-radius: 50%;
  background:
    linear-gradient(180deg, transparent calc(50% - 46px), rgba(255, 255, 255, .22) calc(50% - 46px), rgba(255, 255, 255, .22) calc(50% - 45px), transparent calc(50% - 45px), transparent calc(50% + 45px), rgba(255, 255, 255, .22) calc(50% + 45px), rgba(255, 255, 255, .22) calc(50% + 46px), transparent calc(50% + 46px)) 50% 50% / 30px 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(222, 200, 150, .13) 25%, rgba(222, 200, 150, .13) 75%, transparent) 50% 50% / 18px 104px no-repeat,
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .28) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 26px, transparent 26px 52px),
    linear-gradient(180deg, #17512f, #0f3b22);
  border: 2px solid #2f7a4a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

.pitch::before, .pitch::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.pitch::before { inset: 9px; border: 2px solid rgba(255, 255, 255, .28); }
.pitch::after { inset: 21% 15%; border: 1.5px dashed rgba(255, 255, 255, .2); }
.pitch-row { position: relative; }
.pitch-row:nth-child(2), .pitch-row:nth-child(4) { margin-bottom: 0; }
.pitch-row:nth-child(3) { margin: 6px 0; }
.pitch-row:first-child, .pitch-row:last-child { padding: 0 14%; }
.pitch-row:nth-child(2), .pitch-row:nth-child(4) { padding: 0 3%; }
.pitch-row:nth-child(3) .slot, .pitch-row:nth-child(4) .slot, .pitch-row:last-child .slot { max-width: 33%; }


.pcard-key { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pcard-key { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-right: 6px; padding: 0 3px; box-sizing: border-box; border-radius: 5px; border: 1px solid currentColor; font: inherit; font-size: 10px; line-height: 1; opacity: .75; vertical-align: 1px; }
}


.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.footer-links > span[aria-hidden] { display: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #d6d6e4; font-size: 12.5px; font-weight: 800; text-decoration: none; }
@media (hover: hover) { .footer-links a:hover { border-color: rgba(255, 255, 255, .4); color: #fff; } }
.footer-legal a { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #c9c9d8; font-weight: 700; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.footer-legal, .nf-sub { text-wrap: balance; } 


.mode-main .mode-ico.is-logo { display: grid; place-items: center; }
.mode-main .mode-logo { display: block; width: 112px; height: auto; }
@media (max-width: 420px) { .mode-main .mode-logo { width: 92px; } }


.pcard.is-goat, .reveal.is-goat, .slot.is-goat, .rrow.is-goat, .srow.is-goat, .chooser-card.is-goat { --gold: #f1c073; --gold-dark: #c9953a; }


.mode-card.mode-main.is-logo { grid-template-areas: "ico line" "chips chips" "go go"; }
.mode-card.mode-main.is-logo .mode-line { align-self: center; font-size: 15.5px; }
.mode-card.mode-main.is-logo .mode-logo { width: 138px; }
@media (max-width: 420px) { .mode-card.mode-main.is-logo .mode-logo { width: 120px; } }


.wildcards .wc { --wc: #ffffff; --wc-rgb: 255, 255, 255; color: #fff; }
.wildcards .wc.wc-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; border-color: #14b8a6; background: linear-gradient(160deg, rgba(20, 184, 166, .22), rgba(20, 184, 166, .06)); }
.wildcards .wc.wc-reroll .wc-left { color: #5eead4; }
.wildcards .wc.wc-scout { --wc: #facc15; --wc-rgb: 250, 204, 21; border-color: #facc15; background: linear-gradient(160deg, rgba(250, 204, 21, .2), rgba(250, 204, 21, .05)); }
.wildcards .wc.wc-scout .wc-left { color: #fde047; }
.wildcards .wc.wc-tweak { --wc: #f472b6; --wc-rgb: 244, 114, 182; border-color: #ec4899; background: linear-gradient(160deg, rgba(236, 72, 153, .22), rgba(236, 72, 153, .06)); }
.wildcards .wc.wc-tweak .wc-left { color: #f9a8d4; }
.wildcards .wc.wc-sub { --wc: #60a5fa; --wc-rgb: 96, 165, 250; border-color: #3b82f6; background: linear-gradient(160deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05)); }
.wildcards .wc.wc-sub .wc-left { color: #93c5fd; }
.wildcards .wc.wc-key { --wc: #a78bfa; --wc-rgb: 167, 139, 250; border-color: #a78bfa; background: linear-gradient(160deg, rgba(167, 139, 250, .22), rgba(167, 139, 250, .05)); }
.wildcards .wc.wc-key .wc-left { color: #c4b5fd; }
.wildcards .wc.wc-key.is-ready { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .45); }
.wildcards .wc.wc-goat { --wc: #f1c073; --wc-rgb: 241, 192, 115; border-color: #f1c073; color: #1a1204; background: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%); background-size: 200% 100%; }
.wildcards .wc.wc-goat .wc-left { color: #3a2a08; font-weight: 900; }
.wildcards .wc.wc-goat.is-ready { box-shadow: 0 0 16px rgba(241, 192, 115, .45); }
.wildcards .wc.wc-imm { --wc: #f1c073; --wc-rgb: 241, 192, 115; border-color: #f1c073; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(160deg, #2b2a33, #121219 85%); }
.wildcards .wc.wc-ileg { --wc: #f1c073; --wc-rgb: 241, 192, 115; border-color: #f1c073; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(160deg, #1d1b26, #0b0a11 85%); }
.wildcards .wc.wc-imm .wc-left, .wildcards .wc.wc-ileg .wc-left { color: #ffe2a8; font-weight: 900; }
.wildcards .wc.wc-imm.is-have .wc-left { display: inline-block; align-self: center; padding: 2px 8px; border-radius: 999px; color: #14161d;
  background: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%); background-size: 200% 100%; }
.wildcards .wc.wc-imm.is-ready, .wildcards .wc.wc-ileg.is-ready { box-shadow: 0 0 16px rgba(241, 192, 115, .4); }
.wildcards .wc.wc-imm .wc-label, .wildcards .wc.wc-ileg .wc-label { white-space: normal; text-wrap: balance; }

@media (hover: hover) {
  .wildcards .wc:hover:not(:disabled) { border-color: rgba(255, 255, 255, .55); }
  .wildcards .wc.wc-reroll:hover:not(:disabled) { border-color: #5eead4; }
  .wildcards .wc.wc-scout:hover:not(:disabled) { border-color: #fde047; }
  .wildcards .wc.wc-tweak:hover:not(:disabled) { border-color: #f9a8d4; }
  .wildcards .wc.wc-sub:hover:not(:disabled) { border-color: #93c5fd; }
  .wildcards .wc.wc-key:hover:not(:disabled) { border-color: #c4b5fd; }
  .wildcards .wc.wc-goat:hover:not(:disabled), .wildcards .wc.wc-imm:hover:not(:disabled), .wildcards .wc.wc-ileg:hover:not(:disabled) { border-color: #fff1c4; }
}

.wildcards .wc.is-armed, .wildcards .wc.wc-tweak.is-armed { border-color: #f87171; background: #2a1116; opacity: 1; }
.wildcards .wc.wc-sub.is-armed { border-color: #93c5fd; background: linear-gradient(160deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05)); box-shadow: 0 0 14px rgba(59, 130, 246, .45); }

.wildcards .wc:disabled { opacity: .4; cursor: not-allowed; }
.wildcards .wc.is-spent { opacity: .3; }
.wildcards .wc.wc-goat:disabled, .wildcards .wc.wc-imm:disabled, .wildcards .wc.wc-ileg:disabled { opacity: .5; }
.wildcards .wc.wc-key.is-used { opacity: .8; cursor: default; }

.wildcards .wc .wc-left.wc-pass-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; color: #f1c073; box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .6); background: rgba(241, 192, 115, .14); font-size: 9.5px; letter-spacing: .6px; }

.wildcards.has-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wildcards.has-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wildcards.has-5 > .wc { grid-column: span 2; }
.wildcards.has-5 > .wc:nth-child(n+4) { grid-column: span 3; }
.wildcards.has-6, .wildcards.has-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcards.has-7 > .wc:last-child { grid-column: span 3; }
.wildcards.has-5 .wc-label, .wildcards.has-6 .wc-label, .wildcards.has-7 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; }
.wildcards.has-7 > .wc:last-child .wc-label { flex-direction: row; gap: 6px; }
.wildcards.has-5 .wc-ico, .wildcards.has-6 .wc-ico, .wildcards.has-7 .wc-ico { font-size: 17px; line-height: 1; }

.wc-burst.wc-burst-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; }
.wc-burst.wc-burst-scout { --wc: #facc15; --wc-rgb: 250, 204, 21; }
.wc-burst.wc-burst-tweak { --wc: #f472b6; --wc-rgb: 244, 114, 182; }
.wc-burst.wc-burst-sub { --wc: #60a5fa; --wc-rgb: 96, 165, 250; }

.key-swap { border-color: rgba(167, 139, 250, .6); background: rgba(167, 139, 250, .08); color: #c4b5fd; }
@media (hover: hover) { .key-swap:hover { background: rgba(167, 139, 250, .16); } }

@media (max-width: 380px) { .rrow-name { font-size: 13px; } }