:root{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;color:#fff9e9;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#171b17}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #f1d399;outline-offset:6px}[hidden]{display:none!important}#scene{position:relative;height:100svh;min-height:420px;overflow:hidden;isolation:isolate}.background,.shade{position:absolute;inset:0;pointer-events:none}.background{background-size:cover;background-position:center;z-index:-3}.shade{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 50%,rgba(12,12,9,.7) 100%);z-index:-2}.gear{position:absolute;z-index:10;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));width:46px;height:46px;border:1px solid #f3e4c743;border-radius:50%;background:#1820194d;backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .2s}.gear:hover{background:#182019ad}.gear svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.begin{position:absolute;inset:0;border:0;background:transparent;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:max(9svh,45px);font-size:clamp(22px,4vw,29px);letter-spacing:.3em;text-shadow:0 2px 14px #000}.begin span{padding:18px 12px;animation:breathe 4s ease-in-out infinite}.draw-area{position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);width:min(67vw,320px);animation:appear .9s ease both}.box-button{width:100%;padding:0;border:0;background:transparent;display:block;filter:drop-shadow(0 12px 20px #0009)}.box-button img{width:100%;height:min(53svh,440px);object-fit:contain;display:block}.hint{position:absolute;bottom:max(7svh,32px);width:100%;text-align:center;letter-spacing:.18em;font-size:16px;pointer-events:none;text-shadow:0 2px 8px black}dialog{width:min(92vw,570px);max-height:88svh;overflow:auto;padding:28px;color:#332820;border:1px solid #dcc6a5;border-radius:5px;background:#f8f2e7;box-shadow:0 20px 80px #0009}dialog::backdrop{background:#09100bb3;backdrop-filter:blur(7px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:23px;font-weight:500;letter-spacing:.12em;margin:0}.close{font-family:Arial,sans-serif;font-size:29px;width:44px;height:44px;background:none;border:0;color:#695341}.settings-note{font-size:14px;color:#766653;margin:3px 0 22px}.box-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.option{position:relative;background:#e8decc;border:1px solid transparent;border-radius:4px;color:#4a3828;min-width:0;padding:10px 5px 12px}.option[aria-pressed=true]{border:2px solid #8f352b;background:#fff8e9;padding:9px 4px 11px}.option img{height:125px;width:100%;object-fit:contain}.option span{display:block;font-size:14px;margin-top:5px}.option[aria-pressed=true]:after{content:'✓';position:absolute;right:5px;top:4px;color:#8f352b}.done{display:block;width:100%;background:#762d25;color:#fff7df;border:0;border-radius:3px;margin-top:24px;padding:15px;font-size:16px;letter-spacing:.12em}@keyframes breathe{50%{opacity:.65;transform:translateY(-3px)}}@keyframes appear{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}@media(min-aspect-ratio:1/1){.background{background-size:auto 100%;background-repeat:no-repeat;background-color:#132015}.shade{background:linear-gradient(90deg,#0c130fe6,transparent 30%,transparent 70%,#0c130fe6),linear-gradient(0deg,#071009b3,transparent 50%)}.draw-area{top:60%;width:270px}.begin{padding-bottom:7svh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.draw-area{width:min(82vw,390px);height:min(58svh,480px);top:59%;--hole:11.9%}.box-button{position:absolute;inset:0;height:100%;z-index:1}.box-button img{width:100%;height:100%;object-fit:fill}.draw-area[data-box=wood]{width:min(77vw,340px);height:min(56svh,410px);--hole:10.4%}.draw-area[data-box=black]{--hole:10.8%}.draw-area[data-box=aged]{--hole:11.9%}.draw-area[data-box=fox]{--hole:10.1%}.stick-window{position:absolute;left:0;right:0;top:-180px;height:calc(180px + var(--hole));overflow:hidden;z-index:2;pointer-events:none}.stick-window img{position:absolute;width:220px;height:330px;left:calc(50% - 110px);bottom:-330px;object-fit:fill;transition:bottom 1.15s cubic-bezier(.23,.68,.35,1)}[data-stage=extracting] .stick-window img,[data-stage=vanishing] .stick-window img{bottom:-175px}[data-stage=shaking] .draw-area{animation:shake 1.25s ease-in-out both}[data-stage=vanishing] .draw-area{animation:vanish .85s ease forwards}.gear:disabled{opacity:.3;cursor:default}.box-button:disabled{cursor:default}@keyframes shake{0%,100%{rotate:0deg;translate:0 0}12%,36%,60%,84%{rotate:-3deg;translate:-2px 1px}24%,48%,72%{rotate:3deg;translate:2px -2px}}@keyframes vanish{to{opacity:0;scale:.94;translate:0 15px}}
.paper-button{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(73vw,280px);height:min(67svh,600px);border:0;background:transparent;padding:0;perspective:1300px;filter:drop-shadow(0 10px 25px #0007);cursor:pointer}.paper-panel{position:absolute;width:100%;height:33.4%;left:0;background-image:url('assets/paper.png');background-size:100% 300%;backface-visibility:hidden;transition:transform 1.15s cubic-bezier(.2,.65,.25,1)}.paper-panel.top{top:0;background-position:top;transform-origin:bottom}.paper-panel.middle{top:33.3%;background-position:center}.paper-panel.bottom{top:66.6%;background-position:bottom;transform-origin:top;transition-delay:.15s}.folded .paper-panel.top{transform:rotateX(-180deg)}.folded .paper-panel.bottom{transform:rotateX(180deg)}.fold-label{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:#842e25;letter-spacing:.25em;font-size:23px;transition:opacity .2s}.paper-button:not(.folded) .fold-label{opacity:0}.fortune-content{position:absolute;inset:0;color:#85271f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;transition:opacity .6s .65s}.paper-button:not(.folded) .fortune-content{opacity:1}.fortune-heading{font-size:16px;letter-spacing:.22em}.fortune-content strong{font-size:clamp(40px,7svh,60px);font-weight:500;writing-mode:vertical-rl;letter-spacing:.18em;line-height:1.35}.fortune-seal{font-size:14px;border:1px solid #ab554b;padding:5px 8px;letter-spacing:.1em}.again{position:absolute;bottom:max(5svh,24px);left:50%;transform:translateX(-50%);border:1px solid #e6d4af7d;border-radius:2px;background:#111c16a6;backdrop-filter:blur(8px);padding:14px 28px;font-size:16px;letter-spacing:.15em;white-space:nowrap}.again:hover{background:#233127e6}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#meteor{position:absolute;top:5%;left:30%;height:1px;width:75px;background:linear-gradient(90deg,transparent,#fff9df);rotate:25deg;opacity:0;pointer-events:none;filter:drop-shadow(0 0 2px #fff);z-index:-1}[data-period=night][data-weather=sunny] #meteor{animation:meteor 23s linear infinite;animation-delay:6s}@keyframes meteor{0%,90%,100%{opacity:0;translate:0 0}92%{opacity:.65}95%{opacity:0;translate:70px 33px}}@media(max-height:600px){.draw-area{height:58svh;width:calc(58svh * .667)}.draw-area[data-box=wood]{height:56svh;width:calc(56svh * .83)}.paper-button{height:64svh;width:29svh}.fortune-content{gap:12px}.fortune-heading{font-size:14px}.fortune-content strong{font-size:32px}.fortune-seal{display:none}}@media(prefers-reduced-motion:reduce){.stick-window img{transition:none}.paper-panel,.fortune-content{transition:none}#meteor{display:none}[data-stage=vanishing] .draw-area{opacity:0}}
/* Keep every control inside the same portrait game surface on desktop and phone. */
body{min-height:100svh;background:#101710}#scene{width:100%;max-width:calc(100svh * .5625);margin:0 auto}.background{background-size:cover;background-position:center;background-repeat:no-repeat}.shade{background:linear-gradient(180deg,#0000001a 0%,transparent 50%,#0c0c09b3 100%)}.gear{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px}.draw-area{width:82%;height:58%;max-height:480px;top:59%}.draw-area[data-box=wood]{width:80%;height:54%;max-height:410px}.paper-button{width:73%;max-width:280px}.begin{padding-bottom:max(9svh,45px)}
/* Normalize actual box bounds, rather than transparent canvas sizes. */
.draw-area,.draw-area[data-box=wood]{width:80%;height:54%;max-height:410px;--image-width:100%;--image-height:100%;--image-top:0%;--image-x:0%;--hole:10.4%}.draw-area[data-box=red]{--image-width:80.3%;--image-height:105.8%;--image-top:-2.86%;--image-x:-.2%;--hole:9.8%}.draw-area[data-box=black]{--image-width:88.9%;--image-height:103.9%;--image-top:-1.37%;--image-x:0%;--hole:10.1%}.draw-area[data-box=aged]{--image-width:83.5%;--image-height:102.7%;--image-top:-1.77%;--image-x:-.5%;--hole:10.45%}.draw-area[data-box=fox]{--image-width:78.6%;--image-height:100.8%;--image-top:-.47%;--image-x:-.8%;--hole:9.7%}.box-button img{position:absolute;left:calc(50% + var(--image-x));top:var(--image-top);transform:translateX(-50%);width:var(--image-width);height:var(--image-height);object-fit:fill}
/* Final asset normalization: every box file now shares the same visible bounds. */
.draw-area,.draw-area[data-box=wood],.draw-area[data-box=red],.draw-area[data-box=black],.draw-area[data-box=aged],.draw-area[data-box=fox]{width:80%;height:54%;max-height:410px;--hole:10.4%}.box-button img{left:50%;top:0;transform:translateX(-50%);width:100%;height:100%;object-fit:fill}.draw-area[data-box=wood],.draw-area[data-box=red],.draw-area[data-box=black],.draw-area[data-box=aged],.draw-area[data-box=fox]{--image-width:100%;--image-height:100%;--image-top:0%;--image-x:0%}
/* Match the original white-box presentation: preserve the normalized canvas aspect ratio. */
.box-button img{object-fit:contain!important}
.box-button,.paper-button,.box-button img,.paper-button *{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

.creator-credit{margin:22px 0 8px;padding-top:16px;border-top:1px solid #dcc6a5;font-size:12px;color:#9b8f80;text-align:center;font-weight:400}