/* 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;
}
/* PNG-logo variant of the watermark (BT / DA / IH / Ork / Tyranid /
   etc.) — uses the same upper-right slot as the font-icon mark, but
   sized via width/height since `font-size` doesn't apply to images.
   The white-on-transparent source is filtered red to match --accent
   and held at the same low opacity so the title block stays readable
   on top. Per-faction kind classes can override the tint colour. */
.ds-header .ds-mark.ds-mark-img {
    opacity: 1;
    width: 84px;
    height: 84px;
}
.ds-mark-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    opacity: 0.18;
    pointer-events: none;
    /* Default red tint (white → --accent-soft #e63b54). */
    filter: brightness(0) saturate(100%) invert(35%) sepia(64%) saturate(2670%) hue-rotate(326deg) brightness(98%) contrast(91%);
}
/* Per-faction tint overrides for the watermark. Black Templars stay
   bone-white at slightly higher opacity since white reads softer on
   the dark card; Dark Angels green; Iron Hands silver. The whole-
   faction logos (sm/ork/tyr/am/dru/tl) keep the default red tint so
   they sit alongside the existing red faction-icon styling. */
.ds-mark-logo.ds-mark-logo-bt {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(0%) hue-rotate(252deg) brightness(95%) contrast(80%);
    opacity: 0.22;
}
.ds-mark-logo.ds-mark-logo-da {
    filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(381%) hue-rotate(101deg) brightness(89%) contrast(86%);
    opacity: 0.22;
}
.ds-mark-logo.ds-mark-logo-ih {
    filter: brightness(0) saturate(100%) invert(72%) sepia(7%) saturate(217%) hue-rotate(168deg) brightness(85%) contrast(82%);
    opacity: 0.22;
}
/* Inline variant used in the in-game rules-reminder card summary
   line — small, fully opaque, sits where the cardIconHTML font-icon
   would. Faction tints reuse the same kind classes as the watermark
   but at full opacity (the small icon needs the colour to read). */
.rules-reminder-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: -3px;
    /* Default red tint to match cardIconHTML colour. */
    filter: brightness(0) saturate(100%) invert(35%) sepia(64%) saturate(2670%) hue-rotate(326deg) brightness(98%) contrast(91%);
}
.rules-reminder-icon.ds-mark-logo-bt {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(0%) hue-rotate(252deg) brightness(95%) contrast(80%);
}
.rules-reminder-icon.ds-mark-logo-da {
    filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(381%) hue-rotate(101deg) brightness(89%) contrast(86%);
}
.rules-reminder-icon.ds-mark-logo-ih {
    filter: brightness(0) saturate(100%) invert(72%) sepia(7%) saturate(217%) hue-rotate(168deg) brightness(85%) contrast(82%);
}
.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 (legacy — not used; the Factions slot now renders an <img class="navicon-img"> instead) */
.navbtn[data-route="lan-match"] .navicon-wh::before { content: "\ea5c"; } /* skull-01 (kept from the prior Dice slot) */
.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;
    }
}