/* The Petco Dash */
:root {
  --cream: #FFF6E9; --paper: #FFFDF8; --ink: #1D1A1F; --ink-2: #4A4450;
  --tangerine: #E8893A; --tangerine-2: #B85E17; --pink: #FF9EC4; --pink-2: #C93A72; --pink-3: #FFE4EE;
  --sky: #A9C8E8; --sky-2: #2F5F9E; --mint: #A8DCC0; --butter: #FFE08A; --red: #E5484D;
  --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--cream); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font-body); color: var(--ink); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px dashed var(--pink-2); outline-offset: 3px; }
.game { position: relative; height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: #F4EFE7; }
@media (min-width: 700px) and (min-height: 640px) {
  body { display: grid; place-items: center; background: var(--cream) radial-gradient(circle, rgba(201, 58, 114, .13) 2.5px, transparent 3px) 0 0 / 34px 34px; }
  .game { width: 430px; height: min(900px, calc(100dvh - 48px)); border: 3px solid var(--ink); border-radius: 44px; box-shadow: 10px 10px 0 var(--ink); }
}
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* HUD */
.hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--sat) + 10px) 12px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; z-index: 5; pointer-events: none; }
.hud[hidden] { display: none; }
.hud__hearts { display: flex; gap: 2px; font-size: 26px; line-height: 1; color: var(--red); text-shadow: 2px 2px 0 var(--ink); padding-top: 4px; }
.hud__hearts .gone { color: rgba(29, 26, 31, .18); text-shadow: none; }
.hud__mid { text-align: center; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 4px 14px 5px; box-shadow: 3px 3px 0 var(--ink); min-width: 104px; }
.hud__mid b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; }
.hud__mid span { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.hud__btns { display: flex; gap: 8px; justify-content: flex-end; pointer-events: auto; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; box-shadow: 2px 2px 0 var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }
#soundBtn .mute { display: none; }
#soundBtn[aria-pressed="false"] .mute { display: inline; }
#soundBtn[aria-pressed="false"] .waves { display: none; }
.combo { position: absolute; left: 50%; top: calc(var(--sat) + 74px); transform: translateX(-50%) scale(.6); opacity: 0; z-index: 5; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: 20px; background: var(--butter); border: 3px solid var(--ink); border-radius: 999px; padding: 2px 14px; box-shadow: 3px 3px 0 var(--ink); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.8, .5, 1); white-space: nowrap; }
.combo.show { opacity: 1; transform: translateX(-50%) scale(1); }
.big { position: absolute; left: 0; right: 0; top: 38%; text-align: center; z-index: 6; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 13vw, 64px); color: var(--tangerine); text-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: scale(.5); transition: opacity .15s, transform .35s cubic-bezier(.3, 1.8, .5, 1); line-height: 1.05; padding: 0 16px; }
.big.show { opacity: 1; transform: scale(1); }
.big small { display: block; font-size: .42em; color: var(--ink); text-shadow: none; margin-top: 6px; }

/* panels */
.panel { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); background: rgba(255, 246, 233, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow-y: auto; }
.panel[hidden] { display: none; }
.panel__card { width: 100%; max-width: 420px; background: var(--paper); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); padding: 20px 20px 18px; text-align: center; position: relative; }
.panel__card--small { max-width: 340px; }
.panel__back { position: absolute; left: 16px; top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.kicker { display: block; font-family: var(--font-hand); font-weight: 700; font-size: 26px; color: var(--pink-2); transform: rotate(-2deg); margin-top: 14px; line-height: 1; }
.panel h1, .panel h2 { font-family: var(--font-display); font-weight: 700; margin: 4px 0 8px; line-height: 1; }
.panel h1 { font-size: clamp(38px, 11vw, 50px); }
.panel h1 span { color: var(--tangerine); text-shadow: 3px 3px 0 var(--ink); }
.panel h2 { font-size: 34px; }
.lede { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.legend__col { background: #F4EFE7; border: 2px solid var(--ink); border-radius: 14px; padding: 6px 6px 8px; }
.legend__col b { display: block; font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.legend__col:first-child b { color: #1F7A4D; }
.legend__col:last-child b { color: #B23A3A; }
.legend__row { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 40px; font-size: 24px; }
.legend__row img { height: 34px; width: auto; }
.tips { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.tips li { margin-bottom: 2px; }
.steer { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.steer__opt { border: 2.5px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 7px 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.steer__opt[aria-checked="true"] { background: var(--mint); box-shadow: 2px 2px 0 var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; padding: 12px 24px; border-radius: 999px; border: 3px solid var(--ink); background: var(--tangerine); box-shadow: 4px 4px 0 var(--ink); text-decoration: none; color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--go { width: 100%; }
.btn--paper { background: var(--paper); }
#pausePanel .btn { width: 100%; margin-top: 10px; }
.best { margin: 10px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.keys { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
@media (pointer: coarse) { .keys { display: none; } }
.receipt { background: #fff; border: 2px solid var(--ink); margin: 14px 4px 18px; padding: 12px 14px 18px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; text-align: left; transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); position: relative; }
.receipt::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -11px; height: 11px; background: radial-gradient(circle at 7px 0, #fff 6px, transparent 7px) -1px 0 / 14px 11px repeat-x; }
.receipt h3 { margin: 0 0 4px; text-align: center; font-size: 14px; letter-spacing: .12em; }
.receipt ul { list-style: none; margin: 8px 0; padding: 6px 0; border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); }
.receipt li { display: flex; justify-content: space-between; gap: 10px; }
.receipt__tot { display: flex; justify-content: space-between; font-weight: 700; }
.receipt__foot { text-align: center; margin-top: 6px; font-size: 11.5px; color: #555; }
.over__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.over__btns .btn { font-size: 17px; padding: 11px 10px; }
.over__links { margin: 14px 0 0; font-size: 14px; font-weight: 700; }
.over__links a { color: var(--sky-2); }
@media (max-height: 700px) {
  .tips { display: none; }
  .panel__card { padding: 14px 16px; }
  .lede { font-size: 15px; margin-bottom: 10px; }
}

/* ---------- opening sequence: the Petco doors ---------- */
.intro { position: absolute; inset: 0; z-index: 8; overflow: hidden; background: #BFE0FA; transition: opacity .3s; cursor: pointer; }
.intro[hidden] { display: none; }
.intro.out { opacity: 0; }
.intro__world { position: absolute; inset: 0; transform-origin: 50% 61%; }
.intro.zoom .intro__world { transform: scale(4.2); transition: transform 1.05s cubic-bezier(.55, 0, .75, .4); }
.intro.quick.zoom .intro__world { transition-duration: .7s; }
.intro__sky { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(#A9D3F5, #D9EEFD); }
.intro__sky span { position: absolute; bottom: 0; width: 13%; background: #9DB3CC; border: 2px solid rgba(29, 26, 31, .25); border-bottom: 0; }
.intro__sky span:nth-child(1) { left: 2%; height: 60%; } .intro__sky span:nth-child(2) { left: 18%; height: 85%; width: 10%; }
.intro__sky span:nth-child(3) { left: 44%; height: 70%; } .intro__sky span:nth-child(4) { left: 66%; height: 95%; width: 9%; } .intro__sky span:nth-child(5) { left: 84%; height: 65%; }
.store { position: absolute; left: 0; right: 0; top: 14%; height: 66%; background: #F3E6CF; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(185, 150, 110, .25) 22px 24px); }
.store__sign { position: absolute; left: 8%; right: 8%; top: 5%; height: 19%; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.store__sign b { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 12vw, 52px); line-height: .95; color: var(--tangerine); text-shadow: 3px 3px 0 var(--ink); letter-spacing: .04em; }
.store__sign small { font-family: var(--font-hand); font-weight: 700; font-size: clamp(15px, 4.6vw, 20px); color: var(--pink-2); line-height: 1.1; }
.store__awning { position: absolute; left: 3%; right: 3%; top: 29%; height: 7%; background: repeating-linear-gradient(90deg, var(--pink) 0 22px, var(--paper) 22px 44px); border: 3px solid var(--ink); border-radius: 6px 6px 0 0; }
.store__awning::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -11px; height: 11px; background: radial-gradient(circle at 11px 0, var(--pink) 10px, transparent 11px) 0 0 / 44px 11px repeat-x, radial-gradient(circle at 33px 0, var(--paper) 10px, transparent 11px) 0 0 / 44px 11px repeat-x; }
.store__win { position: absolute; top: 44%; width: 19%; height: 32%; background: linear-gradient(160deg, rgba(255, 255, 255, .7) 0 20%, transparent 20% 34%, rgba(255, 255, 255, .4) 34% 40%, transparent 40%), #CFE7F8; border: 3px solid var(--ink); border-radius: 6px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0 2px; padding: 4px; overflow: hidden; }
.store__win span { font-size: clamp(18px, 6vw, 26px); line-height: 1; }
.store__win em { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 9px; color: var(--pink-2); line-height: 1.1; padding: 0 3px; }
.store__win--l { left: 4%; } .store__win--r { right: 4%; }
.doorway { position: absolute; left: 27%; width: 46%; top: 40%; bottom: 0; border: 4px solid var(--ink); border-bottom: 0; background: #7A7F88; overflow: hidden; border-radius: 4px 4px 0 0; }
.inside { position: absolute; inset: 0; background: linear-gradient(#FFF8E6, #FDEBC4); }
.inside__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; transform-origin: 50% 0; transform: perspective(90px) rotateX(38deg) scale(2.2, 1); background: repeating-conic-gradient(#E9E1D3 0 25%, #F4EFE7 0 50%) 0 0 / 22px 22px; }
.inside__shelf { position: absolute; top: 6%; bottom: 0; width: 30%; background: repeating-linear-gradient(0deg, #8E97A3 0 3px, transparent 3px 22px), repeating-linear-gradient(90deg, #E5484D 0 7px, #FFE08A 7px 13px, #5B8DC4 13px 20px, #A8DCC0 20px 26px, #FF9EC4 26px 32px); z-index: 1; }
.inside__shelf--l { left: 0; clip-path: polygon(0 0, 100% 22%, 100% 70%, 0 100%); }
.inside__shelf--r { right: 0; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 70%); }
.inside__sign { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); background: var(--sky-2); color: #fff; border: 2px solid var(--ink); border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: 8px; padding: 1px 5px; white-space: nowrap; z-index: 2; }
.inside__dog { position: absolute; left: 54%; top: 42%; font-size: 11px; z-index: 2; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; border: 3px solid var(--ink); background: linear-gradient(115deg, rgba(255, 255, 255, .65) 0 16%, transparent 16% 30%, rgba(255, 255, 255, .4) 30% 36%, transparent 36%), rgba(176, 210, 238, .72); transition: transform .95s cubic-bezier(.6, 0, .25, 1); }
.door--l { left: 0; } .door--r { right: 0; }
.intro.quick .door { transition-duration: .55s; }
.intro.open .door--l { transform: translateX(-104%); }
.intro.open .door--r { transform: translateX(104%); }
.door__decal { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 9px; line-height: 1.1; color: rgba(29, 26, 31, .55); }
.door--r .door__decal { font-size: 22px; color: inherit; top: 34%; }
.door__handle { position: absolute; top: 46%; width: 5px; height: 22%; background: var(--ink); border-radius: 3px; }
.door--l .door__handle { right: 8px; } .door--r .door__handle { left: 8px; }
.sensor { position: absolute; left: 50%; top: calc(40% - 14px); width: 34px; height: 11px; margin-left: -17px; background: var(--ink); border-radius: 4px; }
.sensor::after { content: ""; position: absolute; left: 50%; top: 2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #E5484D; animation: led 1.2s steps(1) infinite; }
@keyframes led { 50% { background: #7A2A2D; } }
.intro.open .sensor::after { background: #4BE07A; box-shadow: 0 0 8px #4BE07A; animation: none; }
.mat { position: absolute; left: 31%; right: 31%; top: 80.5%; height: 4.5%; background: #C93A72; border: 3px solid var(--ink); border-radius: 4px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .2em; display: grid; place-items: center; z-index: 1; }
.sidewalk { position: absolute; left: 0; right: 0; top: 80%; bottom: 0; background: repeating-linear-gradient(90deg, #D5CFC4 0 70px, #C6BFB2 70px 72px), #D5CFC4; }
.intro__cart { position: absolute; left: 50%; top: var(--py, 82%); width: var(--pw, 110px); height: auto; transform: translate(-50%, -50%); z-index: 2; animation: cartbob .5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cartbob { 50% { transform: translate(-50%, calc(-50% - 4px)) rotate(-1.5deg); } }
.intro.go .intro__cart { animation-duration: .22s; }
.intro__bubble { position: absolute; left: 50%; top: calc(var(--py, 82%) - var(--pw, 110px) * 1.02); transform: translate(-50%, -100%) scale(.6); opacity: 0; z-index: 3; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); padding: 5px 12px; font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; transition: opacity .15s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.intro__bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.intro__bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.intro__skip { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 6px); margin: 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: rgba(29, 26, 31, .55); z-index: 3; opacity: 0; transition: opacity .3s; }
.intro.go .intro__skip { opacity: 1; }
.intro.zoom .intro__skip, .intro.zoom .intro__bubble { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .intro.zoom .intro__world { transform: none; } .intro__cart { animation: none; } }

/* accounts: score saving + leaderboard */
.acct { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.acct a, .acct button { color: var(--sky-2); font-weight: 800; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.saved { margin: -6px 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; min-height: 1.2em; }
.saved .ok { color: #1F7A4D; }
.saved .btn { width: 100%; font-size: 17px; padding: 10px 16px; background: var(--butter); }
.lb { text-align: left; background: #F4EFE7; border: 2px solid var(--ink); border-radius: 14px; padding: 8px 14px 10px; margin: 0 0 16px; }
.lb h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.lb ol { margin: 0; padding-left: 22px; font-size: 14.5px; }
.lb li { padding: 2px 0; }
.lb li span { float: right; font-family: var(--font-display); font-weight: 600; }
.lb li.me { color: var(--pink-2); font-weight: 800; }