/* Fonts are bundled (SIL OFL 1.1, see docs/CREDITS.md and fonts/OFL-*.txt): no third-party requests. */
@font-face{font-family:"Bagel Fat One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bagel-fat-one-latin.woff2?v=0.1.0%2B20261022.2003-1033918) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/figtree-latin-var.woff2?v=0.1.0%2B20261022.2003-1033918) format("woff2")}

/* Base reset (the published artifact skeleton adds the same rules) */
body{margin:0}
[hidden]{display:none!important}

/* Layout: the stage is the whole viewport and the canvas fills it (the yard, and the world beyond it); menus are paper notes pinned over the yard. Deliberately single-theme (night). */
:root{
  --night:#0f1528; --night-2:#18213d; --paper:#efe6cf; --paper-2:#e2d6b8; --ink:#1c2033;
  --porch:#f2c55c; --porch-deep:#c9962e; --alert:#ff8a3d; --muted:#8f98b6; --line:rgba(239,230,207,.18);
  /* night glass (HUD pills and the top bar's coin and buttons): a dark pane with a faint top glint, a cream hairline, a soft drop */
  --glass-bg:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,0) 60%),rgba(11,15,32,.84);
  --glass-line:rgba(239,230,207,.16);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.38);
  --display:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--paper);font-family:var(--body);overflow:hidden}
/* Porchlight passes 6-7: the HUD never covers the yard where there is room for it. game.js layout() picks a
   mode, sets it as a class on #stage, and places #hud and #sack (style left/top/width) round the yard:
   .lay-bar   desktop: hearts, clock and quota in the top bar row (.bar2: a row under the bar), the sack under the yard
   .lay-stack phones in portrait: the yard edge to edge, two HUD rows above it, the sack and Sneak below in the thumb zone
              (.compact: one HUD row and a smaller Sneak, for short phones such as 360x640)
   .lay-over  landscape phones (no spare band): the HUD over the yard's top edge, the sack over its bottom edge
   .touchstick touch screens: the fixed stick (drawn on the canvas) has a box at the bottom left that the layout keeps
              free (a taller bottom band in portrait, a left band in landscape); no Sneak button */
#stage{position:fixed;inset:0;overflow:hidden;background:var(--night)}
#game{position:absolute;left:0;top:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
/* The top bar (12 Oct): the brand as an ink-outlined sticker, then the stash, Sound and Pause as night-glass pills of the
   HUD's height, so the bar reads as one more HUD row instead of loose text floating on the roofs beyond the yard. */
#bar{position:absolute;z-index:4;top:0;left:0;right:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;
  padding:max(9px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 7px max(16px,env(safe-area-inset-left));
  background:linear-gradient(rgba(7,10,22,.6),rgba(7,10,22,0));pointer-events:none}
#bar>.brand,.barright{pointer-events:auto}
/* phones in portrait: a soft scrim over the whole top band (bar and HUD rows), fading out at the yard's edge, calms the roofs
   and trees beyond the yard behind the pills; the yard itself is untouched. The bar takes the HUD rows' 12 px gutter (on portrait
   tablets game.js layout() lines it up with the HUD rows' edges). */
#stage.lay-stack::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:var(--yard-top,0);pointer-events:none;
  background:linear-gradient(rgba(7,10,22,.62),rgba(7,10,22,.4) 55%,rgba(7,10,22,0))}
.lay-stack #bar{background:none;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
/* the tutorial's Skip makes the bar too full for the brand on the narrowest phones: hide it rather than cut it to "Snou..." */
@media (max-width:374px){#bar:has(#skipBtn:not([hidden])) .brand{visibility:hidden}}
.barright{flex-shrink:0;display:flex;align-items:center;gap:8px}
/* the tutorial's Skip keeps its distance from the stash (a slip toward the coins shouldn't skip; it asks first anyway) */
#skipBtn{margin-right:14px}
.brand{font-family:var(--display);font-size:20px;color:var(--porch);letter-spacing:.02em;line-height:1.15;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 3px 3px;margin:0 -3px -3px;text-shadow:0 2px 0 var(--ink),0 0 2px var(--ink),0 0 8px rgba(7,10,22,.8)}
.spacer{flex:1}
.coin,.iconbtn{flex-shrink:0;box-sizing:border-box;height:34px;border-radius:17px;background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);color:var(--paper);white-space:nowrap}
.coin{display:inline-flex;align-items:center;gap:7px;padding:0 13px 0 9px;font:800 14px var(--body);font-variant-numeric:tabular-nums}
.coin::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0bd,var(--porch) 55%,var(--porch-deep));box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 6px rgba(242,197,92,.25)}
.iconbtn{padding:0 14px;font:700 13px var(--body);cursor:pointer}
/* Sound (12 Oct): an icon-only pill at every size, 44 px wide like a touch target, so the phone bar fits inside the yard's width.
   Sound on: a speaker with two waves; muted: the speaker with a cross, a step dimmer (the shape says it, not the colour). */
.iconbtn.sndbtn{width:44px;padding:0;display:inline-grid;place-items:center}
.sndbtn svg{display:block;overflow:visible}
.sndbtn .spk{fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.sndbtn .wave,.sndbtn .mute{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sndbtn .mute,.sndbtn.muted .wave{display:none}
.sndbtn.muted .mute{display:inline}
.sndbtn.muted{color:#c9c2ae}
@media (hover:hover){.iconbtn:hover{border-color:var(--porch);color:var(--porch)}}  /* no sticky gold after a tap on touch screens */
/* Touch: Skip, Sound and Pause keep their compact look but get a hit area of at least 44 x 44 px (the bar stays one line at 640x360). */
@media (pointer:coarse){.iconbtn{position:relative;min-width:44px}.iconbtn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}}
.iconbtn:focus-visible,.btn:focus-visible{outline:3px solid var(--porch);outline-offset:2px}
/* menus: the scrim covers the whole stage (the HUD dims under it), the top bar stays above it, the card sits below the bar */
#overlay{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--bar-h,52px) 10px 10px;box-sizing:border-box;background:radial-gradient(ellipse at center,rgba(15,21,40,.25),rgba(7,10,22,.82));overflow:auto}
.card{--px:24px;--pb:22px;position:relative;background:var(--paper);color:var(--ink);border-radius:6px 6px 20px 20px;width:100%;max-width:540px;max-height:100%;overflow:auto;box-sizing:border-box;padding:24px var(--px) var(--pb);display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(28,32,51,.05) 27px 28px)}
.card::before{content:"";position:absolute;top:-1px;left:50%;width:84px;height:18px;transform:translateX(-50%) rotate(-2deg);background:rgba(242,197,92,.55);border-radius:2px}
.eyebrow{margin:0;font:800 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#6b6450}
.logo{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(46px,12vw,68px);line-height:.92;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.logo span{color:var(--porch-deep)}
h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(28px,6vw,38px);line-height:1;text-wrap:balance}
h3{margin:0;font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6b6450}
.lede{margin:0;font-size:15px;line-height:1.5;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{border:1.5px solid rgba(28,32,51,.18);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:22px;font-variant-numeric:tabular-nums}
.stat span{font:800 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6b6450}
.row{display:flex;gap:10px;flex-wrap:wrap}
/* The main action row stays visible: it sticks to the bottom edge of a card that has to scroll
   (the negative offset cancels the card's bottom padding, which sticky positioning respects). */
.card>.actions{position:sticky;bottom:calc(-1 * var(--pb));z-index:1;margin-inline:calc(-1 * var(--px));padding:10px var(--px);background:var(--paper);box-shadow:0 -12px 12px -12px rgba(28,32,51,.35)}
.card>.actions:last-child{margin-bottom:calc(-1 * var(--pb));padding-bottom:var(--pb);border-radius:0 0 20px 20px}
.btn{appearance:none;border:2px solid var(--ink);background:transparent;color:var(--ink);font:800 15px var(--body);padding:11px 18px;border-radius:12px;cursor:pointer;transition:transform .08s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--ink);color:var(--porch);flex:1;min-width:180px}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.danger{border-color:#9c3418;color:#9c3418}
.confirm{margin:0;flex-basis:100%;font-size:14.5px;line-height:1.45;font-weight:600}
.btn.small{padding:6px 12px;font-size:13px;border-radius:10px}
/* touch: small buttons (the shop's Buy) are 40 px tall with a 44 px hit area (fresh-eyes audit: they were 74 x 31) */
@media (pointer:coarse){.btn.small{position:relative;min-height:40px}.btn.small::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.list li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;font-size:14px;line-height:1.4}
.list li .rw{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.list li.fail{color:#7b7563}
/* side jobs on the cards: the job's icon (ticked when done), its name over the short text, the reward */
.list.jobs li{align-items:center}
.list li .ji{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(28,32,51,.35)}
.list li .ji svg{display:block;width:14px;height:14px}
.list li .ji .ck{position:absolute;right:-5px;bottom:-4px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:var(--porch);color:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}
.list li .ji .ck svg{width:10px;height:10px}
.list li.fail .ji{opacity:.45}
.list li .jt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.list li .jt b{font-size:14px}
.list li .jx{font-size:13px;color:#4a4636}
.list li.fail .jx{color:inherit}
.glyph{display:inline-block;width:1em;height:1em;vertical-align:-.15em;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.glyph.gstar{fill:var(--porch)}
.glyph.gdiamond{fill:var(--paper);stroke-width:1.8}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px;line-height:1.4;align-items:baseline}
kbd{font:800 11px var(--body);border:1.5px solid rgba(28,32,51,.35);border-bottom-width:3px;border-radius:6px;padding:1px 6px;white-space:nowrap}
.shop{display:flex;flex-direction:column;gap:8px}
.up{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border-top:1px dashed rgba(28,32,51,.2);padding-top:8px}
.upinfo{display:flex;flex-direction:column;min-width:0}
.upinfo strong{font-size:14.5px}
.upinfo span{font-size:12.5px;color:#5a5546}
.pips{display:flex;gap:3px}
.pips i{width:7px;height:12px;border-radius:2px;background:rgba(28,32,51,.15)}
.pips i.on{background:var(--porch-deep)}
.buy{min-width:74px}
.buy::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--porch-deep);vertical-align:-1px}
.buy.maxed::before{display:none}
.result{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14.5px;font-variant-numeric:tabular-nums}
.result b{text-align:right}
.meter{flex:none;height:10px;border-radius:6px;background:rgba(28,32,51,.12);overflow:hidden}
.meter i{display:block;height:100%;background:var(--porch-deep)}
.fine{font-size:12px;color:#6b6450;margin:0}
.linkish{background:none;border:none;padding:0;font:600 12px var(--body);color:#6b6450;text-decoration:underline;cursor:pointer;align-self:flex-start}
#sneakBtn{position:absolute;z-index:2;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;border:2px solid rgba(239,230,207,.45);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),rgba(11,15,32,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.4);color:var(--paper);font:800 13px var(--body);touch-action:none}
@media (pointer:fine){#sneakBtn{width:64px;height:64px;font-size:12px;cursor:pointer}#sneakBtn:hover{border-color:var(--porch)}}
.compact #sneakBtn{width:62px;height:62px;font-size:12px}
#sneakBtn.on{background:var(--porch);color:var(--ink);border-color:var(--porch)}
/* sneaking from a gentle drag on touch (not locked): outlined in the sneak blue of the stick and the dog ring */
#sneakBtn.soft{border-color:#9fd0ff;color:#9fd0ff;box-shadow:inset 0 0 0 1px rgba(159,208,255,.5),0 0 12px rgba(159,208,255,.3),0 4px 14px rgba(0,0,0,.4)}
@media (max-width:480px){.card{--px:16px;--pb:18px;padding-top:20px}.stats b{font-size:18px}.brand{font-size:16px}#bar{gap:8px}.barright{gap:6px}.iconbtn{padding:0 11px;font-size:12.5px}.coin{padding:0 11px 0 8px;gap:6px}}
@media (max-height:520px){#bar{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:6px}.coin,.iconbtn{height:30px;border-radius:15px}.card{--pb:14px;padding-top:16px;gap:10px}.logo{font-size:40px}h2{font-size:26px}.lede{font-size:14px;line-height:1.4}.stat{padding:5px 8px}.stat b{font-size:17px}.btn{padding:9px 16px}}
#sneakBtn.nudge{animation:nudge .9s ease-in-out infinite;border-color:var(--porch)}
.btn.pulse-once{animation:nudge .9s ease-in-out 2}
@keyframes nudge{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(242,197,92,0)}50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(242,197,92,.35)}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}#sneakBtn.nudge,.btn.pulse-once{animation:none}}
#sneakBtn.off,#hud.off,#sack.off{visibility:hidden}
.touchstick #sneakBtn{display:none}

/* "Night glass" HUD (visual-direction.md, pass 5): dark glass pills with a cream hairline, the same family as the bar buttons.
   game.js syncHud() writes the values; nothing here takes pointer events, so a drag that starts on the HUD still steers. */
#hud{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;pointer-events:none}
/* night glass: a dark pane, a cream hairline, a faint top glint and a soft drop (no backdrop blur: it would recomposite the canvas every frame) */
.glass{box-sizing:border-box;height:34px;border-radius:17px;background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);display:flex;align-items:center;color:var(--paper)}
#hearts{flex:none;gap:4px;padding:0 12px}
#hearts svg{display:block;width:18px;height:15px;fill:var(--alert);filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
#hearts svg.empty{fill:rgba(239,230,207,.15);filter:none}
#clock{flex:0 1 280px;min-width:0;gap:9px;padding:0 14px 0 12px}
#clock.wait{visibility:hidden}
#clock .track,#quota .track{position:relative;flex:1;min-width:30px;height:6px;border-radius:3px;background:rgba(239,230,207,.12);overflow:hidden}
#clock .track i,#quota .track i{position:absolute;inset:0;border-radius:inherit;clip-path:inset(0 100% 0 0)}
#clock .track i{background:linear-gradient(90deg,#4a5d9a,#c88a6a 75%,var(--porch))}
#clock b{flex:none;min-width:30px;text-align:right;font:800 13px var(--body);font-variant-numeric:tabular-nums}
#clock.low b{color:var(--alert);animation:blink .5s steps(1) infinite}
@keyframes blink{50%{color:var(--paper)}}
.moon{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:inset -4px 2px 0 0 #d9def0;transform:rotate(-25deg)}
.sun{flex:none;width:9px;height:9px;border-radius:50%;background:var(--porch);box-shadow:0 0 0 3px rgba(242,197,92,.22)}
#quota{flex:none;display:grid;grid-template-columns:1fr auto;align-content:center;column-gap:14px;row-gap:4px;padding:0 15px;min-width:168px}
.qname{font:800 10px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a3abc6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.qnum{font:800 13px var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;transform-origin:right center}
.qnum.hi{color:var(--porch)}
#quota .track{grid-column:1/-1;height:3px;min-width:0}
#quota .track i{background:var(--porch-deep)}
#quota.met .track i{background:var(--porch)}
#quota .track em{position:absolute;inset:0;border-radius:inherit;background:rgba(242,197,92,.5);clip-path:inset(0 100% 0 0)} /* the tutorial ghost's preview */
#quota.preview .track{box-shadow:0 0 6px rgba(242,197,92,.55)}
.lay-bar #clock{flex:none;width:250px}
.lay-stack #hud{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"hearts quota" "clock clock";gap:8px}
.lay-stack #hearts{grid-area:hearts}
.lay-stack #quota{grid-area:quota;justify-self:end}
.lay-stack #clock{grid-area:clock}
.lay-stack.compact #hud{grid-template-columns:auto 1fr auto;grid-template-areas:"hearts clock quota"}
.compact #quota{min-width:0;grid-template-columns:auto}
.compact .qname,.compact .moon,.compact .sun{display:none}
.compact #clock{gap:7px;padding:0 12px}
.lay-over #hud{justify-content:space-between;gap:6px}
.lay-over .glass{height:28px;border-radius:14px}
.lay-over #quota{row-gap:3px}
/* Tonight's side jobs (clarity pass, 17 Oct): three icons in the card's order. Desktop: a fourth pill after the quota;
   phones: in the top bar in the brand's place (game.js placeJobs). States: open (cream ring), live (gold; sneak blue for
   Tiptoe and Sleeping dog; alert orange for Dog chase), broken (grey with a slash), failed (faded with a cross), done
   (a gold disc with an ink check). */
#jobs{flex:none;gap:8px;padding:0 10px;pointer-events:auto;cursor:pointer;position:relative}
/* a tap on the strip opens the side-job key (game.js showJobKey); on touch its hit area is at least 44 px tall */
@media (pointer:coarse){#jobs::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}}
#jobkey{position:absolute;z-index:3;box-sizing:border-box;max-width:min(340px,calc(100vw - 16px));padding:9px 12px 9px 9px;border-radius:14px;
  background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);color:var(--paper);display:flex;flex-direction:column;gap:7px;
  font:600 12.5px/1.2 var(--body);cursor:pointer;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
#jobkey[hidden]{display:none}
#jobkey.on{opacity:1;transform:none}
.jk-row{display:flex;align-items:center;gap:9px}
.jk-row .ji{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:rgba(239,230,207,.85);box-shadow:inset 0 0 0 1.5px rgba(239,230,207,.3)}
.jk-row .ji svg{display:block;width:14px;height:14px}
.jk-t{display:flex;flex-direction:column;min-width:0}
.jk-row b{font-weight:800;color:var(--porch)}
.jk-row .jx{color:rgba(239,230,207,.82)}
@media (prefers-reduced-motion:reduce){#jobkey{transition:none}}
#bar>#jobs{gap:6px;padding:0 8px;height:34px;border-radius:17px}
#bar.jobs>.brand{display:none}
.job{position:relative;flex:none;box-sizing:border-box;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:rgba(239,230,207,.75);box-shadow:inset 0 0 0 1.5px rgba(239,230,207,.3)}
#bar .job{width:20px;height:20px}
.job svg{display:block;width:14px;height:14px}
#bar .job svg{width:13px;height:13px}
.job.live{color:var(--porch);box-shadow:inset 0 0 0 1.5px rgba(242,197,92,.75)}
.job.live.blue{color:#9fd0ff;box-shadow:inset 0 0 0 1.5px rgba(159,208,255,.75)}
.job.live.orange{color:var(--alert);box-shadow:inset 0 0 0 1.5px rgba(255,138,61,.75)}
.job.pulse{animation:jobpulse .9s ease-in-out infinite}
.job.broken{color:rgba(201,208,230,.45);box-shadow:inset 0 0 0 1.5px rgba(201,208,230,.25)}
.job.broken::after,.job.failed::before,.job.failed::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:1px;background:#c9d0e6;transform:rotate(-45deg)}
.job.failed{opacity:.3}
.job.failed::before{width:12px;margin-left:-6px;transform:rotate(45deg)}
.job.failed::after{width:12px;margin-left:-6px}
.job.done{background:var(--porch);color:var(--ink);box-shadow:none}
.job.pop{animation:jobpop .35s ease-out}
.job.shake{animation:jobshake .25s ease-in-out}
.job .badge{position:absolute;right:-6px;bottom:-5px;padding:1px 2px;border-radius:4px;background:rgba(11,15,32,.92);font:800 9px/1 var(--body);font-variant-numeric:tabular-nums;color:inherit}
@keyframes jobpulse{50%{box-shadow:inset 0 0 0 1.5px rgba(242,197,92,.75),0 0 0 3px rgba(242,197,92,.35);color:#fff0bd}}
@keyframes jobpop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes jobshake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@media (max-height:520px){#bar>#jobs{height:30px;border-radius:15px}}
@media (prefers-reduced-motion:reduce){.job.pulse,.job.pop,.job.shake{animation:none}}

/* The sack: a burlap tab with stitching, a little sack icon and the item slots; the live stake beside or under it.
   The tutorial's bank lesson makes it glow. */
#sack{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;pointer-events:none}
.lay-stack #sack{flex-direction:column;align-items:flex-start;gap:5px}
.compact #sack .tab{height:36px}
#sack .tab{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;height:40px;box-sizing:border-box;padding:0 9px 0 11px;border-radius:14px;background:repeating-linear-gradient(45deg,rgba(255,236,190,.03) 0 2px,rgba(0,0,0,0) 2px 5px),#4a3a27;box-shadow:0 0 0 1px rgba(20,14,8,.55),0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,230,180,.14);outline:1.5px dashed rgba(239,214,160,.42);outline-offset:-4px}
.lay-over #sack .tab{height:34px;padding:0 7px 0 9px;outline-offset:-3.5px}
/* the sack icon: a canvas drawn by game.js (paintSackIcon) with the yard's sack drawing, swelling a step per item. Its
   box is 28 x 26 from the start, so the slots never shift as it grows; the canvas overhangs the box (40 x 42) for the pops */
.sackicon{flex:none;display:block;width:40px;height:42px;margin:-8px -3px -8px -6px}
/* a full sack at a can (game.js fullSackBump): the tab hops 3 px and every (full) slot flashes a cream outline */
#sack.thunk .tab{animation:sackhop .32s ease-out}
#sack.glow.thunk .tab{animation:sackhop .32s ease-out,sackglow 1.25s ease-in-out infinite}
@keyframes sackhop{0%,100%{transform:none}25%{transform:translateY(-3px)}}
#sack.thunk .slots canvas.full{animation:slotflash .25s ease-out}
@keyframes slotflash{0%,55%{box-shadow:0 0 0 2px rgba(239,230,207,.95)}100%{box-shadow:0 0 0 2px rgba(239,230,207,0)}}
.slots{display:flex;gap:4px;min-width:0}
.slots canvas{display:block;flex:0 1 24px;min-width:14px;width:24px;height:auto;aspect-ratio:1;border-radius:6px;background:rgba(0,0,0,.28)}
.slots canvas.full{background:rgba(239,230,207,.16)}
.slots canvas.pop{animation:slotpop .35s ease-out}
@keyframes slotpop{0%{transform:scale(1.45);box-shadow:0 0 0 2px var(--porch)}100%{transform:scale(1);box-shadow:0 0 0 2px rgba(242,197,92,0)}}
.stake{font:800 13px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--porch);padding:6px 10px;border-radius:11px;background:rgba(11,15,32,.84);border:1px solid rgba(239,230,207,.16);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.stake:empty{display:none}
/* phones in portrait: no room for a chip under the tab, so the stake is outlined text on the street */
.lay-stack .stake{padding:0 0 0 4px;background:none;border:0;box-shadow:none;text-shadow:0 0 3px rgba(10,14,30,.95),0 1px 2px rgba(10,14,30,.95)}
.stake.danger{color:var(--alert);animation:stake .25s ease-in-out infinite alternate;transform-origin:left center}
/* landscape phones and short portrait ones (lay-over): game.js layout() keeps the sack clear of the Sneak button. With no
   room beside the tab, the stake sits above the tab's right end (clear of the storm drain on the left); a big sack squeezes
   its slots (.tight) */
#sack.stake-up .stake{position:absolute;right:0;bottom:calc(100% + 5px)}
#sack.stake-up .stake.danger{transform-origin:right center}
#sack.tight .slots{gap:2px}
#sack.tight .slots canvas{min-width:12px}
/* a big sack with no room for one row of 20 px slots (360x640, 375x812): two rows of 20 px (game.js sackRows) */
#sack.rows2 .tab{height:auto;padding-top:5px;padding-bottom:5px}
#sack.rows2 .slots{display:grid;grid-template-columns:repeat(var(--cols),20px);gap:3px}
#sack.rows2 .slots canvas{width:20px;min-width:0}
@keyframes stake{to{transform:scale(1.12)}}
#sack.glow .tab{animation:sackglow 1.25s ease-in-out infinite}
@keyframes sackglow{0%,100%{box-shadow:0 0 0 2.5px rgba(242,197,92,.45),0 4px 14px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 2.5px rgba(242,197,92,.9),0 0 20px rgba(242,197,92,.5)}}
@media (prefers-reduced-motion:reduce){#clock.low b,.stake.danger,.slots canvas.pop,#sack.thunk .tab,#sack.glow.thunk .tab{animation:none}#sack.glow .tab{animation:none;box-shadow:0 0 0 2.5px rgba(242,197,92,.85)}}

/* Juice pass (6 Oct): Mitts' portrait, stamps, confetti, count-ups. All motion is skipped with reduced motion. */
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cardhead>div:first-child{display:flex;flex-direction:column;gap:8px;min-width:0}
.photo{position:relative;flex:none}
.portrait{flex:none;display:block;width:76px;height:76px;border-radius:10px;transform:rotate(3deg);background:radial-gradient(circle at 50% 40%,#2c3a63,var(--night) 75%);box-shadow:0 0 0 4px #fff,0 6px 14px rgba(28,32,51,.35)}
.stamp{position:absolute;right:-14px;bottom:-14px;display:flex;flex-direction:column;align-items:center;padding:3px 8px 4px;border:3px solid #b8452e;border-radius:8px;color:#b8452e;background:rgba(239,230,207,.55);font:400 15px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;transform:rotate(-12deg);box-shadow:inset 0 0 0 2px rgba(239,230,207,.6);animation:stamp .32s cubic-bezier(.3,1.6,.5,1) .3s both;pointer-events:none}
.stamp span+span{font:800 9.5px/1.2 var(--body);letter-spacing:.12em}
.stamp.gold{color:#8a5a0a;border-color:#c9962e;background:rgba(255,240,189,.8);outline:2px solid #c9962e;outline-offset:2px}
@keyframes stamp{0%{opacity:0;transform:rotate(-24deg) scale(2.6)}70%{opacity:1}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.meter i{transition:width .9s cubic-bezier(.2,.8,.2,1)}
.coin.bump{animation:bump .5s ease-out}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.14);color:var(--porch)}100%{transform:scale(1)}}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.confetti i{position:absolute;top:-14px;left:var(--x);width:7px;height:11px;border-radius:2px;animation:confetti var(--t) cubic-bezier(.25,.5,.5,1) var(--d) both}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:0}}
@media (max-width:480px){.portrait{width:62px;height:62px}.stamp{font-size:13px;right:-10px}.stamp span+span{font-size:9px}}
@media (max-height:520px){.portrait{width:56px;height:56px}}
/* The night intro opens on Mitts' photo, bigger than the report cards' (it is the card's only picture), and at Start it
   flies off the card onto him in the yard (game.js photoHome). */
.intro .cardhead{align-items:flex-start}
.intro .portrait{width:92px;height:92px;margin:-4px -4px 0 0}
@media (max-width:480px){.intro .portrait{width:84px;height:84px}}
@media (max-height:520px){.intro .portrait{width:64px;height:64px;margin:-6px 0 0}}
.portrait.flying{position:absolute;z-index:2;margin:0;pointer-events:none}
/* the tutorial's hello: his die-cut sticker over the yard, then onto him (game.js sayHello). Never takes a touch. */
.hello{position:absolute;z-index:2;display:block;pointer-events:none;opacity:0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
@media (prefers-reduced-motion:reduce){.stamp,.coin.bump{animation:none}.meter i{transition:none}}

/* Porchlight pass 9: the title card (docs/art/visual-direction.md "Title card", copy in docs/marketing/title-card-copy.md).
   A compact note: tagline, the outlined logo, Mitts as a die-cut sticker, a two-line pitch, three chips, Continue,
   the Daily Heist slot, and Upgrades / How to play as a row of icon buttons (the route stamps and the footer went 21 Oct).
   Desktop: the note sits left over a side scrim so the yard shows; the sticker hangs off its corner.
   Phones: full width, the sticker in the head row. Landscape phones: two columns. */
#stage.titled #bar .brand{visibility:hidden}  /* the note's logo is the brand on the title */
.card.title{--g:14px;gap:var(--g);max-width:430px}
.t-main,.t-side{display:flex;flex-direction:column;gap:var(--g)}
.t-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.t-head>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.card.title .logo{position:relative;isolation:isolate;white-space:nowrap;font-size:46px;line-height:1;padding:.04em 0 .1em;color:#fff8ea}
.card.title .logo span{color:var(--porch)}
/* the ink outline and a chunky drop under it, behind the fill (generated text is hidden from screen readers) */
.card.title .logo::before{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:0;padding:inherit;z-index:-1;color:var(--ink);-webkit-text-stroke:.14em var(--ink);text-shadow:0 .07em 0 var(--ink)}
.sticker{flex:none;display:block;width:84px;height:84px;margin:-6px -6px 0 0;border-radius:50%;transform:rotate(6deg);box-shadow:0 6px 14px rgba(28,32,51,.4)}
/* the die-cut Mitts (his cut-out) only hangs off the note on tablets and desktops; its shadow follows his outline */
.sticker.die{display:none}
.sticker.cut{border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45))}
.pitch{margin:0;font-size:15px;line-height:1.45;font-weight:600}
.pitch span{display:block}
.card.title .btn.big{flex:none;min-width:0;font:400 21px/1.1 var(--display);letter-spacing:.01em;padding:13px 18px;box-shadow:0 3px 0 rgba(28,32,51,.25)}
/* Upgrades and How to play: one small row of icon buttons (fewer menus, 21 Oct), quieter than Continue and the daily */
.t-row{display:flex;justify-content:center;gap:6px}
.tbtn{appearance:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:0;border-radius:22px;background:none;color:var(--ink);font:800 14px var(--body);cursor:pointer}
.tbtn svg{flex:none;width:22px;height:22px}
.tbtn:hover,.tbtn:focus-visible{background:rgba(28,32,51,.07)}
.tbtn:focus-visible{outline:2px solid var(--porch-deep);outline-offset:1px}
/* the report's All upgrades: one quiet line under the shelf, its icon lined up with the shelf's names (44 px touch height, drawn 36) */
/* the report's shelf header: "UPGRADES · STASH n" and, on its right, All upgrades as a small link (a 44 px touch target
   drawn over the line; it is there with or without the shelf) */
.shelfhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.shelfhead h3{margin:0}
.allups{position:relative;flex:none;appearance:none;border:0;padding:0;background:none;cursor:pointer;font:800 13px var(--body);color:#4a4636;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(28,32,51,.35)}
.allups::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
.allups:hover{color:var(--ink);text-decoration-color:currentColor}
.allups:focus-visible{outline:2px solid var(--porch-deep);outline-offset:3px;border-radius:4px}
.t-status{margin:4px 0 -6px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the night report's one-line side jobs (game.js jobIcons) and its total */
.result .sjobs{display:flex;align-items:center;gap:8px}
.jicons{display:inline-flex;gap:5px}
.jicons .ji{position:relative;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(28,32,51,.35);opacity:.45}
.jicons .ji.done{opacity:1}
.jicons .ji svg{display:block;width:13px;height:13px}
.jicons .ck{position:absolute;right:-5px;bottom:-4px;width:12px;height:12px;border-radius:50%;display:grid;place-items:center;background:var(--porch);color:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}
.jicons .ck svg{width:9px;height:9px}
.result .tot{font-weight:800;padding-top:4px;border-top:1.5px dashed rgba(28,32,51,.2)}
/* the tutorial's end: the banked total, big, as the one number; its two ways on stacked full width */
.stats.one{display:flex}
.stats.one .stat{flex-direction:row;align-items:baseline;gap:10px;border:0;padding:0}
.stats.one .stat b{font:400 44px/1 var(--display);font-variant-numeric:tabular-nums}
.stats.one .stat span{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6b6450}
.actions.stack .btn{flex:1 1 100%}
.t-foot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.t-foot .fine{margin-left:auto}
.linkish.armed{color:#9c3418;font-weight:800}
/* Daily Heist: the title slot (a full-width secondary button and its one-line status), the result card's score and share text */
.t-daily{display:flex;flex-direction:column;gap:5px}
.btn.daily{width:100%;padding-block:10px}
.t-daily .fine{display:flex;align-items:center;gap:6px;justify-content:center;text-align:center}
.gdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--porch-deep);box-shadow:0 0 0 2px rgba(242,197,92,.35)}
.share{margin:0;padding:10px 12px;border:1.5px dashed rgba(28,32,51,.3);border-radius:10px;background:rgba(255,255,255,.35);color:var(--ink);font:600 14px/1.5 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
textarea.share{display:block;width:100%;box-sizing:border-box;resize:none;margin-top:4px}
/* The Daily Heist result (14 Oct, docs/art/visual-direction.md section 11): how it went, the score against today's target
   on a meter, the run trip by trip (a canvas: game.js drawTrips) with its key in words, then the rewards as two tiles.
   Fits 360x640 without scrolling; landscape phones get two columns. */
.card.dres{--g:12px;gap:var(--g);max-width:500px}
.dres .cardhead{align-items:flex-start}
.dres .cardhead>div:first-child{gap:6px}
.dres h2{font-size:clamp(26px,7vw,34px);line-height:1.02}
.dr-sub{margin:0;font-size:13.5px;line-height:1.35;font-weight:600;color:#4a4636}
.dr-score{display:flex;flex-direction:column;gap:8px}
.dr-line{display:flex;align-items:baseline;gap:8px;min-width:0}
.dr-num{font:400 54px/.86 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dr-unit{font:800 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6b6450}
.dr-delta{margin-left:auto;align-self:center;flex:none;font:800 13px/1 var(--body);padding:6px 11px;border-radius:999px;white-space:nowrap;border:1.5px solid rgba(28,32,51,.3);color:#4a4636}
.mood-beat .dr-delta{background:var(--ink);border-color:var(--ink);color:var(--porch)}
.dr-meter{position:relative;padding-bottom:17px}
.dr-meter .track{display:block;position:relative;height:14px;border-radius:7px;background:rgba(28,32,51,.12);box-shadow:inset 0 1px 2px rgba(28,32,51,.18);overflow:hidden}
.dr-meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,var(--porch-deep) 0 var(--cut,100%),var(--porch) var(--cut,100%));box-shadow:inset 0 3px 0 rgba(255,248,220,.35);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dr-meter .tick{position:absolute;top:-4px;width:4px;height:22px;margin-left:-2px;border-radius:2px;background:var(--ink)}
.dr-meter .tick b{position:absolute;top:24px;left:50%;transform:translateX(-50%);font:800 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.dr-meter .tick.end b{left:auto;right:-2px;transform:none}
.dr-trips{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1.5px dashed rgba(28,32,51,.2)}
.dr-th{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dr-facts{display:flex;align-items:center;gap:10px}
.dr-facts span{display:inline-flex;align-items:center;gap:1px}
.dr-facts em{font:800 10px var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#6b6450;margin-left:4px}
.dr-ico{display:block;flex:none}
.dr-strip{display:block;width:100%;height:104px}
.dr-none{text-align:center;padding:10px 0}
.dr-key{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 12px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.3;color:#4a4636}
.dr-key li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dr-rewards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dr-tile{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;border:1.5px solid rgba(28,32,51,.16);border-radius:12px;background:rgba(255,255,255,.3)}
.dr-tile>div{display:flex;flex-direction:column;min-width:0}
.dr-tile b{font:400 25px/1 var(--display);font-variant-numeric:tabular-nums}
.dr-tile span{margin-top:3px;font:800 9.5px/1.2 var(--body);letter-spacing:.11em;text-transform:uppercase;color:#6b6450}
.dr-tile small{font-size:11px;line-height:1.25;color:#6b6450}
.dr-next{text-align:center}
.card>.dr-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.dr-actions .btn.primary{grid-column:1/-1;min-width:0}
.mood-beat .dr-score{position:relative}
.mood-beat .dr-score::before{content:"";position:absolute;z-index:-1;left:-24px;right:-24px;top:-14px;bottom:-6px;background:radial-gradient(ellipse 60% 70% at 22% 40%,rgba(242,197,92,.32),rgba(242,197,92,0))}
.card.dres{isolation:isolate}
/* the share panel: the image itself, then Copy image / Download image / Copy text */
.card.dshare{max-width:470px;gap:12px}
.dr-preview{display:block;align-self:center;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px);min-height:0;aspect-ratio:4/5;border-radius:10px;box-shadow:0 8px 24px rgba(28,32,51,.35)}
.dr-status{min-height:1.3em;text-align:center}
.dr-status:empty{display:none}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
.dr-share-actions .btn{flex:1 1 auto}
@media (min-width:560px){.card>.dr-actions{grid-template-columns:1.1fr auto auto}.dr-actions .btn.primary{grid-column:auto}}
/* short phones (360x640): a smaller score and strip so the whole card fits */
@media (min-height:701px){.dr-strip{height:116px}}
@media (max-height:700px){.card.dres{--g:9px;--pb:14px}.dres h2{font-size:clamp(24px,6.6vw,30px)}.dr-num{font-size:46px}.dr-strip{height:86px}.dr-tile{padding:6px 9px}.dr-tile b{font-size:22px}.dr-key{font-size:11.5px}.dres .actions .btn{padding-block:9px}}
@media (max-height:700px) and (max-width:480px){.dres .portrait{width:56px;height:56px}.dres .stamp{font-size:12px;bottom:-12px}}
/* landscape phones: how it went, the score and the rewards on the left; the trips on the right; the buttons across */
@media (max-height:520px) and (orientation:landscape){
  .card.dres{max-width:720px;display:grid;grid-template-columns:1fr 1.08fr;column-gap:22px;row-gap:8px;align-content:start}
  .dres>.cardhead{grid-column:1;grid-row:1}
  .dres>.dr-score{grid-column:1;grid-row:2}
  .dres>.dr-next{grid-column:1;grid-row:3;align-self:end;text-align:left}
  .dres>.dr-trips{grid-column:2;grid-row:1/span 2;padding-top:0;border-top:0;gap:4px}
  .dres>.dr-rewards{grid-column:2;grid-row:3}
  .dres>.actions{grid-column:1/-1;grid-row:4}
  .card>.dr-actions{grid-template-columns:1.1fr auto auto}.dr-actions .btn.primary{grid-column:auto}
  .dres h2{font-size:23px}.dr-num{font-size:38px}.dr-strip{height:80px}.dres .portrait{width:50px;height:50px}
  .dres .stamp{font-size:10.5px;padding:2px 5px 3px;border-width:2px;right:-8px;bottom:-10px}.dres .stamp span+span{font-size:7.5px}
  .dr-key{font-size:11px;gap:1px 10px}.dr-tile{padding:5px 8px;gap:7px}.dr-tile b{font-size:20px}.dr-tile small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dr-tile .dr-ico{width:22px!important;height:22px!important}
  .dr-preview{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .card.dshare{max-width:640px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
  .dshare>.dr-preview{grid-row:1/span 3;grid-column:1}
  .dshare>.actions{grid-column:2;position:static;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;align-self:start}
}
/* How to play: the controls for this device and the six rules */
.card.howto{max-width:460px}
.ctl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px;line-height:1.4;align-items:baseline}
.ctl b{font-weight:800}
.ctl small{display:block;font-size:12.5px;color:#5a5546}
.kk{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.rules{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.rules li{padding-left:2px}
.rules li::marker{font-weight:800;color:var(--porch-deep)}
@media (min-width:360px){.card.title .logo{font-size:min(50px,13vw)}}
/* "This is Mitts" (21 Oct, family feedback): on phones his face is the biggest thing on the note, as wide as a third of
   the screen beside the logo (it was 76-84 px). Short phones drop the three chips to make room: the stash is in the top
   bar already, and the note keeps its height, so Continue stays where the thumb expects it. */
@media (max-width:699px){
  .t-head{align-items:center}
  .sticker{width:clamp(104px,36vw,150px);height:clamp(104px,36vw,150px);margin:-10px -10px -4px 0;transform:rotate(5deg);box-shadow:0 8px 18px rgba(28,32,51,.42)}
}
/* fewer menus (21 Oct): on phones the note is the logo, Mitts, where you are and the buttons. No chips (the stash is in
   the top bar); the pitch stays unless TITLE.pitchOnPhones is false */
@media (max-width:699px),(max-height:520px) and (orientation:landscape){.card.title .stats{display:none}.card.title.nopitch .pitch{display:none}}
/* tall phones have night above the note: the sticker hangs off its top edge there, like the desktop's off the corner */
@media (max-width:699px) and (min-height:760px) and (orientation:portrait){.card.title{overflow:visible;max-height:none}.sticker{margin-top:-46px}}
/* tablets and desktops: a roomier note, the logo at full size, the sticker hanging off the note's top-right corner */
@media (min-width:700px) and (min-height:600px){
  .card.title{--px:34px;--g:16px;padding-top:30px;overflow:visible;max-height:none;margin-right:122px}
  .card.title .logo{font-size:78px}
  .sticker{position:absolute;right:-122px;top:-12px;width:148px;height:148px;margin:0;box-shadow:0 12px 26px rgba(0,0,0,.5)}
  .sticker.die{display:block;width:164px;height:164px;right:-134px;top:-24px}
  .sticker.die+.sticker.disc{display:none}
  .pitch{font-size:16px}
}
/* wide screens: the note goes left, over a scrim that fades out to the right so the night carries on beside it */
@media (min-width:1000px) and (min-height:600px){
  #overlay.side{justify-content:flex-start;padding-left:clamp(16px,7.5vw,160px);background:linear-gradient(90deg,rgba(7,10,22,.82),rgba(7,10,22,.55) 38%,rgba(7,10,22,.14) 72%,rgba(7,10,22,.05))}
  .card.title{margin-right:0}
}
/* landscape phones: two columns (the brand and Mitts left, where you are and the buttons right) */
@media (max-height:520px) and (orientation:landscape){
  .card.title{--g:9px;max-width:660px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:start}
  .card.title .logo{font-size:40px}
  .sticker{width:96px;height:96px;margin:-8px -4px -8px 0}
  .card.title .t-main{align-self:center}  /* the logo and Mitts sit level with the buttons beside them */
  .pitch{font-size:14px;line-height:1.4}
  .t-status{order:-1;margin:0}
  .card.title .btn.big{font-size:19px;padding-block:11px}
}
/* How to play on landscape phones: the controls left, the rules right, Back across the bottom */
@media (max-height:520px) and (orientation:landscape){
  .card.howto{max-width:680px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:24px;row-gap:8px;align-content:start}
  .card.howto>h2,.card.howto>h3:first-of-type,.card.howto>.ctl,.card.howto>.t-foot{grid-column:1}
  .card.howto>h3:nth-of-type(2){grid-column:2;grid-row:1;align-self:end}
  .card.howto>.rules{grid-column:2;grid-row:2/span 3;gap:4px;font-size:13.5px;line-height:1.35}
  .card.howto>.t-foot{align-self:end}
  .card.howto>.actions{grid-column:1/-1}
  .card.howto .ctl{gap:6px 14px}
}
/* Privacy (launch, 22 Oct): the card and its one switch */
.card.privacy{max-width:460px}
.optin{display:flex;align-items:center;gap:10px;font:700 15px var(--body);cursor:pointer}
.optin input{width:22px;height:22px;margin:0;accent-color:var(--porch-deep);flex:none}