:root {
  --ink: #3a2416;
  --muted: #76533c;
  --cream: #fff4da;
  --paper: #fff9eb;
  --gold: #f3b64b;
  --orange: #df7d2c;
  --red: #d94134;
  --green: #6fa86a;
  --blue: #84b7d6;
  --shadow: rgba(58, 36, 22, 0.22);
  --line: rgba(58, 36, 22, 0.18);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: radial-gradient(circle at top, #fff8e8 0%, #f3c765 42%, #d88436 100%); }
body {
  margin: 0;
  font-family: ui-rounded, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  min-height: 100vh;
}

.app-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 18px; }
.hero { text-align: center; padding: 20px 0 12px; }
.eyebrow { margin: 0 0 8px; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.76rem; color: var(--muted); font-weight: 800; }
h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: 0.9; text-shadow: 0 4px 0 rgba(255,255,255,0.35); }
.subtitle { margin: 12px auto 0; max-width: 620px; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); }

.dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.mini-card, .progress-wrap, .scene-card, .controls, .site-footer .wag-count {
  background: rgba(255, 249, 235, 0.9);
  border: 3px solid rgba(58, 36, 22, 0.16);
  box-shadow: 0 16px 34px var(--shadow), inset 0 2px 0 rgba(255,255,255,0.75);
}
.mini-card { border-radius: 24px; min-height: 122px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.card-label { text-transform: uppercase; font-weight: 900; letter-spacing: 0.08em; font-size: 0.76rem; color: var(--muted); }
.mini-card strong { font-size: clamp(1.65rem, 5vw, 3rem); line-height: 1.1; margin-top: 4px; }
.mini-card small { color: var(--muted); margin-top: 5px; }

.progress-wrap { border-radius: 24px; padding: 16px 18px 18px; margin-bottom: 18px; }
.progress-header, .progress-scale { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; }
.progress-track { position: relative; height: 30px; border-radius: 999px; background: #ead7ad; border: 2px solid rgba(58,36,22,.25); overflow: visible; margin: 12px 0 7px; }
.progress-fill { width: 0%; height: 100%; border-radius: inherit; background: repeating-linear-gradient(45deg, var(--gold) 0 18px, #ffcf6b 18px 36px); transition: width 800ms cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.progress-doge { position: absolute; left: 0%; top: 50%; transform: translate(-50%, -54%); font-size: 28px; filter: drop-shadow(0 3px 1px rgba(0,0,0,.2)); transition: left 800ms cubic-bezier(.2,.8,.2,1); }
.progress-scale { color: var(--muted); font-size: 0.9rem; }

.scene-card { border-radius: 32px; padding: 16px; overflow: hidden; }
.scene-meta { display: grid; gap: 4px; padding: 8px 10px 16px; text-align: center; }
.badge { justify-self: center; border-radius: 999px; padding: 8px 13px; background: #ffe2a0; border: 2px solid rgba(58,36,22,.12); font-weight: 900; font-size: .88rem; }
.scene-meta h2 { margin: 4px 0 0; font-size: clamp(1.3rem, 3vw, 2.2rem); }
.scene-meta p { margin: 0; color: var(--muted); }

.scene { position: relative; height: min(66vw, 540px); min-height: 360px; border-radius: 24px; overflow: hidden; background: linear-gradient(#8fcbe4 0%, #ffd990 62%, #d58b45 63%, #b46a34 100%); border: 3px solid rgba(58,36,22,.16); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 26% 18%, rgba(255,255,255,.5), transparent 24%), linear-gradient(transparent 72%, rgba(55,31,16,.12)); }
.sky, .ground, .prop, .doge, .table, .market-sign, .museum-sign, .casino-sign { position: absolute; }
.cloud { position: absolute; width: 118px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: 30px -8px 0 8px rgba(255,255,255,.7), 63px 4px 0 1px rgba(255,255,255,.65); animation: drift 16s linear infinite; }
.cloud-a { top: 36px; left: 7%; } .cloud-b { top: 94px; left: 52%; animation-duration: 22s; } .cloud-c { top: 160px; left: 20%; animation-duration: 27s; opacity:.55; }
@keyframes drift { 0%,100% { transform: translateX(-20px); } 50% { transform: translateX(28px); } }
.ground { left: -5%; right: -5%; bottom: -28px; height: 150px; border-radius: 50% 50% 0 0; background: linear-gradient(#c78242, #9b5b30); border-top: 4px solid rgba(58,36,22,.15); }

.doge { width: 190px; height: 180px; left: 15%; bottom: 70px; z-index: 6; transform-origin: bottom center; animation: doge-bob 1.8s ease-in-out infinite; }
@keyframes doge-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
.body { position:absolute; width:118px; height:72px; left:34px; bottom:18px; border-radius: 55% 50% 45% 55%; background:#d79645; border:4px solid #7b4824; box-shadow: inset 8px -10px 0 rgba(133,72,28,.22); }
.head { position:absolute; width:116px; height:106px; left:54px; top:5px; border-radius: 48% 48% 45% 45%; background:#d99948; border:4px solid #7b4824; box-shadow: inset 10px -8px 0 rgba(125,67,23,.18); }
.ear { position:absolute; width:44px; height:58px; top:-38px; background:#c17a35; border:4px solid #7b4824; }
.ear-l { left:12px; border-radius: 84% 14% 70% 18%; transform: rotate(-18deg); } .ear-r { right:6px; border-radius:14% 84% 18% 70%; transform: rotate(20deg); }
.face-mask { position:absolute; width:74px; height:62px; left:21px; top:36px; background:#ffe0a2; border-radius:50% 50% 48% 48%; }
.eye { position:absolute; width:12px; height:15px; top:43px; border-radius:50%; background:#301c12; z-index:2; animation: blink 4s infinite; }
.eye-l { left:35px; } .eye-r { right:32px; }
@keyframes blink { 0%,92%,100%{ transform:scaleY(1);} 94%{ transform:scaleY(.08);} }
.brow { position:absolute; width:18px; height:5px; top:32px; border-radius:8px; background:#6e3d20; z-index:3; }
.brow-l { left:30px; transform: rotate(-8deg); } .brow-r { right:28px; transform: rotate(8deg); }
.snout { position:absolute; width:40px; height:32px; left:38px; top:62px; border-radius:50%; background:#ffe9bd; z-index:2; }
.nose { position:absolute; width:17px; height:12px; left:50px; top:66px; border-radius:50%; background:#271711; z-index:3; }
.mouth { position:absolute; width:27px; height:15px; left:45px; top:79px; border-bottom:4px solid #5b2f1e; border-radius:0 0 22px 22px; z-index:3; }
.cheek { position:absolute; width:13px; height:8px; top:70px; border-radius:50%; background:rgba(230,104,86,.45); z-index:3; } .cheek-l{left:23px;} .cheek-r{right:20px;}
.tail { position:absolute; width:50px; height:50px; left:3px; bottom:55px; border:9px solid #d79645; border-right:0; border-bottom:0; border-radius:50%; transform:rotate(-35deg); }
.leg { position:absolute; bottom:0; width:22px; height:32px; background:#b96f30; border:4px solid #7b4824; border-radius:12px; } .leg-a{left:58px;} .leg-b{left:112px;}

.prop { opacity:0; pointer-events:none; z-index:5; transform-origin:center bottom; }
.prop-nose-cone { right:22%; bottom:92px; width:86px; height:120px; }
.prop-nose-cone::before { content:""; position:absolute; inset:0; background:var(--red); clip-path:polygon(50% 0, 93% 100%, 7% 100%); border:4px solid #72251e; }
.prop-nose-cone span { position:absolute; left:21px; bottom:0; width:44px; height:28px; background:#f3b64b; border:3px solid #72251e; border-radius:12px 12px 6px 6px; }
.prop-tank { right:19%; bottom:88px; width:92px; height:142px; border-radius:46px; background:#d74f43; border:5px solid #702a22; box-shadow: inset 12px -12px 0 rgba(91,25,17,.18); }
.prop-tank span { position:absolute; left:18px; top:32px; width:46px; height:22px; border-radius:50%; background:#ffcb68; border:3px solid #702a22; }
.prop-bone { left:30%; bottom:112px; width:138px; height:26px; background:#ffe7bd; border:4px solid #7d5533; border-radius:999px; transform: rotate(-12deg); }
.prop-bone::before, .prop-bone::after { content:""; position:absolute; width:42px; height:42px; border-radius:50%; background:#ffe7bd; border:4px solid #7d5533; top:-12px; }
.prop-bone::before { left:-18px; box-shadow: 7px 29px 0 -3px #ffe7bd; } .prop-bone::after { right:-18px; box-shadow: -8px -28px 0 -3px #ffe7bd; }
.prop-frog { right:19%; bottom:86px; width:100px; height:96px; border-radius:50% 50% 35% 35%; background:#64a657; border:4px solid #355b31; }
.prop-frog::before, .prop-frog::after { content:""; position:absolute; width:27px; height:27px; border-radius:50%; background:#fff7d9; border:3px solid #355b31; top:-12px; }
.prop-frog::before { left:15px; } .prop-frog::after { right:15px; }
.prop-frog span { position:absolute; left:28px; top:48px; width:44px; height:18px; border-bottom:4px solid #355b31; border-radius:0 0 40px 40px; }
.prop-engines { right:35%; bottom:92px; display:flex; gap:8px; }
.prop-engines span { display:block; width:38px; height:72px; background:#444; border:4px solid #222; border-radius:13px; }
.prop-engines span::after { content:""; position:absolute; width:31px; height:18px; background:#e57936; border-radius:50%; bottom:-14px; }
.prop-fuel { right:24%; bottom:105px; width:138px; height:86px; border:4px solid #51392b; border-radius:22px; background:#5da1b2; }
.prop-fuel::before { content:""; position:absolute; width:120px; height:12px; left:-72px; top:39px; border:6px solid #51392b; border-top:0; border-radius:0 0 40px 40px; }
.prop-chihuahua { right:8%; bottom:83px; width:75px; height:82px; background:#c98750; border:4px solid #6c3d28; border-radius:45% 45% 35% 35%; }
.prop-chihuahua::before,.prop-chihuahua::after{content:"";position:absolute;width:34px;height:42px;background:#b67442;border:4px solid #6c3d28;top:-32px;} .prop-chihuahua::before{left:-4px;transform:rotate(-24deg);border-radius:80% 15%;}.prop-chihuahua::after{right:-4px;transform:rotate(24deg);border-radius:15% 80%;}
.prop-chihuahua span { position:absolute; left:28px; top:35px; width:16px; height:10px; border-radius:50%; background:#2b1711; }
.prop-voucher { left:35%; bottom:98px; background:#fff6c9; border:3px dashed #704426; border-radius:10px; padding:8px; font-size:.7rem; font-weight:900; transform:rotate(-8deg); }
.prop-rocket-body { right:20%; bottom:82px; width:230px; height:86px; border-radius:50px; background:#d94436; border:5px solid #6e241d; transform:rotate(-5deg); }
.prop-rocket-body::before { content:""; position:absolute; left:35px; top:18px; width:46px; height:46px; border-radius:50%; background:#91c5dd; border:4px solid #6e241d; }
.prop-rocket-body span { position:absolute; right:-36px; top:18px; width:65px; height:48px; background:#ffcf6b; border:4px solid #6e241d; clip-path: polygon(0 0,100% 50%,0 100%); }
.prop-treats { left:30%; bottom:90px; width:80px; height:86px; border-radius:0 0 25px 25px; background:#a15a2d; border:4px solid #5b351f; }
.prop-treats::before { content:""; position:absolute; inset:-24px 4px auto; height:36px; background:#b96b36; border:4px solid #5b351f; border-radius:50% 50% 20% 20%; }
.prop-treats span { position:absolute; left:23px; top:28px; width:12px; height:12px; border-radius:50%; background:#f6c56a; box-shadow:18px 8px 0 #f6c56a, 2px 27px 0 #f6c56a; }
.prop-guidance { right:31%; top:25px; width:86px; height:86px; background:#4d5d75; border:5px solid #243246; border-radius:18px; animation: fall-system 1.7s ease-in-out infinite; }
.prop-guidance::before { content:""; position:absolute; left:19px; top:16px; width:38px; height:38px; border-radius:50%; background:#95d8f2; border:4px solid #243246; }
.prop-guidance span { position:absolute; left:12px; bottom:10px; width:53px; height:7px; border-radius:8px; background:#f4cc63; box-shadow:0 -11px 0 #f4cc63; }
@keyframes fall-system { 0% { transform:translateY(-220px) rotate(-25deg); } 45%,100% { transform:translateY(190px) rotate(10deg); } }
.prop-house { left:32%; bottom:88px; width:120px; height:86px; background:#ffdc88; border:4px solid #6d3e25; }
.prop-house::before { content:""; position:absolute; left:-16px; top:-55px; width:150px; height:75px; background:#c84335; border:4px solid #6d3e25; clip-path:polygon(50% 0,100% 100%,0 100%); }
.prop-house span { position:absolute; right:18px; bottom:0; width:30px; height:46px; background:#7a4b2f; border:3px solid #6d3e25; }
.prop-stage { right:18%; bottom:104px; width:160px; height:72px; border-radius:40px; background:#dad6c8; border:5px solid #5c5245; }
.prop-stage::before, .prop-stage::after { content:""; position:absolute; top:8px; width:34px; height:48px; background:#7b8797; border:4px solid #5c5245; border-radius:16px; } .prop-stage::before{left:26px;} .prop-stage::after{right:26px;}
.prop-spacesuit { right:23%; bottom:78px; width:104px; height:140px; background:#f9f3df; border:5px solid #5e5b52; border-radius:38px 38px 28px 28px; }
.prop-spacesuit::before { content:""; position:absolute; left:22px; top:-42px; width:52px; height:52px; border-radius:50%; background:#a4d4e5; border:5px solid #5e5b52; }
.prop-spacesuit span { position:absolute; left:20px; top:38px; width:57px; height:22px; border-radius:999px; background:#d94336; border:3px solid #5e5b52; }
.prop-medal { right:17%; bottom:220px; background:#ffdc72; border:4px solid #6d3e25; border-radius:50%; width:70px; height:70px; display:grid; place-items:center; font-size:.7rem; font-weight:1000; animation: medal-sparkle 1.1s ease-in-out infinite; }
@keyframes medal-sparkle { 50% { transform:scale(1.08) rotate(5deg); filter:brightness(1.12); } }
.table { bottom:80px; left:48%; width:170px; height:28px; background:#7a492a; border:4px solid #4d2d1c; border-radius:8px; opacity:0; z-index:4; }
.table::before,.table::after{content:"";position:absolute;top:24px;width:18px;height:55px;background:#5d361f;border-radius:8px}.table::before{left:20px}.table::after{right:20px}
.market-sign,.museum-sign,.casino-sign{opacity:0;top:34px;left:35px;padding:10px 15px;background:#ffe5a7;border:4px solid #704426;border-radius:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.05em;z-index:4;}

.scene-020 .prop-nose-cone, .scene-030 .prop-tank, .scene-040 .prop-bone, .scene-040 .prop-frog, .scene-040 .prop-engines, .scene-050 .prop-fuel, .scene-050 .prop-chihuahua, .scene-050 .prop-voucher, .scene-060 .prop-rocket-body, .scene-060 .prop-treats, .scene-070 .prop-guidance, .scene-080 .prop-house, .scene-080 .prop-stage, .scene-090 .prop-spacesuit, .scene-090 .prop-medal { opacity:1; }
.scene-040 .museum-sign, .scene-050 .market-sign, .scene-060 .table, .scene-080 .casino-sign { opacity:1; }
.scene-020 .doge { animation: doge-find 2s ease-in-out infinite; }
@keyframes doge-find { 50% { transform:translateX(65px) rotate(4deg); } }
.scene-030 .doge .mouth, .scene-050 .doge .mouth, .scene-060 .doge .mouth, .scene-080 .doge .mouth, .scene-090 .doge .mouth { height:19px; border-bottom-width:5px; }
.scene-030 .doge { animation: joy-hop .8s ease-in-out infinite; }
@keyframes joy-hop { 50% { transform:translateY(-20px) rotate(-3deg) scale(1.02); } }
.scene-040 .doge { left:13%; animation: doge-trade 2.5s ease-in-out infinite; }
@keyframes doge-trade { 50% { transform:translateX(52px) rotate(2deg); } }
.scene-050 .doge { animation: doge-pay 2.4s ease-in-out infinite; }
@keyframes doge-pay { 50% { transform:translateX(45px) rotate(-2deg); } }
.scene-060 .doge { left:12%; animation: bid-paddle .9s ease-in-out infinite; }
@keyframes bid-paddle { 50% { transform:translateY(-7px) rotate(-6deg); } }
.scene-070 .doge { animation: startled .55s steps(2,end) infinite; }
.scene-070 .doge .brow-l { transform: rotate(18deg); } .scene-070 .doge .brow-r { transform: rotate(-18deg); }
.scene-070 .doge .mouth { width:20px; height:20px; border:4px solid #5b2f1e; border-radius:50%; left:48px; }
@keyframes startled { 50% { transform:translateX(-10px) translateY(-12px) rotate(-8deg); } }
.scene-080 .doge { animation: winning-dance .9s ease-in-out infinite; }
@keyframes winning-dance { 50% { transform:translateY(-10px) rotate(7deg); } }
.scene-090 .doge { animation: proud-doge 1.5s ease-in-out infinite; }
@keyframes proud-doge { 50% { transform:translateY(-8px) scale(1.04); } }

.controls { margin: 18px 0; padding: 18px; border-radius: 24px; }
.controls h2 { margin: 0 0 4px; }.controls p { margin:0 0 14px; color:var(--muted); }
.button-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
button { cursor:pointer; border:0; border-radius:16px; padding:12px 10px; font-weight:900; color:var(--ink); background:#ffe0a0; box-shadow: inset 0 -3px 0 rgba(58,36,22,.14); }
button:hover { filter:brightness(1.04); transform: translateY(-1px); }
.ghost-button { margin-top:12px; width:100%; background:rgba(255,255,255,.55); border:2px solid rgba(58,36,22,.14); }
.site-footer { width:min(1120px, calc(100% - 28px)); margin:0 auto; padding: 0 0 30px; }
.wag-count { border-radius: 22px; padding: 14px 18px; display:flex; justify-content:center; align-items:center; gap:10px; font-weight:900; }

@media (max-width: 760px) {
  .dashboard { grid-template-columns: 1fr 1fr; gap:10px; }
  .mini-card { min-height: 104px; padding:14px; border-radius:20px; }
  .mini-card strong { font-size: clamp(1.2rem, 8vw, 2rem); }
  .scene { min-height: 420px; }
  .doge { left: 8%; transform: scale(.86); }
  .button-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .prop-rocket-body { right: 8%; transform:scale(.78) rotate(-5deg); }
  .prop-tank, .prop-nose-cone, .prop-fuel, .prop-spacesuit, .prop-stage { right: 8%; }
}

@media (max-width: 460px) {
  .app-shell { width: min(100% - 18px, 1120px); }
  .dashboard { grid-template-columns: 1fr 1fr; }
  .card-label { font-size:.62rem; }
  .mini-card small { font-size:.72rem; }
  .scene-card { padding:10px; }
  .scene { min-height: 390px; }
  .doge { left: 2%; bottom: 55px; transform: scale(.78); }
}