@font-face {
    font-family: "Ma Shan Zheng";
    src: url("../assets/fonts/MaShanZheng-Regular.ttf") format("truetype");
    font-display: swap;
}
/* Loading screen */
#loading-screen.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: #0a0a0a;
    display: flex; justify-content: center; align-items: center;
    width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
    font-family: "Ma Shan Zheng", "Microsoft YaHei", serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
#game-container {
    position: relative;
    /* width/height set by JS via handleResize() */
    transform-origin: center center;
}
canvas {
    display: block;
    border: 2px solid #333;
    border-radius: 4px;
    background: #1a1a2e;
    touch-action: none;
}
/* HUD */
#hud { display: none; }
.hud-visible #hud { display: block; }
#charAvatar { position:absolute; top:11px; left:11px; width:51px; height:51px; background:rgba(0,0,0,0.6); border:2px solid #555; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:27px; cursor:pointer; transition:all 0.2s; z-index:10; }
#charAvatar:hover { border-color:#f1c40f; background:rgba(241,196,15,0.1); }
.hp-bar-bg { position:absolute; top:13px; left:69px; width:211px; height:21px; background:#333; border:1px solid #555; border-radius:3px; }
.hp-bar-fill { height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); border-radius:2px; transition:width 0.2s; }
.hp-text { position:absolute; top:16px; left:72px; font-size:15px; color:#fff; text-shadow:1px 1px 2px #000; }
.xp-bar-bg { position:absolute; top:40px; left:69px; width:211px; height:11px; background:#222; border:1px solid #444; border-radius:2px; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,#f1c40f,#f39c12); border-radius:2px; }
.xp-text { position:absolute; top:0px; left:69px; width:211px; font-size:10px; color:#f1c40f; text-align:center; text-shadow:1px 1px 2px #000; pointer-events:none; }
.level-text { position:absolute; top:49px; left:11px; font-size:12px; font-weight:bold; color:#f1c40f; text-shadow:1px 1px 2px #000; pointer-events:none; z-index:11; text-align:center; width:51px; background:rgba(0,0,0,0.7); border-radius:0 0 4px 4px; padding:1px 0; }
.timer-text { position:absolute; top:13px; left:50%; transform:translateX(-50%); font-size:21px; color:#ecf0f1; text-shadow:2px 2px 4px #000; letter-spacing:2px; }
.kill-text { position:absolute; top:13px; right:13px; font-size:17px; color:#e74c3c; text-shadow:1px 1px 2px #000; }
.remain-text { position:absolute; top:40px; right:13px; font-size:16px; color:#e67e22; text-shadow:1px 1px 2px #000; text-align:right; }
.wave-text { position:absolute; top:40px; left:50%; transform:translateX(-50%); font-size:17px; color:#f1c40f; text-shadow:1px 1px 2px #000; }
.gold-text { position:absolute; top:69px; left:50%; transform:translateX(-50%); font-size:19px; color:#ffd700; text-shadow:1px 1px 2px #000; }
/* Boss HP bar */
#bossBar { display:none; position:absolute; top:83px; left:50%; transform:translateX(-50%); width:560px; background:rgba(0,0,0,0.85); border:2px solid #e74c3c; border-radius:6px; padding:11px 16px; z-index:5; }
#bossBar .boss-header { display:flex; align-items:center; gap:11px; margin-bottom:5px; }
#bossBar .boss-icon { font-size:27px; }
#bossBar .boss-name { color:#fff; font-size:17px; font-weight:bold; }
#bossBar .boss-tags { display:flex; gap:5px; margin-left:auto; }
#bossBar .boss-tag { font-size:13px; padding:1px 8px; border-radius:3px; background:rgba(255,255,255,0.1); color:#ccc; }
#bossBar .boss-tag.enraged { background:rgba(231,76,60,0.3); color:#e74c3c; animation:bossPulse 0.5s infinite alternate; }
#bossBar .boss-hp-bg { width:100%; height:19px; background:#222; border:1px solid #555; border-radius:3px; position:relative; overflow:hidden; }
#bossBar .boss-hp-fill { height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); border-radius:2px; transition:width 0.15s; }
#bossBar .boss-hp-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; text-shadow:1px 1px 2px #000; }
#bossBar .boss-count { color:#f39c12; font-size:15px; margin-top:3px; text-align:center; }
@keyframes bossPulse { from { opacity:1; } to { opacity:0.5; } }
.stats-text { position:absolute; top:69px; left:13px; font-size:13px; color:#aaa; text-shadow:1px 1px 2px #000; line-height:1.4; }
.slot-text { position:absolute; bottom:73px; right:13px; font-size:13px; color:#888; text-shadow:1px 1px 2px #000; text-align:right; }
/* Layout debug mode (press L to toggle) */
.layout-debug [data-layout-id] { outline: 1px dashed rgba(241,196,15,0.4); cursor: move; }
.layout-debug [data-layout-id]:hover { outline: 2px dashed #f1c40f; }
.layout-dragging { outline: 2px solid #e74c3c !important; opacity: 0.85; z-index: 999 !important; }
#layoutInfo { display: none; position: absolute; bottom: 60px; right: 13px; background: rgba(0,0,0,0.85); border: 1px solid #f1c40f; border-radius: 6px; padding: 8px 12px; z-index: 99; font-size: 12px; color: #f1c40f; pointer-events: none; font-family: monospace; }
.layout-debug #layoutInfo { display: block; }
.weapon-bar { position:absolute; bottom:80px; left:13px; display:flex; gap:5px; }
.weapon-icon { width:64px; height:64px; background:rgba(0,0,0,0.7); border:1px solid #555; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; color:#ddd; cursor:default; transition:border-color 0.2s; position:relative; overflow:hidden; }
.weapon-icon .cd-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); pointer-events:none; z-index:2; }
.weapon-icon.on-cooldown { filter:brightness(0.7); }
.weapon-icon .lv { color:#f1c40f; font-size:12px; }
.weapon-icon:hover { border-color:#f1c40f; }

/* Backpack button (HUD, replaces passive bar) */
#backpackBtn { cursor:pointer; transition:border-color 0.2s; }
#backpackBtn:hover { border-color:#f1c40f !important; }

/* Backpack overlay screen */
#backpack-screen { background: transparent; justify-content: flex-start; padding-top: 40px; }
#backpack-screen h2 { font-size: 37px; color: #f1c40f; margin-bottom: 8px; }
.backpack-item {
    width:80px; height:80px; background:rgba(20,20,40,0.9); border:2px solid #444;
    border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.2s; gap:4px;
}
.backpack-item:hover { border-color:#f1c40f; transform:scale(1.08); box-shadow:0 0 12px rgba(241,196,15,0.2); }
.backpack-item .bp-icon { font-size:28px; }
.backpack-item .bp-name { font-size:11px; color:#ccc; text-align:center; }
.backpack-item .bp-quality { font-size:9px; padding:1px 6px; border-radius:2px; }
.backpack-item.empty { opacity:0.25; cursor:default; }
.backpack-item.empty:hover { transform:none; box-shadow:none; border-color:#444; }

/* Debug / Cheat panel */
#debugPanel {
    display:none; position:absolute; bottom:107px; right:13px; z-index:15;
    background:rgba(10,10,20,0.92); border:1px solid #e74c3c; border-radius:6px;
    padding:13px 19px; min-width:187px; text-align:center;
}
#debugPanel .dbg-title { font-size:16px; color:#e74c3c; margin-bottom:8px; font-weight:bold; }
#debugPanel .dbg-btn {
    display:block; width:100%; margin:5px 0; padding:8px 0;
    background:rgba(231,76,60,0.15); border:1px solid #e74c3c; color:#e74c3c;
    border-radius:4px; cursor:pointer; font-family:inherit; font-size:15px;
    transition:all 0.15s;
}
#debugPanel .dbg-btn:hover { background:rgba(231,76,60,0.3); }
#debugPanel .dbg-btn.active { background:rgba(46,204,113,0.2); border-color:#2ecc71; color:#2ecc71; }

/* Tooltip */
#tooltip {
    display:none; position:fixed; pointer-events:none; z-index:100;
    background:rgba(10,10,30,0.95); border:1px solid #666; border-radius:6px;
    padding:13px 19px; min-width:240px; max-width:293px;
    font-size:16px; color:#ddd; line-height:1.6;
    box-shadow:0 4px 20px rgba(0,0,0,0.7);
}
#tooltip .tt-header { display:flex; align-items:center; gap:11px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid #444; }
#tooltip .tt-icon { font-size:29px; }
#tooltip .tt-name { font-size:19px; font-weight:bold; color:#fff; }
#tooltip .tt-quality { font-size:13px; padding:1px 8px; border-radius:3px; display:inline-block; }
#tooltip .tt-type { font-size:15px; color:#999; margin-bottom:8px; }
#tooltip .tt-section { font-size:15px; color:#aaa; margin-top:5px; }
#tooltip .tt-section .tt-label { color:#777; font-size:13px; margin-bottom:3px; }
#tooltip .tt-desc { font-size:13px; color:#ccb896; margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.08); line-height:1.5; font-style:italic; }
#tooltip .tt-stat { color:#f1c40f; }
#tooltip .tt-next { color:#2ecc71; font-size:13px; margin-top:5px; padding-top:5px; border-top:1px solid #333; }
#tooltip .tt-desc { margin-bottom:8px; }
#tooltip .tt-trigger { font-size:13px; color:#f39c12; margin-top:5px; }
#tooltip .tt-trigger-label { }
#tooltip .tt-ontrigger { font-size:14px; color:#f1c40f; margin-top:2px; margin-left:4px; }
#tooltip .tt-synergy { font-size:13px; color:#3498db; margin-top:5px; }
#tooltip .tt-effects-buff { margin-top:5px; }
#tooltip .tt-effects-debuff { margin-top:3px; }
#tooltip .tt-buff { font-size:14px; color:#2ecc71; }
#tooltip .tt-debuff { font-size:14px; color:#e74c3c; }

/* ===== 标题界面布局参数（直接改数值即可调整） ===== */
:root {
    --title-top: 60px;              /* 标题距顶部距离 */
    --title-size: 64px;             /* 标题字号 */
    --subtitle-size: 21px;          /* 副标题字号 */
    --controls-size: 17px;          /* 操作说明字号 */
    --controls-color: #6b8a5e;      /* 操作说明颜色 */
    --hint-size: 24px;              /* 提示文字字号 */
    --hint-color: #f1c40f;          /* 提示文字颜色 */
    --btn-bg: rgba(26,24,21,0.75);  /* 按钮背景色 */
    --btn-border: #f1c40f;          /* 按钮边框色 */
    --btn-text: #f1c40f;            /* 按钮文字色 */
    --btn-pad-x: 53px;              /* 按钮水平内边距 */
    --btn-pad-y: 13px;              /* 按钮垂直内边距 */
    --btn-size: 24px;               /* 按钮字号 */
}

/* Overlay screens */
.overlay {
    display: none; position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.85); flex-direction:column; align-items:center; justify-content:center; z-index:30;
}
.overlay.active { display: flex; }

/* Title */
#title-screen { background: transparent; justify-content: flex-start; padding-top: var(--title-top); }
#title-screen h1 { font-size:var(--title-size); color:#f1c40f; text-shadow:0 0 20px rgba(241,196,15,0.5), 0 0 40px rgba(0,0,0,0.7); margin-bottom:13px; letter-spacing:8px; }
#title-screen .subtitle { font-size:var(--subtitle-size); color:#3a3028; text-shadow:0 0 8px rgba(232,220,200,0.7); margin-bottom:13px; }
#title-screen .hint { font-size:var(--hint-size); color:var(--hint-color); text-shadow:0 0 10px rgba(0,0,0,0.6); animation: blink 1.5s infinite; margin-top: auto; margin-bottom: 60px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
#title-screen .controls { font-size:var(--controls-size); color:var(--controls-color); text-align:center; line-height:1.8; text-shadow:0 0 4px rgba(0,0,0,0.4); margin-bottom: 21px; }

/* Difficulty selection */
.difficulty-select { display:flex; gap:16px; margin-bottom:40px; }
.diff-btn {
    width:173px; padding:19px 13px; background:rgba(20,20,40,0.9); border:2px solid #444;
    border-radius:8px; cursor:pointer; text-align:center; transition:all 0.2s;
    color:#aaa; font-family:inherit;
}
.diff-btn:hover { border-color:#888; color:#ddd; transform:scale(1.03); }
.diff-btn.selected { border-color:#f1c40f; color:#f1c40f; box-shadow:0 0 15px rgba(241,196,15,0.3); }
.diff-btn .diff-name { font-size:24px; font-weight:bold; display:block; margin-bottom:5px; }
.diff-btn .diff-time { font-size:16px; color:#777; display:block; }
.diff-btn.selected .diff-time { color:#bba030; }

/* Level Select */
#level-select-screen { background: transparent; }
#level-select-screen h2 { font-size:48px; color:#f1c40f; text-shadow:0 0 15px rgba(241,196,15,0.4), 0 0 40px rgba(0,0,0,0.7); margin-bottom:11px; }
#level-select-screen .subtitle { font-size:19px; color:#3a3028; text-shadow:0 0 8px rgba(232,220,200,0.5); margin-bottom:40px; }
.level-cards { display:flex; gap:27px; }
.level-card {
    width:347px; padding:32px 27px; background:rgba(20,20,40,0.9); border:2px solid #444;
    border-radius:10px; cursor:pointer; text-align:center; transition:all 0.25s;
    color:#aaa; font-family:inherit;
}
.level-card:hover { border-color:#f1c40f; color:#ddd; transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,0.4); }
.level-card .lc-icon { font-size:64px; display:block; margin-bottom:13px; }
.level-card .lc-name { font-size:27px; font-weight:bold; color:#ecf0f1; margin-bottom:8px; }
.level-card .lc-desc { font-size:16px; color:#888; line-height:1.5; }
.level-card .lc-tag { display:inline-block; margin-top:13px; padding:3px 13px; border-radius:3px; font-size:15px; }
.level-card .lc-tag.normal { background:rgba(46,204,113,0.2); color:#2ecc71; }
.level-card .lc-tag.boss { background:rgba(231,76,60,0.2); color:#e74c3c; }

/* Character Select (道号选择) */
#prepare-screen { background: transparent; justify-content:flex-start; padding-top:6px; overflow-y:auto; overflow-x:hidden; }
#prepare-screen h2 { font-size:29px; color:#f1c40f; margin-bottom:6px; }
.char-select-layout { display:flex; gap:20px; width:100%; max-width:1067px; align-items:stretch; }
.char-portrait-area { flex:0 0 347px; display:flex; align-items:center; justify-content:center; }
.portrait-frame {
    width:320px; height:400px; background:rgba(10,10,25,0.85); border:2px solid #4a3a2a;
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.3);
}
.portrait-img { font-size:160px; opacity:0.85; transition:all 0.3s; }
.char-detail-panel {
    flex:1; background:rgba(20,16,12,0.9); border:1px solid #4a3a2a; border-radius:10px;
    padding:16px 20px; display:flex; flex-direction:column; gap:6px; min-width:0;
}
.char-detail-name { font-size:27px; font-weight:bold; color:#f1c40f; }
.char-detail-sect { font-size:16px; color:#c8b896; }
.char-detail-trait { font-size:17px; color:#e67e22; font-weight:bold; margin-bottom:4px; }
.char-detail-attrs { font-size:13px; line-height:1.5; }
.char-detail-start { font-size:13px; color:#aaa; }
.char-detail-pros { font-size:13px; color:#2ecc71; }
.char-detail-cons { font-size:13px; color:#e74c3c; }
.char-confirm-btn {
    align-self:flex-end; margin-top:auto;
    background:rgba(241,196,15,0.12); border:2px solid #f1c40f; color:#f1c40f;
    padding:9px 35px; border-radius:6px; cursor:pointer; font-size:19px; font-family:inherit; font-weight:bold;
    transition:all 0.2s;
}
.char-confirm-btn:hover { background:rgba(241,196,15,0.25); transform:scale(1.04); }
.char-avatar-row { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.char-avatar-btn {
    width:80px; height:80px; background:rgba(20,16,12,0.9); border:2px solid #4a3a2a;
    border-radius:10px; cursor:pointer; text-align:center; transition:all 0.2s;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-family:inherit;
}
.char-avatar-btn:hover { border-color:#c8b896; transform:translateY(-2px); }
.char-avatar-btn.selected { border-color:#f1c40f; box-shadow:0 0 12px rgba(241,196,15,0.35); }
.char-avatar-btn .avatar-icon { font-size:36px; }
.char-avatar-btn .avatar-name { font-size:11px; color:#c8b896; }
.char-avatar-btn.selected .avatar-name { color:#f1c40f; }
#prepare-screen .hint { margin-top:8px; }

/* Difficulty Select */
#difficulty-screen { background: transparent; justify-content:center; }
#difficulty-screen h2 { font-size:37px; color:#f1c40f; margin-bottom:6px; }
#difficulty-screen .prep-subtitle { font-size:18px; color:#3a3028; text-shadow:0 0 6px rgba(232,220,200,0.5); margin-bottom:16px; }
#difficulty-screen .difficulty-select { gap:20px; margin-bottom:0; justify-content:center; }
#difficulty-screen .diff-btn { width:200px; padding:20px 16px; }
#difficulty-screen .diff-btn .diff-name { font-size:26px; }
#difficulty-screen .diff-btn .diff-time { font-size:16px; }
#difficulty-screen .hint { margin-top:13px; }

/* 升级界面 */
#levelup-screen { background: transparent; justify-content:flex-start; padding-top:80px; }
#levelup-screen h2 { font-size:43px; color:#f1c40f; margin-bottom:13px; }
#levelup-screen .choices, #shop-screen .choices { display:flex; gap:21px; margin-top:27px; }
#levelupReroll:hover { border-color:#f1c40f !important; color:#f1c40f !important; }
#levelupReroll:active { background:rgba(241,196,15,0.1) !important; }
.choice-card {
    width:227px; padding:21px 16px; background:rgba(30,30,50,0.9); border:2px solid #555;
    border-radius:8px; text-align:center; cursor:pointer; transition:all 0.2s;
}
.choice-card:hover { border-color:#f1c40f; transform:scale(1.05); box-shadow:0 0 20px rgba(241,196,15,0.3); }
.choice-card .card-icon { font-size:37px; margin-bottom:11px; }
.choice-card .card-name { font-size:19px; color:#fff; font-weight:bold; margin-bottom:5px; }
.choice-card .card-type { font-size:15px; color:#888; margin-bottom:8px; }
.choice-card .card-desc { font-size:16px; color:#ccc; line-height:1.5; }
.choice-card .card-key { font-size:17px; color:#f1c40f; margin-top:11px; }
.choice-card .card-quality { font-size:13px; margin-top:5px; padding:3px 11px; border-radius:3px; display:inline-block; }
.quality-1 { color:#aaa; border:1px solid #555; }
.quality-2 { color:#2ecc71; border:1px solid #27ae60; }
.quality-3 { color:#3498db; border:1px solid #2980b9; }

/* Character select */

.char-card { position:relative; width:267px; }
.char-card:hover { border-color:#888; transform:scale(1.03); }
.char-selected {
    border-color:#f1c40f !important;
    background:rgba(241,196,15,0.12) !important;
    box-shadow:0 0 25px rgba(241,196,15,0.35), inset 0 0 30px rgba(241,196,15,0.06) !important;
    transform:scale(1.04);
}
.char-key-badge {
    position:absolute; top:-11px; left:-11px;
    width:35px; height:35px; border-radius:50%;
    background:#f1c40f; color:#1a1a2e;
    font-size:19px; font-weight:bold;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(241,196,15,0.5);
    z-index:2;
}
.char-selected .char-key-badge {
    background:#fff; color:#000;
    box-shadow:0 0 14px rgba(255,255,255,0.7);
}
.char-pick-me {
    font-size:16px; color:#f1c40f; font-weight:bold; margin-top:11px;
    letter-spacing:2px;
}
/* Attribute bars in character cards */
.attr-bars { margin:5px 0; display:flex; flex-direction:column; gap:1px; }
.attr-row { display:flex; align-items:center; gap:4px; font-size:12px; }
.attr-label { width:32px; color:#aaa; text-align:right; flex-shrink:0; }
.attr-track { flex:1; height:7px; background:#222; border-radius:2px; overflow:hidden; }
.attr-fill { height:100%; border-radius:2px; transition:width 0.3s; }
.attr-val { width:43px; text-align:right; flex-shrink:0; font-weight:bold; }
.quality-4 { color:#9b59b6; border:1px solid #8e44ad; }

/* Shop */
#shop-screen { background: transparent; }
/* Game Over */
#gameover-screen { background: transparent; }
#gameover-screen h2 { font-size:53px; color:#c0392b; text-shadow:0 0 10px rgba(0,0,0,0.7); margin-bottom:20px; }
#gameover-screen .stats { font-size:21px; color:#e8dcc8; text-align:center; line-height:2.2; margin-bottom:40px; text-shadow:0 0 8px rgba(0,0,0,0.8); }
#gameover-screen .stats span { color:#f1c40f; }
#gameover-screen .hint { font-size:24px; color:#f1c40f; text-shadow:0 0 10px rgba(0,0,0,0.6); animation: blink 1.5s infinite; }

/* Info panel buttons (below minimap) */
.info-btn {
    display: none; position:absolute; right:13px; width:213px; height:35px;
    background:rgba(20,20,30,0.85); border:1px solid #555; border-radius:4px;
    color:#aaa; font-family:inherit; font-size:16px; cursor:pointer;
    transition:all 0.2s; z-index:5;
}
.hud-visible .info-btn { display: block; }
.info-btn:hover { border-color:#f1c40f; color:#f1c40f; }
#bestiary-btn  { top:184px; }
#armory-btn    { top:224px; }
#items-btn     { top:264px; }

/* Shared overlay styles */
.info-overlay {
    display: none; position:absolute; top:0; left:0; width:100%; height:100%;
    z-index:20;
}
.info-overlay.active { display: block; }
.info-overlay .io-backdrop {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.6);
}
.info-overlay .io-panel {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:960px; height:667px; background:rgba(8,8,24,0.97);
    border:2px solid #555; border-radius:8px;
    display:flex; flex-direction:column; overflow:hidden;
}
.info-overlay .io-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 21px; border-bottom:1px solid #444;
}
.info-overlay .io-title { font-size:27px; color:#f1c40f; font-weight:bold; }
.info-overlay .io-close {
    width:43px; height:43px; background:none; border:1px solid #555; border-radius:4px;
    color:#aaa; font-size:24px; cursor:pointer; transition:all 0.2s;
    display:flex; align-items:center; justify-content:center;
}
.info-overlay .io-close:hover { border-color:#e74c3c; color:#e74c3c; }
.info-overlay .io-tabs { display:flex; gap:0; padding:0 21px; border-bottom:1px solid #333; }
.info-overlay .io-tab {
    padding:11px 27px; background:none; border:none; border-bottom:2px solid transparent;
    color:#888; font-family:inherit; font-size:17px; cursor:pointer; transition:all 0.2s;
}
.info-overlay .io-tab:hover { color:#ddd; }
.info-overlay .io-tab.active { color:#f1c40f; border-bottom-color:#f1c40f; }
.info-overlay .io-content {
    flex:1; overflow-y:auto; padding:16px 21px;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:11px; align-content:start;
}
.info-overlay .io-content::-webkit-scrollbar { width:6px; }
.info-overlay .io-content::-webkit-scrollbar-track { background:#111; }
.info-overlay .io-content::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
.info-card {
    background:rgba(20,20,35,0.8); border:1px solid #333; border-radius:6px;
    padding:13px; text-align:center; transition:border-color 0.2s;
}
.info-card:hover { border-color:#666; }
.info-card .ic-icon { font-size:32px; margin-bottom:5px; }
.info-card .ic-name { font-size:16px; color:#fff; font-weight:bold; margin-bottom:5px; }
.info-card .ic-stat { font-size:13px; color:#999; line-height:1.6; }
.info-card .ic-stat span { color:#f1c40f; }
.info-card .ic-tag {
    display:inline-block; font-size:12px; padding:1px 8px; border-radius:3px;
    margin-top:4px; background:rgba(255,255,255,0.08); color:#aaa;
}
.info-card .ic-tag.boss { color:#e74c3c; background:rgba(231,76,60,0.15); }
.info-card .ic-tag.dash { color:#3498db; background:rgba(52,152,219,0.15); }
.info-card .ic-tag.swarm { color:#2ecc71; background:rgba(46,204,113,0.15); }
.info-card .ic-tag.evo { color:#f1c40f; background:rgba(241,196,15,0.15); }
.info-overlay .io-empty { grid-column:1/-1; text-align:center; color:#666; padding:53px; font-size:19px; }

/* Char info panel */
#charInfoContent { display:flex; flex-direction:column; gap:0; overflow-y:auto; }
#charInfoContent::-webkit-scrollbar { width:5px; }
#charInfoContent::-webkit-scrollbar-track { background:transparent; }
#charInfoContent::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }
.ci-header { display:flex; align-items:center; gap:21px; padding:19px 24px; margin-bottom:16px; background:linear-gradient(135deg, rgba(241,196,15,0.08), rgba(231,76,60,0.05)); border:1px solid rgba(241,196,15,0.15); border-radius:8px; }
.ci-header-icon { font-size:48px; }
.ci-header-info { flex:1; }
.ci-header-name { font-size:24px; color:#f1c40f; font-weight:bold; }
.ci-header-sub { font-size:15px; color:#888; margin-top:3px; }
.ci-header-sub span { color:#ddd; }
.ci-hp-mini { width:100%; height:11px; background:#222; border-radius:4px; margin-top:8px; overflow:hidden; }
.ci-hp-mini-fill { height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); border-radius:4px; transition:width 0.3s; }
.ci-hp-nums { font-size:13px; color:#aaa; margin-top:3px; }
.ci-section-title { font-size:16px; color:#e74c3c; margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid rgba(231,76,60,0.2); letter-spacing:2px; font-weight:bold; }
.ci-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; }
.ci-stat-card { display:flex; align-items:center; gap:13px; padding:9px 13px; background:rgba(255,255,255,0.02); border-radius:5px; border:1px solid rgba(255,255,255,0.04); }
.ci-stat-icon { width:37px; height:37px; display:flex; align-items:center; justify-content:center; font-size:19px; background:rgba(255,255,255,0.04); border-radius:4px; flex-shrink:0; }
.ci-stat-body { flex:1; min-width:0; }
.ci-stat-name { font-size:16px; color:#ccc; line-height:1.3; }
.ci-stat-desc { font-size:12px; color:#777; line-height:1.3; }
.ci-stat-val { font-size:21px; color:#f1c40f; font-weight:bold; white-space:nowrap; flex-shrink:0; text-align:right; }
.ci-equip-card { display:flex; align-items:center; gap:13px; padding:9px 13px; margin-bottom:5px; background:rgba(255,255,255,0.02); border-radius:5px; border-left:3px solid #555; }
.ci-equip-card.q2 { border-left-color:#2ecc71; }
.ci-equip-card.q3 { border-left-color:#3498db; }
.ci-equip-card.q4 { border-left-color:#9b59b6; }
.ci-eq-icon { font-size:24px; flex-shrink:0; }
.ci-eq-info { flex:1; min-width:0; }
.ci-eq-name { font-size:16px; color:#eee; }
.ci-eq-meta { font-size:13px; color:#888; margin-top:1px; }
.ci-eq-lv { font-size:19px; color:#f1c40f; font-weight:bold; flex-shrink:0; }
.io-family-header {
    grid-column:1/-1; display:flex; align-items:center; gap:11px;
    padding:8px 0; margin-top:5px;
    font-size:17px; color:#ddd; font-weight:bold;
    border-bottom:1px solid #333;
}
.io-family-header .io-spawn { font-size:13px; color:#888; font-weight:normal; margin-left:auto; }
.io-quality-header {
    grid-column:1/-1; display:flex; align-items:center; gap:11px;
    padding:8px 0; margin-top:5px;
    font-size:17px; color:#ddd; font-weight:bold;
    border-bottom:1px solid #333;
}