/* インスタント魔王 / INSTANT MAOU / style.css / v0.1.3 */
/* Layout and gesture additions are at the end of this file. */
:root{--ink:#15392f;--green:#07594c;--cream:#fff8e7;--orange:#ed542f;--yellow:#ffdc53}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;background:#e9ebdf;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}body{padding:max(8px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));overscroll-behavior:none}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}button:disabled{opacity:.45;cursor:default}#app{max-width:460px;margin:auto}.masthead{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.masthead a{font-size:15px;font-weight:950;letter-spacing:-.5px;color:var(--green);text-decoration:none}.masthead a b{color:var(--orange)}.masthead a span{font-size:8px;display:block;letter-spacing:3px;margin-top:2px}.sound{border:1px solid #9eafa0;background:transparent;color:var(--green);font-size:10px;border-radius:20px;min-height:34px;min-width:60px}.arena{position:relative;overflow:hidden;border:2px solid var(--ink);border-radius:18px;background:#d1d9be;height:clamp(455px,calc(100dvh - 136px),720px);box-shadow:0 7px 0 #bec7b5}#scene{width:100%;height:100%;display:block}.home{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.home-title{text-align:center;padding:23px 8px 0}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:800}.home-title>.eyebrow{display:inline-block;padding:5px 10px;background:var(--cream);border:1px solid var(--ink);border-radius:20px}h1{position:relative;display:inline-block;font-size:clamp(34px,9.8vw,46px);font-weight:950;line-height:1.02;letter-spacing:-2px;margin:11px 0 0;color:var(--cream);text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),4px 5px var(--orange)}h1 em{font-style:normal;font-size:1.62em;letter-spacing:3px}.title-stamp{position:absolute;right:-24px;top:34px;transform:rotate(13deg);font-size:16px;border:2px solid var(--orange);background:var(--cream);color:var(--orange);padding:5px;letter-spacing:0;text-shadow:none}.home-title p{font-size:12px;font-weight:900;letter-spacing:2px;display:block;margin:12px auto;color:var(--ink)}.home-menu{pointer-events:auto;padding:15px 15px 9px;background:linear-gradient(0deg,#fff8e7 78%,#fff8e700)}.primary{border:1px solid #9c321c;background:var(--orange);color:#fffaf0;border-radius:10px;width:100%;padding:13px 15px;min-height:48px;box-shadow:0 4px 0 #ad3823;font-size:13px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:12px}.primary span{margin-left:auto;font-size:20px}.demo-row{display:flex;gap:8px;margin-top:12px}.demo-row button,.secondary{border:1px solid #8caa92;background:#f6f6dc;color:var(--green);border-radius:8px;min-height:39px;flex:1;font-size:11px;font-weight:750}.fine{font-size:9px;line-height:1.7;color:#6a7a66;text-align:center;margin:10px 0 0}.underbar{display:flex;gap:8px;align-items:center;justify-content:space-between;min-height:44px;padding:11px 3px 5px;font-size:10px;color:#56705c;line-height:1.5}.underbar button{font-size:10px;border:0;background:#d2dac9;color:var(--ink);border-radius:6px;min-height:30px;padding:6px 12px;flex-shrink:0}footer{display:flex;justify-content:space-between;gap:8px;margin:13px 2px 0;font-size:7px;letter-spacing:.8px;color:#839078}
.setup{padding:17px 15px;background:var(--cream);border:1px solid #b8c2aa;border-radius:14px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{font-size:21px;letter-spacing:-1px;margin:5px 0}.section-title .eyebrow{color:var(--orange);font-size:8px}.text-button{border:0;background:none;color:#667b61;font-size:10px;min-height:36px;padding:8px}.setup-lead{font-size:11px;line-height:1.6;margin:8px 0 16px}.setup-lead strong{color:var(--orange)}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.photo-grid article{border:1px solid #c2c8b4;border-radius:9px;padding:9px;background:#f3f2df}.step-number{font-size:10px;font-weight:850;color:var(--orange)}.photo-grid h3{font-size:10px;margin:4px 0 8px}.photo-well{position:relative;height:95px;border:1px dashed #9da98d;border-radius:5px;background:#e6e7d7;overflow:hidden}.photo-well canvas{width:100%;height:100%;object-fit:contain}.photo-well>span{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:#809075;pointer-events:none}.photo-actions{display:flex;gap:5px;margin-top:7px}.photo-actions button{flex:1;min-height:32px;border:1px solid #9daf90;border-radius:5px;background:#fffbed;color:var(--green);font-size:10px}.analyze{border:1px solid #1d5745;background:var(--green);color:var(--cream);width:100%;min-height:43px;border-radius:8px;margin-top:13px;font-size:12px;font-weight:800}.read-status{font-size:10px;line-height:1.7;color:#6b785e;margin:9px 1px 14px}.review{border-top:1px solid #c4c9b5;padding-top:13px}.review-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:850;margin-bottom:12px}.review-title small{font-size:8px;color:var(--orange)}.review label{display:block;font-size:10px;font-weight:750;margin-bottom:12px}.review select,.review input[type=number]{display:block;width:100%;min-height:42px;padding:8px;border:1px solid #b0bba3;background:#fffdf5;color:var(--ink);border-radius:6px;font-size:13px;margin-top:5px}.number-row{display:flex;gap:10px}.number-row>label{flex:1;min-width:0}.input-unit{position:relative}.input-unit input{padding-right:43px!important}.input-unit span{position:absolute;right:10px;top:15px;color:#85917b;font-size:10px}.review .confirm{display:flex;align-items:center;gap:8px;line-height:1.6;font-size:10px}.confirm input{width:20px;height:20px;accent-color:var(--green);flex-shrink:0}.error{font-size:11px;color:#b83526;line-height:1.6}.ocr-busy{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;background:#e4ead7;border-radius:7px;margin:10px 0}.ocr-busy strong{font-size:11px}.ocr-busy small{font-size:9px;width:100%;color:#67785c}.ocr-busy button{width:100%;background:none;border:1px solid #a2b192;border-radius:5px;font-size:10px;min-height:33px;color:var(--ink)}.spinner{width:17px;height:17px;border:2px solid #b7c5a4;border-top-color:var(--orange);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.battle-hud{position:absolute;top:13px;left:13px;right:13px;border:1px solid #859779;background:#fff9e8ef;border-radius:9px;padding:10px 12px;pointer-events:none}.enemy-label{display:flex;align-items:center;gap:7px}.enemy-label>span:first-child{font-size:7px;letter-spacing:.5px;color:#7b8c6b}.enemy-label>b{font-size:13px}.enemy-level{margin-left:auto;font-size:8px;padding:3px 5px;color:var(--orange);background:#ffe0c7;border-radius:3px}.hp-title{display:flex;justify-content:space-between;align-items:center;margin:8px 0 5px}.hp-title>small{font-size:9px}.hp-title b{font-size:16px;font-variant-numeric:tabular-nums}.hp-title b small{font-size:9px;color:#748166;font-weight:500}.hp-track{height:7px;border-radius:4px;background:#dce1cd;overflow:hidden}.hp-track i{display:block;height:100%;width:100%;background:var(--orange);transition:width .15s}.weak-layer{position:absolute;inset:0;pointer-events:none}.weakpoint{position:absolute;width:45px;height:45px;transform:translate(-50%,-50%);border:3px solid #fff6cf;border-radius:50%;background:#ed542fe8;box-shadow:0 0 0 2px #742910,0 0 20px #ffbd5088;color:#fff;font-size:20px;font-weight:900;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;animation:weakGlow .8s ease-in-out infinite alternate}.weakpoint small{position:absolute;right:-4px;top:-6px;display:grid;place-items:center;width:17px;height:17px;font-size:9px;background:var(--yellow);color:#4b3623;border:1px solid #4b3623;border-radius:50%}.weakpoint:active{filter:brightness(1.4)}@keyframes weakGlow{to{box-shadow:0 0 0 3px #a94622,0 0 25px #ffd966bb}}.battle-toast{position:absolute;top:28%;left:10px;right:10px;text-align:center;font-size:18px;font-weight:950;color:#fff3ca;text-shadow:0 2px 3px #223524,2px 0 #223524,-2px 0 #223524;pointer-events:none}.attack-call{position:absolute;left:0;right:0;top:66%;text-align:center;pointer-events:none;color:#fff0cc;text-shadow:2px 2px #813d27;font-size:20px;letter-spacing:1px;font-weight:950}.cook-panel{position:absolute;bottom:0;left:0;right:0;padding:12px 13px 13px;background:#fff9e8f7;border-top:1px solid #bdc4ac}.cook-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.cook-heading>span{font-size:8px;letter-spacing:1.6px;color:#79866e}.cook-heading strong{font-size:18px;color:var(--green)}.cook-track{height:11px;border-radius:3px;background:#dee1cb;overflow:hidden}.cook-track i{display:block;width:100%;height:100%;background:var(--green)}.stage-labels{display:flex;justify-content:space-between;margin-top:7px;font-size:8px;color:#89937d}.stage-labels .active{font-weight:900;color:var(--orange)}
.result{position:absolute;inset:0;padding:23px 20px 105px;overflow:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff7e8f5;text-align:center;z-index:3}.result>span{color:var(--orange);font-size:9px}.result h2{font-size:35px;letter-spacing:1px;margin:12px 0 5px;font-weight:950}.result>p:not(.fine){font-size:14px;line-height:1.7;margin:0 0 12px}.receipt{width:100%;padding:15px 14px;background:#fffefa;border-top:2px dashed #b8b69d;border-bottom:2px dashed #b8b69d;margin:5px 0 15px;box-shadow:0 2px 8px #5347280a}.receipt-shop{display:block;font-size:8px;letter-spacing:1px;color:#90917a;margin-bottom:12px}.receipt>div{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:10px}.receipt b{font-size:12px}.receipt-total{border-top:1px solid #d5d5bd;margin-top:4px}.result .secondary{width:100%;flex:none;margin-top:11px;min-height:39px}.result .fine{font-size:8px}.result.loss h2{color:#b0442d}@media(max-height:730px){.home-title{padding-top:16px}.home-title h1{font-size:35px}.home-title p{font-size:10px;margin-top:8px}.home-menu{padding:12px 12px 8px}.primary{min-height:43px}.result{padding:15px 15px 95px;justify-content:flex-start}.result h2{font-size:27px;margin:8px 0}.receipt{padding:9px 12px;margin-bottom:10px}.receipt>div{padding:4px 0}.receipt-shop{margin-bottom:6px}.battle-hud{top:9px;left:9px;right:9px;padding:8px 10px}.battle-toast{font-size:16px}}@media(prefers-reduced-motion:reduce){.spinner,.weakpoint{animation:none}.hp-track i{transition:none}}
/* Collection / locally saved processed images and numeric nutrition only */
.home-menu>#openCollection{display:block;margin:6px auto 0;padding:3px;min-height:27px;color:var(--green)}.home-menu .fine{margin-top:3px}.collection-panel{position:fixed;inset:0;z-index:30;background:#16372ed9;overflow:auto;padding:max(20px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom));overscroll-behavior:contain}.collection-sheet{max-width:440px;margin:0 auto;background:var(--cream);border:2px solid var(--ink);border-radius:16px;padding:18px}.collection-sheet h2{font-size:19px}.collection-sheet h3{font-size:11px;color:var(--orange)}.encounter-card{background:#fffdf3;border:1px solid #bdc8af;border-radius:10px;padding:11px;margin-bottom:12px}.encounter-summary{display:flex;gap:12px;align-items:center}.encounter-summary>img{width:90px;height:108px;object-fit:contain;background:repeating-conic-gradient(#e7eadb 0% 25%,#f3f4e7 0% 50%) 0 0/16px 16px;border-radius:7px}.encounter-summary strong{font-size:12px;display:block}.encounter-summary time{font-size:10px;display:block;color:#7d8c73;margin-top:6px}.encounter-summary p{font-size:10px;line-height:1.8;white-space:pre-line;margin:7px 0}.nutrition-stats{font-size:10px;line-height:1.8;color:#667b5e;border-top:1px dashed #c0c7ae;padding-top:7px;margin-bottom:0}.replace-record{display:block;width:100%;border:1px solid #cc795d;background:#fff0dd;color:#a13e23;border-radius:7px;padding:11px 6px;margin-top:10px;font-size:11px}.collection-sheet>#discardPending{width:100%;margin:8px 0}.nutrient-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.nutrient-grid input{width:100%;display:block;border:1px solid #b0bba3;border-radius:6px;min-height:40px;padding:8px;margin-top:5px;background:#fffdf5;font-size:13px}.result>#resultCollection{min-height:29px;padding:4px}.result>#collectionSaved{margin:0 0 5px}.result{justify-content:flex-start;padding-top:20px}.cook-panel{z-index:4}.result>.primary,.result>.secondary{flex-shrink:0}
/* v0.1.3 — numbered weak points and elapsed cooking timeline */
.weakpoint{font-size:25px;line-height:1;padding:0;display:grid;place-items:center}.weakpoint.next{background:#07594cf5;border-color:#ffec8c;box-shadow:0 0 0 3px #174330,0 0 25px #fff2a0;animation:none}.weakpoint.next::after{content:'次';position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);font-size:9px;padding:3px 6px;border-radius:10px;background:#ffec8c;color:#174330;border:1px solid #174330;white-space:nowrap}.cook-timeline{position:relative;padding-top:37px}.cook-target{position:absolute;top:0;left:66.666%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;line-height:1.1;color:#937214;pointer-events:none}.cook-target small{font-size:13px;font-weight:900;white-space:nowrap}.cook-target b{font-size:9px;margin-top:3px;white-space:nowrap}.cook-target::after{content:'';position:absolute;top:31px;height:17px;width:2px;background:#b29625;z-index:1}.cook-track i{width:0}.result{padding-bottom:145px}.stage-labels{gap:5px}.cook-panel{padding-top:9px}.cook-heading{margin-bottom:4px}
/* v0.1.3 — slide chains and result spacing */
.swipe-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.swipe-guide #connectGuide{fill:none;stroke:#fff0a0cc;stroke-width:3;stroke-dasharray:7 7}.swipe-guide #fingerTrail{fill:none;stroke:#ffdc53;stroke-width:5;stroke-linecap:round}.swipe-guide #fingerDot{fill:#ffdc53;stroke:#fff8e7;stroke-width:2}.weak-layer{touch-action:none}.weakpoint>span{pointer-events:none;display:block}.weakpoint.diamond{border-radius:7px;transform:translate(-50%,-50%) rotate(45deg);background:#1f6889ed}.weakpoint.diamond>span{transform:rotate(-45deg)}.weakpoint.diamond.next{background:#07594cf5}.weakpoint.diamond.next::after{content:'つなぐ';bottom:-17px;transform:translateX(-50%) rotate(-45deg);font-size:8px}.weakpoint.connecting{border-color:#fff;box-shadow:0 0 0 4px #ffe870,0 0 24px #ffe870;animation:none}.how-to{background:#edf0dc;border:1px solid #c0cbb0;padding:12px;border-radius:10px;margin:0 0 18px}.how-to h3{margin:0 0 6px;font-size:13px}.how-to svg{display:block;width:100%;max-width:330px;margin:auto}.how-to p{font-size:10px;line-height:1.8;margin:6px 0 0;color:#5b7058}.how-to p b{color:#194c3a;font-size:11px}.demo-finger{animation:demoSlide 2.5s ease-in-out infinite;opacity:.9}@keyframes demoSlide{0%,15%{transform:translateX(0);opacity:0}25%{transform:translateX(0);opacity:1}75%{transform:translateX(105px);opacity:1}85%,100%{transform:translateX(105px);opacity:0}}.result{display:block;padding:20px 18px 150px}.result h2{margin-top:10px}.result .receipt{margin-bottom:16px}.result-actions{display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px;width:100%;align-items:start}.result-actions>*{min-width:0;margin:0!important}.result-actions>.primary{width:100%;min-height:46px;line-height:1.5}.result-actions>.secondary{display:block;width:100%;min-height:42px;margin:0!important}.result-actions>.text-button{min-height:36px}.result-actions>.fine{font-size:10px;line-height:1.7;padding:2px 5px;white-space:normal;overflow-wrap:anywhere}.result-actions>.fine:empty{display:none}.result-actions>#collectionSaved{padding:9px 11px;background:#e6eddb;border:1px solid #c2cfaf;border-radius:7px;color:#48673e}.result-actions>#shareNote{color:#5a7052}@media(prefers-reduced-motion:reduce){.demo-finger{animation:none;transform:translateX(55px);opacity:.8}}