/* FOOD TRUCK MERGE V7 — VISUAL REBUILD OF THE USER-APPROVED MOBILE DESIGN.
   This is actual interactive DOM, not a screenshot used as a background.
   3 clients + 4 working generators + 5x7 tiles + 5 original navigation controls.
   Adaptive height: browser UI/short viewports reduce each band, never scroll gameplay.
*/
:root{--ftm-gold:#ffd96a;--ftm-amber:#ffad4d;--ftm-outline:#fff0b0;--ftm-bordeaux:#431425}
html,body{margin:0!important;padding:0!important;height:100%!important;min-height:0!important;width:100%!important;overflow:hidden!important;overscroll-behavior:none!important;}
body{display:flex!important;align-items:center!important;justify-content:center!important;background:radial-gradient(ellipse at 50% 33%,#823f48,#25121e 69%,#100a1d)!important;}
.app{
  width:min(100%,430px)!important;max-width:430px!important;
  height:100vh!important;height:100dvh!important;max-height:980px!important;min-height:0!important;
  padding:0!important;margin:0 auto!important;border:0!important;
  overflow:hidden!important;position:relative!important;
  display:grid!important;gap:0!important;isolation:isolate!important;
  grid-template-rows:clamp(62px,9.4dvh,91px) clamp(75px,14.0dvh,128px) clamp(85px,12.2dvh,114px) clamp(35px,5.4dvh,50px) minmax(0,1fr) calc(clamp(64px,9.2dvh,85px) + env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(180deg,#561932 0%,#e77639 26%,#ffb468 55%,#bc5f3f 82%,#642333 100%)!important;
  box-shadow:0 0 0 2px #f5bb6a,0 5px 60px #06000abb!important;
}
.app>.glow-beams{display:none!important}
.header{
  grid-row:1!important;position:relative!important;z-index:3!important;
  display:grid!important;grid-template-columns:minmax(80px,1.2fr) minmax(86px,1.2fr) minmax(51px,.68fr) minmax(72px,.96fr) minmax(32px,.44fr)!important;
  gap:3px!important;align-items:center!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:2px 6px!important;border:0!important;border-bottom:2px solid #ffbe51!important;
  background:radial-gradient(ellipse at 48% 150%,#6a2345 4%,#251338 80%),linear-gradient(#27122f,#511323)!important;
  box-shadow:inset 0 2px #ffb365aa,0 3px 10px #2b0c2b72!important;
}
.header:before{display:none!important}
.brand-line{display:contents!important;min-height:0!important;height:auto!important;margin:0!important}
.premium-logo{
  width:100%!important;max-width:110px!important;height:100%!important;min-height:0!important;margin:0!important;
  object-fit:contain!important;object-position:center!important;filter:drop-shadow(0 3px 2px #2b081b) drop-shadow(0 0 6px #ffb6248f)!important
}
.resources{display:contents!important}
.resource{
  min-width:0!important;min-height:0!important;max-height:none!important;height:clamp(30px,4.7dvh,41px)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;
  margin:0!important;padding:1px 2px!important;border:1.5px solid #ffdd83!important;border-radius:99px!important;
  background:linear-gradient(180deg,#6c2931 0%,#39162b 56%,#411a22 100%)!important;
  box-shadow:inset 0 1px 2px #ffdaa571,0 2px 1px #a84b2b,0 0 7px #ffb55a6b!important;
  color:#fff6d9!important;white-space:nowrap!important;text-shadow:0 2px #2e1017a0!important
}
.resource b{font-size:clamp(10px,3.45vw,15px)!important;color:#fff6d9!important;line-height:1!important;}
.resource small{font-size:0!important;display:none!important}
.resource .resource-icon{font-size:clamp(12px,3.6vw,17px)!important;line-height:1!important;filter:drop-shadow(0 2px 2px #35132b)!important}
.resource-chapter{display:flex!important;flex-direction:column!important;gap:0!important;padding:2px 3px!important;line-height:1.05!important;}
.resource-chapter .chapter-topline{font-size:clamp(8px,2.4vw,11px)!important;font-weight:1000!important;display:block!important;}
.resource-chapter .chapter-topline b{font-size:inherit!important;}
.resource-chapter small{display:block!important;font-size:clamp(7px,2.0vw,10px)!important;line-height:1.05!important;opacity:1!important;letter-spacing:-.02em!important;color:#fff2c0!important}
.header-menu{
  position:static!important;grid-column:5!important;width:100%!important;max-width:40px!important;
  min-height:0!important;height:clamp(31px,5.2dvh,43px)!important;justify-self:end!important;
  margin:0!important;padding:0!important;border:0!important;overflow:visible!important;
  background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 2px #74270f) !important;
}
.header-menu img{width:100%!important;height:100%!important;object-fit:contain!important;}
.skyline,.skyline.truck-stage-0,.skyline.truck-stage-1,.skyline.truck-stage-2,.skyline.truck-stage-3,.skyline.truck-stage-4,.skyline.truck-stage-5{
  grid-row:2!important;height:100%!important;min-height:0!important;width:100%!important;position:relative!important;
  margin:0!important;overflow:hidden!important;border:0!important;border-bottom:3px solid #ffd077!important;background:#200e2a!important;
  box-shadow:0 3px 7px #521e196b!important;
}
.skyline:before{
  content:""!important;position:absolute!important;inset:0!important;
  background-image:url('assets/scene/hero-depart-v45.webp')!important;background-position:center 44%!important;
  background-size:cover!important;transform:none!important;
  filter:saturate(1.40) brightness(1.19) contrast(1.06)!important;
}
/* Only the actual truck stage is revealed: no sneak peek of future evolution. */
.skyline.truck-stage-0:before{background-image:url('assets/scene/hero-vieux-camion.webp')!important;filter:saturate(1.45) brightness(1.28) contrast(1.10)!important;}
.skyline.truck-stage-1:before{background-image:url('assets/scene/truck-stage-1.webp')!important;filter:saturate(1.45) brightness(1.25) contrast(1.07)!important;}
.skyline.truck-stage-2:before{background-image:url('assets/scene/truck-stage-2.webp')!important;filter:saturate(1.45) brightness(1.25) contrast(1.07)!important;}
.skyline.truck-stage-3:before{background-image:url('assets/scene/hero-depart-v45.webp')!important;}
.skyline.truck-stage-3.terrace-ready:before{background-image:url('assets/scene/hero-terrasse-v45.webp')!important;}
.skyline.truck-stage-4:before{background-image:url('assets/scene/truck-stage-4.webp')!important;}
.skyline.truck-stage-5:before{background-image:url('assets/scene/truck-stage-5.webp')!important;}
.skyline:after{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;
  background:linear-gradient(180deg,#2f082b18,transparent 40%,#220a1c62 100%)!important;}
.skyline.terrace-ready:after{background:linear-gradient(180deg,#1c0c2a10,#1205152b 56%,#1b0b215e)!important;}
.truck-caption{
  position:absolute!important;inset:auto 5px 6px 5px!important;z-index:4!important;
  display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:end!important;
  gap:5px!important;min-height:0!important;filter:none!important;
}
.truck-caption span{
  display:block!important;flex:0 1 58%!important;max-width:64%!important;min-width:0!important;
  border:1.5px solid #ffe2a2!important;border-radius:13px!important;padding:4px 7px!important;
  background:linear-gradient(110deg,#220e24ec,#3b1a28d8)!important;
  box-shadow:0 2px 5px #10071caa,inset 0 1px #ffeac85e!important;
  color:#fff9d7!important;
}
.truck-caption small{display:block!important;font-size:clamp(8px,2.05vw,10px)!important;color:#ffe09b!important;letter-spacing:0!important;}
.truck-caption strong{display:block!important;font-size:clamp(10px,2.95vw,13px)!important;line-height:1.05!important;white-space:normal!important;}
.truck-caption button{
  position:relative!important;min-width:clamp(72px,21vw,92px)!important;max-width:28%!important;
  min-height:0!important;height:clamp(59px,10.1dvh,82px)!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
  padding:3px!important;border:2.5px solid #fff1b8!important;border-radius:16px!important;
  color:#4b1b0c!important;font-size:clamp(10px,2.65vw,13px)!important;font-weight:1000!important;
  background:radial-gradient(ellipse at 31% 0%,#ffffd0,#ffd85a 30%,#ffad1f 65%,#e2751f 100%)!important;
  box-shadow:inset 0 2px #fff9de,0 3px 0 #a5481c,0 0 12px #ffd93fa5!important;text-shadow:0 1px #fff3d8!important;
}
.truck-caption button .upgrade-wrench{height:clamp(26px,5.6dvh,39px)!important;width:clamp(28px,8.2vw,39px)!important;object-fit:contain!important;
  filter:drop-shadow(0 1px 1px #915019b0)!important;}
.customers{
  grid-row:3!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:100%!important;min-height:0!important;margin:0!important;
  gap:4px!important;padding:6px 6px 5px!important;overflow:hidden!important;
  background:linear-gradient(#d56b3c,#f4a65c 47%,#e17d46)!important;
}
.customer,.customer.ready{
  height:100%!important;max-height:none!important;min-height:0!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important;gap:2px!important;
  padding:3px 4px 5px!important;overflow:hidden!important;
  border:2px solid #fff3bc!important;border-radius:14px!important;
  background:linear-gradient(150deg,#fffdf0 0%,#ffedca 60%,#ffd899 100%)!important;
  box-shadow:inset 0 1px #fffff9,0 3px 0 #b75d34,0 5px 7px #4b151e82!important;
  color:#5b231a!important;
}
.customer.ready{border-color:#99ef9e!important;box-shadow:0 3px 0 #438b53,0 0 9px #73df9e!important;}
.customer:before{display:none!important}
.customer-top{
  flex:1 1 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:0!important;min-height:0!important;max-height:56%!important;height:56%!important;margin:0!important;
}
.customer-portrait,.customer-food{
  width:50%!important;max-width:50%!important;min-width:0!important;height:100%!important;max-height:100%!important;
  flex-shrink:0!important;object-fit:contain!important;object-position:center!important;border:0!important;
}
.customer-portrait{border-radius:9px!important;background:radial-gradient(#fffde3,#fce0a6)!important;}
.customer-food{filter:drop-shadow(0 3px 2px #682e174b)!important;}
.customer-title{
  flex:0 1 auto!important;display:grid!important;place-items:center!important;height:clamp(13px,2.0dvh,18px)!important;min-height:0!important;
  font-size:clamp(8.5px,2.4vw,11px)!important;line-height:1.05!important;font-weight:1000!important;
  color:#5b211b!important;text-shadow:0 1px #fff9de!important;white-space:normal!important;
}
.customer-progress-label{display:flex!important;justify-content:flex-end!important;align-items:center!important;
  flex:0 0 9px!important;height:9px!important;min-height:0!important;font-size:0!important;color:transparent!important;margin:0!important;}
.customer-progress-label b{font-size:clamp(8px,2.25vw,10px)!important;color:#207a35!important;line-height:1!important;}
.customer-wait{height:8px!important;min-height:8px!important;flex:0 0 8px!important;margin:0!important;background:#a48a7c!important;
  border:1px solid #9c7963!important;border-radius:9px!important;box-shadow:inset 0 1px 2px #65462465!important;}
.customer-wait i{background:linear-gradient(90deg,#1cb452,#63ed61,#c6fd78)!important;}
.customer button:disabled{display:none!important;}
.customer button:not(:disabled){min-height:0!important;height:clamp(18px,3.0dvh,25px)!important;flex:0 0 auto!important;
   margin-top:1px!important;padding:0!important;border:1px solid #abf193!important;border-radius:8px!important;font-size:clamp(8px,2.4vw,10px)!important;}
.customer .served-mark{display:grid!important;place-items:center!important;height:55%!important;min-height:0!important;font-size:clamp(20px,5vw,25px)!important;
  line-height:1.1!important;color:#20ae4a!important;text-shadow:0 1px white!important;}
.chapter-strip{
  grid-row:4!important;display:block!important;height:calc(100% - 4px)!important;min-height:0!important;
  margin:2px 6px!important;padding:4px 40px 4px 9px!important;position:relative!important;
  border:2px solid #fff1b0!important;border-radius:14px!important;
  background:linear-gradient(160deg,#fffbe5,#ffdba2)!important;
  box-shadow:0 2px 0 #b85b32,0 0 6px #ffcb719c!important;
}
.chapter-strip-main{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:3px!important;
  font-size:clamp(9px,2.65vw,12px)!important;line-height:1.2!important;color:#68291d!important;text-shadow:none!important;}
.chapter-strip-main strong,.chapter-strip-main span{font-size:inherit!important;color:#692a1d!important;white-space:nowrap!important;}
.chapter-bar{height:clamp(6px,1.3dvh,11px)!important;margin-top:3px!important;border:1px solid #ddad75!important;border-radius:10px!important;
  background:#edc18b!important;box-shadow:inset 0 1px 3px #b65f4140!important;}
.chapter-bar div{background:linear-gradient(90deg,#11b951,#5ee867,#cefd61)!important;box-shadow:inset 0 1px #faffde!important;}
.story-mini{position:absolute!important;right:2px!important;top:2px!important;height:calc(100% - 4px)!important;width:clamp(29px,8.4vw,38px)!important;
  border:1.5px solid #ffe7a3!important;border-radius:10px!important;padding:1px!important;
  background:linear-gradient(#ffda62,#ed981b)!important;box-shadow:0 2px #9c471f,0 0 6px #ffc9519c!important;}
.story-mini img{width:100%!important;height:100%!important;object-fit:contain!important;}
.game-area{
  grid-row:5!important;display:grid!important;grid-template-columns:clamp(80px,23vw,99px) minmax(0,1fr)!important;
  gap:5px!important;margin:3px 7px 2px!important;padding:0!important;
  width:auto!important;height:calc(100% - 5px)!important;min-height:0!important;max-height:none!important;
  align-items:stretch!important;overflow:hidden!important;
}
.stations{
  display:grid!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;min-width:0!important;min-height:0!important;height:100%!important;overflow:visible!important;
  padding:1px!important;border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;
}
.station{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-evenly!important;
  height:100%!important;max-height:none!important;min-height:0!important;padding:2px 0 3px!important;gap:1px!important;
  border:2px solid #ffe989!important;border-radius:13px!important;overflow:hidden!important;
  box-shadow:inset 0 2px #fff4b66b,0 2px #a74427,0 0 8px #ffb73492!important;
  color:white!important;text-shadow:0 1px 2px #2e0819!important;
}
.station[data-spawn="burger"]{background:linear-gradient(160deg,#ae3218,#68121c)!important;}
.station[data-spawn="fries"]{background:linear-gradient(160deg,#cb5cee,#6b21b0)!important;}
.station[data-spawn="wrap"]{background:linear-gradient(160deg,#edaa18,#924115)!important;}
.station[data-spawn="bowl"]{background:linear-gradient(160deg,#2fcd58,#086d38)!important;}
.station img{
  flex:0 1 auto!important;width:96%!important;height:50%!important;max-height:50%!important;min-height:0!important;
  object-fit:contain!important;filter:drop-shadow(0 2px 2px #260819ad)!important;
}
.station b{font-size:clamp(9px,2.52vw,11px)!important;line-height:1!important;white-space:nowrap!important;}
.station .lvl{font-size:clamp(8px,2.2vw,9px)!important;line-height:1!important;color:#fff2cb!important;}
.station .gen-charge{font-size:clamp(9px,2.6vw,11px)!important;line-height:1.0!important;min-height:0!important;
  border:0!important;border-radius:8px!important;background:#3e1236b8!important;padding:2px 4px!important;}
.station .gen-track{height:4px!important;min-height:4px!important;flex:0 0 4px!important;margin:0 3px!important;width:calc(100% - 8px)!important;}
.station .more{position:absolute!important;top:-1px!important;right:0!important;
  width:clamp(20px,6.2vw,27px)!important;height:clamp(20px,6.2vw,27px)!important;font-size:16px!important;
  border-radius:100%!important;border:2px solid #eaffe0!important;background:linear-gradient(#9cff7d,#24c94f)!important;
  box-shadow:0 0 7px #c0fa64b5,0 2px #17632d!important;z-index:1!important;}
.board-shell{
  width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;min-width:0!important;
  padding:4px!important;overflow:hidden!important;
  border:3px solid #ffe395!important;border-radius:19px!important;
  background:linear-gradient(155deg,#f9ad60,#db7e43)!important;
  box-shadow:inset 0 1px #fff8d4,0 3px 0 #a5482d,0 0 10px #ffcc49a8!important;
}
.board{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:repeat(7,minmax(0,1fr))!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  gap:3px!important;
}
.tile{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;
  border:1.5px solid #fff0c1!important;border-radius:11px!important;
  background:linear-gradient(142deg,#fff8e4,#ffdbab)!important;
  box-shadow:inset 0 2px #ffffffaa,0 1px 1px #a862394d!important;
  touch-action:none!important;
}
.tile img{width:91%!important;height:91%!important;object-fit:contain!important;}
.tile .rank{font-size:clamp(9px,2.4vw,12px)!important;border-radius:100px!important;padding:0 4px!important;background:#572513!important;bottom:1px!important;right:1px!important;}
.instruction-bar{display:none!important;}
.bottom{
  grid-row:6!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:3px!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:5px 7px calc(4px + env(safe-area-inset-bottom,0px))!important;
  align-items:stretch!important;overflow:hidden!important;position:relative!important;
  border:0!important;border-top:1px solid #ffd59e4d!important;
  background:linear-gradient(180deg,#a7462c22,#6d1c30d1 94%)!important;
}
.bottom-btn,.bottom-btn.special{
  display:flex!important;justify-content:center!important;align-items:center!important;
  min-width:0!important;min-height:0!important;max-height:100%!important;width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:12px!important;
  background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 3px 2px #44152c7f)!important;aspect-ratio:auto!important;
  overflow:visible!important;
}
.bottom-btn img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;filter:none!important;}
.bottom-btn:active img{transform:scale(.95)!important;}
.toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;}
/* Mobile splash: the user-approved cover has no baked-in number nor technical text.
   The bar is DOM and reflects real preload progress. */
.ftm-launch{background:linear-gradient(180deg,#210e2b00,#170a21aa),url('assets/launch/couverture-sans-texte.webp') center/cover no-repeat!important;}
.ftm-launch-content{justify-content:end!important;padding-bottom:calc(3dvh + env(safe-area-inset-bottom,0px))!important;}
.ftm-loading-card{width:min(54vw,245px)!important;max-width:245px!important;padding:3px!important;margin:auto auto 0!important;background:#2d1027b3!important;
 border:1px solid #ffe6a1e3!important;border-radius:99px!important;box-shadow:0 1px 10px #2e0b199e!important;}
.ftm-load-track{width:100%!important;height:7px!important;max-width:none!important;padding:0!important;border:0!important;background:#401b32!important;box-shadow:none!important;}
.ftm-load-track>div{height:100%!important;border-radius:90px!important;background:linear-gradient(90deg,#39d45c,#bbf26f)!important;}
/* Stay centered on desktop, but the exact phone width remains unaltered on mobile. */
@media (min-width:431px){
 .app{border-radius:21px!important;border:2px solid #ffd38c!important;}
}
@media (max-height:710px){
 .app{grid-template-rows:clamp(53px,8.5dvh,66px) clamp(67px,12.5dvh,90px) clamp(74px,12dvh,86px) clamp(32px,5dvh,38px) minmax(0,1fr) calc(clamp(53px,8.8dvh,66px) + env(safe-area-inset-bottom,0px))!important;}
 .customer-top{max-height:52%!important;height:52%!important;}
 .station img{max-height:41%!important;height:41%!important;}
 .truck-caption button{height:clamp(45px,8dvh,63px)!important;}
}
@media (max-width:354px){
 .header{grid-template-columns:68px minmax(84px,1fr) 49px 65px 31px!important;gap:2px!important;padding:1px 3px!important;}
 .resource b{font-size:10px!important;}
 .game-area{grid-template-columns:71px minmax(0,1fr)!important;gap:3px!important;margin-left:4px!important;margin-right:4px!important;}
 .customers{gap:3px!important;padding:4px 4px!important;}
 .customer{padding:2px 2px 4px!important;}
 .customer-title{font-size:8px!important;}
 .station b{font-size:8px!important;}
 .board{gap:2px!important;}
 .bottom{gap:2px!important;padding-left:4px!important;padding-right:4px!important;}
}
@media (prefers-reduced-motion:reduce){.tile,.bottom-btn img{animation:none!important;transition:none!important;}}