/* warhammer40k.css — icon integration layer
 *
 * Imports the Warhammer 40k icon font and wires it into the app's UI.
 * The base classes (.wh40k, .wh40k-XYZ::before) come from the imported file;
 * this stylesheet adds sizing/colour helpers and per-screen accents.
 */

@import url("./fonts/FactionIcons/warhammer40k.css");

/* ============ icon helper sizes ============ */

/* Generic helper any element can wear, e.g. <i class="wh40k wh40k-imperial-aquila wh-icon"></i> */
.wh-icon {
    line-height: 1;
    vertical-align: -0.12em;
    flex-shrink: 0;
}

/* Sizes */
.wh-icon-sm  { font-size: 16px; }
.wh-icon-md  { font-size: 22px; }
.wh-icon-lg  { font-size: 32px; }
.wh-icon-xl  { font-size: 64px; }
.wh-icon-xxl { font-size: 96px; }

/* Colours */
.wh-icon-accent { color: var(--accent-soft); }
.wh-icon-gold   { color: var(--gold); }
.wh-icon-blue   { color: var(--blue); }
.wh-icon-mute   { color: var(--text-mute); }
.wh-icon-dim    { color: var(--text-dim); }

/* ============ home / hero accents ============ */
.hero {
    position: relative;
    overflow: hidden;
}
/* Big watermark aquila in the corner of the hero */
.hero-mark {
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    font-size: 168px;
    color: var(--accent);
    opacity: 0.10;
    pointer-events: none;
    line-height: 1;
}

/* Tile icons replace the emoji glyphs the markup falls back to */
.tile-icon.wh40k {
    font-size: 30px;
    color: var(--accent-soft);
    margin-bottom: 6px;
}

/* ============ faction list ============ */
.faction-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.faction-row .wh40k {
    font-size: 28px;
    color: var(--accent-soft);
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
/* Some glyphs are very wide horizontally (Aquilas, the Astra Militarum eagle)
   and crowd the row text at 28px. Shrink them just on the factions list — the
   same icon classes still render at full size on datasheet headers, hero
   watermarks, etc. */
.faction-row .wh40k.wh40k-imperial-aquila,
.faction-row .wh40k.wh40k-imperial-aquila-02,
.faction-row .wh40k.wh40k-astra-militarum {
    font-size: 18px;
}

/* ============ datasheet header ============ */
.ds-header {
    position: relative;
}
.ds-header .ds-mark {
    position: absolute;
    top: -4px;
    right: -8px;
    font-size: 84px;
    color: var(--accent);
    opacity: 0.10;
    pointer-events: none;
    line-height: 1;
}
.ds-faction-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ds-faction-line .wh40k {
    font-size: 16px;
    color: var(--accent-soft);
}

/* role badges get a leading icon */
.role-icon {
    margin-right: 6px;
    font-size: 14px;
    vertical-align: -0.1em;
}

.list-item-badge.role-Battleline .role-icon { color: var(--blue); }
.list-item-badge.role-Characters .role-icon { color: var(--gold); }
.list-item-badge.role-Other      .role-icon { color: var(--text-dim); }

/* ============ card heading icons (Weapons, Stratagems, etc.) ============ */
.card-h-icon {
    margin-right: 8px;
    color: var(--accent-soft);
    font-size: 14px;
    vertical-align: -0.1em;
}

/* ============ stratagem CP badge — small skull glyph next to CP ============ */
.strat-cp-icon {
    font-size: 10px;
    margin-right: 4px;
    vertical-align: 0.05em;
}

/* ============ dice screen accents ============ */
.dice-card {
    position: relative;
    overflow: hidden;
}
.dice-card .dice-mark {
    position: absolute;
    bottom: -28px;
    right: -16px;
    font-size: 156px;
    color: var(--accent);
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}

/* ============ bottom nav — swap unicode glyphs for icon-font glyphs on supported routes ============
 * The HTML still ships unicode glyphs as fallbacks; on browsers that load the
 * icon font, we hide those and render proper icons via ::before. We keep this
 * scoped to .bottombar so it only affects nav glyphs.
 */
.navbtn .navicon-wh {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}
.navbtn[data-route="home"]     .navicon-wh::before { content: "\ea47"; } /* imperial-aquila */
.navbtn[data-route="factions"] .navicon-wh::before { content: "\ea01"; } /* sword-01 */
.navbtn[data-route="dice"]     .navicon-wh::before { content: "\ea5c"; } /* skull-01 */
.navbtn[data-route="about"]    .navicon-wh::before { content: "\ea48"; } /* imperial-aquila-02 */
.navbtn .navicon-wh {
    font-family: warhammer40k !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
}

/* ============ tooltip header — small glyph for ability category ============ */
.tooltip-name .wh40k {
    font-size: 14px;
    color: var(--accent-soft);
    margin-right: 4px;
}

/* ============ keyword chips can carry inline icons (faction chips on datasheet) ============ */
.chip.fkw .wh40k {
    font-size: 12px;
    margin-right: 4px;
    vertical-align: -0.06em;
}

/* ============ on hover, lift faction icons subtly ============ */
@media (hover: hover) {
    .list-item:hover .faction-row .wh40k,
    .ds-faction-line:hover .wh40k {
        transform: scale(1.08);
        transition: transform 0.15s ease;
    }
}