:root{--cream:#fff1d0;--wood:#60291d;--wood-dark:#291515;--honey:#ffd56f;--orange:#ed8627;--green:#39dc54;--red:#b33024;--purple:#a13ee5;--ink:#4b2b1d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:Trebuchet MS,Arial,Helvetica,sans-serif;background:#150f18;color:white}
body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 8%,#4f2830,#150d17 75%)}
button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}
.app{width:min(100%,525px);min-height:100svh;position:relative;overflow:hidden;background:linear-gradient(180deg,#171d2e 0,#4e231a 48%,#261214 100%);border-left:2px solid #9b4c23;border-right:2px solid #9b4c23;box-shadow:0 0 45px #000c;isolation:isolate;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
.glow-beams{position:absolute;inset:0 0 auto;height:300px;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 22%,#f1a45258,transparent 27%),radial-gradient(circle at 85% 43%,#e77b3a51,transparent 28%)}
.header{position:relative;z-index:2;padding:7px 10px 6px;background:linear-gradient(180deg,#4e211f,#251322);border-bottom:3px solid #c98036;box-shadow:0 5px 10px #0005}
.brand-line{display:flex;align-items:center;justify-content:center;position:relative;gap:7px;min-height:42px}
.badge-head{font-size:27px;filter:drop-shadow(0 3px #422018)}
.wordmark{text-align:center;letter-spacing:.4px;transform:rotate(-1deg);line-height:.9;filter:drop-shadow(0 3px 1px #6a1c14)}
.wordmark span{display:block;font-weight:1000;color:#fff9ea;font-size:clamp(16px,4.5vw,23px);text-shadow:0 2px #b52218,2px 1px #ae2c18,-2px 1px #ae2c18}
.wordmark strong{display:block;color:#ffca43;font-size:clamp(23px,6.3vw,34px);font-weight:1000;text-shadow:0 2px #a62a11,2px 1px #9d3216}
.header-menu{position:absolute;right:0;top:2px;width:38px;height:38px;border-radius:12px;border:2px solid #f9cb78;background:linear-gradient(#df963f,#ac5122);color:white;font-size:22px;box-shadow:0 3px #71321b}
.resources{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:5px}
.resource{min-width:0;flex:1;display:flex;justify-content:center;align-items:center;gap:4px;border:1px solid #e1a35b;border-radius:99px;background:#35191b;color:#fff9dd;padding:5px 6px;font-size:12px;box-shadow:inset 0 1px #ffe1a93b}
.resource b{font-size:13px;white-space:nowrap}.resource small{font-size:7px;font-weight:900;opacity:.75;white-space:nowrap}.energy-resource{min-width:0}
.skyline{height:64px;position:relative;overflow:hidden;background:linear-gradient(90deg,#05152988,#10233e33),url('assets/scene/truck.webp') center 52%/cover no-repeat;border-bottom:3px solid #b36c38}
.festoon{position:absolute;top:0;left:0;width:100%;text-align:center;color:#ffe1a5;letter-spacing:10px;text-shadow:0 0 8px #ffaf37;font-size:15px}
.customers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 9px 5px;position:relative;z-index:1}
.customer{min-width:0;position:relative;border:2px solid #d9a55c;border-radius:14px;background:linear-gradient(153deg,#fff7e5,#f2c990);box-shadow:0 4px #743b22,0 7px 10px #0007;color:#55301b;padding:5px 5px 6px;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:154px}
.customer.ready{border-color:#57eb70;box-shadow:0 4px #328d38,0 0 8px #4de75977}
.customer-top{display:flex;align-items:center;justify-content:center;gap:2px;min-height:52px}
.customer-portrait{width:46%;max-width:58px;height:51px;object-fit:contain;object-position:center;border-radius:11px;background:linear-gradient(#f9ca8a,#ffe9c6);border:1px solid #d29b61;flex-shrink:0}
.customer-food{width:51%;max-width:62px;height:52px;object-fit:contain;object-position:center;flex-shrink:0;filter:drop-shadow(0 3px 2px #76472680)}
.customer-title{font-size:10.5px;font-weight:1000;text-align:center;line-height:1.05;min-height:23px;display:grid;place-items:center;overflow-wrap:normal;hyphens:none;text-transform:uppercase}
.customer-wait{height:9px;background:#6c3a2b;border-radius:9px;border:1px solid #a46f43;overflow:hidden}
.customer-wait i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff9e20,#71dc42);transition:width .25s}
.customer button{border:1px solid #c0ff8a;border-radius:9px;background:linear-gradient(#9ffb6b,#26b849 80%);font-size:10.5px;font-weight:1000;color:#143b20;min-height:30px;text-shadow:0 1px #fff7;box-shadow:0 2px #108336}
.customer button:disabled{background:linear-gradient(#e9cfa7,#bc946b);border-color:#d2ac7d;color:#6b4e33;text-shadow:none;opacity:1;box-shadow:0 2px #86603c}
.customer .served-mark{display:flex;align-items:center;justify-content:center;min-height:92px;font-size:29px;color:#39a646}
.chapter-strip{position:relative;margin:7px 9px 7px;padding:6px 44px 6px 10px;min-height:43px;border:2px solid #dc934c;border-radius:13px;background:linear-gradient(#653023,#351b1b);box-shadow:inset 0 1px #f5bc7357,0 3px #271413}
.chapter-strip-main{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:900;font-size:11px;color:#ffe6ae}.chapter-strip-main span{color:#fff3d3;font-size:10px}
.chapter-bar{height:6px;background:#231117;border-radius:12px;margin-top:5px;overflow:hidden}.chapter-bar div{height:100%;background:linear-gradient(90deg,#59d54c,#f6da47)}
.story-mini{position:absolute;right:4px;top:3px;width:34px;height:34px;border:2px solid #f7c77f;border-radius:9px;background:#bd5b31;font-size:19px}
.game-area{margin:0 7px;display:grid;grid-template-columns:clamp(66px,20vw,88px) minmax(0,1fr);gap:6px;align-items:stretch;position:relative}
.stations{background:linear-gradient(160deg,#ae6d35,#5f281e);border:3px solid #dd9c4d;border-radius:17px;padding:5px 4px;display:grid;grid-template-rows:repeat(4,1fr);gap:5px;min-height:0;box-shadow:0 5px #43231b}
.station{position:relative;min-width:0;min-height:0;border:2px solid #ffd56e;border-radius:12px;background:linear-gradient(#b85a26,#5e241b);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-shadow:0 2px #0008;box-shadow:0 2px #54271b;padding:2px}
.station:nth-child(2){border-color:#e2a8ff;background:linear-gradient(#8c44a3,#402050)}
.station:nth-child(3){border-color:#ffb667;background:linear-gradient(#b87738,#5e2d18)}
.station:nth-child(4){border-color:#95ed74;background:linear-gradient(#46913e,#21492a)}
.station img{width:96%;height:58%;object-fit:contain;filter:drop-shadow(0 3px 2px #0006);pointer-events:none}
.station b{font-size:clamp(7px,2vw,10px);line-height:1;white-space:nowrap}
.station .more{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:2px solid #e6ff9a;border-radius:50%;display:grid;place-items:center;background:#32c642;font-size:13px;line-height:1}
.board-shell{min-width:0;padding:5px;border:4px solid #d89746;border-radius:19px;background:linear-gradient(#9e542a,#71331c);box-shadow:inset 0 0 0 2px #ffdc9373,0 5px #411e15}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:3px;width:100%}
.tile{min-width:0;aspect-ratio:1;border:1px solid #d8a16e;border-radius:9px;background:linear-gradient(140deg,#ffebca,#f0c398);display:grid;place-items:center;position:relative;touch-action:none;user-select:none;cursor:pointer;box-shadow:inset 0 1px 1px #fff9}
.tile img{width:89%;height:89%;object-fit:contain;object-position:center;pointer-events:none;filter:drop-shadow(0 2px 1px #9f704f44)}
.tile .rank{position:absolute;bottom:1px;right:1px;min-width:16px;text-align:center;padding:1px 2px;border-radius:6px;background:#61341a;color:#fff2c8;font-size:9px;font-weight:1000;pointer-events:none}
.tile.selected{outline:3px solid #3aff8a;outline-offset:-3px;box-shadow:0 0 9px #6bee4d}
.tile.highlight{animation:flash .34s ease}
@keyframes flash{50%{transform:scale(1.05);filter:brightness(1.15)}}
.instruction-bar{margin:9px 10px 8px;min-height:26px;text-align:center;display:grid;place-items:center;font-size:10px;font-weight:900;color:#ffe8b3;text-shadow:0 2px #180e12}
.bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0 9px 8px}
.bottom-btn{border:2px solid #e9b768;border-radius:14px;min-width:0;min-height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(#ed9e3e,#a75122);box-shadow:0 4px #572919;color:#fff9dd;font-weight:1000;font-size:9px;text-shadow:0 2px #603322}
.bottom-btn.special{background:linear-gradient(#bb5af9,#8525bb);border-color:#ecb6ff}
.bottom-emoji{font-size:24px;line-height:1.05}
.toast{position:fixed;z-index:20;left:50%;bottom:20px;transform:translateX(-50%);width:min(400px,90vw);display:none;border:2px solid #ffd577;border-radius:13px;background:#411b1b;padding:12px;color:#fff1d4;font-size:12px;font-weight:900;text-align:center;box-shadow:0 6px 20px #0009}.toast.show{display:block}
.overlay{position:fixed;inset:0;z-index:30;background:#080a0dca;display:flex;justify-content:center;align-items:center;padding:17px}.overlay.hidden{display:none}
.overlay-body{width:min(420px,100%);max-height:88svh;overflow-y:auto;padding:19px;background:linear-gradient(#fff3d9,#edc792);border:5px solid #b66c32;border-radius:21px;color:#452519;box-shadow:0 12px 40px #000a;text-align:center}
.overlay-body h2{font-size:23px;color:#9d381c;margin:2px 0 11px}
.overlay-body p{font-size:13px;line-height:1.45;margin:8px 0 14px}
.overlay-body .muted{font-size:10px;color:#8b644e}.overlay-body .poster{font-size:47px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.menu-grid button,.modal-btn{border:2px solid #fff8b8;border-radius:12px;background:linear-gradient(#8ee95a,#1bab46);font-weight:1000;color:#154323;padding:12px;font-size:12px;min-height:44px;box-shadow:0 3px #197336}
.menu-grid .secondary,.modal-btn.secondary{background:linear-gradient(#fff0c6,#d3a566);color:#58361d;border-color:#f8d18b;box-shadow:0 3px #a36a37}
.menu-grid .disabled{opacity:.5}.progress-mini{border-radius:20px;background:#b48765;height:9px;overflow:hidden;margin:9px 0}.progress-mini>div{background:linear-gradient(90deg,#3bcb5c,#e8e140);height:100%}
.ad-demo{padding:18px;background:#402b4f;color:white;border-radius:17px;border:2px dashed #ddb7ff;font-size:13px}.ad-demo strong{display:block;font-size:14px;margin:10px}
.mini-orders{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mini-orders div{border:1px solid #dfb17d;border-radius:10px;background:#fff4df;padding:7px;font-size:10px;font-weight:bold}
.mini-orders img{width:51px;height:51px;object-fit:contain;display:block;margin:auto}
@media(max-width:390px){.header{padding:5px 8px}.skyline{height:57px}.customers{padding:7px 6px 4px;gap:4px}.customer{padding:4px 3px 5px;min-height:149px;border-radius:11px}.customer-top{min-height:48px}.customer-portrait,.customer-food{height:47px}.customer-title{font-size:9.5px}.customer button{font-size:10px;min-height:28px}.chapter-strip{margin:7px 7px;padding-left:7px}.game-area{margin:0 5px;grid-template-columns:clamp(62px,19vw,76px) minmax(0,1fr);gap:4px}.board-shell{padding:3px;border-width:3px}.stations{padding:4px 2px}.board{gap:2px}.tile{border-radius:7px}.tile img{width:88%;height:88%}.bottom{gap:5px;padding:0 6px 7px}.bottom-btn{min-height:52px;font-size:8px}.bottom-emoji{font-size:23px}.instruction-bar{margin:7px 8px}}
@media(min-width:526px){.wordmark span{font-size:23px}.wordmark strong{font-size:34px}.skyline{height:90px}.customer{min-height:172px}.customer-top{min-height:66px}.customer-portrait,.customer-food{height:65px}.customer-title{font-size:12px}.game-area{grid-template-columns:98px minmax(0,1fr)}.bottom-btn{min-height:66px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* CHAPITRE 1 : camion évolutif, ateliers améliorables et fiches clients non recadrées. */
.skyline{height:105px!important;background-image:url('assets/scene/truck-stage-0.webp')!important;background-position:center 47%;background-size:cover;border-bottom:3px solid #ffc066}
.skyline.truck-stage-1{background-image:url('assets/scene/truck-stage-1.webp')!important}
.skyline.truck-stage-2{background-image:url('assets/scene/truck-stage-2.webp')!important}
.skyline.truck-stage-3{background-image:url('assets/scene/truck-stage-3.webp')!important}
.truck-caption{position:absolute;inset:auto 8px 7px 8px;display:flex;gap:8px;align-items:center;justify-content:space-between;z-index:2;filter:drop-shadow(0 2px 3px #0009)}
.truck-caption span{display:flex;flex-direction:column;background:#211518d9;border:1px solid #d59959;border-radius:9px;padding:3px 9px;color:#fff4cb;min-width:0}
.truck-caption small{font-size:9px;letter-spacing:.1em;color:#ffc65d;font-weight:900}
.truck-caption strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.truck-caption button{min-height:33px;padding:4px 9px;white-space:nowrap;background:linear-gradient(#e3a34b,#a94b1f);border:2px solid #ffdc8b;border-radius:10px;color:white;font-size:10px;font-weight:1000;text-shadow:0 1px #592c1c}
.bottom{grid-template-columns:repeat(5,minmax(0,1fr))}.bottom-btn{font-size:8px;min-height:54px}.bottom-emoji{font-size:21px}
.customer-portrait{object-fit:contain!important;background:#ffebc9}
.station .lvl{display:block;color:#ffe49c;font-size:9px;line-height:1;white-space:nowrap}
.station .more{background:linear-gradient(#c2fc77,#26af40)}
.stage-illustration{display:block;width:100%;aspect-ratio:960/470;object-fit:cover;object-position:center;border:3px solid #c78d4a;border-radius:13px;margin:10px auto 12px}
.upgrade-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;background:#fff3d9;border:1px solid #d9a46f;border-radius:12px;margin:9px 0;padding:10px;text-align:left}
.upgrade-card strong{font-size:13px}.upgrade-card p{font-size:11px;margin:4px 0 0}.upgrade-card button{border:2px solid #fff1a0;border-radius:11px;background:linear-gradient(#8beb54,#2ca73c);padding:8px;font-weight:950;color:#204724;font-size:11px;min-width:92px;min-height:44px}
.upgrade-card button:disabled{opacity:.55;filter:grayscale(.45)}
.objective-row{display:flex;justify-content:space-between;padding:7px 3px;font-size:12px;border-bottom:1px dashed #c39b65}
@media(max-width:390px){.skyline{height:96px!important}.bottom-btn{font-size:7px}.bottom-emoji{font-size:18px}.bottom{gap:3px;padding:0 5px}}

/* SAISON 1, CHAPITRE 2 — décors séparés, jamais de grille ni commandes incrustées. */
.app.chapter-two{background:linear-gradient(180deg,rgba(22,16,31,.35),rgba(56,29,27,.88) 41%,rgba(26,13,18,.96) 100%),url('assets/scene/chapter2-decor.webp') center 5% / cover no-repeat;}
.app.chapter-two .header{background:linear-gradient(170deg,#603027,#371823);border-bottom-color:#f1b65b}
.app.chapter-two .chapter-strip{background:linear-gradient(150deg,#744324,#401b18);border-color:#e4ad5b}
.app.chapter-two .board-shell{background:linear-gradient(#ad6535,#743921);box-shadow:inset 0 0 0 2px #ffe8a5a6,0 5px #411e15}
.skyline.truck-stage-4,.skyline.truck-stage-5{background-size:cover!important;background-position:center 47%!important}
.skyline.truck-stage-4{background-image:url('assets/scene/truck-stage-4.webp')!important}
.skyline.truck-stage-5{background-image:url('assets/scene/truck-stage-5.webp')!important}
.chapter-poster{display:block;width:min(100%,290px);max-height:46svh;margin:8px auto 14px;object-fit:contain;border:3px solid #e1a66b;border-radius:14px;box-shadow:0 5px 14px #45220b66}
.story-scene-thumb{display:block;width:100%;max-height:37svh;object-fit:cover;object-position:center 37%;border:3px solid #ddb070;border-radius:13px;margin:8px auto 12px}
.story-entry{display:flex;align-items:start;gap:9px;text-align:left;border:1px solid #d5a874;border-radius:12px;padding:9px;margin:6px 0;background:#fff7e7}
.story-entry span{font-size:24px}.story-entry p{margin:4px 0 0;font-size:11px}
.customer-portrait{object-fit:contain!important;object-position:center center!important}
.customer-food{object-fit:contain!important}
@media(max-width:390px){.customer-portrait{width:45%;max-width:52px}.customer-food{width:52%;max-width:57px}}

/* === RÉNOVATION 3D : chaque achat dévoile l'étape suivante === */
.truck-preview{position:relative;overflow:hidden;border:3px solid #d49b63;border-radius:17px;background:linear-gradient(130deg,#ffdec7,#f3cfc0);box-shadow:0 7px 16px #66331944;margin:10px auto 12px}
.truck-preview img{display:block;width:100%;aspect-ratio:780/500;object-fit:contain}
.truck-preview-caption{position:absolute;left:8px;bottom:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#4f241ddc;border-radius:8px;padding:7px;color:#fff4cb;font-size:11px}
.truck-preview-caption b{font-size:10px;color:#ffda75;white-space:nowrap}
.truck-preview-button{display:block;width:100%;background:linear-gradient(180deg,#ffde84,#d99035);color:#5a2813;border:2px solid #fff2bd;border-radius:11px;padding:10px 6px;margin:12px auto;font-size:12px;font-weight:1000;box-shadow:0 4px #ae5b20;cursor:pointer}
.upgrade-cinema{margin:-5px;text-align:center}.upgrade-cinema>h2{font-size:22px;line-height:1.13;margin:5px 0 10px}
.cinema-eyebrow{font-size:11px;letter-spacing:.16em;color:#a96014;font-weight:1000}
.cinema-levels{display:flex;justify-content:center;align-items:center;gap:18px;font-size:11px;color:#74462c;font-weight:1000;margin:8px 0}
.cinema-levels span:nth-child(2){color:#df7e17;font-size:19px}
.cinema-visual{position:relative;isolation:isolate;width:100%;aspect-ratio:780/500;border:3px solid #d99b44;border-radius:18px;overflow:hidden;background:#f3d4cb;box-shadow:inset 0 0 0 2px #fff8,0 8px 21px #50230f66}
.cinema-before,.cinema-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .68s ease, transform 1.15s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cinema-before{opacity:1;transform:scale(1)}.cinema-after{opacity:0;transform:scale(.87)}
.cinema-visual.is-revealed .cinema-before{opacity:0;transform:scale(1.08)}
.cinema-visual.is-revealed .cinema-after{opacity:1;transform:scale(1)}
.cinema-orbit{position:absolute;inset:-15%;pointer-events:none;border:6px solid #ffdd73;box-shadow:0 0 15px #ffd14c,0 0 40px #ffe68180,inset 0 0 32px #ffdd55b3;border-radius:50%;opacity:0;transform:rotate(-30deg) scale(.3);z-index:3}
.cinema-visual.is-building .cinema-orbit{animation:truck-orbit 1.7s ease-in-out forwards}
.cinema-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff7ae 0%,#fabb12d9 24%,#fff5aa44 65%,transparent 80%);opacity:0;pointer-events:none;z-index:4}
.cinema-visual.is-building .cinema-flash{animation:truck-flash 1.8s ease-in-out .1s forwards}
.cinema-stars{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.cinema-star{position:absolute;left:var(--cx);top:var(--cy);color:#fff1ab;font-size:23px;text-shadow:0 0 8px #ffbe28,0 0 16px #ffcb29;opacity:0}
.cinema-visual.is-building .cinema-star{animation:truck-star .9s ease-in-out var(--delay) both}
.cinema-status{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;background:#3e251de0;color:#fff7ce;border:1px solid #ffe48a;border-radius:999px;padding:5px 12px;font-size:10px;font-weight:1000;z-index:6;letter-spacing:.06em}
.cinema-result{margin:10px 0 5px;color:#954013;font-size:17px}.cinema-benefit{min-height:33px;color:#7e472c;margin:0 0 10px!important;font-size:12px!important;font-weight:650}
.cinema-action{width:100%}.cinema-action:disabled{opacity:.65;filter:grayscale(.25);cursor:wait}
@keyframes truck-orbit{0%{opacity:0;transform:rotate(-25deg) scale(.35)}30%{opacity:1}75%{opacity:1}100%{opacity:0;transform:rotate(310deg) scale(1.2)}}
@keyframes truck-flash{0%,30%{opacity:0}53%{opacity:.9}74%{opacity:.5}100%{opacity:0}}
@keyframes truck-star{0%{opacity:0;transform:scale(.1) rotate(0)}30%,75%{opacity:1;transform:scale(1.3) rotate(65deg)}100%{opacity:0;transform:scale(.4) translateY(-18px)}}
.workshop-visual{position:relative;max-width:275px;margin:auto;background:radial-gradient(circle at 50% 30%,#fff2a1,#e48b2f);border:5px solid #f4c871;border-radius:25px;padding:12px;box-shadow:0 0 25px #ffc95880}
.workshop-visual img{width:min(220px,100%);height:170px;object-fit:contain;filter:drop-shadow(0 6px 5px #6c311d80);animation:workshop-level .85s ease-out}
.workshop-visual b{display:block;background:#6b261c;color:#fff3bc;border-radius:10px;margin-top:4px;padding:7px;font-size:14px}
.workshop-spark{position:absolute;top:2px;right:3px;color:#fff6a6;font-size:25px;text-shadow:0 0 12px #ff8a00;animation:workshop-shine 1.1s infinite alternate}
@keyframes workshop-level{0%{transform:scale(.5) rotate(-6deg);filter:brightness(2)}65%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1)}}
@keyframes workshop-shine{from{opacity:.3;transform:rotate(-8deg)}to{opacity:1;transform:rotate(7deg)}}
.station-level-2{border-color:#e5c760!important}.station-level-3{box-shadow:inset 0 0 0 2px #fff6ae,0 0 11px #ffe15c88!important}
.station-level-4{border-color:#82ecdf!important;box-shadow:0 0 11px #48e4e8b8!important}.station-level-5{border-color:#fee779!important;box-shadow:0 0 14px #fbd43b!important}
@media(max-width:390px){.upgrade-cinema>h2{font-size:20px}.cinema-eyebrow{font-size:10px}.truck-preview-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.cinema-before,.cinema-after{transition:none}.cinema-orbit,.cinema-flash,.cinema-star,.workshop-visual img,.workshop-spark{animation:none!important}}

/* VERSION PREMIUM : lisibilité client, ateliers et effets de fusion tactile. */
.customer{background:linear-gradient(155deg,#fffdf0 0%,#ffe2a8 76%,#edb77d 100%);border-color:#ffd894;box-shadow:0 3px #904a2a,0 7px 13px #0007,inset 0 1px #fff9}
.customer-progress-label{display:flex;align-items:center;justify-content:space-between;font-size:7.5px;line-height:1;letter-spacing:.025em;color:#6c3e27;font-weight:1000;padding:0 2px}
.customer-progress-label b{font-size:9px;color:#307c36}
.customer-wait{height:11px;box-shadow:inset 0 1px 4px #73351a70}
.customer-wait i{background:linear-gradient(90deg,#d2ac2b,#7cde37,#25b959);box-shadow:inset 0 1px #fff8}
.customer.ready .customer-wait{outline:1px solid #49cb54}
.customer.ready .customer-progress-label b{color:#098c37}
.customer.delivery-success{animation:customer-delivered .8s ease}
@keyframes customer-delivered{0%,100%{filter:none}30%,60%{filter:brightness(1.4);transform:translateY(-2px)}}
.tile{background:linear-gradient(145deg,#fff4d9,#f9d5ad 68%,#edb98f);border-color:#dfaa76;box-shadow:inset 0 1px 2px #fffc,0 2px 2px #83411c30}
.tile.merge-success{animation:fx-tile-merge .65s cubic-bezier(.16,.7,.2,1);z-index:2}
@keyframes fx-tile-merge{0%{transform:scale(.65);filter:brightness(2.2)}45%{transform:scale(1.16);box-shadow:0 0 0 5px #ffe5639a,0 0 18px #ffbc3e}100%{transform:scale(1);filter:brightness(1)}}
.station{transition:transform .13s,filter .13s;box-shadow:inset 0 1px #fff5,0 3px #4e221a}
.station:active{transform:scale(.94)}.station.just-produced{animation:station-pulse .42s ease}
@keyframes station-pulse{50%{filter:brightness(1.45);transform:scale(1.055)}}
.station-level-3 .more,.station-level-4 .more,.station-level-5 .more{background:linear-gradient(#fff9a2,#ffac25);color:#673019;border-color:#ffe66d}
.fx-layer{position:fixed;inset:0;z-index:26;overflow:hidden;pointer-events:none}
.fx-spark{position:absolute;width:8px;height:8px;margin:-4px;border-radius:3px;background:radial-gradient(circle,#fff9e5 0%,#ffe15b 45%,#ff9727 75%);box-shadow:0 0 9px #ffe05a;animation:fx-spark-out .82s ease-out forwards}
@keyframes fx-spark-out{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}22%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(170deg) scale(.2)}}
.fx-float{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:#fffde8;text-shadow:-1px -1px #6c3016,1px 1px #6c3016,0 2px 7px #000;letter-spacing:.04em;font-size:clamp(12px,3.5vw,17px);font-weight:1000;animation:fx-float-up 1s ease-out forwards}
.fx-gold{color:#ffe065}.fx-purple{color:#e8b5ff}
@keyframes fx-float-up{0%{opacity:0;transform:translate(-50%,-35%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.fx-flying,.fx-drag-ghost{position:fixed;transform:translate(-50%,-50%);pointer-events:none;object-fit:contain;filter:drop-shadow(0 5px 9px #391900ad)}
.fx-drag-ghost{width:64px;height:64px;z-index:27;opacity:.88;filter:drop-shadow(0 8px 13px #201006ad) drop-shadow(0 0 7px #ffe065)}
@media(max-width:390px){.customer-progress-label{font-size:7px}.customer-progress-label b{font-size:8px}.customer-wait{height:9px}.fx-drag-ghost{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.tile.merge-success,.station.just-produced,.customer.delivery-success{animation:none!important}}


/* V3 — Assets premium validés (sprites individuels, pas d'interface figée). */
.header{padding:4px 9px 6px;background:linear-gradient(180deg,#5d2722 0%,#3c1a20 100%);border-bottom:3px solid #d99a45}
.brand-line{height:74px;min-height:74px;display:flex;justify-content:center;align-items:center}
.premium-logo{height:74px;width:min(235px,70%);object-fit:contain;filter:drop-shadow(0 4px 5px #1d0d0ca8)}
.header-menu{width:44px;height:48px;right:0;top:13px;padding:0;border:0;background:transparent;box-shadow:none}
.header-menu img{height:100%;width:100%;object-fit:contain}
.resources{gap:6px;margin-top:1px}
.resource{border:2px solid #efb862;border-radius:999px;background:linear-gradient(180deg,#673222,#34151e 65%,#2b1520);box-shadow:inset 0 1px #ffe39e5c,0 2px #21100d;padding:2px 5px;min-height:37px;display:flex;align-items:center;justify-content:center;gap:3px}
.resource-icon{font-size:19px;line-height:1.1;filter:drop-shadow(0 2px 1px #3e170f)}
.resource b{color:#ffedc1;font-size:clamp(10px,3vw,15px)}.resource small{font-size:clamp(7px,1.8vw,9px);color:#f9d9a3}
.chapter-strip{background:linear-gradient(180deg,#8b3a22,#44171c 72%,#32151b);border:3px solid #eeb055;box-shadow:inset 0 2px #fff4a4,0 3px #29120e;border-radius:18px;min-height:55px;padding:9px 46px 8px 12px}
.chapter-strip-main{font-size:12px;color:#fff2cf;text-shadow:0 1px 2px #32100d}.chapter-strip-main span{color:#ffe3a0;font-size:11px}
.chapter-bar{height:11px;background:#31191f;border:1px solid #a9764f;margin-top:6px}.chapter-bar div{background:linear-gradient(90deg,#41c445,#84e938,#d8ec36);box-shadow:inset 0 1px #ffffff6e}
.story-mini{top:4px;right:4px;width:42px;height:42px;border:0;background:none;padding:0;box-shadow:none}.story-mini img{width:100%;height:100%;object-fit:contain}
.bottom{background:transparent!important;gap:3px;padding:4px 6px 8px!important;grid-template-columns:repeat(5,minmax(0,1fr))}
.bottom-btn,.bottom-btn.special{min-width:0;min-height:0;height:auto;aspect-ratio:1 / .88;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;border-radius:0;display:block;transition:transform .15s;overflow:visible}
.bottom-btn:active{transform:scale(.93)}.bottom-btn img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #2a120abb)}
.truck-caption button{background:linear-gradient(#f5d98a 0%,#f8ac32 45%,#bd661f 100%);border:2px solid #ffde9a;box-shadow:0 3px #622713,inset 0 1px #fffae0;font-size:11px;text-shadow:0 1px #80411e;padding:5px 10px;border-radius:12px}
.upgrade-wrench{font-size:17px;vertical-align:-2px;display:inline-block;margin-right:3px}
.station{gap:1px;padding:3px 1px 4px;position:relative;overflow:hidden}
.station img{width:94%;height:42%;object-fit:contain}
.station b{font-size:clamp(7px,1.95vw,10px)}.station .lvl{font-size:8px}.station .more{z-index:2}
.station .gen-charge{display:block;font-size:clamp(8px,2.1vw,11px);font-weight:1000;color:#fff2bc;text-shadow:0 1px #3e1a08;line-height:1.2;background:#391a1ac9;border-radius:5px;padding:1px 3px;min-width:80%}
.station .gen-track{display:block;width:87%;height:5px;min-height:5px;border-radius:8px;background:#2c1720;border:1px solid #b18158;overflow:hidden}
.station .gen-track i{display:block;height:100%;background:linear-gradient(90deg,#37b64e,#bbf844);transition:width .25s}
.station.station-empty{filter:saturate(.55)}.station.station-empty .gen-charge{background:#8b2925;color:#ffebc6}.station.station-empty .more{background:#a16a38;color:#fff}
.generator-perk{background:#fff2d1;padding:10px;border-radius:11px;border:1px solid #c88c44;font-size:12px}
@media(max-width:390px){.brand-line{height:65px;min-height:65px}.premium-logo{height:68px;width:205px}.header-menu{top:10px;width:40px;height:42px}.resource{padding:2px 3px;min-height:34px}.resource small{font-size:7px}.resource-icon{font-size:15px}.chapter-strip{min-height:54px;padding-left:9px;padding-top:8px}.chapter-strip-main{font-size:10px}.chapter-strip-main span{font-size:9px}.station img{height:40%}.station .gen-charge{font-size:8px}.bottom{padding:3px 5px 7px!important}.bottom-btn{aspect-ratio:1/.87}}


/* CHRONIQUES · Terrasse : scène cinématique immersive. Aucun panneau de formulaire HTML. */
.terrace-cinema{position:fixed;inset:0;z-index:200;background:#0c0810ee;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;padding:0}
.terrace-cinema.hidden{display:none}
.tc-stage{width:min(100vw,430px);height:min(100svh,840px);min-height:min(620px,100svh);overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;background:#171323 url('assets/story/terrace_village_scene.webp') 50% 26%/cover no-repeat;box-shadow:0 0 65px #000}
.tc-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#050e1d30 0%,#26131a0b 20%,#190a0bc9 70%,#1d0d12 100%)}
.tc-topline{position:absolute;top:calc(env(safe-area-inset-top) + 17px);left:15px;right:15px;display:flex;flex-direction:column;align-items:center;gap:7px;font-weight:1000;filter:drop-shadow(0 3px 4px #000);text-shadow:0 2px 5px #000;letter-spacing:.13em;pointer-events:none}
.tc-topline span{color:#ffdb8d;font-size:12px}.tc-topline b{color:#fff8e3;font-size:11px;border:1px solid #fddda088;background:#46231eaa;padding:6px 12px;border-radius:30px}
.tc-scenery{position:absolute;left:0;right:0;top:14%;height:47%;pointer-events:none}
.tc-terrace-prop{position:absolute;bottom:-11%;width:111%;left:-5%;height:auto;object-fit:contain;opacity:0;transform:translateY(120%) scale(.7);filter:drop-shadow(0 16px 8px #160a0aab);transition:transform 1.35s cubic-bezier(.15,.85,.19,1),opacity .6s}
.tc-stage.tc-building .tc-terrace-prop,.tc-stage.tc-completed .tc-terrace-prop{opacity:1;transform:translateY(0) scale(1)}
.tc-glimmer{position:absolute;opacity:0;top:20%;color:#fff9a5;font-size:33px;text-shadow:0 0 12px #ffd52a;animation:tc-twinkle 1.7s infinite alternate}
.tc-glimmer-one{left:16%}.tc-glimmer-two{left:54%;top:33%;animation-delay:.2s}.tc-glimmer-three{right:7%;top:17%;animation-delay:.6s}
.tc-stage.tc-building .tc-glimmer,.tc-stage.tc-completed .tc-glimmer{opacity:1}
@keyframes tc-twinkle{from{transform:scale(.7) rotate(-18deg);opacity:.3}to{transform:scale(1.25) rotate(16deg);opacity:1}}
.tc-dialogue{z-index:2;margin:0 14px 12px;display:flex;align-items:flex-end;gap:11px;border-radius:20px;padding:12px 14px;background:linear-gradient(145deg,#fff8e9f5,#ffd9a7f2);border:3px solid #f2ad53;box-shadow:0 8px 20px #160b0cbb,inset 0 1px #fff;min-height:134px;color:#47261b;animation:tc-dialogue-in .28s ease-out}
@keyframes tc-dialogue-in{from{transform:translateY(8px);opacity:.7}to{transform:none;opacity:1}}
.tc-portrait-frame{width:106px;height:112px;flex:0 0 106px;overflow:hidden;border:3px solid #f8d698;background:linear-gradient(155deg,#fff9e3,#edbb7e);border-radius:16px;box-shadow:0 3px #bb6d3a}
.tc-portrait-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.tc-copy{flex:1;min-width:0;align-self:center;text-align:left}
.tc-copy span{display:inline-block;color:#a32c20;font-size:14px;letter-spacing:.09em;font-weight:1000;margin-bottom:5px}
.tc-copy p{margin:0;color:#4c2a1a;font-size:clamp(13px,3.5vw,17px);font-weight:800;line-height:1.32}
.tc-next{z-index:2;border:2px solid #ffec95;background:linear-gradient(#adf16f,#2cbd4e 76%,#189034);box-shadow:0 4px #0f6630,inset 0 2px #f7ffc7;border-radius:18px;color:#163819;font-size:17px;font-weight:1000;min-height:53px;padding:9px 23px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 20px 10px;text-shadow:0 1px #fff5}
.tc-next span{font-size:29px}.tc-next[disabled]{opacity:.7}
.tc-footnote{text-align:center;color:#fff4cd;font-weight:900;letter-spacing:.12em;font-size:9px;margin:0 0 calc(15px + env(safe-area-inset-bottom));text-shadow:0 2px #000}
.tc-endnote{position:relative;z-index:4;text-align:center;margin:0 19px 12px;background:linear-gradient(#4c291fe6,#361a19ed);padding:16px;border:2px solid #ffdc79;border-radius:20px;color:#fff4df;box-shadow:0 8px 23px #0008}
.tc-endnote span{display:block;font-size:10px;letter-spacing:.1em;color:#ffe47b}.tc-endnote strong{display:block;font-size:27px;color:#ffef8a;margin-top:4px}.tc-endnote p{font-size:12px;line-height:1.42;margin:8px 0 0}
.tc-stage.tc-completed .tc-dialogue{display:none}
.tc-stage.tc-completed .tc-endnote{display:block}
.tc-stage.tc-building .tc-dialogue{display:none}
.skyline.terrace-ready:after{content:"";position:absolute;width:47%;height:78%;left:-3%;bottom:-8%;pointer-events:none;background:url('assets/story/terrace_tables_premium.webp') center bottom / contain no-repeat;z-index:1;filter:drop-shadow(0 3px 2px #4f1b12)}
.skyline.terrace-ready .truck-caption{z-index:3}
@media(max-width:360px){.tc-portrait-frame{width:86px;height:97px;flex-basis:86px}.tc-dialogue{padding:9px;min-height:111px}.tc-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.tc-terrace-prop,.tc-glimmer{transition:none;animation:none}}