/* Adapted from the supplied result-ui-prototype.html. */
body.reward-mode{background:#030a0d;overflow:hidden}
body.reward-mode #app{display:block;width:min(100%,440px);max-width:440px;height:100dvh;min-height:0;margin:0 auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden;overflow:clip;background:none;isolation:isolate}
body.reward-mode #app:before,body.reward-mode #app:after{display:none}
.reward-v2{color:var(--bone);font-family:var(--serif);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.reward-v2,.reward-v2 *{box-sizing:border-box}
.reward-v2 *{font-family:var(--serif)!important}
:where(.reward-v2) button{appearance:none;margin:0;border-radius:0;min-width:0;min-height:0;box-shadow:none;letter-spacing:normal;text-shadow:none;line-height:normal;touch-action:manipulation;color:inherit}
.rv-stage{position:relative;width:min(100%,440px);height:100%;margin:0 auto;overflow:hidden;overflow:clip;isolation:isolate;
  display:flex;flex-direction:column}
.rv-bg{position:absolute;inset:0;z-index:-3;background:var(--stratum-image) 50% 40%/cover;filter:saturate(.9)}
.rv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,12,16,.9) 0%,rgba(3,12,16,.55) 30%,rgba(3,12,16,.7) 55%,rgba(3,10,13,.96) 78%)}
.rv-rays{position:absolute;left:50%;top:22%;width:900px;height:900px;margin:-450px 0 0 -450px;z-index:-2;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(201,165,91,.13) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);transition:opacity 1s}
.rv-stage.rv-live .rv-rays{opacity:1;animation:rv-spin 60s linear infinite}
@keyframes rv-spin{to{transform:rotate(360deg)}}

/* ---------- run bar ---------- */
.rv-runbar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 12px 6px;font-size:12px;color:#b9c7c9}
.rv-runbar .rv-fl b{font-family:var(--num);font-style:italic;font-weight:800;font-size:20px;color:#fff}
.rv-runbar .rv-fl{white-space:nowrap}
.rv-runbar .rv-hp{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-runbar .rv-hp span{display:flex;justify-content:space-between;font-size:11px}
.rv-runbar .rv-hp span b{font-family:var(--num);font-style:italic;font-weight:800;font-size:15px;color:#fff}
.rv-runbar .rv-hp i{display:block;height:4px;background:#1b2f36;transform:skewX(-30deg);position:relative;overflow:hidden}
.rv-runbar .rv-hp i::after{content:"";position:absolute;inset:0 4% 0 0;background:linear-gradient(90deg,#3fb3c9,#b5f3ff)}
.rv-gold{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.rv-gold b{font-family:var(--num);font-style:italic;font-weight:800;font-size:22px;color:var(--gold);text-shadow:0 0 10px rgba(255,214,107,.35)}
.rv-gold small{font-family:var(--num);font-style:italic;font-size:12px;color:var(--gold)}
.rv-gold.rv-bump b{animation:rv-bump .25s}
@keyframes rv-bump{50%{transform:scale(1.18)}}

/* ---------- hero ---------- */
.rv-hero{position:relative;overflow:hidden;overflow:clip;height:clamp(132px,21vh,200px);padding:4px 12px 4px;display:flex;flex-direction:column;justify-content:center;flex:none}
.rv-vslab{position:relative;display:inline-block;margin-top:6px;padding:2px 30px 4px 14px;background:var(--bone);color:var(--ink);
  clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);transform:rotate(-5deg) translateX(-140%);transition:transform .45s cubic-bezier(.2,1.2,.3,1)}
.rv-vslab::before{content:"";position:absolute;inset:6px -6px -6px 10px;z-index:-1;background:var(--coral);clip-path:inherit}
.rv-vwrap{position:relative;display:inline-block}
.rv-vwrap::before{content:"";position:absolute;left:10px;top:12px;right:-8px;bottom:-6px;background:var(--coral);transform:rotate(-5deg) translateX(-140%);
  clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);transition:transform .45s .05s cubic-bezier(.2,1.2,.3,1)}
.rv-vslab b{display:block;font-family:var(--num);font-style:italic;font-weight:800;font-size:clamp(34px,5.4vh,44px);line-height:1;letter-spacing:.02em}
.rv-stage.rv-live .rv-vslab,.rv-stage.rv-live .rv-vwrap::before{transform:rotate(-5deg)}
.rv-tagline{margin:15px 0 0 4px;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);opacity:0;transition:opacity .4s .3s;display:flex;align-items:center;gap:8px}
.rv-tagline svg{width:70px;height:8px;color:var(--brass)}
.rv-stage.rv-live .rv-tagline{opacity:1}
.rv-foes{display:flex;gap:6px;margin:6px 0 0 4px}
.rv-foe{position:relative;width:40px;height:40px;background:rgba(6,20,26,.8);border:1px solid var(--brass-dim);overflow:hidden;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.rv-foe img{width:100%;height:100%;object-fit:contain;filter:grayscale(.2)}
.rv-foe::after{content:"";position:absolute;left:-10%;right:-10%;top:48%;height:3px;background:var(--coral);transform:rotate(-35deg) scaleX(0);box-shadow:0 0 8px var(--coral)}
.rv-foe.rv-slain::after{transform:rotate(-35deg) scaleX(1);transition:transform .18s ease-out}
.rv-foe.rv-slain img{filter:grayscale(1) brightness(.55);transition:filter .3s .15s}
.rv-foes .rv-meta{align-self:center;margin-left:4px;font-size:11px;color:#9fb3b8;line-height:1.35}
.rv-foes .rv-meta b{font-family:var(--num);font-style:italic;font-weight:800;font-size:16px;color:#fff}
.rv-fro{position:absolute;right:-8px;top:0;height:260%;width:auto;z-index:-1;opacity:0;transform:translateX(40px);transition:all .6s .15s cubic-bezier(.2,.9,.3,1);
  -webkit-mask:linear-gradient(to bottom,#000 32%,transparent 58%),linear-gradient(to right,transparent 0,#000 28%);-webkit-mask-composite:source-in;mask:linear-gradient(to bottom,#000 32%,transparent 58%),linear-gradient(to right,transparent 0,#000 28%);mask-composite:intersect;pointer-events:none}
.rv-stage.rv-live .rv-fro{opacity:1;transform:none}

/* section titles */
.rv-sec{display:flex;align-items:center;gap:8px;padding:0 12px;margin:8px 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--brass)}
.rv-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass-dim),transparent)}
.rv-sec small{font-weight:600;letter-spacing:.04em;color:#9fb3b8;font-size:11px}

/* ---------- loot ---------- */
.rv-loot{display:grid;grid-template-columns:.8fr 1fr 1fr 1fr;gap:6px;padding:0 12px}
.rv-tile{position:relative;height:74px;padding:6px 6px 5px;border:0;background:rgba(6,20,26,.86);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  box-shadow:inset 0 0 0 1px var(--rc,var(--brass-dim)),inset 0 0 0 3px rgba(6,20,26,.9),inset 0 0 0 4px color-mix(in srgb,var(--rc,var(--brass)) 35%,transparent);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);opacity:0;transform:translateY(-26px) scale(.8)}
.rv-tile.rv-in{opacity:1;transform:none;transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.rv-tile .rv-orb{position:absolute;top:8px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 8%,var(--oc) 40%,color-mix(in srgb,var(--oc) 40%,#000) 100%);
  box-shadow:0 0 0 2px #0a1418,0 0 0 3px var(--brass-dim),0 0 14px var(--oc)}
.rv-tile .rv-nm{font-size:12px;font-weight:800;color:#fff;line-height:1.1;white-space:nowrap}
.rv-tile .rv-rr{font-family:var(--num);font-style:italic;font-weight:600;font-size:10px;letter-spacing:.12em;color:var(--rc)}
.rv-tile.rv-sel{box-shadow:inset 0 0 0 2px var(--rc),inset 0 0 0 4px rgba(6,20,26,.9),inset 0 0 0 5px var(--rc),0 0 0 0;filter:brightness(1.15)}
.rv-tile.rv-gone{filter:grayscale(1) brightness(.5)}
.rv-tile.rv-gone .rv-nm::after{content:"破棄済み";display:block;font-size:9px;color:var(--coral)}
.rv-tile.rv-gold-t{--rc:var(--gold)}
.rv-tile.rv-gold-t .rv-coin{position:absolute;top:7px;left:50%;margin-left:-13px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8,#e3b64f 55%,#8b6420);box-shadow:0 0 12px rgba(255,214,107,.7);display:grid;place-items:center;
  font-family:var(--num);font-weight:800;font-style:italic;font-size:14px;color:#6b4a10}
.rv-tile.rv-gold-t .rv-nm{font-family:var(--num);font-style:italic;font-size:20px;color:var(--gold)}
.rv-tile.rv-epic{--rc:var(--epic)}
.rv-tile.rv-epic.rv-in{animation:rv-epicglow 2.4s 1s ease-in-out infinite}
@keyframes rv-epicglow{50%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(192,140,255,.8))}}
.rv-tile.rv-epic::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-120%)}
.rv-tile.rv-epic.rv-in::before{animation:rv-sheen 2.6s 1.2s ease-in-out infinite}
@keyframes rv-sheen{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.rv-burst{position:absolute;z-index:30;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px var(--bc);animation:rv-burst .6s ease-out forwards}
@keyframes rv-burst{to{transform:scale(14);opacity:0}}
.rv-flash{position:absolute;inset:0;z-index:25;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,40%),rgba(192,140,255,.55),transparent 60%);opacity:0}
.rv-flash.is-flashing{animation:rv-flash .7s ease-out}
@keyframes rv-flash{15%{opacity:1}100%{opacity:0}}
.rv-stamp{position:absolute;z-index:31;font-family:var(--num);font-style:italic;font-weight:800;font-size:26px;letter-spacing:.08em;color:#fff;
  text-shadow:2px 2px 0 var(--epic),0 0 16px var(--epic);pointer-events:none;animation:rv-stamp 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes rv-stamp{0%{transform:translate(-50%,-50%) scale(2.4) rotate(-12deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1) rotate(-12deg);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(1) rotate(-12deg);opacity:0}}

/* ---------- cards ---------- */
.rv-pick{position:relative;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center;gap:8px;padding:4px 10px 6px}
.rv-card{--tc:#c9a55b;position:relative;flex:1 1 0;max-width:128px;height:min(100%,380px);min-height:220px;border:0;padding:0;cursor:pointer;background:none;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.1),filter .25s,opacity .25s}
.rv-card .rv-face,.rv-card .rv-back{position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.rv-card .rv-back{background:linear-gradient(#123039,#071a21);display:grid;place-items:center;color:var(--brass);
  box-shadow:inset 0 0 0 1.5px var(--brass),inset 0 0 0 4px #071a21,inset 0 0 0 5px rgba(201,165,91,.5)}
.rv-card .rv-back svg{width:44px;height:44px}
.rv-card{transform:translateY(30px);opacity:0}
.rv-card.rv-dealt{opacity:1;transform:none}
.rv-card .rv-face{opacity:0}
.rv-card.rv-open{animation:rv-flipx .46s ease-in-out}
.rv-card.rv-open .rv-face{animation:rv-showAt .46s linear forwards}
.rv-card.rv-open .rv-back{animation:rv-hideAt .46s linear forwards}
@keyframes rv-flipx{0%{scale:1 1}50%{scale:0 1.06}100%{scale:1 1}}
@keyframes rv-showAt{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes rv-hideAt{0%,49%{opacity:1}50%,100%{opacity:0}}
.rv-card.rv-open.rv-inst,.rv-card.rv-open.rv-inst .rv-face,.rv-card.rv-open.rv-inst .rv-back{animation-duration:1ms}
.rv-card .rv-face{display:flex;flex-direction:column;background:linear-gradient(#141a1c,#07090a);
  box-shadow:inset 0 0 0 1.5px var(--tc),inset 0 0 0 3px #07090a,inset 0 0 0 4px color-mix(in srgb,var(--tc) 45%,transparent),inset 0 -40px 30px -24px color-mix(in srgb,var(--tc) 35%,transparent)}
.rv-card .rv-face::after{content:"";position:absolute;right:0;bottom:0;width:16px;height:16px;background:var(--tc);clip-path:polygon(100% 0,100% 100%,0 100%)}
.rv-card .rv-art{position:relative;flex:none;height:40%;min-height:0;margin:4px 4px 0;overflow:hidden;border-bottom:1.5px solid var(--tc)}
.rv-card .rv-art img{width:100%;height:100%;object-fit:cover;display:block}
.rv-card .rv-cost{position:absolute;left:5px;top:5px;width:28px;height:28px;display:grid;place-items:center;font-family:var(--num);font-style:italic;font-weight:800;font-size:18px;color:#fff;z-index:2}
.rv-card .rv-cost::before{content:"";position:absolute;inset:4px;transform:rotate(45deg);background:var(--ink);border:1px solid var(--brass)}
.rv-card .rv-cost span{position:relative}
.rv-card .rv-gemk{position:absolute;right:7px;top:8px;width:10px;height:10px;transform:rotate(45deg);background:var(--tc);z-index:2;box-shadow:0 0 0 2px #07090a,0 0 8px var(--tc)}
.rv-card .rv-ki{margin:5px 6px 0;gap:4px;font-family:var(--num);font-style:italic;font-weight:600;font-size:9.5px;letter-spacing:.05em;color:var(--tc);display:flex;justify-content:space-between}
.rv-card .rv-ki em{font-style:italic;color:var(--common)}
.rv-card .rv-cn{flex:none;margin:2px 5px 0;padding:3px 2px;font-size:14px;font-weight:800;text-align:center;color:var(--parch-ink);background:linear-gradient(#efe5cc,#d9cba6);line-height:1.1}
.rv-card .rv-tx{flex:1 1 auto;min-height:0;margin:4px 5px 0;padding:5px 6px;text-align:left;font-size:12px;line-height:1.5;font-weight:600;color:var(--parch-ink);
  background:linear-gradient(#f4ecd8,#e6dac0);overflow:hidden}
.rv-card .rv-tx b{color:#b8202f}.rv-card .rv-tx b.rv-b{color:#0b5d7c}.rv-card .rv-tx b.rv-g{color:#1d6b3a}
.rv-card .rv-sk{flex:none;margin:6px 0 9px;display:flex;justify-content:center;gap:5px}
.rv-card .rv-sk i{width:9px;height:9px;border-radius:50%;border:1px solid var(--brass);background:radial-gradient(circle at 35% 30%,#c9d2d4,#3a4448)}
.rv-card.rv-sel{transform:translateY(-6px) scale(1.04);z-index:3;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--tc) 70%,transparent))}
.rv-pick.rv-has .rv-card.rv-open:not(.rv-sel){filter:brightness(.6) saturate(.7);transform:scale(.95)}
.rv-card .rv-pickmark{position:absolute;left:50%;top:-11px;z-index:4;transform:translateX(-50%) scale(0);padding:2px 10px;font-size:11px;font-weight:800;color:var(--ink);background:var(--tc);white-space:nowrap;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.rv-card.rv-sel .rv-pickmark{transform:translateX(-50%) scale(1)}
.rv-card.rv-shine .rv-face::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);animation:rv-cshine .7s ease-out forwards}
@keyframes rv-cshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.rv-card.rv-fly{transition:transform .55s cubic-bezier(.5,0,.8,.4),opacity .55s;opacity:0}

/* ---------- detail ---------- */
.rv-sheetveil{position:absolute;inset:0;z-index:20;background:rgba(3,10,13,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.rv-sheetveil.rv-on{opacity:1;pointer-events:auto}
.rv-detail.rv-sheet{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);z-index:21;transform:translateY(20px);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.2,.9,.3,1)}
.rv-detail.rv-sheet.rv-on{transform:none;opacity:1;pointer-events:auto}
.rv-detail{position:relative;margin:8px 12px 0;min-height:92px;padding:9px 12px 10px;background:rgba(6,20,26,.97);
  box-shadow:inset 0 0 0 1px var(--dc,var(--brass-dim)),inset 3px 0 0 var(--dc,var(--brass-dim));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.rv-detail .rv-hint{display:flex;align-items:center;justify-content:center;height:72px;font-size:12px;color:#8fa5aa;letter-spacing:.06em}
.rv-detail .rv-row{display:flex;align-items:center;gap:8px}
.rv-detail .rv-row .rv-k{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--dc)}
.rv-detail .rv-row .rv-r{font-family:var(--num);font-style:italic;font-size:11px;letter-spacing:.12em;color:var(--rc2)}
.rv-detail h3{margin:2px 0 5px;font-size:17px;font-weight:800;color:#fff;letter-spacing:.04em}
.rv-detail p{margin:0;padding:4px 8px;font-size:12.5px;line-height:1.55;font-weight:600;color:var(--parch-ink);background:rgba(233,223,198,.93)}
.rv-detail p b{color:#b8202f}.rv-detail p b.rv-g{color:#1d6b3a}.rv-detail p b.rv-b{color:#0b5d7c}
.rv-detail .rv-acts{display:flex;gap:6px;margin-top:7px}
.rv-detail .rv-acts button{flex:1;border:0;padding:7px 0;font-size:12px;font-weight:800;letter-spacing:.06em;cursor:pointer;
  background:rgba(201,165,91,.14);box-shadow:inset 0 0 0 1px var(--brass-dim);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.rv-detail .rv-acts button:disabled{opacity:.45}.rv-detail .rv-acts button.rv-no.rv-arm{background:var(--coral);color:#fff}
.rv-detail .rv-acts button.rv-no{color:#ffb3ba;box-shadow:inset 0 0 0 1px rgba(255,75,92,.5);background:rgba(255,75,92,.1)}
.rv-detail .rv-x{margin-left:auto;width:26px;height:26px;border:1px solid var(--brass-dim);background:transparent;color:var(--bone);font-size:16px;line-height:1;cursor:pointer}
.rv-detail .rv-vine{display:none;position:absolute;right:4px;top:4px;width:22px;height:22px;color:var(--brass);pointer-events:none}
.rv-detail.rv-swap{animation:rv-swap .25s ease-out}
@keyframes rv-swap{from{transform:translateX(18px);opacity:0}}

/* ---------- footer ---------- */
.rv-foot{display:flex;gap:10px;align-items:center;padding:10px 12px 12px}
.rv-deck{position:relative;flex:none;width:74px;height:54px;border:0;cursor:pointer;background:rgba(6,20,26,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:inset 0 0 0 1px var(--brass-dim),inset 0 0 0 4px rgba(6,20,26,.9),inset 0 0 0 5px rgba(201,165,91,.3);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.rv-deck small{font-size:10px;color:var(--brass);letter-spacing:.12em}
.rv-deck b{font-family:var(--num);font-style:italic;font-weight:800;font-size:22px;line-height:1;color:#fff}
.rv-deck.rv-bump{animation:rv-bump .35s}
.rv-go{position:relative;flex:1;height:58px;border:0;padding:0;background:none;cursor:pointer;color:var(--ink)}
.rv-go .rv-sh{position:absolute;inset:6px -2px -6px 8px;background:var(--coral);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .12s}
.rv-go .rv-face{position:absolute;inset:0 6px 6px 0;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bone);overflow:hidden;
  clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .12s,background .2s}
.rv-go .rv-t{font-weight:800;font-size:17px;letter-spacing:.08em;white-space:nowrap}
.rv-go .rv-t small{display:block;font-family:var(--num);font-style:italic;font-weight:600;font-size:10px;letter-spacing:.16em;color:#7a6a45;text-align:center}
.rv-go .rv-chev{display:flex}.rv-go .rv-chev i{width:7px;height:7px;border-top:2.5px solid var(--coral);border-right:2.5px solid var(--coral);transform:rotate(45deg);margin-left:-1px;animation:rv-chev 1.1s infinite}
.rv-go .rv-chev i:nth-child(2){animation-delay:.15s}.rv-go .rv-chev i:nth-child(3){animation-delay:.3s}
@keyframes rv-chev{0%,100%{opacity:.3}50%{opacity:1}}
.rv-go .rv-face::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg)}
.rv-go.rv-ready .rv-face::after{animation:rv-gosheen 2.2s ease-in-out infinite}
@keyframes rv-gosheen{0%{left:-40%}60%,100%{left:130%}}
.rv-go:active .rv-face{transform:translate(5px,5px)}.rv-go:active .rv-sh{transform:translate(-2px,-2px)}
.rv-go.rv-skip .rv-face{background:#cfc7b4}.rv-go.rv-skip .rv-sh{background:#5a6a70}

/* ---------- splash ---------- */
.rv-splash{position:absolute;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.rv-splash .rv-band{position:absolute;left:-30%;right:-30%;top:40%;height:150px;background:var(--coral);transform:rotate(-12deg) scaleX(0);transform-origin:left}
.rv-splash .rv-band2{position:absolute;left:-30%;right:-30%;top:calc(40% + 128px);height:22px;background:var(--bone);transform:rotate(-12deg) scaleX(0);transform-origin:right}
.rv-splash .rv-big{position:relative;font-family:var(--num);font-style:italic;font-weight:800;font-size:96px;line-height:1;color:#fff;letter-spacing:.02em;
  text-shadow:5px 5px 0 var(--ink);transform:rotate(-12deg) translateX(120%);opacity:0}
.rv-splash .rv-big small{display:block;font-family:var(--serif);font-style:normal;font-weight:800;font-size:18px;letter-spacing:.3em;text-shadow:2px 2px 0 var(--ink);margin:4px 0 0 8px}
.rv-splash .rv-sfro{position:absolute;right:-60px;bottom:-40px;width:340px;opacity:0;transform:translateX(120px)}
.rv-splash .rv-veil{position:absolute;inset:0;background:rgba(3,10,13,.75);opacity:0}
.rv-splash.rv-play .rv-veil{animation:rv-veil 1.5s forwards}
.rv-splash.rv-play .rv-band{animation:rv-band 1.5s cubic-bezier(.7,0,.2,1) forwards}
.rv-splash.rv-play .rv-band2{animation:rv-band 1.5s .06s cubic-bezier(.7,0,.2,1) forwards}
.rv-splash.rv-play .rv-big{animation:rv-big 1.5s cubic-bezier(.2,.9,.3,1) forwards}
.rv-splash.rv-play .rv-sfro{animation:rv-sfro 1.5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes rv-veil{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
@keyframes rv-band{0%{transform:rotate(-12deg) scaleX(0)}22%,78%{transform:rotate(-12deg) scaleX(1)}100%{transform:rotate(-12deg) scaleX(1) translateX(120%)}}
@keyframes rv-big{0%{transform:rotate(-12deg) translateX(120%);opacity:0}25%{transform:rotate(-12deg) translateX(-4%);opacity:1}35%,78%{transform:rotate(-12deg) translateX(0);opacity:1}100%{transform:rotate(-12deg) translateX(-140%);opacity:0}}
@keyframes rv-sfro{0%,10%{opacity:0;transform:translateX(120px)}35%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-60px)}}
.rv-splash.rv-done{display:none}
.rv-skiphint{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:41;font-size:11px;color:#9fb3b8;opacity:0;pointer-events:none}
.rv-splash.rv-play ~ .rv-skiphint{animation:rv-veil 1.5s forwards}

/* ---------- outro ---------- */

.reward-v2 button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
@media (max-height:720px){
  .rv-hero{height:104px}.rv-foes .rv-foe{width:36px;height:36px}.rv-tagline{display:none}.rv-foes{margin-top:12px}
  .rv-tile{height:62px}.rv-tile .rv-orb{top:5px;width:22px;height:22px;margin-left:-11px}.rv-tile.rv-gold-t .rv-coin{top:4px;width:22px;height:22px;margin-left:-11px;font-size:12px}.rv-tile.rv-gold-t .rv-nm{font-size:17px}
  .rv-card{min-height:200px}.rv-card .rv-art{height:34%}.rv-card .rv-tx{font-size:11px;line-height:1.45;padding:4px 5px}.rv-card .rv-cn{font-size:13px}
  .rv-foot{padding:6px 12px 8px}.rv-sec{margin:6px 0 4px}
}
@media (prefers-reduced-motion:reduce){.reward-v2 *{animation:none!important;transition:none!important}}

.reward-v2 .rv-runbar .rv-fl b,.reward-v2 .rv-runbar .rv-hp b,.reward-v2 .rv-gold *,.reward-v2 .rv-vslab b,.reward-v2 .rv-meta b,.reward-v2 .rv-rr,.reward-v2 .rv-gold-t .rv-nm,.reward-v2 .rv-coin,.reward-v2 .rv-cost *,.reward-v2 .rv-ki,.reward-v2 .rv-ki em,.reward-v2 .rv-r,.reward-v2 .rv-deck b,.reward-v2 .rv-t small,.reward-v2 .rv-big,.reward-v2 .rv-stamp{font-family:var(--num)!important}
.reward-v2 .rv-runbar{flex:none;grid-template-columns:none;margin:0;border:0;background:none}
.reward-v2 .rv-hp i::after{right:calc(100% - var(--hp-percent))}
.reward-v2 .rv-vwrap{align-self:flex-start;z-index:1}
.reward-v2 .rv-hero{isolation:isolate}
.reward-v2 .rv-foot,.reward-v2 .rv-sec,.reward-v2 .rv-loot{flex-shrink:0}
.reward-v2 .rv-card{min-width:0;min-height:0;text-align:left;box-shadow:none;border-radius:0}
.reward-v2 .rv-art{background-image:url('/assets/card-atlas.webp');background-size:400% 300%}
.reward-v2 .rv-tx{display:block;overflow:hidden;overflow-wrap:anywhere}
.reward-v2 .rv-tx p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.reward-v2 .rv-tx small{display:block;font-size:.86em;line-height:1.35}
.reward-v2 .rv-tx .condition{color:#73613a;padding:0;margin:2px 0 0;white-space:normal}
.reward-v2 .rv-sk i{background:radial-gradient(circle at 35% 30%,#fff,var(--oc) 55%,#293236)}
.reward-v2 .rv-go .rv-t{white-space:normal;font-size:14px;line-height:1.25;text-align:center;padding-left:13px;max-width:calc(100% - 40px);letter-spacing:.02em}
.reward-v2 .rv-go .rv-t small{margin-top:3px}
.reward-v2 .rv-tile .rv-nm{white-space:normal;overflow-wrap:anywhere;font-size:11px}
.reward-v2 .rv-loot{grid-template-columns:repeat(var(--loot-cols,4),minmax(0,1fr))}
.reward-v2 .rv-detail{max-height:65%;overflow:auto;overscroll-behavior:contain}
.reward-v2 .rv-tile.rv-sel{z-index:21}
.reward-v2 .rv-sheetveil{touch-action:none}
.reward-v2 .rv-big{font-size:clamp(70px,22vw,96px)}
.reward-v2 .rv-cost{background:none;border:0;box-shadow:none}
.reward-v2 .rv-cost:before{z-index:0}
.reward-v2 .rv-sk{padding:0}
.reward-v2 .rv-card:focus-visible,.reward-v2 .rv-tile:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.reward-v2 .rv-skiphint{opacity:0}
.reward-v2.intro-running .rv-skiphint{opacity:1}
.reward-v2.motion-reduced *{animation:none!important;transition:none!important}
.reward-v2 .rv-card.rv-open.rv-inst .rv-face{opacity:1;animation:none}
.reward-v2 .rv-card.rv-open.rv-inst .rv-back{opacity:0;animation:none}

body.reward-mode .module-rewards.rv-loot{margin:0;border:0;background:none;padding:0 12px;box-shadow:none}
body.reward-mode #app main.reward-v2{padding:0;min-height:0;max-width:440px;line-height:normal}
.reward-v2 .rv-runbar .rv-hp small{font-size:11px;color:#9fb3b8}
.reward-v2 .rv-gold-t .rv-nm{font-size:20px}
@media(max-height:720px){.reward-v2 .rv-gold-t .rv-nm{font-size:17px}}

.reward-v2 .rv-hero{overflow:visible;z-index:1}.reward-v2 .rv-fro{height:220%;max-height:none}.reward-v2 .rv-sec,.reward-v2 .rv-loot{position:relative;z-index:2}
