/* Santa's Worlds – entry (home, login, registration, world selection) · 2026-11-03 rebuild
   Mobile first. Everything the player sees is drawn by the game: no browser bubbles, no native
   checkboxes/selects, no autofill colours, no zoom on focus, no tap flashes, no pull-to-refresh. */

@font-face{font-family:'SW Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cinzel-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SW Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cinzel-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'SW Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/cinzel-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SW Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/cinzel-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'SW Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SW Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 --gold:#f6d58a;--gold-2:#e2b25a;--gold-3:#a8732c;--red:#b0152e;--red-2:#7a0b1d;--red-3:#4a0612;
 --cream:#fff7e6;--parch:#fbf0d7;--parch-2:#f1dcb0;--ink:#3d1c10;--ink-2:#6e4a33;--ok:#2f8a4c;--bad:#b3192f;
 --display:'SW Cinzel','Cinzel',Georgia,'Times New Roman',serif;
 --text:'SW Nunito','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
 --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
 --vh:100dvh;color-scheme:light;
}
@supports not (height:100dvh){:root{--vh:100vh}}

/* ---------- Browser interference off ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#14061b;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--text);color:var(--cream);overflow:hidden;position:fixed;inset:0;touch-action:manipulation;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
button,a,label,.choice,.gbtn{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
button:disabled{cursor:default}
input{font:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
input::-ms-reveal,input::-ms-clear{display:none}
input::-webkit-credentials-auto-fill-button,input::-webkit-contacts-auto-fill-button,input::-webkit-strong-password-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;width:0;margin:0}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink);-webkit-box-shadow:0 0 0 60px #fffaf0 inset!important;transition:background-color 99999s 0s}
input:autofill{background:#fffaf0!important}
:focus{outline:none}
:focus-visible{outline:3px solid #ffe7a3;outline-offset:3px;border-radius:12px}
input:focus-visible{outline:none}
.gbtn:focus-visible{outline:none;filter:drop-shadow(0 0 10px rgba(255,226,150,.95)) brightness(1.1)}
[hidden]{display:none!important}
::selection{background:#f1c96a;color:#3d1c10}

/* ---------- Living background ---------- */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:#14061b}
.bg>*{position:absolute;inset:0;pointer-events:none}
.bg-art{inset:-3%;background:#1b0a22 url(https://assets.santaworlds.com/startseite/entry_bg_new.webp) center top/cover no-repeat;transform-origin:50% 40%;animation:swKen 26s ease-in-out infinite alternate;transition:filter .8s ease,transform .8s ease}
@keyframes swKen{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(0,-1.2%,0)}}
.bg-aurora{mix-blend-mode:screen;opacity:.55;height:55%}
.bg-aurora i{position:absolute;top:-20%;width:70%;height:80%;border-radius:50%;filter:blur(38px);opacity:.6;animation:swAur 14s ease-in-out infinite alternate}
.bg-aurora i:nth-child(1){left:-10%;background:radial-gradient(closest-side,#3dffb0,transparent)}
.bg-aurora i:nth-child(2){left:30%;background:radial-gradient(closest-side,#7b5cff,transparent);animation-duration:18s;animation-delay:-6s}
.bg-aurora i:nth-child(3){right:-15%;background:radial-gradient(closest-side,#36d8ff,transparent);animation-duration:21s;animation-delay:-11s}
@keyframes swAur{0%{transform:translate3d(-6%,0,0) scaleX(1) skewX(-8deg);opacity:.35}50%{opacity:.75}100%{transform:translate3d(8%,6%,0) scaleX(1.25) skewX(10deg);opacity:.45}}
.bg-stars{height:45%;background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 8%,#fff,transparent),radial-gradient(1.6px 1.6px at 58% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 77% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 30%,#fff,transparent),radial-gradient(1.1px 1.1px at 22% 36%,#fff,transparent),radial-gradient(1.3px 1.3px at 46% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 68% 4%,#fff,transparent);animation:swTwinkle 3.4s ease-in-out infinite alternate}
@keyframes swTwinkle{from{opacity:.25}to{opacity:.95}}
.bg-glow{background:radial-gradient(60% 40% at 50% 100%,rgba(255,170,70,.28),transparent 70%);animation:swGlow 5s ease-in-out infinite alternate}
@keyframes swGlow{from{opacity:.6}to{opacity:1}}
.bg-snow{width:100%;height:100%}
.bg-embers i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff6c9 0,#ffcf5c 40%,rgba(255,160,40,0) 72%);box-shadow:0 0 10px 2px rgba(255,190,80,.55);opacity:0;animation:swEmber var(--d) linear var(--w) infinite}
@keyframes swEmber{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}60%{opacity:.9}100%{transform:translate3d(var(--dx),calc(-1 * var(--vh) * .75),0);opacity:0}}
.bg-shade{background:linear-gradient(180deg,rgba(20,6,27,.55) 0,rgba(20,6,27,0) 22%,rgba(20,6,27,0) 55%,rgba(20,6,27,.72) 100%);transition:background .7s ease}
body.is-auth .bg-art{filter:blur(6px) brightness(.5) saturate(1.15);animation-play-state:paused}
body.is-auth .bg-shade{background:radial-gradient(120% 80% at 50% 40%,rgba(30,6,20,.15),rgba(15,3,12,.78))}
body.is-auth .bg-glow{opacity:.4}

/* ---------- Opening curtain ---------- */
.curtain{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:auto;cursor:pointer}
.curtain-half{position:absolute;top:0;bottom:0;width:51%;background:
 repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 3.2vmax,rgba(255,255,255,.07) 4.6vmax,rgba(0,0,0,0) 6vmax,rgba(0,0,0,.35) 8vmax),
 linear-gradient(180deg,#a3112a,#6c0717 70%,#4a040f);box-shadow:inset 0 -40px 60px rgba(0,0,0,.45);transition:transform 1.35s cubic-bezier(.7,0,.2,1)}
.curtain-l{left:0;border-right:3px solid #e9bd62;transform-origin:left}
.curtain-r{right:0;border-left:3px solid #e9bd62;transform-origin:right}
.curtain-half::after{content:"";position:absolute;bottom:0;left:0;right:0;height:26px;background:repeating-linear-gradient(90deg,#f2c86d 0 6px,#b0802f 6px 9px);mask:linear-gradient(#000,transparent);-webkit-mask:linear-gradient(#000,transparent);opacity:.9}
.curtain-valance{position:absolute;left:0;right:0;top:0;height:min(14vh,110px);background:radial-gradient(60px 46px at 50% 0,transparent 0 98%,#7b0a1c 100%) 0 100%/120px 46px repeat-x,linear-gradient(#8f0f24,#6a0716);border-bottom:4px solid #e9bd62;box-shadow:0 10px 24px rgba(0,0,0,.5);transition:transform 1.2s cubic-bezier(.7,0,.2,1) .15s}
.curtain-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;transition:opacity .5s ease,transform .9s cubic-bezier(.5,0,.2,1)}
.curtain-center::before{content:"";position:absolute;left:50%;top:50%;width:min(130vw,1100px);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,214,130,.42),rgba(255,170,80,.12) 45%,transparent 70%);animation:swPulse 2.6s ease-in-out infinite;pointer-events:none}
.curtain-center>*{position:relative}
.curtain-center img{width:min(82vw,520px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,200,90,.45));animation:swLogoIn 1.1s cubic-bezier(.2,1.4,.4,1) both}
.curtain-center p{margin:0;font:700 clamp(15px,4vw,20px)/1.3 var(--display);letter-spacing:.06em;color:#ffe9b8;text-shadow:0 2px 10px #000;animation:swFadeUp .9s .5s both}
.curtain-skip{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(18px + var(--safe-b));padding:10px 18px;border-radius:999px;background:rgba(30,5,12,.55);border:1px solid rgba(246,213,138,.6);font:800 14px var(--text);color:#ffe9b8;letter-spacing:.04em}
.curtain.is-open .curtain-l{transform:translate3d(-102%,0,0) skewY(-2deg)}
.curtain.is-open .curtain-r{transform:translate3d(102%,0,0) skewY(2deg)}
.curtain.is-open .curtain-valance{transform:translate3d(0,-110%,0)}
.curtain.is-open .curtain-center{opacity:0;transform:scale(.7) translate3d(0,-30vh,0)}
.curtain.is-open .curtain-skip{opacity:0;transition:opacity .3s}
.curtain.is-open{pointer-events:none}
@keyframes swLogoIn{0%{opacity:0;transform:scale(.55) translate3d(0,30px,0);filter:blur(12px)}100%{opacity:1;transform:none}}
@keyframes swFadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ---------- Top bar ---------- */
.topbar{position:fixed;z-index:30;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));pointer-events:none}
.topbar>*{pointer-events:auto}
.tb-back,.lang-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;background:rgba(28,6,16,.55);border:1px solid rgba(246,213,138,.55);box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:800 14px var(--text);color:#ffeec7;letter-spacing:.02em;transition:transform .15s,background .2s}
.tb-back:active,.lang-btn:active{transform:scale(.95)}
.tb-back svg,.lang-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lang{margin-left:auto;position:relative}
.lang-caret{width:16px!important;height:16px!important;transition:transform .2s}
.lang-btn[aria-expanded=true] .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;max-height:min(60vh,360px);overflow:auto;margin:0;padding:6px;list-style:none;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#f3e0b8);border:2px solid var(--gold-2);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 4px rgba(122,11,29,.85);animation:swPop .22s cubic-bezier(.2,1.3,.4,1);transform-origin:top right;overscroll-behavior:contain}
.lang-menu li button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;font:800 15px var(--text);color:var(--ink);text-align:left}
.lang-menu li button:hover,.lang-menu li button:focus-visible{background:rgba(176,21,46,.1);outline:none}
.lang-menu li button[aria-selected=true]{background:linear-gradient(180deg,#b81a33,#7a0b1d);color:#fff3d2}
.lang-menu li button[aria-selected=true]::after{content:"✓";font-weight:900}
body.is-home .tb-back{display:none!important}

/* ---------- Stage & views ---------- */
.stage{position:fixed;inset:0;z-index:10}
.view{position:absolute;inset:0;display:none}
.view.is-active{display:flex}

/* ---------- Home ---------- */
.home{flex-direction:column;align-items:center;justify-content:space-between;padding:calc(54px + var(--safe-t)) calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l));text-align:center}
.home-hero{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.logo-wrap{position:relative;width:min(86vw,460px);aspect-ratio:1100/391;animation:swLogoIn 1.1s cubic-bezier(.2,1.4,.4,1) .15s both}
.logo{position:relative;z-index:2;display:block;width:100%;height:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,205,110,.35));animation:swFloat 6s ease-in-out 1.3s infinite}
.logo-rays{position:absolute;z-index:1;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,226,150,.0) 0 7deg,rgba(255,226,150,.22) 9deg,rgba(255,226,150,0) 12deg 20deg);mask:radial-gradient(closest-side,#000 25%,transparent 72%);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 72%);animation:swSpin 40s linear infinite;opacity:.85}
.logo-shine{position:absolute;z-index:3;inset:0;pointer-events:none;-webkit-mask:url(https://assets.santaworlds.com/startseite/entry_logo_gold.webp) center/100% 100% no-repeat;mask:url(https://assets.santaworlds.com/startseite/entry_logo_gold.webp) center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.85) 48%,transparent 58% 100%) -150% 0/250% 100% no-repeat;animation:swShine 5.5s ease-in-out 1.6s infinite;mix-blend-mode:overlay}
@keyframes swShine{0%{background-position:-150% 0}35%,100%{background-position:150% 0}}
@keyframes swSpin{to{transform:rotate(360deg)}}
@keyframes swFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.tagline{margin:-2px 0 0;padding:7px 34px 8px;max-width:min(92vw,440px);background:linear-gradient(90deg,transparent,rgba(45,5,18,.72) 18%,rgba(45,5,18,.72) 82%,transparent);border-image:linear-gradient(90deg,transparent,#e9bd62 25%,#e9bd62 75%,transparent) 1;border-width:1px 0;border-style:solid;font:700 clamp(13px,3.6vw,17px)/1.35 var(--display);letter-spacing:.05em;color:#ffeec4;text-shadow:0 2px 6px #000,0 0 18px rgba(0,0,0,.6);animation:swFadeUp .8s .7s both}
.home-art,.home-features{display:none}
.home-actions{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:auto}
.foot{margin:2px 0 0;font:600 11px var(--text);color:rgba(255,238,199,.55);letter-spacing:.04em}

/* Graphic buttons (artwork from the asset server) */
.gbtn{position:relative;display:grid;place-items:center;width:min(80vw,350px);aspect-ratio:1100/357;background:url(https://assets.santaworlds.com/startseite/entry_button_red.webp) center/100% 100% no-repeat;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .2s;animation:swFadeUp .7s both}
.gbtn>span{position:relative;z-index:2;max-width:64%;font:900 clamp(16px,4.9vw,23px)/1.05 var(--display);letter-spacing:.04em;color:#fff4d6;text-shadow:0 2px 0 #5a0714,0 3px 8px rgba(0,0,0,.6);text-wrap:balance;padding-bottom:1%}
.gbtn::after{content:"";position:absolute;z-index:1;inset:24% 17%;border-radius:40px;background:linear-gradient(105deg,transparent 0 35%,rgba(255,255,255,.55) 47%,transparent 60% 100%) -160% 0/260% 100% no-repeat;animation:swShine 4.2s ease-in-out 2.2s infinite;mix-blend-mode:soft-light;pointer-events:none}
.gbtn:hover{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)) brightness(1.08)}
.gbtn:active{transform:scale(.95)}
.gbtn.is-busy>span{opacity:.0}
.gbtn.is-busy::before{content:"";position:absolute;z-index:3;width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,240,200,.35);border-top-color:#fff4d6;animation:swSpin .8s linear infinite}
.gbtn:disabled:not(.is-busy){filter:grayscale(.6) brightness(.8)}
.gbtn-main{animation-delay:.9s}
.gbtn-alt{width:min(74vw,316px);aspect-ratio:2172/708;background-image:url(https://assets.santaworlds.com/startseite/button-secondary.webp);animation-delay:1.05s}
.gbtn-alt>span{font-size:clamp(14px,4.2vw,19px);max-width:62%}
.gbtn-main.gbtn-glow::before{content:"";position:absolute;z-index:0;inset:18% 10%;border-radius:999px;box-shadow:0 0 28px 8px rgba(255,190,80,.55);animation:swPulse 2.4s ease-in-out infinite}
@keyframes swPulse{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

.social{display:flex;justify-content:center;gap:10px;margin-top:4px;animation:swFadeUp .7s 1.2s both}
.social a{display:block;width:44px;height:44px;border-radius:50%;transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .2s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.social a:hover{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) brightness(1.1)}
.social a:active{transform:scale(.92)}
.social img{width:100%;height:100%;object-fit:contain}

/* Sparkle bursts on taps */
.sw-magic-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.sw-magic-spark{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);margin:calc(var(--size)/-2);border-radius:50%;background:radial-gradient(circle,#fff,#ffe08a 45%,rgba(255,190,70,0) 70%);animation:swSpark var(--duration) cubic-bezier(.2,.7,.3,1) forwards}
.sw-magic-spark.star{border-radius:0;background:#fff3c4;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes swSpark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- Auth views: scene stays behind, card in front ---------- */
.auth{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(62px + var(--safe-t)) calc(14px + var(--safe-r)) calc(22px + var(--safe-b)) calc(14px + var(--safe-l));scrollbar-width:none}
.auth::-webkit-scrollbar{display:none}
.view.auth.is-active{display:block}
.card{position:relative;width:100%;max-width:430px;margin:min(5vh,40px) auto 0;padding-top:clamp(38px,11vw,52px);animation:swCardIn .55s cubic-bezier(.2,1.25,.4,1) both}
.view.is-leaving{display:block;animation:swCardOut .22s ease forwards;pointer-events:none}
@keyframes swCardIn{from{opacity:0;transform:translate3d(0,26px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes swCardOut{to{opacity:0;transform:translate3d(0,-10px,0) scale(.98)}}
.card-banner{position:absolute;z-index:3;left:50%;top:0;width:min(104%,452px);aspect-ratio:2172/677;translate:-50% 0;display:grid;place-items:center;background:url(https://assets.santaworlds.com/startseite/title-banner.webp) center/100% 100% no-repeat;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));animation:swBanner .7s cubic-bezier(.2,1.5,.4,1) .08s both}
@keyframes swBanner{from{opacity:0;transform:translate3d(0,-14px,0) scale(.86)}to{opacity:1;transform:none}}
.card-banner h2{margin:0;max-width:66%;padding-bottom:2%;font:900 clamp(15px,4.6vw,21px)/1.05 var(--display);letter-spacing:.035em;color:#fff2cf;text-shadow:0 2px 0 #4b0511,0 3px 10px rgba(0,0,0,.55);text-align:center;text-wrap:balance}
.card-body{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:clamp(64px,18vw,84px) clamp(16px,5vw,28px) 20px;border-radius:26px;background:
 radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),
 radial-gradient(90% 70% at 100% 100%,rgba(214,168,96,.28),transparent 70%),
 linear-gradient(180deg,var(--parch),var(--parch-2));color:var(--ink);
 box-shadow:0 0 0 2px #f4d58e,0 0 0 5px #8d1023,0 0 0 7px #d9a64c,0 26px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(168,115,44,.45),inset 0 -14px 30px rgba(168,115,44,.18)}
.card-body::before,.card-body::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none;opacity:.8;background:
 radial-gradient(circle at 30% 30%,#d43a48 0 4px,transparent 4.5px),radial-gradient(circle at 48% 20%,#e5505d 0 3.5px,transparent 4px),radial-gradient(circle at 22% 50%,#c42a3a 0 3.5px,transparent 4px),
 conic-gradient(from 200deg at 30% 30%,transparent 0 10deg,#2f7a3b 10deg 60deg,transparent 60deg 120deg,#24652f 120deg 170deg,transparent 170deg)}
.card-body::before{left:8px;bottom:8px;transform:rotate(-90deg)}
.card-body::after{right:8px;bottom:8px;transform:rotate(180deg)}
.card-lead{margin:2px 0 0;text-align:center;font:900 clamp(18px,5vw,22px)/1.25 var(--display);color:var(--red-2);letter-spacing:.02em}
.card-desc{margin:0;text-align:center;font:600 15px/1.45 var(--text);color:var(--ink-2)}
.card-alt{margin:2px 0 0;text-align:center;font:600 15px/1.4 var(--text);color:var(--ink-2)}
.gbtn-card{width:min(100%,340px);margin:4px auto 0;animation:none}
.gbtn-card>span{font-size:clamp(15px,4.4vw,20px)}
.lbtn{align-self:center;padding:10px 14px;border-radius:12px;font:800 15px var(--text);color:var(--red-2);text-decoration:underline;text-decoration-color:rgba(122,11,29,.35);text-underline-offset:4px;transition:background .15s}
.lbtn:hover{background:rgba(176,21,46,.08)}
.lbtn:active{transform:scale(.97)}
.lbtn-inline{padding:6px 8px;display:inline}

/* Steps */
.steps{display:flex;justify-content:center;gap:6px;margin:0 0 2px;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;align-items:center;gap:6px;font:800 12px var(--text);color:#9a7a5d;letter-spacing:.03em;text-transform:uppercase}
.steps li+li::before{content:"";width:16px;height:2px;border-radius:2px;background:#d8bd8a;margin-right:2px}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ecd8ae;color:#8b6a49;font:900 12px var(--text);box-shadow:inset 0 0 0 1.5px #cfae74}
.steps .is-on{color:var(--red-2)}
.steps .is-on b{background:linear-gradient(180deg,#c91e3a,#7a0b1d);color:#fff2cf;box-shadow:0 0 0 2px #f1cc7c,0 3px 8px rgba(122,11,29,.35);animation:swPulseDot 2s ease-in-out infinite}
.steps .is-done{color:var(--ok)}
.steps .is-done b{background:linear-gradient(180deg,#46a865,#2a7444);color:#fff;box-shadow:0 0 0 2px #bfe3c8}
@keyframes swPulseDot{50%{box-shadow:0 0 0 2px #f1cc7c,0 0 0 6px rgba(241,204,124,.35)}}
@media (max-width:370px){.steps span{display:none}.steps li+li::before{width:22px}}

/* Fields */
.field{display:flex;flex-direction:column;gap:5px}
.field label{padding-left:4px;font:800 13px var(--text);letter-spacing:.05em;text-transform:uppercase;color:#8a5a33}
.fbox{position:relative;display:flex;align-items:center;min-height:54px;border-radius:16px;background:linear-gradient(180deg,#fffdf7,#fff6e3);box-shadow:inset 0 0 0 2px #d8b578,inset 0 2px 6px rgba(120,80,30,.12),0 1px 0 rgba(255,255,255,.8);transition:box-shadow .2s,transform .2s}
.fbox:focus-within{box-shadow:inset 0 0 0 2px #b0152e,0 0 0 4px rgba(246,213,138,.75),inset 0 2px 6px rgba(120,80,30,.1)}
.fico{flex:0 0 auto;width:22px;height:22px;margin-left:14px;fill:none;stroke:#b0844a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.fbox:focus-within .fico{stroke:var(--red)}
.fbox input{flex:1;min-width:0;height:54px;padding:0 12px;border:0;background:transparent;color:var(--ink);font:700 17px var(--text);letter-spacing:.01em}
.fbox input::placeholder{color:#b49778;font-weight:600;opacity:1}
.feye{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;margin-right:3px;border-radius:12px}
.feye svg{width:22px;height:22px;fill:none;stroke:#9b6f3f;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feye .eye-off{opacity:0;transition:opacity .15s}
.feye.is-on .eye-off{opacity:1}
.feye:active{background:rgba(176,21,46,.08)}
.fstate{flex:0 0 auto;width:26px;height:26px;margin-right:12px;border-radius:50%;display:grid;place-items:center;font:900 14px var(--text);color:#fff;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.field.is-ok .fstate{transform:scale(1);background:var(--ok)}
.field.is-ok .fstate::before{content:"✓"}
.field.is-bad .fstate{transform:scale(1);background:var(--bad)}
.field.is-bad .fstate::before{content:"!"}
.field.is-wait .fstate{transform:scale(1);background:none;border:3px solid #e6cfa2;border-top-color:var(--red);animation:swSpin .8s linear infinite}
.fmsg{min-height:0;margin:0;padding-left:6px;font:700 13px/1.35 var(--text);color:#8f6b4d}
.fmsg:empty{display:none}
.field.is-bad .fbox{box-shadow:inset 0 0 0 2px var(--bad),0 0 0 4px rgba(179,25,47,.12)}
.field.is-bad .fmsg{color:var(--bad)}
.field.is-ok .fmsg{color:var(--ok)}
.field.is-shake .fbox{animation:swShake .42s ease}
@keyframes swShake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.pstrength{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 4px;margin-top:2px}
.pstrength i{height:5px;border-radius:5px;background:#e8d3ab;transition:background .25s}
.pstrength[data-level="1"] i:nth-child(-n+1){background:#d2493c}
.pstrength[data-level="2"] i:nth-child(-n+2){background:#e59a2f}
.pstrength[data-level="3"] i:nth-child(-n+3){background:#7bb34a}
.pstrength[data-level="4"] i{background:#2f8a4c}

/* Toggle (own checkbox) */
.toggle{position:relative;display:flex;align-items:center;gap:12px;padding:6px 4px;cursor:pointer;font:700 15px/1.35 var(--text);color:var(--ink)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tg-box{position:relative;flex:0 0 auto;width:50px;height:30px;border-radius:30px;background:#e2caa0;box-shadow:inset 0 2px 4px rgba(90,50,20,.3),inset 0 0 0 1.5px #c9a46a;transition:background .25s}
.tg-box::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#f4e6c9);box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.toggle input:checked+.tg-box{background:linear-gradient(180deg,#c91e3a,#8a0c22);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 0 0 2px #f1cc7c}
.toggle input:checked+.tg-box::after{transform:translateX(20px)}
.toggle input:focus-visible+.tg-box{outline:3px solid #b0152e;outline-offset:3px}
.toggle.is-bad .tg-box{box-shadow:inset 0 0 0 2px var(--bad),0 0 0 4px rgba(179,25,47,.18)}
.toggle.is-shake{animation:swShake .42s ease}

/* Age / goodbye medal */
.age-medal{width:112px;height:112px;margin:-6px auto 0;border-radius:50%;padding:5px;background:conic-gradient(from 0deg,#f6d58a,#b07a2e,#f6d58a,#b07a2e,#f6d58a);box-shadow:0 8px 20px rgba(90,40,10,.35);animation:swFloat 4s ease-in-out infinite}
.age-medal img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#7a0b1d;box-shadow:inset 0 0 0 3px #7a0b1d}

/* Character choice */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px 12px;border-radius:22px;background:linear-gradient(180deg,#fffaf0,#f1ddb5);box-shadow:inset 0 0 0 2px #d8b578,0 8px 18px rgba(90,50,20,.18);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;animation:swFadeUp .5s both}
.choice:nth-child(2){animation-delay:.08s}
.choice:hover{transform:translateY(-3px)}
.choice:active{transform:scale(.96)}
.choice.is-picked{box-shadow:inset 0 0 0 3px var(--red),0 0 0 4px #f1cc7c,0 10px 24px rgba(122,11,29,.3)}
.choice-img{display:block;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#c4243e,#5d0716)}
.choice-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.choice:hover .choice-img img{transform:scale(1.06)}
.choice strong{font:900 17px var(--display);color:var(--red-2);letter-spacing:.04em}

/* Avatars */
.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;animation:swFadeUp .45s both}
.avatar-option .av-ring{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;padding:4px;background:conic-gradient(#f6d58a,#b07a2e,#f6d58a,#b07a2e,#f6d58a);box-shadow:0 6px 14px rgba(90,40,10,.28);transition:transform .22s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.avatar-option img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#7a0b1d;display:block}
.avatar-option span.av-name{font:800 12.5px/1.2 var(--text);color:var(--ink-2);text-align:center}
.avatar-option:active .av-ring{transform:scale(.93)}
.avatar-option.selected .av-ring{transform:scale(1.06);background:conic-gradient(#ffe9a8,#e0353f,#ffe9a8,#e0353f,#ffe9a8);box-shadow:0 0 0 3px #fff3cf,0 0 22px 4px rgba(255,190,80,.8)}
.avatar-option.selected .av-ring::after{content:"✓";position:absolute;right:-2px;bottom:2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok);color:#fff;font:900 15px var(--text);box-shadow:0 0 0 3px #fff7e6;animation:swPop .3s cubic-bezier(.3,1.8,.5,1)}
.avatar-option.selected span.av-name{color:var(--red-2)}
@keyframes swPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Worlds */
.server-list{display:flex;flex-direction:column;gap:10px}
.server-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;text-align:left;background:linear-gradient(180deg,#fffaf0,#f2dfb9);box-shadow:inset 0 0 0 2px #d8b578,0 6px 14px rgba(90,50,20,.16);color:var(--ink);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;animation:swFadeUp .45s both}
.server-card.chosen:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--red),0 10px 22px rgba(122,11,29,.22)}
.server-card.chosen:active{transform:scale(.98)}
.server-card.locked{opacity:.72;filter:grayscale(.35);cursor:default}
.server-icon{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:radial-gradient(circle at 40% 30%,#3e7ad6,#173a78);box-shadow:inset 0 0 0 2px #f1cc7c;font-size:24px}
.server-card.locked .server-icon{background:radial-gradient(circle at 40% 30%,#8c7a66,#4f4134)}
.sw-world-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sw-world-content strong{font:900 17px/1.2 var(--display);color:var(--red-2);letter-spacing:.02em}
.sw-world-description{font:600 13px/1.35 var(--text);color:var(--ink-2)}
.sw-world-status{font:800 12px var(--text);color:var(--ok);text-transform:uppercase;letter-spacing:.05em}
.server-card.locked .sw-world-status{color:#8a6a4c}
.sw-world-notice{font:600 12.5px/1.35 var(--text);color:#8a4b2a}
.server-state{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:15px}
.server-state.ready{background:linear-gradient(180deg,#c91e3a,#7a0b1d);color:#fff2cf;box-shadow:0 0 0 2px #f1cc7c}
.server-state.ready::before{content:"▶";font-size:13px;margin-left:2px}
.server-skel{height:74px;border-radius:18px;background:linear-gradient(90deg,#f0dcb3 0,#fbefd6 50%,#f0dcb3 100%) 0 0/200% 100%;animation:swSkel 1.2s linear infinite}
@keyframes swSkel{to{background-position:-200% 0}}

/* ---------- In-game dialog ---------- */
.gdlg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 18px calc(20px + var(--safe-b))}
.gdlg-shade{position:absolute;inset:0;background:rgba(14,3,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:swFade .25s both}
@keyframes swFade{from{opacity:0}}
.gdlg-card{position:relative;width:min(100%,380px);padding:50px 22px 18px;border-radius:24px;text-align:center;color:var(--ink);background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.8),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:0 0 0 2px #f4d58e,0 0 0 5px #8d1023,0 0 0 7px #d9a64c,0 30px 70px rgba(0,0,0,.6);animation:swDlgIn .42s cubic-bezier(.2,1.4,.4,1) both;margin-top:30px}
@keyframes swDlgIn{from{opacity:0;transform:translate3d(0,24px,0) scale(.88)}to{opacity:1;transform:none}}
.gdlg-medal{position:absolute;left:50%;top:-34px;translate:-50% 0;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#d72b45,#6e0819);box-shadow:0 0 0 3px #f6d58a,0 0 0 6px #8d1023,0 10px 20px rgba(0,0,0,.4);font:900 30px var(--text);color:#ffe6a6;animation:swPop .45s cubic-bezier(.3,1.8,.5,1) .1s both}
.gdlg[data-kind=success] .gdlg-medal{background:radial-gradient(circle at 40% 30%,#4fbf72,#1f6a3a)}
.gdlg[data-kind=info] .gdlg-medal{background:radial-gradient(circle at 40% 30%,#3f86e0,#173f80)}
.gdlg-card h2{margin:0 0 8px;font:900 20px/1.2 var(--display);color:var(--red-2);letter-spacing:.03em}
.gdlg[data-kind=success] .gdlg-card h2{color:#1f6a3a}
.gdlg-card p{margin:0 0 6px;font:600 16px/1.5 var(--text);color:var(--ink-2);white-space:pre-line}
.gdlg-actions{display:flex;justify-content:center}
.gdlg .gbtn-card{width:min(100%,260px)}

/* ---------- Larger screens ---------- */
@media (min-width:700px) and (min-height:700px){
 .logo-wrap{width:min(70vw,540px)}
 .tagline{font-size:19px}
 .gbtn{width:380px}.gbtn-alt{width:330px}
 .card{max-width:470px}
}
/* Desktop / landscape tablet: panorama + framed artwork + highlights */
@media (min-width:960px) and (min-aspect-ratio:5/4){
 .bg-art{background-image:url(https://assets.santaworlds.com/startseite/nordpol-panorama-complete.webp);background-position:50% 50%;animation:swPan 60s ease-in-out infinite alternate}
 @keyframes swPan{from{transform:scale(1.08) translate3d(-2.5%,0,0)}to{transform:scale(1.12) translate3d(2.5%,-1%,0)}}
 .bg-shade{background:linear-gradient(90deg,rgba(18,4,20,.82) 0,rgba(18,4,20,.45) 42%,rgba(18,4,20,.05) 70%),linear-gradient(180deg,rgba(18,4,20,.35),transparent 30%,transparent 70%,rgba(18,4,20,.6))}
 .home{display:none;padding:calc(70px + var(--safe-t)) 5vw calc(18px + var(--safe-b))}
 .home.is-active{display:grid;grid-template-columns:minmax(420px,1fr) minmax(300px,.8fr);grid-template-rows:auto auto 1fr auto;column-gap:4vw;align-items:start;text-align:left}
 .home-hero{grid-column:1;grid-row:1;align-items:flex-start;padding-top:2vh}
 .logo-wrap{width:min(40vw,560px)}
 .tagline{margin:0 0 0 2%;font-size:20px;max-width:34ch!important}
 .home-features{grid-column:1;grid-row:2;display:flex;gap:16px;margin:3vh 0 0;padding:0;list-style:none}
 .home-features li{display:flex;flex-direction:column;align-items:center;gap:8px;width:108px;text-align:center;animation:swFadeUp .7s both}
 .home-features li:nth-child(1){animation-delay:1.1s}.home-features li:nth-child(2){animation-delay:1.2s}.home-features li:nth-child(3){animation-delay:1.3s}.home-features li:nth-child(4){animation-delay:1.4s}
 .home-features img{width:96px;height:96px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));animation:swBob 4.5s ease-in-out infinite;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
 .home-features li:nth-child(2) img{animation-delay:-1.1s}.home-features li:nth-child(3) img{animation-delay:-2.2s}.home-features li:nth-child(4) img{animation-delay:-3.3s}
 .home-features li:hover img{transform:scale(1.1) rotate(-4deg)}
 .home-features span{font:800 13.5px/1.25 var(--text);color:#ffeec7;text-shadow:0 2px 6px #000}
 @keyframes swBob{0%,100%{translate:0 0}50%{translate:0 -8px}}
 .home-actions{grid-column:1;grid-row:3;align-items:flex-start;align-self:end;margin-bottom:2vh;gap:8px}
 .gbtn{width:min(26vw,350px)}.gbtn-alt{width:min(22vw,300px);margin-left:calc((min(26vw,350px) - min(22vw,300px))/2)}
 .home-actions .social{align-self:flex-start;margin-left:calc(min(26vw,350px)/2 - 100px);width:200px}
 .tagline{background:none;border:0;padding:0}
 .foot{grid-column:1/3;grid-row:4;text-align:center}
 .home-art{grid-column:2;grid-row:1/4;display:flex;align-items:center;justify-content:center;height:100%;perspective:1100px;animation:swFadeUp 1s .5s both}
 .home-art-card{position:relative;height:min(76vh,700px);aspect-ratio:941/1672;border-radius:26px;transform-style:preserve-3d;transform:rotateY(var(--ry,-6deg)) rotateX(var(--rx,2deg));transition:transform .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 0 3px #f4d58e,0 0 0 8px #8d1023,0 0 0 11px #d9a64c,0 40px 80px rgba(0,0,0,.6),0 0 80px rgba(255,190,80,.25);animation:swFloat 7s ease-in-out infinite}
 .home-art-img{position:absolute;inset:0;border-radius:24px;background:url(https://assets.santaworlds.com/startseite/entry_bg_new.webp) center/cover no-repeat}
 .home-art-shine{position:absolute;inset:0;border-radius:24px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%) -200% 0/300% 100% no-repeat;animation:swShine 7s ease-in-out 2s infinite;mix-blend-mode:screen;pointer-events:none}
 .card{margin-top:min(4vh,30px)}
}
@media (min-width:960px) and (min-aspect-ratio:5/4) and (max-height:820px){
 .home-features{margin-top:2vh}.logo-wrap{width:min(34vw,470px)!important}
 .card{margin-top:0}.card-body{gap:9px}
}
@media (min-width:960px) and (min-aspect-ratio:5/4) and (max-height:700px){
 .home-features img{width:72px;height:72px}.home-features li{width:88px}.logo-wrap{width:min(34vw,440px)}
}
/* Short phones */
@media (max-height:640px) and (max-aspect-ratio:5/4){
 .home{padding-top:calc(48px + var(--safe-t))}
 .logo-wrap{width:min(74vw,380px)}
 .gbtn{width:min(74vw,310px)}.gbtn-alt{width:min(64vw,270px)}
 .social a{width:38px;height:38px}
 .foot{display:none}
 .card-body{gap:10px}
 .fbox,.fbox input{min-height:50px;height:50px}
}
/* Phone held sideways */
@media (max-height:500px) and (min-aspect-ratio:5/4){
 .home.is-active{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:calc(12px + var(--safe-t)) calc(20px + var(--safe-r)) calc(8px + var(--safe-b)) calc(20px + var(--safe-l))}
 .logo-wrap{width:min(42vw,380px)}
 .home-actions{gap:4px}.gbtn{width:min(40vw,300px)}.gbtn-alt{width:min(34vw,260px)}
 .foot{display:none}
 .topbar{padding-top:calc(6px + var(--safe-t))}
 .auth{padding-top:calc(54px + var(--safe-t))}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .bg-embers,.bg-aurora{display:none}
}

/* Viele Registrierungs-Avatare (aus dem Admin): Liste scrollt in der Karte, 2026-11-10 */
.avatar-grid.is-many{max-height:min(52vh,430px);overflow-y:auto;overscroll-behavior:contain;padding:8px 6px 10px;margin:0 -6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.avatar-grid.is-many::-webkit-scrollbar{display:none}