[hidden],.hidden{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;background:#2a2118;touch-action:manipulation}
body{margin:0;height:100svh;overflow:hidden;position:relative;color:#2a2118;font-family:system-ui,-apple-system,"Hiragino Sans",sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button,a{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
#view,#flash{position:fixed;inset:0}#view canvas{display:block;width:100%;height:100%;touch-action:none}
#flash{pointer-events:none;opacity:0;background:#fff;z-index:3}
section{position:fixed;inset:0;z-index:5}
#title{display:flex;flex-direction:column;align-items:flex-start;padding:max(38px,env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(30,22,10,0) 55%,rgba(30,22,10,.62))}
.sign{position:relative;background:#274a7c;color:#fbf6e6;padding:18px 26px 20px;border:4px solid #fbf6e6;outline:3px solid #274a7c;transform:rotate(-2.4deg);box-shadow:3px 6px 0 rgba(30,20,0,.35)}
.sign h1{margin:0;font:400 clamp(30px,9.2vw,42px)/1.2 "RocknRoll One",sans-serif}
.sign i{position:absolute;width:8px;height:8px;border-radius:50%;background:#c9cfd6;box-shadow:inset -1px -1px 1px #66707a}
.sign i:nth-child(1){left:6px;top:6px}.sign i:nth-child(2){right:6px;top:6px}.sign i:nth-child(3){left:6px;bottom:6px}.sign i:nth-child(4){right:6px;bottom:6px}
.story{margin:auto 0 16px;color:#fff;font:600 17px/1.6 "Klee One",serif;text-shadow:0 1px 3px #000,0 0 8px #000}
#btnLang{margin:14px 0 0 2px;min-height:44px;padding:0 12px;color:#fff;font-size:14px;text-shadow:0 1px 3px #000}
#btnStart{align-self:stretch;min-height:68px;background:#e8739a;color:#2a1018;font:400 28px "RocknRoll One",sans-serif;border:3px solid #2a1018;border-radius:6px 22px 8px 18px;box-shadow:0 7px 0 #8d3253}
#btnStart:active{transform:translateY(5px);box-shadow:0 2px 0 #8d3253}
#credit{margin:10px 0 0;color:#efe6cf;font-size:10px;text-shadow:0 1px 2px #000}
#hud{pointer-events:none}#hud button{pointer-events:auto}
#plasters{position:absolute;left:12px;top:max(12px,env(safe-area-inset-top));display:flex;gap:2px}
#plasters i{width:44px;height:20px;background:#e9bd94;border-radius:10px;transform:rotate(-5deg);box-shadow:0 1px 2px rgba(0,0,0,.5);position:relative}
#plasters i::after{content:"";position:absolute;left:14px;right:14px;top:4px;bottom:4px;background:#f6e6cf;border-radius:2px}
#plasters i.off{opacity:.18}
#btnMute{position:absolute;right:10px;top:max(8px,env(safe-area-inset-top));width:44px;height:44px;color:#fff;font:700 13px system-ui,-apple-system,"Hiragino Sans",sans-serif;text-shadow:0 1px 3px #000}
#say{position:absolute;left:0;right:0;top:calc(max(12px,env(safe-area-inset-top)) + 40px);text-align:center;color:#fff;font:400 25px "RocknRoll One",sans-serif;-webkit-text-stroke:0;text-shadow:0 2px 0 #2a1018,2px 0 0 #2a1018,-2px 0 0 #2a1018,0 -2px 0 #2a1018,0 3px 6px #000}
#cut{position:absolute;right:10px;top:13%;width:44%;aspect-ratio:1;background:#fff;border:6px solid #1a1410;outline:4px solid #fff;transform:rotate(4deg);overflow:hidden}#cut img{width:100%;height:100%;display:block}
.edge{position:absolute;top:44%;width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;filter:drop-shadow(0 0 3px #fff)}
#edgeL{left:6px;border-right:26px solid #d62b1f}#edgeR{right:6px;border-left:26px solid #d62b1f}
#guide{position:absolute;left:0;right:0;bottom:calc(150px + env(safe-area-inset-bottom));text-align:center;color:#fff;font:600 19px/1.5 "Klee One",serif;text-shadow:0 1px 3px #000,0 0 8px #000}
#pad{position:absolute;left:8px;right:8px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:6px}
#pad .gap{flex:1}
.sew{width:84px;height:84px;touch-action:none;flex:none}.sew svg{width:100%;height:100%;display:block;pointer-events:none}
.sew.big{width:112px;height:112px}.sew.small{width:72px;height:72px;margin-bottom:26px}
.sew.on{transform:translateY(3px) scale(.96)}
.st{fill:none;stroke:#b5473f;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 5}
#bJ .st{stroke:#d64f80}#bD .st{stroke:#3f6ea5}
#bJ.glow svg{filter:drop-shadow(0 0 10px #ff6fa5)}.glow svg{filter:drop-shadow(0 0 9px #fff4b0)}
#result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 12px calc(14px + env(safe-area-inset-bottom));background:rgba(25,18,8,.55)}
#paper{flex:1;min-height:0;max-width:100%;object-fit:contain;display:block;width:100%}
.res{display:flex;gap:10px;align-self:stretch}
#btnAgain{flex:1;min-height:66px;background:#e8739a;color:#2a1018;font:400 26px "RocknRoll One",sans-serif;border:3px solid #2a1018;border-radius:6px 20px 8px 16px;box-shadow:0 6px 0 #8d3253}
#btnPost{min-width:104px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;border-bottom:2px solid transparent}
#boot{position:fixed;inset:0;z-index:9;background:#2f2719 repeating-linear-gradient(90deg,rgba(255,240,190,.035) 0 3px,transparent 3px 11px);color:#f6ead0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:600 20px "Klee One",serif}#boot.gone{display:none}
#boot svg{width:min(62vw,250px)}#boot p{margin:0}
.b-knife{animation:shave .55s ease-in-out infinite alternate;transform-origin:118px 33px}.b-shave{animation:chip .55s linear infinite}
@keyframes shave{from{transform:translate(-8px,-3px)}to{transform:translate(12px,16px)}}@keyframes chip{from{opacity:0;transform:translate(0,0)}40%{opacity:1}to{opacity:0;transform:translate(8px,-10px)}}
.boot-bar{width:min(66vw,260px);height:9px;border:2px solid #d9b57a;border-radius:2px;overflow:hidden}.boot-bar i{display:block;height:100%;background:#d9b57a;transform:scaleX(0);transform-origin:left;transition:transform .15s}
#bootErr{position:fixed;inset:12px;z-index:10;background:#fff;color:#b00;white-space:pre-wrap;font:13px monospace;padding:12px}
