/* Postal stationery and toy-like controls shared by every in-game menu. */
#modal{width:min(calc(100vw - 32px),358px);max-width:none;max-height:calc(100svh - 28px);padding:0;border:0;border-radius:32px;background:transparent;box-shadow:none;overflow:visible;color:#42654f}
#modal::backdrop{background:#173f39a8;backdrop-filter:blur(7px);animation:menu-dim .2s ease-out both}
.menu-sheet{position:relative;isolation:isolate;max-height:calc(100svh - 42px);overflow:auto;scrollbar-width:thin;padding:22px 22px 28px;border:4px solid #c8a46a;border-radius:32px;background:radial-gradient(circle at 2px 2px,#b4905012 .65px,transparent .9px) 0 0/7px 7px,linear-gradient(135deg,#fff7db,#f7e8bc 72%,#eed6a0);box-shadow:inset 0 0 0 2px #fff9e4,inset 0 -5px 0 #e7ce96,0 9px 0 #847d50,0 13px 0 #325c4955,0 28px 55px #133c3b66}
.menu-sheet::before{content:"";position:absolute;z-index:-1;inset:9px;border:1px solid #d9bd84;border-radius:21px;pointer-events:none}
.menu-sheet::after{content:"";position:absolute;left:25px;right:25px;bottom:13px;height:5px;border-radius:3px;background:repeating-linear-gradient(125deg,#6d9c81 0 13px,transparent 13px 20px,#d7ac68 20px 33px,transparent 33px 40px);opacity:.65;pointer-events:none}
#modal .modal-top{position:absolute;right:11px;top:11px;z-index:4;margin:0}
#modal .modal-top .round-button{width:44px;height:44px;border:2px solid #fff5d6;background:linear-gradient(#f9eac1,#e4cd95);box-shadow:0 3px #b39b65,inset 0 2px #fff9df;color:#56785d;transition:transform .13s,box-shadow .13s}
#modal .modal-top svg{width:25px;height:25px}
#modal button:focus-visible{outline:2px solid #477b66;outline-offset:4px}
.menu-meta{height:32px;display:flex;align-items:center;gap:15px;color:#a18c62;padding-right:42px}
.menu-meta>svg{width:60px;height:27px;opacity:.75}
.menu-meta>span{font-size:18px;line-height:1;font-weight:900;letter-spacing:1px;color:#648467}
.menu-meta i{font-style:normal;font-size:10px;letter-spacing:0;margin-left:3px;color:#ae9c73}
.success-content,.pause-content{position:relative;text-align:center}
.menu-hero{position:relative;width:min(250px,100%);margin:4px auto -7px;transform-origin:50% 75%}
.menu-hero::before{content:"";position:absolute;inset:8% 15% 11%;border-radius:50%;background:radial-gradient(circle,#fff6ca 10%,#ffe6a04a 50%,transparent 70%);z-index:-1}
.parcel-emblem{display:block;width:100%;height:auto;overflow:visible}
.parcel-prop{transform-box:view-box;transform-origin:130px 112px}
.hero-seal{transform-box:view-box;transform-origin:182px 142px}
.hero-leaves{transform-box:view-box;transform-origin:130px 158px}
.hero-spark{transform-box:fill-box;transform-origin:center}
#modal .success-title{font-size:34px;line-height:1.2;letter-spacing:3px;font-weight:1000;margin:0 0 14px;transform:rotate(-3deg);color:#416e55;text-shadow:0 2px #fff9de,0 4px #d3bb8144}
.receipt-route{display:flex;align-items:center;justify-content:center;gap:10px;min-height:32px;margin:0 0 19px;color:#71906e}
.receipt-route>span{position:relative;display:grid;place-items:center;width:31px;height:31px;border:1.5px solid #93a779;border-radius:8px;font:900 19px Georgia,serif;transform:rotate(-8deg);background:#d9e3b64d}
.receipt-route>span:last-child{transform:rotate(6deg)}
.receipt-route b{position:absolute;right:-6px;bottom:-3px;font:900 11px sans-serif;color:#fff5cf;background:#769567;width:14px;height:14px;border-radius:50%;border:1px solid #e8e6ba}
.receipt-route>i{width:31px;height:1px;border-top:2px dotted #bdaf82}
.menu-actions{display:grid;grid-template-columns:49px minmax(0,1fr) 49px;align-items:center;gap:13px;padding:0 0 4px}
#modal .modal-primary{position:relative;height:62px;min-height:0;margin:0;padding:0;border:3px solid #c7dea5;border-radius:21px;background:linear-gradient(#8bb37b,#679768);box-shadow:inset 0 3px #c3d9a155,inset 0 -3px #5f8a5e,0 6px #426d50,0 8px #c9b78555;color:#fff4cb;transition:transform .12s,box-shadow .12s,filter .12s;overflow:hidden}
#modal .modal-primary::before{content:"";position:absolute;top:4px;left:13px;right:13px;height:6px;background:#e8f3c338;border-radius:10px}
#modal .modal-primary svg{position:relative;width:36px;height:36px;filter:drop-shadow(0 2px #67804655)}
#modal .next-button{background:linear-gradient(#ffda79,#f0ba56);border-color:#fff0b5;box-shadow:inset 0 3px #fff4c180,inset 0 -3px #e9aa49,0 6px #b28243,0 8px #b6a16e44;color:#846137}
#modal .next-button svg{width:40px;height:40px;stroke-width:2.2}
.menu-secondary{display:grid;place-items:center;width:49px;height:49px;padding:0;border:2px solid #fff5d1;border-radius:17px;background:linear-gradient(#f5e5b8,#e2cc96);box-shadow:inset 0 2px #fff7d5,0 4px #b69d68,0 6px #bca67433;color:#7d8c64;transition:transform .12s,box-shadow .12s}
.menu-secondary svg{width:24px;height:24px;stroke-width:1.9}
#modal .modal-primary:active{transform:translateY(5px) scale(.98);box-shadow:inset 0 2px #ffffff30,0 1px #8d8952}
#modal .menu-secondary:active,#modal .modal-top button:active{transform:translateY(3px) scale(.94);box-shadow:0 1px #a38f60}
.pause-content .menu-hero{width:min(227px,100%);margin:5px auto 18px}
.pause-content .hero-spark{opacity:.65}
.pause-content .menu-hero{width:178px;margin:1px auto 9px}
.pause-settings{min-width:0;margin:0 0 21px;padding:8px 9px 10px;border:1px dashed #cdb985;border-radius:16px;background:#e7d8ac33}
.pause-settings legend{padding:0 8px;font-size:11px;font-weight:750;letter-spacing:1px;color:#9a8d65}
.settings-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.setting-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:74px;padding:9px 5px;border-radius:12px;border:1px solid #d1c399;background:#efe2bc;box-shadow:0 2px #c0ac7d;color:#7d8c67;transition:background .16s,transform .12s}
.setting-option[aria-pressed="true"]{background:#e2e9c2;border-color:#b9cb9c;color:#5d805e}
.setting-name{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:800}
.setting-icon{display:grid;place-items:center;width:18px;height:21px;font-size:22px;line-height:1}
.setting-icon svg{width:18px;height:18px}
.setting-switch{width:37px;height:21px;border-radius:12px;background:#baac89;box-shadow:inset 0 2px #9e8e6b33;padding:3px;transition:background .16s}
.setting-switch>i{display:block;width:15px;height:15px;border-radius:50%;background:#fff3cd;box-shadow:0 1px 2px #6d725633;transition:transform .18s cubic-bezier(.2,.8,.25,1)}
.setting-option[aria-pressed="true"] .setting-switch{background:#799c70}
.setting-option[aria-pressed="true"] .setting-switch>i{transform:translateX(16px)}
.setting-option:active{transform:translateY(2px);box-shadow:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.map-heading{position:relative;padding:2px 38px 0 1px;text-align:left}
.map-heading>svg{width:62px;height:27px;color:#b59c69;display:block;margin-bottom:9px}
#modal .map-heading .modal-title{font-family:"Avenir Next","PingFang SC",sans-serif;font-size:27px;line-height:1.2;font-weight:1000;letter-spacing:1px;margin:0;text-align:left;color:#527a5d}
.map-heading .modal-title>span{font-size:18px;color:#b4ac7a;padding:0 3px}
#modal .level-grid{gap:12px 11px;margin:22px 0 18px}
#modal .level-grid button{display:grid;place-items:center;aspect-ratio:1;border:2px solid #b5c69b;border-radius:12px;background:linear-gradient(#eff1d1,#dce4b8);box-shadow:inset 0 2px #fff7d9,0 4px #8d9d72,0 6px #c7b68433;color:#5e7f59;font:900 24px "Avenir Next",sans-serif;transition:transform .12s,box-shadow .12s}
#modal .level-grid button::before{content:"";position:absolute;inset:5px;border:1px dashed #b0bf9266;border-radius:6px;pointer-events:none}
#modal .level-grid button::after{content:"";position:absolute;bottom:7px;width:18px;height:3px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.18}
#modal .level-grid button.complete{background:linear-gradient(#9cbd89,#82a778);border-color:#c5d7a6;box-shadow:inset 0 2px #dce9b466,0 4px #638563,0 6px #bca67433;color:#fff5cf}
#modal .level-grid button.selected{background:linear-gradient(#ffdd83,#efbd62);border-color:#fff2bc;box-shadow:inset 0 2px #fff3bd88,0 4px #b88b48,0 6px #bca67433;color:#896738}
#modal .level-grid button.selected::before{border-color:#d69b4655}
#modal .level-grid button small{display:grid;place-items:center;position:absolute;right:-3px;bottom:-2px;width:18px;height:18px;border-radius:50%;border:2px solid #f1e8ba;background:#6c9269;font:900 11px sans-serif;color:#fff3c6;box-shadow:0 2px #6c7f5655}
#modal .level-grid button:active{transform:translateY(3px) scale(.94);box-shadow:0 1px #839267}
#modal .chapter-pages{gap:3px;margin:0;align-items:center}
#modal .chapter-pages button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent}
.chapter-pages button>span{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid #a7b286;box-shadow:0 1px #fff7d4;transition:width .2s,background .2s,transform .15s}
.chapter-pages button[aria-current="true"]>span{width:24px;border-color:#b48b4c;background:#cca45d}
.chapter-pages button:active>span{transform:scale(.8)}
.menu-confetti{position:absolute;inset:-12px -14px 35%;overflow:hidden;pointer-events:none}
.menu-confetti i{position:absolute;left:var(--x);top:12px;width:6px;height:10px;border-radius:2px;background:#dcb25f;opacity:0;transform:rotate(var(--r))}
.menu-confetti i:nth-child(3n){background:#86a982;width:5px;height:8px}
.menu-confetti i:nth-child(3n + 1){background:#f2c665;height:6px}
.menu-enter .menu-sheet{animation:menu-arrive .4s cubic-bezier(.2,.8,.25,1) both}
.menu-enter .parcel-prop{animation:parcel-arrive .62s cubic-bezier(.2,.8,.25,1) .05s both}
.menu-enter .hero-leaves{animation:leaves-unfold .6s cubic-bezier(.2,.8,.25,1) .05s both}
.menu-enter .hero-seal{animation:seal-stamp .44s cubic-bezier(.2,.8,.25,1) .22s both}
.menu-enter .hero-spark{animation:spark-bloom .55s cubic-bezier(.2,.8,.25,1) .18s both}
.menu-enter .spark-two{animation-delay:.3s}.menu-enter .spark-three{animation-delay:.4s}
.menu-enter .success-title{animation:receipt-title .45s cubic-bezier(.2,.8,.25,1) .12s both}
.menu-enter .receipt-route{animation:receipt-rise .4s ease-out .28s both}
.menu-enter .menu-confetti i{animation:postal-confetti 1s ease-out calc(.18s + var(--delay)) both}
.menu-enter .level-grid button{animation:stamp-tile .28s cubic-bezier(.2,.8,.25,1) calc(var(--i)*15ms) backwards}
#modal[data-kind="help"] .menu-sheet{padding-top:44px}
#modal[data-kind="help"] .modal-primary{margin:22px auto 5px;max-width:180px}
@media(hover:hover){#modal .modal-primary:hover{filter:brightness(1.055)}.menu-secondary:hover{filter:brightness(1.035)}#modal .level-grid button:hover{filter:brightness(1.04)}}
@keyframes menu-dim{from{background:#173f3900;backdrop-filter:blur(0)}to{background:#173f39a8;backdrop-filter:blur(7px)}}
@keyframes menu-arrive{0%{opacity:0;transform:translateY(22px) scale(.86) rotate(-1.5deg)}66%{opacity:1;transform:translateY(-4px) scale(1.025) rotate(.4deg)}100%{opacity:1;transform:none}}
@keyframes parcel-arrive{0%{opacity:0;transform:translateY(16px) scale(.65) rotate(-12deg)}65%{opacity:1;transform:translateY(-4px) scale(1.06) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes leaves-unfold{from{opacity:0;transform:scaleX(.55) scaleY(.8)}to{opacity:1;transform:none}}
@keyframes seal-stamp{0%{opacity:0;transform:translate(5px,-12px) scale(1.65) rotate(-18deg)}55%{opacity:1;transform:scale(.88) rotate(5deg)}100%{opacity:1;transform:none}}
@keyframes spark-bloom{0%{opacity:0;transform:scale(0) rotate(-40deg)}70%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes receipt-title{0%{opacity:0;transform:translateY(9px) scale(.85) rotate(-3deg)}70%{opacity:1;transform:translateY(-2px) scale(1.04) rotate(-3deg)}100%{opacity:1;transform:rotate(-3deg)}}
@keyframes receipt-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes stamp-tile{from{opacity:0;transform:translateY(9px) scale(.8)}to{opacity:1;transform:none}}
@keyframes postal-confetti{0%{opacity:0;transform:translateY(-14px) rotate(var(--r))}15%{opacity:.85}100%{opacity:0;transform:translateY(165px) rotate(calc(var(--r) + 180deg))}}
@media(max-width:350px){.menu-sheet{padding:18px 17px 25px}.menu-hero{width:216px}#modal .success-title{font-size:30px}.menu-actions{grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}.menu-secondary{width:44px;height:46px;border-radius:15px}#modal .modal-primary{height:57px}#modal .level-grid{gap:11px 9px}#modal .level-grid button{font-size:21px}.receipt-route{margin-bottom:15px}}
body.reduce-motion #modal::backdrop{animation:none}
@media(prefers-reduced-motion:reduce){#modal::backdrop{animation:none}}