<!DOCTYPE html>
<html>
<head>
    <style>
        /* 基础布局样式 */
        body {
            margin: 0;
            padding: 4px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            width: {{ width }}px;
            height: {{ height }}px;
            box-sizing: border-box;
        }
        
        .game-container {
            display: flex;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        /* 图片区域样式 */
        .image-section {
            flex: 0 0 180px;
            height: 100%;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 8px;
            overflow: hidden;
        }
        
        .operator-image {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: center;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        /* 信息区域样式 */
        .info-section {
            flex: 1;
            padding: 4px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            background-color: #fafafa;
        }
        
        /* 标题样式 */
        .operator-title {
            font-size: 20px;
            font-weight: bold;
            color: white;
            margin-bottom: 4px;
            text-align: center;
            padding: 4px 6px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 统计表格样式 */
        .stats-table {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px 2px;
            overflow-y: auto;
            max-height: calc(100% - 60px);
            align-items: start;
        }
        
        .stat-row {
            display: flex;
            padding: 2px 3px;
            border-radius: 2px;
            border: 1px solid #e0e0e0;
            min-height: 28px;
            align-items: center;
        }
        
        .stat-label {
            flex: 0 0 50px;
            font-weight: bold;
            color: #555;
            font-size: 16px;
            white-space: nowrap;
        }
        
        .stat-value {
            flex: 1;
            text-align: right;
            font-size: 16px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.3;
        }
        
        /* 字体大小自适应 */
        .long-text {
            font-size: 14px !important;
        }
        
        /* 匹配状态样式 */
        .match-row {
            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 100%);
            border-color: #4caf50;
            color: #2e7d32;
        }
        
        .mismatch-row {
            background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
            border-color: #f44336;
            color: #c62828;
        }
        
        /* 星级样式 */
        .star {
            color: #ffc107;
            text-shadow: 0 0 2px rgba(0,0,0,0.3);
        }
        
        /* 星级比较提示样式 */
        .rarity-higher {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border-color: #2196f3;
            color: #1976d2;
        }
        
        .rarity-lower {
            background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
            border-color: #f44336;
            color: #c62828;
        }
        
        .rarity-same {
            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 100%);
            border-color: #4caf50;
            color: #2e7d32;
        }
        
        /* 标签样式 */
        .tag {
            display: inline-block;
            padding: 2px 4px;
            margin: 1px;
            background-color: #f5f5f5;
            color: #666;
            border-radius: 3px;
            font-size: 16px;
            white-space: nowrap;
        }
        
        /* 标签行跨列样式 */
        .stat-row.tags-row {
            grid-column: 1 / -1;
        }
        
        /* 统一的行底色样式 */
        .row-exact_match {
            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 100%);
            border-color: #4caf50;
            color: #2e7d32;
        }
        
        .row-partial_match {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            border-color: #ff9800;
            color: #e65100;
        }
        
        .row-no_match {
            background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
            border-color: #f44336;
            color: #c62828;
        }
        
        /* 标签容器样式 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            justify-content: flex-end;
        }
        
        /* 单个标签匹配状态样式 */
        .tag-matched {
            background-color: #4caf50;
            color: white;
            border: 1px solid #2e7d32;
        }
        
        /* 势力分行样式 */
        .faction-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 2px;
            justify-content: flex-end;
            text-align: right;
        }
        
        .parent-faction, .sub-faction {
            font-size: 16px;
            line-height: 1.2;
            word-break: break-all;
            max-width: 100%;
        }
        
        /* 势力高亮样式 */
        .parent-faction.highlight, .sub-faction.highlight {
            background-color: #4caf50 !important;
            color: white !important;
            padding: 1px 3px;
            border-radius: 2px;
            font-weight: bold;
        }
        
        /* 尝试次数信息 */
        .attempts-info {
            font-size: 18px;
            color: #666;
            text-align: center;
            padding: 4px;
            background-color: #f0f0f0;
            border-radius: 3px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 左侧图片区域 -->
        <div class="image-section">
            <img src="{{ illustration }}" alt="{{ operator_name }}" class="operator-image">
        </div>
        
        <!-- 右侧信息区域 -->
        <div class="info-section">
            <div class="operator-title">
                {{ operator_name }}
            </div>
            
            <div class="stats-table">
                <!-- 第一列 -->
                <div class="stat-row {{ 'match-row' if profession_correct else 'mismatch-row' }}">
                    <div class="stat-label">职业</div>
                    <div class="stat-value">
                        {% if profession|length >= 4 %}
                            <span class="long-text">{{ profession }}</span>
                        {% else %}
                            <span>{{ profession }}</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="stat-row {{ 'match-row' if subProfession_correct else 'mismatch-row' }}">
                    <div class="stat-label">子职业</div>
                    <div class="stat-value">
                        {% if subProfession|length >= 4 %}
                            <span class="long-text">{{ subProfession }}</span>
                        {% else %}
                            <span>{{ subProfession }}</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="stat-row rarity-{{ rarity_class }}">
                    <div class="stat-label">星级</div>
                    <div class="stat-value">{{ rarity }}星</div>
                </div>
                
                <div class="stat-row {{ 'match-row' if origin_correct else 'mismatch-row' }}">
                    <div class="stat-label">出身地</div>
                    <div class="stat-value">
                        {% if origin|length >= 4 %}
                            <span class="long-text">{{ origin }}</span>
                        {% else %}
                            <span>{{ origin }}</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="stat-row {{ 'match-row' if race_correct else 'mismatch-row' }}">
                    <div class="stat-label">种族</div>
                    <div class="stat-value">
                        {% if race|length >= 4 %}
                            <span class="long-text">{{ race }}</span>
                        {% else %}
                            <span>{{ race }}</span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 第二列 -->
                <div class="stat-row {{ 'match-row' if gender_correct else 'mismatch-row' }}">
                    <div class="stat-label">性别</div>
                    <div class="stat-value">{{ gender }}</div>
                </div>
                
                <div class="stat-row {{ 'match-row' if position_correct else 'mismatch-row' }}">
                    <div class="stat-label">位置</div>
                    <div class="stat-value">{{ position }}</div>
                </div>
                
                <div class="stat-row row-{{ faction_comparison.status if faction_comparison else 'no_match' }} tags-row">
                    <div class="stat-label">势力</div>
                    <div class="stat-value">
                        {% if parent_faction %}
                            <div class="faction-line">
                                <span class="parent-faction {{ 'highlight' if faction_comparison.parent_match else '' }}">{{ parent_faction }}</span>
                                <span class="sub-faction {{ 'highlight' if faction_comparison.faction_match else '' }}">{{ faction }}</span>
                            </div>
                        {% else %}
                            <div class="faction-line">
                                <span class="sub-faction {{ 'highlight' if faction_comparison.faction_match else '' }}">{{ faction }}</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                {% if tags %}
                <div class="stat-row row-{{ tags_comparison.status if tags_comparison else 'no_match' }} tags-row">
                    <div class="stat-label">标签</div>
                    <div class="stat-value">
                        <div class="tags-container">
                            {% for tag in tags %}
                                {% if tags_comparison and tag in tags_comparison.matched_tags %}
                                    <span class="tag tag-matched">{{ tag }}</span>
                                {% else %}
                                    <span class="tag">{{ tag }}</span>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- 空位填充，保持布局平衡 -->
                {% if not tags %}
                <div></div>
                {% endif %}
            </div>
            
            <div class="attempts-info">
                剩余尝试次数: {{ attempts_left }}
            </div>
        </div>
    </div>
</body>
</html>
