/* Layers on top of the bench stylesheet: same palette, a different room. */
body.defend{display:grid; grid-template-rows:auto 1fr auto; height:100%; overflow:hidden}
body.defend main{display:grid; grid-template-columns:minmax(0,1fr) 318px; min-height:0}
.live-mode [data-replay-only], body:not(.live-mode) [data-live-only]{display:none!important}
.live-mode .scene-title{color:var(--hot)}
.live-mode .pane:before,.live-mode .pane:after{content:"";position:absolute;left:0;right:0;height:18px;background:#101516;z-index:1;pointer-events:none}
.live-mode .pane:before{top:0}.live-mode .pane:after{bottom:0}
.live-mode .pane figcaption{top:30px;z-index:2}
.live-mode .card .info{display:none}
.survival-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;margin-bottom:12px}
.survival-stats div{display:flex;flex-direction:column;gap:4px}
.survival-stats b{font:500 20px var(--fm);color:var(--ink)}
.survival-stats span{font-size:10px;color:var(--ink3)}
.stage>.survival-stats{grid-template-columns:repeat(6,minmax(0,1fr));padding:12px 18px;margin:0;background:var(--panel);border-top:1px solid var(--line)}
.profile-field{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:12px;color:var(--ink2)}
.profile-field select,.profile-field input{min-width:0;max-width:100%;padding:8px;background:var(--well);border:1px solid var(--line2);color:var(--ink);border-radius:5px}
.profile-details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.profile-details summary,#gameControls summary{font-size:12px;color:var(--ink2);cursor:pointer;line-height:1.6}
.profile-buttons{display:flex;flex-wrap:wrap;gap:8px}.profile-buttons .profile-field{width:100%}
.points-balance{display:block;font:500 25px var(--fm);color:var(--hot);margin:18px 0}
.progress-card .cap{line-height:1.65}.progress-card button{min-height:36px}
.profile-details a{font-size:11px;color:var(--ach)}
#btnBet{width:100%;background:var(--ach);color:#1a1206;font-weight:600}

/* ---------- stage ---------- */
.stage{position:relative; background:var(--well); min-width:0; display:flex; flex-direction:column}
.arenas{flex:1; min-height:0; display:grid; grid-template-columns:1fr; gap:0}
.arenas.split{grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
.pane{position:relative; margin:0; min-width:0; min-height:0; background:var(--well);
  display:flex; flex-direction:column}
.pane[hidden]{display:none}   /* display:flex above would otherwise defeat the attribute */
.pane canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pane canvas.v3d{touch-action:none;cursor:grab}
/* one canvas can hold one kind of context, so the flat view and the 3D view are
   separate canvases and only one of them is in the layout at a time */
.pane canvas[hidden]{display:none}
.pane figcaption{position:absolute; top:28px; left:22px; display:flex;
  align-items:baseline; gap:10px; pointer-events:none; font-size:12px;
  padding:7px 10px;border-radius:5px;background:#101c22d9;backdrop-filter:blur(8px)}
.pane figcaption b{font-weight:500; color:var(--ink2); letter-spacing:.02em}
.pane figcaption span{font-family:var(--fd); font-size:15px}
.pane figcaption span.hit{color:var(--danger)}
.pane figcaption span.safe{color:#59C78C}
/* the second pane is the reference, so it reads as quieter than the one you chose */
.arenas.split #paneB{opacity:.82}
.arenas.split .pane figcaption{top:28px}
.stage .scene-toolbar{position:relative;inset:auto;flex:none;z-index:3;background:var(--panel);padding:10px 18px;flex-wrap:wrap;pointer-events:auto}
.stage .scene-title{font-size:14px}
.stage .view-status{z-index:4}
.experiment-controls{display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink2);z-index:3}
.experiment-controls label{display:flex;align-items:center;gap:8px}
.experiment-controls select{max-width:180px;background:var(--well);color:var(--ink);border:1px solid var(--line2);border-radius:5px;padding:7px}
.experiment-controls .replay-note{margin-left:auto;font-size:11px;color:var(--ink3)}
#playbackTime{font-size:11px;min-width:95px}
.playback-note{flex-basis:100%;margin:0;font-size:11px;color:var(--ink3)}
.auto-next{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:12px}
.auto-next input{accent-color:var(--ach)}
.transport .slider input{width:96px;min-width:55px}
.transport .slider .mono{min-width:35px}
input[type=range]:focus-visible{outline:2px solid var(--ach);outline-offset:5px}
body.defend .rail{padding-top:0}
body.defend main{grid-template-columns:minmax(0,1fr) clamp(340px,32vw,460px)}
.brain-card{flex:none}
.brain-card h2{color:var(--ink2);margin-bottom:0}
.brain-card .brain-count{font-size:11px;color:var(--ink2);line-height:1.5}
.brain-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--ink2)}
.brain-tools label{display:flex;align-items:center;gap:6px}
.brain-tools select{max-width:145px;background:var(--well);color:var(--ink);border:1px solid var(--line2);padding:7px;border-radius:5px}
.brain-tools button{font-size:11px;padding:6px 9px}
.brain-viewport{position:relative;height:clamp(240px,32vh,340px);background:var(--well);border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.brain-viewport #brain{position:absolute;inset:0;height:100%;width:100%;min-height:0;touch-action:none}
#brainOverlay,#brainLabels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#brainLabels span{position:absolute;top:0;left:0;font:10px var(--fm);color:var(--hot);background:#101a1edb;padding:3px 5px;border-radius:4px;translate:-50% -50%;white-space:nowrap}
.brain-card .brain-legend{font-size:10px;color:var(--ink2)}
.brain-nt{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10px;color:var(--ink2)}
.brain-nt span{display:flex;align-items:center;gap:5px}
.brain-nt i{height:6px;width:6px;border-radius:50%;display:inline-block}
.brain-card .brain-detail{font-size:12px;color:var(--hot);min-height:36px}
.brain-method{font-size:11px;color:var(--ink2);line-height:1.6}
.brain-method summary{cursor:pointer;color:var(--ach)}
.brain-method p{font-size:11px;margin:8px 0}
.brain-card.expanded{position:fixed;inset:12px;z-index:40;background:var(--panel);overflow:auto;box-shadow:0 0 0 30px #070c0fcc}
.brain-card.expanded .brain-viewport{height:calc(100svh - 315px);min-height:250px}
.boot-card{padding:30px 0}

.stage-hud{position:absolute; left:0; right:0; bottom:0; display:flex; gap:20px;
  padding:9px 16px; font-size:11px; color:var(--ink3); pointer-events:none;
  background:linear-gradient(to top,rgba(7,12,15,.92),transparent)}
.stage-hud span:last-child{margin-left:auto}
.live-mode .stage-hud{position:static;flex:none;z-index:2;color:var(--ink2);background:#101c22d9}
body.shuffled .stage-hud span:last-child{color:var(--danger)}

/* ---------- rail ---------- */
.rail{background:var(--panel); border-left:1px solid var(--line); overflow-y:auto;
  display:flex; flex-direction:column}
.card{padding:14px 16px; border-bottom:1px solid var(--line)}
.card.grow{flex:1; display:flex; flex-direction:column; min-height:240px}
.card h2{font-family:var(--fm); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:6px; margin:0 0 11px}
.card h2 .dim{margin-left:auto; letter-spacing:0; text-transform:none}
.cap{font-size:11.5px; color:var(--ink3); margin:9px 0 0; line-height:1.45}
.cap b{color:var(--ink2); font-weight:500}

#arcChart{width:100%; height:96px; display:block; cursor:ew-resize; touch-action:none}

/* what she gave each option, and which one she took */
.probs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.probs li{display:grid; grid-template-columns:92px 1fr 34px; align-items:center; gap:9px;
  font-size:11.5px; color:var(--ink3); transition:color .15s}
/* the longest label is Spanish "inclinarse a la izquierda"; let it shrink rather
   than wrap, so the four rows stay the same height in every language */
.probs .pl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.probs li.chosen{color:var(--ink)}
.pb{height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.pb i{display:block; height:100%; width:0; border-radius:4px; background:var(--line2);
  transition:width .22s cubic-bezier(.2,.7,.3,1), background .22s}
.probs li.chosen .pb i{background:linear-gradient(90deg,var(--ach),var(--hot))}
.pv{text-align:right; font-size:10.5px}

.gauge{height:9px; background:var(--line); border-radius:5px; overflow:hidden}
.gauge i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--ach),#FFF1D8); transition:width .22s}
.pair{display:grid; grid-template-columns:auto 1fr; gap:7px 10px; align-items:center; margin-top:12px}
.pair label{font-size:11.5px; color:var(--ink2)}
.meter{height:5px; background:var(--line); border-radius:3px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--oct); transition:width .22s}
.meter i.warm{background:linear-gradient(90deg,#8A5F1E,var(--ach))}
#brain{width:100%; flex:1; min-height:200px; display:block; border-radius:var(--rs); cursor:grab}
#brain:active{cursor:grabbing}

/* ---------- transport ---------- */
.transport{display:flex; align-items:center; gap:14px; padding:10px 18px;
  background:var(--panel); border-top:1px solid var(--line); flex-wrap:wrap}
.transport .primary{padding:7px 18px; border-radius:var(--rs); background:var(--ach);
  color:#1A1206; font-weight:600; font-size:12.5px; transition:.15s}
.transport .primary:hover{background:var(--hot)}
.transport .ghost[aria-pressed="true"]{border-color:var(--ach); color:var(--ink); background:var(--raise)}
.transport .ghost[disabled]{opacity:.5; cursor:default}
.scrub{flex:1; min-width:190px; display:flex; align-items:center; gap:11px; font-size:12px; color:var(--ink3)}
.scrub input{flex:1; min-width:0}
.slider{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink3)}
input[type=range]{-webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:var(--line2); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:13px; height:13px;
  border-radius:50%; background:var(--ach); cursor:pointer; border:0}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%;
  background:var(--ach); cursor:pointer; border:0}

/* ---------- boot ---------- */
.top{display:flex; align-items:center; gap:20px; padding:11px 18px;
  background:var(--panel); border-bottom:1px solid var(--line)}
.top a.ghost{text-decoration:none; display:inline-block}
.boot-card{text-align:center; width:min(430px,90vw)}
.boot-card h1{font-family:var(--fd); font-size:34px; letter-spacing:-.02em; margin:10px 0 6px}
.sub{margin:0 0 26px; font-size:13px; color:var(--ink3)}
.fine{font-size:11px; color:var(--ink3); margin:6px 0 0}
.fine.err{color:var(--danger)}

@media (max-width:900px){
  .stage>.survival-stats{grid-template-columns:repeat(3,minmax(0,1fr));padding:9px 12px;gap:8px}
  .survival-stats b{font-size:16px}
  body.defend{display:flex;flex-direction:column;overflow:auto;height:auto;min-height:100%}
  body.defend main{display:contents}
  body.defend .top{order:0}
  body.defend .stage{order:1;flex:none;height:auto}
  body.defend .arenas{flex:none;height:max(340px,50svh)}
  body.defend .stage[data-scene-size="large"] .arenas{height:max(440px,75svh)}
  body.defend .arenas.split{height:max(680px,100svh)}
  body.defend .stage[data-scene-size="large"] .arenas.split{height:max(880px,150svh)}
  body.defend .transport{order:2}
  body.defend .rail{order:3}
  .rail{border-left:0; border-top:1px solid var(--line)}
  .top-stats{display:none}
  .live-mode .top-stats{display:flex;flex-wrap:wrap;order:5;flex-basis:100%;justify-content:space-between;gap:8px;font-size:10px}
  .arenas.split{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
  .transport{gap:10px}
  .scrub{order:5; flex-basis:100%}
  .top{flex-wrap:wrap;gap:10px}
  .top .lang{margin-left:auto}
  .stage-hud{flex-wrap:wrap;gap:4px 12px;font-size:10px}
  .arenas.split #paneB figcaption{top:12px}
  .transport button{min-height:40px}
  .experiment-controls{padding:8px 12px;gap:8px}
  .experiment-controls .replay-note{flex-basis:100%;margin:0;font-size:10px}
  .transport .slider{flex:1 1 100%;justify-content:space-between;min-height:34px}
  .transport .slider input{flex:1;max-width:180px}
  .auto-next{min-height:40px}
}

.scene-size{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2)}
.scene-size select{padding:9px;background:var(--well);color:var(--ink);border:1px solid var(--line2);border-radius:5px;min-height:44px}
.stage .scene-toolbar button{margin-left:0;min-height:44px}
.stage .scene-toolbar #btnCamera{margin-left:auto}
.scene-exit{display:none}
.scene-dialog{padding:0;border:0;margin:0;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;background:var(--well);color:var(--ink);overflow:hidden}
.scene-dialog[open]{display:flex;flex-direction:column}
.scene-dialog::backdrop{background:var(--well)}
body.defend.scene-open{overflow:hidden}
body.defend .scene-dialog .stage{order:0;flex:1;min-height:0;height:auto}
body.defend .scene-dialog .arenas{height:auto;min-height:0;flex:1}
.scene-dialog .scene-toolbar{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top));gap:8px}
.scene-dialog .scene-title,.scene-dialog .scene-hint,.scene-dialog .scene-size,.scene-dialog #btnSceneFull,.scene-dialog .experiment-controls,.scene-dialog .stage-hud,.scene-dialog .survival-stats{display:none!important}
.scene-dialog .scene-exit{display:inline-flex;align-items:center}
.scene-dialog .scene-toolbar #btnCamera{margin-left:0;margin-right:auto}
body.defend .scene-dialog .transport{order:1;flex:none;justify-content:center;padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:10px}
.scene-dialog .transport:not(.shot-controls)>:not(#btnPlay):not(#btnRestart){display:none!important}
.scene-dialog .transport button{min-height:44px}
.scene-dialog .pane:before,.scene-dialog .pane:after{display:none}
.scene-dialog .pane figcaption{top:12px;left:12px}
@media(min-width:901px){.scene-size{display:none}}
@media(max-width:900px){
  .stage .scene-title{flex-basis:100%}
  .stage .scene-toolbar{padding:10px 12px;gap:8px}
  .stage .scene-toolbar #btnCamera{margin-left:0}
  .stage .scene-toolbar .scene-size{margin-left:auto}
  .stage .scene-toolbar .scene-size>span{display:none}
  .stage .arenas{order:1}
  .stage .experiment-controls{order:2}
  .stage .stage-hud{order:3}
  .stage>.survival-stats{order:4}
  .live-mode .pane:before,.live-mode .pane:after{display:none}
  .live-mode .pane figcaption{top:12px;left:12px}
}
@media(orientation:landscape){.scene-dialog .arenas.split{grid-template-columns:1fr 1fr;grid-template-rows:1fr}}
@media(max-width:900px) and (orientation:landscape){
  body.defend .arenas{height:65svh}
  body.defend .stage[data-scene-size="large"] .arenas{height:80svh}
  body.defend .arenas.split,body.defend .stage[data-scene-size="large"] .arenas.split{height:140svh}
  body.defend .scene-dialog .arenas{height:auto}
}