:root{
  --cream:#f6ecd5;
  --ink:#130d07;
  --red:#b73525;
  --gold:#efb84e;
  --green:#203d2c;
  --hud:rgba(22,14,7,.58);
  --scene-ratio:3.00293;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0704;color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{user-select:none;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit}button{border:0}

/* arrival */
.arrival-curtain{position:fixed;inset:0;z-index:999;background:#020201;pointer-events:none;opacity:1}
.arrival-flash{position:fixed;inset:0;z-index:998;pointer-events:none;background:#ffd77a;mix-blend-mode:screen;opacity:0}
body.is-arriving .arrival-curtain{animation:curtain 1.05s .05s cubic-bezier(.22,.72,.24,1) forwards}
body.is-arriving .arrival-flash{animation:flash 1.2s .28s ease-out both}
body.no-arrival .arrival-curtain{display:none}
@keyframes curtain{0%,22%{opacity:1}48%{opacity:.95}100%{opacity:0}}
@keyframes flash{0%,100%{opacity:0}8%{opacity:.22}13%{opacity:.02}19%{opacity:.16}28%{opacity:.02}}

/* HUD */
.hud{position:fixed;z-index:80;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:max(12px,env(safe-area-inset-top)) clamp(12px,2vw,28px) 18px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 70%,transparent)}
.hud-circle,.hud-pill{pointer-events:auto;border:1px solid rgba(255,255,255,.18);background:rgba(24,15,7,.56);backdrop-filter:blur(12px);box-shadow:0 8px 26px rgba(0,0,0,.25);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.hud-circle:hover,.hud-pill:hover{transform:scale(1.05)}
.home-button{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;text-decoration:none}.home-button img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.garage-title{text-align:center;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.7);line-height:.92;letter-spacing:.14em;margin-top:5px;opacity:0;transform:translateY(-7px);transition:.5s ease}.scene-ready .garage-title{opacity:1;transform:none}.garage-title span{display:block;font-size:10px;font-weight:800;color:#efc46d}.garage-title strong{display:block;font-family:Georgia,serif;font-size:22px;letter-spacing:.06em}
.hud-actions{justify-self:end;display:flex;gap:8px;pointer-events:auto}.hud-pill{min-height:44px;border-radius:999px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.hud-pill:first-child{width:44px;padding:0;font-size:19px}.sound-button.is-on{border-color:rgba(239,184,78,.62);background:rgba(31,61,44,.72)}.sound-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1)}

/* world */
.garage-viewport{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;touch-action:pan-x;cursor:grab;overscroll-behavior:none;scrollbar-width:none}.garage-viewport::-webkit-scrollbar{display:none}.garage-viewport.dragging{cursor:grabbing;scroll-behavior:auto}
.garage-scene{position:relative;height:100vh;width:calc(100vh * var(--scene-ratio));min-width:100vw;overflow:hidden;background:#3b250f}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.sun-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 84% 44%,rgba(255,226,144,.13),transparent 26%),linear-gradient(90deg,rgba(255,189,77,.03),transparent 50%)}
.car-glow{position:absolute;left:47.5%;top:12%;width:33%;height:49%;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(ellipse,rgba(255,210,86,.26),rgba(255,171,55,.08) 45%,transparent 72%);filter:blur(8px)}.car-glow.show{animation:carGlow 1.8s ease-out both}@keyframes carGlow{0%{opacity:0;transform:scale(.94)}35%{opacity:1}100%{opacity:0;transform:scale(1.08)}}

/* objects. Positions come directly from the user's composite placement reference. */
.object{--scale:1;position:absolute;z-index:20;background:transparent;padding:0;cursor:pointer;transform-origin:center;filter:drop-shadow(0 5px 6px rgba(0,0,0,.22));transition:filter .2s ease,opacity .2s ease;outline:none}
.object::before{content:"";position:absolute;inset:-18%;border-radius:28%;z-index:-1}
.object img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;transform:scale(var(--scale));transform-origin:center;transition:transform .18s ease,filter .18s ease}
.object:hover img,.object:focus-visible img{transform:scale(calc(var(--scale) * 1.07));filter:brightness(1.08)}
.object:focus-visible{outline:3px solid rgba(255,225,125,.9);outline-offset:7px;border-radius:18px}
.object.current-task{z-index:28;filter:drop-shadow(0 0 8px rgba(255,214,89,.88)) drop-shadow(0 7px 8px rgba(0,0,0,.22))}
.object.current-task img{animation:gentleInvite 2.6s ease-in-out infinite}
.object.completed::after{content:"✓";position:absolute;right:-9px;top:-10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#2f7d45;color:white;font-weight:1000;border:3px solid #f9e9bd;box-shadow:0 4px 10px rgba(0,0,0,.28);font-size:15px;animation:checkPop .35s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes gentleInvite{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.045)}55%{transform:translateY(-3px) scale(1.045)}}
@keyframes checkPop{0%{transform:scale(0) rotate(-15deg)}100%{transform:scale(1) rotate(0)}}

.object-radio{left:1.953%;top:36.07%;width:4.785%}
.object-helmet{left:9.473%;top:48.97%;width:4.590%}
.object-toolbox{left:0%;top:74.05%;width:12.94%;z-index:24}
.object-blueprint{left:31.396%;top:19.35%;width:6.104%;z-index:18}
.object-gloves{left:27.637%;top:39.30%;width:3.760%}
.object-toycar{left:33.447%;top:81.23%;width:5.371%;z-index:25}
.object-mug{left:49.561%;top:77.57%;width:2.637%;z-index:25}
.object-oilcan{left:51.709%;top:74.34%;width:5.566%;z-index:25}
.object-wrench{left:62.354%;top:78.45%;width:3.955%;z-index:25}
.object-cloth{left:66.309%;top:26.10%;width:5.127%;z-index:26}
.object-gear{left:79.590%;top:30.06%;width:2.930%;z-index:26}
.object-trophy{left:96.045%;top:34.16%;width:3.955%;z-index:25}
.object-tire{left:88.574%;top:67.89%;width:11.426%;z-index:25}

/* reactions */
.object.react[data-kind="wrench"] img{animation:wrenchReact .72s ease}
.object.react[data-kind="gear"] img{animation:gearReact .8s ease}
.object.react[data-kind="cloth"] img{animation:clothReact .82s ease}
.object.react[data-kind="gloves"] img{animation:gloveReact .78s ease}
.object.react[data-kind="oilcan"] img{animation:oilReact .78s ease}
.object.react[data-kind="toolbox"] img{animation:toolboxReact .75s ease}
.object.react[data-kind="helmet"] img{animation:helmetReact .78s ease}
.object.react[data-kind="tire"] img{animation:tireReact .9s ease}
.object.react[data-kind="blueprint"] img{animation:paperReact .75s ease}
.object.react[data-kind="radio"] img{animation:radioReact .6s ease}
.object.react[data-kind="toycar"] img{animation:carReact 1.15s ease}
.object.react[data-kind="trophy"] img{animation:trophyReact .78s ease}
.object.react[data-kind="mug"] img{animation:mugReact .7s ease}
@keyframes wrenchReact{0%,100%{transform:rotate(0)}35%{transform:rotate(-18deg) scale(1.08)}70%{transform:rotate(10deg)}}
@keyframes gearReact{to{transform:rotate(360deg)}}
@keyframes clothReact{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(-12px,5px) rotate(-8deg)}70%{transform:translate(10px,-2px) rotate(7deg)}}
@keyframes gloveReact{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px) rotate(-5deg)}}
@keyframes oilReact{0%,100%{transform:rotate(0)}45%{transform:rotate(-13deg) translateY(-5px)}}
@keyframes toolboxReact{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}55%{transform:translateY(0)}72%{transform:translateY(-4px)}}
@keyframes helmetReact{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-7deg) translateY(-8px)}70%{transform:rotate(5deg) translateY(-4px)}}
@keyframes tireReact{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(-24px) rotate(-28deg)}75%{transform:translateX(7px) rotate(8deg)}}
@keyframes paperReact{0%,100%{transform:rotate(0) scale(1)}45%{transform:rotate(-2deg) scale(1.08)}}
@keyframes radioReact{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}75%{transform:rotate(-1.5deg)}}
@keyframes carReact{0%{transform:translateX(0)}35%{transform:translateX(50px) rotate(2deg)}65%{transform:translateX(96px) rotate(1deg)}100%{transform:translateX(0)}}
@keyframes trophyReact{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.1) rotate(3deg)}}
@keyframes mugReact{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-8px) rotate(-5deg)}}

/* arrows + hint */
.pan-arrow{position:fixed;z-index:60;top:50%;transform:translateY(-50%);width:62px;height:84px;border-radius:22px;background:rgba(25,16,8,.46);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);color:#fff2ce;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.24);transition:.2s ease}.pan-arrow span{font:700 52px/1 Georgia,serif;transform:translateY(-3px)}.pan-arrow:hover{background:rgba(44,27,11,.68);transform:translateY(-50%) scale(1.04)}.pan-left{left:12px}.pan-right{right:12px}.pan-arrow.hidden{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.8)}
.swipe-hint{position:fixed;z-index:55;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(19,13,7,.58);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);font-size:12px;box-shadow:0 8px 18px rgba(0,0,0,.2);transition:opacity .35s ease,transform .35s ease}.swipe-hint span{font-size:20px}.swipe-hint.hide{opacity:0;transform:translate(-50%,10px);pointer-events:none}

/* job card */
.job-card{position:fixed;z-index:70;right:clamp(14px,2vw,28px);bottom:max(18px,env(safe-area-inset-bottom));width:min(360px,calc(100vw - 28px));padding:14px 15px 12px;border-radius:22px;color:#3f2b13;background:linear-gradient(155deg,#f9edbe,#ddc67f);border:2px solid rgba(121,77,21,.34);box-shadow:0 14px 42px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.75);transform:translateY(18px);opacity:0;transition:.38s cubic-bezier(.2,.8,.2,1)}.job-card.show{opacity:1;transform:none}.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.job-kicker{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:1000;color:#866125}.job-head strong{display:block;font-family:Georgia,serif;font-size:20px;line-height:1.02;margin-top:2px}.job-card p{margin:6px 0 9px;font-size:12px;font-weight:700;color:#715528}.job-icons{display:flex;gap:9px}.job-icon{position:relative;width:52px;height:52px;border-radius:16px;border:1px solid rgba(86,54,18,.2);background:rgba(255,255,255,.54);display:grid;place-items:center;padding:4px;cursor:pointer;transition:.18s ease;box-shadow:0 3px 8px rgba(76,47,14,.12)}.job-icon:hover{transform:translateY(-2px)}.job-icon img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.job-icon.done{background:#cae3b2}.job-icon.done::after{content:"✓";position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#2f7d45;color:#fff;font-weight:1000;border:2px solid #f9edbe;font-size:11px}.job-card small{display:block;margin-top:7px;font-size:10px;font-weight:900;color:#81602c}.job-dots{display:flex;gap:4px;margin-top:2px}.job-dots i{width:8px;height:8px;border-radius:50%;background:rgba(88,57,22,.18)}.job-dots i.done{background:#67884e}.job-dots i.active{background:#b47724;box-shadow:0 0 0 3px rgba(180,119,36,.18)}

/* feedback */
.toast{position:fixed;z-index:75;left:50%;bottom:112px;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:min(460px,calc(100vw - 28px));padding:11px 16px;border-radius:16px;background:rgba(18,15,9,.9);color:#fff4d7;text-align:center;font-weight:850;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.3);transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.job-complete{position:fixed;z-index:110;left:50%;top:50%;transform:translate(-50%,-50%) scale(.75) rotate(-5deg);opacity:0;pointer-events:none;padding:18px 26px;border-radius:22px;background:#efe0a5;color:#8e2f20;border:4px solid #b95132;box-shadow:0 18px 50px rgba(0,0,0,.35);text-transform:uppercase;text-align:center}.job-complete span{display:block;font-size:28px;color:#d59b21}.job-complete strong{font:900 28px/1 Georgia,serif}.job-complete.show{animation:stamp .95s cubic-bezier(.2,.9,.25,1.25) both}@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-12deg)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg)}}

.finish-card{position:fixed;z-index:130;left:50%;top:50%;transform:translate(-50%,-50%) scale(.88);width:min(420px,calc(100vw - 30px));padding:26px 24px 22px;text-align:center;border-radius:28px;background:linear-gradient(155deg,#fff2c7,#e6c56d);color:#4a3014;border:3px solid rgba(135,83,19,.32);box-shadow:0 24px 70px rgba(0,0,0,.48);opacity:0;pointer-events:none;transition:.35s cubic-bezier(.2,.8,.2,1)}.finish-card.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.finish-star{font-size:46px;color:#c8911d;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15));animation:starPulse 1.4s ease-in-out infinite}.finish-card>span{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:1000;color:#98742b}.finish-card>strong{display:block;font:900 35px/1 Georgia,serif;margin-top:4px}.finish-card p{margin:9px 0 18px;font-weight:750;font-size:14px}.finish-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.finish-actions button{padding:10px 15px;border-radius:999px;background:#2b5139;color:#fff6dd;font-weight:900;cursor:pointer}.finish-actions .secondary{background:rgba(74,48,20,.12);color:#563919;border:1px solid rgba(74,48,20,.18)}@keyframes starPulse{50%{transform:scale(1.15) rotate(5deg)}}

.sparkles{position:absolute;inset:0;pointer-events:none;z-index:50}.spark{position:absolute;width:10px;height:10px;display:grid;place-items:center;color:#ffd564;font-size:16px;animation:sparkFly .9s ease-out forwards}@keyframes sparkFly{0%{opacity:0;transform:translate(0,5px) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25) rotate(90deg)}}

@media (max-width:760px){
  .garage-title{display:none}.home-button{width:50px;height:50px}.home-button img{width:40px;height:40px}.sound-label{display:none}.sound-button{width:44px;padding:0}.hud{padding-left:10px;padding-right:10px}.pan-arrow{width:48px;height:68px;border-radius:17px}.pan-left{left:7px}.pan-right{right:7px}.job-card{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;padding:11px 12px}.job-head strong{font-size:17px}.job-card p{display:none}.job-icon{width:46px;height:46px}.job-card small{margin-top:5px}.swipe-hint{bottom:108px;font-size:10px}.toast{bottom:104px}.object.current-task{filter:drop-shadow(0 0 7px rgba(255,214,89,.95)) drop-shadow(0 4px 5px rgba(0,0,0,.2))}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.object.current-task img,.finish-star{animation:none!important}.object.react img{animation:none!important}}

/* =========================================================
   MOBILE GARAGE LAYOUT — v2
   Portrait remains fully playable. Landscape is only a tip.
   ========================================================= */

html,body{min-height:100%}
@supports (height:100dvh){
  html,body{height:100dvh}
}

/* Friendly non-blocking rotate suggestion. */
.mobile-rotate-tip{
  position:fixed;
  z-index:115;
  top:max(78px,calc(env(safe-area-inset-top) + 66px));
  left:50%;
  transform:translate(-50%,-10px) scale(.97);
  width:min(330px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px 9px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(19,13,7,.88);
  color:#fff2d0;
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.mobile-rotate-tip.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.mobile-rotate-phone{
  position:relative;
  width:22px;
  height:34px;
  min-width:22px;
  border:2px solid #efbd58;
  border-radius:6px;
  transform:rotate(90deg);
}
.mobile-rotate-phone::after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#efbd58;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
}
.mobile-rotate-copy{
  min-width:0;
  flex:1;
  font-size:11px;
  line-height:1.3;
  font-weight:750;
}
.mobile-rotate-copy strong{
  display:block;
  color:#efbd58;
  font-size:12px;
  margin-bottom:1px;
}
.mobile-rotate-close{
  width:30px;
  height:30px;
  min-width:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff2d0;
  cursor:pointer;
  font-size:17px;
}

/* PHONE — PORTRAIT
   The job tray now lives OUTSIDE the playable viewport.
   This is the important difference from v1. */
@media (max-width:760px) and (orientation:portrait){
  :root{
    --mobile-job-space:132px;
  }

  html,body{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  .garage-viewport{
    top:0;
    left:0;
    right:0;
    bottom:var(--mobile-job-space);
    height:auto;
    width:auto;
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:none;
    -webkit-overflow-scrolling:touch;
  }

  .garage-scene{
    height:100%;
    width:calc((100dvh - var(--mobile-job-space)) * var(--scene-ratio));
    min-width:100vw;
  }

  .object{
    touch-action:pan-x;
  }

  /* Larger finger target, artwork itself stays the same size. */
  .object::before{
    inset:-15px;
    border-radius:20px;
  }

  .hud{
    padding-top:max(8px,env(safe-area-inset-top));
    padding-left:10px;
    padding-right:10px;
    padding-bottom:8px;
  }
  .garage-title{display:none}
  .home-button{
    width:46px;
    height:46px;
  }
  .home-button img{
    width:37px;
    height:37px;
  }
  .hud-actions{gap:6px}
  .hud-pill{
    min-height:40px;
  }
  .hud-pill:first-child{
    width:40px;
  }
  .sound-label{display:none}
  .sound-button{
    width:40px;
    min-width:40px;
    padding:0;
  }

  /* Fixed job tray below the playable world. */
  .job-card{
    left:8px;
    right:8px;
    bottom:max(6px,env(safe-area-inset-bottom));
    width:auto;
    height:calc(var(--mobile-job-space) - 12px);
    min-height:0;
    max-height:calc(var(--mobile-job-space) - 12px);
    padding:9px 11px 7px;
    border-radius:18px;
    overflow:hidden;
  }
  .job-head{
    align-items:center;
  }
  .job-head strong{
    font-size:16px;
    line-height:1.02;
  }
  .job-kicker{
    font-size:8px;
    line-height:1;
  }
  .job-card p{display:none}
  .job-icons{
    gap:7px;
    margin-top:5px;
  }
  .job-icon{
    width:43px;
    height:43px;
    min-width:43px;
    border-radius:13px;
    padding:4px;
  }
  .job-card small{
    margin-top:3px;
    font-size:9px;
    line-height:1;
  }

  .pan-arrow{
    top:calc((100dvh - var(--mobile-job-space)) / 2);
    width:44px;
    height:64px;
    border-radius:16px;
  }
  .pan-left{left:6px}
  .pan-right{right:6px}

  .swipe-hint{
    bottom:calc(var(--mobile-job-space) + 8px);
    padding:7px 11px;
    font-size:9px;
  }

  .toast{
    bottom:calc(var(--mobile-job-space) + 8px);
    max-width:calc(100vw - 96px);
    font-size:12px;
    padding:9px 12px;
  }

  .finish-card{
    max-height:calc(100dvh - 28px);
    overflow:auto;
  }

  .object.current-task{
    filter:drop-shadow(0 0 10px rgba(255,214,89,.98))
           drop-shadow(0 5px 6px rgba(0,0,0,.24));
  }
}

/* Very short portrait phones: slightly smaller job tray but still outside gameplay. */
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){
  :root{--mobile-job-space:116px}
  .job-card{
    padding-top:7px;
    padding-bottom:6px;
  }
  .job-head strong{font-size:15px}
  .job-icon{
    width:38px;
    height:38px;
    min-width:38px;
  }
}

/* PHONE — LANDSCAPE
   Fully playable; the tray becomes compact and the rotate suggestion disappears. */
@media (max-height:520px) and (pointer:coarse){
  .mobile-rotate-tip{display:none!important}

  .garage-viewport{
    inset:0;
    height:100dvh;
    -webkit-overflow-scrolling:touch;
  }
  .garage-scene{
    height:100dvh;
    width:calc(100dvh * var(--scene-ratio));
    min-width:100vw;
  }

  .job-card{
    left:auto;
    right:max(7px,env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));
    width:auto;
    min-width:168px;
    height:auto;
    min-height:0;
    max-height:none;
    padding:7px 8px;
    border-radius:16px;
  }
  .job-head,
  .job-card p,
  .job-card small{
    display:none;
  }
  .job-icons{
    gap:5px;
    margin:0;
  }
  .job-icon{
    width:39px;
    height:39px;
    min-width:39px;
    border-radius:11px;
    padding:3px;
  }
  .pan-arrow{
    width:42px;
    height:58px;
  }
  .swipe-hint{
    bottom:9px;
    left:42%;
  }
  .toast{
    bottom:10px;
    max-width:44vw;
  }
  .object::before{
    inset:-12px;
  }
}
/* === DD MOBILE V3 VERIFIED OVERRIDES === */
@media (max-width:760px) and (orientation:portrait){
  :root{ --mobile-job-space:136px; }

  .garage-viewport{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--mobile-job-space) !important;
    height:auto !important;
    max-height:none !important;
  }

  .garage-scene{
    height:100% !important;
    width:calc((100dvh - var(--mobile-job-space)) * var(--scene-ratio)) !important;
  }

  .job-card{
    position:fixed !important;
    z-index:95 !important;
    left:8px !important;
    right:8px !important;
    bottom:max(6px,env(safe-area-inset-bottom)) !important;
    width:auto !important;
    height:calc(var(--mobile-job-space) - 12px) !important;
    max-height:calc(var(--mobile-job-space) - 12px) !important;
    min-height:0 !important;
    margin:0 !important;
  }

  .pan-arrow{
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  .swipe-hint,
  .toast{
    bottom:8px !important;
  }
}

/* Narrow/short phones get a little more game area while the tray still stays outside it. */
@media (max-width:430px) and (orientation:portrait) and (max-height:760px){
  :root{ --mobile-job-space:122px; }
  .job-icon{ width:39px !important; height:39px !important; min-width:39px !important; }
  .job-head strong{ font-size:15px !important; }
}

/* The rotate message is a suggestion only and never blocks the garage. */
.mobile-rotate-tip{
  pointer-events:none;
}
.mobile-rotate-tip.show{
  pointer-events:none;
}
.mobile-rotate-close{
  pointer-events:auto;
}