/* ==================== 重置 ==================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}

:root{
    --bg-dark:#0d1117;--bg-card:#1a1a2e;--accent:#ff6b6b;--gold:#feca57;
    --purple:#a55eea;--blue:#48dbfb;--green:#1dd1a1;
}

html,body{height:100%;overflow:hidden;font-family:-apple-system,'PingFang SC','Helvetica Neue',sans-serif}

body{
    background:var(--bg-dark);color:#fff;
    display:flex;justify-content:center;align-items:center;
}

.app{
    width:100%;max-width:480px;height:100vh;max-height:100vh;
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,#0d1117 0%,#16213e 50%,#0f3460 100%);
}

@media(min-width:500px){.app{border-radius:0}}

/* ==================== 界面切换 ==================== */
.screen{
    position:absolute;inset:0;
    display:none;flex-direction:column;
    animation:slideIn .3s ease;
}
.screen.active{display:flex}

@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ==================== 主菜单 ==================== */
#menuScreen{overflow-y:auto;padding:0}

.menu-bg-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}

.float-emoji{
    position:absolute;font-size:36px;top:-50px;
    left:var(--x);
    animation:floatDown 8s linear infinite;
    animation-delay:var(--d);opacity:.3;
}
@keyframes floatDown{
    0%{transform:translateY(0) rotate(0);opacity:0}
    10%{opacity:.3}
    90%{opacity:.3}
    100%{transform:translateY(110vh) rotate(360deg);opacity:0}
}

.menu-content{position:relative;z-index:1;padding:30px 20px 20px;text-align:center}

.main-title{
    font-size:32px;font-weight:900;
    background:linear-gradient(45deg,#ff6b6b,#feca57,#a55eea,#48dbfb);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    animation:gradientShift 3s ease infinite;
    background-size:300% 300%;
}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.sub-title{font-size:14px;color:#888;margin:12px 0 25px;line-height:1.6}
.sub-title b{color:var(--accent)}

.game-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}

.game-card{
    display:flex;align-items:center;gap:12px;
    background:var(--bg-card);border:none;border-radius:16px;
    padding:16px;cursor:pointer;color:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    transition:all .2s ease;position:relative;overflow:hidden;
    border-left:4px solid var(--c);
}
.game-card:active{transform:scale(.96)}
.game-card::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,var(--c));
    opacity:0;transition:opacity .2s;
}
.game-card:active::after{opacity:.1}

.card-icon{font-size:36px;flex-shrink:0}
.card-info{flex:1;text-align:left}
.card-name{font-size:17px;font-weight:700;color:#fff}
.card-desc{font-size:12px;color:#888;margin-top:3px}

.card-tag{
    font-size:10px;padding:3px 8px;border-radius:10px;font-weight:700;
}
.tag-fun{background:rgba(255,107,107,.2);color:#ff6b6b}
.tag-scary{background:rgba(72,219,251,.2);color:#48dbfb}
.tag-funny{background:rgba(254,202,87,.2);color:#feca57}
.tag-horror{background:rgba(255,0,0,.2);color:#ff4444}

.menu-footer{font-size:11px;color:#555;margin-top:15px}

/* ==================== 游戏头部 ==================== */
.game-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 16px;background:rgba(0,0,0,.3);flex-shrink:0;
}

.back-btn{
    background:rgba(255,255,255,.1);border:none;border-radius:10px;
    padding:6px 14px;color:#fff;font-size:14px;cursor:pointer;
}
.back-btn:active{transform:scale(.9)}

.game-title-mini{font-size:16px;font-weight:700}
.score-mini{font-size:13px;color:var(--gold);font-weight:700}

/* ==================== 通用按钮 ==================== */
.action-btn{
    background:linear-gradient(135deg,var(--accent),#ff9f43);
    color:#fff;border:none;border-radius:25px;
    padding:14px 40px;font-size:18px;font-weight:700;cursor:pointer;
    box-shadow:0 4px 15px rgba(255,107,107,.4);
    transition:all .2s;
}
.action-btn:active{transform:scale(.93)}

/* ==================== 捏泡泡 ==================== */
.bubble-info{text-align:center;padding:12px;font-size:14px;color:#888}
.bubble-container{
    flex:1;display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;padding:16px;align-content:start;
}
.bubble{
    aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(100,200,255,.3));
    border:2px solid rgba(255,255,255,.2);
    cursor:pointer;transition:all .15s ease;
    display:flex;align-items:center;justify-content:center;
}
.bubble:active{transform:scale(.5)}
.bubble.popped{
    background:rgba(255,255,255,.05);border-color:transparent;
    transform:scale(.3);opacity:.3;
}
.bubble.popped::after{content:'💥';font-size:20px}

/* ==================== 打地鼠 ==================== */
.whack-info{text-align:center;padding:10px;font-size:13px;color:#888}
.whack-board{
    flex:1;display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;padding:20px;max-width:400px;margin:0 auto;width:100%;
}
.whack-hole{
    aspect-ratio:1;background:radial-gradient(ellipse at center bottom,#1a1a10,#0a0a05);
    border-radius:50%;position:relative;overflow:hidden;
    border:3px solid #2a2a1a;cursor:pointer;
}
.whack-mole{
    position:absolute;bottom:-100%;left:50%;transform:translateX(-50%);
    font-size:48px;transition:bottom .15s ease;
}
.whack-hole.active .whack-mole{bottom:10%}
.whack-hole.hit .whack-mole{
    bottom:-100%;transition:bottom .1s ease;
}
.whack-hole.hit::after{
    content:'💥';position:absolute;top:20%;left:50%;
    transform:translateX(-50%);font-size:36px;
    animation:hitPop .3s ease;
}
@keyframes hitPop{0%{transform:translateX(-50%) scale(0)}50%{transform:translateX(-50%) scale(1.3)}100%{transform:translateX(-50%) scale(0)}}

.whack-result{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:20px;padding:20px;
}
.result-emoji{font-size:80px;animation:bounce 1s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.result-text{font-size:20px;font-weight:700;text-align:center;line-height:1.6;color:#fff}

/* ==================== 尖叫鸡 ==================== */
.scream-stage{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:20px;padding:20px;
}
.scream-chicken{
    font-size:120px;cursor:pointer;
    transition:transform .1s ease;
    position:relative;
}
.scream-chicken:active{transform:scale(.7) rotate(-10deg)}
.scream-chicken.screaming{animation:screamShake .15s ease infinite}
@keyframes screamShake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,2px) rotate(-3deg)}50%{transform:translate(3px,-2px) rotate(3deg)}75%{transform:translate(-2px,3px) rotate(-2deg)}100%{transform:translate(0,0) rotate(0)}}

.scream-text{
    position:absolute;top:-40px;left:50%;transform:translateX(-50%);
    font-size:24px;font-weight:900;color:var(--accent);
    white-space:nowrap;text-shadow:2px 2px 4px rgba(0,0,0,.5);
    opacity:0;transition:opacity .2s;
}
.scream-text.show{opacity:1;animation:screamTextPop .3s ease}
@keyframes screamTextPop{0%{transform:translateX(-50%) scale(0)}50%{transform:translateX(-50%) scale(1.3)}100%{transform:translateX(-50%) scale(1)}}

.scream-hint{font-size:16px;color:#888}
.scream-meter{
    width:80%;max-width:300px;height:24px;
    background:rgba(255,255,255,.1);border-radius:12px;overflow:hidden;
}
.meter-bar{
    height:100%;width:0%;
    background:linear-gradient(90deg,#1dd1a1,#feca57,#ff6b6b,#ee5a24);
    transition:width .3s ease;border-radius:12px;
}
.scream-level{font-size:18px;font-weight:700;color:var(--gold)}

/* ==================== 命运转盘 ==================== */
.wheel-stage{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:25px;padding:20px;
}
.wheel-pointer{
    font-size:36px;z-index:10;
    animation:pointerBounce 1s ease infinite;
}
@keyframes pointerBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.wheel{
    width:280px;height:280px;border-radius:50%;
    position:relative;
    background:conic-gradient(
        #ff6b6b 0deg 60deg,
        #feca57 60deg 120deg,
        #48dbfb 120deg 180deg,
        #1dd1a1 180deg 240deg,
        #a55eea 240deg 300deg,
        #ee5a24 300deg 360deg
    );
    border:6px solid rgba(255,255,255,.2);
    box-shadow:0 0 30px rgba(255,107,107,.3);
    transition:transform 4s cubic-bezier(.17,.67,.12,.99);
}
.wheel-center{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:40px;
}
.wheel-btn{margin-top:10px}
.wheel-result{
    min-height:60px;font-size:18px;font-weight:700;
    text-align:center;max-width:350px;line-height:1.5;
    color:var(--gold);opacity:0;transition:opacity .3s;
}
.wheel-result.show{opacity:1;animation:resultPop .5s ease}
@keyframes resultPop{0%{transform:scale(0.5)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ==================== 暴打老板 ==================== */
.boss-stage{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:20px;padding:20px;
}
.boss-quotes{
    font-size:16px;color:var(--accent);font-weight:700;
    min-height:24px;text-align:center;
}
.boss-face{
    font-size:100px;cursor:pointer;
    transition:transform .1s ease;
    position:relative;
}
.boss-face:active{transform:scale(.85)}
.boss-face.hit{animation:bossHit .2s ease}
@keyframes bossHit{0%{transform:translate(0)}25%{transform:translate(-8px,3px) rotate(-5deg)}50%{transform:translate(6px,-3px) rotate(5deg)}75%{transform:translate(-4px,2px) rotate(-3deg)}100%{transform:translate(0)}}

.boss-hp-bar{
    width:200px;height:16px;
    background:rgba(255,255,255,.1);border-radius:8px;
    overflow:hidden;margin-top:10px;
}
.boss-hp-fill{
    height:100%;width:100%;
    background:linear-gradient(90deg,#1dd1a1,#feca57,#ff6b6b);
    transition:width .3s ease;border-radius:8px;
}

.boss-weapons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.weapon-btn{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    border-radius:12px;padding:10px 16px;color:#fff;
    font-size:14px;cursor:pointer;transition:all .2s;
}
.weapon-btn:active{transform:scale(.9);background:rgba(255,107,107,.3)}
.weapon-btn.active{background:var(--accent);border-color:var(--accent)}

.boss-effect{
    position:absolute;font-size:40px;
    pointer-events:none;opacity:0;
}
.boss-effect.show{
    opacity:1;animation:effectFly .6s ease;
}
@keyframes effectFly{
    0%{opacity:1;transform:scale(0) translateY(0)}
    100%{opacity:0;transform:scale(1.5) translateY(-60px)}
}

/* ==================== 恐怖盲盒 ==================== */
.horror-stage{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:20px;padding:20px;
}
.horror-hint{font-size:15px;color:#666;text-align:center}
.horror-boxes{
    display:grid;grid-template-columns:repeat(3,1fr);gap:15px;
}
.horror-box{
    width:90px;height:90px;border-radius:16px;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
    border:2px solid #2a2a4a;
    display:flex;align-items:center;justify-content:center;
    font-size:40px;cursor:pointer;transition:all .2s;
}
.horror-box:active{transform:scale(.9)}
.horror-box.opened{background:rgba(255,255,255,.05);border-color:transparent}
.horror-box.opened .box-icon{display:none}

.horror-display{
    min-height:120px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:10px;
}
.horror-emoji{font-size:72px}
.horror-text{font-size:16px;color:#ccc;text-align:center;max-width:300px;line-height:1.5}

/* ==================== Toast ==================== */
.toast{
    position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);
    background:rgba(0,0,0,.85);color:#fff;padding:12px 24px;
    border-radius:20px;font-size:14px;z-index:500;
    transition:transform .3s ease;max-width:90%;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ==================== Jumpscare ==================== */
.jumpscare-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.95);
    display:none;justify-content:center;align-items:center;
    z-index:999;
}
.jumpscare-overlay.show{display:flex;animation:jumpShake .1s ease infinite}
@keyframes jumpShake{0%,100%{transform:translate(0)}25%{transform:translate(-10px,5px)}50%{transform:translate(10px,-5px)}75%{transform:translate(-5px,10px)}}

.jumpscare-face{
    font-size:150px;animation:jumpZoom .15s ease;
}
@keyframes jumpZoom{0%{transform:scale(0)}100%{transform:scale(1.2)}}

/* ==================== 响应式 ==================== */
@media(max-width:380px){
    .main-title{font-size:26px}
    .card-name{font-size:15px}
    .whack-mole{font-size:38px}
    .scream-chicken{font-size:90px}
    .wheel{width:230px;height:230px}
    .boss-face{font-size:80px}
}