@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{--gold:#f5c859;--cream:#f6ead0;--red:#782d27;--dark:#242725}*{box-sizing:border-box}body{margin:0;background:#222624;background-image:radial-gradient(ellipse at 50% 0,#455044,#222624 70%);color:var(--cream);font:13px Inter,Arial,sans-serif;min-height:100dvh}button{font:inherit;cursor:pointer;touch-action:manipulation}header{max-width:1440px;margin:auto;padding:25px 28px 22px;display:flex;align-items:center;gap:34px}.logo{font:900 42px 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;text-decoration:none;color:var(--cream);line-height:.8;transform:skew(-6deg)}.logo span{color:var(--gold);font-size:30px;margin:0 3px}.logo small{display:block;font:600 10px Inter,sans-serif;letter-spacing:4.4px;margin-top:10px;transform:skew(6deg)}.intro{font:600 13px 'Barlow Condensed';letter-spacing:2px;color:#d9cdb4;border-left:1px solid #ffffff24;padding-left:25px}.intro span{display:block;font:11px Inter;letter-spacing:0;color:#96a195;margin-top:6px}.game{max-width:1384px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 268px;border:6px solid #121815;border-radius:9px;box-shadow:0 15px 50px #0008;overflow:hidden}.showroom{position:relative;min-width:0;aspect-ratio:1.46;background:#686353;overflow:hidden}canvas{width:100%;height:100%;display:block}.topline{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;font:600 10px Inter;letter-spacing:1.2px;text-shadow:0 1px 4px #000}.topline>span{background:#1b2922c9;border:1px solid #b3b99a44;border-radius:3px;padding:8px 10px}.live{color:#d8dac5}.live i{display:inline-block;width:5px;height:5px;background:#e5b958;border-radius:50%;margin:0 6px 1px 0}.sceneCaption{position:absolute;top:69px;left:28px;font:700 35px 'Barlow Condensed';color:#f5e8cb;text-shadow:0 2px 8px #0008;letter-spacing:.3px}.sceneTools{position:absolute;bottom:70px;left:20px;display:flex;gap:6px}.sceneTools button,.sceneFoot button{border:1px solid #d9c88b88;border-radius:3px;background:#28382de8;color:#efe6ce;padding:9px 12px;font:700 11px 'Barlow Condensed';letter-spacing:.8px;min-height:38px}.sceneTools button[aria-pressed=true]{background:#c59e45;color:#201d13}.sceneFoot{position:absolute;bottom:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;background:#1c2b22f5;border-top:1px solid #f9e9ac33;padding:0 20px;font:700 17px 'Barlow Condensed';letter-spacing:1px}.sceneFoot small{margin-left:12px;font:9px Inter;letter-spacing:1px;color:#a9b49f}.counter{background:linear-gradient(100deg,#a64635,#823329 60%,#672923);border-left:4px solid #2e241d;display:flex;flex-direction:column}.panelhead{padding:18px 15px 14px;background:#532a22;border-bottom:2px solid #d1a04b;color:var(--cream);display:flex;align-items:center;gap:12px;font:800 27px 'Barlow Condensed'}.panelhead>span{font-size:34px;color:#d9b66c;border-right:1px solid #e7c99a55;padding-right:12px}.panelhead small{display:block;font:8px Inter;letter-spacing:.5px;margin-top:3px;color:#d7bda0}.row{min-height:70px;padding:10px 13px 8px;border-bottom:1px solid #381c18;box-shadow:0 1px 0 #d08f5f44;display:grid;grid-template-columns:1fr 79px;align-items:center;gap:4px}.row h3{font:600 21px 'Barlow Condensed';margin:0 0 4px;text-shadow:0 1px 1px #451a15}.row small{display:block;font:10px Inter;color:#edc9a6;line-height:1.2}.arrows{display:flex;gap:1px}.arrow{width:39px;height:39px;border:0;padding:0;background:none;filter:drop-shadow(1px 2px 0 #1e160f);transition:transform .1s}.arrow:hover{transform:scale(1.1)}.arrow:active{transform:scale(.91)}.arrow svg{width:100%;height:100%;display:block}.swatch{display:inline-block;width:9px;height:9px;margin-right:5px;border:1px solid #ffffff70;border-radius:2px;vertical-align:middle}.extras{margin-top:auto;background:#382e26}.extras .row{padding-top:9px;padding-bottom:9px;min-height:59px;border-bottom:1px solid #7b6243}.extras .row h3{font-size:18px}.music{padding:10px 13px}.musicLabel{display:flex;justify-content:space-between;align-items:center;font:700 19px 'Barlow Condensed'}.musicLabel small{font:8px Inter;letter-spacing:1px;color:#bca58a}#musicButtons{display:flex;gap:5px;margin-top:7px}#musicButtons button{flex:1;min-height:31px;background:#232e24;border:1px solid #66754e;border-radius:3px;color:#d7d9b5;font:bold 12px Inter}#musicButtons button.selected{background:var(--gold);border-color:#ffdf7e;color:#3b2c13}.vol{display:flex;align-items:center;gap:8px;font-size:8px;color:#c5b290;margin-top:8px}.vol input{width:100%;height:10px;accent-color:var(--gold)}.actions{display:flex;gap:5px;padding:10px 12px;background:#2e271f}.actions button{flex:1;border:1px solid #b18a43;border-radius:3px;min-height:34px;font:700 12px 'Barlow Condensed';background:linear-gradient(#edd49a,#b19458);color:#312516}.actions button:last-child{background:#4e3329;color:#e9c991}.shopStamp{text-align:center;padding:9px;font:8px Inter;letter-spacing:1.1px;color:#bc9c78;background:#2e271f}.shopStamp span{color:var(--gold);padding:0 5px}footer{max-width:1384px;margin:15px auto;padding:0 3px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#89948a}#loading{position:absolute;left:0;right:0;top:45%;text-align:center;font:600 23px 'Barlow Condensed';color:var(--cream)}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:12px 22px;border-radius:4px;background:var(--gold);color:#332512;box-shadow:0 3px 20px #0005;font-size:12px;z-index:10;display:none}dialog{max-width:480px;border:3px solid #967946;border-radius:8px;background:#273429;color:#efe5cf;padding:25px;font-size:13px;line-height:1.7}dialog::backdrop{background:#0009}dialog button{float:right;background:none;border:0;color:var(--gold)}dialog h2{font:700 30px 'Barlow Condensed'}button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(min-width:1000px){.showroom{aspect-ratio:auto;min-height:660px}}
@media(max-width:1440px){.game{margin:0 20px}footer{margin:15px 22px}}
@media(max-width:900px){.game{grid-template-columns:minmax(0,1fr) 222px}.row{padding:8px 10px;min-height:63px;grid-template-columns:1fr 74px}.row h3{font-size:19px}.row small{font-size:9px}.panelhead{font-size:24px;padding:12px 10px}.panelhead small{font-size:7px}.sceneFoot small{display:none}.sceneCaption{font-size:27px}.live{display:none}.showroom{aspect-ratio:auto;min-height:610px}.sceneTools{left:10px}.sceneTools button{padding:7px}}
@media(max-width:650px){header{padding:19px 18px 17px}.logo{font-size:34px}.logo small{font-size:8px;letter-spacing:3.8px}.intro{display:none}.game{margin:0 9px;display:block;border-width:4px}.showroom{aspect-ratio:1.3;min-height:0;position:sticky;top:0;z-index:4}.sceneCaption{top:50px;left:18px;font-size:26px}.topline{top:10px;left:10px;font-size:8px}.sceneFoot{height:42px;padding:0 12px;font-size:13px}.sceneFoot button{min-height:30px;font-size:10px;padding:7px}.sceneTools{bottom:51px;gap:4px}.sceneTools button{min-height:31px;font-size:9px}.counter{border-left:0;border-top:4px solid #2b211a}.panelhead{padding:10px 15px;font-size:23px}.panelhead>span{font-size:25px}.panelhead small{font-size:7px}#options{display:grid;grid-template-columns:1fr 1fr}.row{padding:10px;min-height:73px;grid-template-columns:minmax(0,1fr) 62px;border-right:1px solid #51231b}.row h3{font-size:18px}.arrow{width:31px;height:36px}.row small{font-size:9px}.extras{display:grid;grid-template-columns:1fr 1fr}.extras .row{height:100%;grid-template-columns:1fr 62px}.music{border-left:1px solid #63513c}.musicLabel{font-size:15px}.musicLabel small{font-size:7px}.actions button{min-height:42px;font-size:14px}.shopStamp{padding:10px}footer{display:block;text-align:center;line-height:1.9;margin:12px 20px}footer span{display:block}}
@media(prefers-reduced-motion:reduce){.arrow{transition:none}}
.game{grid-template-columns:minmax(0,1fr) 300px}.showroom{height:760px}.counter{height:760px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d0ab61 #522b22}.row{min-height:61px;grid-template-columns:minmax(0,1fr) 81px}.row h3{font-size:19px}.row small{font-size:9px}.row .rowtitle{display:flex;align-items:center;gap:7px}.colorButton{border:1px solid #ecd3a8;border-radius:3px;width:22px;height:22px;padding:0;box-shadow:inset 0 0 0 2px #0004;flex-shrink:0}.colorButton:hover{outline:2px solid #ffe2a6}.truckselect{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#2d382a;border-bottom:2px solid #ad8c47}.truckselect div{flex:1;text-align:center}.truckselect strong{display:block;font:700 22px 'Barlow Condensed'}.truckselect small{font-size:8px;color:#c2c5ab;letter-spacing:1px}.panelhead{padding:12px 14px}.panelhead small{font-size:7px}.extras{margin-top:0}.sceneFoot{height:58px}.sceneTools{bottom:72px}.colorDialog{width:340px;padding:22px;background:#202b25}.colorDialog h2{margin:0 0 14px;font-size:25px}.colorDialog .colorclose{float:right;background:none;color:#e5cf99;border:0;min-height:30px}.svwrap{position:relative}.svwrap canvas{width:100%;height:190px;touch-action:none;border-radius:4px;cursor:crosshair}.hueslider{width:100%;height:18px;margin:16px 0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);appearance:none;border-radius:10px}.hueslider::-webkit-slider-thumb{appearance:none;background:#fff;width:18px;height:23px;border:2px solid #333;border-radius:5px}.colorfields{display:flex;gap:10px;align-items:center}.colorfields label{font-size:10px;letter-spacing:1px}.colorfields input{width:115px;border:1px solid #8b947c;background:#344034;color:#fff;font:13px monospace;padding:9px}.colorfields #colorPreview{width:36px;height:36px;border:1px solid #fff6;border-radius:4px}.quickcolors{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.quickcolors button{width:25px;height:25px;border-radius:4px;border:1px solid #fff6}.colorDone{width:100%;padding:11px;background:var(--gold);border:0;border-radius:4px;font-weight:bold}.optiontoggle{padding:8px;background:#30392a;border:1px solid #ada176;color:#ece1bf;font-size:9px;margin-top:6px;border-radius:3px}.counter .panelhead{position:sticky;top:0;z-index:2}#pause:disabled{opacity:.5}#stage{touch-action:manipulation}
@media(max-width:1000px){.game{grid-template-columns:minmax(0,1fr) 260px}.showroom,.counter{height:710px}.row h3{font-size:18px}.sceneCaption{font-size:30px}}
@media(max-width:650px){.game{display:block}.showroom{height:auto;aspect-ratio:1.28;min-height:0}.counter{height:auto;overflow:visible}.counter .panelhead{position:static}.truckselect{padding:11px}.truckselect strong{font-size:24px}.row{min-height:83px;grid-template-columns:minmax(0,1fr) 62px;padding:9px}.row h3{font-size:16px}.row small{font-size:9px}.row .rowtitle{gap:4px}.colorButton{width:21px;height:21px}.sceneFoot{height:42px}.sceneTools{bottom:52px}.sceneCaption{font-size:23px;top:50px}.colorDialog{max-width:90vw}.extras{display:block}.extras .row{min-height:62px;grid-template-columns:1fr 80px}.extras .row .arrow{width:39px}.music{border-left:0}.musicLabel{font-size:20px}.musicLabel small{font-size:9px}}
@media(max-width:650px){.sceneCaption{display:none}.sceneTools{top:43px;bottom:auto;left:10px}.sceneTools button{min-height:28px;font-size:8px;padding:5px 8px}}

/* ELDT.IO embed fixes, appended after the original stylesheet so these
   override it by source order without needing !important. */
html,body{overflow-x:hidden}
@media(max-width:650px){
  /* Literal pin, not just sticky-after-scroll: position:sticky (the base
     650px rule's .showroom{position:sticky;top:0}) only locks the truck
     in place once the page has already been scrolled up to it, so on
     first load the user still had to scroll past the brand header before
     the preview pinned. Reported as not strong enough on real phones.
     Replacing it with a fixed-viewport flex layout instead: the iframe is
     already height-capped to a real window.innerHeight-derived height at
     this width by truck-builder.php's applyHeight() (MOBILE_BREAKPOINT),
     so it is a genuine bounded viewport here, not an auto-grown block.
     Stop the page itself from scrolling, stack <header> (brand bar) and
     .game as a fixed-height flex column, keep the brand header and the
     truck preview as flex-shrink:0 fixed chrome, and make .counter the
     one flex:1 / overflow-y:auto region -- the only thing that scrolls,
     so scrolling it can never carry the truck out of view. */
  html,body{height:100%;overflow:hidden}
  body{display:flex;flex-direction:column;min-height:0}
  header{flex-shrink:0}
  footer{display:none} /* credit text only; no spare height once the layout is viewport-capped, same trim as .live/.sceneFoot small above */
  .game{overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column}
  .showroom{position:relative;flex-shrink:0}
  .counter{height:auto;flex:1;min-height:0;overflow:hidden;overflow-y:auto}
}
@media(max-height:520px) and (orientation:landscape){
  /* Short phone landscape (eg 844x390). The base rules fix .showroom to
     a 610/710/760px min-height regardless of actual viewport height,
     which overflows a screen this short. Scale it to the viewport
     instead and widen the side panel's column so arrows/labels do not
     collide now that less vertical room is available. */
  .game{grid-template-columns:minmax(0,1.3fr) 230px}
  .showroom{height:auto;min-height:0;max-height:80vh;aspect-ratio:1.6}
  .counter{height:auto;max-height:80vh;overflow-y:auto}
  .sceneCaption{display:none}
}
@media(max-width:430px){
  /* 320/360/390/430px portrait: keep two-up controls only where there is
     real room; below 400px wide, arrows next to labels start to
     collide, so drop to one column per the brief's explicit guidance. */
  #options{grid-template-columns:1fr}
  .extras{grid-template-columns:1fr}
}
@media(max-width:400px){
  .arrow{width:34px;height:40px}
}

/* Share feature: #share sits next to #photo in .sceneFoot (wrapped so the
   bar can hold two buttons instead of one), plus the share dialog itself
   (copy-link field + Facebook/X intent buttons), styled to match the
   existing gold/cream/dark palette and dialog chrome above. */
.sceneFootBtns{display:flex;gap:6px}
@media(max-width:650px){.sceneFootBtns{gap:4px}}
@media(max-width:400px){.sceneFootBtns button{padding:7px 8px;font-size:9px}}
.shareDialog{width:min(280px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;box-sizing:border-box}
.shareDialog #shareClose{float:none;display:block;margin:0 0 8px auto}
.shareRow{display:flex;flex-direction:column;gap:8px;margin:14px 0;clear:both}
.shareRow input{width:100%;box-sizing:border-box;border:1px solid #8b947c;background:#344034;color:#fff;font:12px monospace;padding:9px;border-radius:4px}
.shareRow button{width:100%;border:1px solid #b18a43;border-radius:4px;background:linear-gradient(#edd49a,#b19458);color:#312516;font:700 11px 'Barlow Condensed';padding:9px 14px;float:none}
.shareSocial{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.shareSocial a,.shareSocial button{width:100%;box-sizing:border-box;text-align:center;padding:11px;border-radius:4px;font:700 12px 'Barlow Condensed';letter-spacing:.5px;text-decoration:none;color:#fff;border:0;float:none}
.shareSocial a.fb{background:#1877f2}
.shareSocial a.x{background:#000}
.shareSocial button.img{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4)}
.shareSocial a.email{background:#5a6570}
.shareSocial a.sms{background:#2f7d5a}
.shareSocial button[hidden]{display:none}