/* ===========================================================================
   FRONTIER — dark refinement layer
   ---------------------------------------------------------------------------
   This file does NOT replace the site's identity. The world stays what it has
   always been: near-black ground, Cinzel display, gold accent. It loads last
   and does four jobs the base stylesheets do not:

     1. Fixes the navigation, which clipped its own logo, Sign In and theme
        toggle off-screen at every viewport between 768px and 1520px.
     2. Stops the hero scrim from crushing the artwork. The paintings are
        coral and cyan; the old overlay took 54% of their saturation and 62%
        of it behind the copy column. The art now reads, on the same dark
        ground, by lightening the scrim rather than deleting it.
     3. Keeps content visible. The scroll-driven reveal left whole sections at
        opacity 0 whenever its animation range was not satisfied.
     4. Styles the two new interactive pieces — the lane board and the
        Gnome→Golem flip — in the site's own dark vocabulary.

   Accents: gold stays primary. Cyan carries position, Cover, concealment and
   mana. Coral carries damage and attacks. Those two are state colours on the
   board, not a new brand palette.
   =========================================================================== */

:root {
    /* State inks, used by the board and flip only. */
    --fr-cyan: #58c9cf;
    --fr-cyan-deep: #2b8f96;
    --fr-cyan-wash: rgba(88, 201, 207, 0.16);
    --fr-coral: #d4543e;
    --fr-coral-deep: #a83c29;

    --fr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fr-ease-press: cubic-bezier(0.34, 0.9, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   1. NAVIGATION — the blocking fix
   The old bar needed 1391–1405px of intrinsic width but only collapsed to a
   drawer at 900px. Between 768 and 1520 the logo sat at negative left, "Sign
   In" lost 28px, and #themeToggle rendered up to 92px past the right edge,
   unreachable (body has overflow-x: hidden, so there was no scroll to it).
   --------------------------------------------------------------------------- */

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 28px);
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 10px clamp(16px, 3vw, 36px);
    min-height: 64px;
    flex-wrap: nowrap;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;          /* was implicitly auto, so it never shrank */
    flex: 0 1 auto;
    overflow: hidden;
}
/* Keep the wordmark. It was 190–360px wide and flex-shrink: 0, which is where
   most of the bar's excess intrinsic width came from. Same mark, slightly
   smaller ceiling, and allowed to compress instead of clipping off-screen. */
.nav-logo span {
    width: clamp(150px, 16vw, 260px);
    min-width: 110px;
    flex-shrink: 1;
}
.nav-logo span::before { background-size: contain; }

.nav-links { min-width: 0; }
.nav-links a { white-space: nowrap; }
.nav-links > li > a,
.fp-nav-more > button { min-height: 44px; display: inline-flex; align-items: center; }

.theme-toggle {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

/* "More" disclosure keeps the top level at six destinations. */
.fp-nav-more { position: relative; }
.fp-nav-more > button {
    gap: 6px;
    padding: 0.45rem 0.7rem;
    background: none;
    border: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gx-ink-soft);
    cursor: pointer;
}
.fp-nav-more > button:hover,
.fp-nav-more > button.active { color: var(--gx-gold-hi); }
.fp-nav-more > button::after {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
}
.fp-nav-more-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 210px;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--gx-panel-solid, #161009);
    border: 1px solid var(--gx-hairline-strong);
    border-radius: var(--gx-radius);
    box-shadow: var(--gx-shadow);
    z-index: 60;
}
.fp-nav-more[data-open="true"] .fp-nav-more-panel { display: flex; }
.fp-nav-more-panel a {
    padding: 0.7rem 0.8rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--gx-radius-sm);
    white-space: nowrap;
}
.fp-nav-more-panel a:hover { background: rgba(217, 172, 84, 0.1); color: var(--gx-gold-hi); }

/* Collapse to the drawer before the bar can clip, not 620px after. */
@media (max-width: 1180px) {
    .nav-toggle { display: flex !important; }
    .nav-links {
        position: fixed;
        inset: 64px 0 auto 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: auto;
        padding: 0.75rem clamp(16px, 5vw, 40px) 1.5rem;
        background: var(--gx-panel-solid, #161009);
        border-top: 1px solid var(--gx-hairline);
        border-bottom: 1px solid var(--gx-hairline);
        box-shadow: var(--gx-shadow);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        border-radius: 0;
        z-index: 55;
    }
    .nav-links.open { display: flex; }
    .nav-links > li { width: 100%; }
    .nav-links > li > a { min-height: 52px; width: 100%; }
    .nav-play-link { margin-top: 0.9rem; justify-content: center; }
    /* In the drawer the "More" group flattens into plain links. */
    .fp-nav-more { position: static; width: 100%; }
    .fp-nav-more > button { display: none; }
    .fp-nav-more-panel {
        position: static;
        display: flex;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: none;
    }
}

/* ---------------------------------------------------------------------------
   2. THE ARTWORK — same dark ground, art that survives it
   --------------------------------------------------------------------------- */

.gx-hero-scrim {
    /* Was rgba(7,5,3,.72) → .35 → .88 → opaque across the whole frame, plus a
       900×480 radial at .55 over the copy column: 54% of the painting's
       saturation gone, 62% behind the copy, bottom 12% painted solid.

       Replaced with two directional passes — a hard one under the copy column
       and a soft one at the bottom edge for the section join. The right two
       thirds of the artwork, which is where the picture actually is, keeps its
       colour. Legibility is bought locally instead of frame-wide. */
    background:
        linear-gradient(
            100deg,
            rgba(7, 5, 3, 0.94) 0%,
            rgba(7, 5, 3, 0.88) 24%,
            rgba(7, 5, 3, 0.55) 44%,
            rgba(7, 5, 3, 0.12) 60%,
            rgba(7, 5, 3, 0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(7, 5, 3, 0.42) 0%,
            rgba(7, 5, 3, 0.05) 30%,
            rgba(7, 5, 3, 0.30) 72%,
            rgba(7, 5, 3, 0.82) 100%
        ) !important;
}

@media (max-width: 900px) {
    /* No copy column to protect on a phone — the type sits over the whole frame. */
    .gx-hero-scrim {
        background: linear-gradient(
            180deg,
            rgba(7, 5, 3, 0.72) 0%,
            rgba(7, 5, 3, 0.55) 38%,
            rgba(7, 5, 3, 0.78) 100%
        ) !important;
    }
}

/* Legibility is bought locally, behind the copy, instead of over the picture. */
.gx-hero .gx-container { position: relative; z-index: 2; }
.home-hero-inner, .play-hero .gx-container > * { position: relative; }
.gx-hero .gx-lead,
.gx-hero .gx-eyebrow {
    text-shadow: 0 2px 18px rgba(7, 5, 3, 0.92), 0 1px 3px rgba(7, 5, 3, 0.8);
}
/* The wordmark is gradient-filled, so a text-shadow sits behind the fill and
   does nothing. Give it a drop-shadow on the painted glyphs instead. */
.gx-hero h1,
.home-hero h1 {
    filter: drop-shadow(0 2px 14px rgba(7, 5, 3, 0.95))
            drop-shadow(0 1px 2px rgba(7, 5, 3, 0.9));
}

.gx-hero-bg img { filter: none !important; opacity: 1 !important; }

/* Figures that are already near-black do not need a second darkening pass. */
figure.play-shot img, .home-pillar-media img { filter: none !important; }

/* ---------------------------------------------------------------------------
   3. CONTENT VISIBILITY
   gng-2026.css reveals most sections with a scroll-driven translate + scale +
   blur via `animation-timeline: view()`. When the range is not satisfied the
   section stays at opacity 0 — which is how whole pages rendered blank.
   --------------------------------------------------------------------------- */

.gx-scroll-reveal,
.gx-fade-up,
.reveal,
.gx-reveal,
.gx-stagger,
.gx-stagger > *,
body.gx-motion .gx-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* ---------------------------------------------------------------------------
   4. GRIDS THAT DO NOT ORPHAN A ROW
   .gx-grid-4 held 5 items in 4 columns (3 empty cells) and .home-faction-row
   held 7 in 6 (5 empty cells), leaving obvious voids mid-page.
   --------------------------------------------------------------------------- */

.gx-grid-4,
.home-faction-row {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}
.gx-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* ---------------------------------------------------------------------------
   5. THE LANE BOARD
   The five Middle lanes, two concealed High-Rise positions and five Cover
   slots — the one structural idea that makes this game not a row facing a
   row — appeared nowhere on the site except in sentences.
   --------------------------------------------------------------------------- */

.fp-board-layout,
.fp-flip-layout {
    display: grid;
    gap: var(--gx-gap, 1.5rem);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 900px) {
    .fp-board-layout, .fp-flip-layout { grid-template-columns: 1fr; }
}

.fp-board {
    background: var(--gx-panel-solid, #161009);
    border: 1px solid var(--gx-hairline-strong);
    border-radius: var(--gx-radius-lg);
    box-shadow: var(--gx-shadow);
    padding: clamp(1rem, 2.4vw, 1.6rem);
}

.fp-board-caption {
    margin: 0 0 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gx-gold);
    max-width: none;
}

.fp-board-grid { display: flex; flex-direction: column; gap: 10px; }

.fp-board-sheriff {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    border-radius: var(--gx-radius);
    background: linear-gradient(180deg, rgba(212, 84, 62, 0.16), rgba(212, 84, 62, 0.06));
    border: 1px solid rgba(212, 84, 62, 0.34);
    color: var(--gx-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 200ms linear, border-color 200ms linear;
}
.fp-board-sheriff.is-hit {
    background: linear-gradient(180deg, rgba(212, 84, 62, 0.5), rgba(212, 84, 62, 0.3));
    border-color: var(--fr-coral);
}
.fp-board-sheriff-badge {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--gx-gold);
    color: #1c1305;
    font-size: 0.85rem;
    flex: 0 0 auto;
}
.fp-board-hp { margin-left: auto; color: var(--gx-muted); }

.fp-board-row {
    display: grid;
    grid-template-columns: 104px repeat(5, 1fr);
    gap: 8px;
    align-items: stretch;
}
.fp-board-row--high { grid-template-columns: 104px repeat(2, 1fr); }

.fp-board-rowlabel {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gx-faint);
}

.fp-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    padding: 0.5rem 0.4rem;
    border: 1px solid var(--gx-hairline-strong);
    border-radius: var(--gx-radius-sm);
    background: rgba(255, 255, 255, 0.028);
    color: var(--gx-ink-soft);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background 160ms linear, border-color 160ms linear, transform 140ms var(--fr-ease-press);
}
.fp-cell:hover { border-color: var(--gx-gold); transform: translateY(-1px); }
.fp-cell:focus-visible { outline: 2px solid var(--gx-gold); outline-offset: 2px; }
.fp-cell-tag, .fp-cell-name, .fp-cell-act {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
}
.fp-cell-tag--empty { color: var(--gx-faint); }
.fp-cell-name { color: var(--gx-ink); }
.fp-cell-act { color: var(--fr-coral); }

/* Cover reads cyan: cyan carries every spatial meaning on this board. */
.fp-cell--cover.is-on {
    background: linear-gradient(180deg, rgba(88, 201, 207, 0.22), rgba(88, 201, 207, 0.08));
    border-color: rgba(88, 201, 207, 0.55);
    color: var(--fr-cyan);
}
.fp-cell--cover.is-intercepting {
    background: linear-gradient(180deg, rgba(88, 201, 207, 0.42), rgba(88, 201, 207, 0.2));
    border-color: var(--fr-cyan);
    box-shadow: 0 0 0 2px rgba(212, 84, 62, 0.55);
}
.fp-cell--cover.is-passed { border-style: dashed; opacity: 0.55; }

/* A concealed High-Rise is hatched: present, but nothing can point at it. */
.fp-cell--high.is-concealed {
    background:
        repeating-linear-gradient(45deg, var(--fr-cyan-wash) 0 7px, transparent 7px 14px),
        rgba(255, 255, 255, 0.02);
    border-style: dashed;
    border-color: rgba(88, 201, 207, 0.4);
    color: var(--fr-cyan);
}
.fp-cell--high.is-exposed {
    background: linear-gradient(180deg, rgba(88, 201, 207, 0.2), rgba(88, 201, 207, 0.06));
    border-style: solid;
    border-color: rgba(88, 201, 207, 0.5);
    color: var(--fr-cyan);
}

.fp-cell--fire.is-firing {
    background: linear-gradient(180deg, rgba(212, 84, 62, 0.35), rgba(212, 84, 62, 0.15));
    border-color: var(--fr-coral);
}
.fp-cell--fire.is-firing::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, transparent, var(--fr-coral));
    transform: translateX(-50%);
    animation: fr-shot 520ms var(--fr-ease) forwards;
}
@keyframes fr-shot { to { height: 148px; } }

.fp-board-live {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--gx-hairline);
    font-size: 0.95rem;
    color: var(--gx-ink-soft);
    min-height: 3.2em;
    max-width: 62ch;
}

.fp-board-legend h3, .fp-flip-aside h3 { margin: 0 0 1rem; font-size: var(--gx-h3); }
.fp-board-legend dl { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.fp-board-legend dt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gx-gold);
}
.fp-board-legend dd { margin: 5px 0 0; color: var(--gx-muted); font-size: 0.95rem; max-width: 46ch; }
.fp-board-legend > .gx-btn, .fp-flip-aside > .gx-btn { margin-top: 1.5rem; }

.fp-swatch {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1px solid var(--gx-hairline-strong);
}
.fp-swatch--cyan { background: rgba(88, 201, 207, 0.55); border-color: rgba(88, 201, 207, 0.7); }
.fp-swatch--coral { background: rgba(212, 84, 62, 0.6); border-color: rgba(212, 84, 62, 0.75); }
.fp-swatch--hatch {
    border-style: dashed;
    border-color: rgba(88, 201, 207, 0.5);
    background: repeating-linear-gradient(45deg, var(--fr-cyan-wash) 0 5px, transparent 5px 10px);
}

@media (max-width: 720px) {
    .fp-board-row { grid-template-columns: repeat(5, 1fr); }
    .fp-board-row--high { grid-template-columns: repeat(2, 1fr); }
    .fp-board-rowlabel {
        grid-column: 1 / -1;
        padding-top: 6px;
        border-top: 1px solid var(--gx-hairline);
    }
}

/* ---------------------------------------------------------------------------
   6. THE FLIP — Gnome to Golem
   --------------------------------------------------------------------------- */

.fp-flip { display: flex; flex-direction: column; gap: 1.5rem; }
.fp-flip-stage { perspective: 1400px; }

.fp-flip-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.4, 0.05, 0.2, 1);
    min-height: 250px;
}
.fp-flip-card.is-flipped { transform: rotateY(180deg); }
.fp-flip-card.is-warned { animation: fr-jolt 420ms var(--fr-ease); }
@keyframes fr-jolt {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    30% { transform: rotateY(180deg) translateX(-6px); }
    65% { transform: rotateY(180deg) translateX(4px); }
}

.fp-flip-face {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    min-height: 250px;
    border-radius: var(--gx-radius-lg);
    border: 1px solid var(--gx-hairline-strong);
    background: linear-gradient(180deg, rgba(28, 22, 15, 0.96), rgba(18, 14, 9, 0.96));
    box-shadow: var(--gx-shadow);
    backface-visibility: hidden;
    overflow: hidden;
}
.fp-flip-face--golem { position: absolute; inset: 0; transform: rotateY(180deg); }

/* A thin edge of the state colour, not a glow. */
.fp-flip-plate { position: absolute; inset: 0 auto 0 0; width: 4px; }
.fp-flip-plate[data-plate="cyan"] { background: var(--fr-cyan); }
.fp-flip-plate[data-plate="coral"] { background: var(--fr-coral); }

.fp-flip-kicker {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fr-cyan);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gx-hairline);
}
.fp-flip-face--golem .fp-flip-kicker { color: var(--fr-coral); }
.fp-flip-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1.05;
    color: var(--gx-ink);
}
.fp-flip-stats { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--gx-gold-hi); }
.fp-flip-text { color: var(--gx-muted); font-size: 0.95rem; max-width: 40ch; }

.fp-flip-controls { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.fp-flip-counter {
    margin: 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--gx-hairline);
    font-size: 0.95rem;
    color: var(--gx-ink-soft);
    min-height: 3.4em;
    max-width: 56ch;
}
.fp-flip-aside p { max-width: 44ch; }

.fp-btn--cyan {
    background: linear-gradient(180deg, rgba(88, 201, 207, 0.9), rgba(43, 143, 150, 0.9));
    color: #05201f;
    border-color: rgba(88, 201, 207, 0.6);
}
.fp-btn--cyan:hover { background: linear-gradient(180deg, rgba(120, 219, 224, 0.95), rgba(60, 165, 172, 0.95)); }
.fp-btn:disabled, .fp-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* Section heads for the two new blocks. */
.fp-deck { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fp-deck h2 { margin: 0 0 0.5rem; font-size: var(--gx-h2); }
.fp-deck p { margin: 0; color: var(--gx-muted); max-width: 58ch; }

/* ---------------------------------------------------------------------------
   7. HYTALE SERVER — two routes in, and a 12px text floor
   The connect card shipped 24 labels below 11px, the smallest at 9px.
   --------------------------------------------------------------------------- */

.hy-meta span,
.hy-card-label,
.hy-support-note,
.hy-copy-pill,
.hy-steps li { font-size: 0.75rem !important; }

.hy-route { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; }
.hy-route-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    margin: 0;
    border-radius: 999px;
    background: rgba(88, 201, 207, 0.16);
    border: 1px solid rgba(88, 201, 207, 0.45);
    color: var(--fr-cyan);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}
.hy-route-body { min-width: 0; }
.hy-route h3, .hy-route-card h3 { margin: 0 0 4px; font-size: var(--gx-h3); }
.hy-route p, .hy-route-card p { margin: 0 0 0.7rem; color: var(--gx-muted); font-size: 0.95rem; }

.hy-route-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gx-faint);
}
.hy-route-or::before, .hy-route-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gx-hairline);
}

.hy-route-pair {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    margin: 1.5rem 0;
}
.hy-route-card {
    padding: 1.3rem;
    border: 1px solid var(--gx-hairline-strong);
    border-radius: var(--gx-radius);
    background: rgba(255, 255, 255, 0.025);
}
.hy-route-card .hy-route-num { margin-bottom: 0.7rem; }
.hy-route-note { font-size: 0.9rem; color: var(--gx-muted); margin-top: 1rem; }

.hy-addr { min-height: 52px; }
.hy-addr-text { overflow-wrap: anywhere; }

/* An infinitely pulsing dot in the nav is decoration, not status. */
.hy-live-dot { animation: none !important; }

/* ---------------------------------------------------------------------------
   8. MOTION
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* No 3D rotation: the two faces cross-fade in place instead. The golem
       face must lose its own counter-rotation too — without the card's 180°
       to cancel it, rotateY(180deg) renders the whole face mirrored. */
    .fp-flip-card { transition: none; transform: none !important; }
    .fp-flip-card.is-warned { animation: none; }
    .fp-flip-face { backface-visibility: visible; transition: opacity 120ms linear; }
    .fp-flip-face--golem { transform: none !important; opacity: 0; pointer-events: none; }
    .fp-flip-card.is-flipped .fp-flip-face--gnome { opacity: 0; pointer-events: none; }
    .fp-flip-card.is-flipped .fp-flip-face--golem { opacity: 1; pointer-events: auto; }
    .fp-cell, .fp-cell:hover { transition: none; transform: none; }
    .fp-cell--fire.is-firing::after { animation: none; height: 148px; }
}