body{

margin:0;
padding:0;
height:100vh;

/* 背景图片 */
background-image:url("../images/bg.jpg");
background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;

font-family:"Microsoft YaHei";

}

/* 首页容器 */

.home{

text-align:center;
background:rgba(255,255,255,0.9);
padding:60px 80px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);

}

/* 标题 */

.title{

font-size:48px;
color:#2e7d32;
margin-bottom:20px;
text-shadow:2px 2px 4px rgba(0,0,0,0.2);

}

/* 副标题 */

.subtitle{

font-size:24px;
color:#666;
margin-bottom:40px;

}

/* 开始按钮 */

.start-btn{

font-size:26px;
padding:15px 40px;
border:none;
border-radius:10px;

background:#4caf50;
color:white;

cursor:pointer;
transition:0.3s;
box-shadow:0 4px 15px rgba(76,175,80,0.4);

}

.start-btn:hover{

background:#2e7d32;
transform:scale(1.05);

}

/* 游戏页面样式 */

.game-body{
margin:0;
font-family:"Microsoft YaHei";
background:linear-gradient(135deg,#2e7d32,#4caf50);
overflow:hidden;
}

/* 游戏容器 */

.game-container{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
position:relative;
}

/* 关卡信息面板 */

.level-panel{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
background:rgba(255,255,255,0.95);
padding:20px 40px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
text-align:center;
z-index:10;
}

.level-title{
color:#2e7d32;
font-size:32px;
margin:0 0 10px 0;
font-weight:bold;
}

.level-desc{
color:#666;
font-size:16px;
margin:5px 0;
}

.control-hint{
background:#e8f5e9;
padding:10px 20px;
border-radius:8px;
margin-top:10px;
font-size:14px;
color:#2e7d32;
}

.key{
display:inline-block;
background:#4caf50;
color:white;
padding:3px 10px;
border-radius:4px;
margin:0 3px;
font-weight:bold;
}

/* 触屏控制区域 */

.touch-controls{
position:fixed;
bottom:20px;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
box-sizing:border-box;
pointer-events:none; /* 让点击穿透到画布 */
z-index:50;
}

.control-zone{
width:150px;
height:150px;
position:relative;
pointer-events:auto;
}

.player-label{
position:absolute;
top:-30px;
left:50%;
transform:translateX(-50%);
background:rgba(255,255,255,0.9);
padding:5px 15px;
border-radius:15px;
font-size:14px;
color:#2e7d32;
font-weight:bold;
white-space:nowrap;
}

.dpad{
width:100%;
height:100%;
position:relative;
background:rgba(255,255,255,0.3);
border-radius:50%;
border:3px solid rgba(255,255,255,0.6);
}

.dpad-btn{
position:absolute;
width:50px;
height:50px;
background:rgba(76,175,80,0.8);
border:2px solid white;
border-radius:10px;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
color:white;
cursor:pointer;
user-select:none;
touch-action:manipulation;
transition:0.1s;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.dpad-btn:active, .dpad-btn.active{
background:#2e7d32;
transform:scale(0.95);
}

.dpad-up{ top:0; left:50%; transform:translateX(-50%); }
.dpad-down{ bottom:0; left:50%; transform:translateX(-50%); }
.dpad-left{ left:0; top:50%; transform:translateY(-50%); }
.dpad-right{ right:0; top:50%; transform:translateY(-50%); }

/* 玩家 2 的控制区在右边 */
#player2Controls .dpad-btn{
background:rgba(255,152,0,0.8);
}

#player2Controls .dpad-btn:active, #player2Controls .dpad-btn.active{
background:#e65100;
}

/* 手势控制提示 */
.gesture-hint{
position:fixed;
bottom:80px;
left:50%;
transform:translateX(-50%);
background:rgba(255,255,255,0.9);
padding:15px 30px;
border-radius:20px;
text-align:center;
font-size:16px;
color:#2e7d32;
box-shadow:0 4px 15px rgba(0,0,0,0.2);
z-index:60;
pointer-events:none;
}

.gesture-icon{
display:inline-block;
margin:0 10px;
font-size:24px;
animation:swipe 1.5s infinite;
}

@keyframes swipe{
0%, 100%{ transform:translateX(0); }
50%{ transform:translateX(10px); }
}

/* 游戏画布 */

canvas{
background:#4caf50;
border:4px solid white;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
touch-action: none;
}

/* 通关遮罩 */

.success-mask{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

display:none;

justify-content:center;
align-items:center;

z-index:100;

}

/* 通关提示框 */

.success-box{

background:linear-gradient(135deg,#ffffff,#e8f5e9);
padding:50px 80px;
border-radius:20px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:popIn 0.5s ease;

}

@keyframes popIn{
from{
transform:scale(0.5);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

/* 文字 */

.success-text{

font-size:36px;
margin-bottom:20px;
color:#2e7d32;
font-weight:bold;

}

.encourage{

font-size:22px;
margin-bottom:30px;
color:#555;
line-height:1.6;

}

/* 按钮组 */

.btn-group{
display:flex;
gap:20px;
justify-content:center;
}

.next-btn,.restart-btn{

padding:15px 40px;
font-size:22px;
border:none;
border-radius:10px;
background:#4caf50;
color:white;
cursor:pointer;
transition:0.3s;
box-shadow:0 4px 15px rgba(76,175,80,0.4);

}

.next-btn:hover,.restart-btn:hover{

background:#2e7d32;
transform:scale(1.05);

}

.restart-btn{
background:#ff9800;
}

.restart-btn:hover{
background:#f57c00;
}

/* 游戏结束画面 */

.game-over{
background:linear-gradient(135deg,#fff3e0,#ffe0b2);
}

.final-score{
font-size:48px;
color:#ff9800;
margin:20px 0;
font-weight:bold;
}