:root{--ink:#17221c;--cream:#f4ead2;--green:#244b38;--gold:#d3a24b;--red:#96392f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101712;color:var(--cream);font-family:"Noto Sans JP","Hiragino Sans",sans-serif}
button{font:inherit;touch-action:manipulation;cursor:pointer}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#app{position:relative;width:min(390px,100vw);height:100dvh;min-height:600px;margin:auto;overflow:hidden;background:var(--ink);box-shadow:0 0 50px #000}.screen{width:100%;height:100%}
.title-screen{position:relative;overflow:hidden;background:#08100c;color:#f8efd9;isolation:isolate;user-select:none}
.title-hero{position:absolute;z-index:-4;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.title-shade{position:absolute;z-index:-3;inset:0;background:linear-gradient(180deg,rgba(2,8,5,.78) 0%,rgba(4,10,7,.27) 25%,rgba(3,8,5,.05) 48%,rgba(3,8,5,.62) 70%,rgba(2,7,4,.97) 100%),radial-gradient(100% 62% at 50% 45%,transparent 35%,rgba(0,0,0,.62) 100%)}
.title-grain{position:absolute;z-index:-2;inset:0;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");background-size:180px 180px;animation:grainShift .7s steps(2) infinite}
.title-screen:after{content:"";position:absolute;z-index:-1;inset:7px;border:1px solid rgba(230,194,124,.32);box-shadow:inset 0 0 0 3px rgba(5,10,7,.45);pointer-events:none}
.title-lockup{position:absolute;left:21px;right:21px;top:calc(31px + env(safe-area-inset-top));text-align:center;filter:drop-shadow(0 5px 10px rgba(0,0,0,.7))}
.eyebrow{margin:0 0 7px;color:#e3cb99;font-size:10px;font-weight:700;letter-spacing:.26em;text-indent:.26em}
.title-lockup h1{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;line-height:.95;letter-spacing:.02em;text-shadow:0 3px 0 #0b100d,0 0 22px rgba(215,159,68,.18);cursor:pointer;touch-action:manipulation}
.title-lockup h1 span{color:#e3b95f;font-size:63px;font-weight:900}.title-lockup h1 b{color:#fff4da;font-size:49px;font-weight:900}
.title-lockup h1:after{content:"";position:absolute;left:22%;right:22%;bottom:47px;height:1px;background:linear-gradient(90deg,transparent,#b7382c,transparent)}
.title-copy{margin:13px 0 0;color:#e8e6d9;font-size:13px;font-weight:600;line-height:1.55;letter-spacing:.14em;text-indent:.14em}.title-copy strong{color:#f5d17b}
.title-menu{position:absolute;left:21px;right:21px;bottom:calc(43px + env(safe-area-inset-bottom));text-align:center}
.title-rule{display:flex;align-items:center;gap:10px;margin:0 8px 12px;color:#dec68f;font-size:10px;letter-spacing:.17em}.title-rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#af8c53)}.title-rule i:last-child{transform:scaleX(-1)}.title-rule b{white-space:nowrap}
.main-btn,.sub-btn{display:block;width:100%;border:0;border-radius:3px;font-weight:800;letter-spacing:.08em}.main-btn{padding:16px 12px;color:#142018;background:linear-gradient(#e9ca84,#c9963b);box-shadow:0 4px 0 #725221,0 8px 20px rgba(0,0,0,.3);font-size:16px}
.title-start{position:relative;height:78px;overflow:hidden;padding:8px 12px 10px;border:1px solid #f0d391;border-radius:2px;color:#fff2d1;background:linear-gradient(180deg,rgba(159,64,48,.98),rgba(104,34,29,.99));box-shadow:inset 0 0 0 2px rgba(37,12,10,.8),inset 0 1px 0 3px rgba(255,222,155,.22),0 5px 0 #3d1713,0 10px 22px rgba(0,0,0,.55);text-shadow:0 2px 1px #2b0e0c;transform-origin:50% 75%;transition:transform 90ms cubic-bezier(.3,0,.7,1),filter 90ms linear,box-shadow 90ms linear}
.title-start .start-label{position:relative;z-index:2;display:block;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:24px;font-weight:900;letter-spacing:.18em;text-indent:.18em}.title-start small{position:relative;z-index:2;display:block;margin-top:4px;color:#e8cfa9;font-size:9px;font-weight:600;letter-spacing:.13em}.title-start.is-down{transform:translateY(5px) scale(.992);filter:brightness(.83);box-shadow:inset 0 0 0 2px rgba(37,12,10,.8),inset 0 1px 0 3px rgba(255,222,155,.16),0 1px 0 #3d1713,0 4px 10px rgba(0,0,0,.45)}
.button-sheen{position:absolute;z-index:1;top:-35%;bottom:-35%;left:-32%;width:24%;opacity:0;pointer-events:none;transform:translateX(-160%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,229,168,.34),rgba(255,247,214,.72),rgba(255,229,168,.16),transparent)}
.title-choice-flash{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 80%,rgba(255,216,131,.34),rgba(143,17,10,.12) 28%,transparent 56%);mix-blend-mode:screen}
.sub-btn{margin-top:11px;padding:10px;color:#dbe5d7;background:rgba(23,48,35,.96);border:1px solid #76927b;font-size:11px;box-shadow:0 5px 15px rgba(0,0,0,.35)}.resume-text{height:14px;margin:11px 0 -9px;color:#bfc8bb;font-size:10px;letter-spacing:.05em}.title-note{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));margin:0;text-align:center;color:#829387;font-size:9px;letter-spacing:.12em}
.dev-start.revealed{animation:devReveal .34s cubic-bezier(.2,.8,.2,1)}
@keyframes grainShift{0%{background-position:0 0}25%{background-position:-13px 9px}50%{background-position:8px -11px}75%{background-position:12px 14px}to{background-position:-7px -5px}}
@keyframes devReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rule-modal{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,8,5,.84);backdrop-filter:blur(5px)}
.rule-card{width:100%;padding:24px 20px 20px;color:#253027;background:#f8efdb;border:2px solid #b38a46;box-shadow:inset 0 0 0 4px #efe1c1,0 20px 60px #000;text-align:center}.rule-kicker{margin:0;color:#986638;font-size:10px;font-weight:800;letter-spacing:.18em}.rule-card h2{margin:4px 0 17px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:30px}.rule-card ol{display:grid;gap:10px;margin:0 0 19px;padding:0;list-style:none;text-align:left}.rule-card li{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:10px;background:#eee3ca;border-left:3px solid #a73d32}.rule-card li>span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#fff3d8;background:#31503c;font-family:"Yu Mincho",serif;font-size:17px;font-weight:900}.rule-card li b,.rule-card li small{display:block}.rule-card li b{font-size:13px}.rule-card li small{margin-top:3px;color:#6b6c62;font-size:9px;line-height:1.45}.rule-card .main-btn{font-size:14px}
.game-screen{display:flex;flex-direction:column;background:#121914;padding-bottom:env(safe-area-inset-bottom)}.game-head{flex:0 0 auto;display:grid;grid-template-columns:54px 1fr 54px;align-items:center;height:calc(55px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0;background:#203d2e;border-bottom:1px solid #8a6b3f}.icon-btn,.zoom-btn{border:0;background:transparent;color:#e7dbc2}.icon-btn{font:38px/1 "Noto Sans JP","Hiragino Sans",sans-serif;text-align:left}.zoom-btn{font-size:11px;font-weight:700}.stage-title{text-align:center;line-height:1}.stage-title small{display:block;color:#d0aa66;font-size:9px;letter-spacing:.22em}.stage-title strong{font:700 21px/1.25 "Noto Sans JP","Hiragino Sans",sans-serif}.stage-title em{padding:0 5px;color:#7f9786;font-size:12px;font-style:normal}
.question-bar{flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:8px 13px;background:#f0e6d0;color:#263328;border-bottom:3px solid #957140}.question-bar p{margin:0;font-weight:800;font-size:14px}.question-bar span{font-size:10px;color:#6b6b5c}.photo-viewport{position:relative;flex:1 1 auto;min-height:260px;overflow:hidden;background:#090b09;touch-action:none;overscroll-behavior:none;cursor:crosshair}.photo-viewport:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.photo-layer{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.photo-layer img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;user-select:none}
.answer-box{position:absolute;border:3px solid #ffdf52;background:rgba(255,221,82,.13);box-shadow:0 0 0 2px #222,0 0 18px #ffdf52;pointer-events:none;animation:pulse 1s infinite alternate}.answer-box span{position:absolute;left:-3px;top:-23px;padding:3px 6px;color:#191a12;background:#ffdf52;font-size:10px;font-weight:900;white-space:nowrap}@keyframes pulse{to{box-shadow:0 0 0 2px #222,0 0 28px #ffdf52}}.gesture-hint{position:absolute;right:8px;bottom:7px;padding:4px 7px;border-radius:12px;color:#ddd;background:rgba(0,0,0,.55);font-size:9px;pointer-events:none}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#101510;color:#aab6ab;font-size:11px}.loading i{width:17px;height:17px;border:2px solid #536157;border-top-color:#e0bd75;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.tap-marker{position:absolute;width:28px;height:28px;border:2px solid #f5d276;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(0,0,0,.35),0 0 18px #f5d276;pointer-events:none}.tap-marker:before,.tap-marker:after{content:"";position:absolute;background:#f5d276}.tap-marker:before{width:38px;height:1px;left:-7px;top:12px}.tap-marker:after{height:38px;width:1px;top:-7px;left:12px}.countdown{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,12,9,.65);backdrop-filter:blur(2px);pointer-events:auto}.countdown b{font:800 112px/.9 "Noto Sans JP","Hiragino Sans",sans-serif;color:#f3cf7e;text-shadow:0 5px 0 #51391c;animation:countPop .35s ease-out}.countdown span{margin-top:18px;font-weight:800;letter-spacing:.18em}@keyframes countPop{from{transform:scale(1.55);opacity:0}to{transform:scale(1);opacity:1}}
.play-panel{flex:0 0 66px;padding:12px 14px;background:#1c2b22;text-align:center}.play-panel p{margin:0 0 9px;color:#d8ded4;font-size:12px;font-weight:700}.progress-track{height:5px;background:#0e1511;border-radius:5px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#bd8738,#f0cc7e);transition:width .3s}.dev-panel{flex:0 0 150px;padding:8px 10px;background:#1a2920;border-top:1px solid #425845}.dev-row{display:flex;gap:6px;margin-bottom:7px}.dev-row button{flex:1;padding:9px 4px;border:1px solid #607467;border-radius:4px;color:#e7ebdf;background:#31483a;font-size:11px;font-weight:800}.dev-row button.active{outline:2px solid #f3cf7e;outline-offset:-3px}.dev-row .adopt{background:#386247}.dev-row .reject{background:#713d38}.nav-row{align-items:center}.nav-row span{min-width:72px;text-align:center;color:#cfbd97;font-size:10px}.send-btn{width:100%;padding:10px;border:0;border-radius:4px;color:#1b251c;background:#d4ad64;font-size:12px;font-weight:900}.send-btn:disabled{opacity:.55}
.modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,9,6,.78);backdrop-filter:blur(5px)}.modal-card{position:relative;width:100%;padding:62px 25px 25px;text-align:center;color:#273128;background:#fbf3e0;border:2px solid #b48a46;box-shadow:0 20px 60px #000}.result-seal{position:absolute;top:-35px;left:50%;display:flex;align-items:center;justify-content:center;width:90px;height:90px;transform:translateX(-50%) rotate(-7deg);border:5px double #fff;border-radius:50%;color:#fff;background:#a33c34;font:800 22px/1 "Noto Sans JP","Hiragino Sans",sans-serif;box-shadow:0 4px 0 #5b211d}.result-seal.wrong{background:#38483e;box-shadow:0 4px 0 #1a251e}.result-lead{margin:0 0 6px;color:#8d7141;font-size:11px;font-weight:800;letter-spacing:.15em}.modal-card h2{margin:0 0 12px;font-family:"Noto Sans JP","Hiragino Sans",sans-serif;font-size:24px;line-height:1.35}.answer-explanation{min-height:42px;margin:0 0 20px;color:#5d6259;font-size:12px;line-height:1.7}.modal-card .main-btn{margin-top:5px}.complete-card{padding-top:35px}.complete-card h2{font-size:35px;color:#9a352f}.complete-card>p:not(.eyebrow){font-size:13px;line-height:1.8;margin:15px 0 25px}.toast{position:absolute;z-index:50;left:50%;bottom:24px;width:max-content;max-width:90%;padding:11px 16px;transform:translateX(-50%);border-radius:5px;color:#fff;background:rgba(0,0,0,.88);font-size:12px;font-weight:700;box-shadow:0 5px 20px #000}
@media(max-height:680px){.title-lockup{top:calc(22px + env(safe-area-inset-top))}.title-lockup h1 span{font-size:53px}.title-lockup h1 b{font-size:42px}.title-lockup h1:after{bottom:42px}.title-copy{margin-top:9px;font-size:11px}.title-menu{bottom:calc(35px + env(safe-area-inset-bottom))}.title-rule{margin-bottom:8px}.title-start{height:67px}.title-start .start-label{font-size:21px}.sub-btn{margin-top:8px;padding:8px}.resume-text{margin-top:7px}.title-note{bottom:calc(9px + env(safe-area-inset-bottom))}.rule-card{padding:18px 17px 16px}.rule-card h2{margin-bottom:12px;font-size:26px}.rule-card ol{gap:7px;margin-bottom:14px}.rule-card li{padding:8px}.game-head{height:48px}.question-bar{flex-basis:46px}.play-panel{flex-basis:58px;padding:9px 13px}.dev-panel{flex-basis:142px}}
@media(prefers-reduced-motion:reduce){.title-grain{animation:none}.title-start{transition:none}}