:root {
  --navy: #12385f;
  --deep-navy: #082442;
  --sky: #4dc6ef;
  --teal: #16b9aa;
  --grass: #48bd63;
  --sun: #ffd54a;
  --orange: #ff8a43;
  --coral: #ff5f68;
  --pink: #ef5bb8;
  --purple: #7856d8;
  --cream: #fff9e8;
  --white: #fff;
  --ink: #17324b;
  --muted: #5e7080;
  --glass: rgba(255,255,255,.93);
  --shadow: 0 12px 30px rgba(8, 36, 66, .2);
  --soft-shadow: 0 6px 16px rgba(8, 36, 66, .16);
  --radius: 24px;
  --ease-pop: cubic-bezier(.2, 1.45, .4, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--deep-navy); color: var(--ink); font-family: "Trebuchet MS", "Avenir Next", Avenir, system-ui, -apple-system, sans-serif; }
body { min-height: 100dvh; overscroll-behavior: none; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 4px solid rgba(255, 213, 74, .88); outline-offset: 3px; }
[hidden] { display: none !important; }

.loading-screen {
  position: fixed; inset: 0; z-index: 1000; min-height: 100dvh; display: grid; place-items: center; align-content: center;
  gap: 14px; padding: max(22px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); overflow: hidden;
  background: linear-gradient(#48c7ef 0 55%, #6bd05e 55% 100%); color: white;
}
.loading-sky { position: absolute; inset: 0; opacity: .9; background: url('assets/world-sunny.webp') center/cover; filter: saturate(1.1); }
.loading-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,47,83,.08), rgba(9,47,83,.18)); }
.loading-screen > *:not(.loading-sky) { position: relative; z-index: 1; }
.loading-screen.exit { animation: loadingExit .55s ease forwards; }
@keyframes loadingExit { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }

.mini-logo { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: calc(100vw - 32px); padding: 4px 10px 6px; filter: drop-shadow(0 5px 0 rgba(11,47,76,.4)); transform: rotate(-1deg); text-rendering: optimizeLegibility; }
.loading-screen .mini-logo::before { content: ""; position: absolute; z-index: -1; inset: -7px -14px -9px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(8,36,66,.32), rgba(8,36,66,.13) 58%, transparent 76%); pointer-events: none; }
.mini-dog-park { white-space: nowrap; font-size: clamp(1.6rem, 7vw, 2.8rem); line-height: .9; font-weight: 1000; letter-spacing: .04em; color: white; -webkit-text-stroke: 2px var(--navy); text-shadow: 0 3px 0 #1ea66a; }
.mini-pop { white-space: nowrap; margin-top: 5px; padding: 2px 12px 5px; border-radius: 999px; font-size: clamp(1.15rem, 5vw, 2rem); font-weight: 1000; letter-spacing: .03em; color: var(--sun); background: var(--coral); border: 3px solid white; -webkit-text-stroke: 1px #8c2857; }
.mini-logo.small { filter: none; }
.mini-logo.small .mini-dog-park { font-size: 1.5rem; }
.mini-logo.small .mini-pop { font-size: 1rem; }
.loading-pup { width: min(46vw, 220px); aspect-ratio: 1; position: relative; animation: loadingBounce .9s ease-in-out infinite alternate; }
.loading-pup img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(8,36,66,.28)); }
.loading-ball { position: absolute; right: -14%; bottom: 5%; display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; color: #dfff63; background: #b9e534; border: 4px solid rgba(255,255,255,.7); box-shadow: inset -8px -7px 0 rgba(61,138,43,.2), 0 8px 12px rgba(8,36,66,.25); animation: ballSpin .7s linear infinite; }
@keyframes loadingBounce { to { transform: translateY(-8px) rotate(2deg); } }
@keyframes ballSpin { to { transform: rotate(360deg); } }
.loading-track { width: min(76vw, 330px); height: 15px; padding: 3px; border-radius: 20px; background: rgba(9,47,83,.45); box-shadow: inset 0 2px 5px rgba(0,0,0,.18), 0 2px 0 rgba(255,255,255,.35); }
.loading-track span { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sun), #fff47c, var(--orange)); box-shadow: 0 0 10px rgba(255,232,84,.75); transition: width .4s ease; }
.loading-screen p { margin: 0; font-weight: 900; font-size: 1rem; text-shadow: 0 2px 5px rgba(8,36,66,.45); }
.loading-paws { display: flex; gap: 10px; }
.loading-paws span { opacity: .25; animation: pawWalk 1.2s infinite; }
.loading-paws span:nth-child(2) { animation-delay: .2s; }
.loading-paws span:nth-child(3) { animation-delay: .4s; }
@keyframes pawWalk { 30% { opacity: 1; transform: translateY(-5px) rotate(-10deg); } }

.startup-error {
  position: fixed; inset: 0; z-index: 1200; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); text-align: center;
  color: white; background: linear-gradient(rgba(8,36,66,.42), rgba(8,36,66,.68)), url('assets/world-sunny.webp') center/cover no-repeat;
}
.startup-error img { width: min(42vw, 190px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(8,36,66,.32)); }
.startup-error h1 { margin: 2px 0 0; max-width: 520px; font-size: clamp(1.45rem, 6vw, 2.2rem); line-height: 1.05; text-shadow: 0 3px 0 rgba(8,36,66,.45); }
.startup-error p { margin: 0; max-width: 480px; color: #fff; font-size: 1rem; line-height: 1.45; font-weight: 800; text-shadow: 0 2px 4px rgba(8,36,66,.5); }
.startup-error button, .startup-error a { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 52px; padding: 12px 24px; border-radius: 999px; font-weight: 1000; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.startup-error button { border: 3px solid white; color: var(--navy); background: linear-gradient(#ffe56c, var(--sun)); box-shadow: 0 6px 0 #bc7c20, 0 10px 22px rgba(8,36,66,.25); }
.startup-error a { color: white; border: 2px solid rgba(255,255,255,.8); background: rgba(8,36,66,.55); }
.startup-error small { margin-top: 8px; font-weight: 900; letter-spacing: .13em; }

.brand-footer { position: absolute !important; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); text-align: center; font-size: .75rem !important; font-weight: 900; letter-spacing: .14em; opacity: .86; }

.app-shell { position: relative; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; }
.world-backdrop { position: fixed; inset: -2%; z-index: -3; overflow: hidden; background: url('assets/world-sunny.webp') center/cover no-repeat; transition: background-image .5s ease, filter .5s ease; animation: worldDrift 19s ease-in-out infinite alternate; will-change: transform, filter; }
.world-backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background: radial-gradient(circle at 20% 24%, rgba(255,255,255,.5), transparent 19%), linear-gradient(115deg, transparent 36%, rgba(255,255,255,.18) 50%, transparent 64%); animation: worldLight 13s ease-in-out infinite alternate; }
.world-backdrop[data-world="flower"]::after, .world-backdrop[data-world="rainbow"]::after { opacity: .36; }
.world-backdrop[data-world="beach"], .world-backdrop[data-world="water"] { animation-duration: 14s; }
.world-backdrop[data-world="autumn"], .world-backdrop[data-world="forest"] { animation-duration: 22s; }
.world-backdrop[data-world="snow"]::after { opacity: .32; filter: brightness(1.14); }
.world-backdrop[data-world="neon"] { animation-name: worldDrift, neonBreathe; animation-duration: 20s, 4.5s; }
@keyframes worldDrift { from { transform: translate3d(-.35%,0,0) scale(1.015); } to { transform: translate3d(.45%,-.28%,0) scale(1.03); } }
@keyframes worldLight { from { transform: translate3d(-3%,0,0); opacity: .17; } to { transform: translate3d(4%,-1%,0); opacity: .34; } }
@keyframes neonBreathe { 50% { filter: saturate(1.08) brightness(1.05); } }
.backdrop-shade { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(7,37,66,.2), rgba(7,37,66,.34)); }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; animation: screenIn .28s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(7px); } }

.menu-screen { overflow: hidden; }
.menu-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: max(22px, env(safe-area-inset-top)) 16px max(54px, calc(env(safe-area-inset-bottom) + 44px)); display: flex; flex-direction: column; align-items: center; scrollbar-width: thin; }
.game-logo { position: relative; isolation: isolate; width: min(100%, 520px); max-width: calc(100vw - 24px); padding: 4px clamp(10px,3vw,18px) 2px; margin-top: 2px; text-align: center; transform: rotate(-1.2deg); filter: drop-shadow(0 8px 0 rgba(12,48,79,.36)); text-rendering: optimizeLegibility; user-select: none; }
.game-logo::before { content: ""; position: absolute; z-index: -1; inset: -5px 0 -8px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(8,36,66,.3), rgba(8,36,66,.12) 58%, transparent 77%); pointer-events: none; }
.logo-top { white-space: nowrap; font-size: clamp(2.35rem, 11vw, 4.4rem); line-height: .88; font-weight: 1000; letter-spacing: .025em; color: #fff; -webkit-text-stroke: clamp(2px, .5vw, 4px) var(--navy); text-shadow: 0 4px 0 #1da771, 0 7px 0 #0b6f72; }
.paw-accent { position: absolute; left: clamp(2px,1vw,8px); top: -8px; font-size: .46em; transform: rotate(-18deg); -webkit-text-stroke: 0; }
.logo-pop { display: inline-flex; align-items: center; max-width: 100%; gap: 2px; margin-top: 7px; padding: 4px 14px 7px; white-space: nowrap; color: white; font-size: clamp(1.6rem, 7.7vw, 3.2rem); font-weight: 1000; line-height: 1; letter-spacing: .015em; background: linear-gradient(145deg, #ff6c78, #e742a7); border: clamp(3px, .8vw, 5px) solid white; border-radius: 18px 28px 18px 28px; box-shadow: inset 0 5px 0 rgba(255,255,255,.22), 0 5px 0 #8d2b68; -webkit-text-stroke: 1.5px #853061; }
.logo-pop span:nth-child(1) { color: #ffda4e; }
.logo-pop span:nth-child(2) { color: #70ecf1; }
.logo-pop span:nth-child(3) { color: #8cff83; }
.logo-pop strong { margin-left: 4px; color: #fff; font: inherit; }
.logo-bone { margin-top: 4px; color: #fff5c4; font-size: .82rem; text-shadow: 0 2px 2px var(--navy); }

.menu-dogs { height: clamp(112px, 27vw, 178px); margin-top: -2px; display: flex; justify-content: center; align-items: flex-end; }
.menu-dogs img { width: clamp(100px, 25vw, 160px); height: 100%; object-fit: contain; margin: 0 -14px; filter: drop-shadow(0 8px 6px rgba(8,36,66,.28)); transform: rotate(-5deg) translateY(7px); }
.menu-dogs img:last-child { transform: rotate(5deg) translateY(7px); }
.menu-dogs .lead-dog { z-index: 1; width: clamp(120px, 30vw, 185px); transform: translateY(0); }

.continue-card { width: min(100%, 610px); margin-top: -4px; display: flex; align-items: center; gap: 14px; padding: 13px 13px 13px 18px; background: var(--glass); border: 3px solid rgba(255,255,255,.78); border-radius: 24px; box-shadow: var(--shadow), inset 0 -3px 0 rgba(11,72,90,.08); backdrop-filter: blur(9px); }
.continue-card > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.eyebrow { font-size: .72rem; line-height: 1.25; letter-spacing: .13em; font-weight: 1000; color: var(--purple); text-transform: uppercase; }
.continue-card strong { margin-top: 2px; font-size: clamp(1.25rem, 5vw, 1.75rem); color: var(--navy); }
.continue-card small { color: var(--muted); font-size: .82rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-greeting { display: block; max-width: 100%; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e04882; font-size: clamp(.76rem,3.2vw,.9rem); line-height: 1.2; font-weight: 1000; letter-spacing: .035em; }

.primary-button, .secondary-button, .danger-button { min-height: 50px; border: 0; border-radius: 17px; padding: 12px 20px; font-weight: 1000; letter-spacing: .045em; cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.primary-button { color: white; background: linear-gradient(145deg, #ff8256, #f34d75); border: 3px solid white; box-shadow: 0 5px 0 #a72f5c, 0 9px 17px rgba(127,33,84,.23), inset 0 3px 0 rgba(255,255,255,.28); }
.primary-button:hover { filter: saturate(1.1) brightness(1.03); }
.primary-button:active, .secondary-button:active, .menu-grid button:active, .round-button:active, .round-back:active { transform: translateY(3px); }
.primary-button:disabled { filter: grayscale(.65); opacity: .62; cursor: not-allowed; box-shadow: 0 3px 0 #777; }
.secondary-button { color: var(--navy); background: #eaf5fb; border: 2px solid #bfddea; box-shadow: 0 4px 0 #abc7d4; }
.danger-button { color: #9a2741; background: #fff0f1; border: 2px solid #f4b4bd; box-shadow: 0 4px 0 #d98a98; }
.full-button { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--muted); font-weight: 900; padding: 10px; cursor: pointer; }
.play-button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 124px; font-size: 1.12rem; }
.play-button b { display: grid; place-items: center; width: 26px; aspect-ratio: 1; border-radius: 50%; font-size: .7rem; color: #ea536c; background: white; }

.quick-stats { width: min(100%, 610px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px auto; }
.quick-stats div { display: grid; grid-template: auto auto / 32px 1fr; align-items: center; padding: 8px 10px; background: rgba(10,52,84,.78); color: white; border: 2px solid rgba(255,255,255,.2); border-radius: 15px; box-shadow: var(--soft-shadow); }
.quick-stats span { grid-row: 1 / 3; font-size: 1.3rem; }
.quick-stats strong { font-size: 1rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.quick-stats small { color: #cbe9f3; font-size: .68rem; font-weight: 800; }

.next-reward-tease { position: relative; overflow: hidden; width: min(100%,610px); min-height: 67px; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; margin: 0 auto 10px; padding: 9px 13px 13px; color: white; background: linear-gradient(120deg,rgba(45,32,101,.92),rgba(113,58,155,.92)); border: 2px solid rgba(255,255,255,.48); border-radius: 18px; box-shadow: var(--soft-shadow), inset 0 2px 0 rgba(255,255,255,.13); }
.next-reward-tease::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--reward-progress,0%); height: 5px; border-radius: 0 99px 99px 0; background: linear-gradient(90deg,#ffcb42,#fff17b); box-shadow: 0 0 10px rgba(255,230,91,.62); transition: width .4s ease; }
.next-reward-tease > span { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.16); font-size: 1.55rem; }
.next-reward-tease div { min-width: 0; }
.next-reward-tease small, .next-reward-tease strong, .next-reward-tease em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-reward-tease small { color: #ffe66d; font-size: .75rem; font-weight: 1000; letter-spacing: .09em; }
.next-reward-tease strong { margin: 1px 0; font-size: .88rem; }
.next-reward-tease em { color: #dfdcf5; font-size: .75rem; font-style: normal; font-weight: 700; }

.menu-grid { width: min(100%, 610px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.menu-grid button { position: relative; min-height: 76px; display: grid; grid-template: auto auto / 46px 1fr; text-align: left; align-items: center; gap: 0 10px; padding: 10px 12px; border: 2px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--soft-shadow), inset 0 -3px 0 rgba(16,63,95,.08); cursor: pointer; transition: transform .12s ease, filter .12s ease; backdrop-filter: blur(8px); }
.menu-grid button:hover { transform: translateY(-2px); filter: brightness(1.03); }
.menu-grid strong { align-self: end; font-size: .95rem; line-height: 1.1; }
.menu-grid small { align-self: start; color: var(--muted); font-size: .72rem; font-weight: 700; }
.menu-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 14px; font-size: 1.45rem; background: #e5f7ff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.sticker-icon { background: #fff0c3; }.dog-icon { background: #e5f8db; }.daily-icon { background: #ffe1ed; }.achievement-icon { background: #ede5ff; }.scores-icon { background: #fff2bd; }.profile-icon { background: #e9ddff; }.help-icon { background: #dcf7f0; }.settings-icon { background: #e8eef4; }
.menu-grid .profile-menu-button { grid-column: 1 / -1; min-height: 66px; }
.notice-dot { position: absolute; right: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 2px solid white; box-shadow: 0 0 0 3px rgba(255,95,104,.18); }
.menu-brand { position: static !important; margin: 21px 0 0 !important; color: white; text-shadow: 0 2px 4px rgba(0,0,0,.5); }

.scroll-screen { overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgba(16,54,87,.74), rgba(8,36,66,.92)); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.section-header { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 76px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; color: white; background: linear-gradient(180deg, rgba(7,36,65,.96), rgba(7,36,65,.84)); border-bottom: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); }
.section-header h1 { margin: 1px 0 0; font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.05; overflow-wrap: anywhere; }
.section-header .eyebrow { color: #89ebf0; }
.round-back, .round-button { display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); color: white; background: rgba(255,255,255,.15); box-shadow: 0 4px 0 rgba(0,0,0,.18); font-weight: 1000; cursor: pointer; }
.round-back { font-size: 2rem; line-height: 1; }
.header-stars, .header-count { min-width: 50px; padding: 8px 10px; border-radius: 14px; text-align: center; color: var(--navy); background: white; font-weight: 1000; box-shadow: var(--soft-shadow); }

.world-map { width: min(100%, 860px); margin: 0 auto; padding: 18px 14px 50px; display: grid; gap: 18px; }
.world-card { position: relative; overflow: hidden; min-height: 278px; padding: 18px; border-radius: 28px; border: 3px solid rgba(255,255,255,.75); box-shadow: var(--shadow); background-position: center; background-size: cover; isolation: isolate; }
.world-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,33,58,.15), rgba(6,33,58,.87)); }
.world-card.locked { filter: saturate(.5); }
.world-card.locked::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; background: rgba(8,30,52,.38); backdrop-filter: blur(2px); }
.world-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: white; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.world-card-header h2 { margin: 0; font-size: clamp(1.3rem, 5vw, 1.75rem); }
.world-card-header p { margin: 4px 0 0; font-size: .82rem; font-weight: 700; max-width: 520px; }
.world-range { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--navy); background: white; font-size: .75rem; font-weight: 1000; text-shadow: none; }
.world-card-progress { position: absolute; top: 92px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 12px; color: white; background: rgba(7,36,65,.62); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px); font-size: .75rem; font-weight: 900; }
.world-card-progress strong { color: #ffe56b; white-space: nowrap; }
.stage-path { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 7px; margin-top: 94px; }
.stage-node { position: relative; display: grid; place-items: center; width: min(100%, 60px); aspect-ratio: 1; justify-self: center; border-radius: 50%; border: 3px solid white; color: var(--navy); background: #fff; box-shadow: 0 5px 0 rgba(5,37,57,.35), 0 7px 14px rgba(0,0,0,.2); font-weight: 1000; cursor: pointer; }
.stage-node.current { color: white; background: linear-gradient(145deg, var(--orange), var(--coral)); animation: currentPulse 1.5s ease-in-out infinite; }
.stage-node.complete { background: #fff8c6; }
.stage-node.boss { color: white; background: linear-gradient(145deg, #7f5ce4, #e24aa6); }
.stage-node.challenge:not(.boss) { border-color: #fff2a4; box-shadow: 0 5px 0 rgba(5,37,57,.35), 0 0 0 3px rgba(255,227,88,.28), 0 8px 15px rgba(0,0,0,.2); }
.node-special { position: absolute; right: -5px; top: -7px; display: grid; place-items: center; width: 21px; aspect-ratio: 1; border-radius: 50%; color: var(--navy); background: var(--sun); border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,.25); font-size: .62rem; font-style: normal; }
.stage-node.locked { opacity: .66; cursor: not-allowed; }
.node-stars { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--sun); font-size: .65rem; letter-spacing: -1px; text-shadow: 0 1px 2px #583414; }
@keyframes currentPulse { 50% { transform: scale(1.08); box-shadow: 0 5px 0 rgba(5,37,57,.35), 0 0 0 8px rgba(255,255,255,.22); } }

.filter-scroll { display: flex; gap: 8px; padding: 14px; overflow-x: auto; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll button { flex: 0 0 auto; border: 2px solid rgba(255,255,255,.34); border-radius: 999px; padding: 9px 13px; color: white; background: rgba(255,255,255,.12); font-weight: 900; font-size: .8rem; cursor: pointer; }
.filter-scroll button.active { color: var(--navy); background: var(--sun); border-color: white; }
.sticker-sets { width: min(calc(100% - 28px),1080px); margin: 0 auto 14px; display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; }
.sticker-set-card { padding: 14px; border-radius: 22px; color: var(--ink); background: rgba(255,255,255,.95); border: 3px solid rgba(255,255,255,.74); box-shadow: var(--soft-shadow); }
.sticker-set-card.complete { background: linear-gradient(145deg,#fff8c8,#fff,#e6faff); box-shadow: var(--soft-shadow),0 0 20px rgba(255,231,92,.35); }
.sticker-set-heading { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; gap: 8px; align-items: center; }
.sticker-set-heading > span { display: grid; place-items: center; width: 43px; aspect-ratio: 1; border-radius: 13px; background: #fff0b5; font-size: 1.55rem; }
.sticker-set-heading small { display: block; color: var(--purple); font-size: .72rem; font-weight: 1000; letter-spacing: .08em; }
.sticker-set-heading h2 { margin: 1px 0 0; color: var(--navy); font-size: .95rem; }
.sticker-set-heading strong { color: var(--purple); font-size: .82rem; white-space: nowrap; }
.sticker-set-card .progress-track { margin: 10px 0 8px; }
.sticker-set-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 8px; }
.sticker-set-items span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7c8994; font-size: .72rem; font-weight: 800; }
.sticker-set-items span.owned { color: #2b8753; }
.set-reward { margin-top: 9px; padding: 7px 9px; border-radius: 11px; color: #684f16; background: #fff3b9; font-size: .72rem; line-height: 1.35; font-weight: 1000; }
.collection-grid { width: min(100%, 1080px); margin: 0 auto; padding: 0 14px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sticker-card, .dog-card { position: relative; min-height: 220px; overflow: hidden; border: 3px solid rgba(255,255,255,.78); border-radius: 24px; background: var(--glass); box-shadow: var(--soft-shadow); cursor: pointer; }
.sticker-card { padding: 14px; text-align: center; }
.sticker-art { min-height: 122px; display: grid; place-items: center; border-radius: 18px; font-size: 4.5rem; color: white; background: linear-gradient(145deg, #75d7d8, #4d87cf); box-shadow: inset 0 0 0 5px rgba(255,255,255,.25), inset 0 -10px 20px rgba(18,56,95,.18); }
.sticker-art img { width: 100%; height: 118px; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(14,47,76,.22)); }
.sticker-card.UNCOMMON .sticker-art { background: linear-gradient(145deg, #58d989, #2eb5b0); }
.sticker-card.RARE .sticker-art { background: linear-gradient(145deg, #4fa8f6, #7457df); box-shadow: inset 0 0 0 5px rgba(255,255,255,.3), 0 0 18px rgba(89,168,255,.45); }
.sticker-card.EPIC .sticker-art { background: linear-gradient(145deg, #a357ef, #ee55b4); box-shadow: inset 0 0 0 5px rgba(255,255,255,.3), 0 0 20px rgba(223,79,203,.55); }
.sticker-card.LEGENDARY .sticker-art { background: linear-gradient(145deg, #ffb62f, #ff6f58); box-shadow: inset 0 0 0 5px rgba(255,255,255,.4), 0 0 22px rgba(255,184,46,.6); }
.sticker-card.RAINBOW .sticker-art { background: linear-gradient(135deg, #ff647c, #ffbd42, #58dc89, #43bff0, #9c63ef); animation: rainbowGlow 2.4s ease-in-out infinite alternate; }
.rainbow-album .sticker-set-card, .rainbow-album .sticker-card { border-color: rgba(255,255,255,.92); box-shadow: var(--soft-shadow),0 0 0 2px rgba(255,213,74,.34),0 0 16px rgba(115,104,235,.28); }
@keyframes rainbowGlow { to { filter: hue-rotate(30deg) brightness(1.12); box-shadow: 0 0 24px rgba(255,255,255,.65); } }
.sticker-card.locked .sticker-art { filter: grayscale(1); color: rgba(255,255,255,.6); background: linear-gradient(145deg, #8e9aa6, #566474); }
.sticker-card.locked .sticker-art span { filter: blur(3px); opacity: .35; }
.lock-question { position: absolute; font-size: 2.5rem; filter: none !important; opacity: 1 !important; }
.sticker-card h2, .dog-card h2 { margin: 10px 0 1px; font-size: 1rem; color: var(--navy); }
.rarity { display: inline-block; font-size: .66rem; letter-spacing: .1em; font-weight: 1000; color: var(--purple); }
.sticker-card small, .dog-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; font-weight: 700; }

.dog-card { display: flex; flex-direction: column; padding: 10px 12px 14px; text-align: center; }
.dog-portrait { width: 100%; height: 150px; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #fff 0 34%, #d9f0ee 35% 100%); box-shadow: inset 0 -6px 13px rgba(18,56,95,.09); overflow: hidden; }
.dog-portrait-art { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.dog-portrait img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; object-position: center center; transform: none; transform-origin: center center; filter: drop-shadow(0 6px 5px rgba(14,47,76,.18)); transition: transform .2s var(--ease-pop); }
@media (hover: hover) and (pointer: fine) { .dog-card:hover .dog-portrait img { transform: scale(1.025); } }
.dog-card.locked .dog-portrait { background: linear-gradient(145deg, #8294a4, #46596b); }
.dog-card.locked .dog-portrait img { filter: brightness(0) opacity(.42); }
.mystery-dog { font-size: 4rem; filter: grayscale(1); opacity: .6; }
.dog-card .personality { color: var(--purple); font-size: .72rem; font-weight: 900; }
.collection-milestone { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.collection-milestone .milestone-icon { display: grid; place-items: center; width: 56px; aspect-ratio: 1; border-radius: 18px; color: white; background: linear-gradient(145deg,#5cd58a,#25aeb0); font-size: 2rem; box-shadow: inset 0 3px 0 rgba(255,255,255,.26); }
.collection-milestone small { color: var(--purple); font-size: .72rem; font-weight: 1000; letter-spacing: .08em; }
.collection-milestone h2 { margin: 1px 0; color: var(--navy); font-size: 1rem; }
.collection-milestone p { margin: 0 0 7px; color: var(--muted); font-size: .76rem; }

.card-panel { width: min(calc(100% - 28px), 760px); margin: 16px auto; padding: 18px; border: 3px solid rgba(255,255,255,.72); border-radius: 26px; background: var(--glass); box-shadow: var(--shadow); }
.daily-hero { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px 18px; }
.daily-hero .primary-button { grid-column: 1 / -1; }
.daily-hero h2 { margin: 3px 0; color: var(--navy); }
.daily-hero p { margin: 0; color: var(--muted); font-weight: 700; font-size: .9rem; }
.treat-box { position: relative; display: grid; place-items: center; width: 112px; aspect-ratio: 1; color: white; border-radius: 23px; background: linear-gradient(145deg, #ff7479, #c74cc6); border: 5px solid #ffe877; box-shadow: 0 8px 0 #7b337d, 0 15px 24px rgba(45,27,83,.3), inset 0 5px 0 rgba(255,255,255,.28); }
.treat-box::before { content: ""; position: absolute; left: -9px; right: -9px; top: 43%; height: 17px; background: #ffe25a; box-shadow: 0 3px 0 #d29b2e; }
.treat-box span { position: absolute; top: 9px; left: 11px; transform: rotate(-20deg); }
.treat-box b { position: relative; z-index: 1; font-size: 2.8rem; text-shadow: 0 3px 0 #7b337d; }
.treat-box.opening { animation: boxOpen .75s var(--ease-pop); }
@keyframes boxOpen { 20%, 60% { transform: rotate(-7deg) scale(1.05); } 40%, 80% { transform: rotate(7deg) scale(1.08); } 100% { transform: rotate(0) scale(1); filter: brightness(1.2); } }
.streak-summary { width: min(calc(100% - 28px), 760px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.streak-summary div { padding: 12px 10px; border-radius: 17px; text-align: center; color: white; background: rgba(15,59,91,.85); border: 2px solid rgba(255,255,255,.22); }
.streak-summary small { display: block; color: #bfe9ec; font-size: .68rem; font-weight: 800; }
.streak-summary strong { display: block; margin-top: 4px; font-size: .85rem; }
.subheading { width: min(calc(100% - 28px), 1080px); margin: 25px auto 11px; color: white; font-size: 1.15rem; }
.streak-trail { width: min(calc(100% - 28px), 760px); margin: 0 auto 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.streak-reward { position: relative; padding: 14px 8px; border-radius: 18px; text-align: center; background: rgba(255,255,255,.92); border: 2px solid rgba(255,255,255,.7); }
.streak-reward.earned { background: #fff9cb; box-shadow: 0 0 17px rgba(255,224,79,.4); }
.streak-reward span { display: block; font-size: 2rem; }
.streak-reward strong { display: block; color: var(--navy); font-size: .82rem; }
.streak-reward small { color: var(--muted); font-size: .68rem; font-weight: 800; }

.achievement-list { width: min(calc(100% - 28px), 820px); margin: 16px auto 45px; display: grid; gap: 10px; }
.achievement-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px; border-radius: 20px; border: 2px solid rgba(255,255,255,.75); background: var(--glass); box-shadow: var(--soft-shadow); }
.achievement-card.complete { background: linear-gradient(145deg, #fffbd7, #fff); }
.achievement-icon { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 16px; background: #e6eff5; font-size: 1.75rem; }
.achievement-icon img { width: 50px; height: 50px; object-fit: contain; }
.achievement-card.complete .achievement-icon { background: linear-gradient(145deg, #ffe466, #ffb947); }
.achievement-card h2 { margin: 0; font-size: 1rem; color: var(--navy); }
.achievement-card p { margin: 2px 0 6px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.progress-track { height: 8px; border-radius: 10px; background: #d9e5e9; overflow: hidden; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--grass)); }
.achievement-progress { text-align: right; font-size: .7rem; color: var(--muted); font-weight: 900; }
.achievement-progress b { display: block; color: var(--purple); font-size: .75rem; }

.stats-grid { width: min(calc(100% - 28px), 900px); margin: 16px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.stat-card { display: flex; align-items: center; gap: 10px; min-height: 84px; padding: 13px; border-radius: 20px; background: var(--glass); border: 2px solid rgba(255,255,255,.7); box-shadow: var(--soft-shadow); }
.stat-card span { font-size: 1.9rem; }
.stat-card strong { display: block; color: var(--navy); font-size: 1.15rem; }
.stat-card small { color: var(--muted); font-size: .73rem; font-weight: 800; }
.score-list { padding: 8px 15px; }
.score-row { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #d7e5ea; }
.score-row:last-child { border-bottom: 0; }
.score-row .rank { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--navy); font-weight: 1000; }
.score-row strong { color: var(--navy); }
.score-row small { display: block; color: var(--muted); font-size: .72rem; }
.score-row b { color: var(--purple); font-size: .9rem; }
.empty-state { padding: 28px 12px; text-align: center; color: var(--muted); font-weight: 800; }

.howto-intro { display: flex; align-items: center; gap: 12px; }
.howto-intro img { width: 100px; height: 100px; object-fit: contain; }
.howto-intro h2 { margin: 0; color: var(--navy); }
.howto-intro p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; font-weight: 700; }
.lesson-grid { width: min(calc(100% - 28px), 900px); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.lesson-grid article { position: relative; min-height: 240px; padding: 17px; text-align: center; border-radius: 22px; background: var(--glass); border: 2px solid rgba(255,255,255,.7); box-shadow: var(--soft-shadow); }
.lesson-number { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 30px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--coral); font-weight: 1000; }
.lesson-grid h2 { margin: 7px 0 3px; color: var(--navy); font-size: 1.05rem; }
.lesson-grid p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; font-weight: 700; }
.match-example { height: 105px; display: flex; align-items: center; justify-content: center; }
.match-example img { width: 74px; height: 74px; object-fit: contain; margin: 0 -8px; }
.lesson-power { width: 112px; height: 112px; object-fit: contain; }
.power-pair { height: 112px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 1.3rem; font-weight: 1000; }
.power-pair img { width: 88px; height: 88px; object-fit: contain; }
.power-recipe { height: 112px; display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--purple); font-size: 1.2rem; font-weight: 1000; }
.power-recipe .power-pair { height: auto; }
.power-recipe .power-pair img { width: 63px; height: 63px; }
.power-recipe > img { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(112,67,8,.28)); }
.obstacle-demo { height: 112px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 2.8rem; }
.obstacle-demo img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(42,24,14,.3)); }
.timer-demo { width: 140px; margin: 25px auto 24px; padding: 12px; border-radius: 18px; color: #e7ffff; background: var(--navy); border: 4px solid #b4eff1; box-shadow: inset 0 0 14px #28bdb7; font: 1000 1.65rem ui-monospace, monospace; }
.tip-banner { width: min(calc(100% - 28px), 900px); margin: 16px auto 40px; padding: 14px 16px; border-radius: 18px; background: #fff6b4; border: 2px solid white; color: var(--navy); }

.settings-list { padding: 4px 16px; }
.settings-list label { display: flex; align-items: center; gap: 12px; min-height: 78px; border-bottom: 1px solid #d8e4e9; cursor: pointer; }
.settings-list label:last-child { border: 0; }
.settings-list label > span { flex: 1; display: flex; flex-direction: column; }
.settings-list b { color: var(--navy); }
.settings-list small { color: var(--muted); margin-top: 2px; font-size: .75rem; }
.settings-list input { position: absolute; opacity: 0; pointer-events: none; }
.settings-list i { position: relative; width: 54px; height: 30px; border-radius: 99px; background: #b6c6cd; box-shadow: inset 0 3px 5px rgba(0,0,0,.15); transition: background .2s; }
.settings-list i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s var(--ease-pop); }
.settings-list input:checked + i { background: var(--teal); }
.settings-list input:checked + i::after { transform: translateX(24px); }
.settings-list .volume-setting { cursor: default; }
.settings-list .volume-setting input[type="range"] { position: static; width: clamp(118px, 31vw, 190px); height: 34px; opacity: 1; pointer-events: auto; accent-color: var(--teal); cursor: pointer; }
.settings-list .volume-setting output { color: var(--purple); font-weight: 1000; }
.about-card { text-align: center; }
.about-card h2 { margin: 17px 0 5px; color: var(--navy); }
.about-card p { color: var(--muted); line-height: 1.5; font-size: .84rem; }
.about-card .credits { margin-top: 20px; color: var(--navy); letter-spacing: .14em; font-weight: 1000; font-size: .72rem; }
#resetProgressButton { display: block; width: min(calc(100% - 28px), 760px); margin: 18px auto 45px; }
.settings-profile-link { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; color: var(--ink); cursor: pointer; }
.settings-profile-link > span { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 14px; background: #eee4ff; font-size: 1.45rem; }
.settings-profile-link div { min-width: 0; }
.settings-profile-link b, .settings-profile-link small { display: block; }
.settings-profile-link b { color: var(--navy); }
.settings-profile-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .75rem; }
.settings-profile-link > strong { color: var(--purple); font-size: 1.8rem; }

.profile-hero { display: grid; grid-template-columns: 118px minmax(0,1fr); align-items: center; gap: 14px; overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(232,250,249,.96)); }
.profile-hero img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(13,50,74,.2)); }
.profile-avatar-frame { position: relative; width: 118px; height: 118px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 38% 28%,#fff,#dff7f2 67%,#9ddbd5); border: 4px solid white; box-shadow: 0 5px 0 #7db9bd,0 0 0 2px #b9e7df; }
.profile-avatar-frame img { width: 108px; height: 108px; }
.profile-avatar-frame > span { font-size: 2.8rem; }
.profile-hero h2 { margin: 3px 0; color: var(--navy); overflow-wrap: anywhere; font-size: clamp(1.25rem,4.5vw,1.7rem); }
.profile-hero p { margin: 0; color: var(--muted); font-size: .8rem; }
.profile-name-card label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--navy); }
.profile-name-card label small { color: var(--muted); font-size: .72rem; }
.profile-name-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 9px; }
.profile-name-controls input, .welcome-name-field input { width: 100%; min-height: 50px; border: 2px solid #bfd7e2; border-radius: 15px; padding: 10px 13px; color: var(--navy); background: #f5fbfd; font-size: 1rem; font-weight: 900; }
.profile-name-controls .primary-button { min-width: 126px; }
.profile-name-card .text-button { display: block; margin: 6px auto -5px; }
.profile-avatar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--navy); }
.profile-avatar-heading strong, .profile-avatar-heading small { display: block; }
.profile-avatar-heading small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.profile-avatar-heading > span { max-width: 50%; overflow-wrap: anywhere; text-align: right; color: var(--purple); font-size: .75rem; line-height: 1.25; font-weight: 1000; }
.puppy-avatar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.puppy-avatar-choice { position: relative; min-width: 0; min-height: 82px; padding: 4px 3px 6px; border: 2px solid #d1e3e7; border-radius: 17px; color: var(--navy); background: #f4fbfc; box-shadow: 0 3px 0 #b8ced2; cursor: pointer; transition: transform .15s var(--ease-pop),border-color .15s,filter .15s; }
.puppy-avatar-choice > span { display: grid; place-items: center; width: 56px; height: 56px; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 50%; background: radial-gradient(circle,#fff,#dff5f2); }
.puppy-avatar-choice img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(8,36,66,.22)); }
.puppy-avatar-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 1000; }
.puppy-avatar-choice i { position: absolute; right: 2px; top: 2px; width: 21px; height: 21px; display: none; place-items: center; border-radius: 50%; color: white; background: var(--teal); border: 2px solid white; font-size: .66rem; font-style: normal; font-weight: 1000; }
.puppy-avatar-choice.selected { border-color: #4fc9bc; background: #e3fff5; box-shadow: 0 3px 0 #3aa895,0 0 13px rgba(72,211,190,.5); transform: translateY(-2px); }
.puppy-avatar-choice.selected > span { box-shadow: inset 0 0 0 3px #7be0cc; }
.puppy-avatar-choice.selected i { display: grid; }
.profile-stats { margin-top: 0; }
.profile-progress { margin-bottom: 44px; }
.profile-progress-heading { display: flex; align-items: center; gap: 10px; }
.profile-progress-heading > span { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 15%; background: #fff0bd; font-size: 1.65rem; }
.profile-progress-heading small { display: block; color: var(--purple); font-size: .68rem; font-weight: 1000; letter-spacing: .08em; }
.profile-progress-heading h2 { margin: 1px 0 0; color: var(--navy); font-size: 1.08rem; }
.profile-progress p { margin: 9px 0; color: var(--muted); font-size: .8rem; font-weight: 800; }

.game-screen { overflow: hidden; color: white; background: linear-gradient(180deg, rgba(5,30,51,.46), rgba(5,30,51,.72)); padding: max(7px, env(safe-area-inset-top)) 8px max(7px, env(safe-area-inset-bottom)); }
.game-screen.active { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.game-header { width: min(100%, 650px); display: grid; grid-template-columns: 56px minmax(0,1fr) 44px; align-items: center; gap: 8px; }
.stage-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 55px; height: 49px; border-radius: 14px; color: var(--navy); background: white; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 4px 0 rgba(8,36,66,.3); }
.stage-chip small { font-size: .57rem; font-weight: 1000; letter-spacing: .08em; }
.stage-chip strong { font-size: 1.24rem; line-height: 1; }
.game-world-title { min-width: 0; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.game-world-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.95rem, 4vw, 1.25rem); font-weight: 1000; }
.game-world-title small { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; color: var(--navy); background: var(--sun); font-size: .62rem; font-weight: 1000; letter-spacing: .08em; }
.game-header .round-button { width: 42px; background: rgba(8,36,66,.75); }

.game-stats { width: min(100%, 650px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.score-meter, .counter-card { min-height: 48px; border-radius: 15px; border: 2px solid rgba(255,255,255,.6); background: rgba(8,36,66,.84); box-shadow: 0 4px 0 rgba(3,21,37,.38), inset 0 2px 0 rgba(255,255,255,.12); }
.score-meter { display: flex; align-items: baseline; gap: 5px; padding: 7px 12px; }
.score-meter small, .counter-card small { color: #aee9ec; font-size: .58rem; font-weight: 1000; letter-spacing: .09em; }
.score-meter strong { font-size: 1.22rem; }
.score-meter span { font-size: .72rem; color: #cce1ea; font-weight: 800; }
.counter-card { min-width: 104px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 10px; }
.counter-card > span { font-size: 1.25rem; }
.counter-card div { display: flex; flex-direction: column; }
.counter-card strong { font-size: 1.2rem; line-height: 1.05; }
.moves-card.one-left { color: #fff4a3; background: rgba(173,45,72,.94); border-color: #ffe780; animation: oneLeftPulse .62s ease-in-out infinite alternate; }
.timer-card { border-color: #b5f2f3; box-shadow: 0 4px 0 rgba(3,21,37,.38), inset 0 0 12px rgba(36,215,215,.3); }
.timer-card.urgent { color: #fff0a7; animation: timerPulse .8s ease-in-out infinite; }
.timer-card.critical { color: white; background: rgba(187,43,70,.9); animation-duration: .45s; }
.timer-card.final-five { border-color: #fff1a2; box-shadow: 0 4px 0 rgba(3,21,37,.38),0 0 13px rgba(255,224,95,.52); }
@keyframes timerPulse { 50% { transform: scale(1.035); filter: brightness(1.16); } }
@keyframes oneLeftPulse { to { transform: scale(1.045); filter: brightness(1.12); box-shadow: 0 4px 0 rgba(3,21,37,.38),0 0 13px rgba(255,226,92,.55); } }

.boss-panel { width: min(100%, 650px); min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 16px; background: rgba(52,23,74,.9); border: 2px solid #dfa5ff; box-shadow: 0 4px 0 rgba(21,11,36,.5); }
.boss-face { font-size: 2rem; }
.boss-panel > div:last-child { flex: 1; }
.boss-panel span { display: block; font-size: .75rem; font-weight: 1000; }
.boss-panel small { display: block; margin-top: 2px; font-size: .62rem; color: #ead8ff; font-weight: 800; }
.boss-health { height: 9px; margin-top: 3px; border-radius: 99px; overflow: hidden; background: #341a47; }
.boss-health i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff8c4c, #ff4f83); transition: width .3s ease; }
.boss-panel.boss-hit { animation: bossHit .44s ease; }
@keyframes bossHit { 35% { transform: translateX(-3px) scale(1.015); filter: brightness(1.25); } 65% { transform: translateX(3px); } }

.objective-hud { width: min(100%, 650px); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.objective-pill { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 4px; padding: 4px 6px; border-radius: 12px; text-align: left; color: var(--navy); background: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.75); box-shadow: 0 3px 0 rgba(8,36,66,.25); }
.objective-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #edf7f8; font-size: 1.05rem; }
.objective-symbol img { width: 30px; height: 30px; object-fit: contain; }
.crate-objective-icon { position: relative; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: radial-gradient(circle,#fff,#ffe49a); border: 2px solid #9c622b; box-shadow: 0 1px 3px rgba(50,27,11,.32); }
.crate-objective-icon img { position: relative; z-index: 1; width: 36px; height: 36px; object-fit: contain; }
.crate-objective-icon i { position: absolute; z-index: 2; inset: 2px; border: 2px solid #efcf78; border-radius: 7px; background: repeating-linear-gradient(90deg,transparent 0 18%,rgba(82,47,23,.83) 18% 25%,transparent 25% 42%); box-shadow: inset 0 -4px 0 #7c4826; }
.crate-objective-icon b { position: absolute; z-index: 3; right: 0; bottom: 0; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #70471c; background: #ffd558; border: 1px solid white; font-size: .45rem; }
.objective-symbol .crate-objective-icon { width: 30px; height: 30px; border-radius: 8px; }
.objective-symbol .crate-objective-icon img { width: 28px; height: 28px; }
.objective-copy { min-width: 0; }
.objective-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .56rem; line-height: 1.15; font-weight: 1000; text-transform: uppercase; color: var(--purple); }
.objective-copy strong { display: block; margin-top: 1px; font-size: .73rem; line-height: 1.05; }
.objective-copy em { display: block; margin-top: 1px; color: #7b4c28; font-size: .55rem; line-height: 1; font-style: normal; font-weight: 1000; text-transform: uppercase; }
.objective-pill.complete { background: #ddffd8; color: #22623c; }
.objective-pill.complete .objective-copy > span { color: #2f8a4e; }
.objective-pill.objective-pulse { animation: objectiveCountPop .52s var(--ease-pop); }
.objective-pill.final-one { border-color: #ffe36a; animation: finalGoalPulse .82s ease-in-out infinite alternate; }
@keyframes objectiveCountPop { 45% { transform: scale(1.08); background: #fff2a4; box-shadow: 0 0 18px #fff27a, 0 3px 0 rgba(8,36,66,.25); } }
@keyframes finalGoalPulse { to { background: #fff6b9; box-shadow: 0 0 12px rgba(255,230,95,.68),0 3px 0 rgba(8,36,66,.25); } }

.board-zone { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.game-board { position: relative; width: min(96vw, 58vh, 620px); max-width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: clamp(15px, 4vw, 28px); border: clamp(3px, 1vw, 7px) solid rgba(255,255,255,.87); background: linear-gradient(145deg, rgba(9,55,82,.86), rgba(11,87,103,.8)); box-shadow: 0 8px 0 rgba(5,30,50,.62), 0 16px 30px rgba(0,0,0,.32), inset 0 0 0 3px rgba(255,255,255,.14); touch-action: none; user-select: none; -webkit-user-select: none; }
.game-board.near-win { border-color: #fff0a2; box-shadow: 0 8px 0 rgba(5,30,50,.62),0 0 15px rgba(255,229,102,.4),0 16px 30px rgba(0,0,0,.32),inset 0 0 0 3px rgba(255,255,255,.18); }
.game-board.combo-energy { animation: boardEnergy .55s ease; }
@keyframes boardEnergy { 35% { filter: brightness(1.12) saturate(1.15); } 70% { transform: scale(1.006); } }
.board-cells, .obstacle-layer, .piece-layer, .cage-layer, .effect-layer { position: absolute; inset: clamp(3px, .7vw, 7px); }
.board-cells { display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); gap: 2px; }
.board-cell { border-radius: 12px; background: rgba(255,255,255,.115); box-shadow: inset 0 2px 2px rgba(255,255,255,.09), inset 0 -2px 3px rgba(0,0,0,.08); }
.obstacle-layer, .piece-layer, .cage-layer, .effect-layer { pointer-events: none; }
.obstacle-layer { z-index: 1; }.piece-layer { z-index: 3; }.cage-layer { z-index: 5; }
.piece { position: absolute; width: calc(100% / 7); height: calc(100% / 7); padding: 1px; border: 0; background: none; cursor: grab; pointer-events: auto; transition: transform .22s cubic-bezier(.2,.78,.28,1), opacity .18s ease, filter .18s ease; will-change: transform; }
.piece:active { cursor: grabbing; }
.piece::before { content: ""; position: absolute; inset: 10%; border-radius: 44%; opacity: .34; background: radial-gradient(circle at 40% 25%, #fff, var(--piece-accent, #8ad5dd) 78%); box-shadow: inset 0 -5px 8px rgba(8,36,66,.12), 0 4px 6px rgba(4,30,51,.28); }
.piece img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(3,23,42,.38)); transition: transform .15s var(--ease-pop), filter .15s; }
.piece:hover img { transform: scale(1.06); }
.piece.selected img { transform: scale(1.11) translateY(-3px); filter: drop-shadow(0 0 7px #fff) drop-shadow(0 4px 3px rgba(3,23,42,.4)); }
.piece.selected::after { content: ""; position: absolute; inset: 6%; border: 3px solid var(--sun); border-radius: 45%; box-shadow: 0 0 12px #fff36e; animation: selectRing .7s ease-in-out infinite alternate; }
.piece.hint img { animation: hintWiggle .65s ease-in-out 2; filter: drop-shadow(0 0 8px var(--sun)); }
.piece.pop { pointer-events: none; }
.piece.pop img { animation: piecePop .32s var(--ease-pop) forwards; }
.piece.new-piece img { animation: newPiece .38s var(--ease-pop); }
.piece.invalid img { animation: invalidWiggle .33s ease; }
.piece.react-celebrate img { animation: dogCelebrate .58s var(--ease-pop); }
.piece.react-nervous img { animation: dogNervous .5s ease-in-out; }
.piece.react-wink img { animation: dogWink .54s ease-in-out; }
.piece.power-created img { animation: powerCreated .7s var(--ease-pop); }
.piece.power-piece::before { opacity: .82; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,211,69,.42) 55%, transparent 75%); animation: powerGlow 1.15s ease-in-out infinite alternate; }
.piece.power-bowl::before { background: radial-gradient(circle, white, rgba(101,220,255,.65) 46%, transparent 75%); }
.piece.power-gold-bowl::before { opacity: 1; background: radial-gradient(circle,#fff9bd,#ffd13e 45%,rgba(255,139,12,.55) 66%,transparent 76%); box-shadow: 0 0 12px #fff3a1; }
.piece.power-piece img { transform: scale(.87); }
.piece.bone-combining img { animation: boneMerge .21s ease-in forwards; }
.piece.gold-created img { animation: goldBowlCreated .34s var(--ease-pop) both; }
@keyframes selectRing { to { transform: scale(1.04); opacity: .62; } }
@keyframes hintWiggle { 25% { transform: rotate(-7deg) scale(1.08); } 75% { transform: rotate(7deg) scale(1.08); } }
@keyframes invalidWiggle { 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
@keyframes piecePop { 45% { transform: scale(1.22); filter: brightness(1.3); } 100% { transform: scale(.1) rotate(18deg); opacity: 0; } }
@keyframes newPiece { from { opacity: .2; filter: brightness(1.4); } 70% { transform: scale(1.08); } }
@keyframes powerGlow { to { transform: scale(1.1) rotate(5deg); filter: brightness(1.2); } }
@keyframes dogCelebrate { 28% { transform: translateY(-8%) scale(1.1) rotate(-5deg); } 58% { transform: translateY(2%) scale(.96) rotate(5deg); } }
@keyframes dogNervous { 20%,60% { transform: translateX(-3%) rotate(-3deg); } 40%,80% { transform: translateX(3%) rotate(3deg); } }
@keyframes dogWink { 38% { transform: scaleY(.82) translateY(3%) rotate(2deg); filter: brightness(1.08); } }
@keyframes powerCreated { 25% { transform: scale(.65) rotate(-18deg); filter: brightness(1.5); } 62% { transform: scale(1.16) rotate(8deg); } }
@keyframes boneMerge { to { transform: translate(var(--merge-x),var(--merge-y)) scale(.2) rotate(220deg); filter: brightness(1.8); opacity: .2; } }
@keyframes goldBowlCreated { from { transform: scale(.18) rotate(-18deg); filter: brightness(2); } 65% { transform: scale(1.13) rotate(5deg); } }

.obstacle { position: absolute; width: calc(100% / 7); height: calc(100% / 7); display: grid; place-items: center; padding: 6px; transition: transform .2s var(--ease-pop), opacity .2s; }
.obstacle::before { display: grid; place-items: center; width: 82%; height: 82%; border-radius: 16px; font-size: clamp(1rem, 5vw, 2.6rem); filter: drop-shadow(0 3px 2px rgba(0,0,0,.32)); }
.obstacle.mud { padding: 1px; }
.obstacle.mud::before { content: ""; width: 96%; height: 96%; border: 0; border-radius: 19%; background: url('assets/mud-patch.webp') center/contain no-repeat; opacity: .96; filter: drop-shadow(0 0 2px #fff0ba) drop-shadow(0 3px 2px rgba(31,16,8,.5)); }
.obstacle.mud::after { content: ""; position: absolute; inset: 8%; border: 2px solid rgba(255,238,171,.82); border-radius: 22%; box-shadow: inset 0 0 5px rgba(255,255,255,.45), 0 0 5px rgba(255,221,125,.45); }
.obstacle.crate::before { content: ""; width: 94%; height: 94%; background: radial-gradient(circle,rgba(255,244,173,.5),rgba(235,142,49,.25) 62%,rgba(100,51,25,.42)); border: 3px solid #ffd36b; box-shadow: inset 0 0 8px rgba(255,255,255,.55),0 0 8px rgba(255,214,91,.56); }
.obstacle.toy::before { content: "🎾"; background: repeating-linear-gradient(45deg,#ee5e72 0 9px,#f8c84c 9px 18px); border: 3px solid #8b4269; }
.obstacle.paw::before { content: "🐾"; background: rgba(124,91,213,.72); border: 3px solid #efe3ff; }
.obstacle.leash::before { content: "➰"; background: rgba(61,177,177,.76); border: 3px solid #d9ffff; }
.obstacle.damage { animation: obstacleHit .28s ease; }
.obstacle.cleared { transform: scale(1.35) rotate(13deg); opacity: 0; }
.obstacle.mud.cleared { animation: mudClean .43s var(--ease-pop) forwards; }
.obstacle.mud.remaining-help::before { animation: mudLocate .82s ease-in-out 3; }
.obstacle.mud.tutorial-focus::before { animation: mudTutorialFocus .72s ease-in-out infinite alternate; }
.cage-overlay { position: absolute; width: calc(100% / 7); height: calc(100% / 7); pointer-events: none; }
.cage-bars { position: absolute; inset: 6%; overflow: hidden; border: clamp(2px,.55vw,4px) solid #f5d479; border-bottom-width: clamp(5px,1.15vw,8px); border-radius: 17%; background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(113,60,24,.1)); box-shadow: inset 0 0 5px rgba(255,255,255,.8),0 0 0 2px rgba(70,35,18,.72),0 0 9px rgba(255,220,93,.62); }
.cage-bars i { position: absolute; top: -3%; bottom: -3%; width: clamp(4px,1.05vw,8px); border-radius: 999px; background: linear-gradient(90deg,#633b1f,#fff0a5 38%,#ad6c29 68%,#4d2d1b); box-shadow: 0 1px 2px rgba(0,0,0,.52); }
.cage-bars i:nth-child(1) { left: 22%; }.cage-bars i:nth-child(2) { left: calc(50% - 3px); }.cage-bars i:nth-child(3) { right: 22%; }
.cage-lock { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); width: clamp(19px,4.8vw,31px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #6f461d; background: linear-gradient(145deg,#fff5a5,#f0af32); border: 2px solid white; box-shadow: 0 2px 0 #8f5b21,0 0 7px #fff0a3; font-size: clamp(.52rem,2.4vw,.85rem); }
.cage-overlay.damage { animation: cageHit .27s ease; }
.cage-overlay.remaining-help .cage-bars, .cage-overlay.tutorial-focus .cage-bars { animation: cageLocate .74s ease-in-out 3; }
.cage-overlay.tutorial-focus .cage-bars { animation-iteration-count: infinite; animation-direction: alternate; }
.cage-overlay.freed .cage-bars { animation: cageOpen .29s ease-out forwards; }
.cage-overlay.freed .cage-lock { animation: lockPop .26s ease-out forwards; }
.obstacle-hp { position: absolute; right: 7%; top: 5%; display: grid; place-items: center; width: 20px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--coral); border: 2px solid white; font-size: .65rem; font-weight: 1000; }
@keyframes obstacleHit { 50% { transform: scale(1.12) rotate(-5deg); filter: brightness(1.25); } }
@keyframes mudClean { 35% { transform: scale(1.18); opacity: 1; filter: brightness(1.35); } 100% { transform: scale(.35) rotate(12deg); opacity: 0; } }
@keyframes mudLocate { 50% { transform: scale(1.16); filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 11px #ffd84d); } }
@keyframes mudTutorialFocus { to { transform: scale(1.18); filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 16px #ffda45); } }
@keyframes cageHit { 45% { filter: brightness(1.4); } }
@keyframes cageLocate { 50% { transform: scale(1.09); box-shadow: inset 0 0 7px white,0 0 0 3px white,0 0 16px #ffe45e; filter: brightness(1.18); } }
@keyframes cageOpen { 45% { transform: scale(1.12); filter: brightness(1.5); } 100% { transform: translateY(-22%) scaleX(1.25); opacity: 0; } }
@keyframes lockPop { to { transform: translate(-50%,-25px) rotate(35deg) scale(.3); opacity: 0; } }

.effect-layer { z-index: 7; overflow: hidden; }
.paw-particle { position: absolute; font-size: clamp(.7rem, 3vw, 1.35rem); animation: particleFly .65s ease-out forwards; }
.score-pop { position: absolute; z-index: 14; transform: translate(-50%,-50%); color: white; text-shadow: 0 2px 0 #205c78,0 0 6px rgba(0,0,0,.4); font-size: clamp(.58rem,2.6vw,.82rem); font-weight: 1000; pointer-events: none; animation: scoreFloat .62s ease-out forwards; }
.score-pop.hot { color: #fff27f; font-size: clamp(.7rem,3vw,1rem); }
.power-creation-ring { position: absolute; z-index: 11; width: calc(100% / 7 * 1.35); aspect-ratio: 1; transform: translate(-50%,-50%) scale(.15); border: 5px solid #ffd85a; border-radius: 50%; box-shadow: 0 0 18px #fff,0 0 30px #ffc953; pointer-events: none; animation: powerRing .65s ease-out forwards; }
.power-creation-ring.bowl { border-color: #d9faff; box-shadow: 0 0 18px #fff,0 0 32px #7be8ff; }
.power-creation-ring.gold-bowl { border-color: #fff09a; box-shadow: 0 0 18px #fff,0 0 36px #ffc928,0 0 48px rgba(255,132,16,.72); }
.mud-splash { position: absolute; z-index: 12; font-size: clamp(.72rem, 3.4vw, 1.45rem); color: #a56533; text-shadow: 0 1px 0 #5b3019, 0 0 5px white; animation: mudSplash .68s ease-out forwards; pointer-events: none; }
.mud-clean-label { position: absolute; z-index: 13; transform: translate(-50%,-50%); color: white; text-shadow: 0 2px 0 #34704e, 0 0 8px #fff; font-size: clamp(.64rem,2.8vw,.92rem); font-weight: 1000; animation: cleanLabel .72s var(--ease-pop) forwards; pointer-events: none; }
.puppy-free-particle { position: absolute; z-index: 12; color: #fff3a6; text-shadow: 0 1px 0 #75511d,0 0 6px white; font-size: clamp(.72rem,3.3vw,1.35rem); animation: puppyFreeParticle .7s ease-out forwards; pointer-events: none; }
.puppy-free-label { position: absolute; z-index: 13; transform: translate(-50%,-50%); color: white; text-shadow: 0 2px 0 #2a7b77,0 0 8px #fff; font-size: clamp(.6rem,2.6vw,.88rem); font-weight: 1000; white-space: nowrap; animation: cleanLabel .76s var(--ease-pop) forwards; pointer-events: none; }
@keyframes particleFly { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; } }
@keyframes scoreFloat { 22% { opacity: 1; transform: translate(-50%,-72%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%,-145%) scale(.9); } }
@keyframes powerRing { 48% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes mudSplash { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.35); opacity: 0; } }
@keyframes cleanLabel { 35% { transform: translate(-50%,-85%) scale(1.18); opacity: 1; } 100% { transform: translate(-50%,-125%) scale(.92); opacity: 0; } }
@keyframes puppyFreeParticle { to { transform: translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.4); opacity: 0; } }
.blast-line { position: absolute; border-radius: 999px; pointer-events: none; background: linear-gradient(90deg, transparent, #fff, #ffdc4c, #fff, transparent); box-shadow: 0 0 20px #fff, 0 0 34px #ffdd46; opacity: 0; animation: blastLine .48s ease-out forwards; }
.blast-line.row { left: 0; right: 0; height: calc(100% / 7 * .58); }
.blast-line.col { top: 0; bottom: 0; width: calc(100% / 7 * .58); background: linear-gradient(180deg, transparent, #fff, #6de8f2, #fff, transparent); }
.blast-line.gold-diagonal { width: 270%; height: calc(100% / 7 * .48); border: 2px solid rgba(255,255,255,.65); background: linear-gradient(90deg,transparent,#ffc92c 12%,#fff8ba 42%,#fff 50%,#fff8ba 58%,#ffc92c 88%,transparent); box-shadow: 0 0 17px #fff,0 0 31px #ffc72b,0 0 42px rgba(255,125,11,.72); transform-origin: center; animation: goldDiagonalBlast .52s ease-out forwards; }
@keyframes blastLine { 12% { opacity: 1; transform: scale(.1, .7); } 60% { opacity: 1; transform: scale(1,1); } 100% { opacity: 0; transform: scale(1.15, .4); } }
@keyframes goldDiagonalBlast { 12% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--blast-angle)) scaleX(.06); } 58% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--blast-angle)) scaleX(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--blast-angle)) scaleX(1.08) scaleY(.42); } }
.screen-impact { position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(circle, rgba(255,255,255,.88), rgba(113,222,243,.3), transparent 70%); animation: impact .45s ease-out forwards; }
.screen-impact.combo-impact { background: radial-gradient(circle,rgba(255,255,255,.96),rgba(255,222,79,.48) 28%,rgba(128,93,231,.28) 52%,transparent 74%); animation-duration: .52s; }
@keyframes impact { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.combo-banner { position: absolute; z-index: 20; left: 50%; top: 9px; transform: translate(-50%,-130%); min-width: 180px; padding: 8px 15px; border: 3px solid white; border-radius: 999px; text-align: center; color: var(--navy); background: linear-gradient(145deg, var(--sun), #fff69b); box-shadow: 0 5px 0 #b86b27, 0 9px 18px rgba(0,0,0,.25); font-size: clamp(.95rem, 5vw, 1.35rem); font-weight: 1000; opacity: 0; pointer-events: none; }
.combo-banner.show { animation: comboShow .85s var(--ease-pop); }
.combo-banner.combo-level-4, .combo-banner.combo-level-5 { color: white; background: linear-gradient(145deg,#ff715e,#ec4ca8); box-shadow: 0 5px 0 #8e2d69,0 9px 20px rgba(0,0,0,.28); }
.combo-banner.combo-level-6, .combo-banner.combo-level-7, .combo-banner.combo-level-8 { color: white; background: linear-gradient(120deg,#7757df,#e24eb5,#ff8b47); box-shadow: 0 5px 0 #5d337d,0 0 17px rgba(255,222,82,.65),0 10px 22px rgba(0,0,0,.3); font-size: clamp(1.05rem,5.4vw,1.5rem); }
@keyframes comboShow { 20%,70% { transform: translate(-50%,0) rotate(-2deg); opacity: 1; } 100% { transform: translate(-50%,-125%); opacity: 0; } }
.paw-shuffle { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.7); width: max-content; max-width: 90%; padding: 11px 17px; border-radius: 999px; color: white; background: linear-gradient(145deg,#8657dd,#e255b4); border: 3px solid white; box-shadow: 0 7px 0 #623278; font-size: clamp(1rem,5vw,1.4rem); font-weight: 1000; opacity: 0; pointer-events: none; }
.paw-shuffle.show { animation: shuffleShow 1.1s var(--ease-pop); }
@keyframes shuffleShow { 20%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }
.objective-tutorial { position: absolute; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 8px; background: linear-gradient(180deg, rgba(4,27,44,.08) 0 48%, rgba(4,27,44,.68) 78%); pointer-events: auto; }
.objective-tutorial-pointer { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-100%); font-size: clamp(1.6rem,7vw,2.4rem); filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); animation: tutorialPoint .7s ease-in-out infinite alternate; }
.objective-tutorial-card { width: 100%; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 6px 9px; align-items: center; padding: 9px; border-radius: 17px; color: var(--navy); background: rgba(255,255,255,.97); border: 3px solid var(--sun); box-shadow: 0 6px 0 rgba(76,52,12,.35), 0 10px 24px rgba(0,0,0,.3); }
.objective-tutorial-icon { width: 58px; height: 58px; display: grid; place-items: center; grid-row: 1; border-radius: 14px; background: #fff7dc; font-size: 2.25rem; }
.objective-tutorial-icon img { width: 58px; height: 58px; object-fit: contain; }
.objective-tutorial-card small { display: block; color: var(--coral); font-size: .53rem; font-weight: 1000; letter-spacing: .09em; }
.objective-tutorial-card strong { display: block; font-size: .95rem; line-height: 1.1; }
.objective-tutorial-card p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.25; font-weight: 800; }
.objective-tutorial-card button { grid-column: 1 / -1; min-height: 35px; border: 0; border-radius: 11px; color: white; background: linear-gradient(145deg,var(--teal),#2b91a7); box-shadow: 0 3px 0 #176a77; font-size: .72rem; font-weight: 1000; cursor: pointer; }
@keyframes tutorialPoint { to { transform: translate(-50%,-78%) scale(1.08); } }
.objective-tutorial[hidden] { display: none; }
.board-hint { min-height: 20px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; color: #fff; background: rgba(8,36,66,.68); font-size: .72rem; font-weight: 800; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.3); }

.booster-dock { width: min(100%, 650px); display: flex; justify-content: center; gap: 8px; }
.booster-dock button { position: relative; min-width: 88px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 4px 8px; border-radius: 15px; border: 2px solid rgba(255,255,255,.62); color: white; background: rgba(8,36,66,.83); box-shadow: 0 4px 0 rgba(3,21,37,.48); font-weight: 900; font-size: .7rem; cursor: pointer; }
.booster-dock button.armed { border-color: var(--sun); box-shadow: 0 0 15px var(--sun), 0 4px 0 rgba(3,21,37,.48); }
.booster-dock img { width: 34px; height: 34px; object-fit: contain; }
.booster-dock b { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--sun); border: 2px solid white; font-size: .65rem; }
.hint-paw { font-size: 1.4rem; }

.game-dialog { width: min(calc(100% - 24px), 520px); max-height: min(92dvh, 820px); padding: 0; overflow: hidden auto; border: 0; border-radius: 28px; color: var(--ink); background: white; box-shadow: 0 24px 60px rgba(3,21,38,.5); }
.game-dialog::backdrop { background: rgba(4,23,40,.72); backdrop-filter: blur(5px); }
.game-dialog[open] { animation: dialogIn .3s var(--ease-pop); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(18px) scale(.92); } }
.dialog-close { position: absolute; z-index: 3; right: 12px; top: 12px; display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.65); color: white; background: rgba(8,36,66,.65); font-size: 1.45rem; font-weight: 900; cursor: pointer; }
.stage-intro-art { position: relative; min-height: 220px; padding: 21px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; color: white; background: url('assets/world-sunny.webp') center/cover; isolation: isolate; }
.stage-intro-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,36,65,.06), rgba(7,36,65,.76)); }
.intro-stage-tag { position: absolute; left: 14px; top: 14px; padding: 7px 11px; border-radius: 999px; background: white; color: var(--navy); font-size: .75rem; font-weight: 1000; box-shadow: var(--soft-shadow); }
.intro-world { display: flex; align-items: center; gap: 7px; text-shadow: 0 3px 7px rgba(0,0,0,.55); }
.intro-world span { font-size: 2.1rem; }
.intro-world h2 { margin: 0; font-size: clamp(1.4rem, 6vw, 2rem); }
.difficulty-badge { margin-top: 8px; padding: 6px 12px; border-radius: 999px; color: var(--navy); background: var(--sun); border: 2px solid white; font-size: .72rem; letter-spacing: .08em; font-weight: 1000; text-shadow: none; }
.difficulty-badge.HARD { background: #ffad57; }.difficulty-badge.SUPER-HARD { color: white; background: #a557dd; }.difficulty-badge.BOSS { color: white; background: #db4a82; }
.challenge-badge { margin-top: 6px; padding: 6px 11px; border-radius: 999px; color: white; background: rgba(9,45,75,.84); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 3px 0 rgba(0,0,0,.24); font-size: .72rem; letter-spacing: .07em; font-weight: 1000; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.challenge-badge.boss { background: linear-gradient(135deg,#7f4ed1,#dc458b); }.challenge-badge.time { background: linear-gradient(135deg,#19768b,#1ab8b7); }.challenge-badge.mud { background: linear-gradient(135deg,#80502f,#c77842); }.challenge-badge.frenzy { background: linear-gradient(135deg,#e55376,#9e55df); }
.dialog-body { padding: 20px; }
.dialog-body.centered { text-align: center; }
.dialog-body h2 { margin: 3px 0 10px; color: var(--navy); font-size: 1.7rem; }
.dialog-body h3 { margin: 0 0 9px; color: var(--navy); font-size: .85rem; letter-spacing: .11em; }
.dialog-body p { color: var(--muted); line-height: 1.45; }
.intro-goals { display: grid; gap: 7px; }
.intro-goal { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 15px; color: var(--navy); background: #edf7f8; border: 1px solid #d6eaed; font-weight: 900; font-size: .86rem; }
.intro-goal span { display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 11px; background: white; font-size: 1.2rem; }
.objective-art { width: 38px; height: 38px; object-fit: contain; }
.intro-meta { display: grid; grid-template-columns: 74px 74px minmax(0,1fr); gap: 7px; margin: 12px 0; }
.intro-meta div { min-width: 0; padding: 9px 7px; border-radius: 14px; text-align: center; background: #fff4cd; }
.intro-meta small { display: block; color: #936c28; font-size: .58rem; letter-spacing: .08em; font-weight: 1000; }
.intro-meta strong { display: block; margin-top: 2px; color: var(--navy); font-size: .88rem; overflow-wrap: anywhere; }
.intro-special { margin: 10px 0; padding: 10px; border-radius: 14px; color: #60377a; background: #f4eaff; font-size: .78rem; line-height: 1.4; font-weight: 800; }
.intro-special.mud-intro { padding: 0; overflow: hidden; color: var(--navy); background: #fff7d7; border: 2px solid #e5b954; }
.intro-special.crate-intro { padding: 0; overflow: hidden; color: var(--navy); background: #fff8dc; border: 2px solid #e5b954; }
.mud-intro-title { padding: 7px 10px; color: white; background: linear-gradient(90deg,#9a552c,#d58142); font-size: .7rem; letter-spacing: .09em; text-align: center; }
.mud-intro-main { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px 10px; }
.mud-intro-main img { width: 70px; height: 70px; object-fit: contain; }
.mud-intro-main strong { display: block; font-size: .9rem; }
.mud-intro-main p { margin: 3px 0 0; color: #73563b; font-size: .72rem; line-height: 1.35; }
.mud-clean-steps { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; border-top: 1px solid #ead49c; background: rgba(255,255,255,.52); font-size: .65rem; font-weight: 1000; }
.mud-clean-steps img { width: 29px; height: 29px; object-fit: contain; }
.clean-tile-swatch { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: white; background: linear-gradient(145deg,#74cf5a,#3ba764); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.crate-intro-title { padding: 7px 10px; color: white; background: linear-gradient(90deg,#774827,#d68c35); font-size: .7rem; letter-spacing: .09em; text-align: center; }
.crate-intro-main { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px 10px; }
.crate-intro-main > .crate-objective-icon { width: 72px; height: 72px; border-radius: 17px; }
.crate-intro-main > .crate-objective-icon img { width: 68px; height: 68px; }
.crate-intro-main > .crate-objective-icon b { width: 24px; height: 24px; font-size: .7rem; }
.crate-intro-main strong { display: block; font-size: .86rem; }
.crate-intro-main p { margin: 3px 0 0; color: #745538; font-size: .72rem; line-height: 1.35; }
.crate-free-steps { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-top: 1px solid #ead49c; background: rgba(255,255,255,.52); font-size: .7rem; font-weight: 1000; }
.crate-step-icon { display: grid; place-items: center; }
.crate-step-icon .crate-objective-icon { width: 30px; height: 30px; border-radius: 8px; }
.crate-step-icon .crate-objective-icon img { width: 28px; height: 28px; }
.free-paw { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dffbe9; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.compact-dialog { max-width: 390px; }
.dialog-dog { height: 130px; margin-top: -9px; }
.dialog-dog img, .result-dog img { width: 100%; height: 100%; object-fit: contain; }
.compact-dialog .full-button, .result-dialog .full-button { margin-top: 9px; }
.result-dialog { max-width: 450px; overflow: hidden auto; }
.result-dialog .dialog-body { overflow: hidden; border-radius: inherit; }
.result-dog { height: 120px; margin-top: -18px; animation: resultDog .9s ease-in-out infinite alternate; }
@keyframes resultDog { to { transform: translateY(-5px) rotate(2deg); } }
.result-stars { display: flex; justify-content: center; gap: 4px; min-height: 58px; margin: 3px 0 9px; }
.result-stars span { font-size: 2.8rem; color: #c9d4d7; filter: grayscale(1); transform: scale(.7); }
.result-stars span.earned { color: var(--sun); filter: none; animation: starEarn .5s var(--ease-pop) both; animation-delay: calc(var(--i) * .16s); text-shadow: 0 3px 0 #d18a28; }
@keyframes starEarn { to { transform: scale(1) rotate(4deg); } }
.result-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.result-summary div { padding: 9px; border-radius: 13px; background: #edf6f8; }
.result-summary div.new-record { color: #6f4a04; background: linear-gradient(145deg,#fff2a9,#fffbd7); box-shadow: inset 0 0 0 2px #f4ca4b; animation: recordGlow .9s ease-in-out infinite alternate; }
.result-summary small { display: block; color: var(--muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.result-summary strong { display: block; margin-top: 1px; color: var(--navy); font-size: .98rem; }
.result-rewards { margin-top: 10px; padding: 9px 12px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 7px; text-align: left; border-radius: 14px; color: #694b11; background: #fff4b4; font-size: .78rem; font-weight: 900; }
.result-rewards > span { font-size: 1.45rem; }
.result-rewards small, .result-rewards strong, .result-rewards em { display: block; }
.result-rewards small { color: #9a6a17; font-size: .7rem; letter-spacing: .08em; }
.result-rewards strong { color: #68480f; line-height: 1.25; }
.result-rewards em { margin-top: 2px; color: #8a702f; font-size: .72rem; font-style: normal; }
.result-moment { display: inline-block; margin: -2px auto 5px; padding: 5px 10px; border-radius: 999px; color: white; background: linear-gradient(135deg,#e64e7d,#8c57db); box-shadow: 0 3px 0 #653687; font-size: .72rem; letter-spacing: .08em; font-weight: 1000; animation: momentPop .55s var(--ease-pop) both; }
.result-subtitle { min-height: 19px; margin: -5px 0 1px !important; color: var(--muted) !important; font-size: .78rem; line-height: 1.3 !important; font-weight: 900; overflow-wrap: anywhere; }
.result-progress { margin-top: 9px; padding: 10px; border-radius: 14px; text-align: left; background: #f0f1ff; border: 1px solid #d8d7ef; }
.result-progress:empty { display: none; }
.result-progress-heading { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 7px; }
.result-progress-heading > span { display: grid; place-items: center; width: 35px; aspect-ratio: 1; border-radius: 11px; background: white; font-size: 1.2rem; }
.result-progress-heading small { display: block; color: var(--purple); font-size: .68rem; font-weight: 1000; letter-spacing: .08em; }
.result-progress-heading strong { display: block; color: var(--navy); font-size: .76rem; line-height: 1.2; }
.result-progress-heading > b { color: var(--purple); font-size: .74rem; white-space: nowrap; }
.result-progress .progress-track { margin: 7px 0 5px; }
.result-progress p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; font-weight: 800; }
.set-complete-result { position: relative; min-height: 64px; padding-left: 58px; display: flex; flex-direction: column; justify-content: center; }
.set-complete-result > span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 49px; aspect-ratio: 1; border-radius: 15px; background: linear-gradient(135deg,#ffca46,#f56cb8,#7567e4); font-size: 1.7rem; box-shadow: 0 0 14px rgba(230,98,190,.34); }
.set-complete-result small { color: #c3408a; font-size: .7rem; font-weight: 1000; letter-spacing: .08em; }
.set-complete-result strong { color: var(--navy); font-size: .86rem; }
.set-complete-result p { margin-top: 3px; }
.world-complete-summary > small { display: block; color: #a34a77; font-size: .7rem; font-weight: 1000; letter-spacing: .07em; }
.world-complete-summary > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 7px 0; }
.world-complete-summary > div span { padding: 6px 4px; border-radius: 10px; text-align: center; color: var(--muted); background: white; font-size: .68rem; font-weight: 800; }
.world-complete-summary > div b { display: block; color: var(--navy); font-size: .76rem; }
.world-complete-summary > strong { display: block; color: var(--purple); font-size: .74rem; }
.result-dialog.three-star .result-celebration span { font-size: 2rem; animation-duration: 1.2s; }
.result-dialog.world-complete .dialog-body, .result-dialog.boss-victory .dialog-body { background: linear-gradient(180deg,#fff,#fff9d5 72%,#f2edff); }
.result-dialog.world-complete .result-dog, .result-dialog.boss-victory .result-dog { animation-duration: .55s; }
@keyframes momentPop { from { transform: scale(.55) rotate(-5deg); opacity: 0; } }
@keyframes recordGlow { to { filter: brightness(1.06); box-shadow: inset 0 0 0 2px #f4ca4b,0 0 12px rgba(245,201,69,.45); } }
.result-celebration { position: absolute; inset: -20px; pointer-events: none; overflow: hidden; }
.result-celebration span { position: absolute; font-size: 1.7rem; animation: resultConfetti 1.6s ease-out infinite; }
.result-celebration span:nth-child(1) { left: 6%; top: 10%; }.result-celebration span:nth-child(2) { right: 5%; top: 22%; animation-delay: .3s; }.result-celebration span:nth-child(3) { left: 14%; bottom: 8%; animation-delay: .6s; }.result-celebration span:nth-child(4) { right: 12%; bottom: 12%; animation-delay: .9s; }
.result-celebration span:nth-child(5) { left: 42%; top: 2%; animation-delay: .18s; }.result-celebration span:nth-child(6) { right: 38%; bottom: 3%; animation-delay: .72s; }
@keyframes resultConfetti { 50% { transform: translateY(-16px) rotate(25deg) scale(1.25); } 100% { opacity: .2; } }
.result-dialog.failure .result-celebration { display: none; }
.result-dialog.failure .result-dog { animation: sadDog 1.5s ease-in-out infinite; filter: saturate(.65); }
@keyframes sadDog { 50% { transform: rotate(-4deg) translateY(3px); } }
.detail-dialog { max-width: 400px; overflow: visible; }
.detail-dialog .dialog-body { border-radius: inherit; overflow: hidden; }
.detail-art { width: 170px; height: 170px; margin: -4px auto 5px; display: grid; place-items: center; border-radius: 30px; font-size: 6rem; background: linear-gradient(145deg,#6dd5d8,#6a72df); border: 5px solid #d8ffff; box-shadow: var(--shadow); }
.detail-art img { width: 100%; height: 100%; object-fit: contain; }
.detail-dialog h2 { margin-bottom: 2px; }
.detail-rarity { display: inline-block; margin: 5px 0; padding: 5px 10px; border-radius: 999px; color: white; background: var(--purple); font-size: .68rem; letter-spacing: .1em; font-weight: 1000; }
.detail-fact { margin-top: 10px; padding: 10px; border-radius: 14px; background: #edf6f8; font-size: .78rem; font-weight: 800; }
.confirm-icon { display: block; font-size: 2.6rem; }

.welcome-dialog { max-width: 430px; overflow: hidden auto; background: linear-gradient(180deg,#e9fbff 0,#fff 36%); }
.welcome-dogs { height: 138px; display: flex; align-items: flex-end; justify-content: center; margin: -28px 0 -12px; pointer-events: none; }
.welcome-dogs img { width: 122px; height: 132px; object-fit: contain; margin: 0 -24px; filter: drop-shadow(0 7px 5px rgba(8,36,66,.27)); transform: rotate(-5deg); }
.welcome-dogs img:nth-child(2) { z-index: 1; width: 146px; height: 146px; transform: none; }
.welcome-dogs img:nth-child(3) { transform: rotate(5deg); }
.welcome-logo { margin: 6px auto 14px; filter: drop-shadow(0 4px 0 rgba(11,47,76,.25)); }
.welcome-dialog h2 { margin-top: 6px; font-size: clamp(1.45rem,6vw,1.85rem); }
.welcome-dialog p { margin: 0 auto 13px; max-width: 340px; font-size: .84rem; }
.welcome-name-field { display: block; text-align: left; }
.welcome-name-field > span { display: block; margin: 0 0 5px 4px; color: var(--purple); font-size: .72rem; letter-spacing: .08em; font-weight: 1000; }
.welcome-avatar-section { margin-top: 11px; text-align: left; }
.welcome-avatar-section > span { display: block; margin: 0 0 6px 4px; color: var(--purple); font-size: .72rem; letter-spacing: .08em; font-weight: 1000; }
.welcome-dialog .primary-button { margin-top: 11px; }
.local-save-note { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; }

.toast { position: fixed; z-index: 1200; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translate(-50%,-140%); width: min(calc(100% - 24px), 390px); min-height: 65px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; color: var(--navy); background: white; border: 3px solid var(--sun); box-shadow: var(--shadow); opacity: 0; pointer-events: none; }
.toast.show { animation: toastIn 3.1s ease both; }
@keyframes toastIn { 10%,82% { transform: translate(-50%,0); opacity: 1; } 100% { transform: translate(-50%,-140%); opacity: 0; } }
.toast > span { font-size: 1.8rem; }
.toast div { min-width: 0; }
.toast strong { display: block; }
.toast small { display: block; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }

body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .08s !important; }

@media (min-width: 720px) {
  .menu-scroll { padding-left: 24px; padding-right: 24px; }
  .menu-grid { grid-template-columns: repeat(4,1fr); }
  .menu-grid button { min-height: 112px; grid-template: 54px auto auto / 1fr; justify-items: center; text-align: center; gap: 2px; }
  .menu-grid .profile-menu-button { min-height: 72px; grid-template: auto auto / 54px 1fr; justify-items: start; text-align: left; gap: 0 10px; }
  .menu-grid .profile-menu-button .menu-icon { grid-row: 1 / 3; }
  .menu-icon { grid-row: auto; width: 54px; }
  .world-map { grid-template-columns: repeat(2,1fr); }
  .world-card { min-height: 300px; }
  .stage-path { margin-top: 83px; }
}

@media (max-width: 430px) {
  .menu-scroll { padding-left: 11px; padding-right: 11px; }
  .continue-card { padding-left: 14px; }
  .play-button { min-width: 112px; padding: 10px 14px; }
  .menu-grid { gap: 8px; }
  .menu-grid button { padding: 9px; min-height: 72px; grid-template-columns: 41px 1fr; gap: 0 7px; }
  .menu-icon { width: 41px; font-size: 1.25rem; }
  .quick-stats div { padding: 7px 6px; grid-template-columns: 28px 1fr; }
  .quick-stats span { font-size: 1.08rem; }
  .next-reward-tease { grid-template-columns: 41px minmax(0,1fr); padding-left: 9px; padding-right: 9px; }
  .next-reward-tease > span { width: 39px; font-size: 1.35rem; }
  .next-reward-tease strong { font-size: .8rem; }
  .world-card { min-height: 300px; padding: 14px; }
  .stage-path { margin-top: 86px; }
  .stage-node { font-size: .82rem; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding-left: 9px; padding-right: 9px; }
  .sticker-card, .dog-card { min-height: 205px; border-radius: 20px; }
  .sticker-art { min-height: 115px; }
  .dog-portrait { height: 135px; }
  .sticker-set-items { grid-template-columns: 1fr; }
  .collection-milestone { grid-template-columns: 48px minmax(0,1fr); padding: 13px; }
  .collection-milestone .milestone-icon { width: 46px; font-size: 1.55rem; }
  .section-header { grid-template-columns: 44px minmax(0,1fr) auto; padding-left: 9px; padding-right: 9px; }
  .header-count, .header-stars { min-width: 43px; padding: 7px 6px; font-size: .78rem; }
  .daily-hero { grid-template-columns: 96px 1fr; }
  .treat-box { width: 92px; }
  .streak-summary { grid-template-columns: 1fr; }
  .streak-summary div { display: flex; align-items: center; justify-content: space-between; }
  .achievement-card { grid-template-columns: 47px minmax(0,1fr); }
  .achievement-progress { grid-column: 2; text-align: left; }
  .achievement-icon { width: 46px; }
  .game-dialog { width: calc(100% - 16px); }
  .stage-intro-art { min-height: 194px; }
  .dialog-body { padding: 16px; }
  .settings-list .volume-setting { align-items: flex-start; flex-direction: column; gap: 2px; padding: 11px 0; }
  .settings-list .volume-setting input[type="range"] { width: 100%; }
  .profile-hero { grid-template-columns: 92px minmax(0,1fr); padding: 13px; }
  .profile-avatar-frame { width: 88px; height: 88px; }
  .profile-avatar-frame img { width: 80px; height: 80px; }
  .profile-name-controls { grid-template-columns: 1fr; }
  .profile-name-controls .primary-button { width: 100%; }
  .welcome-dogs { height: 112px; margin-top: -20px; }
  .welcome-dogs img { width: 96px; height: 110px; margin: 0 -19px; }
  .welcome-dogs img:nth-child(2) { width: 122px; height: 122px; }
  .welcome-dialog .puppy-avatar-grid { gap: 5px; }
  .welcome-dialog .puppy-avatar-choice { min-height: 72px; border-radius: 14px; }
  .welcome-dialog .puppy-avatar-choice > span { width: 47px; height: 47px; }
  .welcome-dialog .puppy-avatar-choice img { width: 46px; height: 46px; }
  .world-complete-summary > div { grid-template-columns: 1fr; }
  .world-complete-summary > div span { display: flex; align-items: center; justify-content: space-between; }
  .objective-pill { grid-template-columns: 24px minmax(0,1fr); padding-left: 4px; padding-right: 4px; }
  .objective-symbol { width: 24px; height: 24px; font-size: .9rem; }
  .objective-symbol img { width: 27px; height: 27px; }
}

@media (max-height: 740px) {
  .game-screen.active { gap: 4px; }
  .game-header { grid-template-columns: 48px minmax(0,1fr) 39px; }
  .stage-chip { width: 48px; height: 42px; }
  .game-header .round-button { width: 38px; }
  .game-stats, .score-meter, .counter-card { min-height: 42px; }
  .score-meter { padding-top: 4px; padding-bottom: 4px; }
  .objective-pill { padding-top: 4px; padding-bottom: 4px; }
  .game-board { width: min(95vw, 55.5vh, 590px); }
  .board-hint { margin-top: 4px; }
  .booster-dock button { height: 44px; min-width: 80px; }
  .booster-dock img { width: 29px; height: 29px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .game-screen.active { display: grid; grid-template-columns: minmax(270px, 56vh) minmax(270px, 1fr); grid-template-rows: auto auto 1fr auto; align-content: center; padding: 6px 12px; gap: 5px 12px; }
  .game-header, .game-stats, .objective-hud, .booster-dock, .boss-panel { width: 100%; grid-column: 2; }
  .game-header { grid-row: 1; }
  .game-stats { grid-row: 2; }
  .objective-hud { grid-row: 3; align-self: start; grid-auto-flow: row; grid-auto-rows: auto; }
  .booster-dock { grid-row: 4; }
  .board-zone { grid-column: 1; grid-row: 1 / 5; }
  .game-board { width: min(94vh, 550px); }
}