/* Sofa Sprint 4 — moving day at dusk. Navy night, warm doorway light, packing-tape yellow, sofa coral, mint. */
:root {
  --navy: #1B2747; --night: #121A38; --ground: #18213F; --raise: #233259; --raise2: #2C3D6B; --line: rgba(160,185,255,.14);
  --tape: #FFCF3F; --tapeD: #E0A91C; --coral: #FF5A36; --coralD: #C9361C; --mint: #2FC2A8; --mintD: #1E8F7D;
  --cream: #FFF3DC; --paper: #FFF8EC; --paper2: #F4E8D2; --paper3: #E8D9BC; --ink: #2A2238; --ink2: #6A5F80; --ink3: #9A90AE;
  --muted: #A3B2D6; --dim: #7F8DB3;
  --sofa: #FF5A36; --sofaD: #C9361C; --hat: #FFCF3F; --shirt: #2FC2A8;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh; --app-width: 100vw; --app-bg: var(--ground); --viewport-bottom: 0px;
  --sat: var(--safe-top); --sab: max(var(--safe-bottom), var(--viewport-bottom));
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, 1.2, .3, 1);
  font-family: var(--font);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: var(--app-height, 100%); overflow: hidden; background: var(--app-bg); color: var(--cream);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
body { position: fixed; top: 0; left: 0; width: var(--app-width, 100%); -webkit-font-smoothing: antialiased; font-size: 16px; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
canvas#game { position: fixed; top: 0; left: 0; width: var(--app-width, 100%); height: var(--app-height, 100%); display: block; background: var(--navy); }
.gi { display: block; width: 100%; height: 100%; }
[data-icon] { display: inline-block; }

/* ---------- screens ---------- */
.screen { position: fixed; top: 0; left: 0; width: var(--app-width, 100%); height: var(--app-height, 100%); z-index: 10; transition: opacity .35s ease, visibility 0s linear 0s; }
.screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
/* nothing animates on screens you can't see (saves battery) */
.screen.hidden *, #hud:not(.on) * { animation-play-state: paused !important; }

/* ---------- wordmark: two strips of packing tape ---------- */
.brand { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.strip { display: block; padding: .1em .4em .15em; color: var(--ink); font-weight: 900; letter-spacing: -.025em;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.16) 18px 20px), linear-gradient(180deg, #FFE485 0%, var(--tape) 50%, #F2BA22 100%);
  clip-path: polygon(0 6%, 3% 0, 6% 6%, 9% 0, 12% 5%, 88% 5%, 91% 0, 94% 6%, 97% 0, 100% 6%, 100% 94%, 97% 100%, 94% 94%, 91% 100%, 88% 95%, 12% 95%, 9% 100%, 6% 94%, 3% 100%, 0 94%);
  filter: drop-shadow(0 .07em 0 rgba(0,0,0,.3)); }
.strip > span { display: block; text-shadow: 0 2px 0 rgba(255,255,255,.45); }
.strip.s1 { transform: rotate(-5deg) translateX(-11%); }
.strip.s2 { transform: rotate(2.5deg) translateX(9%); margin-top: -.12em; color: var(--coral);
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.2) 18px 20px), linear-gradient(180deg, #FFFCF4 0%, var(--cream) 50%, #EEDDBC 100%); }
.strip.s2 > span { text-shadow: 0 .05em 0 var(--coralD); }

/* ---------- buttons & chips ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; line-height: 1.1; text-align: center;
  border-radius: 18px; font-size: 18px; font-weight: 800; background: var(--raise2); color: var(--cream); box-shadow: 0 5px 0 rgba(0,0,0,.28);
  transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.btn.coral { background: linear-gradient(180deg, #FF7651, var(--coral)); color: #fff; box-shadow: 0 6px 0 var(--coralD), 0 14px 26px rgba(0,0,0,.22); }
.btn.coral:active { box-shadow: 0 2px 0 var(--coralD); }
.btn.mint { background: linear-gradient(180deg, #44D5BC, var(--mint)); color: #fff; box-shadow: 0 6px 0 var(--mintD); }
.btn.mint:active { box-shadow: 0 2px 0 var(--mintD); }
.btn.yellow { background: linear-gradient(180deg, #FFE27E, var(--tape)); color: var(--ink); box-shadow: 0 6px 0 var(--tapeD); }
.btn.yellow:active { box-shadow: 0 2px 0 var(--tapeD); }
.btn.paper { background: var(--paper3); color: var(--ink); box-shadow: 0 5px 0 #CDB792; }
.btn.paper:active { box-shadow: 0 1px 0 #CDB792; }
.btn.quiet { background: none; box-shadow: none; color: var(--ink2); min-height: 44px; font-size: 16px; }
.btn[disabled] { filter: saturate(.3) brightness(.92); opacity: .75; pointer-events: none; }
.btn small { display: block; font-size: 13px; font-weight: 700; opacity: .9; }
.btn.two { flex-direction: column; gap: 5px; padding: 11px 24px; }
.btn .bt { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; }
.btn .bs { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; opacity: .9; line-height: 1; }
.btn .bs .gi { width: 16px; height: 16px; flex: none; }
.btn.soft { background: var(--paper2); color: var(--ink); box-shadow: 0 3px 0 var(--paper3); min-height: 50px; font-size: 16px; padding: 0 16px; }
.btn.soft:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper3); }
.btn.soft .btnIco { width: 18px; height: 18px; color: var(--ink2); }
.btnIco { flex: none; width: 20px; height: 20px; }
.iconBtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--cream); }
.iconBtn > span { width: 22px; height: 22px; }
.iconBtn:active { transform: scale(.92); }
.iconBtn.dark { background: rgba(18,26,56,.78); }
.iconBtn.light { background: var(--paper2); color: var(--ink); width: 40px; height: 40px; }
.iconBtn.light > span { width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 99px;
  background: rgba(14,20,45,.55); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.chip.dark { background: rgba(18,26,56,.82); }
/* a leading coin or icon sits closer to the pill's round end */
.chip:has(> .coin:first-child), .chip:has(> span:first-child > .gi) { padding: 0 13px 0 10px; }
.chip.paper { background: var(--paper2); color: var(--ink); }
.chip .gi { width: 18px; height: 18px; }
.coin { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #FFF0B0 0 18%, var(--tape) 20% 60%, #F2B61F 62%); box-shadow: inset 0 -2px 0 #D99A12; }
.chip.paper .coin, .price .coin { width: 18px; height: 18px; }
.coin.sm { width: 16px; height: 16px; box-shadow: inset 0 -1.5px 0 #D99A12; }
.dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--ground); }
.dot[hidden] { display: none; }
.newTag { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 11.5px; font-weight: 900; line-height: 1; color: #fff; background: var(--coral);
  padding: 4px 8px 4px; border-radius: 99px; box-shadow: 0 2px 0 var(--coralD), 0 0 0 3px var(--ground); }
.newTag[hidden] { display: none; }

/* =================================================================
   LOADER
   ================================================================= */
#loader { z-index: 30; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(90% 60% at 50% 34%, #3D5EAB 0%, #22366D 52%, var(--night) 100%);
  padding: calc(var(--sat) + 7vh) 24px calc(var(--sab) + 12px); }
.loaderMain { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
.loaderMid { flex: 1 1 0; min-height: 110px; width: 100%; display: flex; align-items: center; justify-content: center; }
.loaderArt { width: min(72vw, 36vh, 380px); }
.keyart { display: block; width: 100%; height: auto; overflow: visible; }
.loaderBrand { font-size: clamp(50px, min(15vw, 7.4vh), 92px); margin-top: -2.6vh; position: relative; }
.loadBlock { width: min(78vw, 310px); }
.progTrack { position: relative; height: 14px; border-radius: 99px; background: rgba(8,12,32,.5); box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 0 0 1.5px rgba(255,255,255,.09); }
.progTrack i { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; max-width: calc(100% - 6px); border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(42,34,56,.4) 0 1.5px, transparent 1.5px 7px) 0 0 / 100% 3px no-repeat, linear-gradient(180deg, #FFE27E, var(--tape)); transition: width .25s ease-out; }
.progThumb { position: absolute; top: 50%; left: 3px; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 6px; border-radius: 50%; color: #fff;
  background: var(--coral); box-shadow: 0 0 0 3px var(--cream), 0 4px 10px rgba(0,0,0,.3); transition: left .25s ease-out; }
.progCap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 14px; font-weight: 800; color: var(--muted); line-height: 1; }
.progPct { color: var(--cream); font-variant-numeric: tabular-nums; }
#loader.ready .progLabel { color: #6FE3CF; }
.hint { text-wrap: balance; margin: 18px 0 0; min-height: 2.7em; max-width: 290px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--dim); text-align: center; transition: opacity .3s; }
.loaderFoot { flex: none; height: 104px; width: 100%; display: flex; align-items: center; justify-content: center; }
.startBtn { min-width: 240px; min-height: 62px; font-size: 21px; border-radius: 22px;
  opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; transition: opacity .3s, transform .45s var(--ease); }
.startBtn .btnIco { width: 17px; height: 17px; }
#loader.ready .startBtn { opacity: 1; transform: none; pointer-events: auto; animation: breathe 2.6s ease-in-out .8s infinite; }
@keyframes breathe { 50% { transform: scale(1.035); } }
/* the logo slaps on once the page takes over from the launch screen */
.loaderBrand .strip { animation: slap .5s var(--ease) both; }
.loaderBrand .strip.s1 { --r: -5deg; --x: -11%; animation-delay: .1s; }
.loaderBrand .strip.s2 { --r: 2.5deg; --x: 9%; animation-delay: .32s; }
@keyframes slap { from { opacity: 0; transform: rotate(calc(var(--r) * 3)) translateX(var(--x)) scale(1.5); } to { opacity: 1; transform: rotate(var(--r)) translateX(var(--x)) scale(1); } }
.loadBlock, .hint { animation: fadeIn .4s .55s both; }
@keyframes fadeIn { from { opacity: 0; } }
/* idle life in the key art */
.kaGlow { animation: kaGlow 3.2s ease-in-out infinite; }
.kaSofa { transform-box: view-box; animation: kaWob 2.6s ease-in-out infinite; }
.kaEyes { transform-box: view-box; transform-origin: 432px 362px; animation: kaBlink 4.6s infinite; }
.kaSweat { animation: kaSweat 2.2s ease-in infinite; }
.kaWobble { animation: kaWobble 2.6s ease-in-out infinite; }
@keyframes kaGlow { 50% { opacity: .65; } }
@keyframes kaWob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.4deg); } }
@keyframes kaBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes kaSweat { 0%, 30% { transform: translateY(0); opacity: 1; } 90% { transform: translateY(26px); opacity: 0; } 100% { opacity: 0; } }
@keyframes kaWobble { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }

/* =================================================================
   HOME
   ================================================================= */
#home { display: flex; flex-direction: column; background: var(--ground); }
.homeScene { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.street { position: absolute; inset: 0; width: 100%; height: 100%; }
.street .sofa { fill: var(--sofa); } .street .sofaDark { fill: var(--sofaD); }
.street .hat { fill: var(--hat); } .street .shirt { fill: var(--shirt); }
.street .it { display: none; }
#home[data-item="sofa"] .it-sofa, #home[data-item="bookcase"] .it-bookcase, #home[data-item="table"] .it-table, #home[data-item="piano"] .it-piano { display: inline; }
.carry { animation: carry 6s linear infinite; }
.bob { animation: bob .38s ease-in-out infinite alternate; }
.legA, .legB { transform-box: fill-box; transform-origin: 50% 0; animation: leg .38s ease-in-out infinite alternate; }
.legB { animation-direction: alternate-reverse; }
.tw { animation: tw 3s ease-in-out infinite; } .tw.d2 { animation-delay: 1s; } .tw.d3 { animation-delay: 2s; }
.porch { animation: porch 2.8s ease-in-out infinite; }
@keyframes carry { 0% { transform: translateX(0); opacity: 0; } 7% { opacity: 1; } 84% { opacity: 1; } 92%, 100% { transform: translateX(136px); opacity: 0; } }
@keyframes bob { to { transform: translateY(-2.5px); } }
@keyframes leg { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
@keyframes tw { 50% { opacity: .25; } }
@keyframes porch { 50% { opacity: .55; } }

.homeTop { position: absolute; top: calc(var(--sat) + 10px); left: calc(var(--sal) + 16px); right: calc(var(--sar) + 16px); display: flex; align-items: center; justify-content: flex-end; }
.homeTop .chip { transform: scale(.9); transform-origin: top right; }
.homeBrand { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 64px); font-size: clamp(52px, min(15.5vw, 8.6vh), 88px); }

.homePanel { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px calc(var(--sar) + 20px) calc(var(--sab) + 6px) calc(var(--sal) + 20px); }
.play { width: 100%; max-width: 420px; min-height: 80px; border-radius: 24px; overflow: hidden; }
.play .bt { font-size: 27px; }
.play .bs { font-size: 15.5px; }
.play .bs .gi { width: 18px; height: 18px; }
.shine { position: absolute; top: -10%; bottom: -10%; left: -45%; width: 32%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent); animation: shine 5s ease-in-out 1.4s infinite; }
@keyframes shine { 0% { left: -45%; } 24%, 100% { left: 130%; } }
.modes { width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mode { position: relative; min-width: 0; display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px 12px; border-radius: 18px; text-align: left;
  background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line), 0 4px 0 rgba(0,0,0,.25); }
.mode:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--line), 0 1px 0 rgba(0,0,0,.25); }
.modeIco { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--tape); color: var(--ink); --ac: var(--coral); }
.modeIco.mint { background: var(--mint); color: #fff; --ac: #1E8F7D; }
.modeText { display: flex; flex-direction: column; min-width: 0; }
.modeText b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.modeText small { line-height: 1.3; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock { width: 100%; max-width: 440px; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 2px; }
.dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0 6px; font-size: 12.5px; font-weight: 800; color: var(--muted); border-radius: 14px; }
.dock button > span { width: 26px; height: 26px; color: var(--cream); --ac: var(--coral); }
.dock button:active { background: rgba(255,255,255,.06); }
.dock .dot { top: 4px; right: calc(50% - 20px); }
.a2hs { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: none;
  margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); background: rgba(14,20,45,.7); border-radius: 12px; padding: 8px 12px; text-align: center; }

/* =================================================================
   HUD
   ================================================================= */
#hud { position: fixed; top: 0; left: 0; width: var(--app-width, 100%); height: var(--app-height, 100%); z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s; }
#hud.on { opacity: 1; }
.hudTop { position: absolute; top: calc(var(--sat) + 8px); left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); display: flex; align-items: center; gap: 10px; }
.hudTop .iconBtn { pointer-events: auto; flex: none; }
.route { position: relative; flex: 1; height: 12px; border-radius: 99px; background: rgba(18,26,56,.75); margin-right: 16px; }
.routeFill { position: absolute; inset: 2px auto 2px 2px; width: 0; border-radius: 99px; background: linear-gradient(180deg, #FFE27E, var(--tape)); }
.routeTicks i { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: rgba(18,26,56,.55); }
.routeSofa { position: absolute; top: 50%; left: 0; width: 24px; height: 15px; margin: -7.5px 0 0 -12px; border-radius: 5px; background: var(--sofa); box-shadow: inset 0 -4px 0 var(--sofaD), 0 0 0 2.5px var(--cream); }
.routeHome { position: absolute; right: -18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 6px; border-radius: 50%; background: var(--night); color: var(--cream); }
.routeHome > .gi { transform: translateY(-.5px); }
.dist { display: none; flex: 1; justify-content: center; align-items: center; height: 38px; border-radius: 99px; background: rgba(18,26,56,.8);
  font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--tape); }
#hud.marathon .dist { display: flex; }
#hud.marathon .route { display: none; }
.tipsChip { flex: none; transition: transform .15s; }
.tipsChip.bump { transform: scale(1.12); }
.hudSub { position: absolute; top: calc(var(--sat) + 56px); left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.roomLabel { font-size: 14px; font-weight: 800; color: var(--cream); background: rgba(18,26,56,.7); padding: 5px 12px; border-radius: 99px; opacity: 0; transform: translateY(-4px); transition: all .35s; }
.roomLabel.on { opacity: 1; transform: none; }
.combo { font-style: normal; font-weight: 900; font-size: 14px; color: var(--ink); background: var(--tape); padding: 5px 11px; border-radius: 99px;
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); }
.combo.on { opacity: 1; transform: scale(1); }
.combo.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.2); } }
.powers { position: absolute; top: calc(var(--sat) + 96px); right: calc(var(--sar) + 12px); display: flex; flex-direction: column; gap: 8px; }
.pw { --p: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--cream);
  background: radial-gradient(closest-side, rgba(18,26,56,.92) 80%, transparent 83%), conic-gradient(var(--tape) calc(var(--p) * 360deg), rgba(255,255,255,.15) 0);
  animation: pwIn .35s var(--ease); --ac: var(--coral); }
.pw > span { width: 22px; height: 22px; }
@keyframes pwIn { from { transform: scale(0); } }
.rotBtn { position: absolute; bottom: calc(var(--sab) + 24px); right: calc(var(--sar) + 18px); width: 92px; height: 92px; border-radius: 50%; pointer-events: auto;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #4FDCC6, var(--mint) 60%, var(--mintD));
  box-shadow: 0 7px 0 #146B5D, 0 14px 26px rgba(0,0,0,.3), inset 0 0 0 3.5px rgba(255,255,255,.5); }
body.lefty .rotBtn { right: auto; left: calc(var(--sal) + 18px); }
.rotBtn:active, .rotBtn.press { transform: translateY(5px); box-shadow: 0 2px 0 #146B5D, inset 0 0 0 3.5px rgba(255,255,255,.5); }
.rotBtn.nudge { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.1); box-shadow: 0 7px 0 #146B5D, 0 0 0 14px rgba(47,194,168,.28), inset 0 0 0 3.5px rgba(255,255,255,.5); } }
.rotIco { width: 52px; height: 52px; }
#rotGlyph { transform-origin: 28px 28px; transition: transform .25s var(--ease); }
.rotBtn.vertical #rotGlyph { transform: rotate(90deg); }
.coach { position: absolute; left: 50%; top: calc(var(--sat) + 104px); transform: translate(-50%, -8px); opacity: 0; transition: all .3s;
  width: max-content; max-width: calc(100vw - 40px); background: var(--paper); color: var(--ink); text-align: center;
  font-weight: 900; font-size: 18px; padding: 12px 18px 13px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.coach.on { opacity: 1; transform: translate(-50%, 0); }
.coach small { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ink2); }
.count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 116px; font-weight: 900; color: var(--cream);
  text-shadow: 0 7px 0 var(--coralD), 0 14px 28px rgba(0,0,0,.35); opacity: 0; }
.count.pop { animation: countPop .55s var(--ease) both; }
@keyframes countPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.7); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-60%) scale(.9); } }
.hand { position: absolute; left: 50%; top: 64%; width: 44px; opacity: 0; transform: translate(-50%, 0); }
.hand.on { animation: handDrag 1.6s ease-in-out infinite; }
@keyframes handDrag { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, 0); } 45% { transform: translate(-130%, 0); } 75% { transform: translate(30%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* =================================================================
   CARDS (work order, receipt, pause)
   ================================================================= */
.dim { background: rgba(12,17,36,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 20; }
#modal { display: grid; place-items: center; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); overflow-y: auto; }
.modalBox { width: min(100%, 380px); }
.card { position: relative; background: var(--paper); color: var(--ink); border-radius: 28px; padding: 24px 22px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: cardIn .4s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.card .kicker { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink3); }
.card h2 { text-wrap: balance; margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.08; }
.card .note { text-wrap: pretty; margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--ink2); line-height: 1.38; }
.card .tape { position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; margin-left: -46px; transform: rotate(-2.5deg); background: var(--tape); opacity: .92;
  clip-path: polygon(0 10%, 6% 0, 12% 10%, 88% 10%, 94% 0, 100% 10%, 100% 90%, 94% 100%, 88% 90%, 12% 90%, 6% 100%, 0 90%); }
.card.center { text-align: center; }
.card .for { margin: 5px 0 0; font-size: 18px; font-weight: 800; color: var(--ink2); line-height: 1.2; }
.bubble { position: relative; margin: 16px 0 0; padding: 12px 15px; border-radius: 16px; background: var(--paper2); font-size: 15.5px; font-weight: 700; color: var(--ink2); line-height: 1.35; text-wrap: pretty; }
.bubble::before { content: ""; position: absolute; top: -7px; left: 24px; width: 16px; height: 16px; background: var(--paper2); transform: rotate(45deg); border-radius: 3px; }
.stamp { position: absolute; right: -8px; top: -14px; transform: rotate(10deg); border: 3px solid currentColor; color: var(--coral); border-radius: 10px; background: var(--paper);
  box-shadow: 0 6px 14px rgba(0,0,0,.18); padding: 3px 10px; font-weight: 900; font-size: 15px; opacity: 0; animation: stamp .35s .45s var(--ease) forwards; }
.stamp.ok { color: var(--mint); }
@keyframes stamp { from { opacity: 0; transform: rotate(10deg) scale(2.2); } to { opacity: 1; transform: rotate(10deg) scale(1); } }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.actions .row { display: flex; gap: 10px; }
.actions .row .btn { flex: 1; }
.preview { display: block; width: 100%; height: 120px; margin: 16px 0 0; border-radius: 18px; background: linear-gradient(180deg, #F3E2C3, #E7CDA0); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 10px 6px; background: var(--paper2); border-radius: 16px; text-align: center; }
.statV { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statL { font-size: 12.5px; font-weight: 700; color: var(--ink2); line-height: 1.15; }
.miniStars { display: inline-flex; gap: 2px; }
.miniStars .gi { width: 17px; height: 17px; color: var(--paper3); }
.miniStars .on .gi, .miniStars .on { color: var(--tape); }
.statV .miniStars .gi { width: 19px; height: 19px; }
.handling { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #EAF6F1; color: #23614F; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.handling > span { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--mint); color: #fff; }
.handling:not(.job) { white-space: nowrap; }
.bigStars { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 16px 0 0; }
.bigStars span { width: 50px; height: 50px; color: var(--paper3); }
.bigStars span:nth-child(2) { width: 64px; height: 64px; margin-bottom: 8px; }
.bigStars span.on { color: var(--tape); animation: starPop .45s var(--ease); }
@keyframes starPop { from { transform: scale(.3) rotate(-30deg); } }
.earned { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.earned b { font-size: 40px; font-weight: 900; color: var(--coral); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.earned .coin { width: 34px; height: 34px; box-shadow: inset 0 -3px 0 #D99A12; }
.earnedNote { margin: 7px 0 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink3); line-height: 1.35; text-wrap: balance; }
.meter { position: relative; height: 22px; margin: 16px 0 0; border-radius: 99px; background: var(--paper2); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(180deg, #FFE27E, var(--tape)); transition: width .8s cubic-bezier(.2,.8,.3,1); }
.meter span { position: absolute; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: var(--ink); }
.toggles { display: flex; gap: 10px; margin-top: 16px; }
.tog { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; line-height: 1; border-radius: 16px; background: var(--paper2); color: var(--ink3); font-weight: 800; font-size: 15px; }
.tog > span { width: 20px; height: 20px; }
.tog.on { background: #DFF4EE; color: #1E7A68; box-shadow: inset 0 0 0 2px var(--mint); }

/* =================================================================
   SHEETS
   ================================================================= */
.sheetWrap { display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(100%, 540px); max-height: 90%; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: 28px 28px 0 0; padding: 8px 18px calc(var(--sab) + 18px); box-shadow: 0 -12px 40px rgba(0,0,0,.25); transition: transform .38s cubic-bezier(.2,1,.3,1); }
.sheetWrap.hidden .sheet { transform: translateY(105%); }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--paper3); margin: 0 auto 10px; flex: none; }
.sheetHead { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheetHead h2 { margin: 0; flex: 1; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.sheetBody { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; margin: 0 -18px; padding: 0 18px 4px; }
.lead { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ink2); line-height: 1.4; }
.lead.center { text-align: center; margin: 16px 0 0; }

/* grouped lists (settings) */
.groupLabel { margin: 18px 4px 8px; font-size: 14px; font-weight: 800; color: var(--ink3); }
.groupLabel:first-child { margin-top: 0; }
.group { background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--paper2); overflow: hidden; }
.setRow { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-weight: 800; font-size: 16.5px; }
.setRow + .setRow { border-top: 1.5px solid var(--paper2); }
.setRow > div { flex: 1; }
.setRow small { display: block; font-size: 13px; font-weight: 700; color: var(--ink3); margin-top: 2px; }
.sw { position: relative; flex: none; width: 54px; height: 32px; border-radius: 99px; background: #DCCDB0; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.15); transition: transform .22s var(--ease); }
.sw.on { background: var(--mint); } .sw.on::after { transform: translateX(22px); }
.danger { display: block; margin: 18px auto 0; color: var(--coral); font-weight: 800; font-size: 15px; min-height: 44px; padding: 0 16px; }
.foot { margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink3); }

/* segmented control */
.seg { flex: none; display: flex; background: var(--paper2); border-radius: 14px; padding: 4px; margin-bottom: 14px; }
.seg button { flex: 1; height: 38px; border-radius: 11px; font-weight: 800; font-size: 15px; color: var(--ink2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.08); }

/* showroom */
.stage { position: relative; border-radius: 22px; background: linear-gradient(180deg, #F3E2C3, #E5C996); overflow: hidden; }
.stage canvas { display: block; width: 100%; height: 156px; }
.stageInfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 2px 0; }
.stageInfo h3 { margin: 0; font-size: 21px; font-weight: 900; }
.stageInfo small { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink3); margin-top: 2px; }
.stageInfo .btn { min-width: 128px; min-height: 48px; font-size: 16px; padding: 0 16px; }
.price { display: inline-flex; align-items: center; gap: 6px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.swatch { position: relative; aspect-ratio: 1.45; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--paper2); display: grid; place-items: center; }
.swatch i { width: 46%; height: 42%; border-radius: 9px; background: var(--c1); box-shadow: inset 0 -6px 0 var(--c2); }
.swatch.crewSw i { width: 36%; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--c2); box-shadow: inset 0 -8px 0 var(--c1); }
.swatch.sel { box-shadow: 0 0 0 3px var(--ink); }
.swatch .tag { position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; padding: 4px; }
.swatch .tag.lock { background: var(--paper2); color: var(--ink3); }
.swatch .tag.eq { background: var(--mint); color: #fff; padding: 4px; }

/* routes */
.routeGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rt { position: relative; aspect-ratio: .92; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--paper2), 0 4px 0 var(--paper3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink); }
.rt:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--paper2), 0 1px 0 var(--paper3); }
.rtNum { font-size: 22px; font-weight: 900; line-height: 1; }
.rtItem { width: 20px; height: 20px; color: var(--ink3); --ac: var(--coral); }
.rt .miniStars .gi { width: 13px; height: 13px; }
.rt.current { background: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coralD); }
.rt.current .rtItem { color: #fff; }
.rt.current .miniStars .gi { color: rgba(255,255,255,.4); }
.rt.locked { background: var(--paper2); box-shadow: none; color: var(--ink3); pointer-events: none; }
.rt.locked .rtLock { width: 18px; height: 18px; }

/* badges */
.badgeGrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.badgeCard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--paper2); }
.medal { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; padding: 12px; color: #fff;
  background: var(--bc, var(--ink3)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 3px #fff, 0 0 0 5px var(--paper3); --ac: rgba(255,255,255,.55); }
.badgeCard:not(.got) .medal { background: var(--paper2); color: var(--ink3); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--paper2); --ac: var(--paper3); }
.badgeCard.got .medal { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 3px #fff, 0 0 0 5px var(--tape); }
.badgeCard > div { flex: 1; min-width: 0; }
.badgeCard b { display: block; font-size: 16px; }
.badgeCard small { display: block; font-size: 13px; font-weight: 700; color: var(--ink3); margin-top: 1px; }
.bprog { position: relative; height: 6px; border-radius: 99px; background: var(--paper2); margin-top: 7px; overflow: hidden; }
.bprog i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--tape); }
.badgeCard.got small { color: var(--mintD); }

/* daily */
.daily { text-align: center; }
.daily > .btn.coral { margin-bottom: 40px; }
.dailyTop { display: flex; align-items: center; gap: 16px; text-align: left; margin-bottom: 16px; }
.cal { flex: none; display: inline-flex; flex-direction: column; width: 92px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--paper2), 0 5px 0 var(--paper3); text-align: center; }
.cal b { background: var(--coral); color: #fff; font-size: 14px; padding: 5px 0; }
.cal strong { font-size: 42px; line-height: 1.15; padding: 2px 0 6px; }
.streak { display: flex; justify-content: center; gap: 6px; margin: 4px 0 18px; }
.streak i { width: 34px; height: 34px; border-radius: 11px; background: var(--paper2); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; color: var(--ink3); }
.streak i.on { background: var(--tape); color: var(--ink); box-shadow: 0 3px 0 var(--tapeD); }

/* =================================================================
   TOAST, WIPE, TURN
   ================================================================= */
.toast { position: fixed; left: 50%; top: calc(var(--sat) + 12px); transform: translate(-50%, -20px); opacity: 0; z-index: 40; pointer-events: none;
  display: flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); font-weight: 800; padding: 10px 18px 10px 10px; border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); transition: all .35s var(--ease); max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .medal { width: 40px; height: 40px; padding: 9px; box-shadow: none; }
.toast small { display: block; font-size: 13px; font-weight: 700; color: var(--ink2); }
.toast.plain { padding-left: 18px; }
.toast > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wipe i { display: none; position: absolute; top: -40vh; height: 180vh; left: calc(100vw + 50vh); width: 220vw; transform: skewX(-14deg);
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.2) 30px 33px), linear-gradient(90deg, #F2BA22, var(--tape) 12%, #FFE27E 50%, var(--tape) 88%, #F2BA22); }
.wipe.run i { display: block; animation: wipeGo .7s linear both; }
@keyframes wipeGo { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(calc(-320vw - 100vh)) skewX(-14deg); } }
#turn { z-index: 70; display: grid; place-items: center; text-align: center; padding: 24px; background: radial-gradient(90% 70% at 50% 40%, #2E4A8A, var(--night)); }
.turnInner h2 { margin: 14px 0 6px; font-size: 26px; font-weight: 900; }
.turnInner p { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); }
.turnIco { width: 96px; height: 96px; animation: tilt 2.2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }

@media (max-width: 400px) {
  .homePanel { padding-left: calc(var(--sal) + 16px); padding-right: calc(var(--sar) + 16px); }
  .modes { gap: 10px; }
  .mode { gap: 9px; padding: 9px 10px; }
  .modeIco { width: 34px; height: 34px; padding: 7px; }
  .modeText b { font-size: 15px; }
  .modeText small { font-size: 12.5px; }
}
/* =================================================================
   SMALL PHONES
   ================================================================= */
@media (max-height: 720px) {
  .homeBrand { top: calc(var(--sat) + 54px); }
  .homePanel { gap: 10px; padding-top: 14px; }
  .play { min-height: 70px; }
  .play .bt { font-size: 24px; }
  .mode { min-height: 54px; }
  .modeIco { width: 34px; height: 34px; padding: 7px; }
  .dock button { padding: 6px 0 4px; }
  .loaderArt { width: min(62vw, 33vh); }
  .loaderFoot { height: 92px; }
}

/* =================================================================
   TABLETS
   ================================================================= */
html.tablet .homeBrand { top: calc(var(--sat) + 80px); font-size: clamp(84px, 11.5vmin, 136px); }
html.tablet .chip { height: 44px; font-size: 19px; }
html.tablet .homeTop { left: calc(var(--sal) + 28px); top: calc(var(--sat) + 20px); }
html.tablet .homePanel { gap: 18px; padding-top: 28px; padding-bottom: calc(var(--sab) + 20px); }
html.tablet .play { max-width: 520px; min-height: 96px; border-radius: 28px; }
html.tablet .play .bt { font-size: 33px; }
html.tablet .play .bs { font-size: 17.5px; }
html.tablet .play .bs .gi { width: 20px; height: 20px; }
html.tablet .modes { max-width: 520px; gap: 16px; }
html.tablet .mode { min-height: 74px; border-radius: 22px; }
html.tablet .modeText b { font-size: 18px; } html.tablet .modeText small { font-size: 14.5px; }
html.tablet .modeIco { width: 46px; height: 46px; padding: 10px; border-radius: 14px; }
html.tablet .dock { max-width: 520px; }
html.tablet .dock button { font-size: 14px; } html.tablet .dock button > span { width: 30px; height: 30px; }
html.tablet .loaderArt { width: min(46vmin, 440px); }
html.tablet .loaderBrand { font-size: clamp(80px, 10vmin, 120px); }
html.tablet .loadBlock { width: 360px; }
html.tablet .progCap { font-size: 16px; }
html.tablet .hint { font-size: 17px; max-width: 380px; }
html.tablet .startBtn { min-width: 300px; min-height: 72px; font-size: 24px; border-radius: 24px; }
html.tablet #loader { justify-content: center; }
html.tablet .loaderMain { flex: none; }
html.tablet .loaderFoot { height: auto; margin-top: 30px; }
html.tablet .hint { min-height: 0; }
html.tablet .btn .bt { font-size: 22px; }
html.tablet .hudTop { left: 50%; right: auto; width: min(760px, calc(100% - 40px)); transform: translateX(-50%); top: calc(var(--sat) + 16px); }
html.tablet .hudSub { top: calc(var(--sat) + 70px); }
html.tablet .roomLabel, html.tablet .combo { font-size: 16px; padding: 6px 14px; }
html.tablet .rotBtn { width: 120px; height: 120px; bottom: calc(var(--sab) + 36px); right: calc(var(--sar) + 36px); }
html.tablet body.lefty .rotBtn { left: calc(var(--sal) + 36px); }
html.tablet .rotIco { width: 66px; height: 66px; }
html.tablet .powers { top: calc(var(--sat) + 110px); right: calc(50% - min(380px, 50% - 20px)); }
html.tablet .pw { width: 52px; height: 52px; } html.tablet .pw > span { width: 26px; height: 26px; }
html.tablet .coach { font-size: 22px; top: calc(var(--sat) + 124px); }
html.tablet .coach small { font-size: 16px; }
html.tablet .count { font-size: 160px; }
html.tablet .modalBox { width: min(100%, 460px); }
html.tablet .card { padding: 30px 28px 26px; }
html.tablet .card h2 { font-size: 36px; }
html.tablet .sheetWrap { align-items: center; padding: 32px; }
html.tablet .sheet { width: min(100%, 620px); max-height: min(86vh, 920px); border-radius: 32px; padding: 22px 26px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transition: transform .35s var(--ease), opacity .25s; }
html.tablet .sheetBody { margin: 0 -26px; padding: 0 26px 4px; }
html.tablet .sheetWrap.hidden .sheet { transform: translateY(30px) scale(.97); opacity: 0; }
html.tablet .grab { display: none; }
html.tablet .stage canvas { height: 210px; }
html.tablet .swatches { grid-template-columns: repeat(4, 1fr); }
html.tablet .swatch { aspect-ratio: 1.5; }
html.tablet .swatch i { width: 34%; }
html.tablet .swatch.crewSw i { width: 46%; }
html.tablet .routeGrid { grid-template-columns: repeat(6, 1fr); }
html.tablet .badgeGrid { grid-template-columns: 1fr 1fr; }
html.tablet .toast { font-size: 18px; }

/* tablets: one row of home buttons (portrait and landscape) */
  html.tablet .homePanel { display: grid; grid-template-columns: 1fr minmax(0, 1.25fr) 1fr; grid-template-areas: "daily play marathon" "dock dock dock";
  align-items: center; justify-items: stretch; column-gap: 18px; row-gap: 14px; width: min(100%, 1040px); margin: 0 auto; padding-top: 22px; }
html.tablet .modes { display: contents; }
html.tablet #dailyBtn { grid-area: daily; } html.tablet #marathonBtn { grid-area: marathon; }
html.tablet .play { grid-area: play; max-width: none; }
html.tablet .dock { grid-area: dock; justify-self: center; width: 520px; }
/* tablets held sideways */
@media (orientation: landscape) {
  html.tablet .homeBrand { top: calc(var(--sat) + 36px); left: 6%; right: auto; width: 40%; font-size: clamp(64px, 9vmin, 104px); }
  html.tablet #loader { padding-top: calc(var(--sat) + 3vh); }
  html.tablet .loaderArt { width: min(38vh, 380px); }
}

/* launch-screen capture mode */
html.splash .loaderFoot, html.splash .kaSweat, html.splash .loaderBrand, html.splash .loadBlock { visibility: hidden; }
html.splash *, html.splash *::before, html.splash *::after { animation: none !important; transition: none !important; }

/* calm mode (reduce motion) */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
html.calm .carry { animation: none !important; transform: translateX(70px); }
html.calm .wipe { display: none; }

/* ---------- loading bar: a tape measure ---------- */
.tapeMeasure { display: flex; align-items: center; height: 56px; }
.tapeCase { position: relative; z-index: 2; flex: 0 0 56px; height: 56px; border-radius: 17px;
  background: linear-gradient(160deg, #FFE27E, var(--tape) 45%, var(--tapeD)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 6px 0 rgba(0,0,0,.25); }
.tapeCase i { position: absolute; inset: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 6px #3C3450; animation: reel .9s linear infinite; }
.tapeCase i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--tape); }
.tapeCase::after { content: ""; position: absolute; right: -4px; top: 19px; width: 10px; height: 18px; border-radius: 3px; background: #3C3450; }
#loader.ready .tapeCase i { animation: none; }
@keyframes reel { to { transform: rotate(360deg); } }
.tapeLane { position: relative; flex: 1; height: 24px; margin-left: -2px; margin-right: 8px; }
.tapeBlade { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 3px 3px 0;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 40px) 0 0 / 100% 12px no-repeat,
    linear-gradient(180deg, #FFF0B0, #FFE27E 50%, #F2C844);
  box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: width .25s ease-out; }
.tapeHook { position: absolute; right: -7px; top: -6px; width: 9px; height: 36px; border-radius: 3px; background: #A9B3C8; box-shadow: inset -3px 0 0 #7C869C; }
.progCap { padding-left: 66px; padding-right: 8px; }
html.tablet .tapeMeasure { height: 64px; } html.tablet .tapeCase { flex-basis: 64px; height: 64px; }
html.tablet .tapeCase i { inset: 16px; } html.tablet .tapeCase::after { top: 22px; }
html.tablet .progCap { padding-left: 74px; }
html.tablet .loadBlock { width: 380px; }
html.tablet .loaderMid { flex: none; min-height: 0; margin-top: 36px; }
@media (max-height: 720px) { #loader { padding-top: calc(var(--sat) + 4vh); } }

/* phones: no "New" pill on the daily button */
html:not(.tablet) .newTag { display: none; }

/* tablets: home buttons only as big as their contents */
html.tablet .play { width: auto; max-width: none; min-width: 0; padding: 14px 56px; }
html.tablet .modes { display: flex; justify-content: center; width: auto; max-width: none; }
html.tablet .mode { flex: none; padding: 12px 20px; }
html.tablet .modeText b, html.tablet .modeText small { overflow: visible; }
html.tablet .homePanel { grid-template-columns: 1fr auto 1fr; justify-items: center; }
html.tablet .modes { display: contents; }
html.tablet #dailyBtn { justify-self: end; } html.tablet #marathonBtn { justify-self: start; }

/* loader: just the tape measure, no caption */
.progCap { display: none; }
.loaderFoot { height: auto; padding: 0 0 calc(7vh + 8px); }
html.tablet .loaderFoot { padding-bottom: 0; }
/* every button centres its contents */
.mode { justify-content: center; text-align: center; }
.modeText { align-items: center; }

/* turn hint: a soft ring when the gap ahead needs the other orientation */
.rotBtn.hint:not(.nudge)::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 4px solid rgba(111,227,207,.9); animation: hintRing 1.1s ease-out infinite; pointer-events: none; }
@keyframes hintRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
html.calm .rotBtn.hint::after { animation: none; opacity: .8; }
/* home tips counter ticking up */
.chip.gain { box-shadow: 0 0 0 2px var(--tape); transition: box-shadow .2s; }
.linkRow { width: 100%; text-align: left; }

/* routes grouped by neighbourhood */
.hoodHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.hoodHead:first-of-type { margin-top: 4px; }
.hoodHead b { font-size: 18px; font-weight: 900; }
.hoodHead > span { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: var(--ink2); }
.hoodHead .hs { width: 16px; height: 16px; color: var(--tapeD); }
.hoodHead.locked b, .hoodHead.locked > span { color: var(--ink3); }
.hoodHead.locked .hs { color: var(--ink3); }
/* stats list */
.statRow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 16px; font-weight: 800; }
.statRow + .statRow { border-top: 1.5px solid var(--paper2); }
.srIco { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--paper2); color: var(--ink2); --ac: var(--coral); }
.srL { flex: 1; color: var(--ink2); font-weight: 700; }
.statRow b { font-variant-numeric: tabular-nums; font-weight: 900; text-align: right; }

/* ---------- Lift button + side-job pill ---------- */
.liftBtn { position: absolute; bottom: calc(var(--sab) + 136px); right: calc(var(--sar) + 30px); width: 68px; height: 68px; border-radius: 50%; pointer-events: auto;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #FFE592, var(--tape) 60%, var(--tapeD));
  box-shadow: 0 6px 0 #B9860F, 0 12px 22px rgba(0,0,0,.3), inset 0 0 0 3px rgba(255,255,255,.55); transition: opacity .2s, filter .2s; }
.liftBtn:active, .liftBtn.press { transform: translateY(4px); box-shadow: 0 2px 0 #B9860F, inset 0 0 0 3px rgba(255,255,255,.55); }
.liftIco { width: 42px; height: 42px; }
.liftBtn.cool { filter: saturate(.4) brightness(.85); }
.liftBtn.hint:not(.cool)::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 4px solid rgba(255,214,90,.95); animation: hintRing 1.1s ease-out infinite; pointer-events: none; }
.liftBtn.nudge { animation: nudge 1s ease-in-out infinite; }
#hud.noLift .liftBtn { display: none; }
body.lefty .liftBtn { right: auto; left: calc(var(--sal) + 30px); }
html.tablet .liftBtn { width: 88px; height: 88px; bottom: calc(var(--sab) + 180px); right: calc(var(--sar) + 52px); }
html.tablet body.lefty .liftBtn { left: calc(var(--sal) + 52px); }
html.tablet .liftIco { width: 54px; height: 54px; }
.jobPill { position: absolute; top: calc(var(--sat) + 60px); left: calc(var(--sal) + 10px); display: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px;
  border-radius: 99px; background: rgba(18,26,56,.8); font-weight: 900; font-size: 14px; color: var(--cream); font-variant-numeric: tabular-nums; }
.jobPill.on { display: inline-flex; }
.jpI { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--tape); color: var(--ink); --ac: var(--tape); }
.jobPill.done { background: rgba(30,143,125,.9); }
.jobPill.done .jpI { background: #fff; color: var(--mintD); }
html.tablet .jobPill { top: calc(var(--sat) + 72px); left: calc(50% - min(380px, 50% - 20px)); height: 36px; font-size: 15px; }
/* work order + receipt side job */
.handling.job { background: #FFF4D6; color: #7A5A12; }
.handling.job > span { background: var(--tape); color: var(--ink); --ac: var(--tape); }
.handling.job b { display: block; font-size: 12.5px; font-weight: 900; color: #A07A1A; }
.jobLine { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 14px; background: var(--paper2); color: var(--ink3); font-size: 14px; font-weight: 800; text-wrap: balance; }
.jobLine > span { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--paper3); color: #fff; }
.jobLine.done { background: #DFF4EE; color: #1E7A68; }
.jobLine.done > span { background: var(--mint); }
/* Showroom studio for crew and hats */
.stage.studio { background: radial-gradient(120% 90% at 50% 100%, #FFE9C2, #F3D9AC 55%, #E6C38D); }
.stage.studio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(185,130,74,0), rgba(185,130,74,.25)); }
.swatch.portrait { overflow: hidden; }
.swatch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.swatch .tag { z-index: 1; }
.swatch.sofaSw { overflow: hidden; }
/* 7.1: each swatch is a little product card: picture on top, status underneath */
.swatch { display: flex; flex-direction: column; aspect-ratio: 1.12; padding: 0; overflow: hidden; background: #fff; }
.swatch .swImg { position: relative; flex: 1; width: 100%; background: linear-gradient(180deg, #FFF8EC, #F4E3C3); }
.swatch.sofaSw .swImg { background: linear-gradient(180deg, #FFFFFF, #FBF1DF); }
.swatch .swFoot { flex: none; height: 26px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 12.5px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.swatch .swFoot .coin { width: 13px; height: 13px; box-shadow: inset 0 -1.5px 0 #D99A12; }
.swatch .swFoot.far { color: var(--ink3); }
.swatch .swFoot.own { color: var(--ink3); font-weight: 700; }
.swatch .swFoot.on { color: var(--mintD, #17806F); }
.swatch .swFoot .ck { width: 14px; height: 14px; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; padding: 2.5px; }
.swatch .swFoot .ck svg { width: 100%; height: 100%; }
html.tablet .swatch { aspect-ratio: 1.3; }
html.tablet .swatch.portrait { aspect-ratio: 1.05; }
.lead.center { text-wrap: balance; }
html.tablet .swatch .swFoot { height: 30px; font-size: 13.5px; }
.seg button { white-space: nowrap; }
.rtJob { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mint); color: #fff; }
.rt.current .rtJob { background: #fff; color: var(--coral); }
#hud.arriving .liftBtn, #hud.arriving .rotBtn { opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .3s, transform .3s; }

/* Retained phone-fit compatibility: constrain mode labels without changing v7.1 design. */
.modeText b, .modeText small { max-width: 100%; }
.modeText small { white-space: normal; text-wrap: balance; }
@media (max-width: 380px) {
  .mode { gap: 6px; padding: 10px 4px; }
  .modeIco { width: 32px; height: 32px; padding: 6px; }
  .modeText b { font-size: 14px; }
  .modeText small { font-size: 12px; }
}

/* Match the exposed iOS system backdrop to the active app surface. */
html:has(#loader:not(.hidden)) { --app-bg: var(--night); }
html:has(#sheet:not(.hidden)) { --app-bg: var(--paper); }
html:has(#turn:not(.hidden)) { --app-bg: var(--night); }
@media (prefers-reduced-motion: reduce) {
  #loader *, #loader *::before, #loader *::after { animation: none !important; transition: none !important; }
}

/* Loader surroundings refined; v014 title styling and placement retained exactly. */
#loader { background: radial-gradient(90% 65% at 50% 32%, #2D447A 0%, #1E2E58 56%, var(--night) 100%); }
html:not(.tablet) #loader .loadBlock { width: min(74vw, 280px); }
html:not(.tablet) #loader .tapeMeasure { height: 50px; }
html:not(.tablet) #loader .tapeCase { flex-basis: 50px; height: 50px; border-radius: 15px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 4px 0 rgba(0,0,0,.22); }
html:not(.tablet) #loader .tapeCase i { inset: 13px; }
html:not(.tablet) #loader .tapeCase::after { top: 16px; }
html:not(.tablet) #loader .tapeLane { height: 21px; }
html:not(.tablet) #loader .tapeHook { top: -5px; height: 31px; }
html:not(.tablet) #loader .loaderFoot { padding-bottom: clamp(24px, 6vh, 54px); }
#loader .startBtn { box-shadow: 0 5px 0 var(--coralD), 0 9px 18px rgba(0,0,0,.15); }
#loader.ready .startBtn { animation: none; }
#loader .startBtn:active { box-shadow: 0 1px 0 var(--coralD); }
#loader .kaGlow { animation: none; opacity: .6; }
#loader .kaSofa { animation: none; }
#loader .kaSweat { animation-duration: 5.5s; }
#loader .kaEyes { animation-duration: 6.4s; }
#loader .kaWobble { animation: none; opacity: .6; }

/* =================================================================
   v018 — Routes tip cards, bonus locks, Settings polish, light refinements
   ================================================================= */
/* tip cards sit above an open sheet (Routes) */
#modal.over { z-index: 30; }
.tipCard { padding-top: 30px; }
.tipCard .tipIco { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; padding: 14px; border-radius: 50%;
  background: #EAF6F1; color: var(--mint); --ac: var(--paper); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--paper2); }
.tipCard .note { max-width: 30ch; margin-left: auto; margin-right: auto; }
.tipCard .actions { margin-top: 22px; }
.tipCard .btn.quiet { min-height: 40px; margin-top: -4px; }

/* routes: the bonus worlds start under a soft rule instead of a lead paragraph */
.bonusGap { height: 1.5px; margin: 26px 4px 0; border-radius: 2px; background: var(--paper2); }
.bonusGap + .hoodHead { margin-top: 18px; }
.rt.locked { box-shadow: inset 0 0 0 1.5px rgba(232,217,188,.55); }
.rt.locked .rtItem { opacity: .55; }
.routeGrid + .hoodHead { margin-top: 22px; }

/* settings: paper cards with a touch more depth and calmer hierarchy */
.sheetBody .groupLabel { margin: 22px 6px 8px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.sheetBody .groupLabel:first-child { margin-top: 2px; }
.sheetBody .group { border-radius: 20px; box-shadow: 0 0 0 1.5px var(--paper2), 0 3px 0 var(--paper2), 0 10px 22px rgba(106,95,128,.08); }
.setRow { min-height: 58px; padding: 14px 16px; gap: 14px; letter-spacing: -.005em; }
.setRow + .setRow { border-top: 0; box-shadow: inset 0 1.5px 0 var(--paper2); }
.setRow small { margin-top: 3px; font-size: 13px; line-height: 1.32; text-wrap: pretty; }
.sw { width: 52px; height: 31px; background: #E3D6BD; box-shadow: inset 0 1.5px 2px rgba(42,34,56,.12); }
.sw::after { top: 2.5px; left: 2.5px; width: 26px; height: 26px; box-shadow: 0 2px 4px rgba(42,34,56,.18), 0 0 0 .5px rgba(42,34,56,.06); }
.sw.on { background: var(--mint); box-shadow: inset 0 1.5px 2px rgba(30,143,125,.35); } .sw.on::after { transform: translateX(21px); }
.sw:active::after { width: 30px; }
.sw.on:active::after { transform: translateX(17px); }
.linkRow { color: var(--ink); }
.linkRow:active { background: var(--paper); }
.linkRow .chev { flex: none; width: 10px; height: 10px; margin-right: 6px; border: solid var(--ink3); border-width: 2.5px 2.5px 0 0; border-radius: 1.5px; transform: rotate(45deg); }
.setFoot { margin: 22px 0 4px; padding-top: 14px; border-top: 1.5px dashed var(--paper3); text-align: center; }
.setFoot .danger { margin: 0 auto; border-radius: 14px; min-height: 42px; padding: 0 18px; background: rgba(255,90,54,.08); }
.setFoot .danger:active { background: rgba(255,90,54,.16); }
.setFoot .foot { margin-top: 10px; font-size: 12.5px; }

/* small consistency pass */
.sheetHead h2 { line-height: 1.1; }
.sheet { box-shadow: 0 -12px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7); }
.card .actions .btn.quiet { margin-top: -2px; }

/* =================================================================
   v019 — Stats top border + last light polish (theme unchanged)
   ================================================================= */
/* Stats/Settings cards: a real 1.5px paper border instead of an outer ring. The ring sat outside the box and
   the sheet's scroll clip (.sheetBody, overflow-y:auto, 0 top padding) cut off the first card's top edge. */
.sheetBody, html.tablet .sheetBody { padding-top: 3px; }
.sheetBody .group { border: 2px solid #EFE1C6; /* between paper2 and paper3: a clear edge on every side */ box-shadow: 0 3px 0 var(--paper2), 0 10px 22px rgba(106,95,128,.08); }
/* stats rows: same quiet hairline + rhythm as settings rows */
.statRow { min-height: 56px; padding: 11px 16px 11px 12px; }
.statRow + .statRow { border-top: 0; box-shadow: inset 0 1.5px 0 var(--paper2); }
.statRow b { color: var(--ink); letter-spacing: -.01em; }
.srIco { border-radius: 11px; }
/* badges: cards share the card edge + lip language */
.badgeCard { box-shadow: 0 0 0 1.5px var(--paper2), 0 3px 0 var(--paper2); }
.badgeCard:not(.got) { background: #FFFDF8; }
/* segmented control: a hair more contrast on the selected tab */
.seg button.on { box-shadow: 0 2px 0 var(--paper3), 0 2px 6px rgba(42,34,56,.08); }
.seg button:active:not(.on) { background: rgba(255,255,255,.45); }
/* locked tiles: lock icon a touch quieter, tiles still clearly unavailable */
.rt.locked .rtLock { opacity: .8; }
/* tip cards: tighter heading rhythm */
.tipCard h2 { line-height: 1.12; text-wrap: balance; }
.tipCard .note { text-wrap: pretty; }
/* buttons: consistent focus ring for keyboard / switch control users */
.btn:focus-visible, .rt:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
/* lead copy wraps more evenly */
.lead { text-wrap: pretty; }

/* =================================================================
   v020 — Routes/Stats/Settings sheets scroll through the safe area + light polish
   ================================================================= */
/* The safe-area/viewport-bottom padding used to sit on .sheet, below the scrollport, so a dead cream band
   showed above the home indicator while the last tiles were clipped mid-card. The padding now lives inside
   .sheetBody (the scroller), so content scrolls all the way down and the last row rests above the indicator. */
.sheet { padding-bottom: 0; }
.sheetBody { padding-bottom: calc(var(--sab) + 22px); scroll-padding-bottom: calc(var(--sab) + 12px); overscroll-behavior: contain; }
html.tablet .sheet { padding-bottom: 0; }
html.tablet .sheetBody { padding-bottom: 26px; }
/* bonus divider: a little less air around the rule */
.bonusGap { margin-top: 22px; }
.bonusGap + .hoodHead { margin-top: 16px; }
/* the last block in a sheet doesn't add its own bottom margin on top of the scroller padding */
.sheetBody > :last-child { margin-bottom: 0; }
.setFoot { margin-bottom: 0; }

/* =================================================================
   v021 — launch logo stays put, nicer toasts with an animated exit
   ================================================================= */
/* Launch: the native splash (icons/splash/*.jpg, rendered from ?splash with no safe-area inset) puts the key art
   7vh from the top of the full-bleed screen. The HTML loader used calc(var(--sat) + 7vh), so on a notch / Dynamic
   Island phone the art + logo dropped by the inset (≈47–62px) the moment the page took over. Anchor the loader
   content to the same splash position (no --sat), so the hand-off from splash to page is seamless. */
#loader { padding-top: 7vh; }
@media (max-height: 720px) { #loader { padding-top: 4vh; } }
@media (orientation: landscape) { html.tablet #loader { padding-top: 3vh; } }
/* Toast: a cream "taped note" card that matches the game sheets instead of a stark white pill. */
.toast { top: calc(var(--sat) + 10px); gap: 12px; padding: 10px 20px 11px 10px; border-radius: 20px; color: var(--ink);
  background: linear-gradient(180deg, #FFFCF5 0%, var(--paper) 100%);
  box-shadow: inset 0 -3px 0 var(--paper2), 0 0 0 1.5px rgba(42,34,56,.07), 0 6px 0 rgba(6,10,30,.28), 0 16px 32px rgba(6,10,30,.38);
  opacity: 0; transform: translate(-50%, -18px) scale(.96); transition: none; }
.toast::before { content: ""; position: absolute; top: -6px; left: 50%; width: 46px; height: 12px; margin-left: -23px; border-radius: 2px;
  background: linear-gradient(180deg, #FFE27E, var(--tape)); opacity: .92; transform: rotate(-3deg); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.toast.on { opacity: 1; transform: translate(-50%, 0) scale(1);
  transition: opacity .26s ease-out, transform .5s var(--ease); }
.toast.out { opacity: 0; transform: translate(-50%, -14px) scale(.97);
  transition: opacity .4s cubic-bezier(.4, 0, .7, .2) .02s, transform .42s cubic-bezier(.5, 0, .75, .4); }
.toast > div { font-size: 15.5px; line-height: 1.2; letter-spacing: .1px; }
.toast small { margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--ink2); }
.toast .medal { width: 40px; height: 40px; padding: 9px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 0 0 2.5px #fff, 0 0 0 4.5px var(--tape); }
.toast.plain { padding-left: 20px; }
html.tablet .toast > div { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .toast.on, .toast.out { transition: opacity .25s linear; transform: translate(-50%, 0); } }

/* =================================================================
   v022 — no light flash at launch; home tips chip steps aside for post-round popups
   ================================================================= */
/* Launch: the native splash bitmaps (icons/splash/*.jpg) were rendered from ?splash back when #loader used the brighter
   v014 gradient (90% 60% at 50% 34%, #3D5EAB / #22366D 52% / night). The later "loader surroundings refined" rule darkened
   the loader to #2D447A / #1E2E58, so the hand-off from splash to page dimmed the whole sky by ~5 luma (blue -13).
   v022 puts #loader back on the exact splash gradient (measured: splash vs page now differ only by JPEG noise,
   evidence/v022/splash-vs-loader.json), so splash -> page is the same picture. The same night colour is inlined in <head>
   (critical first paint), in theme-color and in the manifest, and the canvas under the loader is night, not lighter navy. */
#loader { background: radial-gradient(90% 60% at 50% 34%, #3D5EAB 0%, #22366D 52%, var(--night) 100%); }
canvas#game { background: var(--night); }
/* Home tips chip: fades out while a post-round toast is up (it sits right under it), fades back in after the queue ends. */
.homeTop .chip { transition: opacity .35s ease-out .05s; }
#home.toasting .homeTop .chip { opacity: 0; pointer-events: none; transition: opacity .25s ease-in; }
@media (prefers-reduced-motion: reduce) { .homeTop .chip, #home.toasting .homeTop .chip { transition: opacity .2s linear; } }
/* HUD sub-row (Michael t129u): the side-job pill used to float on its own (left, top +60, 32px) while the room label and
   combo were a smaller centred pair at top +56, so "Find it" looked cramped and disconnected. v022 makes the three one row:
   a 3-column grid under the top bar (job | room | combo). The room label stays exactly centred, the combo hugs its right,
   the job pill lines up with the pause button's left edge. All three share one height, radius, type size and drop shadow,
   so they read as one HUD family on the wood hallway and the lighter rooms. The grid columns can't overlap: a wide job
   pill pushes the centre pair rather than covering it. The row ends 6px above the power-ups column. */
.hudSub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px;
  top: calc(var(--sat) + 58px); left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); }
.hudSub > * { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 99px; white-space: nowrap;
  font-size: 14.5px; line-height: 1; box-shadow: 0 2px 0 rgba(6,10,30,.22), 0 4px 10px rgba(6,10,30,.16); }
.roomLabel { grid-column: 2; padding: 0 14px; background: rgba(18,26,56,.78); }
.combo { grid-column: 3; justify-self: start; padding: 0 13px; }
.jobPill { grid-column: 1; justify-self: start; position: static; display: none; gap: 7px; padding: 0 14px 0 4px; max-width: 100%;
  background: rgba(18,26,56,.82); font-size: 14.5px; letter-spacing: .1px; }
.jobPill.on { display: inline-flex; }
.jobPill .jpI { flex: none; width: 24px; height: 24px; padding: 4px; box-sizing: border-box; box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.jobPill.done { background: rgba(30,143,125,.94); }
html.tablet .hudSub { left: 50%; right: auto; width: min(760px, calc(100% - 40px)); transform: translateX(-50%); top: calc(var(--sat) + 66px); column-gap: 10px; }
html.tablet .hudSub > * { height: 38px; font-size: 16px; }
html.tablet .roomLabel, html.tablet .combo { padding: 0 16px; }
html.tablet .jobPill { position: static; left: auto; top: auto; height: 38px; font-size: 16px; padding: 0 16px 0 5px; }
html.tablet .jobPill .jpI { width: 28px; height: 28px; padding: 5px; }

/* =================================================================
   v023 — YOUR STREAK card, side-job chip matched to the room/combo chips, lighter badge toasts (Michael t130u)
   ================================================================= */
/* Daily route: YOUR STREAK. v022 showed seven identical beige squares 1–7 that read as empty/disabled. Now a white card
   like the calendar tile: header (eyebrow, "N-day streak", one-line hint, Best pill), then seven day nodes on a track.
   done = tape + check, today = coral ring (filled once played), upcoming = dashed outline; caption = that day's bonus. */
.streakCard { margin: 16px 0 18px; padding: 14px 14px 12px; border-radius: 20px; background: #FFFDF8; text-align: left;
  box-shadow: 0 0 0 1.5px var(--paper2), 0 4px 0 var(--paper3); }
.streakHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.streakHead b { display: block; font-size: 18px; font-weight: 900; line-height: 1.15; color: var(--ink); }
.streakHead small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ink2); }
.streakEy { margin: 0 0 3px; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }
.streakBest { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 900;
  color: var(--ink2); background: var(--paper2); white-space: nowrap; }
.streak { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.streak::before, .streak::after { content: ""; position: absolute; top: 16px; height: 4px; margin-top: -2px; left: calc(100% / 14); border-radius: 99px; }
.streak::before { right: calc(100% / 14); background: var(--paper2); }
.streak::after { width: calc((100% - 100% / 7) * var(--f, 0)); background: linear-gradient(90deg, #FFE27E, var(--tape)); box-shadow: 0 1px 0 var(--tapeD); }
.streak li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.streak li i { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.streak li i svg { width: 16px; height: 16px; }
.streak li small { font-size: 11px; font-weight: 800; line-height: 1; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.streak li.todo i { background: #FFFDF8; color: var(--ink3); border: 2px dashed var(--paper3); }
.streak li.done i { background: linear-gradient(180deg, #FFE27E, var(--tape)); color: var(--ink); box-shadow: 0 2px 0 var(--tapeD); }
.streak li.today i { box-shadow: 0 0 0 3px #FFFDF8, 0 0 0 5px var(--coral); }
.streak li.todo.today i { border: 0; background: #fff; color: var(--coral); font-size: 14.5px; }
.streak li.done.today i { box-shadow: 0 2px 0 var(--tapeD), 0 0 0 3px #FFFDF8, 0 0 0 5px var(--coral); }
.streak li.today small { color: var(--coral); font-weight: 900; }
.streak li.done small { color: var(--ink2); }
html.tablet .streakCard { padding: 16px 18px 14px; }
html.tablet .streak li i { width: 38px; height: 38px; font-size: 15px; }
html.tablet .streak::before, html.tablet .streak::after { top: 19px; }
html.tablet .streak li small { font-size: 12.5px; }

/* HUD sub-row: v022 already matched box height (32/38), radius and shadow, but the job pill still read as a different
   component: heavier type (900 vs 800), a darker fill (.82 vs .78), and a 24px icon disc jammed 4px from the edge (ink gap
   36 left vs 13 right). v023 gives all three chips one token set: fill, hairline, shadow, weight 800, 14px side padding,
   tabular numbers. The job icon is a 20px disc inset 6px all round, i.e. concentric with the pill's rounded end. */
.hudSub { --hc-shadow: 0 1px 0 rgba(6,10,30,.18), 0 3px 8px rgba(6,10,30,.14); --hc-dark: rgba(18,26,56,.8); --hc-line: inset 0 0 0 1px rgba(255,243,220,.09); }
.hudSub > * { font-size: 14.5px; font-weight: 800; letter-spacing: .15px; font-variant-numeric: tabular-nums; line-height: 1; }
.roomLabel { background: var(--hc-dark); padding: 0 14px; box-shadow: var(--hc-line), var(--hc-shadow); }
.combo { padding: 0 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.08), var(--hc-shadow); }
.jobPill { background: var(--hc-dark); gap: 7px; padding: 0 14px 0 6px; font-weight: 800; letter-spacing: .15px; box-shadow: var(--hc-line), var(--hc-shadow); }
.jobPill .jpI { width: 20px; height: 20px; padding: 3.5px; box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.14); }
.jobPill.done { background: rgba(30,143,125,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), var(--hc-shadow); }
html.tablet .hudSub > * { font-size: 16px; }
html.tablet .roomLabel, html.tablet .combo { padding: 0 16px; }
html.tablet .jobPill { padding: 0 16px 0 7px; gap: 8px; }
html.tablet .jobPill .jpI { width: 24px; height: 24px; padding: 4px; }

/* Badge toasts: much less shadow (v022 had a 6px solid dark slab + 16/32px blur at .38 under the card) and a tidier layout:
   eyebrow "Badge earned", the badge name, and the reward as a small tape pill on the right. Enter/exit (.on/.out) unchanged. */
.toast { gap: 11px; padding: 8px 16px 8px 8px; border-radius: 18px; background: #FFFBF3;
  box-shadow: inset 0 -2px 0 rgba(232,217,188,.7), 0 0 0 1px rgba(42,34,56,.08), 0 2px 4px rgba(6,10,30,.10), 0 6px 14px rgba(6,10,30,.12); }
.toast::before { top: -5px; width: 38px; height: 10px; margin-left: -19px; opacity: .9; box-shadow: none; }
.toast.reward { padding-right: 9px; }
.toast > div { font-size: 15.5px; font-weight: 900; line-height: 1.2; letter-spacing: .1px; min-width: 0; }
.toast small { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--ink2); }
.toast .tEy { display: block; margin-bottom: 1px; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }
.toast .medal { width: 38px; height: 38px; padding: 8.5px; box-shadow: inset 0 -2.5px 0 rgba(0,0,0,.14), 0 0 0 2px #fff, 0 0 0 3.5px var(--tape); }
.toast .tRw { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-left: 4px; padding: 0 10px 0 6px; border-radius: 99px;
  font-size: 13.5px; font-weight: 900; color: var(--ink); background: var(--paper2); font-variant-numeric: tabular-nums; }
.toast.plain { padding-left: 18px; }
html.tablet .toast > div { font-size: 18px; }
html.tablet .toast .tEy { font-size: 12px; }
html.tablet .toast .tRw { height: 32px; font-size: 15px; }
@media (max-height: 700px) { .streakCard { margin: 12px 0 14px; padding: 12px 12px 10px; } .streakHead { margin-bottom: 10px; } }

/* =================================================================
   v024 — final polish (Michael t131u): YOUR STREAK refinement, side-job chip row scooted right, clearer side job on the work order
   ================================================================= */
/* HUD sub-row: v022/v023 spread the chips over the full width (job far left, room centred, combo right of centre), so a room or
   tips chip popped up a long way from "Find it". v024 makes the row ONE tight cluster anchored to the right edge (the coins
   chip's right edge): [room] [×N tips] [side job]. The side-job pill is the persistent chip, so it sits at the anchor and never
   moves; room / combo chips pop in to its left 6px apart and collapse to zero width when hidden (so no holes in the row). */
.hudSub { display: flex; justify-content: flex-end; align-items: center; column-gap: 0; grid-template-columns: none; contain: layout style; }
.hudSub > * { flex: none; }
.roomLabel { order: 1; grid-column: auto; }
.combo { order: 2; grid-column: auto; justify-self: auto; }
.jobPill { order: 3; grid-column: auto; justify-self: auto; max-width: none; }
.roomLabel, .combo { max-width: 0; padding-left: 0; padding-right: 0; margin-right: 0; overflow: hidden;
  transition: opacity .2s ease-out, transform .25s var(--ease), max-width .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease); }
.roomLabel.on, .combo.on { max-width: 220px; padding-left: 14px; padding-right: 14px; margin-right: 6px; }
.hudSub:not(:has(> .jobPill.on)) { margin-right: -6px; } /* no side job: the last visible chip still ends on the anchor */
html.tablet .roomLabel, html.tablet .combo { padding-left: 0; padding-right: 0; }
html.tablet .roomLabel.on, html.tablet .combo.on { padding-left: 16px; padding-right: 16px; margin-right: 8px; }
html.tablet .hudSub { column-gap: 0; } /* v022's tablet column-gap 10 would add a gap next to every collapsed chip */
html.tablet .hudSub:not(:has(> .jobPill.on)) { margin-right: -8px; }
@media (prefers-reduced-motion: reduce) { .roomLabel, .combo { transition: opacity .2s linear; } }

/* Daily route / YOUR STREAK, finished: more air between the day discs and their bonus (5 -> 10px), the track sits in a soft
   tray under the header (clear header / progress hierarchy), solid (not dashed) upcoming days, a single coral ring + halo for
   today and a coral "Today" tag, a thicker rounded track. Card padding 16. Logic and copy unchanged. */
.streakCard { padding: 16px 16px 14px; margin: 16px 0 20px; border-radius: 22px; }
.streakHead { align-items: center; margin: 0 2px 14px; }
.streakEy { margin: 0 0 4px; font-size: 11px; letter-spacing: .1em; }
.streakHead b { font-size: 19px; letter-spacing: -.01em; }
.streakHead small { margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.streakBest { height: 28px; padding: 0 11px; gap: 5px; font-size: 12.5px; color: #8A6A12; background: #FFF4D6; box-shadow: inset 0 0 0 1px #F4DE9E; font-variant-numeric: tabular-nums; }
.streakBest::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tape); box-shadow: inset 0 -1.5px 0 var(--tapeD); }
.streak { padding: 12px 2px 11px; border-radius: 16px; background: #FBF4E7; box-shadow: inset 0 0 0 1px rgba(232,217,188,.55); }
.streak::before, .streak::after { top: 28px; height: 6px; margin-top: -3px; left: calc(2px + (100% - 4px) / 14); }
.streak::before { right: calc(2px + (100% - 4px) / 14); background: #EFE2C9; }
.streak::after { width: calc((100% - 4px - (100% - 4px) / 7) * var(--f, 0)); box-shadow: none; }
.streak li { gap: 10px; }
.streak li i { width: 32px; height: 32px; font-size: 13.5px; font-weight: 900; }
.streak li small { display: inline-flex; align-items: center; height: 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .1px; color: var(--ink3); }
.streak li.todo i { background: #FFFDF8; color: var(--ink3); border: 2px solid #E6D6B7; }
.streak li.done i { box-shadow: 0 2px 0 var(--tapeD); }
.streak li.done small { color: #8A6A12; }
.streak li.today i { box-shadow: 0 0 0 4px rgba(255,90,54,.16); }
.streak li.todo.today i { border: 2.5px solid var(--coral); background: #fff; color: var(--coral); font-size: 14.5px; }
.streak li.done.today i { box-shadow: 0 2px 0 var(--tapeD), 0 0 0 2.5px var(--coral), 0 0 0 6px rgba(255,90,54,.14); }
.streak li.today small { padding: 0 7px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .2px; }
html.tablet .streakCard { padding: 18px 20px 16px; }
html.tablet .streak { padding: 14px 4px 13px; }
html.tablet .streak::before, html.tablet .streak::after { top: 33px; }
html.tablet .streak li { gap: 11px; }
html.tablet .streak li small { height: 20px; font-size: 12.5px; }
@media (max-height: 700px) { .streakCard { margin: 12px 0 14px; padding: 13px 13px 12px; } .streakHead { margin-bottom: 11px; } .streak { padding: 10px 2px 9px; } .streak::before, .streak::after { top: 26px; } .streak li { gap: 8px; } }

/* Work order: the side job was a second note chip stacked under "Turn at doorways." with the reward run into its sentence.
   v024 groups the two notes (8px apart) and gives the side job its own card: a tape icon tile, a "SIDE JOB" eyebrow with the
   reward as a coin pill on the same line, then the task in bold ink. Same text, same reward. */
.briefNotes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.briefNotes > .handling { margin-top: 0; border-radius: 16px; }
.briefNotes > .handling > span { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
.sideJob { display: flex; align-items: center; gap: 12px; padding: 11px 12px 12px; border-radius: 16px; background: #FFF6DA; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #F5DE9A; text-align: left; }
.sjI { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--tape); color: var(--ink); --ac: var(--tape);
  box-shadow: inset 0 -2.5px 0 var(--tapeD); }
.sjT { flex: 1; min-width: 0; }
.sjHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.sjEy { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #A07A1A; line-height: 1; }
.sjRw { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 4px; border-radius: 99px; background: #fff;
  box-shadow: inset 0 0 0 1px #F2DA92; font-size: 12.5px; font-weight: 900; color: #6B5110; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.sjTx { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: #4A3A12; text-wrap: pretty; }
html.tablet .sjTx { font-size: 16px; }
html.tablet .sjI { width: 44px; height: 44px; padding: 9px; }
@media (max-height: 700px) { .briefNotes { margin-top: 12px; } .sideJob { padding: 9px 11px 10px; } .sjI { width: 36px; height: 36px; padding: 7px; } }

/* =================================================================
   v025 — final polish (Michael t133u): chip order + placement, tips -> coins
   ================================================================= */
/* HUD sub-row, v025 order: [room] [side job] [×N coins], right edge on the coins chip's right edge.
   - The ×N coins chip now sits directly under the coins counter it multiplies (it read as "stranded" mid-row in v024).
   - It owns a FIXED slot (its own width, ×2/×3/×4 are all the same width in tabular numbers), so it fades/scales in
     place and nothing else ever moves when a combo starts or breaks (the most frequent toggle in a run).
   - The side job is the persistent chip, so it is the next one in, ending at the slot's left edge: it never moves.
   - The room chip only flashes for 1.8 s on room entry, so it is the outermost: it grows leftwards from the job chip
     and its arrival/exit moves nothing.
   Net: no chip slides when any other appears or disappears. The cost is an empty combo-wide slot under the coins chip
   while no combo is running (the row then ends at the slot's left edge, which lines up under the route's home dot). */
.hudSub { --cs: 85.7px; --cg: 6px; padding-right: calc(var(--cs) + var(--cg)); margin-right: 0; }
.hudSub:not(:has(> .jobPill.on)) { margin-right: 0; }
.roomLabel { order: 1; }
.jobPill { order: 2; }
.roomLabel.on { margin-right: var(--cg); }
.hudSub:not(:has(> .jobPill.on)) > .roomLabel.on { margin-right: 0; }
.combo { order: 3; position: absolute; top: 0; right: 0; width: var(--cs); max-width: none; justify-content: center; padding: 0; margin: 0;
  transform-origin: 50% 50%; transform: scale(.72); transition: opacity .18s ease-out, transform .28s var(--ease); }
.combo.on { max-width: none; padding: 0; margin: 0; transform: scale(1); }
.combo.bump { animation: comboBump .26s var(--ease); }
@keyframes comboBump { 45% { transform: scale(1.1); } }
html.tablet .hudSub { --cs: 95.5px; --cg: 8px; margin-right: 0; }
html.tablet .hudSub:not(:has(> .jobPill.on)) { margin-right: 0; }
html.tablet .combo, html.tablet .combo.on { padding: 0; margin: 0; }
html.tablet .roomLabel.on { margin-right: var(--cg); }
html.tablet .hudSub:not(:has(> .jobPill.on)) > .roomLabel.on { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .combo, .combo.on { transform: none; transition: opacity .2s linear; } .combo.bump { animation: none; } }

/* =================================================================
   v026 (Michael t135u): HUD chips anchored left / centre / right; Daily route sheet tighter at the bottom + polish
   ================================================================= */
/* HUD sub-row, v026: room chip far LEFT (on the pause button's left edge), side-job chip in the CENTRE (on the screen's
   centre line), ×N coins chip far RIGHT (on the coins counter's right edge). A 3-column grid with equal side columns, so
   every chip owns its own slot: none of them moves when another appears, disappears or changes width (the job pill grows
   symmetrically about the centre when it turns "Done"). Same chip family as v025: height 32/38, pill radius, 14.5/16px
   800-900 type, --hc-shadow. Replaces v025's right cluster (padding-right slot + absolute combo). */
.hudSub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--cg); justify-content: stretch; padding-right: 0; margin-right: 0; }
.hudSub > * { grid-row: 1; }
.hudSub:not(:has(> .jobPill.on)) { margin-right: 0; }
.roomLabel, .roomLabel.on { grid-column: 1; justify-self: start; order: 0; margin: 0; max-width: 100%; min-width: 0; padding: 0 14px; overflow: hidden; text-overflow: ellipsis; }
.roomLabel { transform: translateX(-6px); transition: opacity .2s ease-out, transform .28s var(--ease); }
.roomLabel.on { transform: none; }
.hudSub:not(:has(> .jobPill.on)) > .roomLabel.on { margin-right: 0; }
.jobPill { grid-column: 2; justify-self: center; order: 0; }
.combo, .combo.on { grid-column: 3; justify-self: end; order: 0; position: static; width: var(--cs); margin: 0; padding: 0; }
html.tablet .roomLabel, html.tablet .roomLabel.on { padding: 0 16px; margin: 0; }
html.tablet .hudSub:not(:has(> .jobPill.on)) > .roomLabel.on { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .roomLabel, .roomLabel.on { transform: none; transition: opacity .2s linear; } }

/* Daily route: Michael's screenshot showed ~96pt of cream under "Start today's route" on an iPhone (40px button margin +
   22px scroller padding + the 34pt home-indicator inset). The button's own margin goes, and the scroller keeps the safe
   area plus 18px (min 22px on home-button phones), so the CTA's 6px edge ends 12px above the home-indicator zone. */
.daily > .btn.coral, .daily > .btn.soft { margin-bottom: 0; }
.sheetBody:has(> .daily) { padding-bottom: max(calc(var(--sab) + 18px), 22px); scroll-padding-bottom: calc(var(--sab) + 12px); }
html.tablet .sheetBody:has(> .daily) { padding-bottom: 22px; }
/* Look and feel: one 14px rhythm between blocks; calendar tile, movers stage, streak card and CTA share one edge +
   ledge + soft-shadow treatment, so the sheet reads as a set of cards instead of separate styles. Copy and logic unchanged. */
#sheetBox:has(.daily) .sheetHead { margin-bottom: 12px; }
.daily { --dg: 14px; --edge: 0 0 0 1.5px #EFE1C6; --ledge: 0 4px 0 #EADBBF; --soft: 0 10px 22px rgba(106,95,128,.08); }
.dailyTop { gap: 14px; margin-bottom: var(--dg); }
.dailyTop .lead { font-size: 15px; line-height: 1.38; }
.cal { width: 86px; border-radius: 18px; box-shadow: var(--edge), var(--ledge), var(--soft); }
.cal b { font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 6px 0 5px; background: linear-gradient(180deg, #FF7651, var(--coral)); }
.cal strong { font-size: 40px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; padding: 5px 0 8px; }
.daily .stage { border-radius: 20px; box-shadow: var(--ledge), var(--soft); isolation: isolate; }
.daily .stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(185,130,74,0) 70%, rgba(185,130,74,.16));
  box-shadow: inset 0 0 0 1.5px rgba(190,140,74,.22); }
.daily .streakCard { margin: var(--dg) 0 16px; border-radius: 20px; box-shadow: var(--edge), var(--ledge), var(--soft); }
.daily .streakHead b { letter-spacing: -.015em; }
.daily > .btn.two { min-height: 62px; padding: 11px 24px 12px; gap: 6px; box-shadow: 0 5px 0 var(--coralD), 0 12px 22px rgba(232,74,40,.24); }
.daily > .btn.two:active { box-shadow: 0 2px 0 var(--coralD); }
.daily > .btn.two .bs { padding: 3px 10px 3px 4px; border-radius: 99px; background: rgba(255,255,255,.18); opacity: 1; font-weight: 800; }
html.tablet .daily { --dg: 16px; }
@media (max-height: 700px) { .daily { --dg: 12px; } .daily .stage canvas { height: 140px; } .daily .streakCard { margin-bottom: 14px; } }

/* =================================================================
   v027 (Michael t136u): Badges intro on one line, first-launch Routes tip card with a contained body
   ================================================================= */
/* Badges intro: at 15px "Each badge pays 25 coins the moment you earn it." needs ~24em (SF Pro Rounded, from Michael's iPhone
   screenshot: 359pt for 357pt available, so "it." wrapped). Size it to the sheet's text width / 25em (iPhone 15 14.3px,
   SE 13.6px; 15px from ~411pt wide and on iPad), floor 12.5px. If a wider fallback font still wraps, balance the two lines (no orphan). */
.sheetBody > .lead.badgeLead { font-size: clamp(12.5px, calc((min(100vw, 540px) - 36px) / 25), 15px); line-height: 1.35; text-wrap: balance; margin-bottom: 12px; }
html.tablet .sheetBody > .lead.badgeLead { font-size: 15px; }

/* Tip cards (Routes first open; Bonus routes first tap): tighter card, eyebrow pill, and the copy in a soft nested panel of
   three rows (icon + line), with the same edge/ledge/shadow as the v026 Daily cards. Logic and when the tip shows: unchanged. */
.tipCard { padding: 26px 20px 20px; }
.tipCard .tipIco { width: 52px; height: 52px; padding: 12px; margin-bottom: 10px; }
.tipCard .kicker { display: inline-block; margin: 0 0 8px; padding: 3px 10px 3px; border-radius: 99px; background: #EAF6F1; color: var(--mintD);
  font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.tipCard h2 { font-size: 28px; }
.tipBody { list-style: none; margin: 16px 0 0; padding: 2px 14px; border-radius: 18px; background: #FFFDF8; text-align: left;
  box-shadow: 0 0 0 1.5px #EFE1C6, 0 4px 0 #EADBBF, 0 10px 22px rgba(106,95,128,.08); }
.tipBody li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; padding: 11px 0;
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink2); text-wrap: pretty; }
.tipBody li + li { border-top: 1.5px dashed #EFE1C6; }
.tipBody b { color: var(--ink); font-weight: 900; }
.tipBody .ti { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #FFF1C9; color: var(--tapeD); --ac: #FFF1C9; }
.tipBody .ti svg { width: 100%; height: 100%; }
.tipBody .ti.m { background: #EAF6F1; color: var(--mint); --ac: #EAF6F1; }
.tipBody .ti.c { background: #FFE6DE; color: var(--coral); --ac: #FFE6DE; }
.tipCard .actions { margin-top: 20px; }
html.tablet .tipCard { padding: 30px 26px 24px; }
html.tablet .tipBody { padding: 4px 18px; }
html.tablet .tipBody li { font-size: 16px; padding: 12px 0; }
@media (max-width: 340px) { .tipCard { padding: 24px 16px 18px; } .tipCard h2 { font-size: 25px; } .tipBody { padding: 2px 12px; } .tipBody li { font-size: 14px; gap: 10px; } }

/* =================================================================
   v028 (Michael t138u): coin icons = the coin you collect in gameplay
   ================================================================= */
/* Every currency coin (.coin: home + in-run corner counter, Showroom chip / price / swatch tags, results, badge toasts, side job,
   Daily CTA) was a CSS gold ball (radial gradient + inset shadow). It now paints the in-game collectible: js/art.js drawCoin()
   at its face-on frame (t=0 → squash 1): #D99A12 rim offset down, #FFCF3F face, #F2B61F inner ring at .62r, white glint
   upper-left. Same geometry as the canvas path (r=10.4 of 24; drawCoin's fixed 1.5px offset/line scaled from the iPhone 15
   in-game r=12px); the ground shadow is left out. Box sizes are unchanged (22 / 18 / 16 / 13 / 34px), so chips keep their layout.
   Inline data URI: no extra request, works offline before the service worker has anything cached. Source: evidence/v028/coin.svg */
.coin, .coin.sm, .earned .coin, .swatch .swFoot .coin { border-radius: 0; box-shadow: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12.50' r='10.4' fill='%23D99A12'/><circle cx='12' cy='11.2' r='10.4' fill='%23FFCF3F'/><circle cx='12' cy='11.2' r='6.45' fill='none' stroke='%23F2B61F' stroke-width='1.30'/><ellipse cx='8.88' cy='7.56' rx='2.31' ry='2.91' fill='%23fff' fill-opacity='.7'/></svg>") center / contain no-repeat; }
/* Stats "Coins earned, all time" and the Routes tip "Grab 85% of the coins" row use the same coin inside their icon discs */
.srIco > .coin, .tipBody .ti > .coin { display: block; width: 100%; height: 100%; }

/* =================================================================
   v028 (Michael t139u): loader logo bigger, "Tap to start" smaller
   ================================================================= */
/* Logo ~+25% (phones 19vw / 9.2vh, so iPhone 15 59 → 75px, SE 50 → 61px; iPad 102 → 128px). The CTA no longer dominates
   the lower third: phones 240×62 / 21px → 196×52 / 18px, iPad 300×72 / 24px → 240×60 / 20px.
   Splash hand-off (v021/v022) is kept: the key art is the first thing in #loader, so on phones (top-anchored) it does not
   move. On iPad the stack is vertically centred, so the logo's extra layout height (2.38em × the size increase) minus the
   12px the button gives back is taken off the bottom with a negative margin: the art stays exactly where the native
   splash (?splash, which hides logo/tape/button) draws it, and the tape and button move down instead. */
.loaderBrand { font-size: clamp(56px, min(19vw, 9.2vh), 112px); }
.startBtn { min-width: 196px; min-height: 52px; font-size: 18px; border-radius: 18px; gap: 8px; }
.startBtn .btnIco { width: 14px; height: 14px; }
#loader .startBtn { box-shadow: 0 4px 0 var(--coralD), 0 8px 16px rgba(0,0,0,.14); }
html.tablet .loaderBrand { font-size: clamp(96px, 12.5vmin, 150px); }
html.tablet .startBtn { min-width: 240px; min-height: 60px; font-size: 20px; border-radius: 20px; }
html.tablet .startBtn .btnIco { width: 16px; height: 16px; }
html.tablet .loaderFoot { margin-bottom: calc((clamp(80px, 10vmin, 120px) - clamp(96px, 12.5vmin, 150px)) * 2.38 + 12px); }

/* ---------- v031: Leopanto Labs intro gate + co-op marathon ---------- */
/* The loader waits (frozen on its first frame) until the Leopanto Labs ident has finished and removed itself. */
html.lp-hold #loader *, html.lp-hold #loader *::before, html.lp-hold #loader *::after { animation-play-state: paused !important; }
/* co-op (online): a small team stack bottom-left (opposite the Turn/Lift buttons) showing who carries which end */
.coopPads { display: none; }
#hud.coop .coopPads { display: flex; flex-direction: column; gap: 8px; position: absolute; left: calc(var(--sal) + 14px); bottom: calc(var(--sab) + 26px); pointer-events: none; }
body.lefty #hud.coop .coopPads { left: auto; right: calc(var(--sar) + 14px); align-items: flex-end; }
#hud.coop .hand { display: none; }
.coopPad { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px 0 5px; border-radius: 99px; align-self: flex-start;
  background: rgba(18,26,56,.72); color: var(--cream); font-weight: 800; font-size: 14px; line-height: 1.05; box-shadow: 0 4px 0 rgba(0,0,0,.22); transition: opacity .2s, box-shadow .15s; }
body.lefty .coopPad { align-self: flex-end; }
.coopPad b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 900; color: #fff; }
.coopPad.p1 b { background: var(--coral); box-shadow: 0 2.5px 0 var(--coralD); }
.coopPad.p2 b { background: var(--mint); box-shadow: 0 2.5px 0 var(--mintD); }
.coopPad em { font-style: normal; display: block; }
.coopPad small { display: block; font-size: 11px; font-weight: 700; color: rgba(255,243,220,.62); margin-top: 1px; }
.coopPad.me.p1 { box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--coral); }
.coopPad.me.p2 { box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 0 0 2.5px var(--mint); }
.coopPad.away { opacity: .5; }
.coopPad .cpUp { position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-6px, -50%); opacity: 0; padding: 4px 9px; border-radius: 99px; background: var(--tape); color: var(--ink);
  font-style: normal; font-size: 12.5px; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 0 var(--tapeD); transition: opacity .15s, transform .15s; }
body.lefty .coopPad .cpUp { left: auto; right: calc(100% + 8px); transform: translate(6px, -50%); }
.coopPad.up .cpUp, body.lefty .coopPad.up .cpUp { opacity: 1; transform: translate(0, -50%); }
html.tablet #hud.coop .coopPads { left: calc(var(--sal) + 28px); bottom: calc(var(--sab) + 40px); gap: 10px; }
html.tablet body.lefty #hud.coop .coopPads { left: auto; right: calc(var(--sar) + 28px); }
html.tablet .coopPad { height: 48px; font-size: 16px; }
html.tablet .coopPad b { width: 36px; height: 36px; font-size: 16px; }
/* co-op lobby (inside the normal sheet) */
.lobby .actions { margin-top: 18px; }
.lobbyCode { margin: 2px 0 12px; padding: 14px 12px 12px; border-radius: 20px; background: #fff; text-align: center; border: 2px solid #EFE1C6; box-shadow: 0 3px 0 var(--paper2); }
.lobbyCode small { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.lobbyCode b { display: block; margin-top: 4px; font-size: 40px; font-weight: 900; letter-spacing: .16em; padding-left: .16em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lobbyBtns { display: flex; gap: 10px; margin-bottom: 12px; }
.lobbyBtns .btn { flex: 1; min-width: 0; }
.lobbyStatus { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 6px 4px 14px; font-size: 14.5px; font-weight: 800; color: var(--ink2); text-align: center; }
.lobbyStatus i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tape); box-shadow: 0 0 0 4px rgba(255,207,63,.25); animation: lobbyPulse 1.2s ease-in-out infinite; }
.lobbyStatus.ok i { background: var(--mint); box-shadow: 0 0 0 4px rgba(47,194,168,.22); }
.lobbyStatus.err i { background: var(--coralD); box-shadow: none; animation: none; }
@keyframes lobbyPulse { 50% { transform: scale(.7); opacity: .6; } }
html.calm .lobbyStatus i { animation: none; }
#modal .lobbyStatus { margin: 4px 0 16px; }
.codeInput { display: block; width: 100%; height: 64px; margin: 0; padding: 0 12px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); text-align: center;
  font: 900 32px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--paper3), 0 3px 0 var(--paper2); outline: none; -webkit-appearance: none; appearance: none; }
.codeInput::placeholder { color: var(--paper3); }
.codeInput:focus { box-shadow: inset 0 0 0 3px var(--mint), 0 3px 0 var(--paper2); }
.lobbyErr { min-height: 18px; margin: 8px 6px 0; font-size: 13.5px; font-weight: 800; color: var(--coralD); text-align: center; }
.lobbyErr:empty { margin-top: 2px; }
.pBadge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 900; }
.pBadge.p1 { background: var(--coral); box-shadow: 0 3px 0 var(--coralD); }
.pBadge.p2 { background: var(--mint); box-shadow: 0 3px 0 var(--mintD); }
.pTag { flex: none; padding: 5px 10px; border-radius: 99px; background: var(--paper2); color: var(--ink3); font-size: 12.5px; font-weight: 900; }
.pTag.ready { background: var(--mint); color: #fff; }
.pTag.wait { background: rgba(255,207,63,.28); color: var(--ink2); }
.lobby .btn[disabled] { opacity: .45; pointer-events: none; }
/* the Single player / Co-op choice sheet reuses the settings rows */
.coopIco { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--mint); color: #fff; --ac: #1E8F7D; }
.coopIco.two { background: var(--coral); --ac: var(--coralD); }
.sheetBody .playerRow { min-height: 72px; }
.playerNote { margin: 14px 6px 4px; font-size: 13.5px; font-weight: 700; color: var(--ink3); text-align: center; }

/* ---------- v032: co-op screens, redesigned on the home street look (navy night, tape signs, the crew + sofa) ---------- */
.crewScene { display: block; width: 100%; height: 100%; overflow: visible; }
html.calm .crewScene .legA, html.calm .crewScene .legB, .crewScene.lone .legA, .crewScene.lone .legB, .crewBadge .legA, .crewBadge .legB { animation: none; }
/* night-sky panel shared by tiles, the crew panel and the in-run cards */
.mtArt, .crewPanel, .ccArt, .ccLink {
  position: relative; overflow: hidden; border-radius: 16px;
  background:
    radial-gradient(circle at 86% 24%, rgba(255,243,220,.95) 0 7px, rgba(255,243,220,.18) 8px 15px, transparent 16px),
    radial-gradient(1.3px 1.3px at 12% 22%, #FFF3DC 99%, transparent), radial-gradient(1.1px 1.1px at 31% 12%, #FFF3DC 99%, transparent),
    radial-gradient(1.2px 1.2px at 58% 26%, #FFF3DC 99%, transparent), radial-gradient(1px 1px at 70% 9%, #FFF3DC 99%, transparent),
    radial-gradient(1px 1px at 44% 40%, rgba(255,243,220,.7) 99%, transparent), radial-gradient(1.1px 1.1px at 6% 52%, rgba(255,243,220,.7) 99%, transparent),
    linear-gradient(180deg, #121A38 0%, #1A2858 58%, #2E4180 82%, #18213F 82.5%, #18213F 100%);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.crewPanel { background-color: #1A2858; background-image:
    radial-gradient(circle at 88% 18%, rgba(255,243,220,.95) 0 7px, rgba(255,243,220,.18) 8px 15px, transparent 16px),
    radial-gradient(1.3px 1.3px at 12% 14%, #FFF3DC 99%, transparent), radial-gradient(1.1px 1.1px at 31% 8%, #FFF3DC 99%, transparent),
    radial-gradient(1.2px 1.2px at 64% 16%, #FFF3DC 99%, transparent), radial-gradient(1px 1px at 72% 6%, #FFF3DC 99%, transparent),
    radial-gradient(1.1px 1.1px at 6% 34%, rgba(255,243,220,.7) 99%, transparent),
    linear-gradient(180deg, #121A38 0%, #1A2858 45%, #2E4180 100%); }
/* Marathon choice + create/join: two equal tiles side by side */
.modeTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modeTile { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 6px; border-radius: 20px; background: #fff; color: var(--ink); text-align: center;
  box-shadow: inset 0 0 0 1.5px var(--paper2), 0 4px 0 var(--paper3); transition: transform .12s, box-shadow .12s; }
.modeTile:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--paper2), 0 1px 0 var(--paper3); }
.modeTile .mtArt { height: 86px; padding: 8px 8px 4px; }
.modeTile .mtArt.badge { display: grid; place-items: center; padding: 8px; }
.modeTile .mtArt.badge .crewBadge { width: 64px; height: 64px; }
.mtBody { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 6px; }
.mtBody b { font-size: 16.5px; font-weight: 900; line-height: 1.15; white-space: nowrap; }
.mtBody small { font-size: 12.5px; font-weight: 700; color: var(--ink3); line-height: 1.25; text-wrap: balance; }
.mtBest { display: inline-flex; flex-wrap: nowrap; justify-content: center; gap: 0 4px; margin-top: 5px; padding: 4px 8px; white-space: nowrap; max-width: 100%; border-radius: 99px; background: var(--paper2);
  font-style: normal; font-size: 12px; font-weight: 800; color: var(--ink2); line-height: 1.25; }
.mtBest span { white-space: nowrap; color: var(--ink); font-weight: 900; }
.mtBest.p1 { background: rgba(255,90,54,.12); } .mtBest.p1 span { color: var(--coralD); }
.mtBest.p2 { background: rgba(47,194,168,.14); } .mtBest.p2 span { color: var(--mintD); }
.playerNote { text-wrap: balance; }
/* mover badge: one mover holding their end of the sofa, with a P1/P2 sign */
.crewBadge { position: relative; flex: none; display: inline-block; width: 48px; height: 48px; border-radius: 14px; background: #1A2858; box-shadow: 0 3px 0 #0E1532; }
.crewBadge.p1 { background: linear-gradient(180deg, #24346A, #1A2858); box-shadow: inset 0 0 0 2.5px var(--coral), 0 3px 0 var(--coralD); }
.crewBadge.p2 { background: linear-gradient(180deg, #24346A, #1A2858); box-shadow: inset 0 0 0 2.5px var(--mint), 0 3px 0 var(--mintD); }
.crewBadge svg { position: absolute; inset: 7% 8% 4%; width: 84%; height: 89%; overflow: hidden; }
.crewBadge b { position: absolute; right: -6px; bottom: -6px; padding: 2px 5px 1px; border-radius: 7px; font-size: 11px; font-weight: 900; line-height: 1.1; color: #fff; }
.crewBadge.p1 b { background: var(--coral); box-shadow: 0 2px 0 var(--coralD); }
.crewBadge.p2 b { background: var(--mint); box-shadow: 0 2px 0 var(--mintD); }
.crewBadge.sm { width: 38px; height: 38px; border-radius: 11px; }
.crewBadge.sm b { font-size: 10px; right: -5px; bottom: -5px; }
.crewBadge.away svg { opacity: .35; filter: grayscale(.6); }
/* room code as a street-sign plate with a tape label */
.codePlate { position: relative; margin: 10px 0 12px; padding: 20px 14px 14px; border-radius: 18px; background: linear-gradient(180deg, #24346A, #1B2747); box-shadow: inset 0 0 0 3px rgba(255,243,220,.85), inset 0 0 0 5px #1B2747, 0 4px 0 #0E1532; }
.cpTape { position: absolute; left: 50%; top: -11px; transform: translateX(-50%) rotate(-2deg); padding: 4px 14px 5px; font-size: 12.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  background: linear-gradient(180deg, #FFE485, var(--tape) 55%, #F2BA22); clip-path: polygon(0 8%, 5% 0, 10% 8%, 90% 8%, 95% 0, 100% 8%, 100% 92%, 95% 100%, 90% 92%, 10% 92%, 5% 100%, 0 92%); filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.cpBolt { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #9AA6C8; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.cpBolt.a { left: 10px; top: 10px; } .cpBolt.b { right: 10px; top: 10px; } .cpBolt.c { left: 10px; bottom: 10px; } .cpBolt.d { right: 10px; bottom: 10px; }
.cpCode { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 300px; margin: 0 auto; }
.cpCode i { display: grid; place-items: center; height: 50px; border-radius: 10px; background: var(--cream); color: var(--ink); font-style: normal; font-size: 30px; font-weight: 900; line-height: 1;
  box-shadow: inset 0 -4px 0 #E7D3AE; font-variant-numeric: tabular-nums; }
.codePlate .codeInput { height: 58px; max-width: 300px; margin: 0 auto; border-radius: 12px; background: var(--cream); font-size: 30px; box-shadow: inset 0 -4px 0 #E7D3AE; }
.codePlate .codeInput::placeholder { color: #D9C49C; }
.codePlate .codeInput:focus { box-shadow: inset 0 -4px 0 #E7D3AE, 0 0 0 3px var(--tape); }
.lobbyBtns.one .btn { flex: 1; }
.lobbyBtns .btn .btnIco { width: 18px; height: 18px; }
/* who carries which end: the crew scene with each player's status right under their mover */
.crewPanel { padding: 12px 12px 0; background-size: auto; }
.crewPanel::after { content: none; }
.crewPanel .crewScene { width: min(78%, 250px); height: auto; aspect-ratio: 230 / 126; margin: 0 auto -4px; }
.crewPanel.busy { margin-bottom: 12px; }
.crewCols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 -12px; padding: 10px 12px 12px; background: #18213F; box-shadow: inset 0 3px 0 #2E4180; }
.crewCol { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 9px; border-radius: 13px; background: rgba(255,243,220,.08); color: var(--cream); text-align: center; min-width: 0; }
.crewCol b { font-size: 16px; font-weight: 900; line-height: 1.15; }
.crewCol small { font-size: 12px; font-weight: 700; color: rgba(255,243,220,.62); line-height: 1.2; white-space: nowrap; }
.crewCol .pTag { margin-top: 5px; }
.crewCol .pTag:not(.ready):not(.wait) { background: rgba(255,243,220,.16); color: var(--cream); }
.crewCol .pTag.wait { background: rgba(255,207,63,.22); color: #FFE27E; }
.crewCol.me.p1 { box-shadow: inset 0 0 0 2px var(--coral); } .crewCol.me.p2 { box-shadow: inset 0 0 0 2px var(--mint); }
.lobby .lobbyStatus { margin: 12px 4px 0; min-height: 22px; text-wrap: balance; }
.lobby .lobbyStatus + .actions { margin-top: 14px; }
.joinNote { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 2px 0; }
.joinNote .playerNote { margin: 0; text-align: left; flex: 0 1 auto; }
/* in-run co-op cards: compact, so most of the street stays visible */
.coopSign { display: flex; justify-content: center; margin: 0 0 10px; }
.coopSign span { display: inline-block; padding: 4px 14px 5px; font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transform: rotate(-1.5deg);
  background: linear-gradient(180deg, #FFE485, var(--tape) 55%, #F2BA22); clip-path: polygon(0 8%, 4% 0, 8% 8%, 92% 8%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 92%, 8% 92%, 4% 100%, 0 92%); }
.coopCard { padding: 20px 20px 18px; }
.coopCard h2 { font-size: 27px; }
.coopCard .note { text-wrap: balance; }
.coopCard .actions { margin-top: 16px; }
.ccArt { height: 78px; margin: 0 0 12px; padding: 8px 0 2px; }
.ccLink { display: flex; align-items: center; justify-content: center; gap: 14px; height: 74px; margin: 0 0 12px; }
.ccDots { display: inline-flex; gap: 6px; }
.ccDots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tape); animation: lobbyPulse 1.2s ease-in-out infinite; }
.ccDots i:nth-child(2) { animation-delay: .2s; } .ccDots i:nth-child(3) { animation-delay: .4s; }
html.calm .ccDots i { animation: none; }
.ccDist { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ccDist h2 { font-size: 40px; line-height: 1; }
.ccTeam { display: inline-flex; gap: 4px; }
.ccTeam .crewBadge:last-child { margin-left: -6px; }
.coopStats { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.coopStats .stat { min-height: 84px; gap: 3px; padding: 9px 4px; }
.coopStats .statI { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink3); --ac: var(--coral); }
.coopStats .statI .coin { width: 20px; height: 20px; }
.coopStats .statL { white-space: nowrap; font-size: 12px; }
/* Join room with the iOS keyboard up: pinned to the visual viewport (see kbSync in main.js) */
#sheet.kbUp .grab { display: none; }
#sheet.kbUp .sheetHead { margin: 6px 0 8px; }
#sheet.kbUp .sheetHead h2 { font-size: 24px; }
#sheet.kbUp .codePlate { margin: 12px 0 6px; padding: 18px 12px 10px; }
#sheet.kbUp .codePlate .codeInput { height: 50px; font-size: 26px; }
#sheet.kbUp .lobbyErr { min-height: 0; margin-top: 4px; }
#sheet.kbUp .joinNote { margin-top: 2px; } #sheet.kbUp .joinNote .crewBadge { display: none; }
#sheet.kbUp .joinNote .playerNote { text-align: center; font-size: 13px; }
#sheet.kbUp .lobby .actions { margin-top: 10px; gap: 4px; }
#sheet.kbUp .lobby .btn.coral { min-height: 50px; }
#sheet.kbUp .lobby .btn.quiet, #sheet.kbUp .lobby .btn.back { min-height: 42px; }
/* short phones (375x667 class): same layout, tighter */
@media (max-height: 740px) {
  .lobby .codePlate { margin: 8px 0 10px; padding: 16px 12px 11px; }
  .cpCode i { height: 42px; font-size: 25px; }
  .lobby .lobbyBtns { margin-bottom: 10px; } .lobby .lobbyBtns .btn { min-height: 46px; }
  .crewPanel { padding-top: 8px; }
  .crewPanel .crewScene { width: min(56%, 190px); margin-bottom: -2px; }
  .crewCols { padding: 8px 10px 10px; gap: 8px; }
  .crewCol { padding: 6px 6px 7px; } .crewCol b { font-size: 15px; } .crewCol .pTag { margin-top: 3px; padding: 4px 9px; }
  .lobby .lobbyStatus { margin-top: 9px; }
  .lobby .lobbyStatus + .actions { margin-top: 10px; }
  .lobby .actions .btn.quiet, .lobby .actions .btn.back { min-height: 44px; }
  .modeTile .mtArt { height: 76px; }
}

/* ---------- v033: co-op menus + popups polish (Michael t62u/t63u). Scoped to the co-op containers only:
   .lobby (lobby, join, create/join chooser), .coopChoice (Marathon solo/co-op), .coopCard (reconnecting, partner left, paused, report). ---------- */
/* tight, consistent bottom: ~18px + the home-indicator inset below the last control, never more */
.sheetBody:has(> .lobby), .sheetBody:has(> .coopChoice) { padding-bottom: calc(var(--sab) + 18px); scroll-padding-bottom: calc(var(--sab) + 12px); }
.lobby > :last-child, .coopChoice > :last-child, .lobby .actions:last-child { margin-bottom: 0; }
.coopChoice .playerNote { margin: 14px 6px 0; }
/* secondary buttons: a real 3D key (cream face, top highlight, tan lip, press-down) instead of flat text */
.lobby .btn.soft, .lobby .btn.back, .coopCard .btn.soft, .coopCard .btn.back {
  min-height: 50px; padding: 0 18px; font-size: 16.5px; font-weight: 900; color: var(--ink);
  background: linear-gradient(180deg, #FFFDF7 0%, #F8EDD6 100%); border: 2px solid #E2CDA2;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #CDB384, 0 9px 16px rgba(106,80,40,.14);
  transition: transform .08s, box-shadow .08s; }
.lobby .btn.soft:active, .lobby .btn.back:active, .coopCard .btn.soft:active, .coopCard .btn.back:active {
  transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 #CDB384, 0 3px 6px rgba(106,80,40,.12); }
.lobby .btn.soft .btnIco, .lobby .btn.back .btnIco, .coopCard .btn.soft .btnIco, .coopCard .btn.back .btnIco { width: 19px; height: 19px; color: var(--coralD); }
.lobby .btn.back, .coopCard .btn.back { min-height: 48px; font-size: 16px; }
.lobby .btn.back .btnIco, .coopCard .btn.back .btnIco { color: var(--ink2); }
/* primary: richer coral with a top highlight and a crisper lip */
.lobby .btn.coral, .lobby .btn.mint, .coopCard .btn.coral { border: 2px solid rgba(160,40,16,.35); text-shadow: 0 1px 0 rgba(120,30,10,.28);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 6px 0 var(--coralD), 0 12px 22px rgba(255,90,54,.26); }
.lobby .btn.mint { border-color: rgba(20,110,94,.35); text-shadow: 0 1px 0 rgba(10,80,66,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 6px 0 var(--mintD), 0 12px 22px rgba(47,194,168,.26); }
.lobby .btn.coral:active, .coopCard .btn.coral:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 var(--coralD); }
.lobby .btn.mint:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 var(--mintD); }
/* "I'm ready" before the partner joins: a clear waiting key, not a washed-out coral */
.lobby .btn[disabled] { opacity: 1; filter: none; color: #7C6C58; text-shadow: none; background: linear-gradient(180deg, #F3E6CC, #EADAB9); border: 2px solid #DCC59A;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #CDB384; }
/* night panels: dark outline + bottom lip so the art sits on the page */
.lobby .crewPanel, .coopChoice .mtArt, .lobby .mtArt, .coopCard .ccArt, .coopCard .ccLink { border: 2px solid #0E1532; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #0B1129, 0 8px 16px rgba(14,21,50,.18); }
.crewScene { filter: drop-shadow(0 2px 0 rgba(6,10,28,.55)); }
.crewBadge svg { filter: drop-shadow(0 1.5px 0 rgba(6,10,28,.6)); }
/* badges: outlined, with a lip and a crisp P1/P2 tag */
.crewBadge.p1 { box-shadow: inset 0 0 0 2.5px var(--coral), inset 0 3px 0 rgba(255,255,255,.12), 0 0 0 1.5px #0E1532, 0 3px 0 1.5px var(--coralD); }
.crewBadge.p2 { box-shadow: inset 0 0 0 2.5px var(--mint), inset 0 3px 0 rgba(255,255,255,.12), 0 0 0 1.5px #0E1532, 0 3px 0 1.5px var(--mintD); }
.crewBadge b { border: 1.5px solid #0E1532; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
/* choice tiles: thicker 3D cards */
.coopChoice .modeTile, .lobby .modeTile { padding: 6px; background: linear-gradient(180deg, #fff, #FFFBF2); border: 2px solid #E6D2AA;
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 #D2B988, 0 12px 20px rgba(106,80,40,.13); }
.coopChoice .modeTile:active, .lobby .modeTile:active { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 #D2B988, 0 3px 6px rgba(106,80,40,.1); }
.coopChoice .mtBody small, .lobby .mtBody small { color: var(--ink2); font-size: 13px; }
.coopChoice .mtBest, .lobby .mtBest { border: 1.5px solid #E2CDA2; background: #FBF3E2; font-size: 12.5px; }
.coopChoice .mtBest.p1, .lobby .mtBest.p1 { border-color: rgba(255,90,54,.4); background: #FFEDE6; }
.coopChoice .mtBest.p2, .lobby .mtBest.p2 { border-color: rgba(47,194,168,.45); background: #E3F7F2; }
.coopChoice .playerNote, .lobby .playerNote { color: var(--ink2); font-size: 14px; }
.lobby .groupLabel, .coopChoice .groupLabel { color: var(--ink2); font-weight: 900; }
/* room code: cream key tiles with a navy outline and a pressed-in bottom */
.codePlate { border: 2px solid #0E1532; box-shadow: inset 0 0 0 3px rgba(255,243,220,.9), inset 0 0 0 5px #1B2747, inset 0 8px 14px rgba(255,255,255,.06), 0 4px 0 #0B1129, 0 10px 18px rgba(14,21,50,.2); }
.cpBolt { background: radial-gradient(circle at 35% 30%, #E3E8F6, #8F9BC0 70%); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.cpCode i { border: 2px solid #0B1129; background: linear-gradient(180deg, #FFFDF5 0%, #FBEFD6 100%); color: #1B2340;
  box-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #E2CB9E, 0 3px 0 #0B1129; }
.codePlate .codeInput { border: 2px solid #0B1129; background: linear-gradient(180deg, #FFFDF5, #FBEFD6); box-shadow: inset 0 -5px 0 #E2CB9E, 0 3px 0 #0B1129; }
.codePlate .codeInput:focus { box-shadow: inset 0 -5px 0 #E2CB9E, 0 3px 0 #0B1129, 0 0 0 3px var(--tape); }
.codePlate .codeInput::placeholder { color: #C9B086; }
/* P1/P2 player cards */
.crewCols { border-top: 2px solid #0E1532; }
.crewCol { background: linear-gradient(180deg, rgba(255,243,220,.13), rgba(255,243,220,.06)); box-shadow: inset 0 0 0 1.5px rgba(255,243,220,.14), 0 2px 0 rgba(0,0,0,.25); }
.crewCol.me.p1 { box-shadow: inset 0 0 0 2px var(--coral), 0 2px 0 var(--coralD); } .crewCol.me.p2 { box-shadow: inset 0 0 0 2px var(--mint), 0 2px 0 var(--mintD); }
.crewCol b { display: inline-flex; align-items: center; gap: 6px; }
.crewCol .pChip { display: inline-grid; place-items: center; height: 19px; padding: 0 5px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; border: 1.5px solid #0E1532; }
.crewCol.p1 .pChip { background: var(--coral); box-shadow: 0 2px 0 var(--coralD); } .crewCol.p2 .pChip { background: var(--mint); box-shadow: 0 2px 0 var(--mintD); }
.crewCol small { color: rgba(255,243,220,.82); font-size: 12.5px; }
.crewCol .pTag { border: 1.5px solid rgba(0,0,0,.25); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.crewCol .pTag.ready { background: linear-gradient(180deg, #44D5BC, var(--mint)); }
.lobby .lobbyStatus { color: var(--ink); }
/* tape signs + stamps with depth */
.coopSign, .cpTape { filter: drop-shadow(0 2px 0 rgba(90,60,10,.35)); }
.coopCard .stamp { color: #fff; background: linear-gradient(180deg, #FF7A55, var(--coral)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--coralD), 0 4px 0 2px var(--coralD), 0 10px 16px rgba(0,0,0,.22); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.coopCard .stamp.ok { background: linear-gradient(180deg, #44D5BC, var(--mint)); box-shadow: 0 0 0 2px var(--mintD), 0 4px 0 2px var(--mintD), 0 10px 16px rgba(0,0,0,.22); }
/* report stat tiles: raised cards with coloured icons and readable labels */
.coopStats .stat { background: linear-gradient(180deg, #fff, #FFF8EA); border: 2px solid #EAD8B4; box-shadow: inset 0 2px 0 #fff, 0 4px 0 #D9C296; }
.coopStats .statI { color: var(--coralD); }
.coopStats .stat:nth-child(3) .statI { color: var(--mintD); }
.coopStats .statL { color: var(--ink2); font-size: 12.5px; font-weight: 800; }
/* paused card (co-op): same family as the other in-run co-op cards */
.ccPause { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); background: linear-gradient(180deg, #FFE485, var(--tape)); border: 2px solid #0E1532; box-shadow: 0 2px 0 #B8860B; }
.ccPause svg { width: 16px; height: 16px; }
.coopCard .toggles .tog { border: 2px solid #E6D2AA; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #D9C296; }
.coopCard .toggles .tog.on { border-color: var(--mint); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--mintD); }
.coopCard .ccDots i { box-shadow: 0 0 0 1.5px #0E1532; }
@media (max-height: 740px) {
  .coopCard.pause .ccLink { height: 62px; margin-bottom: 8px; }
  .lobby .btn.soft { min-height: 44px; }
  /* fits with a 34px home-indicator inset too (no scrolling, no bottom gap) */
  .lobby .codePlate { padding: 15px 12px 10px; } .cpCode i { height: 40px; }
  .crewPanel .crewScene { width: min(44%, 150px); }
  .crewCol { padding: 5px 6px 6px; }
  .lobby .lobbyStatus { margin-top: 7px; }
  .lobby .lobbyStatus + .actions { margin-top: 9px; } .lobby .actions { gap: 9px; }
  .lobby .btn.coral, .lobby .btn.mint { min-height: 50px; }
  .lobby .actions .btn.back { min-height: 44px; }
}

/* ===== v033 online co-op: turn lock, connection dot, emotes (co-op HUD only) ===== */
.rotBtn.locked { background: radial-gradient(circle at 40% 30%, #8792A6, #677287 60%, #4D576A); box-shadow: 0 4px 0 #343C4C, 0 10px 20px rgba(0,0,0,.25), inset 0 0 0 3.5px rgba(255,255,255,.28); transform: translateY(3px); --lkc: var(--coral); }
.rotBtn.locked.lk2 { --lkc: var(--mint); }
.rotBtn.locked .rotIco { opacity: .5; }
.rotBtn.locked::after, .rotBtn.locked.hint:not(.nudge)::after { content: ""; position: absolute; inset: -7px; border: 0; border-radius: 50%; animation: none; opacity: 1; pointer-events: none;
  background: conic-gradient(var(--lkc) calc(var(--lk, 1) * 360deg), rgba(255,255,255,.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); }
.rotBtn.locked::before { content: attr(data-note); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  padding: 6px 11px; border-radius: 99px; background: #0E1532; color: #FFF3DC; font: 900 13px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; border: 2px solid var(--lkc); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
body.lefty .rotBtn.locked::before { right: auto; left: calc(100% + 10px); }
.rotBtn.nope { animation: rotNope .22s ease-in-out; }
@keyframes rotNope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.netDot { display: inline-block; width: 9px; height: 9px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; background: #9AA3B5; box-shadow: 0 0 0 2px #0E1532; }
.netDot.good { background: #3BD47A; } .netDot.ok { background: #FFCF3F; } .netDot.bad { background: #FF5A36; }
.emotes { display: none; }
#hud.coop .emotes { display: flex; gap: 6px; position: absolute; left: calc(var(--sal) + 14px); bottom: calc(var(--sab) + 128px); pointer-events: none; }
body.lefty #hud.coop .emotes { left: auto; right: calc(var(--sar) + 14px); }
.emo { pointer-events: auto; height: 32px; padding: 0 11px; border-radius: 99px; border: 2px solid #0E1532; background: linear-gradient(#FFF8EA, #F3E2BF); color: #1B2747;
  font: 900 13px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; box-shadow: inset 0 1.5px 0 #fff, 0 3px 0 #0E1532; touch-action: none; -webkit-user-select: none; user-select: none; }
.emo.press, .emo:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 #fff, 0 1px 0 #0E1532; }
html.tablet #hud.coop .emotes { left: calc(var(--sal) + 28px); bottom: calc(var(--sab) + 156px); }
@media (max-height: 500px) { #hud.coop .emotes { bottom: auto; top: calc(var(--sat) + 96px); } }

/* ===== v034: balanced secondary buttons in every co-op sheet and popup (Michael t70u) =====
   Back / Leave room / Leave co-op / Back to menu become a compact, centred, lighter 3D pill clearly below the primary key:
   44px tall (= the minimum tap target), ~60% wide, 15px label, a 2px lip instead of 4px, a soft shadow.
   One rhythm everywhere: 14px from the primary key, 20px + the home-indicator inset below the last button. */
.lobby .actions, .coopCard .actions { gap: 14px; }
.lobby .actions > .btn.back:only-child, .coopCard .actions > .btn.back:only-child { margin-top: 2px; }
.lobby .btn.back, .coopCard .btn.back, #sheet.kbUp .lobby .btn.back {
  align-self: center; width: auto; min-width: 60%; max-width: 100%; min-height: 44px; height: 44px; padding: 0 22px; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--ink2); border-radius: 999px; border: 1.5px solid #E6D4AE;
  background: linear-gradient(180deg, #FFFEFA 0%, #FAF1E0 100%);
  box-shadow: inset 0 1.5px 0 #fff, 0 2px 0 #DCC79F, 0 4px 9px rgba(106,80,40,.09); }
.lobby .btn.back:active, .coopCard .btn.back:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 #fff, 0 0 0 #DCC79F, 0 1px 3px rgba(106,80,40,.08); }
.lobby .btn.back .btnIco, .coopCard .btn.back .btnIco { width: 16px; height: 16px; color: var(--ink2); }
@media (max-height: 740px) { .lobby .actions .btn.back { min-height: 44px; } .lobby .actions { gap: 12px; } }
/* breathing room above the home bar: 20px + inset (was 18px); the sheet still hugs its content */
.sheetBody:has(> .lobby), .sheetBody:has(> .coopChoice) { padding-bottom: calc(var(--sab) + 20px); }
/* chooser: Back sits right under its footnote instead of floating below it */
.lobby .playerNote + .actions { margin-top: 14px; }
/* keyboard-up Join: keep it compact but still a clear 10px step between Join and Back */
#sheet.kbUp .lobby .actions { gap: 10px; }

/* ===== v034 (t71u): lobby sofa rests its unheld end on the floor; lifts level when the partner arrives ===== */
.crewScene .csSofa { transform-box: view-box; transform-origin: 22px -50px; }
.crewScene.g2 .csSofa, .crewScene.l2 .csSofa { transform-origin: 22px -50px; }
.crewScene.g1 .csSofa, .crewScene.l1 .csSofa { transform-origin: 120px -50px; }
.crewScene.grounded.g2 .csSofa { transform: rotate(15deg); }
.crewScene.grounded.g1 .csSofa { transform: rotate(-15deg); }
.crewScene.sofaAnim .csSofa, .crewScene.sofaAnim .csMan { animation-delay: var(--sd, 0ms); animation-fill-mode: both; }
.crewScene.lifting.l2 .csSofa { animation: sofaLift2 .65s cubic-bezier(.3,.7,.3,1) both; animation-delay: var(--sd, 0ms); }
.crewScene.lifting.l1 .csSofa { animation: sofaLift1 .65s cubic-bezier(.3,.7,.3,1) both; animation-delay: var(--sd, 0ms); }
.crewScene.lowering.g2 .csSofa { animation: sofaLower2 .6s cubic-bezier(.45,0,.4,1) both; animation-delay: var(--sd, 0ms); }
.crewScene.lowering.g1 .csSofa { animation: sofaLower1 .6s cubic-bezier(.45,0,.4,1) both; animation-delay: var(--sd, 0ms); }
.crewScene.lifting.l2 .csMan.m2, .crewScene.lifting.l1 .csMan.m1 { animation: csArrive .35s ease-out both; animation-delay: var(--sd, 0ms); }
@keyframes sofaLift2 { 0% { transform: rotate(15deg); } 82% { transform: rotate(-1.2deg); } 100% { transform: rotate(0deg); } }
@keyframes sofaLift1 { 0% { transform: rotate(-15deg); } 82% { transform: rotate(1.2deg); } 100% { transform: rotate(0deg); } }
@keyframes sofaLower2 { from { transform: rotate(0deg); } to { transform: rotate(15deg); } }
@keyframes sofaLower1 { from { transform: rotate(0deg); } to { transform: rotate(-15deg); } }
@keyframes csArrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crewScene.sofaAnim .csSofa, .crewScene.sofaAnim .csMan { animation: none !important; } }
html.calm .crewScene.sofaAnim .csSofa, html.calm .crewScene.sofaAnim .csMan { animation: none !important; }
/* ===== v034 (t73u): emotes tucked behind my "You" pad (online co-op HUD only) ===== */
#hud.coop .coopPad.me { pointer-events: auto; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; padding-right: 7px; transition: transform .12s ease; }
#hud.coop .coopPad.me:active { transform: translateY(1.5px); }
#hud.coop .coopPad.me::before { content: ""; position: absolute; inset: -4px -4px; border-radius: 99px; } /* ≥44px tap target */
.coopPad .cpEmo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; background: rgba(255,243,220,.14); color: rgba(255,243,220,.85); box-shadow: inset 0 0 0 1px rgba(255,243,220,.16); transition: background .16s ease, color .16s ease; }
#hud.emoOpen .coopPad.me .cpEmo { background: var(--cream); color: var(--cream); box-shadow: 0 1.5px 0 rgba(0,0,0,.25); }
#hud.emoOpen .coopPad.me .cpEmo svg circle { fill: #1B2747; }
#hud.emoOpen .coopPad.me .cpEmo svg path { fill: #FFE27E; }
#hud.emoOpen .coopPad.me .cpUp { opacity: 0 !important; }
#hud.coop .emotes { transform-origin: 0 100%; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.9);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; }
#hud.coop.emoOpen .emotes { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease-out, transform .2s cubic-bezier(.2,.9,.3,1.15), visibility 0s; }
#hud.coop:not(.emoOpen) .emo { pointer-events: none; }
body.lefty #hud.coop .emotes { transform-origin: 100% 100%; }
/* pops out just above the pad stack, right by my pad */
#hud.coop .emotes { bottom: calc(var(--sab) + 26px + 40px + 8px + 40px + 10px); }
html.tablet #hud.coop .emotes { bottom: calc(var(--sab) + 40px + 48px + 10px + 48px + 12px); }
@media (prefers-reduced-motion: reduce) { #hud.coop .emotes, #hud.coop.emoOpen .emotes { transition: opacity .1s linear, visibility 0s; transform: none; } }
html.calm #hud.coop .emotes, html.calm #hud.coop.emoOpen .emotes { transition: opacity .1s linear, visibility 0s; transform: none; }
@media (max-height: 500px) { #hud.coop .emotes { top: auto; } }
/* ===== v034 (t72u): spacing pass on an 8px scale (co-op sheets and cards only) =====
   text → control/card ≥ 12–16px, between major groups 16px; tighter (12px) only on short phones */
.lobby .codePlate { margin: 8px 0 16px; }
.lobby .lobbyBtns { margin-bottom: 16px; }
.lobby .lobbyBtns .btn { white-space: nowrap; }
.lobby .lobbyStatus { margin: 16px 4px 0; }
.lobby .lobbyStatus + .actions { margin-top: 16px; }
.lobby .groupLabel, .coopChoice .groupLabel { margin-bottom: 12px; }
.lobby .joinNote { margin-top: 12px; }
.lobby .lobbyErr:empty { margin-top: 0; min-height: 0; }
.lobby .lobbyErr:not(:empty) { margin-top: 12px; }
.coopSign { margin-bottom: 12px; }
.coopCard .ccArt, .coopCard .ccLink { margin-bottom: 14px; }
.coopCard .earnedNote { margin-top: 12px; }
.coopCard .stats + .earnedNote { margin-top: 12px; }
@media (max-height: 740px) {
  .lobby .codePlate { margin: 6px 0 12px; }
  .lobby .lobbyBtns { margin-bottom: 12px; }
  .lobby .lobbyStatus { margin-top: 12px; }
  .lobby .lobbyStatus + .actions { margin-top: 12px; }
  .lobby .actions { gap: 12px; }
  .lobby .btn.coral, .lobby .btn.mint { min-height: 48px; }
  .crewPanel .crewScene { width: min(42%, 144px); }
  .coopCard.pause .ccLink { margin-bottom: 12px; }
}
@media (max-height: 740px) {
  /* keep the roomier gaps and still fit 375x667 with a 34px inset */
  #sheetBox:has(.lobby:not(.coopChoice)) .sheetHead { margin-bottom: 10px; }
  .lobby .codePlate { margin-top: 4px; padding: 14px 12px 9px; } .lobby .cpCode i { height: 38px; font-size: 24px; }
  .crewPanel .crewScene { width: min(40%, 136px); }
}

/* v034 Home walk: the bob and legs are posed by main.js homeWalk() from the carry clock; no CSS pendulum on Home */
#home .bob { animation: none; }
#home .hwLeg.far .hwO { stroke: #1F1A2B; }

/* v034: menu and lobby carriers stand still, so their legs stay planted: no walk cycle on the spot, no idle
   scissoring, in every lobby state and during the sofa lift / partner arrival. Home is the only SVG scene that travels. */
.crewScene .legA, .crewScene .legB, .crewBadge .legA, .crewBadge .legB { animation: none !important; transform: none; }

/* ===== v035 (t84u): partner connection dot sits in the Partner pad's right slot, mirroring the You pad's emote icon ===== */
#hud.coop .coopPads { align-items: stretch; }
#hud.coop .coopPad, body.lefty #hud.coop .coopPad { align-self: stretch; padding-right: 7px; }
#hud.coop .coopPad > span { flex: 1 1 auto; }
.coopPad > .netDot { flex: none; box-sizing: border-box; width: 8px; height: 8px; margin: 0 8px 0 10px; vertical-align: 0; box-shadow: 0 0 0 1.5px #0E1532, 0 0 0 3px rgba(255,243,220,.14); }
/* ===== v038 (t90u): Daily streak track: inner side padding so the Today pill and the active-day ring sit inside the rounded track ===== */
.streak { --sp: 12px; padding-left: var(--sp); padding-right: var(--sp); }
html.tablet .streak { --sp: 14px; }
.streak::before, .streak::after { left: calc(var(--sp) + (100% - 2 * var(--sp)) / 14); }
.streak::before { right: calc(var(--sp) + (100% - 2 * var(--sp)) / 14); }
.streak::after { width: calc((100% - 2 * var(--sp) - (100% - 2 * var(--sp)) / 7) * var(--f, 0)); }

/* v042 (t97u): Join keyboard. While the field is focused the box sits exactly on the keyboard (--kbLift, set every frame from
   visualViewport) with NO transition, so it can never lag behind or double-move against an iOS scroll; a cream fill runs on under
   it behind the keyboard. Closing glides it down on a keyboard-like curve together with the padding/compact restore. */
#sheet.kbSheet .sheet { position: relative; transform: translateY(calc(-1 * var(--kbLift, 0px))); transition: none; max-height: var(--kbMax, 90%); }
#sheet.kbSheet .sheet::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: calc(var(--app-height, 100vh) + 60px); background: var(--paper); pointer-events: none; }
#sheet.kbTight .sheet { padding-bottom: 8px; }
#sheet.kbTight .sheetBody, html.tablet #sheet.kbTight .sheetBody { padding-bottom: 6px; scroll-padding-bottom: 6px; }
#sheet.kbSheet .sheet, #sheet.kbSheet .sheetBody, #sheet.kbSheet .sheetHead, #sheet.kbSheet .sheetHead h2, #sheet.kbSheet .codePlate, #sheet.kbSheet .codePlate .codeInput,
#sheet.kbSheet .lobby .actions, #sheet.kbSheet .joinNote, #sheet.kbSheet .joinNote .playerNote { transition: none; }
#sheet.kbClose .sheet, #sheet.kbClose .sheetBody, #sheet.kbClose .sheetHead, #sheet.kbClose .sheetHead h2, #sheet.kbClose .codePlate, #sheet.kbClose .codePlate .codeInput,
#sheet.kbClose .lobby .actions, #sheet.kbClose .lobby .btn, #sheet.kbClose .joinNote, #sheet.kbClose .joinNote .playerNote {
  transition-property: transform, padding, margin, height, min-height, font-size, gap; transition-duration: .28s; transition-timing-function: cubic-bezier(.32,.72,0,1); }
html.calm #sheet.kbClose .sheet { transition-duration: .12s; }

/* =================================================================
   v043: Marathon leaderboard (choice tile, board sheet, name sheet, report rank line)
   ================================================================= */
.coopChoice .boardTile { margin-top: 16px; }
.boardTile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 10px 14px 10px 10px; border-radius: 20px; color: var(--ink); text-align: left;
  background: linear-gradient(180deg, #fff, #FFFBF2); border: 2px solid #E6D2AA; box-shadow: inset 0 2px 0 #fff, 0 5px 0 #D2B988, 0 12px 20px rgba(106,80,40,.13); transition: transform .08s, box-shadow .08s; }
.boardTile:active { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 #D2B988, 0 3px 6px rgba(106,80,40,.1); }
.btIco { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 14px; color: #8A5A00; background: linear-gradient(180deg, #FFE27E, var(--tape)); border: 2px solid var(--tapeD); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 2px 0 var(--tapeD); }
.btIco .gi, .btIco svg { display: block; width: 100%; height: 100%; }
.btBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.btBody b { font-size: 17px; font-weight: 900; line-height: 1.1; }
.btBody small { font-size: 13px; font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btGo { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #FBF3E2; border: 1.5px solid #E2CDA2; color: var(--ink2); transform: scaleX(-1); }
.btGo svg { display: block; width: 100%; height: 100%; }

.lbSegs { flex: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lbSegs .seg { margin: 0; }
.lbSegs .seg.sm { align-self: center; width: min(100%, 280px); padding: 3px; border-radius: 12px; }
.lbSegs .seg.sm button { height: 32px; font-size: 14px; border-radius: 9px; }
.sheetBody.noBar { scrollbar-width: none; -ms-overflow-style: none; }
.sheetBody.noBar::-webkit-scrollbar { display: none; width: 0; height: 0; }

.lb .lbMe { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 12px; padding: 6px 6px 6px 14px; border-radius: 16px; background: #FBF3E2; border: 1.5px solid #E2CDA2; }
.lbMeL { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbMeL b { color: var(--ink); font-weight: 900; }
.lbEdit { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 900; color: var(--ink); background: linear-gradient(180deg, #FFFEFA, #FAF1E0); border: 1.5px solid #E6D4AE; box-shadow: inset 0 1.5px 0 #fff, 0 2px 0 #DCC79F; }
.lbEdit:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 #fff, 0 0 0 #DCC79F; }
.lbEdit.add { color: #fff; background: linear-gradient(180deg, #FF7651, var(--coral)); border-color: var(--coralD); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 2px 0 var(--coralD); }

.sheetBody .lbList.group { border-radius: 20px; background: #fff; }
.lbRow { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px 8px 10px; }
.lbRow + .lbRow, .lbGap + .lbRow { box-shadow: inset 0 1.5px 0 var(--paper2); }
.lbRank { flex: none; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 99px; background: var(--paper2); color: var(--ink2); font-size: 14.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lbRank.medal3 { color: #fff; border: 2px solid; font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.lbRank.gold { background: linear-gradient(180deg, #FFE27E, var(--tape)); border-color: var(--tapeD); color: #7A4B00; text-shadow: 0 1px 0 rgba(255,255,255,.5); box-shadow: 0 2px 0 var(--tapeD); }
.lbRank.silver { background: linear-gradient(180deg, #EEF1F7, #C9D0DE); border-color: #A3ACBF; color: #4A5370; text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 2px 0 #A3ACBF; }
.lbRank.bronze { background: linear-gradient(180deg, #F6B98A, #E08B52); border-color: #B9672F; box-shadow: 0 2px 0 #B9672F; }
.lbWho { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; font-size: 16px; white-space: nowrap; overflow: hidden; }
.lbWho b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 900; color: var(--ink); }
.lbWho.duo b { flex: 0 1 auto; } .lbWho.duo i { flex: none; font-style: normal; font-weight: 800; color: var(--ink3); font-size: 14px; }
.lbM { flex: none; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.lbM small { font-size: 13px; font-weight: 800; color: var(--ink3); }
.lbYou { flex: none; padding: 3px 8px; border-radius: 99px; font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--coral); box-shadow: 0 1.5px 0 var(--coralD); }
.lbRow.me { background: #FFEDE6; box-shadow: inset 0 0 0 2px rgba(255,90,54,.5); border-radius: 18px; }
.lbRow.me + .lbRow { box-shadow: none; }
.lbGap { display: flex; justify-content: center; gap: 5px; padding: 8px 0; box-shadow: inset 0 1.5px 0 var(--paper2); }
.lbGap i { width: 5px; height: 5px; border-radius: 50%; background: var(--paper3); }
.lbRow.skel .lbRank { background: var(--paper2); }
.lbRow.skel .lbWho i, .lbRow.skel .lbM i { display: block; height: 12px; border-radius: 6px; background: var(--paper2); }
.lbRow.skel .lbWho i { width: calc(40% + var(--i) * 5%); } .lbRow.skel .lbM i { width: 54px; }
.lbRow.skel > * { animation: lbPulse 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 90ms); }
@keyframes lbPulse { from { opacity: 1; } to { opacity: .45; } }
html.calm .lbRow.skel > * { animation: none; }
.lbState { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 18px 20px; }
.lbStIco { width: 56px; height: 56px; padding: 13px; margin-bottom: 4px; border-radius: 50%; color: var(--mintD); background: #E3F7F2; border: 2px solid rgba(47,194,168,.45); }
.lbStIco.off { color: var(--ink2); background: var(--paper2); border-color: #E2CDA2; }
.lbStIco svg, .lbStIco .gi { display: block; width: 100%; height: 100%; }
.lbState b { font-size: 17.5px; font-weight: 900; }
.lbState small { max-width: 290px; font-size: 14px; font-weight: 700; color: var(--ink2); line-height: 1.35; text-wrap: balance; }
.lb .lbState .btn.soft.lbRetry { align-self: center; margin-top: 8px; min-height: 44px; height: 44px; padding: 0 20px; font-size: 15px; border-radius: 999px; }
.lb .lbFoot { margin: 12px 8px 0; font-size: 13px; color: var(--ink3); }
.lb .actions { margin-top: 16px; }

.lbNameView .codePlate { margin-top: 14px; }
.codePlate .codeInput.nameInput { font-size: 26px; letter-spacing: .01em; text-transform: none; }
#sheet.kbUp .codePlate .codeInput.nameInput { font-size: 23px; }
.lbNameView .playerNote { margin: 4px 6px 0; }

.rankLine { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 12px 0 0; padding: 6px 6px 6px 8px; border-radius: 16px; text-align: left; color: var(--ink);
  background: #FBF3E2; border: 1.5px solid #E2CDA2; box-shadow: inset 0 1.5px 0 #fff, 0 2px 0 #E2CDA2; transition: background .2s, border-color .2s, transform .08s; }
.rankLine:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 #fff; }
.rlIco { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 10px; color: #8A5A00; background: linear-gradient(180deg, #FFE27E, var(--tape)); box-shadow: 0 1.5px 0 var(--tapeD); }
.rlIco svg, .rlIco .gi { display: block; width: 100%; height: 100%; }
.rlT { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--ink2); line-height: 1.2; }
.rlT b { color: var(--ink); font-weight: 900; }
.rlGo { flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #FF7651, var(--coral)); box-shadow: 0 2px 0 var(--coralD); white-space: nowrap; }
.rankLine.good { background: #E3F7F2; border-color: rgba(47,194,168,.55); box-shadow: inset 0 1.5px 0 #fff, 0 2px 0 rgba(47,194,168,.45); }
.rankLine.good .rlT { color: var(--mintD); } .rankLine.good .rlT b { color: var(--ink); }
.rankLine.off .rlT { color: var(--ink3); }
.coopCard .rankLine { margin-top: 14px; }
@media (max-width: 380px) { .rlT { font-size: 13.5px; } .rlGo { padding: 0 10px; font-size: 12.5px; } .lbWho { font-size: 15px; } }

/* v043b: compact, centred secondary Leaderboard button; period segment matches the board segment */
.coopChoice .boardTile { margin-top: 0; }
.coopChoice .boardRow { display: flex; justify-content: center; margin-top: 14px; }
.coopChoice .boardTile { width: auto; max-width: 100%; min-height: 46px; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px;
  background: #FFFBF2; border: 2px solid #E6D2AA; box-shadow: inset 0 1.5px 0 #fff, 0 3px 0 #D2B988, 0 6px 12px rgba(106,80,40,.10); }
.coopChoice .boardTile:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 #fff, 0 1px 0 #D2B988, 0 2px 4px rgba(106,80,40,.08); }
.coopChoice .btIco { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #C98A00; }
.coopChoice .btBody { flex: none; flex-direction: row; align-items: baseline; gap: 7px; }
.coopChoice .btBody b { font-size: 16px; font-weight: 800; }
.coopChoice .btBody small { font-size: 12.5px; font-weight: 800; color: var(--ink2); padding: 2px 8px; border-radius: 999px; background: #FBF3E2; border: 1.5px solid #E2CDA2; }
.coopChoice .btGo { width: 22px; height: 22px; padding: 5px; background: none; border: 0; }
.lbSegs .seg, .lbSegs .seg.sm { align-self: stretch; width: 100%; padding: 4px; border-radius: 14px; }
.lbSegs .seg button, .lbSegs .seg.sm button { height: 38px; font-size: 15px; border-radius: 11px; }
/* Tablet sheets fit taller portrait and wider landscape viewports independently. */
html.tablet .sheetWrap { padding: max(20px,var(--sat)) max(24px,var(--sar)) max(20px,var(--sab)) max(24px,var(--sal)); }
html.tablet .sheet { width:min(100%,680px); max-height:min(92%,1000px); }
html.tablet .sheet .seg button, html.tablet .sheetHead .iconBtn { min-height:44px; }
html.tablet .sheetBody { scroll-padding-block: 12px 24px; }
@media (orientation:landscape) {
  html.tablet #sheetBox:has(.coopChoice, #shopPrev, .daily) { width:min(100%,940px); }
  html.tablet .coopChoice { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px 20px; }
  html.tablet .coopChoice > .groupLabel { grid-row:1; margin:0 0 2px; }
  html.tablet .coopChoice > .modeTiles { grid-row:2; margin:0; }
  html.tablet .coopChoice > .bsGroup { margin-top:0 !important; }
  html.tablet .coopChoice > .bsGroup, html.tablet .coopChoice > .bsTiles { grid-column:2; }
  html.tablet .coopChoice > .bsOrJoin, html.tablet .coopChoice > .bsJoinCode, html.tablet .coopChoice > .boardRow { grid-column:1/-1; margin:2px 0; }
  html.tablet .sheetBody:has(#shopPrev) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); height:clamp(300px,56dvh,540px); min-height:0; overflow:hidden;
    grid-template-rows:minmax(150px,1fr) auto auto; gap:14px 22px; align-items:start; }
  html.tablet .sheetBody:has(#shopPrev) .stage {grid-area:1 / 1; height:100%;}
  html.tablet .sheetBody #shopPrev {height:100%;}
  html.tablet .sheetBody:has(#shopPrev) .stageInfo {grid-area:2 / 1; margin:0;}
  html.tablet .sheetBody:has(#shopPrev) .swatches {grid-area:1 / 2 / -1 / 3; align-self:stretch; align-content:start; overflow-y:auto; min-height:0; padding:4px 5px 8px; overscroll-behavior:contain; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:clamp(104px,14vmin,154px); margin:0;}
  html.tablet .sheetBody:has(#shopPrev) .swatch { width:100%; height:100%; min-width:0; aspect-ratio:auto; }
  html.tablet .sheetBody:has(#shopPrev) .lead {grid-area:3 / 1; margin:0; color:var(--ink2); font-size:14px; line-height:1.4;}
  html.tablet .daily { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:16px 24px; }
  html.tablet .daily > .dailyTop { grid-column:1/-1;margin:0; }
  html.tablet .daily > .stage { grid-area:2 / 1 / span 2; }
  html.tablet .daily > .streakCard {grid-area:2 / 2; margin:0;}
  html.tablet .daily > .btn { grid-area:3 / 2; }
}

/* Delivery receipt polish: local to the existing Delivered receipt family. */
.deliveryReceipt.card { padding: 25px 22px 20px; }
.deliveryReceipt.card .stamp { right: 10px; top: -13px; font-size: 14px; }
.deliveryReceipt.card .kicker { color: var(--ink2); font-size: 13px; margin-bottom: 5px; }
.deliveryReceipt.card .note { font-size: 15px; line-height: 1.4; margin: 9px auto 0; max-width: 30ch; }
.deliveryReceipt .bigStars { margin-top: 13px; gap: 9px; }
.deliveryReceipt .bigStars span { width: 42px; height: 42px; }
.deliveryReceipt .bigStars span:nth-child(2) { width: 54px; height: 54px; margin-bottom: 6px; }
.deliveryReceipt .stats { margin-top: 13px; gap: 8px; }
.deliveryReceipt .stat { display: grid; grid-template-rows: 26px 30px; gap: 5px; padding: 11px 5px 10px; min-height: 0; border-radius: 14px; }
.deliveryReceipt .statV { font-size: 22px; height: auto; }
.deliveryReceipt .statL { display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1.2; }
.deliveryReceipt .earned { margin-top: 17px; padding-top: 15px; border-top: 1.5px dashed var(--paper3); gap: 8px; }
.deliveryReceipt .earned b { font-size: 36px; }
.deliveryReceipt .earned .coin { width: 31px; height: 31px; }
.deliveryReceipt .earnedNote { margin: 7px auto 0; max-width: 31ch; color: var(--ink2); font-size: 13px; line-height: 1.4; }
.deliveryReceipt .jobLine { font-size: 13px; line-height: 1.35; padding: 9px 10px; }
.deliveryReceipt .adOffer { margin-top: 14px; padding: 10px 12px; gap: 10px; }
.deliveryReceipt .adOffer .aoIco { width: 32px; height: 32px; border-radius: 10px; }
.deliveryReceipt .adOffer .aoT b { font-size: 14px; }
.deliveryReceipt .adOffer .aoT small { font-size: 12px; color: var(--ink2); }
.deliveryReceipt .adOffer .aoChip { padding: 6px 8px; font-size: 13px; }
.deliveryReceipt .adOffer.done:disabled { opacity: 1; }
.deliveryReceipt .adOffer.done .aoT { color: #23614F; }
.deliveryReceipt .adOffer.done .aoT small { color: #367565; }
.deliveryReceipt .actions { margin-top: 17px; gap: 10px; }
.deliveryReceipt .actions .btn.two { gap: 4px; padding: 11px 16px; }
.deliveryReceipt .actions .row { gap: 10px; }
html.tablet .deliveryReceipt.card { padding: 28px 28px 24px; }
html.tablet .deliveryReceipt .bigStars { margin-top: 16px; }
@media (max-width: 350px), (max-height: 700px) and (max-width: 600px) {
  .deliveryReceipt.card { padding: 21px 16px 16px; }
  .deliveryReceipt.card h2 { font-size: 28px; }
  .deliveryReceipt.card .note { font-size: 14px; margin-top: 7px; }
  .deliveryReceipt .bigStars { margin-top: 9px; }
  .deliveryReceipt .bigStars span { width: 35px; height: 35px; }
  .deliveryReceipt .bigStars span:nth-child(2) { width: 45px; height: 45px; margin-bottom: 4px; }
  .deliveryReceipt .stats { margin-top: 10px; }
  .deliveryReceipt .stat { padding: 8px 4px; grid-template-rows: 24px 28px; gap: 4px; }
  .deliveryReceipt .statV { font-size: 20px; }
  .deliveryReceipt .statL { font-size: 11.5px; }
  .deliveryReceipt .earned { margin-top: 12px; padding-top: 11px; }
  .deliveryReceipt .earned b { font-size: 32px; }
  .deliveryReceipt .actions { margin-top: 14px; }
}
/* On short screens the receipt starts within the scroll area instead of centering above it. */
.modalBox:has(.deliveryReceipt) { align-self: safe center; }
@media (max-width: 350px), (max-height: 700px) and (max-width: 600px) {
  .deliveryReceipt.card .stamp { top: -5px; }
}
/* Reviewed receipt refinements: outlined stars and an inline completed-reward amount. */
.deliveryReceipt .bigStars .gi {
  stroke: rgba(163, 112, 19, .55);
  stroke-width: .6;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.deliveryReceipt .adOffer.done .aoT {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}
.deliveryReceipt .adOffer.done .aoT small {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}