/* V4.5: réhabillage VISUEL de la vraie version jouable, pas maquette.
   Chaque image de scène est une illustration sans UI incrustée. */
@media (max-width:525px) and (orientation:portrait){
  .app { grid-template-rows:
     clamp(51px,7dvh,62px)
     clamp(94px,16.2dvh,147px)
     clamp(97px,13.8dvh,123px)
     clamp(37px,5.1dvh,44px)
     minmax(0,1fr)
     calc(clamp(63px,8.8dvh,77px) + env(safe-area-inset-bottom))!important;
     background:linear-gradient(175deg,#692048 0%,#ef884a 23%,#ffcd78 49%,#ed9b4e 78%,#7d2d30 100%)!important;
  }
  .header { background:radial-gradient(ellipse at 57% 105%,#ef6aa0ab,transparent 63%),radial-gradient(ellipse at 6% 0,#3153a3,#32154c 70%)!important;
      border-bottom:2px solid #ffdc77!important;box-shadow:0 4px 12px #34102691!important;position:relative;z-index:4;
      padding:3px 6px!important;}
  .premium-logo {width:clamp(94px,26vw,115px)!important;flex:0 0 clamp(94px,26vw,115px)!important;
      height:100%!important;margin:0 2px 0 0!important;filter:drop-shadow(0 2px 1px #3a0917) drop-shadow(0 0 5px #ffc84580)!important;}
  .resource {height:clamp(31px,4.7dvh,41px)!important;border:1.5px solid #ffe4a3!important;border-radius:18px!important;
      background:linear-gradient(170deg,#703034,#341b2f)!important;box-shadow:0 2px 0 #a66a38,inset 0 1px #fbd6a07a!important;padding:1px 2px!important;}
  .resource b {font-size:clamp(10px,2.7vw,12px)!important;color:#fffce8;}
  .resource-icon {filter:drop-shadow(0 1px #5d280b);}
  .header-menu {height:clamp(34px,9.5vw,41px)!important;width:clamp(34px,9.5vw,41px)!important;flex-basis:clamp(34px,9.5vw,41px)!important;
      margin-left:1px!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 {height:100%!important;border-bottom:3px solid #ffd57a!important;
      background-size:cover!important;background-position:center 45%!important;isolation:isolate;}
  .skyline:before {background-image:url('assets/scene/hero-depart-v45.webp')!important;
      background-size:cover!important;background-position:center 48%!important;filter:brightness(1.07) saturate(1.13)!important;}
  /* Each purchase keeps its OWN level illustration, discovered only after buying. */
  .skyline.truck-stage-1:before {background-image:url('assets/scene/truck-stage-1.webp')!important;}
  .skyline.truck-stage-2:before {background-image:url('assets/scene/truck-stage-2.webp')!important;}
  .skyline.truck-stage-3:before {background-image:url('assets/scene/truck-stage-3.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.truck-stage-3.terrace-ready:before{background-image:url('assets/scene/hero-terrasse-v45.webp')!important;}
  .skyline.truck-stage-3.terrace-ready:after{background:url('assets/story/terrace_tables_premium.webp') left bottom/36% auto no-repeat,linear-gradient(180deg,transparent 60%,#280b1640)!important;}
  .truck-caption {bottom:9px!important;left:9px!important;right:9px!important;align-items:end!important;}
  .truck-caption span{background:linear-gradient(135deg,#210d21ed,#39201ac9)!important;border:1px solid #ffe2a0!important;
      box-shadow:0 2px 4px #17060c77,inset 0 1px #fff4c37a;border-radius:14px!important;padding:7px 9px!important;
      max-width:61%!important;}
  .truck-caption small{color:#ffe3a5!important;font-size:clamp(8px,2vw,10px)!important;}
  .truck-caption strong{font-size:clamp(10px,2.8vw,12px)!important;}
  .truck-caption button{min-width:clamp(77px,22vw,94px)!important;height:clamp(60px,9dvh,82px)!important;
      background:radial-gradient(ellipse at 25% 0%,#ffffde 0%,#ffe280 25%,#ffc233 62%,#df7817 100%)!important;
      border:2px solid #fff0b2!important;border-radius:17px!important;
      box-shadow:0 3px 0 #923714,0 0 15px 3px #ffd24b8c,inset 0 2px #fffde4!important;
      color:#532111!important;text-shadow:0 1px #fff6c4!important;font-size:clamp(10px,2.5vw,12px)!important;padding:4px!important;}
  .upgrade-wrench {height:clamp(26px,6.5vw,33px)!important;width:clamp(26px,6.5vw,33px)!important;object-fit:contain!important;filter:drop-shadow(0 2px #974b2d);}
  .customers {background:linear-gradient(180deg,#ffb363,#ffa75f)!important;padding:5px 7px 5px!important;gap:5px!important;}
  .customer {border-radius:15px!important;border:2px solid #fdf0bd!important;
      background:linear-gradient(165deg,#fffbea 4%,#ffe3b1 77%,#fcd098)!important;
      box-shadow:0 3px 0 #bc6a37,0 4px 9px #743b2780,inset 0 1px #ffffff!important;
      padding:4px 3px 4px!important;gap:1px!important;}
  .customer:before {display:none!important}
  .customer-top{height:56%!important;flex-basis:56%!important;gap:1px!important;}
  .customer-portrait {background:radial-gradient(#fffbe1,#ffdda8)!important;border:1px solid #ffc277!important;
      height:100%!important;max-height:100%!important;border-radius:11px!important;object-fit:contain!important;width:51%!important;}
  .customer-food {width:49%!important;height:100%!important;filter:drop-shadow(0 2px 2px #71332278)!important;}
  .customer-title {height:auto!important;min-height:0!important;max-height:24px!important;
      font-size:clamp(9px,2.65vw,12px)!important;font-weight:1000!important;line-height:1.02!important;color:#62291b!important;}
  .customer-progress-label {min-height:0!important;height:10px!important;margin-top:auto!important;font-size:0!important;display:flex;justify-content:flex-end!important;}
  .customer-progress-label b {font-size:clamp(8px,2.4vw,10px)!important;line-height:1;}
  .customer-wait {height:9px!important;min-height:9px!important;flex:0 0 9px;border-color:#9f714c!important;
      background:#876b60!important;box-shadow:inset 0 1px 3px #3b2814ad!important;}
  .customer-wait i{background:linear-gradient(90deg,#19b858,#4dda57,#b4f768)!important;}
  .customer button:disabled {display:none!important;}
  .customer button:not(:disabled) {flex:0 0 22px;height:22px!important;border-radius:9px!important;}
  .customer .served-mark {font-family:system-ui,sans-serif;color:#11a850!important;text-shadow:0 1px white;
      font-size:clamp(15px,4vw,22px)!important;display:grid;place-items:center;}
  .chapter-strip {margin:1px 7px 4px!important;border-radius:14px!important;
      background:linear-gradient(180deg,#fffeec,#ffe0a8)!important;border:2px solid #ffe5a0!important;
      box-shadow:0 2px 0 #bb673b,0 3px 7px #9449265e!important;}
  .chapter-strip-main strong,.chapter-strip-main span {color:#702e25!important;font-weight:900!important;}
  .chapter-bar {height:9px!important;background:#edc083!important;}
  .chapter-bar #chapterFill {background:linear-gradient(90deg,#1bc35c,#a5f66d)!important;box-shadow:0 0 6px #72f98388;}
  .story-mini{border-radius:11px!important;background:linear-gradient(#fff7bd,#ffb52b)!important;border:1px solid #ffe7a5!important;
      box-shadow:0 2px #a25824,0 0 7px #ffc231c7!important;padding:1px!important;}
  .game-area{grid-template-columns:clamp(69px,19.5vw,84px) minmax(0,1fr)!important;gap:4px!important;margin:0 7px!important;}
  .stations{padding:1px!important;background:#f6ab6a!important;border:2px solid #fff0a4!important;border-radius:15px!important;gap:3px!important;}
  .station {border:1.5px solid #ffdf83!important;border-radius:11px!important;padding:2px 0!important;
      box-shadow:0 2px 0 #773026,inset 0 2px #fff3b584,0 0 7px #ffb44e7a!important;justify-content:space-evenly!important;}
  .station[data-spawn="burger"] {background:linear-gradient(155deg,#b83f20,#5e141a)!important;}
  .station[data-spawn="fries"] {background:linear-gradient(155deg,#b044dc,#6220a3)!important;}
  .station[data-spawn="wrap"] {background:linear-gradient(155deg,#d77a22,#803309)!important;}
  .station[data-spawn="bowl"] {background:linear-gradient(155deg,#29b85a,#08653d)!important;}
  .station img {height:clamp(25px,5.5dvh,48px)!important;max-height:49%!important;object-fit:contain!important;filter:drop-shadow(0 3px 2px #200908b0)!important;}
  .station b {font-size:clamp(8px,2.3vw,10px)!important;}
  .station .lvl{font-size:clamp(7px,1.9vw,9px)!important;}
  .station .gen-charge{font-size:clamp(9px,2.4vw,11px)!important;background:#401524da!important;}
  .station .more{width:clamp(19px,5.4vw,24px)!important;height:clamp(19px,5.4vw,24px)!important;font-size:17px!important;}
  .board-shell{border:3px solid #fff1ae!important;border-radius:17px!important;padding:4px!important;
      background:linear-gradient(160deg,#f4ac63,#d88149)!important;
      box-shadow:0 3px 0 #ab502b,0 0 14px #ffc25e92,inset 0 1px #fff3c6!important;}
  .board{gap:3px!important;}
  .tile {border:1.5px solid #ffefd0!important;border-radius:11px!important;
      background:linear-gradient(155deg,#fff4d6 0,#ffdeaa 100%)!important;
      box-shadow:0 1px 1px #b67243,inset 0 2px #ffffffc7!important;}
  .bottom {background:linear-gradient(180deg,#bc653994,#8d362bf0)!important;border-top:0!important;
      padding:5px 7px calc(env(safe-area-inset-bottom) + 2px)!important;gap:4px!important;}
  .bottom-btn img {filter:drop-shadow(0 3px 3px #4d151fc4)!important;}
  .bottom-btn{overflow:visible!important;}
}
@media (max-width:525px) and (max-height:710px) and (orientation:portrait){
  .app {grid-template-rows:44px 85px 86px 36px minmax(0,1fr) calc(61px + env(safe-area-inset-bottom))!important;}
  .truck-caption button {height:48px!important;min-width:66px!important;}
  .customer-top{height:41%!important;flex-basis:41%!important;}
  .station img{height:clamp(19px,4dvh,31px)!important;}
}
@media(max-width:352px) and (orientation:portrait){
  .premium-logo{width:77px!important;flex-basis:77px!important;}
  .game-area{grid-template-columns:61px minmax(0,1fr)!important;margin:0 3px!important;}
  .resource small{display:none!important;}
}