/* Escape the Kooky Manor of Fright — Developed by Slyness */
/* Responsive layer: keeps the HUD glued to the painted scene and every text readable, from phones to ultra-wide screens. */

/* Geometry of the 16:9 scene, shared by everything that has to line up with it. */
.adventure{--bar-h:calc(7.6*var(--u));--room:calc(100vh - var(--frame) - var(--bar-h));--world-w:min(100cqw,calc(var(--room)*16/9*1.18));--world-h:calc(var(--world-w)*9/16);--world-x:calc((100cqw - var(--world-w))/2);--world-y:calc(var(--room)/2 - var(--world-h)/2)}
@supports (height:1dvh){.adventure{--room:calc(100dvh - var(--frame) - var(--bar-h))}}
.adventure .world{--room:inherit;width:var(--world-w)}
/* The scene fills the width, trimming at most a thin strip top and bottom; ultra-wide leftovers get a blurred echo of the room. */
.adventure:before{content:'';position:absolute;inset:-6%;background:var(--scene-art) center/cover no-repeat;filter:blur(calc(2.5*var(--u))) brightness(.45);pointer-events:none}

/* Title and HUD sit on the scene itself instead of drifting into the empty side bands of wide screens. */
.adventure .scene-header{top:max(var(--frame),var(--world-y));left:max(var(--frame),var(--world-x));right:max(var(--frame),var(--world-x));gap:calc(1*var(--u))}
.adventure .scene-header>div:first-child{min-width:0}
.adventure .scene-header h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Messages stay inside the scene. */
.adventure .bubble{bottom:calc(100% - var(--world-y) - var(--world-h)*.94);max-width:min(64%,calc(var(--world-w)*.86))}
.adventure .selection{left:max(24%,calc(var(--world-x) + var(--world-w)*.2));right:max(24%,calc(var(--world-x) + var(--world-w)*.2));bottom:calc(var(--bar-h) + var(--frame) + .6*var(--u))}
.adventure .inventory-bar{height:var(--bar-h)}

/* Never let text shrink below a readable size on small screens. */
.scene-chapter{font-size:max(calc(.65*var(--u)),9px)}
.scene-header h2{font-size:max(calc(2.2*var(--u)),17px)}
.hud-actions{font-size:max(calc(.85*var(--u)),11px)}
.hud-actions [role=status]{font-size:max(calc(.65*var(--u)),9px)}
.hud-button{font-size:max(calc(.85*var(--u)),12px);padding:max(calc(.65*var(--u)),5px) max(calc(.9*var(--u)),9px)}
.item-tooltip,.hotspot-label{font-size:max(calc(.8*var(--u)),12px);padding:max(calc(.45*var(--u)),3px) max(calc(.65*var(--u)),6px)}
.bubble{font-size:max(calc(1.45*var(--u)),14px);padding:max(calc(1.2*var(--u)),9px) max(calc(1.7*var(--u)),12px)}
.selection{font-size:max(calc(.85*var(--u)),12px)}
.inspection-text{font-size:max(calc(1.5*var(--u)),14px)}
.nav-arrow{width:max(calc(4.2*var(--u)),34px);height:max(calc(4.2*var(--u)),34px);font-size:max(calc(3*var(--u)),24px)}

/* The closed bookcase is flat: no 3D layer that could paint over the flask and shears on the table. */
.secret-door:not(.open):not(.opening){perspective:none}
.secret-door:not(.open):not(.opening) .door-panel{backface-visibility:visible}
.secret-door{isolation:isolate}

/* Narrow screens: keep only the slots in the inventory bar. */
@media (max-width:900px),(max-height:500px){
  .inventory-label,.inventory-hint{display:none}
}

/* Portrait phones and tablets: a taller inventory with touch-sized slots, the title above the scene. */
@media (orientation:portrait){
  .adventure{--bar-h:calc(11*var(--u))}
  .adventure .inventory-bar{gap:calc(2*var(--u))}
  .adventure .inventory-slot{width:calc(8.4*var(--u));height:calc(8.4*var(--u))}
  .adventure .slot-number{font-size:max(calc(.6*var(--u)),8px)}
  .adventure .weg-inventory{display:none}
  .adventure .scene-header{top:auto;bottom:calc(100% - var(--world-y));padding-bottom:calc(1.5*var(--u))}
}