@font-face { font-family: Fredoka; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/fredoka-medium.ttf') format('truetype'); }
@font-face { font-family: Fredoka; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/fonts/fredoka-bold.ttf') format('truetype'); }
:root { font-family: Fredoka, ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif; color: #26346c; background: #1c2851; font-synthesis: none; --ink: #26346c; --yellow: #ffcc3e; --cream: #fff7da; --blue: #6269d9; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background-image: radial-gradient(#ffffff09 2px, transparent 2px); background-size: 24px 24px; }
button, input, select { font: inherit; }
button { cursor: pointer; border: none; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 4px solid #ef6c3b; outline-offset: 4px; }
button, a, input { touch-action: manipulation; }
h1, h2, p { margin: 0; }svg { display: block; }.icon { width: 24px; height: 24px; flex-shrink: 0; }
.game { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100svh; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: clip; background: #8bd4db; box-shadow: 0 0 90px #111935; }
.world-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
.game::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(#24528f2b, transparent 30%, #24425821); }
.hud { height: 80px; padding: calc(14px + env(safe-area-inset-top)) 18px 10px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.game-title { display: flex; flex-direction: column; background: none; font-size: 22px; font-weight: 700; color: #fff9d5; letter-spacing: -.6px; line-height: .9; transform: rotate(-5deg); padding: 5px 2px 7px; text-shadow: -2px -2px #26346c, 2px -2px #26346c, -2px 2px #26346c, 2px 3px #26346c, 0 5px #26346c; -webkit-user-select: none; user-select: none; }
.game-title > span { color: #ffcf47; font-size: 24px; }.game-title.developer-active::after { content: 'DEV'; position: absolute; right: -25px; top: 4px; background: #f97950; color: white; font-size: 9px; text-shadow: none; border-radius: 4px; padding: 3px; transform: rotate(12deg); }
.wallet { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; min-width: 75px; background: #fff2bd; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 3px 0 #26346c; margin-left: auto; font-size: 21px; }.wallet .icon { width: 27px; height: 27px; }.wallet strong { font-weight: 600; }
.settings-button { display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--ink); background: #f1f0ff; border-radius: 14px; box-shadow: 0 3px 0 #26346c; color: #6d6ba8; font-size: 28px; line-height: 1; }
#main { display: flex; flex: 1; outline: none; }.game-screen { width: 100%; display: flex; flex-direction: column; min-width: 0; }
.playfield { position: relative; flex: 1; min-height: 300px; display: flex; flex-direction: column; align-items: center; }.scene-title { position: relative; z-index: 2; padding: 19px 18px 0; text-align: center; color: white; font-size: clamp(29px, 7vw, 38px); line-height: 1.05; font-weight: 700; letter-spacing: -.7px; text-shadow: -2px -2px #26346c, 2px -2px #26346c, -2px 2px #26346c, 2px 3px #26346c, 0 5px #26346c; }
.action-panel { position: relative; z-index: 1; background: #fff7da; border-top: 4px solid var(--ink); border-radius: 30px 30px 0 0; padding: 26px 24px calc(26px + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -6px 0 #fff7da55; margin-top: 0; }
.action-panel::before { content: ''; position: absolute; width: 45px; height: 5px; border-radius: 8px; top: 11px; left: calc(50% - 22px); background: #e6cda0; }.action-panel h2 { font-size: 26px; font-weight: 600; line-height: 1.1; margin-top: 7px; }.action-panel > p { font-size: 18px; line-height: 1.35; margin-top: 13px; color: #5d6181; }
.big-button { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #ffcc3e; border: 3px solid #303866; border-radius: 17px; box-shadow: 0 6px 0 #303866; font-size: 23px; font-weight: 600; padding: 12px 16px; margin-top: 23px; transition: transform .12s, box-shadow .12s; }.big-button .icon { width: 25px; height: 25px; }.big-button:hover { background: #ffda67; }.big-button:active, .equipment-choice:active, .route-choice:active, .upgrade-choice:active { transform: translateY(4px); box-shadow: 0 2px 0 #303866; }.blue-button { background: #6768d9; color: white; }.blue-button:hover { background: #7e7fe9; }.quiet-button { min-height: 46px; padding: 12px 9px; font-size: 16px; background: none; margin: 14px auto -5px; display: flex; align-items: center; justify-content: center; text-decoration: underline; text-decoration-color: #b7a98a; text-underline-offset: 5px; color: #77768c; }
.actors { position: absolute; width: 100%; bottom: 0; left: 0; height: 240px; }.milo { position: absolute; bottom: -5px; width: 215px; left: calc(50% - 107px); filter: drop-shadow(0 6px 0 #25466726); }.hero-character { width: 100%; height: auto; overflow: visible; }.hero-body { animation: breathe 3s ease-in-out infinite; transform-origin: 50% 90%; }.hero-weapon { transform-origin: 170px 177px; animation: sword-sway 3s ease-in-out infinite; }.two-actors .milo { width: 185px; left: 13%; }.encounter-creature { position: absolute; bottom: 4px; width: 140px; right: 8%; }.creature, .goblin-character { width: 100%; height: auto; }.encounter-creature > svg { animation: monster-bob 3.2s ease-in-out infinite; }.two-actors .encounter-creature:has(.goblin-character) { width: 150px; bottom: 5px; }
.hello-bubble { position: absolute; bottom: 223px; left: calc(50% - 16px); font-size: 19px; background: white; border: 3px solid var(--ink); border-radius: 20px 20px 20px 3px; padding: 9px 13px; transform: rotate(7deg); color: #4a5b93; z-index: 1; }.welcome-screen .playfield { min-height: clamp(240px, 38svh, 350px); }.welcome-screen .actors { bottom: -2px; }.welcome-screen .milo { width: 235px; left: calc(50% - 117px); }.welcome-screen .action-panel { padding-top: 29px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.encounter-screen .playfield { min-height: 200px; flex: 1; }.encounter-screen .scene-title { font-size: 27px; padding-top: 5px; }.encounter-screen .actors { height: 145px; }.encounter-screen .milo { width: 135px; bottom: -2px; left: 22%; }.encounter-screen .encounter-creature { width: 100px; right: 16%; }.encounter-screen .two-actors .encounter-creature:has(.goblin-character) { width: 110px; }.encounter-progress { display: flex; gap: 9px; position: absolute; top: 46px; padding: 4px 0; z-index: 3; }.encounter-progress > span { width: 26px; height: 26px; border: 2px solid #304478; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: #ffffffc9; box-shadow: 0 2px #304478; color: #6e7b9a; }.encounter-progress .current { background: #fff29a; color: #5a547b; }.encounter-progress .complete { background: #ffca3d; color: #886122; border-color: #7a581e; }
.encounter-screen .action-panel { padding: 22px 22px calc(18px + env(safe-area-inset-bottom)); }.action-panel .story-line { margin-top: 4px; font-size: 15px; color: #77718b; }.math-question { font-size: clamp(31px, 8vw, 42px); font-weight: 600; letter-spacing: -.7px; margin: 17px 0; line-height: 1.1; }.comparison-line { display: inline-flex; gap: 10px; padding-left: 10px; color: #6462a1; }.comparison-line > span { display: inline-grid; place-items: center; min-width: 36px; background: #ebe5fb; border: 2px dashed #aaa0ce; border-radius: 10px; font-size: 27px; color: #8272b5; transform: rotate(-4deg); }
.answer-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 18px; }.answer-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--ink); border-radius: 17px; background: #b4e5d3; box-shadow: 0 5px var(--ink); padding: 13px 5px; min-height: 96px; }.answer-buttons button:nth-child(2) { background: #d4c5f3; }.answer-buttons button:nth-child(3) { background: #ffbd87; }.answer-buttons button:hover { filter: brightness(1.05); }.answer-buttons button:active { transform: translateY(4px); box-shadow: 0 1px var(--ink); }.answer-buttons strong { font-size: 44px; font-weight: 500; line-height: 1; }.answer-buttons span { font-size: 16px; margin-top: 8px; }
.answer-message { text-align: left; border: 2px solid #8bbf9f; background: #e3f0d6; border-radius: 16px; padding: 14px 16px; }.answer-message > strong { display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 600; color: #367557; }.answer-message > strong > span { display: inline-flex; align-items: center; gap: 5px; color: #996d24; font-size: 19px; }.answer-message .icon { width: 22px; height: 22px; }.answer-message p { font-size: 16px; line-height: 1.35; color: #52785c; margin-top: 8px; }.answer-message.helped { background: #e9e5ff; border-color: #aea3d3; }.helped > strong { color: #7661a7; }.helped p { color: #756a94; }.encounter-screen .answer-message + .big-button { margin-top: 15px; min-height: 54px; }.practice-close { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--ink); background: #fff6da; border-radius: 50%; position: absolute; left: 15px; bottom: 70px; font-size: 28px; z-index: 3; }
.timer-track { height: 6px; width: 100%; background: #e9d6b5; border-radius: 10px; overflow: hidden; margin-top: -3px; }.timer-track span { height: 100%; width: 100%; display: block; background: #ee9755; transition: width .1s linear; }.timer-label { display: block; font-size: 12px; color: #a08056; text-align: right; margin: 4px 0 -7px; }
.treasure-art { position: absolute; width: 235px; bottom: 14px; left: calc(50% - 117px); animation: chest-float 3s ease-in-out infinite; }.treasure-chest { width: 100%; height: auto; overflow: visible; }.loot-number { font-size: 65px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 14px; color: #ad7227; margin-top: 5px; text-shadow: 0 3px #ffe192; }.loot-number .icon { width: 48px; height: 48px; }.loot-screen .playfield { min-height: 290px; }.loot-screen .action-panel > p { font-size: 19px; }
.preparation-screen .playfield { min-height: 220px; }.preparation-screen .scene-title { font-size: 30px; }.preparation-screen .milo { width: 155px; left: calc(50% - 77px); }.preparation-screen .actors { height: 165px; }.action-panel .step-label { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: #8b80a1; margin: 0 0 11px; }.preparation-screen h2 { font-size: 25px; margin-top: 0; }.upgrade-choices { display: flex; flex-direction: column; gap: 15px; margin-top: 19px; }.upgrade-choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 15px 12px; background: #bde7d2; border: 3px solid var(--ink); border-radius: 17px; box-shadow: 0 4px var(--ink); min-height: 90px; transition: transform .1s, box-shadow .1s; }.upgrade-choice.power-choice { background: #d5c8f2; }.choice-symbol { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 41px; background: #ffffff65; border-radius: 10px; }.choice-symbol .icon { width: 27px; height: 27px; }.upgrade-choice strong { font-size: 18px; font-weight: 600; display: block; }.damage-preview { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 7px; color: #587872; }.power-choice .damage-preview { color: #77648e; }.damage-preview .icon { width: 16px; height: 16px; }.damage-preview b { font-size: 22px; color: var(--ink); }.choice-price { display: flex; align-items: center; gap: 3px; align-self: center; margin-left: auto; background: #ffefb4; border-radius: 9px; padding: 6px 7px; color: #86642b; font-size: 17px; }.choice-price .icon { width: 19px; height: 19px; }
.action-panel .little-note { font-size: 14px; color: #8a8295; margin-top: 16px; line-height: 1.3; }.equipment-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }.equipment-choice { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 16px 7px; background: #b9dfed; border: 3px solid var(--ink); border-radius: 19px; box-shadow: 0 5px var(--ink); transition: transform .1s, box-shadow .1s; }.equipment-choice.daggers { background: #cce6b8; }.equipment-art { width: 100%; height: 66px; display: flex; justify-content: center; align-items: center; margin-bottom: 9px; color: #496b9c; }.equipment-art .icon { width: 56px; height: 56px; stroke-width: 2px; filter: drop-shadow(2px 3px #ffffff7a); }.daggers .equipment-art { gap: 0; color: #668a50; }.daggers .equipment-art .icon { width: 44px; height: 44px; }.daggers .equipment-art .icon:first-child { transform: rotate(-15deg); }.daggers .equipment-art .icon:last-child { transform: rotate(20deg) translateX(-10px); }.equipment-choice > strong { font-size: 19px; font-weight: 600; }.equipment-numbers { font-size: 37px; margin-top: 8px; font-weight: 600; }.equipment-numbers small { font-size: 24px; color: #7893a5; }.equipment-choice > span:last-child { font-size: 15px; line-height: 1.35; margin-top: 8px; color: #607b97; }.daggers > span:last-child { color: #6c875e; }
.route-screen .playfield { min-height: 205px; }.route-choices { display: flex; flex-direction: column; gap: 15px; margin-top: 21px; }.route-choice { display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); border-radius: 18px; background: #ffd2a1; box-shadow: 0 4px var(--ink); padding: 11px 12px 11px 5px; text-align: left; }.route-choice.rocks { background: #d9d5ee; }.route-creature { flex-shrink: 0; display: block; width: 81px; height: 90px; }.route-creature .creature { height: 100%; }.route-choice strong { display: block; font-size: 22px; font-weight: 600; }.route-choice b { display: block; font-size: 14px; font-weight: 500; color: #a16d51; margin-top: 6px; }.route-choice small { display: block; font-size: 12px; color: #a16d51; margin-top: 5px; }.rocks b, .rocks small { color: #807491; }.route-choice > .icon { margin-left: auto; width: 20px; height: 20px; }
.send-screen .playfield { min-height: 300px; }.send-screen .actors { bottom: 10px; }.send-screen .action-panel p { line-height: 1.5; }.send-screen .action-panel strong { color: #47548c; }.send-screen .milo { width: 190px; }.send-screen .encounter-creature { width: 130px; }
.game[data-view='away'] .world-backdrop { filter: brightness(.79) saturate(.87); }.travel-cloud { position: absolute; top: 105px; background: #fff5d8; border: 3px solid var(--ink); padding: 12px 17px; border-radius: 22px 22px 3px 22px; font-size: 20px; transform: rotate(-6deg); z-index: 1; }.away-screen .playfield { min-height: 320px; }.walking-away .milo { width: 165px; left: calc(50% - 82px); bottom: 20px; animation: walking 2s ease-in-out infinite; }.trail-step { position: absolute; color: #fff2b5; text-shadow: 0 2px #6d8d5d; font-size: 23px; bottom: 17px; }.step-one { left: 39%; }.step-two { bottom: 5px; left: 54%; }.away-screen .action-panel > p { font-size: 19px; }.arrival-chest { position: absolute; bottom: -1px; width: 140px; left: calc(50% + 13px); }.return-screen .milo { width: 210px; left: calc(50% - 135px); bottom: 8px; }.return-screen .playfield { min-height: 300px; }.return-screen .action-panel > p { font-size: 18px; line-height: 1.4; }
.offline-label { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); background: #24386dbf; color: #fff6d4; font-size: 11px; border-radius: 10px; padding: 4px 9px; white-space: nowrap; z-index: 3; }.offline-label[hidden] { display: none; }
dialog { width: min(420px, calc(100% - 28px)); max-height: calc(100svh - 36px); overflow-y: auto; background: #fff7da; border: 4px solid var(--ink); border-radius: 25px; color: var(--ink); padding: 30px 24px 25px; box-shadow: 0 8px 0 #1b2553; overscroll-behavior: contain; }dialog::backdrop { background: #1c27549c; backdrop-filter: blur(4px); }.dialog-close { position: absolute; top: 11px; right: 11px; width: 40px; height: 40px; display: grid; place-items: center; background: #eae2e1; color: #9a8093; border: 2px solid #c3b4b7; border-radius: 50%; }.dialog-close .icon { width: 19px; height: 19px; }dialog h2 { font-size: 29px; font-weight: 600; padding-right: 20px; margin: 5px 0 23px; }dialog p { font-size: 17px; line-height: 1.4; color: #6f6986; margin: 16px 0; }.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 2px solid #eaddb9; font-size: 19px; }.setting-row small { display: block; font-size: 13px; color: #8b8093; margin-top: 5px; max-width: 240px; }.setting-row input { width: 26px; height: 26px; accent-color: #6268ce; flex-shrink: 0; }.difficulty-setting { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; font-size: 19px; }.difficulty-setting select { width: 100%; min-height: 48px; border-radius: 12px; border: 2px solid #b5a9c7; background: #f4edfd; padding: 8px 12px; color: #6c5a93; font-size: 17px; }dialog .settings-note { font-size: 13px; margin: 8px 0 20px; color: #91839b; }.menu-button { width: 100%; min-height: 48px; margin-top: 11px; text-align: left; border: 2px solid #d8c7b8; background: #f3e9d6; border-radius: 12px; padding: 10px 14px; font-size: 17px; }.menu-button:hover { background: #ead9bd; }.menu-button.dev-button { border-color: #e29b79; color: #b26a44; background: #ffe4d3; }dialog .storage-note { font-size: 13px; line-height: 1.5; margin: 22px 0 0; color: #9a8c9c; }.help-list { padding-left: 25px; color: #b17d32; margin: 20px 0; font-size: 21px; }.help-list li { padding-left: 5px; margin: 17px 0; font-size: 17px; line-height: 1.35; color: #7b708c; }.help-list strong { display: block; color: #4e5082; font-size: 19px; margin-bottom: 4px; }dialog .dev-clock { padding: 13px; font-size: 16px; background: #e5e0f4; border-radius: 12px; color: #74638f; }.storage-error { margin-top: 100px; border-radius: 25px; padding: 30px; }.storage-error h1 { font-size: 28px; }.storage-error p { font-size: 18px; margin-top: 15px; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #273568; border: 2px solid #fff2cb; border-radius: 15px; padding: 13px 20px; color: #fff5d7; font-size: 17px; line-height: 1.3; width: max-content; max-width: min(430px, calc(100% - 30px)); box-shadow: 0 4px #1d2552; transition: opacity .2s, transform .2s; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }.celebration { position: fixed; pointer-events: none; z-index: 15; inset: 0; overflow: hidden; }.celebration span { position: absolute; top: -20px; left: var(--x); width: 9px; height: 13px; border-radius: 2px; animation: confetti 1.8s var(--delay) ease-in forwards; }
.hit .milo { animation: hero-hit .4s ease-out; }.hit .encounter-creature { animation: creature-hit .5s ease-out; }.answer-pop .wallet { animation: wallet-pop .45s ease-out; }
@keyframes breathe { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-3px) rotate(.6deg); } }
@keyframes sword-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
@keyframes monster-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes chest-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes walking { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes hero-hit { 50% { transform: translateX(19px) rotate(8deg); } }
@keyframes creature-hit { 40% { transform: translateX(15px) rotate(15deg) scale(.92); } }
@keyframes wallet-pop { 50% { transform: scale(1.12); } }
@keyframes confetti { to { top: 110vh; transform: translateX(40px) rotate(var(--spin)); } }
@media (min-width: 700px) { .game { margin: 22px auto; min-height: min(850px, calc(100svh - 44px)); border: 4px solid #101a3b; border-radius: 32px; }.hud { padding-top: 13px; }.action-panel { padding-bottom: 25px; } }
@media (max-width: 360px) { .hud { padding-left: 13px; padding-right: 13px; }.game-title { font-size: 20px; }.game-title > span { font-size: 22px; }.wallet { font-size: 18px; padding-right: 10px; min-width: 65px; }.action-panel { padding-left: 18px; padding-right: 18px; }.scene-title { font-size: 31px; }.action-panel h2 { font-size: 24px; }.action-panel > p { font-size: 17px; }.big-button { font-size: 21px; }.upgrade-choice { padding: 13px 8px; gap: 8px; }.upgrade-choice strong { font-size: 16px; }.choice-price { font-size: 15px; padding: 5px; }.choice-symbol { width: 28px; }.choice-symbol .icon { width: 23px; height: 23px; }.equipment-choice > strong { font-size: 17px; }.route-choice strong { font-size: 20px; }.route-choice small { font-size: 11px; }.route-creature { width: 70px; }.math-question { font-size: 30px; }.comparison-line { gap: 7px; padding-left: 7px; }.comparison-line > span { min-width: 30px; font-size: 23px; }.encounter-screen .two-actors .milo { left: 17%; }.encounter-screen .encounter-creature { right: 12%; } }
@media (max-height: 700px) { .hud { height: 70px; }.welcome-screen .playfield { min-height: 270px; }.welcome-screen .milo { width: 195px; left: calc(50% - 97px); }.hello-bubble { bottom: 185px; font-size: 17px; }.playfield { min-height: 230px; }.action-panel { padding-top: 23px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }.encounter-screen .playfield { min-height: 170px; }.encounter-screen .scene-title { font-size: 24px; }.encounter-screen .encounter-progress { top: 38px; }.encounter-screen .milo { width: 108px; }.encounter-screen .encounter-creature { width: 85px; }.encounter-screen .two-actors .encounter-creature:has(.goblin-character) { width: 95px; }.encounter-screen .action-panel { padding-top: 21px; padding-bottom: 15px; }.math-question { margin: 13px 0; }.answer-buttons { margin-top: 14px; }.answer-buttons button { min-height: 83px; padding: 10px 5px; }.answer-buttons strong { font-size: 36px; }.answer-buttons span { margin-top: 5px; }.answer-message { padding: 12px; }.answer-message p { font-size: 15px; }.preparation-screen .playfield { min-height: 175px; }.preparation-screen .scene-title { font-size: 26px; }.preparation-screen .milo { width: 125px; left: calc(50% - 62px); }.preparation-screen .action-panel { padding-top: 22px; }.step-label { margin-bottom: 8px; }.upgrade-choice { min-height: 79px; padding-top: 11px; padding-bottom: 11px; }.upgrade-choices { gap: 12px; margin-top: 16px; }.equipment-art { height: 54px; }.equipment-choice { padding-top: 13px; padding-bottom: 13px; }.equipment-numbers { font-size: 32px; }.equipment-choice > span:last-child { font-size: 14px; }.route-choice { padding-top: 7px; padding-bottom: 7px; }.route-creature { height: 78px; }.route-choices { gap: 13px; margin-top: 16px; }.away-screen .playfield, .return-screen .playfield, .send-screen .playfield { min-height: 260px; }.travel-cloud { top: 75px; }.loot-screen .playfield { min-height: 250px; }.treasure-art { width: 205px; left: calc(50% - 102px); }.quiet-button { margin-top: 11px; padding-top: 9px; padding-bottom: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }