/* ================================================================
   家里的"隐形怪兽" — 电器安全H5 样式表
   风格：治愈系动漫 + 轻惊悚
   ================================================================ */

/* ========== Reset & Base ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-overflow-scrolling:touch; }
body { background:#0a0612; }

/* ========== Wrapper ========== */
.h5-wrapper { position:relative; width:100%; height:100%; max-width:414px; margin:0 auto; overflow:hidden; }

/* ========== Page Base ========== */
.h5-container { width:100%; height:100%; position:relative; overflow:hidden; }
.page { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transform:translateY(30px); transition:opacity .55s ease,transform .55s ease; pointer-events:none; }
.page.active { opacity:1; transform:translateY(0); pointer-events:auto; z-index:1; }
.page-content { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.page-bg-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.effect-canvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.elem { pointer-events:none; z-index:2; }

/* ========== Page BG ========== */
.bg-night-room { position:absolute; top:0;left:0;width:100%;height:100%; background:radial-gradient(ellipse at 50% 70%,#1a1030 0%,#0d0a1a 40%,#050510 100%); z-index:0; }

/* ========== Page Indicator ========== */
.page-indicator { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:30; }
.indicator-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:all .3s; }
.indicator-dot.active { background:#ffd93d; width:20px; border-radius:3px; }

/* ========== Music Button ========== */
.music-btn { position:fixed; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; z-index:40; border:1px solid rgba(255,255,255,.15); }

/* ========== Page 1: Cover ========== */
.cover-spark-canvas { position:absolute; top:0;left:0;width:100%;height:100%; z-index:1; pointer-events:none; }
.page-1 .page-content { justify-content:center; }
.elem-title-p1 { width:78%; max-width:300px; animation:titleFloatIn .8s ease-out; z-index:3; margin-bottom:8px; }
.elem-subtitle-p1 { width:55%; max-width:200px; animation:titleFloatIn 1s ease-out; z-index:3; margin-bottom:40px; }
.elem-character-p1 { width:65%; max-width:260px; animation:charFloatIn 1.2s ease-out; z-index:3; margin-bottom:20px; }
.elem-monster-shadow { position:absolute; bottom:8%; width:50%; opacity:.12; z-index:1; animation:shadowPulse 3s ease-in-out infinite; }
.btn-enter-wrap { position:relative; cursor:pointer; z-index:10; animation:btnBounce 2s ease-in-out infinite; }
.btn-enter-wrap img { width:160px; display:block; }
.btn-glow { position:absolute; top:50%; left:50%; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(255,200,60,.3),transparent 70%); transform:translate(-50%,-50%); animation:glowPulse 1.5s ease-in-out infinite; pointer-events:none; }
.cover-hint { color:rgba(255,255,255,.5); font-size:13px; z-index:3; margin-top:12px; letter-spacing:.05em; }

@keyframes titleFloatIn { from{opacity:0;transform:translateY(-25px)} to{opacity:1;transform:translateY(0)} }
@keyframes charFloatIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes shadowPulse { 0%,100%{opacity:.1} 50%{opacity:.18} }
@keyframes btnBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes glowPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.3} 50%{transform:translate(-50%,-50%) scale(1.3);opacity:.6} }

/* ========== Page 2: Role + Plug Warning ========== */
.elem-sprite-p2 { position:absolute; top:5%; right:5%; width:100px; z-index:3; animation:floatSprite 2.5s ease-in-out infinite; }
.elem-text1-p2 { position:absolute; top:22%; left:50%; transform:translateX(-50%); width:70%; max-width:280px; z-index:3; }
.elem-text2-p2 { position:absolute; top:38%; left:50%; transform:translateX(-50%); width:65%; max-width:260px; z-index:3; }
.elem-text3-p2 { position:absolute; top:52%; left:50%; transform:translateX(-50%); width:60%; max-width:240px; z-index:3; }

.plug-zone { position:absolute; bottom:15%; left:50%; transform:translateX(-50%); width:55%; height:100px; z-index:10; cursor:pointer; }
.plug-flash { position:absolute; top:50%; left:50%; width:16px; height:16px; border-radius:50%; background:#ff4444; transform:translate(-50%,-50%); box-shadow:0 0 20px #ff4444,0 0 40px #ff2222; animation:flashWarn 1s infinite; }
@keyframes flashWarn { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.5)} }

.warning-popup { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:rgba(20,0,0,.95); border:2px solid #ff4444; border-radius:16px; padding:24px; text-align:center; z-index:20; transition:transform .35s cubic-bezier(.175,.885,.32,1.275); pointer-events:none; }
.warning-popup.show { transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.warning-icon { font-size:40px; margin-bottom:8px; }
.warning-popup p { color:#ff6666; font-size:18px; font-weight:700; }
.warning-sub { font-size:13px !important; font-weight:400 !important; color:#ff9999 !important; margin-top:4px; }

.hint-bottom { position:absolute; bottom:6%; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55); font-size:13px; z-index:10; text-align:center; }

@keyframes floatSprite { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ========== Page 3: Monster ========== */
.elem-title1-p3 { position:absolute; top:6%; left:50%; transform:translateX(-50%); width:60%; max-width:240px; z-index:3; }
.elem-title2-p3 { position:absolute; top:15%; left:50%; transform:translateX(-50%); width:50%; max-width:200px; z-index:3; }

.monster-zone { position:absolute; top:22%; left:50%; transform:translateX(-50%); width:75%; height:45%; display:flex; align-items:center; justify-content:center; z-index:5; cursor:pointer; }
.monster-main { max-width:80%; max-height:100%; transition:transform .3s; }
.monster-zone.enlarged .monster-main { transform:scale(1.7); }
.monster-effect1, .monster-effect2 { position:absolute; max-width:55%; opacity:.5; animation:effectSpin 3s linear infinite; }
.monster-effect2 { animation-duration:4s; animation-direction:reverse; }

.hint-press { bottom:20%; }

.choice-btns { position:absolute; bottom:6%; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }
.choice-btn { padding:10px 22px; border-radius:25px; font-size:14px; font-weight:700; cursor:pointer; border:none; transition:all .2s; font-family:inherit; }
.choice-btn.safe { background:#4caf50; color:#fff; }
.choice-btn.danger { background:#ff4444; color:#fff; }
.choice-btn:active { transform:scale(.94); }

@keyframes effectSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ========== Page 4: Compare ========== */
.compare-slider { width:90%; margin-top:8%; overflow:hidden; z-index:5; border-radius:12px; }
.compare-track { display:flex; transition:transform .4s ease; }
.compare-item { min-width:100%; text-align:center; padding:10px; }
.compare-item img { width:70%; max-width:220px; }
.compare-label { display:block; margin-top:6px; font-size:15px; font-weight:700; }
.compare-label.bad { color:#ff6666; }
.compare-label.good { color:#4caf50; }
.elem-p4-3 { position:absolute; bottom:28%; left:8%; width:35%; z-index:3; }
.elem-p4-4 { position:absolute; bottom:30%; right:8%; width:30%; z-index:3; }
.elem-p4-5 { position:absolute; bottom:20%; left:50%; transform:translateX(-50%); width:40%; z-index:3; }

.tip-card { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:85%; background:rgba(10,20,50,.9); border:1px solid rgba(100,180,255,.3); border-radius:10px; padding:12px 16px; z-index:10; opacity:0; transition:opacity .4s; }
.tip-card.show { opacity:1; }
.tip-title { color:#66ccff; font-size:14px; font-weight:700; margin-bottom:4px; }
.tip-body { color:rgba(255,255,255,.75); font-size:13px; line-height:1.5; }

/* ========== Page 5: Wet Hands Quiz ========== */
.elem-p5-01{position:absolute;top:4%;left:5%;width:30%;z-index:3}
.elem-p5-02{position:absolute;top:4%;right:5%;width:30%;z-index:3}
.elem-p5-03{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:50%;z-index:3}
.elem-p5-04{position:absolute;top:22%;left:8%;width:25%;z-index:3}
.elem-p5-05{position:absolute;top:24%;right:8%;width:25%;z-index:3}
.elem-p5-06{position:absolute;top:32%;left:12%;width:20%;z-index:3}
.elem-p5-07{position:absolute;top:35%;right:12%;width:20%;z-index:3}
.elem-p5-08{position:absolute;top:42%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p5-09{position:absolute;bottom:32%;left:8%;width:28%;z-index:3}
.elem-p5-10{position:absolute;bottom:35%;right:8%;width:28%;z-index:3}
.artboard-p5{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:70%;max-width:280px;z-index:2}

.quiz-area-p5 { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); width:85%; text-align:center; z-index:10; }
.q-text { color:#fff; font-size:17px; font-weight:700; margin-bottom:12px; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.q-options { display:flex; gap:12px; justify-content:center; }
.q-btn { padding:12px 30px; border:none; border-radius:25px; font-size:16px; font-weight:700; cursor:pointer; transition:all .25s; color:#fff; font-family:inherit; }
.q-yes { background:#ff4444; }
.q-no { background:#4caf50; }
.q-btn:active { transform:scale(.93); }
.q-btn.flash-right { box-shadow:0 0 25px #4caf50; }
.q-btn.flash-wrong { box-shadow:0 0 25px #ff4444; }
.q-feedback { margin-top:10px; font-size:18px; font-weight:700; min-height:28px; }

/* ========== Page 6: Drag Repair ========== */
.elem-p6-01{position:absolute;top:3%;left:5%;width:25%;z-index:3}
.elem-p6-02{position:absolute;top:3%;right:5%;width:25%;z-index:3}
.elem-p6-03{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:40%;z-index:3}
.elem-p6-04{position:absolute;top:18%;left:6%;width:22%;z-index:3}
.elem-p6-05{position:absolute;top:20%;right:6%;width:22%;z-index:3}
.elem-p6-06{position:absolute;top:28%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p6-07{position:absolute;top:35%;left:10%;width:20%;z-index:3}
.elem-p6-08{position:absolute;top:38%;right:10%;width:20%;z-index:3}
.elem-p6-09{position:absolute;top:46%;left:50%;transform:translateX(-50%);width:30%;z-index:3}
.elem-p6-10{position:absolute;top:54%;left:8%;width:22%;z-index:3}
.elem-p6-11{position:absolute;top:56%;right:8%;width:22%;z-index:3}
.elem-p6-12{position:absolute;bottom:28%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p6-13{position:absolute;bottom:20%;left:10%;width:20%;z-index:3}
.elem-p6-14{position:absolute;bottom:20%;right:10%;width:20%;z-index:3}

.drag-game { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:85%; display:flex; justify-content:space-between; align-items:center; z-index:10; }
.drag-source { width:70px; height:70px; background:rgba(255,255,255,.1); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab; z-index:15; border:1px dashed rgba(255,255,255,.3); }
.drag-source img { width:40px; height:40px; object-fit:contain; }
.drag-source span { color:rgba(255,255,255,.6); font-size:10px; margin-top:2px; }
.drag-source.dragging { opacity:.7; transform:scale(1.15); cursor:grabbing; background:rgba(255,255,255,.2); }
.drag-target { width:100px; height:70px; border:2px dashed rgba(255,255,255,.35); border-radius:12px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:12px; text-align:center; transition:all .3s; }
.drag-target.hover { border-color:#4caf50; background:rgba(76,175,80,.15); }
.drag-target.fixed { border-color:#4caf50; background:rgba(76,175,80,.2); border-style:solid; }
.repair-msg { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); color:#4caf50; font-size:16px; font-weight:700; opacity:0; transition:opacity .5s; z-index:10; }
.repair-msg.show { opacity:1; }

/* ========== Page 7: Timer ========== */
.elem-p7-01{position:absolute;top:2%;left:3%;width:20%;z-index:3}
.elem-p7-02{position:absolute;top:2%;right:3%;width:20%;z-index:3}
.elem-p7-03{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p7-04{position:absolute;top:12%;left:5%;width:18%;z-index:3}
.elem-p7-05{position:absolute;top:12%;right:5%;width:18%;z-index:3}
.elem-p7-06{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:30%;z-index:3}
.elem-p7-07{position:absolute;top:24%;left:4%;width:16%;z-index:3}
.elem-p7-08{position:absolute;top:24%;right:4%;width:16%;z-index:3}
.elem-p7-09{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:28%;z-index:3}
.elem-p7-10{position:absolute;top:36%;left:6%;width:16%;z-index:3}
.elem-p7-11{position:absolute;top:36%;right:6%;width:16%;z-index:3}
.elem-p7-12{position:absolute;top:42%;left:50%;transform:translateX(-50%);width:26%;z-index:3}
.elem-p7-13{position:absolute;top:48%;left:4%;width:16%;z-index:3}
.elem-p7-14{position:absolute;top:48%;right:4%;width:16%;z-index:3}
.elem-p7-15{position:absolute;top:54%;left:50%;transform:translateX(-50%);width:26%;z-index:3}
.elem-p7-16{position:absolute;top:60%;left:5%;width:16%;z-index:3}
.elem-p7-17{position:absolute;top:60%;right:5%;width:16%;z-index:3}
.elem-p7-18{position:absolute;top:66%;left:50%;transform:translateX(-50%);width:24%;z-index:3}
.elem-p7-19{position:absolute;top:72%;left:6%;width:16%;z-index:3}
.elem-p7-20{position:absolute;top:72%;right:6%;width:16%;z-index:3}
.elem-p7-21{position:absolute;top:78%;left:50%;transform:translateX(-50%);width:22%;z-index:3}
.elem-p7-22{position:absolute;bottom:20%;left:8%;width:16%;z-index:3}
.elem-p7-23{position:absolute;bottom:20%;right:8%;width:16%;z-index:3}
.elem-p7-24{position:absolute;bottom:16%;left:25%;width:16%;z-index:3}
.elem-p7-25{position:absolute;bottom:16%;right:25%;width:16%;z-index:3}

.timer-game { position:absolute; bottom:4%; left:50%; transform:translateX(-50%); text-align:center; z-index:10; }
.timer-countdown { font-size:38px; font-weight:700; color:#ff4444; font-family:"Courier New",monospace; margin-bottom:4px; }
.timer-warn { color:#ff8888; font-size:14px; margin-bottom:10px; }
.btn-unplug { padding:12px 28px; background:linear-gradient(135deg,#ff4444,#ff6b35); color:#fff; border:none; border-radius:25px; font-size:16px; font-weight:700; cursor:pointer; transition:all .2s; font-family:inherit; }
.btn-unplug:active { transform:scale(.94); }
.btn-unplug.safe { background:linear-gradient(135deg,#4caf50,#66bb6a); }
.timer-hint { color:rgba(255,255,255,.4); font-size:12px; margin-top:6px; }

/* ========== Page 8: Fog Slide ========== */
.elem-p8-01{position:absolute;top:3%;left:5%;width:25%;z-index:3}
.elem-p8-02{position:absolute;top:3%;right:5%;width:25%;z-index:3}
.elem-p8-03{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:40%;z-index:3}
.elem-p8-04{position:absolute;top:20%;left:6%;width:22%;z-index:3}
.elem-p8-05{position:absolute;top:22%;right:6%;width:22%;z-index:3}
.elem-p8-06{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p8-07{position:absolute;top:40%;left:8%;width:25%;z-index:3}
.elem-p8-08{position:absolute;top:42%;right:8%;width:25%;z-index:3}
.elem-p8-09{position:absolute;top:52%;left:50%;transform:translateX(-50%);width:30%;z-index:3}

.fog-cover { position:absolute; top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,.75); z-index:8; transition:opacity .3s; pointer-events:none; }
.fog-cover.gone { opacity:0; }
.slide-clear { position:absolute; bottom:10%; left:50%; transform:translateX(-50%); width:82%; text-align:center; z-index:10; }
.slide-bar { width:100%; height:42px; background:rgba(255,255,255,.1); border-radius:21px; position:relative; overflow:hidden; }
.slide-knob { position:absolute; top:2px; left:2px; width:38px; height:38px; background:linear-gradient(135deg,#667eea,#764ba2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; cursor:pointer; z-index:1; transition:left .15s; touch-action:none; }
.slide-bar.done { background:rgba(76,175,80,.25); }
.slide-bar.done .slide-knob { background:#4caf50; left:calc(100% - 40px); }
.slide-label { display:block; color:rgba(255,255,255,.45); font-size:12px; margin-top:8px; }
.monsters-gather { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:12; display:none; }
.monsters-gather.show { display:block; }
.monsters-gather p { color:#fff; font-size:18px; font-weight:700; margin:4px 0; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.btn-start-battle { padding:12px 32px; background:linear-gradient(135deg,#ff4444,#ff6b35); color:#fff; border:none; border-radius:25px; font-size:16px; font-weight:700; cursor:pointer; margin-top:14px; font-family:inherit; }

/* ========== Page 9: Quiz ========== */
.elem-p9-01{position:absolute;top:2%;left:4%;width:20%;z-index:3}
.elem-p9-02{position:absolute;top:2%;right:4%;width:20%;z-index:3}
.elem-p9-03{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:40%;z-index:3}
.elem-p9-04{position:absolute;top:16%;left:5%;width:18%;z-index:3}
.elem-p9-05{position:absolute;top:18%;right:5%;width:18%;z-index:3}
.elem-p9-06{position:absolute;top:26%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p9-07{position:absolute;top:34%;left:6%;width:18%;z-index:3}
.elem-p9-08{position:absolute;top:36%;right:6%;width:18%;z-index:3}
.elem-p9-09{position:absolute;top:44%;left:50%;transform:translateX(-50%);width:30%;z-index:3}
.elem-p9-10{position:absolute;top:52%;left:8%;width:18%;z-index:3}
.elem-p9-11{position:absolute;top:54%;right:8%;width:18%;z-index:3}
.elem-p9-12{position:absolute;top:62%;left:50%;transform:translateX(-50%);width:28%;z-index:3}
.elem-p9-13{position:absolute;top:72%;left:30%;width:20%;z-index:3}

.quiz-box { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); width:85%; z-index:10; }
.quiz-progress { text-align:center; color:rgba(255,255,255,.5); font-size:13px; margin-bottom:6px; }
.quiz-question { color:#fff; font-size:17px; font-weight:700; text-align:center; margin-bottom:14px; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.quiz-choices { display:flex; flex-direction:column; gap:8px; }
.q-choice { padding:10px 16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:10px; color:#fff; font-size:15px; cursor:pointer; transition:all .25s; text-align:left; font-family:inherit; }
.q-choice:active { transform:scale(.98); }
.q-choice.right { background:rgba(76,175,80,.4); border-color:#4caf50; }
.q-choice.wrong { background:rgba(255,68,68,.4); border-color:#ff4444; }
.q-choice.disabled { pointer-events:none; opacity:.6; }
.quiz-result { text-align:center; font-size:16px; font-weight:700; margin-top:10px; min-height:24px; }

/* ========== Page 10: Battle ========== */
.elem-p10-01{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:40%;z-index:3}
.elem-p10-02{position:absolute;top:20%;left:4%;width:20%;z-index:3}
.elem-p10-03{position:absolute;top:22%;right:4%;width:20%;z-index:3}
.elem-p10-04{position:absolute;top:30%;left:8%;width:18%;z-index:3}
.elem-p10-05{position:absolute;top:32%;right:8%;width:18%;z-index:3}
.elem-p10-06{position:absolute;top:45%;left:50%;transform:translateX(-50%);width:30%;z-index:3}
.elem-p10-07{position:absolute;top:58%;left:6%;width:18%;z-index:3}
.elem-p10-08{position:absolute;top:60%;right:6%;width:18%;z-index:3}
.elem-p10-09{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);width:25%;z-index:3}

.battle-ui { position:absolute; bottom:6%; left:50%; transform:translateX(-50%); width:85%; text-align:center; z-index:10; }
.boss-area { margin-bottom:10px; }
.boss-img { width:120px; animation:bossFloat 1.5s ease-in-out infinite; }
.boss-hp-bar { width:100%; height:8px; background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden; margin:6px 0; }
.boss-hp-fill { width:100%; height:100%; background:linear-gradient(90deg,#ff4444,#ffd93d); border-radius:4px; transition:width .15s; }
.boss-name { color:#ff6666; font-size:13px; font-weight:700; }
.btn-smash { padding:14px 40px; background:linear-gradient(135deg,#ff6b35,#ffd93d); color:#fff; border:none; border-radius:30px; font-size:20px; font-weight:700; cursor:pointer; animation:smashPulse .7s infinite; transition:transform .06s; font-family:inherit; }
.btn-smash:active { transform:scale(.88); }
.btn-smash.tired { opacity:.4; pointer-events:none; }
.combo-display { color:#ffd93d; font-size:22px; font-weight:700; margin-top:8px; min-height:30px; }

.victory-screen { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:20; background:rgba(0,0,0,.8); border-radius:20px; padding:30px 40px; border:2px solid #ffd93d; }
.victory-screen.show { display:block; animation:popIn .5s ease-out; }
.victory-screen h2 { color:#ffd93d; font-size:30px; margin-bottom:8px; }
.victory-screen p { color:#fff; font-size:16px; margin-bottom:16px; }
.btn-continue { padding:10px 28px; background:#ffd93d; color:#333; border:none; border-radius:25px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }

@keyframes bossFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes smashPulse { 0%,100%{box-shadow:0 4px 15px rgba(255,107,53,.4)} 50%{box-shadow:0 4px 30px rgba(255,107,53,.7)} }
@keyframes popIn { from{transform:translate(-50%,-50%) scale(0);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }

/* ========== Page 11: Summary ========== */
.elem-p11-01{position:absolute;top:2%;left:4%;width:20%;z-index:3}
.elem-p11-02{position:absolute;top:2%;right:4%;width:20%;z-index:3}
.elem-p11-03{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:42%;z-index:3}
.elem-p11-04{position:absolute;top:18%;left:5%;width:20%;z-index:3}
.elem-p11-05{position:absolute;top:20%;right:5%;width:20%;z-index:3}
.elem-p11-06{position:absolute;top:28%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p11-07{position:absolute;top:38%;left:8%;width:20%;z-index:3}
.elem-p11-08{position:absolute;top:40%;right:8%;width:20%;z-index:3}
.elem-p11-09{position:absolute;top:48%;left:50%;transform:translateX(-50%);width:32%;z-index:3}
.elem-p11-10{position:absolute;top:60%;left:6%;width:20%;z-index:3}
.elem-p11-11{position:absolute;top:62%;right:6%;width:20%;z-index:3}
.elem-p11-12{position:absolute;top:72%;left:50%;transform:translateX(-50%);width:28%;z-index:3}

.summary-list { position:absolute; bottom:15%; left:50%; transform:translateX(-50%); width:82%; display:flex; flex-direction:column; gap:8px; z-index:10; }
.s-item { background:rgba(255,255,255,.08); color:#fff; padding:10px 16px; border-radius:8px; font-size:15px; border-left:4px solid #4caf50; opacity:0; animation:slideIn .5s forwards; }
.s-item.s1{animation-delay:.2s}.s-item.s2{animation-delay:.4s}.s-item.s3{animation-delay:.6s}.s-item.s4{animation-delay:.8s}
@keyframes slideIn { from{opacity:0;transform:translateX(-15px)} to{opacity:1;transform:translateX(0)} }
.btn-to-share { position:absolute; bottom:5%; padding:12px 30px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:25px; font-size:15px; font-weight:700; cursor:pointer; z-index:10; font-family:inherit; }

/* ========== Page 12: Result ========== */
.elem-p12-01{position:absolute;top:2%;left:3%;width:18%;z-index:3}
.elem-p12-02{position:absolute;top:2%;right:3%;width:18%;z-index:3}
.elem-p12-03{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:38%;z-index:3}
.elem-p12-04{position:absolute;top:16%;left:5%;width:18%;z-index:3}
.elem-p12-05{position:absolute;top:18%;right:5%;width:18%;z-index:3}
.elem-p12-06{position:absolute;top:28%;left:50%;transform:translateX(-50%);width:35%;z-index:3}
.elem-p12-07{position:absolute;top:38%;left:6%;width:18%;z-index:3}
.elem-p12-08{position:absolute;top:40%;right:6%;width:18%;z-index:3}
.elem-p12-09{position:absolute;top:50%;left:50%;transform:translateX(-50%);width:30%;z-index:3}

.result-card { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); width:85%; text-align:center; z-index:10; }
.card-header { color:#ffd93d; font-size:18px; font-weight:700; margin-bottom:6px; }
.card-badge { display:inline-block; padding:6px 22px; background:linear-gradient(135deg,#ffd93d,#ff6b35); color:#fff; border-radius:20px; font-size:20px; font-weight:700; margin:4px 0; }
.card-stars { font-size:26px; margin:4px 0; }
.card-msg { color:rgba(255,255,255,.7); font-size:14px; margin-bottom:12px; }
.card-btns { display:flex; gap:10px; justify-content:center; }
.card-btn { padding:10px 22px; border:none; border-radius:25px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
.card-btn:active { transform:scale(.95); }
.share-btn { background:#4caf50; color:#fff; }
.restart-btn { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); }

/* ========== Responsive ========== */
@media(max-width:360px) {
  .q-text{font-size:15px}
  .quiz-question{font-size:15px}
  .btn-smash{font-size:17px;padding:12px 30px}
  .timer-countdown{font-size:30px}
}