/* ELIE v5.1.85 — precision consistency: book, controls, object rollover and tutorial safety */

/* -------------------------------------------------------------------------- */
/* BOOK: the same signal language as START GAME, with a clean Duplet label.   */
/* -------------------------------------------------------------------------- */
.book-screen .book-art{
  left:6.5%!important;
  top:35%!important;
  width:clamp(220px,19vw,360px)!important;
  max-height:42%!important;
}
.book-screen .book-download-signal{
  left:7.2%!important;
  right:auto!important;
  top:76.5%!important;
  bottom:auto!important;
  width:clamp(220px,18vw,330px)!important;
  height:clamp(64px,5.35vw,88px)!important;
  min-width:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:clamp(2px,.16vw,3px) solid #2ef13a!important;
  border-radius:999px!important;
  background:#000!important;
  box-shadow:0 0 0 1px rgba(46,241,58,.18),0 0 16px rgba(46,241,58,.13),inset 0 0 18px rgba(46,241,58,.04)!important;
  overflow:hidden!important;
  isolation:isolate!important;
  transform:none!important;
}
.book-screen .book-download-signal:hover,
.book-screen .book-download-signal:focus-visible{
  transform:scale(1.025)!important;
  box-shadow:0 0 0 1px rgba(46,241,58,.32),0 0 24px rgba(46,241,58,.24),inset 0 0 20px rgba(46,241,58,.07)!important;
}
.book-screen .book-download-signal .home-start-signal-stripes{
  --book-band-cycle:clamp(62px,5vw,92px);
  --book-band-width:clamp(26px,2.2vw,40px);
  position:absolute!important;
  inset:15% 6.2%!important;
  z-index:1!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#2ef13a!important;
  background-image:none!important;
  transform:none!important;
  filter:none!important;
  contain:paint!important;
}
.book-screen .book-download-signal .home-start-signal-stripes::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-75% -50%!important;
  background:repeating-linear-gradient(135deg,#000 0 var(--book-band-width),transparent var(--book-band-width) var(--book-band-cycle))!important;
  animation:elieBookBandsV5185 1.8s linear infinite!important;
  will-change:transform!important;
  pointer-events:none!important;
}
.book-screen .book-download-signal .home-start-signal-label{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:"Duplet",Arial,sans-serif!important;
  font-size:clamp(21px,1.65vw,31px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  text-shadow:none!important;
  transform:none!important;
  white-space:nowrap!important;
}
@keyframes elieBookBandsV5185{
  from{transform:translate3d(calc(var(--book-band-cycle) * -1),0,0)}
  to{transform:translate3d(0,0,0)}
}
.book-screen .book-copy.book-copy-v5182{
  left:46%!important;
  right:2.6%!important;
  top:clamp(174px,19.5vh,226px)!important;
  bottom:clamp(68px,8vh,98px)!important;
  width:auto!important;
  max-width:none!important;
  overflow:hidden!important;
}
.book-screen .book-scroll-frame{
  padding:clamp(24px,2.7vh,38px) clamp(24px,2.2vw,40px) clamp(54px,5.1vh,82px)!important;
}

/* -------------------------------------------------------------------------- */
/* HOW TO PLAY: every visual stays in its lane and keeps its real proportion. */
/* -------------------------------------------------------------------------- */
.how-command-controls .how-control-deck{
  gap:clamp(16px,1.35vw,26px)!important;
}
.how-command-controls .how-control-card{
  min-height:236px!important;
  grid-template-columns:minmax(220px,39%) minmax(0,1fr)!important;
  align-items:center!important;
  gap:clamp(20px,1.8vw,34px)!important;
  padding:clamp(20px,1.65vw,30px)!important;
  overflow:hidden!important;
}
.how-command-controls .how-control-symbol{
  width:100%!important;
  min-width:0!important;
  height:168px!important;
  min-height:168px!important;
  padding:10px 18px 10px 6px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:clamp(12px,1.15vw,22px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.how-command-controls .how-control-desktop .how-control-symbol{
  justify-content:center!important;
}
.how-command-controls .how-control-mobile .how-control-symbol{
  justify-content:space-evenly!important;
}
.how-command-controls .how-arrow-pad{
  flex:0 0 auto!important;
  width:92px!important;
  height:92px!important;
}
.how-command-controls .how-control-key-stack{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
.how-command-controls .how-x-key{
  flex:0 0 auto!important;
  width:54px!important;
  height:54px!important;
  margin:0!important;
}
.how-command-controls .how-touch-controller{
  flex:0 1 39%!important;
  width:clamp(84px,6.7vw,108px)!important;
  max-width:108px!important;
  max-height:142px!important;
  object-fit:contain!important;
  opacity:1!important;
}
.how-command-controls .how-mobile-action-stack{
  flex:0 1 54%!important;
  width:auto!important;
  max-width:136px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,.8vw,13px)!important;
  overflow:visible!important;
}
.how-command-controls .how-laser-mini{
  flex:0 0 auto!important;
  width:60px!important;
  height:60px!important;
}
.how-command-controls .how-bomb-mini{
  flex:0 0 auto!important;
  width:52px!important;
  height:66px!important;
}
.how-command-controls .how-laser-mini img,
.how-command-controls .how-bomb-mini img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  filter:none!important;
}
.how-command-controls .how-laser-mini b,
.how-command-controls .how-bomb-mini b{
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
}
.how-command-controls .how-control-copy{
  min-width:0!important;
  align-self:center!important;
  padding:4px 8px 4px 0!important;
}
.how-command-controls .how-control-copy p{
  margin:.72em 0 0!important;
  line-height:1.48!important;
}

/* -------------------------------------------------------------------------- */
/* OBJECTS: the frame never moves or glows; only the object gains scale.       */
/* -------------------------------------------------------------------------- */
.objects-screen .object-card.unlocked,
.objects-screen .object-card.unlocked:hover,
.objects-screen .object-card.unlocked:focus-visible{
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.objects-screen .object-card.unlocked .frame-img,
.objects-screen .object-card.unlocked:hover .frame-img,
.objects-screen .object-card.unlocked:focus-visible .frame-img{
  transform:none!important;
  filter:none!important;
}
.objects-screen .object-card.unlocked .object-card-img{
  transform:scale(1.08)!important;
  transform-origin:center center!important;
  filter:none!important;
  transition:transform .24s cubic-bezier(.2,.72,.2,1)!important;
}
@media (hover:hover) and (pointer:fine){
  .objects-screen .object-card.unlocked:hover .object-card-img,
  .objects-screen .object-card.unlocked:focus-visible .object-card-img{
    transform:scale(1.17)!important;
    filter:none!important;
  }
}

/* -------------------------------------------------------------------------- */
/* FIRST FLIGHT: protected visual rows, no bomb or laser image under the copy. */
/* -------------------------------------------------------------------------- */
.flight-tutorial-card .tutorial-control{
  min-width:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(112px,128px) auto auto auto!important;
  align-content:start!important;
}
.flight-tutorial-card .tutorial-visual{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:128px!important;
  min-height:112px!important;
  max-height:128px!important;
  margin:12px 0 14px!important;
  padding:6px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(10px,1vw,18px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.flight-tutorial-card .tutorial-control>p,
.flight-tutorial-card .tutorial-control>strong{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  min-width:0!important;
}
.flight-tutorial-card .tutorial-mobile-actions{
  flex:0 0 auto!important;
  width:144px!important;
  max-width:42%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  overflow:visible!important;
}
.flight-tutorial-card .tutorial-laser-dial{
  flex:0 0 auto!important;
  width:70px!important;
  height:70px!important;
}
.flight-tutorial-card .tutorial-bomb-drop{
  flex:0 0 auto!important;
  width:48px!important;
  height:90px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.flight-tutorial-card .tutorial-bomb-drop img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  filter:none!important;
}
.flight-tutorial-card .tutorial-phone{
  flex:0 0 auto!important;
}
.flight-tutorial-card .tutorial-drag-vector{
  flex:0 0 auto!important;
}

/* Landscape tablets and short desktop windows. */
@media (orientation:landscape) and (pointer:coarse), (max-height:760px){
  .book-screen .book-art{left:3.5%!important;top:30%!important;width:clamp(120px,18vw,190px)!important;max-height:45%!important}
  .book-screen .book-download-signal{left:3.8%!important;top:77%!important;width:clamp(145px,21vw,220px)!important;height:clamp(42px,7.2vh,58px)!important}
  .book-screen .book-download-signal .home-start-signal-label{font-size:clamp(14px,3.1vh,20px)!important}
  .book-screen .book-copy.book-copy-v5182{left:34.5%!important;right:2.2%!important;top:clamp(94px,17vh,126px)!important;bottom:clamp(30px,6vh,48px)!important}
  .book-screen .book-scroll-frame{padding:16px 20px 38px!important}

  .how-command-controls .how-control-card{min-height:184px!important;grid-template-columns:minmax(160px,37%) minmax(0,1fr)!important;gap:14px!important;padding:13px!important}
  .how-command-controls .how-control-symbol{height:122px!important;min-height:122px!important;padding:6px 10px 6px 2px!important;gap:8px!important}
  .how-command-controls .how-arrow-pad{width:70px!important;height:70px!important}
  .how-command-controls .how-x-key{width:42px!important;height:42px!important;font-size:21px!important}
  .how-command-controls .how-touch-controller{width:78px!important;max-width:78px!important;max-height:92px!important}
  .how-command-controls .how-mobile-action-stack{max-width:118px!important;gap:5px!important}
  .how-command-controls .how-laser-mini{width:50px!important;height:50px!important}
  .how-command-controls .how-bomb-mini{width:44px!important;height:56px!important}

  .flight-tutorial-card .tutorial-control{grid-template-rows:auto minmax(82px,94px) auto auto auto!important}
  .flight-tutorial-card .tutorial-visual{height:94px!important;min-height:82px!important;max-height:94px!important;margin:7px 0 9px!important;padding:3px 5px!important;gap:7px!important}
  .flight-tutorial-card .tutorial-mobile-actions{width:108px!important;gap:5px!important}
  .flight-tutorial-card .tutorial-laser-dial{width:50px!important;height:50px!important}
  .flight-tutorial-card .tutorial-bomb-drop{width:36px!important;height:62px!important}
}

/* Portrait mobile keeps the book controls above the reading area. */
@media (max-width:680px) and (orientation:portrait){
  .book-screen .book-art{left:7%!important;top:17.5%!important;width:31vw!important;max-height:20%!important}
  .book-screen .book-download-signal{left:42%!important;right:5%!important;top:25.5%!important;width:auto!important;height:48px!important}
  .book-screen .book-download-signal .home-start-signal-label{font-size:14px!important}
  .book-screen .book-copy.book-copy-v5182{left:5%!important;right:5%!important;top:42%!important;bottom:6%!important}
  .book-screen .book-scroll-frame{padding:18px 15px 44px!important}

  .how-command-controls .how-control-card{min-height:0!important;grid-template-columns:1fr!important;gap:10px!important;padding:13px!important}
  .how-command-controls .how-control-symbol{height:124px!important;min-height:124px!important;padding:5px 8px!important;border-right:0!important;border-bottom:1px solid rgba(46,241,58,.18)!important}
  .how-command-controls .how-touch-controller{width:82px!important;max-width:82px!important;max-height:94px!important}
  .how-command-controls .how-mobile-action-stack{max-width:128px!important}
  .how-command-controls .how-laser-mini{width:54px!important;height:54px!important}
  .how-command-controls .how-bomb-mini{width:46px!important;height:60px!important}

  .flight-tutorial-card .tutorial-control-grid{grid-template-columns:1fr!important}
  .flight-tutorial-card .tutorial-control{grid-template-rows:auto minmax(94px,108px) auto auto auto!important}
  .flight-tutorial-card .tutorial-visual{height:108px!important;min-height:94px!important;max-height:108px!important}
}

@media (hover:none){
  .objects-screen .object-card.unlocked .object-card-img,
  .objects-screen .object-card.unlocked:hover .object-card-img{
    transform:scale(1.08)!important;
    filter:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .book-screen .book-download-signal .home-start-signal-stripes::after{animation:none!important}
  .objects-screen .object-card.unlocked .object-card-img{transition:none!important}
}
