:root{--banana:#ffd52f;--banana-deep:#e6a500;--ink:#392b16;--green:#315a43;--cream:#fff8cf;--pink:#ff6c9f}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#e8f5e4}body{color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.banana-page{height:100svh;overflow:hidden;background:var(--cream)}.footer{display:none}.header{background:rgba(255,252,222,.9);border-bottom:1px solid rgba(74,77,32,.1)}
[hidden]{display:none!important}
.banana-game-active{touch-action:none;overscroll-behavior:none}.banana-game-active body>:not(.page-wrapper):not(script){visibility:hidden!important;pointer-events:none!important}.banana-game-active .header,.banana-game-active .footer,.banana-game-active .drawer,.banana-game-active .drawer-overlay,.banana-game-active .desktop-site-notice{display:none!important}.banana-game-active .play-screen{position:fixed;z-index:2147483647;inset:0;width:100%;height:100%;height:100dvh}
.play-screen.running .ready-label{opacity:1!important;background:#e34f78;box-shadow:0 4px 0 #982441}.play-screen.running .ready-help{opacity:0}
.photo-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.camera-choice{min-height:38px;border:2px solid #dfca72;border-radius:999px;background:#fff;color:#66551f;font-size:12px;font-weight:900}.camera-choice.selected{border-color:#e34f78;background:#fff0f5;color:#a8254c;box-shadow:0 0 0 2px rgba(227,79,120,.18)}
.game-main,.play-screen{position:relative;width:100%;height:100%}.play-screen{display:grid;place-items:center;padding:76px 24px calc(66px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 50% 45%,#fffef0 0 24%,transparent 57%),radial-gradient(circle at 12% 25%,rgba(255,116,164,.16) 0 42px,transparent 43px),radial-gradient(circle at 91% 74%,rgba(82,188,240,.18) 0 54px,transparent 55px),linear-gradient(155deg,#fff8ce,#f2ffe9 62%,#e5f5ff)}.play-screen::before,.play-screen::after{content:"";position:absolute;width:18px;height:18px;background:var(--banana);clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}.play-screen::before{top:23%;left:14%;transform:rotate(12deg)}.play-screen::after{right:12%;bottom:24%;width:25px;height:25px;background:#ff80ab;transform:rotate(-8deg)}.play-glow{position:absolute;width:min(82vw,350px);aspect-ratio:1;border:3px dashed rgba(234,176,0,.28);border-radius:50%;animation:slow-spin 18s linear infinite}.banana-hero{position:relative;z-index:2;width:min(88vw,390px);height:auto;filter:drop-shadow(0 22px 18px rgba(126,87,0,.22));transform:rotate(-8deg);animation:banana-float 2.8s ease-in-out infinite}.ready-guide{position:absolute;z-index:3;top:15%;display:grid;justify-items:center;gap:10px;text-align:center}.ready-label{margin:0;padding:7px 18px;border:2px solid #fff;border-radius:999px;background:var(--green);color:#fff;font-size:13px;font-weight:1000;letter-spacing:.28em;box-shadow:0 4px 0 #193c2a;transition:opacity .2s}.ready-help{margin:0;padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.78);color:#4f4938;font-size:12px;font-weight:900;line-height:1.55;transition:opacity .2s}.play-screen.running .banana-hero{animation-duration:1.2s}.camera-flash{position:fixed;z-index:450;inset:0;background:#fff;opacity:0;pointer-events:none}.camera-flash.fire{animation:flash .18s ease-out}.camera-video{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.modal-layer{position:fixed;z-index:90;inset:56px 0 0;display:grid;place-items:center;padding:22px 18px calc(24px + env(safe-area-inset-bottom));background:rgba(42,51,42,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto}.modal-card{width:min(100%,360px);margin:auto;padding:24px 20px 21px;border:3px solid #fff;border-radius:29px;background:linear-gradient(160deg,#fffef4,#fff9d9);text-align:center;box-shadow:0 9px 0 #dfc764,0 24px 55px rgba(40,48,31,.28)}.mini-logo,.result-logo{display:inline-flex;align-items:baseline;gap:6px;transform:rotate(-2deg);color:#fff;text-shadow:0 2px 0 #9b6500}.mini-logo span,.result-logo span{padding:5px 8px;border-radius:9px 3px 3px 9px;background:#ffb800;font-size:12px;font-weight:1000;letter-spacing:.08em}.mini-logo b,.result-logo b{padding:5px 8px;border-radius:3px 9px 9px 3px;background:#ff6d9d;font-size:15px;letter-spacing:.06em}.intro-banana{display:block;width:116px;margin:-8px auto -18px;transform:rotate(-8deg);filter:drop-shadow(0 8px 7px rgba(126,87,0,.18))}.intro-card h1{margin:0;color:#315a43;font-size:31px;line-height:1.1;letter-spacing:.03em}.howto{margin:13px 0;color:#5f563c;font-size:13px;font-weight:800;line-height:1.65}.privacy-box{padding:12px 13px;border:1px solid #e7d989;border-radius:14px;background:#fff;color:#665f4a;text-align:left;font-size:11px;font-weight:700;line-height:1.65}.setup-error{min-height:17px;margin:9px 0 0;color:#c0394e;font-size:11px;font-weight:800;line-height:1.5}.primary-button,.secondary-button{border:0;cursor:pointer;font:900 15px/1 "Helvetica Neue","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}.primary-button{width:100%;min-height:54px;margin-top:9px;border-radius:999px;background:linear-gradient(135deg,#ffd63b,#f6af14);color:#4b3500;box-shadow:0 6px 0 #b77a00}.primary-button:active{transform:translateY(3px);box-shadow:0 3px 0 #b77a00}.primary-button:disabled,.secondary-button:disabled{opacity:.45;cursor:default}
.screen-lock-guide{margin:0 0 10px;border:1px solid #dfca72;border-radius:14px;background:#fffbea;color:#574b27;text-align:left}.screen-lock-guide summary{padding:10px 12px;cursor:pointer;font-size:12px;font-weight:900;list-style-position:inside}.screen-lock-content{max-height:min(46vh,330px);padding:0 12px 11px;overflow-y:auto;overscroll-behavior:contain}.screen-lock-content section+section{margin-top:12px;padding-top:11px;border-top:1px solid #eadb9a}.screen-lock-guide h2{margin:0 0 6px;color:#315a43;font-size:12px}.screen-lock-guide ol{margin:0;padding-left:19px}.screen-lock-guide li,.screen-lock-guide p{margin:5px 0;font-size:10px;font-weight:750;line-height:1.55}.screen-lock-guide .sensor-note{padding:7px 8px;border-radius:8px;background:#fff0c9;color:#8b4c12;font-weight:900}.screen-lock-guide .guide-note{margin-top:11px;padding-top:9px;border-top:1px dashed #dfca72;color:#a34d27;font-weight:900}
.result-card{padding-top:22px}.result-card h2{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:13px 0 14px;color:#302513}.result-card h2 strong{font-size:52px;line-height:1;font-weight:1000;letter-spacing:-.04em}.result-card h2 small{color:#ae7f00;font-size:13px;font-weight:1000;letter-spacing:.16em}.photo-frame{position:relative;width:100%;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border:5px solid #fff;border-radius:19px;background:repeating-linear-gradient(135deg,#efe9d1 0 10px,#f8f3df 10px 20px);box-shadow:0 0 0 2px #e7cf67,0 7px 14px rgba(69,51,13,.16)}.photo-frame img{width:100%;height:100%;object-fit:cover}.photo-frame p{margin:0;padding:20px;color:#766d53;font-size:13px;font-weight:900}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.secondary-button{min-height:47px;border:2px solid #e6ca55;border-radius:15px;background:#fff;color:#574716;box-shadow:0 4px 0 #d1b541}.secondary-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #d1b541}.share-note{min-height:15px;margin:8px 0 0;color:#766d53;font-size:10px;font-weight:700}.result-card>.primary-button{margin-top:5px}
.interrupted-card h2{margin:18px 0 10px;color:#315a43;font-size:24px}.interrupted-card p{margin:0 0 12px;color:#665f4a;font-size:13px;font-weight:800;line-height:1.7}
@keyframes banana-float{50%{transform:translateY(-11px) rotate(-5deg)}}@keyframes slow-spin{to{transform:rotate(360deg)}}@keyframes flash{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}@media(max-height:700px){.modal-layer{padding-top:12px;padding-bottom:24px}.modal-card{padding:18px}.intro-banana{width:92px;margin-bottom:-15px}.howto{margin:9px 0}.privacy-box{font-size:10px;line-height:1.5}.result-card h2{margin:9px 0}.result-card h2 strong{font-size:43px}.photo-frame{max-height:235px}.result-actions{margin-top:11px}}@media(prefers-reduced-motion:reduce){.banana-hero,.play-glow{animation:none}}

.fullscreen-controls{position:absolute;z-index:4;bottom:calc(24px + env(safe-area-inset-bottom));left:24px;right:24px;text-align:center}.fullscreen-controls .secondary-button{padding:0 20px}.fullscreen-controls p{margin:10px 0 0;font-size:12px;line-height:1.5}.play-screen.running .fullscreen-controls{display:none}

.result-card{min-width:0}.photo-gallery{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;border-radius:18px;min-height:80px}.result-slide{display:block;flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;scroll-snap-align:start;scroll-snap-stop:always;border-radius:18px;background:#fff}.gallery-navigation{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin-top:12px}.gallery-navigation .secondary-button{font-size:28px;min-height:40px}.gallery-navigation p{font-size:11px;font-weight:800;line-height:1.5}.gallery-help{margin:10px 0 0;font-size:11px;color:#766d53}.photo-error{padding:20px;font-size:12px;line-height:1.6;background:#fff3db;border-radius:16px}

.manual-controls{position:absolute;z-index:5;left:24px;right:24px;bottom:calc(150px + env(safe-area-inset-bottom));display:flex;justify-content:center}.manual-controls .primary-button{max-width:340px;min-height:64px;font-size:22px;touch-action:manipulation}#stop-button{background:#e34f78;color:#fff;box-shadow:0 6px 0 #982441}#stop-button:focus-visible{outline:4px solid #315a43;outline-offset:5px}@media(max-height:500px){.manual-controls{bottom:110px}.ready-guide{top:6%}}

/* 下部広告の上に結果の操作領域を確保する。狭い画面では結果全体をスクロールできる。 */
#result-modal{bottom:0;padding:12px 18px calc(130px + env(safe-area-inset-bottom));align-items:start;scroll-padding-bottom:calc(130px + env(safe-area-inset-bottom));background:#fff8cf;backdrop-filter:none;-webkit-backdrop-filter:none}
#result-modal .result-card{margin:0 auto;padding-top:16px}
#result-modal .photo-gallery{margin-top:0}
#result-modal .result-slide{height:clamp(120px,calc(100dvh - 440px),380px);aspect-ratio:auto}
#result-modal .gallery-navigation{margin-top:8px}
#result-modal .gallery-help{margin:6px 0 0}
#result-modal .result-actions{margin-top:10px}

.brand-logo{display:block;object-fit:contain;height:auto;margin:0 auto}.intro-card .brand-heading{margin:0}.intro-logo{width:190px;max-width:100%}.interrupted-brand{width:160px;max-width:100%}@media(max-height:700px){.intro-logo{width:150px}}
.howto-button{width:100%;margin:0 0 16px}.howto-dialog{width:min(92vw,480px);max-height:90vh;max-height:90dvh;padding:20px;border:3px solid #fff;border-radius:24px;background:#fff9d9;color:var(--ink);text-align:center;overflow-y:auto;box-shadow:0 16px 50px rgba(40,48,31,.3)}.howto-dialog::backdrop{background:rgba(42,51,42,.65)}.howto-dialog h2{margin:0 0 14px;color:var(--green);font-size:22px}.howto-dialog img{display:block;width:100%;height:auto;max-height:62vh;max-height:62dvh;object-fit:contain;border-radius:12px}.howto-dialog form{margin-top:16px}.howto-dialog .secondary-button{width:100%}