:root {
    --pri-pink: #ff85a1;
    --pri-blue: #72d5ff;
    --pri-gold: #ffec3d;
    --hp-red: #ff4d4f;
    --tp-gold: #ffec3d;
    --bg-light: #fdfdfd;
}

* { 
    box-sizing: border-box; margin: 0; padding: 0; 
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background: #f0f0f0;
    overflow: hidden;
    height: 100vh; width: 100vw;
}

.game-viewport {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: #fff;
    position: relative;
    touch-action: manipulation;
}

/* Header */
.game-header {
    height: 45px;
    background: rgba(255,255,255,0.95);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5vw; z-index: 100;
    border-bottom: 2px solid #eee;
}
.stage-id { color: var(--pri-pink); font-weight: bold; font-size: 18px; margin-right: 8px; }
.stage-name { font-size: 14px; color: #666; font-weight: bold; }
.battle-timer { font-size: 22px; color: #444; font-family: monospace; }
.menu-btn { color: var(--pri-pink); font-weight: bold; font-size: 20px; }

/* 戰鬥舞台 (純 2D) */
.battle-arena {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #e1f5fe;
}

/* 多層 2D 背景 */
.sky-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #81d4fa 0%, #b3e5fc 100%); z-index: -3; }
.forest-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?auto=format&fit=crop&q=80&w=1000') center bottom no-repeat; background-size: cover; opacity: 0.3; z-index: -2; }
.ground-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: #9ccc65; opacity: 0.2; z-index: -1; }

.entities-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    padding: 5vw;
}

/* 角色 Sprite - 修長立繪比 */
.char-sprite {
    position: absolute;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

.sprite-body {
    width: 60px; height: 100px;
    background: #fff; border-radius: 15px;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 4px solid #fff;
    position: relative;
}

.sprite-body.p1 { border-color: var(--pri-pink); color: var(--pri-pink); }
.sprite-body.p2 { border-color: var(--pri-blue); color: var(--pri-blue); }
.sprite-body.p3 { border-color: #4caf50; color: #4caf50; }

.char-shadow {
    width: 50px; height: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    margin-top: 5px;
}

.hp-gauge {
    width: 50px; height: 5px; background: #eee;
    border-radius: 3px; margin-top: 8px; overflow: hidden;
}
.hp-gauge .fill { height: 100%; background: var(--hp-red); width: 100%; }

/* Boss (修長立繪比) */
.enemy-sprite {
    position: absolute;
    right: 15%; top: 35%;
}

.boss-body {
    width: 150px; height: 200px;
    background: #fff; border: 6px solid #ffccc7;
    border-radius: 40px;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 30px; color: #f5222d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    animation: idle2D 4s infinite ease-in-out;
}

.boss-shadow { width: 130px; height: 20px; background: rgba(0,0,0,0.08); margin-top: 10px; }

.boss-ui { margin-top: 20px; text-align: center; width: 250px; }
.boss-hp-bar { height: 12px; background: #eee; border-radius: 6px; overflow: hidden; border: 1px solid #ddd; }
.boss-hp-bar .fill { height: 100%; background: var(--hp-red); width: 100%; transition: width 0.3s; }
.boss-name { font-size: 12px; color: #888; font-weight: bold; margin-top: 8px; letter-spacing: 1px; }

/* 底部控制盤 */
.skill-panel {
    height: 120px;
    background: rgba(255,255,255,0.95);
    border-top: 2px solid #eee;
    display: flex; justify-content: center; align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.portrait-list { display: flex; gap: 8vw; }

.portrait-unit { cursor: pointer; transition: transform 0.1s; position: relative; }
.portrait-unit:active { transform: scale(0.9); }

.portrait-circle {
    width: 80px; height: 80px;
    border-radius: 50%; background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex; justify-content: center; align-items: center;
    position: relative; overflow: hidden;
}

.portrait-circle.p1 { background: #ffe9f0; }
.portrait-circle.p2 { background: #e3f2fd; }
.portrait-circle.p3 { background: #f1f8e9; }

.ready-tag {
    position: absolute; bottom: 8px;
    background: var(--pri-gold); color: #5d4037;
    font-size: 10px; font-weight: bold;
    padding: 3px 8px; border-radius: 12px;
    display: none;
}

.unit-bars { width: 80px; margin-top: 8px; }
.bar-hp, .bar-tp { height: 5px; background: #eee; border-radius: 3px; margin-bottom: 4px; overflow: hidden; }
.bar-hp .fill { background: var(--hp-red); }
.bar-tp .fill { background: var(--tp-gold); transition: width 0.1s; }

/* UB 特效 */
.portrait-unit.ready .portrait-circle { border-color: var(--pri-gold); animation: ubGlow 1s infinite alternate; }
.portrait-unit.ready .ready-tag { display: block; }
.ub-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, var(--pri-gold) 0%, transparent 75%);
    opacity: 0;
}
.portrait-unit.ready .ub-glow { opacity: 0.4; animation: pulse2D 1.5s infinite; }

/* 傷害跳字 */
.dmg-text {
    position: absolute; color: #fff; font-size: 36px; font-weight: bold;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); pointer-events: none;
    animation: dmg2D 0.7s forwards; z-index: 100;
}

/* 結算 */
.screen-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; z-index: 200;
}
.hidden { display: none; }
.win-box { background: #fff; padding: 50px 80px; border-radius: 30px; text-align: center; border: 2px solid var(--pri-pink); box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.victory-title { font-size: 60px; color: var(--pri-pink); font-style: italic; margin-bottom: 30px; }
.btn-main { background: var(--pri-pink); color: #fff; border: none; padding: 15px 40px; border-radius: 30px; font-weight: bold; font-size: 18px; cursor: pointer; }

/* 動畫 */
@keyframes idle2D { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes pulse2D { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.5; } }
@keyframes ubGlow { from { box-shadow: 0 0 10px var(--pri-gold); } to { box-shadow: 0 0 25px var(--pri-pink); } }
@keyframes dmg2D {
    0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    20% { transform: translate(-50%, -30px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -80px) scale(1); opacity: 0; }
}
@keyframes attack2D {
    0% { transform: translateX(0); }
    35% { transform: translateX(150px) scale(1.1); }
    100% { transform: translateX(0); }
}

.attack-anim { animation: attack2D 0.45s ease-in-out; }