/* ============ Shift (warehouse) ============ */
#screen-shift{background:#3d2f1e;}
#shift-top{display:flex; align-items:center; gap:10px; padding:6px 12px; background:#241a10; border-bottom:3px solid #120d07; flex-wrap:wrap;}
#shift-timer-wrap{flex:1; min-width:140px; height:20px; background:#120d07; border-radius:99px; position:relative; overflow:hidden;}
#shift-timer-fill{position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#37b24d,#8bc34a); border-radius:99px;}
#shift-timer-fill.late{background:linear-gradient(90deg,#e03131,#ff6b6b);}
#shift-cutoff-flag{position:absolute; top:-2px; bottom:-2px; width:3px; background:var(--safety);}
#shift-timer-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); letter-spacing:.06em;}
#shift-orders-pill{font-family:var(--disp); font-size:12px; color:var(--cream); background:#3a2c1b;
  border:2px solid #120d07; border-radius:99px; padding:4px 12px; white-space:nowrap;}
#shift-cv-wrap{flex:1; min-height:0; position:relative; touch-action:none;}
#shift-cv{position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block;}
#shift-banner{position:absolute; left:50%; top:18%; transform:translate(-50%,-50%) scale(0); z-index:20;
  background:var(--bad); color:#fff; font-family:var(--disp); font-size:clamp(15px,3.4vw,24px); text-align:center;
  padding:12px 22px; border-radius:14px; border:3px solid var(--ink); box-shadow:0 6px 0 var(--ink);
  transition:transform .35s cubic-bezier(.5,1.8,.6,1); pointer-events:none; max-width:88%;}
#shift-banner.show{transform:translate(-50%,-50%) scale(1) rotate(-2deg);}
#shift-banner.gold{background:var(--safety); color:var(--ink);}
#shift-hint{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:18;
  background:rgba(20,14,7,.92); color:var(--cream); border:2px solid var(--safety); border-radius:12px;
  padding:9px 16px; font-size:14px; font-weight:bold; max-width:92%; text-align:center; pointer-events:none;}
#toast-dock{position:absolute; top:10px; right:10px; z-index:60; display:flex; flex-direction:column; gap:8px; width:min(310px,86vw); pointer-events:none;}
.toast{background:#fff; border-radius:12px; border:2px solid #d8d8d8; box-shadow:0 8px 22px rgba(0,0,0,.35);
  padding:9px 12px; display:flex; gap:9px; align-items:flex-start; animation:toastin .35s cubic-bezier(.5,1.6,.6,1);}
@keyframes toastin{from{transform:translateX(120%);} to{transform:none;}}
.toast.out{transition:opacity .4s, transform .4s; opacity:0; transform:translateX(40%);}
.toast .tav{width:30px; height:30px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:16px;}
.toast .tb{flex:1; min-width:0;}
.toast .tn{font-weight:900; font-size:12px; color:#1d1c1d;}
.toast .tt{font-size:12px; color:#333; line-height:1.35;}

/* ============ Summary / Epilogue / Stats ============ */
#screen-summary,#screen-epilogue,#screen-stats{background:radial-gradient(900px 500px at 50% -5%, #4a3821 0%, #241a10 70%);}
#screen-stats .sum-card{width:min(520px,94vw);}
#screen-stats .sum-row .k{font-weight:normal;}
.sum-card{width:min(560px,94vw); background:var(--cream); border:3px solid var(--ink); border-radius:18px;
  box-shadow:0 8px 0 var(--ink); padding:18px 20px; display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.sum-card h2{font-family:var(--disp); font-size:clamp(19px,4vw,25px); text-align:center; letter-spacing:.02em; text-wrap:balance;}
.sum-grade{text-align:center; font-family:var(--disp); font-size:15px; padding:7px; border-radius:10px; border:2px solid var(--ink);}
.sum-grade.great{background:#b2f2bb;} .sum-grade.ok{background:#ffec99;} .sum-grade.bad{background:#ffc9c9;}
.sum-rows{display:flex; flex-direction:column; gap:6px;}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px; padding:5px 4px; border-bottom:1.5px dashed #c9b48c;}
.sum-row .k{color:var(--ink2); font-weight:bold;}
.sum-row .v{font-family:var(--disp); font-size:15px; font-variant-numeric:tabular-nums;}
.sum-row .v.up{color:#2b8a3e;} .sum-row .v.down{color:#c92a2a;}
.sum-actions{display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap;}
#epi-stats{font-size:13px;}

/* ============ credits ============ */
#screen-credits{background:#0b0e14; overflow:hidden;}
#credits-roll{flex:1; min-height:0; position:relative; overflow:hidden;}
#credits-inner{position:absolute; left:0; right:0; top:100%; text-align:center; padding:0 20px;
  animation:creditroll 38s linear forwards;}
@keyframes creditroll{from{transform:translateY(0);} to{transform:translateY(calc(-100% - 100vh));}}
.cr-h{font-family:var(--disp); color:var(--safety); font-size:clamp(26px,6vw,44px); margin:26px 0 8px;
  letter-spacing:.04em; text-shadow:0 3px 0 rgba(0,0,0,.6);}
.cr-role{color:#8b98b8; font-size:12px; letter-spacing:.18em; margin-top:20px; text-transform:uppercase;}
.cr-name{color:var(--cream); font-family:var(--disp); font-size:clamp(16px,3.6vw,22px); margin-top:4px;}
.cr-gap{height:44px;}
#credits-skip{position:absolute; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5;}
#credits-splash{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.92);}
#credits-splash-text{font-family:var(--disp); color:var(--safety); font-size:clamp(30px,7vw,64px);
  letter-spacing:.03em; text-shadow:0 5px 0 var(--ink); transform:rotate(-2deg) scale(.4); opacity:0;
  transition:transform .45s cubic-bezier(.5,1.9,.6,1), opacity .2s; text-align:center; padding:0 16px;}
#credits-splash-text.pop{transform:rotate(-2deg) scale(1); opacity:1;}