:root {
  --navy: #0b2b61;
  --blue: #174a93;
  --sky: #e8f4ff;
  --green: #49aa34;
  --lime: #9add42;
  --yellow: #ffd43b;
  --orange: #ff8a2b;
  --red: #e84646;
  --ink: #17233b;
  --muted: #65728a;
  --line: #d8e3f0;
  --white: #fff;
  --shadow: 0 18px 46px rgba(16, 45, 85, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #edf6ff; }
body { margin: 0; color: var(--ink); font: 16px/1.45 Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(255, 199, 0, .7); outline-offset: 3px; }
[hidden] { display: none !important; }

.duo-shell { min-height: 100vh; background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.9), transparent 30%), linear-gradient(160deg, #f5fbff 0%, #e7f3ff 48%, #dfeeff 100%); }
.duo-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 82px; padding: 10px clamp(18px, 4vw, 64px); color: #fff; background: linear-gradient(120deg, #082d6a, #1456a4 64%, #087ac0); border-bottom: 5px solid #ffd23f; box-shadow: 0 8px 24px rgba(4, 38, 91, .23); }
.back-link { justify-self: start; color: #fff; text-decoration: none; font-weight: 900; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0,0,0,.18)); }
.brand-lockup small, .brand-lockup strong { display: block; }
.brand-lockup small { font-size: .72rem; font-weight: 900; letter-spacing: .13em; opacity: .84; }
.brand-lockup strong { font-size: 1.2rem; line-height: 1.15; }
.header-stats { justify-self: end; display: flex; gap: 8px; }
.header-stats span { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 7px 11px; color: #0d326d; background: #fff; border: 2px solid rgba(255,255,255,.75); border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.header-stats i { font-style: normal; }
.header-stats b { white-space: nowrap; font-size: .88rem; }

main { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.screen { padding: 42px 0 70px; }
.eyebrow { margin: 0 0 9px; color: #2672b8; font-size: .77rem; font-weight: 1000; letter-spacing: .16em; }
.hero-panel { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: stretch; }
.hero-copy, .daily-goal-card { border-radius: 34px; box-shadow: var(--shadow); }
.hero-copy { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 66px); color: #fff; background: linear-gradient(135deg, #0b397d 0%, #176eb2 55%, #2ba6ce 100%); }
.hero-copy::after { content: "★"; position: absolute; right: 30px; top: 10px; color: rgba(255,255,255,.12); font-size: 190px; line-height: 1; transform: rotate(14deg); }
.hero-copy .eyebrow { color: #ffdd52; }
.hero-copy h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(2.5rem, 5.7vw, 5.2rem); line-height: .93; letter-spacing: -.055em; }
.hero-copy h1 span { color: #ffdd42; }
.hero-text { position: relative; z-index: 1; max-width: 600px; margin: 22px 0 28px; color: #e7f5ff; font-size: clamp(1rem, 1.8vw, 1.24rem); font-weight: 700; }
.hero-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 25px; }
.hero-facts span { padding: 8px 11px; color: #eaf7ff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .76rem; font-weight: 850; }
.hero-facts b { color: #ffe052; font-size: .92rem; }
.green-owl-ribbon { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin: -10px 0 24px; padding: 9px 13px; color: #14325e; background: #b8f067; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: 0 5px 0 rgba(4,42,21,.25); font-size: .82rem; font-weight: 850; }
.green-owl-ribbon b { color: #0b642c; }
.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.primary-button, .secondary-button { min-height: 52px; padding: 13px 22px; border: 0; border-radius: 17px; font-weight: 1000; transition: transform .16s ease, box-shadow .16s ease; }
.primary-button { color: #133261; background: linear-gradient(#ffe66d, #ffca30); box-shadow: 0 7px 0 #d79a0b; }
.secondary-button { color: #fff; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }

.daily-goal-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; overflow: hidden; padding: clamp(28px, 5vw, 50px); background: #fff; border: 4px solid #b7d8f6; }
.daily-goal-card > img { position: absolute; right: -22px; bottom: -24px; width: 144px; opacity: .16; transform: rotate(-8deg); }
.daily-goal-card small { color: #2e72aa; font-weight: 1000; letter-spacing: .12em; }
.daily-goal-card h2 { margin: 8px 0 4px; color: var(--navy); font-size: clamp(1.35rem, 2.6vw, 2.05rem); }
.daily-goal-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-weight: 650; }
.weekly-mini { position: relative; z-index: 2; margin-top: 18px; }
.weekly-mini span { display: block; margin-bottom: 7px; color: #285b8e; font-size: .78rem; font-weight: 850; }
.weekly-mini > i { display: block; width: min(260px, 100%); height: 9px; overflow: hidden; background: #dce9f4; border-radius: 99px; }
.weekly-mini em { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #49aa34, #ffd43b); border-radius: inherit; transition: width .3s ease; }
.goal-ring { display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#55b839 var(--goal), #dce9f5 0); box-shadow: inset 0 0 0 3px #fff, 0 12px 30px rgba(40, 106, 155, .15); }
.goal-ring::before { content: ""; grid-area: 1/1; width: 112px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.goal-ring div { grid-area: 1/1; z-index: 1; text-align: center; }
.goal-ring strong, .goal-ring small { display: block; }
.goal-ring strong { color: var(--navy); font-size: 2.2rem; line-height: 1; }
.goal-ring small { margin-top: 5px; color: #728198; letter-spacing: 0; }

.journey-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.journey-dashboard article { display: flex; align-items: center; gap: 14px; min-height: 108px; padding: 18px; background: rgba(255,255,255,.92); border: 2px solid #d5e5f3; border-radius: 22px; box-shadow: 0 8px 22px rgba(15,53,95,.08); }
.journey-icon { display: grid; place-items: center; width: 55px; height: 55px; flex: 0 0 auto; background: #eef7ff; border-radius: 17px; font-size: 1.8rem; }
.journey-dashboard small,.journey-dashboard strong,.journey-dashboard p { display: block; }
.journey-dashboard small { color: #3776ab; font-size: .65rem; font-weight: 1000; letter-spacing: .1em; }
.journey-dashboard strong { margin: 3px 0; color: var(--navy); font-size: 1rem; }
.journey-dashboard p { margin: 0; color: #78869a; font-size: .72rem; font-weight: 700; }

.competition-hub { margin: 30px 0 38px; padding: clamp(22px, 4vw, 36px); color: #fff; background: radial-gradient(circle at 96% 3%, rgba(155,226,74,.2), transparent 28%), linear-gradient(135deg,#071e49,#103f7d 58%,#075b62); border: 4px solid #f7c93d; border-radius: 31px; box-shadow: 0 12px 0 #d9a91f, 0 28px 48px rgba(7,35,76,.22); }
.competition-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.competition-heading .eyebrow { color: #b9ed70; }
.competition-heading h2 { margin: 0; color: #fff; font-size: clamp(2rem,4vw,3.2rem); line-height: 1; letter-spacing: -.04em; }
.competition-heading > p { display: flex; align-items: center; gap: 8px; margin: 0; color: #d9eaff; font-size: .78rem; font-weight: 800; }
.league-live-dot { width: 10px; height: 10px; flex: 0 0 auto; background: #8ee05f; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(142,224,95,.18); }
.competition-grid { display: grid; grid-template-columns: .88fr 1.12fr 1fr; gap: 14px; align-items: stretch; }
.competition-grid > article { min-width: 0; padding: 19px; color: var(--ink); background: #fff; border: 2px solid rgba(255,255,255,.7); border-radius: 23px; box-shadow: 0 9px 24px rgba(1,17,45,.18); }
.league-card-heading { display: flex; align-items: center; gap: 12px; }
.league-card-heading > span { display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg,#2c90dd,#18549c); border-radius: 15px; font-size: 1.55rem; }
.league-card-heading small,.leaderboard-heading small,.green-owl-copy small { display: block; color: #3c76ad; font-size: .65rem; font-weight: 1000; letter-spacing: .11em; }
.league-card-heading h3 { margin: 1px 0 0; color: #0c3974; font-size: 1.65rem; }
.league-card-heading h3 b { font-size: 2rem; }
.my-league-card > p { min-height: 44px; margin: 16px 0; color: #5f7189; font-size: .86rem; font-weight: 750; }
.league-today-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 13px; padding: 11px 12px; background: linear-gradient(135deg,#fff7d6,#fff); border: 2px solid #f4d46a; border-radius: 15px; }
.league-today-card small { display: block; color: #846000; font-size: .62rem; font-weight: 1000; letter-spacing: .09em; }
.league-today-card strong { display: block; margin-top: 2px; color: #6a4700; font-size: 1.05rem; }
.league-today-card strong b { font-size: 1.35rem; }
.league-today-card p { max-width: 122px; margin: 0; color: #735c2d; font-size: .68rem; font-weight: 850; line-height: 1.25; text-align: right; }
.league-tier { padding: 13px; background: #eff7ff; border: 2px solid #d4e7f5; border-radius: 15px; }
.league-tier > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.league-tier span { color: #17477d; font-size: .73rem; font-weight: 1000; }
.league-tier b { color: #62758a; font-size: .67rem; text-align: right; }
.league-tier progress { display: block; width: 100%; height: 10px; accent-color: #56ad38; }
.league-login { display: block; margin-top: 13px; padding: 10px 12px; color: #fff; background: #1763a6; border-radius: 12px; text-align: center; text-decoration: none; font-size: .78rem; font-weight: 1000; }
.leaderboard-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.leaderboard-heading h3 { margin: 2px 0 0; color: #0d3a73; font-size: 1.2rem; }
.leaderboard-heading > span { padding: 6px 8px; color: #604600; background: #ffec8c; border-radius: 999px; font-size: .68rem; font-weight: 1000; }
.leaderboard-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 13px 0 10px; padding: 4px; background: #eaf2f8; border-radius: 12px; }
.leaderboard-tabs button { min-height: 34px; color: #4d6987; background: transparent; border: 0; border-radius: 9px; font-size: .72rem; font-weight: 1000; }
.leaderboard-tabs button.is-active { color: #fff; background: #165c9e; box-shadow: 0 3px 0 #0b3e75; }
.league-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.league-list li { display: grid; grid-template-columns: 27px 32px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 42px; padding: 6px 8px; background: #f4f8fc; border: 1px solid #dce8f1; border-radius: 11px; }
.league-list li.is-you { background: #ecf9e6; border: 2px solid #6cbc50; }
.league-place { color: #2f5c89; font-size: .75rem; font-weight: 1000; text-align: center; }
.league-avatar { font-size: 1.2rem; text-align: center; }
.league-name { min-width: 0; }
.league-name b,.league-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-name b { color: #173d70; font-size: .78rem; }
.league-name small { color: #75869a; font-size: .62rem; }
.league-score { color: #0b7b3c; font-size: .78rem; font-weight: 1000; white-space: nowrap; }
.league-empty { margin: 14px 3px 3px; color: #6c8095; font-size: .75rem; font-weight: 750; }
.green-owl-card { display: grid; grid-template-rows: auto 1fr; padding: 12px !important; background: linear-gradient(145deg,#f7ffe9,#fff) !important; border-color: #a9d76d !important; }
.green-owl-photo { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/3; margin: 0; background: #dcebd1; border: 3px solid #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(31,94,39,.14); }
.green-owl-photo img { position: absolute; left: 50%; top: 50%; width: 75%; height: 133.333%; object-fit: cover; transform: translate(-50%,-50%) rotate(-90deg); }
.green-owl-copy { padding: 14px 7px 5px; }
.green-owl-copy small { color: #447f27; }
.green-owl-copy h3 { margin: 3px 0 7px; color: #155b2f; font-size: 1.4rem; }
.green-owl-copy p { margin: 0 0 10px; color: #536b5b; font-size: .76rem; font-weight: 750; }
.green-owl-copy strong { display: block; padding: 8px 9px; color: #674b00; background: #fff0a6; border-radius: 10px; font-size: .68rem; }
.green-owl-copy > span { display: block; margin-top: 8px; color: #5d745f; font-size: .66rem; font-weight: 750; }
.prize-showcase,.prize-winners { margin-top: 16px; padding: clamp(17px,2.4vw,25px); color: var(--ink); background: #fff; border: 2px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: 0 9px 24px rgba(1,17,45,.16); }
.prize-showcase { background: radial-gradient(circle at 97% 5%,rgba(255,216,68,.36),transparent 20%),linear-gradient(118deg,#fffdf2,#fff 54%,#f5ffed); border-color: #f0ce61; }
.prize-showcase-heading,.prize-winners-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.prize-showcase-heading .eyebrow,.prize-winners-heading .eyebrow { margin-bottom: 5px; color: #a06a00; }
.prize-showcase-heading h3,.prize-winners-heading h3 { margin: 0; color: #123d76; font-size: clamp(1.3rem,2.3vw,1.8rem); line-height: 1.08; letter-spacing: -.025em; }
.prize-showcase-heading > p { max-width: 370px; margin: 0; color: #586f86; font-size: .8rem; font-weight: 750; text-align: right; }
.prize-cabinet { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.prize-cabinet-item { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-height: 86px; padding: 11px 10px; overflow: hidden; background: rgba(255,255,255,.9); border: 2px solid #f0dfaa; border-radius: 16px; box-shadow: 0 5px 0 rgba(177,123,0,.1); }
.prize-cabinet-item::after { content: ""; position: absolute; right: -23px; bottom: -26px; width: 70px; height: 70px; border: 10px solid rgba(255,207,55,.15); border-radius: 50%; pointer-events: none; }
.prize-cabinet-item > span { display: grid; place-items: center; grid-row: span 2; width: 38px; height: 38px; background: #fff3bd; border-radius: 12px; font-size: 1.45rem; box-shadow: inset 0 -3px rgba(170,113,0,.1); }
.prize-cabinet-item b,.prize-cabinet-item small { position: relative; z-index: 1; display: block; }
.prize-cabinet-item b { color: #234a78; font-size: .75rem; line-height: 1.08; }
.prize-cabinet-item small { color: #6a7d90; font-size: .62rem; line-height: 1.18; font-weight: 750; }
.prize-cabinet-item--paella > span { background: #ffe5af; }
.prize-cabinet-item--churros > span { background: #ffebcf; }
.prize-cabinet-item--book > span { background: #dff0ff; }
.prize-cabinet-item--flag > span { background: #fff1b9; }
.prize-cabinet-item--stickers > span { background: #fff9bc; }
.prize-cabinet-item--lollipop > span { background: #ffe4ef; }
.prize-winners { background: linear-gradient(108deg,#fff 0%,#f8fbff 54%,#eef8e6 100%); border-color: #b9d9ed; }
.prize-season { flex: 0 0 auto; padding: 7px 10px; color: #624900; background: #ffec91; border: 1px solid #efcd51; border-radius: 999px; font-size: .72rem; font-weight: 1000; }
.prize-winners-status { margin: 14px 0 0; color: #63768b; font-size: .8rem; font-weight: 750; }
.prize-winner-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.prize-winner { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; min-height: 66px; padding: 10px 12px; background: #fff; border: 2px solid #dce9f4; border-radius: 15px; }
.prize-winner-icon { display: grid; place-items: center; width: 40px; height: 40px; background: #eef8df; border-radius: 13px; font-size: 1.35rem; }
.prize-winner b,.prize-winner small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prize-winner b { color: #174275; font-size: .82rem; }
.prize-winner small { margin-top: 2px; color: #61768d; font-size: .68rem; font-weight: 750; }
.prize-winners-empty { grid-column: 1 / -1; padding: 15px 16px; color: #667a90; background: rgba(255,255,255,.72); border: 2px dashed #c8d9e8; border-radius: 14px; font-size: .82rem; font-weight: 750; text-align: center; }
.score-rules { margin-top: 15px; color: #dcecff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 15px; }
.score-rules summary { padding: 13px 15px; color: #fff; font-weight: 1000; cursor: pointer; }
.score-rules > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 0 13px 11px; }
.score-rules span { padding: 9px; background: rgba(255,255,255,.1); border-radius: 10px; font-size: .7rem; font-weight: 750; }
.score-rules span b { display: block; color: #c4f47c; }
.score-rules p { margin: 0; padding: 0 14px 14px; color: #cbdff4; font-size: .68rem; }

.reward-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 26px 0 46px; }
.reward-strip article { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 16px; background: rgba(255,255,255,.88); border: 2px solid #d5e6f5; border-radius: 20px; box-shadow: 0 8px 22px rgba(15, 53, 95, .08); }
.reward-strip article > span { font-size: 2rem; }
.reward-strip b, .reward-strip small { display: block; }
.reward-strip b { color: #133c76; }
.reward-strip small { color: #718098; font-size: .75rem; line-height: 1.25; }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; color: var(--navy); font-size: clamp(1.8rem, 3.2vw, 2.65rem); line-height: 1; }
.section-heading > p { max-width: 390px; margin: 0; color: var(--muted); text-align: right; font-weight: 650; }
.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.unit-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 125px; padding: 18px; text-align: left; color: var(--ink); background: #fff; border: 3px solid #d8e7f5; border-radius: 24px; box-shadow: 0 9px 0 #c7d9e9, 0 17px 30px rgba(30, 66, 104, .08); transition: transform .16s ease, border-color .16s ease; }
.unit-card:hover, .unit-card.is-selected { transform: translateY(-4px); border-color: var(--unit-color, #4fa9d8); }
.unit-card.is-selected { box-shadow: 0 9px 0 color-mix(in srgb, var(--unit-color, #4fa9d8) 45%, #9fb9d0), 0 18px 34px rgba(30, 66, 104, .13); }
.unit-number { display: grid; place-items: center; width: 56px; height: 56px; color: #fff; background: var(--unit-color, #2878bc); border-radius: 18px; font-size: 1.45rem; box-shadow: inset 0 -5px rgba(0,0,0,.1); }
.unit-copy small, .unit-copy strong, .unit-copy em { display: block; }
.unit-copy small { color: #7a889d; font-size: .69rem; font-weight: 1000; letter-spacing: .1em; }
.unit-copy strong { margin: 3px 0; color: #163d76; font-size: 1.04rem; }
.unit-copy em { color: #758298; font-size: .76rem; font-style: normal; }
.unit-arrow { color: var(--unit-color, #2878bc); font-size: 1.6rem; font-weight: 1000; }
.unit-progress { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 5px; overflow: hidden; background: #e8eff6; border-radius: 99px; }
.unit-progress i { display: block; height: 100%; background: var(--unit-color, #2878bc); border-radius: inherit; }
.unit-grid:has(.passport-world) { grid-template-columns: repeat(2, 1fr); }
.passport-world { display: block; min-height: 260px; padding: 17px 17px 24px; }
.passport-world.is-crowned { border-color: #e7bd28; background: linear-gradient(145deg,#fff 0%,#fff9d8 100%); box-shadow: 0 9px 0 #e0b82d, 0 17px 30px rgba(112,78,0,.1); }
.unit-select { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 0 14px; color: inherit; text-align: left; background: transparent; border: 0; }
.mission-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 2px dashed #d9e5ef; }
.mission-stamp { min-width: 0; min-height: 68px; padding: 8px 5px; color: #456783; background: #f1f6fa; border: 2px solid #d5e1ea; border-radius: 14px; font-weight: 900; }
.mission-stamp span,.mission-stamp small { display: block; }
.mission-stamp span { min-height: 24px; color: #dcaa14; font-size: 1.05rem; letter-spacing: .02em; }
.mission-stamp small { overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.mission-stamp:not(:disabled):hover,.mission-stamp.is-selected { color: #123f76; background: #e7f5ff; border-color: var(--unit-color,#2878bc); transform: translateY(-2px); }
.mission-stamp.is-complete { color: #275a31; background: #edfae8; border-color: #89c978; }
.mission-stamp.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb,var(--unit-color,#2878bc) 20%,transparent); }
.mission-stamp:disabled { cursor: not-allowed; opacity: .48; }

.lets-learn { margin-top: 46px; padding: clamp(20px, 3.4vw, 34px); background: linear-gradient(145deg, #d9efff 0%, #eef8ff 54%, #fffef4 100%); border: 3px solid #b9dff6; border-radius: 30px; box-shadow: 0 13px 0 #b6d6ec, 0 24px 42px rgba(19, 71, 116, .10); }
.learn-library-heading { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin-bottom: 16px; }
.learn-library-heading h2 { margin: 2px 0 0; color: #133f78; font-size: clamp(1.75rem, 3.1vw, 2.55rem); line-height: 1; }
.learn-library-heading > p { max-width: 390px; margin: 0; color: #4e718d; text-align: right; font-size: .88rem; font-weight: 750; line-height: 1.45; }
.learn-study-progress { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 22px; padding: 13px 15px; color: #17487c; background: rgba(255,255,255,.76); border: 2px solid #c9e1f1; border-radius: 15px; }
.learn-study-progress b, .learn-study-progress small { display: block; }
.learn-study-progress b { font-size: .85rem; }
.learn-study-progress small { margin-top: 2px; color: #65819d; font-size: .7rem; font-weight: 700; }
.learn-progress-bar { width: min(235px, 31vw); height: 11px; overflow: hidden; accent-color: #44a848; border: 0; border-radius: 99px; }
.learn-lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.learn-lesson-card { position: relative; display: grid; align-content: start; min-height: 184px; overflow: hidden; padding: 24px 18px 16px; color: #173e70; text-align: left; background: rgba(255,255,255,.96); border: 2px solid #c5deee; border-radius: 19px; box-shadow: 0 6px 0 #b8d3e4, 0 12px 22px rgba(20, 69, 110, .07); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.learn-lesson-card::before { position: absolute; inset: 0 0 auto; height: 8px; content: ""; background: var(--lesson-color, #2779be); }
.learn-lesson-card:hover, .learn-lesson-card.is-selected { transform: translateY(-4px); border-color: var(--lesson-color, #2779be); box-shadow: 0 8px 0 color-mix(in srgb, var(--lesson-color, #2779be) 45%, #94b8d2), 0 17px 27px rgba(20, 69, 110, .13); }
.learn-lesson-card.is-studied { background: linear-gradient(145deg,#fff 0%,#f4fff0 100%); border-color: #9ccf8e; }
.learn-lesson-card.is-studied::after { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 23px; height: 23px; color: #fff; content: "✓"; background: #4ba640; border-radius: 50%; font-size: .76rem; font-weight: 1000; }
.learn-lesson-card small { margin-bottom: 7px; color: #5d7892; font-size: .64rem; font-weight: 1000; letter-spacing: .11em; }
.learn-lesson-card strong { color: #123f76; font-size: 1rem; line-height: 1.15; }
.learn-lesson-focus { align-self: start; margin-top: 11px; padding: 7px 9px; color: #375a7c; background: #edf7ff; border-radius: 9px; font-size: .7rem; font-weight: 800; line-height: 1.25; }
.learn-lesson-action { align-self: end; margin-top: 14px; color: var(--lesson-color, #2779be); font-size: .74rem; font-weight: 1000; }
.learn-lesson-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .75fr); gap: 14px; align-items: stretch; margin-top: 24px; }
.learn-word-list, .learn-quick-check { padding: clamp(17px, 2.3vw, 24px); background: rgba(255,255,255,.94); border: 2px solid #d4e4f0; border-radius: 23px; box-shadow: 0 8px 22px rgba(15,53,95,.08); }
.learn-guide-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 12px; margin-bottom: 17px; }
.learn-guide-icon { display: grid; place-items: center; width: 51px; height: 51px; background: #e9f5ff; border-radius: 15px; font-size: 1.7rem; }
.learn-guide-heading > div { min-width: 0; }
.learn-guide-heading small, .learn-content-heading small { display: block; color: #4980b2; font-size: .65rem; font-weight: 1000; letter-spacing: .1em; }
.learn-guide-heading h3 { margin: 2px 0; color: #123f76; font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.05; }
.learn-guide-heading p { margin: 4px 0 0; color: #637d97; font-size: .77rem; font-weight: 700; line-height: 1.42; }
.learn-back-button { align-self: start; min-height: 35px; padding: 7px 10px; color: #416e96; background: #f2f8fc; border: 2px solid #d2e4f0; border-radius: 10px; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.learn-back-button:hover { color: #fff; background: #1b6eaa; border-color: #1b6eaa; }
.learn-guide-tabs { display: flex; gap: 7px; margin: 0 0 16px; padding: 5px; overflow-x: auto; background: #edf6fc; border: 1px solid #d0e3f0; border-radius: 14px; }
.learn-guide-tab { min-height: 35px; padding: 7px 11px; color: #557895; background: transparent; border: 0; border-radius: 9px; font-size: .72rem; font-weight: 1000; white-space: nowrap; }
.learn-guide-tab:hover { color: #17487c; background: #deeff9; }
.learn-guide-tab.is-active { color: #fff; background: #1d6da9; box-shadow: 0 3px 0 #0e4d82; }
.learn-guide-content { outline: none; }
.learn-content-heading { margin: 0 0 12px; }
.learn-content-heading h4 { margin: 3px 0 0; color: #17487c; font-size: 1.06rem; line-height: 1.25; }
.learn-content-heading p { margin: 5px 0 0; color: #647e97; font-size: .74rem; font-weight: 700; line-height: 1.42; }
.learn-mission-card, .learn-key-section, .learn-phrase-bank, .learn-say-card { padding: 16px; border: 2px solid #d4e5f1; border-radius: 17px; }
.learn-mission-card { background: linear-gradient(140deg,#fff7d4,#fffdf4); border-color: #ead170; }
.learn-mission-card .learn-content-heading small { color: #9b760e; }
.learn-mission-card .learn-content-heading h4 { color: #7d5b08; }
.learn-step-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.learn-step-list li { position: relative; min-height: 30px; padding: 7px 10px 7px 35px; color: #5d521c; background: rgba(255,255,255,.72); border-radius: 10px; font-size: .75rem; font-weight: 800; }
.learn-step-list li::before { position: absolute; left: 10px; top: 50%; display: grid; place-items: center; width: 17px; height: 17px; color: #fff; content: "✓"; background: #dd9e17; border-radius: 50%; font-size: .62rem; font-weight: 1000; transform: translateY(-50%); }
.learn-key-section, .learn-phrase-bank, .learn-say-card { margin-top: 14px; background: #f7fbff; }
.learn-full-bank { background: #fff; }
.learn-sentence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.learn-sentence { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 46px; padding: 9px 10px; color: #163e73; text-align: left; background: rgba(255,255,255,.96); border: 2px solid #e3cc71; border-radius: 11px; font-size: .74rem; font-weight: 850; }
.learn-sentence:hover { color: #fff; background: #1c6da8; border-color: #1c6da8; }
.learn-sentence span { flex: 0 0 auto; }.learn-sentence b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-word-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.learn-word { position: relative; min-height: 72px; padding: 11px 27px 9px 10px; color: #194576; text-align: left; background: #fff; border: 2px solid #d7e7f3; border-radius: 13px; font-size: .78rem; font-weight: 850; }
.learn-word:hover { background: #ecf9e5; border-color: #7ebe5c; transform: translateY(-2px); }
.learn-word span { position: absolute; top: 8px; right: 8px; font-size: .9rem; }
.learn-word b { display: block; font-size: .82rem; line-height: 1.2; }
.learn-star-grid .learn-word { min-height: 67px; }
.learn-guide-aside { display: flex; flex-direction: column; justify-content: center; }
.learn-guide-aside.is-light { justify-content: flex-start; color: #194576; background: linear-gradient(150deg,#f3fbff,#fff); border-color: #c8e0ef; }
.learn-guide-aside.is-light .learn-content-heading h4 { color: #17487c; }
.learn-guide-aside.is-light .learn-content-heading small { color: #4980b2; }
.learn-side-sentences { grid-template-columns: 1fr; }
.learn-tip { margin: 15px 0 0; padding: 11px; color: #4f6e86; background: #eaf5fb; border-radius: 12px; font-size: .74rem; font-weight: 700; line-height: 1.4; }
.learn-routine { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: routine; }
.learn-routine li { position: relative; min-height: 34px; padding: 8px 8px 8px 37px; color: #315b7f; background: #fff; border: 1px solid #d5e6f2; border-radius: 11px; font-size: .75rem; font-weight: 800; counter-increment: routine; }
.learn-routine li::before { position: absolute; left: 10px; top: 50%; display: grid; place-items: center; width: 19px; height: 19px; color: #fff; content: counter(routine); background: #2f83bc; border-radius: 50%; font-size: .65rem; transform: translateY(-50%); }
.learn-say-card { margin-top: 0; background: linear-gradient(140deg,#e9f8e4,#fbfff9); border-color: #9fce8f; }
.learn-say-phrase { margin: 14px 0; color: #1e5f36; font-size: clamp(1.1rem,2vw,1.35rem); font-weight: 1000; line-height: 1.25; }
.learn-say-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-play-model, .learn-said-button { min-height: 39px; padding: 8px 11px; border: 2px solid #2f82b9; border-radius: 11px; font-size: .73rem; font-weight: 1000; }
.learn-play-model { color: #fff; background: #2079b5; }
.learn-play-model:hover { background: #135b91; }
.learn-said-button { color: #216f2d; background: #fff; border-color: #7dbc65; }
.learn-said-button.is-done { color: #fff; background: #429b3e; border-color: #429b3e; }
.learn-practice-note { margin: 13px 0 0; color: #54735c; font-size: .71rem; font-weight: 750; line-height: 1.38; }
.learn-audio-status { min-height: 1.2em; margin: 14px 2px 0; color: #52728d; font-size: .71rem; font-weight: 750; }
.learn-guide-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 2px solid #e1edf5; }
.learn-guide-nav, .learn-practise-button { min-height: 37px; padding: 8px 10px; border-radius: 10px; font-size: .7rem; font-weight: 1000; }
.learn-guide-nav { color: #436f95; background: #f2f8fc; border: 2px solid #d4e5f1; }
.learn-guide-nav:hover { color: #17487c; background: #e1f1fa; border-color: #9bc4df; }
.learn-practise-button { color: #fff; background: #3b9b3f; border: 2px solid #2d7c31; box-shadow: 0 3px 0 #236626; }
.learn-practise-button:hover { background: #2f8434; }
.learn-quick-check:not(.is-light) { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg,#103f7a,#176eaa); border-color: #0d4d89; color: #fff; }
.learn-quick-check:not(.is-light) .eyebrow { color: #ffe16c; }
.learn-quick-check:not(.is-light) h3 { margin: 0 0 16px; font-size: 1.12rem; line-height: 1.25; }
.learn-choice-grid { display: grid; gap: 8px; }
.learn-choice-grid button { min-height: 40px; padding: 8px 10px; color: #15477d; background: #fff; border: 2px solid #d1e4f4; border-radius: 11px; font-size: .78rem; font-weight: 900; }
.learn-choice-grid button:hover:not(:disabled) { color: #175d2c; background: #efffe8; border-color: #79bf5b; }
.learn-choice-grid button.is-correct { color: #1d672a; background: #e7ffdf; border-color: #63b44b; }
.learn-choice-grid button.is-wrong { color: #922f2f; background: #fff0f0; border-color: #ec7070; }
.learn-check-note { display: block; margin-top: 12px; color: #dceeff; font-size: .69rem; font-weight: 700; line-height: 1.4; }

.badge-section { margin-top: 52px; }
.badge-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.badge { min-height: 150px; padding: 18px 12px; text-align: center; background: rgba(255,255,255,.82); border: 2px solid #d8e5f1; border-radius: 22px; }
.badge span { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 9px; background: #e5edf4; border-radius: 50%; filter: grayscale(1); opacity: .48; font-size: 2.1rem; }
.badge b, .badge small { display: block; }
.badge b { color: #1e467b; font-size: .85rem; }
.badge small { margin-top: 4px; color: #7e8998; font-size: .68rem; }
.badge.is-earned { background: linear-gradient(145deg, #fff 0%, #fff7cf 100%); border-color: #f2cc3e; box-shadow: 0 8px 0 #e9bb2e; }
.badge.is-earned span { background: #fff0a0; filter: none; opacity: 1; }
.badge > i { display: block; width: 100%; height: 5px; margin-top: 9px; overflow: hidden; background: #e1e8ee; border-radius: 99px; }
.badge > i em { display: block; height: 100%; background: linear-gradient(90deg,#48aa36,#ffd139); border-radius: inherit; }

.game-screen { min-height: calc(100vh - 82px); }
.quest-status { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.quest-status h1 { margin: 0; color: var(--navy); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.mission-label { margin: 8px 0 0; color: #667e95; font-size: .78rem; font-weight: 850; }
.text-button { padding: 0; color: #386ca1; background: transparent; border: 0; font-weight: 900; }
.session-target { display: grid; grid-template-columns: minmax(130px, 260px) auto; align-items: center; gap: 6px 12px; min-width: 300px; }
.session-target > span { overflow: hidden; height: 13px; background: #d5e3f0; border: 2px solid #fff; border-radius: 99px; box-shadow: 0 2px 5px rgba(10,45,80,.1); }
.session-target i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #5aba3b, #ffcb35); border-radius: inherit; transition: width .3s linear; }
.session-target b { grid-row: span 2; color: var(--navy); font-size: 1.35rem; }
.session-target small { color: #6d7b90; font-weight: 800; }
.stage-rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin: 19px 0; }
.stage-pill { position: relative; min-height: 64px; padding: 9px 5px; color: #718098; background: #fff; border: 2px solid #d9e5f0; border-radius: 16px; font-size: .7rem; font-weight: 900; }
.stage-pill span { display: block; margin-bottom: 2px; font-size: 1.25rem; }
.stage-pill.is-active { color: #fff; background: #1c65aa; border-color: #1c65aa; box-shadow: 0 6px 0 #0f4581; transform: translateY(-3px); }
.stage-pill.is-done { color: #235d28; background: #dff7d5; border-color: #77c35d; }
.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.activity-card { min-height: 500px; padding: clamp(24px, 4vw, 48px); background: #fff; border: 4px solid #d4e4f1; border-radius: 30px; box-shadow: var(--shadow); }
.activity-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 26px; }
.activity-head small { color: #4e77a2; font-weight: 1000; letter-spacing: .12em; }
.activity-head progress { width: min(250px, 40vw); height: 12px; accent-color: var(--green); }
.question-kicker { margin: 0 0 7px; color: #ef7b26; font-weight: 1000; letter-spacing: .08em; }
.question-title { max-width: 820px; margin: 0 0 26px; color: #123a73; font-size: clamp(1.55rem, 3.3vw, 2.8rem); line-height: 1.14; }
.listen-button { display: inline-flex; align-items: center; gap: 9px; min-height: 58px; margin: -6px 0 22px; padding: 11px 22px; color: #fff; background: #1e79ba; border: 0; border-radius: 18px; box-shadow: 0 6px 0 #12558a; font-weight: 1000; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.choice-button { min-height: 76px; padding: 15px; color: #173d73; background: #f5faff; border: 3px solid #cfe1f1; border-radius: 19px; box-shadow: 0 5px 0 #c3d6e6; font-weight: 900; font-size: 1rem; }
.choice-button:hover:not(:disabled) { color: #0d6332; background: #efffe9; border-color: #79bf5b; transform: translateY(-2px); }
.choice-button.is-wrong { color: #922f2f; background: #fff0f0; border-color: #ec7070; }
.choice-button.is-correct { color: #1d672a; background: #e7ffdf; border-color: #63b44b; }
.feedback { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 25px; padding: 17px 19px; border-radius: 18px; }
.feedback.correct { color: #22682e; background: #e6fadc; border: 2px solid #80c768; }
.feedback.wrong { color: #873434; background: #fff0f0; border: 2px solid #e98787; }
.feedback b, .feedback small { display: block; }
.feedback small { margin-top: 4px; }
.continue-button { min-height: 46px; padding: 10px 18px; color: #fff; background: #318e43; border: 0; border-radius: 14px; box-shadow: 0 5px 0 #1f682d; font-weight: 1000; white-space: nowrap; }

.power-panel { display: grid; gap: 13px; }
.power-panel > div { padding: 20px; background: #fff; border: 3px solid #d7e4ef; border-radius: 23px; box-shadow: 0 8px 20px rgba(20, 55, 92, .08); }
.power-panel small, .power-panel strong, .power-panel span { display: block; }
.power-panel small { color: #718098; font-size: .7rem; font-weight: 1000; letter-spacing: .12em; }
.combo-card strong { margin: 5px 0; color: #f47d2a; font-size: 2.5rem; }
.combo-card span, .quest-score span { color: #778497; font-size: .76rem; }
.quest-score strong { margin: 5px 0; color: #1f64a2; font-size: 2.35rem; }
.mini-rewards p { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 0; border-bottom: 1px solid #e8eef4; }
.mini-rewards p:last-child { border: 0; }
.mini-rewards span { font-size: 1.35rem; }
.mini-rewards b { color: #3d5879; font-size: .75rem; }
.mini-rewards .heart-status,.mini-rewards .shield-status { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; column-gap: 9px; row-gap: 2px; }
.mini-rewards .heart-status > span,.mini-rewards .shield-status > span { grid-row: span 2; }
.mini-rewards .heart-status small,.mini-rewards .shield-status small { grid-column: 2; color: #718098; font-size: .66rem; font-weight: 750; line-height: 1.25; }

.match-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.match-card { min-height: 78px; padding: 12px 8px; color: #174477; background: #f7fbff; border: 3px solid #cfe0ef; border-radius: 17px; font-weight: 900; box-shadow: 0 5px 0 #c1d4e5; }
.match-card.is-selected { color: #fff; background: #2878bd; border-color: #165894; }
.match-card.is-matched { visibility: hidden; pointer-events: none; }
.match-card.is-shake { animation: shake .28s linear 2; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

.word-clue { margin-bottom: 20px; padding: 18px; color: #244b7a; background: #eff7ff; border: 2px solid #c6def1; border-radius: 18px; text-align: center; font-size: 1.2rem; font-weight: 900; }
.word-answer { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 65px; margin: 14px 0 22px; }
.answer-slot { display: grid; place-items: center; width: 42px; height: 52px; color: #133e74; background: #fff; border: 0; border-bottom: 4px solid #4c82b5; font-size: 1.35rem; font-weight: 1000; }
.letter-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.letter-button { width: 48px; height: 50px; color: #fff; background: #2874b7; border: 0; border-radius: 13px; box-shadow: 0 5px 0 #15528a; font-size: 1.18rem; font-weight: 1000; }
.letter-button:disabled { opacity: .23; box-shadow: none; }
.word-tools { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.word-tools button { padding: 10px 16px; color: #365777; background: #eef5fb; border: 2px solid #cbddea; border-radius: 13px; font-weight: 900; }

.sentence-clue { margin-bottom: 18px; padding: 16px 18px; color: #244b7a; background: #eff7ff; border: 2px solid #c6def1; border-radius: 18px; text-align: center; font-size: 1.12rem; font-weight: 900; }
.sentence-answer { min-height: 82px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; padding: 14px; background: #fff9db; border: 3px dashed #e2bd36; border-radius: 18px; }
.sentence-answer span { padding: 8px 11px; color: #123f76; background: #fff; border: 2px solid #d6e2ec; border-radius: 11px; font-weight: 900; }
.sentence-answer small { color: #83733d; font-weight: 800; }
.sentence-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.sentence-token { min-height: 48px; padding: 9px 13px; color: #fff; background: #2874b7; border: 0; border-radius: 13px; box-shadow: 0 5px 0 #15528a; font-weight: 900; }
.sentence-token:disabled { opacity: .22; box-shadow: none; }

.sort-token { display: grid; place-items: center; min-height: 160px; margin: 20px 0 28px; padding: 24px; color: #163f76; background: linear-gradient(145deg, #f2f9ff, #e2f1ff); border: 4px solid #bee0f7; border-radius: 26px; font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 1000; text-align: center; }
.sort-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sort-actions button { min-height: 70px; color: #fff; border: 0; border-radius: 20px; font-size: 1.13rem; font-weight: 1000; }
.sort-actions button:first-child { background: #df4141; box-shadow: 0 7px 0 #a62929; }
.sort-actions button:last-child { background: #2675b9; box-shadow: 0 7px 0 #145188; }

.stage-complete { display: grid; place-items: center; min-height: 390px; text-align: center; }
.stage-complete span { font-size: 5rem; }
.stage-complete h2 { margin: 8px 0; color: var(--navy); font-size: 2.35rem; }
.stage-complete p { max-width: 560px; margin: 0 0 25px; color: var(--muted); font-weight: 700; }
.bonus-lab { text-align: center; }
.bonus-lab .goal-ring { margin: 6px auto 22px; }

.result-screen { display: grid; place-items: center; min-height: calc(100vh - 82px); }
.result-card { position: relative; overflow: hidden; width: min(760px, 100%); padding: clamp(28px, 6vw, 64px); text-align: center; background: #fff; border: 5px solid #ffd24b; border-radius: 36px; box-shadow: 0 22px 0 #e9b72e, 0 42px 70px rgba(15, 52, 92, .22); }
.result-card > img { width: 145px; filter: drop-shadow(0 10px 6px rgba(0,0,0,.13)); }
.result-card h1 { margin: 0; color: #0b3974; font-size: clamp(2.8rem, 7vw, 5.3rem); line-height: 1; }
.result-card > p:not(.eyebrow) { color: #637188; font-weight: 700; }
.result-burst { position: absolute; left: -30px; top: -65px; color: rgba(255,203,39,.2); font-size: 230px; line-height: 1; }
.result-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0; }
.result-numbers span { padding: 14px 8px; background: #eef6ff; border-radius: 17px; }
.result-numbers small, .result-numbers b { display: block; }
.result-numbers small { color: #69809a; font-size: .66rem; font-weight: 1000; letter-spacing: .08em; }
.result-numbers b { margin-top: 3px; color: #174d8a; font-size: 1.25rem; }
.official-score-check { margin: -6px auto 26px; padding: 20px; text-align: left; color: #123f77; background: #f2f8ff; border: 2px solid #a8ccec; border-radius: 20px; }
.official-score-check h2 { margin: 0 0 6px; color: #0b3974; font-size: 1.18rem; }
.official-score-check p { margin: 0 0 14px; color: #496883; font-weight: 700; }
.official-score-check .official-score-progress { display: block; margin-bottom: 10px; color: #547594; font-size: .76rem; font-weight: 1000; letter-spacing: .06em; }
.official-score-check .official-score-options { display: grid; gap: 8px; }
.official-score-check .official-score-options button { min-height: 42px; padding: 10px 13px; text-align: left; color: #123f77; background: #fff; border: 2px solid #c8ddf2; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.official-score-check .official-score-options button:hover, .official-score-check .official-score-options button:focus-visible { border-color: #347dbe; outline: none; box-shadow: 0 0 0 3px rgba(52,125,190,.18); }
.new-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.new-badges span { padding: 8px 13px; color: #704e00; background: #fff3b2; border: 2px solid #f0cc3f; border-radius: 99px; font-weight: 900; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(4, 24, 57, .78); backdrop-filter: blur(7px); }
.chest-modal { width: min(600px, 100%); padding: clamp(28px, 6vw, 52px); text-align: center; background: #fff; border: 5px solid #ffd244; border-radius: 31px; box-shadow: 0 20px 0 #cb8b19, 0 40px 80px rgba(0,0,0,.36); }
.chest-modal h2 { margin: 0; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.chest-modal > p:not(.eyebrow) { color: var(--muted); }
.chest-choices { display: flex; justify-content: center; gap: clamp(10px, 4vw, 24px); margin: 28px 0; }
.chest-choices button { width: clamp(80px, 20vw, 125px); aspect-ratio: 1; color: #fff; background: linear-gradient(145deg, #ef5048, #b5202b); border: 4px solid #ffd05a; border-radius: 24px; box-shadow: 0 9px 0 #7e1722; font-size: clamp(2.8rem, 9vw, 5.2rem); transition: transform .2s ease; }
.chest-choices button:nth-child(2) { background: linear-gradient(145deg, #399bdf, #135ba1); box-shadow: 0 9px 0 #0a3b74; }
.chest-choices button:nth-child(3) { background: linear-gradient(145deg, #ffd85a, #e59413); box-shadow: 0 9px 0 #a56108; }
.chest-choices button:hover { transform: translateY(-7px) rotate(-2deg); }
.chest-choices button.is-open { transform: scale(1.08); }
.chest-choices button:disabled:not(.is-open) { opacity: .26; filter: grayscale(1); }
.chest-reward { margin: 20px 0; padding: 16px; color: #1f622a; background: #e5f9dc; border: 3px solid #77bf5f; border-radius: 18px; font-size: 1.18rem; font-weight: 1000; }
.chest-reward.is-rare { color: #633f00; background: linear-gradient(135deg,#fff6b8,#ffe090); border-color: #e9ad26; box-shadow: 0 0 0 5px rgba(255,211,61,.18); }
.chest-reward.is-jackpot { color: #fff; background: radial-gradient(circle at 50% 0,#fff3a3 0 8%,transparent 9%),linear-gradient(135deg,#7b3ec4,#1c70c5 50%,#0d9e73); border-color: #fff2a2; box-shadow: 0 0 0 6px rgba(255,211,61,.24),0 10px 28px rgba(76,47,158,.35); animation: chest-jackpot 1.1s ease-in-out infinite alternate; }
.chest-reward.is-real-prize { color: #fff; background: radial-gradient(circle at 18% 16%,#fff3ad 0 5%,transparent 6%),radial-gradient(circle at 83% 20%,#fff3ad 0 4%,transparent 5%),linear-gradient(135deg,#c13b53,#7c265d 52%,#154f8d); border-color: #ffe36b; box-shadow: 0 0 0 6px rgba(255,211,61,.24),0 12px 30px rgba(94,27,74,.32); animation: chest-jackpot 1.1s ease-in-out infinite alternate; }
@keyframes chest-jackpot { from { transform: scale(1); } to { transform: scale(1.035); } }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; pointer-events: none; opacity: 0; transform: translate(-50%, 18px); padding: 12px 19px; color: #fff; background: #123f77; border: 2px solid #fff; border-radius: 99px; box-shadow: 0 9px 28px rgba(0,0,0,.2); font-weight: 900; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
  .duo-header { grid-template-columns: auto 1fr; }
  .brand-lockup { justify-self: end; }
  .header-stats { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .hero-panel { grid-template-columns: 1fr; }
  .reward-strip { grid-template-columns: repeat(2, 1fr); }
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
  .unit-grid:has(.passport-world) { grid-template-columns: 1fr; }
  .journey-dashboard { grid-template-columns: 1fr; }
  .competition-grid { grid-template-columns: 1fr 1fr; }
  .green-owl-card { grid-column: 1 / -1; grid-template-columns: minmax(220px,.8fr) 1.2fr; grid-template-rows: 1fr; align-items: center; }
  .prize-cabinet { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .learn-lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-lesson-stage { grid-template-columns: 1fr; }
  .score-rules > div { grid-template-columns: repeat(2,1fr); }
  .badge-shelf { grid-template-columns: repeat(3, 1fr); }
  .play-layout { grid-template-columns: 1fr; }
  .power-panel { grid-template-columns: repeat(3, 1fr); }
  .stage-rail { overflow-x: auto; grid-template-columns: repeat(7, minmax(105px, 1fr)); padding-bottom: 9px; }
}

@media (max-width: 650px) {
  main { width: min(100% - 20px, 1240px); }
  .duo-header { position: static; gap: 8px; padding: 10px; }
  .brand-lockup img { width: 46px; height: 46px; }
  .brand-lockup strong { font-size: .95rem; }
  .brand-lockup small { font-size: .56rem; }
  .back-link { font-size: .8rem; }
  .header-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 5px; }
  .header-stats span { display: grid; justify-items: center; gap: 0; min-height: 48px; padding: 4px; }
  .header-stats b { font-size: .65rem; }
  .screen { padding-top: 20px; }
  .hero-copy, .daily-goal-card { border-radius: 25px; }
  .daily-goal-card { grid-template-columns: 1fr; text-align: center; }
  .goal-ring { margin: auto; width: 130px; }
  .goal-ring::before { width: 96px; }
  .reward-strip, .unit-grid { grid-template-columns: 1fr; }
  .competition-hub { padding: 17px 12px 23px; border-radius: 24px; }
  .competition-heading { display: block; padding: 0 5px; }
  .competition-heading > p { margin-top: 11px; }
  .competition-grid { grid-template-columns: 1fr; }
  .green-owl-card { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .my-league-card { order: 1; }
  .green-owl-card { order: 2; }
  .leaderboard-card { order: 3; }
  .prize-showcase,.prize-winners { padding: 17px 14px; border-radius: 18px; }
  .prize-showcase-heading,.prize-winners-heading { align-items: start; flex-direction: column; gap: 9px; }
  .prize-showcase-heading > p { text-align: left; }
  .prize-cabinet { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .prize-cabinet-item { min-height: 80px; padding: 9px; }
  .prize-winner-list { grid-template-columns: 1fr; }
  .score-rules > div { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; text-align: left; }
  .learn-library-heading { display: block; }
  .learn-library-heading > p { margin-top: 10px; text-align: left; }
  .learn-study-progress { align-items: start; flex-direction: column; gap: 9px; }
  .learn-progress-bar { width: 100%; }
  .learn-lesson-grid { grid-template-columns: 1fr; }
  .learn-lesson-card { min-height: 148px; }
  .learn-guide-heading { grid-template-columns: auto minmax(0,1fr); }
  .learn-back-button { grid-column: 1 / -1; justify-self: start; }
  .learn-back-button { white-space: normal; }
  .learn-sentence-list { grid-template-columns: 1fr; }
  .learn-guide-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .learn-practise-button { grid-column: 1 / -1; grid-row: 1; }
  .learn-guide-nav:last-child { justify-self: end; }
  .badge-shelf { grid-template-columns: repeat(2, 1fr); }
  .quest-status { display: block; }
  .session-target { margin-top: 18px; min-width: 0; }
  .activity-card { min-height: 460px; padding: 20px 15px; border-radius: 22px; }
  .activity-head { align-items: start; }
  .choice-grid, .sort-actions { grid-template-columns: 1fr; }
  .choice-button { min-height: 62px; }
  .feedback { display: block; }
  .continue-button { width: 100%; margin-top: 12px; }
  .power-panel { grid-template-columns: 1fr; }
  .match-board { grid-template-columns: repeat(2, 1fr); }
  .result-numbers { grid-template-columns: repeat(2, 1fr); }
  .mission-map { grid-template-columns: repeat(2, 1fr); }
  .learn-word-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}