:root {
  --night: #10162a;
  --night-2: #18233b;
  --ink: #1b2132;
  --cream: #fff2cf;
  --paper: #f7e6bd;
  --warm: #ffca71;
  --orange: #f08b5d;
  --rose: #e96e7f;
  --mint: #7fc8a9;
  --blue: #7bb7d7;
  --shadow: #090d18;
  --white: #fffaf0;
  --pixel-shadow: 4px 4px 0 var(--shadow);
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

html {
  background: var(--night);
  overscroll-behavior: none;
}

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 18%, rgba(62, 82, 128, .36), transparent 35%),
    linear-gradient(180deg, var(--night-2), var(--night));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: none;
  min-height: 100dvh;
  overflow: hidden;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }

.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  z-index: 100;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: screen;
}

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.pixel-frame {
  position: relative;
  border: 3px solid var(--ink);
  box-shadow:
    0 0 0 3px var(--cream),
    0 0 0 6px var(--ink),
    9px 10px 0 rgba(4, 8, 18, .55);
}

.sound-toggle {
  position: fixed;
  z-index: 90;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border: 2px solid var(--cream);
  background: rgba(16, 22, 42, .76);
  color: var(--cream);
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
}

.sound-toggle.is-on { color: var(--warm); border-color: var(--warm); }

/* Boot */
.boot-screen {
  padding: 24px;
  background:
    linear-gradient(rgba(16,22,42,.16), rgba(16,22,42,.82)),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.025) 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.025) 32px);
}

.boot-card {
  width: min(660px, calc(100vw - 42px));
  min-height: 400px;
  padding: 38px 34px 30px;
  text-align: center;
  background: rgba(20, 29, 50, .94);
}

.tiny-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  color: #a8b7cf;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: var(--mint);
  box-shadow: 0 0 0 2px #2e6d5a, 0 0 12px var(--mint);
  animation: blink 1.4s steps(1) infinite;
}

.logo {
  position: relative;
  margin: 28px 0 8px;
  color: var(--warm);
  font-size: clamp(34px, 8vw, 62px);
  line-height: .95;
  letter-spacing: -.06em;
  text-shadow: 4px 4px 0 #a84b4f, 8px 8px 0 #34213e;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--blue);
  opacity: 0;
  transform: translateX(2px);
  clip-path: inset(42% 0 40% 0);
  animation: glitch 5s steps(1) infinite;
}

.boot-cat-wrap { margin: 34px auto 20px; width: 92px; position: relative; }
.pixel-cat { display: block; width: 72px; color: var(--cream); image-rendering: pixelated; }
.boot-cat { width: 88px; margin: auto; animation: catFloat 2.2s steps(4, end) infinite; }
.cat-eye { fill: var(--night); }
.cat-nose { fill: var(--rose); }
.cat-shadow { display:block; width:58px; height:7px; margin:5px auto 0; background:rgba(0,0,0,.35); animation: shadowPulse 2.2s steps(4,end) infinite; }

.boot-copy {
  min-height: 44px;
  margin: 12px auto 26px;
  max-width: 460px;
  font-size: clamp(14px, 3vw, 17px);
  line-height: 1.5;
  color: #dfe4eb;
}

.pixel-button {
  appearance: none;
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 13px 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--pixel-shadow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s linear, box-shadow .08s linear, filter .18s ease;
}

.pixel-button:hover { filter: brightness(1.06); }
.pixel-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.pixel-button.primary { background: var(--warm); }
.pixel-button.ghost { background: #d7d7cb; color: #3f4552; }
.pixel-button.big { min-width: 220px; display: inline-flex; justify-content: center; gap: 14px; }
.button-arrow { animation: arrowNudge 1s steps(2,end) infinite; }
.boot-hint { margin: 24px 0 0; font-size: 10px; color: #7f8ea5; }

/* Quest world */
.quest-screen { background: linear-gradient(#121b35 0 64%, #1a1a22 64%); }
.night-sky { position:absolute; inset:0; overflow:hidden; }
.moon {
  position:absolute; top:8%; right:9%; width:62px; height:62px; border:0; border-radius:0; background:var(--cream);
  box-shadow: -10px 10px 0 #d6bd88, 0 0 28px rgba(255,242,207,.18); cursor:pointer;
}
.moon.cat-moon::before { content:"=^.^="; position:absolute; inset:0; display:grid; place-items:center; color:var(--night); font-size:11px; font-weight:900; }
.star { position:absolute; width:4px; height:4px; background:var(--cream); opacity:.7; animation: twinkle 2.8s steps(2,end) infinite; }
.star-1{left:8%;top:12%}.star-2{left:18%;top:22%}.star-3{left:31%;top:10%}.star-4{right:24%;top:18%}.star-5{right:39%;top:7%}.star-6{left:52%;top:28%}

.city { position:absolute; inset:auto 0 0; height:47%; pointer-events:none; }
.street { position:absolute; inset:auto 0 0; height:34%; background:#25242c; border-top:5px solid #12131a; }
.street::after { content:""; position:absolute; left:0; right:0; top:46%; height:5px; background:repeating-linear-gradient(90deg, #686151 0 40px, transparent 40px 76px); opacity:.45; }
.cafe { position:absolute; z-index:3; left:50%; bottom:28%; transform:translateX(-50%); width:min(520px, 58vw); height:210px; background:#503947; border:5px solid #201c2a; box-shadow:12px 0 0 #2a2734; }
.cafe-sign { position:absolute; left:50%; top:-42px; transform:translateX(-50%); padding:9px 23px; background:#f5d491; color:#392b38; border:4px solid #201c2a; font-weight:900; letter-spacing:.18em; box-shadow:4px 4px 0 #201c2a; }
.awning { position:absolute; left:7%; right:7%; top:13px; height:27px; background:repeating-linear-gradient(90deg, var(--cream) 0 38px, var(--rose) 38px 76px); border:4px solid #201c2a; }
.window { position:absolute; top:58px; width:31%; height:92px; background:linear-gradient(#ffcf78,#e99958); border:5px solid #201c2a; box-shadow: inset 0 0 28px rgba(255,255,255,.22); }
.window::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; background:#5b3f42; }
.window-left{left:7%}.window-right{right:7%}
.door { position:absolute; left:50%; bottom:0; width:17%; height:130px; transform:translateX(-50%); background:#2d2c36; border:5px solid #201c2a; }
.door-light { position:absolute; right:9px; top:52%; width:6px; height:6px; background:var(--warm); box-shadow:0 0 9px var(--warm); }
.table { position:absolute; left:17%; right:17%; bottom:15px; height:8px; background:#744c3d; }
.plant { position:absolute; left:50%; bottom:8px; width:16px; height:24px; background:#496f58; box-shadow:-10px -8px 0 #5a876a, 10px -12px 0 #5a876a; }
.building { position:absolute; bottom:28%; background:#202638; border-top:5px solid #101522; }
.building-left { left:0; width:24%; height:190px; }
.building-right{right:0;width:23%;height:235px}
.building span { display:block; width:28px; height:34px; background:#d19c5c; opacity:.45; margin:24px 18px; box-shadow:52px 0 0 #332f39, 104px 0 0 #b88454; }

.quest-layout { position:relative; z-index:20; width:100%; padding:75px 22px 160px; display:grid; place-items:center; }
.quest-card { width:min(610px, calc(100vw - 38px)); padding:29px 28px 25px; text-align:center; background:rgba(255,242,207,.96); color:var(--ink); }
.quest-label { display:inline-block; margin:-49px auto 18px; padding:8px 16px; background:var(--rose); color:var(--white); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-size:12px; font-weight:900; letter-spacing:.13em; }
.quest-icon { font-size:34px; filter:saturate(.8); }
.quest-card h2 { margin:9px 0 12px; font-size:clamp(30px, 7vw, 48px); letter-spacing:-.055em; }
.quest-description { margin:0 auto; max-width:480px; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.5; color:#4d4d55; }
.reward-row { margin:21px auto 8px; padding:11px 13px; max-width:470px; display:flex; gap:12px; justify-content:center; align-items:center; background:#ead5a8; border:2px dashed #94754d; font-size:11px; }
.reward-row span { color:#81613c; letter-spacing:.11em; font-weight:800; }
.reward-row strong { text-transform:none; }
.choice-zone { position:relative; width:min(480px,100%); height:112px; margin:13px auto 0; touch-action:none; }
.yes-button,.no-button { position:absolute; top:34px; min-width:160px; }
.yes-button { left:8%; background:var(--mint)!important; z-index:4; }
.no-button { left:58%; z-index:5; transition:left .16s cubic-bezier(.2,.9,.3,1.25), top .16s cubic-bezier(.2,.9,.3,1.25), transform .12s ease, font-size .12s ease; will-change:left,top; }
.no-button.is-tiny { transform:scale(.72); }
.reaction-text { min-height:20px; margin:5px 0 0; font-size:14px; color:#725f51; }
.helper-cat { position:absolute; width:62px; left:-44px; bottom:16px; transform:translateX(-60px) rotate(-8deg); opacity:0; transition:transform .35s steps(4,end), opacity .2s linear; }
.helper-cat .pixel-cat { width:62px; color:#c2755f; }
.helper-cat.is-visible { opacity:1; transform:translateX(0) rotate(3deg); }
.helper-cat.is-pouncing { animation:pounce .38s steps(3,end); }

.roof-cat { position:absolute; z-index:8; left:calc(50% + 185px); bottom:calc(28% + 194px); border:0; padding:0; background:transparent; color:#d7a77b; cursor:pointer; }
.roof-cat .pixel-cat { width:47px; }
.speech-bubble { position:absolute; display:none; left:50%; bottom:57px; transform:translateX(-50%); width:max-content; max-width:210px; padding:7px 9px; background:var(--cream); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-size:10px; white-space:nowrap; }
.speech-bubble.show { display:block; animation:bubbleIn .18s steps(2,end); }

/* Success */
.success-screen {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,202,113,.25), transparent 28%),
    linear-gradient(180deg,#1d2940,#12182b);
  padding:24px 20px calc(24px + var(--safe-bottom));
}
#confetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.success-glow { position:absolute; width:min(70vw,650px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,205,113,.18),transparent 68%); animation:glowPulse 2.8s ease-in-out infinite; }
.success-card { position:relative; z-index:3; width:min(610px,calc(100vw - 40px)); padding:32px 26px 27px; text-align:center; color:var(--ink); background:rgba(255,242,207,.97); }
.cups { display:flex; justify-content:center; align-items:center; gap:16px; height:95px; margin-top:-4px; }
.cup { position:relative; width:58px; height:42px; background:#e88961; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.cup::after { content:""; position:absolute; right:-17px; top:7px; width:15px; height:19px; border:4px solid var(--ink); border-left:0; }
.cup-right { transform:scaleX(-1); background:var(--blue); }
.steam { position:absolute; top:-27px; width:4px; height:17px; background:#9b8c7b; opacity:.55; animation:steam 1.5s steps(3,end) infinite; }
.steam.s1{left:17px}.steam.s2{left:34px;animation-delay:.45s}
.pixel-heart { color:var(--rose); font-size:28px; animation:heartBeat .8s steps(2,end) infinite; }
.quest-complete { display:inline-block; padding:6px 11px; background:var(--mint); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-size:10px; font-weight:900; letter-spacing:.14em; }
.success-card h2 { margin:17px 0 9px; font-size:clamp(31px,7vw,48px); letter-spacing:-.06em; }
.success-lead { max-width:440px; margin:0 auto; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; color:#4d4d55; }
.cat-verdict { margin:14px 0 22px; color:#8b6358; font-size:11px; }
.timing-block { border-top:2px dashed #b99768; padding-top:17px; }
.timing-label { display:block; margin-bottom:12px; font-size:11px; letter-spacing:.05em; }
.timing-buttons { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.timing-button { padding:10px 12px; font-size:11px; background:#f0dcae; }
.timing-button.wide { background:#dbc8ab; }
.final-message { padding:15px; background:#d9e7c9; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.final-message strong,.final-message span { display:block; }
.final-message span { margin-top:6px; font-family:system-ui,sans-serif; font-size:13px; }
.party-cats { display:flex; justify-content:space-between; gap:8px; margin-top:21px; color:#a75f54; font-size:12px; overflow:hidden; }
.footer-note { position:absolute; z-index:4; bottom:max(8px,env(safe-area-inset-bottom)); margin:0; font-size:9px; color:#6f7d96; }

@keyframes blink { 50%{opacity:.35} }
@keyframes glitch { 0%,94%,100%{opacity:0}95%{opacity:.75;transform:translateX(3px)}96%{opacity:.55;transform:translateX(-3px)}97%{opacity:0} }
@keyframes catFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes shadowPulse { 0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)} }
@keyframes arrowNudge { 50%{transform:translateX(5px)} }
@keyframes twinkle { 50%{opacity:.2;transform:scale(.5)} }
@keyframes pounce { 0%{transform:translateX(0) rotate(3deg)}50%{transform:translate(42px,-22px) rotate(13deg)}100%{transform:translateX(0) rotate(3deg)} }
@keyframes bubbleIn { from{transform:translate(-50%,5px);opacity:0}to{transform:translate(-50%,0);opacity:1} }
@keyframes steam { 0%{transform:translateY(4px);opacity:0}30%{opacity:.55}100%{transform:translateY(-10px);opacity:0} }
@keyframes heartBeat { 50%{transform:scale(1.2)} }
@keyframes glowPulse { 50%{transform:scale(1.08);opacity:.7} }

@media (max-width: 720px) {
  .app-shell { min-height:520px; }
  .boot-card { min-height:440px; padding:30px 20px 24px; }
  .boot-cat-wrap { margin:24px auto 17px; }
  .quest-layout { padding:74px 14px 125px; }
  .quest-card { padding:25px 16px 20px; }
  .quest-description { font-size:14px; }
  .reward-row { flex-direction:column; gap:4px; }
  .choice-zone { height:112px; }
  .yes-button,.no-button { min-width:132px; padding:12px 10px; font-size:11px; }
  .yes-button { left:4%; }
  .no-button { left:56%; }
  .helper-cat { left:-18px; bottom:-12px; }
  .cafe { width:76vw; height:155px; bottom:25%; }
  .cafe-sign { top:-33px; padding:7px 13px; font-size:10px; }
  .awning { height:21px; }
  .window { top:47px; height:67px; }
  .door { height:96px; }
  .building { bottom:25%; }
  .roof-cat { left:auto; right:7%; bottom:calc(25% + 142px); }
  .moon { width:47px;height:47px; top:7%; right:8%; }
  .success-card { padding:24px 15px 20px; }
  .cups { height:82px; }
}

@media (max-height: 690px) {
  .boot-card { min-height:auto; padding-top:24px; padding-bottom:20px; }
  .boot-cat-wrap { margin:16px auto 10px; }
  .boot-copy { margin-bottom:17px; }
  .quest-layout { padding-top:52px; padding-bottom:100px; }
  .quest-card h2 { margin-top:5px; }
  .reward-row { margin-top:13px; }
  .choice-zone { height:92px; }
  .yes-button,.no-button { top:22px; }
  .success-card { transform:scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
  .screen { transition:none; }
}

/* ===== Coffee Quest v2: extra motion, cats and full-screen chase ===== */

.quest-screen.is-active .quest-card {
  animation: questCardDrop .72s steps(7,end) both;
}

.quest-screen.is-active .cafe {
  animation: cafeWake .8s steps(5,end) both;
}

.quest-intro {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  background: rgba(9, 13, 24, .88);
  pointer-events: none;
  opacity: 1;
  transition: opacity .28s ease, visibility .28s ease;
}

.quest-intro.is-gone {
  opacity: 0;
  visibility: hidden;
}

.quest-intro-box {
  width: min(420px, calc(100vw - 48px));
  padding: 24px 22px;
  text-align: center;
  color: var(--cream);
  background: #151e35;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 4px var(--ink), 10px 10px 0 rgba(0,0,0,.38);
  animation: introBox .8s steps(6,end) both;
}

.quest-intro-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--mint);
  font-size: 10px;
  letter-spacing: .18em;
}

.quest-intro-box strong {
  color: var(--warm);
  font-size: clamp(24px, 7vw, 38px);
  letter-spacing: -.04em;
  text-shadow: 3px 3px 0 #8c4551;
}

.quest-intro-progress {
  height: 10px;
  margin-top: 20px;
  padding: 2px;
  border: 2px solid #8995aa;
}

.quest-intro-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mint);
  animation: introLoad 1.05s steps(8,end) .12s forwards;
}

.shooting-star {
  position: absolute;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cream));
  opacity: 0;
  transform: rotate(-28deg);
  animation: shootingStar 6.8s steps(7,end) infinite;
}

.shooting-star-1 { left: 15%; top: 15%; animation-delay: 1.2s; }
.shooting-star-2 { left: 55%; top: 24%; animation-delay: 4.8s; }

.cafe-sign { animation: signGlow 2.8s steps(2,end) infinite; }
.window { animation: windowGlow 3.6s steps(3,end) infinite; }
.window-right { animation-delay: 1.1s; }
.door-light { animation: doorBlink 2.2s steps(2,end) infinite; }

.window-cat {
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: 9px;
  width: 34px;
  height: 31px;
  background: #2b2630;
  animation: windowCatPeek 4.4s steps(5,end) infinite;
  transform-origin: bottom center;
}

.window-cat-ear {
  position: absolute;
  top: -8px;
  width: 12px;
  height: 12px;
  background: #2b2630;
  transform: rotate(45deg);
}

.window-cat-ear.left { left: 2px; }
.window-cat-ear.right { right: 2px; }

.window-cat-face {
  position: absolute;
  inset: 0;
}

.window-cat-face i {
  position: absolute;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--warm);
  box-shadow: 0 0 6px rgba(255,202,113,.65);
}

.window-cat-face i:first-child { left: 7px; }
.window-cat-face i:last-child { right: 7px; }

.cat-radar {
  position: absolute;
  z-index: 21;
  left: max(15px, env(safe-area-inset-left));
  top: max(17px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: #9eacc2;
  background: rgba(11,17,31,.68);
  border: 2px solid #38425a;
  font-size: 9px;
  letter-spacing: .06em;
}

.radar-dot {
  width: 6px;
  height: 6px;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  animation: radarPulse 1.1s steps(2,end) infinite;
}

.roof-cat {
  animation: roofCatIdle 2.6s steps(4,end) infinite;
  transform-origin: bottom center;
}

.roof-cat.cat-boop, .street-cat.cat-boop { animation: catBoop .36s steps(3,end); }

.street-cat {
  position: absolute;
  z-index: 10;
  left: 7%;
  bottom: 12%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #c68466;
  cursor: pointer;
  animation: streetCatIdle 3.1s steps(5,end) infinite;
}

.street-cat .pixel-cat { width: 52px; }
.street-cat .speech-bubble { bottom: 59px; left: 72%; }

.card-peek-cat {
  position: absolute;
  z-index: -1;
  right: 22px;
  top: -31px;
  width: 54px;
  height: 38px;
  background: #c2755f;
  border: 3px solid var(--ink);
  animation: cardPeek 3.8s steps(5,end) infinite;
}

.card-peek-cat span,
.card-peek-cat::before,
.card-peek-cat::after {
  content: "";
  position: absolute;
  background: #c2755f;
}

.card-peek-cat::before,
.card-peek-cat::after {
  top: -9px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--ink);
  transform: rotate(45deg);
}

.card-peek-cat::before { left: 2px; }
.card-peek-cat::after { right: 2px; }
.card-peek-cat span { inset: 0; z-index: 2; }
.card-peek-cat i {
  position: absolute;
  z-index: 3;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--night);
}
.card-peek-cat i:nth-of-type(1) { left: 10px; }
.card-peek-cat i:nth-of-type(2) { right: 10px; }

.walking-cat {
  position: fixed;
  z-index: 9;
  left: -95px;
  bottom: max(31px, calc(env(safe-area-inset-bottom) + 18px));
  width: 78px;
  height: 43px;
  opacity: 0;
  pointer-events: none;
  color: #a9715a;
}

.walking-cat.is-walking {
  opacity: 1;
  animation: catWalkAcross 6.3s steps(30,end) both;
}

.walk-body {
  position: absolute;
  left: 16px;
  bottom: 3px;
  width: 43px;
  height: 25px;
  background: currentColor;
  box-shadow: -4px 20px 0 -1px currentColor, 31px 20px 0 -1px currentColor;
}

.walk-head {
  position: absolute;
  right: 0;
  bottom: 13px;
  width: 28px;
  height: 28px;
  background: currentColor;
}

.walk-head::before,
.walk-head::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 11px;
  height: 11px;
  background: currentColor;
  transform: rotate(45deg);
}

.walk-head::before { left: 1px; }
.walk-head::after { right: 1px; }
.walk-head i {
  position: absolute;
  z-index: 2;
  top: 9px;
  width: 4px;
  height: 4px;
  background: var(--warm);
}
.walk-head i:first-child { left: 6px; }
.walk-head i:last-child { right: 6px; }

.walk-tail {
  position: absolute;
  left: 0;
  bottom: 16px;
  width: 24px;
  height: 7px;
  background: currentColor;
  transform-origin: right center;
  animation: tailWag .42s steps(2,end) infinite;
}

.no-button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.no-button.is-fleeing {
  position: fixed;
  z-index: 84;
  min-width: 154px;
  transition:
    left .24s steps(6,end),
    top .24s steps(6,end),
    transform .14s steps(2,end),
    opacity .18s linear,
    filter .18s linear;
  will-change: left, top, transform;
}

.no-button.is-fleeing::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.no-button.is-being-stolen {
  z-index: 86;
  filter: saturate(.7);
}

.no-button.is-tiny { transform: scale(.72) rotate(-2deg); }

.no-button.is-disintegrating {
  animation: noCrash .5s steps(5,end) forwards;
}

.button-thief-cat {
  position: fixed;
  z-index: 88;
  display: none;
  width: 64px;
  color: #d78a68;
  pointer-events: none;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.4));
}

.button-thief-cat.is-active { display: block; }
.button-thief-cat .pixel-cat { width: 62px; animation: thiefRun .3s steps(3,end) infinite; }
.thief-label {
  position: absolute;
  left: 7px;
  top: -16px;
  padding: 2px 4px;
  color: var(--warm);
  background: var(--ink);
  font-size: 8px;
  transform: rotate(-5deg);
}

.no-pixel-burst {
  position: fixed;
  z-index: 90;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.no-pixel-burst i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #c8c8bd;
  border: 1px solid #3f4552;
  animation: pixelExplode .72s steps(6,end) var(--delay) forwards;
}

.success-screen.celebrate .success-card {
  animation: successPop .78s steps(7,end) both;
}

.success-screen.celebrate .cup-left { animation: cupClinkLeft 1.05s steps(6,end) .16s both; }
.success-screen.celebrate .cup-right { animation: cupClinkRight 1.05s steps(6,end) .16s both; }
.success-screen.celebrate .quest-complete { animation: stampIn .48s steps(4,end) .55s both; }

.heart-burst {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 58%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.heart-burst i {
  position: absolute;
  color: var(--rose);
  font-style: normal;
  font-size: 18px;
  opacity: 0;
  text-shadow: 2px 2px 0 #572b40;
}

.heart-burst.bursting i {
  animation: heartFly 1.55s steps(9,end) var(--d) both;
}

.flower-bed {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  overflow: hidden;
  pointer-events: none;
}

.flower-bed i {
  position: absolute;
  bottom: -18px;
  width: 7px;
  height: 58px;
  background: #588365;
  transform-origin: bottom center;
  animation: flowerGrow 1.15s steps(8,end) .55s both;
}

.flower-bed i::before,
.flower-bed i::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 15px;
  height: 15px;
  background: var(--rose);
  box-shadow: 10px 0 0 var(--warm), 5px -9px 0 var(--rose);
}

.flower-bed i::before { left: -7px; }
.flower-bed i::after { display: none; }
.flower-bed i:nth-child(1) { left: 5%; height: 47px; animation-delay: .35s; }
.flower-bed i:nth-child(2) { left: 16%; height: 66px; animation-delay: .62s; }
.flower-bed i:nth-child(3) { left: 29%; height: 42px; animation-delay: .48s; }
.flower-bed i:nth-child(4) { left: 42%; height: 71px; animation-delay: .72s; }
.flower-bed i:nth-child(5) { right: 42%; height: 52px; animation-delay: .4s; }
.flower-bed i:nth-child(6) { right: 28%; height: 68px; animation-delay: .67s; }
.flower-bed i:nth-child(7) { right: 15%; height: 45px; animation-delay: .5s; }
.flower-bed i:nth-child(8) { right: 5%; height: 62px; animation-delay: .76s; }

.success-cat-orbit {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.orbit-cat {
  position: absolute;
  color: #d89a74;
  font-weight: 900;
  font-size: 17px;
  text-shadow: 3px 3px 0 #0b0e18;
  opacity: 0;
}

.success-screen.celebrate .orbit-cat { opacity: 1; }
.cat-a { left: 7%; top: 18%; animation: orbitCatA 4.2s steps(18,end) .5s infinite; }
.cat-b { right: 6%; top: 31%; animation: orbitCatB 4.8s steps(20,end) .8s infinite; }
.cat-c { left: 13%; bottom: 15%; animation: orbitCatC 3.9s steps(16,end) 1s infinite; }

.party-cats span { animation: partyCat .8s steps(3,end) infinite; }
.party-cats span:nth-child(2) { animation-delay: .18s; }
.party-cats span:nth-child(3) { animation-delay: .36s; }

@keyframes questCardDrop {
  0% { opacity: 0; transform: translateY(-24px) scale(.96); }
  55% { opacity: 1; transform: translateY(5px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cafeWake {
  0% { opacity: .2; filter: brightness(.6); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes introBox {
  0% { opacity: 0; transform: scale(.75) translateY(20px); }
  65% { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes introLoad { to { width: 100%; } }

@keyframes shootingStar {
  0%, 78%, 100% { opacity: 0; transform: translate(0,0) rotate(-28deg); }
  81% { opacity: .9; }
  89% { opacity: 0; transform: translate(180px,92px) rotate(-28deg); }
}

@keyframes signGlow { 50% { filter: brightness(1.18); box-shadow: 4px 4px 0 #201c2a, 0 0 18px rgba(245,212,145,.22); } }
@keyframes windowGlow { 50% { filter: brightness(1.07); } }
@keyframes doorBlink { 50% { opacity: .5; } }
@keyframes windowCatPeek { 0%,15%,82%,100% { transform: translateY(27px); } 25%,70% { transform: translateY(0); } }
@keyframes radarPulse { 50% { opacity: .3; transform: scale(.7); } }
@keyframes roofCatIdle { 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes streetCatIdle { 50% { transform: translateY(-2px) rotate(-2deg); } }
@keyframes catBoop { 50% { transform: scale(.88) translateY(4px); } }
@keyframes cardPeek { 0%,15%,85%,100% { transform: translateY(20px); } 30%,70% { transform: translateY(0); } }
@keyframes catWalkAcross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 180px)); } }
@keyframes tailWag { 50% { transform: rotate(-24deg); } }
@keyframes thiefRun { 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes noCrash { 0% { opacity: 1; transform: scale(.72); } 45% { opacity: .75; transform: scale(.84) rotate(5deg); } 100% { opacity: 0; transform: scale(.18) rotate(-14deg); filter: blur(2px); } }
@keyframes pixelExplode { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.4); } }

@keyframes successPop {
  0% { opacity: 0; transform: scale(.62) rotate(-2deg); }
  58% { opacity: 1; transform: scale(1.045) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes cupClinkLeft { 0% { transform: translateX(-28px) rotate(-10deg); } 65% { transform: translateX(10px) rotate(5deg); } 100% { transform: translateX(0) rotate(0); } }
@keyframes cupClinkRight { 0% { transform: scaleX(-1) translateX(-28px) rotate(-10deg); } 65% { transform: scaleX(-1) translateX(10px) rotate(5deg); } 100% { transform: scaleX(-1) translateX(0) rotate(0); } }
@keyframes stampIn { from { opacity: 0; transform: scale(2.1) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes heartFly { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(1.2) rotate(var(--r)); } }
@keyframes flowerGrow { from { transform: translateY(85px) scaleY(.2); } to { transform: translateY(0) scaleY(1); } }
@keyframes orbitCatA { 0%,100% { transform: translate(0,0) rotate(-7deg); } 50% { transform: translate(34px,-18px) rotate(7deg); } }
@keyframes orbitCatB { 0%,100% { transform: translate(0,0) rotate(6deg); } 50% { transform: translate(-38px,20px) rotate(-6deg); } }
@keyframes orbitCatC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,-28px); } }
@keyframes partyCat { 50% { transform: translateY(-6px); } }

@media (max-width: 720px) {
  .cat-radar { top: max(13px, env(safe-area-inset-top)); font-size: 8px; padding: 6px 7px; }
  .street-cat { left: 4%; bottom: 9%; }
  .street-cat .pixel-cat { width: 43px; }
  .card-peek-cat { right: 17px; transform: scale(.86); transform-origin: bottom right; }
  .no-button.is-fleeing { min-width: 138px; }
  .button-thief-cat .pixel-cat { width: 54px; }
  .success-cat-orbit .orbit-cat { font-size: 13px; }
  .cat-a { left: 2%; top: 12%; }
  .cat-b { right: 2%; top: 21%; }
  .cat-c { left: 4%; bottom: 10%; }
  .flower-bed { height: 72px; opacity: .75; }
}

@media (max-height: 690px) {
  .cat-radar { display: none; }
  .street-cat { bottom: 6%; }
  .flower-bed { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .walking-cat, .shooting-star, .success-cat-orbit, .heart-burst { display: none !important; }
  .no-button.is-fleeing { transition: left .01ms linear, top .01ms linear; }
}

/* v2 polish */
.quest-card { z-index: 0; }
.street-cat .speech-bubble { left: 0; transform: none; }
.street-cat .speech-bubble.show { animation: streetBubbleIn .18s steps(2,end); }
@keyframes streetBubbleIn { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 720px) {
  .roof-cat .speech-bubble {
    left: auto;
    right: -2px;
    transform: none;
  }
  .roof-cat .speech-bubble.show { animation: streetBubbleIn .18s steps(2,end); }
}

/* ===== Coffee Quest v3: safe viewport, director cat, A.D. details, YES beat and ticket ===== */

.cafe-sign small {
  position: absolute;
  left: 5px;
  top: 3px;
  font-size: 6px;
  line-height: 1;
  letter-spacing: .05em;
  opacity: .72;
}

.cafe-sign span { display: block; }

.no-button.is-fleeing {
  max-width: min(220px, calc(100vw - 52px));
  white-space: nowrap;
  contain: layout paint;
}

.director-cat {
  position: fixed;
  z-index: 87;
  left: 22px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: #c97f65;
  opacity: 0;
  transform: translateX(-150%) translateY(12px);
  pointer-events: none;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.38));
}

.director-cat.is-active {
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition: transform .42s steps(6,end), opacity .08s linear;
}

.director-cat-sprite {
  position: relative;
  width: 66px;
  flex: 0 0 66px;
  animation: directorBob .55s steps(3,end) infinite;
}

.director-cat-sprite .pixel-cat { width: 64px; }

.director-beret {
  position: absolute;
  left: 14px;
  top: -5px;
  width: 35px;
  height: 9px;
  background: #202231;
  box-shadow: 7px -5px 0 #202231;
  transform: rotate(-7deg);
}

.director-board {
  position: relative;
  width: min(290px, calc(100vw - 120px));
  min-height: 75px;
  padding: 9px 13px 10px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-1deg);
}

.director-kicker {
  display: block;
  margin-bottom: 6px;
  color: #b94f5e;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.director-copy {
  display: block;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

.director-arrow {
  position: absolute;
  right: -33px;
  top: 16px;
  display: none;
  color: var(--warm);
  font-size: 34px;
  font-style: normal;
  text-shadow: 3px 3px 0 var(--shadow);
}

.director-cat.points-to-yes .director-arrow {
  display: block;
  animation: directorPoint .55s steps(2,end) infinite;
}

.yes-pause {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 10, 19, .96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.yes-pause.is-active {
  opacity: 1;
  visibility: visible;
}

.yes-pause-box {
  width: min(520px, calc(100vw - 46px));
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  text-align: center;
  color: var(--cream);
  border: 3px solid #3b4965;
  box-shadow: 0 0 0 3px #0b0e18, 9px 9px 0 rgba(0,0,0,.4);
  background: repeating-linear-gradient(0deg, #121a2d 0 3px, #10182a 3px 6px);
}

.yes-pause-dots {
  min-height: 36px;
  font-size: 30px;
  letter-spacing: .25em;
  animation: pauseDots .55s steps(3,end) infinite;
}

.yes-pause strong,
.yes-pause b,
.yes-pause small {
  opacity: 0;
  transform: translateY(7px) scale(.95);
}

.yes-pause strong {
  color: var(--warm);
  font-size: clamp(27px, 8vw, 54px);
  letter-spacing: .12em;
}

.yes-pause b {
  color: var(--mint);
  font-size: clamp(24px, 7vw, 46px);
  letter-spacing: .05em;
}

.yes-pause small {
  color: #9dafcb;
  font-size: 10px;
  letter-spacing: .16em;
}

.yes-pause.show-wait .yes-pause-dots { opacity: .18; }
.yes-pause.show-wait strong { opacity: 1; transform: none; animation: yesBeatIn .28s steps(3,end) both; }
.yes-pause.show-yes strong { opacity: .25; }
.yes-pause.show-yes b,
.yes-pause.show-yes small { opacity: 1; transform: none; animation: yesBeatIn .34s steps(4,end) both; }
.yes-pause.show-yes small { animation-delay: .12s; }

.cup-mark {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 7px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .04em;
  color: rgba(27,33,50,.72);
}

.cup-right .cup-mark { transform: scaleX(-1); }

.date-ticket[hidden] { display: none !important; }
.date-ticket {
  position: relative;
  margin: 17px auto 3px;
  width: min(470px, 100%);
  color: #252b3a;
  background: #f4d99d;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  text-align: left;
  overflow: visible;
}

.date-ticket.is-issued { animation: ticketIssue .7s steps(7,end) both; }

.ticket-cut {
  position: absolute;
  z-index: 2;
  top: 52%;
  width: 19px;
  height: 19px;
  margin-top: -10px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255,242,207,.97);
}
.ticket-cut-left { left: -12px; }
.ticket-cut-right { right: -12px; }

.ticket-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-bottom: 2px dashed #735e43;
  font-size: 9px;
  letter-spacing: .12em;
}
.ticket-topline b { color: #a44f5b; }

.ticket-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 5px;
  padding: 14px 15px 12px;
}
.ticket-cups {
  grid-row: 1 / span 2;
  font-size: 23px;
  white-space: nowrap;
}
.ticket-main strong {
  font-size: clamp(13px, 3.8vw, 18px);
  letter-spacing: .045em;
}
.ticket-timing {
  font-size: 9px;
  letter-spacing: .07em;
  color: #665a4c;
}
.ticket-code {
  padding: 7px 13px;
  background: rgba(27,33,50,.08);
  border-top: 2px dashed #735e43;
  font-size: 8px;
  letter-spacing: .08em;
  text-align: center;
}

@keyframes directorBob { 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes directorPoint { 50% { transform: translateX(9px); } }
@keyframes pauseDots { 50% { opacity: .35; } }
@keyframes yesBeatIn {
  from { opacity: 0; transform: scale(.76) translateY(9px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ticketIssue {
  0% { opacity: 0; transform: translateY(-24px) rotate(-2deg) scale(.94); }
  62% { opacity: 1; transform: translateY(5px) rotate(1deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 720px) {
  .director-cat {
    left: 12px;
    bottom: 92px;
    gap: 5px;
  }
  .director-cat-sprite { width: 50px; flex-basis: 50px; }
  .director-cat-sprite .pixel-cat { width: 49px; }
  .director-board {
    width: min(245px, calc(100vw - 78px));
    min-height: 67px;
    padding: 8px 9px;
  }
  .director-kicker { font-size: 13px; margin-bottom: 4px; }
  .director-copy { font-size: 11px; }
  .director-arrow { right: -27px; font-size: 28px; }
  .date-ticket { width: calc(100% - 4px); }
  .ticket-main { column-gap: 9px; padding-left: 11px; padding-right: 11px; }
  .ticket-cups { font-size: 18px; }
  .ticket-main strong { font-size: 12px; }
  .ticket-timing { font-size: 8px; }
  .cafe-sign small { font-size: 5px; }
}

@media (max-height: 650px) {
  .director-cat { bottom: 72px; transform-origin: left bottom; }
  .director-cat.is-active { transform: scale(.86); }
  .yes-pause-box { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .director-cat-sprite, .director-arrow, .yes-pause-dots { animation: none !important; }
}