/* Aberrant's look: a comic book, after the logo (yellow lettering, black outline).
   - Panels: cards and modals get an ink border and a hard offset shadow.
   - Captions: section titles are yellow boxes with black uppercase lettering in Anton (fonts/, SIL Open Font License).
   - Print palette: yellow, cyan (Megas, extras), red (Taint) and ink, on newsprint (light) or ink (dark), with
     halftone dots behind everything.
   Yellow is only ever a fill with black on it; where colour carries text on the light page it becomes amber. */

@font-face {
    font-family: 'Anton';
    src: url('../fonts/anton-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --comic-yellow: #f2d600;
    --comic-ink: #141414;
    --comic-cyan: #00789f;              /* dark enough to read as text on paper */
    --comic-red: #c8102e;
    --comic-paper: #f7f2e4;             /* the page: newsprint */
    --comic-panel: #fffdf6;             /* a panel */
    --comic-line: #141414;              /* panel borders */
    --comic-shadow: #141414;            /* the hard offset shadow */
    --comic-halftone: rgba(20, 20, 20, 0.07);
    --comic-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
    --site-accent: #8a6d00;             /* amber links and focus on paper */
    --site-accent-contrast: #141414;
}

[data-bs-theme="dark"] {
    --comic-cyan: #3cc8f0;
    --comic-red: #ff5a6a;
    --comic-paper: #101010;
    --comic-panel: #1b1b1b;
    --comic-line: #000;
    --comic-shadow: rgba(242, 214, 0, 0.35);   /* a yellow glow behind ink panels */
    --comic-halftone: rgba(242, 214, 0, 0.05);
    --site-accent: var(--comic-yellow);
}

body {
    background-color: var(--comic-paper);
    background-image: radial-gradient(var(--comic-halftone) 1px, transparent 1.5px);
    background-size: 6px 6px;
}

h1, .h1, .modal-title, .site-brand {
    font-family: var(--comic-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

a {
    color: var(--site-accent);
}

/* Buttons: black on yellow in both modes, with a small hard shadow. */
.btn-primary {
    --bs-btn-bg: var(--comic-yellow);
    --bs-btn-border-color: var(--comic-ink);
    --bs-btn-color: var(--comic-ink);
    --bs-btn-hover-bg: #ffe43a;
    --bs-btn-hover-border-color: var(--comic-ink);
    --bs-btn-hover-color: var(--comic-ink);
    --bs-btn-active-bg: #d9bf00;
    --bs-btn-active-border-color: var(--comic-ink);
    --bs-btn-active-color: var(--comic-ink);
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--comic-ink);
    font-weight: 600;
}

/* Panels: cards and modals. */
.card,
.modal-content {
    --bs-card-bg: var(--comic-panel);
    background-color: var(--comic-panel);
    border: 3px solid var(--comic-line);
    border-radius: 4px;
    box-shadow: 5px 5px 0 var(--comic-shadow);
}

.card-img-top {
    border-bottom: 3px solid var(--comic-line);
}

/* A caption box: yellow, black lettering, slightly tilted. */
.sheet-group-title,
.sheet-section-title,
.sheet-name {
    font-family: var(--comic-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--comic-ink);
    background-color: var(--comic-yellow);
    border: 2px solid var(--comic-ink);
    box-shadow: 2px 2px 0 var(--comic-ink);
    transform: rotate(-1.5deg);
}

/* ------------------------------------------------------------ Masthead (includes/header.php): a comic's title strip */
.site-navbar {
    background-color: var(--comic-ink);
    background-image: radial-gradient(rgba(242, 214, 0, 0.12) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border-bottom: 4px solid var(--comic-yellow);
    box-shadow: 0 3px 0 #000;
    color: #e9e9e9;
    padding: 0.35rem 0;
}

.site-logo {
    height: 2.6rem;
    width: auto;
    filter: drop-shadow(2px 2px 0 #000);
}

/* Where you are: Characters › Cronus, lettered like the captions. */
.site-crumbs {
    align-items: center;
    gap: 0.35rem;
    font-family: var(--comic-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    color: #e9e9e9;
}

.site-crumbs a {
    color: #bdbdbd;
    text-decoration: none;
}

.site-crumbs a:hover,
.site-crumbs a:focus-visible {
    color: var(--comic-yellow);
}

.site-crumbs [aria-current] {
    color: var(--comic-yellow);
}

.site-nav-divider {
    width: 2px;
    height: 1.6rem;
    margin: 0 0.35rem;
    background-color: #3a3a3a;
}

/* An icon button that bursts yellow ("POW!") when pointed at; the current page's stays burst. */
.comic-burst {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e9e9e9;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.12s ease;
}

.comic-burst::before {
    content: '';
    position: absolute;
    inset: -0.15rem;
    z-index: -1;
    background-color: var(--comic-yellow);
    clip-path: polygon(50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%, 100% 50%, 84.8% 59.3%,
        93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%, 50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%,
        15.2% 59.3%, 0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%);
    transform: scale(0) rotate(-25deg);
    transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.6, 1);
}

.comic-burst:hover,
.comic-burst:focus-visible,
.comic-burst.active,
.comic-burst[aria-expanded="true"] {
    color: var(--comic-ink);
}

.comic-burst:hover::before,
.comic-burst:focus-visible::before,
.comic-burst.active::before,
.comic-burst[aria-expanded="true"]::before {
    transform: scale(1) rotate(0deg);
}

.comic-burst:focus-visible {
    outline: none;
}

.comic-burst:focus-visible::after {
    content: '';
    position: absolute;
    inset: -0.35rem;
    border: 2px dashed var(--comic-yellow);
    border-radius: 50%;
}

/* Labels as speech bubbles (js/header.js). */
.comic-tooltip {
    --bs-tooltip-bg: #fffdf6;
    --bs-tooltip-color: #141414;
    --bs-tooltip-opacity: 1;
}

.comic-tooltip .tooltip-inner {
    border: 2px solid #141414;
    border-radius: 1rem;
    font-family: var(--comic-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 2px 2px 0 #141414;
}

@media (prefers-reduced-motion: reduce) {
    .comic-burst::before {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .site-logo {
        height: 2rem;
    }

    .comic-burst {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.05rem;
    }
}

/* The theme toggle shows the mode you'll switch to. */
[data-bs-theme="dark"] .theme-icon-to-dark,
[data-bs-theme="light"] .theme-icon-to-light {
    display: none;
}

/* Local SVG icons (classes/logic/Icon.php) sit on the text line like an icon font would. */
svg.bi {
    vertical-align: -0.125em;
}

/* ------------------------------------------------------------ Login */
.site-auth {
    max-width: 400px;
    margin: 10vh auto 0;
    padding: 0 16px;
}

/* Sign-up honeypot (modals/signup.php): off-screen for people and screen readers, still filled in by bots. */
.site-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------ Admin */
.site-admin-card {
    max-width: 32rem;
}

/* ------------------------------------------------------------ Characters (index.php) */
/* A character is a small panel that pops when pointed at. */
.character-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.character-card:hover,
.character-card:focus-visible {
    transform: translate(-2px, -2px) rotate(-1deg);
    box-shadow: 8px 8px 0 var(--comic-shadow);
}

.character-card-name {
    font-family: var(--comic-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .character-card,
    .character-card:hover,
    .character-card:focus-visible {
        transition: none;
        transform: none;
    }
}

.character-card-img,
.sheet-portrait {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
}

/* ------------------------------------------------------------ Sheet (character/) */
/* Caption boxes (colours and tilt with the panels above): a group's spans the panel, a section's hugs its words,
   and the character's name is the biggest. */
.sheet-group-title {
    text-align: center;
    font-size: 1.35rem;
    padding: 0.2rem;
    margin-bottom: 0.9rem;
}

.sheet-section-title {
    display: inline-block;
    font-size: 1.15rem;
    padding: 0.1rem 0.7rem;
    margin-bottom: 0.9rem;
}

.sheet-name {
    display: inline-block;
    font-size: 2rem;
    padding: 0.1rem 0.9rem;
    transform: rotate(-2.5deg);
}

/* Aberrations as a thought bubble (read mode), its trail of small bubbles toward the panel's edge. */
.sheet-aberrations {
    position: relative;
    display: inline-block;
    background-color: var(--comic-panel);
    border: 2px solid currentColor;
    border-radius: 2rem;
    padding: 0.6rem 1.1rem;
    margin: 0.25rem 0 1rem 2.25rem;
    font-style: italic;
}

.sheet-aberrations::before,
.sheet-aberrations::after {
    content: '';
    position: absolute;
    background-color: var(--comic-panel);
    border: 2px solid currentColor;
    border-radius: 50%;
}

.sheet-aberrations::before {
    width: 0.9rem;
    height: 0.9rem;
    left: -1.2rem;
    bottom: -0.4rem;
}

.sheet-aberrations::after {
    width: 0.5rem;
    height: 0.5rem;
    left: -1.9rem;
    bottom: -0.9rem;
}

.dots-taint {
    color: var(--comic-red);
}

.sheet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.sheet-mega,
.sheet-accent {
    color: var(--comic-cyan);
}

.sheet-mega {
    font-weight: 600;
}

.sheet-ability {
    padding-left: 0.75rem;
}

.sheet-power + .sheet-power {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

/* Rating dots (classes/logic/Dots.php): filled ● and empty ○, mega ratings in the info colour. */
.dots {
    display: inline-flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.dot {
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.dot.filled {
    background-color: currentColor;
}

.dots-mega {
    color: var(--comic-cyan);
}

/* ------------------------------------------------------------ Sheet edit mode (js/sheet-edit.js) */
.dots-edit .dot {
    padding: 0;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
}

.dots-edit .dot.filled {
    background-color: currentColor;
}

.dots-edit .dot:hover,
.dots-edit .dot:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.sheet-number {
    width: 4.5rem;
    text-align: end;
}

.sheet-note {
    flex: 1 1 12rem;
    max-width: 24rem;
}

/* A power folds under its header row (closed on every load). The row is flex, so draw the ▸ marker ourselves. */
.sheet-power-details > summary {
    cursor: pointer;
    list-style: none;
}

.sheet-power-details > summary::-webkit-details-marker {
    display: none;
}

.sheet-power-details > summary::before {
    content: '▸';
    display: inline-block;
    width: 0.75rem;
    color: var(--bs-secondary-color);
    transition: transform 0.15s ease;
}

.sheet-power-details[open] > summary::before {
    transform: rotate(90deg);
}

/* Specialties under an ability. */
.sheet-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.1rem 0 0.2rem 1.5rem;
}

/* Rules modal: one rule set per fold. */
.rules-set > summary {
    cursor: pointer;
}

.rules-set {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.75rem;
}

/* A rule (or budget) that differs from its default. */
.rule-input.rule-changed {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bs-warning) 35%, transparent);
    font-weight: 600;
}

/* Techniques under a power, and in the technique modal: the name line opens the rule text. */
.sheet-techniques li + li {
    margin-top: 0.25rem;
}

.sheet-techniques summary,
.sheet-technique-choice summary {
    cursor: pointer;
}

.sheet-technique-text {
    padding: 0.25rem 0 0.25rem 1rem;
    color: var(--bs-secondary-color);
}

.sheet-technique-choice + .sheet-technique-choice {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* A small close button inside a badge (remove an extra or weakness). */
.btn-close-badge {
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.25rem;
    vertical-align: middle;
}