:root{--yellow: #ffd43b;--ink: #4a2a17;--ink-soft: #6b4426;--white: #ffffff;--cream: #fff4d6;--orange: #ff8a3d;--green: #8dc67a;--night: #18203d;--night-card: #26305a;--night-ink: #0b1024;--lamp: #ffc94a;--wood: #e2b07a;--wood-line: #c98d55;--wood-edge: #b9773f;--disabled: #efe6d6;--disabled-line: #8a6040;--danger: #a3291e;--top: max(56px, calc(env(safe-area-inset-top) + 8px) );--bottom: max(12px, env(safe-area-inset-bottom))}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#101528;color:var(--ink);font-family:Huninn,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit;cursor:pointer;padding:0}button:disabled{cursor:default}h1,h2,p{margin:0;font-weight:400}input{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}.app{position:relative;width:100%;max-width:430px;height:100%;height:100dvh;margin:0 auto;background:var(--yellow);display:flex;flex-direction:column;overflow:hidden}.screen{flex:1;min-height:0;display:flex;flex-direction:column}.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none}.pad{padding:var(--top) 16px 16px;display:flex;flex-direction:column;gap:12px}.body{flex:1;min-height:0;padding:14px 20px var(--bottom);display:flex;flex-direction:column;gap:10px}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.col{display:flex;flex-direction:column}.grow{flex:1;min-width:0}.nowrap{white-space:nowrap}.soft{color:var(--ink-soft)}.small{font-size:13px}.tabular{font-variant-numeric:tabular-nums}.center{text-align:center}.title{font-size:26px;line-height:1.2}.subtitle{font-size:14px;color:var(--ink-soft)}.card{background:var(--white);border:3px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:12px 14px}.card.flat{box-shadow:none}.card.cream{background:var(--cream)}.card.night{background:var(--night);color:#fff3d6}.btn{min-height:48px;padding:0 16px;border:3px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:4px 4px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;white-space:nowrap}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.btn.primary{background:var(--orange)}.btn.big{min-height:62px;font-size:21px;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}.btn.quiet{min-height:44px;border:2px dashed var(--disabled-line);background:transparent;box-shadow:none;color:var(--ink-soft);font-size:15px}.btn.small{min-height:44px;font-size:14px;border-width:2.5px;border-radius:12px;box-shadow:2px 2px 0 var(--ink);padding:0 10px}.btn.using{background:var(--green);box-shadow:none}.btn:disabled.locked{background:var(--disabled);border:2px solid var(--disabled-line);color:var(--ink-soft);box-shadow:none}.btn.dark{background:#000;color:#fff}.btn.danger{border-color:var(--danger);color:var(--danger);box-shadow:none}.round{width:48px;height:48px;flex:none;border:3px solid var(--ink);border-radius:50%;background:var(--white);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center}.pill{min-height:44px;padding:0 14px;border:3px solid var(--ink);border-radius:999px;background:var(--white);display:inline-flex;align-items:center;gap:6px;font-size:16px;white-space:nowrap}.tag{padding:2px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font-size:12px;white-space:nowrap}.sky{position:relative;flex:none;overflow:hidden}.sky-top{position:absolute;left:14px;right:14px;top:var(--top);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.counter{position:relative;flex:none;background:var(--wood);border-top:3px solid var(--ink)}.counter:before,.counter:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--wood-line)}.counter>*{z-index:1}.counter:before{top:34%}.counter:after{top:70%}.counter-edge{flex:none;height:16px;background:var(--wood-edge);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}.bubble{background:var(--white);border:3px solid var(--ink);border-radius:18px 18px 18px 6px;box-shadow:4px 4px 0 var(--night-ink);padding:10px 12px}.note{padding:4px 10px;background:var(--white);border:2.5px solid var(--ink);border-radius:14px;font-size:14px;white-space:nowrap}.hang-sign{position:absolute;left:50%;width:200px;margin-left:-100px;padding:12px 0 14px;background:var(--white);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--night-ink);transform:rotate(-3deg);display:flex;flex-direction:column;align-items:center;gap:2px}.stall-sign{display:flex;flex-direction:column;align-items:center}.stall-sign span{min-width:84px;max-width:120px;padding:6px 8px;border:2.5px solid var(--ink);border-radius:8px;font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{height:20px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);overflow:hidden}.bar>span{display:block;height:100%;background:var(--orange);border-right:3px solid var(--ink);transition:width .4s linear}.bar.thin{height:12px;border-width:2px}.bar.thin>span{border-right-width:2px}.nav{flex:none;background:var(--white);border-top:3px solid var(--ink);padding:8px 12px var(--bottom);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.nav button{min-height:56px;border:2.5px solid transparent;border-radius:16px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;color:var(--ink-soft);white-space:nowrap}.nav button[aria-current=page]{background:var(--yellow);border-color:var(--ink);color:var(--ink)}.seg{display:flex;padding:4px;gap:2px;border:3px solid var(--ink);border-radius:999px;background:var(--white)}.seg button{min-height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}.seg button[aria-selected=true]{background:var(--orange);border:2.5px solid var(--ink)}.book-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 10px;min-width:0;background:var(--white);border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);font:inherit;color:inherit;cursor:pointer}.book-tile.locked{background:var(--cream);border-color:#8a6040;box-shadow:none}.book-name{text-align:center;line-height:1.3}.portrait{position:relative;width:100%;aspect-ratio:1 / 1.05;overflow:hidden;border-radius:12px;background:var(--night);border:2.5px solid var(--ink);display:flex;align-items:flex-end;justify-content:center}.portrait.unknown-box{background:#f3e8d6;border:2.5px dashed #8A6040}.portrait>div{margin-bottom:-10px}.dialog.sheet{position:relative;align-items:stretch;text-align:left;gap:10px;max-height:100%;overflow-y:auto}.round.close{position:absolute;right:10px;top:10px;z-index:1;width:40px;height:40px;min-height:0;padding:0}.row .round.close,.row.between>.round.close{position:static;flex:none}.round.close svg{transform:rotate(45deg)}.stage{position:relative;height:190px;border-radius:16px;overflow:hidden;background:var(--night);border:3px solid var(--ink)}.stage.empty{background:#f3e8d6;border:3px dashed #8A6040;display:flex;align-items:center;justify-content:center}.qmark{font-size:72px;color:#8a6040;line-height:1}.twinkle{position:absolute;pointer-events:none}.stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:2.5px solid var(--ink);border-radius:14px;background:var(--cream)}.milestone{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border:2.5px dashed #8A6040;border-radius:14px;background:#f7eedf;color:#8a6040}.milestone.done{border:2.5px solid var(--ink);background:var(--lamp);color:var(--ink)}.goal{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border:3px solid var(--ink);border-radius:16px;background:var(--yellow)}.upgrade-box{background:var(--yellow);cursor:pointer}.tool-box{position:relative;width:100%;height:104px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;border:2.5px solid var(--ink);border-radius:16px;background:var(--cream);box-sizing:border-box}.tool-box.next{background:#ffe7a8;box-shadow:4px 4px 0 var(--ink)}.overlay.inner{position:absolute;border-radius:24px;padding:16px}.reveal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;overflow:hidden;background:radial-gradient(circle at 50% 38%,#34477e,#22305c 55%,#18203d);display:flex;align-items:center;justify-content:center;padding:24px 16px calc(16px + env(safe-area-inset-bottom))}.reveal.tier-super{background:radial-gradient(circle at 50% 38%,#7a6a40,#4f4632 55%,#18203d)}.rays{position:absolute;left:50%;top:40%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;background:repeating-conic-gradient(rgba(24,32,61,.55) 0deg 7deg,transparent 7deg 15deg);animation:spin 50s linear infinite}.reveal-body{position:relative;width:100%;max-width:360px;height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--white)}.reveal-title{font-size:30px;letter-spacing:3px;line-height:1.2;margin-top:8px;color:var(--cream)}.tier-super .reveal-title,.tier-super .reveal-name{color:var(--lamp)}.reveal-star{position:relative;width:260px;height:250px;flex:none;animation:star-in .5s cubic-bezier(.2,1.4,.4,1) both}.reveal-star .big-star{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.reveal-star .ring{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;border:3px dashed var(--lamp);border-radius:50%;opacity:.7}.reveal-guest{position:absolute;left:50%;bottom:10px;transform:translate(-50%)}.reveal-name{font-size:26px;line-height:1.2;color:var(--cream)}.reveal-line{position:relative;width:100%;padding:12px 14px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--night-ink);font-size:16px}.reveal-line:before{content:"";position:absolute;left:50%;top:-11px;width:16px;height:16px;margin-left:-8px;background:var(--white);border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:rotate(45deg)}.reveal-badge{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;text-align:left;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px}.reveal-btn{width:100%;margin-top:auto}.reveal-btn.gold{background:var(--yellow)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes star-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}.avatar{flex:none;border-radius:50%;border:2.5px solid var(--ink);background:var(--lamp);display:inline-flex;align-items:center;justify-content:center;line-height:1}.avatars{display:flex}.avatars .avatar+.avatar{margin-left:-8px}.legal{color:inherit;text-decoration:underline}.dot{position:absolute;right:-7px;top:-4px;width:11px;height:11px;border-radius:50%;background:#e8483a;border:2px solid var(--ink)}.banner{position:absolute;left:12px;right:12px;top:max(12px,calc(env(safe-area-inset-top) + 6px));z-index:20;min-height:52px;padding:10px 16px;text-align:left;font-size:16px;background:var(--white);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--night-ink);animation:drop .25s ease-out}@keyframes drop{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#0b102499;display:flex;align-items:center;justify-content:center;padding:24px}.dialog{width:100%;background:var(--white);border:3px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--night-ink);padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.dialog .btn{width:100%}.option{min-height:74px;width:100%;padding:10px 16px;text-align:left;border:3px solid var(--ink);border-radius:20px;background:var(--cream);display:flex;align-items:center;gap:12px}.option[aria-checked=true]{background:var(--white);box-shadow:4px 4px 0 var(--ink)}.radio{width:26px;height:26px;flex:none;border:3px solid var(--ink);border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center}.option[aria-checked=true] .radio:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange)}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{border:2.5px solid var(--ink);border-radius:16px;background:var(--white);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.tile.locked{border-style:dashed;border-color:var(--disabled-line);background:var(--cream);color:var(--ink-soft)}.line{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:2px dashed #e2d3c0}.line:last-child{border-bottom:none}.link-row{width:100%;min-height:48px;border:none;background:transparent;display:flex;align-items:center;justify-content:space-between;font-size:16px;text-align:left}.toast{position:absolute;left:50%;top:42%;z-index:5;transform:translate(-50%);padding:8px 16px;background:var(--lamp);border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--night-ink);font-size:18px;white-space:nowrap;animation:pop 2.6s ease-out forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,12px) scale(.9)}12%{opacity:1;transform:translate(-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-6px) scale(1)}to{opacity:0;transform:translate(-50%,-18px) scale(1)}}.steam{animation:steam 2.4s ease-in-out infinite}@keyframes steam{0%,to{opacity:.25;transform:translateY(3px)}50%{opacity:.6;transform:translateY(-3px)}}@media (prefers-reduced-motion: reduce){.toast,.steam,.reveal-star{animation-duration:.01s}.rays{animation:none}.bar>span{transition:none}}