/* Reward counters belong to each limited package, separate from its pity rules. */
.r-reward-count{display:flex;justify-content:center;align-items:baseline;gap:12px;color:#d5c39d;font-size:18px;font-weight:400;line-height:1.55;letter-spacing:0;text-shadow:0 2px 4px #000;font-variant-numeric:tabular-nums}
.r-reward-count b{font-size:1.2em;font-weight:500;color:#f4d383;white-space:nowrap}
.r-reward-count small{font-size:14px;color:#bfb298;white-space:nowrap}
.r-reward-lobby{margin:12px auto 0;width:max-content;max-width:100%;padding:5px 20px;border-block:1px solid #d4b46b40;background:linear-gradient(90deg,transparent,#201a12bb 18% 82%,transparent)}
.r-game-scene.is-reward-scene .r-season-neutral>div{top:37%;bottom:17%}
.r-reward-stage{position:relative;flex:none;align-self:center;width:min(540px,94%);padding:6px 10px;margin:0 auto 6px;background:linear-gradient(90deg,transparent,#211a16ab 25% 75%,transparent);pointer-events:none}
.r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{display:grid;grid-template-columns:minmax(150px,340px) auto;justify-content:center;align-items:start;gap:24px;max-width:590px;margin-inline:auto}
.r-draw-actions.is-reward>div,.r-game-draw .r-draw-actions.is-reward>div{width:100%;max-width:none}
.r-reward-reset{display:flex;align-items:center;justify-content:center;gap:10px;align-self:start;min-height:60px;padding:8px 16px;margin-top:4px;background:linear-gradient(#30291cd9,#171d18e6);border:1px solid #9e8050;border-radius:3px;box-shadow:inset 0 0 0 2px #17191280,0 3px 9px #0006;color:#dfc596;font-size:15px;line-height:1.45;text-shadow:0 1px #000;white-space:nowrap}
.r-reward-reset svg{width:25px;height:25px;flex:none}.r-reward-reset:hover:not(:disabled){background:linear-gradient(#4a3b24,#25281d);border-color:#dbc18b;color:#ffe6b0}
.r-reward-reset:disabled{opacity:.45;cursor:default}.r-draw-button:disabled{cursor:default}
/* The officer keeps a fine frame; a soft expanding glow identifies gold reveals. */
.r-card-shell.rarity-5 .r-card-front{border:1px solid #d3b778;box-shadow:0 0 6px #d6a13c50,0 5px 15px #0009}
.r-card-shell.rarity-5.has-revealed .r-card-front{border-color:#dec17c;box-shadow:0 0 8px #d6a13c59,0 5px 15px #0009}
.r-gold-bloom{position:absolute;inset:-24% -38%;z-index:2;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,#fff2aecc 0%,#ffcf699e 28%,#e4a5356b 43%,#c875132b 57%,transparent 73%);mix-blend-mode:screen;opacity:0;transform-origin:center;animation:r-reward-gold-bloom 1s cubic-bezier(.14,.63,.32,1) both}
.r-gold-bloom:after{content:'';position:absolute;inset:12% -8%;border-radius:50%;background:radial-gradient(ellipse,#ffdf875c 15%,#ffcd4940 38%,transparent 67%);transform:scaleY(.7);pointer-events:none}
@keyframes r-reward-gold-bloom{0%{opacity:0;transform:scale(.62)}16%{opacity:.95;transform:scale(.88)}42%{opacity:.62;transform:scale(1.04)}100%{opacity:0;transform:scale(1.34)}}
@media(max-width:760px){
 .r-reward-count{font-size:15px;gap:9px;flex-wrap:wrap}.r-reward-count small{font-size:13px}
 .r-reward-lobby{padding:5px 8px;gap:4px 8px;margin-top:8px}.r-reward-lobby small{flex-basis:100%;font-size:12px}
 .r-game-scene.is-reward-scene .r-season-neutral>h2{top:30%}
 .r-game-scene.is-reward-scene .r-season-neutral>div{top:49%;bottom:21%}
 .r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{grid-template-columns:minmax(100px,1fr) auto;gap:10px;max-width:390px}
 .r-reward-reset{min-height:47px;font-size:13px;padding:6px 9px;gap:6px;margin-top:0}.r-reward-reset svg{width:21px;height:21px}
 .r-reward-stage{padding:10px 4px 4px}
}
@media(max-width:600px){
 .r-reward-lobby{font-size:14px;gap:3px 7px}.r-reward-lobby b{font-size:17px}
 .r-game-scene.is-reward-scene .r-season-neutral>h2{top:35%}
 .r-game-scene.is-reward-scene .r-season-neutral>div{top:52%;bottom:23%}
 .r-game-draw .r-draw-actions.is-reward{grid-template-columns:minmax(90px,1fr) 66px;gap:7px}
 .r-game-draw .r-reward-reset{padding:5px 3px;font-size:12px;gap:3px}.r-game-draw .r-reward-reset svg{width:16px;height:16px}
}
@media(max-height:550px) and (min-width:600px){
 .r-game-scene.is-reward-scene .r-season-neutral>h2{display:block;top:25%;font-size:17px;line-height:1.2}
 .r-reward-lobby{font-size:14px;line-height:1.25;margin-top:5px;padding:3px 12px}.r-reward-lobby small{flex-basis:auto;font-size:12px}
 .r-game-scene.is-reward-scene .r-season-neutral>div{top:41%;bottom:19%}
 .r-reward-stage{padding:3px 4px;line-height:1.3}.r-reward-stage .r-reward-count{font-size:14px;line-height:1.3}.r-reward-stage small{font-size:12px}
 .r-reward-reset{min-height:37px;font-size:12px;padding:4px 10px;gap:6px;margin-top:0}.r-reward-reset svg{width:20px;height:20px}
 .r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{grid-template-columns:minmax(130px,280px) auto;gap:16px}
}

/* Keep the recruitment button at the scene midpoint; reset occupies the right slot. */
.r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{--reward-side:132px;--reward-main:340px;--reward-gap:24px;grid-template-columns:var(--reward-side) minmax(0,var(--reward-main)) var(--reward-side);gap:var(--reward-gap);width:100%;max-width:100%;justify-content:center}
.r-draw-actions.is-reward>div,.r-game-draw .r-draw-actions.is-reward>div{grid-column:2;grid-row:1}
.r-draw-actions.is-reward>.r-reward-reset{grid-column:3;grid-row:1;width:100%;min-width:0}
@media(max-width:760px){.r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{--reward-side:96px;--reward-main:270px;--reward-gap:10px}}
@media(max-width:600px){
 .r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{--reward-side:66px;--reward-main:240px;--reward-gap:7px}
 .r-draw-actions.is-reward>.r-reward-reset{font-size:12px;padding:5px 3px;gap:3px}.r-draw-actions.is-reward>.r-reward-reset svg{width:16px;height:16px}
 .r-game-draw .r-draw-actions.is-reward .r-draw-button{font-size:clamp(16px,3.4vw,21px);letter-spacing:0}
}
@media(max-height:550px) and (min-width:600px){.r-draw-actions.is-reward,.r-game-draw .r-draw-actions.is-reward{--reward-side:110px;--reward-main:280px;--reward-gap:16px}}

@media(max-width:600px){.r-draw-actions.is-reward>.r-reward-reset svg{display:none}}
@media(max-width:420px){
 .r-game-draw .r-draw-actions.is-reward{--reward-side:44px;--reward-gap:6px}
 .r-game-draw .r-reward-reset svg{display:block;width:20px;height:20px}
 .r-game-draw .r-reward-reset span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}