/* The desktop title stays at the viewport centre, independent of the character. */
#thank-you{overflow-x:hidden;overflow-y:auto;--thanks-reveal:0}
#thank-you .thank-you-content{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0;width:100%;height:100%;margin:0}
#thank-you .thank-you-copy{position:relative;grid-column:2;grid-row:1;z-index:2;width:max-content;min-width:0;text-align:center}
#thank-you .thank-you-copy h2{width:max-content;margin:0 auto;font-size:clamp(64px,11vw,144px);white-space:nowrap}
#thank-you #thanks-message{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(100%,clamp(210px,32vw,400px));max-width:none;min-height:0;margin:22px 0 0;font-size:clamp(14px,1.8vw,19px);line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none;text-wrap:pretty}
#thank-you .thanks-character{position:relative;grid-column:3;grid-row:1;justify-self:start;width:clamp(128px,16vw,250px);min-width:0;height:min(70svh,590px);min-height:180px;margin-left:16px;contain:layout paint;pointer-events:none;user-select:none}
#thank-you .thanks-character canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#thank-you .thanks-character img{display:block;position:absolute;left:-100%;top:0;width:300%;max-width:none;height:100%;object-fit:contain}
#thank-you .thanks-character [hidden]{display:none!important}
html:is([lang=en],[lang=ru]) #thank-you .thank-you-copy h2{font-size:clamp(48px,7vw,100px)}
html[lang=ka] #thank-you .thank-you-copy h2{font-size:clamp(42px,6vw,90px)}
#thank-you[data-character-state=unavailable] .thanks-character{display:none}
@media(max-width:600px){
 #thank-you{padding:20px 16px;--thanks-copy-scale:calc(1 + .4 * var(--thanks-reveal))}
 #thank-you .thank-you-content{display:block}
 #thank-you .thank-you-copy{position:absolute;left:calc(31% + 19% * var(--thanks-reveal));top:calc(44% + 6% * var(--thanks-reveal));transform:translate(-50%,-50%) scale(var(--thanks-copy-scale));width:62%;transform-origin:center}
 #thank-you .thank-you-copy h2{font-size:clamp(48px,14vw,78px)}
 /* Scale the complete text block so line breaks stay fixed during motion. */
 #thank-you #thanks-message{width:100%;margin-top:18px;font-size:clamp(13px,3.55vw,16px);line-height:1.5}
 #thank-you .thanks-character{position:absolute;right:0;top:50%;transform:translateY(-50%);width:calc(38% - 6px);height:min(69svh,500px);margin-left:0}
 html:is([lang=en],[lang=ru]) #thank-you .thank-you-copy h2{font-size:clamp(30px,8vw,48px)}
 html[lang=ka] #thank-you .thank-you-copy h2{font-size:clamp(28px,7.8vw,44px)}
}
@media(max-height:450px){#thank-you .thanks-character{height:calc(100svh - 60px);min-height:150px}#thank-you #thanks-message{margin-top:14px}}