:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overscroll-behavior:none;background:#061518;color:#f6dfa5;font-family:system-ui,Roboto,Arial,sans-serif}body{overflow:hidden;user-select:none;-webkit-user-select:none}button{font:inherit;touch-action:manipulation}#webapp{width:100vw;height:100dvh;overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 22%,#205040 0%,#081d1d 68%,#041111 100%)}.intro{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px 25px 40px;overflow-y:auto}.spark{font-size:clamp(70px,22vw,130px);color:#ebbd6c;text-shadow:0 10px 45px #d4a34d5e;line-height:1}.intro h1{font-size:clamp(37px,10vw,54px);margin:6px 0 0;color:#f4d08c;letter-spacing:2px;text-shadow:0 3px 18px #000}.edition{font-size:11px;letter-spacing:2px;color:#b6d6c6}.intro p{font-size:16px;max-width:300px;line-height:1.5}.cta{border:0;width:min(340px,100%);min-height:62px;border-radius:20px;background:linear-gradient(120deg,#f7dba5,#ca8b3d);color:#1b241c;font-size:19px;font-weight:900;box-shadow:0 9px 24px #0007}.cta:active{transform:scale(.985)}.hint{font-size:12px;line-height:1.55;color:#b7c4bf;margin-top:18px;max-width:340px}details{font-size:12px;color:#b7c4bf;margin-top:20px}details summary{cursor:pointer}.minor{display:block;margin:12px auto 6px;background:#1d473b;color:#eddaaf;border:1px solid #b99959;border-radius:10px;padding:10px 20px}output{display:block;max-width:320px;overflow-wrap:anywhere}#playercontainer{position:absolute;inset:0;background:#060c0b;display:grid;place-items:center;overflow:hidden}#canvas{display:block!important;position:absolute;left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(100vw,calc(100dvh * 36 / 73))!important;height:min(100dvh,calc(100vw * 73 / 36))!important;max-height:100dvh;max-width:100vw;aspect-ratio:36/73;object-fit:fill!important;touch-action:none;outline:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#spinner.loadingstatus,#spinner.pending,#spinner.loading{position:absolute;top:45%;left:8%;width:84%;text-align:center;color:#f0c57d;background:#051b1cd9;padding:16px;border:1px solid #9c7b45;border-radius:12px;pointer-events:none}#spinner:not(.loadingstatus):not(.pending):not(.loading){display:none}#webtools{position:absolute;top:max(5px,env(safe-area-inset-top));right:8px;z-index:4;display:flex;gap:6px;opacity:.35}#webtools:hover,#webtools:focus-within{opacity:1}#webtools button{width:34px;height:34px;border:1px solid #a18555;background:#103125;color:#f4d698;border-radius:9px;font-size:19px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* PWA v1.02.2: los controles del teclado son HTML reales, por encima de WebGL */
[hidden]{display:none!important}
.install{margin-top:14px;border-color:#e5c079;color:#fee6b0}
.code-editor{position:fixed;inset:0;z-index:9999;background:rgba(0,8,9,.84);display:flex;align-items:flex-start;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.code-sheet{width:min(430px,100%);margin-top:min(8dvh,56px);padding:22px 18px 18px;border-radius:20px;background:linear-gradient(160deg,#103e33,#061f1a);border:1px solid #d2a863;box-shadow:0 15px 70px #000a;display:flex;flex-direction:column;gap:12px}
.code-sheet label{font-size:21px;font-weight:800;color:#f7d997}
.code-sheet p{font-size:14px;margin:0;color:#c7d5ce;line-height:1.4}
.code-sheet input{width:100%;height:58px;padding:10px 14px;border:2px solid #d5ae69;border-radius:11px;background:#fff9ec;color:#102c24;font-size:27px;letter-spacing:.13em;font-weight:800;text-align:center;text-transform:uppercase;outline-offset:3px;user-select:text!important;-webkit-user-select:text!important}
.code-sheet output{text-align:center;color:#e5cc99;font-size:13px}
.code-actions{display:flex;gap:10px}.code-actions button{flex:1;min-width:0;height:52px;border-radius:10px;border:1px solid #bba06a;color:#fae1ab;background:#174633;font-weight:800}.code-actions #code-done{background:linear-gradient(#f3d38d,#b88a40);color:#122b23}


/* PWA v1.02.3 splash con Mariana */
#webapp{background:radial-gradient(ellipse at 50% 22%,#205040 0%,#081d1d 68%,#041111 100%)}
.mariana-intro{background:linear-gradient(rgba(2,12,13,.56), rgba(2,12,13,.72)), url('/assets/mariana-splash.webp') center top / cover no-repeat}
.intro-card{width:min(420px,100%);padding:22px 18px 26px;border-radius:24px;background:rgba(5,20,19,.58);border:1px solid rgba(221,183,111,.72);backdrop-filter:blur(4px);box-shadow:0 16px 44px rgba(0,0,0,.45)}
.game-loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:22px;background:linear-gradient(rgba(1,10,11,.72),rgba(1,10,11,.72)), radial-gradient(circle at 50% 20%,rgba(180,111,46,.12),transparent 45%)}
.game-loading.fadeout{opacity:0;pointer-events:none;transition:opacity .65s ease}
.game-loading-card{width:min(460px,92vw);display:flex;flex-direction:column;gap:12px;align-items:center;padding:16px 16px 18px;border-radius:26px;background:rgba(8,26,25,.86);border:1px solid rgba(226,189,120,.75);box-shadow:0 18px 55px rgba(0,0,0,.55)}
.loading-art{display:block;width:min(78vw,360px);max-height:54dvh;object-fit:cover;border-radius:22px;border:1px solid rgba(231,201,132,.8);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.loading-copy{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.loading-copy strong{font-size:clamp(24px,6vw,31px);color:#f6d492;letter-spacing:.5px;text-shadow:0 3px 12px #000}
#spinner.loadingstatus,#spinner.pending,#spinner.loading{position:static;top:auto;left:auto;width:auto;max-width:94%;text-align:center;color:#f0d7ab;background:none;padding:0;border:0;border-radius:0;pointer-events:none}
@media (max-width:480px){.intro-card{padding:18px 14px 22px}.loading-art{width:min(84vw,330px)}}