/* Gummy Arcade (the game; its code lives in gummyjar/), in the site's look: pink jelly top bar, the pink gummy bear, Lilita One for headings and numbers,
   Nunito for text, soft candy-pink cards and glossy jelly buttons. Phones (upright) get one column; wide screens put
   the jar on the left and the panel on the right. The jar itself is drawn on a canvas behind the page, inside the
   free "stage" box. */
:root{
  --pink:#E8336B;--pink-2:#FF5C8D;--pink-d:#B81E52;--pink-soft:#FFE3ED;--pink-softer:#FFF1F6;
  --ground:#FFF5F9;--surface:#FFFFFF;--ink:#171A2C;--ink-2:#3F4460;--muted:#6E7491;--line:#F6D5E2;--dot:#F2C6D7;--chip:#FFE3ED;--chip-ink:#B81E52;
  --sheet-head:#FFE8F0;--shade:rgba(60,10,35,.38);--danger:#C2364F;
  --fd:'Lilita One','Arial Rounded MT Bold',system-ui,sans-serif;
  --fb:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light}
:root[data-theme="dark"]{
  --pink:#FF5C8D;--pink-2:#FF7AA2;--pink-d:#C8336A;--pink-soft:#3A2135;--pink-softer:#241A2A;
  --ground:#11131D;--surface:#1B1E2C;--ink:#EEF0F8;--ink-2:#C9CCDD;--muted:#9BA1BC;--line:#2B2F43;--dot:#3A3F58;--chip:#2C2236;--chip-ink:#FF8FB1;
  --sheet-head:#251D2E;--shade:rgba(0,0,0,.6);--danger:#FF8A98;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:700 16px/1.4 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
svg{display:block;fill:currentColor}
/* the game fills the first screen; About and the footer are below it */
#game{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#game.booting .layout{opacity:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:0;z-index:0}
button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ---------- top bar ---------- */
.top{position:relative;z-index:6;color:#fff;padding-top:env(safe-area-inset-top);
  background:radial-gradient(ellipse 70% 120% at 20% -40%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FF6E9A,#E8336B);
  box-shadow:inset 0 -3px 0 rgba(110,10,45,.16),0 3px 10px rgba(232,51,107,.25)}
.top-in{display:flex;align-items:center;gap:6px;height:60px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.logo{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(232,51,107,.15),0 2px 6px rgba(110,10,45,.25)}
.logo svg{width:30px;height:30px}
.brand b{font:400 23px/1 var(--fd);letter-spacing:.3px;text-shadow:0 2px 0 rgba(110,10,45,.25);white-space:nowrap}
.brand b span{color:#FFE3ED}
.grow{flex:1}
.ic{width:42px;height:42px;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;flex:none;color:#fff}
.ic svg{width:27px;height:27px;filter:drop-shadow(0 1.5px 0 rgba(110,10,45,.25))}
.ic:hover{background:rgba(255,255,255,.18)}
.ic:active{transform:scale(.9)}
#themeBtn .sun,[data-theme="dark"] #themeBtn .moon{display:none}
[data-theme="dark"] #themeBtn .sun{display:block}
.mode-wrap{position:relative;margin-left:4px}
.mode{display:flex;align-items:center;gap:4px;height:40px;padding:0 10px 0 15px;border:0;border-radius:999px;background:rgba(255,255,255,.24);color:#fff;
  font:900 16px var(--fb);cursor:pointer;white-space:nowrap;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.mode:hover{background:rgba(255,255,255,.32)}
.mode svg{width:19px;height:19px}
.mode[aria-expanded="true"] svg{transform:rotate(180deg)}
.mode-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:30;min-width:255px;padding:6px;border-radius:18px;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 2px var(--line),0 14px 34px rgba(110,10,45,.22)}
.mode-menu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:10px 14px;border:0;border-radius:13px;background:none;cursor:pointer;text-align:left}
.mode-menu button:hover,.mode-menu button.on{background:var(--pink-softer)}
.mode-menu button.on b{color:var(--pink)}
.mode-menu b{font:400 19px var(--fd);letter-spacing:.2px}
.mode-menu small{font:700 13px var(--fb);color:var(--muted)}

/* ---------- layout ---------- */
.layout{position:relative;z-index:2;flex:1;min-height:0;width:100%;max-width:560px;margin:0 auto;display:grid;
  grid-template-columns:100%;grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"status" "found" "stage" "controls" "share";pointer-events:none}
.layout>*{pointer-events:auto}
.layout>.stage{pointer-events:none;grid-area:stage;min-height:0}

/* rank row: the score rides along a track of little gummy bear heads */
.status{grid-area:status;display:flex;align-items:center;gap:14px;padding:14px 16px 10px}
.rank{display:flex;flex-direction:column;min-width:104px}
.rank b{font:400 22px/1.05 var(--fd);letter-spacing:.2px;color:var(--ink)}
.rank span{font:700 13.5px/1.35 var(--fb);color:var(--muted)}
.rank span b{font:900 13.5px var(--fb);color:var(--pink)}
.track{position:relative;flex:1;height:48px;margin:0 26px 0 22px}
.track .line{position:absolute;left:0;right:0;top:55%;height:4px;margin-top:-2px;border-radius:2px;background:var(--line)}
.track .line.done{right:auto;background:var(--pink)}
.track .dot,.track .bub{position:absolute;top:55%}
.track .dot{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--dot)}
.track .dot::before,.track .dot::after,.track .bub::before,.track .bub::after{content:'';position:absolute;border-radius:50%;background:inherit}
.track .dot::before,.track .dot::after{top:-3px;width:6px;height:6px}
.track .dot::before{left:-1px}.track .dot::after{right:-1px}
.track .dot.done{background:var(--pink)}
.track .bub{min-width:44px;height:40px;padding:2px 9px 0;border-radius:20px;transform:translate(-50%,-50%);display:grid;place-items:center;
  font:400 18px/1 var(--fd);letter-spacing:.3px;font-variant-numeric:tabular-nums;background:var(--chip);color:var(--chip-ink)}
.track .bub::before,.track .bub::after{top:-6px;width:17px;height:17px;z-index:-1}
.track .bub::before{left:0}.track .bub::after{right:0}
.track .bub.cur{z-index:1;color:#fff;text-shadow:0 1.5px 0 rgba(110,10,45,.3);
  background:linear-gradient(180deg,var(--pink-2),var(--pink));box-shadow:inset 0 -3px 0 rgba(110,10,45,.18),0 3px 8px rgba(232,51,107,.3)}
.track .bub.cur::before,.track .bub.cur::after{background:var(--pink-2)}
.track .bub.cur.bump{animation:bump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.2,.88)}100%{transform:translate(-50%,-50%) scale(1)}}

/* your gummies + next */
.found-row{grid-area:found;display:flex;gap:10px;padding:0 16px;align-items:center}
.found{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:54px;padding:0 14px 0 14px;border:0;border-radius:20px;background:var(--surface);cursor:pointer;text-align:left;
  box-shadow:0 0 0 2px var(--line),0 3px 0 var(--line)}
.found-icons{flex:1;min-width:0;display:flex;gap:4px;overflow:hidden}
.found-icons img{width:30px;height:30px;flex:none}
.found-icons:empty{display:none}
.found-empty{flex:1;font:700 15px var(--fb);color:var(--muted)}
.found .chev{width:24px;height:24px;color:var(--pink);flex:none;transition:transform .2s}
.found[aria-expanded="true"] .chev{transform:rotate(180deg)}
.found.flash{animation:flash .9s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--pink),0 0 0 2px rgba(255,92,141,.8)}100%{box-shadow:0 0 0 2px var(--line),0 0 0 14px rgba(255,92,141,0)}}
.next{width:56px;height:56px;flex:none;border-radius:50%;background:var(--surface);display:grid;place-items:center;position:relative;box-shadow:0 0 0 2px var(--line),0 3px 0 var(--line)}
.next::after{content:'next';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:99px;background:var(--pink);
  font:900 9.5px/13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.next img{width:40px;height:40px;margin-top:-3px}
.next.pop img{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* the list under the bar: drops over the jar on phones, always shown on wide screens */
.found-list{grid-area:stage;align-self:start;position:relative;z-index:5;margin:10px 16px 0;padding:16px 18px 18px;border-radius:20px;background:var(--surface);
  box-shadow:0 0 0 2px var(--line),0 14px 30px rgba(110,10,45,.16);max-height:100%;overflow:auto;display:none}
.found-list.open{display:block}
.found-list h3{margin:0 0 8px;font:400 18px var(--fd);letter-spacing:.2px;color:var(--ink)}
.found-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.found-list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:2px dotted var(--line);font:800 14.5px var(--fb)}
.found-list li img{width:32px;height:32px;flex:none}
.found-list li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.found-list li em{font:400 15px var(--fd);font-style:normal;color:var(--pink);font-variant-numeric:tabular-nums}
.found-list li.none{opacity:.38}

/* buttons */
.controls{grid-area:controls;display:flex;justify-content:center;align-items:center;gap:14px;padding:12px 16px 8px}
.pill{height:58px;min-width:104px;padding:0 24px;border:0;border-radius:999px;font:900 18px var(--fb);cursor:pointer;white-space:nowrap;
  background:var(--chip);color:var(--chip-ink);box-shadow:inset 0 -3px 0 rgba(184,30,82,.12)}
.pill:hover{filter:brightness(.98)}
.pill:active{transform:scale(.96)}
.pill.jelly{min-width:118px;font:400 23px/1 var(--fd);letter-spacing:.4px;padding-top:2px}
/* jelly buttons (Drop, Resume, Play again…) */
.pill.jelly,.jelly{background:radial-gradient(ellipse 60% 42% at 34% 20%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--pink-2),var(--pink));
  color:#fff;border:0;box-shadow:inset 0 -4px 0 rgba(110,10,45,.18),inset 0 2px 3px rgba(255,255,255,.45),0 4px 0 var(--pink-d),0 9px 18px rgba(232,51,107,.28);
  text-shadow:0 2px 0 rgba(110,10,45,.25)}
.pill.jelly:hover,.jelly:hover{filter:brightness(1.05) saturate(1.05)}
.pill.jelly:active,.jelly:active{transform:translateY(2px) scale(.98);box-shadow:inset 0 -3px 0 rgba(110,10,45,.18),inset 0 2px 3px rgba(255,255,255,.45),0 2px 0 var(--pink-d),0 5px 10px rgba(232,51,107,.25)}

.circle{width:58px;height:58px;flex:none;border:0;border-radius:50%;background:var(--surface);color:var(--pink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 2px var(--line),0 3px 0 var(--line)}
.circle svg{width:26px;height:26px}
.circle:active{transform:scale(.94)}
.circle .off,.muted .circle .on{display:none}
.muted .circle .off{display:block}
.share-row{grid-area:share;display:flex;justify-content:center;padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
.share{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border:2px solid var(--pink);border-radius:999px;background:var(--surface);color:var(--pink);
  font:900 17px var(--fb);cursor:pointer}
.share svg{width:20px;height:20px}
.share:hover{background:var(--pink-softer)}
.share:active{transform:scale(.97)}

/* ---------- panels ---------- */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--shade)}
.sheet{width:100%;max-width:460px;max-height:100%;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 3px var(--line),0 24px 50px rgba(60,10,35,.3);animation:sheet-in .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sheet-in{0%{opacity:0;transform:translateY(18px) scale(.94)}100%{opacity:1;transform:none}}
.sheet>header{position:relative;display:flex;align-items:center;justify-content:center;min-height:62px;padding:0 56px;background:var(--sheet-head)}
.sheet h2{margin:0;font:400 25px var(--fd);letter-spacing:.3px;text-align:center;color:var(--pink-d)}
[data-theme="dark"] .sheet h2{color:var(--pink-2)}
.x{position:absolute;right:12px;top:50%;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--pink)}
.x svg{width:22px;height:22px}
.x:hover{background:var(--chip)}
.sheet-body{padding:18px 22px 24px;overflow:auto;font:700 15.5px/1.5 var(--fb);color:var(--ink-2)}
.sheet-body p{margin:0 0 12px}
.sheet-body b{color:var(--ink);font-weight:900}
.sheet-body ul{margin:0 0 16px;padding-left:22px}
.sheet-body li{margin:0 0 6px}
.sheet-body li::marker{color:var(--pink);font-size:1.15em}
.sheet-body .how{display:block;width:230px;height:72px;margin:4px auto 14px}
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:8px 4px;margin:0 0 18px;text-align:center}
.chain div{display:flex;flex-direction:column;align-items:center;font:400 14px var(--fd);color:var(--pink)}
.chain img{width:42px;height:42px}
.ranks li.cur{color:var(--pink)}
.ranks li.cur b{color:var(--pink)}
.ranks li.cur::after{content:' ← you';font-weight:900;font-size:13px}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.btns .pill{height:52px}
/* stats */
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.box{display:flex;flex-direction:column;align-items:center;padding:14px 8px 12px;border-radius:18px;background:var(--pink-softer);box-shadow:inset 0 0 0 2px var(--line)}
.box b{font:400 42px/1.05 var(--fd);color:var(--pink);font-variant-numeric:tabular-nums}
.box span{font:900 12.5px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dist h3{margin:0 0 12px;text-align:center;font:400 20px var(--fd);color:var(--ink)}
.dist .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;margin-bottom:6px}
.dist .row b{font:900 14px var(--fb);text-align:right;min-width:104px}
.dist .bar{height:10px;border-radius:5px;background:var(--pink-softer);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.dist .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(180deg,var(--pink-2),var(--pink))}
.dist .row em{font:400 16px var(--fd);font-style:normal;min-width:16px;text-align:right;color:var(--ink)}
.dist .row small{grid-column:2;font:700 11.5px var(--fb);color:var(--muted);margin-top:-2px}
.center{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.link{border:0;background:none;color:var(--danger);font:800 15px var(--fb);cursor:pointer;padding:6px}
/* past daily jars */
.sheet-body .days{list-style:none;margin:0;padding:0}
.sheet-body .days li{margin:0}
.days button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 6px;border:0;border-bottom:2px dotted var(--line);background:none;cursor:pointer;text-align:left;border-radius:0}
.days button:hover{background:var(--pink-softer)}
.days .cal{width:42px;height:44px;flex:none;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:var(--pink-softer);
  box-shadow:inset 0 0 0 2px var(--line);font:400 18px/1 var(--fd);color:var(--ink)}
.days .cal i{display:block;width:100%;height:13px;margin-bottom:5px;background:var(--pink);font:900 8.5px/13px var(--fb);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-align:center}
.days .what{flex:1;display:flex;flex-direction:column}
.days .what b{font:900 15.5px var(--fb)}
.days .what small{font:700 12.5px var(--fb);color:var(--muted)}
.days .go{padding:6px 14px;border-radius:999px;background:var(--chip);color:var(--chip-ink);font:900 13px var(--fb)}
.days .today .go{background:var(--pink);color:#fff}
/* game over */
.over{display:flex;flex-direction:column;align-items:center;text-align:center}
.over .when{font:800 13.5px var(--fb);color:var(--muted);margin-bottom:2px}
.over .big{font:400 60px/1.05 var(--fd);color:var(--pink);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 var(--pink-soft)}
.over .rk{margin:6px 0 12px;padding:5px 16px 4px;border-radius:99px;background:linear-gradient(180deg,var(--pink-2),var(--pink));color:#fff;font:400 18px var(--fd);letter-spacing:.3px}
.over .best{margin:0 0 14px;font:700 15.5px var(--fb);color:var(--muted)}
.over .new{margin-left:6px;padding:2px 8px;border-radius:6px;background:var(--ink);color:var(--surface);font:900 11.5px var(--fb);vertical-align:2px}
.over .biggest{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:10px 18px 10px 12px;border-radius:18px;background:var(--pink-softer);box-shadow:inset 0 0 0 2px var(--line)}
.over .biggest img{width:58px;height:58px}
.over .biggest span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.over .biggest small{font:800 12.5px var(--fb);color:var(--muted)}
.over .biggest b{font:400 20px var(--fd);letter-spacing:.2px}

.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 76px);z-index:60;transform:translate(-50%,-10px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);
  padding:11px 18px;border-radius:999px;background:var(--pink);color:#fff;font:900 15px/1.35 var(--fb);text-align:center;box-shadow:0 6px 18px rgba(232,51,107,.35);transition:opacity .2s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.boot-fail{position:absolute;inset:auto 16px 40%;z-index:50;display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:20px;background:var(--surface);color:var(--ink);font:700 15px/1.45 var(--fb);box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center}
.boot-fail b{font:400 21px var(--fd)}
.noscript{position:absolute;inset:40% 16px auto;text-align:center;font:800 18px var(--fb)}

/* ---------- below the game: about, footer ---------- */
.sec-title{margin:0;font:400 clamp(28px,6vw,40px)/1.1 var(--fd);letter-spacing:.3px;text-align:center;color:var(--ink)}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 26px;color:var(--pink)}
.divider i{width:38px;height:4px;border-radius:2px;background:var(--pink)}
.divider svg{width:24px;height:24px}
.about{padding:56px 20px 50px;background:var(--surface);border-top:2px solid var(--line)}
.about-in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:40px}
.app-icon{width:220px;height:220px;flex:none;border-radius:50px;box-shadow:0 14px 30px rgba(232,51,107,.28)}
.about-text p{margin:0 0 14px;font:600 18px/1.75 var(--fb);color:var(--ink-2)}
.about-text p:last-child{margin:0}
.foot{padding:44px 20px calc(30px + env(safe-area-inset-bottom));background:#171A2C;color:#C9CCDD;text-align:center}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:12px}
.foot-brand b{font:400 32px/1 var(--fd);letter-spacing:.3px;color:#fff}
.foot-brand b span{color:#FF5C8D}
.foot-tag{margin:14px 0 30px;font:700 17px var(--fb);color:#9BA1BC}
.foot-cols{display:flex;justify-content:center;gap:clamp(40px,16vw,200px)}
.foot-cols nav{display:flex;flex-direction:column;align-items:center;gap:6px}
.foot-cols h3{margin:0 0 10px;padding-bottom:9px;font:900 14px var(--fb);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:linear-gradient(#FF5C8D,#FF5C8D) bottom center/32px 4px no-repeat}
.foot-cols button,.foot-cols a{border:0;background:none;padding:4px 6px;font:700 17px var(--fb);color:#C9CCDD;text-decoration:none;cursor:pointer}
.foot-cols button:hover,.foot-cols a:hover{color:#FF8FB1}
.foot hr{max-width:1000px;margin:30px auto 20px;border:0;border-top:1px solid #2B2F43}
.foot-copy{margin:0;font:700 14px var(--fb);color:#6E7491}
@media (max-width:700px){
  .about{padding:40px 18px 40px}
  .about-in{flex-direction:column;gap:24px;text-align:center}
  .app-icon{width:150px;height:150px;border-radius:36px}
  .about-text p{font-size:16px;line-height:1.65}
  .foot-cols{gap:28px}
  .foot-cols button,.foot-cols a{font-size:16px}
}

@media (max-width:560px){ .brand b{display:none} }
@media (max-width:430px){
  .status{gap:10px}
  .rank{min-width:92px}.rank b{font-size:20px}
  .rank span,.rank span b{font-size:12.5px}
  .track{margin:0 22px 0 18px}
  .track .bub{min-width:40px;height:36px;padding:2px 8px 0;font-size:16px}
  .track .bub::before,.track .bub::after{width:15px;height:15px;top:-5px}
}
/* small phones: tighter rows */
@media (max-width:380px){
  .top-in{gap:2px;padding:0 8px}
  .ic{width:38px;height:38px}.ic svg{width:25px;height:25px}
  .logo{width:38px;height:38px}.logo svg{width:27px;height:27px}
  .mode{font-size:15px;padding:0 6px 0 12px}
  .pill{min-width:92px;padding:0 18px;font-size:16px;height:54px}
  .pill.jelly{min-width:104px;font-size:21px}
  .circle{width:54px;height:54px}
  .controls{gap:10px}
}
/* short screens: no Share row under the buttons (it is still on the game-over panel) */
@media (max-height:740px) and (max-width:899px){
  .share-row{display:none}
  .controls{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .status{padding:8px 16px 6px}
  .found{height:48px}.next{width:48px;height:48px}.next img{width:34px;height:34px}
}

/* wide screens: jar on the left, panel on the right */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .layout{max-width:1180px;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto auto minmax(0,1fr) auto auto;
    grid-template-areas:"stage status" "stage found" "stage list" "stage controls" "stage share";padding:6px 24px 0;column-gap:28px}
  .status{padding:24px 0 14px}
  .found-row{padding:0}
  .found{cursor:default}
  .found .chev{display:none}
  .found-list{grid-area:list;display:block;margin:14px 0 0;box-shadow:0 0 0 2px var(--line),0 3px 0 var(--line)}
  .controls{padding:20px 0 10px}
  .share-row{padding:8px 0 22px}
}
@media (prefers-reduced-motion:reduce){ .sheet,.track .bub.cur.bump,.next.pop img,.found.flash{animation:none} }