.arcade-rewards-page {
    --reward-ink:#2f2108;
    --reward-purple:#5f28d7;
    --reward-deep:#2b0b78;
    --reward-gold:#ffd44f;
    --reward-orange:#ff9519;
    --mission-blue:#1668df;
    --mission-cyan:#37d8f4;
    --mission-green:#32d583;
    --mission-red:#ff6b72;
    --mission-surface:#112765;
    --mission-surface-alt:#17357f;
    --mission-surface-ready:#0e6248;
    --mission-surface-claimed:#334155;
    --mission-text-strong:#f8fbff;
    --mission-text-soft:rgba(232,245,255,.88);
  }
  .rewardArcadeWrap { margin:-4px -14px 0; padding:0 0 36px; min-height:calc(100vh - 110px); background:radial-gradient(circle at 22% 12%, rgba(255,255,255,.16), transparent 24%), linear-gradient(180deg,#9f3df4 0%,#761ee2 28%,#4e0cab 100%); border-radius:28px; overflow:hidden; box-shadow:0 22px 60px rgba(43,10,116,.22); transition:background .25s ease; }
  .rewardArcadeWrap.mission-theme { background:radial-gradient(circle at 18% 10%, rgba(255,255,255,.22), transparent 24%), radial-gradient(circle at 82% 12%, rgba(103,232,249,.25), transparent 22%), linear-gradient(180deg,#0ea5e9 0%,#2563eb 34%,#182a88 100%); }
  .rewardTopBar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:18px 12px 12px; }
  .rewardTabBtn { position:relative; display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer; border-radius:20px; padding:14px 21px 15px; font-size:1rem; font-weight:1000; color:#fff; background:linear-gradient(180deg,#6d35dc,#32107f); box-shadow:inset 0 3px 0 rgba(255,255,255,.25), inset 0 -5px 0 rgba(22,4,63,.38), 0 7px 0 rgba(36,8,91,.70), 0 16px 24px rgba(31,6,86,.34); text-shadow:0 2px 0 rgba(0,0,0,.22); transition:transform .15s ease, filter .15s ease, background .2s ease; }
  .rewardTabBtn:before { content:""; position:absolute; inset:5px 8px auto 8px; height:38%; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0)); pointer-events:none; }
  .rewardTabBtn:hover { transform:translateY(-2px); filter:brightness(1.06); }
  .rewardTabBtn.active { color:var(--reward-ink); background:linear-gradient(180deg,#fff176,#ffc733 58%,#f09718); box-shadow:inset 0 3px 0 rgba(255,255,255,.62), inset 0 -5px 0 rgba(153,89,8,.30), 0 7px 0 #9a4c12, 0 18px 28px rgba(54,13,100,.35); text-shadow:0 1px 0 rgba(255,255,255,.50); }
  .rewardTabBtn[data-reward-tab="missions"] { background:linear-gradient(180deg,#22d3ee,#2563eb); box-shadow:inset 0 3px 0 rgba(255,255,255,.28), inset 0 -5px 0 rgba(16,44,128,.40), 0 7px 0 rgba(25,55,150,.78), 0 16px 24px rgba(8,32,96,.30); }
  .rewardTabBtn[data-reward-tab="missions"].active { color:#06245c; background:linear-gradient(180deg,#a7f3ff,#38d5f7 55%,#0ea5e9); box-shadow:inset 0 3px 0 rgba(255,255,255,.70), inset 0 -5px 0 rgba(12,88,153,.30), 0 7px 0 #075985, 0 18px 28px rgba(8,32,96,.34); }
  .rewardTabIcon { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:rgba(255,255,255,.24); box-shadow:inset 0 2px 0 rgba(255,255,255,.25); }
  .rewardHeroBanner { margin:0 12px 14px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; border-radius:26px; background:linear-gradient(135deg,rgba(255,226,97,.98),rgba(255,148,24,.96)); border:3px solid rgba(255,231,112,.95); box-shadow:inset 0 3px 0 rgba(255,255,255,.36), 0 10px 0 rgba(88,24,153,.58), 0 22px 40px rgba(31,6,86,.26); color:var(--reward-ink); overflow:hidden; }
  .rewardHeroBanner .pill { display:inline-flex; align-items:center; border-radius:999px; padding:8px 12px; background:linear-gradient(180deg,#fff2a8,#ffd047); color:#6c3a00; font-weight:1000; font-size:.8rem; text-transform:uppercase; box-shadow:inset 0 2px 0 rgba(255,255,255,.50), 0 5px 0 rgba(165,88,10,.24); }
  .rewardHeroBanner h3 { margin:12px 0 6px; font-size:clamp(1.45rem,3vw,2.35rem); line-height:1; font-weight:1000; color:#fff; text-shadow:0 3px 0 rgba(146,71,12,.30); }
  .rewardHeroBanner p { margin:0; max-width:680px; color:rgba(255,255,255,.94); font-weight:900; text-shadow:0 2px 0 rgba(146,71,12,.20); }
  .rewardHeroDog { width:min(170px,28vw); flex:0 0 auto; filter:drop-shadow(0 18px 22px rgba(62,24,9,.28)); transform:rotate(2deg); }
  .missionHeroBanner { margin:0 0 14px; background:linear-gradient(135deg,#38d5f7,#2563eb 56%,#1d4ed8); border-color:rgba(125,249,255,.88); box-shadow:inset 0 3px 0 rgba(255,255,255,.30), 0 10px 0 rgba(7,89,133,.62), 0 22px 40px rgba(8,47,73,.26); }
  .missionHeroBanner .pill { background:linear-gradient(180deg,#dffbff,#67e8f9); color:#075985; }
  .missionHeroBanner h3 { color:#fff; text-shadow:0 3px 0 rgba(7,89,133,.30); }
  .missionHeroBanner p { text-shadow:0 2px 0 rgba(7,89,133,.20); }
  .missionHeroBanner .rewardHeroDog { width:min(210px,32vw); transform:rotate(1deg) translateY(8px); }
  .rewardPanel { padding:0 12px; }
  .rewardCatalogGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; align-items:stretch; }
  .rewardGiftCard { position:relative; min-height:238px; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; padding:12px; background:linear-gradient(180deg,#ffdf5d 0%,#ffbf31 48%,#ff9519 100%); border:2px solid rgba(255,225,84,.95); box-shadow:inset 0 2px 0 rgba(255,255,255,.30), inset 0 -4px 0 rgba(164,82,10,.22), 0 7px 0 rgba(88,24,153,.50), 0 14px 24px rgba(31,6,86,.22); color:#fff; }
  .rewardGiftCard:before { content:""; position:absolute; inset:10px 12px auto 12px; height:76px; border-radius:16px; background:linear-gradient(180deg,rgba(255,250,180,.42),rgba(255,255,255,.08)); border:1px solid rgba(255,246,148,.42); box-shadow:inset 0 2px 0 rgba(255,255,255,.18); pointer-events:none; }
  .rewardGiftMedia { position:relative; z-index:1; height:76px; display:grid; place-items:center; margin-bottom:10px; }
  .rewardGiftMedia img { max-width:88%; max-height:66px; object-fit:contain; filter:drop-shadow(0 6px 2px rgba(37,19,31,.16)); }
  .rewardGiftPlaceholder { font-size:2.25rem; font-weight:1000; filter:drop-shadow(0 5px 1px rgba(37,19,31,.16)); }
  .rewardGiftBadge { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; max-width:100%; border-radius:999px; padding:5px 8px; background:linear-gradient(180deg,#fff0a3,#ffd14a); color:#6c3a00; font-weight:1000; font-size:.66rem; text-transform:uppercase; box-shadow:inset 0 2px 0 rgba(255,255,255,.42), 0 3px 0 rgba(165,88,10,.20); }
  .rewardGiftTitle { margin:10px 0 4px; color:#fff; font-size:1.16rem; line-height:1.05; font-weight:1000; text-shadow:0 2px 0 rgba(146,71,12,.28); overflow:hidden; text-overflow:ellipsis; }
  .rewardGiftDesc { min-height:30px; margin:0; color:rgba(255,255,255,.92); font-size:.78rem; font-weight:850; line-height:1.2; text-shadow:0 2px 0 rgba(146,71,12,.18); overflow:hidden; text-overflow:ellipsis; }
  .rewardGiftFooter { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .rewardGiftCost { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:6px 9px; color:#fff; font-size:.72rem; font-weight:1000; background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.25); text-shadow:0 2px 0 rgba(146,71,12,.22); white-space:nowrap; }
  .rewardGiftCta { text-decoration:none; color:#5c3506; border-radius:14px; padding:9px 12px; font-size:.78rem; font-weight:1000; background:linear-gradient(180deg,#fff8ba,#ffd557 58%,#f2af27); box-shadow:inset 0 3px 0 rgba(255,255,255,.62), inset 0 -3px 0 rgba(146,83,14,.16), 0 4px 0 rgba(143,80,8,.42), 0 8px 16px rgba(54,29,7,.16); transition:transform .15s ease, filter .15s ease; white-space:nowrap; }
  .rewardGiftCta:hover { transform:translateY(-2px); filter:brightness(1.04); }
  .rewardCodeVault { margin:0 12px 16px; padding:14px 16px; border-radius:24px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.10)); border:2px solid rgba(255,255,255,.22); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 14px 24px rgba(31,6,86,.16); color:#fff; }
  .rewardCodeDockLead { display:flex; align-items:center; gap:10px; min-width:0; }
  .rewardCodeDockBadge { width:54px; height:54px; display:grid; place-items:center; flex:0 0 auto; border-radius:18px; background:linear-gradient(180deg,#fff176,#fb923c); color:#5b3000; font-size:1rem; font-weight:1000; box-shadow:inset 0 3px 0 rgba(255,255,255,.58), 0 7px 0 rgba(146,83,14,.24); }
  .rewardCodeDockTitleRow { display:flex; align-items:center; gap:8px; min-width:0; }
  .rewardCodeDockTitle { display:inline-flex; align-items:center; min-height:30px; border-radius:999px; padding:7px 12px; background:rgba(255,255,255,.14); color:#fff8cc; font-size:.78rem; font-weight:1000; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
  .rewardCodeInfo { position:relative; display:inline-flex; }
  .rewardCodeInfoBtn { width:28px; height:28px; display:grid; place-items:center; border:0; cursor:help; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:.9rem; font-weight:1000; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
  .rewardCodeInfoBtn:hover,
  .rewardCodeInfoBtn:focus-visible { background:rgba(255,255,255,.22); outline:none; }
  .rewardCodeTooltip { position:absolute; left:0; top:calc(100% + 10px); z-index:4; width:min(310px,calc(100vw - 52px)); padding:12px 13px; border-radius:16px; background:rgba(13,8,45,.96); border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 28px rgba(4,2,24,.34); color:#fff; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; }
  .rewardCodeTooltip strong { display:block; margin-bottom:4px; font-size:.84rem; color:#fff8cc; }
  .rewardCodeTooltip span { display:block; color:rgba(255,255,255,.84); font-size:.78rem; font-weight:850; line-height:1.45; }
  .rewardCodeInfo:hover .rewardCodeTooltip,
  .rewardCodeInfo:focus-within .rewardCodeTooltip { opacity:1; pointer-events:auto; transform:translateY(0); }
  .rewardCodeRecentBadges,
  .rewardCodeGuestActions { display:flex; gap:8px; flex-wrap:wrap; }
  .rewardCodeFeature { display:inline-flex; align-items:center; min-height:32px; border-radius:999px; padding:7px 11px; font-size:.76rem; font-weight:1000; }
  .rewardCodeFeature--ticket { color:#7c2d12; background:linear-gradient(180deg,#ffedd5,#fdba74); }
  .rewardCodeFeature--fan-pick { color:#0f2f5f; background:linear-gradient(180deg,#dbeafe,#7dd3fc); }
  .rewardCodeFeature--points { color:#5b3000; background:linear-gradient(180deg,#fef3c7,#fbbf24); }
  .rewardCodeFeature--spid { color:#4c1d95; background:linear-gradient(180deg,#f5d0fe,#c4b5fd); }
  .rewardCodeForm { display:block; min-width:0; }
  .rewardCodeInputRow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
  .rewardCodeInputRow input,
  .rewardCodeInput { width:100%; min-height:48px; border:0; border-radius:16px; padding:0 16px; background:rgba(255,255,255,.96); color:#2f2108; font-size:.95rem; font-weight:1000; box-shadow:inset 0 2px 0 rgba(255,255,255,.54); }
  .rewardCodeInput::placeholder { color:rgba(47,33,8,.44); text-transform:none; }
  .rewardCodeSubmit { border:0; cursor:pointer; min-height:48px; border-radius:16px; padding:0 16px; color:#5b3000; font-size:.82rem; font-weight:1000; background:linear-gradient(180deg,#fff8ba,#ffd557 58%,#f2af27); box-shadow:inset 0 3px 0 rgba(255,255,255,.62), 0 5px 0 rgba(143,80,8,.40), 0 10px 16px rgba(54,29,7,.16); transition:transform .15s ease, filter .15s ease; white-space:nowrap; }
  .rewardCodeSubmit:hover { transform:translateY(-2px); filter:brightness(1.04); }
  .rewardCodeErrors { margin-top:8px; }
  .rewardCodeErrors ul { margin:0; padding:0; list-style:none; }
  .rewardCodeErrors li { color:#ffe3eb; font-size:.76rem; font-weight:900; }
  .rewardCodeDockMeta { display:grid; gap:6px; min-width:0; justify-items:end; }
  .rewardCodeMiniState { display:inline-flex; align-items:center; gap:7px; min-height:34px; border-radius:999px; padding:7px 12px; background:rgba(12,7,51,.28); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
  .rewardCodeMiniState strong { display:block; color:#fff; font-size:.8rem; line-height:1.05; }
  .rewardCodeMiniState small { display:block; color:rgba(255,255,255,.66); font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
  .rewardCodeRecentBadges { justify-content:flex-end; }
  .rewardCodeGuestDock { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
  .rewardCodeGuestPill { display:inline-flex; align-items:center; min-height:34px; border-radius:999px; padding:7px 12px; background:rgba(12,7,51,.28); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.78rem; font-weight:1000; }
  .rewardCodeGuestActions .btn3d,
  .rewardCodeGuestActions .btnGhost { min-width:150px; text-align:center; }
  .missionLegend { margin:0 0 12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .missionLegendItem { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:18px; background:rgba(7,20,73,.24); border:1px solid rgba(191,233,255,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px rgba(6,24,92,.10); color:#fff; }
  .missionLegendSwatch { position:relative; flex:0 0 auto; width:13px; height:13px; margin-top:4px; border-radius:999px; background:linear-gradient(180deg,#7dd3fc,#38bdf8); box-shadow:0 0 0 4px rgba(125,211,252,.16); }
  .missionLegendItem.ready .missionLegendSwatch { background:linear-gradient(180deg,#fde68a,#34d399); box-shadow:0 0 0 4px rgba(52,211,153,.18); }
  .missionLegendItem.claimed .missionLegendSwatch { background:linear-gradient(180deg,#e2e8f0,#94a3b8); box-shadow:0 0 0 4px rgba(148,163,184,.18); }
  .missionLegendTitle { display:block; font-size:.9rem; font-weight:1000; line-height:1.05; }
  .missionLegendText { display:block; margin-top:2px; color:rgba(255,255,255,.82); font-size:.72rem; font-weight:850; line-height:1.2; }
  .missionBoard { position:relative; display:grid; gap:18px; overflow:visible; }
  .missionBand { position:relative; overflow:visible; border-radius:26px; padding:18px; background:linear-gradient(180deg,#0d93da 0%,#1e5ccf 42%,#182a88 100%); border:3px solid rgba(125,249,255,.82); box-shadow:0 10px 0 rgba(7,89,133,.58), 0 20px 34px rgba(8,47,73,.28); color:#fff; }
  .missionBand--starter { background:linear-gradient(180deg,#f59e0b 0%,#ef4444 48%,#9a3412 100%); border-color:rgba(254,215,170,.86); box-shadow:0 10px 0 rgba(154,52,18,.46), 0 20px 34px rgba(127,29,29,.26); }
  .missionBand--weekly { background:linear-gradient(180deg,#12b981 0%,#2563eb 45%,#242380 100%); border-color:rgba(167,243,208,.82); box-shadow:0 10px 0 rgba(21,128,61,.38), 0 20px 34px rgba(8,47,73,.28); }
  .missionBandHead { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
  .missionBandTitle { margin:0; font-size:1.55rem; line-height:1.05; font-weight:1000; text-shadow:0 3px 0 rgba(7,89,133,.30); }
  .missionBandText { margin:4px 0 0; max-width:560px; color:rgba(255,255,255,.94); font-size:.84rem; font-weight:850; line-height:1.28; }
  .missionCapStrip { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
  .missionCapPill { display:inline-flex; align-items:center; min-height:32px; border-radius:999px; padding:7px 10px; background:rgba(4,23,77,.28); border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:1000; font-size:.76rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
  .missionCapPill--timer { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28); }
  .missionGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
  .missionCard { position:relative; display:flex; flex-direction:column; min-height:250px; border-radius:22px; padding:14px 14px 16px 18px; background:linear-gradient(180deg,var(--mission-surface-alt),var(--mission-surface)); border:1px solid rgba(191,233,255,.34); box-shadow:inset 0 2px 0 rgba(255,255,255,.16), 0 14px 24px rgba(8,47,73,.22); overflow:hidden; }
  .missionCard:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0) 46%); pointer-events:none; }
  .missionCard:after { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:linear-gradient(180deg,#7dd3fc,#38bdf8); box-shadow:0 0 18px rgba(56,189,248,.32); }
  .missionCard.ready { background:linear-gradient(180deg,#138a65,var(--mission-surface-ready)); border-color:rgba(167,243,208,.78); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 16px 28px rgba(6,78,59,.28); }
  .missionCard.ready:after { background:linear-gradient(180deg,#fde68a,#34d399); box-shadow:0 0 18px rgba(52,211,153,.32); }
  .missionCard.claimed { background:linear-gradient(180deg,#4b5563,var(--mission-surface-claimed)); border-color:rgba(226,232,240,.28); box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 14px 24px rgba(30,41,59,.22); }
  .missionCard.claimed:after { background:linear-gradient(180deg,#e2e8f0,#94a3b8); box-shadow:0 0 18px rgba(148,163,184,.25); }
  .missionTop { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .missionIcon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#075985; background:linear-gradient(180deg,#e0fbff,#67e8f9); font-size:.82rem; font-weight:1000; box-shadow:inset 0 2px 0 rgba(255,255,255,.62), 0 5px 0 rgba(7,89,133,.25); }
  .missionCard.ready .missionIcon { color:#065f46; background:linear-gradient(180deg,#f0fdf4,#86efac); box-shadow:inset 0 2px 0 rgba(255,255,255,.72), 0 5px 0 rgba(6,95,70,.24); }
  .missionCard.claimed .missionIcon { color:#334155; background:linear-gradient(180deg,#f8fafc,#cbd5e1); box-shadow:inset 0 2px 0 rgba(255,255,255,.68), 0 5px 0 rgba(71,85,105,.20); }
  .missionState { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 11px; font-weight:1000; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; color:#075985; background:linear-gradient(180deg,#e0fbff,#67e8f9); border:1px solid rgba(255,255,255,.46); box-shadow:inset 0 2px 0 rgba(255,255,255,.48); }
  .missionState:empty { display:none; }
  .missionState:before { content:""; width:8px; height:8px; border-radius:999px; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.24); }
  .missionCard.ready .missionState { color:#064e3b; background:linear-gradient(180deg,#ecfccb,#86efac); }
  .missionCard.claimed .missionState { color:#334155; background:linear-gradient(180deg,#f8fafc,#dbeafe); }
  .missionTitle { position:relative; z-index:1; margin:12px 0 6px; color:var(--mission-text-strong); font-size:1.08rem; line-height:1.1; font-weight:1000; text-shadow:0 2px 0 rgba(7,89,133,.25); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .missionDesc { position:relative; z-index:1; margin:0; color:var(--mission-text-soft); font-weight:850; font-size:.82rem; line-height:1.24; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:auto; max-height:2.5em; }
  .missionRewardRow { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .missionReward { display:inline-flex; align-items:center; min-height:30px; border-radius:999px; padding:7px 10px; color:#06245c; background:linear-gradient(180deg,#fff7ad,#ffd44f); font-weight:1000; font-size:.78rem; box-shadow:inset 0 2px 0 rgba(255,255,255,.56); }
  .missionReward--spid { color:#4c1d95; background:linear-gradient(180deg,#f5d0fe,#c4b5fd); }
  .missionReward--ticket { color:#7c2d12; background:linear-gradient(180deg,#ffedd5,#fdba74); }
  .missionProgressWrap { position:relative; z-index:1; margin-top:10px; padding:10px 11px; border-radius:18px; background:rgba(4,23,77,.26); border:1px solid rgba(255,255,255,.14); }
  .missionCard.ready .missionProgressWrap { background:rgba(5,47,36,.22); border-color:rgba(236,253,245,.18); }
  .missionCard.claimed .missionProgressWrap { background:rgba(30,41,59,.28); border-color:rgba(226,232,240,.14); }
  .missionProgressMeta { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#fff; font-size:.74rem; font-weight:1000; margin-bottom:6px; }
  .missionProgressMeta > span:first-child { color:#fff3a6; text-shadow:0 1px 2px rgba(2,12,46,.72); opacity:1; }
  .missionBonusCard--daily .missionProgressMeta > span:first-child { color:#082f49 !important; font-size:.8rem; font-weight:1000; text-shadow:none !important; opacity:1 !important; }
  .missionProgressMeta [data-role="mission-progress-value"],
  .missionProgressMeta [data-role="bonus-progress-value"] { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border-radius:999px; color:#082f49; background:linear-gradient(180deg,#fffef2,#fde68a); border:1px solid rgba(255,255,255,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 2px 5px rgba(2,12,46,.22); text-shadow:none; }
  .missionProgressBar { height:13px; border-radius:999px; background:rgba(2,12,46,.48); overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.18); }
  .missionProgressFill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#7dd3fc,#38bdf8); box-shadow:0 0 14px rgba(125,211,252,.38); }
  .missionCard.ready .missionProgressFill,
  .missionBonusCard.ready .missionProgressFill { background:linear-gradient(90deg,#fde68a,#34d399); box-shadow:0 0 14px rgba(52,211,153,.34); }
  .missionCard.claimed .missionProgressFill,
  .missionBonusCard.claimed .missionProgressFill { background:linear-gradient(90deg,#cbd5e1,#94a3b8); box-shadow:none; }
  .missionAction { position:relative; z-index:1; margin-top:auto; padding-top:12px; }
  .missionAction:before { content:""; position:absolute; top:2px; left:0; right:0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0)); }
  .missionAction form { margin:0; }
  .missionBtn { width:100%; border:1px solid transparent; border-radius:16px; padding:11px 13px; cursor:pointer; color:#06245c; font-size:.84rem; font-weight:1000; background:linear-gradient(180deg,#e0fbff,#67e8f9 58%,#22d3ee); box-shadow:inset 0 3px 0 rgba(255,255,255,.64), 0 6px 0 rgba(7,89,133,.54); transition:transform .15s ease, filter .15s ease, background .15s ease; }
  .missionBtn--link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
  .missionBtn:hover { transform:translateY(-2px); filter:brightness(1.04); }
  .missionBtn:disabled { cursor:not-allowed; transform:none; opacity:1; }
  .missionCard:not(.ready):not(.claimed) .missionBtn:disabled { color:#f8fbff; background:linear-gradient(180deg,#2563eb,#1d4ed8 58%,#1e3a8a); border-color:rgba(125,211,252,.28); box-shadow:inset 0 2px 0 rgba(255,255,255,.12); }
  .missionCard.ready .missionBtn { color:#5b3000; background:linear-gradient(180deg,#fff5b8,#ffd557 58%,#f59e0b); border-color:rgba(255,244,186,.58); box-shadow:inset 0 3px 0 rgba(255,255,255,.62), 0 6px 0 rgba(146,83,14,.42); }
  .missionCard.claimed .missionBtn:disabled { color:#e2e8f0; background:rgba(255,255,255,.12); border-color:rgba(226,232,240,.18); box-shadow:inset 0 2px 0 rgba(255,255,255,.10); }
  .missionReviewModal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(5,10,32,.66); backdrop-filter:blur(8px); }
  .missionReviewModal[hidden] { display:none; }
  .missionReviewDialog { width:min(100%,420px); padding:22px 20px 18px; border-radius:28px; background:linear-gradient(180deg,#fffde7 0%,#fff7c2 100%); border:1px solid rgba(245,158,11,.32); box-shadow:0 20px 46px rgba(15,23,42,.32); color:#5b3000; }
  .missionReviewDialog h3 { margin:0 0 10px; font-size:1.2rem; line-height:1.1; }
  .missionReviewDialog p { margin:0 0 16px; font-size:.95rem; line-height:1.5; }
  .missionReviewDialog .missionBtn { margin-top:4px; }
  .missionBonusCard { position:relative; overflow:visible; margin-top:15px; border-radius:24px; padding:18px; background:linear-gradient(135deg,#fff7ad,#fdba74 62%,#fb7185); color:#5c2b06; border:2px solid rgba(255,255,255,.56); box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 10px 0 rgba(7,89,133,.28); }
  .missionBonusCard.weekly { background:linear-gradient(135deg,#d1fae5,#93c5fd 62%,#c4b5fd); color:#0f2f5f; }
  .missionBonusCard.ready { background:linear-gradient(135deg,#fef3c7,#86efac 58%,#22c55e); border-color:rgba(236,253,245,.82); box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 10px 0 rgba(21,128,61,.24); }
  .missionBonusCard.claimed { background:linear-gradient(135deg,#cbd5e1,#94a3b8 58%,#475569); color:#eff6ff; border-color:rgba(226,232,240,.28); box-shadow:inset 0 3px 0 rgba(255,255,255,.20),0 10px 0 rgba(51,65,85,.28); }
  .missionBonusCard--daily { isolation:isolate; z-index:1; padding:17px 18px 16px; border-radius:22px; background:linear-gradient(135deg,#fff9d7 0%,#ffe377 48%,#ffb04f 100%); border-color:rgba(255,250,214,.92); box-shadow:inset 0 2px 0 rgba(255,255,255,.72),0 8px 0 rgba(180,83,9,.30),0 18px 30px rgba(69,26,3,.16); }
  .missionBonusCard--daily.ready { background:linear-gradient(135deg,#ecfccb 0%,#86efac 52%,#22c55e 100%); border-color:rgba(240,253,244,.92); }
  .missionBonusCard--daily.claimed { background:linear-gradient(135deg,#dbe4ef 0%,#94a3b8 54%,#475569 100%); border-color:rgba(226,232,240,.44); }
  .missionBonusCard--daily:before { content:""; position:absolute; z-index:-1; inset:1px 1px auto; height:58%; border-radius:20px 20px 44% 44%; background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0)); pointer-events:none; }
  .missionBonusCard--daily:hover,
  .missionBonusCard--daily.progress-info-open { z-index:2147483000; }
  .missionBonusTop { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap; }
  .missionBonusCard--daily .missionBonusTop { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:start; }
  .missionBonusTitle { margin:0; font-size:1.25rem; line-height:1.05; font-weight:1000; }
  .missionBonusCard--daily .missionBonusTitle { font-size:1.28rem; letter-spacing:-.018em; color:#512407; }
  .missionBonusText { margin:5px 0 0; max-width:560px; font-size:.84rem; line-height:1.26; font-weight:900; color:rgba(92,43,6,.82); }
  .missionBonusCard--daily .missionBonusText { max-width:46ch; margin-top:6px; color:rgba(81,36,7,.72); }
  .missionBonusCard.weekly .missionBonusText { color:rgba(15,47,95,.82); }
  .missionBonusCard.ready .missionBonusText { color:rgba(20,83,45,.88); }
  .missionBonusCard.claimed .missionBonusText { color:rgba(241,245,249,.84); }
  .missionBonusRewards { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; }
  .missionBonusCard--daily .missionBonusRewards { display:grid; grid-template-columns:minmax(150px,210px); gap:8px; justify-content:end; align-items:start; min-width:170px; }
  .missionBonusCard--daily .missionBonusState { justify-self:end; }
  .missionTicketProgressSummary { width:100%; min-width:0; }
  .missionTicketProgressHead { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.72rem; line-height:1; font-weight:1000; }
  .missionTicketProgressHead span { white-space:nowrap; }
  .missionTicketProgressHead strong { font-size:.82rem; letter-spacing:.01em; }
  .missionTicketProgressBar { height:8px; margin-top:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.42); box-shadow:inset 0 1px 2px rgba(92,43,6,.16); }
  .missionTicketProgressBar > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#38bdf8); box-shadow:0 0 10px rgba(37,99,235,.28); transition:width .25s ease; }
  .missionBonusCard.ready .missionTicketProgressBar > span { background:linear-gradient(90deg,#16a34a,#86efac); }
  .missionBonusCard.claimed .missionTicketProgressBar > span { background:linear-gradient(90deg,#cbd5e1,#f8fafc); box-shadow:none; }
  .missionBonusChance { display:grid; place-items:center; width:86px; min-height:66px; border-radius:18px; background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.56); box-shadow:inset 0 2px 0 rgba(255,255,255,.45); text-align:center; font-weight:1000; }
  .missionBonusChance strong { font-size:1.25rem; line-height:1; }
  .missionBonusChance span { font-size:.68rem; text-transform:uppercase; }
  .missionProgressRewardInfo { position:relative; z-index:12; }
  .missionProgressInfoTrigger { position:relative; z-index:2147483001; display:inline-flex; align-items:center; gap:6px; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:help; text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent; }
  .missionProgressInfoTrigger:hover { filter:brightness(1.04); }
  .missionProgressInfoIcon { display:grid; place-items:center; width:18px; height:18px; border-radius:999px; background:rgba(30,64,175,.13); border:1px solid rgba(30,64,175,.22); color:#1e3a8a; font-size:.68rem; line-height:1; font-weight:1000; }
  .missionProgressTooltip { position:absolute; z-index:2147483647; right:0; bottom:calc(100% + 10px); width:min(270px,calc(100vw - 36px)); padding:11px 13px; border-radius:13px; color:#eff6ff; background:#172554; border:1px solid rgba(191,219,254,.34); box-shadow:0 12px 28px rgba(15,23,42,.34); font-size:.75rem; font-weight:850; line-height:1.35; white-space:normal; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(5px); transition:opacity .15s ease,transform .15s ease,visibility .15s ease; }
  .missionProgressTooltip:after { content:""; position:absolute; top:100%; right:11px; border:7px solid transparent; border-top-color:#172554; }
  .missionProgressInfoTrigger:hover .missionProgressTooltip,
  .missionProgressInfoTrigger.is-open .missionProgressTooltip { opacity:1; visibility:visible; transform:translateY(0); }
  .missionBonusState { display:inline-flex; align-items:center; gap:7px; min-height:32px; border-radius:999px; padding:7px 11px; background:rgba(255,255,255,.36); border:1px solid rgba(255,255,255,.48); font-size:.7rem; font-weight:1000; text-transform:uppercase; letter-spacing:.025em; }
  .missionBonusState:empty { display:none; }
  .missionBonusState:before { content:""; width:7px; height:7px; border-radius:999px; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.20); }
  .missionBonusCard.ready .missionBonusState { color:#166534; background:rgba(255,255,255,.48); }
  .missionBonusCard.claimed .missionBonusState { color:#e2e8f0; background:rgba(15,23,42,.18); border-color:rgba(226,232,240,.18); }
  .missionBonusAction { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; margin-top:12px; }
  .missionBonusCard--daily .missionBonusAction { align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid rgba(120,53,15,.16); }
  .missionBonusProgressLine { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; min-width:0; }
  .missionBonusAction .missionProgressWrap { margin-top:0; }
  .missionBonusCard--daily .missionBonusAction .missionProgressWrap { min-width:0; padding:9px 10px; background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.44); box-shadow:none; }
  .missionBonusEarnStack { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; min-width:max-content; font-size:.72rem; line-height:1.05; font-weight:1000; }
  .missionBonusEarnInfo { font-size:.72rem; font-weight:1000; white-space:nowrap; }
  .missionBonusEarnInfo .missionProgressInfoIcon { width:16px; height:16px; font-size:.62rem; }
  .streakMetaGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
  .streakMetaCard { padding:12px; border-radius:18px; background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
  .streakMetaLabel { display:block; font-size:.7rem; font-weight:1000; text-transform:uppercase; letter-spacing:.04em; opacity:.78; }
  .streakMetaValue { display:block; margin-top:5px; font-size:1.1rem; font-weight:1000; line-height:1.1; }
  .streakMetaText { display:block; margin-top:4px; font-size:.74rem; font-weight:850; line-height:1.25; opacity:.9; }
  .streakRankPill { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:8px 12px; background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.42); font-size:.76rem; font-weight:1000; }
  .streakRankDot { width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 4px rgba(255,255,255,.14); }
  .rewardEmptyState { border-radius:22px; padding:22px; background:rgba(255,255,255,.15); color:#fff; font-weight:900; }
  @media (max-width: 780px) {
    .rewardArcadeWrap { margin:0 -10px; border-radius:20px; }
    .rewardHeroBanner { align-items:flex-start; padding:18px; }
    .rewardHeroDog { width:110px; }
    .missionHeroBanner .rewardHeroDog { width:140px; }
    .missionLegend { grid-template-columns:1fr; gap:9px; }
    .missionLegendItem { padding:11px 12px; border-radius:16px; }
    .rewardCatalogGrid, .missionGrid { grid-template-columns:1fr; }
    .rewardCatalogGrid { gap:9px; }
    .rewardGiftCard { min-height:0; border-radius:18px; padding:10px; box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(164,82,10,.20), 0 5px 0 rgba(88,24,153,.44), 0 10px 18px rgba(31,6,86,.18); }
    .rewardGiftCard:before { inset:9px 10px auto 10px; height:64px; border-radius:14px; }
    .rewardGiftMedia { height:64px; margin-bottom:8px; }
    .rewardGiftMedia img { max-height:56px; }
    .rewardGiftPlaceholder { font-size:2rem; }
    .rewardGiftBadge { padding:4px 7px; font-size:.62rem; }
    .rewardGiftTitle { margin:8px 0 3px; font-size:1rem; line-height:1.08; }
    .rewardGiftDesc { min-height:0; font-size:.74rem; line-height:1.18; }
    .rewardGiftFooter { padding-top:8px; gap:7px; }
    .rewardGiftCost { padding:5px 8px; font-size:.68rem; }
    .rewardGiftCta { border-radius:13px; padding:8px 10px; font-size:.74rem; box-shadow:inset 0 3px 0 rgba(255,255,255,.62), 0 3px 0 rgba(143,80,8,.40); }
    .rewardCodeVault { margin:0 0 14px; padding:14px; grid-template-columns:1fr; justify-items:stretch; border-radius:22px; }
    .rewardCodeDockLead { justify-content:space-between; }
    .rewardCodeDockMeta { justify-items:start; }
    .rewardCodeRecentBadges { justify-content:flex-start; }
    .rewardCodeGuestDock { justify-content:flex-start; }
    .rewardCodeInputRow { grid-template-columns:1fr; }
    .rewardCodeSubmit { width:100%; }
    .missionGrid { gap:9px; }
    .missionCard { min-height:0; border-radius:18px; padding:10px 10px 12px 14px; box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 7px 14px rgba(8,47,73,.16); }
    .missionCard:before { background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 46%); }
    .missionCard:after { width:6px; }
    .missionTop { gap:9px; }
    .missionIcon { width:34px; height:34px; border-radius:12px; font-size:.76rem; box-shadow:inset 0 2px 0 rgba(255,255,255,.62), 0 4px 0 rgba(7,89,133,.22); }
    .missionState { padding:6px 9px; font-size:.68rem; white-space:nowrap; }
    .missionTitle { margin:8px 0 3px; font-size:.98rem; line-height:1.1; }
    .missionDesc { font-size:.76rem; line-height:1.18; min-height:0; max-height:2.36em; }
    .missionRewardRow { gap:5px; margin-top:8px; }
    .missionReward { min-height:24px; padding:5px 8px; font-size:.72rem; white-space:nowrap; }
    .missionProgressWrap { margin-top:8px; padding:9px 10px; border-radius:16px; }
    .missionProgressMeta { font-size:.72rem; margin-bottom:5px; }
    .missionProgressBar { height:9px; }
    .missionAction { padding-top:8px; }
    .missionBtn { border-radius:14px; padding:9px 11px; font-size:.8rem; box-shadow:inset 0 3px 0 rgba(255,255,255,.64), 0 4px 0 rgba(7,89,133,.50); }
    .rewardTabBtn { flex:1; padding:14px 12px; }
    .missionBonusAction { grid-template-columns:1fr; }
    .missionBonusCard--daily { padding:14px; }
    .missionBonusCard--daily .missionBonusTop { grid-template-columns:1fr auto; gap:10px; }
    .missionBonusCard--daily .missionBonusRewards { grid-template-columns:minmax(130px,170px); justify-content:end; min-width:0; }
    .missionBonusCard--daily .missionBonusState { justify-self:end; }
    .missionTicketProgressHead { font-size:.66rem; }
    .missionTicketProgressHead strong { font-size:.74rem; }
    .missionBonusProgressLine { grid-template-columns:minmax(0,1fr) auto; gap:9px; }
    .missionBonusEarnStack,
    .missionBonusEarnInfo { font-size:.66rem; }
    .streakMetaGrid { grid-template-columns:1fr; }
  }
  @media (max-width: 480px) {
    .missionProgressTooltip { position:fixed; left:16px; right:16px; bottom:18px; width:auto; max-width:none; z-index:2147483647; }
    .missionProgressTooltip:after { display:none; }
    .missionBonusCard--daily .missionBonusTop { grid-template-columns:1fr; }
    .missionBonusCard--daily .missionBonusRewards { width:100%; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
    .missionTicketProgressSummary { grid-column:1; }
    .missionBonusCard--daily .missionBonusState { grid-column:2; grid-row:1; }
    .missionBonusProgressLine { grid-template-columns:minmax(0,1fr) auto; }
    .missionBonusEarnStack { font-size:.62rem; }
    .missionBonusEarnInfo { font-size:.62rem; }
  }
  .missionGuestTeaser { display:grid; gap:14px; padding:18px; border-radius:24px; background:linear-gradient(180deg,rgba(10,27,88,.44),rgba(8,22,70,.26)); border:1px solid rgba(191,233,255,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 28px rgba(8,47,73,.18); color:#fff; }
  .missionGuestTeaser h4 { margin:0; font-size:1.18rem; line-height:1.08; font-weight:1000; }
  .missionGuestTeaser p { margin:0; color:rgba(255,255,255,.88); font-weight:850; line-height:1.4; }
  .missionGuestTeaserActions { display:flex; gap:10px; flex-wrap:wrap; }
  .missionGuestTeaserActions .missionBtn { width:auto; min-width:180px; }

/* Images hero Reward et Mission independantes sur tablette/desktop : a droite dans le rectangle,
   adaptees a la hauteur du bloc, sans toucher au rendu mobile existant. */
@media (min-width:781px){
  .page-rewards .rewardHeroBanner{
    position:relative;
    overflow:hidden;
    min-height:clamp(170px,15vw,210px);
    padding-right:clamp(185px,27vw,320px);
  }
  .page-rewards .rewardHeroBanner > div{
    position:relative;
    z-index:3;
    max-width:min(100%,720px);
  }
  .page-rewards .rewardHeroDog{
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    bottom:0;
    width:auto;
    height:100%;
    max-width:clamp(185px,27vw,320px);
    max-height:100%;
    margin:0;
    object-fit:contain;
    object-position:right center;
    flex:none;
    transform:none;
    pointer-events:none;
  }
  .page-rewards .missionHeroBanner{
    padding-right:clamp(215px,30vw,360px);
  }
  .page-rewards .missionHeroBanner .rewardHeroDog{
    max-width:clamp(215px,30vw,360px);
    transform:none;
  }
}

@media (min-width:1180px){
  .page-rewards .rewardHeroBanner{
    padding-right:clamp(230px,28vw,380px);
  }
  .page-rewards .rewardHeroDog{
    max-width:clamp(230px,28vw,380px);
  }
  .page-rewards .missionHeroBanner{
    padding-right:clamp(255px,31vw,420px);
  }
  .page-rewards .missionHeroBanner .rewardHeroDog{
    max-width:clamp(255px,31vw,420px);
  }
}

/* Mission : respiration autour de la mascotte desktop/tablette.
   Le mobile reste gere par les regles existantes max-width:780px. */
@media (min-width:781px){
  .page-rewards .missionHeroBanner{
    padding-right:clamp(235px,31vw,390px);
  }

  .page-rewards .missionHeroBanner .rewardHeroDog{
    top:clamp(10px,1.2vw,18px);
    right:clamp(12px,1.4vw,22px);
    bottom:clamp(10px,1.2vw,18px);
    height:auto;
    max-height:calc(100% - clamp(20px,2.4vw,36px));
    max-width:clamp(205px,28vw,350px);
    object-fit:contain;
    object-position:right center;
  }
}

@media (min-width:1180px){
  .page-rewards .missionHeroBanner{
    padding-right:clamp(270px,33vw,450px);
  }

  .page-rewards .missionHeroBanner .rewardHeroDog{
    top:clamp(12px,1.15vw,22px);
    right:clamp(16px,1.5vw,28px);
    bottom:clamp(12px,1.15vw,22px);
    max-height:calc(100% - clamp(24px,2.3vw,44px));
    max-width:clamp(240px,30vw,405px);
  }
}


  .missionBonusRewards,
  .missionProgressRewardInfo {
    overflow:visible;
  }

  .missionProgressRewardInfo {
    position:relative;
  }