/* Supplied artwork remains intact; CSS frames the original images. */
.welcome.emoji-banner{min-height:260px;background:#fff7e8;overflow:hidden;margin-bottom:26px}
.welcome.emoji-banner:before{content:'';position:absolute;inset:0 0 0 35%;background:url('/assets/emoji-banner-reference.png') center 43%/108% auto no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#0004 22%,#000a 42%,#000 65%);z-index:-1}
.auth-intro.auth-collage{isolation:isolate;overflow:hidden;justify-content:flex-start;padding:76px clamp(40px,5vw,100px) 320px;background:#fff7e8;color:#322338}
.auth-collage:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/emoji-banner-reference.png') center 48%/cover no-repeat}
.auth-collage:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff7e8 0%,#fff7e8fa 25%,#fff7e8f2 42%,#fff7e899 60%,#fff7e800 82%)}
.auth-collage .brand{margin-bottom:46px}.auth-collage h1{font-weight:850;color:#322338;text-shadow:0 2px 16px #fff7e8;max-width:480px}
.auth-intro.auth-collage .eyebrow{color:#79532d;max-width:440px}.auth-intro.auth-collage>p{color:#533e30;font-weight:500;text-shadow:0 1px 8px #fff7e8;max-width:470px}
.emoji-banner>div:first-child{max-width:60%}.emoji-banner h1{max-width:510px}.emoji-banner .muted{color:#79563b}
.stage-halo{display:none}
.ref-thumb{display:block;aspect-ratio:1;background-image:url('/assets/emoji-six-reference.png');background-size:346% 287.2%;background-repeat:no-repeat;border-radius:15px}
.ref-roll{background-position:3.252% 4.274%}.ref-peek{background-position:48.293% 4.274%}.ref-tears{background-position:93.333% 4.274%}
.ref-six{background-position:3.252% 78.419%}.ref-crack{background-position:48.293% 78.419%}.ref-sigh{background-position:93.333% 78.419%}
.emoji-fallback{height:auto;width:70%;max-height:95%;left:15%;top:3%}
.pose-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pose-picker button{background:#fff1cf;color:#83592c;padding:7px;border:2px solid transparent;font-weight:700}
.pose-picker button[aria-pressed=true]{background:#ffde8e;color:#6b3b20;border-color:#f8a33d}
.pose-picker .ref-thumb{width:100%;margin-bottom:5px}
.companion-dialog{background:linear-gradient(150deg,#fff5da,#fff);width:490px}
.companion-dialog .emoji-stage.intro{height:220px}
.companion-dialog h2{color:#76432a}.companion-dialog p{color:#88705a}
.question-mode-banner{display:flex;gap:16px;align-items:center;padding:16px 18px;margin:-5px 0 22px;border-radius:12px;border:0;background:#356fd3;color:#fff;box-shadow:0 5px 0 #2355a6}
.question-mode-banner strong{font-size:1.18rem;white-space:nowrap}.question-mode-banner span{font-size:.9rem;font-weight:700;color:inherit;opacity:.95}
.mode-multi{background:#dc7a12;color:#fff;box-shadow:0 5px 0 #a85208}.mode-judge{background:#238362;color:#fff;box-shadow:0 5px 0 #176047}
.submit-now{background:#e25c34;color:#fff;min-width:86px}
#type-change{max-width:calc(100vw - 32px);width:470px;border:2px solid #f4c277;border-radius:22px;padding:26px 30px 30px;background:#fffbf2;text-align:center}
#type-change::backdrop{background:#241a2d99;backdrop-filter:blur(5px)}
#type-change h2{font-size:1.75rem;color:#945119;margin-bottom:8px}
.type-unit-emoji{width:132px;margin:0 auto 12px;box-shadow:0 10px 30px #c47c2430}
.type-change-quip{font-size:1.05rem;line-height:1.7;font-weight:750;color:#573b2d;margin:8px 0 14px}
#type-change-count{font-weight:800;color:#7d4b22}
#type-change-rule{font-weight:700;font-size:1.1rem;line-height:1.8;background:#fff0ca;padding:18px;border-radius:12px}
button:disabled,button:disabled:hover{cursor:default}
@media(max-width:520px){
 .welcome.emoji-banner{min-height:245px}
 .welcome.emoji-banner:before{left:20%;background-position:center 44%;mask-image:linear-gradient(90deg,transparent,#0004 30%,#000 85%)}
 .emoji-banner>div:first-child{max-width:80%}.emoji-banner h1{max-width:220px}
 .question-mode-banner{padding:12px;gap:10px;flex-wrap:wrap}.q-footer .actions{flex-wrap:wrap}
 .companion-dialog .emoji-stage.intro{height:180px}
 .pose-picker .ref-thumb{max-height:80px}.pose-picker button{font-size:.8rem}
}
@media(max-width:800px){
 .auth-intro.auth-collage{display:flex;min-height:310px;padding:30px 28px;justify-content:center;align-items:flex-start}
 .auth-collage:before{left:22%;background-position:center 43%}
 .auth-collage:after{background:linear-gradient(90deg,#fff7e8 0%,#fff7e8fa 25%,#fff7e8ed 50%,#fff7e800 96%)}
 .auth-collage .brand{margin-bottom:28px}.auth-collage h1{max-width:310px;font-size:1.8rem}.auth-collage .eyebrow{max-width:240px;line-height:1.7}
}