@font-face{font-family:mcui;src:local('Silkscreen'),local('Press Start 2P');}
:root{--mc-text:#fff;--mc-shadow:#3f3f3f;--ok:#55ff55;--warn:#ffff55;--bad:#ff5555;--info:#55ffff;--muted:#a0a0a0}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--mc-text)}
body.mc-title{font:16px/1.3 "Minecraftia",ui-monospace,Menlo,Consolas,monospace;-webkit-font-smoothing:none;text-shadow:2px 2px 0 var(--mc-shadow)}
/* Rotating six-sided panorama, same textures and slow yaw as the game's title screen */
.panorama{position:fixed;inset:0;perspective:50vmax;overflow:hidden;filter:blur(3px);transform:scale(1.04)}
.cube{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:spin 240s linear infinite}
.face{position:absolute;width:102vmax;height:102vmax;left:-51vmax;top:-51vmax;background-size:cover;image-rendering:auto;backface-visibility:hidden}
.f0{background-image:url(/title/panorama_0.png);transform:translateZ(-50vmax)}
.f1{background-image:url(/title/panorama_1.png);transform:rotateY(-90deg) translateZ(-50vmax)}
.f2{background-image:url(/title/panorama_2.png);transform:rotateY(180deg) translateZ(-50vmax)}
.f3{background-image:url(/title/panorama_3.png);transform:rotateY(90deg) translateZ(-50vmax)}
.f4{background-image:url(/title/panorama_4.png);transform:rotateX(-90deg) translateZ(-50vmax)}
.f5{background-image:url(/title/panorama_5.png);transform:rotateX(90deg) translateZ(-50vmax)}
@keyframes spin{from{transform:rotateX(-8deg) rotateY(0)}to{transform:rotateX(-8deg) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.cube{animation:none;transform:rotateX(-8deg)}}
.vignette{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%)}
main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;height:100%;padding:4vh 16px 48px;overflow:auto}
.logo{position:relative;margin:2vh 0 3vh;display:flex;flex-direction:column;align-items:center;font-size:0}
.logo img{image-rendering:pixelated;max-width:92vw}
.logo img:first-child{width:min(540px,92vw);height:auto}
.logo .edition{width:min(300px,52vw);height:auto;margin-top:2px}
.splash{position:absolute;right:-14%;bottom:34%;font-size:18px;color:#ff5;text-shadow:2px 2px 0 #3f3f00;transform:rotate(-20deg);white-space:nowrap;animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{from{transform:rotate(-20deg) scale(1)}to{transform:rotate(-20deg) scale(1.08)}}
form{width:min(400px,92vw);display:flex;flex-direction:column;gap:6px}
label{font-size:14px;color:#e0e0e0}
.field{position:relative;display:flex}
input{flex:1;min-width:0;height:40px;padding:0 10px;background:#000;color:#fff;border:2px solid #a0a0a0;outline:0;font:inherit;text-shadow:none}
input:focus{border-color:#fff}
input[aria-invalid=true]{border-color:var(--bad)}
#username{padding-right:150px}
.status{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;font-size:13px;pointer-events:none;text-shadow:1px 1px 0 #000}
.status::before{content:"";width:10px;height:10px;background:currentColor;box-shadow:0 0 0 1px #000}
.status:empty{display:none}
.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}.status.bad{color:var(--bad)}.status.info{color:var(--info)}.status.muted{color:var(--muted)}
.help{margin:0 0 4px;min-height:1.3em;font-size:13px;color:#d0d0d0}
.help.error{color:var(--bad)}
.help button{all:unset;color:var(--info);text-decoration:underline;cursor:pointer}
.signed{font-size:15px;color:#e0e0e0;text-align:center;margin-bottom:4px}
.signed strong{color:var(--ok)}
.mc-button{height:40px;margin-top:6px;font:inherit;color:#fff;text-shadow:2px 2px 0 var(--mc-shadow);cursor:pointer;border:0;background:none;
 border-image:url(/title/button.png) 3 3 4 3 fill / 6px 6px 8px 6px stretch;image-rendering:pixelated}
.mc-button:hover,.mc-button:focus-visible{border-image-source:url(/title/button_hover.png);color:#ffffa0;outline:0}
.mc-button:disabled{border-image-source:url(/title/button_disabled.png);color:#a0a0a0;cursor:default}
.mc-button.primary{height:46px;font-size:18px}
.link{all:unset;align-self:center;margin-top:4px;font-size:13px;color:#d0d0d0;text-decoration:underline;cursor:pointer}
footer{position:fixed;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;gap:12px;padding:6px 8px;font-size:12px;color:#fff;pointer-events:none}
#dl{color:#c0c0c0}
@media (max-width:520px){footer span:last-child{display:none}.splash{font-size:14px;right:-2%}}