:root {
  --night: #0b1324;
  --ink: #f3ecda;
  --soft: #aeb6c8;
  --line: rgba(243, 236, 218, .16);
  --glass: rgba(10, 16, 30, .78);
  --orange: #f08a2c;
  --amber: #ffc46b;
  --green: #2f6b4a;
  --f-display: "Luckiest Guy", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", "Trebuchet MS", sans-serif;
  --f-mono: "Nunito", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); font-family: var(--f-body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--amber); }
[hidden] { display: none !important; }

/* the scene: a 2:3 picture, full height on wide screens (blurred copy behind), covering the screen on phones */
#bd { position: fixed; inset: -60px; background: var(--night) center / cover no-repeat; filter: blur(34px) brightness(.42) saturate(1.15); transition: background-image .6s; }
#view { position: fixed; inset: 0; overflow: hidden; }
#box { position: absolute; container-type: inline-size; }
#cam { position: absolute; inset: 0; transition: opacity .26s; }
#cam.fade { opacity: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; transform-origin: 50% 100%; }
#scene.bump { animation: bump .28s ease-out; }
@keyframes bump { 35% { transform: scale(1.006, .996); } }
/* climbing: the next picture sits right above, its lower edge melting into this one, and the whole camera goes up */
#cam .next { position: absolute; left: 0; width: 100%; height: 100%; bottom: 100%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }

@keyframes climbUp { to { transform: translateY(100%); } }
#cam.shake-soft { animation: shk .22s linear; --a: .25%; }
#cam.shake { animation: shk .32s linear; --a: .5%; }
#cam.shake-hard { animation: shk .5s linear; --a: 1%; }
#cam.climbing { animation: climbUp 1.7s cubic-bezier(.6,0,.3,1) forwards !important; }
@keyframes shk { 20% { transform: translate(calc(var(--a) * -1), calc(var(--a) * .6)); } 40% { transform: translate(var(--a), calc(var(--a) * -.5)); } 60% { transform: translate(calc(var(--a) * -.6), calc(var(--a) * .3)); } 80% { transform: translate(calc(var(--a) * .3), 0); } }

#pieces, #lids, #fx, #fly { position: absolute; inset: 0; pointer-events: none; }
#lids, #fx { z-index: 3; }
#inbound { position: absolute; inset: 0; pointer-events: none; z-index: 1; }     /* a buyer's trash: under the cat, so it drops into the can */
#fly { z-index: 4; }
.pc { position: absolute; transform: translate(-50%, -85%) rotate(var(--r, 0deg)); transform-origin: 50% 85%; filter: drop-shadow(0 .3cqw .25cqw rgba(0,0,0,.5)); user-select: none; }
.pc.fly { filter: drop-shadow(0 .8cqw .8cqw rgba(0,0,0,.35)); }
.pc.hit { animation: squash .42s cubic-bezier(.3,1.6,.5,1); }
@keyframes squash { 0% { transform: translate(-50%, -85%) rotate(var(--r)) scale(1.28, .7); } 45% { transform: translate(-50%, -92%) rotate(var(--r)) scale(.92, 1.1); } 100% { transform: translate(-50%, -85%) rotate(var(--r)) scale(1); } }
.flash { position: absolute; width: calc(9cqw * var(--kw, 1)); aspect-ratio: 1; transform: translate(-50%, -60%) scale(.2); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,250,235,.95), rgba(255,220,160,.45) 40%, transparent 70%); mix-blend-mode: screen; animation: flash .32s ease-out forwards; }
@keyframes flash { 30% { transform: translate(-50%, -60%) scale(1); opacity: 1; } to { transform: translate(-50%, -60%) scale(1.3); opacity: 0; } }
.ring { position: absolute; aspect-ratio: 3 / 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); border: calc(.35cqw * var(--kw, 1)) solid var(--dust); opacity: .8; animation: ring .55s ease-out forwards; }
@keyframes ring { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.dust, .bit { position: absolute; width: calc(2.6cqw * var(--kw, 1)); height: calc(2.6cqw * var(--kw, 1)); margin: calc(-1.3cqw * var(--kw, 1)) 0 0 calc(-1.3cqw * var(--kw, 1)); border-radius: 50%; background: var(--dust); opacity: .85; animation: puff .6s ease-out forwards; }
.bit { width: calc(1.3cqw * var(--kw, 1)); height: calc(.8cqw * var(--kw, 1)); border-radius: 1px; background: #2a2622; opacity: 1; animation-name: hop; }
@keyframes puff { to { transform: translate(var(--dx), var(--dy)) scale(calc(var(--s) * 2.2)); opacity: 0; } }
@keyframes hop { 50% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * 1.4)) rotate(160deg); } to { transform: translate(var(--dx), calc(var(--dy) * .2 + 1cqw)) rotate(320deg); opacity: 0; } }
.pop { position: absolute; transform: translate(-50%, -100%); font-family: var(--f-display); font-weight: 900; font-size: max(16px, calc(3.4cqw * var(--kw, 1))); color: #fff3df; text-shadow: 0 2px 8px rgba(0,0,0,.7); pointer-events: none; animation: popup 1.1s cubic-bezier(.2,.8,.3,1) forwards; white-space: nowrap; }
.pop.combo { color: var(--amber); font-size: max(20px, calc(4.6cqw * var(--kw, 1))); }
.pop.eth { font-family: var(--f-mono); font-weight: 700; font-size: max(11px, calc(1.8cqw * var(--kw, 1))); color: var(--amber); }
@keyframes popup { 0% { transform: translate(-50%, -60%) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -110%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -260%) scale(1); opacity: 0; } }
.lid { position: absolute; width: calc(3.2% * var(--k, 1)); aspect-ratio: 1 / .45; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 55% at 50% 45%, #c9cdd2 0 55%, #8a9199 56% 70%, #b4b9be 71%); border: 1px solid rgba(20,24,30,.55); box-shadow: 0 .25cqw .2cqw rgba(0,0,0,.45); }
.lid.cap { width: calc(1.9% * var(--k, 1)); background: radial-gradient(ellipse 60% 55% at 50% 45%, #c9443a 0 60%, #8e231c 61%); }
.lid.big { width: calc(5.4% * var(--k, 1)); background: radial-gradient(ellipse 62% 56% at 50% 45%, #8d949b 0 50%, #636a71 51% 64%, #8d949b 65%); }
.lid.manhole { width: calc(6.6% * var(--k, 1)); background: repeating-radial-gradient(ellipse at 50% 50%, #4b4f55 0 7%, #34373c 7% 11%); }
#shadow { position: absolute; aspect-ratio: 3.2 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.28) 55%, transparent); pointer-events: none; }

#cat { position: absolute; width: 26%; z-index: 2; padding: 0; border: 0; background: none; transform: translate(-50%, -92%); transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; z-index: 2; }
#cat img { display: block; width: 100%; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45)); pointer-events: none; }
#cat:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 12px; }
#cat.drop { animation: catDrop .9s cubic-bezier(.3,1.4,.5,1) both; }
#cat.nod { animation: nod .7s ease-in-out; }
#cat.duck { animation: duck 1.6s ease-in-out; }
#cat.flinch { animation: flinch .38s ease-out; }
#cat.jump { animation: jump .9s cubic-bezier(.5,-0.3,.8,.4) forwards; }
@keyframes flinch { 30% { transform: translate(-50%, -90%) scale(1.03, .95); } 60% { transform: translate(-50%, -93%) scale(.99, 1.02); } }
@keyframes jump { 25% { transform: translate(-50%, -84%) scale(1.05, .9); } 100% { transform: translate(-50%, -300%) scale(.95, 1.08); opacity: 0; } }
@keyframes breathe { 50% { transform: translate(-50%, -92%) scale(1.006, .994); } }
@keyframes catDrop { from { transform: translate(-50%, -260%); opacity: 0; } 60% { opacity: 1; } }
@keyframes nod { 40% { transform: translate(-50%, -91%) rotate(-3deg); } }
@keyframes duck { 30%, 70% { transform: translate(-50%, -84%) scale(1, .96); } }
#cat.away { display: none; }
#bubble { position: absolute; z-index: 5; margin: 0; transform: translate(-50%, -100%) scale(.9); max-width: 46%; width: max-content; padding: .45em .9em; border-radius: 18px; background: #fff8e8; color: #1a1610;
  font-weight: 500; font-size: max(13px, calc(2.6cqw * var(--kw, 1))); line-height: 1.3; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 3; }
#bubble.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
#bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #f6efdd; }
#cuptag { position: absolute; margin: 0; transform: translate(-50%, 0); padding: .25em .6em; border-radius: 6px; background: rgba(8,12,22,.72); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: max(10px, calc(1.7cqw * var(--kw, 1))); color: var(--soft); white-space: nowrap; z-index: 3; pointer-events: none; }
#cuptag b { color: var(--amber); font-weight: 700; }
.rd { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.4)) brightness(.9); }

/* ── HUD: as little text as possible ── */
#top { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; display: flex; gap: 12px; align-items: center; z-index: 5; }
.brand { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
#here { font-size: 13px; font-weight: 500; color: #b7f0cb; text-shadow: 0 1px 6px #000; }
#here::before { content: '● '; color: #3fd37a; }
#card { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 5; width: 230px; display: grid; gap: 6px; text-align: left; padding: 10px 12px 11px; border-radius: 16px;
  border: 0; background: rgba(10,16,30,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#card:hover, #card[aria-expanded="true"] { background: rgba(14,22,40,.78); }
#card .n { display: flex; align-items: center; gap: 9px; font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.05; color: var(--ink); }
#card .n b { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #1b1006; font-size: 17px; font-weight: 700; }
#card .bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
#card .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #f06a24, var(--amber)); transition: width 1.2s cubic-bezier(.2,.7,.3,1); }
#card .nx { justify-self: end; margin-top: -2px; font-size: 13px; font-weight: 500; color: var(--soft); }
#visit-go { position: fixed; top: 100px; right: 14px; z-index: 5; border: 0; border-radius: 999px; padding: 9px 16px; background: var(--ink); color: #1a130b; font-family: var(--f-display); font-weight: 600; font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#dock { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; }
#toss { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 30px 14px 24px; border: 0; border-radius: 999px; background: #ffd34d; color: #2a1a05; font-family: var(--f-display); font-weight: 700; font-size: 26px;
  box-shadow: 0 6px 0 #c9921a, 0 12px 26px rgba(0,0,0,.4); transition: transform .1s, box-shadow .1s; }
#toss svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
#toss:not(:disabled):hover { background: #ffdb6b; }
#toss:not(:disabled):active { transform: translateY(4px); box-shadow: 0 2px 0 #c9921a, 0 6px 14px rgba(0,0,0,.4); }
#toss.kick { animation: kick .22s ease-out; }
@keyframes kick { 40% { transform: translateY(3px) scale(.96); } }
#toss:disabled { opacity: .55; cursor: default; }
#tossn { position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; display: grid; place-items: center; background: #2a1a05; color: #ffe08a; font-style: normal; font-size: 13px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
#side { position: fixed; left: 14px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 8px; }
#side > button { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: rgba(10,16,30,.6); backdrop-filter: blur(8px); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 15px; }
#side > button:hover { background: rgba(20,30,52,.8); }
#snd { padding: 0 !important; width: 40px; }
#snd svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#snd .x { display: none; } #snd.off .x { display: inline; } #snd.off .w { display: none; } #snd.off { opacity: .6; }
#toasts { position: fixed; left: 16px; top: 56px; z-index: 6; display: flex; flex-direction: column; gap: 6px; width: min(320px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; padding: 8px 13px; border-radius: 14px; font-weight: 500; background: var(--glass); border: 1px solid var(--line); font-size: 14px; line-height: 1.35; backdrop-filter: blur(8px); animation: tin .35s ease; transition: opacity .6s; }
.toast.big { border-color: rgba(240,138,44,.6); }
.toast a { font-family: var(--f-mono); font-size: 12px; margin-left: 6px; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
#banner { position: fixed; left: 50%; top: 50vh; transform: translateX(-50%); z-index: 6; text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s, transform .6s; width: max-content; max-width: calc(100vw - 32px); }
#banner.on { opacity: 1; transform: translateX(-50%) translateY(-8px); }
#banner .k { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--orange); color: #1b1006; font-weight: 700; font-size: 18px; }
#banner .n { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 7vw, 86px); line-height: 1; color: #fff6e6; text-shadow: 0 4px 30px rgba(0,0,0,.65), 0 0 40px rgba(240,138,44,.35); }
#banner .l { margin-top: 8px; font-weight: 600; font-size: 18px; color: #f0e3c6; text-shadow: 0 1px 10px #000; }

/* ── the stages ── */
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 7; display: flex; flex-direction: column; background: rgba(9,14,26,.96); border-left: 1px solid var(--line); backdrop-filter: blur(12px); animation: din .3s ease; }
@keyframes din { from { transform: translateX(30px); opacity: 0; } }
#drawer header { display: flex; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--line); }
#drawer h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; }
#drawer header p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--soft); }
#drawer-x { width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.08); border-radius: 18px; font-size: 16px; color: var(--ink); }
#drawer header { align-items: center; }
#grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.ch { flex: 0 0 100%; margin: 10px 2px 0; font-size: 15px; font-weight: 600; color: var(--amber); }
.tile { position: relative; display: block; flex: 0 0 calc((100% - 24px) / 3); width: calc((100% - 24px) / 3); padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0f1830; text-align: left; }
.tile::before { content: ''; display: block; padding-top: 150%; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px; background: linear-gradient(transparent, rgba(5,8,16,.92)); }
.tile .cap b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.1; }
.tile .cap span { font-size: 12px; font-weight: 500; color: var(--amber); }
.tile .num { position: absolute; left: 7px; top: 7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.55); font-size: 12px; font-weight: 600; color: #fff; }
.tile.now { outline: 2px solid var(--orange); outline-offset: 1px; }
.tile.now .num { background: var(--orange); color: #1b1006; }
.tile.viewing { box-shadow: 0 0 0 4px rgba(243,236,218,.25); }
.tile.locked { cursor: default; }
.tile.locked img { filter: blur(6px) brightness(.35) grayscale(.6); }
.tile.locked .lock { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6px; text-align: center; line-height: 1; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: rgba(243,236,218,.75); }
.tile.next { border-color: rgba(240,138,44,.6); }
.tile.next .lock { color: var(--amber); }
#drawer .fine { margin: 0; padding: 10px 18px 16px; font-size: 12px; color: var(--soft); text-align: center; }

@media (max-width: 720px) {
  .brand { font-size: 19px; }
  #card { width: 190px; right: 10px; padding: 9px 10px 10px; }
  #card .n { font-size: 17px; }
  #card .n b { min-width: 26px; height: 26px; font-size: 15px; }
  #visit-go { top: 92px; right: 10px; font-size: 15px; }
  #toss { font-size: 23px; padding: 13px 26px 13px 20px; }
  #side { left: 10px; bottom: auto; top: 48px; }
  #side > button { height: 36px; min-width: 36px; }
  #snd { width: 36px; }
  #toasts { top: auto; bottom: 108px; left: 10px; right: 10px; width: auto; }
  #drawer { top: auto; height: 78vh; width: 100vw; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
  #grid { gap: 9px; padding: 12px; }
  .tile { flex-basis: calc((100% - 18px) / 3); width: calc((100% - 18px) / 3); }
  .tile .cap b { font-size: 13px; }
}

/* ── the price ── */
#dock { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#price { display: flex; align-items: baseline; gap: 8px; padding: 6px 16px 7px; border-radius: 999px; background: rgba(10,16,30,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3); transform-origin: 50% 100%; transition: box-shadow .4s; }
#price .lab { font-size: 14px; font-weight: 500; color: var(--soft); }
.pv { display: inline-flex; font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1; color: #fff3df; transition: color .6s, text-shadow .6s; }
.pv .dg { display: inline-block; width: .64em; text-align: center; }
.pv .sym { display: inline-block; }
.pp { font-size: 14px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.pd { font-size: 14px; font-weight: 600; min-width: 0; }
#price.up .pv { animation: upflash 2.2s ease-out; } #price.up .pd { color: #5fe08f; }
#price.down .pv { animation: downflash 2.2s ease-out; } #price.down .pd { color: #ff7a6b; }
@keyframes upflash { 0%, 30% { color: #7dffad; text-shadow: 0 0 18px rgba(80,255,150,.6); } }
@keyframes downflash { 0%, 30% { color: #ff8f80; text-shadow: 0 0 18px rgba(255,90,70,.55); } }
#price.hit { animation: phit .45s ease-out; box-shadow: 0 0 0 3px rgba(255,211,77,.55), 0 6px 20px rgba(0,0,0,.3); }
#price.hit-big { animation: phitb .55s ease-out; box-shadow: 0 0 0 5px rgba(255,170,60,.7), 0 0 30px rgba(255,170,60,.5); }
@keyframes phit { 35% { scale: 1.04; } }
@keyframes phitb { 30% { scale: 1.08; } 65% { scale: .99; } }
.spark { position: fixed; left: 0; top: 0; z-index: 8; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 25%, #ffd34d 45%, rgba(255,160,40,0) 72%); box-shadow: 0 0 14px 4px rgba(255,200,80,.55); }
#card .bar.shine i { animation: shine .5s ease-out; }
@keyframes shine { 40% { filter: brightness(1.8) saturate(1.3); } }
@media (max-width: 720px) {
  .pv { font-size: 28px; } .pp { font-size: 12px; }
  #price { padding: 5px 14px 6px; }
  #dock { gap: 10px; }
}

/* ── two ways up: the price bar and the trash bar ── */
#card .row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 7px; }
#card .ic { width: 16px; height: 16px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--amber); fill: none; stroke: #9fe0b5; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
#card .row .bar { height: 7px; }
#card .row .nx { justify-self: auto; margin: 0; font-size: 12.5px; min-width: 52px; text-align: right; }
#card .trash .bar i { background: linear-gradient(90deg, #39b56a, #9fe0b5); }
#card .trash.near .bar i { animation: near 1s ease-in-out infinite; }
@keyframes near { 50% { filter: brightness(1.6); } }
.hand { position: fixed; bottom: -10px; z-index: 8; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--c); border: 3px solid #fff8e8; box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: none; animation: handup 1.05s ease-out forwards; }
@keyframes handup { 0% { transform: translateY(40px); } 25% { transform: translateY(-46px) scale(1.1); } 45% { transform: translateY(-38px); } 100% { transform: translateY(40px); } }

/* ── aiming, hitting the cat ── */
#box { cursor: crosshair; touch-action: manipulation; }
#cat { pointer-events: none; }
.reticle { position: absolute; width: calc(5cqw * var(--kw, 1)); aspect-ratio: 1; transform: translate(-50%, -50%) scale(1.4); border: 2px solid rgba(255,240,200,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.3); animation: ret .55s ease-out forwards; pointer-events: none; }
@keyframes ret { to { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
.bigpop { position: absolute; z-index: 6; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none; font-family: var(--f-display); font-weight: 700; color: #fff; -webkit-text-stroke: 2px #2a1206; paint-order: stroke fill;
  font-size: max(22px, calc(5.2cqw * var(--kw, 1))); text-shadow: 0 4px 0 #2a1206, 0 8px 18px rgba(0,0,0,.5); animation: bigpop 1.3s cubic-bezier(.2,1.6,.4,1) forwards; }
.bigpop.head { color: #ffd34d; font-size: max(30px, calc(8cqw * var(--kw, 1))); }
.bigpop.lid { color: #cfe3ff; }
@keyframes bigpop { 0% { transform: translate(-50%, -60%) scale(.3) rotate(-8deg); opacity: 0; } 18% { transform: translate(-50%, -110%) scale(1.15) rotate(-4deg); opacity: 1; } 70% { transform: translate(-50%, -140%) scale(1) rotate(-4deg); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(.95); opacity: 0; } }
.star { position: absolute; width: calc(2.4cqw * var(--kw, 1)); aspect-ratio: 1; margin: calc(-1.2cqw * var(--kw, 1)) 0 0 calc(-1.2cqw * var(--kw, 1)); pointer-events: none;
  background: #ffd34d; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: star .75s ease-out forwards; }
@keyframes star { to { transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(.4); opacity: 0; } }
#cat.ouch { animation: ouch .7s cubic-bezier(.3,1.6,.5,1); }
#cat.bonk { animation: bonk .45s ease-out; }
@keyframes ouch { 0% { transform: translate(-50%, -92%); } 15% { transform: translate(-50%, -84%) scale(1.12, .82) rotate(-6deg); } 45% { transform: translate(-50%, -95%) scale(.94, 1.06) rotate(5deg); } 70% { transform: translate(-50%, -92%) rotate(-2deg); } }
@keyframes bonk { 30% { transform: translate(-51.5%, -91%) rotate(-3deg); } 60% { transform: translate(-48.5%, -92%) rotate(2deg); } }
.screenflash { position: fixed; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(circle, rgba(255,255,240,.55), rgba(255,240,200,0) 70%); animation: sfl .4s ease-out forwards; }
@keyframes sfl { to { opacity: 0; } }

/* ── hits on the cat: hit-stop, a punch-in, an X marker ── */
#box.freeze #scene, #box.freeze #cat img, #box.freeze .pc { filter: brightness(1.35) contrast(1.15) saturate(1.2); }
#cam.punch-small { animation: pnch .26s cubic-bezier(.2,.9,.3,1); --z: 1.025; }
#cam.punch-mid { animation: pnch .34s cubic-bezier(.2,.9,.3,1); --z: 1.05; }
#cam.punch-big { animation: pnchb .62s cubic-bezier(.2,.9,.3,1); --z: 1.11; }
#cam[class*="punch"] { transform-origin: var(--ox, 50%) var(--oy, 50%); }
@keyframes pnch { 18% { transform: scale(var(--z)); } }
@keyframes pnchb { 12%, 30% { transform: scale(var(--z)) rotate(-1.2deg); } 55% { transform: scale(1.02) rotate(.4deg); } }
.hitmark { position: absolute; width: calc(4.2cqw * var(--kw, 1)); aspect-ratio: 1; transform: translate(-50%, -50%) scale(1.25); pointer-events: none; z-index: 7; animation: hm .4s ease-out forwards;
  background:
    linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) top left / 38% 38% no-repeat,
    linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%) top right / 38% 38% no-repeat,
    linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%) bottom left / 38% 38% no-repeat,
    linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) bottom right / 38% 38% no-repeat;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.hitmark.big { width: calc(7cqw * var(--kw, 1)); animation-duration: .62s; filter: drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(255,60,40,.7)); }
@keyframes hm { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; } }
.screenflash.red { background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,40,30,.25) 55%, rgba(120,0,0,.45) 100%); animation-duration: .55s; }

/* ── golden trash ── */
#dock .btns { display: flex; align-items: center; gap: 10px; }
#gold { position: relative; display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 14px 0 10px; border: 0; border-radius: 27px; background: rgba(10,16,30,.7); color: #ffe08a; font-family: var(--f-display); font-size: 20px; font-weight: 700;
  box-shadow: 0 6px 0 rgba(0,0,0,.35); backdrop-filter: blur(8px); }
#gold .coin, #goldp .coin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c0, #f5c430 45%, #b9800f 80%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 2px #7a4f06; }
#gold .more { position: absolute; top: -7px; right: -6px; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: #ffd34d; color: #2a1a05; font-size: 16px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
#gold:not(.has) { color: var(--soft); }
#gold:not(.has) .coin { filter: grayscale(.8) brightness(.8); }
#gold.armed { background: linear-gradient(#ffe27a, #e6a817); color: #2a1a05; box-shadow: 0 6px 0 #9a6a0a, 0 0 22px rgba(255,200,60,.7); animation: armed 1s ease-in-out infinite; }
@keyframes armed { 50% { box-shadow: 0 6px 0 #9a6a0a, 0 0 36px rgba(255,210,80,.95); } }
#gold.bump { animation: gbump .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes gbump { 30% { transform: scale(1.25) rotate(-6deg); } }
#toss.golden { background: linear-gradient(#ffe27a, #f0b21e); box-shadow: 0 6px 0 #9a6a0a, 0 0 26px rgba(255,200,60,.6), 0 12px 26px rgba(0,0,0,.4); }
.pc.gold { filter: drop-shadow(0 0 .8cqw rgba(255,210,80,.9)) drop-shadow(0 .3cqw .25cqw rgba(0,0,0,.5)); }
.glint { position: absolute; width: calc(1.6cqw * var(--kw, 1)); aspect-ratio: 1; margin: calc(-.8cqw * var(--kw, 1)) 0 0 calc(-.8cqw * var(--kw, 1)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, #ffd34d 45%, transparent 70%); animation: glint .85s ease-out forwards; }
@keyframes glint { 60% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
#goldp { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 8; width: min(340px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: 20px; background: rgba(12,18,34,.96); box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center; animation: tin .25s ease; }
#goldp h3 { margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; font-weight: 700; }
#goldp p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: #d7dcea; }
#goldp p b { color: #ffd34d; }
#goldp-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 15px; background: rgba(255,255,255,.08); color: var(--ink); }
#mycode { display: block; width: 100%; margin: 0 0 10px; padding: 10px; border: 2px dashed rgba(255,211,77,.6); border-radius: 12px; background: rgba(255,211,77,.08); color: #ffe08a; font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: .06em; }
#goldp .xbtn { display: block; padding: 12px; border-radius: 999px; background: #f3ecda; color: #14110c; font-weight: 700; font-size: 18px; text-decoration: none; }
#goldp .fine { margin: 10px 0 0; font-size: 12px; color: var(--soft); }
#card .week .ic { stroke: #ff9a4d; }
#card .week .bar i { background: linear-gradient(90deg, #ff5a2a, #ffb84d); }
#card .week.done .bar i { background: linear-gradient(90deg, #ffd34d, #fff2a8); }
#card .week .nx { min-width: 74px; }
@media (max-width: 720px) {
  #gold { height: 50px; font-size: 18px; padding: 0 12px 0 8px; }
  #gold .coin { width: 24px; height: 24px; }
  #goldp { bottom: 140px; }
}

/* ── ?test panel ── */
.testp { position: fixed; left: 14px; top: 90px; z-index: 9; display: flex; flex-direction: column; gap: 6px; width: 210px; padding: 10px; border-radius: 14px; background: rgba(40,10,60,.82); border: 2px dashed #e08aff; backdrop-filter: blur(8px); }
.testp b { font-size: 14px; color: #f2c6ff; }
.testp button { text-align: left; padding: 7px 10px; border: 0; border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; font-family: var(--f-body); font-size: 13.5px; font-weight: 500; }
.testp button:hover { background: rgba(255,255,255,.2); }
@media (max-width: 720px) { .testp { top: auto; bottom: 150px; width: 170px; padding: 8px; } .testp button { font-size: 12px; padding: 5px 8px; } }

/* ── the launcher: angle needle on a quarter dial, a power bar ── */
#launcher { position: fixed; z-index: 6; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s; --a: -50deg; --p: 0; }
#launcher.on { opacity: 1; }
#launcher .arc { position: absolute; left: -10px; top: -130px; width: 140px; height: 140px; border-radius: 0 140px 0 0; border: 3px solid rgba(255,255,255,.35); border-left: 0; border-bottom: 0;
  background: conic-gradient(from 0deg at 0 100%, rgba(255,211,77,.0) 0deg, rgba(255,211,77,.12) 8deg 78deg, rgba(255,211,77,0) 90deg); }
#launcher .needle { position: absolute; left: 0; top: 0; width: 150px; height: 0; transform-origin: 0 0; transform: rotate(var(--a)); }
#launcher .needle i { position: absolute; left: 0; top: -3px; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.85), #fff 40%, #ffd34d); box-shadow: 0 0 10px rgba(255,211,77,.8), 0 1px 3px rgba(0,0,0,.6); }
#launcher .needle i::after { content: ''; position: absolute; right: -6px; top: -6px; border: 9px solid transparent; border-left: 14px solid #ffd34d; border-right: 0; }
#launcher .hand { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: #ffd34d; border: 4px solid #fff8e8; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#launcher .pbar { position: absolute; left: -46px; top: -150px; width: 14px; height: 140px; border-radius: 7px; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.4); overflow: hidden; }
#launcher .pbar i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: linear-gradient(0deg, #3fd37a, #ffd34d 60%, #ff5a2a); }
#launcher.pw .pbar { box-shadow: 0 0 14px rgba(255,180,60,.8); }
#launcher .ang { position: absolute; left: 34px; top: 10px; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 1px 4px #000; }
#toss.aim { background: #9fe0ff; box-shadow: 0 6px 0 #4f9fc2, 0 12px 26px rgba(0,0,0,.4); }
#toss.pow { background: #ff9a4d; box-shadow: 0 6px 0 #b85a17, 0 12px 26px rgba(0,0,0,.4); }
.miss { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 7; font-weight: 700; font-size: 34px; color: #fff; -webkit-text-stroke: 2px #2a1206; paint-order: stroke fill; pointer-events: none; animation: popup .9s ease-out forwards; }
@media (max-width: 720px) { #launcher .arc { width: 110px; height: 110px; top: -100px; } #launcher .needle { width: 118px; } #launcher .pbar { height: 110px; top: -120px; } }

/* fonts to compare: ?font=a Luckiest Guy (default) · b Lilita One · c Bungee · d Rubik */
html[data-font="b"] { --f-display: "Lilita One", sans-serif; }
html[data-font="c"] { --f-display: "Bungee", sans-serif; }
html[data-font="d"] { --f-display: "Rubik", sans-serif; }
html[data-font="d"] #card .n, html[data-font="d"] #toss, html[data-font="d"] .pv { font-weight: 800; }
#card .n, #toss, #gold, .pv, .bigpop, #banner .n, #banner .k, .brand, #visit-go, #drawer h2, .tile .cap b, .ch, .lock, .miss, #mycode { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; }
html[data-font="d"] .brand, html[data-font="d"] .bigpop, html[data-font="d"] #banner .n { font-weight: 800; }

/* ── the price on top ── */
#price { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); translate: -50% 0; z-index: 5; transform-origin: 50% 0; }
@media (max-width: 720px) { #price { top: max(10px, env(safe-area-inset-top)); max-width: calc(100vw - 20px); } #side { top: auto !important; bottom: max(22px, env(safe-area-inset-bottom)) !important; flex-direction: row !important; } #dock { left: auto; right: 10px; transform: none; } }

/* ── the cat: one picture, the whole can moves from its base (nothing gets cut) ── */
#cat { aspect-ratio: 560 / 843; }
#cat .body { position: absolute; inset: 0; transform-origin: 50% 96%; }
#cat .body img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45)); }
#cat .body.tilt { animation: tilt 1.6s ease-in-out; }
#cat .body.look { animation: look 2.2s ease-in-out; }
#cat .body.peek { animation: peek 1.5s cubic-bezier(.4,0,.3,1); }
#cat .body.shiver { animation: shiver .7s linear; }
#cat .body.sniff { animation: sniff 1s ease-in-out; }
#cat .body.hop { animation: hop .9s cubic-bezier(.3,0,.3,1); }
@keyframes tilt { 30%, 70% { transform: rotate(-4deg); } }
@keyframes look { 20%, 45% { transform: rotate(-2.5deg) skewX(2deg); } 60%, 85% { transform: rotate(2.5deg) skewX(-2deg); } }
@keyframes peek { 25%, 60% { transform: scale(1.04, .9); } 78% { transform: scale(.98, 1.04); } }
@keyframes shiver { 10%, 50%, 90% { transform: translateX(-1.2%) rotate(-.6deg); } 30%, 70% { transform: translateX(1.2%) rotate(.6deg); } }
@keyframes sniff { 25%, 75% { transform: scale(.99, 1.02); } 50% { transform: scale(1.01, .985); } }
@keyframes hop { 20% { transform: scale(1.06, .9); } 45% { transform: translateY(-9%) scale(.97, 1.05) rotate(-2deg); } 70% { transform: translateY(0) scale(1.05, .92); } 85% { transform: scale(.99, 1.02); } }
/* blinks: two fur-coloured lids drop over the eyes for a moment */
#cat .lid-l, #cat .lid-r { position: absolute; top: 15.2%; width: 10.5%; height: 4.6%; border-radius: 50% 50% 45% 45%; background: var(--lidc, #ead2b7); transform: scaleY(0); transform-origin: 50% 0; }
#cat .lid-l { left: 39.6%; } #cat .lid-r { left: 55.8%; }
#cat .body.blink .lid-l, #cat .body.blink .lid-r { animation: blinkk .2s ease-in-out; }
@keyframes blinkk { 50% { transform: scaleY(1); } }
#cat .tear { position: absolute; width: 1.8%; height: 2.4%; margin-left: -.9%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(170,215,255,.95); box-shadow: 0 0 4px rgba(170,215,255,.8); animation: tear 1.5s ease-in forwards; }
@keyframes tear { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 100% { transform: translateY(520%) scale(.8); opacity: 0; } }

/* ── hold to aim ── */
#dots { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; }
#dots i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 6px rgba(255,211,77,.9), 0 1px 3px rgba(0,0,0,.6); }
#dots i:nth-child(n+4) { opacity: .7; } #dots i:nth-child(n+6) { opacity: .45; }
#aimhint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 5; margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(10,16,30,.7); color: #fff8e8; font-family: var(--f-display); font-size: 20px; pointer-events: none; animation: hintb 1.6s ease-in-out infinite; transition: opacity .4s; }
#aimhint.gone { opacity: 0; }
@keyframes hintb { 50% { transform: translateX(-50%) translateY(-5px); } }
#launcher .needle { transition: transform .06s linear; }
#box { cursor: crosshair; }
/* ── tidy HUD ── */
#top { flex-direction: column; align-items: flex-start; gap: 2px; }
#here { font-size: 12px; }
#price .lab { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
#price .pd:empty { display: none; }
#price .lab b { font-weight: 800; color: var(--amber); margin-left: 2px; }
#price .lab { white-space: nowrap; }
.pv { font-size: 30px !important; }
@media (max-width: 720px) { .pv { font-size: 24px !important; } }
#gold:not(.has) { width: 54px; padding: 0; justify-content: center; }
#gold:not(.has) #goldn, #gold:not(.has) .more { display: none; }
@media (max-width: 720px) {
  #top { top: auto; left: 10px; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 52px); }
  .brand { display: none; }
  #here { padding: 3px 9px; border-radius: 999px; background: rgba(10,16,30,.6); text-shadow: none; }
  #card { top: calc(max(10px, env(safe-area-inset-top)) + 58px); width: 168px; gap: 4px; padding: 8px 10px 9px; }
  #card .n { font-size: 15px; gap: 7px; }
  #card .n b { min-width: 22px; height: 22px; font-size: 13px; border-radius: 8px; }
  #card .row .nx { font-size: 11.5px; min-width: 44px; }
  #price { gap: 6px; padding: 5px 12px 6px; }
  #price .lab { font-size: 11px; }
  .pv { font-size: 26px; }
  .pp, .pd { font-size: 11px; }
  #gold:not(.has) { width: 50px; }
  #visit-go { top: calc(max(10px, env(safe-area-inset-top)) + 150px); }
}
/* ── first person: your hand and the target ── */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#hand { position: fixed; inset: 0; z-index: 4; pointer-events: none; --c: 0; transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.9,.3,1); }
#hand.on { transform: none; }
#hand .armR, #hand .armL { position: absolute; bottom: 0; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
#hand .armR { right: 3vw; height: min(56vh, 520px); aspect-ratio: .695; transform-origin: 88% 135%; --px: 22%; --py: 24%; translate: var(--sx, 0px) var(--sy, 0px); scale: var(--fs, 1); transition: transform .22s cubic-bezier(.2,.8,.3,1), translate .3s ease; }   /* translate: fitHand keeps big things on screen */   /* pivot ≈ your shoulder, below the screen */
#hand .armL { left: 10vw; height: min(46vh, 420px); aspect-ratio: .742; transform-origin: 30% 100%; transform: translateY(105%) rotate(-6deg); }
#hand .armL img { z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 18px rgba(0,0,0,.35)); }
/* the right arm picture is bigger than the arm's box (the things stick out), placed so the sleeve sits in the box */
#hand .armR > img:first-child { z-index: 1; position: absolute; left: var(--bl); top: var(--bt); width: var(--bw); height: var(--bh); max-width: none; filter: drop-shadow(0 0 18px rgba(0,0,0,.35)); }
#hand .armR > img.gold:first-child { filter: drop-shadow(0 0 12px rgba(255,200,60,.85)) drop-shadow(0 0 3px #ffe9a0); }
#hand .held { position: absolute; visibility: hidden; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }   /* where the thing is: the throw starts here */
#hand.on[data-pose="hold"] .armR { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(30%); } 50% { transform: translateY(31.5%) rotate(.6deg); } }     /* resting low; transform, not translate: translate holds fitHand's shift */
/* wind-up: the right arm goes back (further the more power), the left arm comes up and points */
#hand[data-pose="wind"] .armR { transition-duration: .16s; transform: translate(calc(2% + var(--c) * 3%), calc(4% + var(--c) * 7%)) rotate(calc(-2deg - var(--c) * 5deg)) scale(calc(1.02 + var(--c) * .05)); }   /* wind-up: pulled back and down towards you, never up off the screen */
#hand[data-pose="wind"] .armL { transform: translateY(6%) rotate(4deg); transition-duration: .25s; }
/* the throws. mid: from cocked back, over the top towards the target (the piece leaves there), down and out of sight */
#hand[data-pose="throw"] .armR { animation: swing .42s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes swing {
  0% { transform: translate(4%, 9%) rotate(-5deg) scale(1.05); }
  22% { transform: translate(-14%, -12%) rotate(-6deg) scale(1.02); }
  45% { transform: translate(-26%, 6%) rotate(-24deg) scale(.98); }
  100% { transform: translate(-30%, 85%) rotate(-38deg) scale(.95); } }
/* lob: a short, soft underarm push forward and up, the arm barely leaves the bottom */
#hand[data-kind="lob"][data-pose="throw"] .armR { animation: lob .5s cubic-bezier(.35,.5,.4,1) forwards; }
@keyframes lob {
  0% { transform: translate(3%, 0%) rotate(6deg); }
  30% { transform: translate(-6%, -9%) rotate(-5deg) scale(.98); }
  100% { transform: translate(-10%, 75%) rotate(-12deg) scale(.96); } }
/* fastball: cocked far back, a whip across the whole view with a smear, a long follow-through to the bottom left */
#hand[data-kind="fast"][data-pose="throw"] .armR { animation: fast .4s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes fast {
  0% { transform: translate(5%, 11%) rotate(-7deg) scale(1.07); filter: blur(0); }
  15% { transform: translate(-22%, -16%) rotate(-12deg) scale(1.06); filter: blur(3px); }
  38% { transform: translate(-52%, 16%) rotate(-46deg) scale(1); filter: blur(2px); }
  100% { transform: translate(-60%, 100%) rotate(-60deg) scale(.96); filter: blur(0); } }
/* full power: you lean in while you hold, the view lunges when you let go */
#view { transition: transform .35s cubic-bezier(.2,.8,.3,1), scale 1.1s cubic-bezier(.16,.84,.24,1), filter .9s ease; transform-origin: 50% 60%; }
#view.lean { transform: scale(1.025) rotate(-.5deg); }
#view.lunge { animation: lunge .42s cubic-bezier(.2,.8,.3,1); }
@keyframes lunge { 0% { transform: scale(1.025) rotate(-.5deg); } 25% { transform: scale(1.06) translateY(-1%) rotate(.8deg); } 100% { transform: none; } }
#hand.on:has(~ #view.lean) .armR, #view.lean ~ #hand .armR { filter: drop-shadow(0 0 14px rgba(255,120,40,.55)); }
.speedlines { position: fixed; inset: 0; z-index: 6; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,0) 0deg 2.6deg, rgba(255,245,225,.22) 2.6deg 3.3deg);
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent 30%, #000 72%); mask: radial-gradient(circle at 50% 46%, transparent 30%, #000 72%); animation: speed .42s ease-out forwards; }
@keyframes speed { from { opacity: 1; transform: scale(1.15); } to { opacity: 0; transform: scale(1); } }
#hand[data-pose="throw"] .armL { transform: translateY(75%) rotate(-14deg); transition-duration: .2s; }
#hand[data-pose="reload"] .armR { transform: translateY(85%); transition: none; }
#hand[data-pose="reload"] .armL { transform: translateY(105%) rotate(-6deg); }
#aimx { position: fixed; left: 0; top: 0; z-index: 6; width: 0; height: 0; pointer-events: none; }
#aimx::before, #aimx i { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #ffd34d; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 14px rgba(255,211,77,.6); }
#aimx i { left: -4px; top: -4px; width: 8px; height: 8px; border: 0; background: #ffd34d; }
#aimx::before { animation: aimin .2s ease-out; }
/* the power ring around the target */
#aimx b { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(#ff9a2e calc(var(--c, 0) * 360deg), rgba(255,255,255,.12) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%); mask: radial-gradient(closest-side, transparent 78%, #000 80%); }
#aimx.full b { background: #ff5a1e; box-shadow: 0 0 22px rgba(255,110,40,.9); animation: full .5s ease-in-out infinite alternate; }
@keyframes full { to { transform: scale(1.12); } }
.pc.fly.fast { filter: drop-shadow(0 0 10px rgba(255,140,40,.95)) drop-shadow(0 0 3px #fff); }
.fastpop { color: #ffb347 !important; -webkit-text-stroke-color: #3a1500 !important; }
@keyframes aimin { from { transform: scale(1.8); opacity: 0; } }
#aimx.cat::before { border-color: #fff; } #aimx.cat i { background: #fff; }
#aimx.head::before { border-color: #ff4a3d; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 18px rgba(255,70,50,.8); } #aimx.head i { background: #ff4a3d; }
#box { cursor: crosshair; }
/* the golden trash button sits with the small buttons at the bottom left */
#dock { left: 116px; transform: none; bottom: max(15px, env(safe-area-inset-bottom)); }
#gold:not(.has) { width: 54px; }
@media (max-width: 720px) { #hand .armR { right: -8vw; height: min(40vh, 340px); } #hand .armL { left: -6vw; height: min(34vh, 300px); } #dock { left: 98px !important; right: auto !important; transform: none !important; bottom: max(15px, env(safe-area-inset-bottom)) !important; } #top { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 62px); } }
/* ── small life on the picture: rain in front, lights and stars behind the pile ── */
#ambb, #ambf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ambf { z-index: 5; }
/* a meme toy's line where it lands */
.memepop { position: absolute; z-index: 4; transform: translate(-50%, -100%); white-space: nowrap; font-family: var(--f-display); font-size: max(18px, calc(3.2cqw * var(--kw, 1))); color: #b8ff6a; -webkit-text-stroke: 2px #142008; paint-order: stroke fill; pointer-events: none; animation: memepop 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes memepop { 0% { transform: translate(-50%, -60%) scale(.3) rotate(-8deg); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.15) rotate(-4deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -170%) scale(1) rotate(-4deg); opacity: 0; } }
.testp b { cursor: pointer; } .testp b::after { content: ' ▾'; } .testp.fold b::after { content: ' ▸'; }
.testp.fold { width: auto !important; } .testp.fold > *:not(b) { display: none !important; }
@media (max-width: 720px) { .testp { top: 150px; bottom: auto; } }
/* ── rarity: the arm glows, a label pops over the hand; points per throw ── */
#hand .armR[data-r="1"] > img:first-child { filter: drop-shadow(0 0 10px rgba(126,224,126,.55)); }
#hand .armR[data-r="2"] > img:first-child { filter: drop-shadow(0 0 14px rgba(79,179,255,.8)); }
#hand .armR[data-r="3"] > img:first-child { filter: drop-shadow(0 0 18px rgba(194,123,255,.9)); }
#hand .armR[data-r="4"] > img:first-child { filter: drop-shadow(0 0 22px rgba(255,176,46,1)) drop-shadow(0 0 4px #fff3c4); animation: legend 1.2s ease-in-out infinite alternate; }
@keyframes legend { to { filter: drop-shadow(0 0 32px rgba(255,176,46,1)) drop-shadow(0 0 6px #fff3c4); } }
#rlabel { position: absolute; z-index: 2; translate: -50% -100%; white-space: nowrap; padding: 4px 13px; border-radius: 999px; font-family: var(--f-display); font-size: 19px; box-shadow: 0 3px 10px rgba(0,0,0,.4); letter-spacing: .04em; color: #10131c; opacity: 0; pointer-events: none; }
#rlabel.r1 { background: #7ee07e; } #rlabel.r2 { background: #4fb3ff; } #rlabel.r3 { background: #c27bff; } #rlabel.r4 { background: linear-gradient(90deg, #ffd34d, #ff9a2e); box-shadow: 0 0 16px rgba(255,176,46,.9); }
#rlabel.show { animation: rlab 2.2s ease-out forwards; }
@keyframes rlab { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.12); } 22% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.pop.r1 { color: #9ff09f; } .pop.r2 { color: #8fd0ff; } .pop.r3 { color: #dcb0ff; font-size: 1.25em; } .pop.r4 { color: #ffd36e; font-size: 1.6em; }
#score { display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border-radius: 20px; background: rgba(10,16,30,.7); backdrop-filter: blur(8px); color: #fff3df; font-family: var(--f-display); font-size: 18px; }
#score span { color: #ffd34d; }
#score.bump { animation: sbump .45s cubic-bezier(.3,1.8,.5,1); }
#score.r2.bump b { color: #8fd0ff; } #score.r3.bump b { color: #dcb0ff; } #score.r4.bump b { color: #ffd36e; }
@keyframes sbump { 35% { transform: scale(1.18); } }
#top .tag { font-size: 13px; font-weight: 600; color: rgba(255,243,223,.78); text-shadow: 0 1px 6px rgba(0,0,0,.7); letter-spacing: .01em; }
@media (max-width: 720px) { #top .tag { display: none; } }
/* ── the next burn: a line in the card; on a burn the waiting trash glows, throws embers, turns to ash ── */
#card .week .bar { display: none; }
#card .week { grid-template-columns: 16px 1fr; }
#card .week .nx { text-align: left; min-width: 0; color: #ffcf9e; }
.pc.burnt { filter: brightness(.6) saturate(.45) sepia(.3); }
.pc.burning { animation: burning 1.7s ease-out forwards; }
@keyframes burning { 0% { filter: none; } 20% { filter: brightness(1.05) sepia(1) saturate(4.5) hue-rotate(-32deg) drop-shadow(0 0 9px #ff6a1a); } 65% { filter: brightness(.7) sepia(1) saturate(3) hue-rotate(-38deg) drop-shadow(0 0 5px #ff4a12); } 100% { filter: brightness(.6) saturate(.45) sepia(.3); } }
/* a flame standing on each burning piece: flickers, then dies down */
.flame { position: absolute; z-index: 4; aspect-ratio: .72; transform: translate(-50%, -92%); pointer-events: none; transform-origin: 50% 100%;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd84a'/%3E%3Cstop offset='.45' stop-color='%23ff8a1e'/%3E%3Cstop offset='1' stop-color='%23ff3d12' stop-opacity='.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fffbe0'/%3E%3Cstop offset='1' stop-color='%23ffd04a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M50 138C22 138 6 118 10 92c3-20 16-30 18-52 10 14 10 26 16 30 2-24 10-44 26-62-4 22 4 36 14 52 10 16 12 30 8 44-5 20-20 34-42 34z'/%3E%3Cpath fill='url(%23c)' d='M50 136c-14 0-22-10-20-24 2-12 10-18 12-30 6 8 6 16 10 18 2-12 6-20 12-28-2 12 2 20 6 28 4 8 4 16 2 22-3 9-10 14-22 14z'/%3E%3C/svg%3E") center bottom / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,120,30,.8));
  animation: flick .14s ease-in-out infinite alternate, flamelife 1.7s ease-in forwards; }
@keyframes flick { from { scale: 1 1; skew: -2deg; } to { scale: .92 1.12; skew: 3deg; } }
@keyframes flamelife { 0% { opacity: 0; } 12% { opacity: 1; } 65% { opacity: .9; } 100% { opacity: 0; scale: .5 .3; } }
.ember { position: absolute; z-index: 4; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #ff9a2e 50%, rgba(255,80,20,0) 75%); pointer-events: none; animation: ember 1.7s ease-out forwards; }
@keyframes ember { 0% { transform: translate(0, 0) scale(1.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
/* ── the watch party: chart + feed on the left, the crowd at the bottom ── */
#stand { position: fixed; left: 16px; top: 74px; z-index: 5; width: 340px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#stand > * { pointer-events: auto; }
.chartc { position: relative; padding: 10px 10px 6px; border-radius: 16px; background: rgba(10,16,30,.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.chartc canvas { display: block; width: 100%; height: 132px; touch-action: none; }
.ch-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ch-mc { font-family: var(--f-display); font-size: 20px; color: #fff3df; font-weight: 400; }
.ch-d { font-size: 12px; font-weight: 700; } .ch-d.up { color: #4be08a; } .ch-d.down { color: #ff6b5a; }
.ch-r { margin-left: auto; display: flex; gap: 2px; }
.ch-r button { border: 0; background: none; color: rgba(255,243,223,.5); font: 700 11px var(--f-body); padding: 3px 6px; border-radius: 7px; }
.ch-r button.on { background: rgba(255,255,255,.12); color: #fff3df; }
.ch-tip { position: absolute; bottom: 22px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.75); color: #fff3df; font-size: 11px; white-space: nowrap; pointer-events: none; }
#feed { display: flex; flex-direction: column; gap: 4px; }
.fd { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 11px; background: rgba(10,16,30,.6); backdrop-filter: blur(8px); font-size: 12.5px; color: #f3ecda; animation: fdin .45s cubic-bezier(.2,1.3,.4,1); }
.fd:nth-child(n+5) { opacity: .6; } .fd:nth-child(n+7) { opacity: .35; }
@keyframes fdin { from { transform: translateX(-24px) scale(.96); opacity: 0; background: rgba(255,211,77,.4); } }
.fd .fi { flex: none; width: 18px; text-align: center; }
.fd .ft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd time { flex: none; font-size: 11px; color: rgba(255,243,223,.45); }
.fd .fl { flex: none; color: rgba(255,243,223,.55); text-decoration: none; font-size: 12px; }
.fd.buy .ft { color: #9ff0bf; } .fd.sell .ft { color: #ffb0a6; } .fd.burn { background: rgba(120,40,10,.7); } .fd.burn .ft { color: #ffcf9e; font-weight: 700; }
.fd.big { background: rgba(20,90,50,.75); } .fd.big .ft { font-weight: 800; color: #c8ffd9; }
.fd.toss .ft { color: #e7c8ff; }
#here { font-size: 13px !important; font-weight: 700; color: #b7f0cb; }
#crowd { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.flt { position: absolute; transform: translate(-50%, -50%); animation: flt 2.8s cubic-bezier(.25,.6,.4,1) forwards; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.flt.mine { filter: drop-shadow(0 0 10px rgba(255,211,77,.7)); }
@keyframes flt { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 10% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--h))) scale(.9) rotate(12deg); opacity: 0; } }
#rxbar { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(10,16,30,.62); backdrop-filter: blur(10px); }
.rx { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background .15s; }
.rx:hover { background: rgba(255,255,255,.18); }
.rx.rxp { animation: rxpop .3s cubic-bezier(.3,1.8,.5,1); }
@keyframes rxpop { 40% { transform: scale(1.3); } }
#hype { position: relative; width: 54px; height: 42px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.07); display: grid; place-items: center; --h: 0; }
#hype i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * 100%); background: linear-gradient(0deg, #ff5a1e, #ffb84d); transition: height .3s; }
#hype span { position: relative; font-family: var(--f-display); font-size: 13px; color: #fff3df; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#hype { margin-right: 4px; }
#hype.hot { box-shadow: 0 0 10px rgba(255,140,40,.8); }
#hype.boom { animation: boom .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes boom { 40% { transform: scale(1.12); } }
.testp { top: 200px !important; bottom: auto !important; left: auto !important; right: 14px; }
.testp:not(.fold) { max-height: 60vh; overflow: auto; }
@media (max-width: 720px) {
  #stand { left: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 80px); width: calc(100vw - 196px); }
  #stand.open { z-index: 8; }
  #top { top: calc(max(10px, env(safe-area-inset-top)) + 52px) !important; bottom: auto !important; left: 12px !important; }
  #here { padding: 0 !important; background: none !important; text-shadow: 0 1px 4px #000 !important; font-size: 12px !important; }
  #stand .chartc { display: none; }
  #stand.open .chartc { display: block; position: fixed; left: 10px; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 52px); z-index: 7; }
  #feed .fd:nth-child(n+4) { display: none; }
  .fd { font-size: 11px; padding: 4px 7px; gap: 5px; } .fd time { display: none; } .fd .fl { display: none; }
  #rxbar { left: 10px; translate: none; bottom: calc(max(15px, env(safe-area-inset-bottom)) + 58px); gap: 3px; padding: 4px 5px; }
  .rx { width: 34px; height: 34px; font-size: 18px; } #hype { width: 40px; height: 34px; } #hype span { font-size: 10px; }
  .testp { top: 160px !important; right: 10px; }
  #price { cursor: pointer; }
}
/* ── 10/26: the left side kept plain ── */
#stand { width: 250px; gap: 6px; }
.chartc { padding: 8px 10px 4px; }
.chartc canvas { height: 64px; }
.ch-top { gap: 6px; margin-bottom: 2px; } .ch-l { font-size: 11px; font-weight: 800; color: var(--amber); } .ch-mc { font-size: 18px; }
.ch-d { margin-left: auto; }
.fd { padding: 4px 10px; font-size: 13px; cursor: pointer; }
.fd .ft { font-weight: 700; }
.fd.big { background: rgba(20,90,50,.78); }
/* a buy: the cat caught it */
.catchpop { position: absolute; z-index: 4; transform: translate(-50%, -100%); white-space: nowrap; font-family: var(--f-display); font-size: max(20px, calc(3.4cqw * var(--kw, 1))); color: #7dffad; -webkit-text-stroke: 2px #0b3a1c; paint-order: stroke fill; pointer-events: none; animation: memepop 1.6s cubic-bezier(.2,1.4,.4,1) forwards; }
.catchpop.big { font-size: max(30px, calc(5.2cqw * var(--kw, 1))); color: #ffe27a; -webkit-text-stroke-color: #4a2a00; }
/* what is this coin: the home page in a sheet */
#about-b { border: 0; padding: 3px 10px; border-radius: 999px; background: rgba(255,211,77,.16); color: #ffe08a; font: 700 12px var(--f-body); text-align: left; }
#about-b:hover { background: rgba(255,211,77,.3); }
#about { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4,6,12,.72); backdrop-filter: blur(4px); }
#about[hidden] { display: none; }
#about .ab-in { position: relative; width: min(1100px, 94vw); height: min(88vh, 900px); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #f3ecda; animation: tin .3s ease; }
#about iframe { width: 100%; height: 100%; border: 0; display: block; }
#about-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 19px; background: rgba(10,16,30,.85); color: #fff; font-size: 17px; }
@media (max-width: 720px) {
  #stand { width: calc(100vw - 196px); }
  #about-b { position: fixed; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 154px); padding: 4px 10px; }
  #about .ab-in { width: 100vw; height: 100%; border-radius: 0; }
}
/* people behind you: a dark arm comes up from the bottom edge, throws, goes down */
.ghost { position: fixed; bottom: 0; z-index: 3; height: min(40vh, 360px); translate: -50% 0; pointer-events: none; opacity: 0;
  filter: brightness(.32) saturate(.2) drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 12px var(--c)); transform-origin: 60% 100%; animation: ghost .95s ease-out forwards; }
.ghost.flip { scale: -1 1; }
@keyframes ghost { 0% { transform: translateY(75%) rotate(12deg); opacity: 0; } 22% { transform: translateY(8%) rotate(6deg); opacity: .95; } 42% { transform: translateY(-2%) rotate(-12deg); opacity: .95; } 100% { transform: translateY(90%) rotate(-18deg); opacity: 0; } }
/* a whale: a strip under the price */
#whale { position: fixed; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 58px); translate: -50% 0; z-index: 6; padding: 6px 16px; border-radius: 999px; white-space: pre; pointer-events: none;
  background: linear-gradient(90deg, #0f6b3a, #1b9c57); color: #eafff1; font-family: var(--f-display); font-size: 17px; box-shadow: 0 0 22px rgba(80,255,150,.45); opacity: 0; }
#whale.on { animation: whale 3.4s ease-out forwards; }
@keyframes whale { 0% { opacity: 0; transform: translateY(-10px) scale(.8); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 720px) { #whale { top: auto; bottom: calc(max(15px, env(safe-area-inset-bottom)) + 112px); font-size: 14px; } .ghost { height: 28vh; } }
#price .pd, #price .pv { white-space: nowrap; }
/* ── 10/26 plain screen: only what explains itself ── */
#card .row.week, #card .row.trash, #hype, #top .tag { display: none !important; }
#card { gap: 5px; }
#gold:not(.has) { display: none; }
.chartc .ch-top { display: none; }
.chartc { padding: 6px 8px 2px; }
.chartc canvas { height: 52px; }
#about-b { position: static !important; width: 40px; min-width: 40px; height: 40px; padding: 0 !important; border-radius: 20px !important; background: rgba(10,16,30,.6) !important; color: var(--ink) !important; font: 400 18px var(--f-display) !important; display: grid; place-items: center; }
@media (max-width: 720px) { #about-b { width: 36px; min-width: 36px; height: 36px; } #dock { left: 144px !important; } }
#dock { left: 166px; }
/* ── 10/26: big reactions everybody sees for a few seconds ── */
.emo { position: absolute; z-index: 6; transform: translate(-50%, -50%); line-height: 1; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  animation: emo 3.6s cubic-bezier(.2,.9,.3,1) forwards, emob 1.1s ease-in-out infinite alternate; }
.emo.mine { filter: drop-shadow(0 0 14px rgba(255,211,77,.8)) drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
@keyframes emo { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; } 9% { transform: translate(-50%, -50%) scale(1.35) rotate(var(--r)); opacity: 1; }
  16% { transform: translate(-50%, -50%) scale(.92) rotate(var(--r)); } 22% { transform: translate(-50%, -50%) scale(1) rotate(var(--r)); }
  82% { transform: translate(-50%, -58%) scale(1) rotate(var(--r)); opacity: 1; } 100% { transform: translate(-50%, -140%) scale(.75) rotate(var(--r)); opacity: 0; } }
@keyframes emob { to { margin-top: -10px; } }
.emo-n { position: absolute; right: -.35em; bottom: -.1em; font: 400 .32em var(--f-display); color: #fff; background: #ff5a1e; padding: .1em .35em; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.rx { width: 48px; height: 48px; font-size: 26px; }
@media (max-width: 720px) { .rx { width: 38px; height: 38px; font-size: 20px; } }
/* ── 10/26: the top is just the market cap ── */
#card, .brand, #price .lab, #price .pd { display: none !important; }
#price { padding: 6px 18px 7px; }
#stand { top: 14px !important; }
#here { position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px); translate: -50% 0; z-index: 5; font-size: 12px !important; text-shadow: 0 1px 5px #000; }
@media (max-width: 720px) {
  #stand { top: calc(max(10px, env(safe-area-inset-top)) + 54px) !important; width: 62vw; }
  #here { left: 12px; translate: none; bottom: calc(max(15px, env(safe-area-inset-bottom)) + 104px) !important; top: auto !important; }
  #top { top: auto !important; }
}
/* ── the map button (top right): place n/34, a lock and the market cap that opens the next place ── */
#mapb { position: fixed; right: 14px; top: max(12px, env(safe-area-inset-top)); z-index: 5; display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 12px; padding: 7px 12px 8px; border: 0; border-radius: 14px;
  background: rgba(10,16,30,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff3df; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#mapb:hover { background: rgba(14,22,40,.8); }
#mapb .mp-n { font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; color: rgba(255,243,223,.7); } #mapb .mp-n b { font-weight: 400; font-size: 20px; color: var(--amber); margin-left: 3px; }
#mapb .mp-next { display: flex; align-items: center; gap: 4px; font: 700 13px var(--f-body); color: #fff3df; }
#mapb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#mapb .mp-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#mapb .mp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f06a24, var(--amber)); transition: width 1.2s; }
#about-b { width: auto !important; padding: 0 12px !important; gap: 6px; display: flex !important; align-items: center; font: 700 13px var(--f-body) !important; }
#about-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#dock { left: 214px; }
@media (max-width: 720px) {
  #mapb { right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 2px); padding: 5px 9px 6px; gap: 3px 8px; }
  #mapb .mp-n { font-size: 12px; } #mapb .mp-n b { font-size: 16px; } #mapb .mp-next { font-size: 11.5px; }
  #about-b span { display: none; } #about-b { padding: 0 !important; width: 36px !important; justify-content: center; }
  #dock { left: 144px !important; }
}
/* the test panel: groups on the right */
.testp { width: 190px !important; gap: 4px !important; padding: 10px !important; top: 96px !important; max-height: calc(100vh - 200px) !important; overflow: auto; }
.testp .tg { margin: 6px 2px 0; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #e7b8ff; }
.testp button { padding: 6px 10px !important; font-size: 13px !important; }
.testp .tvol { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 13px; color: #fff; } .testp .tvol input { flex: 1; accent-color: #e08aff; }
@media (max-width: 720px) { .testp { top: 70px !important; width: 168px !important; max-height: calc(100vh - 240px) !important; } }
/* ── the others in the scene ── */
#people { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.person { position: absolute; width: auto; transform: translate(-50%, -100%); transform-origin: 50% 100%; filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 3px 4px rgba(0,0,0,.5)); animation: pin .6s cubic-bezier(.2,1.2,.4,1); }
.person.flip { transform: translate(-50%, -100%) scaleX(-1); }
.person.leave { animation: pout .6s ease-in forwards; }
@keyframes pin { from { opacity: 0; margin-top: 3%; } }
@keyframes pout { to { opacity: 0; margin-top: 3%; } }
/* how many are here, next to the price */
#here { display: none !important; }
#viewers { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); font: 800 15px var(--f-body); color: #b7f0cb; }
#viewers::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3fd37a; box-shadow: 0 0 8px #3fd37a; animation: livep 1.6s ease-in-out infinite; }
#viewers[hidden] { display: none; }
@keyframes livep { 50% { opacity: .35; } }
@media (max-width: 720px) { #viewers { font-size: 13px; margin-left: 7px; padding-left: 7px; } }
/* ── the crowd in front of you: the backs of the others along the bottom edge ── */
#fans { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.fan { position: absolute; aspect-ratio: .561; translate: -50% 0; transform-origin: 50% 100%; animation: fanin .7s cubic-bezier(.2,1.1,.4,1), fansway 4.2s ease-in-out infinite; transition: bottom .26s cubic-bezier(.2,.9,.3,1); }
.fan img { width: 100%; height: 100%; display: block; filter: brightness(.48) saturate(.5) blur(.8px) drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 10px var(--c)); }
.fan.flip img { transform: scaleX(-1); }
.fan.up { margin-bottom: 4%; }
.fan.leave { animation: fanout .7s ease-in forwards; }
@keyframes fanin { from { translate: -50% 40%; opacity: 0; } }
@keyframes fanout { to { translate: -50% 50%; opacity: 0; } }
@keyframes fansway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
#people { display: none; }
/* ── power up ── */
#cat .eye, #cat .aura, #cat .bolts { display: none; }
/* 1: laser eyes (the crypto meme) */
#cat .eye { position: absolute; top: 17.4%; width: 3.6%; aspect-ratio: 1; margin: -1.8% 0 0 -1.8%; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #ff2a2a 45%, rgba(255,0,0,0) 72%); box-shadow: 0 0 10px 4px rgba(255,40,40,.9); }
#cat .el { left: 44.8%; } #cat .er { left: 61%; }
#cat .eye::after { content: ''; position: absolute; top: 50%; height: 34%; width: 2600%; translate: 0 -50%; border-radius: 99px;
  background: linear-gradient(90deg, #fff, #ff3b3b 15%, rgba(255,40,40,.6) 60%, rgba(255,40,40,0)); box-shadow: 0 0 8px 2px rgba(255,40,40,.8); animation: laser .18s linear infinite alternate; }
#cat .el::after { right: 50%; transform-origin: 100% 50%; rotate: 12deg; } #cat .er::after { left: 50%; transform-origin: 0 50%; rotate: -12deg; }
@keyframes laser { to { opacity: .7; height: 22%; } }
#cat[data-pw="1"] .eye, #cat[data-pw="2"] .eye, #cat[data-pw="3"] .eye { display: block; }
/* 2: a golden aura burning up around the can, lightning, the trash floats */
#cat .aura { position: absolute; left: -38%; right: -38%; top: -30%; bottom: -6%; border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 58% at 50% 62%, rgba(255,250,200,.95), rgba(255,214,60,.85) 40%, rgba(255,150,20,.5) 62%, rgba(255,120,0,0) 74%);
  filter: blur(4px); mix-blend-mode: screen; animation: aura .22s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes aura { from { scale: 1 1; } to { scale: 1.06 1.12; } }
#cat[data-pw="2"] .aura, #cat[data-pw="3"] .aura { display: block; }
#cat .bolts { position: absolute; inset: -20% -30%; pointer-events: none; }
#cat .bolts i { position: absolute; width: 8%; height: 40%; background: linear-gradient(#fffbe0, #ffe04a); clip-path: polygon(40% 0, 70% 0, 52% 40%, 80% 40%, 30% 100%, 44% 52%, 18% 52%); filter: drop-shadow(0 0 6px #ffe04a); opacity: 0; animation: bolt 1.3s steps(1) infinite; }
#cat .bolts i:nth-child(1) { left: 6%; top: 18%; rotate: -18deg; } #cat .bolts i:nth-child(2) { right: 8%; top: 8%; rotate: 15deg; animation-delay: .45s; } #cat .bolts i:nth-child(3) { left: 46%; top: -6%; animation-delay: .85s; }
@keyframes bolt { 0% { opacity: 1; } 12% { opacity: 0; } }
#cat[data-pw="2"] .bolts, #cat[data-pw="3"] .bolts { display: block; }

@keyframes hover { to { translate: 0 -1.5%; } }

@keyframes lev { to { translate: 0 -10px; } }
/* 3: the whole cat turns gold, a giant green candle rises behind */
#cat[data-pw="3"] .body img { filter: sepia(1) saturate(4.5) hue-rotate(-8deg) brightness(1.18) contrast(1.05) drop-shadow(0 0 1.2cqw rgba(255,210,60,.9)); }
#cat.powerup { animation: pwup .55s cubic-bezier(.3,1.8,.5,1); }
@keyframes pwup { 40% { scale: 1.12; } }
#godcandle { position: absolute; z-index: 0; left: var(--gx, 50%); bottom: calc(100% - var(--gy, 60%)); width: 9%; height: 0; translate: -50% 0; transition: height 1.4s cubic-bezier(.2,.9,.3,1); pointer-events: none; }
#godcandle.on { height: 62%; }
#godcandle .body { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, #1b9c57, #4be08a 45%, #1b9c57); box-shadow: 0 0 30px rgba(75,224,138,.8), 0 0 80px rgba(75,224,138,.4); }
#godcandle .wick { position: absolute; left: 50%; top: -14%; width: 10%; height: 14%; border-radius: 2px; translate: -50% 0; background: #4be08a; }
/* power up: the light is drawn on canvases (power.js); the old css shapes are off */
#pwb, #pwf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#pwb { z-index: 1; } #pwf { z-index: 4; }
#cat .eye, #cat .aura, #cat .bolts, #godcandle { display: none !important; }
#cat[data-pw="3"] .body img { filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45)); }
#cat[data-pw="5"] .body img { top: auto; bottom: 0; height: 104.3%; }     /* the crown makes the throne can a little taller */
#cat[data-pw="6"] .body img { inset: auto; left: .93%; top: -1.14%; width: 102.32%; height: 101.42%; }     /* each can drawn in the same frame as the cat */
#cat[data-pw="7"] .body img { inset: auto; left: .82%; top: .55%; width: 98.39%; height: 99.17%; }
#cat[data-pw="8"] .body img { inset: auto; left: .82%; top: .55%; width: 99.82%; height: 99.05%; }
/* the can's makeover */
#cat.wobble .body { animation: wobble .42s linear; }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 15% { rotate: -3deg; } 30% { rotate: 3.5deg; } 45% { rotate: -4deg; } 60% { rotate: 4deg; } 75% { rotate: -3deg; } 90% { rotate: 2deg; } }
#cat.pop .body { animation: canpop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes canpop { 0% { scale: .85 .7; } 35% { scale: 1.08 1.15; translate: 0 -6%; } 65% { scale: .97 1; translate: 0 0; } 100% { scale: 1; } }
#cat.sag .body { animation: sag .7s ease-out; }
@keyframes sag { 30% { scale: 1.04 .92; } }
.testp .tmap { display: flex; gap: 4px; align-items: center; }
.testp .tmap button { flex: none; width: 30px; padding: 6px 0 !important; text-align: center; }
.testp .tmap select { flex: 1; min-width: 0; padding: 5px 4px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font: 600 12px var(--f-body); }
.testp .tmap select option { color: #111; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ───────── the front gate (gate.js): a little heap under a street lamp, the name, one button into the pile ───────── */
html.gating #view { scale: 1.14; filter: blur(6px) brightness(.7); }
html.gating :is(#top, #price, #stand, #card, #rxbar, #crowd, #side, #dock, #hand, #aimhint) { opacity: 0; }
#gate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden; cursor: default;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(38, 30, 22, .5), rgba(5, 8, 16, .9) 75%), rgba(5, 8, 16, .35); }
#gate .g-lamp { position: absolute; left: 50%; top: -6vh; width: min(900px, 160vw); height: 78vh; translate: -50% 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 100% at 50% 0, rgba(255, 196, 107, .2), rgba(255, 196, 107, 0) 100%);
  clip-path: polygon(44% 0, 56% 0, 88% 100%, 12% 100%); animation: glamp 5s ease-in-out infinite; }
@keyframes glamp { 0%, 100% { opacity: 1; } 46% { opacity: .82; } 48% { opacity: .55; } 50% { opacity: .9; } }
#gate .g-col { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px; text-align: center; }
#gate .g-stage { position: relative; width: min(540px, 88vw, 56vh); aspect-ratio: 1.25; margin-bottom: -.2em; }
#gate .g-glow { position: absolute; left: 50%; bottom: -6%; width: 130%; height: 60%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 170, 80, .28), rgba(255, 170, 80, 0) 70%); }
#gate .g-piece, #gate .g-cat { position: absolute; transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) brightness(.95) sepia(.12); user-select: none; -webkit-user-drag: none; }
#gate .g-cat { left: 33.5%; bottom: 19%; width: 33%; z-index: 4; }
#gate .g-cat img { display: block; width: 100%; transform-origin: 50% 100%; }
#gate .g-cat.idle img { animation: gbreathe 3.4s ease-in-out infinite; }
@keyframes gbreathe { 50% { transform: scale(1.012, .99); } }
#gate .g-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, min(13vw, 12vh), 118px); line-height: .95; letter-spacing: .02em; color: var(--amber);
  -webkit-text-stroke: 3px #2a1206; paint-order: stroke fill; text-shadow: 0 6px 0 #2a1206, 0 14px 30px rgba(0, 0, 0, .55); white-space: nowrap; }
#gate .g-title .gch, #gate .g-title .gsp { display: inline-block; opacity: 0; }
#gate .g-title .gsp { width: .32em; }
#gate .g-line { margin: .55em 0 0; font-family: var(--f-display); font-size: clamp(15px, min(3.6vw, 3.6vh), 28px); color: #f0e3c6; text-shadow: 0 2px 12px #000; }
#gate .g-line .a, #gate .g-line .b { display: inline-block; opacity: 0; }
#gate .g-line .b { color: #b8ff6a; margin-left: .25em; }
#gate.static .g-line .b { rotate: -3deg; }
#gate .g-line s { position: relative; text-decoration: none; }
#gate .strike { position: absolute; left: -6%; right: -6%; top: 46%; height: .16em; border-radius: 99px; background: #ff4b2e; rotate: -6deg; transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#gate .g-bob { margin-top: 1.3em; animation: gbob 2.4s ease-in-out infinite; }
@keyframes gbob { 50% { translate: 0 -4px; } }
#gate-go { position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: .55em 1.35em .45em; font-family: var(--f-display); font-size: clamp(18px, min(4.4vw, 4.6vh), 30px); letter-spacing: .02em;
  color: #241405; background: linear-gradient(#ffd27f, #f5a53a); box-shadow: 0 6px 0 #9a520f, 0 14px 28px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .5); opacity: 0; outline: none; }
#gate-go:focus-visible { box-shadow: 0 6px 0 #9a520f, 0 0 0 4px rgba(255, 246, 230, .8), 0 14px 28px rgba(0, 0, 0, .5); }
#gate-go:active { translate: 0 3px; box-shadow: 0 3px 0 #9a520f, 0 8px 18px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .5); }
#gate-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); translate: -120% 0; animation: gshine 3.2s ease-in-out 1s infinite; }
@keyframes gshine { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
#gate .g-fine { margin: 1.4em 0 0; font-size: 13px; color: var(--soft); opacity: 0; }
/* no Motion (slow or blocked CDN): everything simply there, then a fade */
#gate.static :is(.g-piece, .g-cat, .g-title .gch, .g-line .a, .g-line .b, #gate-go, .g-fine) { opacity: 1; }
#gate.static .strike { transform: none; }
#gate.out { opacity: 0; transition: opacity .5s; }
@media (max-width: 720px) { #gate .g-title { -webkit-text-stroke-width: 2px; text-shadow: 0 4px 0 #2a1206, 0 10px 22px rgba(0, 0, 0, .55); } }
@media (max-height: 520px) { #gate .g-stage { width: min(540px, 88vw, 50vh); } #gate .g-bob { margin-top: .8em; } #gate .g-fine { display: none; } }
/* gate, 2nd pass: rain in the lamp light, dust, the heap's shadow, a 3D lean, a lamp blink when the cat lands, a flash going in */
#gate .g-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gate .g-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 244, 220, .95), rgba(255, 210, 140, .4) 45%, rgba(255, 200, 120, 0) 75%); }
#gate .g-col { perspective: 1000px; z-index: 1; }
#gate .g-stage { transform-style: flat; }
#gate .g-shadow { position: absolute; left: 0; right: 0; bottom: -7%; height: 16%; border-radius: 50%; opacity: 0; transform: scaleX(.3);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%); }
#gate .g-dust { position: absolute; z-index: 5; aspect-ratio: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(214, 196, 166, .55), rgba(214, 196, 166, 0) 68%); filter: blur(1px); }
#gate .g-lamp.blink { animation: gblink .5s steps(1) 1, glamp 5s ease-in-out .5s infinite; }
@keyframes gblink { 0% { opacity: .3; } 15% { opacity: 1.15; filter: brightness(1.6); } 30% { opacity: .45; } 45% { opacity: 1; filter: none; } }
#gate .g-bob { position: relative; }
#gate.ready .g-bob::before { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid rgba(255, 196, 107, .7); pointer-events: none; animation: gring 2.2s ease-out infinite; }
@keyframes gring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.18, 1.45); opacity: 0; } }
#gate .g-title .gch { cursor: default; }
#gate.static .g-shadow { opacity: 1; transform: none; }
/* a big sell is big too, but red, not the green of a big buy */
.fd.big.sell { background: rgba(110,24,24,.78); } .fd.big.sell .ft { color: #ffc4bb; }
/* X and Telegram next to the website button */
#side > a.sl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 20px; background: rgba(10,16,30,.6); backdrop-filter: blur(8px); color: var(--ink); }
#side > a.sl:hover { background: rgba(20,30,52,.8); }
#side > a.sl svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 720px) { #side > a.sl { width: 36px; height: 36px; } #side > a.sl svg { width: 15px; height: 15px; } }
#dock { left: 310px; }
@media (max-width: 720px) { #dock { left: 232px !important; } }
/* the website button is the house icon alone */
#about-b { width: 40px !important; padding: 0 !important; justify-content: center; }
#dock { left: 254px; }
@media (max-width: 720px) { #about-b { width: 36px !important; } }