@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap";:root{--paper:#efede4;--ink:#303b31;--gold:#ddc587;--red:#b34b3e;--serif:"Noto Serif JP","Yu Mincho",serif;--sans:"Noto Sans JP","Yu Gothic",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #d69c49;outline-offset:5px}button svg{pointer-events:none}button:active{transform:translateY(2px)}[hidden]{display:none!important}.app{max-width:1232px;margin:auto;padding:0 30px 24px}.masthead{height:87px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand h1{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.06em;margin:0}.brand-mark{width:36px;height:36px;border:1px solid #b35443;color:var(--red);display:grid;place-items:center;font-family:var(--serif);font-size:23px;transform:rotate(-5deg)}nav{display:flex;gap:9px}.icon-button{position:relative;width:35px;height:35px;border:1px solid #d5d4c8;border-radius:50%;background:transparent;color:var(--ink);font-size:17px}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;vertical-align:middle}.sound-slash{position:absolute;left:11px;top:17px;width:15px;height:1px;background:var(--ink);transform:rotate(-45deg)}.stage{height:min(740px,calc(100svh - 111px));min-height:510px;position:relative;overflow:hidden;border-radius:12px;background:#26372d;box-shadow:0 18px 38px #29352c13}.stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#12251faf,transparent 52%)}.hud{position:absolute;top:22px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none;color:#efe9d4;z-index:3}.employee{display:flex;align-items:center;gap:11px;background:#14271e8c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #d9d9b722;border-radius:6px;padding:6px 14px 6px 6px}.employee canvas{width:49px;height:56px;display:block;border-radius:3px;background:#d8d0b8}.employee strong{font-family:var(--serif);font-size:18px;font-weight:600;display:block}.age{font-size:11px;opacity:.7}.age b{font-weight:400}.record{display:flex;gap:9px;align-items:center;align-self:flex-start;font-size:15px;padding:9px 13px;border-radius:5px;border:1px solid #d9d9b722;background:#14271e7d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.record span{color:var(--gold)}.record b{font-family:var(--serif);font-size:22px;font-weight:500}.intro{position:absolute;bottom:34px;left:50%;transform:translate(-50%);z-index:2;color:#f3efde;text-align:center;white-space:nowrap}.intro p{font-family:var(--serif);font-size:23px;letter-spacing:.1em;margin:0 0 23px}.round-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--gold);color:#2b372b;width:62px;height:62px;font-size:23px;line-height:1;transition:background .2s,transform .15s}.round-button:hover{background:#ecd9a2}.start-button{width:75px;height:75px;padding-left:5px}.round-button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}.round-button.subtle{background:#eee9dced;border:1px solid #d7d2bb}.challenge{display:block;margin-top:15px;color:var(--gold);font-size:12px}.play-hud{position:absolute;inset:0;pointer-events:none;color:#eee9d9}#phase-label{position:absolute;top:34px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:.12em;opacity:.7}.cue{position:absolute;left:9%;top:37%;font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.1em;text-shadow:0 2px 15px #0008}.input-feedback{position:absolute;left:50%;bottom:154px;transform:translate(-50%);font-size:22px;white-space:nowrap;opacity:0;transition:opacity .15s}.input-feedback.visible{opacity:1}.controls-area{position:absolute;bottom:28px;left:50%;transform:translate(-50%);width:350px;pointer-events:auto}.rps-controls{display:flex;gap:13px;justify-content:center}.choice{border:1px solid #f2e8cc4d;background:#f0ecdbed;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#334135;border-radius:8px;width:95px;height:95px;position:relative;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s,transform .15s}.choice:hover{background:#e2ca8f}.choice svg{width:49px;height:49px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.choice kbd{font-family:var(--sans);font-size:9px;position:absolute;right:8px;top:7px;opacity:.4}.choice:disabled{opacity:.5}.choice.chosen{background:#e0c687;opacity:1}.direction-controls{display:flex;gap:12px;align-items:center;justify-content:center;height:119px}.direction{width:91px;height:91px;font-size:41px;font-weight:400}.vertical-controls{display:flex;flex-direction:column;gap:7px}.vertical-controls .direction{height:56px;font-size:29px}.match-result{position:absolute;bottom:25px;left:50%;transform:translate(-50%);z-index:4;color:#f3ecd8;text-align:center;padding:21px 27px 24px;min-width:280px;border-radius:10px;border:1px solid #ecdfbd30;background:#1c3024e3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.match-result h2{font-family:var(--serif);font-size:39px;font-weight:600;margin:0 0 6px;letter-spacing:.1em}.match-result>span{font-size:11px;letter-spacing:.18em;color:var(--gold)}.match-result.failed>span{color:#edaa8a}.result-buttons{display:flex;gap:12px;justify-content:center;margin-top:21px}.result-buttons .round-button{width:56px;height:56px;font-size:21px}.promotion{position:absolute;left:50%;top:17%;transform:translate(-50%) rotate(-5deg);z-index:6;padding:12px 23px 16px;text-align:center;color:#e5cd90;border:2px solid #e5cd9077;background:#1a3023d4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:stamp .25s}.promotion>span{font-size:10px;letter-spacing:.2em;display:block;margin-bottom:5px}.promotion strong{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:.12em}.stage.angry{animation:shake .3s}.stage.angry:after{content:"";position:absolute;inset:0;pointer-events:none;border:4px solid #c84d3633;box-shadow:inset 0 0 90px #ad3e324a}.suspend{position:absolute;inset:0;background:#16251ede;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;display:flex;align-items:center;justify-content:center}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#243b2f;z-index:12}.spinner{width:24px;height:24px;border:2px solid #d8c38a44;border-top-color:var(--gold);border-radius:50%;animation:spin 1s infinite linear}dialog{border:1px solid #d5d0bc;border-radius:10px;max-width:360px;width:calc(100% - 32px);padding:35px 25px 28px;background:#f4f0e5;color:var(--ink);box-shadow:0 25px 100px #0004;text-align:center}dialog::backdrop{background:#12271db8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dialog-close{position:absolute;top:8px;right:10px;border:0;background:none;color:#798371;font-size:25px;width:32px;height:32px}.dialog-close:active{transform:none}dialog h2{font-family:var(--serif);font-size:25px;font-weight:600;margin:17px 0 22px}dialog p{font-size:12px;margin:12px 0;color:#6f7b65}dialog>.round-button{margin-top:18px}.share-buttons{display:flex;gap:22px;justify-content:center;margin:15px 0 0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:#263b2f;color:#f2e6bf;padding:12px 20px;z-index:100;border-radius:5px;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes stamp{0%{opacity:0;transform:translate(-50%) rotate(-5deg) scale(1.3)}to{opacity:1;transform:translate(-50%) rotate(-5deg) scale(1)}}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@media(max-width:760px){.app{padding:0 14px 14px}.masthead{height:69px}.brand{gap:8px}.brand h1{font-size:11px;letter-spacing:.01em}.brand-mark{width:30px;height:30px;font-size:20px}.icon-button{width:30px;height:30px;font-size:15px}nav{gap:6px}.sound-slash{left:9px;top:14px}.icon-button svg{width:16px;height:16px}.stage{height:calc(100svh - 83px);min-height:500px;max-height:820px;border-radius:8px}.hud{top:14px;left:14px;right:14px}.employee{gap:8px;padding:5px 10px 5px 5px}.employee canvas{width:39px;height:45px}.employee strong{font-size:15px}.age{font-size:10px}.record{font-size:12px;padding:8px 10px}.record b{font-size:18px}.intro{bottom:28px}.intro p{font-size:20px;margin-bottom:21px}.start-button{width:66px;height:66px}.cue{left:7%;top:36%;font-size:23px}#phase-label{top:88px;font-size:11px}.controls-area{bottom:25px;width:310px}.choice{width:88px;height:88px}.choice svg{width:45px;height:45px}.choice kbd{display:none}.direction{width:85px;height:85px}.direction-controls{height:111px}.vertical-controls .direction{height:52px}.input-feedback{bottom:150px;font-size:20px}.match-result{bottom:22px;padding:18px 23px 21px;min-width:255px}.match-result h2{font-size:33px}.result-buttons{gap:11px;margin-top:19px}.result-buttons .round-button{width:52px;height:52px}.promotion{top:19%;padding:10px 21px 12px}.promotion strong{font-size:25px}}@media(max-width:365px){.app{padding:0 10px 10px}.brand h1{font-size:10px}.brand-mark,.icon-button{width:27px;height:27px}nav{gap:5px}.stage{min-height:490px}.controls-area{width:280px}.choice{width:81px;height:84px}}@media(prefers-reduced-motion:reduce){.stage.angry,.promotion{animation:none}}.intro p{font-family:var(--sans);font-weight:700;letter-spacing:.025em;text-shadow:0 2px 6px #14271e}.cue{left:50%;top:auto;bottom:265px;transform:translate(-50%) rotate(-4deg);z-index:4;font-family:var(--sans);font-size:49px;font-weight:900;letter-spacing:.03em;line-height:1.15;white-space:nowrap;color:#fff9e9;-webkit-text-stroke:5px #243b2e;paint-order:stroke fill;text-shadow:0 5px 0 #182b21,3px 7px 0 #182b2140;animation:cue-pop .18s ease-out;isolation:isolate}.cue:empty{display:none}.cue.hit{font-size:68px;color:#ffe05a;animation:cue-hit .2s cubic-bezier(.15,.85,.3,1.2)}.cue.hit[data-phase=look]{color:#ff9f71}.cue.hit:before{content:"";position:absolute;inset:-20px -35px;z-index:-1;background:#fff3cce6;clip-path:polygon(0 42%,17% 30%,10% 8%,34% 20%,47% 0,58% 19%,83% 8%,79% 33%,100% 40%,85% 56%,98% 86%,71% 79%,62% 100%,45% 84%,23% 100%,22% 76%,2% 79%,13% 57%)}.stage.release .choice:not(:disabled){border:2px solid #ffe28b;box-shadow:0 0 0 3px #ffe28b30}.reaction{position:absolute;right:10%;top:30%;z-index:5;max-width:calc(100% - 28px);padding:15px 21px;border:3px solid #304133;border-radius:22px;background:#fff8e6;color:#304133;font-weight:800;font-size:23px;white-space:nowrap;box-shadow:3px 5px #16271e55;transform:rotate(4deg);animation:reaction-pop .2s ease-out}.reaction:after{content:"";position:absolute;left:13px;bottom:-13px;width:17px;height:17px;background:#fff8e6;border-right:3px solid #304133;border-bottom:3px solid #304133;transform:rotate(45deg)}@keyframes cue-pop{0%{opacity:.35;transform:translate(-50%) rotate(-6deg) scale(.7)}to{opacity:1;transform:translate(-50%) rotate(-4deg) scale(1)}}@keyframes cue-hit{0%{transform:translate(-50%) rotate(-9deg) scale(.65)}65%{transform:translate(-50%) rotate(-2deg) scale(1.12)}to{transform:translate(-50%) rotate(-4deg) scale(1)}}@keyframes reaction-pop{0%{opacity:0;transform:rotate(4deg) scale(.8)}to{opacity:1;transform:rotate(4deg) scale(1)}}@media(max-width:760px){.intro p{font-size:19px}.cue{left:50%;top:auto;bottom:255px;font-size:38px;-webkit-text-stroke:4px #243b2e}.cue.hit{font-size:54px}.cue.hit:before{inset:-16px -25px}.reaction{right:14px;top:19%;padding:12px 16px;font-size:19px}}@media(prefers-reduced-motion:reduce){.cue,.cue.hit,.reaction{animation:none}}.stats{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.life{display:flex;gap:7px;align-items:center;padding:4px 10px;border-radius:5px;background:#14271e9c;color:#efb59b;font-size:21px;line-height:1.25}.life span{transition:opacity .15s}.life .empty{opacity:.18}.text-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:30px;min-width:132px;min-height:50px;padding:12px 25px;background:var(--gold);color:#2b372b;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;transition:background .2s,transform .15s}.text-button:hover{background:#ecd9a2}.text-button.start-button{width:auto;height:54px;padding:12px 30px}.result-buttons .text-button{min-width:116px;padding:12px 18px;font-size:14px}#help-dialog{padding:0;max-width:620px;max-height:calc(100svh - 28px);width:calc(100% - 28px);overflow:hidden;text-align:left}.help-heading{position:relative;padding:22px 26px 17px;border-bottom:1px solid #ded8c5;background:#eee8d8}.help-heading h2{font-family:var(--serif);font-size:23px;margin:0;padding-right:32px}.help-heading .dialog-close{top:15px;right:17px}.help-body{padding:7px 26px 12px;max-height:min(610px,calc(100svh - 180px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.help-body:focus-visible{outline:2px solid #b39b61;outline-offset:-3px}.help-body section{padding:16px 0;border-bottom:1px solid #e1dccb}.help-body section:last-child{border-bottom:0}.help-body h3{font-size:16px;line-height:1.65;margin:0 0 10px;color:#354a36}.help-body p{font-size:13px;line-height:1.95;margin:8px 0;color:#5c6857}.help-body strong{font-weight:700;color:#344b35}.help-body ul{padding-left:1.4em;margin:9px 0;font-size:13px;line-height:1.9;color:#5c6857}.help-body li+li{margin-top:9px}.help-body table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}.help-body th,.help-body td{text-align:left;padding:11px 12px;border:1px solid #dcd5c2}.help-body th{background:#eae4d3;font-weight:600}.help-body kbd{font-family:var(--sans);display:inline-block;min-width:23px;text-align:center;padding:1px 5px;border:1px solid #c7c9b7;border-bottom-width:2px;border-radius:4px;background:#fffdf5;color:#344733;font-size:12px}.help-actions{text-align:center;padding:14px 22px 17px;border-top:1px solid #ded8c5;background:#f4f0e5}.help-actions .text-button{min-height:43px;font-size:14px;padding:10px 26px}@media(max-width:760px){.stats{gap:6px}.life{font-size:18px;gap:6px;padding:4px 8px}.text-button.start-button{height:50px;font-size:15px;padding:12px 27px}.result-buttons .text-button{min-width:112px;font-size:13px}.help-heading{padding:19px 19px 14px}.help-heading h2{font-size:20px}.help-heading .dialog-close{right:12px;top:11px}.help-body{padding:5px 19px 10px}.help-body h3{font-size:15px}.help-body th,.help-body td{padding:10px 8px}}