@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/Baloo2-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dialog-crown { width: 246px; height: 56px; object-fit: contain; margin: -20px auto 12px; }
.dialog-price { font-size: 24px; }
.rank-description { font-size: 18px; margin-bottom: 24px; }
.level-preview { position: relative; }
.level-preview strong { position: absolute; left: 0; width: 100%; top: 36px; color: white; font-size: 24px; letter-spacing: -.96px; text-align: center; }
.orange { color: var(--orange); }
.character-scene { transition: opacity .2s, transform .2s; }
.character-scene.dismissed { opacity: 0; transform: translateX(-60px); }
.preview-main { padding: 24px 16px; }
.preview-main p { margin-block: 12px; }
.congratulations { padding: 90px 0 40px; min-height: max(812px,100svh); background: #666; }
.congratulations::before { display: none; }
.congrats-main { position: relative; width: min(100%, 375px); margin: auto; text-align: center; }
.congrats-art { width: 379.265px; max-width: none; height: 515.321px; position: relative; left: 50%; translate: -50% 0; object-fit: cover; }
.congrats-name { position: absolute; top: 379px; left: 0; width: 100%; font-size: 20px; font-weight: 600; }
.congrats-label { position: absolute; top: 434px; width: 100%; font-size: 14px; font-weight: 600; }
.congrats-value { position: absolute; top: 456px; width: 100%; font-size: 24px; }
.congrats-value .merit-icon { width: 36px; height: 24px; }
.congrats-main > .gold-button { width: calc(100% - 76px); margin: -9px auto 0; }
:root {
  color-scheme: light;
  --ink: #682f11;
  --brown: #8b3000;
  --orange: #ff6a00;
  --cream: #fffaef;
  --desktop-background: #219cce;
  --app-width: 480px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--desktop-background); color: var(--ink); font-family: "Baloo 2", sans-serif; font-size: 16px; line-height: 1.4; }
button, input { font: inherit; }
button, a, input, label { -webkit-tap-highlight-color: transparent; }
button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
h1 { font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--brown); }
h2 { font-size: 16px; font-weight: 600; }
input, button, textarea, a,
input:focus, button:focus, textarea:focus, a:focus,
input:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible {
  cursor: pointer;
  outline: none;
}
button:disabled { cursor: pointer; filter: grayscale(1); }
[hidden] { display: none !important; }
.app-shell { position: relative; isolation: isolate; width: 100%; max-width: var(--app-width); min-height: 100vh; min-height: 100svh; margin-inline: auto; overflow: clip; padding-bottom: 110px; background: #65cdf6; }
.app-shell::before { content: ""; position: fixed; z-index: -2; top: 0; bottom: 0; left: 50%; translate: -50% 0; width: 100%; max-width: var(--app-width); pointer-events: none; background-color: #65cdf6; background-image: url("../images/home-image18.png"); background-repeat: no-repeat; background-size: 215% 176.31%; background-position: 50% 8.25%; filter: blur(3.5px); }
.page-heading { position: sticky; top: 0; z-index: 12; min-height: 73px; padding: 20px 16px 14px; display: flex; align-items: center; gap: 12px; background: #51c4f3; }
.app-shell:not(.splash)::before { display: block; background-image: url("../images/page-background.jpg"); background-size: cover; background-position: center; filter: none; }
.app-shell:not(.splash) :is(.page-heading, .home-header) { background-color: transparent; background-image: url("../images/page-background.jpg"); background-size: max(100%, calc(100dvh * 563 / 1218)) auto; background-position: center top; }
.page-heading > div:first-of-type { flex: 1; }
.page-heading p { color: var(--brown); font-size: 12px; line-height: 1.2; }
.back { color: #ffad00; font-size: 36px; line-height: 24px; width: 21px; font-family: Arial, sans-serif; }
.score { display: flex; align-items: center; gap: 4px; width: 121px; height: 39px; padding: 2px; border-radius: 120px; background: rgb(0 0 0 / 20%); color: white; flex-shrink: 0; line-height: 1.2; }
.score-icon { display: grid; place-items: center; position: relative; width: 35px; height: 35px; border: 1px solid white; background: #d6e8f2; border-radius: 50%; }
.score-icon img { width: 36px; max-width: none; height: 24px; object-fit: cover; }
.score small { display: block; font-size: 12px; }
.score strong { display: block; font-size: 16px; font-weight: 600; }
.page-content { padding-inline: 16px; }
.panel { background: var(--cream); border: 1px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; padding: 20px; }
hr { height: 1px; border: 0; background: #f0e8dd; margin: 16px 0; }
.gold-button { display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; width: 100%; height: 62px; overflow: hidden; border-radius: 216px; color: var(--brown); font-size: 20px; font-weight: 700; line-height: 1.2; }
.gold-button::before { content: ""; position: absolute; z-index: -1; width: 106.47%; height: 167.59%; top: -43.75%; left: -2.89%; background: url("../images/home-frame48.png") center / 100% 100% no-repeat; }
.gold-button:active { transform: translateY(2px); }
.gold-button.small { width: 132px; max-width: 100%; height: 32px; font-size: 12px; font-weight: 600; }
.text-button { display: block; width: 100%; text-align: center; font-size: 22px; color: var(--brown); font-weight: 600; }
.merit-icon { width: 22px; height: 14px; object-fit: cover; display: inline-block; }
.merit-value { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--orange); font-size: 14px; }
.green { color: #02a36b; }
.required { color: red; }
/* The fixed game artwork retains the original composition; surrounding UI uses flow layout. */
.home-page { min-height: max(812px, 100svh); display: flex; flex-direction: column; }
.home-header { padding: 20px 16px 0; position: sticky; top: 0; z-index: 12; background: #51c4f3; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mode-button { display: flex; align-items: flex-end; gap: 6px; text-align: left; color: var(--brown); }
.mode-button small { display: block; font-size: 12px; font-weight: 500; line-height: 1.2; }
.mode-button strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; }
.chevron { width: 21px; height: 21px; }
.journey { margin-top: 12px; border-radius: 12px; padding: 14px 16px; background: rgb(255 247 227 / 30%); }
.journey > a { display: flex; align-items: center; justify-content: space-between; line-height: 1.2; }
.journey-arrow { rotate: -90deg; }
.journey progress { appearance: none; display: block; border: 0; width: 100%; height: 6px; margin: 6px 0; border-radius: 21px; overflow: hidden; background: rgb(255 255 255 / 30%); }
.journey progress::-webkit-progress-bar { background: rgb(255 255 255 / 30%); border-radius: 21px; }
.journey progress::-webkit-progress-value { background: linear-gradient(90deg, #dd5b16, #fc8f0e); border-radius: 21px; }
.journey progress::-moz-progress-bar { background: linear-gradient(90deg, #dd5b16, #fc8f0e); border-radius: 21px; }
.journey-caption { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.2; }
.journey-caption button { font-size: 12px; font-weight: 500; color: var(--brown); }
.farm-main { position: relative; flex: 1; min-height: 545px; }
.quest-link { position: absolute; top: 19px; left: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; color: var(--brown); font-weight: 600; font-size: 14px; }
.quest-link img { width: 59px; height: 53.92px; }
.floating-points { position: absolute; top: -30px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; color: #ffe26e; text-shadow: 0 3px 0 rgb(0 0 0 / 25%); font-weight: 700; line-height: 1.2; z-index: 2; }
.floating-points span:first-child { font-size: 20px; opacity: .2; height: 16px; }
.floating-points span:nth-child(2) { font-size: 32px; opacity: .6; height: 24px; }
.floating-points strong { font-size: 44px; }
.character-scene { position: relative; width: min(100%, 500px); height: 419px; margin: 0 auto; }
.character { position: absolute; top: 63px; left: 50%; translate: -50% 0; width: 299.6px; height: 356px; object-fit: fill; clip-path: inset(0 0 0 1.86%); }
.character-aura { position: absolute; top: 87px; left: 50%; translate: -50% 0; }
.speech { position: absolute; top: 52px; left: calc(50% + 21.5px); width: 162.1px; height: 81px; clip-path: inset(0 4.96% 0 2.34%); }
.farm-actions { position: relative; margin: -16px 16px 0; z-index: 3; }
.farm-actions .gold-button { height: 72px; font-size: 24px; }
.farm-actions .text-button { margin-top: 8px; }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; translate: -50% 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: var(--app-width); min-height: 97px; padding: 16px 16px max(20px, env(safe-area-inset-bottom)); border: 0; border-top: 3px solid white; border-radius: 24px 24px 0 0; background: linear-gradient(#fdf6e5, #eddbb0); }
.bottom-nav a { position: relative; height: 58px; display: flex; align-items: center; flex-direction: column; gap: 6px; justify-content: flex-end; color: black; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.nav-icon { width: 40px; height: 36px; object-fit: cover; }
.bottom-nav a:first-child .nav-icon { width: 39px; height: 36px; object-fit: contain; }
.bottom-nav a[aria-current] { color: #8b1000; }
.bottom-nav a[aria-current] .nav-icon { position: absolute; top: -13px; width: 56px; height: 52px; object-fit: contain; }
.nav-halo { position: absolute; top: -5px; left: calc(50% - 24px); }
body.ranking-screen { height: 100vh; height: 100dvh; overflow: hidden; }
.ranking-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
.ranking-page .page-heading { flex: 0 0 auto; }
.ranking-content { display: flex; flex: 1 1 0; min-height: 0; }
.ranking-board { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ranking-leader { list-style: none; flex: 0 0 135px; margin: 0; padding: 20px 16px; border: 2px solid #ff9d00; border-radius: 24px 24px 0 0; background: #feefc8; }
.ranking-panel { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; margin-top: -56px; padding: 16px 16px 0; border: 2px solid #efe0ba; border-radius: 24px 24px 0 0; background: white; }
.ranking-list { display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; width: calc(100% + 4px); min-height: 0; list-style: none; padding: 0; margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-behavior: smooth; scrollbar-width: none; }
.ranking-list::-webkit-scrollbar { display: none; }
.rank-row { position: relative; display: grid; grid-template-columns: 32px 40px minmax(0, 1fr) 108px; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 52px; padding: 0 0 12px; color: black; }
.ranking-list .rank-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: url("../images/316-372-line4.svg") left bottom / 100% 1px no-repeat; }
.rank-first { width: calc(100% + 4px); min-height: 40px; padding: 0; }
.rank-number { width: 32px; font-size: 20px; font-weight: 600; line-height: 1.2; color: #bababa; text-align: center; }
.rank-first .rank-number { font-size: 32px; font-weight: 700; color: red; }
.ranking-list .rank-row:nth-child(1) .rank-number { color: #fc8f0e; }
.ranking-list .rank-row:nth-child(2) .rank-number { color: #9409f7; }
.ranking-list .rank-row:nth-child(3) .rank-number { color: #0084ff; }
.ranking-list .rank-row:nth-child(4) .rank-number { color: #13ada5; }
.avatar { width: 40px; height: 40px; border: 1px solid #f6ebeb; border-radius: 50%; object-fit: cover; }
.rank-first .avatar { border: 2px solid #fcd999; }
.rank-info { min-width: 0; line-height: 1.2; }
.rank-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 16px; }
.rank-info .merit-value { justify-content: flex-start; gap: 4px; font-size: 14px; font-weight: 500; line-height: 1.2; margin-top: 2px; }
.rank-info .merit-icon { flex: 0 0 auto; }
.rank-first .rank-info strong { font-size: 18px; font-weight: 500; }
.rank-first .merit-value { font-size: 16px; font-weight: 500; }
.rank-first .merit-icon { width: 28px; height: 19px; }
.rank-secondary .rank-info strong { font-size: 16px; }
.rank-secondary .merit-value { color: black; font-weight: 500; }
.rank-secondary .merit-icon { width: 17px; height: 12px; }
.rank-badge { width: 108px; height: 32px; object-fit: cover; }
.rank-first .rank-badge { height: 36px; }
.ranking-page .bottom-nav { position: relative; left: auto; bottom: auto; translate: none; flex: 0 0 auto; }
.ranking-page .bottom-nav a[aria-current] .nav-icon { width: 57px; height: 52px; top: -14px; }
.my-ranking { position: relative; flex: 0 0 auto; margin: 0 -16px; padding: 12px 16px; border-top: 1px dashed #f3e5df; background: #fffaf0; }
.my-ranking .rank-row { width: calc(100% + 4px); min-height: 40px; padding: 0; }
.my-ranking .rank-number { color: #bababa; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; background: #fffaef; border: 1.5px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 16px; padding: 16px; }
.product-card-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; }
.product-card:has(> [data-product="0"])::after { content: ""; position: absolute; inset: -1.5px; padding: 3px; border-radius: inherit; background: conic-gradient(from var(--owned-border-angle), transparent 0deg 220deg, #ffb300 265deg, #fffbd6 305deg, #ffcf48 335deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: owned-border-travel 1.2s linear infinite; pointer-events: none; }
.product-card-action { flex-shrink: 0; }
.product-card-copy { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.product-card-name { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.product-image { width: 59px; height: 54px; object-fit: contain; }
.product-card:has([data-product="0"]) .product-image { width: 54px; }
.product-card:has([data-product="1"]) .product-image { width: 81px; }
.product-card:has([data-product="2"]) .product-image { width: 80.919px; }
.product-bowl-art { position: relative; width: 66px; height: 54px; overflow: hidden; }
.product-bowl-art .product-image { position: absolute; left: -2.34%; top: 16.34%; width: 90.47%; height: 101.06%; max-width: none; }
.product-card h2 { color: #682f11; font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.product-card .merit-value { margin: 0; gap: 4px; color: #ff6a00; font-size: 14px; font-weight: 500; line-height: 1; }
.product-card .merit-icon { width: 22px; height: 14px; object-fit: contain; }
.product-card .gold-button { margin-top: auto; }
.settings-content { padding-top: 50px; }
.settings-content > .panel { border-width: 1.5px; }
.profile-panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 64px; text-align: center; }
.profile-identity { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.profile-divider { width: 100%; height: 1px; }
.profile-inventory { width: 100%; }
.profile-inventory > .detail-row { line-height: 1.2; }
.profile-inventory > .detail-row > strong { color: #682f11; font-size: 16px; font-weight: 600; }
.profile-inventory > .detail-row > span { font-size: 14px; font-weight: 500; }
.profile-avatar { position: absolute; top: -52px; left: 50%; translate: -50% 0; width: 104px; height: 104px; }
.profile-photo { width: 104px; height: 104px; border: 2px solid #ff7b00; border-radius: 50%; object-fit: cover; }
.change-avatar { display: grid; place-items: center; position: absolute; width: 27px; height: 27px; bottom: 2px; right: 3px; border-radius: 50%; background: #ff7b00; cursor: pointer; }
.change-avatar img { width: 16px; height: 16px; }
.profile-panel h2 { display: flex; align-items: center; justify-content: center; gap: 12px; color: #682f11; font-size: 24px; font-weight: 600; line-height: 1.2; }
.edit-icon { width: 16px; height: 16px; }
.profile-badge { width: 119.98px; height: 36px; object-fit: contain; margin: 0 auto; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.detail-row > span:last-child { color: black; }
.equipped-items { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; margin-top: 8px; }
.equipped-items a { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; min-width: 0; aspect-ratio: 1 / 1; border: 1.5px solid transparent; border-radius: 25%; background: linear-gradient(#fff4da, #fff4da) padding-box, linear-gradient(120deg, #ff4b2a, #ff9d00) border-box; }
.equipped-items img { width: 88%; height: 88%; min-width: 0; min-height: 0; object-fit: contain; }
.equipped-items a:nth-child(1) img { width: calc(100% + 2px); max-width: none; height: 70%; }
.equipped-items a:nth-child(2) img { width: 81%; height: 75%; }
.equipped-items a:nth-child(3) img { width: 91%; height: 62%; }
.equipped-items .empty-slot { background: #f8f5ef; border-color: #dedddb; }
.equipped-items .empty-slot img { width: 80%; height: 60%; opacity: .2; }
.equipped-items a:not(.empty-slot) { position: relative; animation: owned-item-glow 3.2s ease-in-out infinite; }
@property --owned-border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.equipped-items a:not(.empty-slot)::after { content: ""; position: absolute; inset: -1.5px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--owned-border-angle), transparent 0deg 245deg, #ffc83d 285deg, #fffbe0 315deg, #ffc83d 335deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: owned-border-travel 3s linear infinite; pointer-events: none; }
@keyframes owned-border-travel { to { --owned-border-angle: 360deg; } }
.equipped-items a:not(.empty-slot) img { animation: owned-item-float 3.6s ease-in-out infinite; }
.equipped-items a:nth-child(2):not(.empty-slot), .equipped-items a:nth-child(2):not(.empty-slot) img { animation-delay: .35s; }
.equipped-items a:nth-child(3):not(.empty-slot), .equipped-items a:nth-child(3):not(.empty-slot) img { animation-delay: .7s; }
@keyframes owned-item-glow { 0%, 100% { box-shadow: 0 0 0 1px rgb(255 190 44 / 10%), inset 0 0 6px rgb(255 190 44 / 8%); } 50% { box-shadow: 0 0 8px rgb(255 181 32 / 30%), inset 0 0 10px rgb(255 190 44 / 18%); } }
@keyframes owned-item-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.preferences { margin-top: 8px; display: grid; gap: 12px; color: black; }
.preferences > .detail-row { font-weight: 500; line-height: 1.2; }
.preferences > .detail-row:has(.mode-setting) { align-items: baseline; }
.mode-setting { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; font-size: 16px; line-height: 24px; color: var(--ink); }
.mode-setting > strong { display: block; line-height: 24px; }
.mode-setting > span { display: grid; place-items: center; align-self: center; flex: 0 0 21px; width: 21px; height: 24px; }
.mode-setting > span img { width: 21px; height: 21px; transform: translateY(2px) rotate(-90deg); }
.switch { appearance: none; flex-shrink: 0; width: 48px; height: 26px; margin: 0; background: #f3efe7; border-radius: 50px; position: relative; cursor: pointer; }
.switch::before { content: ""; position: absolute; width: 22px; height: 22px; top: 2px; left: 2px; border-radius: 50%; background: #d9d9d9; transition: left .15s; }
.switch:checked { background: #feecc3; }
.switch:checked::before { left: 24px; background: linear-gradient(259.9558deg, #fcd844 5.0956%, #ff5100 103.3%); }
.current-level { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 20px; background: rgb(255 255 255 / 30%); border: 1px solid white; border-radius: 20px; margin-bottom: 12px; }
.current-level img { width: 213px; height: 64px; object-fit: contain; }
.current-level > span { font-size: 12px; margin-top: 6px; line-height: 1.4; }
.current-level em { font-style: normal; font-weight: 600; color: var(--orange); }
.levels-panel { padding-top: 20px; }
body.journey-screen { height: 100vh; height: 100dvh; overflow: hidden; }
.journey-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 16px; }
.journey-page .page-heading { flex: 0 0 auto; }
.journey-page .journey-content { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.journey-page .current-level { position: relative; flex: 0 0 auto; }
.journey-page .current-level::after { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--owned-border-angle), transparent 0deg 235deg, #ffcc48 275deg, #fffce7 310deg, #ffcc48 340deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: owned-border-travel 2.4s linear infinite; pointer-events: none; }
.journey-page .levels-panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; margin-bottom: 0; }
.journey-page .levels-panel > .detail-row, .journey-page .levels-panel > hr { flex-shrink: 0; }
.journey-page .levels-panel > hr { width: 100%; }
.journey-page .level-tabs { flex-shrink: 0; }
.level-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scroll-behavior: smooth; scrollbar-width: none; }
.level-scroll::-webkit-scrollbar { display: none; }
.levels-panel .detail-row { font-size: 16px; }
.levels-panel small { font-size: 14px; }
.level-tabs { display: flex; gap: 20px; margin-bottom: 12px; }
.level-tabs button { opacity: .6; font-weight: 500; }
.level-tabs .selected { opacity: 1; }
.level-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }
.level-card { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: black; }
.level-card > img, .level-card > .level-shimmer > img { width: 130px; height: 38.57px; object-fit: contain; }
.level-card .merit-value { font-size: 12px; }
.quests-panel { padding-block: 6px; color: black; }
.quest-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; min-height: 62px; border-bottom: 1px dashed #efd6c5; }
.quest-row:last-child { border-bottom: 0; }
.quest-row h2 { font-size: 16px; font-weight: 500; }
.quest-row .merit-value { justify-content: flex-start; }
.quest-row .gold-button { flex-shrink: 0; }
.quest-status { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: #444; }
.quest-status img { width: 16px; height: 16px; }
.quest-status.green { color: #02a36b; }
.edit-form { display: flex; flex-direction: column; }
.profile-edit-sheet { position: fixed; inset: auto 0 14px; margin: 0 auto; width: calc(100% - 32px); max-width: 448px; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 2px solid #ff9d00; border-bottom-color: #ff4b2a; border-left-color: #ff4b2a; border-radius: 20px; background: #fffaef; color: #682f11; }
.profile-edit-sheet::backdrop { background: rgb(0 0 0 / 60%); }
.profile-edit-sheet[open] { animation: profile-sheet-enter .38s cubic-bezier(.22, 1, .36, 1) both; }
.profile-edit-sheet h2 { font-size: 20px; font-weight: 600; line-height: 24px; color: #8b3000; margin: 0 0 20px; }
.profile-edit-sheet .form-field { min-height: 45px; }
.profile-edit-sheet input { font-size: 16px; }
.profile-edit-sheet input::placeholder { color: rgb(104 47 17 / 20%); opacity: 1; }
.profile-edit-sheet .gold-button { flex-shrink: 0; }
.contact-field-icon { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; background: #eac091; border-radius: 50%; }
.contact-field-icon img { width: 11px; height: 12px; }
.phone-field-icon img { width: 10px; height: 10px; }
@keyframes profile-sheet-enter { from { opacity: 0; transform: translateY(calc(100% + 20px)); } to { opacity: 1; transform: translateY(0); } }
.edit-form > label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.form-field { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e49127; background: #fdf6e5; border-radius: 12px; margin-bottom: 20px; }
.field-icon { width: 18px; height: 18px; object-fit: contain; }
.form-field input, .name-field input { width: 100%; min-width: 0; border: 0; outline-offset: 4px; color: var(--ink); background: transparent; line-height: 1.2; }
input::placeholder { color: #caa37f; opacity: .65; }
.splash { padding: 0; min-height: max(812px, 100svh); }
.splash::before { background: #65cdf6 url("../images/home-image18.png") center / cover no-repeat; filter: blur(3.5px); }
.splash::after { position: fixed; z-index: -1; content: ""; bottom: 0; left: 50%; translate: -50% 0; width: 100%; max-width: var(--app-width); height: 45vh; pointer-events: none; background: linear-gradient(transparent, rgb(139 48 0 / 90%)); }
.splash-main { display: flex; flex-direction: column; align-items: center; min-height: max(812px, 100svh); padding: 106px 16px 31px; }
.splash-brand { position: relative; text-align: center; }
.splash-brand::before { content: ""; position: absolute; z-index: -1; width: 500px; height: 600px; max-width: 100vw; top: -170px; left: 50%; translate: -50% 0; background: url("../images/316-296-ellipse4.svg") center / contain no-repeat; }
.brand-image { width: 244px; height: 244px; object-fit: cover; margin-inline: auto; }
.splash-brand h1 { font-size: 24px; line-height: 1.2; color: var(--ink); font-weight: 600; }
.splash-brand em { color: var(--orange); font-style: normal; font-weight: 800; }
.start-form { display: grid; gap: 12px; width: 100%; margin-top: 109px; }
.name-field { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 72px; padding: 16px; background: #fdf6e5; border: 1px solid #e49127; border-radius: 22px; box-shadow: 0 0 0 2px #fcd999; }
.input-icon { width: 36px; height: 36px; }
.name-field input { font-size: 16px; }
.start-form .gold-button { height: 72px; font-size: 24px; }
.splash-note { color: white; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.3; margin-top: auto; padding-top: 68px; }
.modal { position: fixed; border: 1px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: var(--cream); color: var(--ink); width: calc(100% - 32px); max-width: 343px; max-height: calc(100svh - 40px); padding: 24px 20px 16px; overflow-y: auto; }
.modal::backdrop { background: rgb(0 0 0 / 65%); }
body[data-preview] .preview-main { visibility: hidden; }
body[data-preview="mode"] .preview-main { visibility: visible; }
.modal h2 { font-size: 24px; line-height: 1.2; text-align: center; margin-bottom: 4px; }
.modal-description { text-align: center; font-size: 14px; }
.modal.current-rank-modal { width: 100%; max-width: 375px; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: hidden; scrollbar-width: none; }
.current-rank-modal::backdrop { background: rgb(0 0 0 / 80%); }
.current-rank-art { position: relative; height: 194px; pointer-events: none; }
.current-rank-art > img, .current-rank-clouds, .current-rank-badge { position: absolute; }
.current-rank-glow { width: 92.8%; max-width: none; height: 328px; left: 50.4%; top: -12px; translate: -50% 0; }
.current-rank-rays { width: 106.1333%; max-width: none; height: 199px; left: 50.096%; top: 11px; translate: -50% 0; opacity: .2; }
.current-rank-plinth { left: 21.0293%; top: 143px; width: 57.6%; height: 72px; }
.current-rank-clouds { z-index: 3; left: 8.2667%; top: 143px; width: 84.2667%; height: 72px; overflow: hidden; }
.current-rank-clouds img { position: absolute; top: -33.33%; left: -2.63%; width: 105.26%; max-width: none; height: 153.85%; }
.current-rank-badge { z-index: 2; left: 17.0667%; top: 68px; width: 66.6667%; height: 75px; animation: rank-badge-float 3.6s ease-in-out infinite; }
.current-rank-badge img { width: 100%; height: 98.87%; margin-top: .42px; object-fit: contain; }
.current-rank-panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; width: calc(100% - 32px); margin: 0 auto; padding: 28px 20px 20px; border: 2px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: #fffaef; }
.current-rank-panel h2 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #8b3000; }
.current-rank-panel .modal-description { min-height: 50px; font-size: 18px; font-weight: 500; line-height: 1.2; }
.current-rank-panel .gold-button { margin-top: 0; }
.current-rank-panel > .text-button { font-size: 18px; font-weight: 600; line-height: 1.4; }
@keyframes rank-badge-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.share-rank-modal h2 { font-size: 22px; margin-bottom: 16px; }
.rank-share-image { display: grid; place-items: center; aspect-ratio: 1.91 / 1; margin-bottom: 16px; border: 1px dashed #e4ae66; border-radius: 12px; background: #fdf6e5; color: #9d775c; font-size: 14px; text-align: center; }
.rank-share-image img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.share-copy-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
#rank-share-copy { width: 100%; resize: vertical; min-height: 100px; padding: 12px; border: 1px solid #e49127; border-radius: 12px; background: #fdf6e5; color: var(--ink); font: inherit; }
.share-rank-modal .gold-button { font-size: 18px; margin-top: 16px; }
.modal .close-dialog { font-size: 18px; margin-top: 8px; }
.modal .gold-button { margin-top: 8px; }
.modal .detail-row { padding-block: 8px; }
.modal.boost-modal { width: 100%; max-width: 375px; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: hidden; scrollbar-width: none; }
.boost-modal::backdrop { background: rgb(0 0 0 / 80%); }
.boost-modal #dialog-content { position: relative; padding-top: 45px; }
.boost-crown { position: absolute; z-index: 2; top: 6px; left: calc(50% + .5px); translate: -50% 0; width: 246px; max-width: calc(100% - 48px); height: 56px; object-fit: contain; pointer-events: none; }
.boost-panel { display: flex; flex-direction: column; gap: 16px; width: calc(100% - 32px); margin-inline: auto; padding: 24px 20px 16px; border: 2px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: #fffaef; }
.boost-copy h2 { margin: 0 0 4px; color: #8b3000; font-size: 24px; font-weight: 600; line-height: 1.2; }
.boost-copy .modal-description { color: #682f11; font-size: 14px; font-weight: 400; line-height: 1.4; }
.boost-copy b { font-weight: 600; }
.boost-divider { display: block; width: 100%; height: 1px; }
.boost-actions { display: flex; flex-direction: column; gap: 8px; }
.boost-details .detail-row { min-width: 0; gap: 8px; padding-block: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.boost-details .detail-row:first-child { padding: 0; margin-bottom: 4px; }
.boost-details .detail-row > .boost-value { display: flex; align-items: center; gap: 4px; color: #ff6a00; font-size: 20px; font-weight: 500; line-height: 1; }
.boost-coin { width: 25px; height: 25px; object-fit: contain; }
.boost-modal .quantity { flex: 0 0 152px; max-width: 55%; }
.boost-modal .quantity button { display: grid; place-items: center; flex: 0 0 44px; min-width: 32px; }
.boost-modal .quantity button img { width: 20px; height: 20px; }
.boost-modal .quantity input { flex: 1 1 0; width: 0; color: #682f11; font-weight: 500; }
.boost-actions .gold-button { flex-shrink: 0; height: 62px; margin: 0; font-size: 20px; }
.boost-close { color: #8b3000; font-size: 18px; font-weight: 600; line-height: 1.6; }
.modal.level-detail-modal { width: 100%; max-width: 375px; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: hidden; scrollbar-width: none; }
.level-detail-modal::backdrop { background: rgb(0 0 0 / 80%); }
.level-detail-modal #dialog-content { position: relative; padding-top: 45px; }
.level-detail-crown { position: absolute; z-index: 2; top: 5px; left: calc(50% + .5px); translate: -50% 0; width: 246px; max-width: calc(100% - 48px); height: 56px; object-fit: contain; pointer-events: none; }
.level-detail-panel { display: flex; flex-direction: column; gap: 16px; width: calc(100% - 32px); margin-inline: auto; padding: 24px 20px 16px; border: 2px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: #fffaef; }
.level-detail-copy { display: flex; flex-direction: column; gap: 12px; }
.level-detail-copy h2 { margin: 0 0 -8px; color: #682f11; font-size: 24px; font-weight: 600; line-height: 1.2; }
.level-detail-badge { position: relative; width: 100%; aspect-ratio: 108.23529 / 32; }
.level-detail-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.level-detail-badge strong { position: absolute; top: 42.7%; left: calc(50% + .5px); translate: -50% 0; color: white; font-size: clamp(18px, 6.4vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.96px; white-space: nowrap; }
.level-detail-copy .modal-description { min-height: 50px; color: #682f11; font-size: 18px; font-weight: 500; line-height: 1.2; }
.level-detail-requirement { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 3px; color: #682f11; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: center; }
.level-detail-requirement strong { color: #ff6a00; font-weight: 600; }
.level-detail-requirement .merit-icon { width: 22px; height: 14px; object-fit: contain; }
.level-detail-close { color: #8b3000; font-size: 18px; font-weight: 600; line-height: 1.6; }
.modal.product-detail-modal { width: 100%; max-width: 375px; max-height: calc(100dvh - 24px); padding: 0 0 20px; border: 0; border-radius: 0; background: transparent; overflow-x: hidden; scrollbar-width: none; }
.product-detail-modal::-webkit-scrollbar { display: none; }
.product-detail-modal::backdrop { background: rgb(0 0 0 / 80%); }
.product-detail-art { position: relative; z-index: 1; width: 100%; aspect-ratio: 375 / 202; pointer-events: none; }
.product-detail-art > img, .product-detail-clouds { position: absolute; }
.product-detail-rays { top: 4.9505%; left: 50%; translate: -50% 0; width: 106.1333%; max-width: none; height: 98.5149%; object-fit: cover; }
.product-detail-plinth { top: 72.7723%; left: 18.1333%; width: 57.6%; height: 35.6436%; object-fit: cover; }
.product-detail-clouds { top: 74.2574%; left: 4.1333%; width: 91.2%; height: 38.6139%; overflow: hidden; }
.product-detail-clouds img { position: absolute; top: -33.33%; left: -2.63%; width: 105.26%; max-width: none; height: 153.85%; }
.product-detail-image { top: 13.8614%; left: 50%; translate: -50% 0; width: 62%; height: 76.7327%; object-fit: contain; }
.product-detail-image.is-coin { top: 15.8416%; width: 41.0667%; }
.product-detail-spark-one { top: 22.7723%; left: 77.3333%; width: 8.8%; height: 17.8218%; }
.product-detail-spark-two { top: 57.4257%; left: 18.1333%; width: 6.1333%; height: 15.3465%; }
.product-detail-panel { position: relative; display: flex; flex-direction: column; gap: 16px; width: calc(100% - 32px); margin: 0 auto; padding: 20px 20px 16px; border: 2px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: #fffaef; }
.product-detail-copy h2 { margin: 0 0 4px; color: #682f11; font-size: 24px; font-weight: 600; line-height: 1.2; }
.product-detail-copy .modal-description { color: #682f11; font-size: 14px; font-weight: 400; line-height: 1.4; }
.product-detail-copy b { font-weight: 600; }
.product-detail-divider { display: block; width: 100%; height: 1px; }
.product-detail-actions { display: flex; flex-direction: column; gap: 8px; }
.product-detail-actions .detail-row { min-height: 40px; padding-block: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.product-detail-actions .dialog-price { gap: 4px; color: #ff6a00; font-size: 24px; font-weight: 500; line-height: 1; }
.product-detail-actions .detail-row > .dialog-price { color: #ff6a00; }
.product-detail-actions .dialog-price .merit-icon { width: 36px; height: 24px; }
.product-detail-actions .gold-button { flex-shrink: 0; height: 62px; margin: 0; font-size: 20px; font-weight: 700; }
.product-detail-actions .product-detail-close { height: 29px; color: #8b3000; font-size: 18px; font-weight: 600; line-height: 29px; }
.quantity { display: flex; align-items: center; width: 152px; border: 1px solid #e49127; box-shadow: 0 0 0 2px #fcd999; border-radius: 12px; background: #fdf6e5; overflow: hidden; }
.quantity button { min-width: 44px; height: 44px; font-size: 28px; }
.quantity input { appearance: textfield; width: 60px; min-width: 0; padding: 0; background: transparent; border: 0; text-align: center; font-size: 20px; }
.quantity input::-webkit-inner-spin-button { appearance: none; }
.modal.success-modal { width: 100%; max-width: 375px; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: hidden; scrollbar-width: none; }
.success-modal::-webkit-scrollbar { display: none; }
.success-modal::backdrop { background: rgb(0 0 0 / 80%); }
.success-art { position: relative; width: 100%; aspect-ratio: 375 / 258; pointer-events: none; }
.success-art > img, .success-clouds, .success-glow { position: absolute; }
.success-glow, .success-rays, .success-plinth { z-index: 0; }
.success-banner, .success-coin, .success-spark-one, .success-spark-two { z-index: 2; }
.success-clouds { z-index: 3; }
.success-glow { top: 16.2791%; left: 50%; translate: -50% 0; width: 92.8%; aspect-ratio: 1; background: url("../images/316-1214-ellipse9.svg") center / contain no-repeat; }
.success-rays { top: 29.0698%; left: 50%; translate: -50% 0; width: 106.1333%; max-width: none; height: 77.1318%; object-fit: cover; }
.success-plinth { top: 80.2326%; left: 21.0285%; width: 57.6%; height: 27.907%; object-fit: cover; }
.success-banner { top: 0; left: 50%; translate: -50% 0; width: calc(100% - 32px); height: auto; object-fit: contain; }
.success-clouds { top: 79.0698%; left: 4.7619%; width: 91.2%; height: 30.2326%; overflow: hidden; }
.success-clouds img { position: absolute; top: -33.33%; left: -2.63%; width: 105.26%; max-width: none; height: 153.85%; }
.success-coin { top: 40.6977%; left: 50%; translate: -50% 0; width: 38.1333%; height: 55.4264%; object-fit: cover; }
.success-coin.success-item { top: 36.0465%; width: 62%; height: 60.0775%; object-fit: contain; }
.success-spark-one { top: 43.6167%; left: 67.064%; width: 6.1333%; height: 12.0155%; }
.success-spark-two { top: 75.686%; left: 26.8213%; width: 6.1333%; height: 12.0155%; }
.success-panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; width: calc(100% - 32px); margin: 0 auto; padding: 26px 20px 20px; border: 2px solid #ff9d00; border-left-color: #ff4b2a; border-bottom-color: #ff4b2a; border-radius: 20px; background: #fffaef; }
.success-heading { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.success-heading h2 { width: 100%; margin: 0; color: #682f11; font-size: 24px; font-weight: 600; line-height: 1.2; }
.success-heading .success-cost { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0; padding: 8px 20px; border-radius: 125px; background: #f2e5c7; color: #ff6a00; font-size: 24px; font-weight: 500; line-height: 1; }
.success-cost .merit-icon { width: 36px; height: 24px; }
.success-divider { width: 100%; height: 1px; }
.success-actions { display: flex; flex-direction: column; gap: 8px; }
.success-actions .modal-description { margin: 0; color: #682f11; font-size: 14px; font-weight: 400; line-height: 1.4; }
.success-actions .gold-button { height: 62px; margin: 0; font-size: 20px; font-weight: 700; }
.modal-level { width: 100%; height: 89px; object-fit: contain; margin: 8px auto 12px; }
.mode-choice { display: flex; align-items: center; width: 100%; text-align: left; gap: 7px; border: 1px solid #e2e2e2; border-radius: 16px; padding: 12px; margin-top: 8px; color: black; }
.mode-choice.selected { border-color: #ff9d00; }
.mode-choice img { width: 50px; height: 49px; object-fit: contain; background: #f8f0de; border-radius: 30px; }
.mode-choice strong { display: block; font-size: 14px; }
.mode-choice small { display: block; font-size: 12px; }
.farm-mode-menu { position: fixed; z-index: 20; padding: 20px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #f0d3aa; border-radius: 20px; background: var(--cream); box-shadow: 0 10px 30px rgb(104 47 17 / 18%); animation: farm-mode-open .18s ease-out; }
.farm-mode-menu h2 { color: var(--brown); font-size: 16px; font-weight: 600; }
@keyframes farm-mode-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.toast { position: fixed; z-index: 30; bottom: 116px; left: 50%; translate: -50% 0; padding: 10px 20px; max-width: calc(100% - 32px); border-radius: 14px; background: #682f11; color: white; text-align: center; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.toast.visible { opacity: 1; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 359px) {
  .rank-row { grid-template-columns: 28px 36px minmax(0, 1fr) 88px; }
  .rank-number { width: 28px; }
  .rank-row .avatar { width: 36px; height: 36px; }
  .rank-badge { width: 88px; }
  .rank-info strong { font-size: 16px; }
  .rank-row { gap: 4px; }
  .product-card { padding-inline: 10px; }
  .quest-row { gap: 6px; }
  .quest-row .gold-button { width: 112px; }
  .quest-row h2 { font-size: 14px; }
  .mode-button strong { font-size: 18px; }
  .score { width: 110px; }
  .speech { left: calc(50% + 10px); width: 145px; }
}
/* Shared interaction and navigation motion. */
html { scroll-behavior: smooth; scroll-padding-block: 97px 110px; }
input, button, textarea, a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, filter .18s ease, transform .18s ease, opacity .18s ease;
}
.form-field, .name-field { transition: border-color .18s ease, box-shadow .18s ease; }
.form-field:focus-within, .name-field:focus-within {
  border-color: #ff9d00;
  box-shadow: 0 0 0 2px rgb(255 157 0 / 20%);
}
.bottom-nav .nav-icon, .quest-link img { transition: transform .2s ease; }
.product-card, .level-card, .quest-row, .rank-row, .panel {
  transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover, button:not(:disabled):hover { filter: brightness(1.06); }
  .gold-button:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 5px 12px rgb(139 48 0 / 16%); }
  .text-button:hover, .journey-caption button:hover, .back:hover { color: #d75b00; }
  .bottom-nav a:hover .nav-icon, .quest-link:hover img { transform: translateY(-4px); }
  .mode-choice:hover { border-color: #ff9d00; background-color: #fff1d2; }
  .level-card:hover { transform: translateY(-3px); }
  input:hover, textarea:hover { border-color: #ff9d00; }
}
button:not(:disabled):active, a.gold-button:active { transform: translateY(1px); }
.app-shell { animation: page-enter .24s ease-out; transition: opacity .14s ease; }
.page-leaving .app-shell { opacity: 0; pointer-events: none; }
.scroll-reveal-pending { opacity: 0; transform: translateY(14px); }
.scroll-reveal-visible { opacity: 1; transform: translateY(0); }
.modal { overscroll-behavior-y: contain; scroll-behavior: smooth; }
.modal[open] { animation: dialog-enter .2s ease-out; }
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-enter .14s ease-in reverse; }
::view-transition-new(root) { animation: page-enter .2s ease-out; }
/* Welcome screen: a short entrance followed by subtle character motion. */
.splash .brand-image {
  transform-origin: 50% 70%;
  animation: welcome-logo .8s cubic-bezier(.2,.75,.25,1) .08s backwards,
    welcome-float 5s ease-in-out 1s infinite;
}
.splash .splash-brand::before { animation: welcome-glow 5s ease-in-out .4s infinite; }
.splash .splash-brand h1 { animation: welcome-rise .65s ease-out .25s backwards; }
.splash .name-field { animation: welcome-rise .65s ease-out .4s backwards; }
.splash .start-form > .gold-button { animation: welcome-rise .65s ease-out .55s backwards; }
.splash .splash-note { animation: welcome-rise .75s ease-out .65s backwards; }
.splash .start-form > .gold-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 45%) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: welcome-shine 6s ease-in-out 1.25s infinite;
}
.splash .start-form:focus-within .name-field,
.splash .start-form:focus-within > .gold-button { animation: none; }
@keyframes welcome-logo {
  from { opacity: 0; transform: translateY(20px) scale(.92) rotate(-2deg); }
  75% { opacity: 1; transform: translateY(-3px) scale(1.01) rotate(.4deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcome-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}
@keyframes welcome-glow {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
@keyframes welcome-shine {
  0%, 65% { transform: translateX(-130%); opacity: 0; }
  70% { opacity: 1; }
  88% { transform: translateX(130%); opacity: 1; }
  89%, 100% { transform: translateX(130%); opacity: 0; }
}
/* Home fits the visual viewport; only the character area shrinks on short screens. */
body.home-screen { height: 100vh; height: 100dvh; overflow: hidden; }
.home-page {
  --farm-button-height: clamp(48px, 8.9vh, 72px);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.home-page .home-header { flex: 0 0 auto; padding-top: 20px; animation: welcome-rise .5s ease-out .05s backwards; }
.home-page .farm-main { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding-bottom: 12px; }
.home-page .scene-space { position: relative; flex: 1 1 0; min-height: 0; animation: home-character-enter .65s ease-out .12s backwards; }
.home-page .character-scene {
  position: absolute;
  left: 50%;
  bottom: calc(18px * var(--scene-scale, .6));
  translate: -50% 0;
  width: 375px;
  max-width: none;
  height: 419px;
  scale: var(--scene-scale, .6);
  transform-origin: 50% 100%;
}
.home-page .character-aura { max-width: none; }
.home-page .character { object-fit: contain; object-position: center bottom; clip-path: none; transform-origin: center bottom; transition: filter .2s ease, scale .3s ease, opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .home-page .character:hover { scale: 1.02; }
  .home-page .character-scene.is-sad .character:hover,
  .home-page .character-scene.dismissed .character:hover { scale: 1; }
}
.home-page .character-scene.is-sad .speech { opacity: 0; animation: none; }
.home-page .character-scene.is-sad .character { filter: brightness(.94); }
.home-page .character-transition-copy { pointer-events: none; }
.home-page .character-scene[aria-busy="true"] .character { scale: 1; }
.home-page .character-scene.dismissed { opacity: 1; transform: none; }
.home-page .character-scene.dismissed .character { opacity: 0; transform: translateX(-60px); }
.home-page .character-scene.is-arriving .character { animation: home-visitor-enter .55s cubic-bezier(.22, 1, .36, 1) both; }
.home-page .farm-actions button:disabled { filter: none; opacity: .75; }
.home-page .speech { left: calc(50% + 21.5px); width: 162.1px; transform-origin: 45% 90%; animation: home-speech-float 3.8s ease-in-out .8s infinite; }
.home-page .farm-actions { flex: 0 0 auto; top: calc(-14px * var(--scene-scale, .6)); margin: 0 16px; animation: welcome-rise .55s ease-out .22s backwards; }
.home-page .farm-actions .gold-button { height: var(--farm-button-height); font-size: clamp(20px, 3vh, 24px); }
.home-page .farm-actions .text-button { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 32px; margin-top: 8px; height: 50px; min-height: 0; font-size: 22px; }
.home-page .bottom-nav {
  position: relative;
  left: auto;
  bottom: auto;
  translate: none;
  flex: 0 0 auto;
  animation: welcome-rise .5s ease-out .3s backwards;
}
.home-page .quest-link { top: 12px; animation: welcome-rise .5s ease-out .18s backwards; }
.home-page .floating-points { inset: 0; translate: none; display: block; pointer-events: none; z-index: 15; }
.home-page .merit-pop, .checkin-merit-pop {
  position: absolute;
  top: var(--point-top, 24px);
  left: 50%;
  translate: -50% -50%;
  font-size: clamp(44px, 6.4vh, 56px);
  line-height: 1.2;
  color: #ffe26e;
  text-shadow: 0 2px 0 #a65812, 0 4px 12px rgb(104 47 17 / 25%);
  animation: home-merit-pop 1.1s cubic-bezier(.2,.65,.3,1) forwards;
}
.home-page .merit-pop-negative { color: #ff6759; text-shadow: 0 2px 0 #842712, 0 4px 12px rgb(104 47 17 / 25%); }
.checkin-merit-pop { position: fixed; z-index: 30; font-weight: 700; white-space: nowrap; pointer-events: none; }
.home-page .button-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgb(255 255 255 / 65%), transparent 65%);
  animation: home-button-ripple .55s ease-out forwards;
}
@keyframes home-character-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-visitor-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes home-speech-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes home-merit-pop {
  0% { opacity: 0; transform: translateY(14px) scale(.65); }
  18% { opacity: 1; transform: translateY(0) scale(1.12); }
  38% { opacity: 1; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translate(var(--point-drift), var(--point-rise, -100px)) scale(.85); }
}
@keyframes home-button-ripple { from { opacity: .8; scale: .7; } to { opacity: 0; scale: 1.4; } }
@media (max-height: 520px) {
  .home-page .journey { margin-top: 6px; padding-block: 8px; }
  .home-page .bottom-nav { min-height: 72px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .home-page .bottom-nav a { height: 54px; }
  .home-page .farm-main { padding-bottom: 4px; }
  .home-page .quest-link img { width: 40px; height: auto; }
  .home-page .quest-link { top: 4px; font-size: 12px; }
  .home-page .farm-actions .text-button { font-size: 18px; }
}
.level-shimmer { position: relative; display: inline-grid; flex-shrink: 0; max-width: 100%; overflow: hidden; vertical-align: middle; isolation: isolate; }
.level-shimmer > img { grid-area: 1 / 1; }
.level-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 12%) 43%, rgb(255 249 210 / 65%) 50%, rgb(255 255 255 / 12%) 57%, transparent 65%); transform: translateX(-150%); animation: level-light-sweep 4.5s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
.level-shimmer:has(> .profile-badge) { margin-inline: auto; }
.current-level > .level-shimmer { margin-top: 0; }
.level-shimmer:has(> .modal-level) { width: 100%; }
@keyframes level-light-sweep { 0%, 35% { transform: translateX(-150%); } 75%, 100% { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) {
  .home-page .character:hover { scale: 1; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}