:root {
    --mario-red: #ff3224;
    --mario-blue: #009ACD;
    --mario-yellow: #FBD000;
}

body {
    font-family: 'Press Start 2P', cursive, sans-serif;
    background-color: #222;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    color: white;
    overflow: hidden;
    user-select: none;
}

/* --- 游戏主舞台 --- */
.stage {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 400px;
    background-color: #5C94FC;
    background-image: 
        radial-gradient(circle at 20% 20%, #fff 10%, transparent 15%),
        radial-gradient(circle at 70% 30%, #fff 10%, transparent 15%);
    border: 4px solid #fff;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.floor {
    position: absolute; bottom: 0; width: 100%; height: 40px;
    background: repeating-linear-gradient(90deg, #B45C34 0, #B45C34 38px, #000 38px, #000 40px), linear-gradient(#CD683D, #8B4513);
    border-top: 4px solid #000; z-index: 5;
}

.hud {
    display: flex; justify-content: space-between; width: 100%; padding: 20px; box-sizing: border-box;
    font-size: 0.8em; text-shadow: 2px 2px 0 #000; z-index: 10; position: absolute; top: 0; pointer-events: none;
}

/* --- 角色与动画 --- */
.mario {
    position: absolute; bottom: 44px; left: 50px; width: 40px; height: 40px; background: var(--mario-red);
    box-shadow: 0 0 0 4px #000, -4px 10px 0 0 var(--mario-blue), 4px 10px 0 0 var(--mario-blue), 0 20px 0 0 var(--mario-blue);
    z-index: 6; transition: transform 0.1s;
}
.mario::before { content: ''; position: absolute; top: 5px; right: -5px; width: 25px; height: 15px; background: #ffcc99; }

.enemy-container {
    position: absolute; bottom: 44px; right: -300px; display: flex; flex-direction: column; align-items: center;
    transition: right 0.5s ease-out; z-index: 6;
}
.goomba { width: 40px; height: 40px; background: #8B4513; border-radius: 40% 40% 10% 10%; position: relative; box-shadow: 0 0 0 2px #000; }
.goomba::before { content: ''; position: absolute; top: 10px; left: 5px; width: 10px; height: 12px; background: white; border-radius: 50%; box-shadow: 15px 0 0 0 white; }
.goomba::after { content: ''; position: absolute; top: 12px; left: 9px; width: 3px; height: 5px; background: black; box-shadow: 15px 0 0 0 black; }

.word-card {
    background: #fff; color: #000; padding: 8px 12px; border: 3px solid #000; border-radius: 8px; margin-bottom: 10px;
    font-size: 0.9em; white-space: nowrap; font-weight: bold; position: relative; font-family: "Microsoft YaHei", sans-serif;
    max-width: 250px; overflow: hidden; text-overflow: ellipsis;
}
.word-card::after {
    content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    border-width: 8px 8px 0; border-style: solid; border-color: #000 transparent transparent transparent;
}
.enemy-hit { animation: flyAway 0.5s forwards; }
@keyframes flyAway { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(180deg) translateY(-50px); opacity: 1; } 100% { transform: scale(0) rotate(360deg) translateY(100px); opacity: 0; } }

.fireball {
    position: absolute; width: 15px; height: 15px; background: var(--mario-red); border-radius: 50%;
    bottom: 60px; left: 90px; display: none; z-index: 7; box-shadow: 0 0 10px orange;
}
.fireball-anim { display: block; animation: shoot 0.4s linear forwards; }
@keyframes shoot { from { left: 90px; } to { left: 80%; } }

.hint-block {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px;
    background: var(--mario-yellow); border: 4px solid #000; box-shadow: inset -4px -4px 0 #b8860b, inset 4px 4px 0 #ffd700;
    display: flex; justify-content: center; align-items: center; font-size: 2.5em; color: black; cursor: pointer;
    z-index: 100; transition: transform 0.1s;
}
.hint-block:active { transform: translateX(-50%) translateY(-5px); }

.hint-display-area {
    margin-top: 15px; height: 30px; color: var(--mario-yellow); text-shadow: 2px 2px 0 #000;
    font-size: 1em; text-align: center; font-family: monospace; visibility: hidden;
}

.input-area { margin-top: 10px; display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 600px; }
input[type="text"] {
    background: #000; color: var(--mario-yellow); border: 4px solid #fff; padding: 15px;
    font-family: 'Press Start 2P', cursive; font-size: 1.2em; text-align: center; width: 100%; outline: none;
}
.shake { animation: shake 0.4s; border-color: var(--mario-red) !important; color: var(--mario-red) !important; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }

.overlay {
    position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.92);
    display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 999; color: white; cursor: pointer;
}
.next-btn {
    margin-top: 20px; padding: 15px 30px; background: var(--mario-yellow); border: 4px solid #fff;
    font-family: inherit; font-size: 1em; cursor: pointer; color: black;
}

/* --- 🆕 设置面板样式 --- */
.config-btn {
    position: fixed; top: 20px; right: 20px; z-index: 1000;
    background: #333; color: white; border: 2px solid white; padding: 10px; cursor: pointer;
    font-family: "Microsoft YaHei", sans-serif; font-size: 14px;
}
.config-panel {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 2000; flex-direction: column; align-items: center; justify-content: center;
}
.config-box {
    background: #222; border: 4px solid var(--mario-yellow); padding: 20px; width: 80%; max-width: 600px;
    display: flex; flex-direction: column; gap: 10px;
}
.config-textarea {
    width: 100%; height: 300px; background: #000; color: #0f0; border: 1px solid #555;
    font-family: monospace; font-size: 16px; padding: 10px; box-sizing: border-box;
}
.config-actions { display: flex; gap: 10px; justify-content: flex-end; }
.config-save-btn {
    background: var(--mario-yellow); color: black; border: none; padding: 10px 20px;
    font-weight: bold; cursor: pointer; font-family: inherit;
}
.config-close-btn {
    background: #555; color: white; border: none; padding: 10px 20px; cursor: pointer; font-family: inherit;
}

/* 闪烁动画 (从 JS 移入 CSS) */
@keyframes blink { 50% { opacity: 0; } }