:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;color:#eee9dd;background:#090b10}*{box-sizing:border-box}body{margin:0}canvas{position:fixed;inset:0;width:100%;height:100%;outline:none;background:#090b10}main{position:fixed;inset:0;display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at 75% 20%,#24304988,transparent 65%),linear-gradient(135deg,#090b10f5,#101622ee)}.panel{width:min(100%,520px);padding:38px;border:1px solid #ffffff19;border-radius:18px;background:#0d121cde;box-shadow:0 25px 100px #0008}.eyebrow{font-size:12px;letter-spacing:.24em;color:#d8b77b;margin:0 0 24px}h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,48px);font-weight:400;line-height:1.12;letter-spacing:-.03em;margin:0 0 20px}.intro,.note{color:#a8afb9;line-height:1.65;font-size:15px}.status{margin:28px 0 20px;font-size:14px}#detail{display:block;color:#8c98a8;font-size:12px;margin:8px 0;overflow-wrap:anywhere}progress{width:100%;height:5px;accent-color:#dbb575}button{width:100%;border:0;border-radius:8px;padding:16px;background:#dfbd81;color:#17140f;font:600 15px Segoe UI,system-ui;cursor:pointer}button:disabled{opacity:.6;cursor:wait}.note{font-size:12px;margin-top:16px}#error{color:#f2a59c;font-size:14px;line-height:1.5}details{margin-top:24px;color:#818b9b;font-size:12px}pre{max-height:160px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}body.playing main{display:none}@media(max-width:600px){main{padding:16px}.panel{padding:26px}}

#world-loading{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#090b10e8;color:#eee9dd;font:18px Segoe UI,system-ui;text-align:center;padding:24px;pointer-events:none}#world-loading[hidden]{display:none}

#accounts{position:fixed;right:16px;top:24px;width:252px;max-width:calc(100vw - 32px);max-height:75vh;overflow:auto;z-index:4;padding:16px;background:#10151df2;border:1px solid #ae8b4d80;border-radius:12px;box-shadow:0 12px 40px #0009}#accounts[hidden]{display:none}#accounts h2{font-size:17px;color:#dfbd81;margin:0 0 12px}#accounts p{font-size:12px;color:#b7bdc7;line-height:1.5}#accounts details{margin-top:12px}#accounts summary{cursor:pointer;color:#dfbd81}#accounts label{display:block;font-size:13px;margin-top:12px}#accounts input{display:block;width:100%;padding:9px;margin-top:5px;background:#080c12;border:1px solid #677080;border-radius:5px;color:white;font:14px Segoe UI}#accounts button{padding:9px;font-size:13px}.account-row{display:flex;gap:6px;margin:6px 0}.account-row>button:first-child{text-align:left}.account-row .account-remove{width:32px;flex-shrink:0;background:#303644;color:white}.account-actions{display:grid;gap:7px}#accounts #account-status{color:#e3c68d;margin-bottom:0}@media(max-width:800px){#accounts{width:208px;top:14px;padding:12px;max-height:48vh}#accounts h2{font-size:15px}}
body:not(.playing) #accounts{display:none}

/* Scale the entire canvas, so UI, models, cursor and click targets stay aligned. */
body[data-view-size="90"] canvas{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:90vw;height:90vh}
body[data-view-size="80"] canvas{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:80vw;height:80vh}
#web-display{position:fixed;right:12px;top:8px;z-index:6;padding:4px 7px;border:1px solid #9b835780;border-radius:5px;background:#10151ddb;color:#eee9dd;font:12px Segoe UI,system-ui,sans-serif}
#web-display select{width:auto;margin-left:4px;padding:2px;background:#19202c;color:#eee9dd;border:1px solid #81735a;border-radius:4px;font:12px Segoe UI,system-ui,sans-serif}
body:not(.playing) #web-display{display:none}

/* Game keypresses must keep their text defaults without scrolling the page. */
body.playing{overflow:hidden}
#storage-info{display:block;color:#cfdbd0;font-size:12px;line-height:1.5;margin:10px 0}#storage-info[hidden]{display:none}
#cleanup-install{margin-top:10px;padding:11px;background:#26303c;color:#f2dec0;border:1px solid #7d6850}
#cleanup-install[hidden]{display:none}

/* ===== Intro Jewel MU ===== */
:root{--gold:#e8b64c;--gold2:#ffe3a1;--gold3:#b8862b}
main#launcher{overflow:hidden;background:radial-gradient(ellipse at 50% 18%,#2a2140cc,transparent 60%),radial-gradient(ellipse at 80% 90%,#3a1a1a66,transparent 55%),linear-gradient(160deg,#07080dfa,#0d1220f2)}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-rays{position:absolute;left:50%;top:-30%;width:150vmax;height:150vmax;margin-left:-75vmax;background:repeating-conic-gradient(from 0deg,#ffd98a14 0 4deg,transparent 4deg 14deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);animation:spin 90s linear infinite}
.fx-grid{position:absolute;left:-20%;right:-20%;bottom:-8%;height:46%;background:linear-gradient(#e8b64c22 1px,transparent 1px) 0 0/100% 38px,linear-gradient(90deg,#e8b64c1c 1px,transparent 1px) 0 0/54px 100%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);animation:grid 5s linear infinite}
.ember{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffe3a1,#e8b64c 55%,transparent 70%);box-shadow:0 0 10px 2px #e8b64c99;opacity:0;animation:rise 9s linear infinite}
.e1{left:6%;animation-delay:0s;animation-duration:10s}.e2{left:14%;animation-delay:2.2s;animation-duration:8s}.e3{left:23%;animation-delay:5s;animation-duration:11s}.e4{left:31%;animation-delay:1s;animation-duration:9s}.e5{left:42%;animation-delay:6.5s;animation-duration:12s}.e6{left:51%;animation-delay:3s;animation-duration:8.5s}.e7{left:60%;animation-delay:7.5s;animation-duration:10s}.e8{left:68%;animation-delay:.5s;animation-duration:11s}.e9{left:77%;animation-delay:4s;animation-duration:9.5s}.e10{left:85%;animation-delay:8.5s;animation-duration:8s}.e11{left:92%;animation-delay:2s;animation-duration:12s}.e12{left:37%;animation-delay:9s;animation-duration:10.5s}
.panel{position:relative;text-align:center;border-color:#e8b64c33;background:linear-gradient(180deg,#121826e6,#0b0f18ee);box-shadow:0 30px 120px #000c,0 0 0 1px #00000066,inset 0 1px 0 #ffe3a122;backdrop-filter:blur(6px);animation:panelIn .9s cubic-bezier(.2,.8,.2,1) both}
.panel::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#ffe3a1cc 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border 6s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.logo{position:relative;width:132px;height:132px;margin:14px auto 22px;display:grid;place-items:center;animation:float 5s ease-in-out infinite}
.logo-mark{position:relative;z-index:2;width:100%;height:100%;display:block;background:linear-gradient(110deg,var(--gold3) 0,var(--gold2) 35%,#fff 50%,var(--gold2) 65%,var(--gold3) 100%) 0 0/250% 100%;-webkit-mask:url(isotipo.png) center/contain no-repeat;mask:url(isotipo.png) center/contain no-repeat;filter:drop-shadow(0 0 10px #e8b64caa);animation:shine 3.6s ease-in-out infinite}
.logo-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#ffd77a66,transparent 68%);animation:pulse 3s ease-in-out infinite}
.logo-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid #e8b64c55;border-top-color:#ffe3a1;border-right-color:transparent;animation:spin 7s linear infinite}
.logo-ring.r2{inset:-16px;border-color:#e8b64c22;border-bottom-color:#e8b64c99;border-left-color:transparent;animation-duration:12s;animation-direction:reverse}
.eyebrow{margin:14px 0 10px;animation:up .8s .25s both}
h1{margin:0 0 6px;animation:up .8s .35s both}
h1 span{background:linear-gradient(100deg,#b8862b 0,#ffe3a1 30%,#fff 50%,#ffe3a1 70%,#b8862b 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-size:clamp(40px,8vw,56px);letter-spacing:.02em;text-shadow:none;filter:drop-shadow(0 2px 14px #e8b64c55);animation:shine 4.5s ease-in-out infinite}
.tagline{margin:0 0 16px;color:#e8c981;font:600 13px Segoe UI,system-ui;letter-spacing:.32em;text-transform:uppercase;animation:up .8s .45s both}
.intro{margin:0 auto;max-width:400px;animation:up .8s .55s both}
.status,.panel>button,.note{animation:up .8s .7s both}
.status{text-align:left}
progress{-webkit-appearance:none;appearance:none;border:0;border-radius:99px;background:#ffffff14;overflow:hidden;height:6px}
progress::-webkit-progress-bar{background:#ffffff14}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--gold3),var(--gold2));border-radius:99px;box-shadow:0 0 12px #e8b64c99;transition:width .3s}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--gold3),var(--gold2));border-radius:99px}
.panel>button{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffe3a1,#e8b64c);box-shadow:0 8px 28px #e8b64c40;font-weight:700;letter-spacing:.04em;transition:transform .15s,box-shadow .2s}
.panel>button::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-20deg);animation:sweep 3.2s 1.2s ease-in-out infinite}
.panel>button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 36px #e8b64c66}
.panel>button:active:not(:disabled){transform:translateY(1px)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes border{to{--a:360deg}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
@keyframes sweep{0%{left:-80px}45%,100%{left:120%}}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}10%{opacity:.9}100%{transform:translateY(-95vh) translateX(26px) scale(1.1);opacity:0}}
@keyframes grid{to{background-position:0 38px,0 0}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){.logo{width:104px;height:104px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.ember{display:none}}

/* ----- Aviso de arranque del motor (loading-hint.js) ----- */
#boot-hint{margin:14px 0 4px;animation:up .4s both}
#boot-hint[hidden]{display:none}
.boot-bar{position:relative;height:5px;border-radius:5px;background:#ffffff14;overflow:hidden}
.boot-bar i{position:absolute;top:0;bottom:0;width:38%;border-radius:5px;background:linear-gradient(90deg,transparent,#f3d48f,#dbb575,transparent);animation:bootsweep 1.5s ease-in-out infinite}
.boot-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:11px}
#boot-msg{font-weight:600;font-size:14px;color:#f1dba6}
#boot-time{font:600 12px ui-monospace,Consolas,monospace;color:#9aa3b5;font-variant-numeric:tabular-nums}
#boot-sub{margin:6px 0 0;font-size:12px;line-height:1.5;color:#a8afb9}
body.booting #stage{display:none}
body.booting #detail{display:none}
body.booting progress{display:none}
@keyframes bootsweep{0%{left:-40%}100%{left:102%}}
@media(prefers-reduced-motion:reduce){.boot-bar i{animation:none;left:0;width:100%;opacity:.5}}