/**
 * Faction TCG - Physical Game Rules Stylesheet
 *
 * P21 (2026-07-22). Design calls in
 * Faction-Brand-Guide/campaign/public-site-wargame.md, Part C.
 *
 * THIS FILE HAS NO :root BLOCK, DELIBERATELY.
 *
 * It used to open with one, declaring eight custom properties that existed in no
 * token file - --color-neon-blue #00f0ff, --color-neon-pink #ff007f,
 * --color-neon-green #39ff14, --color-neon-gold #ffbd00, plus its own background
 * and muted-text values. 74 var() consumptions drew from them. Because those
 * names did not collide with main.css's, nothing overrode anything: the site
 * simply had two palettes, and this was the only page painted from the second
 * one. That is the whole of Chris's "looks completely different to the rest of
 * the site" verdict (wargame C2.1).
 *
 * Everything here now consumes main.css's brand tokens, which come from
 * brand/tokens/colors.json. Consequences worth knowing:
 *
 *  - --color-rich is the accent, and main.js rewrites it when a visitor picks a
 *    faction, so this page recolours with the alliance like every other page.
 *  - --theme-comp is the complementary accent, also set by the picker.
 *  - Panels follow the P19 idiom: var(--bg-card), 1px rgba(255,255,255,.1),
 *    var(--border-radius), Orbitron uppercase headings in var(--color-rich).
 *
 * functions.php declares main.css as a dependency of this file, so the tokens are
 * always defined by the time these rules resolve.
 */

/* ==========================================================================
   BOX SIZING

   The theme has NO global border-box reset on the front end. style.css carries
   one but is never enqueued - nothing calls get_stylesheet_uri() (wargame
   section 2.11), and P19 deliberately left it dead rather than shift every
   layout on the site mid-project.

   So padding adds to width here, and every padded panel on this page overflowed
   a 375px viewport: .step-content computed 341.6px + 40px of padding = 383px
   inside a 335px column, pushing the document to 442px and scrolling the page
   sideways on a phone.

   Scoped to this page's sections rather than declared globally, for the same
   reason P19 gave: turning on border-box sitewide would move layouts that were
   authored without it.
   ========================================================================== */
.rules-hero,
.rules-hero *,
.rules-features-section,
.rules-features-section *,
.rules-simulator-section,
.rules-simulator-section *,
.rules-flow-section,
.rules-flow-section *,
.rules-victory-section,
.rules-victory-section *,
.rules-cardtypes-section,
.rules-cardtypes-section *,
.rules-conditions-section,
.rules-conditions-section *,
.rules-custom-content-section,
.rules-custom-content-section * {
    box-sizing: border-box;
}

/* ==========================================================================
   SHARED
   ========================================================================== */

/* Eyebrow label above a section heading. Matches .faction-index-epithet in
   main.css - the site's established small-caps data label. */
.neon-tag {
    font-family: var(--font-data);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-rich);
    display: inline-block;
    margin-bottom: 12px;
}

.highlight-neon {
    color: var(--color-rich);
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

.rules-features-section .section-title,
.rules-simulator-section h2,
.rules-flow-section h2 {
    margin-bottom: 16px;
}

/* Shared section intro block. Used by this page's own sections and by the two
   P19 added (Card Types, Conditions), which is why it lives here rather than
   inside one section's rules. */
.section-header {
    max-width: 760px;
    margin: 0 auto 40px;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.section-header p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.conditions-note {
    margin-top: 24px;
    font-size: 0.9rem;
}

.conditions-note a {
    color: var(--color-rich);
    text-decoration: none;
}

.conditions-note a:hover {
    text-decoration: underline;
}

/* The range marker a card prints for range 2+: dark rounded box, Orbitron
   numeral. Reproduced from CardSVG.tsx rather than shipped as a file, because
   the numeral is the content. */
.range-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    background: #333;
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* AP cost pips.
   On a card the unfilled pip is a BLACK parallelogram with a faction-coloured
   edge, because a card's body is white. On this page the panel is dark, so a
   black fill is invisible - the unfilled pip is drawn hollow with a lit edge
   instead. The charged state keeps the card's own #facc15. */
.ap-pips {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.ap-pip {
    --ap-pip-fill: rgba(255, 255, 255, 0.06);
    --ap-pip-stroke: var(--color-rich);
}

.ap-pip.is-filled {
    --ap-pip-fill: #facc15;
    --ap-pip-stroke: #facc15;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.rules-hero {
    position: relative;
    padding: 140px 0 90px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 70% 20%,
            color-mix(in srgb, var(--color-rich) 10%, transparent) 0%,
            transparent 55%),
        var(--bg-dark);
}

.container-hero-content {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
}

.hype-main-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 22px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.hype-lead-text {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 36px;
}

.hype-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 0;
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-rich);
    line-height: 1.1;
}

.spec-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Buttons follow .btn-portal in main.css - the site's own button, not a
   glowing neon slab. */
.btn-hype-primary,
.btn-hype-secondary {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 15px 30px;
    border-radius: var(--border-radius, 12px);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    border: 1px solid transparent;
}

.btn-hype-primary {
    background: var(--color-rich);
    color: #0b0b0f;
}

.btn-hype-primary:hover {
    transform: translateY(-3px);
    background: #fff;
}

.btn-hype-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-hype-secondary:hover {
    transform: translateY(-3px);
    border-color: var(--color-rich);
    background: rgba(255, 255, 255, 0.04);
}

/* ---- Hero cards: real baked renders (call C28) ---- */
.floating-cards-container {
    position: relative;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-card-wrapper {
    position: absolute;
    width: 225px;
    text-decoration: none;
    animation: floatCard 6s ease-in-out infinite;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Offsets are wide enough that both cards and both labels stay readable. At
   225px wide a +/-85px spread leaves roughly a third of the rear card visible,
   which reads as a fanned pair rather than one card with a shadow. */
.floating-card-0 {
    --rot: -7deg;
    --tx: -85px;
    --ty: -35px;
    z-index: 2;
    animation-delay: 0s;
}

.floating-card-1 {
    --rot: 9deg;
    --tx: 85px;
    --ty: 45px;
    z-index: 1;
    animation-delay: 1.5s;
}

@keyframes floatCard {
    0%, 100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) translateY(0);
    }
    50% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) translateY(-14px);
    }
}

.floating-card-wrapper:hover {
    animation-play-state: paused;
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0deg) scale(1.04);
    z-index: 3;
}

.floating-card-wrapper .faction-baked-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    outline: 1px solid color-mix(in srgb, var(--faction-color, #fff) 35%, transparent);
    outline-offset: 2px;
}

.floating-card-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-family: var(--font-data);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faction-color, var(--text-secondary));
}

@media (prefers-reduced-motion: reduce) {
    .floating-card-wrapper {
        animation: none;
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
    }
}

/* ==========================================================================
   FEATURES
   ========================================================================== */

.rules-features-section {
    padding: 90px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.features-hype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

/* The site's panel: same recipe as .cardtype-card and .faction-index-card. */
.feature-hype-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
    padding: 32px 26px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.feature-hype-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-rich);
}

.feature-icon {
    color: var(--color-rich);
    margin-bottom: 20px;
    line-height: 0;
}

.feature-hype-card h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    color: var(--color-rich);
    margin-bottom: 12px;
}

.feature-hype-card p {
    color: #c6c6d2;
    line-height: 1.7;
    font-size: 0.95rem;
}

.feature-icon-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.feature-icon-key span {
    margin-right: 12px;
}

.range-dagger {
    color: var(--color-rich);
}

/* ==========================================================================
   SIMULATOR
   ========================================================================== */

.rules-simulator-section {
    padding: 90px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.simulator-header {
    margin-bottom: 44px;
}

.simulator-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.simulator-header p {
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.simulator-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 44px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
    padding: 36px;
}

.simulator-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
    text-align: left;
    color: var(--text-primary);
}

.control-btn:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.control-btn.active {
    border-color: var(--color-rich);
    background: color-mix(in srgb, var(--color-rich) 8%, transparent);
}

/* Reset is a secondary action - kept visually quieter than the two unit types,
   and never picks up .active. */
.control-btn.reset-btn {
    margin-top: 4px;
    opacity: 0.75;
}

.control-btn.reset-btn:hover {
    opacity: 1;
}

.control-btn .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    color: var(--color-rich);
}

.control-btn .btn-text {
    display: flex;
    flex-direction: column;
}

.control-btn .btn-text strong {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-btn .btn-text small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 3px;
}

.unit-explanation {
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius, 12px);
    padding: 18px;
    border-left: 3px solid var(--color-rich);
    display: none;
}

.unit-explanation.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.unit-explanation h4 {
    font-family: var(--font-heading);
    color: var(--color-rich);
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.unit-explanation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unit-explanation li {
    font-size: 0.85rem;
    color: #c6c6d2;
    line-height: 1.6;
    margin-bottom: 8px;
}

.unit-explanation li strong {
    color: var(--text-primary);
}

/* ---- The 5x6 grid ---- */
.simulator-grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-layout-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.grid-labels-cols {
    display: grid;
    grid-template-columns: repeat(5, 70px);
    gap: 8px;
    margin-bottom: 10px;
    padding-left: 35px;
    font-family: var(--font-data);
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
}

.grid-labels-rows {
    display: grid;
    grid-template-rows: repeat(6, 70px);
    gap: 8px;
    font-family: var(--font-data);
    color: var(--text-secondary);
    font-size: 0.8rem;
    align-items: center;
    text-align: right;
}

.battlefield-grid {
    display: grid;
    grid-template-columns: repeat(5, 70px);
    grid-template-rows: repeat(6, 70px);
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 12px;
    border-radius: var(--border-radius, 12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.grid-cell {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-cell:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.cell-coords {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.16);
    font-family: var(--font-data);
}

.grid-cell.leader-cell {
    border-color: color-mix(in srgb, var(--color-church) 40%, transparent);
    background: color-mix(in srgb, var(--color-church) 4%, transparent);
}

/* ---- Occupied and highlighted cells ----
   The unit marker uses the game's own range notation rather than the emoji this
   used to print via CSS content (wargame C2.3):

     melee  -> the dagger glyph, which is exactly what a card prints for range 1
     ranged -> "2-5", which is exactly what a Sniper's range box prints

   Both are the real marks, so a player reading the simulator is already reading
   card notation. */
.grid-cell.has-unit {
    z-index: 3;
}

.grid-cell.has-unit::after {
    content: '';
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    border: 2px solid currentColor;
    background-color: color-mix(in srgb, currentColor 18%, transparent);
    animation: cellSpawn 0.3s ease;
}

.grid-cell.has-melee {
    color: var(--color-mart);
}

.grid-cell.has-melee::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 4;
    background-color: currentColor;
    -webkit-mask: url('../icons/game/dagger.svg') no-repeat center / contain;
    mask: url('../icons/game/dagger.svg') no-repeat center / contain;
    animation: cellSpawn 0.3s ease;
}

.grid-cell.has-ranged {
    color: var(--color-helix);
}

.grid-cell.has-ranged::before {
    content: '2-5';
    position: absolute;
    z-index: 4;
    padding: 2px 5px;
    border-radius: 3px;
    background: #333;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    animation: cellSpawn 0.3s ease;
}

.grid-cell.can-move {
    background: color-mix(in srgb, var(--color-rich) 12%, transparent);
    border-color: var(--color-rich);
}

.grid-cell.can-attack {
    background: color-mix(in srgb, var(--color-mart) 14%, transparent);
    border-color: var(--color-mart);
}

@keyframes cellSpawn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.grid-legend {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 24px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.melee-dot { background: var(--color-mart); }
.ranged-dot { background: var(--color-helix); }
.move-dot { background: var(--color-rich); }
.attack-dot { background: color-mix(in srgb, var(--color-mart) 60%, transparent); }

/* ==========================================================================
   TURN TIMELINE
   ========================================================================== */

.rules-flow-section {
    padding: 90px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rules-timeline {
    position: relative;
    max-width: 1000px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.rules-timeline::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(180deg,
        var(--color-rich) 0%,
        color-mix(in srgb, var(--color-rich) 20%, transparent) 100%);
    opacity: 0.5;
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 20px;
}

/* A `1fr` track has min-width: auto, so it refuses to shrink below its
   content's min-content width and the panel pushes the page sideways on a
   phone. Both grids on this page need their items allowed to shrink. */
.timeline-step > *,
.step-content > *,
.simulator-container > * {
    min-width: 0;
}

.step-number {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--text-primary);
    z-index: 2;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.timeline-step:hover .step-number {
    border-color: var(--color-rich);
    color: var(--color-rich);
}

/* Setup is not a phase (call C15), so its marker is a word, not a number -
   it used to print "01" and collide with the DRAW phase below. */
.step-number-setup {
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-style: dashed;
}

.step-content {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
    padding: 34px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
}

/* Steps with no visual on the right span full width. This used to be pinned to
   :nth-child(2), which only ever covered DRAW - DEPLOY and ATTACK have no
   visual either and were being squeezed into 1.2fr for nothing. */
.timeline-step:not(:has(.step-interactive-visual)) .step-content {
    grid-template-columns: 1fr;
}

.step-details h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    color: var(--color-rich);
}

.step-details p {
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 18px;
}

.step-details ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.step-details li {
    color: #c6c6d2;
    line-height: 1.7;
    margin-bottom: 10px;
}

.step-details li strong {
    color: var(--text-primary);
}

/* Callouts: first-turn limits and prize timing. */
.first-turn-handicap,
.prize-timing-callout {
    margin-top: 22px;
    padding: 16px 18px;
    border-left: 3px solid var(--color-rich);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 var(--border-radius, 12px) var(--border-radius, 12px) 0;
}

.handicap-badge {
    font-family: var(--font-data);
    font-size: 10px;
    color: var(--color-rich);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.first-turn-handicap p,
.prize-timing-callout p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #c6c6d2;
}

/* ---- Setup reveal: real baked cards, real card back (call C28) ---- */
.step-interactive-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius, 12px);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.setup-visual-board {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    perspective: 900px;
}

.visual-slot {
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.visual-slot-label {
    font-family: var(--font-data);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-card {
    width: 88px;
    height: 88px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.mini-card.face-down {
    transform: rotateY(180deg);
}

.mini-card.revealed {
    transform: rotateY(0deg);
}

/* Both faces are real card art - the baked render and the game's own card back -
   so both round at the card's real trim, --card-corner. This clips the render
   inside it (overflow: hidden), so an 8px corner here was the effective one no
   matter what the render itself asked for: 9% of an 88px side, twice the truth. */
.mini-card .card-back,
.mini-card .card-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--card-corner, 4.1667%);
    overflow: hidden;
}

.mini-card .card-back {
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotateY(180deg);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mini-card.leader .card-back {
    border-color: var(--color-church);
}

.card-back-tag {
    width: 100%;
    padding: 3px 0;
    background: var(--color-church);
    color: #0b0b0f;
    font-family: var(--font-data);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

.btn-simulate-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: var(--border-radius, 12px);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.btn-simulate-action:hover {
    border-color: var(--color-rich);
    background: color-mix(in srgb, var(--color-rich) 10%, transparent);
}

/* ---- Prize deck ---- */
.prize-card-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.prize-deck {
    display: flex;
    gap: 8px;
}

.prize-card-item {
    width: 58px;
    height: 58px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid color-mix(in srgb, var(--color-church) 45%, transparent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-data);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: var(--color-church);
    text-transform: uppercase;
    transform: rotate(-3deg);
    transition: transform 0.25s ease, background 0.25s ease;
}

.prize-card-item:hover {
    transform: scale(1.08) rotate(0deg);
    background: color-mix(in srgb, var(--color-church) 15%, transparent);
}

.prize-visual-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 4px 0 0;
}

/* ==========================================================================
   CARD TYPES: reading a card
   ========================================================================== */

.card-legend {
    margin-top: 40px;
    padding: 28px 26px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
}

.card-legend-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.95rem;
    color: var(--color-rich);
    margin-bottom: 18px;
}

.card-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.card-legend-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #c6c6d2;
    font-size: 0.92rem;
    line-height: 1.6;
}

.card-legend-mark {
    flex: none;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2px;
}

.card-legend-list strong {
    color: var(--text-primary);
}

/* ==========================================================================
   CONDITIONS

   Each <li> carries --condition-color inline, set from the game's own colour
   for that condition (call C30). The glossary autolinker wraps the term names,
   so the tooltip text still comes from one place: inc/wiki-glossary.php.
   ========================================================================== */

.conditions-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.condition-glyph {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--condition-color, var(--color-rich));
    background: color-mix(in srgb, var(--condition-color, var(--color-rich)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--condition-color, var(--color-rich)) 35%, transparent);
}

.conditions-list li strong {
    color: var(--condition-color, var(--text-primary));
}

/* ==========================================================================
   EDITOR CONTENT
   ========================================================================== */

.rules-custom-content-section {
    padding: 90px 0;
}

.cyber-content-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 12px);
    padding: 46px 40px;
}

.container-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-rich);
    pointer-events: none;
}

.container-corner.top-left { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.container-corner.top-right { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.container-corner.bottom-left { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.container-corner.bottom-right { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.entry-content p {
    color: #c6c6d2;
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 22px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-rich);
    margin-top: 36px;
    margin-bottom: 18px;
}

.entry-content h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.entry-content h3 { font-size: 1.2rem; }

.entry-content ul,
.entry-content ol {
    margin-bottom: 22px;
    padding-left: 25px;
}

.entry-content li {
    color: #c6c6d2;
    line-height: 1.7;
    margin-bottom: 10px;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    text-align: left;
}

.entry-content th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.entry-content tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* BLEEDING is the only condition the body copy calls out inline (Check-up
   phase). Colour it the same as its glyph so the page stays self-consistent.
   .effect-burn is retained but unused - BURN was cut as stale (call C7). */
.effect-bleed {
    color: #f87171;
    font-weight: 700;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .container-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hype-specs-grid {
        width: 100%;
        max-width: 500px;
    }

    .hero-actions {
        justify-content: center;
    }

    .floating-cards-container {
        height: 340px;
    }

    .floating-card-wrapper {
        width: 200px;
    }

    .simulator-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {
    .rules-hero {
        padding: 110px 0 70px;
    }

    .hype-main-title {
        font-size: 2.3rem;
    }

    .hype-specs-grid {
        gap: 12px;
        padding: 18px 0;
    }

    .spec-value {
        font-size: 1.4rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .features-hype-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* The grid is 5 x 70px + gaps + labels = ~430px, which overflows a 375px
       viewport. Shrink the cells rather than letting the page scroll sideways.
       Measured budget at 375px: container 375 - 40 page padding - 32 panel
       padding = 303px for the whole grid block. 5 x 46 + 4 x 6 gaps + 24 grid
       padding = 278, plus the row-label column (14) and its 10px gap = 302. */
    .grid-labels-cols,
    .battlefield-grid {
        grid-template-columns: repeat(5, 46px);
        gap: 6px;
    }

    .grid-labels-rows,
    .battlefield-grid {
        grid-template-rows: repeat(6, 46px);
    }

    .grid-layout-container {
        gap: 10px;
    }

    .grid-labels-rows {
        gap: 6px;
        width: 14px;
    }

    .grid-labels-cols {
        padding-left: 24px;
        gap: 6px;
    }

    .grid-cell.has-unit::after {
        width: 34px;
        height: 34px;
    }

    .grid-cell.has-melee::before {
        width: 18px;
        height: 18px;
    }

    .grid-cell.has-ranged::before {
        font-size: 0.55rem;
        padding: 2px 4px;
    }

    .cell-coords {
        display: none;
    }

    .simulator-container {
        padding: 22px 16px;
    }

    .timeline-step {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .rules-timeline::before {
        display: none;
    }

    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }

    .step-number-setup {
        font-size: 0.65rem;
    }

    .step-content {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }

    .card-legend-list li {
        flex-direction: column;
        gap: 8px;
    }

    .cyber-content-container {
        padding: 32px 20px;
    }
}