.quest-screen .reward-device{position:relative;isolation:isolate;width:min(100%,430px);height:100svh;margin:auto;overflow:hidden;background:#17131e;color:#fff4fa}
.reward-world{position:absolute;inset:0;width:100%;height:calc(100% - var(--control-zone));object-fit:cover;object-position:15% center;opacity:var(--reward-background-opacity,.5);z-index:-3}
.reward-tint{position:absolute;inset:0 0 var(--control-zone);background:#1c1326;mix-blend-mode:multiply;opacity:.5;z-index:-2}
.quest-screen .reward-device>.brand{height:48px;position:absolute;inset:0 0 auto;background:#17131eb3;backdrop-filter:blur(5px);z-index:3}
.reward-release{font-size:11px;color:#ffb8da}
.reward-heading{position:absolute;top:55px;left:16px;right:16px;z-index:3;text-shadow:0 1px 4px #100b18}
.reward-heading h1{font-size:22px;line-height:1.4;letter-spacing:.03em}.reward-heading p{font-size:13px;line-height:1.7;color:#ffcfE8;margin-top:4px}
.reward-hero{position:absolute;top:99px;right:-8%;width:90%;height:auto;pointer-events:none;z-index:-1}
.reward-panel{position:absolute;left:12px;right:12px;bottom:calc(var(--control-zone) + 12px);max-height:48svh;overflow-y:auto;padding:14px;background:#18121ddd;border:1px solid #b8789c77;border-top:2px solid #f347a0;backdrop-filter:blur(6px);scrollbar-width:thin}
.reward-panel h2{font-size:19px;margin-bottom:12px}.reward-panel p{font-size:15px;line-height:1.8}
.reward-earned{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline;border-bottom:1px solid #98607e66;padding-bottom:11px;margin-bottom:8px}
.reward-earned>small{font:700 10px system-ui;letter-spacing:1px;color:#ffc1de}.reward-earned strong{font-size:23px;line-height:1.6}.reward-earned>span{width:100%;font-size:12px;color:#f6cbe2}
.reward-stats{margin:0}.reward-stats>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:31px;border-bottom:1px solid #96618133;font-size:14px}.reward-stats dt{margin:0}.reward-stats dd{margin:0;font:700 19px system-ui}.reward-stats dd small{font-size:12px;color:#d6bdd0}
.quest-screen .reward-note{font-size:12px;line-height:1.7;color:#e1c0d4;margin-top:9px}
.reward-dock{position:absolute;inset:auto 0 0;height:var(--control-zone);background:#17131e;border-top:1px solid #6b3657;z-index:8}
.reward-actions{position:fixed;z-index:12;bottom:var(--thumb-bottom);left:50%;transform:translateX(-50%);width:calc(min(100vw,430px) - 30px);height:64px;display:flex;gap:8px}
.quest-screen .reward-actions>button{flex:1;min-width:0;padding:6px 10px;background:#f347a0;color:#24101e;border:1px solid #f477b8;font-size:15px;line-height:1.5;font-weight:750}.quest-screen .reward-actions>button+button{background:#2c2234;color:#ffe7f5;border-color:#b57099}.quest-screen .reward-actions>button:disabled{opacity:.4}
.quest-screen .reward-aux{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(min(100vw,430px) - 30px);height:36px;display:flex;gap:8px;margin:0}
.quest-screen .reward-aux>button{flex:1;min-width:0;width:auto;min-height:36px;height:36px;padding:4px 8px;font-size:12px;line-height:1.3;background:#241c2b;border:1px solid #69405b;color:#f2cde5}
.reward-card-stage{position:absolute;inset:119px 15px calc(var(--control-zone) + 50px);display:flex;align-items:center;justify-content:center}
.reward-card-stage>.sisters-card,.reward-card-stage>.reward-card-back{width:min(100%,calc((75svh - 170px)*5/7),320px);flex:none}
.reward-card-back{width:100%;aspect-ratio:5/7;background:#1b1421;border:2px solid #f347a0;outline:1px solid #bf83a5;outline-offset:-9px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;box-shadow:0 6px 25px #110b1880}
.reward-card-back b{font:900 clamp(14px,4vw,24px) system-ui;letter-spacing:.12em;color:#ff8fc3}.reward-card-back>span{font:600 12px system-ui;letter-spacing:.3em;color:#d7aec7}
.reward-card-back.opening{animation:reward-open .9s ease-in-out both}
@keyframes reward-open{0%{transform:rotateY(0) scale(.9);opacity:.5}60%{transform:rotateY(170deg) scale(1.04);opacity:1}100%{transform:rotateY(360deg) scale(1)}}
.reward-message{position:absolute;left:15px;right:15px;bottom:calc(var(--control-zone) + 10px);font-size:14px;line-height:1.7;min-height:34px;text-align:center;padding:4px 8px;background:#19121edb;border-left:2px solid #f347a0}
.reward-gallery{position:absolute;inset:118px 14px calc(var(--control-zone) + 12px);overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:16px 12px;scrollbar-width:thin;padding:0 2px 10px}
.quest-screen .reward-gallery-card{width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;background:transparent;text-align:center}
.reward-gallery-card>span{font-size:13px;line-height:1.7;display:block;padding:3px;background:#201829c7}.reward-gallery-card.missing{opacity:.55}.reward-gallery-card.missing .reward-card-back{border-color:#8d6480;outline-color:#5b4055}
.reward-loading{position:absolute;inset:120px 0 var(--control-zone);display:grid;place-items:center;font-size:16px}
body.utility-open .reward-panel,body.utility-open .reward-heading{visibility:hidden}
@media(max-height:700px){.reward-panel{max-height:53svh;padding:10px 12px}.reward-stats>div{min-height:27px}.reward-earned{padding-bottom:5px;margin-bottom:5px}.reward-earned strong{font-size:21px}.quest-screen .reward-note{margin-top:6px;font-size:11px}.reward-heading h1{font-size:20px}.reward-card-stage{top:109px;bottom:calc(var(--control-zone) + 58px)}}
@media(prefers-reduced-motion:reduce){.reward-card-back.opening{animation:none}}
/* Keep the portrait face above the results panel and use the approved frame on card backs. */
.reward-hero{top:42px;right:-38%;width:145%}
.reward-card-back{position:relative;isolation:isolate;border:0;outline:0;background:#1b1421;clip-path:polygon(5% 1%,95% 1%,99% 5%,99% 95%,94% 99%,6% 99%,1% 95%,1% 5%)}
.reward-card-back:before{content:"";position:absolute;inset:0;background:url(assets/card-frames/sisters-r-v1.webp) center/contain no-repeat;z-index:-1;pointer-events:none}
.reward-card-back b{font-weight:900;text-shadow:0 1px 4px #140917}

/* Remote login stays within the scrollable result panel on small screens. */
.reward-login{top:118px;max-height:none}
.reward-login [data-google-login]{min-height:44px;width:min(100%,280px);margin:10px auto;overflow:hidden}
.reward-login h2{font-size:17px}.reward-login p{font-size:13px;line-height:1.6}
.reward-claim-warning{font-size:12px;line-height:1.5;color:#ffd3e5}

/* Title auth updates this panel only; the name form and thumb dock stay in place. */
.title-auth:empty{display:none}
.title-auth{margin:6px 0}
.title-auth-panel{padding:9px 10px;background:#111114f5;border:1px solid #f347a0;border-left:3px solid #f347a0;text-align:left}
#app .title-auth-panel h2{font-size:16px;line-height:1.4;margin:0 0 8px;font-weight:800}
.title-auth [data-title-google]{width:min(100%,280px);min-height:40px;margin:0 auto 3px}
#app .title-auth .title-auth-link{width:auto;min-height:28px;height:auto;padding:3px 5px;margin:2px 0;font-size:12px;line-height:1.4;background:transparent;border:0;color:#ffc4e1;text-decoration:underline;clip-path:none;box-shadow:none}
#app .title-auth-note{font-size:11px;line-height:1.5;margin:4px 0 0;color:#e6d8e0}
.title-auth-status{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#ffe7f5}
body.thumb-layout #app .welcome-copy.title-auth-expanded>.eyebrow,body.thumb-layout #app .welcome-copy.title-auth-expanded>.subtitle{display:none}
body.thumb-layout #app .welcome-copy.title-auth-expanded h1{font-size:24px;margin-bottom:5px}
@media(max-height:600px){#app .title-auth-panel{padding:6px 8px}#app .title-auth-panel h2{font-size:15px;line-height:1.3;margin-bottom:5px}#app .title-auth-note{font-size:10px;line-height:1.4}body.thumb-layout #app .welcome-copy.title-auth-expanded h1{font-size:22px}}

/* Choose sign-in or guest play before exposing the title's game controls. */
#app .welcome-copy.title-auth-choosing #new-game,#app .welcome-copy.title-auth-choosing>.story-replay,#app .welcome-copy.title-auth-choosing>.collection-entry{display:none}

/* Draw only the real result card; idle/busy states use graphic lines, not a card back. */
.reward-draw-state{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:160px;text-align:center}
.reward-draw-state strong{font:800 22px/1.4 system-ui;letter-spacing:.1em;color:#fff}
.reward-draw-state>span{font:400 13px/1.6 system-ui;color:#d4cbd2}
.reward-draw-lines{position:relative;width:84%;height:48px;overflow:hidden}
.reward-draw-lines i{position:absolute;left:0;right:0;top:8px;height:3px;background:#f347a0;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);opacity:.8}
.reward-draw-lines i:nth-child(2){top:22px;left:20%;right:15%;height:2px;opacity:.4}
.reward-draw-lines i:nth-child(3){top:36px;left:45%;right:5%;height:2px;opacity:.6}
.is-drawing .reward-draw-lines i{animation:reward-line-scan .8s ease-in-out infinite}
.is-drawing .reward-draw-lines i:nth-child(2){animation-delay:-.25s}.is-drawing .reward-draw-lines i:nth-child(3){animation-delay:-.5s}
@keyframes reward-line-scan{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.reward-filters{position:absolute;top:112px;left:16px;right:16px;display:flex;gap:8px;height:36px;z-index:4}
#app .reward-filters>button{flex:1;min-width:0;min-height:36px;height:36px;margin:0;padding:4px 12px;background:#111;color:#ded7dc;border:1px solid #5c5359;border-radius:3px;clip-path:none;box-shadow:none;font:700 14px/1.4 system-ui}
#app .reward-filters>button[aria-pressed=true]{--control-bg:#f347a0;--control-ink:#111;--control-edge:#f347a0;background:#f347a0;border-color:#f347a0;color:#111}
#app .reward-filters>button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.reward-device[data-reward-view=collection] .reward-gallery{top:160px}
.reward-gallery-empty{grid-column:1/-1;font-size:15px;line-height:1.7;padding:18px 0;color:#ddd}
/* Detail uses the available screen, keeping the existing thumb controls in place. */
.quest-screen .reward-device[data-reward-view=detail]{background:#09090c}
.reward-device[data-reward-view=detail]>.brand,.reward-device[data-reward-view=detail]>.reward-heading{display:none}
.reward-device[data-reward-view=detail]>.reward-world{height:100%;opacity:1}
.reward-device[data-reward-view=detail]>.reward-tint{inset:0;background:#000000;mix-blend-mode:normal;opacity:.85}
.reward-device[data-reward-view=detail] .reward-card-stage{inset:40px 6px calc(var(--thumb-bottom) + 76px)}
.reward-device[data-reward-view=detail] .reward-card-stage>.sisters-card{width:min(100%,calc((100svh - var(--thumb-bottom) - 84px)*5/7));max-width:none}
#app .reward-device[data-reward-view=detail] .reward-detail-close{width:100%;aspect-ratio:5/7;height:auto;min-height:0;flex:none;display:block;margin:0;padding:0;border:0;border-radius:0;clip-path:none;background:transparent;color:inherit;box-shadow:none;filter:none;translate:none;cursor:zoom-out}
#app .reward-device[data-reward-view=detail] .reward-detail-close:is(:hover,:active){background:transparent;box-shadow:none;filter:none;translate:none}
#app .reward-device[data-reward-view=detail] .reward-detail-close:focus-visible{outline:2px solid #f347a0;outline-offset:2px}
.reward-detail-close>.sisters-card{width:100%}
.reward-device[data-reward-view=detail] .reward-dock{height:calc(var(--thumb-bottom) + 72px);background:transparent;border:0}
@media(prefers-reduced-motion:reduce){.is-drawing .reward-draw-lines i{animation:none}}
.reward-export-note{position:absolute;left:12px;right:12px;bottom:calc(var(--thumb-bottom) + 76px);z-index:5;margin:0;padding:8px;background:#111e;color:#fff;font:13px/1.6 system-ui}
/* A small optional download control outside the top-right of the card. */
.reward-detail-wrap{position:relative;width:min(100%,calc((100svh - var(--thumb-bottom) - 116px)*5/7));aspect-ratio:5/7;flex:none}
.reward-detail-tools{position:absolute;right:0;top:-36px;height:32px;display:flex;align-items:center}
#app .reward-device[data-reward-view=detail] .reward-export-trigger{--control-bg:transparent;--control-ink:#b8b8bc;display:grid;place-items:center;width:36px;height:32px;min-height:32px;margin:0;padding:6px;border:0;border-radius:3px;background:transparent;color:#b8b8bc;box-shadow:none;clip-path:none;filter:none;translate:none}
#app .reward-device[data-reward-view=detail] .reward-export-trigger:hover{color:#fff;background:#ffffff0a;box-shadow:none;filter:none;translate:none}
#app .reward-device[data-reward-view=detail] .reward-export-trigger:disabled{background:transparent;color:#777;box-shadow:none;animation:reward-saving 1s ease-in-out infinite alternate}
.reward-export-trigger>svg{width:20px;height:20px}
@keyframes reward-saving{to{opacity:.35}}
@media(prefers-reduced-motion:reduce){#app .reward-device[data-reward-view=detail] .reward-export-trigger:disabled{animation:none}}