/* §20 — the board, drawn. same trick as the vendor terminal: built in code so it can change. */
#sceneArt .eb{position:relative;aspect-ratio:3/2;background:linear-gradient(180deg,#0a2b40,#062233);border:1px solid #073e5f;
  padding:3.2% 4%;font-family:var(--mono);color:#b9dcf4;overflow:hidden;display:grid;grid-template-columns:34% 1fr;gap:0 4%;
  grid-template-rows:auto 1fr auto}
#sceneArt .eb::before{content:"";position:absolute;inset:1.4%;border:1px solid #0870B5;pointer-events:none}
#sceneArt .eb .bolt{position:absolute;width:7px;height:7px;border-radius:50%;background:#0b3a57;border:1px solid #0870B5}
#sceneArt .eb-head{grid-column:1/3;border-bottom:1px solid #0870B5;padding-bottom:1.6%;margin-bottom:2.4%;display:flex;justify-content:space-between;align-items:flex-end}
#sceneArt .eb-head small{font-size:9px;letter-spacing:.2em;color:#5f96bd;display:block}
#sceneArt .eb-head b{font-size:clamp(13px,2.2vw,22px);letter-spacing:.16em;color:var(--yellow);font-weight:500}
#sceneArt .eb-head span{font-size:9.5px;letter-spacing:.14em;color:#5f96bd;text-align:right}
#sceneArt .eb-photo{position:relative;align-self:start;border:1px solid #0870B5;background:#00243a;padding:5%;transform:rotate(-1.2deg);box-shadow:0 6px 14px rgba(0,0,0,.45)}
#sceneArt .eb-photo img,#sceneArt .eb-photo svg{width:100%;height:auto;display:block;filter:saturate(.85)}
#sceneArt .eb-photo::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-5px;border-radius:50%;background:var(--yellow);box-shadow:0 1px 3px #000}
#sceneArt .eb-name{font-family:"Segoe Script","Bradley Hand","Comic Sans MS",cursive;color:#a9cbff;font-size:clamp(15px,2.6vw,27px);
  transform:rotate(-2deg);margin:5% 0 0 2%;text-shadow:0 0 1px #6f9fe0;position:relative;display:inline-block}
#sceneArt .eb-name.struck::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:2px;background:#a9cbff;transform:rotate(-3deg);box-shadow:0 5px 0 #a9cbff,0 -4px 0 #a9cbff}
#sceneArt .eb-over{font-family:"Segoe Script","Bradley Hand",cursive;color:#ff8a6b;font-size:clamp(12px,1.9vw,19px);transform:rotate(4deg);display:block;margin:-2% 0 0 12%}
#sceneArt .eb-for{font-size:9.5px;letter-spacing:.12em;color:#5f96bd;margin-top:6%}
#sceneArt .eb-for i{font-style:normal;color:#b9dcf4}
#sceneArt .eb-side h4{font-size:9.5px;letter-spacing:.18em;color:var(--blue);font-weight:500;border-bottom:1px solid #073e5f;padding-bottom:3px;margin:0 0 5px}
#sceneArt .eb-row{display:grid;grid-template-columns:1.1em 5.2em 1fr 2.2em;gap:6px;align-items:center;font-size:11px;padding:2.5px 0}
#sceneArt .eb-row .bar{height:6px;background:#00243a;border:1px solid #073e5f;margin:0}
#sceneArt .eb-row .bar i{display:block;height:100%;background:var(--blue)}
#sceneArt .eb-row.win{color:var(--yellow)}#sceneArt .eb-row.win .bar i{background:var(--yellow)}
#sceneArt .eb-row.you{color:#7dff9b}
#sceneArt .eb-tags{font-size:8.5px;letter-spacing:.08em;color:#5f96bd;grid-column:2/5;margin:-2px 0 2px}
#sceneArt .eb-hist{font-size:10px;color:#5f96bd;margin-top:8px;line-height:1.6}
#sceneArt .eb-foot{grid-column:1/3;border-top:1px solid #073e5f;margin-top:2%;padding-top:1.4%;font-size:8.5px;letter-spacing:.14em;color:#3c5a70}
#sceneArt .eb{aspect-ratio:auto;min-height:0;max-height:70vh;overflow:auto}
#sceneArt #ebClose{position:absolute;right:2.6%;top:2.6%;z-index:4;font:10px var(--mono);letter-spacing:.14em;
  background:#11203a;border:1px solid var(--yellow);color:var(--yellow);padding:5px 12px;cursor:pointer}
#sceneArt #ebClose:hover{background:var(--yellow);color:#04140b}
#sceneArt .eb svg.scrib{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#board-wrap{cursor:pointer}
/* him in the corner of the room, small, getting on with it. not a cutscene. */
#scene{position:relative}
#scene .wkclip{position:absolute;right:3.5%;bottom:5%;width:15%;max-width:118px;height:auto;
  z-index:400;pointer-events:auto;cursor:pointer;mix-blend-mode:screen;
  animation:wkIn .45s ease-out}
#scene .wkcap{position:absolute;right:3.5%;bottom:2%;z-index:401;width:15%;max-width:118px;
  text-align:center;pointer-events:none;
  font:8.5px var(--mono);letter-spacing:.2em;color:var(--yellow);text-shadow:0 1px 5px #000}
@keyframes wkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#scene .wkclip.wide,#scene .wkcap.wide{width:24%;max-width:190px}
@media(max-width:620px){#scene .wkclip,#scene .wkcap{width:22%}#scene .wkclip.wide,#scene .wkcap.wide{width:34%}}
@media(prefers-reduced-motion:reduce){#scene .wkclip{animation:none}}