/* ============================================================
   班級寶可夢養成系統 - 活潑兒童向 UI 樣式
   設計重點：圓潤、飽和、3D 彈跳、豐富動畫、進化特效
   ============================================================ */

:root {
    /* 寶可夢主色 */
    --primary: #ee1515;
    --primary-light: #ff5252;
    --pika-yellow: #ffcb05;
    --pika-yellow-dark: #c7a008;
    --poke-blue: #3b4cca;
    --poke-blue-light: #5b6bea;
    --grass: #4caf50;
    --sky-top: #7ec8ff;
    --sky-bottom: #cdeeff;

    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --info: #3498db;

    --ink: #2d3436;
    --ink-soft: #636e72;
    /* 相容別名：補上舊程式中引用、過去未定義而導致邊框/陰影/文字失效的變數 */
    --ui-border: #2d3436;
    --text-primary: #2d3436;
    --text-dark: #2d3436;
    --paper: #fffdf7;
    --card: #ffffff;
    --line: #2d3436;
    --line-soft: #dfe6e9;

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-hard: 0 4px 0 var(--line);
    --shadow-soft: 0 8px 24px rgba(45,52,54,0.12);
    --shadow-pop: 0 10px 30px rgba(238,21,21,0.18);
}

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

html, body {
    font-family: "Comic Sans MS", "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
    background: linear-gradient(160deg, #ffe9ec 0%, #fff4d6 40%, #e3f3ff 100%);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
}

/* 背景漂浮裝飾氣泡 */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255,203,5,0.18) 0, transparent 90px),
        radial-gradient(circle at 88% 18%, rgba(59,76,202,0.14) 0, transparent 110px),
        radial-gradient(circle at 78% 82%, rgba(238,21,21,0.12) 0, transparent 100px),
        radial-gradient(circle at 20% 85%, rgba(76,175,80,0.14) 0, transparent 90px);
    pointer-events: none; z-index: 0;
}

/* =============== 整體版面 =============== */
.app-container {
    position: relative; z-index: 1;
    max-width: 1400px; margin: 0 auto; padding: 14px;
    display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 18px;
    align-items: start;
}

/* 精靈球頂飾 */
.pokeball-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 8px; z-index: 1000;
    background: linear-gradient(90deg, var(--primary) 0 50%, #f5f5f5 50% 100%);
    box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.pokeball-bar::after {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: #f5f5f5; border: 4px solid var(--line);
    box-shadow: inset 0 0 0 3px #fff;
}

/* =============== 左側面板 =============== */
.left-panel { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 18px; min-width: 0; }

/* 班級標頭 */
.class-header {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 3px solid var(--line);
    border-radius: var(--radius-md); padding: 10px 12px;
    box-shadow: var(--shadow-hard);
}
.mute-btn, .class-manage-btn, .admin-login-btn {
    border: 2.5px solid var(--line); border-radius: 50%;
    width: 38px; height: 38px; font-size: 1.05rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #fff; box-shadow: 0 3px 0 var(--line);
    transition: transform .12s, box-shadow .12s;
}
.mute-btn:hover, .class-manage-btn:hover, .admin-login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); }
.mute-btn:active, .class-manage-btn:active, .admin-login-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.admin-login-btn { background: linear-gradient(135deg,#6c5ce7,#a29bfe); color: #fff; }
body.admin-mode .admin-login-btn { background: linear-gradient(135deg,#00b894,#55efc4); }

.class-select {
    flex: 1; min-width: 0; padding: 8px 10px; font-family: inherit; font-weight: bold;
    font-size: 0.95rem; border: 2.5px solid var(--line); border-radius: 10px;
    background: #fff8e1; color: var(--ink); cursor: pointer;
}
.level-badge {
    background: linear-gradient(135deg, var(--pika-yellow), #ffe082);
    border: 2.5px solid var(--line); border-radius: 20px; padding: 5px 12px;
    font-weight: bold; font-size: 0.9rem; white-space: nowrap; box-shadow: 0 2px 0 var(--line);
    animation: badgeWiggle 3s ease-in-out infinite;
}
@keyframes badgeWiggle { 0%,90%,100%{transform:rotate(0)} 93%{transform:rotate(-6deg)} 96%{transform:rotate(6deg)} }
.save-status { font-size: 0.72rem; white-space: nowrap; font-weight: bold; }
.save-status.saved { color: var(--success); }
.save-status.saving { color: var(--warning); }
.save-status.error { color: var(--danger); }

/* =============== 寶可夢舞台 =============== */
.stage {
    position: relative; overflow: hidden;
    border: 3px solid var(--line); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%, #b8e994 70%, #8ed36b 100%);
    box-shadow: var(--shadow-hard), inset 0 0 0 4px rgba(255,255,255,.25);
    padding: 16px 16px 0; min-height: 360px;
    display: flex; flex-direction: column;
    transition: background .8s ease;
}
/* 柔和太陽光暈 */
.stage::before {
    content:''; position:absolute; top:-34px; right:-24px; width:150px; height:150px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,236,170,.9) 0%, rgba(255,244,180,.4) 45%, transparent 70%);
    pointer-events:none; z-index:0;
}
/* 圓緩草地山丘，柔化地平線 */
.stage::after {
    content:''; position:absolute; left:-12%; right:-12%; bottom:-46%; height:64%; border-radius:50% 50% 0 0 / 26% 26% 0 0;
    background: linear-gradient(180deg, rgba(165,225,130,.55), rgba(110,196,101,.55));
    pointer-events:none; z-index:0;
}
/* 舞台天色：每一等都有一點點不同（Lv.1→10 連續漸變，讓孩子看到成長）*/
.stage[data-level="1"]  { background: linear-gradient(180deg,#7ec8ff,#cdeeff 70%,#b8e994 70%,#8ed36b); }
.stage[data-level="2"]  { background: linear-gradient(180deg,#86ccff,#d6f1ff 70%,#bdeb96 70%,#92d66f); }
.stage[data-level="3"]  { background: linear-gradient(180deg,#96d2ff,#e0f5ff 70%,#c2ed99 70%,#97d973); }
.stage[data-level="4"]  { background: linear-gradient(180deg,#a8dcff,#eafaff 70%,#c8ef9c 70%,#9cdc77); }
.stage[data-level="5"]  { background: linear-gradient(180deg,#ffd9a8,#fff3df 70%,#d0f0a0 70%,#a2de7b); }
.stage[data-level="6"]  { background: linear-gradient(180deg,#a6e7ff,#eafdff 70%,#caf2a6 70%,#a6e082); }
.stage[data-level="7"]  { background: linear-gradient(180deg,#cdb8ff,#f1eaff 70%,#c4f0aa 70%,#9edc84); }
.stage[data-level="8"]  { background: linear-gradient(180deg,#ffc4dd,#ffedf5 70%,#c6efac 70%,#96d886); }
.stage[data-level="9"]  { background: linear-gradient(180deg,#c2b0ff,#ece6ff 70%,#bdeeb0 70%,#8fd488); }
.stage[data-level="10"] { background: linear-gradient(180deg,#ffe28a,#fff7dc 70%,#d8f2a8 70%,#a6dc7e); }
/* Lv.10 滿級金色慶祝氛圍 */
.stage[data-level="10"]::before { background: radial-gradient(circle, rgba(255,236,150,.95) 0%, rgba(255,210,90,.45) 45%, transparent 70%); }
/* 讓名字牌 / 進化指示 / 寶可夢都在山丘與太陽之上 */
.stage > .pet-name-tag, .stage > .evo-stage-indicator, .stage > .pet-container { z-index:4; }

/* ============ 每級解鎖的場景小裝飾 ============ */
.lvl-deco { position:absolute; pointer-events:none; opacity:0; visibility:hidden; transform:scale(.4); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); z-index:2; }
.lvl-deco.on { opacity:1; visibility:visible; transform:scale(1); }
/* Lv.2 草地上的小花 */
.deco-flower { bottom:10px; font-size:1.3rem; animation: grassSway 3s ease-in-out infinite; }
.deco-flower.f1 { left:10%; } .deco-flower.f2 { left:84%; animation-delay:.8s; } .deco-flower.f3 { left:20%; bottom:6px; font-size:1rem; animation-delay:1.4s; }
/* Lv.3 飛舞的蝴蝶 */
.deco-butterfly { top:30%; left:6%; font-size:1.5rem; animation: butterflyFly 9s ease-in-out infinite; }
@keyframes butterflyFly {
    0% { left:4%; top:34%; transform: rotate(-8deg); }
    25% { left:30%; top:20%; transform: rotate(10deg); }
    50% { left:62%; top:30%; transform: rotate(-6deg); }
    75% { left:34%; top:42%; transform: rotate(8deg); }
    100% { left:4%; top:34%; transform: rotate(-8deg); }
}
/* Lv.5 氣球 */
.deco-balloon { font-size:1.6rem; animation: balloonBob 4s ease-in-out infinite; }
.deco-balloon.b1 { top:16%; left:7%; } .deco-balloon.b2 { top:10%; left:88%; animation-delay:1.2s; font-size:1.35rem; }
@keyframes balloonBob { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-14px) rotate(4deg);} }
/* Lv.6 彩虹 */
.deco-rainbow { top:6%; left:50%; transform:translateX(-50%) scale(.4); font-size:3.4rem; filter: saturate(1.1) drop-shadow(0 2px 4px rgba(255,255,255,.6)); opacity:0; transition:opacity .8s; }
.deco-rainbow.on { opacity:.85; transform:translateX(-50%) scale(1); animation: rainbowGlow 4s ease-in-out infinite; }
@keyframes rainbowGlow { 0%,100%{ filter:saturate(1) brightness(1);} 50%{ filter:saturate(1.35) brightness(1.12);} }
/* Lv.7 繞行流星 */
.deco-spark { font-size:1.1rem; color:#fff; text-shadow:0 0 10px #fff,0 0 6px #ffe08a; animation: twinkle 1.8s ease-in-out infinite; }
.deco-spark.s1 { top:22%; left:72%; } .deco-spark.s2 { top:40%; left:14%; animation-delay:.6s; } .deco-spark.s3 { top:14%; left:46%; animation-delay:1.1s; }
/* Lv.9 漂浮音符 */
.deco-note { font-size:1.3rem; animation: noteFloat 5s ease-in-out infinite; }
.deco-note.n1 { top:46%; left:8%; } .deco-note.n2 { top:38%; left:90%; animation-delay:1.6s; } .deco-note.n3 { top:52%; left:78%; animation-delay:3s; }
@keyframes noteFloat { 0%,100%{ transform:translateY(0) rotate(-8deg); opacity:.85;} 50%{ transform:translateY(-18px) rotate(8deg); opacity:1;} }
/* Lv.10 冠軍皇冠（浮在寶可夢頭頂） */
.deco-crown { bottom:55%; left:50%; font-size:2rem; z-index:6; filter: drop-shadow(0 3px 4px rgba(180,130,0,.4)); }
.deco-crown.on { animation: crownFloat 2.4s ease-in-out infinite; }
@keyframes crownFloat { 0%,100%{ transform:translateX(-50%) translateY(0) rotate(-6deg);} 50%{ transform:translateX(-50%) translateY(-8px) rotate(6deg);} }

/* ============ 升級瞬間特效 ============ */
/* 舞台中央升起的升級橫額 */
.level-banner {
    position:absolute; left:50%; top:34%; z-index:60; transform:translate(-50%,0) scale(.3);
    background: linear-gradient(135deg,#fff,#fff6d8); border:3px solid var(--line);
    border-radius:999px; padding:8px 22px; font-weight:900; white-space:nowrap;
    box-shadow:0 5px 0 var(--line), 0 0 24px rgba(255,210,80,.8);
    color:var(--primary); pointer-events:none; text-align:center;
}
.level-banner .lb-lv { font-size:1.5rem; display:block; }
.level-banner .lb-sub { font-size:.78rem; color:var(--ink); font-weight:bold; display:block; margin-top:2px; }
.level-banner.go { animation: lbRise 2.2s cubic-bezier(.34,1.4,.64,1) forwards; }
@keyframes lbRise {
    0% { opacity:0; transform:translate(-50%,30px) scale(.3); }
    18% { opacity:1; transform:translate(-50%,0) scale(1.12); }
    28% { transform:translate(-50%,0) scale(1); }
    78% { opacity:1; transform:translate(-50%,-14px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-46px) scale(.95); }
}
/* 升級衝擊波（從寶可夢身上擴散的圓環） */
.shock-ring {
    position:absolute; left:50%; bottom:70px; width:90px; height:90px; border-radius:50%;
    border:5px solid rgba(255,224,120,.95); transform:translate(-50%,50%) scale(.3);
    pointer-events:none; z-index:5;
}
.shock-ring.go { animation: shockOut .9s ease-out forwards; }
.shock-ring.r2 { border-color: rgba(255,255,255,.9); animation-delay:.12s; }
@keyframes shockOut {
    0% { opacity:.95; transform:translate(-50%,50%) scale(.3); }
    100% { opacity:0; transform:translate(-50%,50%) scale(3.1); }
}

/* 漂浮雲朵 */
.cloud {
    position: absolute; background: #fff; border-radius: 50px; opacity: 0.9;
    animation: cloudDrift linear infinite; pointer-events: none;
}
.cloud::before, .cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.cloud.c1 { width: 60px; height: 20px; top: 12%; left: -10%; animation-duration: 28s; }
.cloud.c1::before { width:26px; height:26px; top:-13px; left:10px; }
.cloud.c1::after { width:18px; height:18px; top:-8px; left:34px; }
.cloud.c2 { width: 46px; height: 16px; top: 26%; left: -10%; animation-duration: 40s; animation-delay: -12s; opacity:.7; }
.cloud.c2::before { width:20px; height:20px; top:-10px; left:8px; }
.cloud.c2::after { width:14px; height:14px; top:-6px; left:26px; }
.cloud.c3 { width: 52px; height: 18px; top: 6%; left: -10%; animation-duration: 34s; animation-delay: -22s; opacity:.8; }
.cloud.c3::before { width:22px; height:22px; top:-11px; left:9px; }
.cloud.c3::after { width:16px; height:16px; top:-7px; left:30px; }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(560px); } }

/* 閃爍星星 */
.twinkle {
    position: absolute; color: #fff; pointer-events: none;
    animation: twinkle 2.4s ease-in-out infinite; text-shadow: 0 0 8px #fff;
}
@keyframes twinkle { 0%,100%{opacity:.2; transform:scale(.7)} 50%{opacity:1; transform:scale(1.15)} }

/* 舊的 stage-decor 隱藏（改用動態雲朵） */
.stage-decor { display: none; }

/* 名字牌 */
.pet-name-tag {
    position: relative; z-index: 5; align-self: center;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.92); border: 2.5px solid var(--line);
    border-radius: 30px; padding: 6px 16px; font-weight: bold; font-size: 1.1rem;
    box-shadow: 0 3px 0 var(--line);
}
.edit-name-btn {
    border: none; background: var(--pika-yellow); border-radius: 50%;
    width: 24px; height: 24px; cursor: pointer; font-size: 0.75rem;
    border: 2px solid var(--line); line-height: 1;
}

/* 進化階段指示 */
.evo-stage-indicator {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    display: flex; gap: 5px; align-items: center;
    background: rgba(255,255,255,0.9); border: 2px solid var(--line);
    border-radius: 20px; padding: 4px 10px; font-size: 0.72rem; font-weight: bold;
}
.evo-dot { width: 10px; height: 10px; border-radius: 50%; background: #dfe6e9; border: 1.5px solid var(--line); transition: all .3s; }
.evo-dot.filled { background: linear-gradient(135deg,#ffd700,#ffaa00); box-shadow: 0 0 8px rgba(255,200,0,.8); }
.evo-dot.now { animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{ transform: scale(1.15);} 50%{ transform: scale(1.5); box-shadow:0 0 12px rgba(255,200,0,.95);} }
.evo-stage-ico { font-size: .85rem; line-height:1; }

/* 寶可夢本體 */
.pet-container {
    position: relative; z-index: 4; flex: 1;
    display: flex; align-items: flex-end; justify-content: center;
    cursor: pointer; padding-bottom: 6px; min-height: 220px;
}
.pet-img {
    position: relative; z-index: 2;
    width: 190px; max-width: 70%; height: auto; object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.20));
    user-select: none; -webkit-user-drag: none;
    animation: idleBob 3s ease-in-out infinite;
    transition: transform .2s, width .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes idleBob {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}
.pet-container.jump .pet-img { animation: petJump .55s cubic-bezier(.28,.84,.42,1); }
@keyframes petJump {
    0% { transform: translateY(0) scale(1,1); }
    30% { transform: translateY(-46px) scale(.94,1.08); }
    55% { transform: translateY(-46px) scale(1.06,.92); }
    75% { transform: translateY(0) scale(1.12,.88); }
    100% { transform: translateY(0) scale(1,1); }
}
.pet-container.happy .pet-img { animation: happySpin .6s ease; }
@keyframes happySpin { 0%{transform:rotate(0)} 25%{transform:rotate(-8deg) scale(1.05)} 75%{transform:rotate(8deg) scale(1.05)} 100%{transform:rotate(0)} }
.pet-container.shake .pet-img { animation: sadShake .5s ease; }
@keyframes sadShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px) rotate(-4deg)} 40%{transform:translateX(8px) rotate(4deg)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

/* ============ 多層次柔和光環（取代舊式粗糙光圈）============ */
.pet-fx { position:absolute; left:50%; bottom:14px; width:248px; height:248px; transform:translateX(-50%); pointer-events:none; z-index:1; }
.pet-aura {
    position:absolute; inset:0; border-radius:50%; filter:blur(7px);
    background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(150,214,255,.40) 42%, rgba(150,214,255,0) 70%);
    animation: auraBreath 4.6s ease-in-out infinite;
}
@keyframes auraBreath { 0%,100%{transform:scale(.88);opacity:.65} 50%{transform:scale(1.06);opacity:.95} }
/* 細緻放射光線：以遮罩做成兩端淡出的柔和光環 */
.pet-rays {
    position:absolute; inset:-8%; border-radius:50%; opacity:0;
    background: repeating-conic-gradient(from 0deg,
        rgba(255,255,255,0) 0deg, rgba(255,240,190,.5) 6deg, rgba(255,255,255,0) 13deg);
    -webkit-mask: radial-gradient(circle, transparent 36%, #000 47%, #000 63%, transparent 78%);
            mask: radial-gradient(circle, transparent 36%, #000 47%, #000 63%, transparent 78%);
    filter:blur(1.4px); animation: raysSpinSlow 24s linear infinite;
}
@keyframes raysSpinSlow { to { transform: rotate(360deg); } }
/* 雙層軌道星環 */
.pet-orbit { position:absolute; border-radius:50%; opacity:0; }
.pet-orbit-a { inset:4%; border:2px dashed rgba(255,255,255,.65); animation: orbitSpin 15s linear infinite; }
.pet-orbit-b { inset:-6%; border:2px dotted rgba(255,233,168,.7); animation: orbitSpinRev 22s linear infinite; }
.pet-orbit-a::before { content:'✦'; position:absolute; top:-8px; left:50%; font-size:13px; color:#fff; text-shadow:0 0 8px #fff,0 0 4px #ffe08a; }
.pet-orbit-b::before { content:'✧'; position:absolute; bottom:-7px; left:28%; font-size:11px; color:#ffe9a8; text-shadow:0 0 6px #fff; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinRev { to { transform: rotate(-360deg); } }

/* 第一階段：只有淡淡水光 */
.pet-container[data-stage="1"] .pet-aura { background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(150,214,255,.32) 45%, rgba(150,214,255,0) 70%); }
/* 第二階段：金色暖光 + 光線與星環 */
.pet-container[data-stage="2"] .pet-aura { background: radial-gradient(circle, rgba(255,255,255,.8) 0%, rgba(255,224,130,.55) 44%, rgba(255,200,60,0) 72%); }
.pet-container[data-stage="2"] .pet-rays { opacity:.75; }
.pet-container[data-stage="2"] .pet-orbit-a { opacity:.8; }
.pet-container[data-stage="2"] .pet-orbit-b { opacity:.6; }
/* 最終階段：夢幻彩虹光、光線更亮轉更快 */
.pet-container[data-stage="3"] .pet-aura {
    background:
        radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,205,235,.55) 30%, rgba(190,225,255,.5) 55%, rgba(200,255,225,0) 74%);
    animation: auraBreath 3.6s ease-in-out infinite;
}
.pet-container[data-stage="3"] .pet-rays { opacity:1; animation-duration:14s; }
.pet-container[data-stage="3"] .pet-orbit-a { opacity:.95; border-color:rgba(255,255,255,.85); }
.pet-container[data-stage="3"] .pet-orbit-b { opacity:.85; }
.pet-img.evolved { filter: drop-shadow(0 0 14px rgba(255,214,110,.55)) drop-shadow(0 10px 12px rgba(0,0,0,.20)); }
.pet-img.final-form { filter: drop-shadow(0 0 20px rgba(255,170,235,.65)) drop-shadow(0 0 10px rgba(150,210,255,.5)) drop-shadow(0 10px 12px rgba(0,0,0,.20)); }
/* 升級瞬間寶可夢自身金色發光一閃（保留原本上下浮動）*/
.pet-img.level-pulse { animation: idleBob 3s ease-in-out infinite, levelGlow .85s ease; }
@keyframes levelGlow {
    0% { filter: drop-shadow(0 10px 12px rgba(0,0,0,.20)) brightness(1); }
    35% { filter: drop-shadow(0 0 22px rgba(255,222,90,.95)) drop-shadow(0 0 10px rgba(255,255,255,.8)) brightness(1.4); }
    100% { filter: drop-shadow(0 10px 12px rgba(0,0,0,.20)) brightness(1); }
}
/* 每一等寶可夢都會長大一點點（用 width 避免與 transform 動畫衝突）*/
.pet-container[data-level="1"] .pet-img { width:176px; }
.pet-container[data-level="2"] .pet-img { width:180px; }
.pet-container[data-level="3"] .pet-img { width:184px; }
.pet-container[data-level="4"] .pet-img { width:188px; }
.pet-container[data-level="5"] .pet-img { width:192px; }
.pet-container[data-level="6"] .pet-img { width:196px; }
.pet-container[data-level="7"] .pet-img { width:200px; }
.pet-container[data-level="8"] .pet-img { width:203px; }
.pet-container[data-level="9"] .pet-img { width:205px; }
.pet-container[data-level="10"] .pet-img { width:208px; }
/* 進化瞬間的爆光 */
.pet-container.evo-burst .pet-aura { animation: auraFlash 1.1s ease; }
.pet-container.evo-burst .pet-rays { opacity:1; animation-duration:2.5s; }
@keyframes auraFlash {
    0% { transform:scale(.6); opacity:.3; }
    45% { transform:scale(1.35); opacity:1; filter:blur(12px); }
    100% { transform:scale(1.06); opacity:.95; filter:blur(7px); }
}

/* ============ 表情氣泡（隨心情 / 互動反應）============ */
.pet-face {
    position:absolute; z-index:6; bottom:66%; left:54%;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; line-height:1;
    background:radial-gradient(circle at 35% 30%, #ffffff, #f3f7ff);
    border:2.5px solid var(--line); box-shadow:0 3px 0 var(--line), 0 0 12px rgba(255,255,255,.7);
    opacity:0; transform:scale(.3); pointer-events:none;
}
.pet-face.show { animation: facePop .42s cubic-bezier(.34,1.56,.64,1) forwards, faceFloat 2.6s ease-in-out .42s infinite; }
@keyframes facePop {
    0% { opacity:0; transform:scale(.2) rotate(-24deg); }
    70% { opacity:1; transform:scale(1.18) rotate(6deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes faceFloat { 0%,100%{ margin-top:0; } 50%{ margin-top:-6px; } }

/* 草地平台（柔和橢圓腳影） */
.pet-shadow {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 22px; border-radius: 50%; z-index: 0;
    background: radial-gradient(ellipse, rgba(45,52,54,.26) 0%, transparent 70%);
    animation: shadowBob 3s ease-in-out infinite;
}
@keyframes shadowBob { 0%,100%{transform:translateX(-50%) scaleX(1); opacity:.65} 50%{transform:translateX(-50%) scaleX(.8); opacity:.4} }

/* ===== 生動動畫：走路 / 好奇 / 入場 ===== */
.pet-container { will-change: transform; }
.pet-container.walking .pet-img { animation: petWalk 1.4s ease-in-out infinite; }
@keyframes petWalk {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    25% { transform: translateY(-10px) rotate(3deg); }
    50% { transform: translateY(0) rotate(-3deg); }
    75% { transform: translateY(-10px) rotate(3deg); }
}
.pet-container.curious .pet-img { animation: curiousTilt .9s ease; }
@keyframes curiousTilt {
    0%,100% { transform: rotate(0); }
    30% { transform: rotate(-12deg) translateX(-4px); }
    60% { transform: rotate(10deg) translateX(4px); }
}
.pet-container.pet-enter .pet-img { animation: petEnter .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes petEnter {
    0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
    60% { transform: scale(1.12) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== 環境漂浮粒子 ===== */
.ambient-layer { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.ambient-particle {
    position:absolute; bottom:12%; opacity:0; user-select:none;
    animation: ambientFloat 3.6s ease-in forwards;
    text-shadow: 0 0 8px rgba(255,255,255,.8);
}
@keyframes ambientFloat {
    0% { opacity:0; transform: translate(0,0) scale(.4) rotate(0); }
    15% { opacity:.95; }
    85% { opacity:.8; }
    100% { opacity:0; transform: translate(var(--dx,20px),-230px) scale(1.15) rotate(40deg); }
}

/* ===== 搖曳草地 ===== */
.grass-layer { position:absolute; left:0; right:0; bottom:0; height:46px; pointer-events:none; z-index:1; }
.grass-blade {
    position:absolute; bottom:0; width:10px; height:30px;
    background: linear-gradient(180deg, rgba(76,209,123,.0), rgba(76,209,123,.5));
    border-radius: 50% 50% 20% 20%; transform-origin: bottom center;
    animation: grassSway 2.6s ease-in-out infinite;
}
@keyframes grassSway { 0%,100%{ transform: rotate(-7deg) scale(var(--s,1));} 50%{ transform: rotate(7deg) scale(var(--s,1));} }

/* =============== 對話框 =============== */
.quote-container { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; position: relative; z-index: 5; }
.daily-quote {
    flex: 1; background: #fff; border: 2.5px solid var(--line); border-radius: 14px;
    padding: 9px 14px; font-weight: bold; font-size: 0.92rem; min-height: 20px;
    box-shadow: 0 3px 0 var(--line); position: relative;
}
.daily-quote::before {
    content:''; position:absolute; left:22px; top:-9px; width:16px; height:16px;
    background:#fff; border-left:2.5px solid var(--line); border-top:2.5px solid var(--line);
    transform: rotate(45deg);
}
.daily-quote span { position: relative; z-index: 1; }
.ai-btn {
    flex-shrink: 0; border: 2.5px solid var(--line); border-radius: 50%;
    width: 38px; height: 38px; cursor: pointer; font-size: 1rem;
    background: linear-gradient(135deg,#74b9ff,#0984e3); color:#fff;
    box-shadow: 0 3px 0 var(--line); transition: transform .12s;
}
.ai-btn:hover { transform: scale(1.08) rotate(-8deg); }
.ai-btn:active { transform: scale(.92); }

/* =============== 狀態列 =============== */
.status-board {
    background: rgba(255,255,255,.85); border: 2.5px solid var(--line); border-radius: var(--radius-md);
    padding: 12px; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 5;
}
.status-item { display: flex; align-items: center; gap: 10px; }
.status-label { font-weight: bold; font-size: 0.85rem; width: 84px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.status-label .ai-btn { flex: 0 0 auto; }
.bar-bg {
    flex: 1; height: 18px; background: #ecf0f1; border: 2px solid var(--line);
    border-radius: 20px; overflow: hidden; position: relative;
}
.bar-fill {
    height: 100%; border-radius: 20px; transition: width .6s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
}
.bar-fill::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: barShine 2.2s linear infinite;
}
@keyframes barShine { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* 經驗值 */
.exp-wrap {
    background: var(--card); border: 3px solid var(--line); border-radius: var(--radius-md);
    padding: 14px; box-shadow: var(--shadow-hard);
}
.exp-wrap > strong { font-size: 1.05rem; display:block; margin-bottom: 8px; }
.exp-bar-bg {
    position: relative; height: 26px; background: #ecf0f1; border: 2.5px solid var(--line);
    border-radius: 20px; overflow: hidden;
}
.exp-bar-fill {
    height: 100%; width: 0; border-radius: 20px;
    background: linear-gradient(90deg,#ff9f43,#ffcb05,#ff9f43);
    background-size: 200% 100%; animation: expGradient 2s linear infinite;
    transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes expGradient { to { background-position: -200% 0; } }
.exp-text {
    position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
    font-weight: bold; font-size: 0.82rem; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* =============== 右側面板 =============== */
.right-panel {
    background: var(--card); border: 3px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hard); overflow: hidden; min-width: 0;
}

/* 分頁 */
.tabs {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 0;
    background: linear-gradient(180deg,#fff5f5,#fff);
    border-bottom: 3px solid var(--line);
}
.tab {
    padding: 10px 14px; cursor: pointer; font-weight: bold; font-size: 0.9rem;
    border: 2.5px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0;
    background: #f1f2f6; color: var(--ink-soft); margin-bottom: -3px;
    transition: all .15s; user-select: none; position: relative;
}
.tab:hover { background: #ffeaa7; transform: translateY(-2px); }
.tab.active {
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    color: #fff; transform: translateY(-3px);
    box-shadow: 0 -3px 8px rgba(238,21,21,.25);
}
.admin-tab { background: linear-gradient(135deg,#6c5ce7,#a29bfe) !important; color:#fff !important; }

.tab-content { display: none; padding: 18px; animation: tabIn .35s cubic-bezier(.34,1.4,.64,1); max-height: 78vh; overflow-y: auto; }
.tab-content.active { display: block; }
@keyframes tabIn { from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }

.section-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 1.1rem; padding-left: 12px; margin-bottom: 12px;
    border-left: 6px solid var(--primary); line-height: 1.3; min-width: 0;
}
.section-title > span { min-width: 0; flex: 1; }
.section-title .sys-btn { flex: 0 0 auto; padding: 5px 12px; font-size: .85rem; border-width: 2px; box-shadow: 0 2px 0 #4834d4; }

/* =============== 輸入列 =============== */
.input-group { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.input-group input[type="text"], .input-group input[type="number"],
.add-student-box input {
    padding: 9px 12px; border: 2.5px solid var(--line); border-radius: 10px;
    font-family: inherit; font-size: 0.92rem; font-weight: bold;
}
.input-group input[type="text"] { flex: 1; min-width: 120px; }
.input-group input[type="number"] { width: 64px; text-align: center; }
.input-group input:focus, .add-student-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238,21,21,.15); }
.icon-btn {
    width: 40px; height: 40px; border: 2.5px solid var(--line); border-radius: 10px;
    background: #ffeaa7; font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 0 var(--line);
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

/* =============== 動作按鈕（3D 彈跳） =============== */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; }
.action-btn-wrapper { position: relative; }
.btn {
    border: 3px solid var(--line); border-radius: 14px; padding: 12px 8px;
    font-family: inherit; font-weight: bold; font-size: 0.92rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.25;
    transition: transform .1s, filter .15s; position: relative; user-select: none;
}
.btn span { font-size: 1.5rem; animation: iconBounce 2.5s ease-in-out infinite; }
@keyframes iconBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.btn small { font-size: 0.75rem; opacity: .85; font-weight: bold; }
.btn:active { transform: translateY(3px); }
.btn-green { background: linear-gradient(160deg,#55efc4,#00b894); color:#fff; box-shadow: 0 4px 0 #00805f; }
.btn-green:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 6px 0 #00805f; }
.btn-green:active { box-shadow: 0 1px 0 #00805f; }
.btn-yellow { background: linear-gradient(160deg,#ffeaa7,#fdcb6e); color: var(--ink); box-shadow: 0 4px 0 #d4a017; }
.btn-yellow:hover { filter:brightness(1.05); transform: translateY(-2px); box-shadow: 0 6px 0 #d4a017; }
.btn-yellow:active { box-shadow: 0 1px 0 #d4a017; }
.btn-blue { background: linear-gradient(160deg,#74b9ff,#0984e3); color:#fff; box-shadow: 0 4px 0 #0660a8; }
.btn-blue:hover { filter:brightness(1.06); transform: translateY(-2px); box-shadow: 0 6px 0 #0660a8; }
.btn-blue:active { box-shadow: 0 1px 0 #0660a8; }
.btn-gray { background: linear-gradient(160deg,#b2bec3,#636e72); color:#fff; box-shadow: 0 4px 0 #404a4d; }
.btn-gray:hover { filter:brightness(1.06); transform: translateY(-2px); box-shadow: 0 6px 0 #404a4d; }
.btn-gray:active { box-shadow: 0 1px 0 #404a4d; }

.del-action-btn {
    position: absolute; top: -8px; right: -8px; z-index: 5;
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line);
    background: var(--danger); color: #fff; font-size: 0.7rem; cursor: pointer;
    display: none; align-items: center; justify-content: center; box-shadow: 0 2px 0 var(--line);
}
.edit-mode .del-action-btn { display: flex; animation: popIn .2s ease; }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }

/* =============== 任務 =============== */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    background: #fff8e1; border: 2.5px solid var(--line); border-radius: 12px;
    box-shadow: 0 3px 0 var(--line); transition: all .2s;
}
.task-item.done { background: #d5f5e3; opacity: .75; }
.task-item.done .task-text { text-decoration: line-through; }
.task-check {
    width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--line);
    background: #fff; cursor: pointer; font-size: 1rem; flex-shrink: 0;
    display:flex; align-items:center; justify-content:center; transition: all .2s;
}
.task-item.done .task-check { background: var(--success); color: #fff; animation: popIn .3s ease; }
.task-text { flex: 1; font-weight: bold; }
.task-pts { background: var(--pika-yellow); border: 2px solid var(--line); border-radius: 12px; padding: 2px 10px; font-size: .8rem; font-weight: bold; }

/* =============== 學生 =============== */
.add-student-box { display: flex; gap: 8px; margin-bottom: 12px; }
.add-student-box input { flex: 1; padding: 9px 12px; border: 2.5px solid var(--line); border-radius: 10px; font-family: inherit; font-weight: bold; }
.student-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px; }
.student-item {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: #f8f9fa; border: 2.5px solid var(--line); border-radius: 12px;
    transition: transform .12s, background .2s;
}
.student-item:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.student-name { flex: 1; font-weight: bold; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-pts { font-weight: bold; color: var(--primary); font-size: .9rem; white-space:nowrap; align-self:center; }
.student-actions { display: flex; align-items:center; gap: 4px; flex-wrap: nowrap; flex-shrink:0; }
.student-actions button, .mini-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line);
    cursor: pointer; font-weight: bold; font-size: .9rem; line-height: 1; padding:0;
    display:flex; align-items:center; justify-content:center; background:#fff;
    box-shadow: 0 2px 0 var(--line); transition: transform .1s, box-shadow .1s;
}
.student-actions button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.stu-plus { background: #55efc4; }
.stu-minus { background: #ff7675; color:#fff; }
.student-del-btn { background:#ffe0e0 !important; }
.stu-group-select {
    border: 2px solid var(--line); border-radius: 8px; padding: 3px 6px;
    font-family: inherit; font-size: .78rem; font-weight: bold; color: var(--ink);
    background: #fff; width: fit-content; max-width: 110px; cursor:pointer;
}

/* =============== 圖鑑 =============== */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 12px; }
.pet-card {
    background: linear-gradient(160deg,#fff,#f6f7fb); border: 3px solid var(--line);
    border-radius: 16px; padding: 10px 6px; text-align: center; cursor: pointer;
    transition: transform .15s, box-shadow .15s; position: relative;
}
.pet-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 16px rgba(238,21,21,.18); }
.pet-card.selected { border-color: var(--primary); background: linear-gradient(160deg,#fff0f0,#ffe8e8); box-shadow: 0 0 0 3px rgba(238,21,21,.25); }
.pet-card.locked { filter: grayscale(.85); opacity: .7; cursor: not-allowed; }
.pokedex-card-img-wrap { position: relative; width: 100%; height: 78px; display:flex; align-items:center; justify-content:center; margin-bottom: 4px; }
.pokedex-card-img { max-width: 100%; max-height: 78px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); animation: idleBob 3.5s ease-in-out infinite; }
.pokedex-card-icon { font-size: 2.4rem; }
.pet-badge { position: absolute; top: -4px; right: 2px; font-size: 1.2rem; animation: badgeSpin 3s linear infinite; }
@keyframes badgeSpin { 0%,100%{transform:rotate(-10deg) scale(1)} 50%{transform:rotate(10deg) scale(1.15)} }
.evo-chain-mini { display:flex; align-items:center; justify-content:center; gap:2px; font-size:.65rem; color:var(--ink-soft); margin-top:2px; }
.evo-chain-mini img { width:20px; height:20px; object-fit:contain; }

/* =============== 排行 =============== */
.rank-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #f8f9fa; border: 2.5px solid var(--line); border-radius: 14px;
    box-shadow: 0 3px 0 var(--line);
}
.rank-item.rank-1 { background: linear-gradient(135deg,#fff3cd,#ffe69c); }
.rank-item.rank-2 { background: linear-gradient(135deg,#f1f3f5,#e0e4e8); }
.rank-item.rank-3 { background: linear-gradient(135deg,#fde2cf,#f7c9a3); }
.rank-num { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color:#fff; font-weight:bold; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; border:2px solid var(--line); }
.rank-item.rank-1 .rank-num { background: linear-gradient(135deg,#ffd700,#ffaa00); }
.rank-item.rank-2 .rank-num { background: linear-gradient(135deg,#c0c6cc,#9aa1a8); }
.rank-item.rank-3 .rank-num { background: linear-gradient(135deg,#e0995e,#c47a3e); }
.rank-name { flex:1; font-weight:bold; }
.rank-pts { font-weight:bold; color:var(--primary); font-size:1.05rem; }

/* =============== 歷史紀錄 =============== */
.history-list { display:flex; flex-direction:column; gap:6px; max-height: 340px; overflow-y:auto; }
.history-item {
    background:#f8f9fa; border-left:5px solid var(--primary); border-radius:8px;
    padding:8px 12px; font-size:.88rem; animation: tabIn .3s ease;
}
.history-time { font-weight:bold; color:var(--poke-blue); margin-right:6px; }

/* =============== 系統按鈕 =============== */
.sys-btn {
    border: 3px solid var(--line); border-radius: 12px; padding: 10px 16px;
    font-family: inherit; font-weight: bold; font-size: .95rem; cursor: pointer;
    background: linear-gradient(160deg,#a29bfe,#6c5ce7); color:#fff;
    box-shadow: 0 4px 0 #4834d4; transition: all .12s; flex:1; text-align:center;
    white-space: nowrap;
}
.sys-btn:hover { transform: translateY(-2px); filter:brightness(1.08); box-shadow: 0 6px 0 #4834d4; }
.sys-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4834d4; }

/* Excel 匯出主按鈕 */
.excel-export-btn {
    width: 100%; border: 3px solid #1e7e34; border-radius: 16px; padding: 16px 14px;
    font-family: inherit; font-weight: bold; font-size: 1.05rem; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #28c76f 0%, #1b9e4b 55%, #17803d 100%);
    box-shadow: 0 5px 0 #145c2c, 0 10px 18px rgba(27,158,75,.35);
    transition: transform .12s, filter .15s, box-shadow .12s; letter-spacing: .5px;
    animation: excelGlow 2.4s ease-in-out infinite;
}
.excel-export-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 7px 0 #145c2c, 0 14px 24px rgba(27,158,75,.4); }
.excel-export-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #145c2c; }
@keyframes excelGlow { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.12);} }
.sys-btn-group { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }

/* =============== 彈窗 =============== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(45,52,54,.55); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-overlay.active { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
    background: var(--paper); border: 4px solid var(--line); border-radius: 24px;
    padding: 26px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y:auto;
    box-shadow: 0 12px 0 var(--line), var(--shadow-soft); text-align: center;
    animation: modalPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop { from{transform:scale(.7) translateY(40px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }
.modal h2 { font-size: 1.5rem; margin-bottom: 14px; color: var(--primary); }
.modal p { font-size: 1.05rem; line-height: 1.7; white-space: pre-wrap; margin-bottom: 12px; font-weight: bold; }
.modal input { font-family: inherit; }
.modal-btn {
    border: 3px solid var(--line); border-radius: 14px; padding: 12px 26px;
    font-family: inherit; font-weight: bold; font-size: 1.05rem; cursor: pointer;
    background: linear-gradient(160deg,var(--primary),var(--primary-light)); color:#fff;
    box-shadow: 0 4px 0 #a30f0f; transition: all .12s; margin: 6px;
}
.modal-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #a30f0f; }
.modal-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a30f0f; }
.chest-icon { font-size: 4rem; animation: badgeSpin 2s ease-in-out infinite; margin: 10px 0; }

/* =============== 浮動分數 =============== */
.floating-text {
    position: absolute; font-size: 2rem; font-weight: bold; z-index: 50; pointer-events: none;
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 3px 6px rgba(0,0,0,.2);
    animation: floatUp 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(.5); opacity: 0; }
    15% { transform: translateY(-15px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-90px) scale(1); opacity: 0; }
}

/* =============== 進化特效全螢幕 =============== */
.evo-overlay {
    position: fixed; inset: 0; z-index: 500; display: none;
    align-items: center; justify-content: center; pointer-events: none;
}
.evo-overlay.active { display: flex; }
.evo-flash {
    position: absolute; inset: 0; background: #fff; opacity: 0;
}
.evo-overlay.active .evo-flash { animation: evoFlash 2.2s ease forwards; }
@keyframes evoFlash {
    0% { opacity: 0; } 20% { opacity: .95; } 35% { opacity: .3; }
    50% { opacity: .95; } 70% { opacity: .4; } 100% { opacity: 0; }
}
.evo-stage-pet {
    position: relative; width: 240px; height: 240px; display:flex; align-items:center; justify-content:center;
}
.evo-ring {
    position:absolute; width:200px; height:200px; border-radius:50%;
    border: 6px solid rgba(255,255,255,.9); opacity:0;
}
.evo-overlay.active .evo-ring { animation: evoRing 2s ease-out forwards; }
.evo-ring.r2 { animation-delay:.15s; }
@keyframes evoRing {
    0%{transform:scale(.3); opacity:.9; border-width:10px;}
    100%{transform:scale(1.6); opacity:0; border-width:2px;}
}
.evo-pet-img {
    width: 200px; height: 200px; object-fit: contain; position:relative; z-index:2;
    filter: brightness(0) saturate(100%);
}
.evo-overlay.active .evo-pet-img { animation: evoTransform 2.4s ease forwards; }
@keyframes evoTransform {
    0% { filter: brightness(0); transform: scale(.8); }
    45% { filter: brightness(0); transform: scale(.9) rotate(180deg); }
    60% { filter: brightness(2); transform: scale(1.15) rotate(360deg); }
    80% { filter: brightness(1.3); transform: scale(1.1); }
    100% { filter: brightness(1); transform: scale(1); }
}
.evo-burst-rays {
    position:absolute; width:360px; height:360px; border-radius:50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(255,255,255,0) 0deg, rgba(255,244,200,.85) 7deg, rgba(255,255,255,0) 14deg);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 44%, #000 70%, transparent 82%);
            mask: radial-gradient(circle, transparent 30%, #000 44%, #000 70%, transparent 82%);
    filter: blur(1px);
    opacity:0;
}
.evo-overlay.active .evo-burst-rays { animation: evoRaysSpin 1.1s linear infinite, evoRaysFade .5s .7s ease forwards; }
@keyframes evoRaysSpin { to { transform: rotate(360deg); } }
@keyframes evoRaysFade { from{opacity:0} to{opacity:.95} }
.evo-text {
    position:absolute; bottom: 18%; left:50%; transform:translateX(-50%);
    font-size: 2rem; font-weight: bold; color:#fff; text-shadow: 0 0 12px var(--primary), 3px 3px 0 var(--line);
    opacity:0; white-space:nowrap;
}
.evo-overlay.active .evo-text { animation: evoTextShow 2.4s ease forwards; }
@keyframes evoTextShow { 0%,55%{opacity:0; transform:translateX(-50%) scale(.5)} 70%{opacity:1; transform:translateX(-50%) scale(1.1)} 85%{transform:translateX(-50%) scale(1)} 100%{opacity:1; transform:translateX(-50%) scale(1)} }

/* =============== 慶祝彩花 =============== */
.confetti {
    position: fixed; top:-20px; z-index: 999; pointer-events:none; border-radius: 2px;
}

/* =============== Emoji 選擇器 =============== */
.emoji-picker {
    display:none; position:absolute; z-index: 200;
    grid-template-columns: repeat(8,1fr); gap:4px; padding:10px;
    background:#fff; border:3px solid var(--line); border-radius:14px;
    box-shadow: var(--shadow-soft); max-width: 320px;
}
.emoji-picker button { border:none; background:none; font-size:1.3rem; cursor:pointer; padding:4px; border-radius:8px; transition:background .1s; }
.emoji-picker button:hover { background:#ffeaa7; transform:scale(1.2); }

/* =============== 管理員 =============== */
.admin-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:15px; }
.admin-stat-card {
    background: linear-gradient(160deg,#fff,#f0f0f8); border:3px solid var(--line);
    border-radius:14px; padding:14px 8px; text-align:center; box-shadow:0 3px 0 var(--line);
}
.admin-stat-num { font-size:1.9rem; font-weight:bold; color:#6c5ce7; }
.admin-stat-label { font-size:.78rem; color:var(--ink-soft); margin-top:2px; font-weight:bold; }
.admin-class-list { display:flex; flex-direction:column; gap:12px; }
.admin-class-card { background:#fff; border:3px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 3px 0 var(--line); }
.admin-class-card.current { border-color:var(--success); background:linear-gradient(135deg,#fff,#e8f8f5); }
.admin-class-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.admin-class-name { font-size:1.15rem; font-weight:bold; }
.admin-current-badge { background:var(--success); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:10px; margin-left:8px; }
.admin-class-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-btn {
    padding:6px 12px; font-size:.85rem; border:2px solid var(--line); border-radius:10px;
    cursor:pointer; font-family:inherit; font-weight:bold; background:#74b9ff; color:#fff;
    box-shadow:0 2px 0 var(--line);
}
.admin-btn:active { transform:translateY(2px); box-shadow:none; }
.admin-btn-danger { background:#ff7675; }
.admin-class-body { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.admin-class-pet { display:flex; align-items:center; gap:10px; }
.admin-pet-img { width:48px; height:48px; object-fit:contain; }
.admin-class-stats { display:flex; gap:14px; font-size:.88rem; color:var(--ink-soft); font-weight:bold; }
.admin-students-detail { margin-top:10px; border-top:2px dashed var(--line-soft); padding-top:8px; }
.admin-students-detail summary { cursor:pointer; font-weight:bold; color:#6c5ce7; font-size:.88rem; }
.admin-students-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; margin-top:8px; }
.admin-student-item { display:flex; justify-content:space-between; background:#f8f9fa; padding:5px 8px; border-radius:8px; font-size:.82rem; border:1px solid var(--line-soft); }
.admin-student-pts { font-weight:bold; color:#e17055; }

/* =============== 班級管理彈窗 =============== */
#classList { display:flex; flex-direction:column; gap:8px; margin:14px 0; }

/* =============== 捲軸美化 =============== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f2f6; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary),var(--primary-light)); border-radius: 10px; border:2px solid #f1f2f6; }

/* =============== 響應式 =============== */
@media (max-width: 980px) {
    .app-container { grid-template-columns: minmax(0, 1fr); }
    .left-panel { position: static; }
    .tab-content { max-height: none; }
    /* 單欄時頁籤改為整齊膠囊網格，避免資料夾頁籤換行錯位 */
    .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 6px; padding: 8px; }
    .tab { border-radius: 10px; border: 2px solid var(--line); margin-bottom: 0; text-align: center; line-height: 1.15; }
    .tab.active { transform: none; border-radius: 10px; }
    .tab:hover { transform: none; }
}
@media (max-width: 600px) {
    .app-container { padding: 8px; gap: 10px; }
    .pet-img { width: 150px; }
    .pet-container[data-level="1"] .pet-img { width:138px; }
    .pet-container[data-level="2"] .pet-img { width:141px; }
    .pet-container[data-level="3"] .pet-img { width:144px; }
    .pet-container[data-level="4"] .pet-img { width:147px; }
    .pet-container[data-level="5"] .pet-img { width:150px; }
    .pet-container[data-level="6"] .pet-img { width:153px; }
    .pet-container[data-level="7"] .pet-img { width:156px; }
    .pet-container[data-level="8"] .pet-img { width:158px; }
    .pet-container[data-level="9"] .pet-img { width:160px; }
    .pet-container[data-level="10"] .pet-img { width:162px; }
    /* 窄版頁籤：整齊圓角膠囊，平均換行不錯位 */
    .tabs {
        display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px; padding: 8px;
    }
    .tab {
        border-radius: 10px; border: 2px solid var(--line);
        margin-bottom: 0; padding: 8px 4px; font-size: .76rem;
        text-align: center; line-height: 1.15;
    }
    .tab.active { transform: none; border-radius: 10px; }
    .tab:hover { transform: none; }
    .tab-content { padding: 12px; }
    .action-grid { grid-template-columns: repeat(2,1fr); gap:6px; }
    .btn { padding:9px 4px; font-size:.82rem; }
    .pet-grid { grid-template-columns: repeat(3,1fr); gap:6px; }
    .pokedex-card-img-wrap { height:58px; }
    .pokedex-card-img { max-height:58px; }
    .student-list { grid-template-columns:1fr; }
    .admin-summary { grid-template-columns:repeat(2,1fr); }
    .sys-btn-group { flex-direction:column; }
    .modal { padding:18px; }
    .evo-text { font-size:1.4rem; }
    .save-status { display:none; }
    .class-header { gap:6px; padding:8px; }
    .level-badge { font-size:.82rem; padding:5px 8px; }
    .mute-btn, .class-manage-btn, .admin-login-btn { width:34px; height:34px; }
    .class-select { min-width:0; flex:1; }
}