/* Food Truck Merge — Polissage graphique V4. Toutes les cases, commandes et ressources restent dynamiques. */
:root{
 --sunset:#ff8b45; --coral:#eb5842; --cherry:#ac302f; --cream:#fff7e7;
 --custard:#ffdfac; --honey:#ffd66c; --leaf:#43cd70; --mint:#d1ffe7;
 --teal:#226b67; --cocoa:#5b281e; --ink:#4a261a;
 --card-glow:0 4px 0 #b55f38, 0 8px 18px #762e1b33;
}
html,body{background:#203139;color:#522818}
body{background:radial-gradient(circle at 50% 0,#ffc372 0,#bd6349 27%,#283a43 80%);font-family:ui-rounded,'Trebuchet MS',Verdana,Arial,sans-serif}
.app{
 width:min(100%,525px);max-width:525px;
 background:
  radial-gradient(ellipse 150% 400px at 50% 1%,#fff0ba 0%,#ffb46e 55%,transparent 80%),
  radial-gradient(circle at 9% 46%,#fff8be60 0%,transparent 30%),
  linear-gradient(180deg,#ffbd72 0%,#f57a54 33%,#ffe7ac 52%,#f9bd78 100%);
 border-left:3px solid #e7ac53;border-right:3px solid #e7ac53;
 box-shadow:0 0 36px #14212c9a, inset 0 0 0 1px #ffecd5;
 padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.glow-beams{height:390px;background:radial-gradient(circle at 12% 20%,#fff5bcad,transparent 37%),radial-gradient(circle at 95% 44%,#ff6d4585,transparent 45%);opacity:.65;z-index:0}
/* Marquise/logo : le panneau appartient à l'univers du food truck, pas à une page web. */
.header{
 border:0;border-bottom:4px solid #d74d2b;
 background:
 repeating-linear-gradient(90deg,transparent 0 21px,#fff3cc39 21px 42px),
 linear-gradient(180deg,#ffc56b 0%,#ff985c 47%,#f46a45 100%);
 padding:7px 10px 9px;box-shadow:0 5px 11px #a9472b4f,inset 0 2px #fff0bb;
}
.header:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,#fff4d5 0 19px,#d84430 19px 38px);border-radius:0 0 10px 10px;opacity:.9}
.brand-line{height:75px;min-height:75px;margin-top:6px}
.premium-logo{width:min(252px,72%);height:76px;object-fit:contain;filter:drop-shadow(0 4px 3px #61240a6a) drop-shadow(0 0 5px #fff5c0)}
.header-menu{top:11px;right:-1px;width:44px;height:44px;filter:drop-shadow(0 3px #9f4026)}
.resources{gap:6px;margin-top:2px}
.resource{
 min-height:40px;padding:4px 6px;border:2px solid #ffd67e;
 background:linear-gradient(180deg,#703e2e 0%,#4b241d 72%,#652f23 100%);
 box-shadow:inset 0 2px 1px #fff9df60,0 3px #a3432e,0 5px 9px #77331d50;
 border-radius:23px;gap:4px;text-shadow:0 1px #36180e;
}
.resource b{font-size:clamp(12px,3.5vw,17px);color:#fffce8;letter-spacing:-.02em}
.resource small{font-size:clamp(7px,1.8vw,10px);color:#ffe4b8;opacity:1;letter-spacing:.01em}
.resource-icon{font-size:clamp(15px,4.1vw,20px);filter:drop-shadow(0 2px 1px #32180c)}
.energy-resource:focus-visible,.bottom-btn:focus-visible,.station:focus-visible,.customer button:focus-visible{outline:3px solid #fffad2;outline-offset:2px}
/* Hero camion : une vraie scène panoramique, toujours liée au niveau enregistré. */
.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:120px!important;overflow:hidden;background:none!important;position:relative;
 border-bottom:4px solid #ffc86a;box-shadow:0 4px 10px #ad5d2860;
}
.skyline:before{
 content:"";position:absolute;inset:0;background:url('assets/scene/truck-stage-0.webp') center 50%/cover no-repeat;
 filter:saturate(1.32) brightness(1.26) contrast(1.04);transform:scale(1.035);
}
.skyline.truck-stage-1:before{background-image:url('assets/scene/truck-stage-1.webp')}
.skyline.truck-stage-2:before{background-image:url('assets/scene/truck-stage-2.webp')}
.skyline.truck-stage-3:before{background-image:url('assets/scene/truck-stage-3.webp')}
.skyline.truck-stage-4:before{background-image:url('assets/scene/truck-stage-4.webp')}
.skyline.truck-stage-5:before{background-image:url('assets/scene/truck-stage-5.webp')}
.skyline:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,#4320160c 43%,#1d0c0a5b 100%);pointer-events:none}
.skyline.terrace-ready:after{background:url('assets/story/terrace_tables_premium.webp') left bottom/41% auto no-repeat,linear-gradient(180deg,transparent,#1d0c0a44);z-index:1}
.truck-caption{inset:auto 9px 9px 9px;z-index:4;filter:drop-shadow(0 2px 5px #210f09aa)}
.truck-caption span{background:linear-gradient(145deg,#3f2515e8,#73381dce);border:1.5px solid #ffd48b;border-radius:13px;padding:7px 10px;color:#fff5dc;box-shadow:inset 0 1px #fff4bd48;max-width:56%}
.truck-caption small{font-size:9px;color:#ffe59b;letter-spacing:.12em}
.truck-caption strong{font-size:12px;color:#fff7e7;max-width:100%}
.truck-caption button{
 border-radius:13px;border:2px solid #ffe598;min-height:43px;padding:6px 10px;
 color:#4a260c;text-shadow:0 1px #fffbdc;background:linear-gradient(180deg,#fff6b7 0%,#ffce53 41%,#ed902f 100%);
 box-shadow:0 4px 0 #8f4425,inset 0 2px 1px #ffffffaa,0 1px 12px #ffc04b7b;
 font-size:11px;letter-spacing:.025em;transition:transform .15s,filter .15s;
}
.truck-caption button:active{transform:translateY(2px);box-shadow:0 2px 0 #8f4425}
.upgrade-wrench{font-size:17px;color:#a94322}
/* Tickets : portraits complets, plats séparés, jauge lisible et CTA à sa place. */
.customers{padding:10px 9px 6px;gap:7px;z-index:2}
.customer{
 padding:6px 5px 7px;min-height:156px;gap:5px;position:relative;overflow:hidden;
 background:linear-gradient(160deg,#fffdf3 0%,#fff1d2 56%,#ffdab3 100%);
 border:2px solid #ffe3a3;border-radius:17px;box-shadow:0 4px 0 #b85535,0 6px 12px #822b2445,inset 0 2px 1px #fff;
}
.customer:before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,#ef6749 0 17px,#fff4d6 17px 34px);border-radius:16px 16px 0 0;opacity:.85}
.customer.ready{border-color:#72f8ac;box-shadow:0 4px #20884e,0 0 16px #52e78391,inset 0 2px #fff}
.customer-top{min-height:58px;gap:3px;align-items:center;margin-top:3px}
.customer-portrait{
 width:48%;max-width:none;height:60px;min-width:0;object-fit:contain!important;object-position:center center!important;
 background:radial-gradient(circle at 50% 30%,#fff8e8,#f7cca2);border:1px solid #e8af7a;border-radius:12px;
 box-shadow:inset 0 1px #fff9db,0 2px 2px #b8653733;
}
.customer-food{width:49%;max-width:none;height:60px;object-fit:contain!important;object-position:center;filter:drop-shadow(0 3px 3px #ae64266b)}
.customer-title{min-height:25px;font-size:clamp(9px,2.55vw,12px);line-height:1.1;color:#5d2d17;text-shadow:0 1px #fff8df}
.customer-progress-label{font-size:clamp(7px,1.8vw,9px);letter-spacing:0;color:#996040}
.customer-progress-label b{font-size:clamp(8px,2.2vw,11px);color:#208a55}
.customer-wait{height:11px;border:1px solid #b7784f;background:#ae8a74;box-shadow:inset 0 2px 4px #5b2f2f40}
.customer-wait i{background:linear-gradient(90deg,#34c86d,#a8ee60,#edfb93);box-shadow:inset 0 1px #fff8;transition:width .3s}
.customer button{min-height:31px;flex-shrink:0;border-radius:11px;color:#fffef0;text-shadow:0 1px #1c6c2e;border:1.5px solid #bbff9f;background:linear-gradient(180deg,#8afc8c,#29c75b 60%,#149943);box-shadow:0 3px 0 #137b36,inset 0 1px #fff8;font-size:clamp(9px,2.5vw,12px)}
.customer button:disabled{background:linear-gradient(180deg,#f8e5c2,#e6b98e);color:#8e5534;border-color:#e2ad78;box-shadow:0 2px 0 #b98260;text-shadow:0 1px #fff7}
/* Un compteur d'acte lisible sans noir omniprésent */
.chapter-strip{
 background:linear-gradient(155deg,#fff9e9,#ffe0af);border:2px solid #ffcf77;
 box-shadow:0 4px 0 #c56235,0 7px 14px #8c362130,inset 0 2px #fff9;
 border-radius:17px;margin:8px 9px 11px;padding:9px 50px 8px 12px;min-height:57px;
}
.chapter-strip-main{font-size:12px;color:#a23a26;text-shadow:none;gap:5px}
.chapter-strip-main strong{font-size:clamp(11px,3vw,13px);white-space:nowrap}
.chapter-strip-main span{font-size:clamp(9px,2.55vw,12px);color:#85502c}
.chapter-bar{height:12px;border:1.5px solid #dc9a5a;background:#f4c998;margin-top:7px;box-shadow:inset 0 2px 3px #bf81565c}
.chapter-bar div{background:linear-gradient(90deg,#2bbd68,#80e75b,#d3f660);box-shadow:inset 0 1px #ffffffa3,0 0 8px #4ac97180}
.story-mini{top:6px;right:6px;width:42px;height:42px;filter:drop-shadow(0 2px 1px #b65f32)}
/* La mécanique reste 5 colonnes x 7 lignes : les cases n'ont pas été rétrécies. */
.game-area{margin:0 7px;grid-template-columns:clamp(68px,20vw,92px) minmax(0,1fr);gap:6px;align-items:stretch}
.stations{
 border:3px solid #ffd67d;background:linear-gradient(155deg,#ffe2a6,#f4a56f);
 box-shadow:0 5px #bf633c,inset 0 2px #fff5ea;border-radius:20px;padding:6px 4px;gap:6px;
}
.station{border:2px solid #fff0b2;border-radius:14px;box-shadow:0 3px 0 #a95638,inset 0 2px #fff9,0 3px 9px #8e4a233b;background:linear-gradient(160deg,#ef6946,#a93630);padding:2px 1px 4px;color:#fffde9;text-shadow:0 1px 2px #59241c;overflow:visible}
.station[data-spawn="fries"]{background:linear-gradient(160deg,#ac63e8,#642db9);box-shadow:0 3px 0 #5c3286,inset 0 2px #fff9,0 3px 9px #75329b55}
.station[data-spawn="wrap"]{background:linear-gradient(160deg,#f2a04d,#d76525);box-shadow:0 3px 0 #a44c26,inset 0 2px #fff9,0 3px 9px #a04f2855}
.station[data-spawn="bowl"]{background:linear-gradient(160deg,#49ca76,#207d55);box-shadow:0 3px 0 #1b7147,inset 0 2px #fff9,0 3px 9px #216f4a55}
.station img{height:46%;width:98%;object-fit:contain;filter:drop-shadow(0 2px 2px #42100b73)}
.station b{font-size:clamp(8px,2.05vw,11px);line-height:1.02;letter-spacing:-.01em}
.station .lvl{font-size:clamp(7px,1.65vw,9px);color:#fff4c6}
.station .more{background:radial-gradient(circle at 35% 18%,#caffb4,#35dc67 55%,#19984c);border:2px solid #e9ffb4;box-shadow:0 2px 0 #086d39,0 0 9px #e9ff9baa;font-size:17px;width:25px;height:25px;right:-4px;top:-5px}
.station .gen-charge{font-size:clamp(8px,2.1vw,12px);background:#351b209c;border:1px solid #ffecae69;border-radius:7px;padding:2px 3px;color:#fffce7}
.station .gen-track{height:6px;min-height:6px;border-color:#f6d39eaa;background:#4d2621a3}
.station .gen-track i{background:linear-gradient(90deg,#69df73,#ceff6e)}
.board-shell{border:4px solid #ffde8f;border-radius:21px;padding:5px;background:linear-gradient(145deg,#f1aa61,#d6794c);box-shadow:0 5px 0 #b9623c,0 9px 17px #8a402149,inset 0 2px #fff7bf}
.board{gap:3px}
.tile{border:1.5px solid #e6ad7a;border-radius:10px;background:linear-gradient(145deg,#fff9e9 0%,#ffe9c8 55%,#ffd4a8 100%);box-shadow:inset 0 1px 2px #ffffff,0 2px 2px #b96b3d41;transition:background .15s,box-shadow .15s,transform .12s}
.tile:nth-child(5n+3){background:linear-gradient(145deg,#fffdf0,#fff0d8 55%,#ffdbb6)}
.tile img{width:89%;height:89%;object-fit:contain;filter:drop-shadow(0 2px 2px #aa582b55)}
.tile.selected{outline:3px solid #66eeb6;outline-offset:-2px;background:linear-gradient(#efffeb,#b9f1bc);box-shadow:inset 0 0 12px #63dc8170}
.tile .rank{background:linear-gradient(145deg,#814024,#472420);border:1px solid #ffda95;color:#fff5d3;border-radius:8px}
.instruction-bar{color:#713825;text-shadow:0 1px #fff6cf;font-size:clamp(9px,2.5vw,12px);font-weight:900;line-height:1.25;background:#fff0bf94;border:1px solid #ffcf83a4;border-radius:20px;margin:12px 11px 8px;padding:4px 6px;min-height:29px}
.bottom{position:sticky;bottom:0;z-index:7;padding:7px 8px calc(8px + env(safe-area-inset-bottom))!important;gap:5px;grid-template-columns:repeat(5,minmax(0,1fr));background:linear-gradient(180deg,#fff0c8dc,#f8b36dea)!important;border-top:3px solid #ffd67e;box-shadow:0 -4px 18px #743a1e42;backdrop-filter:blur(8px)}
.bottom-btn,.bottom-btn.special{height:auto;aspect-ratio:1/.95;padding:0!important;overflow:visible!important;filter:drop-shadow(0 2px 2px #91462e49)}
.bottom-btn img{filter:drop-shadow(0 3px 2px #6b2b1473);transition:transform .14s,filter .14s}
.bottom-btn:active img{transform:scale(.93) translateY(2px);filter:brightness(1.1)}
/* Menus : cartes de jeu, plutôt que fenêtres de formulaire. */
.overlay{background:radial-gradient(circle at 50% 18%,#1c2c3dd6,#080e19f2);backdrop-filter:blur(5px);padding:12px}
.overlay-body{width:min(440px,100%);max-height:92svh;padding:15px 16px 18px;background:linear-gradient(145deg,#fff9e8 0%,#ffe7bd 85%,#f8c58c);border:4px solid #ffc46b;border-radius:25px;box-shadow:0 12px 0 #7d3625,0 21px 50px #000b,inset 0 3px #ffffff;color:#532a1c}
.overlay-body h2{color:#a73f27;text-shadow:0 2px #fff9d9;font-size:22px}
.overlay-body p{font-size:13px;line-height:1.5}
.overlay-body .chapter-poster{width:min(100%,350px);max-height:55svh;object-fit:cover;border:3px solid #ffd88f;box-shadow:0 6px 0 #d17b49,0 10px 20px #7d321c70;border-radius:17px}
.menu-grid button,.modal-btn,.upgrade-card button{border:2px solid #ddffc3;border-radius:14px;background:linear-gradient(180deg,#b2ff91,#39d268 60%,#13a84e);box-shadow:0 4px 0 #158346,inset 0 2px #fff9db;color:#17482b;text-shadow:0 1px #eaffdc;font-size:12px;transition:transform .1s}
.menu-grid button:active,.modal-btn:active,.upgrade-card button:active{transform:translateY(2px);box-shadow:0 2px 0 #158346}
.menu-grid .secondary,.modal-btn.secondary{background:linear-gradient(#fff4d5,#f1b86c);border-color:#ffdc9e;box-shadow:0 4px #ad6e3c;color:#693a22}
.upgrade-card{background:#fff9e8;border:2px solid #f4ce91;box-shadow:0 3px 0 #daa16c;border-radius:16px}
.objective-row{border-color:#e9b976}
.truck-preview{border:3px solid #fbcf81;border-radius:19px;box-shadow:0 4px 0 #ba633f}
.toast{color:#fff9e6;background:linear-gradient(160deg,#a74333,#662c2b);border-color:#ffe58a}
/* Histoire : scène cinématographique existante, texte plus lisible. */
.tc-stage{box-shadow:0 0 80px #060e1c}
.tc-topline span{color:#fff3cc}.tc-dialogue{background:linear-gradient(160deg,#fffdf0f9,#ffe6bbf8);border-color:#ffda82;box-shadow:0 8px 20px #1b0d0ca8}
.tc-next{background:linear-gradient(#d6ff93,#42d664 78%,#19a755);border-color:#fff6bb}
/* Future theme Chapter 2; in Chapter 1 only this palette is live. */
.app.chapter-two{--coral:#ec7191;--sunset:#f4bd7d;--leaf:#63d58a}
.app.chapter-two .header{background:linear-gradient(180deg,#e6efb8,#b9da99 52%,#8dccac)}
.app.chapter-two .chapter-strip{background:linear-gradient(145deg,#fffce6,#e7f5c4)}
@media(max-width:390px){
 .header{padding:7px 7px 7px}.brand-line{height:68px;min-height:68px;margin-top:5px}.premium-logo{width:212px;height:70px}.header-menu{top:12px;width:40px;height:40px}
 .resources{gap:4px}.resource{min-height:36px;padding:2px 3px}.resource b{font-size:12px}.resource small{font-size:7px}.resource-icon{font-size:16px}
 .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:105px!important}
 .customers{padding:8px 6px 4px;gap:5px}.customer{padding:5px 4px 6px;gap:4px;min-height:149px}.customer-top{min-height:54px}.customer-portrait,.customer-food{height:55px}.customer-title{min-height:23px;font-size:9.5px}.customer button{min-height:29px;font-size:10px}.customer-progress-label{font-size:7.5px}
 .chapter-strip{margin:8px 6px 10px;min-height:53px;padding:7px 47px 7px 8px}.chapter-strip-main strong{font-size:10px}.chapter-strip-main span{font-size:9px}
 .game-area{margin:0 5px;grid-template-columns:clamp(66px,19.5vw,79px) minmax(0,1fr);gap:4px}.board-shell{padding:3px;border-width:3px}.stations{padding:4px 2px;gap:4px;border-width:3px}.station img{height:42%}.station b{font-size:8px}.station .gen-charge{font-size:8px}.board{gap:2.5px}
 .bottom{gap:4px;padding:6px 5px 8px!important}.bottom-btn{aspect-ratio:1/.94}.instruction-bar{font-size:9px}
}
@media(max-width:360px){.customer-title{font-size:8.7px}.customer-portrait,.customer-food{height:49px}.customer-top{min-height:49px}.customer{min-height:144px}}
@media(min-width:526px){.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:135px!important}.game-area{grid-template-columns:98px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.tile,.bottom-btn img,.truck-caption button{transition:none}}