.dex-reward-reveal { color-scheme: dark; --presentation-size: min(86vw, calc(100dvh - 96px), 470px); --presentation-top: clamp(92px, calc(15dvh - 18px), 132px); --presentation-offset: 20px; --collection-scale: .86; --frame-art-inset: 3%; }
.dex-reward-reveal * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.dex-reward-reveal { min-height: 100%; margin: 0; background: #171b21; }
.dex-reward-reveal { scrollbar-gutter: stable; }
.dex-reward-reveal { color: #f3efe4; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; }
.dex-reward-reveal button, .dex-reward-reveal a { font: inherit; }
.dex-reward-reveal button { touch-action: manipulation; }
.dex-reward-reveal .page { min-height: 100dvh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.dex-reward-reveal .game-header { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); padding: 0 14px; flex: 0 0 auto; }
.dex-reward-reveal .game-header__back { justify-self: start; color: inherit; text-decoration: none; font-size: .92rem; }
.dex-reward-reveal .game-header__title { grid-column: 2; margin: 0; font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.dex-reward-reveal .game-header__menu { grid-column: 3; justify-self: end; border: 0; background: transparent; color: inherit; font-size: 1.35rem; width: 42px; height: 42px; }
.dex-reward-reveal main { width: min(100%, 640px); margin: 0 auto; flex: 1; display: grid; }
.dex-reward-reveal .screen { min-height: 0; width: 100%; display: none; }
.dex-reward-reveal .screen.is-active { display: flex; }
.dex-reward-reveal .button { border: 1px solid #d49b79; border-radius: 12px; padding: 14px 18px; background: #a94735; color: #fff6e7; font-weight: 800; font-size: 1rem; cursor: pointer; }
.dex-reward-reveal .button--wide { width: min(100%, 390px); margin: 0 auto; }
.dex-reward-reveal .button--secondary { background: #303944; color: #f3efe4; border-color: #647080; }
.dex-reward-reveal .gacha-screen { position: relative; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--presentation-top) + var(--presentation-offset)) 18px 18px; overflow: hidden; }
.dex-reward-reveal .paper-wrap { width: var(--presentation-size); height: var(--presentation-size); position: relative; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
.dex-reward-reveal .paper { width: 100%; height: 100%; position: relative; border: 1px solid #aaa79d; background: linear-gradient(135deg, #c8c5ba, #dfdcd1 48%, #bdb9ae); box-shadow: inset 0 0 34px rgba(79,70,52,.2); color: #302d26; display: grid; place-items: center; overflow: hidden; }
.dex-reward-reveal .paper::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: repeating-linear-gradient(12deg, transparent 0 10px, rgba(76,67,50,.11) 11px, transparent 12px 25px); pointer-events: none; }
.dex-reward-reveal .paper-call { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); z-index: 1; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(1.35rem, 6vw, 2rem); letter-spacing: .15em; white-space: nowrap; }
.dex-reward-reveal .ink-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.dex-reward-reveal .ink-video-reveal { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 0; }
.dex-reward-reveal .ink-video-reveal.is-visible { opacity: 1; }
.dex-reward-reveal .ink-video-reveal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dex-reward-reveal .paper-wrap.is-inking .paper-call { animation: call-absorbed .38s ease-in both; }
.dex-reward-reveal .paper-wrap.is-inking .ink-canvas { pointer-events: none; }
.dex-reward-reveal .skip { position: fixed; right: 22px; bottom: calc(env(safe-area-inset-bottom) + 18px); z-index: 60; border: 0; background: transparent; color: #c7cbd0; text-decoration: underline; font-size: .82rem; padding: 10px; }
.dex-reward-reveal .effect-screen { flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--presentation-top) + var(--presentation-offset)) 14px 14px; background: radial-gradient(circle at 50% 38%, #3a3328, #111820 65%); overflow: hidden; }
.dex-reward-reveal .effect-stage { position: relative; width: var(--presentation-size); height: var(--presentation-size); display: grid; place-items: center; isolation: isolate; }
.dex-reward-reveal .effect-stage.is-shocked { animation: impact-shake .15s cubic-bezier(.2,.8,.25,1) both; }
.dex-reward-reveal .effect-stage::before, .dex-reward-reveal .effect-stage::after { content: ""; position: absolute; z-index: -1; inset: -24%; border-radius: 47% 53% 51% 49%; opacity: 0; background: radial-gradient(ellipse, rgba(38,27,18,.78) 0 24%, rgba(7,6,5,.9) 52%, transparent 72%); filter: blur(10px); }
.dex-reward-reveal .effect-stage.is-born::before { animation: ink-unveil .64s ease-out both; }
.dex-reward-reveal .effect-stage.is-releasing::before { animation: end-smoke .42s ease-out both; }
.dex-reward-reveal .effect-stage.is-releasing::after { animation: end-smoke .42s .03s ease-out both reverse; }
.dex-reward-reveal .effect-screen img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.dex-reward-reveal .effect-stage.is-releasing .effect-video { animation: webp-release .42s ease-out both; }
.dex-reward-reveal .effect-stage > .art-reveal--mix { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dex-reward-reveal .art-screen { align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 38%, #3a3328, #111820 65%); overflow: hidden; }
.dex-reward-reveal .art-reveal { width: var(--presentation-size); height: var(--presentation-size); position: relative; display: grid; place-items: center; text-align: center; animation: stage-fade .16s ease-out both; }
.dex-reward-reveal .art-frame { padding: 0; background: transparent; box-shadow: none; }
.dex-reward-reveal .art-presentation-frame { position: absolute; z-index: 10; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dex-reward-reveal .effect-presentation-frame { position: absolute; z-index: 30; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dex-reward-reveal .effect-stage .art-presentation-frame, .dex-reward-reveal .effect-stage > .effect-presentation-frame { position: absolute; z-index: 30; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dex-reward-reveal .art-frame--square { --art-size: var(--presentation-size); width: var(--art-size); height: var(--art-size); min-width: 0; min-height: 0; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; }
.dex-reward-reveal .art-frame--square img { display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; background: transparent; }
.dex-reward-reveal .art-frame--collection { padding: 0; background: transparent; box-shadow: none; }
.dex-reward-reveal .art-frame--collection img { width: 100%; height: 100%; background: transparent; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.58)); }
.dex-reward-reveal .art-reveal--mix { isolation: isolate; }
.dex-reward-reveal .art-reveal--mix::before { content: ""; position: absolute; z-index: 5; inset: 4%; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 52%, rgba(15,12,9,.92) 0 12%, rgba(35,27,17,.7) 33%, transparent 71%); filter: blur(12px); mix-blend-mode: multiply; }
.dex-reward-reveal .art-reveal--mix::after { content: ""; position: absolute; z-index: 7; inset: -13%; pointer-events: none; opacity: 0; background:
  radial-gradient(circle at 13% 29%, rgba(25,17,11,.95) 0 6px, transparent 8px),
  radial-gradient(circle at 21% 61%, rgba(25,17,11,.88) 0 8px, transparent 10px),
  radial-gradient(circle at 33% 14%, rgba(25,17,11,.88) 0 5px, transparent 7px),
  radial-gradient(circle at 47% 81%, rgba(25,17,11,.92) 0 7px, transparent 9px),
  radial-gradient(circle at 64% 18%, rgba(25,17,11,.9) 0 8px, transparent 10px),
  radial-gradient(circle at 78% 39%, rgba(25,17,11,.94) 0 6px, transparent 8px),
  radial-gradient(circle at 88% 70%, rgba(25,17,11,.82) 0 5px, transparent 7px),
  radial-gradient(circle at 70% 88%, rgba(25,17,11,.82) 0 4px, transparent 6px),
  radial-gradient(circle at 8% 82%, rgba(25,17,11,.8) 0 4px, transparent 6px); }
.dex-reward-reveal .art-reveal--mix.is-impact::after { animation: ink-specks .62s cubic-bezier(.14,.72,.28,1) both; }
.dex-reward-reveal .art-reveal--mix.is-impact::before { animation: impact-echo .72s cubic-bezier(.12,.78,.25,1) both; }
.dex-reward-reveal .impact-ink { position: absolute; z-index: 1; inset: -18%; opacity: 0; pointer-events: none; background:
  radial-gradient(ellipse at 50% 50%, rgba(19,13,9,.95) 0 19%, transparent 31%),
  radial-gradient(ellipse at 32% 42%, rgba(22,15,10,.9) 0 20%, transparent 37%),
  radial-gradient(ellipse at 68% 43%, rgba(22,15,10,.9) 0 19%, transparent 36%),
  radial-gradient(ellipse at 45% 69%, rgba(22,15,10,.9) 0 22%, transparent 37%),
  radial-gradient(ellipse at 55% 27%, rgba(22,15,10,.86) 0 17%, transparent 33%); filter: blur(9px); mix-blend-mode: multiply; }
.dex-reward-reveal .impact-flash { position: absolute; z-index: 4; inset: -8%; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, rgba(255,247,195,.9) 0 3%, rgba(255,213,103,.52) 12%, rgba(230,168,66,.16) 27%, transparent 51%); mix-blend-mode: screen; }
.dex-reward-reveal .impact-sparks { position: absolute; z-index: 6; inset: -8%; opacity: 0; pointer-events: none; }
.dex-reward-reveal .impact-sparks i { position: absolute; left: 50%; top: 50%; width: 31%; height: 3px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,245,190,.96), rgba(250,199,89,.7) 36%, transparent); box-shadow: 0 0 8px rgba(255,221,116,.78); }
.dex-reward-reveal .impact-sparks i:nth-child(1) { transform: rotate(-16deg); }
.dex-reward-reveal .impact-sparks i:nth-child(2) { transform: rotate(37deg); width: 25%; }
.dex-reward-reveal .impact-sparks i:nth-child(3) { transform: rotate(104deg); width: 28%; }
.dex-reward-reveal .impact-sparks i:nth-child(4) { transform: rotate(157deg); width: 24%; }
.dex-reward-reveal .impact-sparks i:nth-child(5) { transform: rotate(222deg); width: 30%; }
.dex-reward-reveal .impact-sparks i:nth-child(6) { transform: rotate(287deg); width: 23%; }
.dex-reward-reveal .art-reveal--mix.is-impact .impact-ink { animation: ink-burst .52s cubic-bezier(.12,.76,.22,1) both; }
.dex-reward-reveal .art-reveal--mix.is-impact .impact-flash { animation: reward-flash .30s ease-out both; }
.dex-reward-reveal .art-reveal--mix.is-impact .impact-sparks { animation: reward-sparks .42s cubic-bezier(.14,.8,.2,1) both; }
.dex-reward-reveal .art-layers { position: absolute; z-index: 2; inset: var(--frame-art-inset); width: auto; height: auto; min-width: 0; min-height: 0; display: grid; overflow: hidden; }
.dex-reward-reveal .art-layer { grid-area: 1 / 1; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; will-change: transform, opacity, filter; }
.dex-reward-reveal .art-layer .art-frame--square { --art-size: 100%; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
.dex-reward-reveal .art-layer .art-frame--square img { max-width: 100%; max-height: 100%; }
.dex-reward-reveal .art-layer--original { z-index: 1; opacity: 0; transform: scale(.94); filter: contrast(.42) saturate(.22) brightness(.8) blur(4px); }
.dex-reward-reveal .art-layer--collection { z-index: 2; opacity: 0; transform: scale(.08); filter: blur(8px); }
.dex-reward-reveal .art-reveal--mix.is-complete .art-layer--collection { opacity: .96; transform: scale(var(--collection-scale)); filter: drop-shadow(0 14px 18px rgba(0,0,0,.58)); }
.dex-reward-reveal .art-reveal--mix.is-complete .art-layer--original, .dex-reward-reveal .art-reveal--mix.is-mixing .art-layer--original { opacity: 1; transform: scale(1); filter: none; }
.dex-reward-reveal .art-reveal--mix.is-impact .art-layer--original { animation: artwork-original-emerge .62s cubic-bezier(.18,.78,.22,1) both; }
.dex-reward-reveal .art-reveal--mix.is-mixing .art-layer--collection { animation: collection-impact .48s cubic-bezier(.12,.92,.22,1) both; }
@keyframes call-absorbed { to { opacity: 0; transform: translateX(-50%) translateY(-12px); filter: blur(2px); } }
@keyframes ink-flood { 0% { opacity: .18; transform: scale(.06); }
34% { opacity: .9; transform: scale(.62) rotate(9deg); }
70% { opacity: .98; transform: scale(1.38) rotate(-6deg); }
100% { opacity: 1; transform: scale(2.22) rotate(4deg); } }
@keyframes ink-unveil { 0% { opacity: .94; transform: scale(1.5) rotate(-7deg); }
100% { opacity: 0; transform: scale(.62) rotate(8deg); } }
@keyframes end-smoke { 0% { opacity: 0; transform: scale(.52); }
34% { opacity: .84; }
100% { opacity: 0; transform: scale(1.28); } }
@keyframes webp-release { 0% { transform: scale(1); opacity: 1; filter: none; }
45% { transform: scale(1.025); opacity: 1; filter: brightness(1.28) contrast(1.08); }
100% { transform: scale(.98); opacity: 0; filter: brightness(.38) blur(3px); } }
@keyframes stage-fade { from { opacity: 0; }
to { opacity: 1; } }
@keyframes impact-echo { 0% { opacity: 0; transform: scale(.28); }
20% { opacity: .98; }
100% { opacity: 0; transform: scale(1.55); } }
@keyframes ink-burst { 0% { opacity: 0; transform: scale(.2) rotate(-9deg); }
17% { opacity: .98; transform: scale(.48) rotate(4deg); }
58% { opacity: .88; transform: scale(1.1) rotate(-3deg); }
100% { opacity: 0; transform: scale(1.42) rotate(5deg); } }
@keyframes reward-flash { 0% { opacity: 0; transform: scale(.28); }
16% { opacity: .98; transform: scale(.64); }
100% { opacity: 0; transform: scale(1.34); } }
@keyframes reward-sparks { 0% { opacity: 0; transform: scale(.34) rotate(-7deg); }
18% { opacity: 1; }
100% { opacity: 0; transform: scale(1.32) rotate(7deg); } }
@keyframes collection-impact {
  0%, 8% { opacity: 0; transform: scale(.08) rotate(-3deg); filter: blur(10px) brightness(2.2); }
26% { opacity: .88; transform: scale(.66) rotate(2deg); filter: blur(2px) brightness(1.7); }
52% { opacity: 1; transform: scale(1.3) rotate(-2deg); filter: blur(0) brightness(1.24) drop-shadow(0 0 24px rgba(255,220,119,.82)); }
74% { opacity: 1; transform: scale(1.05) rotate(.9deg); filter: brightness(1.1) drop-shadow(0 0 12px rgba(255,220,119,.5)); }
100% { opacity: 1; transform: scale(var(--collection-scale)) rotate(0); filter: none; }
}
@keyframes impact-shake { 0% { transform: translate(0,0); }
18% { transform: translate(-9px,4px) rotate(-.35deg); }
42% { transform: translate(8px,-4px) rotate(.28deg); }
68% { transform: translate(-5px,2px); }
100% { transform: translate(0,0); } }
@keyframes ink-specks { 0% { opacity: 0; transform: scale(.28) rotate(-8deg); }
20% { opacity: 1; }
68% { opacity: .85; }
100% { opacity: 0; transform: scale(1.42) rotate(8deg); } }
@keyframes new-shimmer { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,224,102,.92)) drop-shadow(0 3px 5px rgba(81,46,5,.6)); }
50% { filter: drop-shadow(0 0 9px rgba(255,239,151,1)) drop-shadow(0 3px 5px rgba(81,46,5,.7)); } }
@keyframes artwork-original-emerge { 0% { opacity: .08; transform: scale(.99); filter: contrast(.42) saturate(.22) brightness(.8) blur(3px); }
55% { opacity: .52; transform: scale(1); filter: contrast(.72) saturate(.6) brightness(.94) blur(.85px); }
100% { opacity: 1; transform: scale(1); filter: none; } }
.dex-reward-reveal .reward-screen { position: relative; flex-direction: column; align-items: center; padding: calc(var(--presentation-top) + var(--presentation-offset)) 18px 28px; }
.dex-reward-reveal .reward-card { width: var(--presentation-size); margin: 0; text-align: center; }
.dex-reward-reveal .reward-art-stage { width: var(--presentation-size); height: var(--presentation-size); margin: 0 auto; position: relative; isolation: isolate; }
.dex-reward-reveal .reward-card .art-layers { inset: var(--frame-art-inset); width: auto; height: auto; }
.dex-reward-reveal .reward-card .art-layer .art-frame--square { --art-size: 100%; width: 100%; height: 100%; }
.dex-reward-reveal .reward-card .art-layer--original { opacity: 1; transform: scale(1); filter: none; }
.dex-reward-reveal .reward-card .art-layer--collection { opacity: .96; transform: scale(var(--collection-scale)); filter: drop-shadow(0 14px 18px rgba(0,0,0,.58)); }
.dex-reward-reveal .reward-heading { position: absolute; top: calc(var(--presentation-top) + var(--presentation-offset) - 94px); left: 50%; display: flex; align-items: center; gap: 15px; margin: 0; transform: translateX(-50%); white-space: nowrap; }
.dex-reward-reveal .new-label { position: relative; margin: 0; color: #f4d55a; font-weight: 900; letter-spacing: .13em; font-size: 1.72rem; line-height: 1; background: linear-gradient(180deg, #fff9c5 0%, #ffe982 30%, #e9b83e 66%, #fff0a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 4px rgba(255,224,102,.92)) drop-shadow(0 3px 5px rgba(81,46,5,.6)); animation: new-shimmer 1.8s ease-in-out infinite; }
.dex-reward-reveal .new-label::before, .dex-reward-reveal .new-label::after { position: absolute; top: 50%; color: #fff6bf; font-size: .62em; line-height: 1; text-shadow: 0 0 7px #ffe67a; }
.dex-reward-reveal .new-label::before { content: "✦"; left: -1.1em; transform: translateY(-62%) rotate(-12deg); }
.dex-reward-reveal .new-label::after { content: "✦"; right: -1.05em; transform: translateY(-36%) rotate(12deg); }
.dex-reward-reveal .reward-number { margin: 0; color: #d9dce0; font-size: 1rem; font-weight: 700; line-height: 1; }
.dex-reward-reveal .reward-name { position: absolute; top: calc(var(--presentation-top) + var(--presentation-offset) - 53px); left: 50%; margin: 0; transform: translateX(-50%); font-size: clamp(1.5rem, 5.8vw, 2rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.dex-reward-reveal .reward-name ruby { ruby-position: over; }
.dex-reward-reveal .reward-name rt { font-size: .42em; font-weight: 500; }
.dex-reward-reveal .reward-actions { width: min(100%,390px); margin: 16px auto 0; display: grid; justify-items: center; gap: 10px; }
.dex-reward-reveal .reward-actions > .button, .dex-reward-reveal .reward-actions--two { width: 100%; }
.dex-reward-reveal .reward-actions--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: auto; gap: 10px; }
.dex-reward-reveal .reward-actions--two .button { font-size: .9rem; padding-inline: 8px; }
.dex-reward-reveal .toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; background: rgba(0,0,0,.76); color: white; font-size: .84rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.dex-reward-reveal .toast.is-visible { opacity: 1; }


/* 獲得結果は端末の表示領域を基準に中央へ収める。 */
.dex-reward-reveal{width:100dvw;max-width:100%;overflow-x:clip}
.dex-reward-reveal .reward-screen{width:100%;overflow-x:clip}
.dex-reward-reveal .reward-card,.dex-reward-reveal .reward-actions{align-self:center;max-width:calc(100vw - 36px)}
.dex-reward-reveal .reward-art-stage{max-width:100%;max-height:calc(100vw - 36px)}

/* 開封画面の戻り導線。文字サイズを変えず枠だけ追加する。 */
.dex-reward-reveal .game-header__back{
  display:flex;
  height:32px;
  min-height:32px;
  align-items:center;
  padding:0 6px;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px #647080;
}

#dex-reveal-layer{position:fixed;z-index:100;inset:0;width:100dvw;min-height:100dvh;overflow-x:clip}
#dex-reveal-layer[hidden]{display:none!important}