: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-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: 1fr 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; }
.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; }

.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; }

.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; }
.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; }
.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; }
  .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; }
  .score-rules > div { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; text-align: left; }
  .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); }
}

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