:root{--night:#050b08;--deep:#0a1711;--emerald:#1f6b4a;--jade:#3fbf86;--gold:#d8b25e;--gold-hi:#f4dc9a;--gold-lo:#8f6a26;--ink:#f3ead2;--mute:#a9bba9;--line:#c79a3b55}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
main{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* Barra superior: discreta, sobre el arte */
.appbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:54px;padding:6px 14px;background:linear-gradient(180deg,#050b08f2,#050b08c8);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold-hi);text-decoration:none;white-space:nowrap}
.brand img{object-fit:contain;filter:drop-shadow(0 0 6px #3fbf8655)}
.brand strong{font:600 17px/1.05 Georgia,"Times New Roman",serif;letter-spacing:.5px}
.brand small{display:block;margin-top:4px;font:600 9px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--mute)}
nav{display:flex;gap:7px}
button{min-height:42px;min-width:42px;padding:8px 15px;font:inherit;font-weight:600;cursor:pointer;color:var(--ink);border:1px solid #3b5a47;border-radius:10px;background:#10231a;transition:background .2s,border-color .2s,transform .2s}
button:hover{background:#18352a;border-color:#5f8a6f}
button.ghost{background:#0c1a14aa}
button.icon{padding:8px 0;width:42px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
button.primary{color:#1d1708;border-color:var(--gold);background:linear-gradient(#f1d995,#b98a35)}
button:disabled{opacity:.55;cursor:default}

.game-stage{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;background:#000}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}

/* Pantalla de inicio */
.launcher-panel{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:clamp(16px,4vh,48px) 20px;text-align:center;
  background:radial-gradient(120% 90% at 50% 38%,#0b2318d0 0%,#050b08f0 62%,#030604 100%),url(art/templo.webp) center 28%/cover no-repeat,var(--night)}
.launcher-panel::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#050b0800 55%,#050b08 100%),radial-gradient(60% 50% at 50% 30%,#3fbf8618,transparent 70%)}
.atmosphere{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.mist{position:absolute;left:-20%;right:-20%;bottom:-10%;height:55%;background:radial-gradient(50% 60% at 30% 80%,#9fd8bd14,transparent 70%),radial-gradient(45% 55% at 75% 85%,#d8b25e10,transparent 70%);filter:blur(8px);animation:drift 24s ease-in-out infinite alternate}
.motes{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 70%,#f4dc9acc,transparent),radial-gradient(1px 1px at 28% 40%,#bfe8d3aa,transparent),radial-gradient(1.5px 1.5px at 64% 62%,#f4dc9a99,transparent),radial-gradient(1px 1px at 82% 34%,#bfe8d3aa,transparent),radial-gradient(1.2px 1.2px at 46% 82%,#f4dc9aaa,transparent),radial-gradient(1px 1px at 90% 76%,#f4dc9a88,transparent);animation:rise 18s linear infinite;opacity:.8}
@keyframes drift{to{transform:translateX(8%)}}
@keyframes rise{from{transform:translateY(4%)}to{transform:translateY(-6%)}}

.hero{position:relative;width:min(640px,100%);display:flex;flex-direction:column;align-items:center}
.crest{position:relative;width:clamp(150px,30vh,280px);aspect-ratio:1;margin-bottom:4px}
.crest img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 30px #000c) drop-shadow(0 0 22px #3fbf8633);animation:float 7s ease-in-out infinite}
.halo{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#3fbf8640 0%,#d8b25e1c 45%,transparent 70%);filter:blur(10px);animation:pulse 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes pulse{50%{opacity:.55;transform:scale(1.06)}}
.eyebrow{margin:0 0 6px;font:700 11px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}
h1{margin:0;font:600 clamp(28px,4.6vw,48px)/1.08 Georgia,"Times New Roman",serif;color:var(--gold-hi);text-shadow:0 2px 18px #000,0 0 30px #d8b25e22}
h1 em{display:block;font-style:italic;color:#fff3d2}
.divider{width:min(420px,80%);height:auto;margin:14px 0 10px;opacity:.9}
.lead{max-width:520px;margin:0 0 16px;color:#d9d6c4;font-size:15.5px}
.lead b{color:var(--gold-hi);font-weight:600}

.server{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 14px;border:1px solid #3b5a47;border-radius:999px;background:#07120dcc;font-size:13px;color:#cfe3d6}
.server .dot{width:9px;height:9px;border-radius:50%;background:#7d8b82;box-shadow:0 0 0 0 transparent}
.server[data-state=online] .dot{background:var(--jade);box-shadow:0 0 10px var(--jade);animation:beat 2.4s ease-in-out infinite}
.server[data-state=offline] .dot{background:#d0604f}
@keyframes beat{50%{box-shadow:0 0 2px var(--jade)}}

.cta{position:relative;min-width:min(320px,90%);min-height:58px;padding:0 34px;border:1px solid #f6e2a6;border-radius:14px;overflow:hidden;color:#1b1406;font:700 19px/1 Georgia,"Times New Roman",serif;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(180deg,#fbe9b3 0%,#e2bd68 46%,#a97a2c 100%);box-shadow:0 10px 30px #000a,0 0 0 4px #d8b25e22,inset 0 1px 0 #fff8}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffff70,transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
.cta:hover{background:linear-gradient(180deg,#fff0c4 0%,#ebc977 46%,#b4852f 100%);transform:translateY(-1px)}
.cta span{position:relative;z-index:1}
@keyframes shine{0%,60%{left:-40%}100%{left:120%}}

.loader{display:none;width:min(460px,100%);margin-top:4px}
progress{appearance:none;-webkit-appearance:none;width:100%;height:12px;border:1px solid #c79a3b66;border-radius:999px;background:#07120d;overflow:hidden}
progress::-webkit-progress-bar{background:#07120d}
progress::-webkit-progress-value{background:linear-gradient(90deg,#1f6b4a,#3fbf86 55%,#f4dc9a);border-radius:999px;transition:width .3s}
progress::-moz-progress-bar{background:linear-gradient(90deg,#1f6b4a,#3fbf86 55%,#f4dc9a);border-radius:999px}
#status{margin:12px 0 2px;font-weight:600;color:var(--gold-hi)}
.detail{margin:0;min-height:1.5em;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:26px 0 0;padding:0;list-style:none}
.perks li{padding:12px 10px;border:1px solid #c79a3b33;border-radius:12px;background:linear-gradient(180deg,#0d1f17cc,#07110dcc)}
.perks b{display:block;font:600 14px/1.2 Georgia,serif;color:var(--gold-hi)}
.perks span{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--mute)}
.foot{margin:20px 0 0;font-size:12px;color:#8aa194}
.foot a{color:var(--gold);text-decoration:none}.foot a:hover{text-decoration:underline}
.foot span{margin:0 8px}

body.is-loading .cta,body.is-loading .perks{display:none}
body.is-loading .loader{display:block}
body.client-ready .launcher-panel{display:none}
body.client-failed .launcher-panel{display:grid}
body.client-failed .cta{display:inline-block}

.portrait-hint{display:none;position:absolute;left:0;right:0;top:0;pointer-events:none;margin:0;padding:5px 8px;text-align:center;font-size:11px;background:#050b08bb;color:var(--gold-hi)}
dialog{width:min(520px,calc(100% - 24px));max-height:85vh;overflow:auto;padding:26px;border:1px solid var(--gold);border-radius:16px;background:linear-gradient(180deg,#10241b,#08130e);color:#e8e4cd;box-shadow:0 20px 80px #000c}
dialog::backdrop{background:#000b}
dialog h2{margin-top:0;font:600 26px Georgia,serif;color:var(--gold-hi)}
details{margin:18px 0}summary{cursor:pointer;color:var(--gold)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;font:11px monospace}
dialog button{width:100%}
html{scrollbar-color:#3b5a47 #07120d;scrollbar-width:thin}

@media(max-width:620px){.perks{grid-template-columns:1fr;gap:8px}.perks li{display:flex;align-items:baseline;gap:10px;text-align:left;padding:10px 12px}.perks span{margin:0}}
@media(max-width:520px){.appbar{padding:5px 8px;gap:5px}.brand{gap:6px}.brand img{width:28px;height:28px}.brand strong{font-size:14px}.brand small{font-size:7px;letter-spacing:1.4px}nav{gap:4px}button{padding:7px 10px;font-size:12px}button.icon{width:38px;min-width:38px}.lead{font-size:14px}.cta{min-height:52px;font-size:17px}}
@media(orientation:portrait) and (max-width:700px){body.client-ready .portrait-hint{display:block}}
@media(max-height:560px){.crest{width:clamp(96px,22vh,150px)}.divider{margin:8px 0 6px}.lead{margin-bottom:10px}.server{margin-bottom:10px}.perks{display:none}.foot{margin-top:10px}}
@media(display-mode:standalone){#install{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:360px){.brand strong{display:none}}

.exit-fullscreen{position:absolute;z-index:3;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));opacity:.85}
.game-stage:fullscreen{width:100vw;height:100vh;height:100dvh}
body.client-ready:not(.client-failed) #start{display:none}

/* The game draws MU's own cursors (hand, sword, repair hammer...); hide the system one over it. */
#canvas{cursor:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(pointer:coarse){#canvas{cursor:default}}