:root {
  color-scheme: light;
  --background: #fcf7f0;
  --paper: #fffdf9;
  --ink: #48382f;
  --muted: #9a887b;
  --soft-ink: #796658;
  --salmon: #dc7e77;
  --salmon-deep: #bd5f58;
  --pink-soft: #f9e6df;
  --stroke: #ecded0;
  --accent: #e8ae67;
  --mint: #e8efe5;
  --shadow: 0 16px 44px rgba(101, 61, 38, .06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--ink); font-family: "Trebuchet MS", "Avenir Next", Avenir, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #dd8679; outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
::selection { background: #f4ceb8; color: var(--ink); }
.background-decoration { position: absolute; pointer-events: none; opacity: .35; font-size: 94px; z-index: 0; color: #eccdb3; }
.background-decoration--one { top: 135px; right: max(2vw, calc((100vw - 1400px)/2)); transform: rotate(22deg); }
.background-decoration--two { left: 0; top: 750px; color: #f0d5ce; transform: rotate(-14deg); }
.page { max-width: 1376px; padding: 0 42px; margin: 0 auto; position: relative; z-index: 1; }
.site-header { min-height: 98px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee1d7; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 21px; font-weight: 900; letter-spacing: -.055em; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; background: #db8579; border-radius: 12px; transform: rotate(-11deg); font-size: 27px; color: white; line-height: 1; }
.brand-dot { color: var(--salmon); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.edition-label { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #a18370; }
.edition-sparkle { color: var(--salmon); font-size: 17px; }
.icon-button { width: 38px; height: 38px; border: 1px solid #e7d9cb; border-radius: 50%; background: #fffaf5; color: #856d5e; font-size: 17px; font-weight: 800; transition: background .18s, transform .18s; }
.icon-button:hover { background: var(--pink-soft); transform: rotate(9deg); }
.hero-intro { display: flex; align-items: center; justify-content: space-between; padding: 43px 0 31px; min-height: 206px; }
.eyebrow, .section-eyebrow { font-weight: 900; color: #b48d72; letter-spacing: .165em; font-size: 10px; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.mini-sun { color: var(--salmon); font-size: 20px; }
h1,h2,p { margin-top: 0; }
h1, h2, .win-dialog h2 { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-weight: 700; letter-spacing: -.06em; }
h1 { margin: 8px 0 7px; font-size: clamp(41px, 4.5vw, 63px); line-height: 1.06; }
h1 em, .rules-dialog h2 em, .win-dialog h2 em { color: var(--salmon); font-weight: 500; }
.heading-star { display: inline-block; color: #e7b56f; font-size: 29px; vertical-align: top; margin: -7px 0 0 9px; letter-spacing: normal; }
.hero-intro p { color: #8b7567; font-size: 14px; margin: 15px 0 0; line-height: 1.6; }
.intro-stamp { margin-right: 43px; width: 93px; height: 93px; border-radius: 50%; border: 2px dashed #d3aa96; transform: rotate(13deg); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; flex-shrink: 0; background: #f9ece2; box-shadow: 0 0 0 8px rgba(250,230,218,.4); }
.intro-stamp span { color: var(--salmon-deep); font-weight: 900; font-size: 22px; line-height: 1; }
.intro-stamp small { text-align: center; color: #a27d66; font-size: 9px; font-weight: 900; letter-spacing: .13em; line-height: 1.2; margin-top: 3px; }
.intro-stamp b { position: absolute; bottom: -9px; right: 0; color: var(--salmon); font-size: 24px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.44fr) minmax(330px, 1fr); gap: 22px; align-items: start; }
.play-card, .score-card, .shop-card { background: var(--paper); border: 1px solid var(--stroke); border-radius: 23px; box-shadow: var(--shadow); }
.play-card { padding: 23px; overflow: hidden; }
.play-heading, .sidebar-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.play-heading { padding: 0 4px 21px; }
.play-heading h2, .shop-card h2 { font-size: 28px; margin: 6px 0 0; line-height: 1.05; }
.play-heading h2 span, .shop-card h2 span { font-family: system-ui,sans-serif; color: var(--salmon); font-size: 18px; }
.mode-pill { display: flex; align-items: center; gap: 7px; border: 1px solid #e5e4d3; padding: 9px 11px; border-radius: 50px; background: #f5f7e9; white-space: nowrap; color: #79906c; letter-spacing: .09em; font-size: 9px; font-weight: 900; }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; background: #9db58e; }
.mode-pill--asleep { background: #eef0f8; border-color: #e0e0f0; color: #7b80a8; }
.mode-pill--asleep .mode-dot { background: #9296bb; }
.mode-pill--awakening { background: #faede4; border-color: #f1dbcf; color: #bd9274; }
.mode-pill--awakening .mode-dot { background: #dfa47b; }
.mode-pill--sandy { background: #fff2ce; border-color: #eddbb1; color: #aa8b3a; }
.mode-pill--sandy .mode-dot { background: #d2ad59; }
.mode-pill--angry { background: #ffe8dc; border-color: #efc7b9; color: #b66b59; }
.mode-pill--angry .mode-dot { background: #ce8068; }
.mode-pill--tie { background: #f6e6ed; border-color: #eed5e0; color: #b87597; }
.mode-pill--tie .mode-dot { background: #d989a3; }
.stage { height: clamp(410px, 42vw, 530px); overflow: hidden; position: relative; isolation: isolate; border: 1px solid #f4e7d8; border-radius: 17px; background: radial-gradient(circle at 52% 42%, #ffefde 0%, #faead9 47%, #f8e6d3 77%, #f5dfc9 100%); }
.stage-sun { position: absolute; top: 8%; left: 12%; right: 12%; aspect-ratio: 1; max-height: 82%; margin: auto; border-radius: 50%; background: rgba(255,253,246,.51); box-shadow: 0 0 0 1px rgba(255,253,246,.44),0 0 0 26px rgba(255,250,241,.10); z-index: 0; }
.stage-floor { position: absolute; height: 22%; width: 80%; border-radius: 50%; background: #e7baa0; opacity: .21; bottom: -9%; left: 10%; filter: blur(13px); }
.stage-deco { position: absolute; color: #e0a68d; font-size: 27px; opacity: .72; z-index: 1; pointer-events: none; }
.stage-deco--left { top: 24%; left: 11%; transform: rotate(-27deg); }
.stage-deco--right { top: 18%; right: 11%; color: #e9b75c; font-size: 35px; }
.stage-deco--small { bottom: 24%; right: 13%; opacity: .6; font-size: 19px; }
.dog-wrap { position: absolute; z-index: 3; width: min(92%, 475px); aspect-ratio: 1; top: 47.5%; left: 50%; transform: translate(-50%,-50%); will-change: transform; }
.dog-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: drop-shadow(0 15px 12px rgba(118, 74, 39, .12)); animation: dog-breathe 4s ease-in-out infinite; }
.dog-wrap.booped .dog-image { animation: boop-pop .27s ease-out; }
.dog-wrap[data-pose="huge-nose"] .dog-image { filter: drop-shadow(0 11px 12px rgba(130,73,36,.09)); }
.nose-hit { display: block; position: absolute; top: 35%; left: 47%; width: 9%; height: 9%; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid rgba(255,250,219,.95); box-shadow: 0 0 0 3px rgba(211, 135, 88, .26),0 0 0 8px rgba(255,255,255,.15); background: rgba(242,208,153,.14); z-index: 5; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: box-shadow .18s, background .18s; }
.nose-hit::before { content: ''; position: absolute; inset: -4px; border: 1px dashed rgba(255,255,255,.85); border-radius: 50%; pointer-events: none; animation: nose-pulse 2.2s ease-in-out infinite; }
.nose-hit:hover, .nose-hit:focus-visible { background: rgba(255,235,185,.30); box-shadow: 0 0 0 4px rgba(251,236,203,.75),0 0 0 10px rgba(217,140,102,.20); }
.nose-hit:active { background: rgba(251,236,203,.65); }
.fall-layer, .float-layer { position: absolute; inset: 0; pointer-events: none; }
.fall-layer { z-index: 10; }
.float-layer { z-index: 40; }
.falling-dog { position: absolute; top: -132px; left: 50%; width: clamp(88px, 19%, 116px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(157,124,158,.45); background: rgba(255,248,249,.45); box-shadow: 0 8px 22px rgba(108,76,92,.09); transform: translateX(-50%) rotate(-13deg); pointer-events: auto; padding: 4px; z-index: 12; animation: sleep-drop var(--fall-duration, 5700ms) linear forwards; -webkit-tap-highlight-color: transparent; }
.falling-dog img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.falling-dog::after { content: 'zZz'; position: absolute; top: -4px; right: -2px; font: 800 16px Georgia,serif; color: #9886ab; transform: rotate(11deg); text-shadow: 1px 1px #fff; }
.falling-dog:hover { border-color: #db7e84; }
.floating-number { position: absolute; transform: translate(-50%,-50%); font-size: 29px; font-weight: 900; font-family: Georgia, serif; color: #c36f5d; pointer-events: none; text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 6px 12px rgba(90,62,34,.08); animation: float-away .9s ease-out forwards; white-space: nowrap; }
.floating-number--subtle { color: #8d809e; font-size: 23px; }
.oops-bubble { position: absolute; z-index: 24; right: 16px; top: 16px; display: flex; align-items: center; gap: 7px; background: #fff9f5; border: 1px solid #efd8cf; border-radius: 13px; padding: 5px 9px 5px 4px; color: #ac7267; font-weight: 800; font-size: 11px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s, transform .16s; }
.oops-bubble img { width: 34px; height: 34px; object-fit: contain; }
.oops-bubble.show { opacity: 1; transform: translateY(0); }
.stage-bottom { position: absolute; bottom: 17px; left: 18px; right: 18px; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.stage-message { display: inline-flex; gap: 8px; align-items: center; padding: 10px 12px; max-width: 100%; color: #95715e; background: rgba(255,253,247,.9); border: 1px solid rgba(236,211,195,.9); box-shadow: 0 3px 16px rgba(112,81,55,.05); font-weight: 800; font-size: 10px; border-radius: 10px; line-height: 1.4; }
.stage-message span { font-size: 13px; }
.challenge-badge { padding: 10px 12px; border-radius: 10px; white-space: nowrap; background: #bd736b; color: white; font-size: 12px; font-weight: 900; box-shadow: 0 4px 11px rgba(130,68,63,.13); }
.play-footer { padding: 17px 3px 1px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 700; color: #b29b8b; }
.footer-flower { color: #d9a389; font-size: 13px; margin-right: 5px; }
.footer-right { text-align: right; }
.sidebar { display: grid; gap: 15px; }
.score-card { padding: 23px 24px 21px; }
.score-icon { color: #e9ad74; font-size: 25px; }
.score-display { display: flex; align-items: baseline; gap: 11px; margin: 12px 0 23px; min-width: 0; }
.score-display #total-score { font-family: Georgia,serif; font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(44px, 4.8vw, 66px); letter-spacing: -.08em; line-height: 1; word-break: break-word; }
.score-unit { font-size: 13px; color: #ba987f; font-weight: 800; }
.progress-label { display: flex; align-items: center; justify-content: space-between; color: #947f71; font-size: 11px; font-weight: 700; }
.progress-label strong { color: #af7467; }
.progress-track { width: 100%; height: 11px; padding: 2px; background: #f8eee6; border: 1px solid #f2e2d6; border-radius: 30px; margin: 10px 0; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg,#e7a88f,#e07f79 75%,#cf6e69); height: 100%; border-radius: inherit; width: 0; transition: width .26s ease-out; }
.progress-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; color: #b09a8b; }
.progress-bottom strong { color: #947466; white-space: nowrap; }
.progress-bottom strong span:last-child { color: #daa363; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid #f0e5dc; margin-top: 23px; padding-top: 18px; }
.stat:not(:first-child) { border-left: 1px solid #f0e5dc; padding-left: 11px; }
.stat { min-width: 0; }
.stat span { color: #b69f8d; font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.stat strong { display: block; margin: 7px 0 0; font-family: Georgia,serif; font-size: 24px; color: #594337; font-variant-numeric: tabular-nums; letter-spacing: -.04em; overflow-wrap: anywhere; }
.stat small { font-size: 10px; color: #aa9689; }
.shop-card { padding: 21px 23px 23px; }
.shop-card h2 { font-size: 22px; margin: 7px 0 0; }
.helper-counter { padding: 8px 10px; background: #f9f2e7; color: #a58067; border-radius: 8px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.shop-feature { display: flex; align-items: center; gap: 15px; background: #fff5eb; border: 1px solid #f4e8dc; border-radius: 14px; padding: 11px; margin: 19px 0 13px; }
.shop-video-frame { position: relative; width: 100px; aspect-ratio: 1; flex: 0 0 100px; overflow: hidden; border-radius: 10px; background: #ecd5c1; }
.shop-video-frame video { height: 100%; width: 100%; object-fit: cover; display: block; }
.video-glint { position: absolute; top: 4px; right: 8px; color: #fff8c3; text-shadow: 0 1px 4px #aa684f; }
.shop-info { min-width: 0; }
.shop-info strong { font-size: 13px; }
.shop-info p { font-size: 11px; line-height: 1.5; color: #9d8172; margin: 6px 0 7px; }
.shop-tag { font-size: 9px; display: inline-block; border-radius: 5px; padding: 5px 7px; background: #fffcf5; font-weight: 900; color: #bf866c; }
.buy-button { border: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; color: #fff9f5; background: linear-gradient(115deg,#de8981,#cc706e); box-shadow: 0 6px 0 #b65e5c, 0 8px 14px rgba(204,106,93,.13); border-radius: 12px; font-size: 13px; font-weight: 900; transition: filter .18s, transform .18s, box-shadow .18s; }
.buy-button:hover:not(:disabled) { filter: brightness(1.045); transform: translateY(-1px); }
.buy-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #b65e5c; }
.buy-button:disabled { background: #dfd1c7; box-shadow: 0 5px 0 #c7b8ae; color: #f9f4ef; }
.button-price { border-radius: 7px; padding: 5px 8px; background: rgba(255,255,255,.2); white-space: nowrap; }
.button-price span:first-child { color: #ffe0ad; }
.helpers-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 26px 0 11px; }
.helpers-caption > span { font-size: 10px; letter-spacing: .14em; font-weight: 900; color: #9e806e; }
.helpers-caption small { font-size: 9px; color: #b29b8e; }
.helper-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; min-height: 74px; }
.crew-empty { grid-column: 1 / -1; border: 1px dashed #ecdccf; border-radius: 10px; text-align: center; display: grid; place-items: center; padding: 18px 10px; margin: 0; color: #b9a396; font-size: 11px; font-weight: 700; line-height: 1.4; }
.crew-empty span { color: #dba494; }
.helper-tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 9px; background: #f6e5d5; border: 1px solid #eadacd; }
.helper-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.helper-number { position: absolute; top: 4px; left: 4px; border-radius: 4px; background: rgba(255,253,249,.9); padding: 2px 4px; color: #907562; font-size: 8px; font-weight: 900; }
.helper-flash { position: absolute; bottom: 5px; right: 5px; background: rgba(255,249,224,.93); border-radius: 6px; padding: 3px; color: #c17c64; font: 800 12px Georgia,serif; opacity: 0; transform: translateY(6px); transition: opacity .12s,transform .12s; }
.helper-tile.flash .helper-flash { opacity: 1; transform: translateY(0); }
.text-link { border: none; background: transparent; color: #bf786d; padding: 3px 0; font-weight: 900; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #dfb2a9; }
.text-link:hover { color: #9d534c; }
.site-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ece0d5; margin-top: 35px; padding: 22px 0 28px; color: #af998a; gap: 15px; font-size: 11px; }
.site-footer span span { color: #d98c87; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%,18px); z-index: 100; background: #47382f; color: #fffaf3; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 13px 34px rgba(65,46,40,.21); padding: 13px 18px; font-size: 13px; line-height: 1.5; text-align: center; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity .25s,transform .25s; width: max-content; max-width: min(92vw,450px); }
.toast.show { opacity: 1; transform: translate(-50%,0); }
dialog { border: 0; color: var(--ink); margin: auto; max-height: calc(100dvh - 26px); overflow-y: auto; box-shadow: 0 28px 80px rgba(53,37,33,.25); }
dialog::backdrop { background: rgba(60,39,32,.44); backdrop-filter: blur(5px); }
.rules-dialog { border-radius: 23px; background: #fffaf5; width: min(94vw,580px); padding: 0; }
.dialog-inner { padding: 33px 37px; position: relative; }
.dialog-close { position: absolute; top: 15px; right: 18px; background: #f9ebe0; border: none; color: #aa8271; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; }
.rules-dialog h2 { font-size: clamp(32px,4vw,43px); line-height: 1.05; margin: 9px 36px 8px 0; }
.rules-lead { color: #9f8a7b; font-size: 13px; }
.dialog-actions { display: flex; align-items: center; gap: 15px; }
.dialog-actions .buy-button { flex: 1; }
.reset-link { background: none; border: 0; padding: 10px 0; color: #ad8e81; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.reset-link:hover { color: #b44f4f; }
.win-dialog { width: min(94vw,720px); padding: 0; border-radius: 30px; background: linear-gradient(153deg,#fffaf0 0%,#fff7f2 57%,#fbeadf 100%); overflow-x: hidden; }
.win-inner { position: relative; z-index: 2; text-align: center; padding: 36px 38px 31px; }
.win-eyebrow { font-weight: 900; color: #c28c66; letter-spacing: .19em; font-size: 10px; }
.win-dialog h2 { margin: 13px 0 13px; line-height: .99; font-size: clamp(55px,8vw,92px); }
.win-dialog h2 em { display: inline-block; color: #d47772; }
.win-inner > p { max-width: 480px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: #9f816d; }
.win-inner > p span { color: #d47a78; }
.win-picture { width: min(94%,365px); margin: -3px auto 12px; aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.win-picture img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 12px rgba(129,81,49,.11)); animation: victory-bounce 3.2s ease-in-out infinite; }
.win-halo { position: absolute; z-index: 0; left: 12%; right: 12%; top: 13%; bottom: 13%; border-radius: 50%; background: #fbe8d2; box-shadow: 0 0 0 20px rgba(252,222,196,.3); }
.win-heart { position: absolute; z-index: 3; color: #df827d; font-size: 32px; animation: victory-bounce 3.1s ease-in-out infinite; }
.win-heart--one { top: 14%; left: 3%; transform: rotate(-14deg); }
.win-heart--two { top: 19%; right: 4%; color: #e7b262; }
.win-heart--three { bottom: 27%; right: 0; font-size: 22px; }
.win-bottom { position: relative; z-index: 3; }
.win-total { color: #987c6d; font-size: 12px; margin-bottom: 16px; }
.win-total strong { color: #b76a64; }
.win-actions { max-width: 450px; margin: auto; display: flex; align-items: center; gap: 22px; justify-content: center; }
.win-actions .buy-button { max-width: 210px; }
.win-actions .text-link { white-space: nowrap; }
.happy-video-area { width: min(100%,210px); margin: 20px auto 0; padding: 5px; border-radius: 17px; border: 1px solid #ead4c3; background: #f5dfcf; }
.happy-video-area video { width: 100%; border-radius: 12px; display: block; }
.confetti { position: absolute; pointer-events: none; inset: 0; overflow: hidden; z-index: 1; }
.confetti-piece { width: 8px; height: 15px; position: absolute; top: -20px; left: var(--x); background: var(--piece-color); border-radius: 2px; opacity: .9; animation: confetti-fall var(--duration) var(--delay) linear infinite; }
@keyframes nose-pulse { 0%,100% { transform: scale(1);opacity: .8; } 50% { transform: scale(1.3);opacity: .35; } }
@keyframes dog-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes boop-pop { 0% { transform: scale(1); } 40% { transform: scale(.965) rotate(-1deg); } 80% { transform: scale(1.025) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes float-away { 0% { opacity: 0;transform:translate(-50%,-30%) scale(.78); } 15% { opacity: 1; } 100% { opacity: 0;transform:translate(-50%,-145%) scale(1.2); } }
@keyframes sleep-drop { from { top: -134px;transform:translateX(-50%) rotate(-16deg); } to { top: calc(100% + 135px);transform:translateX(-50%) rotate(19deg); } }
@keyframes victory-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes confetti-fall { 0% { transform:translateY(-30px) rotate(0deg); } 100% { transform:translateY(800px) rotate(620deg); } }
@media (max-width: 1080px) { .page { padding: 0 27px; } .game-layout { grid-template-columns: minmax(0,1.25fr) minmax(310px, .95fr); gap: 16px; } .play-card { padding: 16px; } .shop-card, .score-card { padding: 18px; } .stage { height: clamp(380px,49vw,490px); } .play-heading h2 { font-size: 25px; } .shop-feature { gap: 9px; } .shop-video-frame { width: 82px; flex-basis: 82px; } }
@media (max-width: 800px) { .page { max-width: 610px; padding: 0 19px; } .game-layout { grid-template-columns: minmax(0,1fr); } .hero-intro { min-height: auto; padding: 30px 0 25px; } .intro-stamp { margin-right: 8px; width: 76px; height: 76px; } .intro-stamp span { font-size: 19px; } .stage { height: clamp(390px,90vw,535px); } .sidebar { gap: 14px; } .site-header { min-height: 78px; } .site-footer { margin-top: 26px; } .shop-video-frame { width: 102px; flex-basis: 102px; } .score-display #total-score { font-size: 62px; } }
@media (max-width: 480px) { .page { padding: 0 12px; } .site-header { min-height: 72px; } .brand { font-size: 19px; gap: 10px; } .brand-mark { width: 33px; height: 33px; } .edition-label { font-size: 8px; letter-spacing: .08em; } .header-actions { gap: 9px; } .icon-button { width: 31px; height: 31px; } .hero-intro { padding: 24px 5px 23px; } .hero-intro h1 { font-size: clamp(33px,8vw,42px); } .hero-intro p { font-size: 12px; } .eyebrow { font-size: 9px; } .heading-star { font-size: 18px; } .intro-stamp { display: none; } .play-card { padding: 11px; border-radius: 18px; } .play-heading { padding: 8px 4px 14px; } .play-heading h2 { font-size: 23px; } .mode-pill { font-size: 7.5px; padding: 8px 6px; gap: 4px; } .mode-dot { width: 5px; height: 5px; } .stage { height: clamp(360px,105vw,460px); border-radius: 12px; } .dog-wrap { width: 98%; top: 45%; } .stage-message { font-size: 9px; padding: 9px; } .stage-bottom { left: 10px; right: 10px; bottom: 10px; flex-wrap: wrap; } .challenge-badge { font-size: 10px; padding: 8px; } .play-footer { font-size: 9px; flex-wrap: wrap; } .score-card,.shop-card { padding: 18px; } .shop-card h2 { font-size: 21px; } .score-display #total-score { font-size: 53px; } .shop-video-frame { width: 90px; flex-basis: 90px; } .shop-info p { font-size: 10px; } .site-footer { font-size: 9px; flex-direction: column; align-items: flex-start; } .dialog-inner { padding: 30px 22px; } .dialog-actions { flex-direction: column; } .dialog-actions .buy-button { width: 100%; flex: none; } .win-inner { padding: 32px 18px 28px; } .win-dialog h2 { font-size: 59px; } .win-inner > p { font-size: 12px; } .win-actions { flex-direction: column; gap: 14px; } .win-actions .buy-button { width: 100%; max-width: 260px; } .win-picture { width: min(100%,320px); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .falling-dog { animation-duration: var(--fall-duration,5700ms) !important; } }