/* FC UI组件样式 */

/* FC边框样式 */
.fc-border {
    border: 4px solid #FCFCFC;
    box-shadow: 
        inset 0 0 0 2px #000,
        0 0 0 2px #000,
        8px 8px 0 rgba(0, 0, 0, 0.5);
}

/* FC按钮 */
.fc-button {
    font-family: 'Press Start 2P', monospace;
    background: #FC0000;
    color: #FCFCFC;
    border: 3px solid #000;
    padding: 12px 20px;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 2px 2px 0 #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
    position: relative;
}

.fc-button:hover {
    background: #FF3333;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}

.fc-button:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.fc-button.small {
    padding: 8px 12px;
    font-size: 10px;
}

.fc-button.disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.fc-button.disabled:hover {
    transform: none;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

/* FC像素化图标 */
.pixel-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

/* FC进度条（像素方块风格）*/
.fc-progress-bar {
    width: 100%;
    height: 24px;
    background: #333;
    border: 2px solid #FCFCFC;
    position: relative;
    overflow: hidden;
}

.fc-progress-bar .fill {
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #00FC00,
        #00FC00 8px,
        #00CC00 8px,
        #00CC00 16px
    );
    transition: width 0.3s ease;
}

.fc-progress-bar .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #FCFCFC;
    text-shadow: 1px 1px 0 #000;
}

/* FC生命值（爱心） */
.fc-lives {
    display: flex;
    gap: 5px;
    font-size: 20px;
}

.fc-lives .heart {
    color: #FC74B4;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.fc-lives .heart.lost {
    color: #333;
    animation: none;
}

/* FC得分显示 */
.fc-score {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: #00FCFC;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 2px;
}

/* FC对话框（RPG风格）*/
.fc-dialog {
    background: #000;
    border: 4px solid #FCFCFC;
    padding: 20px;
    position: relative;
    box-shadow: 
        inset 0 0 0 2px #000,
        0 0 0 2px #000,
        8px 8px 0 rgba(0, 0, 0, 0.5);
}

.fc-dialog::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #FCFCFC;
}

.fc-dialog .text {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    line-height: 24px;
    color: #FCFCFC;
}

.fc-dialog .arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
    color: #FCFC00;
    animation: blink 1s steps(2, start) infinite;
}

/* FC菜单 */
.fc-menu {
    background: #000;
    border: 3px solid #FCFCFC;
    padding: 20px;
}

.fc-menu-item {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    padding: 10px 15px;
    color: #FCFCFC;
    cursor: pointer;
    position: relative;
    transition: all 0.1s;
}

.fc-menu-item:hover,
.fc-menu-item.selected {
    color: #FCFC00;
    background: #333;
}

.fc-menu-item::before {
    content: '▶';
    position: absolute;
    left: -10px;
    opacity: 0;
    transition: opacity 0.1s;
}

.fc-menu-item:hover::before,
.fc-menu-item.selected::before {
    opacity: 1;
}

/* FC像素化阴影 */
.pixel-shadow {
    position: relative;
}

.pixel-shadow::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* FC像素边框（装饰性）*/
.pixel-border {
    border: 2px solid #FCFCFC;
    outline: 2px solid #000;
    outline-offset: -4px;
}

/* FC文字效果 */
.pixel-text-shadow {
    text-shadow: 
        2px 0 0 #000,
        -2px 0 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 2px 0 #000;
}

.pixel-text-glow {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        2px 2px 0 #000;
}

/* FC像素化容器 */
.pixel-container {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* FC选中效果 */
.fc-selected {
    border-color: #FCFC00;
    box-shadow: 
        0 0 0 2px #FCFC00,
        0 0 10px #FCFC00;
    animation: pulse 0.5s infinite;
}

/* FC禁用效果 */
.fc-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* FC加载动画（像素方块）*/
.fc-loading {
    width: 40px;
    height: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}

.fc-loading .block {
    background: #FCFC00;
    animation: loadingBlock 1s infinite;
}

.fc-loading .block:nth-child(1) { animation-delay: 0s; }
.fc-loading .block:nth-child(2) { animation-delay: 0.2s; }
.fc-loading .block:nth-child(3) { animation-delay: 0.4s; }
.fc-loading .block:nth-child(4) { animation-delay: 0.6s; }

@keyframes loadingBlock {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* FC提示框 */
.fc-tooltip {
    position: absolute;
    background: #000;
    border: 2px solid #FCFCFC;
    padding: 8px 12px;
    font-size: 10px;
    color: #FCFCFC;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

.fc-tooltip.show {
    display: block;
    animation: fadeIn 0.2s;
}

/* FC徽章 */
.fc-badge {
    display: inline-block;
    background: #FC0000;
    color: #FCFCFC;
    border: 2px solid #000;
    padding: 4px 8px;
    font-size: 8px;
    text-shadow: 1px 1px 0 #000;
}

.fc-badge.gold {
    background: #FFD700;
    color: #000;
}

.fc-badge.silver {
    background: #C0C0C0;
    color: #000;
}

.fc-badge.bronze {
    background: #CD7F32;
    color: #000;
}

/* FC分隔线 */
.fc-divider {
    height: 2px;
    background: #FCFCFC;
    margin: 10px 0;
    position: relative;
}

.fc-divider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}