/**
 * ChessElementa Icon Mode Styles
 * DESIGN: Uses CSS Masking to apply theme colors to SVG icons.
 * Replaces text content with mask-based icons.
 */

/* ===================================================================
   ICON MODE VARIABLES - Scaling & Positioning
   =================================================================== */
:root {
    /* Per-piece icon size multipliers (adjust these to tune size) 
       Default base size is 60% of piece container */
    --icon-scale-chariot: 0.9;
    /* Reduced from 1.0 */
    --icon-scale-horse: 1.0;
    --icon-scale-cannon: 1.3;
    /* Increased from 1.0 */
    --icon-scale-elephant: 1.05;
    /* Increased from 1.0 */
    --icon-scale-pawn: 0.85;
    --icon-scale-advisor: 0.85;
    /* Reduced from 1.0 */
    --icon-scale-general: 1.0;

    /* Element overlay on combined pieces */
    --overlay-scale: 0.35;
    /* Size relative to piece */
    --overlay-pos-right: 10%;
    --overlay-pos-bottom: 10%;
    --overlay-alpha: 1.0;

    /* Standalone element icon size on board */
    --element-icon-scale: 0.6;

    /* Configurable Shadow for Elements (Default to theme glow) */
    /* Users can override this to adjust intensity */
    --icon-element-shadow: drop-shadow(0 0 8px var(--element-glow));
}

/* ===================================================================
   ICON MODE - Base Setup
   =================================================================== */

/* Hide text content, setup container for mask */
.piece-display-icon .piece .piece-text {
    color: transparent !important;
    text-shadow: none !important;
    /* Remove text shadow */

    /* Position for the icon */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;

    /* MASK SETUP */
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;

    /* Default background is the text color (will be clipped by mask) */
    background-color: currentColor;

    /* Reset pointer events */
    pointer-events: none;
}

/* Red pieces use red text color for icon */
.piece-display-icon .piece.red .piece-text {
    background-color: var(--red-piece-text);
}

/* Black pieces use black text color for icon */
.piece-display-icon .piece.black .piece-text {
    background-color: var(--black-piece-text);
}

/* ===================================================================
   BASE PIECE ICONS - Apply Masks
   =================================================================== */

.piece-display-icon .piece[data-base="车"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/车.svg');
    mask-image: url('../themes/icons/pieces/车.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-chariot));
}

.piece-display-icon .piece[data-base="马"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/马.svg');
    mask-image: url('../themes/icons/pieces/马.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-horse));
}

.piece-display-icon .piece[data-base="炮"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/炮.svg');
    mask-image: url('../themes/icons/pieces/炮.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-cannon));
}

.piece-display-icon .piece[data-base="象"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/象.svg');
    mask-image: url('../themes/icons/pieces/象.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-elephant));
}

.piece-display-icon .piece[data-base="兵"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/兵.svg');
    mask-image: url('../themes/icons/pieces/兵.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-pawn));
}

.piece-display-icon .piece[data-base="士"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/士.svg');
    mask-image: url('../themes/icons/pieces/士.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-advisor));
}

.piece-display-icon .piece[data-base="将"] .piece-text {
    -webkit-mask-image: url('../themes/icons/pieces/将.svg');
    mask-image: url('../themes/icons/pieces/将.svg');
    transform: translate(-50%, -50%) scale(var(--icon-scale-general));
}

/* ===================================================================
   ELEMENT ICONS (Standalone)
   =================================================================== */

.piece-display-icon .element::before,
.piece-display-icon .element::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: var(--element-color);
    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    -webkit-mask-size: calc(var(--element-icon-scale) * 100%);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-size: calc(var(--element-icon-scale) * 100%);
    mask-position: center;
    mask-repeat: no-repeat;
}

.piece-display-icon .element {
    font-size: 0;
    /* 隐藏文字 */
    color: transparent;
    /* ...其他样式... */
}

/* 阴影层 - 模糊 + 偏移模拟 glow */
.piece-display-icon .element::before {
    opacity: 0.5;
    filter: blur(8px);
}

/* 图标层 - 清晰的前景 */
.piece-display-icon .element::after {
    /* 无额外 filter */
}

/* Mask Images for Elements */
.piece-display-icon .element[data-name="火"] {
    --mask-url: url('../themes/icons/elements/火.svg');
}

.piece-display-icon .element[data-name="水"] {
    --mask-url: url('../themes/icons/elements/水.svg');
}

.piece-display-icon .element[data-name="风"] {
    --mask-url: url('../themes/icons/elements/风.svg');
}

.piece-display-icon .element[data-name="电"] {
    --mask-url: url('../themes/icons/elements/电.svg');
}

.piece-display-icon .element[data-name="龙"] {
    --mask-url: url('../themes/icons/elements/龙.svg');
}

.piece-display-icon .element[data-name="金"] {
    --mask-url: url('../themes/icons/elements/金.svg');
}

/* ===================================================================
   ELEMENT OVERLAYS (Combined Pieces)
   Uses the .element-overlay div added in game.js
   =================================================================== */

.piece-display-icon .element-overlay {
    position: absolute;
    right: var(--overlay-pos-right);
    bottom: var(--overlay-pos-bottom);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-piece-icon-element);
    opacity: var(--overlay-alpha);

    color: transparent !important;
    background-color: transparent !important;
}

/* Dual-layer approach for overlays too */
.piece-display-icon .element-overlay::before,
.piece-display-icon .element-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: var(--element-color);
    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    -webkit-mask-size: calc(var(--overlay-scale) * 100%);
    -webkit-mask-position: bottom right;
    -webkit-mask-repeat: no-repeat;
    mask-size: calc(var(--overlay-scale) * 100%);
    mask-position: bottom right;
    mask-repeat: no-repeat;
}

/* Shadow Layer - Blur + Opacity */
.piece-display-icon .element-overlay::before {
    opacity: 0.5;
    filter: blur(8px);
}

/* Icon Layer - Sharp Foreground */
.piece-display-icon .element-overlay::after {
    /* No additional filter needed */
}

/* Mask Images */
.piece-display-icon .element-overlay[data-element="火"],
.piece-display-icon .element-overlay[data-element="Fire"] {
    --mask-url: url('../themes/icons/elements/火.svg');
}

.piece-display-icon .element-overlay[data-element="水"],
.piece-display-icon .element-overlay[data-element="Water"] {
    --mask-url: url('../themes/icons/elements/水.svg');
}

.piece-display-icon .element-overlay[data-element="风"],
.piece-display-icon .element-overlay[data-element="Wind"] {
    --mask-url: url('../themes/icons/elements/风.svg');
}

.piece-display-icon .element-overlay[data-element="电"],
.piece-display-icon .element-overlay[data-element="Electric"] {
    --mask-url: url('../themes/icons/elements/电.svg');
}

.piece-display-icon .element-overlay[data-element="龙"],
.piece-display-icon .element-overlay[data-element="Dragon"] {
    --mask-url: url('../themes/icons/elements/龙.svg');
}

.piece-display-icon .element-overlay[data-element="金"],
.piece-display-icon .element-overlay[data-element="Metal"] {
    --mask-url: url('../themes/icons/elements/金.svg');
}

.piece-display-icon .element-overlay[data-element="divine"] {
    --mask-url: url('../themes/icons/elements/神.svg');
}

/* ===================================================================
   ANIMATION & AI
   =================================================================== */

/* Ensure z-index is correct for clock */
.piece-display-icon .piece .piece-clock {
    z-index: var(--z-piece-icon);
}

/* Fix for AI pieces: The AI glow uses pseudo-elements on .piece.
   Since we use .piece-text (inner div) for the icon, there's NO conflict.
   The icon will stay static while AI glow spins around it. */