:root {
  --ink: #101633;
  --navy: #101633;
  --night: #090e25;
  --field: #195c42;
  --field-dark: #101633;
  --grass: #1b5b42;
  --sand: #b9894d;
  --cream: #fff7ea;
  --paper: #fffdf7;
  --gold: #ffd447;
  --orange: #ff6b57;
  --sky: #00d7d7;
  --teal: #00d7d7;   /* alias: referenced throughout the rules section */
  --coral: #ff6b57;  /* alias for --orange, used by field tokens */
  --pink: #ff4fa3;
  --purple: #7a5cff;
  --red: #ff5c70;
  --green: #00cfa8;
  --line: rgba(16, 22, 51, 0.14);
  --shadow: 0 24px 60px rgba(16, 22, 51, 0.17);
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .display { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; letter-spacing: .015em; }
.shell { min-height: 100vh; overflow: hidden; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--night); color: white; }
.loading-ball { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: var(--ink); font: 38px Impact, sans-serif; box-shadow: 0 0 0 5px var(--night), 0 0 0 8px var(--sky); }

.app-header { min-height: 82px; padding: 14px clamp(18px, 5vw, 78px); padding-top: calc(14px + env(safe-area-inset-top)); padding-left: calc(clamp(18px, 5vw, 78px) + env(safe-area-inset-left)); padding-right: calc(clamp(18px, 5vw, 78px) + env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(0,215,215,.24); background: rgba(16,22,51,.97); color: var(--cream); backdrop-filter: blur(14px); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer; padding: 0; text-align: left; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: url("./brand-mark.png") center / cover no-repeat; color: transparent; font: italic 15px/1 Impact, sans-serif; letter-spacing: 0.02em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .16em; }
.brand small { margin-top: 4px; color: var(--sky); font-size: 9px; letter-spacing: .27em; }
.header-status { display: flex; align-items: center; gap: 9px; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.header-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(255,79,163,.2); }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--pink); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 950; }
.eyebrow::before { content: ""; width: 30px; height: 3px; background: currentColor; }
.eyebrow.light { color: var(--sky); }
.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0,.95fr) minmax(430px,1.05fr); align-items: center; gap: clamp(34px,6vw,94px); padding: 72px clamp(22px,6vw,98px) 82px; }
.hero h1 { max-width: 750px; margin: 22px 0 24px; font-size: clamp(62px,7vw,112px); line-height: .84; }
.hero h1 span { color: var(--pink); text-shadow: 3px 3px 0 rgba(0,215,215,.35); }
.hero-lede { max-width: 620px; color: #4e5671; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.primary, .secondary, .text-button { border: 0; cursor: pointer; font-weight: 900; }
.primary { min-height: 54px; padding: 0 21px; background: var(--navy); color: white; display: inline-flex; align-items: center; gap: 24px; box-shadow: 7px 7px 0 var(--sky); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.primary:hover { transform: translate(-1px,-1px); box-shadow: 9px 9px 0 var(--pink); }
.secondary { min-height: 48px; padding: 0 18px; background: var(--orange); color: var(--ink); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; }
.secondary.ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.text-button { background: transparent; border-bottom: 1px solid rgba(11,33,27,.28); padding: 10px 0; }
.stat-row { display: flex; gap: 36px; margin-top: 48px; }
.stat-row div { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 14px; }
.stat-row strong { font: 32px Impact, sans-serif; line-height: 1; }
.stat-row span { color: #718079; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; font-weight: 900; margin-top: 5px; }

.hero-field { min-height: 520px; position: relative; overflow: hidden; background: var(--field); border: 3px solid var(--sky); box-shadow: 14px 14px 0 var(--pink); isolation: isolate; }
.hero-field::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.018) 55px 109px); }
.hero-foul { position: absolute; width: 77%; height: 3px; background: rgba(255,255,255,.82); left: 50%; top: 83%; transform-origin: left; }
.hero-foul.left { transform: rotate(-136deg); }
.hero-foul.right { transform: rotate(-44deg); }
.hero-dirt { position: absolute; width: 46%; aspect-ratio: 1; background: var(--sand); left: 50%; top: 62%; transform: translate(-50%,-50%) rotate(45deg); box-shadow: inset 0 0 0 16px rgba(255,255,255,.11); }
.hero-dirt::after { content: ""; position: absolute; inset: 28%; background: var(--field); border-radius: 50%; }
.hero-mound { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #d6b98e; left: 50%; top: 63%; transform: translate(-50%,-50%); }
.hero-player { position: absolute; width: 43px; height: 43px; transform: translate(-50%,-50%); border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: var(--ink); border: 3px solid var(--cream); font-size: 10px; font-weight: 950; box-shadow: 0 6px 15px rgba(0,0,0,.24); z-index: 4; }
.hero-player.active { width: 52px; height: 52px; background: var(--pink); border-color: var(--cream); }
.hero-route { position: absolute; height: 4px; background: var(--gold); width: 31%; left: 41%; top: 51%; transform: rotate(17deg); transform-origin: left; z-index: 2; }
.hero-route::after { content: ""; position: absolute; right: -5px; top: -6px; border-left: 12px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hero-caption { position: absolute; left: 22px; right: 22px; bottom: 18px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 12px; display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font-size: 8px; font-weight: 900; letter-spacing: .23em; }

.levels { background: linear-gradient(180deg, var(--paper), #f9f1ff); padding: 108px clamp(22px,6vw,98px) 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
.section-heading h2 { margin: 13px 0 0; max-width: 760px; font-size: clamp(44px,5.3vw,76px); line-height: .93; }
.section-heading > p { max-width: 330px; margin-bottom: 5px; color: #64756e; line-height: 1.6; }
.level-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.level-card { --accent: var(--gold); grid-column: span 2; min-height: 318px; padding: 24px; border: 1px solid var(--line); background: rgba(255,253,247,.92); text-align: left; cursor: pointer; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.level-card:nth-child(4), .level-card:nth-child(5) { grid-column: span 3; }
.level-card::before { content: ""; height: 6px; background: var(--accent); position: absolute; inset: 0 0 auto; }
.level-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent) 62%, transparent); }
.level-top, .level-foot { display: flex; align-items: center; justify-content: space-between; }
.level-number { color: var(--accent); font: 28px Impact, sans-serif; }
.level-count, .level-foot { font-size: 9px; letter-spacing: .16em; font-weight: 950; }
.level-count { color: #718079; }
.level-card h3 { margin: 44px 0 9px; font: 40px/.94 Impact, sans-serif; text-transform: uppercase; }
.level-card > p { margin-bottom: 12px; font-weight: 800; }
.level-card small { color: #64756e; line-height: 1.5; }
.level-foot { border-top: 1px solid rgba(11,33,27,.13); padding-top: 16px; margin-top: auto; }
.level-foot i { display: none; }
.level-stat { font-size: 9px; letter-spacing: .16em; font-weight: 950; opacity: .55; }
.level-go {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
  background: var(--navy); color: var(--paper);
  font-size: 13px; font-weight: 950; letter-spacing: .14em;
  padding: .78rem 1.25rem; border-radius: 999px;
  box-shadow: 0 5px 0 var(--accent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.level-go::after { content: "\2192"; font-size: 15px; line-height: 1; transition: transform .16s ease; }
.level-card:hover .level-go, .level-card:focus-visible .level-go { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent); }
.level-card:hover .level-go::after { transform: translateX(4px); }
.level-card.team .level-go { background: var(--pink); color: #2a0716; box-shadow: 0 5px 0 rgba(255,255,255,.55); }
.level-card.team .level-stat { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .level-go, .level-go::after { transition: none; } }
.level-card.team { background: linear-gradient(145deg, var(--navy), #29205f); color: white; }
.level-card.team small, .level-card.team .level-count { color: rgba(255,255,255,.65); }
.level-card.team .level-foot { border-color: rgba(255,255,255,.18); }

.routine { padding: 90px clamp(22px,6vw,98px) 100px; background: linear-gradient(145deg, var(--night), var(--navy) 60%, #2b205f); color: white; }
.routine-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 58px; margin-top: 35px; }
.routine-card { border-top: 1px solid rgba(255,255,255,.22); padding-top: 20px; }
.routine-card:nth-child(1) b { color: var(--pink); }
.routine-card:nth-child(2) b { color: var(--sky); }
.routine-card:nth-child(3) b { color: var(--gold); }
.routine-card b { font: 18px Impact, sans-serif; letter-spacing: .1em; }
.routine-card h3 { margin: 26px 0 10px; font-size: 24px; }
.routine-card p { max-width: 390px; color: rgba(255,255,255,.62); line-height: 1.65; }

.challenge { min-height: calc(100vh - 82px); padding: 42px clamp(18px,5.5vw,88px) 92px; background: radial-gradient(circle at 96% 8%, rgba(0,215,215,.15), transparent 24%), radial-gradient(circle at 2% 88%, rgba(255,79,163,.12), transparent 22%), var(--cream); }
.back-button { border: 0; background: transparent; cursor: pointer; padding: 8px 0; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 950; }
.challenge-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 20px; margin: 48px 0 30px; }
.level-chip { width: 72px; height: 72px; display: grid; place-items: center; background: var(--accent); font: 16px Impact, sans-serif; text-align: center; }
.challenge-heading small { display: block; color: #65756f; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; font-weight: 950; }
.challenge-heading h1 { margin: 5px 0 0; font-size: clamp(40px,5vw,62px); line-height: .9; }
.score { font-weight: 950; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.score span { color: #74817c; }
.progress-track { height: 6px; background: rgba(255,255,255,.14); margin-bottom: 16px; overflow: hidden; }
.challenge .progress-track { background: rgba(16,22,51,.11); }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--pink)); transition: width .3s; }

.call-card { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 570px; box-shadow: var(--shadow); }
.scene-panel { background: var(--field); color: white; padding: 34px; }
.mini-field { height: 315px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 42px, transparent 42px 84px); }
.mini-field .diamond { position: absolute; width: 190px; height: 190px; background: var(--sand); left: 50%; top: 60%; transform: translate(-50%,-50%) rotate(45deg); box-shadow: inset 0 0 0 14px rgba(255,255,255,.1); }
.mini-field .diamond::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: var(--field); }
.base-dot { position: absolute; width: 15px; height: 15px; background: white; transform: translate(-50%,-50%) rotate(45deg); z-index: 2; }
.base-dot.on { background: white; box-shadow: 0 0 0 4px #f47b43, 0 0 0 8px rgba(244,123,67,.2); }
.base-1 { left: 72%; top: 67%; } .base-2 { left: 50%; top: 43%; } .base-3 { left: 28%; top: 67%; } .base-h { left: 50%; top: 85%; }
.scene-ball { position: absolute; left: 50%; top: 24%; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 3px 8px rgba(0,0,0,.3); z-index: 4; }
.scene-path { position: absolute; left: 50%; top: 25%; width: 120px; border-top: 3px dashed var(--gold); transform: rotate(71deg); transform-origin: left; }
.scene-meta { margin-top: 28px; }
.scene-meta .eyebrow { color: var(--gold); }
.scene-meta h2 { margin: 8px 0 9px; font-size: 31px; }
.scene-meta p { color: rgba(255,255,255,.95); font-size: 19px; line-height: 1.6; font-weight: 500; }
.decision-panel { padding: 42px; background: var(--paper); border-top: 6px solid var(--sky); }
.decision-panel h2 { margin: 8px 0 22px; font-size: 29px; line-height: 1.15; }
.choice-list { display: grid; gap: 10px; }
.choice { width: 100%; min-height: 68px; padding: 12px 15px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(11,33,27,.14); background: var(--cream); cursor: pointer; text-align: left; font-weight: 760; line-height: 1.35; }
.choice:hover:not(:disabled) { border-color: var(--pink); box-shadow: 4px 4px 0 rgba(0,215,215,.28); }
.choice:disabled { cursor: default; }
.choice b { width: 37px; height: 37px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ink); color: white; font: 16px Impact, sans-serif; }
.choice:nth-child(1) b { background: var(--pink); color: var(--navy); }
.choice:nth-child(2) b { background: var(--sky); color: var(--navy); }
.choice:nth-child(3) b { background: var(--purple); }
.choice.correct { border-color: var(--green); background: #ddfff5; }
.choice.correct b { background: var(--green); }
.choice.wrong { border-color: var(--red); background: #fff0ed; }
.choice.wrong b { background: var(--red); }
.feedback { margin-top: 18px; padding: 18px; border-left: 5px solid var(--green); background: #ddfff5; }
.feedback.bad { border-color: var(--red); background: #fff0ed; }
.feedback strong { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.feedback p { line-height: 1.5; margin: 7px 0 0; }
.coach-cue { border-top: 1px solid rgba(11,33,27,.12); padding-top: 10px; font-weight: 900; }
.reason-box { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(11,33,27,.12); }
.reason-box p { font-size: 13px; font-weight: 800; }
.reason-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.reason-actions button { border: 1px solid rgba(11,33,27,.2); background: white; padding: 10px; cursor: pointer; font-weight: 850; font-size: 12px; }
.next-row { margin-top: 14px; display: flex; gap: 10px; }

.position-screen { min-height: calc(100vh - 82px); padding: 44px clamp(18px,7vw,116px) 90px; background: radial-gradient(circle at 87% 18%, rgba(122,92,255,.34), transparent 29%), radial-gradient(circle at 8% 83%, rgba(0,215,215,.18), transparent 27%), var(--night); color: white; position: relative; }
.position-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.08) 80px); }
.position-screen > * { position: relative; }
.position-screen .back-button { color: rgba(255,255,255,.7); }
.position-intro { max-width: 850px; margin: 58px 0 38px; }
.position-intro h1 { margin: 14px 0 18px; font-size: clamp(62px,8vw,112px); line-height: .85; }
.position-intro p { max-width: 660px; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.6; }
.position-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.position-card { min-height: 92px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid rgba(0,215,215,.28); background: rgba(255,255,255,.055); color: white; cursor: pointer; text-align: left; }
.position-card:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.position-card b { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: var(--ink); border: 3px solid rgba(255,255,255,.65); }
.position-card span { font-weight: 850; }
.position-card i { font-style: normal; font-size: 20px; }
.whole-team { width: 100%; margin-top: 10px; min-height: 98px; padding: 16px 25px; border: 0; background: linear-gradient(100deg, var(--orange), var(--pink)); color: var(--ink); display: flex; align-items: center; gap: 20px; cursor: pointer; text-align: left; box-shadow: 7px 7px 0 var(--sky); }
.nine-dots { letter-spacing: 4px; line-height: .6; font-size: 17px; }
.whole-team div:nth-child(2) { display: flex; flex-direction: column; }
.whole-team small { font-size: 9px; font-weight: 950; letter-spacing: .17em; }
.whole-team strong { font-size: 23px; margin-top: 4px; }
.whole-team i { margin-left: auto; font-style: normal; font-size: 22px; }

.movement { min-height: calc(100vh - 82px); padding: 28px clamp(16px,4vw,62px) 70px; background: radial-gradient(circle at 94% 5%, rgba(122,92,255,.28), transparent 27%), var(--night); color: white; }
.movement-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.movement-top .back-button { color: rgba(255,255,255,.72); }
.mode-label { justify-self: center; font-size: 9px; letter-spacing: .19em; font-weight: 950; color: rgba(255,255,255,.62); text-transform: uppercase; }
.change-position { justify-self: end; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.76); cursor: pointer; padding: 7px 0; font-size: 10px; }
.movement-card { margin-top: 24px; display: grid; grid-template-columns: minmax(520px,1.18fr) minmax(350px,.82fr); min-height: 690px; border: 1px solid rgba(0,215,215,.3); box-shadow: 10px 10px 0 rgba(255,79,163,.58); }
.field-side { padding: 20px; background: #111a3b; }
.play-meta { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 13px; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .17em; font-weight: 950; text-transform: uppercase; }
.play-meta b { color: var(--sky); }
.scenario-jump { min-width: 170px; background: var(--navy); color: white; border: 1px solid rgba(0,215,215,.46); padding: 7px 10px; font-size: 10px; }
.scenario-jump option { color: var(--ink); }
.field-board { width: 100%; aspect-ratio: 1.2; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.13); background: var(--grass); user-select: none; }
.field-board::before { content: ""; position: absolute; inset: 0; z-index: -3; background: repeating-linear-gradient(90deg, transparent 0 49px, rgba(255,255,255,.016) 50px 99px); }
.foul-line { position: absolute; width: 76%; height: 2px; background: rgba(255,255,255,.76); left: 50%; top: 85%; transform-origin: left; z-index: -1; }
.foul-line.left { transform: rotate(-136deg); } .foul-line.right { transform: rotate(-44deg); }
.field-dirt { position: absolute; width: 45%; aspect-ratio: 1; background: var(--sand); left: 50%; top: 62%; transform: translate(-50%,-50%) rotate(45deg); z-index: -2; box-shadow: inset 0 0 0 13px rgba(255,255,255,.09); }
.field-dirt::after { content: ""; position: absolute; inset: 28%; background: var(--grass); border-radius: 50%; }
.field-mound { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #d6b98e; left: 50%; top: 62%; transform: translate(-50%,-50%); z-index: 1; }
.field-base { position: absolute; width: 14px; height: 14px; background: white; transform: translate(-50%,-50%) rotate(45deg); z-index: 2; }
.field-base.home { left: 50%; top: 85%; } .field-base.first { left: 72%; top: 66%; } .field-base.second { left: 50%; top: 43%; } .field-base.third { left: 28%; top: 66%; }
.field-base.occupied { background: white; box-shadow: 0 0 0 4px #f47b43, 0 0 0 8px rgba(244,123,67,.22); }
.defender { position: absolute; width: 35px; height: 35px; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 50%; background: var(--sky); color: var(--ink); border: 2px solid #dff5fa; font-size: 8px; font-weight: 950; z-index: 4; opacity: .72; }
.defender.active-token { width: 61px; height: 61px; background: var(--pink); border: 4px solid var(--cream); opacity: 1; font-size: 16px; z-index: 12; cursor: grab; touch-action: none; box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 7px rgba(255,79,163,.16); }
.defender.active-token.dragging { cursor: grabbing; box-shadow: 0 15px 34px rgba(0,0,0,.47), 0 0 0 11px rgba(0,215,215,.25); }
.ball { position: absolute; width: 21px; height: 21px; border-radius: 50%; background: white; transform: translate(-50%,-50%); box-shadow: 0 3px 8px rgba(0,0,0,.35); z-index: 6; }
.ball::after { content: "BALL"; position: absolute; top: 23px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 6px; font-weight: 950; letter-spacing: .12em; }
.drop-zone { position: absolute; width: 76px; height: 76px; min-height: 0; transform: translate(-50%,-50%); border: 3px dashed; border-radius: 50%; background: rgba(16,22,51,.88); color: white; display: grid; place-items: center; padding: 0; cursor: pointer; z-index: 7; box-shadow: 0 8px 20px rgba(0,0,0,.34); }
.drop-zone:hover { background: var(--navy); transform: translate(-50%,-50%) scale(1.06); }
.drop-zone > b { font: 30px Impact, sans-serif; }
.drop-zone.zone-a { border-color: var(--pink); }
.drop-zone.zone-a > b { color: var(--pink); }
.drop-zone.zone-b { border-color: var(--sky); }
.drop-zone.zone-b > b { color: var(--sky); }
.drop-zone.zone-c { border-color: var(--purple); }
.drop-zone.zone-c > b { color: #aa9bff; }
.drop-zone.correct { background: var(--green); border-style: solid; border-color: var(--cream); }
.drop-zone.correct > b, .drop-zone.wrong > b { color: var(--navy); }
.drop-zone.wrong { background: var(--orange); border-style: solid; border-color: var(--cream); }
.field-hint { margin: 13px 0 0; text-align: center; color: rgba(255,255,255,.58); font-size: 10px; }
.field-hint b { color: var(--pink); }
.instruction { padding: clamp(29px,4vw,55px); background: linear-gradient(150deg, var(--navy), #241b55); display: flex; flex-direction: column; }
.active-badge { display: flex; align-items: center; gap: 13px; margin-bottom: 27px; }
.active-badge > b { width: 53px; height: 53px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: var(--ink); border: 3px solid var(--cream); }
.active-badge small, .active-badge strong { display: block; }
.active-badge small { color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: .16em; font-weight: 950; text-transform: uppercase; }
.active-badge strong { margin-top: 3px; }
.instruction h1 { margin: 0; font-size: clamp(48px,5vw,74px); line-height: .88; }
.setup { margin: 20px 0; color: rgba(255,255,255,.95); font-size: 17px; line-height: 1.6; font-weight: 500; }
.prompt { border-left: 4px solid var(--sky); background: rgba(255,255,255,.06); padding: 14px 17px; }
.prompt small { color: var(--sky); font-size: 8px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.prompt p { margin: 5px 0 0; font-weight: 850; }
.move-options { display: grid; gap: 9px; margin-top: 15px; }
.move-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: white; cursor: pointer; text-align: left; line-height: 1.35; }
.move-option:hover:not(:disabled) { border-color: var(--sky); background: rgba(0,215,215,.1); }
.move-option:disabled { cursor: default; }
.move-option b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); font: 20px Impact, sans-serif; }
.move-option span { font-size: 13px; font-weight: 800; }
.move-option.option-a b { background: var(--pink); }
.move-option.option-b b { background: var(--sky); }
.move-option.option-c b { background: var(--purple); color: white; }
.move-option.correct { border-color: var(--green); background: rgba(0,207,168,.2); }
.move-option.wrong { border-color: var(--orange); background: rgba(255,107,87,.2); }
.move-feedback { margin-top: 18px; padding: 17px; border: 1px solid rgba(132,209,153,.4); background: rgba(76,146,106,.23); }
.move-feedback.bad { border-color: rgba(239,150,143,.4); background: rgba(203,98,92,.22); }
.move-feedback strong { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.move-feedback p { margin: 6px 0 0; color: rgba(255,255,255,.8); line-height: 1.5; }
.move-feedback .role-answer { border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px; margin-top: 10px; font-weight: 900; color: white; }
.move-feedback .reason-actions button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: white; }
.movement .next-row { margin-top: auto; padding-top: 16px; }

.role-panel { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.17); padding-top: 12px; }
.role-panel h3 { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); }
.role-row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; line-height: 1.35; }
.role-row b { color: var(--sky); }
.role-toggle { margin-top: 13px; border: 1px solid rgba(255,255,255,.24); background: transparent; color: white; padding: 10px 12px; cursor: pointer; font-weight: 850; font-size: 11px; }

.summary { min-height: calc(100vh - 82px); padding: 70px 20px 100px; display: grid; place-items: center; background: radial-gradient(circle at 15% 20%, rgba(0,215,215,.18), transparent 25%), radial-gradient(circle at 85% 80%, rgba(255,79,163,.18), transparent 25%), var(--cream); }
.summary-card { width: min(720px,100%); padding: clamp(30px,6vw,66px); background: var(--paper); border-top: 8px solid var(--sky); box-shadow: 12px 12px 0 var(--pink); text-align: center; }
.summary-card .score-big { color: var(--pink); font: clamp(80px,14vw,132px)/.85 Impact, sans-serif; }
.summary-card .score-big span { color: #77847f; font-size: .28em; }
.summary-card h1 { font-size: clamp(46px,7vw,72px); line-height: .9; margin: 18px 0; }
.summary-card > p { color: #63736d; line-height: 1.6; }
.summary-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.site-footer { min-height: 145px; padding: 42px clamp(22px,6vw,98px); background: var(--night); color: white; border-top: 4px solid var(--sky); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.site-footer strong { font: 18px Impact, sans-serif; letter-spacing: .08em; }
.site-footer p { margin: 0; color: var(--pink); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 950; }
.site-footer small { justify-self: end; color: rgba(255,255,255,.45); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-field { min-height: 510px; }
  .level-grid { grid-template-columns: repeat(2,1fr); }
  .level-card, .level-card:nth-child(4), .level-card:nth-child(5) { grid-column: span 1; }
  .level-card:last-child { grid-column: span 2; }
  .call-card { grid-template-columns: 1fr; }
  .movement-card { grid-template-columns: 1fr; }
  .field-side { order: 2; }
  .instruction { order: 1; min-height: 560px; }
}

@media (max-width: 700px) {
  .app-header { min-height: 68px; }
  .header-status { display: none; }
  .hero { min-height: auto; padding: 48px 18px 58px; gap: 46px; }
  .hero h1 { font-size: clamp(55px,16vw,76px); }
  .hero-lede { font-size: 16px; }
  .stat-row { justify-content: space-between; gap: 8px; }
  .stat-row strong { font-size: 27px; }
  .hero-field { min-height: 410px; box-shadow: 9px 9px 0 var(--ink); }
  .hero-player { width: 34px; height: 34px; font-size: 8px; }
  .hero-player.active { width: 42px; height: 42px; }
  .levels { padding: 76px 18px 82px; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 46px; }
  .section-heading > p { margin-top: 20px; }
  .level-grid { grid-template-columns: 1fr; }
  .level-card, .level-card:nth-child(4), .level-card:nth-child(5), .level-card:last-child { grid-column: span 1; min-height: 290px; }
  .routine { padding: 70px 19px; }
  .routine-grid { grid-template-columns: 1fr; gap: 28px; }
  .challenge { padding: 30px 14px 70px; }
  .challenge-heading { grid-template-columns: auto 1fr; margin-top: 38px; }
  .challenge-heading .score { grid-column: 2; }
  .level-chip { width: 61px; height: 61px; }
  .challenge-heading h1 { font-size: 38px; }
  .scene-panel, .decision-panel { padding: 23px; }
  .mini-field { height: 285px; }
  .position-screen { padding: 31px 16px 68px; }
  .position-intro { margin-top: 48px; }
  .position-intro h1 { font-size: 61px; }
  .position-grid { grid-template-columns: 1fr; }
  .position-card { min-height: 80px; }
  .movement { padding: 20px 10px 55px; }
  .movement-top { grid-template-columns: 1fr 1fr; }
  .mode-label { display: none; }
  .movement-card { min-height: 0; }
  .field-side { padding: 10px; }
  .field-board { aspect-ratio: .82; }
  .drop-zone { width: 61px; height: 61px; }
  .drop-zone > b { font-size: 25px; }
  .defender { width: 29px; height: 29px; font-size: 7px; }
  .defender.active-token { width: 54px; height: 54px; font-size: 14px; }
  .instruction { padding: 28px 22px; min-height: 570px; }
  .instruction h1 { font-size: clamp(40px,12vw,49px); }
  .move-option { min-height: 62px; }
  .scenario-jump { min-width: 130px; width: 48%; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer small { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---- call-mode drag board ---- */
.call-board { margin-bottom: 0.85rem; }
.call-board .drop-zone { width: 3rem; height: 3rem; }
.drop-zone small { display: block; font-size: 0.5rem; letter-spacing: 0.06em; line-height: 1.05; margin-top: 0.1rem; font-weight: 700; opacity: 0.92; }
.drop-zone.pad-zone { width: 5.4rem; height: 2.7rem; border-radius: 0.85rem; }
.field-runner { position: absolute; transform: translate(-50%, -50%); width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: #24110c; font: 700 0.68rem/1 var(--font-body, system-ui), sans-serif; border: 2px solid rgba(255,255,255,0.55); z-index: 3; }
.active-token.token-ball { background: #fdfdf7; color: transparent; border: 2px solid var(--coral); width: 1.5rem; height: 1.5rem; }
.active-token.token-runner { background: var(--pink); }

/* ---- player card ---- */
.stats-page { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; gap: 1.4rem; }
.player-card { background: var(--navy); color: var(--cream); border-radius: 1.25rem; padding: 1.6rem 1.5rem; box-shadow: 0 18px 40px rgba(11,18,42,.28); }
.player-card .eyebrow { color: var(--teal); }
.player-card h1 { font-size: clamp(2rem, 6vw, 3rem); margin: .35rem 0 .3rem; line-height: 1; }
.rank-note { color: rgba(255,255,255,.72); margin: 0 0 1.1rem; }
.rank-bar { height: .6rem; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--teal)); }
.rank-next { color: rgba(255,255,255,.66); font-size: .85rem; margin: .55rem 0 1.2rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .9rem; }
.stat-grid div { background: rgba(255,255,255,.07); border-radius: .8rem; padding: .75rem .8rem; }
.stat-grid strong { display: block; font-size: 1.5rem; line-height: 1; }
.stat-grid span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.stats-block { background: #fff; border-radius: 1.25rem; padding: 1.35rem 1.4rem; box-shadow: 0 12px 30px rgba(11,18,42,.08); }
.stats-block h2 { margin: 0 0 .9rem; font-size: 1.1rem; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats-table th { text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #7b8199; padding-bottom: .5rem; }
.stats-table td { padding: .55rem 0; border-top: 1px solid #ecedf3; }
.stats-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .7rem; }
.pos-stat { background: #f6f7fb; border-radius: .8rem; padding: .7rem .8rem; display: grid; gap: .1rem; }
.pos-stat b { font-size: 1rem; color: var(--navy); }
.pos-stat span { font-size: .7rem; color: #7b8199; }
.pos-stat i { font-style: normal; font-size: 1.25rem; font-weight: 700; color: var(--teal-ink, #0b8b8b); }
.pos-stat small { font-size: .65rem; color: #9aa0b4; }
.rank-ladder { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.rank-step { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .7rem .85rem; border-radius: .8rem; background: #f6f7fb; align-items: center; }
.rank-step b { font-size: .95rem; }
.rank-step span { grid-column: 1; font-size: .78rem; color: #7b8199; }
.rank-step i { grid-row: 1 / span 2; font-style: normal; font-size: .72rem; letter-spacing: .1em; color: #9aa0b4; }
.rank-step.done { background: #eef7f4; }
.rank-step.now { background: var(--navy); color: #fff; }
.rank-step.now span, .rank-step.now i { color: rgba(255,255,255,.7); }
.rank-step.locked { opacity: .55; }
button.header-status { border: 0; cursor: pointer; font: inherit; }

/* ---- play picker ---- */
.picker-page { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.25rem 3rem; }
.picker-head { background: var(--navy); color: var(--cream); border-radius: 1.25rem; padding: 1.5rem 1.4rem; margin-bottom: 1.2rem; box-shadow: 0 18px 40px rgba(11,18,42,.28); }
.picker-head .eyebrow { color: var(--accent, var(--teal)); }
.picker-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .3rem 0 .5rem; }
.picker-head p { color: rgba(255,255,255,.75); margin: 0 0 1rem; }
.picker-progress { height: .5rem; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.picker-progress span { display: block; height: 100%; background: var(--accent, var(--teal)); }
.picker-count { font-size: .85rem; margin: .5rem 0 1.1rem !important; }
.picker-count b { color: #fff; }
.picker-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.play-card { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .7rem; text-align: left; background: #fff; border: 2px solid #e7e9f2; border-radius: .9rem; padding: .8rem .9rem; cursor: pointer; font: inherit; transition: transform .12s, border-color .12s, box-shadow .12s; }
.play-card:hover { transform: translateY(-2px); border-color: var(--navy); box-shadow: 0 10px 22px rgba(11,18,42,.12); }
.play-card.mastered { border-color: #3fbf8f; background: #f2fbf7; }
.play-card.tried { border-color: #ffd166; background: #fffdf5; }
.play-num { font-weight: 800; color: #9aa0b4; font-variant-numeric: tabular-nums; }
.play-body b { display: block; font-size: .95rem; line-height: 1.2; }
.play-body small { color: #7b8199; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.play-flags { display: grid; justify-items: end; gap: .2rem; }
.play-flags em { font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .18rem .45rem; border-radius: 99px; }
.chip-mastered { background: #3fbf8f; color: #05271b; }
.chip-tried { background: #ffd166; color: #4a3405; }
.chip-new { background: #eceef6; color: #7b8199; }
.flag-on { font-style: normal; color: #f2a03d; font-size: 1rem; }
.flag-button { margin-top: .85rem; background: transparent; border: 2px dashed #cfd3e2; color: #5c6379; border-radius: .7rem; padding: .55rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.flag-button:hover { border-color: #f2a03d; color: #b06a10; }
.flag-button.on { background: #fff6e8; border-style: solid; border-color: #f2a03d; color: #a05a05; font-weight: 700; }
.mini-back { background: none; border: 0; color: var(--navy); font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 0 .6rem 0 0; }
.mini-back:hover { color: var(--pink); }

/* ---- (career mode removed) ---- */



.name-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.name-input { flex: 1 1 12rem; min-height: 54px; border: 2px solid #d9dce8; border-radius: .8rem; padding: 0 .9rem; font: inherit; font-size: 1rem; }
.name-input:focus { outline: none; border-color: var(--teal); }
.hint { color: #7b8199; font-size: .82rem; margin: .7rem 0 0; }





/* ---- tightened home hero ---- */
.hero.tight { min-height: 0; display: block; grid-template-columns: none; gap: 0; padding: 2rem clamp(22px,6vw,98px) 1.4rem; }
.hero.tight h1 { font-size: clamp(2.1rem, 10vw, 3.6rem); line-height: .92; margin: .3rem 0 .6rem; }
.hero.tight .hero-lede { font-size: .95rem; line-height: 1.45; max-width: 34rem; margin: 0 0 1rem; }
.hero.tight .hero-actions { gap: .5rem 1.1rem; margin-bottom: .9rem; }
.hero.tight .primary { padding: .8rem 1.2rem; font-size: .78rem; }
.hero.tight .text-button { font-size: .8rem; }
.stat-line { margin: 0; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  color: #7c869f; font-weight: 700; }
.stat-line b { color: var(--navy); font-size: .95rem; }
.hero.tight + .levels { padding-top: 1.6rem; }
.section-heading.tight { display: block; margin-bottom: .9rem; margin-top: 0; }
.section-heading.tight h2 { font-size: clamp(1.3rem, 5.5vw, 2rem); margin: .15rem 0 0; }

/* ---- suggest a revision ---- */
.revise-wrap { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid rgba(16,22,51,.10); }
.revise-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  color: #8792ad; text-decoration: underline; text-underline-offset: 3px; }
.revise-link:hover, .revise-link:focus-visible { color: var(--navy); }
.revise-wrap.open { background: rgba(16,22,51,.03); border: 1px solid rgba(16,22,51,.10);
  border-radius: .7rem; padding: .8rem; margin-top: 1rem; }
.revise-label { display: block; font-size: .78rem; color: #5d6784; margin-bottom: .45rem; }
.revise-note { width: 100%; box-sizing: border-box; font-family: inherit; font-size: .85rem;
  padding: .55rem .65rem; border: 1px solid rgba(16,22,51,.18); border-radius: .5rem;
  background: #fff; color: var(--navy); resize: vertical; }
.revise-note:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
.revise-actions { display: flex; align-items: center; gap: .8rem; margin-top: .55rem; }
.revise-send { background: var(--navy); color: #fff; border: 0; border-radius: 999px;
  padding: .45rem 1rem; font-family: inherit; font-size: .72rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.revise-send[disabled] { opacity: .55; cursor: default; }
.revise-done { font-size: .75rem; color: #5d6784; margin: 0; }
.revise-warn { font-size: .72rem; color: #a2543f; margin: .5rem 0 0; }

/* ---- clickable storefront ---- */
.storefront { position: relative; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 14px 34px rgba(11,18,42,.16); }
.storefront > img { display: block; width: 100%; height: auto; }




.storefront-hint {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .5rem .8rem;
  background: linear-gradient(transparent, rgba(11,18,42,.78));
  color: rgba(255,255,255,.92); font-size: .72rem; letter-spacing: .06em; text-align: center;
}

@media (hover: none) {

.shop-hot span { opacity: .92; transform: none; font-size: .6rem; }
}
@media (max-width: 640px) { .shop-hot span { font-size: .55rem; padding: .25rem .45rem; } }

@media (max-width: 640px) {

}
/* ============ DARK THEME ============ */
:root {
  --d-bg:      #070B1C;   /* page */
  --d-panel:   #101736;   /* cards */
  --d-panel-2: #161E42;   /* nested surfaces */
  --d-line:    #26305C;   /* borders */
  --d-text:    #EDEFF8;   /* primary text */
  --d-muted:   #97A0C0;   /* secondary text */
}
html[data-theme="dark"] body {background: var(--d-bg); color: var(--d-text);}
html[data-theme="dark"] .shell, html[data-theme="dark"] main {background: transparent;}
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .level-card h3, html[data-theme="dark"] .setup, html[data-theme="dark"] .prompt p {color: var(--d-text);}
html[data-theme="dark"] p, html[data-theme="dark"] small, html[data-theme="dark"] .hero-lede, html[data-theme="dark"] .level-card p, html[data-theme="dark"] .level-card small {color: var(--d-muted);}
html[data-theme="dark"] .stat-line {color: var(--d-muted);}
html[data-theme="dark"] .stat-line b {color: var(--d-text);}
html[data-theme="dark"] .levels {background: var(--d-bg);}
html[data-theme="dark"] .level-card {background: var(--d-panel); border-color: var(--d-line); box-shadow: 0 14px 34px rgba(0,0,0,.45);}
html[data-theme="dark"] .level-card:hover {border-color: var(--accent);}
html[data-theme="dark"] .level-card.team {background: linear-gradient(160deg, #1B1140, #0C1030);}
html[data-theme="dark"] .level-count, html[data-theme="dark"] .level-stat {color: var(--d-muted);}
html[data-theme="dark"] .level-go {background: var(--accent); color: #0A0F26; box-shadow: 0 5px 0 rgba(0,0,0,.45);}
html[data-theme="dark"] .level-card:hover .level-go {box-shadow: 0 7px 0 rgba(0,0,0,.5);}
html[data-theme="dark"] .stats-block, html[data-theme="dark"] .play-card, html[data-theme="dark"] .summary-card, html[data-theme="dark"] .decision-panel, html[data-theme="dark"] .picker-block {background: var(--d-panel); color: var(--d-text); border-color: var(--d-line); box-shadow: 0 14px 34px rgba(0,0,0,.42);}
html[data-theme="dark"] .pos-stat, html[data-theme="dark"] .rank-step, html[data-theme="dark"] .chip-new {background: var(--d-panel-2); color: var(--d-text); border-color: var(--d-line);}
html[data-theme="dark"] .choice {background: var(--d-panel-2); border-color: var(--d-line); color: var(--d-text);}
html[data-theme="dark"] .choice:hover {border-color: var(--sky);}
html[data-theme="dark"] .reason-actions button {background: var(--d-panel-2); border-color: var(--d-line); color: var(--d-text);}
html[data-theme="dark"] .revise-wrap {border-top-color: var(--d-line);}
html[data-theme="dark"] .revise-wrap.open {background: rgba(255,255,255,.04); border-color: var(--d-line);}
html[data-theme="dark"] .revise-label {color: var(--d-muted);}
html[data-theme="dark"] .revise-note {background: var(--d-panel-2); border-color: var(--d-line); color: var(--d-text);}
html[data-theme="dark"] .revise-send {background: var(--sky); color: #06122A;}
html[data-theme="dark"] .revise-link {color: var(--d-muted);}
html[data-theme="dark"] .section-heading.tight h2 {color: var(--d-text);}
html[data-theme="dark"] .text-button {color: var(--d-text); border-bottom-color: var(--d-line);}
html[data-theme="dark"] .storefront {box-shadow: 0 16px 40px rgba(0,0,0,.5);}
html[data-theme="dark"] .challenge {background: radial-gradient(circle at 96% 8%, rgba(0,215,215,.10), transparent 26%), radial-gradient(circle at 2% 88%, rgba(255,79,163,.10), transparent 24%), var(--d-bg);}
html[data-theme="dark"] .summary {background: radial-gradient(circle at 15% 20%, rgba(0,215,215,.12), transparent 26%), radial-gradient(circle at 85% 80%, rgba(255,79,163,.12), transparent 26%), var(--d-bg);}
html[data-theme="dark"] .picker-page {background: var(--d-bg);}
html[data-theme="dark"] .challenge-heading h1 {color: var(--d-text);}
html[data-theme="dark"] .challenge-heading small, html[data-theme="dark"] .summary-card > p, html[data-theme="dark"] .summary-card .score-big span {color: var(--d-muted);}
html[data-theme="dark"] .challenge .progress-track {background: rgba(255,255,255,.12);}
html[data-theme="dark"] .mini-back, html[data-theme="dark"] .back-button {color: var(--d-muted);}
html[data-theme="dark"] .decision-panel {border-top-color: var(--sky);}

/* theme toggle button */
.theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff;
  border-radius: 999px; width: 34px; height: 34px; display: grid; place-items: center;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0; flex: none; transition: .15s; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--sky); color: var(--sky); outline: none; }
.header-right { display: flex; align-items: center; gap: .6rem; }

/* ============ COACHES & RULES ============ */
.rules-entry {
  width: min(1168px, calc(100% - 44px)); margin: 1.5rem auto 4rem; padding: clamp(1.4rem, 4vw, 2.4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  border-radius: 1.4rem; color: #fff;
  background: radial-gradient(circle at 90% 15%, rgba(0,215,215,.25), transparent 32%), linear-gradient(135deg, #101633, #202757);
  box-shadow: 0 18px 42px rgba(11,18,42,.2);
}
.rules-entry h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); margin: .15rem 0 .5rem; }
.rules-entry-copy > p:not(.eyebrow) { color: rgba(255,255,255,.76); max-width: 46rem; line-height: 1.55; margin: 0; }
.rules-entry-facts { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.rules-entry-facts span { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); border-radius: 999px; padding: .4rem .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rules-entry-button { min-width: 13rem; border: 0; border-radius: 1rem; padding: 1.1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--teal); color: #06152d; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 7px 0 rgba(0,0,0,.28); }
.rules-entry-button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 rgba(0,0,0,.3); }
.rules-entry-button i { font-style: normal; font-size: 1.5rem; }

.rules-page, .rule-quiz-page { min-height: calc(100vh - 76px); padding: 1.6rem clamp(22px, 6vw, 98px) 5rem; background: #f5f4ee; }
.rules-page > *, .rule-quiz-page > * { width: min(1168px, 100%); margin-left: auto; margin-right: auto; }
.rules-hero { margin-top: 1.2rem; padding: clamp(1.5rem, 4vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .8fr); gap: 2rem; align-items: end; border-radius: 1.5rem; color: #fff; background: radial-gradient(circle at 83% 16%, rgba(255,79,163,.24), transparent 28%), radial-gradient(circle at 10% 95%, rgba(0,215,215,.18), transparent 34%), #101633; }
.rules-hero h1 { margin: .25rem 0 .7rem; color: #fff; font-size: clamp(2.2rem, 6vw, 4.7rem); line-height: .92; letter-spacing: -.045em; }
.rules-hero h1 span { color: var(--teal); }
.rules-hero > div > p:not(.eyebrow) { max-width: 43rem; color: rgba(255,255,255,.72); line-height: 1.55; }
.rules-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.rules-stats div { min-height: 6.2rem; padding: .9rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(255,255,255,.07); }
.rules-stats strong { color: #fff; font-size: 1.75rem; }
.rules-stats span { color: rgba(255,255,255,.58); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.authority-card { margin-top: 1rem; padding: 1.2rem 1.35rem; display: grid; grid-template-columns: minmax(13rem, .6fr) minmax(0, 1.5fr); gap: .8rem 2rem; border: 2px solid #dfe3ed; border-radius: 1.15rem; background: #fff; box-shadow: 0 10px 28px rgba(11,18,42,.07); }
.authority-card h2 { margin: .15rem 0 0; font-size: 1.2rem; }
.authority-card > p { margin: 0; color: #59647e; line-height: 1.55; }
.authority-card > small { grid-column: 2; color: #858da3; }

.rules-setup, .rule-sources { margin-top: 3rem; }
.rule-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.rule-filters label { display: grid; gap: .35rem; color: #5d6784; font-size: .69rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.rule-filters select { width: 100%; min-height: 48px; border: 2px solid #dde1eb; border-radius: .75rem; padding: 0 2.2rem 0 .75rem; background: #fff; color: var(--navy); font: inherit; font-size: .82rem; font-weight: 700; }
.rule-filters select:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.pool-count { color: #69728a; font-size: .82rem; margin: .8rem 0 1rem; }
.pool-count b { color: var(--navy); }
.quiz-size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.quiz-size-grid button { min-height: 9.5rem; padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; border: 2px solid #dfe3ed; border-radius: 1rem; background: #fff; color: var(--navy); text-align: left; cursor: pointer; box-shadow: 0 9px 24px rgba(11,18,42,.07); transition: transform .15s ease, border-color .15s ease; }
.quiz-size-grid button:hover { transform: translateY(-3px); border-color: var(--teal); }
.quiz-size-grid button:disabled { opacity: .45; cursor: default; transform: none; }
.quiz-size-grid small { margin-bottom: auto; color: #8c94a8; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.quiz-size-grid b { font-size: 1.1rem; }
.quiz-size-grid span { margin-top: .25rem; color: #68718b; font-size: .75rem; }
.review-missed { margin-top: .8rem; border: 0; border-bottom: 2px solid var(--navy); padding: .35rem 0; background: transparent; color: var(--navy); font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; }

.rule-source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.rule-source-card { padding: 1.15rem; border: 2px solid #dfe3ed; border-radius: 1rem; background: #fff; box-shadow: 0 9px 24px rgba(11,18,42,.06); }
.rule-source-card > div { display: flex; align-items: center; justify-content: space-between; }
.rule-source-card > div span, .source-badge { display: inline-flex; width: max-content; border-radius: 999px; padding: .3rem .55rem; background: var(--teal); color: #06152d; font-size: .65rem; font-weight: 950; letter-spacing: .08em; }
.rule-source-card > div small { color: #8a92a8; }
.rule-source-card h3 { font-size: 1rem; margin: .85rem 0 .2rem; }
.rule-source-card > p { color: #69728a; font-size: .8rem; margin: 0; }
.rule-source-card footer { margin-top: 1rem; padding-top: .75rem; display: flex; justify-content: space-between; border-top: 1px solid #e7e9f0; }
.rule-source-card a, .rule-citation a { color: #3155b5; font-size: .76rem; font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rule-source-card footer b { color: #69728a; font-size: .75rem; }

.rule-quiz-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.rule-quiz-top > span { color: #6d7690; font-size: .78rem; font-weight: 800; text-align: center; }
.rule-quiz-top > b { color: var(--navy); font-size: .82rem; text-align: right; }
.rule-progress { margin-top: .8rem; }
.rule-question-card { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); align-items: start; border-radius: 1.35rem; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(11,18,42,.12); }
.rule-question-main { padding: clamp(1.25rem, 4vw, 2.3rem); }
.rule-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.rule-tags span { border: 1px solid #dce0e9; border-radius: 999px; padding: .3rem .55rem; color: #707991; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.rule-question-main h1 { margin: .2rem 0 .65rem; font-size: clamp(1.7rem, 4vw, 2.7rem); letter-spacing: -.035em; }
.rule-situation { max-width: 47rem; color: #59647e; font-size: 1.02rem; line-height: 1.62; }
.rule-question-main h2 { margin: 1.5rem 0 .8rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.rule-choice-list { display: grid; gap: .65rem; }
.rule-choice { width: 100%; min-height: 66px; display: grid; grid-template-columns: 2.25rem 1fr; gap: .8rem; align-items: center; border: 2px solid #dfe3ed; border-radius: .9rem; padding: .72rem .85rem; background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer; }
.rule-choice:hover:not(:disabled) { border-color: #7085c6; transform: translateX(2px); }
.rule-choice b { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: .62rem; background: #eef0f7; font-size: .85rem; }
.rule-choice span { font-size: .9rem; line-height: 1.42; }
.rule-choice.correct { border-color: #30a873; background: #eefaf4; }
.rule-choice.correct b { background: #30a873; color: #fff; }
.rule-choice.wrong { border-color: #dd655b; background: #fff2ef; }
.rule-choice.wrong b { background: #dd655b; color: #fff; }
.rule-choice:disabled { cursor: default; opacity: 1; }
.rule-feedback { margin-top: 1rem; padding: 1rem; border-left: 5px solid #30a873; border-radius: .85rem; background: #eefaf4; }
.rule-feedback.bad { border-left-color: #dd655b; background: #fff2ef; }
.rule-feedback > strong { color: #176c48; }
.rule-feedback.bad > strong { color: #a63d35; }
.rule-feedback > p { margin: .35rem 0 .8rem; color: #4d5872; }
.rule-feedback > div { padding-top: .75rem; border-top: 1px solid rgba(16,22,51,.1); }
.rule-feedback small { color: #6f7890; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.rule-feedback div p { margin: .3rem 0 0; color: #313b58; line-height: 1.55; }

.rule-citation { min-height: 100%; padding: 1.6rem 1.35rem; align-self: stretch; color: #fff; background: radial-gradient(circle at 100% 0, rgba(0,215,215,.19), transparent 30%), #101633; }
.rule-citation h3 { margin: .75rem 0 .25rem; color: #fff; font-size: 1.05rem; }
.rule-citation > p:not(.eyebrow) { color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.45; }
.rule-citation dl { margin: 1.3rem 0; }
.rule-citation dl div { padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.13); }
.rule-citation dt { color: rgba(255,255,255,.45); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rule-citation dd { margin: .2rem 0 0; color: #fff; font-size: .78rem; line-height: 1.4; }
.rule-citation a { color: var(--teal); }
.rules-summary .summary-card { border-top: 6px solid var(--teal); }

html[data-theme="dark"] .rules-entry { box-shadow: 0 18px 42px rgba(0,0,0,.48); }
html[data-theme="dark"] .rules-page, html[data-theme="dark"] .rule-quiz-page { background: var(--d-bg); }
html[data-theme="dark"] .authority-card, html[data-theme="dark"] .quiz-size-grid button, html[data-theme="dark"] .rule-source-card, html[data-theme="dark"] .rule-question-card { background: var(--d-panel); border-color: var(--d-line); color: var(--d-text); box-shadow: 0 14px 34px rgba(0,0,0,.42); }
html[data-theme="dark"] .authority-card > p, html[data-theme="dark"] .pool-count, html[data-theme="dark"] .rule-source-card > p, html[data-theme="dark"] .rule-situation { color: var(--d-muted); }
html[data-theme="dark"] .pool-count b, html[data-theme="dark"] .quiz-size-grid button, html[data-theme="dark"] .rule-quiz-top > b, html[data-theme="dark"] .review-missed { color: var(--d-text); }
html[data-theme="dark"] .review-missed { border-bottom-color: var(--teal); }
html[data-theme="dark"] .rule-filters select, html[data-theme="dark"] .rule-choice { background: var(--d-panel-2); border-color: var(--d-line); color: var(--d-text); }
html[data-theme="dark"] .rule-tags span { border-color: var(--d-line); color: var(--d-muted); }
html[data-theme="dark"] .rule-choice b { background: #242e5c; }
html[data-theme="dark"] .rule-choice.correct { background: rgba(48,168,115,.16); border-color: #30a873; }
html[data-theme="dark"] .rule-choice.wrong { background: rgba(221,101,91,.14); border-color: #dd655b; }
html[data-theme="dark"] .rule-feedback { background: rgba(48,168,115,.13); }
html[data-theme="dark"] .rule-feedback.bad { background: rgba(221,101,91,.12); }
html[data-theme="dark"] .rule-feedback > p, html[data-theme="dark"] .rule-feedback div p { color: var(--d-text); }
html[data-theme="dark"] .rule-feedback > div, html[data-theme="dark"] .rule-source-card footer { border-color: var(--d-line); }
html[data-theme="dark"] .rule-source-card a { color: var(--teal); }

@media (max-width: 900px) {
  .rules-hero { grid-template-columns: 1fr; }
  .rule-question-card { grid-template-columns: 1fr; }
  .rule-citation { min-height: 0; }
  .quiz-size-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .rules-entry { grid-template-columns: 1fr; width: min(100% - 32px, 1168px); margin-bottom: 2.5rem; }
  .rules-entry-button { width: 100%; }
  .rules-page, .rule-quiz-page { padding-left: 16px; padding-right: 16px; }
  .rules-hero { padding: 1.35rem; }
  .rules-stats { grid-template-columns: repeat(2, 1fr); }
  .authority-card { grid-template-columns: 1fr; }
  .authority-card > small { grid-column: 1; }
  .rule-filters, .rule-source-grid { grid-template-columns: 1fr; }
  .quiz-size-grid { grid-template-columns: 1fr 1fr; }
  .quiz-size-grid button { min-height: 8.25rem; }
  .rule-quiz-top { grid-template-columns: 1fr auto; }
  .rule-quiz-top > span { display: none; }
  .rule-question-main { padding: 1.15rem; }
  .rule-choice { grid-template-columns: 2rem 1fr; padding: .65rem; }
}
@media (max-width: 430px) {
  .quiz-size-grid { grid-template-columns: 1fr; }
  .quiz-size-grid button { min-height: 7.6rem; }
}

/* ---- strengths panel (replaces the career/shop styling) ---- */
.skill-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px 10px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.skill-name{font-weight:600;font-size:.95rem}
.skill-name b{margin-right:6px}
.skill-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.skill-bar i{display:block;height:100%;border-radius:5px}
.skill-pct{font-variant-numeric:tabular-nums;font-size:.85rem;opacity:.8;min-width:38px;text-align:right}
.skill-sub{grid-column:1/-1;font-size:.75rem;opacity:.55;margin-top:-4px}
.skill-empty{opacity:.6;font-size:.9rem;margin:10px 0 0}
.verdict{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;
  padding:3px 9px;white-space:nowrap;font-style:normal}
.v-strong{color:#0b3d2a;background:#3ddc97}
.v-solid{color:#04303a;background:#48d7e8}
.v-work{color:#fff;background:#ff2d78}
.v-none{color:rgba(255,255,255,.72);background:rgba(255,255,255,.14)}
.rank-num{font-variant-numeric:tabular-nums;opacity:.5;margin-right:8px;font-size:.8rem}
.pos-stat em.verdict{display:inline-block;margin-top:6px}
@media(max-width:520px){
  .skill-row{grid-template-columns:1fr auto auto}
  .skill-bar{grid-column:1/-1;order:3}
  .skill-sub{order:4}
}

/* current title should be unmistakable, including in dark mode */
.rank-step.now { box-shadow: inset 0 0 0 2px var(--teal, #00D7D7); }
html[data-theme="dark"] .rank-step.now { background: #16205a; color: #fff; box-shadow: inset 0 0 0 2px var(--sky, #48d7e8); }
html[data-theme="dark"] .rank-step.now span, html[data-theme="dark"] .rank-step.now i { color: rgba(255,255,255,.78); }
html[data-theme="dark"] .rank-step.locked { opacity: .45; }

/* ---- Pitcher's Mound ---- */
.mound-page { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.25rem 3rem; }
.mound-hero { background: var(--navy); color: var(--cream); border-radius: 1.25rem; padding: 1.5rem 1.4rem; margin-bottom: 1.2rem; }
.mound-hero h1 { font-size: clamp(1.8rem,5vw,2.6rem); margin: .3rem 0 .5rem; }
.mound-hero p { color: rgba(255,255,255,.78); margin: 0; }
.mound-hero .eyebrow { color: var(--sky,#48d7e8); }
.mound-rooms { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill,minmax(13rem,1fr)); }
.mound-room { position: relative; text-align: left; border: 1px solid rgba(11,18,42,.12); border-radius: 1rem; background: #f6f7fb; padding: 1rem 1.05rem; cursor: pointer; font: inherit; }
.mound-room:hover:not(:disabled) { border-color: var(--teal,#00D7D7); }
.mound-room h3 { margin: 0; font-size: 1.05rem; }
.mound-room p { margin: .35rem 0 0; font-size: .85rem; opacity: .72; }
.mound-room i { position: absolute; right: 1rem; top: 1rem; font-style: normal; opacity: .5; }
.mound-room.is-empty { opacity: .5; cursor: default; }
.room-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.room-tag { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; }
.room-tag.soon { background: rgba(72,215,232,.2); color: #04303a; }
.room-tag.empty { background: rgba(255,45,120,.16); color: #8a0f3c; }
.mound-ladder { display: grid; gap: .5rem; }
.mound-rung { display: flex; align-items: center; gap: .8rem; text-align: left; font: inherit; cursor: pointer; border: 1px solid rgba(11,18,42,.12); border-left-width: 4px; border-radius: .85rem; background: #f6f7fb; padding: .8rem .9rem; }
.mound-rung:hover { border-color: var(--teal,#00D7D7); }
.mound-rung.open { border-left-color: #3ddc97; }
.mound-rung.gated { border-left-color: #c8623c; }
.mound-rung.locked { border-left-color: #ff2d78; }
.rung-n { font-size: 1.15rem; font-weight: 700; opacity: .45; }
.rung-body { flex: 1; min-width: 0; }
.rung-body b { display: block; font-size: 1rem; }
.rung-body small { display: block; font-size: .8rem; opacity: .68; }
.rung-gate { font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; opacity: .65; text-align: right; max-width: 8rem; }
.grip-row { padding: .6rem 0; border-bottom: 1px solid rgba(11,18,42,.09); }
.grip-row b { display: block; font-size: .95rem; }
.grip-row span { font-size: .85rem; opacity: .75; }
.grip-note { font-size: .82rem; opacity: .7; margin: .7rem 0 0; border-left: 2px solid var(--teal,#00D7D7); padding-left: .7rem; }
.chart-line { font-size: .85rem; opacity: .8; margin: .6rem 0 0; }
.tight-list { margin: 0; padding-left: 1.1rem; } .tight-list li { margin-bottom: .3rem; font-size: .9rem; }
.film-list { display: grid; gap: .45rem; }
.film-row { display: flex; align-items: center; gap: .7rem; font: inherit; text-align: left; cursor: pointer; border: 1px solid rgba(11,18,42,.12); border-radius: .7rem; background: #f6f7fb; padding: .65rem .8rem; }
.film-row:hover { border-color: var(--teal,#00D7D7); }
.film-play { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #3ddc97; color: #06281c; display: grid; place-items: center; font-size: .7rem; flex: none; }
.arm-note { border: 2px solid rgba(200,98,60,.4); }
.photo-slots { display: grid; gap: .5rem; margin: .8rem 0; }
.photo-slots.multi { grid-template-columns: 1fr 1fr; }
.photo-slot { position: relative; border: 1.5px dashed rgba(72,215,232,.55); border-radius: .7rem; background: rgba(72,215,232,.07); padding: 1.4rem .7rem .9rem; text-align: center; min-height: 5.5rem; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; }
.photo-slot span { font-size: 1.2rem; opacity: .5; }
.photo-slot small { font-size: .7rem; letter-spacing: .03em; opacity: .8; }
.photo-slot[data-label]::before { content: attr(data-label); position: absolute; top: .4rem; left: .4rem; font-size: .65rem; border: 1px solid rgba(255,45,120,.45); color: #ff2d78; border-radius: .4rem; padding: 0 .4rem; }
.grip-opts { display: grid; gap: .45rem; }
.grip-opt.is-right { border-color: #3ddc97 !important; background: rgba(61,220,151,.16) !important; }
.grip-opt.is-wrong { border-color: #ff2d78 !important; background: rgba(255,45,120,.13) !important; }
.grip-fb { display: none; margin-top: .7rem; padding: .65rem .8rem; border-radius: .6rem; font-size: .87rem; border-left: 3px solid; }
.grip-fb.ok { display: block; background: rgba(61,220,151,.12); border-color: #3ddc97; }
.grip-fb.no { display: block; background: rgba(255,45,120,.1); border-color: #ff2d78; }
html[data-theme="dark"] .mound-room, html[data-theme="dark"] .mound-rung, html[data-theme="dark"] .film-row { background: var(--d-panel-2); color: var(--d-text); border-color: var(--d-line); }
html[data-theme="dark"] .mound-page { background: var(--d-bg); }
html[data-theme="dark"] .grip-row { border-bottom-color: rgba(255,255,255,.09); }
@media (max-width: 520px) { .photo-slots.multi { grid-template-columns: 1fr; } .rung-gate { max-width: 5.5rem; } }

html[data-theme="dark"] .room-tag.soon { background: rgba(72,215,232,.24); color: #9fe9f4; }
html[data-theme="dark"] .room-tag.empty { background: rgba(255,45,120,.22); color: #ffb3cd; }

/* ---- identity + leaderboard ---- */
.board-entry { background: var(--navy); color: var(--cream); border-radius: 1.25rem; padding: 1.5rem 1.4rem; margin: 1.2rem 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.board-entry .rules-entry-copy { flex: 1 1 16rem; }
.board-entry h2 { margin: .3rem 0 .5rem; }
.board-entry p { color: rgba(255,255,255,.78); margin: 0; }
.handle-box { font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; margin: .2rem 0 .8rem; word-break: break-word; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; letter-spacing: .12em; background: rgba(11,18,42,.07); border: 1px dashed rgba(11,18,42,.25); border-radius: .7rem; padding: .8rem .9rem; margin: .2rem 0 .8rem; text-align: center; word-break: break-all; }
.board-list { display: grid; gap: .4rem; }
.board-row { display: flex; align-items: center; gap: .9rem; border: 1px solid rgba(11,18,42,.12); border-radius: .75rem; background: #f6f7fb; padding: .7rem .9rem; }
.board-rank { width: 1.6rem; font-weight: 700; opacity: .5; flex: none; }
.board-handle { flex: 1; font-weight: 600; min-width: 0; word-break: break-word; }
.board-handle small { display: block; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; opacity: .55; font-weight: 400; }
.board-points { font-weight: 700; font-variant-numeric: tabular-nums; }
.board-row.you { border-color: var(--teal,#00D7D7); box-shadow: inset 0 0 0 1px var(--teal,#00D7D7); }
.board-row.sample { opacity: .62; }
.board-empty { text-align: center; padding: .6rem 0; }
.board-empty p { margin: 0 0 .7rem; opacity: .75; }
.offline-note { border: 2px dashed rgba(200,98,60,.45); }
html[data-theme="dark"] .board-row { background: var(--d-panel-2); color: var(--d-text); border-color: var(--d-line); }
html[data-theme="dark"] .code-box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: var(--d-text); }
.film-frame { position: relative; padding-top: 56.25%; border-radius: .7rem; overflow: hidden; background: #000; }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chart-wrap { margin: .9rem 0; padding: .6rem; border: 1px solid rgba(11,18,42,.12); border-radius: .8rem; background: #f6f7fb; }
.move-chart { display: block; width: 100%; height: auto; color: #0b122a; }
html[data-theme="dark"] .chart-wrap { background: var(--d-panel-2); border-color: var(--d-line); }
html[data-theme="dark"] .move-chart { color: #eef4fb; }
.film-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.film-tab { font: inherit; font-size: .8rem; cursor: pointer; border: 1px solid rgba(11,18,42,.15); border-radius: 99px; padding: .4rem .85rem; background: transparent; color: inherit; }
.film-tab.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.film-grid { display: grid; gap: .45rem; }
.film-card { display: flex; align-items: center; gap: .7rem; font: inherit; text-align: left; cursor: pointer; border: 1px solid rgba(11,18,42,.12); border-radius: .7rem; background: #f6f7fb; padding: .6rem .75rem; }
.film-card:hover { border-color: var(--teal,#00D7D7); }
.film-meta b { display: block; font-size: .92rem; }
.film-meta small { font-size: .72rem; opacity: .6; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arm-table { min-width: 34rem; font-variant-numeric: tabular-nums; }
.arm-table td, .arm-table th { text-align: center; padding: .5rem .4rem; }
.arm-table td:first-child, .arm-table th:first-child { text-align: left; }
.arm-hero { border: 2px solid rgba(200,98,60,.5); }
.warn-block { border: 2px solid rgba(255,45,120,.4); }
html[data-theme="dark"] .film-card, html[data-theme="dark"] .film-tab { background: var(--d-panel-2); color: var(--d-text); border-color: var(--d-line); }
html[data-theme="dark"] .film-tab.on { background: var(--sky,#48d7e8); color: #04303a; }
.grip-shots { display: grid; gap: .6rem; margin: .8rem 0; }
.grip-shots.two { grid-template-columns: 1fr 1fr; }
.grip-shot { margin: 0; }
.grip-shot img { width: 100%; height: auto; display: block; border-radius: .7rem; background: #000; }
.grip-shot figcaption { font-size: .78rem; opacity: .72; margin-top: .4rem; line-height: 1.45; }
.grip-shot.labelled { position: relative; }
.grip-shot.labelled::before { content: attr(data-label); position: absolute; top: .45rem; left: .45rem;
  font-size: .72rem; font-weight: 700; background: rgba(7,20,38,.86); color: #2fe0ff;
  border: 1px solid rgba(47,224,255,.5); border-radius: .4rem; padding: .1rem .5rem; z-index: 1; }
.photo-credit { font-size: .74rem; opacity: .62; margin: .7rem 0 0; }
.link-button { font: inherit; font-size: .74rem; background: none; border: 0; padding: 0;
  color: var(--teal,#00D7D7); text-decoration: underline; cursor: pointer; }
@media (max-width: 420px) { .grip-shots.two { grid-template-columns: 1fr; } }
.clip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .7rem; }
.grip-clip { margin: 0; }
.clip-shell { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: .7rem;
  overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.clip-shell img { width: 100%; height: auto; display: block; opacity: .92; }
.clip-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.clip-shell:hover .clip-play { transform: scale(1.12); }
.clip-video { width: 100%; height: auto; display: block; border-radius: .7rem; background: #000; }
.grip-clip figcaption { margin-top: .4rem; font-size: .76rem; line-height: 1.45; }
.grip-clip figcaption b { display: block; font-size: .82rem; }
.grip-clip figcaption span { opacity: .68; }
.clip-missing { aspect-ratio: 260/462; display: grid; place-items: center; align-content: center; gap: .3rem;
  border: 1px dashed rgba(11,18,42,.28); border-radius: .7rem; text-align: center; padding: .5rem; }
.clip-missing span { font-size: 1.4rem; opacity: .45; }
.clip-missing small { font-size: .7rem; opacity: .55; }
.grip-clip.pending figcaption b { opacity: .7; }
html[data-theme="dark"] .clip-missing { border-color: rgba(255,255,255,.22); }
@media (max-width: 380px) { .clip-grid { grid-template-columns: 1fr; } }
/* --- back navigation: was 10px, transparent and muted. Now a real target. --- */
.back-button { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid currentColor;
  background: transparent; cursor: pointer; padding: .5rem .9rem; margin-bottom: .2rem;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  border-radius: 99px; opacity: .95; min-height: 40px; }
.back-button:hover { background: currentColor; }
.back-button:hover { color: var(--teal,#00D7D7); }
html[data-theme="dark"] .mini-back, html[data-theme="dark"] .back-button { color: #9fd9e8; }
html[data-theme="dark"] .back-button:hover { color: var(--sky,#48d7e8); }
.position-screen .back-button, .movement-top .back-button { color: rgba(255,255,255,.9); }
/* --- coach tool --- */
.drill-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(11,18,42,.1); padding: .1rem 0; }
.drill-row:last-child { border-bottom: 0; }
.drill-play { flex: 1; display: flex; align-items: center; gap: .7rem; font: inherit; text-align: left;
  background: none; border: 0; cursor: pointer; color: inherit; padding: .65rem .2rem; }
.drill-row:not(.has-video) { padding: .65rem .2rem; }
.drill-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--teal,#00D7D7); color: #04303a; font-size: .72rem; }
.drill-name { font-size: .92rem; font-weight: 600; }
.drill-name small, .drill-row > small { display: block; font-weight: 400; font-size: .76rem; opacity: .62; margin-top: .1rem; }
.drill-out { text-decoration: none; opacity: .45; font-size: .95rem; padding: .4rem; }
.drill-out:hover { opacity: 1; }
.drill-row.playing { display: block; padding: .5rem 0; }
.plan-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0;
  border-bottom: 1px solid rgba(11,18,42,.1); font-size: .9rem; }
.plan-card.teal { border-left: 4px solid #00D7D7; } .plan-card.gold { border-left: 4px solid #e8b23c; }
.plan-card.pink { border-left: 4px solid #ff2d78; }
.game-card { border: 1px solid rgba(11,18,42,.12); border-radius: .7rem; padding: .8rem; margin-bottom: .6rem; }
.game-card h3 { margin: .1rem 0 .35rem; font-size: 1rem; }
.game-card p { font-size: .86rem; margin: 0 0 .3rem; }
.game-change { opacity: .62; font-size: .8rem !important; }
.qab-list { padding-left: 1.2rem; } .qab-list li { padding: .25rem 0; font-size: .9rem; }
html[data-theme="dark"] .game-card { border-color: var(--d-line); }
html[data-theme="dark"] .drill-row, html[data-theme="dark"] .plan-row { border-color: rgba(255,255,255,.1); }
/* --- The Dugout: coach entry, full width, bottom of home --- */
.dugout-band { margin: 2.2rem 0 1rem; padding: 1.5rem 1.3rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(0,215,215,.14), rgba(255,45,120,.12));
  border: 1.5px solid rgba(0,215,215,.4); }
.dugout-band h2 { margin: .2rem 0 .5rem; font-size: clamp(30px,7vw,44px); line-height: .95; }
.dugout-lede { font-size: .95rem; line-height: 1.55; opacity: .85; margin: 0 0 1rem; }
.dugout-stats { display: flex; gap: 1.6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.dugout-stats b { display: block; font-size: 1.7rem; line-height: 1; color: var(--teal,#00D7D7); }
.dugout-stats span { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.dugout-cta { font: inherit; font-weight: 800; font-size: .92rem; letter-spacing: .04em; cursor: pointer;
  border: 0; border-radius: 99px; padding: .85rem 1.5rem; background: var(--teal,#00D7D7); color: #04303a;
  min-height: 48px; width: 100%; }
.dugout-cta:hover { filter: brightness(1.08); }
/* --- expandable practice blocks --- */
.plan-block { border-bottom: 1px solid rgba(11,18,42,.12); }
.plan-block:last-child { border-bottom: 0; }
.plan-row.tap { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%;
  font: inherit; text-align: left; background: none; border: 0; cursor: pointer; color: inherit;
  padding: .8rem .1rem; border-bottom: 0; min-height: 46px; }
.plan-row.tap:disabled { opacity: .5; cursor: default; }
.plan-row.tap b { margin-left: auto; }
.plan-caret { font-style: normal; opacity: .5; font-size: .85rem; width: 1rem; text-align: right; }
.plan-block.open { background: rgba(0,215,215,.06); border-radius: .6rem; }
.block-detail { padding: .2rem .7rem 1rem; }
.block-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
  opacity: .6; margin: .9rem 0 .35rem; }
.plan-row.sub { font-size: .85rem; opacity: .85; padding: .35rem 0; }
.order-list { padding-left: 1.15rem; margin: 0; } .order-list li { padding: .18rem 0; font-size: .88rem; }
.block-missing { font-size: .84rem; line-height: 1.5; padding: .7rem .8rem; border-radius: .5rem;
  border-left: 3px solid #e8b23c; background: rgba(232,178,60,.1); margin: .6rem 0; }
html[data-theme="dark"] .plan-block { border-color: rgba(255,255,255,.1); }
/* scenario text sits on the green field panel / navy instruction panel in BOTH themes,
   so keep it bright rather than inheriting the theme body colour */
html[data-theme="dark"] .scene-meta p, .scene-meta p { color: rgba(255,255,255,.95); }
html[data-theme="dark"] .setup, .setup { color: rgba(255,255,255,.95); }
@media (max-width: 520px) {
  .scene-meta p { font-size: 18px; }
  .setup { font-size: 17px; }
}

/* ================= 3D BUTTON SYSTEM =================
   The look: a solid bright FACE sitting on a solid LIP of the same hue, darkened.
   The lip is derived from the face, so it reads as one moulded object rather than
   a drop shadow. Black shadows were the mistake — on a near-black page they vanish. */
.btn3d, .primary, .secondary, .dugout-cta, .choice, .film-tab, .grip-opt,
.back-button, .mini-back, .whole-team, .role-toggle, .change-position,
.review-missed, .revise-send, .flag-button, .rules-entry-button,
.mound-room, .mound-rung, .film-card, .clip-shell, .play-card, .position-card {
  --face: var(--panel-face, #f6f7fb);
  --lip: color-mix(in srgb, var(--face) 62%, #000);
  background: var(--face);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--lip), 0 9px 16px rgba(0,0,0,.30);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  cursor: pointer;
}
.btn3d:hover, .primary:hover, .secondary:hover, .dugout-cta:hover, .choice:hover,
.film-tab:hover, .grip-opt:hover, .back-button:hover, .mini-back:hover,
.whole-team:hover, .role-toggle:hover, .change-position:hover, .review-missed:hover,
.revise-send:hover, .flag-button:hover, .rules-entry-button:hover,
.mound-room:hover, .mound-rung:hover, .film-card:hover, .clip-shell:hover,
.play-card:hover, .position-card:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 0 var(--lip), 0 13px 22px rgba(0,0,0,.34);
  transform: translateY(-2px);
}
/* pressed: the face travels down onto the lip and the lip all but disappears */
.btn3d:active, .primary:active, .secondary:active, .dugout-cta:active, .choice:active,
.film-tab:active, .grip-opt:active, .back-button:active, .mini-back:active,
.whole-team:active, .role-toggle:active, .change-position:active, .review-missed:active,
.revise-send:active, .flag-button:active, .rules-entry-button:active,
.mound-room:active, .mound-rung:active, .film-card:active, .clip-shell:active,
.play-card:active, .position-card:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--lip), 0 2px 4px rgba(0,0,0,.3);
  filter: none;
}
/* coloured faces */
.primary        { --face: var(--gold);   color: var(--ink); box-shadow: 0 6px 0 var(--lip), 0 9px 16px rgba(0,0,0,.30); }
.secondary      { --face: var(--orange); color: var(--ink); }
.secondary.ghost{ --face: transparent; --lip: transparent; border: 1.5px solid currentColor; box-shadow: none; }
.dugout-cta     { --face: var(--teal);   color: #04303a; border-radius: 999px; }
.back-button, .mini-back { --face: var(--panel-face,#eef1f8); color: var(--ink); border-radius: 999px; border: 0; }
.film-tab.on    { --face: var(--navy); color: var(--cream); }
.level-go       { --lip: color-mix(in srgb, var(--accent) 55%, #000); }
.level-go:active{ transform: translateY(4px); box-shadow: 0 1px 0 var(--lip); }

/* DARK THEME — the face must be LIGHTER than the page or the slab has nothing to sit on */
html[data-theme="dark"] .choice, html[data-theme="dark"] .mound-room,
html[data-theme="dark"] .film-card, html[data-theme="dark"] .clip-shell,
html[data-theme="dark"] .play-card, html[data-theme="dark"] .position-card,
html[data-theme="dark"] .film-tab, html[data-theme="dark"] .grip-opt,
html[data-theme="dark"] .back-button, html[data-theme="dark"] .mini-back,
html[data-theme="dark"] .rules-entry-button, html[data-theme="dark"] .mound-rung,
html[data-theme="dark"] .whole-team, html[data-theme="dark"] .role-toggle,
html[data-theme="dark"] .change-position, html[data-theme="dark"] .review-missed {
  --face: #1d2751;
  --lip: #0a0f26;
  color: var(--d-text);
  box-shadow: 0 6px 0 var(--lip), 0 10px 18px rgba(0,0,0,.5);
}
html[data-theme="dark"] .choice:hover, html[data-theme="dark"] .mound-room:hover,
html[data-theme="dark"] .film-card:hover, html[data-theme="dark"] .clip-shell:hover,
html[data-theme="dark"] .play-card:hover, html[data-theme="dark"] .position-card:hover,
html[data-theme="dark"] .film-tab:hover, html[data-theme="dark"] .grip-opt:hover,
html[data-theme="dark"] .back-button:hover, html[data-theme="dark"] .mini-back:hover,
html[data-theme="dark"] .rules-entry-button:hover, html[data-theme="dark"] .mound-rung:hover {
  transform: translateY(-2px); box-shadow: 0 8px 0 var(--lip), 0 14px 24px rgba(0,0,0,.55);
}
html[data-theme="dark"] .choice:active, html[data-theme="dark"] .mound-room:active,
html[data-theme="dark"] .film-card:active, html[data-theme="dark"] .clip-shell:active,
html[data-theme="dark"] .play-card:active, html[data-theme="dark"] .position-card:active,
html[data-theme="dark"] .film-tab:active, html[data-theme="dark"] .grip-opt:active,
html[data-theme="dark"] .back-button:active, html[data-theme="dark"] .mini-back:active,
html[data-theme="dark"] .rules-entry-button:active, html[data-theme="dark"] .mound-rung:active {
  transform: translateY(5px); box-shadow: 0 1px 0 var(--lip), 0 2px 5px rgba(0,0,0,.5);
}
html[data-theme="dark"] .film-tab.on { --face: var(--sky); color: #04303a; }
html[data-theme="dark"] .level-card, html[data-theme="dark"] .game-card {
  box-shadow: 0 7px 0 #0a0f26, 0 14px 26px rgba(0,0,0,.5);
}
/* iOS Safari only fires :active if the element is touch-aware */
.btn3d, button { -webkit-tap-highlight-color: transparent; }
button:disabled { box-shadow: none !important; transform: none !important; filter: grayscale(.3) opacity(.6); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* ========== DEPTH LAYER ==========
   Four techniques lifted from the level card:
   1. float   — deep ambient shadow under a solid lip
   2. bevel   — inset highlight on the top edge, inset shade on the bottom
   3. lighting on the accent bar — gradient + its own cast shadow
   4. emboss  — text-shadow so numerals read as raised, not printed */

/* 2. BEVEL on every raised face */
.primary, .secondary, .dugout-cta, .choice, .film-tab, .grip-opt, .back-button,
.mini-back, .whole-team, .role-toggle, .change-position, .review-missed,
.revise-send, .flag-button, .rules-entry-button, .mound-room, .mound-rung,
.film-card, .clip-shell, .play-card, .position-card, .level-go, .drill-icon {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 6px 0 var(--lip, rgba(0,0,0,.4)),
    0 10px 18px rgba(0,0,0,.32);
}
.primary:active, .secondary:active, .dugout-cta:active, .choice:active,
.film-tab:active, .grip-opt:active, .back-button:active, .mini-back:active,
.mound-room:active, .mound-rung:active, .film-card:active, .clip-shell:active,
.play-card:active, .position-card:active, .rules-entry-button:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 2px 6px rgba(0,0,0,.28),
    0 1px 0 var(--lip, rgba(0,0,0,.4)),
    0 2px 4px rgba(0,0,0,.3);
}

/* 1. FLOAT — cards sit above the page on a lip with real ambient shadow */
.level-card, .game-card, .stats-block, .plan-card {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 0 rgba(0,0,0,.22), 0 18px 34px rgba(0,0,0,.34);
}
.level-card { transition: transform .16s ease, box-shadow .16s ease; }
.level-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 0 rgba(0,0,0,.24), 0 24px 44px rgba(0,0,0,.4);
}
.level-card:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.22), 0 5px 12px rgba(0,0,0,.32);
}

/* 3. ACCENT BAR with thickness and lighting */
.level-card::before {
  height: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 78%, #fff) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 62%, #000) 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  z-index: 2;
}
.plan-card { border-left-width: 6px; }

/* 4. EMBOSS on numerals and display type */
.level-number, .game-card .eyebrow, .plan-card .eyebrow, .mound-rung .rung-no, .qab-list li::marker {
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(0,0,0,.45);
}
.level-card h3, .dugout-band h2, .mound-hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 3px 6px rgba(0,0,0,.42);
}
html[data-theme="dark"] .level-number, html[data-theme="dark"] .level-card h3,
html[data-theme="dark"] .dugout-band h2, html[data-theme="dark"] .mound-hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 3px 7px rgba(0,0,0,.7);
}
html[data-theme="dark"] .level-card, html[data-theme="dark"] .game-card,
html[data-theme="dark"] .stats-block, html[data-theme="dark"] .plan-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 0 #070b1c, 0 20px 38px rgba(0,0,0,.62);
}
html[data-theme="dark"] .level-card:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 0 #070b1c, 0 26px 48px rgba(0,0,0,.7);
}
html[data-theme="dark"] .level-card:active {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 2px 0 #070b1c, 0 6px 14px rgba(0,0,0,.6);
}

/* START button: dark-theme rules outrank .level-go, so restate the full bevel here.
   Gold face, gold lip (not black), highlight along the top edge. */
html[data-theme="dark"] .level-go,
.level-go {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 80%, #fff) 0%,
    var(--accent) 46%,
    color-mix(in srgb, var(--accent) 88%, #000) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, #000),
    0 6px 0 color-mix(in srgb, var(--accent) 46%, #000),
    0 10px 16px rgba(0,0,0,.5);
}
html[data-theme="dark"] .level-card:hover .level-go, .level-card:hover .level-go {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, #000),
    0 8px 0 color-mix(in srgb, var(--accent) 46%, #000),
    0 14px 22px rgba(0,0,0,.55);
}
html[data-theme="dark"] .level-card:active .level-go, .level-card:active .level-go {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 3px 7px color-mix(in srgb, var(--accent) 40%, #000),
    0 1px 0 color-mix(in srgb, var(--accent) 46%, #000);
}
/* the hover outline was reading as "selected" rather than raised — soften it */
.level-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Same moulded treatment for the other coloured buttons: gradient face,
   same-hue lip, top highlight. Face colour comes from --face. */
.primary, .secondary, .dugout-cta, .film-tab.on, .drill-icon, .revise-send, .whole-team {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--face) 82%, #fff) 0%,
    var(--face) 46%,
    color-mix(in srgb, var(--face) 90%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 color-mix(in srgb, var(--face) 58%, #000),
    0 6px 0 color-mix(in srgb, var(--face) 48%, #000),
    0 10px 16px rgba(0,0,0,.42);
}
.primary:active, .secondary:active, .dugout-cta:active, .drill-icon:active,
.revise-send:active, .whole-team:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 3px 7px color-mix(in srgb, var(--face) 42%, #000),
    0 1px 0 color-mix(in srgb, var(--face) 48%, #000);
}
html[data-theme="dark"] .primary, html[data-theme="dark"] .secondary,
html[data-theme="dark"] .dugout-cta, html[data-theme="dark"] .film-tab.on {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 color-mix(in srgb, var(--face) 58%, #000),
    0 6px 0 color-mix(in srgb, var(--face) 48%, #000),
    0 11px 18px rgba(0,0,0,.55);
}
/* dark panel buttons get a matching moulded face rather than flat navy */
html[data-theme="dark"] .choice, html[data-theme="dark"] .mound-room,
html[data-theme="dark"] .film-card, html[data-theme="dark"] .play-card,
html[data-theme="dark"] .position-card, html[data-theme="dark"] .back-button,
html[data-theme="dark"] .rules-entry-button, html[data-theme="dark"] .mound-rung {
  background: linear-gradient(180deg, #26315e 0%, #1d2751 48%, #172046 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 6px 0 #0a0f26,
    0 11px 20px rgba(0,0,0,.5);
}

/* ================= HOME PORTALS =================
   One component, four instances. Same geometry every time so the page reads as a
   set rather than four different experiments. Depth comes from a coloured top bar
   with lighting, a moulded face, a same-hue lip and an inset top highlight. */
.portals { margin-top: 1.4rem; }
.portal-grid { display: grid; gap: 1.05rem; }
.portal {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 1.5rem 1.25rem 1.15rem; border: 0; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #26315e 0%, #1c2650 46%, #151d43 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 8px 0 #0a0f26,
    0 16px 30px rgba(0,0,0,.5);
  transition: transform .1s ease, box-shadow .1s ease, filter .16s ease;
}
.portal-bar {
  position: absolute; inset: 0 0 auto; height: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 80%, #fff) 0%,
    var(--accent) 52%,
    color-mix(in srgb, var(--accent) 62%, #000) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.portal-head { display: flex; align-items: baseline; gap: .7rem; }
.portal-no {
  font: 30px/1 Impact, sans-serif; color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 3px 6px rgba(0,0,0,.65);
}
.portal-eyebrow {
  font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 950;
  opacity: .62;
}
.portal-name {
  font: 36px/.96 Impact, sans-serif; text-transform: uppercase; margin-top: .15rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.13), 0 3px 7px rgba(0,0,0,.6);
}
.portal-line { font-size: .92rem; line-height: 1.5; opacity: .8; }
.portal-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.portal-facts span {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900;
  padding: .34rem .6rem; border-radius: 99px;
  background: rgba(0,0,0,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  opacity: .8;
}
.portal-go {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  margin-top: .85rem; padding: .72rem 1.2rem; border-radius: 999px;
  font-size: 12px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 82%, #fff) 0%,
    var(--accent) 46%,
    color-mix(in srgb, var(--accent) 88%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, #000),
    0 5px 0 color-mix(in srgb, var(--accent) 46%, #000),
    0 8px 14px rgba(0,0,0,.45);
  transition: transform .1s ease, box-shadow .1s ease;
}
.portal-go i { font-style: normal; transition: transform .16s ease; }
.portal:hover {
  transform: translateY(-3px); filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.4),
    0 11px 0 #0a0f26, 0 22px 40px rgba(0,0,0,.58);
}
.portal:hover .portal-go i { transform: translateX(4px); }
.portal:active {
  transform: translateY(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 3px 9px rgba(0,0,0,.42),
    0 2px 0 #0a0f26, 0 4px 10px rgba(0,0,0,.5);
}
.portal:active .portal-go {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 3px 7px color-mix(in srgb, var(--accent) 40%, #000),
    0 1px 0 color-mix(in srgb, var(--accent) 46%, #000);
}
.portal:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (min-width: 720px) { .portal-grid { grid-template-columns: 1fr 1fr; } }
/* light theme keeps the same geometry, lighter face */
html:not([data-theme="dark"]) .portal {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fc 48%, #e7ebf6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.08),
    0 8px 0 rgba(16,22,51,.16), 0 16px 28px rgba(16,22,51,.2);
}
html:not([data-theme="dark"]) .portal-name { text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.2); }
html:not([data-theme="dark"]) .portal-facts span { background: rgba(16,22,51,.08); }
/* The Diamond page keeps the routine cards raised too */
.routine-card {
  border-radius: 14px; padding: 1rem;
  background: linear-gradient(180deg, #26315e 0%, #1c2650 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 0 #0a0f26, 0 10px 20px rgba(0,0,0,.45);
}
.routine-card b { color: var(--sky); text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.6); }
html:not([data-theme="dark"]) .routine-card {
  background: linear-gradient(180deg,#fff 0%,#f2f5fb 100%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 rgba(16,22,51,.14), 0 10px 18px rgba(16,22,51,.18);
}
/* portals must sit on the same gutter as the hero, not bleed to the viewport edge */
.portals { padding: 0 clamp(22px,6vw,98px) 64px; }
.portals .section-heading { margin-bottom: 1rem; }

/* header "Your card" — moulded, sits beside the theme toggle */
.card-button {
  display: inline-flex; align-items: center; gap: .35rem; font: inherit; cursor: pointer;
  font-size: 11.5px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border: 0; border-radius: 999px; padding: .6rem 1rem; min-height: 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 82%, #fff) 0%, var(--sky) 46%,
    color-mix(in srgb, var(--sky) 88%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 color-mix(in srgb, var(--sky) 55%, #000),
    0 5px 0 color-mix(in srgb, var(--sky) 44%, #000), 0 8px 14px rgba(0,0,0,.4);
  transition: transform .09s ease, box-shadow .09s ease;
}
.card-button i { font-style: normal; }
.card-button:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 color-mix(in srgb, var(--sky) 55%, #000),
    0 7px 0 color-mix(in srgb, var(--sky) 44%, #000), 0 12px 20px rgba(0,0,0,.45); }
.card-button:active { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 3px 7px color-mix(in srgb, var(--sky) 40%, #000),
    0 1px 0 color-mix(in srgb, var(--sky) 44%, #000); }
.header-right { display: flex; align-items: center; gap: .6rem; }

/* constructive criticism */
.crit-button {
  display: inline-flex; align-items: center; justify-content: center; font: inherit; cursor: pointer;
  margin: 1rem auto .2rem; padding: .8rem 1.3rem; border: 0; border-radius: 999px;
  font-size: 11.5px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); min-height: 46px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 82%, #fff) 0%, var(--gold) 46%,
    color-mix(in srgb, var(--gold) 88%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 color-mix(in srgb, var(--gold) 55%, #000),
    0 5px 0 color-mix(in srgb, var(--gold) 44%, #000), 0 9px 16px rgba(0,0,0,.42);
  transition: transform .09s ease, box-shadow .09s ease;
}
.crit-button:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 color-mix(in srgb, var(--gold) 55%, #000),
    0 7px 0 color-mix(in srgb, var(--gold) 44%, #000), 0 13px 22px rgba(0,0,0,.48); }
.crit-button:active { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 3px 7px color-mix(in srgb, var(--gold) 40%, #000),
    0 1px 0 color-mix(in srgb, var(--gold) 44%, #000); }
.crit-slot { width: min(560px, 92%); margin: .5rem auto 0; }
.crit-box { text-align: left; padding: 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg,#26315e 0%,#1c2650 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 0 #0a0f26, 0 14px 26px rgba(0,0,0,.5); }
.crit-box label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 950; opacity: .65; margin-bottom: .45rem; }
.crit-text, .crit-from { width: 100%; font: inherit; font-size: .95rem; padding: .7rem .8rem;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.28);
  color: #eef4fb; margin-bottom: .6rem; }
.crit-text:focus, .crit-from:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
.crit-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.crit-note { font-size: .74rem; opacity: .6; margin: .6rem 0 0; }
.crit-thanks { padding: 1rem; border-radius: 12px; font-weight: 700;
  background: rgba(0,215,215,.14); border: 1px solid rgba(0,215,215,.4); }
html:not([data-theme="dark"]) .crit-box { background: linear-gradient(180deg,#fff,#f2f5fb);
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 rgba(16,22,51,.14), 0 14px 24px rgba(16,22,51,.2); }
html:not([data-theme="dark"]) .crit-text, html:not([data-theme="dark"]) .crit-from {
  background: #fff; color: var(--ink); border-color: rgba(16,22,51,.2); }
/* the .primary/.secondary lips extend past the box; give the actions real room
   and stop the footer's uppercase styling leaking into the note */
.crit-actions { margin-top: .2rem; margin-bottom: 1.1rem; align-items: center; }
.crit-actions .primary, .crit-actions .secondary { min-height: 46px; padding: 0 1.15rem; font-size: 11px; }
.site-footer .crit-note, .crit-note {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: .78rem; line-height: 1.5; opacity: .6; margin: .2rem 0 0; text-align: left;
}
.site-footer .crit-box label { text-align: left; }
.crit-box { margin-bottom: .4rem; }

/* ================= FIELD PLATE =================
   The field is a real rendered image. Markers are projected onto it through the
   homography solved from its four bases, so they sit exactly where they belong. */
.field-stage { padding: 2px 0 10px; }
.field-board.plate {
  position: relative; width: 100%; aspect-ratio: 1296 / 1536;
  background: url("assets/field-plate.jpg") center/cover no-repeat #1d4a26;
  border: 0; border-radius: 12px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 0 rgba(0,0,0,.3), 0 22px 40px rgba(0,0,0,.55);
}
.field-board.plate::before { display: none; }

/* cylindrical pucks: white top, cream pillar, black rim, cast shadow */
.plate .defender, .plate .drop-zone, .plate .field-runner {
  position: absolute; transform: translate(-50%, -78%); z-index: 6;
  display: grid; place-items: center; padding: 0;
  border-radius: 50%; font-weight: 900; letter-spacing: .01em;
}
.plate .defender {
  width: 46px; height: 46px; font-size: 13px; color: #101a30;
  background: radial-gradient(72% 72% at 42% 30%, #ffffff 0%, #fbf9f3 58%, #ece7d8 100%);
  border: 2.5px solid #171f31;
  box-shadow: 0 6px 0 #cfc7b2, 0 8px 0 #b3a992, 0 14px 16px rgba(0,0,0,.55);
}
.plate .defender.active-token {
  width: 52px; height: 52px; color: #04292c; cursor: grab;
  background: radial-gradient(72% 72% at 42% 30%, #6ef4e6 0%, #21cbbc 58%, #10a396 100%);
  border-color: #063137;
  box-shadow: 0 6px 0 #0b8479, 0 8px 0 #096f66, 0 16px 20px rgba(0,0,0,.6);
}
.plate .defender.active-token.dragging { cursor: grabbing; transform: translate(-50%,-90%) scale(1.06); }
.plate .drop-zone {
  width: 60px; height: 60px; font-size: 19px; color: #fff;
  background: radial-gradient(70% 70% at 42% 28%, rgba(24,32,60,.96), rgba(10,15,34,.96));
  border: 3px dashed; z-index: 7;
  box-shadow: 0 6px 0 rgba(0,0,0,.55), 0 14px 18px rgba(0,0,0,.55);
}
.plate .drop-zone:hover { transform: translate(-50%,-84%) scale(1.05); }
.plate .field-runner {
  width: 40px; height: 40px; font-size: 12px; color: #2a0716; background: #ff4fa3;
  border: 2.5px solid #3a0b21;
  box-shadow: 0 5px 0 #b3396f, 0 7px 0 #96305e, 0 12px 14px rgba(0,0,0,.5);
}
.plate .ball {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; z-index: 8;
  transform: translate(-50%, -50%);
  background: radial-gradient(62% 62% at 36% 28%, #fff 0%, #f3efe6 70%, #ddd6c7 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,.6), inset 0 -2px 3px rgba(0,0,0,.12);
}
.plate .field-mound, .plate .field-dirt, .plate .foul-line, .plate .field-base { display: none; }
@media (max-width: 520px) {
  .plate .defender { width: 40px; height: 40px; font-size: 11px; }
  .plate .defender.active-token { width: 45px; height: 45px; }
  .plate .drop-zone { width: 52px; height: 52px; font-size: 17px; }
  .plate .field-runner { width: 35px; height: 35px; font-size: 11px; }
}
/* inactive fielders were inheriting a disabled fade — they must read as solid pucks */
.plate .defender:disabled { opacity: 1; filter: none; cursor: default; }
.plate .defender { opacity: 1; }
.plate .ball::after { content: ""; position: absolute; inset: 26% 12%; border-radius: 50%;
  border: 1.5px solid rgba(190,40,40,.55); border-left: 0; border-right: 0; }

/* ================= v40: home dashboard + achievement case ================= */
.home-shell,.trophy-shell{background:var(--night);color:#fff}.home-dashboard,.trophy-page{background:radial-gradient(circle at 78% 7%,rgba(255,79,163,.18),transparent 24%),radial-gradient(circle at 15% 23%,rgba(0,215,215,.13),transparent 26%),linear-gradient(180deg,#090e25 0%,#0b1230 58%,#090e25 100%)}
.home-welcome{min-height:420px;padding:56px clamp(18px,6vw,92px) 48px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);align-items:end;gap:34px;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,215,215,.18)}.home-welcome:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 45%,rgba(9,14,37,.28) 64%,#090e25 100%);pointer-events:none;z-index:1}.home-skyline{position:absolute;inset:0;opacity:.95;overflow:hidden}.home-skyline:before{content:"";position:absolute;left:-4%;right:-4%;bottom:20px;height:180px;background:radial-gradient(ellipse at center,rgba(0,215,215,.13),transparent 56%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 82px),linear-gradient(180deg,transparent 0 30%,rgba(255,79,163,.14) 30% 31%,transparent 31% 100%);transform:perspective(420px) rotateX(64deg);transform-origin:bottom;border-top:2px solid rgba(0,215,215,.18)}.home-skyline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:115px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62)),repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,79,163,.08) 47px 48px);clip-path:polygon(0 35%,5% 24%,9% 39%,14% 18%,18% 34%,25% 21%,30% 40%,36% 15%,42% 33%,48% 20%,55% 36%,63% 19%,70% 31%,76% 12%,82% 28%,90% 18%,95% 34%,100% 23%,100% 100%,0 100%)}.field-glow{position:absolute;width:520px;height:240px;right:4%;bottom:-60px;border:2px solid rgba(0,215,215,.32);border-radius:50%;box-shadow:0 0 70px rgba(0,215,215,.18),inset 0 0 50px rgba(255,79,163,.12);transform:rotate(-7deg)}.baseball-orbit{position:absolute;right:8%;top:42px;font-size:52px;filter:drop-shadow(0 0 16px rgba(255,255,255,.18));opacity:.8}.welcome-copy,.player-progress-card{position:relative;z-index:2}.welcome-copy h1{margin:16px 0 18px;font-size:clamp(58px,7.7vw,108px);line-height:.84}.welcome-copy h1 span{color:var(--sky);text-shadow:3px 3px 0 rgba(255,79,163,.34)}.welcome-copy>p:last-child{max-width:540px;color:rgba(255,255,255,.68);font-size:17px;line-height:1.55}.player-progress-card{align-self:end;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;padding:18px;border:1px solid rgba(0,215,215,.32);background:rgba(16,22,51,.84);backdrop-filter:blur(15px);box-shadow:0 14px 36px rgba(0,0,0,.22)}.rank-ball{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:italic 18px Impact,sans-serif;color:var(--ink);background:linear-gradient(135deg,var(--sky),#92ffff);box-shadow:0 0 0 4px rgba(255,79,163,.35)}.rank-copy{min-width:0}.rank-copy small,.rank-copy span{display:block;color:rgba(255,255,255,.55);font-size:9px;text-transform:uppercase;letter-spacing:.11em}.rank-copy strong{display:block;margin:3px 0 8px;color:#fff;font:26px Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em}.home-rank-track{height:7px;background:#111a3b;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin-bottom:7px}.home-rank-track i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--sky))}.player-progress-card button,.home-progress-head button,.home-trophy-shortcut{border:0;background:transparent;color:var(--sky);cursor:pointer;font-weight:900;font-size:11px;white-space:nowrap}.home-rooms{padding:48px clamp(18px,6vw,92px) 54px}.home-section-heading,.home-progress-head,.section-line{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.home-section-heading h2,.home-progress-head h2,.section-line h2{margin:9px 0 0;font-size:clamp(34px,4vw,56px);line-height:.95}.home-trophy-shortcut{min-height:48px;padding:0 16px;border:1px solid rgba(255,79,163,.42);color:var(--pink);background:rgba(255,79,163,.07)}.home-trophy-shortcut span{margin-left:12px}.home-room-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.home-room{min-width:0;min-height:278px;padding:20px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(20,29,66,.95),rgba(10,15,39,.98));color:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.18s ease}.home-room:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent);box-shadow:0 0 20px var(--accent)}.home-room:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-45px;top:-45px;background:color-mix(in srgb,var(--accent) 18%,transparent)}.home-room:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 0 color-mix(in srgb,var(--accent) 14%,transparent)}.room-icon{width:66px;height:66px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,#0b1230);display:grid;place-items:center;font:24px Impact,sans-serif;color:var(--accent);margin-bottom:26px}.home-room strong{font:29px/.92 Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}.room-line{color:rgba(255,255,255,.68);font-size:12px;line-height:1.45;margin-top:10px}.home-room small{color:var(--accent);margin-top:auto;padding-top:18px;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.home-room i{position:absolute;right:18px;bottom:15px;font-style:normal;color:var(--accent)}.home-progress-panel{margin:0 clamp(18px,6vw,92px) 76px;padding:28px;border:1px solid rgba(0,215,215,.24);background:linear-gradient(135deg,rgba(15,25,59,.95),rgba(10,15,39,.98))}.home-progress-grid{display:grid;grid-template-columns:repeat(4,1fr) minmax(180px,1.2fr);gap:12px}.home-progress-grid>div{min-height:126px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);padding:16px;display:grid;align-items:center;grid-template-columns:auto 1fr;column-gap:12px}.home-progress-grid>div>strong{font-size:12px;text-transform:uppercase}.home-progress-grid>div>small{color:rgba(255,255,255,.48);grid-column:2;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.progress-ring{--p:0;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;grid-row:span 2;background:conic-gradient(var(--sky) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative}.progress-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#0d1533}.progress-ring b{z-index:1;font:22px Impact,sans-serif}.progress-ring b small{font-size:10px;color:rgba(255,255,255,.52)}.progress-ring.pink{background:conic-gradient(var(--pink) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}.progress-ring.gold{background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}.progress-ring.orange{background:conic-gradient(var(--orange) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}.home-progress-grid .title-progress{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.title-progress span{color:rgba(255,255,255,.55);font-size:9px;text-transform:uppercase;letter-spacing:.14em}.title-progress strong{margin:6px 0;color:var(--pink);font:26px Impact,sans-serif;text-transform:uppercase}.title-progress small{grid-column:auto!important;color:var(--sky)!important}
.trophy-page{padding-bottom:76px}.trophy-hero{min-height:360px;padding:48px clamp(18px,6vw,92px);display:grid;grid-template-columns:180px 1fr minmax(250px,.7fr);gap:30px;align-items:center;border-bottom:1px solid rgba(0,215,215,.2);position:relative;overflow:hidden}.trophy-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 50%,rgba(0,215,215,.18),transparent 23%),radial-gradient(circle at 80% 20%,rgba(255,79,163,.15),transparent 26%);pointer-events:none}.trophy-cup,.trophy-hero>div{position:relative;z-index:1}.trophy-cup{width:160px;height:160px;display:grid;place-items:center;clip-path:polygon(12% 0,88% 0,100% 24%,88% 100%,12% 100%,0 24%);background:linear-gradient(145deg,rgba(0,215,215,.18),rgba(255,79,163,.08));box-shadow:inset 0 0 40px rgba(0,215,215,.15)}.trophy-cup span{font-size:76px;filter:drop-shadow(0 0 22px rgba(0,215,215,.35))}.trophy-hero h1{margin:13px 0 14px;font-size:clamp(52px,6vw,84px);line-height:.86}.trophy-hero h1 span{color:var(--pink)}.trophy-hero p:last-child{max-width:620px;color:rgba(255,255,255,.62);line-height:1.5}.trophy-kpis{display:grid;grid-template-columns:1fr;gap:8px}.trophy-kpis div{padding:15px 17px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}.trophy-kpis strong{display:block;color:var(--sky);font:30px Impact,sans-serif}.trophy-kpis span{color:rgba(255,255,255,.52);font-size:9px;text-transform:uppercase;letter-spacing:.13em}.almost-panel,.badge-collection{margin:34px clamp(18px,6vw,92px) 0;padding:24px;border:1px solid rgba(0,215,215,.2);background:rgba(11,18,48,.78)}.almost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.almost-card{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025)}.almost-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,79,163,.45);color:var(--pink);font:19px Impact,sans-serif;background:rgba(255,79,163,.08)}.almost-card strong,.almost-card span{display:block}.almost-card span{color:rgba(255,255,255,.53);font-size:10px;line-height:1.35;margin-top:4px}.almost-track{margin-top:10px;height:6px;background:rgba(255,255,255,.08);overflow:hidden}.almost-track i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--sky))}.almost-card small{display:block;margin-top:5px;color:var(--sky);font-size:9px}.badge-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:22px;scrollbar-width:thin}.badge-tab{flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:rgba(255,255,255,.7);cursor:pointer;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.badge-tab.active{background:var(--sky);color:var(--ink);border-color:var(--sky);box-shadow:0 0 18px rgba(0,215,215,.22)}.achievement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.achievement-card{min-width:0;min-height:310px;padding:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(19,29,66,.95),rgba(8,13,34,.98));display:flex;flex-direction:column;text-align:center;position:relative;overflow:hidden}.achievement-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--badge-accent,var(--sky));opacity:.85}.achievement-card.earned{--badge-accent:var(--sky)}.achievement-card.locked{filter:saturate(.58);opacity:.75}.medallion{width:112px;height:124px;margin:0 auto 15px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 18%,100% 72%,50% 100%,0 72%,8% 18%);background:linear-gradient(145deg,#263565,#0d1535);position:relative;box-shadow:inset 0 0 0 4px rgba(255,255,255,.09),inset 0 0 28px rgba(0,0,0,.45)}.medallion:before{content:"";position:absolute;inset:7px;clip-path:inherit;border:2px solid var(--sky);background:radial-gradient(circle at 50% 28%,rgba(0,215,215,.18),transparent 55%)}.medallion span{position:relative;z-index:2;color:#fff;font:30px Impact,sans-serif;letter-spacing:.03em}.medallion.position:before{border-color:var(--pink)}.medallion.pitching:before{border-color:var(--gold)}.medallion.rules:before{border-color:var(--orange)}.medallion.habit:before{border-color:var(--green)}.medallion.prestige{background:linear-gradient(145deg,#4b2758,#1b153b)}.medallion.prestige:before{border-color:var(--pink);box-shadow:inset 0 0 24px rgba(255,79,163,.22)}.achievement-card.locked .medallion:before{border-color:#6d7796}.achievement-card h3{margin:0;font:25px/.95 Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}.achievement-card p{min-height:44px;margin:9px 0 12px;color:rgba(255,255,255,.56);font-size:11px;line-height:1.35}.badge-mini-track{height:5px;margin-top:auto;background:rgba(255,255,255,.08);overflow:hidden}.badge-mini-track i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--sky))}.badge-earned,.badge-locked{display:block;margin-top:9px;font-size:9px;font-weight:950;letter-spacing:.04em}.badge-earned{color:var(--sky)}.badge-locked{color:rgba(255,255,255,.48)}
@media(max-width:1050px){.home-room-grid{grid-template-columns:repeat(3,1fr)}.home-progress-grid{grid-template-columns:repeat(2,1fr)}.home-progress-grid .title-progress{grid-column:span 2}.achievement-grid{grid-template-columns:repeat(3,1fr)}.trophy-hero{grid-template-columns:140px 1fr}.trophy-kpis{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.home-welcome{grid-template-columns:1fr;min-height:520px;padding-top:42px}.welcome-copy h1{font-size:clamp(58px,18vw,86px)}.player-progress-card{grid-template-columns:56px 1fr}.player-progress-card button{grid-column:1/-1;justify-self:start}.home-section-heading{align-items:flex-start;flex-direction:column}.home-room-grid{grid-template-columns:1fr 1fr}.home-room{min-height:245px}.home-room:last-child{grid-column:1/-1;min-height:200px}.home-progress-grid{grid-template-columns:1fr}.home-progress-grid .title-progress{grid-column:auto}.trophy-hero{grid-template-columns:1fr}.trophy-cup{width:118px;height:118px}.trophy-cup span{font-size:56px}.trophy-kpis{grid-column:auto;grid-template-columns:repeat(3,1fr)}.almost-grid{grid-template-columns:1fr}.achievement-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.home-room-grid,.achievement-grid{grid-template-columns:1fr}.home-room:last-child{grid-column:auto}.home-room{min-height:205px}.home-progress-panel,.almost-panel,.badge-collection{padding:18px}.trophy-kpis{grid-template-columns:1fr}.achievement-card{min-height:285px}}

/* ================= v41 preview-match visual treatment ================= */
.home-dashboard,.trophy-page{background:
 radial-gradient(circle at 20% 0%,rgba(0,215,215,.10),transparent 28%),
 radial-gradient(circle at 88% 9%,rgba(255,79,163,.16),transparent 30%),
 linear-gradient(180deg,#071023 0%,#09112b 58%,#071023 100%)}

.home-welcome{min-height:470px;padding:54px clamp(18px,5.5vw,84px) 44px;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);border-bottom:1px solid rgba(0,215,215,.22)}
.home-skyline{background:
 radial-gradient(circle at 76% 30%,rgba(255,110,166,.42),transparent 13%),
 linear-gradient(180deg,#071429 0%,#17214a 32%,#61244d 66%,#0a1530 100%)}
.home-skyline:before{left:0;right:0;bottom:0;height:190px;transform:none;border:0;background:
 linear-gradient(180deg,transparent 0 32%,rgba(255,90,153,.18) 33%,transparent 35%),
 repeating-linear-gradient(90deg,transparent 0 82px,rgba(0,215,215,.06) 83px 84px),
 linear-gradient(0deg,rgba(4,9,24,.95),rgba(4,9,24,.20));clip-path:polygon(0 72%,8% 58%,17% 68%,28% 49%,39% 65%,48% 56%,60% 70%,70% 50%,83% 65%,94% 51%,100% 59%,100% 100%,0 100%)}
.home-skyline:after{height:120px;background:linear-gradient(180deg,transparent,rgba(4,8,21,.96));clip-path:none}
.sunset-disc{position:absolute;right:23%;top:58px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 45% 45%,#ffd0b2 0 5%,#ff789e 29%,rgba(255,61,132,.2) 58%,transparent 70%);filter:blur(.2px);opacity:.82}
.palm{position:absolute;bottom:58px;width:6px;height:110px;background:#030716;border-radius:9px;transform-origin:bottom}.palm:before{content:"";position:absolute;left:3px;top:-6px;width:92px;height:54px;background:#030716;clip-path:polygon(0 45%,39% 36%,13% 0,48% 30%,53% 0,58% 31%,91% 4%,66% 38%,100% 49%,64% 48%,89% 84%,56% 56%,48% 100%,47% 57%,14% 88%,39% 50%)}.p1{left:4%;transform:rotate(-5deg) scale(1.2)}.p2{left:14%;bottom:46px;transform:rotate(4deg) scale(.83);opacity:.78}
.player-silhouette{position:absolute;right:5%;bottom:0;width:225px;height:345px;background:linear-gradient(180deg,#0b142c,#020614 88%);clip-path:polygon(39% 0,61% 0,67% 8%,68% 18%,61% 24%,73% 33%,87% 49%,95% 72%,78% 77%,74% 100%,26% 100%,23% 77%,6% 71%,14% 49%,29% 33%,39% 24%,32% 17%,33% 8%);filter:drop-shadow(0 0 22px rgba(0,215,215,.12));opacity:.96}.player-silhouette:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 33%,rgba(0,215,215,.1) 45%,transparent 56%),linear-gradient(110deg,transparent 0 50%,rgba(255,79,163,.12) 51%,transparent 62%)}.player-silhouette b{position:absolute;top:145px;left:78px;color:rgba(255,255,255,.42);font:56px Impact,sans-serif;transform:skew(-3deg)}
.welcome-copy{align-self:center;max-width:620px}.welcome-copy h1{font-size:clamp(60px,7vw,104px);line-height:.86;letter-spacing:.01em}.welcome-copy h1 span{color:#fff;text-shadow:5px 5px 0 rgba(255,79,163,.35),-2px -2px 0 rgba(0,215,215,.22)}.welcome-copy>p:last-child{font-size:16px;color:rgba(255,255,255,.73)}
.player-progress-card{align-self:end;grid-template-columns:64px 1fr auto;max-width:520px;margin-left:auto;border:1px solid rgba(255,79,163,.42);border-radius:18px;background:linear-gradient(135deg,rgba(29,22,57,.93),rgba(8,15,38,.92));box-shadow:0 18px 48px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.rank-ball{border:2px solid var(--pink);background:radial-gradient(circle at 35% 30%,#173c4d,#071225 65%);color:var(--sky);box-shadow:0 0 0 4px rgba(255,79,163,.08),0 0 25px rgba(0,215,215,.16)}
.rank-copy strong{color:var(--pink);font-size:21px}.home-rank-track{height:8px;border-radius:99px;overflow:hidden;background:#050a18}.home-rank-track i{background:linear-gradient(90deg,var(--sky),var(--pink))}.streak-box{min-width:92px;padding-left:16px;border-left:1px solid rgba(255,255,255,.15);text-align:center}.streak-box b{display:block;font-size:20px}.streak-box span{display:block;margin-top:4px;color:rgba(255,255,255,.53);font-size:9px;text-transform:uppercase;letter-spacing:.08em}

.home-rooms{padding-top:36px}.home-room-grid{gap:14px}.home-room{min-height:300px;padding:0 18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#111a39,#091027 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);justify-content:flex-end}.home-room:before{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.home-room:after{display:none}.room-art{height:148px;margin:0 -18px 18px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 56%),linear-gradient(180deg,rgba(255,255,255,.02),transparent)}.room-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,#0b122c)}.room-art b{position:relative;z-index:1;font:64px Impact,sans-serif;color:#eef8ff;text-shadow:0 0 22px color-mix(in srgb,var(--accent) 58%,transparent),4px 7px 0 rgba(0,0,0,.28);filter:drop-shadow(0 12px 12px rgba(0,0,0,.4))}.portal-1 .room-art b{font-size:86px}.portal-2 .room-art b{font-size:76px}.portal-3 .room-art b,.portal-4 .room-art b{font-size:72px}.home-room strong{font-size:27px}.home-room small{font-size:10px}.home-room:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.26),inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.home-progress-panel{border-radius:18px;background:linear-gradient(135deg,rgba(11,22,52,.95),rgba(8,14,34,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

.trophy-page{padding-bottom:80px}.trophy-banner{min-height:370px;padding:48px clamp(18px,5.5vw,84px);display:grid;grid-template-columns:190px minmax(0,1fr) minmax(280px,.7fr);gap:28px;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,215,215,.18);background:radial-gradient(circle at 14% 48%,rgba(0,215,215,.16),transparent 22%),radial-gradient(circle at 78% 22%,rgba(255,79,163,.15),transparent 24%)}
.trophy-banner:after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(180deg,transparent,#071023)}
.trophy-visual,.trophy-title,.trophy-profile{position:relative;z-index:2}.cup-3d{width:170px;height:170px;display:grid;place-items:center;font-size:92px;border-radius:28px;background:radial-gradient(circle at 38% 25%,rgba(255,255,255,.14),transparent 18%),linear-gradient(145deg,rgba(0,215,215,.22),rgba(255,79,163,.10));border:1px solid rgba(0,215,215,.38);box-shadow:inset 0 0 40px rgba(0,215,215,.18),0 20px 45px rgba(0,0,0,.30);filter:drop-shadow(0 0 18px rgba(0,215,215,.22))}
.trophy-title h1{margin:12px 0 14px;font-size:clamp(56px,6vw,88px);line-height:.86;text-transform:uppercase}.trophy-title h1 span{color:var(--sky);text-shadow:3px 3px 0 rgba(255,79,163,.3)}.trophy-title p:last-child{max-width:570px;color:rgba(255,255,255,.65);line-height:1.5}
.trophy-profile{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:center;padding:17px;border-radius:18px;border:1px solid rgba(255,79,163,.35);background:linear-gradient(135deg,rgba(25,20,55,.88),rgba(7,15,35,.9))}.profile-orb{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--pink);color:var(--sky);font:18px Impact,sans-serif;background:#071329;box-shadow:0 0 20px rgba(255,79,163,.16)}.trophy-profile small,.trophy-profile span{display:block;color:rgba(255,255,255,.55);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.trophy-profile strong{display:block;margin:3px 0 7px;color:#fff;font:25px Impact,sans-serif}.profile-track{height:7px;background:#050912;border-radius:99px;overflow:hidden}.profile-track i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--pink))}
.trophy-summary{margin:-24px clamp(18px,5.5vw,84px) 0;position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.trophy-summary>div{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(10,18,44,.96);text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.22)}.trophy-summary strong{display:block;color:var(--sky);font:30px Impact,sans-serif}.trophy-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.53)}
.trophy-tabs-wrap{margin:28px clamp(18px,5.5vw,84px) 0}.recent-panel,.almost-panel,.collection-strip,.badge-collection{margin:28px clamp(18px,5.5vw,84px) 0;padding:24px;border:1px solid rgba(0,215,215,.19);border-radius:20px;background:linear-gradient(180deg,rgba(12,23,53,.88),rgba(7,14,34,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.recent-grid .achievement-card{min-height:300px}
.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.collection-chip{min-height:150px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,#111a3b,#091027);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer}.collection-chip span{width:66px;height:72px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 18%,100% 72%,50% 100%,0 72%,8% 18%);background:linear-gradient(145deg,#193f57,#0a162d);border:1px solid transparent;color:var(--sky);font:28px Impact,sans-serif;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}.collection-chip strong{text-transform:uppercase;font:17px Impact,sans-serif}.collection-chip small{color:var(--pink);font-weight:900}
.achievement-card{border-radius:16px;min-height:332px;background:linear-gradient(180deg,#111a3b,#081026);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.achievement-card:before{background:linear-gradient(90deg,transparent,var(--badge-accent,var(--sky)),transparent)}.achievement-card.earned{opacity:1}.achievement-card.locked{opacity:.66;filter:saturate(.35)}
.medallion{width:130px;height:144px;background:linear-gradient(145deg,#203760,#080f25);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 -16px 26px rgba(0,0,0,.42),0 14px 24px rgba(0,0,0,.34);filter:drop-shadow(0 0 13px rgba(0,215,215,.10))}.medallion:before{display:none}.medallion-ring{position:absolute;inset:7px;clip-path:inherit;background:linear-gradient(145deg,#6ff7f0,#0fb6c8 48%,#0a5e79 72%,#8ffbf4);display:grid;place-items:center}.medallion-ring:before{content:"";position:absolute;inset:5px;clip-path:inherit;background:linear-gradient(145deg,#172847,#070d20)}.medallion-core{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),transparent 20%),radial-gradient(circle at 50% 50%,#16364b,#071323 72%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),0 0 18px rgba(0,215,215,.22)}.medallion-core span{color:#fff;font:30px Impact,sans-serif;text-shadow:0 2px 0 #000}.medallion.gold .medallion-ring{background:linear-gradient(145deg,#ffe893,#f4b63f 47%,#9a5c00 72%,#fff1ac)}.medallion.silver .medallion-ring{background:linear-gradient(145deg,#f5f8ff,#9eacc7 45%,#505d7b 70%,#fff)}.medallion.diamond .medallion-ring{background:linear-gradient(145deg,#9afcff,#4ee4ff 38%,#8897ff 66%,#ff8bd4)}.medallion.position .medallion-ring,.medallion.rules .medallion-ring{background:linear-gradient(145deg,#ffb2d4,#ff4fa3 46%,#8d1f5d 72%,#ffd0e3)}.achievement-card.locked .medallion-ring{background:linear-gradient(145deg,#9aa4bb,#535d76 55%,#272f45)}.achievement-card h3{font-size:23px}.achievement-card p{font-size:11px}.badge-mini-track{border-radius:99px}.badge-mini-track i{background:linear-gradient(90deg,var(--sky),var(--pink))}

@media(max-width:1050px){.trophy-banner{grid-template-columns:150px 1fr}.trophy-profile{grid-column:1/-1}.recent-grid{grid-template-columns:repeat(3,1fr)}.collection-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.home-welcome{min-height:600px;grid-template-columns:1fr;padding-top:38px}.player-silhouette{right:-22px;width:190px;height:292px;opacity:.82}.sunset-disc{right:11%;top:75px;width:122px;height:122px}.welcome-copy{align-self:start;max-width:82%}.welcome-copy h1{font-size:clamp(54px,17vw,82px)}.player-progress-card{width:100%;margin:0;grid-template-columns:54px 1fr}.streak-box{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:10px 0 0;display:flex;justify-content:space-between}.home-room-grid{grid-template-columns:1fr 1fr}.home-room{min-height:270px}.home-room:last-child{grid-column:1/-1;min-height:230px}.room-art{height:126px}.trophy-banner{grid-template-columns:1fr;padding-top:36px}.cup-3d{width:125px;height:125px;font-size:65px}.trophy-title h1{font-size:clamp(52px,15vw,78px)}.trophy-summary{grid-template-columns:repeat(3,1fr);margin-top:-12px}.recent-grid{grid-template-columns:1fr 1fr}.collection-grid{grid-template-columns:1fr 1fr}.collection-chip:last-child{grid-column:1/-1}.achievement-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.home-welcome{min-height:590px}.welcome-copy{max-width:100%}.player-silhouette{opacity:.52}.home-room-grid,.recent-grid,.achievement-grid{grid-template-columns:1fr}.home-room:last-child{grid-column:auto}.home-room{min-height:240px}.trophy-summary{grid-template-columns:1fr}.collection-grid{grid-template-columns:1fr 1fr}.achievement-card{min-height:310px}.recent-panel,.almost-panel,.collection-strip,.badge-collection{padding:18px}.trophy-banner{padding-left:18px;padding-right:18px}}