/* 基础变量与重置 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#f7fbff;
    --ink:#232a34;
    --muted:#7a8899;
    --white:#fff;
    --brand:#7c5cff;
    --brand-2:#ff7cc8;
    --success:#2ecc71;
    --danger:#ff5252;
    --slot:#e6eef7;
    --tray:#eef5ff;
    --shadow-sm:0 2px 8px rgba(0,0,0,.08);
    --shadow-md:0 6px 20px rgba(0,0,0,.12);
    --ease:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth}
body{
    font-family:'Microsoft YaHei','PingFang SC','Hiragino Sans GB',Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#f9fdff 0%,#f1f7ff 100%);
    min-height:100vh;
    user-select:none;
    -webkit-user-select:none;
}
.game-app{position:relative}
.game-app::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(16px 10px at 10% 20%, rgba(255,255,255,.65) 0 60%, transparent 61%) repeat,
      radial-gradient(18px 12px at 60% 70%, rgba(255,255,255,.6) 0 60%, transparent 61%) repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60' viewBox='0 0 80 60'%3E%3Cg opacity='.18'%3E%3Cellipse cx='30' cy='30' rx='22' ry='16' fill='%23ffffff'/%3E%3Ccircle cx='50' cy='28' r='8' fill='%232f2f2f'/%3E%3Ccircle cx='46' cy='26' r='1.8' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") repeat;
    background-size:220px 140px, 260px 160px, 120px 90px;
    opacity:.35;
}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 22px;border-radius:14px;border:0;cursor:pointer;
    font-weight:700;letter-spacing:.2px;transition:transform .15s var(--ease),box-shadow .15s var(--ease),opacity .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary,.btn.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-md)}
.btn.ghost,.btn.btn-ghost{background:transparent;border:2px solid rgba(124,92,255,.25);color:var(--brand)}
.btn.small{padding:8px 14px;border-radius:10px;font-size:.9rem}

/* 英雄页（奔跑小羊） */
.hero{
    min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #fecfef 75%, #fecfef 100%);
    background-size:400% 400%;animation:heroGradient 15s ease infinite;
}
@keyframes heroGradient{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.sheep-clouds{
    position:absolute;inset:0;background:
      radial-gradient(closest-side at 20% 20%,rgba(255,255,255,.8),transparent 60%),
      radial-gradient(closest-side at 70% 30%,rgba(255,255,255,.7),transparent 60%),
      radial-gradient(closest-side at 40% 70%,rgba(255,255,255,.8),transparent 60%);
    filter:blur(8px);
    animation:cloudFloat 20s ease-in-out infinite;
}
@keyframes cloudFloat{
    0%,100%{transform:translateX(0) translateY(0)}
    25%{transform:translateX(20px) translateY(-10px)}
    50%{transform:translateX(-15px) translateY(5px)}
    75%{transform:translateX(10px) translateY(-5px)}
}

.hero-background{
    position:absolute;inset:0;z-index:1;
    pointer-events:none;
}

.floating-sheep{
    position:absolute;
    animation:sheepFloat 8s ease-in-out infinite;
}
.left-sheep{
    left:10%;top:20%;
}
.right-sheep{
    right:10%;top:60%;
    animation-delay:2s;
}
@keyframes sheepFloat{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    25%{transform:translateY(-20px) rotate(5deg)}
    50%{transform:translateY(10px) rotate(-3deg)}
    75%{transform:translateY(-15px) rotate(3deg)}
}

.decorative-sheep{
    width:120px;height:120px;
    object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
    opacity:.9;
}
.decorative-sheep.mirror{
    transform:scaleX(-1);
}

.hero-inner{
    position:relative;z-index:3;
    display:grid;grid-template-columns:1fr 2fr 1fr;gap:60px;align-items:center;
    max-width:1400px;margin:0 auto;padding:40px;
}

.sheep-run{
    height:200px;display:flex;align-items:center;justify-content:center;position:relative;
    animation:runContainer 4s ease-in-out infinite;
}
@keyframes runContainer{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

.npc-sheep{
    width:180px;height:180px;object-fit:contain;
    animation:runLR 3.6s ease-in-out infinite alternate;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));
}

.sheep-dust{
    position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:200px;height:20px;
    background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent 70%);
    filter:blur(4px);
    animation:dustPuff 1.8s ease-in-out infinite;
}
@keyframes dustPuff{
    0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
    50%{opacity:.2;transform:translateX(-50%) scale(1.2)}
}

@keyframes runLR{
    0%{transform:translateX(-30px) scaleX(1)}
    45%{transform:translateX(30px) scaleX(1)}
    55%{transform:translateX(30px) scaleX(-1)}
    100%{transform:translateX(-30px) scaleX(-1)}
}

.hero-content{
    text-align:center;
    animation:contentFadeIn 1s ease-out .5s both;
}
@keyframes contentFadeIn{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

.game-title{
    font-size:3.5rem;font-weight:900;margin:20px 0 15px;
    background:linear-gradient(135deg,#fff 0%,#f0f0ff 50%,#fff 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:0 4px 8px rgba(0,0,0,.1);
    letter-spacing:2px;
}

.game-subtitle{
    color:rgba(255,255,255,.9);margin-bottom:30px;
    font-size:1.3rem;font-weight:500;
}

.hero-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}

.btn-large{
    padding:18px 36px;border-radius:20px;font-size:1.3rem;font-weight:800;
    letter-spacing:1px;transition:all .3s var(--ease);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.btn-large:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 12px 32px rgba(0,0,0,.2);
}
.sheep{
    position:relative;width:120px;height:80px;animation:run 1s steps(2) infinite;
}
.sheep-body{
    width:100px;height:60px;background:linear-gradient(180deg,#fff,#f3f3f3);border-radius:40px;box-shadow:var(--shadow-sm);position:absolute;left:10px;top:10px;
    outline:2px solid rgba(0,0,0,.08);
}
.sheep-head{
    width:38px;height:38px;background:#2f2f2f;border-radius:50%;position:absolute;right:-12px;top:18px;
    box-shadow:inset -4px -4px 0 rgba(0,0,0,.25);
}
.sheep-head .ear{position:absolute;width:14px;height:10px;background:#2f2f2f;border-radius:10px;}
.sheep-head .ear-left{left:-6px;top:2px;transform:rotate(-18deg)}
.sheep-head .ear-right{right:-6px;top:4px;transform:rotate(18deg)}
.sheep-head .eye{position:absolute;left:12px;top:12px;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 2px #000;}
.sheep-head .blush{position:absolute;width:8px;height:5px;background:#ff9fb5;border-radius:50%;opacity:.55}
.sheep-head .blush-left{left:4px;bottom:6px}
.sheep-head .blush-right{right:4px;bottom:8px}
.sheep-tail{position:absolute;left:0;top:26px;width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.08) inset}
.sheep-legs span{
    position:absolute;bottom:-8px;width:10px;height:22px;background:#333;border-radius:6px;
    animation:leg .35s infinite alternate;
}
.sheep-legs span:nth-child(1){left:18px;animation-delay:0s}
.sheep-legs span:nth-child(2){left:42px;animation-delay:.15s}
.sheep-legs span:nth-child(3){left:66px;animation-delay:.05s}
.sheep-legs span:nth-child(4){left:90px;animation-delay:.2s}
.sheep-dust{position:absolute;left:50%;bottom:12px;width:160px;height:10px;transform:translateX(-50%);
    background:radial-gradient(closest-side,rgba(0,0,0,.15),transparent 70%)}
@keyframes run{to{transform:translateX(6px)}}
@keyframes leg{to{transform:rotate(12deg)}}

/* 游戏容器和HUD */
.game-container{
    display:grid;grid-template-columns:380px 1fr 380px;gap:30px;
    max-width:1800px;margin:30px auto;padding:30px;
    min-height:calc(100vh - 120px);
}
.game-container[aria-hidden="true"]{display:none}

/* 侧边面板通用样式 */
.hud-left-panel,.hud-right-panel{
    background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
    border-radius:24px;padding:32px;
    box-shadow:0 8px 32px rgba(0,0,0,.1);
    border:1px solid rgba(255,255,255,.5);
    height:fit-content;
    position:sticky;top:30px;
}

.hud-left-panel{
    grid-column:1;
}

.hud-right-panel{
    grid-column:3;
}

.hud-side-content{
    display:flex;flex-direction:column;gap:20px;
}

/* 左侧HUD样式 */
.hud-side-content{
    display:flex;flex-direction:column;gap:28px;
}
.level-info{
    display:flex;flex-direction:column;gap:20px;
}
.hud-badge{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;border-radius:20px;padding:24px 28px;
    font-weight:900;font-size:1.6rem;
    box-shadow:0 6px 20px rgba(124,92,255,.4);
    text-align:center;
    border:3px solid rgba(255,255,255,.4);
    line-height:1.3;
    min-height:80px;
    display:flex;align-items:center;justify-content:center;
}
.hud-badge-lg{padding:28px 32px;font-size:1.8rem;min-width:180px;min-height:90px}

/* 增强版计时器 */
.timer-container{
    background:rgba(255,255,255,.9);border-radius:24px;
    padding:32px;box-shadow:inset 0 6px 16px rgba(0,0,0,.1);
    border:3px solid rgba(124,92,255,.3);
    width:100%;
}
.enhanced-timer{
    position:relative;width:100%;height:48px;
    background:linear-gradient(180deg,#f8faff,#e8f0ff);
    border-radius:24px;box-shadow:inset 0 6px 16px rgba(0,0,0,.15);
    overflow:hidden;
    min-width:280px;
}
.enhanced-timer .timer-bar{
    position:absolute;left:0;top:0;bottom:0;
    background:linear-gradient(90deg,#2ecc71,#4ade80,#22c55e);
    border-radius:24px;transition:width .4s var(--ease);
    box-shadow:0 0 24px rgba(46,204,113,.5);
}
.enhanced-timer .timer-bar.warning{
    background:linear-gradient(90deg,#ff6b6b,#ff8787,#ff5252);
    animation:timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse{
    0%,100%{opacity:1;transform:scaleY(1)}
    50%{opacity:.8;transform:scaleY(1.02)}
}
.timer-info{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;z-index:2;
}
#timerText{
    display:block;font-size:2.2rem;font-weight:900;
    color:#2d3750;text-shadow:0 2px 4px rgba(255,255,255,.8);
    line-height:1;letter-spacing:1px;
}

/* 右侧HUD样式 */
.switch-title,.controls-title{
    font-size:1.5rem;font-weight:900;color:var(--ink);
    margin-bottom:20px;text-align:center;
    padding-bottom:12px;border-bottom:3px solid var(--brand);
    letter-spacing:1px;
}
.theme-switch,.game-controls{
    display:flex;flex-direction:column;gap:16px;
}
.theme-btn{
    padding:16px 20px;border-radius:16px;
    font-size:1.2rem;font-weight:800;
    transition:all .3s var(--ease);
    border:3px solid rgba(124,92,255,.3);
    min-height:56px;display:flex;align-items:center;justify-content:center;
}
.theme-btn:hover{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;transform:translateX(-6px);
    box-shadow:0 6px 16px rgba(124,92,255,.3);
}
.theme-btn.active{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;transform:translateX(-6px);
    box-shadow:0 6px 16px rgba(124,92,255,.3);
}

.sheep-decoration{
    margin-top:20px;text-align:center;
}
.side-sheep{
    width:80px;height:80px;object-fit:contain;
    animation:bounce 3s ease-in-out infinite;
}
@keyframes bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

/* 按钮尺寸 */
.btn.medium{
    padding:16px 28px;border-radius:16px;
    font-size:1.2rem;font-weight:800;
    transition:all .3s var(--ease);
    min-height:60px;display:flex;align-items:center;justify-content:center;
}
.btn.medium:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.btn.xlarge{
    padding:24px 48px;border-radius:20px;
    font-size:1.8rem;font-weight:900;
    transition:all .3s var(--ease);
    min-height:80px;display:flex;align-items:center;justify-content:center;
    letter-spacing:2px;box-shadow:0 12px 32px rgba(124,92,255,.4);
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border:3px solid rgba(255,255,255,.5);
}
.btn.xlarge:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 16px 40px rgba(124,92,255,.5);
    background:linear-gradient(135deg,var(--brand-2),var(--brand));
}

/* 选择关卡按钮特殊样式 */
#btnLevelSelect{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;border:none;
    font-size:1.3rem;font-weight:900;
    padding:20px 32px;
    min-height:70px;
    box-shadow:0 8px 24px rgba(124,92,255,.3);
    letter-spacing:1px;
}
#btnLevelSelect:hover{
    background:linear-gradient(135deg,var(--brand-2),var(--brand));
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 12px 32px rgba(124,92,255,.4);
}

/* 星级评定样式 */
.star-rating{font-size:1.2rem;color:var(--brand);margin:4px 0;letter-spacing:2px;text-shadow:0 1px 2px rgba(124,92,255,.3)}
.star-rating .empty{color:#ddd}

/* 面板通用样式 */
.panel{padding:32px;max-width:1200px;margin:32px auto;text-align:center;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:24px;box-shadow:var(--shadow-md)}
.panel[aria-hidden="true"]{display:none}
.panel h2{margin-bottom:24px;font-size:2rem;color:var(--ink)}

/* 关卡选择面板 */
.level-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:16px;margin:20px 0;max-height:60vh;overflow-y:auto;padding:20px;background:rgba(248,251,255,.8);border-radius:16px}
.level-card{
    background:#fff;border:2px solid #e7ecf6;border-radius:12px;padding:12px 8px;cursor:pointer;transition:all .3s var(--ease);position:relative;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center
}
.level-card:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-md);border-color:var(--brand)}
.level-card.unlocked{border-color:#a8d8ff}
.level-card.completed{background:linear-gradient(135deg,#f0f8ff,#e6f3ff);border-color:var(--success)}
.level-card.locked{opacity:.6;cursor:not-allowed}
.level-card.locked:hover{transform:none}
.level-number{font-size:1.8rem;font-weight:900;color:var(--ink);margin-bottom:4px}
.level-card.locked .level-number{color:var(--muted)}
.level-stars{font-size:1rem;color:var(--brand);margin:2px 0;min-height:20px}
.level-card.locked .level-stars{color:#ddd}
.level-difficulty{font-size:.75rem;color:var(--muted);text-align:center;margin-top:4px}

/* 难度选择面板 */
.difficulty-panel{
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,251,255,.9));
    backdrop-filter:blur(16px);
    border:2px solid rgba(124,92,255,.2);
    box-shadow:0 16px 48px rgba(0,0,0,.1);
}

.difficulty-header{
    display:flex;align-items:center;justify-content:center;gap:30px;
    margin-bottom:40px;text-align:center;
}

.header-sheep{
    width:120px;height:120px;object-fit:contain;
    animation:float 4s ease-in-out infinite;
}
@keyframes float{
    0%,100%{transform:translateY(0) rotate(-3deg)}
    50%{transform:translateY(-15px) rotate(3deg)}
}

.difficulty-content h2{
    font-size:3rem;font-weight:900;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:8px;
}
.difficulty-subtitle{
    font-size:1.2rem;color:var(--muted);
    font-weight:500;
}

.difficulty-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;
    margin-top:40px;
}

.difficulty-card{
    background:linear-gradient(135deg, #fff, #f8faff);
    border:3px solid transparent;border-radius:24px;padding:30px;
    cursor:pointer;transition:all .4s cubic-bezier(.2,.8,.2,1);
    position:relative;overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:flex;align-items:center;gap:20px;
}

.difficulty-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    opacity:0;transition:opacity .4s var(--ease);
    z-index:0;
}
.difficulty-card::after{
    content:"";position:absolute;top:0;left:0;right:0;height:6px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    transform:translateX(-100%);transition:transform .4s var(--ease);
}

.difficulty-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 16px 40px rgba(124,92,255,.25);
    border-color:var(--brand);
}
.difficulty-card:hover::before{
    opacity:.05;
}
.difficulty-card:hover::after{
    transform:translateX(0);
}

.card-icon{
    font-size:3rem;width:80px;height:80px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border-radius:20px;
    flex-shrink:0;
    position:relative;z-index:1;
    box-shadow:0 4px 16px rgba(124,92,255,.3);
    animation:iconPulse 3s ease-in-out infinite;
}
.difficulty-card:hover .card-icon{
    animation:iconPulse 1s ease-in-out infinite;
}
@keyframes iconPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.1)}
}

.card-content{
    flex:1;position:relative;z-index:1;
}

.card-content .name{
    font-size:1.8rem;font-weight:900;
    color:#3a2d6b;margin-bottom:8px;
}

.star-rating{
    font-size:1.4rem;margin:12px 0;
    letter-spacing:3px;
}

.card-content .desc{
    font-size:1rem;color:var(--muted);
    line-height:1.6;margin:12px 0;
}

.difficulty-details{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-top:16px;
}
.detail{
    background:rgba(124,92,255,.1);color:var(--brand);
    padding:6px 12px;border-radius:8px;
    font-size:.85rem;font-weight:600;
    border:1px solid rgba(124,92,255,.2);
}
.detail.special{
    background:rgba(255,107,107,.1);color:#ff6b6b;
    border-color:rgba(255,107,107,.2);
}

.card-sheep{
    position:relative;z-index:1;
    opacity:.8;
}
.card-sheep-img{
    width:60px;height:60px;object-fit:contain;
    transition:transform .3s var(--ease);
}
.difficulty-card:hover .card-sheep-img{
    transform:rotate(10deg) scale(1.1);
}

/* 结果面板样式 */
.result-animation{margin:20px 0;text-align:center}
.stars-container{display:flex;justify-content:center;gap:12px;margin:16px 0}
.star{font-size:3rem;color:var(--brand);opacity:0;transform:scale(0) rotate(0deg);animation:starPop .6s cubic-bezier(.68,-.55,.265,1.55) forwards}
.star:nth-child(1){animation-delay:.1s}
.star:nth-child(2){animation-delay:.3s}
.star:nth-child(3){animation-delay:.5s}
@keyframes starPop{
    0%{opacity:0;transform:scale(0) rotate(-180deg)}
    50%{transform:scale(1.2) rotate(10deg)}
    100%{opacity:1;transform:scale(1) rotate(0deg)}
}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;background:rgba(248,251,255,.8);padding:20px;border-radius:16px}
.stat-item{text-align:center;padding:12px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.stat-label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:4px}
.stat-value{display:block;font-size:1.3rem;font-weight:900;color:var(--success)}
.stat-value.time{color:var(--brand)}
.stat-value.bonus{color:var(--brand-2)}
.level-panel-actions{margin-top:24px}

/* 动画效果优化 */
@keyframes slideInUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideInDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(124,92,255,.3)}50%{box-shadow:0 0 20px rgba(124,92,255,.6)}}

/* 页面过渡动画 */
.panel{animation:slideInUp 0.6s cubic-bezier(.2,.8,.2,1)}
.hero{animation:fadeIn 0.8s ease-out}
.hud{animation:slideInDown 0.4s cubic-bezier(.2,.8,.2,1)}

/* 关卡卡片动画 */
.level-card{animation:fadeIn 0.3s ease-out backwards}
.level-card:nth-child(1){animation-delay:0.05s}
.level-card:nth-child(2){animation-delay:0.1s}
.level-card:nth-child(3){animation-delay:0.15s}
.level-card:nth-child(4){animation-delay:0.2s}
.level-card:nth-child(5){animation-delay:0.25s}

/* 悬停动画效果 */
.btn:hover{animation:pulse 0.3s ease-in-out}
.hud-badge-lg:hover{animation:glow 1s ease-in-out infinite}
.timer-lg:hover{animation:pulse 0.4s ease-in-out}

/* 通关成功动画 */
@keyframes confetti{0%{transform:translateY(0)rotate(0deg);opacity:1}100%{transform:translateY(100vh)rotate(720deg);opacity:0}}
.confetti{position:fixed;top:0;width:10px;height:10px;animation:confetti 3s ease-out forwards;z-index:1000}
.confetti:nth-child(odd){animation-delay:0.2s;background:var(--brand);border-radius:50%}
.confetti:nth-child(even){animation-delay:0.4s;background:var(--brand-2);border-radius:2px}

/* 时间警告动画 */
@keyframes timeWarning{0%,100%{background:linear-gradient(180deg,#edf2ff,#e2e9ff)}50%{background:linear-gradient(180deg,#ffe6e6,#ffcccc)}}
.timer.warning{animation:timeWarning 1s ease-in-out infinite}
.timer.warning .timer-bar{background:linear-gradient(90deg,#ff6b6b,#ff4444,#ff0000)}

/* 工具拖拽动画 */
.tool{transition:transform 0.2s var(--ease),box-shadow 0.2s var(--ease)}
.tool.dragging{transform:scale(1.1) rotate(5deg);box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:1000}

/* 凹槽匹配动画 */
.slot{transition:all 0.3s var(--ease)}
.slot.success{animation:pulse 0.6s ease-in-out 2}

/* 结果统计动画 */
.stat-item{animation:slideInUp 0.4s cubic-bezier(.2,.8,.2,1) backwards}
.stat-item:nth-child(1){animation-delay:0.6s}
.stat-item:nth-child(2){animation-delay:0.7s}
.stat-item:nth-child(3){animation-delay:0.8s}

/* 加载动画 */
@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(124,92,255,.3);border-top:2px solid var(--brand);border-radius:50%;animation:loading 1s linear infinite}

/* Toast提示动画 */
@keyframes toastSlideIn{from{transform:translate(-50%,-50%) scale(0.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes toastSlideOut{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(0.8);opacity:0}}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;text-align:center;font-weight:700}

/* 游戏主区域 */
.game{
    background:
        linear-gradient(180deg,#eaf3ff 0 62%, #d8e4f7 62% 63%, #c7d6ee 63%),
        linear-gradient(180deg,#f8fbff 0 62%, transparent 62%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 8px, rgba(0,0,0,0) 8px 16px);
    border-radius:28px;padding:40px;
    box-shadow:0 12px 32px rgba(0,0,0,.1);
    border:2px solid rgba(255,255,255,.5);
    position:relative;min-height:650px;
    grid-column:2;
}
.game[aria-hidden="true"]{display:none}

/* 游戏开始界面 */
.game-start-screen{
    display:flex;align-items:center;justify-content:center;
    height:100%;min-height:600px;
}
.game-start-screen[aria-hidden="true"]{display:none}
.start-content{
    text-align:center;
    animation:startContentFadeIn 0.8s ease-out;
}
@keyframes startContentFadeIn{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}
.start-sheep{
    margin-bottom:30px;
    animation:startSheepBounce 2s ease-in-out infinite;
}
@keyframes startSheepBounce{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    50%{transform:translateY(-20px) rotate(5deg)}
}
.start-sheep-img{
    width:160px;height:160px;object-fit:contain;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.2));
}
.start-title{
    font-size:2.5rem;font-weight:900;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:16px;
}
.start-subtitle{
    font-size:1.4rem;color:var(--muted);margin-bottom:40px;
    font-weight:600;
}

/* 游戏进行界面 */
.game-play-screen[aria-hidden="true"]{display:none}

/* 跑动小羊动画 */
.game-sheep-runner{
    position:absolute;
    bottom:20px;
    left:-100px;
    z-index:10;
    animation:sheepRun 15s linear infinite;
}
@keyframes sheepRun{
    0%{left:-100px;transform:scaleX(1)}
    25%{left:25%;transform:scaleX(1)}
    26%{left:25%;transform:scaleX(-1)}
    50%{left:50%;transform:scaleX(-1)}
    51%{left:50%;transform:scaleX(1)}
    75%{left:75%;transform:scaleX(1)}
    76%{left:75%;transform:scaleX(-1)}
    100%{left:110%;transform:scaleX(-1)}
}
.runner-sheep{
    width:80px;height:80px;object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}

/* 装饰小羊 */
.sheep-deco{
    position:absolute;top:20px;right:20px;z-index:1;
    display:flex;gap:15px;
}
.mini-sheep{
    width:40px;height:40px;object-fit:contain;
    opacity:.6;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.mini-sheep-1{
    animation:miniFloat 4s ease-in-out infinite;
}
.mini-sheep-2{
    animation:miniFloat 4s ease-in-out infinite 2s;
}
@keyframes miniFloat{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    50%{transform:translateY(-8px) rotate(5deg)}
}
/* 主题：牧场/儿童房/车库 */
.game.theme-pasture{
    background:
        linear-gradient(180deg,#bfeaff 0 58%, #8ed081 58% 60%, #7bc66e 60%),
        radial-gradient(closest-side at 12% 18%, rgba(255,255,255,.8), transparent 60%),
        radial-gradient(closest-side at 72% 12%, rgba(255,255,255,.7), transparent 60%);
}
.game.theme-kids{
    background:
        linear-gradient(180deg,#ffeef7 0 62%, #ffd1ea 62% 63%, #ffc4e2 63%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 10px, rgba(255,255,255,0) 10px 20px);
}
.game.theme-garage{
    background:
        linear-gradient(180deg,#e5e7eb 0 62%, #cdd2d8 62% 63%, #b9c0c8 63%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 6px, rgba(0,0,0,0) 6px 12px);
}
.slots{
    min-height:220px;
    /* 柜体背景：浅木纹 + 内阴影 */
    background:
      linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.5)),
      repeating-linear-gradient(90deg, #f4efe7 0 8px, #efe9df 8px 16px, #f6f0e6 16px 24px),
      var(--slot);
    border:2px solid #d7cbb8;
    border-radius:18px;
    padding:18px;
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
    box-shadow:inset 0 6px 20px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    position:relative;
}
.slots .handle{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:120px;height:12px;border-radius:8px;
    background:linear-gradient(180deg,#d9dee5,#aab3bf);
    box-shadow:inset 0 2px 2px rgba(255,255,255,.6), inset 0 -2px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.12);
}
.slots.open{
    box-shadow:inset 0 10px 26px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.12);
    transform:translateY(1px);
    transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.slots::before{
    /* 柜门边框高光 */
    content:"";position:absolute;inset:0;border-radius:18px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), inset 0 0 0 6px rgba(0,0,0,.03);
    pointer-events:none;
}
.slots::after{
    /* 隔板线条（抽屉层次） */
    content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;border-radius:2px;
    background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(255,255,255,.6), rgba(0,0,0,.06));
    opacity:.8;pointer-events:none;
}
.slot{
    width:110px;height:110px;border:2px dashed #9ab6ff;border-radius:14px;background:repeating-linear-gradient(135deg,#f4f8ff 0 8px,#eef4ff 8px 16px);
    position:relative;display:flex;align-items:center;justify-content:center;color:#8aa0c8;font-weight:800;user-select:none;
}
.slot.success{border-color:#69d59e;box-shadow:0 0 0 3px rgba(46,204,113,.15) inset}
.slot .silhouette{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    font-size:56px;line-height:1;filter:grayscale(1) opacity(.35) drop-shadow(0 2px 2px rgba(35,42,52,.18));
}
.tools-tray{
    margin-top:14px;background:var(--tray);border:2px solid #dfeaff;border-radius:18px;padding:14px;
    position:relative;min-height:48vh;box-shadow:var(--shadow-sm);overflow:auto;scroll-behavior:smooth
}
.tools-tray, .game {
    user-select:none;
    -webkit-user-select:none;
}
.pan-hints{position:absolute;inset:8px auto auto 8px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border:1px solid #e6eaf2;border-radius:10px;padding:4px 8px;z-index:2}
.pan-hints .arrow{opacity:.7;animation:blink 1.6s infinite}
.pan-hints .hint-text{font-size:.85rem;color:#55607a}
.tool{
    width:110px;height:110px;border-radius:14px;background:#fff;border:2px solid #e7ecf6;display:flex;align-items:center;justify-content:center;
    cursor:grab;touch-action:none;position:relative;transition:transform .15s var(--ease),box-shadow .15s var(--ease);
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}
.tool:active{cursor:grabbing}
.tool.dragging{transform:scale(1.05);box-shadow:var(--shadow-md);z-index:10}
.tool .emoji{font-size:44px;line-height:1}
.tool .name{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.8rem;color:#55607a}
.sheep-deco{position:relative;height:38px;margin-top:10px}
.mini-sheep,.mini-sheep.reverse{
    position:absolute;bottom:0;width:28px;height:18px;background:#fff;border-radius:10px;box-shadow:0 0 0 2px #333 inset;animation:walk 6s linear infinite;
}
.mini-sheep.reverse{right:0;left:auto;animation:walkR 7s linear infinite}
@keyframes walk{0%{left:0}100%{left:calc(100% - 28px)}}
@keyframes walkR{0%{right:0}100%{right:calc(100% - 28px)}}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(21,25,37,.28);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;border-radius:18px;max-width:520px;width:100%;padding:20px 18px;box-shadow:var(--shadow-md);text-align:center}
.modal-content h3{margin-bottom:8px}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.howto{color:#50607a;text-align:left;margin:8px 0 4px 18px}
.howto li{margin:6px 0}

/* 可访问性 */
[aria-hidden="true"]{pointer-events:none}

/* 路过小羊与通关跳跃小羊 */
.passing-sheep{
    position:fixed;bottom:12vh;left:-60px;width:48px;height:34px;background:#fff;border-radius:16px;
    box-shadow:0 0 0 2px #333 inset, var(--shadow-sm);
    z-index:3;animation:pass 12s linear forwards;
}
.passing-sheep::after{
    content:"";position:absolute;right:-8px;top:8px;width:14px;height:14px;background:#333;border-radius:50%;
}
@keyframes pass{to{transform:translateX(calc(100vw + 120px))}}
.jump-sheep{
    width:56px;height:40px;background:#fff;border-radius:18px;box-shadow:0 0 0 2px #333 inset;margin:8px auto 0;
    animation:jump 1.2s ease-out 2;
}
@keyframes jump{
    0%{transform:translateY(0)}
    35%{transform:translateY(-24px)}
    70%{transform:translateY(0)}
    85%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}

/* 可爱羊贴纸（墙面/柜体的装饰） */
.sheep-stickers{position:relative;min-height:0}
.sticker{
    position:absolute;width:52px;height:36px;z-index:1;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));
    animation:bob 3.2s ease-in-out infinite;
}
.sticker .w{position:absolute;left:0;top:6px;width:38px;height:26px;background:#fff;border-radius:18px}
.sticker .h{position:absolute;left:30px;top:10px;width:16px;height:16px;background:#333;border-radius:50%}
.sticker .eye{position:absolute;left:6px;top:6px;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1.5px #000}
.sticker .tail{position:absolute;left:-6px;top:16px;width:10px;height:10px;background:#fff;border-radius:50%}
.stencil{opacity:.18;transform:scale(1.1)}
@keyframes bob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}
@keyframes blink{
    0%{transform:scaleY(1)}
    48%{transform:scaleY(0.1)}
    52%{transform:scaleY(0.1)}
    100%{transform:scaleY(1)}
}

/* 轻提示 */
.toast{position:fixed;left:0;top:0;transform:translateY(-6px);opacity:0;background:rgba(255,255,255,.95);border:1px solid #e6eaf2;border-radius:10px;padding:6px 10px;color:#2a3150;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:30;transition:all .2s var(--ease);pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast-success{border-color:#bfe6ce}
.toast-error{border-color:#f7c8c8}

/* 登录/注册界面样式 */
.auth-modal-content{
    max-width:480px;
    padding:40px 32px;
}
.auth-header{
    text-align:center;
    margin-bottom:32px;
}
.auth-header h3{
    font-size:2.2rem;
    font-weight:900;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:8px;
}
.auth-subtitle{
    color:var(--muted);
    font-size:1rem;
    font-weight:500;
}
.auth-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.form-group label{
    font-size:1rem;
    font-weight:700;
    color:var(--ink);
    text-align:left;
}
.form-group input{
    padding:14px 18px;
    border:2px solid rgba(124,92,255,.2);
    border-radius:12px;
    font-size:1rem;
    font-family:inherit;
    background:#fff;
    color:var(--ink);
    transition:all .3s var(--ease);
    outline:none;
}
.form-group input:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(124,92,255,.1);
}
.form-group input::placeholder{
    color:var(--muted);
    opacity:.6;
}
.form-error{
    display:none;
    padding:12px 16px;
    background:rgba(255,82,82,.1);
    border:2px solid rgba(255,82,82,.3);
    border-radius:10px;
    color:#ff5252;
    font-size:.9rem;
    font-weight:600;
    text-align:center;
}
.auth-form .modal-actions{
    flex-direction:column;
    gap:12px;
    margin-top:8px;
}
.auth-form .btn{
    width:100%;
}

/* 用户信息显示 */
.user-info{
    position:fixed;
    top:20px;
    right:20px;
    z-index:1000;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    border-radius:16px;
    padding:12px 20px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    border:2px solid rgba(124,92,255,.2);
}
.user-info-content{
    display:flex;
    align-items:center;
    gap:16px;
}
.user-name{
    font-size:1.1rem;
    font-weight:800;
    color:var(--brand);
    display:flex;
    align-items:center;
    gap:8px;
}
.user-name::before{
    content:"👤";
    font-size:1.2rem;
}
.btn.small{
    padding:8px 16px;
    font-size:.9rem;
    border-radius:10px;
}

/* 自适应 */
@media (max-width:768px){
    .timer{width:160px}
    .slot,.tool{width:96px;height:96px}
    .tool .emoji{font-size:36px}
    .tools-tray{min-height:46vh}
    .auth-modal-content{
        padding:32px 24px;
    }
    .user-info{
        top:10px;
        right:10px;
        padding:10px 16px;
    }
    .user-name{
        font-size:1rem;
    }
}
@media (max-width:420px){
    .slot,.tool{width:86px;height:86px}
    .tools-tray{min-height:50vh}
    .auth-modal-content{
        padding:24px 18px;
    }
    .auth-header h3{
        font-size:1.8rem;
    }
}