:root{--bg:#07101c;--surface:#101c2a;--surface2:#152538;--line:#33475a;--fg:#f3e7cd;--mut:#a8b5bf;--acc:#eab66a;--mint:#91d5c7}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--fg);font:14px/1.55 Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 20% 0%,#163252 0,transparent 33rem),linear-gradient(145deg,#07101c,#0b1724 65%,#07101c);min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.page{max-width:1512px;margin:auto;padding:28px clamp(16px,3vw,48px) 56px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid #34495c}
.identity{display:flex;align-items:center;gap:26px;min-width:0}
.identity-primary,.identity-product{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.identity-primary img{display:block;width:210px;height:auto;max-width:100%}
.identity-product img{display:block;width:188px;height:auto;max-width:100%}
.identity-divider{width:1px;height:45px;background:linear-gradient(transparent,#a58a5e,transparent);flex:none}
.identity-caption{font:600 10px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase;color:#aebdc5}
.mast-meta,.eyebrow,.mono{font:600 11px/1.4 ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase}
.mast-meta{color:var(--mut)}
.hero{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:38px 0 30px}
.eyebrow{color:var(--mint);margin:0 0 12px}
h1{font:400 clamp(40px,5vw,76px)/.98 Georgia,serif;letter-spacing:-.055em;margin:0;max-width:740px}
.hero p:last-child{max-width:365px;color:#c5cdd2;margin:0;font-size:15px}
.layout{display:grid;grid-template-columns:minmax(0,1.67fr) minmax(335px,.83fr);gap:18px;align-items:start}
.stage-card,.panel,.below{border:1px solid var(--line);background:linear-gradient(150deg,#142237,#0b1624);box-shadow:0 20px 60px #0005}
.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.stage-heading strong{font:600 12px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;text-transform:uppercase}
.live{display:flex;align-items:center;gap:8px;color:var(--mint);font-size:12px}.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.stage-wrap{position:relative;padding:16px;background:#080d15}
.stage{position:relative;width:100%;aspect-ratio:16/9;margin:auto;overflow:hidden;border:1px solid #526272;box-shadow:0 0 0 5px #101a26}
#c{width:100%;height:100%;max-width:none}
.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:18px;height:18px;padding:0;border:2px solid #f6d695;border-radius:50%;background:#081018bb;box-shadow:0 0 0 4px #f2a93b24,0 0 14px #f2a93b88;transition:transform .18s,box-shadow .18s;z-index:2}
.hotspot:hover,.hotspot.active,.hotspot.partner{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 7px #f2a93b33,0 0 22px #f2a93bcc}
.hotspot.partner{border-color:var(--mint);box-shadow:0 0 0 7px #91d5c733,0 0 20px #91d5c7aa}
.hotspot::after{content:attr(data-label);position:absolute;left:50%;bottom:20px;transform:translateX(calc(-50% + var(--label-shift,0px)));white-space:nowrap;background:#06111de8;color:var(--fg);border:1px solid var(--line);padding:3px 6px;font:10px ui-monospace,monospace;opacity:0;pointer-events:none}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1}
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 18px;border-top:1px solid var(--line)}
.bar .spacer{flex:1}
.clock{font:600 12px ui-monospace,SFMono-Regular,monospace;color:var(--mint);min-width:116px}
.control,.choice,.cast button,.scene-button,.text-submit{border:1px solid #53667a;color:var(--fg);background:#192b3c;padding:8px 11px;min-height:37px;border-radius:3px}
.control:hover,.choice:hover,.cast button:hover,.scene-button:hover,.text-submit:hover{border-color:var(--acc);background:#25384a}
.control:disabled{opacity:.55;cursor:wait}
.panel{padding:22px;min-height:580px}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mint);font:600 11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.panel h2{font:400 32px/1.05 Georgia,serif;letter-spacing:-.03em;margin:15px 0 7px}
.panel-copy{color:#b7c4cc;margin:0 0 18px;font-size:13px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:18px;background:#0a1725;padding:4px;border:1px solid var(--line)}
.tabs button{background:transparent;border:0;color:var(--mut);padding:8px 4px}
.tabs button[aria-selected="true"]{background:#263b50;color:var(--fg);box-shadow:inset 0 -2px var(--acc)}
.cast{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;max-height:115px;overflow:auto}
.cast button{font:600 11px ui-monospace,monospace;min-height:29px;padding:5px 8px}
.cast button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc);background:#352b2b}
.profile{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:14px;background:#0b1a2a;border:1px solid var(--line);padding:14px;margin-bottom:14px}
.portrait{width:64px;height:64px;background:#09111a;border:1px solid #526477;display:grid;place-items:center;overflow:hidden}
.portrait canvas{width:auto;max-width:none;height:auto}
.owner-sigil{font:700 25px ui-monospace,SFMono-Regular,monospace;letter-spacing:-.1em;color:var(--acc)}
.profile h3{font:400 25px Georgia,serif;margin:0}.profile p{margin:3px 0 0;color:#aebbc4;font-size:12px}
.badge{display:inline-block;color:var(--acc);font:600 10px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}
.prompt-label{font:600 11px ui-monospace,monospace;color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin:16px 0 8px}
.choices,.scenes{display:grid;gap:7px}.choice,.scene-button{text-align:left;width:100%;padding:9px 10px;font-size:12px}
.dialogue{min-height:104px;max-height:230px;overflow:auto;margin-top:14px;padding:12px;border:1px solid var(--line);background:#091523;display:grid;align-content:start;gap:9px}
.line{border-left:2px solid var(--mint);padding-left:9px;color:#d8e0e1;font-size:12px}.line.user{border-color:var(--acc)}.line strong{display:block;color:var(--mint);font:600 10px ui-monospace,monospace;text-transform:uppercase}.line.user strong{color:var(--acc)}
.ask{display:flex;gap:6px;margin-top:8px}.ask input{min-width:0;flex:1;background:#0b1a2a;border:1px solid var(--line);color:var(--fg);padding:9px}.ask input::placeholder{color:#8495a2}.text-submit{white-space:nowrap}
.scene-button[aria-pressed="true"]{border-color:var(--mint);color:var(--mint)}
.scene-next{margin-top:10px;width:100%}
.disclosure{margin:16px 0 0;color:#9fb0ba;font-size:11px;line-height:1.5}
.below{margin-top:18px;padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:25px}
.below h2{font:400 22px Georgia,serif;margin:0 0 6px}.below p{color:#b9c6cd;margin:0;font-size:13px}
.leyenda summary{cursor:pointer;color:var(--acc);font-weight:600}.leyenda code{color:var(--acc)}.leyenda ul{margin:12px 0 0;padding-left:18px;color:#b9c6cd;font-size:12px}.leyenda li+li{margin-top:5px}
[hidden]{display:none!important}
@media(max-width:1050px){.layout{grid-template-columns:1fr}.panel{min-height:0}.hero{align-items:start}.stage-card{max-width:100%}}
@media(max-width:650px){.page{padding:16px 12px 30px}.masthead{padding-bottom:16px}.identity{gap:10px;width:100%}.identity-primary,.identity-product{flex:1}.identity-divider{height:34px}.identity-primary img,.identity-product img{width:100%}.identity-caption{font-size:8px;letter-spacing:.07em}.mast-meta{display:none}.hero{display:block;padding:26px 4px}.hero p:last-child{margin-top:15px}.stage-wrap{padding:7px}.stage-heading{padding:12px}.hotspot{width:14px;height:14px}.panel{padding:16px}.below{grid-template-columns:1fr;padding:17px}.bar{padding:12px}.bar .spacer{display:none}.control{flex:1}.clock{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* v0.6 · conservar el lienzo, ampliar la lectura humana */
.page{max-width:1440px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.hero{padding:26px 0 24px}.layout{grid-template-columns:minmax(0,1fr)}
.live{color:var(--mut)}.live::before{background:var(--acc);box-shadow:none}
.control,.choice,.scene-button,.text-submit,.tabs button{min-height:44px;touch-action:manipulation}
.stage-hint{margin:0;padding:0 18px 14px;color:var(--mut);font-size:12px}
.hotspot{width:7px;height:7px;border:1px solid var(--acc);background:#f2a93b;box-shadow:none;transition:none;z-index:2}
.hotspot::after{opacity:1;bottom:calc(16px + var(--lift,0px));font:600 11px/1.3 ui-monospace,monospace;padding:5px 7px;border-color:var(--accent,var(--line));box-shadow:0 2px 8px #000b;pointer-events:auto;min-height:25px;color:#fff4dc}
.hotspot::before{content:"";position:absolute;left:-19px;top:-19px;width:44px;height:44px}
.hotspot.active,.hotspot:hover,.hotspot.partner{transform:translate(-50%,-50%);box-shadow:0 0 0 5px #eab66a35}
.hotspot.active{z-index:6}
.hotspot.active::after,.hotspot.partner::after{background:#273e46;border-color:var(--mint);z-index:4}
.stage.hide-labels .hotspot:not(.active):not(:focus-visible):not(:hover)::after{opacity:0;pointer-events:none}
.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));max-height:none;overflow:visible;margin:0;padding:14px;gap:8px;border-top:1px solid var(--line)}
.cast button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:9px 5px;min-height:112px;text-align:center;border-top:2px solid var(--accent);background:#0d1b2a;color:var(--fg);font-size:12px}
.cast button small{font-size:10px;font-weight:400;color:var(--mut)}
.cast .portrait{height:56px;width:56px;border:0;background:none}.cast .portrait canvas{width:56px!important;height:56px!important}
.cast button[aria-pressed="true"]{border-color:var(--mint);color:var(--fg);background:#234047;box-shadow:inset 0 0 0 1px var(--mint)}
.panel{min-height:0}.tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.encounter{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:24px}
.profile{grid-template-columns:100px minmax(0,1fr)}.portrait{width:96px;height:96px;border-color:var(--accent,var(--line));background:radial-gradient(circle,#26384a,#07101c)}
.portrait canvas{width:96px!important;height:96px!important}.profile h3{font-size:30px}.trait{color:var(--mint)!important}
.choices{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{font-size:13px}.ask input{font-size:16px}
.activity-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.activity-toolbar label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.activity-toolbar input{max-width:100%;font-size:16px}
.activity-summary{padding:12px;background:#0a1725;border:1px solid var(--line);color:var(--mut);margin-bottom:12px}.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.activity-card{padding:15px;background:#0b1a2a;border:1px solid var(--line);min-width:0;overflow-wrap:anywhere}.activity-card h3{margin:0 0 6px;font-size:16px}.activity-card p{margin:5px 0;font-size:13px}.activity-card small{color:var(--mut)}.activity-state{color:var(--acc);font-size:12px}.activity-state[data-state="working"]{color:var(--mint)}.activity-state[data-state="blocked"]{color:#ff9b86}
@media(max-width:1050px){.choices{grid-template-columns:1fr}.page{padding-top:18px}}
@media(max-width:700px){.encounter{grid-template-columns:1fr;gap:16px}.cast{grid-template-columns:repeat(3,minmax(0,1fr))}.panel{padding:16px}.hotspot::after{font-size:9px;padding:4px}.hero p:last-child{font-size:14px}.profile{padding:10px}.tabs button{font-size:12px}.stage-hint{padding:0 12px 12px}.ask{flex-wrap:wrap}.ask input{flex-basis:70%}}
@media(max-width:430px){.cast{grid-template-columns:repeat(2,minmax(0,1fr))}.cast button{min-height:106px}.stage-heading{gap:8px;flex-wrap:wrap}.bar .control{flex:1 1 44%;font-size:12px}.profile{grid-template-columns:88px minmax(0,1fr)}.profile .portrait{width:84px;height:84px}.profile h3{font-size:26px}.badge{font-size:9px}}


/* v0.7 · explorar y ampliar dentro de la propia casa */
.stage{overflow:auto;overscroll-behavior:contain;scrollbar-color:#5a6a80 #091523}
.world{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.world #c{position:absolute;inset:0;width:100%;height:100%}
.stage.pan-mode{aspect-ratio:auto;height:min(65svh,480px)}
.stage.pan-mode .world{width:var(--world-width);height:var(--world-height);aspect-ratio:auto;max-width:none}
.stage.lens-touch{touch-action:none}.stage:not(.lens-touch){touch-action:pan-x pan-y pinch-zoom}
.scene-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 16px;background:#0b1724;border-top:1px solid var(--line)}
.scene-nav .control{font-size:12px}.scene-nav .view-scale{color:var(--mint);font:600 12px ui-monospace,monospace;margin-left:auto}
.lens-window{position:absolute;width:clamp(180px,24vw,240px);z-index:12;pointer-events:none;filter:drop-shadow(0 9px 18px #000b)}
.lens-glass{aspect-ratio:1;border:3px solid var(--mint);border-radius:50%;overflow:hidden;background:#070e18;box-shadow:inset 0 0 0 3px #162536,0 0 0 4px #07101cd9}
.lens-glass canvas{width:100%;height:100%}.lens-caption{text-align:center;display:block;margin:8px auto 0;max-width:100%;padding:5px 10px;border:1px solid var(--mint);background:#091523ed;color:var(--fg);font:600 12px ui-monospace,monospace;border-radius:4px}
.lens-close{pointer-events:auto;position:absolute;right:-4px;top:-8px;border:1px solid var(--mint);background:#0d1b2a;color:var(--fg);border-radius:50%;width:44px;height:44px;font-size:24px}
.lens-target{position:absolute;left:var(--tx);top:var(--ty);width:var(--target-size);height:var(--target-size);transform:translate(-50%,-50%);border:1px solid var(--mint);border-radius:50%;pointer-events:none;z-index:1;box-shadow:0 0 0 1px #001b}
.stage-hint{padding-top:4px}.world .hotspot.active{z-index:6}
@media(max-width:700px){.stage-wrap{padding:7px}.scene-nav{padding:10px;gap:6px}.scene-nav .control{flex:1 1 29%;padding:8px 6px}.scene-nav .view-scale{width:100%;text-align:center}.lens-window{width:180px}}


/* v0.8.1 · nombres fuera del dibujo, sin globos que tapen personajes */
.hotspot::after{content:none!important;display:none!important}
.hotspot{opacity:.4}.hotspot:hover,.hotspot.active,.hotspot.partner,.hotspot:focus-visible{opacity:1}
.name-caption{min-height:26px;margin:0;padding:2px 18px 5px;color:#bccbd2;font:500 12px/1.5 ui-monospace,monospace}
.name-caption:empty::before{content:"\00a0"}
@media(max-width:700px){.name-caption{padding-left:12px;padding-right:12px}}


/* Edición pública: enlaces de regreso y controles ocultos. */
.identity-primary a{display:block}
.casa-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#aebdc5;font:600 11px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.casa-back:hover,.casa-back:focus-visible{color:var(--acc)}
.casa-foot{margin-top:28px;padding-top:18px;border-top:1px solid #34495c;color:var(--mut);font-size:12px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.casa-foot a{color:var(--acc)}
[hidden]{display:none!important}