/* Approved rewards concept 399. Live HTML/text; artwork crops contain no labels. */
html.island-ui #store-panel .rewards-store{display:block;container-type:inline-size;color:#effcff;letter-spacing:0;text-transform:none;font-family:Arial,Helvetica,sans-serif;padding:4px 2px 14px;--reward-border:#318b9e;--reward-gold:#ffde60}
html.island-ui #store-panel .rewards-store *{box-sizing:border-box;min-width:0}
html.island-ui #store-panel .rewards-store h2,html.island-ui #store-panel .rewards-store h3,html.island-ui #store-panel .rewards-store h4,html.island-ui #store-panel .rewards-store p{margin:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;color:inherit;line-height:1.22;text-shadow:none}
html.island-ui #store-panel .rewards-store h2{font-size:clamp(22px,2.8vw,32px);font-weight:900}
html.island-ui #store-panel .rewards-store h3{font-size:21px;font-weight:850}
html.island-ui #store-panel .rewards-store h4{font-size:19px;font-weight:800}
html.island-ui #store-panel .rewards-store p{font-size:15px;color:#c7ecf4;line-height:1.4}
html.island-ui #store-panel .rewards-store small{font-size:13px;line-height:1.4;letter-spacing:0}
html.island-ui #store-panel .rewards-intro{margin-bottom:14px}
html.island-ui #store-panel .rewards-intro p{margin-top:5px;font-size:17px}
html.island-ui #store-panel .reward-feedback{font-size:15px;line-height:1.5;border-radius:10px;color:#ffe997;background:#244552}
html.island-ui #store-panel .reward-feedback:not(:empty){padding:10px 14px;margin-bottom:12px;border:1px solid #d4ae4b}
html.island-ui #store-panel .reward-feedback.success{color:#86ffdc;border-color:#4ac9a4}
html.island-ui #store-panel .reward-heroes{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
html.island-ui #store-panel .reward-heroes.solo{grid-template-columns:minmax(0,1fr)}
html.island-ui #store-panel .reward-heroes.solo .reward-hero.daily{width:100%}
html.island-ui #store-panel .reward-hero,html.island-ui #store-panel .reward-mission,html.island-ui #store-panel .reward-feature{border:1px solid var(--reward-border);border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 40% 30%,#0a4970,#003749 60%,#00242f);box-shadow:inset 0 1px 0 #bcfaff20,0 5px 10px #00192440;position:relative}
html.island-ui #store-panel .reward-hero.daily{display:grid;grid-template-columns:44% 56%;align-items:center;min-height:300px}
html.island-ui #store-panel .reward-gift-scene{position:relative;align-self:stretch;display:grid;align-items:center;overflow:hidden}
html.island-ui #store-panel .reward-art{background-image:url('./assets/ui/store/rewards/approved-rewards.jpg');background-repeat:no-repeat;aspect-ratio:var(--art-ratio);pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent)}
html.island-ui #store-panel .art-gift{width:100%;mask-image:radial-gradient(ellipse at 49% 53%,#000 47%,transparent 75%)}
html.island-ui #store-panel .reward-hero-copy{display:flex;flex-direction:column;gap:14px;padding:22px 18px 22px 8px;position:relative;z-index:1}
html.island-ui #store-panel .reward-hero-copy h3{font-size:clamp(22px,2.4vw,29px);line-height:1.12}
html.island-ui #store-panel .reward-amount{display:block;color:var(--reward-gold);font-size:26px;line-height:1.25;font-weight:900;white-space:nowrap}
html.island-ui #store-panel .daily .reward-amount{font-size:clamp(30px,4vw,48px)}
html.island-ui #store-panel .reward-amount small{font-size:.55em;font-weight:700}
html.island-ui #store-panel .reward-amount>span{font-size:.7em;color:#ffe17b;text-shadow:0 0 10px #ffb60066}
html.island-ui #store-panel .reward-countdown{font-size:28px;color:#ffe38a}
html.island-ui #store-panel .rewards-store .reward-button{display:flex;align-items:center;justify-content:center;gap:6px;position:relative;width:100%;height:auto;min-height:48px;padding:12px 10px;border:1px solid #fff0ac;border-radius:9px;background:linear-gradient(135deg,#ffeb83,#ffd74d);color:#092d3c;box-shadow:inset 0 2px 0 #fff9,0 3px 0 #a77919;white-space:normal;font-size:15px;font-weight:900;line-height:1.25;letter-spacing:.15px;text-shadow:none;transition:transform .16s,filter .16s;cursor:pointer;overflow-wrap:break-word;touch-action:manipulation}
html.island-ui #store-panel .rewards-store .reward-button:not(:disabled):active{transform:translateY(2px);filter:brightness(1.06)}
html.island-ui #store-panel .rewards-store .reward-button:focus-visible{outline:3px solid #a2ffe6;outline-offset:3px}
html.island-ui #store-panel .rewards-store .reward-button:disabled{opacity:1;box-shadow:none;background:#103d4c;border-color:#507681;color:#b7d0d7;cursor:default}
html.island-ui #store-panel .reward-hero.video{display:flex;flex-direction:column;text-align:center;padding:14px 18px;gap:5px}
html.island-ui #store-panel .reward-optional{align-self:center;border:1px solid #32889f;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:700;letter-spacing:.3px;color:#c9f0fa}
html.island-ui #store-panel .video h3{font-size:24px;margin:4px 0}
html.island-ui #store-panel .art-video{width:100%;max-width:340px;margin:auto}
html.island-ui #store-panel .video .reward-amount{font-size:24px}
html.island-ui #store-panel .video .reward-video-status{color:#c1e8f0;font-size:12px;min-height:17px}
html.island-ui #store-panel .video .reward-button{margin-top:6px}
html.island-ui #store-panel .reward-section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:20px 0 12px}
html.island-ui #store-panel .reward-section-heading p{margin-top:3px}
html.island-ui #store-panel .reward-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;padding:0;margin:0;list-style:none}
html.island-ui #store-panel .reward-day{padding:10px 5px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--reward-border);border-radius:11px;background:linear-gradient(#034359,#012c3a);text-align:center}
html.island-ui #store-panel .reward-day>b{font-size:14px}
html.island-ui #store-panel .reward-day>strong{font-size:20px;color:#ffe06a;white-space:nowrap}
html.island-ui #store-panel .reward-day>strong small{font-size:11px}
html.island-ui #store-panel .reward-day.ready{border-color:#ffe889;box-shadow:inset 0 0 24px #ffcd2430,0 0 10px #ffe05232}
html.island-ui #store-panel .reward-day-art{display:flex;align-items:flex-end;justify-content:center;height:43px;position:relative;gap:2px}
html.island-ui #store-panel .reward-day-art img{width:48px;height:48px;object-fit:contain}
html.island-ui #store-panel .reward-day-art i{display:block;width:17px;height:19px;border:1px solid #ffe697;border-radius:50% / 20%;background:repeating-linear-gradient(to top,#dc9005 0 3px,#ffd94f 3px 6px);box-shadow:inset 3px 0 0 #ffe789,0 3px 5px #0005;transform:translateY(-4px)}
html.island-ui #store-panel .reward-day-art i:nth-child(2){height:29px;transform:translateY(-6px)}
html.island-ui #store-panel .reward-day:nth-child(n+4) .reward-day-art i:first-child{height:27px}
html.island-ui #store-panel .reward-day-state{display:block;min-height:24px;font-size:10px;font-weight:800;padding:5px 3px;border-radius:5px;width:100%;color:#b8e8f2}
html.island-ui #store-panel .ready .reward-day-state{color:#082e3b;background:#ffdf66}
html.island-ui #store-panel .collected .reward-day-state{color:#73f4ce;background:#0a524c}
html.island-ui #store-panel .reward-missions,html.island-ui #store-panel .reward-collection{margin-top:20px;border-top:1px solid #3995a94d}
html.island-ui #store-panel .reward-counter{border:1px solid #378294;padding:8px 10px;border-radius:8px;font-size:13px;color:#d2f2f8;white-space:normal;line-height:1.3;background:#002b3b}
html.island-ui #store-panel .reward-collection-counts{display:flex;gap:8px;flex-wrap:wrap}
html.island-ui #store-panel .reward-mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html.island-ui #store-panel .reward-mission{display:flex;flex-direction:column}
html.island-ui #store-panel .reward-mission .reward-art{width:100%}
html.island-ui #store-panel .reward-mission-copy{display:flex;flex-direction:column;gap:8px;padding:12px 14px 16px;flex:1}
html.island-ui #store-panel .reward-mission-copy p{min-height:42px;font-size:14px}
html.island-ui #store-panel .reward-mission-copy .reward-button{margin-top:auto}
html.island-ui #store-panel .reward-progress{height:18px;border-radius:12px;border:1px solid #4ad8d3;background:#013749;overflow:hidden;position:relative;margin:2px 0}
html.island-ui #store-panel .reward-progress i{display:block;height:100%;background:linear-gradient(90deg,#23bfa1,#69f8ca)}
html.island-ui #store-panel .reward-progress b{position:absolute;inset:0;text-align:center;font-size:11px;line-height:16px;color:#fff;text-shadow:0 1px 2px #001820,0 0 3px #001820}
html.island-ui #store-panel .reward-mission .reward-amount{font-size:22px;margin:2px 0}
html.island-ui #store-panel .reward-mission.claimed .reward-button{background:#287c70;border-color:#60ba9e;color:#e4fff6}
html.island-ui #store-panel .reward-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html.island-ui #store-panel .reward-feature{display:grid;grid-template-columns:40% 60%;align-items:center;min-height:235px}
html.island-ui #store-panel .reward-feature .reward-art{width:100%;mask-image:radial-gradient(ellipse at 50% 48%,#000 45%,transparent 74%)}
html.island-ui #store-panel .reward-feature>div:last-child{padding:18px 16px 18px 4px;display:flex;flex-direction:column;gap:10px;align-self:stretch;justify-content:center}
html.island-ui #store-panel .reward-feature h3{font-size:21px}
html.island-ui #store-panel .reward-feature small{color:#c2eaf0}
html.island-ui #store-panel .reward-feature .reward-button{margin-top:auto;font-size:13px}
html.island-ui #store-panel .reward-hearts{color:#ff899b;font-size:23px;letter-spacing:2px;white-space:nowrap}
html.island-ui #store-panel .reward-sparks{position:absolute;inset:0;pointer-events:none}
html.island-ui #store-panel .reward-sparks i{position:absolute;width:4px;height:4px;background:#ffe998;left:var(--x);top:var(--y);transform:rotate(45deg);box-shadow:0 0 7px #ffd047;animation:reward-glint 4s var(--delay) infinite ease-in-out}
html.island-ui #store-panel .rewards-store[data-fx-paused=true] .reward-sparks i,html.island-ui #store-panel .reward-hero[data-paused=true] .reward-sparks i{animation-play-state:paused}
@keyframes reward-glint{0%,100%{opacity:.1;transform:translateY(6px) rotate(45deg) scale(.5)}45%{opacity:.9;transform:translateY(-8px) rotate(45deg) scale(1)}}
@container (max-width:760px){
 html.island-ui #store-panel .reward-heroes{grid-template-columns:1fr 1fr}
 html.island-ui #store-panel .reward-hero.daily{display:flex;flex-direction:column;min-height:0}
 html.island-ui #store-panel .reward-gift-scene{height:140px;align-self:center;width:190px;flex:none}
 html.island-ui #store-panel .reward-hero-copy{padding:0 16px 18px;align-items:center;text-align:center;flex:1;gap:10px;width:100%}
 html.island-ui #store-panel .reward-hero-copy h3{font-size:22px}
 html.island-ui #store-panel .daily .reward-amount{font-size:32px}
 html.island-ui #store-panel .reward-hero-copy .reward-button{margin-top:auto}
 html.island-ui #store-panel .reward-hero.video{justify-content:center;padding:16px}
 html.island-ui #store-panel .art-video{margin:14px auto}
 html.island-ui #store-panel .reward-day>strong small{display:block}
 html.island-ui #store-panel .reward-day-art i{width:13px}
 html.island-ui #store-panel .reward-days{gap:5px}
 html.island-ui #store-panel .reward-feature-grid{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-feature{grid-template-columns:32% 68%;min-height:195px}
 html.island-ui #store-panel .reward-feature .reward-art{width:100%;max-width:200px;justify-self:center}
 html.island-ui #store-panel .reward-mission-copy{padding:10px}
 html.island-ui #store-panel .reward-mission-copy h4{font-size:16px}
 html.island-ui #store-panel .reward-mission-copy .reward-button{font-size:13px}
}
@container (max-width:600px){
 html.island-ui #store-panel .reward-heroes{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-hero.daily{display:grid;grid-template-columns:38% 62%;min-height:225px}
 html.island-ui #store-panel .reward-gift-scene{width:100%;height:auto}
 html.island-ui #store-panel .reward-hero-copy{padding:16px 12px 16px 2px}
 html.island-ui #store-panel .reward-hero-copy h3{font-size:20px}
 html.island-ui #store-panel .reward-hero.video{display:grid;grid-template-columns:40% 60%;gap:8px;padding:16px 12px;align-items:center}
 html.island-ui #store-panel .video .reward-optional{grid-column:1/-1;justify-self:center}
 html.island-ui #store-panel .video h3,html.island-ui #store-panel .video .reward-amount,html.island-ui #store-panel .video .reward-video-left{grid-column:2}
 html.island-ui #store-panel .video .art-video{grid-column:1;grid-row:2/5;margin:0}
 html.island-ui #store-panel .video .reward-video-status,html.island-ui #store-panel .video .reward-button{grid-column:1/-1}
 html.island-ui #store-panel .reward-days{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 html.island-ui #store-panel .reward-day:last-child{grid-column:span 2}
 html.island-ui #store-panel .reward-day>strong small{display:inline}
 html.island-ui #store-panel .reward-day-state{font-size:11px}
 html.island-ui #store-panel .reward-mission-grid{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-mission{display:grid;grid-template-columns:34% 66%;align-items:center}
 html.island-ui #store-panel .reward-mission-copy{padding:14px}
 html.island-ui #store-panel .reward-mission-copy p{min-height:0}
 html.island-ui #store-panel .reward-mission-copy h4{font-size:19px}
 html.island-ui #store-panel .reward-feature{grid-template-columns:32% 68%}
 html.island-ui #store-panel .reward-feature h3{font-size:20px}
 html.island-ui #store-panel .reward-feature>div:last-child{padding-right:12px}
}
@media(prefers-reduced-motion:reduce){html.island-ui #store-panel .reward-sparks i{animation:none}html.island-ui #store-panel .rewards-store .reward-button{transition:none}}
/* iOS 15.6 does not support container queries. Keep its phone layout usable. */
@supports not (container-type:inline-size){
@media (max-width:920px){
 html.island-ui #store-panel .reward-heroes{grid-template-columns:1fr 1fr}
 html.island-ui #store-panel .reward-hero.daily{display:flex;flex-direction:column;min-height:0}
 html.island-ui #store-panel .reward-gift-scene{height:140px;align-self:center;width:190px;flex:none}
 html.island-ui #store-panel .reward-hero-copy{padding:0 16px 18px;align-items:center;text-align:center;flex:1;gap:10px;width:100%}
 html.island-ui #store-panel .reward-hero-copy h3{font-size:22px}
 html.island-ui #store-panel .daily .reward-amount{font-size:32px}
 html.island-ui #store-panel .reward-hero-copy .reward-button{margin-top:auto}
 html.island-ui #store-panel .reward-hero.video{justify-content:center;padding:16px}
 html.island-ui #store-panel .art-video{margin:14px auto}
 html.island-ui #store-panel .reward-day>strong small{display:block}
 html.island-ui #store-panel .reward-day-art i{width:13px}
 html.island-ui #store-panel .reward-days{gap:5px}
 html.island-ui #store-panel .reward-feature-grid{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-feature{grid-template-columns:32% 68%;min-height:195px}
 html.island-ui #store-panel .reward-feature .reward-art{width:100%;max-width:200px;justify-self:center}
 html.island-ui #store-panel .reward-mission-copy{padding:10px}
 html.island-ui #store-panel .reward-mission-copy h4{font-size:16px}
 html.island-ui #store-panel .reward-mission-copy .reward-button{font-size:13px}
}
@media (max-width:740px){
 html.island-ui #store-panel .reward-heroes{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-hero.daily{display:grid;grid-template-columns:38% 62%;min-height:225px}
 html.island-ui #store-panel .reward-gift-scene{width:100%;height:auto}
 html.island-ui #store-panel .reward-hero-copy{padding:16px 12px 16px 2px}
 html.island-ui #store-panel .reward-hero-copy h3{font-size:20px}
 html.island-ui #store-panel .reward-hero.video{display:grid;grid-template-columns:40% 60%;gap:8px;padding:16px 12px;align-items:center}
 html.island-ui #store-panel .video .reward-optional{grid-column:1/-1;justify-self:center}
 html.island-ui #store-panel .video h3,html.island-ui #store-panel .video .reward-amount,html.island-ui #store-panel .video .reward-video-left{grid-column:2}
 html.island-ui #store-panel .video .art-video{grid-column:1;grid-row:2/5;margin:0}
 html.island-ui #store-panel .video .reward-video-status,html.island-ui #store-panel .video .reward-button{grid-column:1/-1}
 html.island-ui #store-panel .reward-days{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 html.island-ui #store-panel .reward-day:last-child{grid-column:span 2}
 html.island-ui #store-panel .reward-day>strong small{display:inline}
 html.island-ui #store-panel .reward-day-state{font-size:11px}
 html.island-ui #store-panel .reward-mission-grid{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-mission{display:grid;grid-template-columns:34% 66%;align-items:center}
 html.island-ui #store-panel .reward-mission-copy{padding:14px}
 html.island-ui #store-panel .reward-mission-copy p{min-height:0}
 html.island-ui #store-panel .reward-mission-copy h4{font-size:19px}
 html.island-ui #store-panel .reward-feature{grid-template-columns:32% 68%}
 html.island-ui #store-panel .reward-feature h3{font-size:20px}
 html.island-ui #store-panel .reward-feature>div:last-child{padding-right:12px}
}
}
/* Landscape phones: the gift action must not sit below a tall poster. */
@media(max-height:500px){
 html.island-ui #store-panel .rewards-intro{margin-bottom:9px}
 html.island-ui #store-panel .rewards-intro h2{font-size:21px}
 html.island-ui #store-panel .rewards-intro p{display:none}
 html.island-ui #store-panel .reward-heroes{grid-template-columns:1fr}
 html.island-ui #store-panel .reward-hero.daily{display:grid;grid-template-columns:26% 74%;min-height:148px}
 html.island-ui #store-panel .reward-gift-scene{width:100%;height:144px;align-self:center}
 html.island-ui #store-panel .art-gift{width:100%;max-width:182px;justify-self:center}
 html.island-ui #store-panel .reward-hero-copy{display:grid;grid-template-columns:1fr auto;text-align:left;gap:6px 12px;padding:12px 16px 14px 4px;align-items:center}
 html.island-ui #store-panel .reward-hero-copy h3{font-size:20px;grid-column:1}
 html.island-ui #store-panel .reward-hero-copy p{font-size:13px;grid-column:1}
 html.island-ui #store-panel .daily .reward-amount,html.island-ui #store-panel .reward-countdown{font-size:30px;grid-column:2;grid-row:1/3}
 html.island-ui #store-panel .reward-hero-copy .reward-button{grid-column:1/-1;min-height:44px;padding:9px}
 html.island-ui #store-panel .reward-hero.video{display:grid;grid-template-columns:34% 66%;gap:6px 0;align-items:center;padding:14px 18px}
 html.island-ui #store-panel .video .reward-optional{grid-column:2;justify-self:center}
 html.island-ui #store-panel .video h3,html.island-ui #store-panel .video .reward-amount,html.island-ui #store-panel .video .reward-video-left,html.island-ui #store-panel .video .reward-video-status,html.island-ui #store-panel .video .reward-button{grid-column:2}
 html.island-ui #store-panel .video .art-video{grid-column:1;grid-row:1/7;margin:0;width:100%}
}