:root{color:#2d2d2d;background:#e6dfd4;color-scheme:only light;font-family:Noto Sans SC,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:3px solid #2d2d2d;outline-offset:2px}#app{display:flex;height:100%;align-items:stretch;justify-content:center;padding:12px;box-sizing:border-box}html,body,#app{height:100%}#app:has(.stage[data-layout=port]){padding:6px}.switcher{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(1080px,100%)}.switcher button{border:3px solid #2d2d2d;background:#fff;color:#2d2d2d;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}.switcher button[aria-pressed=true]{background:#ffbc0d;color:#000}.stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#ffe7a3;border:4px solid #2d2d2d;border-radius:28px;box-shadow:0 10px #2d2d2d14}html,body,button,input{color-scheme:only light}.stage[data-layout=port] .slot-wrap small{font-size:10px;margin-top:2px}.stage[data-layout=port] .dock{padding:6px 8px 8px;gap:6px}.stage[data-layout=port] .relic-open{min-width:56px;min-height:40px;font-size:12px;padding:0 6px}.topbar{display:flex;align-items:center;gap:8px;padding:10px 12px 0;z-index:3}.topbar .spacer{flex:1}#wave{font-family:Fredoka,Noto Sans SC,sans-serif;font-size:18px;white-space:nowrap;flex:0 0 auto}.round{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:3px solid #2d2d2d;background:#fff}.round svg{width:20px;height:20px}.speed{min-width:44px;height:40px;padding:0 8px;border-radius:999px;border:3px solid #2d2d2d;background:#fff;font-family:Fredoka,Noto Sans SC,sans-serif;font-size:16px;font-weight:700}.speed.fast{background:#ffbc0d}.hp,.gold{display:flex;align-items:center;gap:6px;font-family:Fredoka,Noto Sans SC,sans-serif;font-weight:700}.hp svg{width:22px;height:22px}.hp b{font-family:Fredoka,Noto Sans SC,sans-serif;font-size:16px;color:#000;min-width:4.5em}.hp-track{position:relative;width:92px;height:16px;border-radius:999px;border:3px solid #2d2d2d;background:#fff;overflow:hidden}.hp-fill{height:100%;width:100%;background:#db0007}.coin{width:22px;height:22px;border-radius:50%;border:2px solid #2d2d2d;background:radial-gradient(circle at 35% 35%,#ffe7a3,#ffbc0d 62%,#e2a400)}.gold b{font-weight:700}.body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.field{position:relative;flex:1;min-height:0;background:#ffe7a3;touch-action:none}.joy{touch-action:none;opacity:.72}.joy.dragging{opacity:1}#arena{width:100%;height:100%;display:block}.slots,.shop-slots{display:flex;justify-content:center;gap:8px;width:100%}.slot-wrap{width:68px;text-align:center}.slot-wrap small{display:block;margin-top:4px;font-size:14px;line-height:1.2}.block,.actor,.drop,.joy{position:absolute;transform:translate(-50%,-50%)}.block{background:#c4a574;border:3px solid #2d2d2d;border-radius:16px}.actor{border:3px solid #2d2d2d}.player,.walker,.elite{border-radius:50%}.player{width:50px;height:50px;background:#fff}.tuft{position:absolute;top:-11px;left:50%;width:26px;height:16px;transform:translate(-50%);background:#db0007;border:3px solid #2d2d2d;border-radius:14px 14px 5px 5px}.eyes{position:absolute;left:0;right:0;top:16px;height:10px}.player .eyes{background:radial-gradient(circle at 16px 5px,#2d2d2d 3px,transparent 3.5px),radial-gradient(circle at 34px 5px,#2d2d2d 3px,transparent 3.5px)}.walker,.elite{background:#db0007}.walker{width:38px;height:38px}.elite{width:50px;height:50px;border-color:#ffbc0d;border-width:4px}.walker .eyes,.elite .eyes,.boss .eyes,.turret .eyes{top:12px;background:radial-gradient(circle at 30% 50%,#fff 5px,transparent 5.5px),radial-gradient(circle at 70% 50%,#fff 5px,transparent 5.5px),radial-gradient(circle at 30% 55%,#2d2d2d 2.2px,transparent 2.8px),radial-gradient(circle at 70% 55%,#2d2d2d 2.2px,transparent 2.8px)}.turret{width:36px;height:36px;border-radius:10px;background:#db0007}.turret:before{content:"";position:absolute;top:-12px;left:50%;width:3px;height:12px;background:#2d2d2d;transform:translate(-50%)}.boss{width:76px;height:48px;border-radius:999px;background:#db0007}.drop{width:18px;height:18px}.drop.coin{border-radius:50%;border:2px solid #2d2d2d;background:#ffbc0d}.drop.heal{border-radius:50%;border:2px solid #2d2d2d;background:linear-gradient(#db0007,#db0007) center / 8px 2px no-repeat,linear-gradient(#db0007,#db0007) center / 2px 8px no-repeat,#fff}.drop.shield{border-radius:4px;border:2px solid #2d2d2d;background:#fff;box-shadow:inset 0 0 0 3px #ffbc0d}.joy{left:18px;bottom:16px;top:auto;width:148px;height:148px;border-radius:50%;border:4px solid #2d2d2d;background:#ffbc0d8c;transform:none;z-index:2}.joy span{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;border:3px solid #2d2d2d;background:#2d2d2d;transform:translate(-50%,-50%)}.stage[data-layout=port] .joy{width:168px;height:168px;left:10px;bottom:18px}.stage[data-layout=port] .joy span{width:74px;height:74px}.stage[data-layout=port] .slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.stage[data-layout=port] .slot-wrap{width:auto}.stage[data-layout=port] .slot{width:100%;height:44px;flex-basis:auto}.stage[data-layout=port] .topbar{gap:2px;padding:6px 2px 0}.stage[data-layout=port] .topbar>*{flex-shrink:0}.stage[data-layout=port] .topbar .spacer{flex:1;flex-shrink:1;min-width:0}.stage[data-layout=port] .round{width:40px;height:40px}.stage[data-layout=port] .round svg{width:18px;height:18px}.stage[data-layout=port] .speed{height:40px;min-width:40px;font-size:13px;padding:0 6px}.stage[data-layout=port] .hp-track{width:32px;height:14px}.stage[data-layout=port] .gold{font-size:12px}.stage[data-layout=port] .hp b{min-width:0;font-size:12px}.stage[data-layout=port] #wave{font-size:13px}.dock{display:none}.slot{width:68px;height:68px;flex:0 0 68px;border:3px solid #2d2d2d;border-radius:14px;background:#fff;padding:4px;position:relative}.slot img{width:100%;height:100%;object-fit:contain}.slot.empty{border-style:dashed;background:#f7f7f7}.slot .mark{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;border:2px solid #2d2d2d;background:#ffbc0d;color:#000;font-family:Fredoka,sans-serif;font-size:11px;font-weight:700;line-height:14px}.shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:12px;min-height:0}#modal{max-height:100%;width:min(760px,100%);min-height:0;display:flex;justify-content:center}.stage[data-screen=battle] .shade{display:none}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;border:0;background:#2d2d2d66}.panel{position:relative;z-index:1;background:#fff;border:4px solid #2d2d2d;border-radius:24px;box-shadow:0 8px #ffbc0d47}.skill{width:min(540px,100%);display:grid;grid-template-columns:132px 1fr;grid-template-areas:"photo head" "photo effect" "price quote" "ok cancel";gap:8px 14px;padding:16px;align-items:center}.skill .photo{grid-area:photo;width:132px;height:110px;object-fit:contain}.skill-head{grid-area:head}.skill .effect{grid-area:effect}.skill .price{grid-area:price}.skill .quote{grid-area:quote}.skill .ok{grid-area:ok}.skill .cancel{grid-area:cancel}.skill-head{display:flex;align-items:center;gap:8px}.skill h2,.sheet h2,.manual h2,.settings h2{margin:0;font-family:Fredoka,Noto Sans SC,sans-serif;font-size:28px}.skill p,.product p,.row p{margin:6px 0 0;font-size:16px;line-height:1.4}.tag{display:inline-flex;align-items:center;border-radius:999px;border:2px solid #2d2d2d;padding:1px 8px;font-size:13px;font-weight:700}.tag.orb{background:#db0007;color:#fff}.tag.spell{background:#ffbc0d;color:#000}.tag.tank{background:#2d2d2d;color:#fff}.tag.cast{background:#fff;color:#2d2d2d}.tag.ring{background:#ffbc0d;color:#2d2d2d}.tag.talent{background:#2d2d2d;color:#fff}.tabs button[aria-pressed=true].cast{background:#db0007;color:#fff}.tabs button[aria-pressed=true].ring{background:#ffbc0d;color:#2d2d2d}.tabs button[aria-pressed=true].talent{background:#2d2d2d;color:#fff}.kind-head{margin:14px 0 6px;font-size:16px}.price{margin:0;color:#db0007;font-family:Fredoka,sans-serif;font-size:28px;font-weight:700}.quote{margin:0;color:#2d2d2d;font-size:14px}.btn{min-height:44px;border-radius:999px;border:3px solid #2d2d2d;padding:8px 16px;font-weight:700}.btn.gold{background:#ffbc0d;color:#000}.btn.white{background:#fff;color:#2d2d2d}.btn:active{transform:translateY(1px)}.btn:disabled{background:#f7f7f7;color:#9a9a9a;cursor:default}.skill .btn:first-of-type{grid-column:1}.skill .btn:last-of-type{grid-column:2}.sheet,.manual{width:100%;max-height:100%;overflow:auto;padding:12px}.meals{display:flex;flex-direction:column;height:100%;overflow:hidden;box-sizing:border-box}#modal:has(.meals){height:100%;align-items:stretch}.goods{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}.stage[data-layout=port] .goods{grid-template-columns:1fr;gap:8px}.product{display:flex;flex-direction:column;border:3px solid #2d2d2d;border-radius:16px;padding:6px 6px 8px;text-align:center;background:#fff;min-width:0}.product img{width:100%;height:72px;object-fit:contain}.stage[data-layout=port] .shop-note{display:none}.stage[data-layout=port] .product{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img copy" "img buy";text-align:left;align-items:center;gap:4px 8px;padding:8px}.stage[data-layout=port] .product img{grid-area:img;width:56px;height:56px}.stage[data-layout=port] .product-copy{grid-area:copy;min-width:0}.stage[data-layout=port] .product-buy{grid-area:buy;display:flex;align-items:center;justify-content:space-between;gap:8px}.stage[data-layout=port] .product p{max-height:none;font-size:12px}.stage[data-layout=port] .product .price{margin:0;font-size:16px}.stage[data-layout=port] .product .btn{width:auto;min-height:40px;margin:0;padding:4px 12px}.meal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;min-height:0}.meal-hold{display:none;margin:0 0 6px;text-align:center;font-size:13px}.stage[data-layout=port] #modal:has(.meals){height:auto}.stage[data-layout=port] .meals{height:auto;overflow:visible}.stage[data-layout=port] .meal-hold{display:block}.stage[data-layout=port] .meals h2{font-size:22px;margin-bottom:4px}.stage[data-layout=port] .meal-grid{display:grid;grid-template-columns:1fr;gap:8px;flex:none;overflow:visible}.stage[data-layout=port] .meal-card{height:auto;overflow:visible;padding:6px 8px}.stage[data-layout=port] .meal-card header{margin-bottom:4px}.stage[data-layout=port] .meal-photo{width:44px;height:34px}.stage[data-layout=port] .meal-items{flex-direction:row;align-items:center;gap:8px;margin:2px 0 6px}.stage[data-layout=port] .meal-items div{display:none}.stage[data-layout=port] .meal-items img{width:52px;height:52px;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.stage[data-layout=port] .meal-card .btn{margin-top:0;min-height:40px}.meal-card{display:flex;flex-direction:column;min-height:0;border:3px solid #ffbc0d;border-radius:16px;padding:8px;background:#fff8e8;text-align:left}.meal-card header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.meal-photo{width:52px;height:40px;object-fit:contain;flex:none}.meal-card strong{display:block;font-size:15px;line-height:1.2}.meal-card .price{font-size:16px}.meal-items{display:flex;flex-direction:column;gap:6px;list-style:none;margin:6px 0;padding:0;text-align:left}.meal-items li{display:flex;flex-direction:row;align-items:flex-start;gap:6px;min-width:0}.meal-items img{width:36px;height:36px;object-fit:contain;flex:none;background:#fff;border:2px solid #2d2d2d;border-radius:8px}.meal-items div{min-width:0}.meal-items b{display:block;font-size:13px;line-height:1.2}.meal-items em{display:inline-block;margin-top:2px;padding:0 6px;border-radius:999px;background:#fff;border:2px solid #2d2d2d;font-style:normal;font-size:11px;font-weight:700;line-height:16px}.meal-items p{display:block;margin:2px 0 0;font-size:12px;line-height:1.35}.meal-card .btn{width:100%;margin-top:auto;min-height:40px;padding:4px 8px}.hold-tip{position:fixed;z-index:50;width:min(240px,calc(100vw - 16px));padding:8px 10px;background:#fff;color:#2d2d2d;border:3px solid #2d2d2d;border-radius:14px;box-shadow:0 6px #2d2d2d1f;pointer-events:none}.hold-tip[hidden]{display:none}.hold-tip b{display:block;font-size:14px;line-height:1.2}.hold-tip em{display:inline-block;margin-top:4px;padding:0 6px;border-radius:999px;border:2px solid #2d2d2d;background:#fff8e8;font-style:normal;font-size:11px;font-weight:700;line-height:16px}.hold-tip p{margin:4px 0 0;font-size:13px;line-height:1.35}.product strong{display:block;font-size:15px}.product p{margin:4px 0 0;font-size:13px;line-height:1.35;max-height:2.7em;overflow:hidden}.product .price{font-size:22px}.product .btn{width:100%;margin-top:4px;min-height:36px}.shop-sheet{display:flex;flex-direction:column;width:min(760px,100%);height:100%;max-height:100%;overflow:hidden}#modal:has(.shop-sheet){height:100%;max-height:100%}.shop-body{min-height:0;overflow:auto}.shop-actions{position:static;flex:none;z-index:2;display:flex;justify-content:center;gap:8px;margin:0;padding:8px 0 0;background:#fff}.shop-actions .btn{flex:1;min-width:0}.shop-slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:10px}.shop-slots .slot{width:100%;height:52px;flex-basis:auto;border-radius:12px}.stage[data-layout=port] .shop-slots{grid-template-columns:repeat(4,minmax(0,1fr))}.stage[data-layout=port] .shop-slots .slot{height:56px}.stage[data-layout=port] .relic{grid-template-columns:44px minmax(0,1fr)}.stage[data-layout=port] .relic .btn{grid-column:1 / -1;width:100%}.shop-slots small{display:block;margin-top:4px;text-align:center;font-size:12px;line-height:1.2}.dock .slots{width:auto;flex:1}.relic-open{flex:none;min-width:72px;min-height:48px;border-radius:14px;border:3px solid #2d2d2d;background:#2d2d2d;color:#fff;font-weight:700}.relic-shop{margin-top:10px}.relic-shop h3{margin:0 0 6px;font-size:16px}.relic-list{display:flex;flex-direction:column;gap:8px}.relic{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-top:2px solid #f3f3f3}.relic img{width:52px;height:44px;object-fit:contain}.relic p{margin:0;font-size:13px;line-height:1.3}.relic .btn{min-height:36px}.stage[data-screen=shop] .dock,.stage[data-screen=meal] .dock{visibility:hidden}.branch{width:min(560px,100%);padding:16px}.branch h2{text-align:center}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.choice{border:3px solid #2d2d2d;border-radius:18px;padding:12px;text-align:center;background:#fff}.choice img{width:88px;height:72px;object-fit:contain}.choice .btn{width:100%;margin-top:8px}.manual{width:min(560px,100%);max-height:100%;overflow:auto;padding:14px}.tabs{display:flex;gap:8px;margin:10px 0}.tabs button{flex:1;min-height:40px;border-radius:999px;border:3px solid #2d2d2d;background:#fff;font-weight:700}.tabs button[aria-pressed=true].orb{background:#db0007;color:#fff}.tabs button[aria-pressed=true].tank{background:#2d2d2d;color:#fff}.tabs button[aria-pressed=true].spell{background:#ffbc0d;color:#000}.row{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:2px solid #f7f7f7}.row img{width:64px;height:52px;object-fit:contain}.settings{width:min(340px,100%);padding:16px 18px 18px}.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font-size:18px;font-weight:700}.switch{position:relative;width:52px;height:30px}.switch input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;margin:0}.switch i{display:block;height:30px;border-radius:999px;border:3px solid #2d2d2d;background:#fff}.switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;border:2px solid #2d2d2d;background:#fff}.switch input:checked+i{background:#ffbc0d}.switch input:checked+i:after{left:25px}.settings .btn{width:100%;margin-top:6px}.pause-sheet{width:min(640px,100%);max-height:100%;overflow:auto;padding:12px}.pause-sheet h2{text-align:center}.pause-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;position:sticky;bottom:0;background:#fff;padding-top:8px}.pause-row .btn{flex:1 1 96px;min-height:42px;min-width:0}.stage[data-layout=port] .pause-sheet .slot{height:52px}.bag-slots,.pending-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:8px 0}.stage[data-layout=land] .bag-slots{grid-template-columns:repeat(8,minmax(0,1fr))}.bag .btn.gold{width:100%;margin-top:8px}.stage[data-layout=port] .skill{grid-template-columns:96px 1fr}.stage[data-layout=port] .skill .photo{width:96px;height:84px}.stage[data-layout=port] .pair{grid-template-columns:1fr}@media(max-height:520px){#app{padding:0}.stage{border:0;border-radius:0;box-shadow:none}.topbar{gap:4px;padding:4px 8px 0}.round{width:32px;height:32px}.round svg{width:16px;height:16px}.hp-track{width:72px}.hp b,#wave{font-size:14px}.dock{padding:4px 8px 6px}.slot,.slot-wrap{width:46px}.slot{height:46px;flex-basis:46px}.joy{width:120px;height:120px;bottom:8px}.joy span{width:52px;height:52px}.shade{padding:4px}.meal-photo{width:36px;height:28px}.meal-card header{margin-bottom:2px}.meal-items{gap:2px;margin:2px 0 4px}.meal-items p{font-size:11px;line-height:1.25}.meal-items img{width:24px;height:24px}.meal-items b{font-size:12px}.meal-card{padding:4px 6px}.meal-card strong{font-size:13px}.meal-card .price{font-size:14px}.meal-card .btn{min-height:28px;padding:2px 8px;font-size:13px}.meals h2,.sheet h2{font-size:16px;margin:0 0 4px}.sheet.meals,.meals{padding:6px 8px}.relic-open{min-height:36px;min-width:58px;font-size:13px}.sheet{padding:8px}.sheet h2{font-size:20px;margin-bottom:4px}.goods{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-note{display:none}.product img{height:44px}.product .btn{min-height:32px}}.stage[data-screen=cover] .topbar,.stage[data-screen=cover] .joy{visibility:hidden}.cover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:center;overflow:hidden;background:#ffe7a3}.cover[hidden]{display:none}.cover:before,.cover:after{content:"";position:absolute;left:0;right:0;height:16px;transform-origin:left center;animation:cover-wipe .42s cubic-bezier(.2,.7,.2,1) both}.cover:before{top:0;background:#db0007}.cover:after{bottom:0;background:#ffbc0d;transform-origin:right center;animation-delay:.12s}.cover-slide{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(520px,100%);padding:28px 16px 36px;text-align:center}.cover-kicker{margin:0;padding:4px 14px;border:3px solid #2d2d2d;border-radius:999px;background:#fff;font-weight:700;letter-spacing:.18em}.cover h1{margin:0;font-family:Fredoka,Noto Sans SC,sans-serif;font-size:clamp(48px,9vw,88px);line-height:1;color:#db0007;text-shadow:5px 5px 0 #ffbc0d}.cover-line{margin:0;font-size:18px;font-weight:700}.cover-foods{display:flex;gap:16px;margin-top:6px;animation:none}.cover-foods img{width:92px;height:92px;object-fit:contain;background:#fff;border:3px solid #2d2d2d;border-radius:24px;padding:8px;box-shadow:0 6px #2d2d2d}.cover [data-start]{min-width:196px;min-height:52px;margin-top:10px;font-size:20px}.cover-slide>*{animation:cover-in .48s cubic-bezier(.16,.84,.32,1) both}.cover-kicker{animation-delay:.18s}.cover h1{animation-delay:.34s}.cover-line{animation-delay:.5s}.cover-foods img{animation:cover-pop .5s cubic-bezier(.16,.84,.32,1) both}.cover-foods img:nth-child(1){animation-delay:.66s}.cover-foods img:nth-child(2){animation-delay:.8s}.cover-foods img:nth-child(3){animation-delay:.94s}.cover [data-start]{animation-delay:1.12s}@keyframes cover-wipe{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes cover-in{0%{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes cover-pop{0%{opacity:0;transform:translateY(30px) scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}.stage[data-layout=port] .cover h1{font-size:52px;text-shadow:4px 4px 0 #ffbc0d}.stage[data-layout=port] .cover-foods img{width:76px;height:76px}.stage[data-layout=port] .cover-slide{gap:10px;padding-top:36px}@media(max-height:520px){.cover:before,.cover:after{height:8px}.cover h1{font-size:40px}.cover-line{font-size:14px}.cover-foods img{width:52px;height:52px;border-radius:16px;padding:4px;box-shadow:0 3px #2d2d2d}.cover-slide{gap:6px;padding:12px}.cover [data-start]{min-height:40px;margin-top:2px;font-size:16px}}@media(prefers-reduced-motion:reduce){.cover:before,.cover:after,.cover-slide>*,.cover-foods img{animation:none}}