:root { --p2-night:#182339; --p2-paper:#fff7e7; --p2-ink:#1f2736; --p2-gold:#f7c55a; --p2-gold-bright:#ffedab; --p2-rust:#bd5839; --p2-teal:#277f81; --p2-panel:rgba(24,35,57,.94); }
* { box-sizing:border-box; }
body.promesa2d-body { min-width:320px; margin:0; color:var(--p2-paper); background:radial-gradient(circle at 60% -10%,#596d98 0,#253652 38%,#111a2c 78%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.promesa2d-page { width:min(1440px,100%); min-height:100vh; margin:0 auto; padding:clamp(.7rem,2vw,1.6rem); }
.promesa2d-back { display:inline-flex; min-height:44px; align-items:center; color:var(--p2-paper); font-weight:800; text-decoration:none; }
.promesa2d-shell { padding-top:.25rem; }
.promesa2d-stage { position:relative; min-height:min(760px,calc(100vh - 5.8rem)); overflow:hidden; border:1px solid rgba(255,222,145,.58); background:#21304c; box-shadow:0 32px 90px rgba(3,8,20,.5); isolation:isolate; }
.promesa2d-stage::after { position:absolute; inset:0; z-index:5; pointer-events:none; border:1px solid rgba(255,245,214,.19); content:""; }
.promesa2d-game-root { position:absolute; inset:0; z-index:0; display:grid; place-items:center; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
/* Phaser RESIZE owns its internal scene size; the canvas must fill the stage
   so portrait devices use the available playfield without stretching art. */
.promesa2d-game-root canvas { position:absolute!important; inset:0!important; display:block; width:100%!important; height:100%!important; max-width:none; max-height:none; }
.promesa2d-loading { position:absolute; inset:0; z-index:30; display:grid; place-content:center; justify-items:center; gap:1rem; background:radial-gradient(circle at 50% 32%,#7d7494,#1c2a46 64%); font-family:Georgia,serif; font-size:clamp(1.15rem,2vw,1.6rem); }
.promesa2d-loading__sun { width:3.2rem; height:3.2rem; border-radius:50%; background:var(--p2-gold); box-shadow:0 0 0 .7rem rgba(247,197,90,.18),0 0 2.8rem rgba(255,213,105,.8); animation:p2-pulse 1.65s ease-in-out infinite; }
@keyframes p2-pulse { 50% { transform:scale(1.12); filter:brightness(1.14); } }
.promesa2d-screen,.promesa2d-dialog-layer { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); background:rgba(12,19,35,.46); }
.promesa2d-screen--menu { place-items:stretch; align-items:end; padding:clamp(1.5rem,6vw,6rem); background:linear-gradient(90deg,rgba(12,19,35,.95),rgba(12,19,35,.65) 39%,rgba(12,19,35,.06) 75%),linear-gradient(0deg,rgba(12,19,35,.85),transparent 53%); }
[hidden] { display:none!important; }
.promesa2d-title-card { width:min(580px,100%); padding-bottom:clamp(1.2rem,5vw,4.2rem); }
.promesa2d-kicker { margin:0; color:var(--p2-gold-bright); font-size:.7rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.promesa2d-title-card h1,.promesa2d-dialog h2 { margin:.55rem 0 1rem; color:#fffaf0; font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:0; }
.promesa2d-title-card h1 { font-size:clamp(3rem,7.5vw,6.2rem); line-height:.88; }
.promesa2d-title-card h1 em { color:var(--p2-gold-bright); font-style:normal; }
.promesa2d-title-card > p:not(.promesa2d-kicker),.promesa2d-dialog > p:not(.promesa2d-kicker) { color:rgba(255,247,231,.84); font-size:1rem; line-height:1.62; }
.promesa2d-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.promesa2d-actions--stack { display:grid; }
.promesa2d-button,.promesa2d-icon,.promesa2d-touch button,.promesa2d-option,.promesa2d-close { min-height:48px; border:1px solid transparent; border-radius:4px; font:800 .78rem/1.1 inherit; letter-spacing:.035em; cursor:pointer; text-decoration:none; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.promesa2d-button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.85rem 1.1rem; }
.promesa2d-button:hover,.promesa2d-icon:hover,.promesa2d-touch button:hover { transform:translateY(-2px); }
.promesa2d-button--gold { color:#1d2431; background:var(--p2-gold); box-shadow:0 8px 22px rgba(237,159,47,.23); }
.promesa2d-button--gold:hover { background:#ffdb78; }
.promesa2d-button--quiet { border-color:rgba(255,247,231,.42); color:var(--p2-paper); background:rgba(20,29,47,.53); }
.promesa2d-button--quiet:hover { border-color:var(--p2-gold-bright); }
.promesa2d-toggles { display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:1.25rem; color:rgba(255,247,231,.78); font-size:.78rem; }
.promesa2d-toggles--stack { display:grid; }
.promesa2d-toggles label { display:inline-flex; min-height:44px; align-items:center; gap:.45rem; cursor:pointer; }
.promesa2d-toggles input { width:1.1rem; height:1.1rem; accent-color:var(--p2-gold); }.promesa2d-toggles input:disabled { cursor:not-allowed; opacity:.45; }
.promesa2d-dialog { position:relative; width:min(650px,100%); max-height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem); overflow:auto; padding:clamp(1.25rem,4vw,3rem); border:1px solid rgba(255,218,133,.52); background:var(--p2-panel); box-shadow:0 26px 70px rgba(0,0,0,.38); touch-action:pan-y; overscroll-behavior:contain; }
.promesa2d-dialog--compact { width:min(570px,100%); }.promesa2d-dialog--quiz { width:min(720px,100%); }.promesa2d-dialog--victory { width:min(740px,100%); text-align:center; }
.promesa2d-dialog h2 { font-size:clamp(1.9rem,4vw,3.1rem); line-height:1; }.promesa2d-close { position:absolute; top:max(.65rem,env(safe-area-inset-top)); right:max(.65rem,env(safe-area-inset-right)); display:grid; width:44px; place-items:center; border-color:rgba(255,247,231,.38); color:var(--p2-paper); background:rgba(255,255,255,.04); font-size:1.5rem; }
.promesa2d-control-list { display:grid; gap:.55rem; margin:1.35rem 0; padding:1rem; border-left:3px solid var(--p2-gold); background:rgba(255,236,180,.09); color:#fff9e9; }.promesa2d-control-list b { color:var(--p2-gold-bright); }.promesa2d-mobile-copy { font-size:.82rem!important; }
.promesa2d-hud { position:absolute; inset:0; z-index:10; display:flex; align-items:flex-start; justify-content:space-between; padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); pointer-events:none; }
.promesa2d-hud>* { pointer-events:auto; }.promesa2d-hud__left { display:flex; gap:.45rem; }.promesa2d-counter,.promesa2d-icon { display:inline-flex; min-height:44px; align-items:center; gap:.4rem; padding:.55rem .7rem; border:1px solid rgba(255,245,218,.52); color:#fffbed; background:rgba(24,35,57,.76); box-shadow:0 6px 20px rgba(5,9,19,.18); }.promesa2d-counter span { color:var(--p2-gold-bright); }.promesa2d-counter strong { font-variant-numeric:tabular-nums; }.promesa2d-counter--score { color:var(--p2-gold-bright); }.promesa2d-icon { display:grid; width:48px; padding:0; place-items:center; font-size:1rem; }.promesa2d-objective { position:absolute; left:50%; bottom:max(1rem,env(safe-area-inset-bottom)); max-width:min(460px,calc(100% - 8rem)); margin:0; padding:.62rem .85rem; border:1px solid rgba(255,245,218,.42); background:rgba(24,35,57,.83); color:#fffbed; font-size:.72rem; font-weight:800; text-align:center; transform:translateX(-50%); box-shadow:0 6px 20px rgba(5,9,19,.18); }
.promesa2d-hint,.promesa2d-announce { position:absolute; left:50%; bottom:4.6rem; z-index:14; max-width:min(30rem,calc(100% - 2rem)); margin:0; padding:.64rem .86rem; border:1px solid rgba(255,223,138,.58); background:rgba(24,35,57,.94); color:#fffbed; font-size:.77rem; font-weight:800; text-align:center; opacity:0; transform:translate(-50%,.5rem); transition:.18s ease; pointer-events:none; }.promesa2d-hint.is-visible,.promesa2d-announce.is-visible { opacity:1; transform:translate(-50%,0); }.promesa2d-announce { bottom:7.8rem; border-color:rgba(148,224,189,.68); }
.promesa2d-options { display:grid; gap:.65rem; margin:1.3rem 0; }.promesa2d-option { display:flex; width:100%; align-items:center; gap:.7rem; padding:.8rem 1rem; border-color:rgba(255,247,231,.29); color:#fffbed; background:rgba(255,255,255,.055); text-align:left; }.promesa2d-option:hover,.promesa2d-option:focus-visible { border-color:var(--p2-gold); background:rgba(247,197,90,.13); outline:none; }.promesa2d-option.is-correct { border-color:#8de0ad; background:rgba(58,136,94,.28); }.promesa2d-option.is-wrong { border-color:#ff9a87; background:rgba(178,66,57,.29); }.promesa2d-option b { display:grid; width:1.75rem; height:1.75rem; flex:0 0 auto; place-items:center; border:1px solid currentColor; border-radius:50%; color:var(--p2-gold-bright); }.promesa2d-feedback { margin:1rem 0; padding:1rem; border-left:3px solid var(--p2-gold); background:rgba(255,255,255,.06); }.promesa2d-feedback strong,.promesa2d-reference { color:var(--p2-gold-bright); }.promesa2d-reference { font-size:.78rem!important; font-weight:800; letter-spacing:.02em; }.promesa2d-final-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:.55rem; margin:1.5rem 0; }.promesa2d-final-stats span { display:grid; min-width:7rem; gap:.3rem; padding:.75rem; border-top:2px solid var(--p2-gold); background:rgba(255,255,255,.06); font-size:.68rem; }.promesa2d-final-stats b { color:var(--p2-gold-bright); font:700 1.4rem Georgia,serif; }.promesa2d-stars { margin:.8rem 0; color:var(--p2-gold); font-size:2rem; letter-spacing:.15em; text-shadow:0 0 1rem rgba(255,210,100,.55); }
.promesa2d-touch { position:absolute; inset:auto max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); z-index:13; display:flex; align-items:end; justify-content:space-between; pointer-events:none; }.promesa2d-touch__move,.promesa2d-touch__actions { display:flex; gap:.55rem; pointer-events:auto; }.promesa2d-touch button { display:grid; width:56px; min-height:56px; place-items:center; border-color:rgba(255,245,218,.56); border-radius:50%; color:#fffbed; background:rgba(24,35,57,.8); font-size:1.2rem; box-shadow:0 8px 24px rgba(5,9,19,.25); touch-action:none; }.promesa2d-touch__actions button:first-child { color:#1f2938; background:rgba(247,197,90,.9); font-size:.9rem; }
.promesa2d-note { margin:1rem 0 0; color:rgba(255,247,231,.65); font-size:.75rem; text-align:center; }.promesa2d-note a { color:var(--p2-gold-bright); font-weight:800; }
.promesa2d-button:focus-visible,.promesa2d-icon:focus-visible,.promesa2d-touch button:focus-visible,.promesa2d-close:focus-visible { outline:3px solid #fff1b6; outline-offset:3px; }
@media (max-width:760px) { body.promesa2d-body{height:100svh;overflow:hidden;overscroll-behavior:none}.promesa2d-page{height:100svh;min-height:100svh;padding:0;overflow:hidden}.promesa2d-back{min-height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(.8rem,env(safe-area-inset-right)) 0 max(.8rem,env(safe-area-inset-left))}.promesa2d-stage{height:calc(100svh - 44px - env(safe-area-inset-top));min-height:0;border-inline:0}.promesa2d-screen{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.promesa2d-screen--menu{padding:max(1.4rem,env(safe-area-inset-top)) max(1.4rem,env(safe-area-inset-right)) max(1.4rem,env(safe-area-inset-bottom)) max(1.4rem,env(safe-area-inset-left))}.promesa2d-title-card{padding-bottom:3.6rem}.promesa2d-title-card h1{font-size:clamp(3.1rem,15vw,5.1rem)}.promesa2d-dialog-layer,.promesa2d-screen:not(.promesa2d-screen--menu){padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.promesa2d-objective{bottom:5.2rem;max-width:calc(100% - 2rem)}.promesa2d-hint{bottom:9.1rem}.promesa2d-announce{bottom:11.8rem}.promesa2d-note{display:none}.promesa2d-touch button{width:58px;min-height:58px}.promesa2d-toggles{gap:.15rem .8rem}.promesa2d-title-card>p:not(.promesa2d-kicker){max-width:24rem}.promesa2d-final-stats span{min-width:6.25rem} }
@media (max-width:420px){.promesa2d-hud{padding:max(.65rem,env(safe-area-inset-top)) max(.65rem,env(safe-area-inset-right)) max(.65rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left))}.promesa2d-counter{min-height:40px;padding:.45rem .55rem}.promesa2d-icon{width:40px;min-height:40px}.promesa2d-title-card h1{font-size:3.05rem}.promesa2d-dialog{padding:1.2rem}.promesa2d-touch{left:max(.65rem,env(safe-area-inset-left));right:max(.65rem,env(safe-area-inset-right));bottom:max(.65rem,env(safe-area-inset-bottom))}.promesa2d-touch button{width:52px;min-height:52px}.promesa2d-objective{bottom:4.7rem;font-size:.65rem}.promesa2d-hint{bottom:8.4rem}.promesa2d-announce{bottom:10.9rem}.promesa2d-actions{display:grid}.promesa2d-button{width:100%}}
@media (max-height:420px) and (orientation:landscape){.promesa2d-touch{bottom:max(.35rem,env(safe-area-inset-bottom));left:max(0px,env(safe-area-inset-left));right:max(0px,env(safe-area-inset-right))}.promesa2d-touch__move{gap:0;transform:translateX(-3px)}.promesa2d-touch__actions{gap:.35rem}.promesa2d-touch button{width:44px;min-height:44px;font-size:1rem}.promesa2d-touch__actions button:first-child{font-size:.78rem}.promesa2d-objective{display:none}.promesa2d-hint{bottom:3.55rem}.promesa2d-announce{bottom:6rem}}
@media (max-height:420px) and (orientation:landscape){.promesa2d-screen--menu{align-items:start}.promesa2d-title-card{padding-block:1rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
body.p2-reduced-motion * { animation-duration:.001ms!important; transition-duration:.001ms!important; }