/* ===== v18: mobile layout + fullscreen ===== */
html,body{height:100%;height:100dvh}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== v20: fixed camera, floor lifted above the arrows, bigger layout ===== */
body.touch{
  --tb:clamp(80px,26vh,124px);           /* invisible touch area */
  --tj:var(--tb);
  --ti:clamp(38px,12.5vh,60px);          /* visible arrow */
  --tgap:max(24px,calc(18.5vw - var(--tb)));   /* v24: right arrow a bit more to the left */
  --tlift:clamp(10px,4.5vh,22px);          /* arrows lifted a bit */
  --tpl:max(10px,calc(13vw - var(--tb) / 2));      /* left arrow a bit more to the right */
  --tpr:max(10px,calc(12.5vw - var(--tb) / 2));    /* jump a bit more to the left */
  --tbot:0px;                            /* set by mobile.js */
}
body.touch.ts-m{--tb:clamp(70px,23vh,108px);--ti:clamp(32px,10.5vh,50px)}
body.touch.ts-xl{--tb:clamp(88px,29vh,138px);--ti:clamp(44px,14.5vh,70px)}
body.touch #touch{
  padding:0 max(var(--tpr),calc(env(safe-area-inset-right) + 2px))
          0
          max(var(--tpl),calc(env(safe-area-inset-left) + 2px));
  align-items:flex-end;
  bottom:var(--tbot);
}
body.touch.tswap #touch{
  padding-left:max(var(--tpr),calc(env(safe-area-inset-left) + 2px));
  padding-right:max(var(--tpl),calc(env(safe-area-inset-right) + 2px));
}
body.touch .t-left,body.touch #ui.tiny .t-left{gap:var(--tgap)}
body.touch .t-btn,body.touch #ui.tiny .t-btn,
body.touch .t-btn.big,body.touch #ui.tiny .t-btn.big{
  width:var(--tb);height:var(--tb);margin:0;
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:1;color:#fff;border-radius:18px;transition:none;
}
body.touch .t-btn .ring{display:none}
body.touch .t-btn svg.tri{
  width:var(--ti);height:var(--ti);display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8));
  opacity:.92;
}
/* instant feedback on press (no transitions) */
body.touch .t-btn.active{transform:none;background:rgba(255,255,255,.08)}
body.touch .t-btn.active svg.tri{transform:scale(.86);opacity:1;color:#5eead4}
body.touch .t-btn.thru,body.touch .t-btn.thru.active{opacity:1;background:transparent}
body.touch .t-btn.thru svg.tri{opacity:.92}
body.touch .t-btn::after{inset:-10px;border-radius:24px}
body.touch .t-btn.big::after{inset:-14px}

/* performance: no live blur over the running game on phones */
body.touch #ui *,body.touch #touch *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---- phone view ---- */
body.pv #stage{box-shadow:none;border-radius:0}

/* HUD in the screen corners, bigger */
body.pv #ui #hud,body.pv #ui.compact #hud{
  padding:max(8px,env(safe-area-inset-top)) max(10px,calc(env(safe-area-inset-right) + 6px)) 0 max(10px,calc(env(safe-area-inset-left) + 6px));
  align-items:flex-start;
}
/* mirror levels: HUD stays on top on phones (arrows own the bottom) */
body.pv #ui #hud.bottom{top:0;bottom:auto}
.hud-lgroup{display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;min-width:0}
.hud-lbtns{display:flex;gap:10px;pointer-events:auto}
body.pv #ui .icon-btn,body.pv #ui.compact .icon-btn,body.pv #ui.tiny .icon-btn{
  width:clamp(42px,12.5vh,54px);height:clamp(42px,12.5vh,54px);border-radius:10px;
  background:rgba(8,6,16,.35);border:2px solid rgba(255,255,255,.78);color:#fff;box-shadow:none;
}
body.pv #ui .icon-btn svg{width:48%;height:48%}
body.pv #ui .hud-right,body.pv #ui.compact .hud-right,body.pv #ui.tiny .hud-right{gap:10px}
body.pv #ui .deaths,body.pv #ui.compact .deaths{
  background:rgba(8,6,16,.35);border:2px solid rgba(255,255,255,.4);border-radius:10px;
  min-height:clamp(42px,12.5vh,54px);padding:6px 12px;font-size:clamp(15px,4.6vh,20px);
}
body.pv #ui .deaths svg{width:clamp(18px,5.4vh,24px);height:clamp(18px,5.4vh,24px)}
body.pv #ui .hud-left,body.pv #ui.compact .hud-left{background:none;border:0;padding:0 2px;gap:10px}
body.pv #ui #lvlNum,body.pv #ui.compact #lvlNum{font-size:clamp(19px,6.2vh,30px);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.85)}
body.pv #ui #lvlName,body.pv #ui.compact #lvlName{
  font-size:clamp(19px,6.2vh,30px);font-weight:700;color:#fff;max-width:44vw;
  text-shadow:0 2px 4px rgba(0,0,0,.85);
}
body.pv #ui #banner.dock,body.pv #ui.compact #banner.dock{
  top:calc(max(8px,env(safe-area-inset-top)) + clamp(42px,12.5vh,54px) + 8px + clamp(26px,8.4vh,40px));
  left:max(12px,calc(env(safe-area-inset-left) + 8px));
  background:none;border:0;padding:0 2px;max-width:46vw;opacity:.85;box-shadow:none;
}
body.pv #ui #banner.dock .b-num,body.pv #ui #banner.dock .b-name,body.pv #ui.compact #banner.dock .b-num,body.pv #ui.compact #banner.dock .b-name{display:none}
body.pv #ui #banner.dock .b-sub,body.pv #ui.compact #banner.dock .b-sub{
  display:block;font-size:clamp(13px,4vh,17px);color:#eee;text-shadow:0 1px 3px rgba(0,0,0,.9);
}
body.pv #ui #banner.dock::after,body.pv #ui.compact #banner.dock::after{display:none}
body.pv #ui #hintBox,body.pv #ui.compact #hintBox{bottom:calc(var(--tbot) + var(--tb) + 4px);width:min(680px,64vw);font-size:clamp(14px,4.2vh,18px)}
/* bigger menus / dialogs on phones */
body.pv #ui.compact .btn{font-size:17px}
body.pv #ui.compact .btn.big{font-size:24px}
body.pv #fsFab{top:max(10px,env(safe-area-inset-top))}

/* --- Fullscreen buttons --- */
#btnFull .ex{display:none}
body.is-fs #btnFull .en{display:none}
body.is-fs #btnFull .ex{display:block}
body.no-fs #btnFull,body.no-fs #fsFab{display:none!important}
#fsFab{
  position:fixed;z-index:70;
  top:max(10px,env(safe-area-inset-top));
  left:max(10px,env(safe-area-inset-left));
  display:none;align-items:center;gap:7px;
  font:600 14px Fredoka,system-ui,sans-serif;color:#f4efff;
  background:rgba(29,24,48,.82);border:1px solid rgba(138,124,209,.35);
  border-radius:12px;padding:8px 12px;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 4px 14px rgba(0,0,0,.3);touch-action:manipulation;
}
#fsFab svg{width:18px;height:18px;flex:none}
#fsFab:active{transform:scale(.95)}
body.fab-on:not(.is-fs) #fsFab{display:flex}
body.portrait #fsFab{display:none!important}

/* rotate screen: tap to go fullscreen + landscape */
#rotate .fs-go{
  margin-top:18px;font:700 16px Fredoka,system-ui,sans-serif;color:#0d1a1f;
  background:#5eead4;border:0;border-radius:14px;padding:12px 20px;cursor:pointer;
  box-shadow:0 4px 0 #2a9d8f;
}
body.no-fs #rotate .fs-go{display:none}

/* small tip / toast (iPhone "Add to Home Screen" etc.) */
#fsTip{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:90;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:all .3s;
  max-width:min(92vw,460px);text-align:center;
  font:500 14px/1.4 Fredoka,system-ui,sans-serif;color:#f4efff;
  background:rgba(20,17,31,.94);border:1px solid rgba(138,124,209,.4);
  border-radius:14px;padding:10px 16px;box-shadow:0 8px 30px rgba(0,0,0,.45);
}
#fsTip.show{opacity:1;transform:translate(-50%,0)}
#fsTip b{color:#5eead4}

/* --- Story scene: language toggle no longer covers the chapter title --- */
#ui.compact #story .st-lang{left:2.5cqw;right:auto}
#ui.compact #story .st-chapter{padding:0 17%;letter-spacing:.22em;line-height:1.3}
body.touch.fab-on #story .st-lang{top:3cqh}

/* stage: no rounded frame when it fills the phone screen */
body.touch #stage{box-shadow:none}

/* ===== v21: touch HUD = right: deaths + hint + menu, left: level info ===== */
body.thud #btnRestart,body.thud #btnSound,body.thud #btnFull{display:none!important}
body.pv #ui #banner.dock,body.pv #ui.compact #banner.dock{
  top:calc(max(8px,env(safe-area-inset-top)) + clamp(26px,8.4vh,40px));
}
body.pv #ui .hud-left,body.pv #ui.compact .hud-left{padding-top:4px}
#loaMsg{
  position:absolute;left:max(12px,calc(env(safe-area-inset-left) + 8px));max-width:52vw;z-index:6;
  font-weight:700;font-size:clamp(14px,4.4vh,19px);line-height:1.3;
  text-shadow:0 2px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none;
}
#loaMsg.show{opacity:1;transform:none}
body.pv .hthru{opacity:.25!important;transition:opacity .15s}
body.pv #ui .icon-btn.hthru{pointer-events:auto}
#pause .menu-btns.col{max-height:none}

/* v22 */
body.pv .hpass{pointer-events:none!important}
body.pv #wrap{background-repeat:repeat-x}

/* ===== v23 ===== */
/* arrows float over the ground strip: they fade when Veer / the door is behind them */
body.pv .t-btn.afade svg.tri{opacity:.32}
body.pv .t-btn.afade.active svg.tri{opacity:.7}
/* performance: hidden menus / story stop animating in the background (46 animations were running during play) */
.overlay:not(.show),.overlay:not(.show) *,.overlay:not(.show) *::before,.overlay:not(.show) *::after,
#story:not(.show),#story:not(.show)::before,#story:not(.show)::after,#story:not(.show) *,#story:not(.show) *::before,#story:not(.show) *::after{animation-play-state:paused!important}

/* ===== v24 ===== */
/* side walls live inside the room layer -> they move with the camera for free */
body.pv #stage{overflow:visible}
.loa-side{position:absolute;top:0;height:720px;width:1600px;background-repeat:repeat-x;background-size:22px 720px;pointer-events:none;display:none}
body.pv .loa-side{display:block}
#loaSideL{right:100%;background-position:right top}
#loaSideR{left:100%;background-position:left top}

/* v27.1: Story button hidden on mobile/touch (story list did not fit and had no reachable Back) */
body.touch #btnStory,body.touch #storyList{display:none!important}
body.touch #menu .menu-row{grid-template-columns:1fr}
@media (hover:none) and (pointer:coarse){#btnStory,#storyList{display:none!important}#menu .menu-row{grid-template-columns:1fr}}