/* ==========================================================================
   style.css — Ishar global stylesheet + shared design tokens
   --------------------------------------------------------------------------
   The :root block below is the site-wide token base (design-system enabler
   E1 — see docs/design/tokens.md). It is loaded on every page via layout.html,
   so any stylesheet (admin-console.css, hud.css, per-page CSS) may reference
   the --ac-* / --ishar-* custom properties without redefining them.
   ========================================================================== */
:root {
    /* Brand */
    --ishar-color:    #fa7;                      /* the Ishar amber (alias of --ac-accent) */
    --ac-accent:      #fa7;                      /* brand amber */
    --ac-accent-2:    #ffd7b0;                   /* lighter amber for text/marks on amber washes */

    /* Surfaces (dark, layered — step up in lightness as they come forward) */
    --ac-bg:          #0c0c0d;                   /* deepest surface */
    --ac-panel:       #131316;                   /* panel surface */
    --ac-elev:        #1c1c22;                   /* raised / hover surface */
    --ac-border:      #2a2a30;                   /* hairline border */
    --ac-border-2:    #3a3a44;                   /* stronger border (hover/active) */

    /* Text */
    --ac-text:        #d6d6d7;                   /* body text */
    --ac-dim:         #8a8a92;                   /* muted / labels */

    /* Semantics (fixed meanings — never decorative) */
    --ac-ok:          #4cbb17;                   /* success / safe */
    --ac-info:        #4a86cf;                   /* informational */
    --ac-warn:        #f80;                      /* caution */
    --ac-danger:      #d64b4b;                   /* destructive / error */

    /* Translucent washes */
    --ac-wash:        rgba(255, 170, 119, .12);  /* amber */
    --ac-ok-wash:     rgba(76, 187, 23, .12);
    --ac-info-wash:   rgba(74, 134, 207, .14);
    --ac-warn-wash:   rgba(255, 136, 0, .12);
    --ac-danger-wash: rgba(214, 75, 75, .14);

    /* Radii */
    --ac-radius:      .6rem;
    --ac-radius-sm:   .4rem;
}

.border-ishar { border: 0.1rem solid var(--ishar-color); }

/* Sprite icons ({% bi %}) default to text-size; explicit width/height
   attributes (e.g. the connect HUD) still win via :not([width]). */
svg.bi:not([width]) { width: 1em; height: 1em; }
.bi { vertical-align: -.125em; fill: currentColor; }

/* --------------------------------------------------------------------------
   Shell surfaces — the global frame every page sits in (nav, breadcrumb,
   content, messages, footer). Layered-grey panels with restrained amber;
   the heavy black+amber-outline boxes live on only in untouched page content.
   -------------------------------------------------------------------------- */
.shell-panel {
    background: var(--ac-panel);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
}
.navbar.shell-panel { border-bottom: 2px solid rgba(255, 170, 119, .4); }
.shell-menu {
    background: var(--ac-elev);
    border: 1px solid var(--ac-border-2);
    border-radius: var(--ac-radius-sm);
}
.shell-menu .dropdown-item { border-radius: var(--ac-radius-sm); }
#logo { height: 8rem; }
@media (max-width: 575.98px) {
    #logo { height: 5.5rem; }
}

.list-group, .list-group-item, .card { background-color: #000; }

.list-group a .bi,
.blockquote-footer .bi,
.navbar,
.navbar .nav-link,
.text-ishar
{
    color: var(--ishar-color);
}

/* Breadcrumbs: a quiet page-title line, not a boxed banner. Old templates
   still emit h2-sized crumbs — these rules size both patterns down. */
.breadcrumb {
    --bs-breadcrumb-margin-bottom: 0;
    --bs-breadcrumb-divider: '•';
    --bs-breadcrumb-divider-color: var(--bs-secondary);
}
.breadcrumb-item.h2, .breadcrumb .h2, .breadcrumb h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}
.breadcrumb-item .bi { color: var(--ishar-color); }
.nav-link .bi { color: var(--ishar-color); }
footer a .bi { color: var(--ac-dim); }

.icon-link-hover { --bs-icon-link-transform: translate3d(0, -.3rem, 0); }
/* Hover affordances are hover-only: on touch, taps must not leave icons
   stuck mid-lift (mobile friendliness — see docs/design/decisions.md). */
@media (hover: none) {
    .icon-link-hover { --bs-icon-link-transform: none; }
}
svg[role="img"] { color: var(--bs-primary); }
svg[role="note"] { color: var(--bs-secondary); }
a[target="_blank"] {
    svg[role="img"] {
        --bs-icon-link-transform: none;
        color: var(--bs-secondary);
    }
}

body { background-color: var(--ac-bg); color: var(--ac-text); }
.card-header, .card-title { color: var(--ishar-color); }
.card, .card-text, .card-footer { color: var(--ac-text); }
button, textarea, select {
    border: 0.1rem solid var(--ishar-color);
    background-color: #323639;
    color: var(--ishar-color);
}
textarea {
    white-space: break-spaces;
    background-color: #000;
}
input {
    border: 0.1rem solid var(--ishar-color);
    background-color: #000;
    color: var(--ishar-color);
}
h1, h2, h3, h4, h5,
label, strong, th {
    color: var(--ishar-color);
}

summary h3,
summary h4,
summary h5 {
    display: inline-block;
}

.btn-ishar {
    --bs-btn-bg: var(--bs-black);
    --bs-btn-border-color: var(--ishar-color);
    --bs-btn-color: var(--ishar-color);

    --bs-btn-active-bg: var(--ishar-color);
    --bs-btn-active-border-color: var(--ishar-color);
    --bs-btn-active-color: var(--bs-black);

    --bs-btn-hover-bg: var(--ishar-color);
    --bs-btn-hover-border-color: var(--ishar-color);
    --bs-btn-hover-color: var(--bs-black);

    --bs-btn-visited-bg: var(--bs-black);
    --bs-btn-visited-border-color: var(--ishar-color);
    --bs-btn-visited-color: var(--ishar-color);
}
.past-news {
    a:link, a:visited { color: var(--ishar-color); }
    a:active, a:hover { color: var(--bs-black); }
}

a:link { color: #09f; text-decoration: none; }
a:active, a:visited { color: #6082b6; }
a:hover { color: var(--ac-text); }

a img:hover{ opacity: 0.8; }

.god-player,
.forger-player,
.eternal-player,
.artisan-player,
.immortal-player,
.consort-player {
    color: #00b7eb;
}
.nested-list { list-style: none; }
.god-player::after { content: ' 😇'; }
.forger-player::after,
.eternal-player::after,
.artisan-player::after,
.immortal-player::after,
.consort-player::after {
    content: ' 👼';
}

.dead-player, .dead-player a,
.survival-player, .survival-player a,
.hardcore-player, .hardcore-player a,
.message-error, .errorlist {
    color: #d02b2b;
}

a.dead-player:active, a.dead-player:visited,
a.survival-player:active, a.survival-player:visited,
a.hardcore-player:active, a.hardcore-player:visited
{
    color: #fa8072;
}
.dead-note,
a.dead-player:hover,
a.survival-player:hover,
a.hardcore-player:hover {
    color: #f00;
}
.dead-player::after { content: ' ☠️'; }
.dead-player::after { content: ' ☠️'; }

.message-info { color: #09f; }
.message-success, .active-season td { color: var(--ac-ok); }
.message-warn, .message-warning  { color: var(--ac-warn); }

.two-col { column-count: 2; }

.anchor-link {
    padding: 0 .175rem;
    font-weight: 400;
    color: var(--ishar-color);
    text-decoration: none;
    opacity: 0;
    transition: color 0.15s ease-in-out,opacity 0.15s ease-in-out
}
@media (prefers-reduced-motion: reduce) {
    .anchor-link { transition:none }
}
.anchor-link::after {
    color: var(--ishar-color);
    content: "#"
}
.anchor-link:focus,
.anchor-link:hover,
:hover>.anchor-link,
:target>.anchor-link
{
    color: #0d6efd;
    text-decoration: none;
    opacity: 1
}

.remort-upgrade-row:target {
    font-weight: bold;
    border: 0.1rem solid var(--ishar-color);
}