:root{
  --ink:#382b24; --paper:#efe0bd; --paper2:#dfc995; --line:#70513b;
  --red:#8c2f35; --red2:#b24b4f; --wood:#7c512f; --wood2:#a67546;
  --grass:#8aa36e; --stone:#c8b99c; --sky:#b9d7d0; --gold:#c9973d;
}
*{box-sizing:border-box} html,body{margin:0;background:#2c2521;color:var(--ink);font-family:"Courier New",monospace}
body{min-height:100vh;display:flex;justify-content:center;padding:18px}
.game{
  width:min(1180px,100%); background:var(--paper); border:4px solid #231c18;
  box-shadow:0 0 0 4px #876247,12px 14px 0 rgba(0,0,0,.26);
}
.topbar{
  min-height:58px; display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 12px;background:linear-gradient(#ecd9aa,#d7bd83);border-bottom:3px solid var(--line);
}
.brand{font-weight:900;font-size:22px;letter-spacing:1px;margin-right:auto}
.stat{background:#f6e9c7;border:2px solid #73543d;padding:7px 10px;box-shadow:inset 1px 1px #fff3d6;font-weight:700}
.main{display:grid;grid-template-columns:180px 1fr 270px;min-height:620px}
.sidebar,.rightbar{background:#d8c18d;padding:10px;border-right:3px solid var(--line)}
.rightbar{border-right:0;border-left:3px solid var(--line)}
.navbtn,.shopbtn,.primary,.smallbtn{
  width:100%;border:2px solid #5b402e;background:#ecdcb5;color:#35261e;padding:9px 8px;
  font:700 14px "Courier New",monospace;text-align:left;cursor:pointer;margin-bottom:7px;
  box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e;
}
.navbtn:hover,.shopbtn:hover,.primary:hover,.smallbtn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.navbtn.active{background:#b85450;color:white}
.primary{background:var(--red);color:#fff6df;text-align:center;font-size:17px;padding:12px}
.smallbtn{font-size:13px;text-align:center}
.panel{
  border:2px solid #73543d;background:#efe1bd;margin-bottom:10px;padding:10px;
  box-shadow:inset 1px 1px #fff5d8;
}
.panel h3{font-size:14px;margin:0 0 8px;text-transform:uppercase;border-bottom:1px solid #9a795b;padding-bottom:5px}
.scene-wrap{position:relative;overflow:hidden;background:#91b0aa}
.scene{
  position:relative;min-height:620px;overflow:hidden;
  background:
   linear-gradient(#adcac4 0 38%,#d5c6aa 38% 40%,#bcae91 40% 100%);
}
.cloud{position:absolute;background:#dbe8df;width:95px;height:24px;top:38px;left:80px;border-radius:2px;opacity:.75}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud:before{width:35px;height:35px;left:18px;top:-16px}.cloud:after{width:45px;height:45px;left:44px;top:-24px}
.building{position:absolute;left:0;right:0;top:110px;height:170px;background:#9a7560;border-top:5px solid #5e4437;border-bottom:5px solid #634737}
.building:before{content:"ESCUELA DE TEATRO";position:absolute;left:30px;top:20px;padding:6px 10px;background:#e5cf9e;border:3px solid #5b4232;font-weight:900;letter-spacing:1px}
.window{position:absolute;top:72px;width:54px;height:65px;background:#587270;border:5px solid #604638;box-shadow:inset 0 0 0 3px #c8b18b}
.w1{left:60px}.w2{left:145px}.w3{right:95px}.door{position:absolute;right:25px;bottom:0;width:52px;height:82px;background:#59382a;border:5px solid #3e2b22}
.plaza{
  position:absolute;left:0;right:0;top:280px;bottom:0;
  background-color:#c9baa0;
  background-image:linear-gradient(45deg,rgba(75,60,45,.10) 25%,transparent 25%),linear-gradient(-45deg,rgba(75,60,45,.10) 25%,transparent 25%);
  background-size:28px 28px;background-position:0 0,0 14px;
}
.tree{position:absolute;left:25px;top:245px;width:30px;height:95px;background:#69472e}
.tree:before{content:"";position:absolute;width:98px;height:88px;border-radius:48%;background:#617b4d;left:-34px;top:-58px;box-shadow:20px 5px #76925e,-15px 12px #829b66}
.stage{
  position:absolute;left:50%;top:285px;transform:translateX(-50%);
  width:280px;height:205px;background:var(--wood2);border:8px solid #58391f;box-shadow:8px 9px 0 rgba(0,0,0,.20);
}
.stage .sign{position:absolute;left:32px;right:32px;top:-28px;background:#ead49d;border:4px solid #5c3a24;padding:5px;text-align:center;font-weight:900}
.stage-inner{position:absolute;left:22px;right:22px;top:24px;bottom:22px;background:#243436;overflow:hidden;border:4px solid #482d20}
.backdrop{position:absolute;inset:0;background:linear-gradient(#769d93 0 60%,#536f4c 60%);transition:.3s}
.backdrop.upgraded{background:linear-gradient(#789ab9 0 52%,#d6a55f 52% 65%,#59754b 65%);box-shadow:inset 0 -20px 0 rgba(61,83,44,.25)}
.curtain-l,.curtain-r{position:absolute;top:0;width:38px;height:100%;background:repeating-linear-gradient(90deg,#7d2027 0 10px,#a53a3d 10px 20px);z-index:4;transition:.4s}
.curtain-l{left:0}.curtain-r{right:0}.stage.gold-curtain .curtain-l,.stage.gold-curtain .curtain-r{box-shadow:inset 7px 0 #c99a46,inset -7px 0 #c99a46}
.valance{position:absolute;left:0;right:0;top:0;height:26px;background:#8b252d;z-index:5;border-bottom:4px solid #582329}
.puppet{position:absolute;bottom:20px;width:34px;height:52px;z-index:3;transition:.25s}
.puppet:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#d7ad83;left:6px;top:0;border:2px solid #563f32}
.puppet:after{content:"";position:absolute;left:5px;top:22px;width:24px;height:28px;background:var(--shirt);border:2px solid #4d3528}
.p1{left:72px;--shirt:#a33b3f}.p2{right:72px;--shirt:#3f6889}
.puppet.dance{animation:dance .55s ease-in-out infinite alternate}
@keyframes dance{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-13px) rotate(7deg)}}
.string{position:absolute;width:1px;background:#d9ccb4;top:0;height:100px;opacity:.6;z-index:2}

.lights{position:absolute;left:32px;right:32px;top:25px;height:0;z-index:6;display:none}
.lights.on{display:block;box-shadow:70px 55px 45px 22px rgba(255,221,133,.55),150px 55px 45px 22px rgba(255,183,102,.42)}
.hero{position:absolute;left:calc(50% - 205px);top:378px;width:42px;height:78px;z-index:10}
.hero .head,.person .head{position:absolute;width:30px;height:30px;border-radius:50%;background:#c88e66;border:2px solid #5d4031;left:6px;top:0}
.hero .body,.person .body{position:absolute;width:34px;height:42px;left:4px;top:28px;background:#625343;border:2px solid #49362b}
.hero:after{content:"♪";position:absolute;left:-10px;top:-18px;font-size:20px;opacity:.75}
.crowd{position:absolute;left:50%;top:425px;transform:translateX(-50%);width:430px;height:85px;z-index:14}
.person{position:absolute;width:38px;height:66px;transform-origin:bottom center}
.person .body{background:var(--body)}
.person .reaction{position:absolute;left:2px;top:-28px;background:#fff2d0;border:2px solid #72513b;padding:2px 4px;font-size:16px;opacity:0;transition:.2s}
.person.react .reaction{opacity:1;animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-4px)}}
.p-a{left:20px;top:12px;--body:#6b8264}.p-b{left:82px;top:4px;--body:#8b564b}.p-c{left:148px;top:14px;--body:#516d87}.p-d{left:220px;top:2px;--body:#796391}.p-e{left:292px;top:10px;--body:#987044}.p-f{left:360px;top:5px;--body:#5d7e74}
.tipjar{position:absolute;left:calc(50% + 158px);top:420px;width:42px;height:36px;background:#ccb77c;border:3px solid #62472f;text-align:center;font-size:13px;padding-top:8px;z-index:11}
.message{
  position:absolute;left:50%;top:190px;bottom:auto;transform:translateX(-50%);
  width:min(360px,72%);max-width:360px;background:#f4e7c7;border:3px solid #684b36;
  padding:9px 10px;font-weight:700;box-shadow:4px 4px 0 rgba(0,0,0,.18);
  z-index:24;text-align:center;transition:top .8s ease,transform .8s ease
}
.day-overlay{position:absolute;inset:0;background:rgba(61,31,26,.12);pointer-events:none}
.progress{height:12px;border:2px solid #694b37;background:#c9b284;margin:6px 0}.progress>i{display:block;height:100%;width:0;background:#8f3c40;transition:width .25s}
.shopbtn{position:relative;padding-right:55px}
.shopbtn span{position:absolute;right:8px;top:8px;color:#6c3f23}
.shopbtn.owned{background:#b8c29a}.shopbtn:disabled{opacity:.55;cursor:not-allowed}
.log{height:142px;overflow:auto;background:#e7d6ad;border:2px inset #957755;padding:6px;font-size:13px;line-height:1.5}
.legend{font-size:13px;opacity:.78}
@media(max-width:900px){.main{grid-template-columns:1fr}.sidebar,.rightbar{border:0;border-bottom:3px solid var(--line)}.sidebar{display:flex;gap:6px;flex-wrap:wrap}.navbtn{width:auto}.scene{min-height:600px}.rightbar{border-top:3px solid var(--line)}}

/* === Función protagonista: evolución del Prototipo 001 === */
.scene{
  transform:scale(1);
  transform-origin:50% 43%;
  transition:transform 1.15s cubic-bezier(.2,.75,.25,1);
}
.scene.camera-focus{transform:scale(1.16)}
.scene-wrap{overflow:hidden}
.stage{
  transition:transform 1.05s cubic-bezier(.2,.75,.25,1),top 1.05s cubic-bezier(.2,.75,.25,1),box-shadow .5s;
  transform-origin:center center;
}
.scene.camera-focus .stage{
  transform:translateX(-50%) scale(1.15);
  top:270px;
  box-shadow:11px 12px 0 rgba(0,0,0,.24);
}
.curtain-l,.curtain-r{
  transform:translateX(0);
  transition:transform 1.05s cubic-bezier(.4,0,.2,1),box-shadow .3s;
}
.stage.show-open .curtain-l{transform:translateX(-28px)}
.stage.show-open .curtain-r{transform:translateX(28px)}

.puppet{
  transition:left 1.05s cubic-bezier(.45,.05,.25,1),bottom .85s ease,transform .95s cubic-bezier(.35,.1,.25,1),opacity .45s;
  will-change:left,bottom,transform;
}
.puppet.quick{transition-duration:.42s,.42s,.42s,.3s}
.puppet.slow{transition-duration:1.75s,1.35s,1.75s,.65s}
.puppet.jump{animation:stageJump .62s ease-in-out 1}
.puppet.bow{animation:stageBow .75s ease-in-out 1}
.puppet.spin{animation:stageSpin .9s ease-in-out 1}
@keyframes stageJump{0%,100%{margin-bottom:0}45%{margin-bottom:25px}}
@keyframes stageBow{0%,100%{rotate:0deg}50%{rotate:24deg;translate:0 6px}}
@keyframes stageSpin{to{rotate:360deg}}

.play-symbol{
  position:absolute;left:50%;top:48px;transform:translateX(-50%);
  z-index:2;font-size:34px;color:#efd583;text-shadow:2px 2px #4a3428;
  opacity:.88;pointer-events:none
}
.backdrop.play-luna{
  background:radial-gradient(circle at 72% 22%,#efe1a6 0 11px,transparent 12px),linear-gradient(#33495f 0 58%,#536f4c 58%);
}
.backdrop.play-feria{
  background:linear-gradient(90deg,transparent 0 12%,rgba(238,197,97,.18) 12% 15%,transparent 15% 28%,rgba(184,75,75,.16) 28% 31%,transparent 31%),linear-gradient(#c28e62 0 56%,#d4ad67 56% 65%,#667f52 65%);
}
.backdrop.play-farol{
  background:radial-gradient(circle at 58% 42%,rgba(255,211,106,.52) 0 10px,rgba(255,211,106,.14) 11px 38px,transparent 39px),linear-gradient(#282f3a 0 62%,#4d4c43 62%);
}

.weather-card{
  position:absolute;right:13px;top:13px;z-index:15;background:#f3e4bf;border:3px solid #684b36;
  padding:6px 8px;box-shadow:3px 3px rgba(0,0,0,.14);font-size:13px;font-weight:900;transition:opacity .35s
}
.weather-card small{display:block;font-size:13px;font-weight:400;margin-top:2px}
.scene.camera-focus .weather-card{opacity:0}

.act-label{
  position:absolute;left:50%;top:248px;transform:translateX(-50%);z-index:23;
  background:#f3e4bf;border:3px solid #684b36;padding:4px 7px;font-size:13px;font-weight:900;
  opacity:0;transition:opacity .25s;pointer-events:none
}
.act-label.show{opacity:1}

.camera-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:13;
  box-shadow:inset 0 0 100px 10px rgba(43,29,24,0);transition:box-shadow 1s
}
.scene.camera-focus .camera-vignette{box-shadow:inset 0 0 105px 20px rgba(43,29,24,.18)}

.person{transition:transform .4s}
.person.applaud{animation:audienceBounce .42s ease-in-out infinite alternate}
.person.lean{transform:translateY(-4px) scale(1.04)}
@keyframes audienceBounce{to{transform:translateY(-5px)}}

.play-choice.selected{background:#b85450;color:white}
.play-choice small{display:block;font-size:13px;font-weight:400;line-height:1.25;margin-top:3px}
.play-choice.selected span{color:#fff1d0}
.function-clock{display:flex;justify-content:space-between;font-size:13px;margin-top:5px}
.function-clock b{color:#76373b}

@media(max-width:900px){
  .scene.camera-focus{transform:scale(1.10)}
  .scene.camera-focus .stage{transform:translateX(-50%) scale(1.08);top:275px}
}


/* === Marionetas manejadas desde arriba === */
.string{
  top:0;
  height:70px;
  width:1px;
  background:#e0d5c0;
  opacity:.72;
  z-index:2;
  transform-origin:top center;
  pointer-events:none;
  box-shadow:0 0 1px rgba(255,255,255,.35);
}

/* === Público con personalidad === */
.crowd{
  overflow:visible;
}
.person.dynamic{
  transition:left .9s cubic-bezier(.25,.8,.25,1),top .65s ease,opacity .55s ease,transform .45s ease;
}
.person.dynamic.arriving{
  opacity:0;
}
.person.dynamic.leaving{
  opacity:0;
}
.person .nameplate{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  white-space:nowrap;
  background:#f4e5c1;
  border:2px solid #684b36;
  padding:1px 3px;
  font-size:13px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:.16s;
  z-index:5;
}
.person:hover .nameplate{opacity:1}
.person .reaction{
  z-index:6;
}
.person.dislike .reaction{
  opacity:1;
  background:#ead3b4;
}
.person.curious .reaction{
  opacity:1;
}
.person.satisfied .reaction{
  opacity:1;
}

.audience-event{
  position:absolute;
  left:50%;
  top:475px;
  transform:translateX(-50%);
  z-index:19;
  background:#f3e4bf;
  border:3px solid #684b36;
  padding:4px 7px;
  font-size:13px;
  font-weight:900;
  opacity:0;
  transition:opacity .2s,transform .3s;
  pointer-events:none;
  box-shadow:3px 3px rgba(0,0,0,.13);
}
.audience-event.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

.audience-roster{
  max-height:126px;
  overflow:auto;
}
.audience-row{
  display:grid;
  grid-template-columns:18px 1fr auto;
  gap:5px;
  align-items:center;
  border-bottom:1px solid #b89b75;
  padding:3px 0;
  font-size:13px;
}
.audience-row:last-child{border-bottom:0}
.audience-row .dot{
  width:13px;height:13px;border-radius:50%;border:2px solid #5d4031;
}
.audience-row b{display:block;font-size:13px}
.audience-row small{display:block;font-size:13px;opacity:.72}
.audience-row .face{font-size:13px}

.person.picky .body{border-style:dashed}
.person.dreamer .head{box-shadow:0 -5px 0 #6e513d}
.person.comedian .body{border-radius:5px 5px 0 0}
.person.classic .head{border-width:3px}
.person.restless{transform-origin:center bottom}



/* === Calle debajo del teatrillo === */
.street{
  position:absolute;left:0;right:0;top:505px;bottom:0;z-index:7;
  background:#716d68;
  border-top:7px solid #8f806f;
  overflow:hidden;
}
.street:before{
  content:"";position:absolute;left:0;right:0;top:0;height:22px;
  background:#b9aa91;border-bottom:3px solid #625c55;
}
.street:after{
  content:"";position:absolute;left:0;right:0;bottom:13px;height:4px;
  background:repeating-linear-gradient(90deg,#d8c995 0 38px,transparent 38px 72px);
  opacity:.8
}
.street-sidewalk{
  position:absolute;left:0;right:0;top:22px;height:11px;
  background:#8e8274;border-bottom:2px solid #5e5953
}
.street-road-line{
  position:absolute;left:0;right:0;top:73px;height:3px;
  background:repeating-linear-gradient(90deg,#cbbd8b 0 31px,transparent 31px 60px);
  opacity:.65
}
.street-passers{position:absolute;inset:0;z-index:4;pointer-events:none}

/* Transeúntes: algunos solo cruzan, otros se detienen */
.passer{
  position:absolute;width:31px;height:66px;top:33px;left:-45px;
  transition:left linear,opacity .35s,top .45s;
  transform-origin:center bottom;opacity:.95
}
.passer.reverse{transform:scaleX(-1)}
.passer .head{
  position:absolute;width:23px;height:23px;border-radius:50%;background:#c88e66;
  border:2px solid #5d4031;left:4px;top:0
}
.passer .body{
  position:absolute;width:27px;height:31px;left:2px;top:22px;
  background:var(--passer-body,#6d7d68);border:2px solid #49362b
}
.passer .leg{
  position:absolute;width:7px;height:19px;top:50px;background:#474641;border:2px solid #34322f;
  transform-origin:top center;animation:walkLeg .34s ease-in-out infinite alternate
}
.passer .leg.l{left:6px}.passer .leg.r{right:6px;animation-direction:alternate-reverse}
.passer .arm{
  position:absolute;width:6px;height:22px;top:27px;background:var(--passer-body,#6d7d68);
  border:2px solid #49362b;transform-origin:top center;animation:walkArm .34s ease-in-out infinite alternate
}
.passer .arm.l{left:-1px}.passer .arm.r{right:-1px;animation-direction:alternate-reverse}
.passer.stopping .leg,.passer.stopping .arm{animation-play-state:paused}
.passer.stopping{transition-timing-function:cubic-bezier(.2,.75,.25,1)}
.passer.fade{opacity:0}
@keyframes walkLeg{to{transform:rotate(18deg)}}
@keyframes walkArm{to{transform:rotate(-17deg)}}

/* Durante el zoom la información sigue arriba del escenario */
.scene.camera-focus .message{
  top:178px;
  transform:translateX(-50%) scale(.92);
}

@media(max-width:900px){
  .audience-event{top:505px}
  .audience-panel{display:none}
}


/* === Ajustes de composición === */
.main{min-height:640px}
.scene{min-height:640px}
.stage .sign{z-index:32}

/* Caja grande: 50px más arriba */
.message{
  top:140px!important;
  z-index:30;
}
.scene.camera-focus .message{
  top:128px!important;
}

/* Etiqueta/texto de escena: 20px más abajo; el letrero queda por encima */
.act-label{
  top:268px!important;
  z-index:22;
}

/* Público más abajo para despejar completamente el escenario */
.crowd{
  top:500px!important;
}
.audience-event{
  top:480px!important;
}

/* Vereda peatonal: sin calzada y con suficiente altura para pies */
.sidewalk{
  position:absolute;
  left:0;right:0;top:535px;bottom:0;
  z-index:7;
  overflow:visible;
  background-color:#b7aa94;
  background-image:
    linear-gradient(90deg,rgba(91,75,59,.11) 1px,transparent 1px),
    linear-gradient(rgba(91,75,59,.11) 1px,transparent 1px);
  background-size:42px 27px;
  border-top:5px solid #796b5c;
}
.sidewalk-edge{
  position:absolute;left:0;right:0;top:0;height:8px;
  background:#d0c2a8;border-bottom:3px solid #776b5e;
}
.street-passers{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  overflow:visible;
}
.passer{
  top:10px;
}

/* Diálogos de marionetas */
.puppet-dialogue{
  position:absolute;
  width:82px;
  min-height:22px;
  padding:4px 5px;
  background:#fff0c9;
  border:2px solid #684b36;
  box-shadow:2px 2px rgba(0,0,0,.14);
  font-size:13px;
  line-height:1.2;
  font-weight:900;
  z-index:11;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s,left .5s ease,top .5s ease;
}
.puppet-dialogue.show{opacity:1}
.puppet-dialogue:after{
  content:"";
  position:absolute;
  bottom:-7px;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #684b36;
}
#dialogue1:after{right:12px}
#dialogue2:after{left:12px}

/* Calidad determinista */
.quality-panel h3{
  display:flex;justify-content:space-between;gap:6px;
}
.quality-panel h3 span{
  color:#7d3438;
}
.factor-row{
  display:grid;
  grid-template-columns:70px 1fr 18px;
  align-items:center;
  gap:5px;
  font-size:13px;
  margin:4px 0;
}
.factor-row>i{
  display:block;
  height:8px;
  border:1px solid #71533e;
  background:#c9b287;
  overflow:hidden;
}
.factor-row>i>b{
  display:block;
  height:100%;
  width:0;
  background:#8f3c40;
  transition:width .3s;
}
.factor-row em{
  font-style:normal;
  font-weight:900;
  text-align:right;
}
.quality-hint{
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid #a58764;
  font-size:13px;
  line-height:1.3;
}

/* El zoom conserva la vereda y los pies visibles */
.scene{
  transform-origin:50% 52%!important;
}
.scene.camera-focus{
  transform:scale(1.08)!important;
}
.scene.camera-focus .stage{
  transform:translateX(-50%) scale(1.15)!important;
  top:270px!important;
}

@media(max-width:900px){
  .scene.camera-focus{transform:scale(1.05)!important}
  .quality-panel{display:block}
  .sidewalk{top:540px}
  .crowd{top:500px!important}
}


/* === Iteración: teatrillo lambe-lambe, anatomía unificada, gorra y donaciones === */
.scene{min-height:680px!important;transform-origin:50% 50%!important}
.scene.camera-focus{transform:scale(1.06)!important}
.stage{top:248px!important;width:255px!important;height:188px!important;z-index:14}
.scene.camera-focus .stage{top:236px!important;transform:translateX(-50%) scale(1.12)!important}
.stage-inner{left:18px!important;right:18px!important;top:22px!important;bottom:20px!important}
.stage .sign{z-index:36!important}
.stage-table{position:absolute;left:50%;top:414px;transform:translateX(-50%);width:330px;height:86px;z-index:10;pointer-events:none}
.stage-table .table-top{position:absolute;left:0;right:0;top:0;height:18px;background:#9b6b44;border:5px solid #5a3925;box-shadow:0 5px 0 rgba(0,0,0,.15)}
.stage-table .table-leg{position:absolute;top:16px;width:18px;height:68px;background:#7f5738;border:4px solid #543724}
.stage-table .table-leg.l{left:36px}.stage-table .table-leg.r{right:36px}
.puppeteer{position:absolute;left:50%;top:190px;transform:translateX(-50%);width:56px;height:122px;z-index:11;pointer-events:none}
.puppeteer .head{position:absolute;left:14px;top:0;width:28px;height:28px;border-radius:50%;background:#c88e66;border:2px solid #5d4031}
.puppeteer .body{position:absolute;left:10px;top:26px;width:36px;height:44px;background:#5f544e;border:2px solid #49362b}
.puppeteer .arm,.puppeteer .leg{position:absolute;background:#5f544e;border:2px solid #49362b;transform-origin:top center}
.puppeteer .arm{width:7px;height:48px;top:20px}
.puppeteer .arm.left{left:2px;transform:rotate(-26deg);animation:puppetArmL 2.4s ease-in-out infinite alternate}
.puppeteer .arm.right{right:2px;transform:rotate(28deg);animation:puppetArmR 2.2s ease-in-out infinite alternate}
.puppeteer .leg{width:9px;height:36px;top:64px}
.puppeteer .leg.left{left:14px}.puppeteer .leg.right{right:14px}
@keyframes puppetArmL{to{transform:rotate(-14deg)}}
@keyframes puppetArmR{to{transform:rotate(18deg)}}
.hero{display:none!important}

.message{top:90px!important;z-index:34!important}
.scene.camera-focus .message{top:84px!important;transform:translateX(-50%) scale(.95)!important}
.act-label{top:288px!important;z-index:33!important}
.puppet-dialogue{z-index:60!important}

.tiphat{position:absolute;left:calc(50% + 155px);top:447px;width:60px;height:38px;z-index:18;pointer-events:none}
.tiphat:before{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:18px;background:#6e4b35;border:3px solid #4a3022;border-top:none;border-radius:0 0 22px 22px/0 0 14px 14px;box-shadow:inset 0 -3px rgba(255,255,255,.08)}
.tiphat:after{content:"";position:absolute;left:3px;right:3px;bottom:18px;height:11px;border:3px solid #4a3022;border-bottom:none;border-radius:28px 28px 6px 6px;background:#7a5338;transform:perspective(30px) rotateX(42deg)}
.tiphat .hat-inner{position:absolute;left:16px;right:16px;bottom:12px;height:10px;background:rgba(0,0,0,.08);border-radius:50%}
.tiphat .hat-coins{position:absolute;inset:0;pointer-events:none}
.tip-donation{position:absolute;font-size:14px;opacity:0;transform:translateY(6px);animation:tipPop 1.2s ease-out forwards}
.tip-donation.bill{font-size:16px}
@keyframes tipPop{20%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.donation-layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.donor{position:absolute;width:31px;height:66px;opacity:0;transition:left .9s cubic-bezier(.2,.75,.25,1),top .9s cubic-bezier(.2,.75,.25,1),opacity .25s;transform-origin:center bottom}
.donor.walk .arm,.donor.walk .leg{animation-play-state:running}
.donor .reaction{display:none!important}

/* Anatomía unificada de público y transeúntes */
.person,.passer,.donor{width:31px!important;height:66px!important}
.person .head,.passer .head,.donor .head{position:absolute;width:23px!important;height:23px!important;border-radius:50%;background:#c88e66;border:2px solid #5d4031;left:4px!important;top:0!important}
.person .body,.passer .body,.donor .body{position:absolute;width:27px!important;height:31px!important;left:2px!important;top:22px!important;background:var(--body,var(--passer-body,#6d7d68));border:2px solid #49362b}
.person .arm,.passer .arm,.donor .arm{position:absolute;width:6px;height:22px;top:27px;background:var(--body,var(--passer-body,#6d7d68));border:2px solid #49362b;transform-origin:top center;animation:walkArm .34s ease-in-out infinite alternate}
.person .arm.l,.passer .arm.l,.donor .arm.l{left:-1px}
.person .arm.r,.passer .arm.r,.donor .arm.r{right:-1px;animation-direction:alternate-reverse}
.person .leg,.passer .leg,.donor .leg{position:absolute;width:7px;height:19px;top:50px;background:#474641;border:2px solid #34322f;transform-origin:top center;animation:walkLeg .34s ease-in-out infinite alternate}
.person .leg.l,.passer .leg.l,.donor .leg.l{left:6px}
.person .leg.r,.passer .leg.r,.donor .leg.r{right:6px;animation-direction:alternate-reverse}
.person{height:72px!important}
.person .arm,.person .leg{animation-play-state:paused}
.person.applaud .arm,.person.applaud .leg,.person.lean .arm,.person.lean .leg,.person.react .arm,.person.react .leg{animation-play-state:running}

.crowd{top:490px!important;width:560px!important;height:82px!important;z-index:14}
.audience-event{top:470px!important;z-index:35!important}
.sidewalk{top:582px!important;bottom:0!important;z-index:8!important}
.sidewalk-edge{height:10px!important}
.street-passers{z-index:9!important}
.passer{top:12px!important}

.person.dynamic{transition:left .9s cubic-bezier(.25,.8,.25,1),top .65s ease,opacity .55s ease,transform .45s ease}
.person .nameplate{z-index:7!important}
.person .reaction{z-index:8!important}

@media(max-width:900px){
  .stage{top:256px!important;width:240px!important;height:178px!important}
  .stage-table{top:410px!important;width:300px!important}
  .message{top:82px!important;width:min(350px,84%)!important}
  .crowd{top:498px!important;width:92%!important}
  .sidewalk{top:585px!important}
  .tiphat{left:calc(50% + 128px);top:448px;transform:scale(.92)}
}


/* === Menús flotantes derecha: Obra / Mejoras === */
body{overflow:hidden}
.game{max-height:calc(100vh - 36px);overflow:hidden}
.main{min-height:0;height:calc(100vh - 110px)}
.sidebar,.rightbar{overflow:hidden}
.rightbar{position:relative;padding-bottom:8px}
.rightbar .panel{margin-bottom:8px}
.rightbar .panel:last-of-type{margin-bottom:0}
.floating-actions{
  position:absolute;
  left:10px;
  top:355px;
  z-index:45;
  display:flex;
  gap:8px;
}
.float-toggle{
  border:2px solid #5b402e;
  background:#ecdcb5;
  color:#35261e;
  padding:7px 12px;
  font:700 13px "Courier New",monospace;
  cursor:pointer;
  box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e;
}
.float-toggle:hover{filter:brightness(1.05);transform:translateY(-1px)}
.float-toggle.active{background:#b85450;color:#fff6df}
.float-panel{
  position:absolute;
  left:10px;
  top:388px;
  width:248px;
  z-index:44;
  border:2px solid #73543d;
  background:#efe1bd;
  box-shadow:inset 1px 1px #fff5d8,4px 4px 0 rgba(0,0,0,.12);
  padding:10px;
  display:none;
}
.float-panel.open{display:block}
.float-panel .shopbtn{margin-bottom:6px}
.float-panel .shopbtn:last-child{margin-bottom:0}
.float-panel-title{
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  border-bottom:1px solid #9a795b;
  padding-bottom:5px;
  margin-bottom:8px;
}
/* compacta el diario para asegurar que nada genere scroll */
#log{max-height:76px;overflow:auto}
.rightbar>.legend{margin-top:8px;font-size:13px;line-height:1.25;display:block}

@media(max-width:900px){
  body{overflow:auto}
  .game{max-height:none;overflow:visible}
  .main{height:auto}
  .rightbar{overflow:visible;padding-bottom:170px}
  .floating-actions{top:362px;left:10px;flex-wrap:wrap}
  .float-panel{top:398px;width:calc(100% - 20px)}
}


/* === Ajustes solicitados === */
/* Subir el rótulo de escena 10px */
.act-label{top:278px!important}

/* Los diálogos deben ir por delante y poder salir del marco del teatrillo */
.stage,.stage-inner{overflow:visible!important}
.puppet-dialogue{z-index:120!important}

/* El público debe quedar quieto, sin apariencia de baile */
.person.react,.person.applaud,.person.lean{animation:none!important;transform:none!important}
.person .arm,.person .leg{animation-play-state:paused!important}
.person.react .arm,.person.react .leg,
.person.applaud .arm,.person.applaud .leg,
.person.lean .arm,.person.lean .leg{animation-play-state:paused!important}

/* Reacciones solo con el globo, sin mover el cuerpo */
.person.react .reaction,
.person.applaud .reaction,
.person.lean .reaction,
.person.curious .reaction,
.person.satisfied .reaction,
.person.dislike .reaction{opacity:1}


/* === Reubicación solicitada de Obra / Mejoras === */
.floating-actions{
  position:fixed !important;
  left:78px !important;
  top:54px !important;
  z-index:90 !important;
}
.float-panel{
  position:fixed !important;
  left:78px !important;
  top:94px !important;
  z-index:89 !important;
}
@media(max-width:900px){
  .floating-actions{
    position:absolute !important;
    left:10px !important;
    top:362px !important;
  }
  .float-panel{
    position:absolute !important;
    left:10px !important;
    top:398px !important;
    width:calc(100% - 20px) !important;
  }
}


/* Diario bajo Obra actual */
.sidebar-diary{margin-top:8px!important}
.sidebar-diary .log{height:104px;max-height:104px;overflow:auto;font-size:13px;line-height:1.35}


/* === Reubicación corregida de Obra / Mejoras: en el cielo, alineados con Plaza del barrio === */
.floating-actions{
  position:fixed !important;
  left:calc(50% - 10px) !important;
  top:34px !important;
  z-index:90 !important;
}
.float-panel{
  position:fixed !important;
  left:calc(50% - 10px) !important;
  top:74px !important;
  z-index:89 !important;
}
@media(max-width:900px){
  .floating-actions{
    position:absolute !important;
    left:10px !important;
    top:362px !important;
  }
  .float-panel{
    position:absolute !important;
    left:10px !important;
    top:398px !important;
    width:calc(100% - 20px) !important;
  }
}


/* === Obra / Mejoras DENTRO de la parte jugable === */
.scene .floating-actions{
  position:absolute !important;
  left:13px !important;
  top:13px !important;
  z-index:95 !important;
  display:flex !important;
  gap:8px !important;
}
.scene .float-panel{
  position:absolute !important;
  left:13px !important;
  top:52px !important;
  width:248px !important;
  z-index:94 !important;
}
/* El cuadro de lugar/clima sigue alineado arriba, al extremo derecho. */
.scene .weather-card{top:13px !important;right:13px !important;}
@media(max-width:900px){
  .scene .floating-actions{left:13px !important;top:13px !important;}
  .scene .float-panel{left:13px !important;top:52px !important;width:248px !important;}
}


/* === Ajustes de interfaz: header, título, diario y chat de público === */
/* Header 7px más bajo; el espacio recuperado se lo damos a la interfaz. */
.topbar{min-height:51px!important;padding-top:5px!important;padding-bottom:4px!important}
.main{height:calc(100vh - 103px)!important}

/* El nombre completo de la obra reemplaza a MI PRIMER TEATRO. */
.stage .sign{
  left:8px!important;
  right:8px!important;
  padding:4px 3px!important;
  font-size:13px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Diario ocupa el espacio que antes usaba Obra actual. */
.sidebar{display:flex!important;flex-direction:column!important;min-height:0!important}
.sidebar-diary-expanded{
  margin-top:8px!important;
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
}
.sidebar-diary-expanded .log{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  flex:1 1 auto!important;
  overflow:auto!important;
  font-size:13px!important;
  line-height:1.35!important;
}

/* Notificaciones del público como chat acumulativo. */
.audience-event{
  left:auto!important;
  right:12px!important;
  top:410px!important;
  width:255px!important;
  transform:none!important;
  z-index:70!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
  opacity:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  align-items:stretch!important;
  pointer-events:none!important;
}
.audience-event.show{transform:none!important}
.audience-event-item{
  background:#f3e4bf;
  border:2px solid #684b36;
  padding:5px 7px;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  box-shadow:2px 2px rgba(0,0,0,.13);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .28s ease,transform .28s ease;
}
.audience-event-item.show{opacity:1;transform:translateY(0)}
.audience-event-item.leaving{opacity:0;transform:translateY(-5px)}

/* Asegura que el consejo de calidad siga visible dentro del panel. */
.quality-hint{font-size:13px!important;line-height:1.22!important;margin-top:6px!important}

@media(max-width:900px){
  .main{height:auto!important}
  .topbar{min-height:51px!important}
  .audience-event{right:8px!important;top:420px!important;width:220px!important}
}


/* === Ajustes finos de espacio y composición === */
/* 5 px menos de alto total en el botón principal */
#start{padding-top:9.5px!important;padding-bottom:9.5px!important}

/* El título de la obra baja 10 px y queda pegado a la parte superior de la caja */
.stage .sign{top:-18px!important}

/* La gorra pasa al lado izquierdo del teatrillo para despejar las notificaciones */
.tiphat{left:calc(50% - 215px)!important;top:447px!important}

@media(max-width:900px){
  .tiphat{left:calc(50% - 188px)!important;top:448px!important;transform:scale(.92)}
}


/* === Ajustes: título, gorra, economía y mejoras === */
.stage .sign{top:-6px!important}
.tiphat{left:calc(50% - 235px)!important;top:427px!important}

.upgrade-row{display:flex;align-items:stretch;gap:6px;margin-bottom:6px}
.upgrade-row .shopbtn{margin-bottom:0!important;flex:1 1 auto;min-width:0}
.upgrade-btn.unowned{opacity:.55;filter:saturate(.72)}
.upgrade-btn.owned{opacity:.82}
.upgrade-btn.active-upgrade{opacity:1;background:#ecdcb5;box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e}
.upgrade-btn.inactive-upgrade{opacity:.72;filter:saturate(.65)}
.upgrade-btn span{float:right;font-size:13px}
.confirm-upgrade{display:none;border:2px solid #5b402e;background:#ecdcb5;color:#35261e;padding:7px 8px;font:700 11px "Courier New",monospace;cursor:pointer;box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e;white-space:nowrap}
.upgrade-row.confirming .confirm-upgrade{display:block}
.confirm-upgrade:hover{filter:brightness(1.05);transform:translateY(-1px)}

@media(max-width:900px){
  .tiphat{left:calc(50% - 208px)!important;top:428px!important;transform:scale(.92)}
}


/* === Ajustes de esta iteración === */
/* título de obra 5px más abajo */
.stage .sign{top:-1px!important}
/* nombre de escena 20px más arriba */
.act-label{top:258px!important}

/* Calidad al lado de cada obra dentro del menú Obra */
.scene #obraMenu{width:500px!important}
.play-option-row{
  display:grid;
  grid-template-columns:245px 1fr;
  gap:8px;
  align-items:stretch;
  margin-bottom:7px;
}
.play-option-row:last-child{margin-bottom:0}
.play-option-row .play-choice{margin:0!important;height:100%}
.play-quality{
  border:2px solid #73543d;
  background:#e7d6ad;
  padding:5px 6px;
  box-shadow:inset 1px 1px #fff5d8;
  font-size:13px;
  line-height:1.15;
}
.play-quality .pq-head{display:flex;justify-content:space-between;gap:5px;font-weight:900;margin-bottom:4px;color:#382b24}
.play-quality .pq-head b{color:#7d3438}
.play-quality .pq-row{display:grid;grid-template-columns:55px 1fr 18px;gap:4px;align-items:center;margin:2px 0}
.play-quality .pq-bar{height:6px;border:1px solid #71533e;background:#c9b287;overflow:hidden}
.play-quality .pq-bar i{display:block;height:100%;background:#8f3c40}
.play-quality .pq-row em{font-style:normal;font-weight:900;text-align:right}
.play-quality .pq-hint{border-top:1px solid #a58764;margin-top:4px;padding-top:4px;line-height:1.18}
.play-option-row:has(.play-choice.selected) .play-quality{background:#f0dfb7;border-color:#8c2f35}

/* Diario: scrollbar simple, propio del juego */
.sidebar-diary-expanded .log{
  scrollbar-width:thin;
  scrollbar-color:#8c6245 #d8c398;
}
.sidebar-diary-expanded .log::-webkit-scrollbar{width:8px}
.sidebar-diary-expanded .log::-webkit-scrollbar-track{
  background:#d8c398;
  border-left:1px solid #9c7b5d;
}
.sidebar-diary-expanded .log::-webkit-scrollbar-thumb{
  background:#8c6245;
  border:1px solid #5b402e;
  border-radius:0;
}
.sidebar-diary-expanded .log::-webkit-scrollbar-thumb:hover{background:#765039}

/* Las marionetas permanecen dentro del hueco del escenario; los diálogos pueden salir. */
.puppet{max-width:34px}
.string{opacity:.78!important}

@media(max-width:900px){
  .scene #obraMenu{width:min(500px,calc(100% - 26px))!important}
  .play-option-row{grid-template-columns:1fr}
}


/* === Iteración: UI fija sobre la plaza === */
/* El nombre de escena baja 5px respecto a la iteración anterior. */
.act-label{top:263px!important}

/* Obra, Mejoras, sus menús y ubicación quedan fuera del elemento que hace zoom. */
.scene-wrap>.floating-actions{
  position:absolute!important;
  left:13px!important;
  top:13px!important;
  z-index:130!important;
  display:flex!important;
  gap:8px!important;
}
.scene-wrap>.float-panel{
  position:absolute!important;
  left:13px!important;
  top:52px!important;
  width:248px!important;
  z-index:129!important;
}
.scene-wrap>#obraMenu{width:500px!important}
.scene-wrap>.weather-card{
  position:absolute!important;
  top:13px!important;
  right:13px!important;
  z-index:130!important;
  opacity:1!important;
  transform:none!important;
}
.scene.camera-focus .weather-card{opacity:1!important}

/* Diario funciona como panel desplegable desde su propio botón. */
.sidebar-diary-expanded.diary-hidden{display:none!important}
#diaryToggle.active{background:#b85450;color:white}

@media(max-width:900px){
  .scene-wrap>.floating-actions{left:13px!important;top:13px!important}
  .scene-wrap>.float-panel{left:13px!important;top:52px!important;width:248px!important}
  .scene-wrap>#obraMenu{width:min(500px,calc(100% - 26px))!important}
  .scene-wrap>.weather-card{top:13px!important;right:13px!important}
}


/* === Legibilidad: calidad solo en la obra seleccionada + fuentes mínimas cómodas === */
/* El menú Obra usa todo el ancho solo cuando necesita mostrar la calidad. */
.scene #obraMenu{width:560px!important;max-width:calc(100% - 26px)!important}
.play-option-row{
  display:block!important;
  margin-bottom:8px!important;
}
.play-option-row:has(.play-choice.selected){
  display:grid!important;
  grid-template-columns:minmax(230px, .9fr) minmax(270px, 1.1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
}
.play-option-row:not(:has(.play-choice.selected)) .play-quality{display:none!important}
.play-option-row:not(:has(.play-choice.selected)) .play-choice{width:100%!important}

.play-quality{
  padding:8px 9px!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.play-quality .pq-head{font-size:13px!important;margin-bottom:6px!important}
.play-quality .pq-row{
  grid-template-columns:72px 1fr 28px!important;
  gap:6px!important;
  margin:4px 0!important;
  font-size:13px!important;
}
.play-quality .pq-bar{height:8px!important}
.play-quality .pq-hint{font-size:13px!important;line-height:1.3!important;margin-top:6px!important;padding-top:6px!important}

/* Nunca usar microtipografía en los controles principales. */
.weather-card{font-size:13px!important;line-height:1.2!important}
.weather-card small{font-size:13px!important;line-height:1.25!important;margin-top:3px!important}
.play-choice{font-size:13px!important;line-height:1.2!important}
.play-choice small{font-size:13px!important;line-height:1.28!important;margin-top:4px!important}
.function-clock{font-size:13px!important}
.float-panel-title{font-size:13px!important}
.rightbar>.legend{display:none!important}

/* Público presente: más espacio y texto cómodo de leer. */
.audience-panel{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
}
.rightbar{display:flex!important;flex-direction:column!important;min-height:0!important}
.audience-roster{
  max-height:none!important;
  flex:1 1 auto!important;
  min-height:220px!important;
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#8c6245 #d8c398;
}
.audience-roster::-webkit-scrollbar{width:8px}
.audience-roster::-webkit-scrollbar-track{background:#d8c398;border-left:1px solid #9c7b5d}
.audience-roster::-webkit-scrollbar-thumb{background:#8c6245;border:1px solid #5b402e}
.audience-row{
  grid-template-columns:20px 1fr auto!important;
  gap:7px!important;
  padding:6px 0!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.audience-row .dot{width:15px!important;height:15px!important}
.audience-row b{font-size:13px!important;line-height:1.2!important}
.audience-row small{font-size:13px!important;line-height:1.25!important;opacity:.82!important;margin-top:2px!important}
.audience-row .face{font-size:16px!important}
.audience-panel>.legend{font-size:13px!important;line-height:1.3!important;margin-top:7px!important}

/* Otros textos diminutos visibles en la plaza también suben de tamaño. */
.act-label{font-size:13px!important}
.audience-event-item{font-size:13px!important;line-height:1.28!important}
.person .nameplate{font-size:13px!important}

@media(max-width:900px){
  .scene #obraMenu{width:calc(100% - 26px)!important}
  .play-option-row:has(.play-choice.selected){grid-template-columns:1fr!important}
  .audience-roster{min-height:160px!important}
}

/* Fallback sin :has(): JS marca la fila elegida. */
.play-option-row:not(.selected-row) .play-quality{display:none!important}
.play-option-row.selected-row{display:grid!important;grid-template-columns:minmax(230px,.9fr) minmax(270px,1.1fr)!important;gap:10px!important}
@media(max-width:900px){.play-option-row.selected-row{grid-template-columns:1fr!important}}


/* === Legibilidad reforzada === */
/* Calidad: solo la obra seleccionada muestra su ficha, a la derecha y con espacio real. */
.scene-wrap>#obraMenu{
  width:min(620px,calc(100% - 26px))!important;
}
.play-option-row{
  display:block!important;
  margin-bottom:9px!important;
}
.play-option-row:not(.selected-row) .play-quality{
  display:none!important;
}
.play-option-row:not(.selected-row) .play-choice{
  width:100%!important;
}
.play-option-row.selected-row{
  display:grid!important;
  grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}
.play-option-row.selected-row .play-choice{height:100%!important;margin:0!important}
.play-quality{
  padding:10px 11px!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.play-quality .pq-head{font-size:14px!important;margin-bottom:7px!important}
.play-quality .pq-row{
  grid-template-columns:88px 1fr 30px!important;
  gap:7px!important;
  margin:5px 0!important;
  font-size:13px!important;
}
.play-quality .pq-bar{height:9px!important}
.play-quality .pq-hint{
  font-size:13px!important;
  line-height:1.35!important;
  margin-top:7px!important;
  padding-top:7px!important;
}
.play-choice{font-size:14px!important;line-height:1.25!important}
.play-choice small{font-size:13px!important;line-height:1.35!important;margin-top:5px!important}
.float-panel-title{font-size:14px!important}

/* Público presente: más ancho y tipografía cómoda. */
.main{grid-template-columns:180px 1fr 300px!important}
.rightbar{font-size:13px!important}
.rightbar .panel{padding:9px!important}
.rightbar .panel h3{font-size:14px!important}
.audience-panel{flex:1 1 auto!important;min-height:0!important}
.audience-roster{
  min-height:250px!important;
  max-height:none!important;
  flex:1 1 auto!important;
}
.audience-row{
  grid-template-columns:22px 1fr auto!important;
  gap:8px!important;
  padding:7px 0!important;
  font-size:13px!important;
  line-height:1.3!important;
}
.audience-row .dot{width:16px!important;height:16px!important}
.audience-row b{font-size:14px!important;line-height:1.25!important}
.audience-row small{font-size:13px!important;line-height:1.3!important;opacity:.86!important;margin-top:2px!important}
.audience-row .face{font-size:18px!important}
.audience-panel>.legend{font-size:13px!important;line-height:1.35!important;margin-top:8px!important}

/* Nada de microtipografía en información importante. */
.weather-card{font-size:14px!important;line-height:1.2!important}
.weather-card small{font-size:13px!important;line-height:1.3!important;margin-top:4px!important}
.function-clock{font-size:13px!important}
.act-label{font-size:13px!important}
.audience-event-item{font-size:13px!important;line-height:1.3!important}
.person .nameplate{font-size:13px!important}
.quality-hint{font-size:13px!important;line-height:1.3!important}

/* Título de la obra: más grande y usando casi todo el ancho del teatrillo. */
.stage .sign{
  left:8px!important;
  right:8px!important;
  font-size:15px!important;
  line-height:1.15!important;
  padding:5px 4px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

@media(max-width:900px){
  .main{grid-template-columns:1fr!important}
  .scene-wrap>#obraMenu{width:calc(100% - 26px)!important}
  .play-option-row.selected-row{grid-template-columns:1fr!important}
  .audience-roster{min-height:180px!important}
}

/* === Legibilidad y ancho solicitado === */
.main{grid-template-columns:180px 1fr 270px!important}
.sidebar-diary-expanded .log,
.sidebar-diary .log,
#log{font-size:13px!important;line-height:1.4!important}

/* Piso tipográfico: ninguna fuente textual baja de 13px. */
body,button,input,select,textarea,.legend,.log,.panel,.panel h3,.stat,.weather-card,.weather-card small,
.function-clock,.act-label,.play-choice,.play-choice small,.play-quality,.play-quality *,
.audience-row,.audience-row b,.audience-row small,.audience-event-item,.person .nameplate,
.float-panel-title,.quality-hint,.upgrade-btn,.upgrade-btn span{font-size:13px!important}
.brand{font-size:22px!important}
.primary{font-size:17px!important}
.stage .sign{font-size:15px!important}
.person .reaction,.audience-row .face{font-size:16px!important}


/* === Pulido: notificaciones suaves + borde lateral hasta abajo === */
.game{
  height:calc(100vh - 36px)!important;
  max-height:calc(100vh - 36px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.topbar{flex:0 0 auto!important}
.main{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
}
.sidebar,.scene-wrap,.rightbar{min-height:0!important;height:100%!important}

/* El chat queda anclado desde abajo: al entrar un mensaje, los anteriores suben. */
.audience-event{
  height:178px!important;
  justify-content:flex-end!important;
}
.audience-event-item{
  flex:0 0 auto!important;
  will-change:transform,opacity;
}

@media(max-width:900px){
  .game{height:auto!important;max-height:none!important;overflow:visible!important}
  .main{height:auto!important}
}


/* === Pulido adicional: chat suave, borde inferior continuo y zoom del teatrillo === */
/* Evita la franja clara inferior y hace que los separadores verticales lleguen hasta el borde. */
.game{background:#d8c18d!important}
.main{
  flex:1 1 0!important;
  min-height:0!important;
  overflow:hidden!important;
  border-bottom:0!important;
}
.sidebar,.scene-wrap,.rightbar{
  height:auto!important;
  align-self:stretch!important;
  border-bottom:0!important;
}
.scene-wrap{background:#91b0aa!important}

/* Las notificaciones antiguas se desplazan con una transición más calmada. */
.audience-event-item{
  transition:opacity .34s ease,transform .46s cubic-bezier(.22,.78,.22,1)!important;
}

/* Clic en el teatrillo = acercamiento adicional. Los controles superiores son hermanos
   de .scene, por lo que Obra / Mejoras / ubicación permanecen sin zoom. */
.stage{cursor:zoom-in}
.scene.theater-closeup{
  transform:scale(1.34)!important;
  transform-origin:50% 43%!important;
}
.scene.theater-closeup .stage{
  top:226px!important;
  transform:translateX(-50%) scale(1.25)!important;
  cursor:zoom-out;
  box-shadow:13px 14px 0 rgba(0,0,0,.24)!important;
}
.scene.theater-closeup .message{
  top:70px!important;
  transform:translateX(-50%) scale(.92)!important;
}
.scene.theater-closeup .act-label{
  z-index:130!important;
}
.scene.theater-closeup .puppet-dialogue{
  z-index:150!important;
}


/* === Diálogos más anchos === */
.puppet-dialogue{
  width:150px!important;
  max-width:150px!important;
  padding:5px 7px!important;
  line-height:1.18!important;
}


/* === Público persistente: perfiles e historial === */
.audience-name{
  appearance:none;border:0;background:none;padding:0;margin:0;color:#382b24;
  font:700 13px "Courier New",monospace;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
}
.audience-name:hover{color:#8c2f35}
.audience-modal{
  position:fixed;inset:0;z-index:300;background:rgba(42,31,25,.56);display:none;align-items:center;justify-content:center;padding:20px;
}
.audience-modal.open{display:flex}
.audience-modal-card{
  position:relative;width:min(560px,calc(100vw - 40px));max-height:min(650px,calc(100vh - 40px));overflow:auto;
  background:#efe0bd;border:4px solid #5b402e;box-shadow:8px 8px 0 rgba(0,0,0,.22),inset 2px 2px #fff5d8;padding:18px;color:#382b24;
  font:13px/1.4 "Courier New",monospace;scrollbar-width:thin;scrollbar-color:#8c6245 #d8c398;
}
.audience-modal-card::-webkit-scrollbar{width:9px}.audience-modal-card::-webkit-scrollbar-track{background:#d8c398;border-left:1px solid #9c7b5d}.audience-modal-card::-webkit-scrollbar-thumb{background:#8c6245;border:1px solid #5b402e}
.audience-modal-close{position:absolute;right:10px;top:8px;width:32px;height:32px;border:2px solid #5b402e;background:#ecdcb5;color:#382b24;font:700 20px "Courier New",monospace;cursor:pointer;box-shadow:2px 2px 0 #6e523e}
.audience-modal-head{display:flex;gap:12px;align-items:center;padding-right:38px;margin-bottom:14px}.audience-modal-head h3{font-size:19px;margin:0 0 2px}.audience-modal-head div{font-size:13px}
.audience-modal-dot{width:30px;height:30px;border-radius:50%;border:3px solid #5d4031;flex:0 0 auto}
.audience-modal-grid{display:grid;grid-template-columns:1fr 1fr;border:2px solid #8b6a4e;background:#e6d3a8;margin-bottom:16px}
.audience-modal-grid>div{padding:9px;border-bottom:1px solid #b59672}.audience-modal-grid>div:nth-child(odd){border-right:1px solid #b59672}.audience-modal-grid b,.audience-modal-grid span{display:block;font-size:13px}.audience-modal-card h4{font-size:15px;margin:0 0 8px}
.audience-history{border:2px solid #8b6a4e;background:#e7d6ad}.history-row{display:grid;grid-template-columns:90px 1fr;padding:8px 9px;border-bottom:1px solid #b59672;gap:4px 10px}.history-row:last-child{border-bottom:0}.history-row b,.history-row span,.history-row em,.history-empty{font-size:13px}.history-row em{grid-column:2;font-style:normal;opacity:.82}.history-row.current{background:#f2e3bd}.history-empty{padding:10px}


/* === Zoom: escena acompaña; diálogos y chat quedan a escala de interfaz === */
.scene.theater-closeup .act-label{
  top:238px!important;
  transform:translateX(-50%) scale(1.16)!important;
  transform-origin:center center!important;
  z-index:130!important;
}
.scene-wrap>.dialogue-overlay{
  position:absolute!important;
  z-index:190!important;
  width:180px!important;
  max-width:180px!important;
  pointer-events:none!important;
}
.scene-wrap>.audience-event{
  z-index:195!important;
}
/* Estos overlays son hermanos de .scene: nunca reciben el transform del zoom. */

/* === Gorra interactiva + vista cenital === */
.tiphat{pointer-events:auto!important;cursor:pointer}
.tiphat:hover{filter:brightness(1.08)}
.hat-modal-card{width:min(520px,calc(100vw - 40px));text-align:center}
.hat-modal-head{padding-right:38px;margin-bottom:12px}
.hat-modal-head h3{font-size:20px;margin:0 0 4px}
.hat-modal-head div,.hat-modal-note{font-size:13px}
.hat-top-view{position:relative;width:330px;height:235px;margin:8px auto 14px;display:flex;align-items:center;justify-content:center}
.hat-top-brim{position:absolute;width:300px;height:178px;border-radius:50%;background:#765139;border:4px solid #4a3022;box-shadow:inset 0 0 0 9px rgba(255,255,255,.06),5px 6px 0 rgba(0,0,0,.12)}
.hat-top-crown{position:absolute;width:218px;height:132px;border-radius:50%;background:#513828;border:4px solid #39251b;box-shadow:inset 0 10px 20px rgba(0,0,0,.22);overflow:hidden}
.hat-modal-money{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:6px;transform:rotate(-4deg)}
.hat-money-item{font-size:28px;line-height:1;filter:drop-shadow(1px 2px rgba(0,0,0,.16))}
.hat-money-item.bill{font-size:34px;transform:rotate(7deg)}
.hat-modal-note{border-top:2px solid #9b795b;padding-top:10px}


/* === Plaza: diálogos fijos, chat legible, animales, marionetas contenidas y telón completo === */
/* Los diálogos ya no persiguen a las marionetas ni cambian de sitio con el zoom. */
.scene-wrap>#dialogue1,
.scene-wrap>#dialogue2{
  position:absolute!important;
  top:300px!important;
  width:190px!important;
  max-width:190px!important;
  z-index:190!important;
  pointer-events:none!important;
  transform:none!important;
}
.scene-wrap>#dialogue1{left:calc(50% - 250px)!important}
.scene-wrap>#dialogue2{left:calc(50% + 60px)!important}

/* Máximo tres mensajes visibles; espacio suficiente para leerlos sin saltos bruscos. */
.audience-event{height:165px!important;overflow:hidden!important}
.audience-event-item{flex:0 0 auto!important;transition:opacity .34s ease,transform .52s cubic-bezier(.22,.78,.22,1)!important}

/* La ventana del escenario vuelve a recortar estrictamente a las marionetas. */
.stage{overflow:visible!important}
.stage-inner{overflow:hidden!important}
.puppet{max-width:34px!important}

/* El telón cerrado cubre el 100% de la boca del escenario. */
.curtain-l,.curtain-r{
  width:51%!important;
  height:100%!important;
  z-index:40!important;
  transform:translateX(0)!important;
  transition:transform .82s cubic-bezier(.4,0,.2,1),box-shadow .3s!important;
}
.curtain-l{left:0!important}
.curtain-r{right:0!important}
.stage.show-open .curtain-l{transform:translateX(-94%)!important}
.stage.show-open .curtain-r{transform:translateX(94%)!important}
.valance{z-index:41!important}

/* Segundo árbol: el mismo lenguaje gráfico, más grande, al costado derecho. */
.tree.tree-right{
  left:auto!important;
  right:28px!important;
  top:232px!important;
  transform:scale(1.38)!important;
  transform-origin:bottom center!important;
  z-index:5!important;
}

/* Animales ambientales, livianos y dibujados solo con CSS. */
.plaza-animals{
  position:absolute;left:0;right:0;top:355px;height:115px;z-index:9;
  overflow:hidden;pointer-events:none;
}
.plaza-animal{
  --animal-body:#9b6c45;--animal-dark:#6e4932;
  position:absolute;width:48px;height:30px;bottom:auto;filter:drop-shadow(2px 3px rgba(0,0,0,.12));
  transform:scaleX(1);
}
.plaza-animal.reverse{transform:scaleX(-1)}
.plaza-animal .animal-body{position:absolute;left:10px;top:9px;width:28px;height:15px;border-radius:48% 42% 38% 45%;background:var(--animal-body);border:2px solid #4b382d}
.plaza-animal .animal-head{position:absolute;right:1px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--animal-body);border:2px solid #4b382d}
.plaza-animal .animal-ear{position:absolute;right:7px;top:1px;width:7px;height:8px;background:var(--animal-dark);border:1px solid #4b382d;transform:rotate(20deg)}
.plaza-animal .animal-tail{position:absolute;left:3px;top:8px;width:14px;height:5px;border-radius:50%;background:var(--animal-dark);border:1px solid #4b382d;transform:rotate(-28deg);transform-origin:right center}
.plaza-animal .animal-leg{position:absolute;top:21px;width:4px;height:9px;background:var(--animal-dark);border:1px solid #4b382d;transform-origin:top center;animation:animalStep .34s ease-in-out infinite alternate}
.plaza-animal .l1{left:15px}.plaza-animal .l2{left:23px;animation-direction:alternate-reverse}.plaza-animal .l3{left:31px}.plaza-animal .l4{left:38px;animation-direction:alternate-reverse}
@keyframes animalStep{to{transform:rotate(14deg)}}

/* Siempre es el mismo gato blanco con negro. */
.plaza-animal.cat{--animal-body:#f2eee3;--animal-dark:#252525;width:44px;height:28px}
.plaza-animal.cat .animal-body{width:27px;height:13px;background:linear-gradient(90deg,#f2eee3 0 45%,#242424 46% 69%,#f2eee3 70%);border-color:#393633}
.plaza-animal.cat .animal-head{width:14px;height:14px;background:linear-gradient(135deg,#252525 0 46%,#f2eee3 47%);border-color:#393633}
.plaza-animal.cat .animal-ear{width:6px;height:7px;background:#252525;border-color:#393633;clip-path:polygon(50% 0,100% 100%,0 100%)}
.plaza-animal.cat .animal-tail{left:1px;top:7px;width:18px;height:4px;background:#252525;border-color:#393633;transform:rotate(-38deg)}
.plaza-animal.cat .animal-leg{background:#f2eee3;border-color:#393633}


/* === Ajuste: diálogos adaptables + escena anclada al teatrillo === */
/* Cada diálogo toma el ancho que necesita, con un límite cómodo para lectura. */
.scene-wrap>#dialogue1,
.scene-wrap>#dialogue2,
.puppet-dialogue,
.scene-wrap>.dialogue-overlay{
  width:max-content!important;
  min-width:90px!important;
  max-width:310px!important;
  box-sizing:border-box!important;
  white-space:normal!important;
}

/* La escena ahora pertenece al teatrillo, igual que el título de la obra.
   Así acompaña cualquier zoom/posición de la caja sin cálculos independientes. */
.stage>.act-label{
  position:absolute!important;
  left:50%!important;
  top:34px!important;
  transform:translateX(-50%)!important;
  z-index:45!important;
  margin:0!important;
  opacity:0;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  padding:2px 9px!important;
  border:2px solid #58391f!important;
  background:#7c512f!important;
  color:#fff0c9!important;
  box-shadow:none!important;
  font-size:13px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.stage>.act-label.show{opacity:1!important}

/* Neutraliza los antiguos ajustes especiales de zoom del rótulo de escena.
   El movimiento viene exclusivamente del transform del teatrillo padre. */
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  top:34px!important;
  transform:translateX(-50%)!important;
}


/* === Pulido acumulativo: escena, diálogos, público, gorra y animales === */

/* El árbol extra de la derecha se elimina por completo. */
.tree.tree-right{display:none!important}

/* El nombre de la escena vive en la barra café del propio teatrillo.
   Al ser hijo de .stage se mueve y escala exactamente junto con el título de la obra. */
.stage>.act-label{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:34px!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  margin:0!important;
  padding:3px 8px!important;
  box-sizing:border-box!important;
  background:#7c512f!important;
  color:#fff0c9!important;
  border:0!important;
  border-top:2px solid #5b3b26!important;
  border-bottom:2px solid #5b3b26!important;
  box-shadow:none!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:46!important;
  line-height:1.15!important;
  pointer-events:none!important;
}
.stage>.act-label.show{opacity:1!important}
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  top:34px!important;
  left:18px!important;
  right:18px!important;
  transform:none!important;
}

/* Los diálogos conservan su posición fija de interfaz y cada caja toma solo el ancho
   que necesita, hasta un límite cómodo. No persiguen a las marionetas ni reciben zoom. */
.scene-wrap>#dialogue1,
.scene-wrap>#dialogue2,
.scene-wrap>.dialogue-overlay{
  width:fit-content!important;
  min-width:0!important;
  max-width:320px!important;
  white-space:normal!important;
  box-sizing:border-box!important;
  transform:none!important;
}

/* El público entra y se retira con calma. */
.person.dynamic{
  transition:left 2.8s cubic-bezier(.22,.72,.24,1),top 1.2s ease,opacity 1.0s ease,transform .45s ease!important;
}
.person.dynamic.arriving{opacity:.15!important}
.person.dynamic.leaving{opacity:.2!important}

/* Animales: patas unidas al cuerpo, por detrás del torso para que no parezcan flotantes. */
.plaza-animal .animal-body,.plaza-animal .animal-head{z-index:2!important}
.plaza-animal .animal-leg{
  top:19px!important;
  height:11px!important;
  width:5px!important;
  z-index:1!important;
}
.plaza-animal .l1{left:15px!important}
.plaza-animal .l2{left:22px!important}
.plaza-animal .l3{left:31px!important}
.plaza-animal .l4{left:37px!important}
.plaza-animal.cat .animal-leg{top:18px!important;height:10px!important}


/* === Ajuste fino: rótulo de escena y ancho de diálogos === */
/* Conserva la ubicación dentro de la barra del teatrillo, pero recupera la paleta crema original. */
.stage>.act-label{
  top:29px!important;
  background:#f3e4bf!important;
  color:#382b24!important;
  border:2px solid #684b36!important;
  box-shadow:2px 2px rgba(0,0,0,.14)!important;
}
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  top:29px!important;
}

/* El ancho sigue adaptándose al texto, pero nunca supera aproximadamente
   el ancho de “Tal vez lo encontraste tú”. */
.scene-wrap>#dialogue1,
.scene-wrap>#dialogue2,
.scene-wrap>.dialogue-overlay,
.puppet-dialogue{
  width:fit-content!important;
  min-width:0!important;
  max-width:205px!important;
  white-space:normal!important;
}


/* === Ajustes: público desde abajo, escena y cancelación === */
.stage>.act-label{
  top:24px!important;
}
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  top:24px!important;
}

/* El público entra desde la vereda y se acerca hacia arriba; al irse vuelve hacia abajo. */
.person.dynamic{
  transition:left 2.8s cubic-bezier(.22,.72,.24,1),top 2.8s cubic-bezier(.22,.72,.24,1),opacity 1.15s ease,transform .45s ease!important;
}


/* === Ajuste fino: diálogo izquierdo un poco más sobre el teatrillo === */
.scene-wrap>#dialogue1{left:calc(50% - 230px)!important}


/* === Ajuste: diálogo izquierdo estable dentro del teatrillo sin zoom === */
/* En vez de empujarlo desde muy afuera, lo anclamos al borde interior izquierdo
   de la caja. Como el ancho sigue siendo fit-content, los textos cortos también
   quedan sobre el teatrillo y el zoom no cambia esta posición de interfaz. */
.scene-wrap>#dialogue1{
  left:calc(50% - 108px)!important;
  right:auto!important;
}


/* === Diálogos: centro anclado a cada madera lateral del teatrillo === */
.scene-wrap>#dialogue1,
.scene-wrap>#dialogue2{
  right:auto!important;
  transform:translateX(-50%)!important;
  transform-origin:center center!important;
}


/* === Gorra en vivo: los aportes caen dentro del modal mientras está abierto === */
.hat-money-item.incoming{
  animation:hatMoneyDrop .72s cubic-bezier(.2,.82,.28,1.18) both;
}
.hat-money-item.bill.incoming{
  animation:hatBillDrop .78s cubic-bezier(.2,.82,.28,1.18) both;
}
@keyframes hatMoneyDrop{
  0%{opacity:0;transform:translateY(-70px) scale(.65) rotate(-18deg)}
  68%{opacity:1;transform:translateY(5px) scale(1.08) rotate(7deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}
@keyframes hatBillDrop{
  0%{opacity:0;transform:translateY(-78px) scale(.72) rotate(-22deg)}
  70%{opacity:1;transform:translateY(4px) scale(1.08) rotate(12deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(7deg)}
}


/* === Gorra: modal 30% más compacto, sin reducir legibilidad === */
.hat-modal-card{width:min(364px,calc(100vw - 32px))!important;padding:12px!important}
.hat-modal-head{margin-bottom:8px!important}
.hat-top-view{width:231px!important;height:165px!important;margin:5px auto 10px!important}
.hat-top-brim{width:210px!important;height:125px!important;border-width:3px!important;box-shadow:inset 0 0 0 6px rgba(255,255,255,.06),4px 4px 0 rgba(0,0,0,.12)!important}
.hat-top-crown{width:153px!important;height:92px!important;border-width:3px!important}
.hat-modal-money{inset:9px!important;gap:4px!important}
.hat-money-item{font-size:22px!important}
.hat-money-item.bill{font-size:26px!important}
.hat-modal-note{padding-top:7px!important}

/* Notificaciones: emoji claro y entrada más pausada. */
.audience-event-item{display:flex!important;align-items:flex-start!important;gap:7px!important}
.audience-event-emoji{flex:0 0 auto;font-size:16px!important;line-height:1.2!important}


/* === Elemento sorpresa: tercer eje de combinación === */
.scene-wrap>.floating-actions{gap:7px!important;align-items:flex-start!important}
.scene-wrap>.floating-actions .float-toggle{width:auto!important;white-space:nowrap!important}
.scene-wrap>#sorpresaMenu{width:330px!important;max-width:calc(100% - 26px)!important}
.surprise-choice{opacity:.84!important}
.surprise-choice.selected{background:#b85450!important;color:#fff6df!important;opacity:1!important}
.surprise-choice.selected span{color:#fff6df!important}
.surprise-choice small{display:block;font-size:13px!important;line-height:1.3!important;margin-top:4px!important;font-weight:400!important}

.surprise-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.surprise-mirror{position:absolute;right:22px;bottom:18px;width:42px;height:82px;background:#b9d7d0;border:5px solid #7c512f;box-shadow:inset 0 0 0 3px #e6dec9,2px 2px rgba(0,0,0,.18);opacity:0;transform:translateY(14px) scale(.9)}
.surprise-mirror i{position:absolute;left:6px;top:5px;width:7px;height:58px;background:rgba(255,255,255,.62);transform:skewX(-12deg)}
.mirror-show .surprise-mirror{animation:mirrorReveal 3.8s ease both}
@keyframes mirrorReveal{0%{opacity:0;transform:translateY(16px) scale(.9)}18%,76%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(4px) scale(.96)}}

.confetti-piece{position:absolute;left:var(--x);top:-14px;width:7px;height:12px;background:#d9b04c;opacity:0;transform:rotate(var(--r));animation:confettiFall 2.8s var(--d) ease-in forwards}
.confetti-piece.c1{background:#9d464a}.confetti-piece.c2{background:#547a86}.confetti-piece.c3{background:#76925e}.confetti-piece.c4{background:#efe0bd}.confetti-piece.c5{background:#7a6658}
@keyframes confettiFall{0%{opacity:0;top:-14px}12%{opacity:1}100%{opacity:0;top:112%;transform:translateX(18px) rotate(280deg)}}

.surprise-ghost{position:absolute;left:-46px;top:10px;width:38px;height:110px;opacity:0;animation:ghostInterrupt 3.8s ease-in-out both}
.ghost-string{position:absolute;top:-10px;width:1px;height:54px;background:#ddd2bd;opacity:.75}.gs1{left:12px}.gs2{right:12px}
.ghost-head{position:absolute;left:7px;top:42px;width:24px;height:24px;border-radius:50%;background:#e6e0d0;border:2px solid #5b5147}
.ghost-body{position:absolute;left:4px;top:64px;width:30px;height:35px;background:#d8d5c9;border:2px solid #5b5147;border-radius:12px 12px 5px 5px}
.ghost-body:after{content:"";position:absolute;left:3px;right:3px;bottom:-8px;height:11px;background:linear-gradient(135deg,#d8d5c9 50%,transparent 50%) 0 0/10px 10px repeat-x}
@keyframes ghostInterrupt{0%{opacity:0;left:-46px}18%{opacity:1}48%{left:47%;opacity:1}72%{left:68%;opacity:1}100%{left:108%;opacity:0}}

/* Gorra: el modal debe quedar centrado en viewport sin depender de su tamaño. */
#hatModal.open{display:grid!important;place-items:center!important;padding:16px!important}
#hatModal .hat-modal-card{position:relative!important;inset:auto!important;margin:0!important;transform:none!important;justify-self:center!important;align-self:center!important}


/* === Elemento sorpresa: legibilidad visual y resultado contextual === */
/* El espejo entra claramente en el centro-derecha del escenario, lejos del telón lateral. */
.surprise-layer{z-index:3!important}
.surprise-mirror{
  right:58px!important;
  bottom:12px!important;
  width:54px!important;
  height:96px!important;
  border:5px solid #7c512f!important;
  background:linear-gradient(135deg,#dbe8e5 0 42%,#9ebfc0 43% 62%,#d9e7df 63%)!important;
  box-shadow:inset 0 0 0 3px #f2ead7,3px 3px 0 rgba(0,0,0,.18)!important;
}
.surprise-mirror i{left:8px!important;top:7px!important;width:8px!important;height:70px!important;background:rgba(255,255,255,.72)!important}
.surprise-mirror .mirror-reflection{
  position:absolute;left:28px;bottom:8px;width:13px;height:48px;opacity:.38;
  background:#516d87;border-radius:8px 8px 3px 3px;
}
.surprise-mirror .mirror-reflection:before{
  content:"";position:absolute;left:0;top:-12px;width:13px;height:13px;border-radius:50%;background:#c99a78;
}

/* Título de escena: se compacta solo este rótulo para que nunca quede truncado. */
.stage>.act-label{
  left:3px!important;
  right:3px!important;
  font-size:12px!important;
  letter-spacing:-.45px!important;
  padding-left:2px!important;
  padding-right:2px!important;
  text-overflow:clip!important;
}
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  left:3px!important;
  right:3px!important;
}


/* === Público reconocible y clickeable === */
.person.clickable-person{cursor:pointer}
.person.clickable-person:hover .body{filter:brightness(1.10)}
.person.clickable-person:focus-visible{outline:3px solid #8c2f35;outline-offset:3px}
.person .accessory,.passer .accessory,.donor .accessory{position:absolute;pointer-events:none;z-index:6}
/* Gafas vistas desde atrás: se reconoce la montura rodeando la nuca/cabeza. */
.person .accessory.glasses,.passer .accessory.glasses,.donor .accessory.glasses{
  left:1px;top:9px;width:29px;height:9px;border-top:3px solid #3c3029;border-radius:50%;
}
.person .accessory.glasses:before,.person .accessory.glasses:after,
.passer .accessory.glasses:before,.passer .accessory.glasses:after,
.donor .accessory.glasses:before,.donor .accessory.glasses:after{
  content:"";position:absolute;top:-4px;width:8px;height:8px;border:2px solid #3c3029;border-radius:50%;background:rgba(220,232,226,.28)
}
.person .accessory.glasses:before,.passer .accessory.glasses:before,.donor .accessory.glasses:before{left:2px}
.person .accessory.glasses:after,.passer .accessory.glasses:after,.donor .accessory.glasses:after{right:2px}
/* Sombrero visible por encima de la cabeza. */
.person .accessory.hat,.passer .accessory.hat,.donor .accessory.hat{
  left:-2px;top:-5px;width:35px;height:8px;background:#62452f;border:2px solid #3f2d22;border-radius:50%;
}
.person .accessory.hat:after,.passer .accessory.hat:after,.donor .accessory.hat:after{
  content:"";position:absolute;left:8px;bottom:3px;width:16px;height:11px;background:#76553c;border:2px solid #3f2d22;border-radius:5px 5px 2px 2px;
}
/* Bastón al costado: acompaña a la misma persona cada vez que vuelve. */
.person .accessory.cane,.passer .accessory.cane,.donor .accessory.cane{
  right:-8px;top:34px;width:4px;height:35px;background:#6a452c;border:1px solid #3f2d22;border-radius:3px;
}
.person .accessory.cane:before,.passer .accessory.cane:before,.donor .accessory.cane:before{
  content:"";position:absolute;right:-1px;top:-5px;width:9px;height:8px;border:3px solid #6a452c;border-left:0;border-bottom:0;border-radius:0 8px 0 0;
}
.audience-modal-grid>div:nth-last-child(-n+2){background:rgba(255,247,223,.18)}


/* === Público siempre visto desde atrás === */
/* Gafas: desde atrás sólo se ven las patillas y el puente abrazando la nuca,
   nunca los cristales frontales. */
.person .accessory.glasses,.passer .accessory.glasses,.donor .accessory.glasses{
  left:1px!important;
  top:10px!important;
  width:29px!important;
  height:8px!important;
  background:transparent!important;
  border:0!important;
  border-top:3px solid #3c3029!important;
  border-radius:50% 50% 0 0!important;
}
.person .accessory.glasses:before,.passer .accessory.glasses:before,.donor .accessory.glasses:before,
.person .accessory.glasses:after,.passer .accessory.glasses:after,.donor .accessory.glasses:after{
  content:""!important;
  position:absolute!important;
  top:-2px!important;
  width:7px!important;
  height:7px!important;
  background:transparent!important;
  border:0!important;
  border-top:2px solid #3c3029!important;
  border-radius:50%!important;
}
.person .accessory.glasses:before,.passer .accessory.glasses:before,.donor .accessory.glasses:before{left:-1px!important;transform:rotate(-22deg)}
.person .accessory.glasses:after,.passer .accessory.glasses:after,.donor .accessory.glasses:after{right:-1px!important;transform:rotate(22deg)}

/* El sombrero se dibuja por encima y detrás de la coronilla. */
.person .accessory.hat,.passer .accessory.hat,.donor .accessory.hat{z-index:7!important}
/* El bastón queda al costado del cuerpo, visible desde nuestra perspectiva posterior. */
.person .accessory.cane,.passer .accessory.cane,.donor .accessory.cane{z-index:5!important}


/* === Limones: guiño a Lemonade Tycoon === */
.lemon-stat{
  font-family:"Courier New",monospace;
  font-size:13px!important;
  font-weight:700;
  color:var(--ink);
  cursor:default;
  white-space:nowrap;
}
.lemon-stat.ready{
  cursor:pointer;
  background:#f2dfa0!important;
  box-shadow:inset 1px 1px #fff7df,0 0 0 2px rgba(201,151,61,.32);
}
.lemon-stat.ready:hover{filter:brightness(1.04)}
.lemon-stat.ready:after{
  content:" · hacer limonada";
  font-size:13px;
}
.tip-donation.lemon{font-size:19px;filter:drop-shadow(1px 1px rgba(0,0,0,.18))}
.hat-money-item.lemon{
  font-size:23px;
  transform:rotate(-8deg);
}


/* === Limonada: descubrimiento y diálogo del actor === */
.lemon-stat{display:none}
.lemon-stat.is-visible{display:inline-block}
.actor-dialogue{
  position:absolute;
  left:calc(50% + 42px);
  top:172px;
  z-index:95;
  max-width:190px;
  padding:7px 9px;
  background:#f4e7c7;
  border:3px solid #684b36;
  box-shadow:3px 3px 0 rgba(0,0,0,.16);
  font-size:13px!important;
  font-weight:700;
  line-height:1.2;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.actor-dialogue.show{opacity:1;transform:translateY(0)}
.actor-dialogue:after{
  content:"";
  position:absolute;
  left:-10px;
  bottom:8px;
  width:14px;
  height:14px;
  background:#f4e7c7;
  border-left:3px solid #684b36;
  border-bottom:3px solid #684b36;
  transform:rotate(45deg);
}


/* === Aportes: monedas y billetes caen desde arriba hacia la gorra === */
.tip-donation{
  opacity:0!important;
  transform:translateY(-26px) scale(1.05)!important;
  animation:tipDropIntoHat 1.05s cubic-bezier(.22,.75,.32,1) forwards!important;
  z-index:4;
}
@keyframes tipDropIntoHat{
  0%{opacity:0;transform:translateY(-26px) scale(1.05)}
  18%{opacity:1}
  72%{opacity:1;transform:translateY(8px) scale(1)}
  100%{opacity:0;transform:translateY(13px) scale(.82)}
}


/* === Títulos autoajustables, sin truncar y respetando tamaño mínimo legible === */
.stage .sign,
.stage>.act-label{
  box-sizing:border-box!important;
  max-width:calc(100% - 6px)!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.stage .sign{
  left:3px!important;
  right:3px!important;
  width:auto!important;
  font-size:15px!important;
  letter-spacing:0!important;
}
.stage>.act-label{
  left:3px!important;
  right:3px!important;
  width:auto!important;
  font-size:14px!important;
  letter-spacing:0!important;
}


/* === Diario: mismo tratamiento visual que Público presente === */
.sidebar-diary-expanded .log,
.sidebar-diary .log,
#log{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:2px 4px 4px 2px!important;
}


/* === Corrección definitiva de títulos del teatrillo === */
.stage .sign{
  box-sizing:border-box!important;
  left:3px!important;
  right:auto!important;
  width:calc(100% - 6px)!important;
  max-width:calc(100% - 6px)!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  padding-left:3px!important;
  padding-right:3px!important;
}
.stage>.act-label{
  box-sizing:border-box!important;
  left:3px!important;
  right:auto!important;
  width:calc(100% - 6px)!important;
  max-width:calc(100% - 6px)!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
}

/* Elementos móviles: invisibles en escritorio. */
.mobile-primary-controls,.mobile-menu-toggle,.mobile-sidebar-close,.mobile-menu-backdrop{display:none}

@media(max-width:900px){
  html,body{min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
  body{padding:0!important;display:block!important;background:#2c2521!important}
  .game{
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    height:auto!important;
    max-height:none!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .topbar{
    position:relative!important;
    min-height:0!important;
    padding:7px 8px!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }
  .brand{font-size:20px!important;width:100%!important;margin:0 0 2px!important}
  .stat{font-size:13px!important;padding:5px 7px!important}

  /* Orden móvil: header -> plaza -> controles -> información. */
  .main{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .scene-wrap{
    order:1!important;
    position:relative!important;
    width:100%!important;
    height:680px!important;
    min-height:680px!important;
    overflow:hidden!important;
    border:0!important;
  }
  .scene{
    width:100%!important;
    height:680px!important;
    min-height:680px!important;
  }
  .mobile-primary-controls{
    order:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    padding:9px!important;
    background:#d8c18d!important;
    border-top:3px solid var(--line)!important;
    border-bottom:3px solid var(--line)!important;
  }
  .mobile-primary-controls>.primary{
    width:100%!important;
    margin:0!important;
  }
  .mobile-primary-controls>.floating-actions{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
    z-index:auto!important;
  }
  .mobile-primary-controls .float-toggle{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:7px 5px!important;
    white-space:normal!important;
    line-height:1.15!important;
    text-align:center!important;
    font-size:13px!important;
  }

  .rightbar{
    order:3!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:9px!important;
    border:0!important;
    background:#d8c18d!important;
  }
  .rightbar>.primary{display:none!important}
  .rightbar .panel{margin-bottom:9px!important}

  /* Los desplegables pertenecen a los botones, pero se muestran como popover móvil. */
  .scene-wrap>.float-panel{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:min(92vw,500px)!important;
    max-width:92vw!important;
    max-height:72vh!important;
    overflow-y:auto!important;
    z-index:260!important;
    margin:0!important;
  }
  .scene-wrap>#obraMenu,.scene-wrap>#mejorasMenu,.scene-wrap>#sorpresaMenu{
    width:min(92vw,500px)!important;
    max-width:92vw!important;
  }
  .play-option-row.selected-row{grid-template-columns:1fr!important}

  /* Sidebar lateral invocado por Menú. */
  .sidebar{
    display:flex!important;
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:min(285px,84vw)!important;
    height:100dvh!important;
    min-height:0!important;
    z-index:310!important;
    flex-direction:column!important;
    gap:0!important;
    padding:58px 10px 12px!important;
    border:0!important;
    border-right:3px solid var(--line)!important;
    background:#d8c18d!important;
    overflow-y:auto!important;
    transform:translateX(-105%)!important;
    transition:transform .28s cubic-bezier(.22,.78,.22,1)!important;
    box-shadow:7px 0 0 rgba(0,0,0,.18)!important;
  }
  .sidebar.mobile-open{transform:translateX(0)!important}
  .sidebar .navbtn{width:100%!important;margin-bottom:7px!important}
  .sidebar-diary-expanded{flex:1 1 auto!important;min-height:180px!important}
  .sidebar-diary-expanded .log{min-height:160px!important}

  .mobile-menu-toggle{
    display:block!important;
    position:absolute!important;
    left:10px!important;
    top:12px!important;
    z-index:120!important;
    border:2px solid #5b402e!important;
    background:#ecdcb5!important;
    color:#35261e!important;
    padding:7px 10px!important;
    font:700 13px "Courier New",monospace!important;
    box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e!important;
  }
  .mobile-sidebar-close{
    display:block!important;
    position:absolute!important;
    right:10px!important;
    top:10px!important;
    width:36px!important;
    height:36px!important;
    border:2px solid #5b402e!important;
    background:#ecdcb5!important;
    color:#35261e!important;
    font:900 20px "Courier New",monospace!important;
    cursor:pointer!important;
  }
  .mobile-menu-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:300!important;
    background:rgba(35,28,24,.38)!important;
  }
  .mobile-menu-backdrop.open{display:block!important}

  /* La ubicación sigue siendo parte de la plaza y no del bloque de controles. */
  .scene-wrap>.weather-card{
    position:absolute!important;
    top:12px!important;
    right:10px!important;
    left:auto!important;
    max-width:62%!important;
  }

  /* Título siempre contenido también en pantallas angostas. */
  .stage .sign{
    left:3px!important;
    right:auto!important;
    width:calc(100% - 6px)!important;
    max-width:calc(100% - 6px)!important;
    overflow:hidden!important;
  }
}


/* El rótulo de escena conserva su anclaje centrado dentro de la barra café. */
.stage>.act-label{
  left:50%!important;
  right:auto!important;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;
}
.scene.camera-focus .stage>.act-label,
.scene.theater-closeup .stage>.act-label{
  left:50%!important;
  transform:translateX(-50%)!important;
}


/* === Móvil: header de acciones y plaza como foco principal === */
.mobile-header-controls{display:none}

@media(max-width:900px){
  /* Header: se eliminan los cuadros informativos y quedan acciones de juego. */
  .topbar{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:7px 8px!important;
  }
  .topbar>.brand{
    width:auto!important;
    flex:0 0 auto!important;
    margin:5px 6px 0 0!important;
    font-size:20px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .topbar>.stat{
    display:none!important;
  }
  .mobile-header-controls{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:6px!important;
    margin-left:auto!important;
  }

  /* Los tres selectores forman la primera fila y quedan alineados a la derecha. */
  .mobile-header-controls>.floating-actions{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    width:100%!important;
    margin:0!important;
    z-index:auto!important;
  }
  .mobile-header-controls .float-toggle{
    width:auto!important;
    min-width:0!important;
    min-height:38px!important;
    margin:0!important;
    padding:6px 8px!important;
    font-size:13px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:normal!important;
  }

  /* Comenzar función queda debajo de los tres, también alineado a la derecha. */
  .mobile-header-controls>#start{
    display:block!important;
    width:auto!important;
    min-width:176px!important;
    max-width:100%!important;
    min-height:38px!important;
    margin:0!important;
    padding:6px 10px!important;
    font-size:13px!important;
    line-height:1.1!important;
    align-self:flex-end!important;
  }

  /* Ya no existe un bloque de controles entre la plaza y Función. */
  .mobile-primary-controls{
    display:none!important;
  }

  /* Después del header: plaza. Después de la plaza: solo la información de Función. */
  .scene-wrap{order:1!important}
  .rightbar{
    order:2!important;
    padding:9px!important;
    border-top:3px solid var(--line)!important;
  }
  .rightbar>.primary{display:none!important}
  .rightbar>.audience-panel,
  .rightbar>.legend{
    display:none!important;
  }
  .rightbar>.panel{
    display:none!important;
  }
  .rightbar>.panel:first-of-type{
    display:block!important;
    margin:0!important;
  }

  /* Diario: inmediatamente bajo su botón dentro del menú lateral. */
  .sidebar-diary-expanded{
    flex:0 0 auto!important;
    min-height:0!important;
    margin-top:0!important;
    margin-bottom:8px!important;
  }
  .sidebar-diary-expanded .log{
    min-height:150px!important;
    max-height:42vh!important;
    height:auto!important;
  }
  .sidebar-diary-expanded.diary-hidden{
    display:none!important;
  }

  /* El menú lateral mantiene sus opciones arriba y el diario justo bajo Diario. */
  .sidebar{
    justify-content:flex-start!important;
  }

  /* En pantallas muy angostas el logo no obliga a reducir las fuentes:
     los controles simplemente usan varias líneas dentro del mismo header. */
  @media(max-width:520px){
    .topbar{
      flex-wrap:wrap!important;
    }
    .topbar>.brand{
      width:100%!important;
      margin:0!important;
    }
    .mobile-header-controls{
      width:100%!important;
      flex-basis:100%!important;
    }
    .mobile-header-controls>.floating-actions{
      justify-content:flex-end!important;
    }
  }
}


/* === Ajuste móvil 2: una sola línea de acciones, diario visible y más espacio para Función === */
@media(max-width:900px){
  /* Los cuatro controles principales comparten una sola fila del header. */
  .topbar{
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:5px!important;
    padding:6px!important;
  }
  .topbar>.brand{
    width:auto!important;
    flex:0 0 auto!important;
    align-self:center!important;
    margin:0 4px 0 0!important;
    font-size:18px!important;
  }
  .mobile-header-controls{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    flex-basis:auto!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-end!important;
    gap:4px!important;
    margin:0 0 0 auto!important;
  }
  /* display:contents permite que Obra/Mejoras/Sorpresa y Comenzar sean cuatro
     elementos de la misma fila sin duplicar botones. */
  .mobile-header-controls>.floating-actions{
    display:contents!important;
  }
  .mobile-header-controls .float-toggle,
  .mobile-header-controls>#start{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    padding:5px 4px!important;
    font-size:13px!important;
    line-height:1.05!important;
    text-align:center!important;
    white-space:normal!important;
    align-self:stretch!important;
  }
  .mobile-header-controls>#start{
    font-size:13px!important;
  }

  /* En móvil quitamos la vereda: la plaza termina tras el público y el panel
     Función puede quedar visible mucho antes. */
  .scene-wrap{
    height:590px!important;
    min-height:590px!important;
  }
  .scene{
    height:590px!important;
    min-height:590px!important;
  }
  .sidewalk,
  #sidewalk,
  .street-passers,
  #streetPassers{
    display:none!important;
  }

  /* El panel Función es el único bloque bajo la plaza y queda compacto. */
  .rightbar{
    padding:7px 9px 9px!important;
  }
  .rightbar>.panel:first-of-type{
    display:block!important;
    padding:8px 10px!important;
    margin:0!important;
  }
  .rightbar>.panel:first-of-type h3{
    margin-bottom:6px!important;
  }

  /* El historial del Diario aparece realmente justo debajo de su botón. */
  .sidebar.mobile-open .sidebar-diary-expanded:not(.diary-hidden){
    display:block!important;
    flex:0 0 auto!important;
    min-height:0!important;
    height:auto!important;
    margin:0 0 8px!important;
    padding:8px!important;
  }
  .sidebar.mobile-open .sidebar-diary-expanded:not(.diary-hidden) .log{
    display:block!important;
    height:190px!important;
    min-height:190px!important;
    max-height:32vh!important;
    overflow-y:auto!important;
  }

  /* Anula el viejo comportamiento que ponía el logo/controles en dos filas. */
  @media(max-width:520px){
    .topbar{flex-wrap:nowrap!important}
    .topbar>.brand{
      width:auto!important;
      margin:0 4px 0 0!important;
      font-size:17px!important;
    }
    .mobile-header-controls{
      width:auto!important;
      flex-basis:auto!important;
      flex-wrap:nowrap!important;
    }
    .mobile-header-controls .float-toggle,
    .mobile-header-controls>#start{
      padding-left:3px!important;
      padding-right:3px!important;
    }
  }
}


/* === Móvil: botones de acción + menú lateral de información + Función visible === */
.mobile-audience-toggle{display:none}
.mobile-sidebar-detail{display:contents}

@media(max-width:900px){
  /* El juego ocupa exactamente la pantalla: la caja Función siempre queda visible. */
  html,body{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body{overflow:hidden!important}
  .game{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .topbar{
    flex:0 0 auto!important;
  }
  .main{
    flex:1 1 0!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }

  /* Plaza más compacta: deja sitio permanente para la información de Función. */
  .scene-wrap{
    order:1!important;
    flex:1 1 0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .scene{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  /* Reacomodo vertical proporcional para conservar el teatrillo completo
     en plazas más bajas sin perder legibilidad. */
  .building{
    top:16%!important;
    height:30%!important;
    min-height:118px!important;
  }
  .plaza{top:42%!important}
  .tree{
    top:38%!important;
    transform:scale(.84)!important;
    transform-origin:left bottom!important;
  }
  .puppeteer{
    top:27%!important;
    transform:translateX(-50%) scale(.88)!important;
    transform-origin:center top!important;
  }
  .stage{
    top:38%!important;
    width:220px!important;
    height:164px!important;
  }
  .scene.camera-focus .stage{
    top:36%!important;
    transform:translateX(-50%) scale(1.08)!important;
  }
  .scene.theater-closeup .stage{
    top:34%!important;
  }
  .stage-table{
    top:68%!important;
    width:270px!important;
    transform:translateX(-50%) scale(.88)!important;
    transform-origin:center top!important;
  }
  .crowd{
    top:auto!important;
    bottom:13px!important;
    width:94%!important;
    height:76px!important;
  }
  .tiphat{
    left:calc(50% - 185px)!important;
    top:auto!important;
    bottom:74px!important;
    transform:scale(.86)!important;
  }
  .audience-event{
    top:auto!important;
    bottom:82px!important;
  }
  .message{
    top:70px!important;
    width:min(340px,78%)!important;
  }
  .scene.camera-focus .message,
  .scene.theater-closeup .message{
    top:64px!important;
  }

  /* El panel Función reserva su altura debajo de la plaza. */
  .rightbar{
    order:2!important;
    flex:0 0 116px!important;
    height:116px!important;
    min-height:116px!important;
    max-height:116px!important;
    overflow:hidden!important;
    padding:6px 9px 7px!important;
    border-top:3px solid var(--line)!important;
  }
  .rightbar>.panel:first-of-type{
    display:block!important;
    height:100%!important;
    margin:0!important;
    padding:7px 9px!important;
    overflow:hidden!important;
  }
  .rightbar>.panel:first-of-type h3{
    margin:0 0 4px!important;
    padding-bottom:3px!important;
  }
  .rightbar>.panel:first-of-type .progress{
    margin:5px 0!important;
  }
  .rightbar>.audience-panel,
  .rightbar>.legend{display:none!important}

  /* Los detalles de los botones de acción aparecen pegados justo bajo
     el botón pulsado, no en mitad de la plaza. */
  .float-panel,
  .scene-wrap>.float-panel,
  .scene-wrap>#obraMenu,
  .scene-wrap>#mejorasMenu,
  .scene-wrap>#sorpresaMenu{
    position:fixed!important;
    top:var(--mobile-action-top,56px)!important;
    left:var(--mobile-action-left,6px)!important;
    right:auto!important;
    transform:none!important;
    width:var(--mobile-action-width,285px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:min(62vh,430px)!important;
    overflow-y:auto!important;
    z-index:360!important;
    margin:0!important;
  }

  /* Público presente pasa a ser una ficha del menú lateral, como Diario. */
  .mobile-audience-toggle{
    display:block!important;
  }
  .mobile-sidebar-detail{
    display:block!important;
    flex:0 0 auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  .mobile-sidebar-detail>.panel{
    display:block!important;
    margin:0 0 8px!important;
    padding:8px!important;
    min-height:0!important;
    box-shadow:none!important;
  }
  .mobile-sidebar-detail>.mobile-sidebar-hidden{
    display:none!important;
  }
  .mobile-sidebar-detail .sidebar-diary-expanded{
    height:auto!important;
    min-height:0!important;
  }
  .mobile-sidebar-detail .sidebar-diary-expanded .log{
    display:block!important;
    height:190px!important;
    min-height:190px!important;
    max-height:32vh!important;
    overflow-y:auto!important;
  }
  .mobile-sidebar-detail .audience-panel{
    height:auto!important;
    min-height:0!important;
  }
  .mobile-sidebar-detail .audience-roster{
    display:block!important;
    max-height:32vh!important;
    min-height:190px!important;
    overflow-y:auto!important;
  }
  .mobile-sidebar-detail .audience-panel>.legend{
    display:block!important;
    margin-top:7px!important;
  }

  /* El menú lateral reserva su scroll al contenido interno, no a la página. */
  .sidebar{
    overflow-y:auto!important;
  }
}

/* En móviles muy bajos, compactamos un poco más la plaza sin tocar el piso
   tipográfico de 13 px. */
@media(max-width:900px) and (max-height:700px){
  .rightbar{
    flex-basis:108px!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
  }
  .stage{
    width:210px!important;
    height:156px!important;
  }
  .stage-table{
    width:258px!important;
  }
  .message{top:62px!important}
}


/* === Ajuste móvil: Público presente visible + 5px más para Función === */
@media(max-width:900px){
  /* Cuando Público presente está seleccionado, gana prioridad sobre reglas móviles antiguas. */
  #mobileSidebarDetail>.audience-panel:not(.mobile-sidebar-hidden){
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
  }
  #mobileSidebarDetail>.audience-panel:not(.mobile-sidebar-hidden) #audienceRoster{
    display:block!important;
    visibility:visible!important;
    min-height:150px!important;
    max-height:32vh!important;
    overflow-y:auto!important;
  }

  /* La caja "Plaza del barrio" queda un poco más compacta sin bajar de 13px. */
  .scene-wrap>.weather-card{
    padding:3px 6px!important;
    border-width:2px!important;
    line-height:1.15!important;
  }
  .scene-wrap>.weather-card small{
    margin-top:1px!important;
    line-height:1.2!important;
  }

  /* Quitamos 5px de la plaza y se los entregamos al panel Función. */
  .rightbar{
    flex-basis:121px!important;
    height:121px!important;
    min-height:121px!important;
    max-height:121px!important;
  }
}

/* Conservamos la misma ganancia de 5px también en móviles bajos. */
@media(max-width:900px) and (max-height:700px){
  .rightbar{
    flex-basis:113px!important;
    height:113px!important;
    min-height:113px!important;
    max-height:113px!important;
  }
}


/* === Refinamiento móvil: composición estable + Función horizontal === */
@media(max-width:900px){
  /* Diario y Público presente son estrictamente excluyentes. */
  #mobileSidebarDetail > .mobile-sidebar-hidden{
    display:none!important;
  }
  #mobileSidebarDetail > .sidebar-diary-expanded.diary-hidden{
    display:none!important;
  }

  /* En móvil la caja del teatrillo y el mensaje dejan de depender de porcentajes
     de la altura del viewport. Así no "saltan" al achicar Chrome. */
  .stage{
    top:205px!important;
    width:220px!important;
    height:164px!important;
  }
  .scene.camera-focus .stage{
    top:195px!important;
    transform:translateX(-50%) scale(1.08)!important;
  }
  .scene.theater-closeup .stage{
    top:185px!important;
  }
  .stage-table{
    top:352px!important;
    width:270px!important;
    transform:translateX(-50%) scale(.88)!important;
    transform-origin:center top!important;
  }
  .puppeteer{
    top:142px!important;
    transform:translateX(-50%) scale(.88)!important;
    transform-origin:center top!important;
  }
  .message,
  .scene.camera-focus .message,
  .scene.theater-closeup .message{
    top:70px!important;
  }

  /* La gorra sube exactamente 50px respecto de su posición móvil anterior. */
  .tiphat{
    bottom:74px!important;
    top:auto!important;
    transform:translateY(-50px) scale(.86)!important;
  }

  /* Función: ánimo + barra ocupan la mitad izquierda.
     Escena/tiempo y recaudación usan la mitad derecha. */
  .rightbar>.panel:first-of-type{
    padding:7px 9px!important;
  }
  .rightbar>.panel:first-of-type h3{
    margin:0 0 5px!important;
    padding-bottom:3px!important;
  }
  .function-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:0 12px!important;
    align-items:start!important;
    width:100%!important;
  }
  .function-mood-block,
  .function-meta-block{
    min-width:0!important;
    font-size:13px!important;
    line-height:1.25!important;
  }
  .function-mood-block{
    padding-right:3px!important;
  }
  .function-mood-block .progress{
    width:100%!important;
    margin:6px 0 0!important;
  }
  .function-meta-block{
    padding-left:10px!important;
    border-left:1px solid #9a795b!important;
  }
  .function-clock{
    display:flex!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 7px!important;
    font-size:13px!important;
  }

  /* No aplicamos un segundo breakpoint que mueva el mensaje o el teatrillo:
     el contenido mantiene la misma coordenada al cambiar la altura de la ventana. */
}

@media(max-width:900px) and (max-height:700px){
  .stage{
    top:205px!important;
    width:220px!important;
    height:164px!important;
  }
  .stage-table{top:352px!important;width:270px!important}
  .message,
  .scene.camera-focus .message,
  .scene.theater-closeup .message{top:70px!important}
}


/* === Móvil: Público presente usa exactamente la caja del Diario === */
@media(max-width:900px){
  #mobileSidebarDetail{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  #mobileSidebarDetail>.sidebar-diary-expanded,
  #mobileSidebarDetail>.audience-panel{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 8px!important;
    padding:8px!important;
    overflow:hidden!important;
  }

  /* Mismo alto útil que el historial del Diario. */
  #mobileSidebarDetail>.audience-panel:not(.mobile-sidebar-hidden){
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }

  #mobileSidebarDetail>.audience-panel:not(.mobile-sidebar-hidden) #audienceRoster{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  /* La explicación inferior hacía que Público presente fuese más alto que Diario. */
  #mobileSidebarDetail>.audience-panel>.legend{
    display:none!important;
  }

  #mobileSidebarDetail .audience-row{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    grid-template-columns:20px minmax(0,1fr) auto!important;
  }

  #mobileSidebarDetail .audience-row>*{
    min-width:0!important;
  }

  #mobileSidebarDetail .audience-row b,
  #mobileSidebarDetail .audience-row small{
    overflow-wrap:anywhere!important;
  }
}


/* === Móvil: menú lateral comienza en la línea del botón Menú === */
@media(max-width:900px){
  .sidebar{
    top:var(--mobile-menu-top,60px)!important;
    bottom:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0 10px 12px!important;
  }

  /* Se elimina la franja superior vacía y su X.
     El menú se cierra tocando fuera o volviendo a una opción. */
  .mobile-sidebar-close{
    display:none!important;
  }

  /* El oscurecimiento tampoco cubre el header: logo y botones de acción
     permanecen completamente visibles. */
  .mobile-menu-backdrop{
    top:var(--mobile-menu-top,60px)!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:auto 0 0 0!important;
  }
}


/* === Móvil: menú pegado al header, sin corte ni espacio intermedio === */
@media(max-width:900px){
  .sidebar{
    top:var(--mobile-menu-top,0px)!important;
    border-top:0!important;
    margin-top:0!important;
  }

  .mobile-menu-backdrop{
    top:var(--mobile-menu-top,0px)!important;
    margin-top:0!important;
  }
}


/* === Móvil: pequeño respiro interior bajo el header === */
@media(max-width:900px){
  .sidebar{
    padding-top:15px!important;
  }
}


/* === Móvil: Diario y Público presente encajados con padding superior de 15px === */
@media(max-width:900px){
  .sidebar{
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
  }

  #mobileSidebarDetail{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  #mobileSidebarDetail>.sidebar-diary-expanded,
  #mobileSidebarDetail>.audience-panel{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  #mobileSidebarDetail>.mobile-sidebar-hidden,
  #mobileSidebarDetail>.sidebar-diary-expanded.diary-hidden{
    display:none!important;
  }

  /* El contenido interno toma solo el espacio que realmente queda en el menú. */
  #mobileSidebarDetail .sidebar-diary-expanded .log,
  #mobileSidebarDetail .audience-panel #audienceRoster{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    width:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  #mobileSidebarDetail .audience-panel h3,
  #mobileSidebarDetail .sidebar-diary-expanded h3{
    flex:0 0 auto!important;
  }
}


/* === Móvil: calidad de cada obra bajo demanda === */
.play-quality-chevron{display:none}

@media(max-width:900px){
  #obraMenu .play-choice{
    position:relative!important;
    padding-right:34px!important;
    padding-bottom:24px!important;
  }

  #obraMenu .play-quality-chevron{
    display:flex!important;
    position:absolute!important;
    right:6px!important;
    bottom:5px!important;
    width:24px!important;
    height:20px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:900!important;
    cursor:pointer!important;
    user-select:none!important;
    transform:none!important;
    transition:transform .18s ease!important;
    z-index:3!important;
  }

  #obraMenu .play-option-row .play-quality{
    display:none!important;
    margin-top:7px!important;
  }
  #obraMenu .play-option-row.quality-open .play-quality{
    display:block!important;
  }
  #obraMenu .play-option-row.quality-open .play-quality-chevron{
    transform:rotate(180deg)!important;
  }

  /* Seleccionar una obra ya no despliega automáticamente su ficha de calidad. */
  #obraMenu .play-option-row.selected-row:not(.quality-open) .play-quality{
    display:none!important;
  }
}


/* === Corrección móvil: chevron de obra realmente abajo a la derecha === */
@media(max-width:900px){
  .play-choice{
    position:relative!important;
    padding-bottom:26px!important;
  }

  .play-choice .play-quality-chevron{
    position:absolute!important;
    top:auto!important;
    right:7px!important;
    bottom:5px!important;
    left:auto!important;
    margin:0!important;
    line-height:1!important;
    transform:none!important;
  }
}


/* === Móvil: menú Obra se despliega completo, sin scroll interno === */
@media(max-width:900px){
  #obraMenu{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    overflow-y:visible!important;
  }

  #obraMenu .quality-panel,
  #obraMenu .play-quality-details{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
  }
}


/* === Móvil: Obra usa el scroll del Diario y toda la altura de la plaza === */
@media(max-width:900px){
  #obraMenu{
    /* Por defecto mide solo lo que necesitan las obras.
       Si crece, recién entonces usa el resto de la plaza hasta Función. */
    top:var(--mobile-action-top,56px)!important;
    bottom:auto!important;
    height:auto!important;
    max-height:calc(100dvh - var(--mobile-action-top,56px) - 121px)!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    /* Firefox: equivalente al scrollbar del Diario. */
    scrollbar-width:thin;
    scrollbar-color:#8c6245 #d8c398;
  }

  /* Chrome / Edge / Safari: exactamente el estilo del historial del Diario. */
  #obraMenu::-webkit-scrollbar{
    width:8px;
  }
  #obraMenu::-webkit-scrollbar-track{
    background:#d8c398;
    border-left:1px solid #9c7b5d;
  }
  #obraMenu::-webkit-scrollbar-thumb{
    background:#8c6245;
    border:1px solid #5b402e;
    border-radius:0;
  }
  #obraMenu::-webkit-scrollbar-thumb:hover{
    background:#765039;
  }

  /* Los detalles de calidad crecen dentro del panel; el único scroll
     pertenece al menú Obra completo. */
  #obraMenu .quality-panel,
  #obraMenu .play-quality-details{
    max-height:none!important;
    overflow:visible!important;
  }
}

/* La caja Función es un poco más baja en pantallas cortas; ajustamos el límite. */
@media(max-width:900px) and (max-height:700px){
  #obraMenu{
    bottom:auto!important;
    max-height:calc(100dvh - var(--mobile-action-top,56px) - 113px)!important;
  }
}


/* === Móvil: Obra usa toda la altura REAL disponible de la plaza === */
@media(max-width:900px){
  #obraMenu{
    bottom:auto!important;
    height:auto!important;
    max-height:var(--mobile-obra-max-height, calc(100dvh - var(--mobile-action-top,56px) - 24px))!important;
  }
}

@media(max-width:900px) and (max-height:700px){
  #obraMenu{
    bottom:auto!important;
    max-height:var(--mobile-obra-max-height, calc(100dvh - var(--mobile-action-top,56px) - 24px))!important;
  }
}


/* === Corrección real: Obra crece hasta agotar la plaza === */
@media(max-width:900px){
  .scene-wrap>#obraMenu{
    bottom:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--mobile-obra-max-height, calc(100dvh - var(--mobile-action-top,56px) - 24px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
}

@media(max-width:900px) and (max-height:700px){
  .scene-wrap>#obraMenu{
    max-height:var(--mobile-obra-max-height, calc(100dvh - var(--mobile-action-top,56px) - 24px))!important;
  }
}


/* === Crear · Editor de obras === */
.create-modal.open{display:flex}
.create-modal-card{
  width:min(860px,calc(100vw - 36px))!important;
  max-height:min(760px,calc(100dvh - 32px))!important;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden!important;
}
.create-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
  padding-right:38px;
}
.create-head h3{
  margin:0 0 5px;
  font-size:17px;
  text-transform:uppercase;
}
.create-head p{
  margin:0;
  font-size:13px;
  line-height:1.35;
}
.create-coherence{
  min-width:118px;
  border:2px solid #73543d;
  background:#e8d4a8;
  padding:7px 9px;
  text-align:center;
  box-shadow:inset 1px 1px #fff5d8;
}
.create-coherence span,
.create-coherence b{display:block;font-size:13px}
.create-coherence b{font-size:16px;margin-top:2px}
.create-coherence.warn{background:#dfb79d}

.create-play-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
  scrollbar-color:#8c6245 #d8c398;
}
.create-play-tab{
  flex:1 1 0;
  min-width:170px;
  border:2px solid #5b402e;
  background:#ecdcb5;
  color:#35261e;
  padding:8px;
  font:700 13px "Courier New",monospace;
  cursor:pointer;
  box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e;
}
.create-play-tab.active{background:#b85450;color:#fff6df}

.create-editor-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.create-editor-hint{
  font-size:13px;
  line-height:1.3;
}
.create-reset{
  width:auto!important;
  min-width:150px;
  margin:0!important;
}

.create-scenes{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:2px 4px 2px 0;
  scrollbar-width:thin;
  scrollbar-color:#8c6245 #d8c398;
}
.create-scenes::-webkit-scrollbar{width:8px}
.create-scenes::-webkit-scrollbar-track{background:#d8c398;border-left:1px solid #9c7b5d}
.create-scenes::-webkit-scrollbar-thumb{background:#8c6245;border:1px solid #5b402e}

.create-scene-card{
  display:grid;
  grid-template-columns:25px 30px minmax(0,1fr) 32px;
  gap:7px;
  align-items:start;
  margin:0 0 7px;
  padding:8px;
  border:2px solid #73543d;
  background:#f1e2bd;
  box-shadow:2px 2px 0 rgba(91,64,46,.25),inset 1px 1px #fff7df;
  cursor:grab;
}
.create-scene-card.dragging{opacity:.45}
.create-scene-card.drag-over{outline:3px dashed #8f3c40;outline-offset:-4px}
.create-scene-handle{
  font-size:20px;
  line-height:1;
  color:#755844;
  text-align:center;
  user-select:none;
}
.create-scene-number{
  width:27px;height:27px;
  display:grid;place-items:center;
  border:2px solid #654936;
  background:#d9bf8e;
  font-size:13px;font-weight:900;
}
.create-scene-copy b{
  display:block;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:3px;
}
.create-scene-copy p{
  margin:0 0 5px;
  font-size:13px;
  line-height:1.28;
}
.create-scene-dialogue{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.create-scene-dialogue span{
  padding:3px 5px;
  border:1px solid #9a795b;
  background:#ead7ae;
  font-size:13px;
  line-height:1.2;
}
.create-scene-arrows{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.create-scene-arrows button{
  width:30px;height:27px;
  border:2px solid #5b402e;
  background:#ecdcb5;
  color:#35261e;
  font:700 15px "Courier New",monospace;
  cursor:pointer;
  padding:0;
}

.create-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:12px;
  align-items:center;
  padding-top:3px;
}
.create-result{
  font-size:13px;
  line-height:1.3;
  border-top:1px solid #9a795b;
  padding-top:6px;
}
.create-save{margin:0!important;font-size:14px!important;padding:9px!important}

@media(max-width:900px){
  .create-modal{
    padding:8px!important;
    align-items:stretch!important;
  }
  .create-modal-card{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px)!important;
    padding:12px!important;
    gap:8px!important;
  }
  .create-head{
    grid-template-columns:minmax(0,1fr) 100px;
    gap:8px;
    padding-right:34px;
  }
  .create-head h3{font-size:15px}
  .create-coherence{min-width:0;padding:5px}
  .create-coherence b{font-size:14px}
  .create-play-tab{
    flex:0 0 auto;
    min-width:175px;
  }
  .create-editor-toolbar{
    align-items:flex-start;
  }
  .create-reset{
    min-width:128px;
  }
  .create-scene-card{
    grid-template-columns:22px 27px minmax(0,1fr) 30px;
    gap:5px;
    padding:7px;
  }
  .create-scene-handle{font-size:17px}
  .create-scene-dialogue{
    flex-direction:column;
    gap:3px;
  }
  .create-footer{
    grid-template-columns:1fr;
    gap:7px;
  }
  .create-save{
    width:100%!important;
  }
}


/* === Áreas de juego: Crear / Bodega / Aprender / Finanzas === */
.scene-wrap{position:relative}
.game-workspace{
  position:absolute;
  inset:0;
  z-index:80;
  display:none;
  overflow:hidden;
  background:#bda77e;
}
.game-workspace.open{display:block}
.workspace-view{
  position:absolute;
  inset:0;
  display:none;
  overflow:hidden;
}
.workspace-view.active{display:block}
.scene.workspace-hidden{visibility:hidden}

.workspace-content{
  position:absolute;
  z-index:8;
  color:#382b24;
  font:13px/1.35 "Courier New",monospace;
}

/* Taller */
.workshop-view{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.06)),
    linear-gradient(#b98e68 0 64%,#826447 64% 68%,#9b7651 68%);
}
.workshop-wall{position:absolute;inset:0}
.workshop-window{
  position:absolute;right:5%;top:8%;width:120px;height:112px;
  background:linear-gradient(#94b8b8,#d7c795);
  border:9px solid #66452f;
  box-shadow:inset 0 0 0 3px #d2b17e,6px 6px rgba(0,0,0,.14);
}
.workshop-window:before,.workshop-window:after{
  content:"";position:absolute;background:#66452f
}
.workshop-window:before{width:7px;top:0;bottom:0;left:50%;transform:translateX(-50%)}
.workshop-window:after{height:7px;left:0;right:0;top:50%;transform:translateY(-50%)}
.workshop-window i{
  position:absolute;width:45px;height:24px;background:#738d65;bottom:0;left:4px;clip-path:polygon(0 100%,45% 15%,100% 100%)
}
.workshop-window b{
  position:absolute;width:53px;height:30px;background:#687b58;bottom:0;right:3px;clip-path:polygon(0 100%,55% 5%,100% 100%)
}
.workshop-shelf{
  position:absolute;left:3%;width:190px;height:17px;background:#644630;border:3px solid #4e3527;
  box-shadow:0 52px 0 #644630,0 55px 0 #4e3527;
}
.workshop-shelf span{
  position:relative;display:inline-block;margin:0 9px;transform:translateY(-32px);font-size:24px
}
.shelf-a{top:22%}.shelf-b{top:46%;left:auto;right:25%}
.workshop-pegboard{
  position:absolute;left:3%;bottom:18%;width:170px;height:120px;border:5px solid #5e4230;
  background:
    radial-gradient(circle,#72543f 1.5px,transparent 2px) 0 0/14px 14px,
    #d0ad78;
}
.workshop-pegboard i{position:absolute;width:42px;height:4px;background:#58402f}
.workshop-pegboard i:nth-child(1){left:18px;top:28px;transform:rotate(28deg)}
.workshop-pegboard i:nth-child(2){left:75px;top:48px;transform:rotate(-24deg)}
.workshop-pegboard i:nth-child(3){left:22px;top:86px}
.workshop-pegboard i:nth-child(4){left:103px;top:90px;transform:rotate(55deg)}
.workshop-table{
  position:absolute;left:15%;right:12%;bottom:5%;height:72px;background:#765237;border:5px solid #533826;
  box-shadow:0 18px 0 #60412e;
}
.workshop-lamp{
  position:absolute;right:14%;bottom:20%;width:18px;height:105px;background:#554030
}
.workshop-lamp:before{
  content:"";position:absolute;width:64px;height:35px;left:-23px;top:-20px;background:#d5b258;
  clip-path:polygon(20% 100%,35% 0,65% 0,80% 100%)
}

.create-workspace-content{
  left:22%;
  right:3%;
  top:5%;
  bottom:8%;
  background:rgba(239,224,189,.96);
  border:4px solid #5b402e;
  box-shadow:8px 8px rgba(0,0,0,.20),inset 2px 2px #fff5d8;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:9px;
  overflow:hidden;
}
.create-head{
  display:block!important;
  padding-right:0!important;
}
.create-head>div{width:100%}
.create-head p{max-width:none!important}

/* Bodega */
.storage-view{background:linear-gradient(#877866 0 70%,#5f554a 70%)}
.storage-room{position:absolute;inset:0}
.storage-shelf{
  position:absolute;top:10%;bottom:16%;width:27%;border:8px solid #4f392c;
  background:repeating-linear-gradient(to bottom,#70533e 0 12px,transparent 12px 86px);
}
.storage-shelf-a{left:7%}.storage-shelf-b{right:7%}
.storage-shelf i{
  display:block;width:56px;height:48px;margin:28px auto;background:#9c744d;border:3px solid #5d422f;
  box-shadow:54px 0 #8b6848,-54px 0 #a07b56;
}
.storage-crate{
  position:absolute;bottom:8%;width:92px;height:65px;background:#a67b50;border:4px solid #5c422e;
  display:grid;place-items:center;font-weight:900;color:#4e392d;
}
.storage-crate.c1{left:34%}.storage-crate.c2{left:46%}.storage-crate.c3{left:58%}

.simple-workspace-panel{
  left:50%;top:9%;transform:translateX(-50%);
  width:min(520px,76%);
  background:rgba(239,224,189,.95);
  border:4px solid #5b402e;
  box-shadow:7px 7px rgba(0,0,0,.20),inset 2px 2px #fff5d8;
  padding:16px;
}
.simple-workspace-panel h3{font-size:17px;margin:0 0 8px;text-transform:uppercase}
.simple-workspace-panel p{margin:0 0 12px}
.workspace-inventory{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px
}
.inventory-card,.workspace-empty{
  border:2px solid #73543d;background:#ead6a9;padding:8px;font-size:13px
}
.inventory-card span,.inventory-card b,.inventory-card small{display:block}
.inventory-card span{font-size:22px;margin-bottom:4px}
.inventory-card small{margin-top:3px}

/* Aprender */
.learn-view{background:linear-gradient(#a88262 0 68%,#7a5d44 68%)}
.learning-room{position:absolute;inset:0}
.learning-bookcase{
  position:absolute;left:5%;top:8%;width:180px;height:68%;background:#65452f;border:7px solid #4c3427;
  display:flex;align-items:flex-end;padding:12px;gap:5px;
}
.learning-bookcase i{
  width:22px;background:#aa624f;border:2px solid #49362b;height:62%
}
.learning-bookcase i:nth-child(2){height:76%;background:#677f67}
.learning-bookcase i:nth-child(3){height:55%;background:#bd8d4f}
.learning-bookcase i:nth-child(4){height:82%;background:#6d6a8b}
.learning-bookcase i:nth-child(5){height:68%;background:#9b6b55}
.learning-board{
  position:absolute;right:7%;top:13%;width:250px;height:145px;background:#43594e;border:9px solid #5d402d;
  color:#e9e0c8;padding:18px;font-weight:900;line-height:1.6;transform:rotate(-1deg)
}
.learning-desk{
  position:absolute;left:38%;bottom:9%;width:270px;height:74px;background:#755238;border:5px solid #503725
}
.learning-chair{
  position:absolute;left:48%;bottom:2%;width:78px;height:90px;border:6px solid #5d402d;border-bottom:0
}
.learning-notes{display:flex;flex-wrap:wrap;gap:7px}
.learning-notes span{border:2px solid #73543d;background:#ead6a9;padding:7px 9px;font-weight:900}

/* Finanzas */
.finance-view{background:linear-gradient(#8a806e 0 68%,#635b50 68%)}
.finance-room{position:absolute;inset:0}
.finance-window{
  position:absolute;right:7%;top:9%;width:150px;height:120px;background:#879fa0;border:9px solid #564333
}
.finance-desk{
  position:absolute;left:16%;right:18%;bottom:8%;height:120px;background:#6d4c34;border:6px solid #493425
}
.finance-ledger{
  position:absolute;left:38%;bottom:20%;width:125px;height:86px;background:#b89b68;border:5px solid #4f3828;
  transform:rotate(-5deg);display:grid;place-items:center;text-align:center;font-weight:900
}
.finance-lamp{
  position:absolute;right:25%;bottom:27%;width:15px;height:95px;background:#44392f
}
.finance-lamp:before{content:"";position:absolute;left:-25px;top:-18px;width:64px;height:34px;background:#d6b966;clip-path:polygon(15% 100%,35% 0,65% 0,85% 100%)}
.finance-coins{position:absolute;right:34%;bottom:17%;font-size:23px}
.finance-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.finance-summary div{border:2px solid #73543d;background:#ead6a9;padding:9px}
.finance-summary span,.finance-summary b{display:block;font-size:13px}
.finance-summary b{font-size:16px;margin-top:3px}

/* En modo de taller/área secundaria, el panel derecho deja lugar al paisaje. */
@media(min-width:901px){
  .main.workspace-mode{grid-template-columns:180px 1fr!important}
  .main.workspace-mode>.rightbar{display:none!important}
}
body.workspace-active .weather-card,
body.workspace-active #floatingActions{display:none!important}

/* Móvil: el área secundaria ocupa todo el área de juego. */
@media(max-width:900px){
  body.workspace-active .mobile-header-controls{display:none!important}
  body.workspace-active .rightbar{display:none!important}
  body.workspace-active .scene-wrap{flex:1 1 0!important}

  .game-workspace{z-index:250}
  .workspace-view{overflow:hidden}
  .create-workspace-content{
    left:5px;right:5px;top:40px;bottom:6px;
    padding:9px;
    border-width:3px;
  }
  .workshop-window{right:4%;top:5%;transform:scale(.7);transform-origin:top right}
  .workshop-shelf{transform:scale(.72);transform-origin:left top}
  .workshop-pegboard{display:none}
  .workshop-table{left:4%;right:4%}
  .create-play-tabs{flex:0 0 auto}
  .create-scenes{flex:1 1 auto;min-height:0}
  .simple-workspace-panel{
    top:48px;
    width:calc(100% - 18px);
    max-height:calc(100% - 58px);
    overflow-y:auto;
    box-sizing:border-box;
  }
  .workspace-inventory{grid-template-columns:1fr 1fr}
  .storage-crate{transform:scale(.72);transform-origin:bottom center}
  .learning-bookcase{transform:scale(.65);transform-origin:left top}
  .learning-board{transform:scale(.72) rotate(-1deg);transform-origin:right top}
  .finance-summary{grid-template-columns:1fr 1fr}
}


/* === Interfaz estable en todas las áreas === */
@media(min-width:901px){
  .main.workspace-mode{
    grid-template-columns:180px 1fr 270px!important;
  }
  .main.workspace-mode>.rightbar{
    display:flex!important;
  }
}
body.workspace-active .weather-card{
  display:block!important;
}
@media(min-width:901px){
  body.workspace-active #floatingActions{
    display:flex!important;
  }
}
@media(max-width:900px){
  body.workspace-active .mobile-header-controls{
    display:flex!important;
  }
  body.workspace-active .rightbar{
    display:flex!important;
  }
  body.workspace-active #floatingActions{
    display:contents!important;
  }
}

/* Crear: el taller queda visible y el editor se abre desde un libro. */
.workshop-caption{
  position:absolute;
  left:50%;
  top:5%;
  transform:translateX(-50%);
  padding:6px 10px;
  border:3px solid #5b402e;
  background:#ecdcb5;
  box-shadow:3px 3px rgba(0,0,0,.16);
  font:700 14px "Courier New",monospace;
  text-transform:uppercase;
}

.workshop-shelf.shelf-a{
  display:flex;
  align-items:flex-end;
  gap:12px;
  height:20px;
  overflow:visible;
}
.workshop-shelf.shelf-a>span{
  margin:0 5px!important;
}

.workshop-book{
  position:relative;
  align-self:flex-end;
  width:86px;
  height:76px;
  margin:0 0 14px 6px;
  border:3px solid #4f3528;
  background:#9d4e43;
  color:#fff0d0;
  box-shadow:inset -7px 0 rgba(71,37,31,.24),3px 3px rgba(0,0,0,.18);
  font:700 13px/1.1 "Courier New",monospace;
  cursor:pointer;
  transform:rotate(-2deg);
  padding:5px;
}
.workshop-book:hover{
  transform:rotate(-2deg) translateY(-4px);
  filter:brightness(1.06);
}
.workshop-book-cover{
  display:block!important;
  margin:0 auto 4px!important;
  transform:none!important;
  font-size:23px!important;
  line-height:1!important;
}
.workshop-book b{
  display:block;
  font-size:13px;
}

.create-editor-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:350!important;
  padding:14px!important;
}
.create-editor-overlay.open{
  display:flex!important;
}
.create-editor-overlay .create-modal-card{
  width:min(820px,calc(100% - 18px))!important;
  max-height:calc(100% - 18px)!important;
}
.create-editor-overlay .create-head{
  display:block!important;
  padding-right:38px!important;
}
.create-editor-overlay .create-head p{
  max-width:none!important;
}

/* El antiguo editor incrustado ya no se utiliza. */
.create-workspace-content{
  display:none!important;
}

@media(max-width:900px){
  .workshop-caption{
    top:7px;
    font-size:13px;
    padding:4px 7px;
  }
  .workshop-book{
    width:82px;
    height:70px;
    margin-bottom:12px;
  }
  .create-editor-overlay{
    padding:6px!important;
  }
  .create-editor-overlay .create-modal-card{
    width:100%!important;
    max-height:100%!important;
  }
}


/* === Móvil: navegación disponible en todas las secciones === */
@media(max-width:900px){
  /* El botón Menú pertenece a la interfaz global, no al paisaje de Función. */
  .mobile-menu-toggle,
  body.workspace-active .mobile-menu-toggle{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:520!important;
    pointer-events:auto!important;
  }

  /* El header móvil se mantiene estable en todas las áreas. */
  body.workspace-active .mobile-header-controls{
    display:flex!important;
  }

  /* Obra / Mejoras / Elemento sorpresa son controles exclusivos de Función. */
  body.workspace-active #floatingActions{
    display:none!important;
  }

  /* El lugar y su descripción también pertenecen exclusivamente a Función. */
  body.workspace-active .weather-card{
    display:none!important;
  }

  /* El entorno secundario queda detrás del botón global Menú. */
  body.workspace-active .game-workspace{
    z-index:250!important;
  }
}

/* Escritorio: los controles propios de la plaza también desaparecen
   cuando estamos en Crear, Bodega, Aprender o Finanzas. */
@media(min-width:901px){
  body.workspace-active #floatingActions,
  body.workspace-active .weather-card{
    display:none!important;
  }
}


/* === Taller: hilo y tijera apoyados sobre la repisa === */
.workshop-shelf.shelf-a>span{
  transform:translateY(-3px)!important;
  margin:0 5px!important;
  align-self:flex-end!important;
  line-height:1!important;
}


/* === Beta feedback === */
.suggestion-modal.open{display:flex}
.suggestion-modal-card{
  width:min(520px,calc(100vw - 30px))!important;
}
.suggestion-modal-card h3{
  margin:0 38px 7px 0;
  font-size:17px;
  text-transform:uppercase;
}
.suggestion-modal-card p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.35;
}
.suggestion-modal-card textarea{
  width:100%;
  min-height:145px;
  resize:vertical;
  box-sizing:border-box;
  border:2px solid #5b402e;
  background:#f7e8c5;
  color:#35261e;
  padding:9px;
  font:13px/1.35 "Courier New",monospace;
  outline:none;
  box-shadow:inset 2px 2px rgba(91,64,46,.12);
}
.suggestion-modal-card textarea:focus{
  border-color:#8f3c40;
}
.suggestion-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:10px;
  align-items:center;
  margin-top:9px;
}
.suggestion-actions .primary{margin:0!important}
#suggestionStatus{font-size:13px}

/* Los diálogos son información principal de la obra.
   Las reacciones nunca deben taparlos, especialmente en móvil. */
@media(max-width:900px){
  .puppet-dialogue,
  .dialogue-overlay{
    z-index:360!important;
  }
  .audience-event{
    z-index:180!important;
  }
  .suggestion-modal{
    z-index:700!important;
  }
  .suggestion-actions{
    grid-template-columns:1fr;
  }
}


/* === Corrección Sugerencias: modal siempre por encima de la interfaz === */
#suggestionModal{
  position:fixed!important;
  inset:0!important;
  z-index:1200!important;
}
#suggestionModal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/* === Crédito discreto compartido con Recomiéndame === */
.site-credit{
  position:fixed;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
  z-index:110;
  margin:0;
  padding:2px 7px;
  color:#382b24;
  background:rgba(239,224,189,.70);
  border-radius:3px;
  font:400 8px/0.9 "Courier New",monospace;
  opacity:.52;
  white-space:nowrap;
  pointer-events:none;
}

/* Sugerencias: apertura independiente de la lógica principal del juego. */
#suggestionModal{
  position:fixed!important;
  inset:0!important;
  z-index:2000!important;
}
#suggestionModal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media(max-width:900px){
  .site-credit{
    bottom:2px;
    opacity:.45;
  }
}


/* === Ajuste visual final: Sugerencias === */
#suggestionModal{
  padding:16px!important;
}

#suggestionModal .suggestion-modal-card{
  width:min(470px,calc(100vw - 32px))!important;
  max-width:470px!important;
  max-height:calc(100dvh - 32px)!important;
  padding:16px!important;
  overflow:auto!important;
}

#suggestionModal .suggestion-modal-card h3{
  margin:0 42px 8px 0!important;
  font-size:16px!important;
  line-height:1.2!important;
}

#suggestionModal .suggestion-modal-card p{
  margin:0 0 10px!important;
  font-size:13px!important;
  line-height:1.35!important;
}

#suggestionModal .suggestion-modal-card textarea{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:112px!important;
  min-height:112px!important;
  max-height:180px!important;
  resize:vertical!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:9px!important;
  font:13px/1.35 "Courier New",monospace!important;
}

#suggestionModal .suggestion-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-top:10px!important;
}

#suggestionModal #suggestionStatus{
  flex:1 1 auto!important;
  min-width:0!important;
  font-size:13px!important;
}

#suggestionModal #suggestionSend{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:190px!important;
  margin:0!important;
  padding:9px 12px!important;
  font-size:13px!important;
}

/* === Crédito discreto, pero realmente visible === */
.game{
  position:relative!important;
}

.site-credit{
  position:fixed!important;
  left:50%!important;
  bottom:4px!important;
  transform:translateX(-50%)!important;
  z-index:2300!important;
  display:block!important;
  visibility:visible!important;
  opacity:.72!important;
  pointer-events:none!important;
  white-space:nowrap!important;
  padding:2px 7px!important;
  border-radius:3px!important;
  background:rgba(44,37,33,.78)!important;
  color:#f4e5c2!important;
  font:400 8px/1.2 "Courier New",monospace!important;
}

@media(max-width:900px){
  #suggestionModal{
    padding:10px!important;
  }

  #suggestionModal .suggestion-modal-card{
    width:min(440px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 20px)!important;
    padding:14px!important;
  }

  #suggestionModal .suggestion-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  #suggestionModal #suggestionSend{
    width:100%!important;
    min-width:0!important;
  }

  .site-credit{
    bottom:3px!important;
    font-size:8px!important;
    opacity:.68!important;
  }
}


/* === Sugerencias: textarea ocupa todo el espacio disponible === */
#suggestionModal .suggestion-modal-card{
  display:flex!important;
  flex-direction:column!important;
}

#suggestionModal .suggestion-modal-card textarea{
  flex:1 1 auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:100%!important;
  height:auto!important;
  min-height:180px!important;
  max-height:none!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}

#suggestionModal .suggestion-actions{
  flex:0 0 auto!important;
}

@media(max-width:900px){
  #suggestionModal .suggestion-modal-card textarea{
    min-height:160px!important;
  }
}


/* === Letreros integrados · En construcción === */
.construction-sign{
  position:absolute;
  z-index:5;
  width:190px;
  height:54px;
  display:grid;
  place-items:center;
  background:#d4ad68;
  border:4px solid #5b402e;
  box-shadow:
    inset 2px 2px rgba(255,245,216,.5),
    4px 4px rgba(0,0,0,.16);
  color:#4b3527;
  font:900 14px/1.1 "Courier New",monospace;
  letter-spacing:.4px;
  text-align:center;
  transform:rotate(-2deg);
}

.construction-sign span{
  position:relative;
  z-index:2;
}

.construction-sign:before,
.construction-sign:after{
  content:"";
  position:absolute;
  top:-18px;
  width:3px;
  height:22px;
  background:#5b402e;
}

.construction-sign:before{left:32px}
.construction-sign:after{right:32px}

.construction-sign i:before,
.construction-sign i:after{
  content:"";
  position:absolute;
  top:7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6e523e;
  box-shadow:inset 1px 1px rgba(255,255,255,.25);
}

.construction-sign i:before{left:13px}
.construction-sign i:after{right:13px}

.storage-construction-sign{
  left:50%;
  top:12%;
  transform:translateX(-50%) rotate(-2deg);
}

.learn-construction-sign{
  left:50%;
  top:12%;
  transform:translateX(-50%) rotate(2deg);
  background:#c8b780;
}

@media(max-width:900px){
  .construction-sign{
    width:160px;
    height:48px;
    font-size:13px;
  }

  .storage-construction-sign,
  .learn-construction-sign{
    top:10%;
  }
}


/* === Sugerencias: textarea ancho completo definitivo === */
#suggestionText{
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:220px!important;
  min-height:220px!important;
  box-sizing:border-box!important;
  float:none!important;
  clear:both!important;
}

@media(max-width:900px){
  #suggestionText{
    height:200px!important;
    min-height:200px!important;
  }
}


/* === Sugerencias: 3 filas, ancho completo === */
#suggestionText{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  resize:vertical!important;
}


/* === Reacciones del público: una sola fila, desde la derecha hacia la izquierda === */
.audience-event{
  left:auto!important;
  right:8px!important;
  width:auto!important;
  max-width:calc(100% - 16px)!important;
  height:auto!important;
  display:flex!important;
  flex-direction:row-reverse!important;
  justify-content:flex-start!important;
  align-items:flex-end!important;
  gap:5px!important;
  overflow:visible!important;
}

.audience-event-item{
  flex:0 1 220px!important;
  width:220px!important;
  max-width:220px!important;
  min-width:0!important;
}

/* En móvil siguen siendo máximo 2, pero se reparten el ancho disponible
   para no invadir la zona central de los diálogos. */
@media(max-width:900px){
  .audience-event{
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:none!important;
    flex-wrap:nowrap!important;
  }

  .audience-event-item{
    flex:0 1 46%!important;
    width:auto!important;
    max-width:46%!important;
    font-size:12px!important;
    line-height:1.22!important;
  }
}


/* === MÓVIL: diálogo prioritario + reacciones compactas horizontales === */
@media(max-width:900px){
  /* Subimos los diálogos para separar claramente ambas capas. */
  .scene-wrap>#dialogue1,
  .scene-wrap>#dialogue2,
  .scene-wrap>.dialogue-overlay,
  .puppet-dialogue{
    top:258px!important;
    z-index:520!important;
  }

  /* Las reacciones viven abajo a la derecha y crecen hacia la izquierda. */
  .scene-wrap>.audience-event,
  .audience-event{
    position:absolute!important;
    top:auto!important;
    bottom:54px!important;
    left:auto!important;
    right:7px!important;
    width:auto!important;
    max-width:calc(100% - 14px)!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;

    display:flex!important;
    flex-direction:row-reverse!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:flex-end!important;
    gap:4px!important;

    z-index:150!important;
    pointer-events:none!important;
  }

  /* Dos reacciones máximo; cada una mucho más pequeña. */
  .audience-event-item{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:142px!important;
    padding:3px 5px!important;
    font-size:10px!important;
    line-height:1.12!important;
    font-weight:800!important;
    border-width:1px!important;
    box-shadow:1px 1px rgba(0,0,0,.12)!important;

    /* Entrada visual desde la derecha. */
    transform:translateX(12px)!important;
  }

  .audience-event-item.show{
    opacity:1!important;
    transform:translateX(0)!important;
  }

  .audience-event-item.leaving{
    opacity:0!important;
    transform:translateX(-8px)!important;
  }

  .audience-event-emoji{
    font-size:12px!important;
    line-height:1!important;
  }
}


/* === MÓVIL: diálogos 50px más arriba === */
@media(max-width:900px){
  .scene-wrap>#dialogue1,
  .scene-wrap>#dialogue2,
  .scene-wrap>.dialogue-overlay,
  .puppet-dialogue{
    top:208px!important;
  }
}


/* === MÓVIL: bandeja persistente de reacciones === */
@media(max-width:900px){
  /* 40px más abajo que la posición móvil anterior. */
  .scene-wrap>#dialogue1,
  .scene-wrap>#dialogue2,
  .scene-wrap>.dialogue-overlay,
  .puppet-dialogue{
    top:248px!important;
    z-index:520!important;
  }

  .audience-notification-dock{
    position:absolute!important;
    left:7px!important;
    right:7px!important;
    bottom:54px!important;
    z-index:180!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    gap:5px!important;
    height:42px!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }

  .audience-notification-dock .audience-event{
    position:static!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    height:42px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:flex-end!important;
    gap:4px!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  .audience-notification-dock .audience-event-item{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:150px!important;
    min-width:0!important;
    padding:4px 6px!important;
    font-size:13px!important;
    line-height:1.12!important;
    border-width:1px!important;
    white-space:normal!important;
    opacity:0!important;
    transform:translateX(24px)!important;
    transition:opacity .22s ease,transform .36s cubic-bezier(.22,.78,.22,1)!important;
  }

  .audience-notification-dock .audience-event-item.show{
    opacity:1!important;
    transform:translateX(0)!important;
  }

  .audience-notification-toggle{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    padding:0!important;
    margin:0 0 2px 0!important;
    border:2px solid #5b402e!important;
    background:#ecdcb5!important;
    color:#35261e!important;
    box-shadow:inset 1px 1px #fff7df,2px 2px 0 #6e523e!important;
    display:grid!important;
    place-items:center!important;
    font-size:18px!important;
    line-height:1!important;
    cursor:pointer!important;
    pointer-events:auto!important;
  }

  .audience-notification-toggle:active{
    transform:translateY(1px)!important;
    box-shadow:inset 1px 1px #fff7df,1px 1px 0 #6e523e!important;
  }

  .audience-notification-dock.notifications-hidden .audience-event{
    visibility:hidden!important;
  }
}


/* === MÓVIL: notificaciones 20px más abajo, sin botón === */
@media(max-width:900px){
  .audience-notification-dock{
    bottom:34px!important;
  }

  .audience-notification-dock .audience-event{
    width:100%!important;
  }
}


/* === MÓVIL: ajuste fino de diálogos y notificaciones === */
@media(max-width:900px){
  .scene-wrap>#dialogue1,
  .scene-wrap>#dialogue2,
  .scene-wrap>.dialogue-overlay,
  .puppet-dialogue{
    top:288px!important;
  }

  .audience-notification-dock{
    bottom:14px!important;
  }
}


/* === MÓVIL: notificaciones 20px más abajo + sin recorte superior === */
@media(max-width:900px){
  .audience-notification-dock{
    bottom:-6px!important;
    height:auto!important;
    min-height:54px!important;
    overflow:visible!important;
    align-items:flex-end!important;
  }

  .audience-notification-dock .audience-event{
    height:auto!important;
    min-height:54px!important;
    overflow:visible!important;
    align-items:flex-end!important;
  }

  .audience-notification-dock .audience-event-item{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
}


/* === MÓVIL: botón Menú detrás del sidebar abierto y de los modales === */
@media(max-width:900px){
  .mobile-menu-toggle{
    z-index:120!important;
  }

  .sidebar.mobile-open{
    z-index:420!important;
  }

  .mobile-menu-backdrop.open{
    z-index:410!important;
  }

  .audience-modal,
  .audience-modal.open,
  #suggestionModal{
    z-index:1200!important;
  }
}