body,html{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:#111;color:#fff}#root{width:100%;height:100%}.game-root{position:relative;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;background-image:linear-gradient(to bottom,#08192b73,#14311c33 48%,#02070a99),url(https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80);background-size:cover;background-position:center 54%;transition:filter .2s ease}.game-root:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 28%,#ffffff2e,#ffffff08 42%,#00000029);z-index:1}.game-root.hit{filter:saturate(1.25) hue-rotate(-22deg) brightness(.74)}.kuma-shooter{position:absolute;top:30%;left:55%;width:clamp(110px,14vw,230px);transform:translate(-50%);z-index:2;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.75));opacity:.94}canvas{position:relative;z-index:3}.hud-panel{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:10;color:#f2f7ff;font-family:Trebuchet MS,Segoe UI,sans-serif;max-width:340px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,#070e1ead,#08191485);border:1px solid rgba(133,208,255,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.hud-title{margin:0 0 10px;font-size:clamp(1rem,2.5vw,1.55rem);line-height:1.15}.brand-row{display:flex;align-items:center;gap:10px}.brand-logo{width:clamp(24px,3vw,34px);height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.hud-copy{margin:0 0 10px;color:#d7e7f5;font-size:clamp(.78rem,1.45vw,.96rem);line-height:1.36}.hud-webcam{margin:0 0 10px;font-size:clamp(.72rem,1.3vw,.9rem);letter-spacing:.02em}.webcam-idle,.webcam-connecting{color:#f0d58b}.webcam-connected{color:#8df3b3}.webcam-disabled{color:#9ab4cc}.webcam-error{color:#ff8a8a}.hud-score{margin:0;color:#6dff9a;font-size:clamp(1rem,2.2vw,1.35rem)}.hud-score.is-hit{color:#ff6b6b}.hud-best{margin:8px 0 0;color:#a8c7de;font-size:clamp(.75rem,1.3vw,.92rem)}.pause-btn{margin-top:10px;border:1px solid rgba(164,227,255,.4);border-radius:9px;background:#07172a9e;color:#e3f5ff;font-weight:700;font-size:.88rem;padding:6px 12px;cursor:pointer}.webcam-preview-wrap{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:12;width:min(28vw,210px);aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;border:1px solid rgba(145,220,255,.46);background:#050c15b3;box-shadow:0 8px 20px #0000006b}.webcam-preview{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.start-menu{position:absolute;top:0;right:0;bottom:0;left:0;z-index:18;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 65% 22%,#abe7ff33,#abe7ff00 36%),linear-gradient(180deg,#04081433,#0408149e)}.start-card{width:min(92vw,560px);box-sizing:border-box;padding:26px;border-radius:22px;color:#f5fbff;background:linear-gradient(165deg,#0a1934f0,#082b20e0);border:1px solid rgba(164,228,255,.36);box-shadow:0 16px 42px #00000075;text-align:center;display:flex;flex-direction:column;align-items:center;font-family:Trebuchet MS,Segoe UI,sans-serif;max-height:none;overflow:visible;scrollbar-width:none;-ms-overflow-style:none}.start-card::-webkit-scrollbar{display:none}.menu-tag{margin:0 0 8px;color:#a2dfff;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase}.menu-title{margin:0;font-size:clamp(2.1rem,5.8vw,3.4rem);line-height:1.06}.menu-logo{width:clamp(72px,12vw,108px);height:auto;margin:2px 0 10px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.36))}.menu-copy{margin:14px 0 18px;color:#d5e6f7;font-size:1.02rem;line-height:1.42;max-width:40ch}.menu-options{margin:4px 0 18px;width:100%;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:#050e1c61;border:1px solid rgba(144,216,255,.2)}.option-group{display:grid;gap:8px;justify-items:center}.option-label{margin:0;color:#cce8ff;font-size:.86rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.option-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.option-btn{border:1px solid rgba(153,223,255,.36);border-radius:10px;padding:8px 12px;font-size:.93rem;font-weight:600;color:#e6f5ff;background:#0d1e378c;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease;min-width:88px}.option-btn:hover{transform:translateY(-1px);border-color:#a5ecffa6}.option-btn.active{color:#07212b;border-color:#9cedffe6;background:linear-gradient(90deg,#8de7ff,#8ef7cf)}.sound-toggle{justify-self:center;min-width:94px}.menu-best{margin:2px 0 0;color:#abd6ef;font-size:.95rem;text-align:center}.start-btn{border:none;border-radius:12px;padding:12px 20px;font-size:1rem;font-weight:700;color:#07212b;background:linear-gradient(90deg,#8de7ff,#8ef7cf);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;box-shadow:0 8px 18px #56dcff59;min-height:46px}.menu-actions{width:100%;display:grid;gap:10px}.secondary-btn{border:1px solid rgba(168,221,255,.42);border-radius:12px;padding:11px 18px;min-height:44px;font-size:.95rem;font-weight:700;color:#dcf2ff;background:#08162aa8;cursor:pointer;transition:border-color .14s ease,transform .14s ease}.secondary-btn:hover{transform:translateY(-1px);border-color:#bbecffad}.start-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #56dcff73}.start-btn:active{transform:translateY(0)}.menu-hint{margin:12px 0 4px;color:#c6d9e8;font-size:.95rem}.menu-credits{margin:12px 0 0;color:#97b9d3;font-size:.94rem}.menu-credits a{color:#9fefff;text-decoration:none;border-bottom:1px solid rgba(159,239,255,.55)}.menu-credits a:hover{color:#d5fbff}.game-over-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(calc(100vw - 24px),620px);text-align:center;color:#fff;z-index:20;font-family:Trebuchet MS,Segoe UI,sans-serif;background:linear-gradient(180deg,#180508d1,#12161eb3);border:1px solid rgba(255,115,115,.35);padding:22px 26px;border-radius:16px;display:flex;flex-direction:column;align-items:center}.game-over-wrap,.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:12px;background:#04081275}.pause-panel{box-sizing:border-box;width:min(calc(100vw - 24px),520px);padding:20px;border-radius:18px;border:1px solid rgba(145,220,255,.38);background:linear-gradient(180deg,#091b36f0,#07241cd6);color:#f3fbff;font-family:Trebuchet MS,Segoe UI,sans-serif;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.pause-title{margin:0;font-size:clamp(1.6rem,4.4vw,2.3rem)}.pause-copy{margin:8px 0 16px;color:#c6ddef;max-width:34ch}.pause-panel .option-group{width:100%;margin-bottom:8px;padding:12px;border-radius:12px;background:#07122673;border:1px solid rgba(141,215,255,.24)}.pause-panel .option-label{text-align:center}.pause-panel .sound-toggle{width:min(220px,100%)}.game-over-options{margin:10px 0 16px;width:100%;padding:12px;border-radius:12px;background:#1c080c6b;border:1px solid rgba(255,126,126,.24)}.game-over-title{color:#ff5a5a;font-size:clamp(2rem,8vw,4rem);margin:0 0 10px;line-height:1.05}.game-over-reason{font-family:Georgia,sans-serif;font-size:clamp(1.3rem,4vw,2.2rem);color:#ffca3a;font-style:italic;margin:0 0 8px;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.game-over-subtitle{font-size:clamp(.85rem,2.5vw,1.1rem);color:#a8c7de;margin:0 0 20px;font-weight:400;letter-spacing:.05em}@media (min-width: 721px) and (max-width: 820px) and (orientation: portrait){.kuma-shooter{top:39%;left:56%;width:clamp(105px,20vw,170px)}.game-root{background-position:56% 58%}}@media (min-width: 900px) and (max-height: 820px) and (orientation: landscape){.kuma-shooter{top:30%;left:54%;width:clamp(96px,14vw,150px)}.game-root{background-position:52% 57%}}@media (max-width: 720px){.hud-panel{max-width:min(88vw,360px);padding:10px 12px}.start-card{padding:20px;border-radius:16px;width:min(92vw,520px);max-height:none}.menu-copy{font-size:.95rem}.menu-options{gap:10px;padding:12px}.option-btn{padding:8px 10px;font-size:.88rem}.start-btn,.secondary-btn{width:100%}.game-over-panel{min-width:min(92vw,500px);padding:16px}.pause-panel{width:min(calc(100vw - 24px),460px);padding:16px}.webcam-preview-wrap{width:min(34vw,160px);border-radius:10px}.kuma-shooter{top:34%;left:57%;width:clamp(90px,28vw,170px)}.game-root{background-position:60% 58%}}@media (max-width: 480px){.start-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));min-height:100vh;box-sizing:border-box}.start-card{width:calc(100vw - 24px);padding:16px;border-radius:14px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}.menu-tag{font-size:.75rem}.menu-copy,.menu-hint,.menu-credits,.menu-best{font-size:.88rem}.option-label{font-size:.74rem}.option-buttons{gap:6px;width:100%}.option-btn{flex:1 1 auto;min-height:42px}.sound-toggle{width:100%}.pause-btn{width:100%;min-height:40px}.hud-panel{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));padding:9px 10px}.game-over-panel,.pause-panel{width:calc(100vw - 24px);padding:14px}.kuma-shooter{top:37%;left:58%;width:clamp(84px,32vw,150px)}.webcam-preview-wrap{width:min(42vw,132px);top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));border-radius:8px}}@media (max-height: 760px){.start-card{max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;padding-bottom:20px;overscroll-behavior:contain}}@media (max-height: 500px) and (orientation: landscape){.kuma-shooter{top:24%;left:55%;width:clamp(82px,16vw,130px)}}.dodge-prompt{position:absolute;top:15%;left:50%;transform:translate(-50%);z-index:15;font-family:Trebuchet MS,Segoe UI,sans-serif;font-size:clamp(1.2rem,6vw,2.8rem);font-weight:900;background:#040a10bf;padding:8px min(10%,40px);width:max-content;max-width:85vw;text-align:center;border-radius:12px;border:3px solid;text-shadow:2px 2px 0 #000,0 0 10px currentColor;pointer-events:none;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 4px 12px #00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-sizing:border-box}@media (max-width: 480px){.dodge-prompt{top:25%;border-width:2px}}.dodge-prompt.left{color:#fb0;border-color:#fb0}.dodge-prompt.right{color:#0df;border-color:#0df}.loading-spinner{width:50px;height:50px;border:5px solid #333;border-top-color:#ffca3a;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
