*{margin:0;padding:0;box-sizing:border-box;user-select:none}
body{background:#1a1a1a;color:#fff;font-family:'Segoe UI','Malgun Gothic',sans-serif;overflow:hidden;height:100vh;display:flex;justify-content:center;align-items:center}
.screen{display:none;width:100%;max-width:960px;height:100vh;max-height:720px;position:relative;background:#222;border:2px solid #444;overflow:hidden}
.screen.active{display:flex;flex-direction:column}

#title-screen{justify-content:center;align-items:center;text-align:center;background:url('https://raw.githubusercontent.com/steveJea/vrshoot/main/img/main.jpg') center/cover no-repeat}
#title-screen::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
#title-screen>*{position:relative;z-index:1}
#title-screen h1{font-size:3.2rem;letter-spacing:6px;color:#ff2222;text-shadow:0 0 20px #ff0000,0 0 40px #aa0000;margin-bottom:8px}
#title-screen .sub{font-size:1.4rem;color:#ccc;letter-spacing:4px;margin-bottom:40px}
#title-screen .game-title{font-size:1.8rem;color:#fff;margin-bottom:60px}
#title-screen .start-msg{font-size:1.1rem;color:#ff6666;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

#select-screen{background:#2a2a2a;padding:20px;flex-direction:row;gap:16px}
#select-screen h2{position:absolute;top:14px;left:0;width:100%;text-align:center;font-size:1.7rem;color:#ff4444;letter-spacing:3px;z-index:10}
.char-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1;margin-top:48px;overflow:hidden}
.boss-area{width:160px;margin-top:48px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.char-card{background:#333;border:3px solid #555;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
.char-card:hover{border-color:#ff4444;transform:scale(1.04);box-shadow:0 0 12px rgba(255,50,50,.55)}
.char-card.selected{border-color:#ffcc00;box-shadow:0 0 16px #ffcc00}
.char-card.boss-card{border-color:#ff00aa;box-shadow:0 0 10px #ff00aa}
.char-card.boss-card:hover{border-color:#ff66cc;box-shadow:0 0 16px #ff00aa}
.char-card.hidden-card{border-color:#00ccff;box-shadow:0 0 10px #00ccff}
.char-card.hidden-card:hover{border-color:#66eeff;box-shadow:0 0 16px #00ccff}
.char-card img{width:100%;height:120px;object-fit:cover;display:block}
.char-card .name{text-align:center;padding:5px 0;font-size:.8rem;background:#222}
.char-card.boss-card .name{color:#ff66cc;font-weight:bold}
.char-card.hidden-card .name{color:#66eeff;font-weight:bold}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;justify-content:center;align-items:center;z-index:9999}
.modal-overlay.show{display:flex}
.modal-box{background:#2a2a2a;border:3px solid #ff4444;border-radius:16px;padding:28px 32px;max-width:380px;width:90%;text-align:center;box-shadow:0 0 30px rgba(255,50,50,.4)}
.modal-box img{width:160px;height:160px;object-fit:cover;border-radius:12px;border:3px solid #555;margin-bottom:16px}
.modal-box .m-name{font-size:1.6rem;font-weight:bold;color:#ffcc00;margin-bottom:14px;letter-spacing:2px}
.modal-box .m-stats{text-align:left;background:#1a1a1a;border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:1rem;line-height:1.8}
.modal-box .m-stats span{color:#aaa}
.modal-box .m-stats b{color:#fff}
.modal-btns{display:flex;gap:12px;justify-content:center}
.modal-btns button{flex:1;padding:12px 0;border:none;border-radius:8px;font-size:1rem;font-weight:bold;cursor:pointer;transition:all .2s}
.btn-confirm{background:#ff4444;color:#fff}
.btn-confirm:hover{background:#ff6666}
.btn-close{background:#555;color:#fff}
.btn-close:hover{background:#777}

#vs-screen{justify-content:center;align-items:center;background:#ffffff}
.vs-container{display:flex;align-items:center;gap:40px}
.vs-char{text-align:center}
.vs-char img{width:220px;height:280px;object-fit:contain}
.vs-char .name{margin-top:12px;font-size:1.3rem;letter-spacing:2px;color:#222}
.vs-text{font-size:3.2rem;font-weight:bold;color:#ff3333;text-shadow:0 0 20px #ff0000}
.boss-vs-img{max-width:80%;max-height:70%;object-fit:contain}
.boss-vs-name{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);font-size:2.2rem;color:#fff;text-shadow:0 0 12px #000,0 0 24px #ff0000;letter-spacing:3px;background:rgba(0,0,0,.55);padding:8px 24px;border-radius:8px}

#battle-screen{background:#d0d0d0;flex-direction:column}
#battle-ui{display:flex;justify-content:space-between;padding:8px 16px;background:#333;border-bottom:2px solid #555;align-items:center;color:#fff}
.hp-box{display:flex;align-items:center;gap:8px;width:280px}
.face-score{position:relative;flex-shrink:0}
.face-score img{width:46px;height:46px;border-radius:50%;border:2px solid #888;object-fit:cover;display:block}
.score-num{position:absolute;bottom:-4px;right:-6px;min-width:22px;height:22px;background:#111;border:2px solid #ffcc00;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;color:#ffcc00;text-shadow:0 0 4px #000;z-index:2}
.hp-bar-wrap{flex:1;height:16px;background:#555;border-radius:4px;overflow:hidden;position:relative}
.hp-bar{height:100%;background:linear-gradient(90deg,#ffcc00,#ff8800);transition:width .15s}
.hp-pct{position:absolute;right:4px;top:0;bottom:0;display:flex;align-items:center;font-size:11px;font-weight:bold;color:#fff;text-shadow:0 0 3px #000}
.center-info{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:90px}
#round-info{font-size:0.85rem;font-weight:bold;color:#ffcc00;letter-spacing:1px;text-shadow:0 0 6px #000;margin-bottom:1px}
.timer{font-size:2rem;font-weight:bold;color:#fff;text-align:center;text-shadow:0 0 8px #ff4444;line-height:1}
#battle-canvas{flex:1;width:100%;display:block;background-size:cover;background-position:center;background-repeat:no-repeat}
.battle-info{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.8rem;color:#555}

.result-screen{justify-content:center;align-items:center;background:#ffffff;text-align:center}
.result-title{font-size:2.8rem;margin-bottom:24px;letter-spacing:4px}
.result-title.win{color:#ffcc00;text-shadow:0 0 18px #ffaa00}
.result-title.lose{color:#ff3333;text-shadow:0 0 18px #ff0000}
.result-faces{display:flex;gap:36px;margin-bottom:24px;justify-content:center}
.result-faces img{width:160px;height:160px;border-radius:10px;object-fit:cover;border:3px solid #555}
.win-txt{font-size:1.2rem;color:#333;max-width:480px;line-height:1.5;padding:14px 22px;background:rgba(0,0,0,.06);border-radius:8px}

#continue-screen{background:#111;justify-content:center;align-items:center}
.continue-wrap{display:flex;width:100%;height:100%;align-items:center;padding:20px}
.continue-wrap img{width:42%;max-height:85%;object-fit:contain;border-radius:12px;border:3px solid #444}
.continue-right{flex:1;text-align:center;padding:0 20px}
.continue-right .label{font-size:1.8rem;color:#ff4444;letter-spacing:4px;margin-bottom:12px}
#con-count{font-size:7.5rem;font-weight:bold;color:#ffcc00;text-shadow:0 0 40px #ff0000,0 0 80px #aa0000;line-height:1;font-variant-numeric:tabular-nums}
.continue-right .hint{font-size:1.3rem;color:#ccc;margin-top:18px}
.continue-right .remain{font-size:1.1rem;color:#888;margin-top:10px}

#gameover-screen,#ending-screen{justify-content:center;align-items:center;background:#000;background-size:cover;background-position:center}
#gameover-screen h1{font-size:3.6rem;color:#ff2222;letter-spacing:8px;text-shadow:0 0 28px #ff0000;position:relative;z-index:2}
#ending-screen{flex-direction:column;padding:36px}
#ending-img{max-width:90%;max-height:52%;object-fit:contain;margin-bottom:18px;border-radius:8px}
#ending-txt{font-size:1.1rem;line-height:1.65;color:#eee;max-width:680px;text-align:left;background:rgba(0,0,0,.7);padding:18px 22px;border-radius:10px;min-height:110px;white-space:pre-wrap}
#ending-hint{margin-top:16px;color:#aaa;font-size:.9rem}

.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(0,0)}10%,30%,50%,70%,90%{transform:translate(-6px,3px)}20%,40%,60%,80%{transform:translate(6px,-3px)}}