:root{--ink:#101820;--dark:#0b141b;--muted:#718089;--line:#e2e6e3;--paper:#f7f8f3;--lime:#c0f768;--panel:#fff;--yellow:#f5d668;--red:#e57254;--shadow:0 18px 40px #22312612;color-scheme:light}
*{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;background:#e9eee9; -webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #4b8e26;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.app{min-height:100svh;max-width:510px;margin:auto;background:var(--paper);padding:calc(env(safe-area-inset-top) + 13px) 18px calc(env(safe-area-inset-bottom) + 97px);position:relative;overflow:hidden;box-shadow:0 0 46px #263c1e10}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;height:42px}.wordmark{font-size:15px;font-weight:1000;letter-spacing:-.6px;display:flex;align-items:center;gap:8px}.km{background:var(--dark);color:var(--lime);padding:7px 9px;border-radius:9px;transform:rotate(-5deg);font-size:13px;letter-spacing:-1px}.wordmark b{color:#5c7566;font-weight:1000}.iconbtn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;border-radius:13px;font-size:19px;color:#31483d}.section{display:none}.section.active{display:block;animation:slideup .3s both}@keyframes slideup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#75817a;font-weight:900}.main-title{font-size:31px;line-height:1.15;letter-spacing:-1.6px;font-weight:1000;margin:24px 0 15px}.main-title span{color:#819384}.result-panel{display:flex;align-items:center;gap:10px;margin:13px 0 13px;background:#fff;border:1px solid var(--line);padding:10px 13px;border-radius:15px}.match-mark{border-radius:8px;background:#ecf6e8;padding:7px 10px;color:#337947;font-size:13px;font-weight:950;white-space:nowrap}.result-panel strong{font-size:12px;font-weight:820}.result-panel small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.character-stage{height:clamp(310px,42svh,435px);background:#e5e9df;border-radius:27px;position:relative;overflow:hidden;border:1px solid #dce3db;isolation:isolate;transition:background .5s}.character-stage:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#8ca29138 1px,transparent 1px);background-size:17px 17px;mask-image:linear-gradient(black,transparent 84%);pointer-events:none}.character-stage:after{content:'';position:absolute;left:-30%;right:-30%;bottom:-55%;height:90%;border-radius:50%;background:#becab7;z-index:-1}.character-stage[data-phase="2"],.character-stage[data-phase="3"]{background:#deebd8}.character-stage[data-phase="4"],.character-stage[data-phase="5"]{background:#e8f7cf}.stage-top{display:flex;align-items:center;justify-content:space-between;position:absolute;top:15px;left:16px;right:16px;z-index:3}.stage-state{background:#fff9;border:1px solid #fff;backdrop-filter:blur(14px);border-radius:100px;padding:9px 12px;font-size:11px;font-weight:900}.stage-tap{font-size:10px;color:#667b6a;font-weight:700}.character-btn{background:transparent;border:0;position:absolute;inset:38px 0 20px;display:grid;place-items:center;width:100%;padding:0;overflow:hidden;touch-action:manipulation}.hero{position:relative;z-index:2;width:min(95%,385px);height:96%;object-fit:contain;overflow:visible;filter:grayscale(.55) drop-shadow(0 13px 10px #34443a27);transform:translateY(30px) rotate(6deg) scale(.87);transform-origin:50% 65%;transition:transform .85s cubic-bezier(.2,1.3,.26,1), filter .8s}.stage[data-phase="0"] .hero{animation:sigh 3.8s ease-in-out infinite}.character-stage[data-phase="0"] .hero{animation:sigh 3.8s ease-in-out infinite}.character-stage[data-phase="1"] .hero{transform:translateY(19px) rotate(3deg) scale(.92);filter:grayscale(.27) drop-shadow(0 13px 10px #34443a27)}.character-stage[data-phase="2"] .hero{transform:translateY(14px) rotate(0) scale(.94);filter:grayscale(0) drop-shadow(0 13px 10px #34443a27)}.character-stage[data-phase="3"] .hero{transform:translateY(4px) rotate(-2deg) scale(1);filter:drop-shadow(0 18px 12px #34443a35)}.character-stage[data-phase="4"] .hero{transform:translateY(0) rotate(0) scale(1.03);filter:drop-shadow(0 18px 12px #34443a35);animation:bob 1.3s ease-in-out infinite alternate}.character-stage[data-phase="5"] .hero{transform:translateY(-10px) rotate(0) scale(1.07);filter:drop-shadow(0 18px 12px #34443a35);animation:power 650ms ease-in-out infinite alternate}@keyframes sigh{50%{transform:translateY(35px) rotate(7deg) scale(.86)}}@keyframes bob{to{transform:translateY(-8px) rotate(2deg) scale(1.05)}}@keyframes power{to{transform:translateY(-21px) rotate(3deg) scale(1.11)}}.hero .face-happy,.hero .face-shock{opacity:0}.character-stage[data-phase="3"] .hero .face-idle,.character-stage[data-phase="4"] .hero .face-idle,.character-stage[data-phase="5"] .hero .face-idle{opacity:0}.character-stage[data-phase="3"] .hero .face-happy,.character-stage[data-phase="4"] .hero .face-happy,.character-stage[data-phase="5"] .hero .face-happy{opacity:1}.character-stage[data-phase="0"] .arm.left{transform:rotate(11deg)}.character-stage[data-phase="0"] .arm.right{transform:rotate(-11deg)}.character-stage[data-phase="5"] .arm.left{animation:armL .55s infinite alternate}.character-stage[data-phase="5"] .arm.right{animation:armR .55s infinite alternate}@keyframes armL{to{transform:rotate(15deg) translateY(-4px)}}@keyframes armR{to{transform:rotate(-15deg) translateY(-4px)}}.stage-quote{position:absolute;z-index:4;bottom:14px;left:15px;right:15px;text-align:center;padding:12px 13px;background:#ffffffeb;border:1px solid #ffffff;border-radius:13px;font-size:12px;font-weight:850;box-shadow:0 6px 15px #2c392112;pointer-events:none}.stage-nudge{position:absolute;z-index:6;left:50%;top:35%;font-size:17px;font-weight:1000;white-space:nowrap;pointer-events:none;animation:float 950ms ease-out forwards;color:#36613c;text-shadow:0 2px #fff}@keyframes float{0%{opacity:0;transform:translate(-50%,22px) scale(.75)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-72px) scale(1.25)}}.stage-burst{animation:stageburst .35s ease-out}@keyframes stageburst{50%{filter:brightness(1.13)}}.meter-panel{background:#fff;border:1px solid var(--line);padding:14px 15px 15px;border-radius:20px;margin-top:13px;box-shadow:var(--shadow)}.meter-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.meter-top strong{font-size:12px}.meter-top span{font-size:11px;font-weight:950;font-variant-numeric:tabular-nums}.meter-track{height:10px;background:#edf0ea;border-radius:100px;margin-top:11px;overflow:hidden}.meter-fill{width:0;background:linear-gradient(90deg,#a4ce77,#a7ed4e);height:100%;border-radius:100px;transition:width .7s cubic-bezier(.16,1,.3,1)}.meter-foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#738177;margin:9px 1px 0}.big-button{width:100%;border:0;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:950;font-size:16px;min-height:62px;border-radius:17px;background:var(--dark);color:#fff;padding:12px 17px;box-shadow:0 6px 0 #849587;transition:transform .12s,box-shadow .12s;margin-top:17px}.big-button:active{transform:translateY(5px);box-shadow:0 1px 0 #849587}.big-button .chev{background:var(--lime);color:#183019;border-radius:11px;padding:7px 10px;font-size:17px}.under-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:16px 2px 0}.textbtn{border:0;background:none;color:#425b48;font-size:12px;font-weight:850;padding:6px 0}.subtle{font-size:11px;color:var(--muted);line-height:1.7}.row-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.mini-card{border:1px solid #e1e6dc;background:#fff;border-radius:15px;text-align:left;padding:14px;min-height:99px}.mini-card .emoji{font-size:22px;margin-bottom:8px}.mini-card strong{display:block;font-size:12px;margin-bottom:3px}.mini-card small{font-size:10px;color:var(--muted)}.section-title{font-size:24px;letter-spacing:-1.1px;margin:25px 0 6px;font-weight:950}.section-intro{font-size:12px;color:var(--muted);margin:0 0 24px;line-height:1.6}.log-entry{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid #e4e7e1;padding:16px 3px}.log-dot{width:33px;height:33px;border-radius:11px;display:grid;place-items:center;background:#e8f5d8;font-size:16px;flex:none}.log-entry strong{font-size:13px;display:block}.log-entry small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.log-entry .pts{margin-left:auto;font-size:12px;font-weight:950;color:#477a2f;white-space:nowrap}.empty{background:#fff;border:1px solid #e3e7de;border-radius:17px;padding:22px;text-align:center;color:#738077;font-size:12px;line-height:1.8;margin-top:15px}.setting-card{border-radius:16px;background:#fff;border:1px solid var(--line);padding:14px 15px;margin:11px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-card strong{display:block;font-size:13px}.setting-card small{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:3px}.secondary{border-radius:10px;background:#ecf0eb;border:1px solid #dde5da;padding:9px 12px;color:#28372d;font-size:12px;font-weight:900}.danger{color:#9d4533}.copyright{font-size:10px;color:#91a095;text-align:center;margin-top:26px}.tabbar{position:fixed;bottom:0;left:50%;width:min(510px,100%);transform:translateX(-50%);z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-top:1px solid #e0e6df;background:#ffffffed;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:9px 15px calc(env(safe-area-inset-bottom) + 8px)}.tab{border:0;background:transparent;border-radius:10px;display:grid;place-items:center;gap:2px;padding:7px 4px;color:#88948b;font-size:10px;font-weight:850}.tab b{font-size:20px;line-height:1.3;font-weight:700}.tab.on{color:#193022;background:#e9f6df}.veil{position:fixed;z-index:30;inset:0;background:#07140b9b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding:0 10px calc(env(safe-area-inset-bottom) + 10px)}.veil.on{display:flex;animation:fadein .17s both}@keyframes fadein{from{opacity:0}to{opacity:1}}.sheet{width:min(100%,495px);max-height:min(86svh,850px);overflow-y:auto;background:var(--paper);border-radius:25px;padding:20px 19px 22px;box-shadow:0 26px 60px #07140b45;animation:sheetup .33s cubic-bezier(.22,1,.28,1) both}@keyframes sheetup{from{transform:translateY(55px);opacity:.4}}.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.sheet-title{font-size:22px;letter-spacing:-.75px;margin:12px 0 9px;font-weight:950}.sheet-explain{font-size:12px;color:#65766c;line-height:1.8;margin:0}.category-strip{display:flex;gap:7px;overflow:auto;margin:17px 0 12px}.chip{border-radius:100px;padding:10px 15px;background:#fff;border:1px solid var(--line);color:#44564a;font-size:12px;font-weight:900;white-space:nowrap}.chip.selected{background:#20392a;color:#fff;border-color:#20392a}.mission-card{background:#fff;border:1px solid #dce4d9;border-radius:20px;padding:20px 17px;min-height:178px;margin-top:13px}.mission-tag{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:950;color:#66835b;letter-spacing:1px}.mission-icon{font-size:31px;margin:16px 0 10px;display:block}.mission-name{font-size:24px;letter-spacing:-.65px;font-weight:1000;line-height:1.3;margin:0 0 8px}.mission-desc{font-size:12px;line-height:1.7;color:#64746b;margin:0}.button-group{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.action-primary{border:0;background:#10251a;color:#fff;font-size:15px;font-weight:950;border-radius:14px;min-height:55px;padding:12px 17px}.action-secondary{border:1px solid #dde5d9;background:#fff;color:#34483a;font-size:12px;font-weight:900;border-radius:14px;min-height:55px;padding:12px}.action-primary:active,.action-secondary:active{transform:scale(.98)}.timer-box{text-align:center;padding:20px 0 10px}.timer-ring{position:relative;width:190px;height:190px;margin:0 auto;display:grid;place-items:center}.timer-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.timer-ring .track{stroke:#e2e9dd;stroke-width:9;fill:none}.timer-ring .progress{stroke:#6faa49;stroke-width:9;fill:none;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.timer-numbers{font-size:49px;font-weight:1000;font-variant-numeric:tabular-nums;letter-spacing:-2px}.timer-name{font-size:16px;font-weight:950;margin:10px 0 4px}.timer-controls{display:flex;gap:8px;margin-top:20px}.timer-controls button{flex:1}.finish-panel{text-align:center;padding:25px 10px 8px}.finish-panel h2{font-size:30px;letter-spacing:-1px;margin:12px 0 8px}.finish-panel p{font-size:13px;line-height:1.8;color:#687b6a;margin:0}.custom-form{display:flex;gap:8px;margin-top:14px}.custom-form input{width:100%;min-width:0;border:1px solid #d5dfd2;border-radius:13px;padding:13px;background:#fff;font-size:16px}.custom-form .action-primary{min-width:69px;font-size:13px}.toast{position:fixed;z-index:60;bottom:calc(env(safe-area-inset-bottom) + 86px);left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);border-radius:15px;background:#183322;color:white;padding:12px 17px;font-size:12px;font-weight:900;box-shadow:0 10px 30px #14301a55;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}.toast.on{opacity:1}.confetti{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-6vh;width:8px;height:18px;border-radius:2px;animation:fall var(--t) linear forwards;left:var(--x);background:var(--c);transform:rotate(var(--r))}@keyframes fall{to{transform:translate(var(--dx),112svh) rotate(850deg);opacity:.35}}.hidden{display:none!important}body.modal-open{overflow:hidden}@media(min-width:510px){.app{border:1px solid #d3ddd0;min-height:100svh}}@media(max-height:720px){.main-title{margin:14px 0 9px;font-size:28px}.result-panel{margin:9px 0}.character-stage{height:clamp(260px,40svh,335px)}.meter-panel{margin-top:10px;padding:10px 13px}.big-button{margin-top:12px}.under-actions{margin-top:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* Compact phones: keep the primary action reachable above the bottom bar. */
@media(max-height:720px){
  .app{padding-top:calc(env(safe-area-inset-top) + 7px)}
  .main-title{margin:10px 0 8px;font-size:27px}
  .character-stage{height:clamp(210px,32svh,245px)}
  .stage-top{top:10px}
  .character-btn{inset:14px 0 24px}
  .character-stage[data-phase="0"] .hero{animation:compactSigh 4s ease-in-out infinite}
  .stage-quote{bottom:10px;padding:8px 9px}
  .meter-panel{padding:10px 12px 11px}
  .big-button{min-height:54px;margin-top:9px}
  .under-actions{margin-top:8px}
}
@keyframes compactSigh{0%,100%{transform:translateY(5px) rotate(5deg) scale(.76)}50%{transform:translateY(9px) rotate(7deg) scale(.75)}}
/* SVG should fit the stage's *height*, not overflow based on intrinsic width. */
.character-btn{display:flex;align-items:center;justify-content:center}
#heroSvg{display:block;flex:0 0 auto;width:auto;height:100%;max-width:95%;max-height:100%}

.hero .face-tired{opacity:0;transition:opacity .2s}.character-stage[data-phase="0"] .face-tired{opacity:1}.character-stage[data-phase="0"] .face-idle{opacity:0}
.character-stage[data-phase="0"] .arm.left{transform:rotate(37deg) translateY(8px)}.character-stage[data-phase="0"] .arm.right{transform:rotate(-37deg) translateY(8px)}
.character-stage[data-phase="0"] .arm.left{transform:rotate(9deg)}.character-stage[data-phase="0"] .arm.right{transform:rotate(-9deg)}