/* Oathfell — hand-written CSS (no Tailwind available offline) */ /* Vendored offline type (no CDN / font service, per the offline-assets rule). Space Mono for display/titles, Source Code Pro for body — both SIL OFL 1.1. Files + license texts live in priv/static/fonts/; see fonts/CREDITS.md. */ @font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/space-mono-400-049dfc5919c21896a13296775d80b8c0.woff2?vsn=d") format("woff2"); } @font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/space-mono-700-e5e908997a453e21f2fe41cb72e186d2.woff2?vsn=d") format("woff2"); } @font-face { font-family: "Source Code Pro"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/source-code-pro-400-45a9e965b61ba3b6b4697c14ddae442c.woff2?vsn=d") format("woff2"); } @font-face { font-family: "Source Code Pro"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/source-code-pro-400-italic-89256ec72cd4033af1015295029357f8.woff2?vsn=d") format("woff2"); } @font-face { font-family: "Source Code Pro"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/source-code-pro-600-df97cab73b83a4355ad1d758592d4990.woff2?vsn=d") format("woff2"); } @font-face { font-family: "Source Code Pro"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/source-code-pro-700-eb7fda576edeb865a1a57a8593cf809a.woff2?vsn=d") format("woff2"); } :root { --bg: #16141f; --panel: #221f2e; --panel-2: #2c2839; --line: #3a3450; --text: #e8e4f0; --muted: #9a92b0; --red: #e05252; --red-dark: #8c2f2f; --blue: #4f8fe0; --blue-dark: #2f4f8c; --gold: #e0b452; --gold-muted: rgba(224, 180, 82, 0.4); --gold-dim: rgba(224, 180, 82, 0.20); /* spent AP wedge fill */ --green: #5cb85c; --silver: #c9d2de; --cyan: #4fd0d8; --arcane: #4aa3ff; --tile: #4a4258; --tile-alt: #443d52; /* On-board special-tile icon colors: each capability's base color pre-mixed toward the board tile so the glyphs read muted, not candy-bright. */ --icon-spawn: color-mix(in srgb, var(--green) 32%, var(--tile)); --icon-defense: color-mix(in srgb, var(--silver) 60%, var(--tile)); --icon-attack: color-mix(in srgb, var(--red) 60%, var(--tile)); --icon-power: color-mix(in srgb, var(--gold) 60%, var(--tile)); --icon-teleport: color-mix(in srgb, var(--arcane) 60%, var(--tile)); /* Type: a display face for titles/brand/headings, a readable one for body. Curated title selectors below opt into --font-title; everything else inherits --font-body from . */ --font-title: "Space Mono", ui-monospace, Menlo, monospace; --font-body: "Source Code Pro", ui-monospace, Menlo, monospace; } * { box-sizing: border-box; } /* Stop iOS Safari from auto-inflating text when rotated to landscape (and from leaving it inflated after rotating back to portrait). Applied to the root element so it covers every non-game text block. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.45; } /* Titles, brand, and section labels use the display face. Keep this list curated — anything not named here stays in the body face. */ .brand, h1, h2, h3, .dash-section h2, .turn-log-title, .char-name, .army-option-name { font-family: var(--font-title); } a { color: var(--gold); } header.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 960px; margin: 0 auto; padding: 0.3rem 1rem; background: var(--panel); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 45; } header.topbar .brand { font-weight: bold; letter-spacing: 2px; color: var(--gold); text-decoration: none; text-transform: uppercase; } header.topbar nav { display: flex; align-items: center; margin-left: auto; } header.topbar nav ul { display: flex; gap: 1rem; align-items: center; list-style: none; margin: 0; padding: 0; } header.topbar nav li { margin: 0; } header.topbar nav a { color: var(--muted); text-decoration: none; } header.topbar nav a:hover { color: var(--text); } header.topbar nav a.active { color: var(--gold); } main.container { max-width: 960px; margin: 0 auto; } .alert { padding: 0.6rem 1rem; margin: 0.5rem 0; border: 1px solid var(--line); border-radius: 4px; } .alert-info { background: #23324a; border-color: var(--blue-dark); } .alert-danger { background: #4a2323; border-color: var(--red-dark); } .alert:empty { display: none; } button, .button { font-family: inherit; font-size: 14px; background: var(--panel-2); color: var(--text); border: 2px solid var(--line); border-radius: 4px; padding: 0.45rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; /* Kill the iOS double-tap-to-zoom gesture on controls: rapidly tapping a button (e.g. undoing several AP off the cap) otherwise reads as a double-tap and zooms the PWA. `manipulation` keeps panning + pinch-zoom. */ touch-action: manipulation; } button:hover:not(:disabled), .button:hover { border-color: var(--gold); } button:disabled { opacity: 0.45; cursor: default; } button.primary, .button.primary { background: var(--gold); color: #221a06; border-color: var(--gold); font-weight: bold; } input[type="text"], input[type="email"], input[type="password"], select { font-family: inherit; background: var(--panel-2); border: 2px solid var(--line); color: var(--text); border-radius: 4px; padding: 0.45rem 0.6rem; width: 100%; max-width: 24rem; } /* A select only honours background/color once it stops being a native control (Safari ignores them otherwise), so `appearance: none` is what makes it match the inputs above — and it takes the platform arrow with it, hence the drawn chevron. Inline SVG in a data URI: hand-written, no icon font or CDN. The fill is --muted (#9a92b0) spelled out, since a var() can't reach inside a data URI. */ select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%239a92b0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.6rem 0.4rem; cursor: pointer; } select:focus { border-color: var(--gold); outline: none; } /* The native dropdown list is drawn by the OS, so its options need their own colours or they inherit a white-on-white default in some browsers. */ select option { background: var(--panel-2); color: var(--text); } select option:disabled { color: var(--muted); } label { display: block; margin: 0.6rem 0 0.2rem; color: var(--muted); } h1, h2, h3 { font-weight: bold; letter-spacing: 1px; } h1 { font-size: 1.4rem; } .invalid-feedback { color: var(--red); display: block; } /* ---------- Forms: fieldsets, actions, checkboxes ---------- */ fieldset { border: 2px solid var(--line); border-radius: 6px; padding: 0.4rem 1rem 1rem; margin: 1.5rem 0 0; /* let the fieldset shrink inside flex/narrow parents instead of forcing its min-content width */ min-width: 0; } legend { padding: 0 0.4rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; font-size: 0.9rem; color: var(--gold); } .field-help { color: var(--muted); margin: 0.2rem 0 0.6rem; } /* Submit rows get the same top gap as the space between two fields (a label's top margin), so the button never crowds the last input. */ .form-actions { margin-top: 0.6rem; } /* ---------- Auth pages (log in / register / reset) ---------- */ .auth { max-width: 22rem; margin: 2rem auto; } .auth h1 { text-align: center; } .auth .auth-links { text-align: center; color: var(--muted); margin-top: 1.2rem; } .auth input[type="text"], .auth input[type="email"], .auth input[type="password"] { max-width: 100%; } .auth .form-actions button, .auth .form-actions .button { width: 100%; } /* ---------- Settings page ---------- */ .settings { max-width: 34rem; } .about-list { margin: 0.2rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; } .about-list > div { display: flex; gap: 0.75rem; } .about-list dt { color: var(--muted); flex: 0 0 6.5rem; margin: 0; } .about-list dd { margin: 0; } /* ---------- Game board ---------- */ .game { width: 100%; /* Sized to the open cluster (board + gap + panel) and capped there, so the header spans that same width whether the games panel is open or closed — the top-nav icons never drift outward when you toggle the menu, and the title keeps its breathing room. On a phone this caps at the viewport (the panel's own width is vw-based), so the header simply fills the screen. The board and hand stay centred within it via .game-stage's auto margins. */ max-width: calc(var(--board-width) + var(--games-menu-w) + 1rem); margin: 0 auto; position: relative; } /* Card chrome and bottom-center slide-up match the connecting overlay's `.connecting-card` (below) — one visual language for both toasts. */ .toast { position: fixed; left: 50%; bottom: 1rem; z-index: 1000; width: min(calc(100% - 2rem), 26rem); padding: 0.75rem 1rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); background: var(--panel); border: 2px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); font-size: 14px; transform: translate(-50%, 120%); animation: toast-in 0.25s ease-out forwards; } .toast--error { background: #4a2323; border-color: var(--red-dark); color: #f0b3b3; } .toast--info { border-color: var(--gold); } @keyframes toast-in { to { transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .toast { transform: translate(-50%, 0); animation: none; } } /* Auto-update banner: flashes bottom-center right before the page reloads onto a freshly deployed version. Non-interactive — the reload dismisses it. */ .update-toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; background: var(--panel); border: 1px solid var(--gold); border-radius: 6px; color: var(--text); font-size: 14px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); animation: update-toast-in 160ms ease-out; } .update-toast::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--gold-muted); border-top-color: var(--gold); border-radius: 50%; animation: update-toast-spin 700ms linear infinite; } @keyframes update-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes update-toast-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .update-toast, .update-toast::before { animation: none; } } /* Two solid-color banners meet flush at center; the turn shield straddles the seam. `position: relative` anchors both the absolutely-centered shield and the endcaps that overhang each banner's outer edge. */ .topbar-players { position: relative; display: flex; align-items: stretch; margin: 0 auto 0.5rem; width: var(--board-width); /* fixed so state changes never shift the board */ height: 1.32rem; } /* --banner is the player color; --banner-eff is that color muted-but-tinted when it's not this player's turn, full-strength when it is. Everything else (background, endcap, text glow) derives from --banner-eff so the whole banner flips with one variable. --mute is how much hue survives when idle — tunable. */ .player-plate { --mute: 34%; --banner-eff: color-mix(in srgb, var(--banner) var(--mute), #2b2e34); position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; font-weight: bold; /* full player color at the outer (endcap) edge, fading to the page bg at the center seam. --fade flips direction for the opponent banner. */ --fade: to right; background: linear-gradient(var(--fade), var(--banner-eff), var(--bg)); color: color-mix(in srgb, #fff 72%, transparent); } .player-plate.active { --banner-eff: var(--banner); color: #fff; } .player-plate.side-blue { --banner: var(--blue); } .player-plate.side-red { --banner: var(--red); } /* Outer side clears the overhanging endcap; inner side clears the center shield. you = left banner, opponent = right banner (mirror). */ .player-plate.you { justify-content: flex-start; /* No left padding — the name overflows onto the scroll endcap. */ padding: 0 0.7rem 0 0; } .player-plate.opponent { --fade: to left; justify-content: flex-end; /* No right padding — the name overflows onto the scroll endcap. */ padding: 0 0 0 0.7rem; } /* The name fills the banner's inner space (flex: 1) so long text runs toward the center, where a mask gradient fades it to transparent before it collides with the turn shield — softer than a hard clip, and no "…" (which ate too much width). Short names sit at the outer edge, well clear of the fade. */ .plate-name { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; /* Lift the name above the absolutely-positioned scroll endcaps. */ position: relative; z-index: 1; /* Black drop shadow so the name reads against the banner gradient. */ text-shadow: 0 1px 2px #000; } /* Fade toward the center seam: transparent on the inner edge, opaque on the outer edge where the name is anchored. Mirrored per side. */ .player-plate.you .plate-name { text-align: left; /* Space the name off the (now margin-less) pip on its outer/left edge. */ padding-left: 0.4rem; -webkit-mask-image: linear-gradient(to right, #000 70%, transparent); mask-image: linear-gradient(to right, #000 70%, transparent); } .player-plate.opponent .plate-name { text-align: right; /* Space the name off the (now margin-less) pip on its outer/right edge. */ padding-right: 0.4rem; -webkit-mask-image: linear-gradient(to left, #000 70%, transparent); mask-image: linear-gradient(to left, #000 70%, transparent); } .player-plate.active .plate-name { text-shadow: 0 1px 2px #000, 0 0 8px color-mix(in srgb, var(--banner) 75%, #fff); } .plate-name-button { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } /* Presence pip: a small status dot on the banner's OUTER edge, matching each name's alignment — leftmost on the left (you) banner, rightmost on the right (opponent) banner. It is a fixed-width (flex: none) sibling of the flexible .plate-name, so when a name is too long the name shrinks and clips (overflow: hidden) while the pip keeps its width — the pip is never clipped. z-index lifts it above the overhanging scroll endcap it rides over, like the name does. */ .plate-pip { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; /* No margin: the pip sits flush at the outer edge, overlaying the scroll endcap. Spacing from the name is provided by the name's padding instead (see .plate-name padding above), so the pip can ride all the way out. */ position: relative; z-index: 1; background: color-mix(in srgb, #fff 20%, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); } .plate-pip.online { --online: #4ade80; background: var(--online); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 6px color-mix(in srgb, var(--online) 80%, transparent); } /* Scroll endcap: darker shade of the (possibly muted) banner color, sized larger than the bar and pulled off the outer edge so it hides the banner's end and overhangs past the board's alignment (intended). Right side mirrors. */ /* Two-class selector (.player-plate .plate-endcap) so these beat the base `.icon` rule, which is defined later in the file and would otherwise win on source order at equal specificity — clobbering the size and color. */ .player-plate .plate-endcap { position: absolute; top: 50%; width: 1.98rem; /* 50% taller than the 1.32rem banner */ height: 1.98rem; color: color-mix(in srgb, var(--banner-eff) 62%, #000); transform: translateY(-50%); pointer-events: none; } .player-plate.you .plate-endcap { left: -0.9rem; } .player-plate.opponent .plate-endcap { right: -0.9rem; transform: translateY(-50%) scaleX(-1); } /* The turn number rides on top of an oversized shield (~3× a nav icon) used purely as decorative backing, centered over the seam to mask the join. */ .turn-counter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; } .turn-counter .turn-shield { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; /* Deeper, muted gold — the flat --gold read as washed out. */ color: color-mix(in srgb, var(--gold) 80%, #5a3d0e); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); } /* Curvature: a top-lit / bottom-shadowed gradient masked to the shield's own outline (same path as the icon) so the shading reads as a domed surface and never spills onto the banners. The dark lower half also knocks down the yellow intensity. */ .turn-counter::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.5) ); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 16c25 24 100 72 150 72v96c0 96-75 240-150 312-75-72-150-216-150-312V88c50 0 125-48 150-72z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 16c25 24 100 72 150 72v96c0 96-75 240-150 312-75-72-150-216-150-312V88c50 0 125-48 150-72z'/%3E%3C/svg%3E") center / contain no-repeat; } .turn-number { position: relative; z-index: 2; font-weight: bold; font-size: 1.2rem; color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } .board-wrap { position: relative; width: var(--board-width); margin: 0 auto; } /* The turn log is a modal dialog (reuses .dialog); its entries scroll within a bounded card while the title and close button stay put. */ .turn-log { max-height: min(80vh, 44rem); } .turn-log-body { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; min-height: 0; } .turn-log-title { font-weight: bold; color: var(--gold); } .turn-log-empty { color: var(--muted); text-align: center; padding: 2rem 0; } .turn-log-group { border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; margin: 0; } .turn-log-legend { color: var(--muted); font-weight: bold; font-size: 0.85rem; padding: 0 0.35rem; } .turn-log-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .turn-log-entry { line-height: 1.4; font-size: 0.95rem; color: var(--text); } .turn-log-entry.kind-destroyed { color: var(--red); font-weight: bold; } .turn-log-entry.kind-revive { color: var(--green); } .turn-log-entry.kind-deploy { color: var(--muted); } /* The board acting rather than a player: set apart from the turn's own lines. */ .turn-log-entry.kind-spire_pulse, .turn-log-entry.kind-spire_bullrush { color: var(--gold); font-style: italic; } /* End-of-game result overlay. No sheet or blur on the panel itself — it's just a centering frame over the live board. The "Liquid Glass" card floats on top (mirrors .preload-panel and the .hand dish: translucent --tile tint, an inset rim carving depth, and a heavy backdrop blur that frosts the board showing through it, lifted off the scene by an outer drop shadow). */ .winner-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: 6px; z-index: 15; } .winner-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 1.5rem 2rem; border-radius: 1.25rem; background: /* specular catch on the far, lower-right inner wall */ radial-gradient( 130% 120% at 80% 92%, color-mix(in srgb, white 22%, transparent) 0%, transparent 46% ), /* shadowed near, upper-left inner wall */ radial-gradient( 120% 120% at 20% 6%, color-mix(in srgb, black 34%, transparent) 0%, transparent 52% ), /* base translucent glass tint, deepening toward lower-right */ linear-gradient( 135deg, color-mix(in srgb, var(--tile) 22%, transparent) 0%, color-mix(in srgb, var(--tile) 48%, transparent) 100% ); box-shadow: inset 1px 1px 0 color-mix(in srgb, white 30%, transparent), inset 2px 3px 7px rgba(0, 0, 0, 0.4), inset -2px -3px 8px color-mix(in srgb, white 15%, transparent), 0 10px 30px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } .winner-result { font-size: 1.6rem; font-weight: bold; color: var(--gold); letter-spacing: 1px; } .winner-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .rating-swing { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .rating-swing-label { font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .rating-pill { display: inline-flex; align-items: center; font-family: var(--font-title); font-weight: bold; font-size: 0.9rem; padding: 2px 9px; border-radius: 20px; line-height: 1; } .rating-pill.up { color: var(--green); background: rgba(92, 184, 92, 0.14); border: 1px solid rgba(92, 184, 92, 0.5); } .rating-pill.down { color: var(--red); background: rgba(224, 82, 82, 0.14); border: 1px solid rgba(224, 82, 82, 0.5); } .rating-value { font-family: var(--font-title); font-weight: bold; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; } .rating-value.up { color: var(--gold); } .rating-value.down { color: #c9c2d8; } .rating-pop { animation: rating-pop 0.5s ease-out; } @keyframes rating-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } } /* ---- Board geometry + 3/4 metrics --------------------------------------- */ /* The sheet's SECOND :root block, sited next to the board rules it feeds rather than with the palette and type scale at the top. Grepping `:root` finds both. */ :root { /* Portrait board is 5 wide × 9 tall. The vw term keeps it usable in a narrow side-docked window, the vh term keeps the tall board inside the viewport, and the px cap stops a maximized browser from over-scaling. */ --tile-size: min(17vw, 9.5vh, 72px); /* The board's true rendered width: 5 tiles + 4 inner gaps (3px) + 2 borders (3px). The top bar and tray pin to this so all three rows share one edge-to-edge width and center as a single column. */ --board-width: calc(var(--tile-size) * 5 + 18px); /* Board height mirrors --board-width: 9 tiles + 8 inner gaps (3px) + 2 borders (3px). Used to collapse the tilted scene's reserved height. */ --board-height: calc(var(--tile-size) * 9 + 30px); /* 3/4 tilted board. ONE angle drives both the board tilt and the piece/FX counter-rotation, so the diorama retunes from here. */ --board-tilt: 28deg; /* Billboarding, as a composable value. A `.piece` stands upright off the tilted floor by counter-rotating; any transform animation on that piece REPLACES its transform for the animation's whole duration, so the sprite lies flat in the ground plane until the animation ends — silent, and visible in only one of the two view modes. So: every `.piece` keyframe must compose this variable rather than set a bare transform — `transform: var(--piece-billboard) scale(…)`. One keyframe block then serves both views, because the flat value is an identity rotation. (It is `rotateX(0deg)` and not `none` precisely so it composes; `none scale(…)` is invalid and would drop the declaration.) `piece_billboard_guard_test` fails the build on a keyframe that forgets. The tilted subtree overrides it on `.board-scene.view-tilted`. */ --piece-billboard: rotateX(0deg); --board-perspective: 820px; /* The tilted board projects shorter than its flat layout box; this factor collapses the scene's reserved height to the projected height so the freed space closes up toward the top player bar. Calibrated by eye. */ --board-squash: 0.82; /* Height of the 3/4-mode floor-depth riser (the extruded front faces of the near row). The scene reserves this below the board and the board lifts off the bottom by it, so the hand tray flows down to make room. */ --board-riser-h: 24px; /* How far the riser's BOTTOM edge pulls in on each side, tapering the front face into a trapezoid so the near wall reads as receding (deepens the 3D slab). Top stays flush with the board; only the bottom narrows. */ --board-riser-taper: 7px; } .board-scene { width: var(--board-width); margin: 0 auto; } .board { position: relative; display: grid; grid-template-columns: repeat(5, var(--tile-size)); gap: 3px; background: var(--line); border: 3px solid var(--line); border-radius: 6px; margin: 0 auto; width: max-content; } /* Per-map ground texture, painted inside the board beneath the tile grid. It is absolutely positioned so it fills the board's padding box without taking a grid cell: the 3px tile gaps reveal it at full strength while the tiles show it through their (< 100%) --board-tile-alpha. The default --board-texture: none paints nothing, so an untextured board reads exactly as before. As a child of .board it inherits the 3/4 tilt; .view-tilted .tile's translateZ(1px) keeps the tiles above it. */ .board-texture { position: absolute; inset: 0; border-radius: 4px; pointer-events: none; /* --board-texture-size defaults to `cover`; a map can zoom in (e.g. 110%) to crop unwanted shapes at the image edges while staying centred. */ background: var(--board-texture) center / var(--board-texture-size, cover) no-repeat; } .tile { position: relative; aspect-ratio: 1; /* --board-tile-alpha (100% unless the map supplies a board texture) fades the tile FILL only — never the tile's contents, so pieces stay fully opaque — letting the .board-texture beneath read through. */ background: color-mix(in srgb, var(--tile) var(--board-tile-alpha), transparent); /* An opaque grid line drawn back over the 3px gap (which otherwise reveals the .board-texture at full strength). --board-line-alpha fades the map's --line: 0% = invisible (gap shows texture, the untextured/default look), 100% = a solid texture-free line. Outline sits outside the tile box so it fills the gap without insetting the face; it composes with the home-row box-shadow and is overridden by .selected's gold ring. */ outline: 2px solid color-mix(in srgb, var(--board-line, var(--line)) var(--board-line-alpha), transparent); outline-offset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 0; } .tile:nth-child(even) { background: color-mix(in srgb, var(--tile-alt) var(--board-tile-alpha), transparent); } .tile.home-mine { box-shadow: inset 0 -3px 0 var(--muted); } .tile.home-enemy { box-shadow: inset 0 3px 0 var(--muted); } .tile.selected { outline: 3px solid var(--gold); outline-offset: -3px; z-index: 1; } /* A legal-action tile gets a translucent color fill keyed to what the action */ /* does: blue to move, red to attack, green to heal/revive/aid an ally. The */ /* fill is a ::before overlay that sits above the floor tile but below the */ /* floor icons and character sprite, so both stack cleanly on top. The intent */ /* class (target-move/attack/heal) overrides this default green. */ .tile.targeted { z-index: 1; } .tile.targeted::before { content: ""; position: absolute; inset: 0; background: rgba(92, 184, 92, 0.35); pointer-events: none; } .tile.target-move::before { background: rgba(79, 143, 224, 0.35); } .tile.target-attack::before { background: rgba(224, 82, 82, 0.35); } .tile.target-heal::before { background: rgba(92, 184, 92, 0.35); } .tile.targeted:hover { background: #2f4032; } .tile.target-move:hover { background: #23324a; } .tile.target-attack:hover { background: #402f2f; } .tile.target-heal:hover { background: #2f4032; } /* --- Combat effect pulses (board animation layer) ----------------------- */ /* Classes are toggled by the CombatFx JS hook. Colors: damage red, heal */ /* green, shield cyan, revive gold; the actor always flares gold. */ /* Lift an animating tile above its neighbors so its ring/glow and shake are not clipped by the adjacent grid squares painted after it. */ .tile.fx-actor, .tile.fx-damage, .tile.fx-heal, .tile.fx-shield, .tile.fx-revive, .tile.fx-death, .tile.fx-raise { z-index: 2; } .tile.fx-actor { animation: fx-actor 0.5s ease-out; } @keyframes fx-actor { 0% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--gold), 0 0 16px 4px var(--gold-muted); } 100% { box-shadow: 0 0 0 0 transparent; } } /* Attack — sharp flood + ring + shake. */ .tile.fx-damage { animation: fx-damage 0.65s ease-out; } @keyframes fx-damage { 0% { box-shadow: 0 0 0 0 transparent; background: var(--tile); transform: translateX(0); } 15% { background: rgba(224, 82, 82, 0.9); transform: translateX(-3px); } 30% { box-shadow: 0 0 0 4px var(--red), 0 0 18px 6px rgba(224, 82, 82, 0.7); transform: translateX(3px); } 50% { transform: translateX(0); } 100% { box-shadow: 0 0 0 0 transparent; background: var(--tile); } } /* Heal — slow green swell, no shake. */ .tile.fx-heal { animation: fx-heal 1.25s ease-in; } @keyframes fx-heal { 0% { box-shadow: 0 0 0 0 transparent; background: var(--tile); transform: scale(1); } 55% { background: rgba(92, 184, 92, 0.3); box-shadow: inset 0 -14px 16px -6px rgba(92, 184, 92, 0.5), 0 0 10px 2px rgba(92, 184, 92, 0.25); transform: scale(1.02); } 85% { background: rgba(92, 184, 92, 0.85); box-shadow: inset 0 0 22px 5px rgba(92, 184, 92, 0.7), 0 0 24px 9px rgba(92, 184, 92, 0.6); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 transparent; background: var(--tile); transform: scale(1); } } /* Shield — crisp cyan ring snaps in, braces, holds, releases. */ .tile.fx-shield { animation: fx-shield 0.95s ease-out; } @keyframes fx-shield { 0% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } 18% { box-shadow: 0 0 0 3px var(--cyan), 0 0 0 7px rgba(79, 208, 216, 0.35), 0 0 14px 3px rgba(79, 208, 216, 0.4); transform: scale(0.93); } 30% { transform: scale(1); } 70% { box-shadow: 0 0 0 3px var(--cyan), 0 0 0 7px rgba(79, 208, 216, 0.35), 0 0 14px 3px rgba(79, 208, 216, 0.4); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } } /* Revive — very fast bright-gold bloom, long ethereal fade. */ .tile.fx-revive { animation: fx-revive 1.3s cubic-bezier(0.15, 0.7, 0.3, 1); } @keyframes fx-revive { 0% { box-shadow: 0 0 0 0 transparent; background: var(--tile); } 8% { box-shadow: 0 0 0 4px var(--gold), 0 0 30px 12px rgba(224, 180, 82, 0.9); background: rgba(224, 180, 82, 0.75); } 100% { box-shadow: 0 0 0 0 transparent; background: var(--tile); } } /* Death beat — LiveView swaps the unit for its corpse the instant the action applies, so by pulse time the living sprite is already gone. The CombatFx hook bridges that: it clones the corpse into a living-looking stand-in (.fx-dying) shown while the strike lands, hides the real corpse (.fx-hidden) underneath, then at the impact removes the stand-in and reveals the corpse with this collapse-in — so the unit is visibly struck, then dies. */ .piece.fx-dying { pointer-events: none; } .piece.fx-hidden { display: none; } .tile.fx-death .piece.corpse { animation: fx-death 0.55s ease-out; } @keyframes fx-death { 0% { transform: var(--piece-billboard) scale(1.18); opacity: 0.2; filter: brightness(1.7); } 100% { transform: var(--piece-billboard) scale(1); opacity: 1; filter: none; } } /* Revive raise — likewise the restored unit is placed on the board the instant the action applies. Applied at 0ms, this keeps that unit hidden until the gold bloom (the fx-revive beat at ~500ms), then brings it in with the bloom, so the character never pops in ahead of its animation. */ .tile.fx-raise .piece.unit { animation: fx-raise 1.15s ease-out; } @keyframes fx-raise { 0% { opacity: 0; transform: var(--piece-billboard) scale(0.85); } 43% { opacity: 0; transform: var(--piece-billboard) scale(0.85); } 60% { opacity: 1; transform: var(--piece-billboard) scale(1.06); } 100% { opacity: 1; transform: var(--piece-billboard) scale(1); } } /* Teleport dissolve: a cloned piece phases out at the landing tile, then the real piece phases in at the destination. Tinted with the arcane blue used by the teleport tile marker. Reduced-motion is handled in JS (the sequence is skipped entirely), so no @media fallback is needed here. */ @keyframes teleport-out { from { opacity: 1; transform: var(--piece-billboard) scale(1); filter: none; } to { opacity: 0; transform: var(--piece-billboard) scale(1.25); filter: blur(3px) drop-shadow(0 0 10px var(--arcane)); } } @keyframes teleport-in { from { opacity: 0; transform: var(--piece-billboard) scale(0.6); filter: blur(3px) drop-shadow(0 0 10px var(--arcane)); } to { opacity: 1; transform: var(--piece-billboard) scale(1); filter: none; } } .piece.fx-teleport-ghost { pointer-events: none; } .piece.fx-teleport-out { animation: teleport-out 280ms ease-in forwards; } .piece.fx-teleport-in { animation: teleport-in 280ms ease-out forwards; } /* Per-context card colors, keyed by the icon- family class every icon carries: swords stay gold (the default), armor reads silver, health green, attack spells red. The mapping only sets custom properties — a surface changes color only where it opts into --card-color, so UI chrome (nav, the turn counter's shield) keeps its own palette. */ .icon-defense, .icon-abdominal-armor, .icon-heart-armor, .icon-cracked-helm { --card-color: var(--silver); --card-glow: rgba(201, 210, 222, 0.9); } .icon-hp, .icon-vial, .icon-fast-arrow, .icon-boar, .icon-beer-stein { --card-color: var(--green); --card-glow: rgba(92, 184, 92, 0.9); } .icon-assault, .icon-graveyard { --card-color: var(--red); --card-glow: rgba(224, 82, 82, 0.9); } /* Card/stat surfaces that adopt the family color (unmapped icons keep the surface's own color via the currentColor fallback). */ .spell-glyph .icon, .codex-tile-icon .icon, .codex-card-icon .icon, .char-hp-label .icon { color: var(--card-color, currentColor); } /* Flat, screen-aligned combat-FX layer. Sits over the tilted board (not rotated) so spell flashes, oriented attack/heal sprites, and floating numbers face the camera. Children are placed by the CombatFx hook via inline left/top in this layer's local px. */ .board-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; /* far-tile FX may extend past the collapsed board-wrap */ z-index: 3; } /* Spell-cast flash — the cast spell's icon (an SVG created and removed by the CombatFx hook) stamps onto the target cell with a quick "click in", holds while the hits land, then blooms: enlarging and fading away. A targetless spell has no cell, so its -global variant plays the same beat centered over the whole board. */ .spell-fx { position: absolute; left: 50%; top: 50%; width: calc(var(--tile-size) * 0.72); height: calc(var(--tile-size) * 0.72); color: var(--card-color, var(--gold)); filter: drop-shadow(0 0 6px var(--card-glow, rgba(224, 180, 82, 0.85))); pointer-events: none; z-index: 4; opacity: 0; transform: translate(-50%, -50%); animation: spell-fx 1.05s linear forwards; } .spell-fx-global { width: calc(var(--tile-size) * 1.15); height: calc(var(--tile-size) * 1.15); } /* Linear overall so each phase keeps its real-time share (a whole-animation ease-out would squeeze hold+bloom into the first quarter second); the easing that matters happens between keyframes. */ @keyframes spell-fx { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); animation-timing-function: ease-out; } 14% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); animation-timing-function: ease-out; } 24% { transform: translate(-50%, -50%) scale(1); } 48% { opacity: 1; transform: translate(-50%, -50%) scale(1); animation-timing-function: ease-out; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } } /* Ring-FX — a hand-drawn pixel-art shockwave that expands from a tile on the flat overlay (tilt-immune), spawned by the CombatFx hook's `ringFx`. Reusable: the Spire discharge is the first caller (fire ring on the magic pulse, force ring following it at overload), but any spell can call ringFx with the same classes — a caster's Bull Rush / Grave Tide is the obvious backport. Two stacked animations do the work. `ring-grow` scales the tile-sized element up so the sprite SWEEPS across the board (geometric expansion + fade), while `ring-churn` steps across the 9-frame strip via PIXEL offsets so each step lands on a clean frame boundary (percentage + steps() would not) — the source art only animated its internal texture (flames licking / dust spinning), so the outward growth is ours. image-rendering keeps the upscaled pixels crisp. */ /* The ground-plane FX layer, a child of #board. It carries no transform, so it sits in the board's plane: flat top-down by default, and — because #board is preserve-3d in 3/4 mode — lying ON the tilted floor there, foreshortened with the board and depth-sorted BEHIND the standing pieces (the Spire tower draws over it, like every unit's drop shadow does). z-index 1 seats it above the tile floors but below the pieces (z-index 2) for the flat-mode paint order. Rings are positioned in board-local px (see ringFx), not projected screen px. */ .board-ground-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .view-tilted .board-ground-fx { transform-style: preserve-3d; /* keep the rings in the board's 3D space */ /* Sit just above the tiles' own translateZ(1px) so the ring paints ON the floor instead of behind the opaque tiles (where it only leaked through the grout gaps). Still far below the standing pieces — whose bodies rise to ~translateZ(30px) — so the tower and units keep depth-sorting in front. */ transform: translateZ(2px); } .ring-fx { position: absolute; width: var(--tile-size); height: var(--tile-size); /* Centre the tile-sized element on its (left,top) point via negative margins, leaving `transform` free for the scale so the two never fight. */ margin: calc(var(--tile-size) * -0.5) 0 0 calc(var(--tile-size) * -0.5); transform-origin: center; background-repeat: no-repeat; background-size: 900% 100%; /* 9 frames laid out horizontally */ image-rendering: pixelated; pointer-events: none; opacity: 0; } .ring-fx-fire { background-image: url("/images/sprites/fx-fire-ring-3778313c7033fb3d3df467268a0810eb.png?vsn=d"); animation: ring-grow 1.15s linear forwards, ring-churn 1.15s steps(9) forwards; } .ring-fx-force { background-image: url("/images/sprites/fx-force-ring-4f09dfa9be76ead0db4bc463e820a1d7.png?vsn=d"); /* Plays immediately when spawned — the SERVER sequences the beats, pushing the force ring (and the knockback board swap) only after the fire ring's run, so the shove reads as a distinct second action tied to the wave. */ animation: ring-grow 1s linear forwards, ring-churn 1s steps(9) forwards; } @keyframes ring-grow { 0% { opacity: 0; transform: scale(0.5); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(9); } } @keyframes ring-churn { from { background-position-x: 0; } to { background-position-x: calc(var(--tile-size) * -9); } } @media (prefers-reduced-motion: reduce) { .ring-fx { animation: none; display: none; } } /* Area burst: a hand-cast area spell's floor bloom (see app.js burstFx). Unlike the ring — a thin shockwave that scales outward — this fills its whole footprint, so the box is fixed at the spell's size and the ART carries the ignite-bloom-fade over its frames; the wrapper only sweeps the strip and runs the opacity envelope. Lives on the ground-plane layer, so units stand IN the flames. Sheets are 9-frame horizontal strips, stepped like the rings. */ /* The base carries the 3x3-AoE geometry + motion a ground burst uses (Firestorm today): the box spans the footprint and centres on the AoE tile via negative margins (half the box each way), then two stacked animations — the same split the ring uses — play. `burst-grow` erupts it from a point out to the full footprint and fades it (transform + opacity); `burst-churn` sweeps the 9-frame strip (a full box-width per frame) for live motion. A per-spell rule below adds only its sheet. `.burst-fx` never appears without one of those classes (JS always pairs them), so putting the geometry here is safe; a future non-3x3 burst can override width/height/margin. */ .burst-fx { position: absolute; transform-origin: center; width: calc(var(--tile-size) * 3); height: calc(var(--tile-size) * 3); margin: calc(var(--tile-size) * -1.5) 0 0 calc(var(--tile-size) * -1.5); background-repeat: no-repeat; background-size: 900% 100%; /* 9 frames laid out horizontally */ image-rendering: pixelated; pointer-events: none; opacity: 0; animation: burst-grow 1s ease-out forwards, burst-churn 1s steps(9) forwards; } /* Firestorm: a 3x3 fire bloom. */ .burst-fx-firestorm { background-image: url("/images/sprites/fx-firestorm-55951474698931d46a72656818eb76c0.png?vsn=d"); } @keyframes burst-grow { 0% { opacity: 0; transform: scale(0.25); } 20% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } } @keyframes burst-churn { from { background-position-x: 0; } to { background-position-x: calc(var(--tile-size) * -27); } } @media (prefers-reduced-motion: reduce) { .burst-fx { animation: none; display: none; } } /* Upright cast billboard: an area spell's FX that must STAND UP off the board (Grave Tide's tombstones) rather than lie flat on it. Lives on the flat, screen-aligned overlay (see app.js billboardFx), pinned by inline left/top to the AoE tile's projected centre, then translated so the art's ground line sits at that centre with the sprite rising above it (facing the camera like the card-flash icons — no floor tilt to shear it). The ART carries the whole rise-hold-sink arc across its 9 frames; `cast-churn` sweeps the strip (a full box-width per frame) and `cast-fade` runs the opacity envelope. Like the burst, a per-spell rule adds only its sheet. */ .cast-fx { position: absolute; transform: translate(-50%, -66%); width: calc(var(--tile-size) * 3); height: calc(var(--tile-size) * 3); background-repeat: no-repeat; background-size: 900% 100%; /* 9 frames laid out horizontally */ image-rendering: pixelated; pointer-events: none; opacity: 0; animation: cast-churn 1.2s steps(9) forwards, cast-fade 1.2s ease-out forwards; } /* Grave Tide: a field of tombstones erupting from the earth and sinking back — the name made literal, the necrotic counterpart to Firestorm's fire. */ .cast-fx-gravetide { background-image: url("/images/sprites/fx-gravetide-c6763d9bb2f33ee63b318b45a6c85c73.png?vsn=d"); } @keyframes cast-churn { from { background-position-x: 0; } to { background-position-x: calc(var(--tile-size) * -27); } } @keyframes cast-fade { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cast-fx { animation: none; display: none; } } /* Stampede: a board-wide DIRECTIONAL cast FX — an abstract rolling wall of dust that advances across the whole board, blowing the enemy back. Unlike the tile-anchored burst/billboard, this spans the flat overlay's width and travels its full height; the JS sets the band height and the per-cast custom props. --sweep-from/--sweep-to are the start/end translateY (px) and --sweep-flip mirrors the cloud (scaleY) so its billowing edge leads whichever way it goes, together carrying the caster-relative direction; --sweep-ms syncs the CSS run to the JS reap. */ .sweep-fx { position: absolute; left: 0; top: 0; width: 100%; background-repeat: no-repeat; /* A 16-frame animation strip laid horizontally (each frame one band-width). Keep the count in sync with app.js SWEEP_FRAMES + sweep-churn steps(16). */ background-size: 1600% 100%; pointer-events: none; will-change: transform, background-position, opacity; transform: translateY(var(--sweep-from)) scaleY(var(--sweep-flip, 1)); /* Two motions at once: the band TRAVELS across the board (sweep-across) while its frames CHURN (sweep-churn) so the cloud roils as it advances, instead of one static image sliding. */ animation: sweep-across var(--sweep-ms, 1300ms) linear forwards, sweep-churn var(--sweep-churn-ms, 2000ms) steps(16) infinite; } .sweep-fx-stampede { background-image: url("/images/sprites/fx-stampede-e3fb341a30b902d0b4a20671dfb5d676.png?vsn=d"); } @keyframes sweep-across { 0% { transform: translateY(var(--sweep-from)) scaleY(var(--sweep-flip, 1)); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--sweep-to)) scaleY(var(--sweep-flip, 1)); opacity: 0; } } @keyframes sweep-churn { from { background-position-x: 0; } to { background-position-x: var(--sweep-churn-to, 0); } } @media (prefers-reduced-motion: reduce) { .sweep-fx { animation: none; display: none; } } /* Stampede pushback (lagged): the shoved unit is already in its NEW tile, but `shoveSlideFx` sets --shove-dx/-dy to the old->new board-local offset and holds it there (animation-delay + `both`) until the dust wall reaches it, then slides it home. The translate is applied in the board plane and `var(--piece- billboard)` composed AFTER it (identity when flat, the counter-rotation when tilted), so one keyframe serves both views and the unit foreshortens with the floor exactly like its resting sprite (see piece_billboard_guard_test). */ .piece.fx-shoved { animation: shove-slide 320ms ease-out var(--shove-delay, 550ms) both; } @keyframes shove-slide { from { transform: translate(var(--shove-dx, 0), var(--shove-dy, 0)) var(--piece-billboard); } to { transform: translate(0, 0) var(--piece-billboard); } } @media (prefers-reduced-motion: reduce) { .piece.fx-shoved { animation: none; } } /* Lift the cast tile above its neighbors (and their simultaneous hit pulses, z-index 2) so the bloom's overflow isn't clipped under them. */ .tile.fx-spell { z-index: 3; } /* Basic-attack animation: an oriented, abstract sprite for the attack's type x range, layered over the target tile's damage FX. The wrapper carries placement + the attacker->target rotation (set inline per-strike by the CombatFx hook); the inner `.attack-fx-frames` element carries the frame stepping + fade — a 9-frame horizontal sprite sheet stepped by `steps(9)` (see app.js attackFx). */ .attack-fx { --fx-size: calc(var(--tile-size) * 0.8); position: absolute; left: 50%; top: 50%; width: var(--fx-size); height: var(--fx-size); pointer-events: none; z-index: 5; /* transform (translate + rotate) is set inline by the hook. */ } /* Ranged reads a touch smaller than a melee swing (tunable). A themed strip takes the same smaller box: it plays one strip at any distance, so it has no melee/ranged split to size against — `.attack-fx-themed` is what says so. */ .attack-fx-ranged, .attack-fx-themed { --fx-size: calc(var(--tile-size) * 0.64); } /* The visual: a 9-frame horizontal sprite strip. `background-size: auto 100%` scales the strip so each square frame fills the box; `attack-fx-play` steps the strip one frame-width (`--fx-size`) at a time, and `attack-fx-fade` handles the show-hide envelope. */ .attack-fx-frames { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)); animation: attack-fx-play 0.72s steps(9) forwards, attack-fx-fade 0.72s ease forwards; } /* An UNSTYLED attacker's sheet is its damage type x range — the only place the melee/ranged split is real. Everything below is a themed style, which plays one strip at any distance and so hangs off `.attack-fx-themed` instead. (The FX_STYLES key and the PNG both still read `-ranged`: that pair names the art file, not the selector.) */ .attack-fx-physical.attack-fx-melee .attack-fx-frames { background-image: url("/images/sprites/attack-fx-physical-melee-ac54aee4cfa8e4ce6c5bcbab0605e2a5.png?vsn=d"); } .attack-fx-physical.attack-fx-ranged .attack-fx-frames { background-image: url("/images/sprites/attack-fx-physical-ranged-5eebc52d04e3aa0148de4a4b054f9854.png?vsn=d"); } .attack-fx-magic.attack-fx-melee .attack-fx-frames { background-image: url("/images/sprites/attack-fx-magic-melee-2d5ab32e4a5f4ba535e59d844ffaaaef.png?vsn=d"); } .attack-fx-magic.attack-fx-ranged .attack-fx-frames { background-image: url("/images/sprites/attack-fx-magic-ranged-406a8726267cc919ae647f9f8ac3d220.png?vsn=d"); } /* Brother Fulmen's lightning style: a themed primary bolt, plus the connecting arc the chain rider draws between struck enemies (see app.js chainFx). Both are 576x64 nine-frame strips like the other attack-fx art. */ .attack-fx-lightning.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-lightning-ranged-064865cc762926b6184eefdf0ae878c8.png?vsn=d"); } .attack-fx-lightning.attack-fx-arc .attack-fx-frames { background-image: url("/images/sprites/attack-fx-lightning-arc-aca07761f03e8dd765811cc2f9699722.png?vsn=d"); } /* Magnus the Necromancer's necrotic style: a themed primary bolt of violet-green void magic, withering to ash on impact. Single-target (no chain rider), so no arc strip — just the 576x64 nine-frame primary, like the other attack-fx art. */ .attack-fx-necrotic.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-necrotic-ranged-624481c1c9a04e8575970430a3e08907.png?vsn=d"); } /* Mogra the Witch's witchfire style: a themed primary bolt of bilious green-sulfur plague-flame, splattering to corrosive cinders on impact. Single-target basic attack (her corpse-explosion is a separate ability), so just the 576x64 nine-frame primary, like the other attack-fx art. */ .attack-fx-witchfire.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-witchfire-ranged-d8e9114f63bed653b353483bb89c6916.png?vsn=d"); } /* Zug's crossbow style: not energy but a solid projectile — a heavy iron quarrel that streaks point-first at the target and bites in with a red blood-splatter on impact. The first non-magic caster style; same 576x64 nine-frame strip. */ .attack-fx-bolt.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-bolt-ranged-600c7d319dd36b49b9db290a847626d5.png?vsn=d"); } /* Cassian's arrow style: a blessed longbow arrow that streaks point-first at the target and bursts in a radiant golden light-flash (not blood — the Crusader's righteous counterpart to Zug's brutal bolt). Traveling projectile like bolt; same 5-flight + 4-impact strip layout. */ .attack-fx-arrow.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-arrow-ranged-6a65e5b86ec53905903587dfcf61c833.png?vsn=d"); } /* Pandora's barb style: a barbed vampiric arrow that streaks point-first at the target and bites in a crimson blood-splatter — then her tether reels the impaled target one tile toward her (see app.js pullFx). Traveling projectile like bolt/arrow; same 5-flight + 4-impact strip layout. */ .attack-fx-barb.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-barb-ranged-145597bd952bae2cf1733884fb836a8d.png?vsn=d"); } /* Gunner's iron slug and Grenadier's lobbed bomb — both traveling projectiles like bolt/arrow, same 5-flight + 4-impact strip layout. Slug bursts in a grey dust-and-spark puff; grenade in a fiery explosion. */ .attack-fx-slug.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-slug-ranged-2d3be60b0536aebd539244381f0a6167.png?vsn=d"); } .attack-fx-grenade.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-grenade-ranged-61f09082e5a9d1eeb94bbf87cd2f870c.png?vsn=d"); } /* Bastion's cleave — a steel slash arc that sweeps through the target. A melee style, so it plays in place at the strike (not a traveling projectile). Runs faster than the shared 0.72s attack strip so the blade snaps through rather than drifting; only the duration is overridden (name/timing/fill inherit). */ .attack-fx-cleave.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-cleave-ranged-b3e14f55e086d806c80aeafb4028783a.png?vsn=d"); animation-duration: 0.42s; } /* Silas's shadowblade — a vertical slash stands, a horizontal crosses it, then the cross morphs into a gold crucifix that glows and vanishes. Melee style (plays in place, target-biased). A hair slower than the cleave so the three beats read. */ .attack-fx-shadowblade.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-shadowblade-ranged-2910a760028cb7ddef078398c455dc7a.png?vsn=d"); animation-duration: 0.52s; } /* Vlad's bloodarc — a wet crimson slash arc sweeps through the target (grows head-first, holds, then fades and spreads), a gorier cousin of Bastion's steel cleave. Melee style (plays in place, target-biased). Snappy, like the cleave, so the slash lands hard. */ .attack-fx-bloodarc.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-bloodarc-ranged-8dc83db05c6aaa1cc775246649c59b26.png?vsn=d"); animation-duration: 0.46s; } /* Claudia's clawrake — three glowing crimson blood-magic claw gashes rake across the target (drawn head-first, brief hold, then fade + spread). Melee style (plays in place, target-biased). Fast, like an assassin's swipe. */ .attack-fx-clawrake.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-clawrake-ranged-2e2e5690d70fbfbbd3da56b46b9d3486.png?vsn=d"); animation-duration: 0.42s; } /* Grokk's maul — a brutal execute smash: a bright core bursts into a radial spray of blood and bone shards, then fades and spreads. Melee style (plays in place, target-biased), direction-agnostic. A hair slower/heavier so the blow lands like a killing hit. */ .attack-fx-maul.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-maul-ranged-99e8577c56e4efd07c490cda54c433c3.png?vsn=d"); animation-duration: 0.5s; } /* Ugthar's axe — a heavy orc axe chop: the axe head swings down through the target trailing a steel slash-arc, a white impact flash on contact, then follow-through fade. Melee style (plays in place, target-biased). */ .attack-fx-axe.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-axe-ranged-1e08bd9c08528c83582fb734501a8562.png?vsn=d"); animation-duration: 0.36s; } /* The Annihilator's arcane detonation — a purple blast erupts on the target (seated there even at range via DETONATE_FX) and, through the splash rider, on each neighbour caught in the blast: a room-clearing bomb. Direction- agnostic; a beefy detonation so it lands with weight. */ /* The lava wave / dust splash read bigger than a bolt — they're a ground eruption that should fill the struck cell, so they override the smaller themed box. (Same specificity as .attack-fx-themed but later in source, so this wins.) */ .attack-fx-annihilate, .attack-fx-rubble { --fx-size: calc(var(--tile-size) * 0.85); } .attack-fx-annihilate.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-annihilate-ranged-5f74c2656994489850cd347d6ec63cdb.png?vsn=d"); animation-duration: 0.5s; } /* The Annihilator's splash — a rolling cloud of dust and rubble (no lava) flows out from the impact corner on each neighbour caught in the blast, distinct from his own lava-wave strike. Same flow + timing as the wave. */ .attack-fx-rubble.attack-fx-themed .attack-fx-frames { background-image: url("/images/sprites/attack-fx-rubble-ranged-d5086aa96464fc5988016bb433ea2eb4.png?vsn=d"); animation-duration: 0.5s; } /* Pandora's reel-in (app.js pullFx), on the flat #board-fx overlay. The tether is a thin crimson cord from the shooter to the impaled target; JS anchors it at the shooter (transform-origin left-centre) and scales it down as the target is dragged in. The ghost is a clone of the target's 48px sprite sliding one tile toward her while the real piece is hidden. */ .pull-tether { position: absolute; height: 3px; border-radius: 2px; transform-origin: 0 50%; pointer-events: none; z-index: 3; } .pull-tether-barb { background: linear-gradient(90deg, rgba(110, 6, 18, 0.15), rgba(190, 22, 42, 0.95)); box-shadow: 0 0 4px rgba(200, 30, 50, 0.6); } .pull-yank-ghost { position: absolute; pointer-events: none; z-index: 4; } /* Heal-action animation: an oriented sprite fired from the healer toward the healed cell — green motes for a heal, a golden beam for a resurrection — layered over the tile's existing heal/revive pulse. Same oriented-sprite mechanism as .attack-fx (see app.js spawnOrientedFx); reuses the shared attack-fx-play / attack-fx-fade keyframes. Single size (no melee/ranged split). Only plays for a character :heal action, not a cast spell. */ .heal-fx { --fx-size: calc(var(--tile-size) * 0.8); position: absolute; left: 50%; top: 50%; width: var(--fx-size); height: var(--fx-size); pointer-events: none; z-index: 5; /* transform (translate + rotate) is set inline by the hook. */ } .heal-fx-frames { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)); animation: attack-fx-play 0.72s steps(9) forwards, attack-fx-fade 0.72s ease forwards; } .heal-fx-heal .heal-fx-frames { background-image: url("/images/sprites/heal-fx-motes-55f7447d0c0e94ee43d204f2d7d9156c.png?vsn=d"); } .heal-fx-revive .heal-fx-frames { background-image: url("/images/sprites/heal-fx-revive-f3146bbdea8d497de3512d12c16bf1ec.png?vsn=d"); } /* Mercy's holy mending: a radiant gold-white burst / light-lance, replacing the generic green motes and plain golden beam for the Crusader cleric. */ .heal-fx-holy-heal .heal-fx-frames { background-image: url("/images/sprites/heal-fx-holy-heal-9e13439337c9233f1bbedf34fe6439e3.png?vsn=d"); } .heal-fx-holy-revive .heal-fx-frames { background-image: url("/images/sprites/heal-fx-holy-revive-67188e9cc301f1852bb0f14522daaf44.png?vsn=d"); } /* Maharet's sanguine mending: a crimson blood bloom / blood-geyser lance, for the Vampire cleric who heals through the bloodline. */ .heal-fx-sanguine-heal .heal-fx-frames { background-image: url("/images/sprites/heal-fx-sanguine-heal-591bcea045f31ab66cdde73aadafcef2.png?vsn=d"); } .heal-fx-sanguine-revive .heal-fx-frames { background-image: url("/images/sprites/heal-fx-sanguine-revive-5743476cd97cca56f5dbbb3a635e4e3a.png?vsn=d"); } /* Bogrot's spirit mending: a green ancestral spirit that streaks to the ally / an emerald spirit-burst revive, for the Orc shaman. */ .heal-fx-spirit-heal .heal-fx-frames { background-image: url("/images/sprites/heal-fx-spirit-heal-3b264fe313d0234078165f223128bbbf.png?vsn=d"); } .heal-fx-spirit-revive .heal-fx-frames { background-image: url("/images/sprites/heal-fx-spirit-revive-d6dd0abd98aefc9087e5ce6378945888.png?vsn=d"); } /* Thane's forge mending: molten runes and forge-embers knit the wound / a struck-anvil burst of forge-light raises the fallen, for the Dwarf healer-fighter — a smith's rite, not a caster's. */ .heal-fx-forge-heal .heal-fx-frames { background-image: url("/images/sprites/heal-fx-forge-heal-e55713d71339f6dfb5892201b5435b07.png?vsn=d"); } .heal-fx-forge-revive .heal-fx-frames { background-image: url("/images/sprites/heal-fx-forge-revive-9d7e68e527465b42fcfb913cd017ca97.png?vsn=d"); } @keyframes attack-fx-play { from { background-position: 0 0; } to { background-position: calc(var(--fx-size) * -9) 0; } } @keyframes attack-fx-fade { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } /* Traveling-projectile archer FX (see app.js projectileFx). The strip is split: frames 0-4 are the flight loop, frames 5-8 the impact. The wrapper's cross-gap travel is driven by the Web Animations API in JS (the distance is dynamic); these keyframes only step the sprite sheet within each phase. Durations are set inline from the JS PROJECTILE_FX table so the two never drift. */ @keyframes attack-fx-flight { from { background-position: 0 0; } to { background-position: calc(var(--fx-size) * -5) 0; } } @keyframes attack-fx-impact { from { background-position: calc(var(--fx-size) * -5) 0; } to { background-position: calc(var(--fx-size) * -9) 0; } } /* Flight fades in fast (no hard pop at the shooter); impact starts solid (the bolt has already arrived) and fades out as the splatter settles. */ @keyframes attack-fx-flight-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } } @keyframes attack-fx-impact-fade { 0% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } } /* Floating combat number — the HP a hit applied, spawned over the struck cell by the CombatFx hook and removed once it has risen and faded. Damage red, heal green (the same intent palette as the attack/heal outlines). */ .fx-number { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-weight: 700; font-size: calc(var(--tile-size) * 0.34); line-height: 1; pointer-events: none; z-index: 5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.7); opacity: 0; animation: fx-number-rise 1s ease-out forwards; } .fx-number-damage { color: var(--red); } .fx-number-heal { color: var(--green); } @keyframes fx-number-rise { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -120%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } } /* Reduced motion: keep the color meaning, drop the movement. */ @media (prefers-reduced-motion: reduce) { .tile.fx-actor { animation: fx-tint-gold 0.6s ease; } .tile.fx-damage { animation: fx-tint-red 0.6s ease; } .tile.fx-heal { animation: fx-tint-green 0.6s ease; } .tile.fx-shield { animation: fx-tint-cyan 0.6s ease; } .tile.fx-revive { animation: fx-tint-gold 0.6s ease; } .tile.fx-death .piece.corpse { animation: none; } .tile.fx-raise .piece.unit { animation: none; } .spell-fx { animation: spell-fx-still 0.9s ease forwards; } .fx-number { animation: fx-number-still 1s ease forwards; } .hp-fill { transition: none; } /* Hold one representative frame (index 1, the full effect) and fade it in place — no frame-stepping, no scale. */ .attack-fx-frames, .heal-fx-frames { background-position: calc(var(--fx-size) * -1) 0; animation: attack-fx-still 0.6s ease-out forwards; } @keyframes attack-fx-still { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } } } /* Reduced-motion spell flash: the icon fades in place, no stamp or bloom. */ @keyframes spell-fx-still { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } } /* Reduced-motion floating number: fades in place, no upward drift. */ @keyframes fx-number-still { 0%, 100% { opacity: 0; transform: translate(-50%, -50%); } 20%, 70% { opacity: 1; transform: translate(-50%, -50%); } } @keyframes fx-tint-red { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--red); } } @keyframes fx-tint-green { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--green); } } @keyframes fx-tint-cyan { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--cyan); } } @keyframes fx-tint-gold { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--gold); } } .control { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; pointer-events: none; } /* Sized as a fraction of the tile so the modifier scales with the board at every breakpoint (and the fixed-size codex preview) — roughly double the glyph's previous 22px-on-a-72px-tile footprint. */ .control .icon { width: 60%; height: 60%; } .control-power .icon { color: var(--icon-power); } .control-defense .icon { color: var(--icon-defense); } .control-assault .icon { color: var(--icon-attack); } /* Spire flank tiles: the army-wide power (red) and fortify (blue) boosts, tinted to match the tower's sockets so the tile reads as the bonus it grants. */ .control-spire_attack .icon { color: var(--icon-attack); } .control-spire_defense .icon { color: color-mix(in srgb, var(--blue) 65%, var(--tile)); } .deploy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--icon-spawn); opacity: 0.7; pointer-events: none; } .deploy .icon { width: 55%; height: 55%; } .teleport { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--icon-teleport); opacity: 0.7; pointer-events: none; } .teleport .icon { width: 60%; height: 60%; } /* Engraved relief: shadow toward the top-right, highlight toward the bottom-left, so each glyph reads as carved into the tile. */ .control .icon, .deploy .icon { filter: drop-shadow(0.5px -0.5px 0 rgba(0, 0, 0, 0.55)) drop-shadow(-0.5px 0.5px 0 rgba(255, 255, 255, 0.3)); } .deploy-up { transform: rotate(-90deg); } .deploy-down { transform: rotate(90deg); } .piece { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 2; width: 80%; } /* Persistent "shielded" overlay: a translucent crystalline orb for any unit or crystal that holds a :shield absorb pool. It sits BEHIND its target — a ward the character stands in front of — via z-index:-1 inside the piece's own stacking context (still above the tile floor). `.piece` is centred both axes in the square tile, so its centre is the cell centre; anchoring the orb there with the translate keeps it cell-centred, and it billboards with the piece in the tilted view. Sized to within a couple of pixels of the whole cell. Tune the opacity below to taste. */ .piece-shield { position: absolute; z-index: -1; top: 50%; left: 50%; width: calc(var(--tile-size) - 4px); height: calc(var(--tile-size) - 4px); transform: translate(-50%, -50%); background: url("/images/sprites/shield-orb-e8feb9dc0b09221969fac6b1a1a54ef0.png?vsn=d") center / contain no-repeat; image-rendering: pixelated; opacity: 0.29; /* reduced-motion fallback; the pulse below drives it otherwise */ pointer-events: none; animation: shield-pulse 2.4s ease-in-out infinite; } @keyframes shield-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.38; } } @media (prefers-reduced-motion: reduce) { .piece-shield { animation: none; } } /* Army-wide Spire boost aura: when a side holds a flank tile every one of its units is empowered, not just the tower — so each affected unit's sprite gets a soft coloured glow (red = attack power, blue = fortify). A `drop-shadow` filter, not a transform, so it stays correct on billboarded 3/4 pieces; a slow pulse reads it as a live buff rather than a static outline. */ .piece.unit.aura-attack .sprite { filter: drop-shadow(0 0 2px var(--red)) drop-shadow(0 0 4px var(--red)); animation: unit-aura 1.6s ease-in-out infinite; } .piece.unit.aura-defense .sprite { filter: drop-shadow(0 0 2px var(--blue)) drop-shadow(0 0 4px var(--blue)); animation: unit-aura 1.6s ease-in-out infinite; } .piece.unit.aura-attack.aura-defense .sprite { filter: drop-shadow(0 0 3px var(--red)) drop-shadow(0 0 3px var(--blue)); animation: unit-aura 1.6s ease-in-out infinite; } @keyframes unit-aura { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .piece.unit.aura-attack .sprite, .piece.unit.aura-defense .sprite, .piece.unit.aura-attack.aura-defense .sprite { animation: none; } } /* ---- 3/4 tilted board view --------------------------------------------- */ /* Opt-in via #board-scene.view-tilted, toggled by the Settings "3/4 view" control and persisted per game in localStorage (see app.js window.BoardView). The default board is flat top-down; everything below only applies when the scene carries view-tilted. */ .board-scene.view-tilted { position: relative; /* Reserve the projected height plus the riser strip below the near edge; the tilted board is bottom-anchored and its receding top spills upward as visible overflow into freed headroom. The +riser term flows the hand down. */ height: calc(var(--board-height) * var(--board-squash) + var(--board-riser-h)); perspective: var(--board-perspective); /* Break the tilted scene out to the full viewport width (at every breakpoint) so its clip-path clips at the screen edge, not the narrower board column, then scale the board up so it (nearly) fills that width. Small-responsive and desktop now share ONE size/position — the values below were tuned on a phone but the board inside is a fixed pixel size (capped tile-size), so it stays viewport-centered and simply reads bigger on desktop too. The extra size also lifts the receding top back up toward where the flat board sits. */ width: 100vw; margin-left: calc(50% - 50vw); /* X fills the width WITHOUT crossing the screen edge (the clip cuts flush at 100vw, so a board scaled past it loses its outermost band — exactly where the edge column's selection/target highlight lives). Y lifts the top back up toward the flat position but shy of the player bars. Tune independently. */ --board-tilt-fill-x: 1.1; --board-tilt-fill-y: 1.12; /* Stand pieces upright off this scene's tilted floor. See the variable's definition in :root for why every .piece keyframe has to compose it. */ --piece-billboard: rotateX(calc(-1 * var(--board-tilt))); /* Clips the fill-scaled near edge out the bottom (and the widened corners out the sides, now that the board scales to the screen edge) while leaving the top open so far-piece heads are never cropped. Negative top inset = do not clip above. */ clip-path: inset(-9999px 0 0 0); } .view-tilted .board { position: absolute; /* out of flow so the scene's height reclaims space */ bottom: var(--board-riser-h); /* lift off the bottom to seat the depth riser */ left: 50%; transform-style: preserve-3d; /* --board-tilt-fill-x / -y (default 1 = unchanged) scale the flat board about its bottom-center BEFORE the tilt. The near/bottom edge is fixed, so X>1 widens the board (its bottom corners spill toward the screen edge) while Y>1 lifts the receding top independently. Phones raise both (see the 480px block): X to fill the width, Y to buy back the headroom the tilt's squash costs at the top. Split so width and top height tune separately. */ transform: translateX(-50%) rotateX(var(--board-tilt)) scale(var(--board-tilt-fill-x, 1), var(--board-tilt-fill-y, 1)); transform-origin: center bottom; /* near edge fixed, far edge recedes/narrows */ } .view-tilted .tile { transform-style: preserve-3d; /* so pieces can counter-rotate in 3D */ /* Lift each tile a hair toward the viewer so it sits above the board's coplanar background plane; without this the board surface composites over an empty tile's center and swallows deploy/move clicks. */ transform: translateZ(1px); } .view-tilted .piece { /* Resting billboard. Animated pieces compose the same value themselves. */ transform: var(--piece-billboard); transform-origin: center bottom; } .view-tilted .tile.has-piece::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 68%; height: 30%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%); pointer-events: none; z-index: 1; } /* Floor-depth riser — the near row's tiles extruded toward the viewer so the board reads as a slab with thickness. Flat mode hides it. */ .board-riser { display: none; } /* A 5-column grid mirroring the board (same track sizes, gap, grout color, and frame) so each face lines up under its tile. Hinged at the board's near edge (top) and counter-rotated by the tilt so it stands upright as a front wall instead of lying in the floor plane. left/right:-3px reach outside the board's border so the riser frame aligns with the board frame. The frame + grout are painted by a gradient background showing through the 3px padding and gaps (rather than a solid border, which can't fade): it runs from the board's grout color at the top to a deep shadow at the bottom, so the in-between seams darken downward and the bottom edge is darkest. */ .view-tilted .board-riser { display: grid; grid-template-columns: repeat(5, var(--tile-size)); gap: 3px; position: absolute; left: -3px; right: -3px; top: 100%; height: var(--board-riser-h); padding: 0 3px 3px; background: linear-gradient( to bottom, var(--line) 0%, color-mix(in srgb, var(--line) 32%, #000) 100% ); border-radius: 0 0 6px 6px; /* Trapezoid taper: bottom two corners pull in by --board-riser-taper while the top stays flush with the board edge, so the front wall appears to recede. */ clip-path: polygon( 0 0, 100% 0, calc(100% - var(--board-riser-taper)) 100%, var(--board-riser-taper) 100% ); transform-origin: center top; transform: rotateX(calc(-1 * var(--board-tilt))); } /* Each face is a shade of its tile darkened into shadow, deepening toward the lower-right — the light comes from the upper left, so this front wall falls away from it. */ .board-riser-face { background: linear-gradient( to bottom right, color-mix(in srgb, var(--tile) 52%, #000) 0%, color-mix(in srgb, var(--tile) 26%, #000) 100% ); } .sprite { width: 48px; height: 48px; display: inline-block; background-repeat: no-repeat; background-position-x: center; /* Hero portraits are 128×1024 vertical 8-direction strips: size the image so one 128px cell fills the square container, and default to the South (front-facing) cell — the pose hand cards, the codex, and dev pages want. Board units override background-position-y per `.face-` below; single-frame sprites (crystals, rubble, gravestones) opt back out. */ background-size: 100% 800%; background-position-y: 0; image-rendering: pixelated; } .tile .sprite { width: calc(var(--tile-size) * 0.78); height: calc(var(--tile-size) * 0.78); } /* Every roster hero now ships as a high-res 128px strip (smooth cel-shaded art, not pixel art), so they downscale smoothly rather than nearest-neighbor. The base `.sprite` rule above still defaults to `image-rendering: pixelated`, which now applies only to the single-frame board art (crystals, rubble, gravestones). Same 100% 800% strip / face- machinery — only the filter differs. */ .sprite-bastion, .sprite-cassian, .sprite-fulmen, .sprite-mercy, .sprite-silas, .sprite-vlad, .sprite-pandora, .sprite-magnus, .sprite-maharet, .sprite-claudia, .sprite-grokk, .sprite-zug, .sprite-mogra, .sprite-bogrot, .sprite-ugthar, .sprite-thane, .sprite-gunner, .sprite-grenadier, .sprite-engineer, .sprite-annihilator { image-rendering: auto; } /* Single-frame sprites are NOT strips — fit the whole image as before. */ .sprite-crystal, .sprite-crystal-dmg1, .sprite-crystal-dmg2, .sprite-crystal-dmg3, .sprite-crystal-rubble, .piece.corpse .sprite { background-size: contain; background-position: center; } /* 8-direction facing: pick the strip cell for a board unit's screen-facing. Strip order is CCW from South (matches Rules.Facing.all/0 and the art built by bin/build_dir_strips.py): s0 se1 e2 ne3 n4 nw5 w6 sw7. Cell i sits at background-position-y i/7 · 100% (8 cells → 7 gaps). `face-` is the per-viewer screen compass (BoardLayout.screen_facing/2), so no extra mirroring is needed here. */ .sprite.face-s { background-position-y: 0; } .sprite.face-se { background-position-y: calc(100% * 1 / 7); } .sprite.face-e { background-position-y: calc(100% * 2 / 7); } .sprite.face-ne { background-position-y: calc(100% * 3 / 7); } .sprite.face-n { background-position-y: calc(100% * 4 / 7); } .sprite.face-nw { background-position-y: calc(100% * 5 / 7); } .sprite.face-w { background-position-y: calc(100% * 6 / 7); } .sprite.face-sw { background-position-y: calc(100% * 7 / 7); } /* Flat view only: characters always face forward — collapse the 8 directions to SW / S / SE so a unit never shows its back. Tilted 3/4 view keeps full facing (it adds .view-tilted, which drops these overrides). S/SE/SW already resolve to the right cells above, so only N, E/NE, and W/NW need redirecting. Option A: lean by horizontal component — S,N→S; SE,E,NE→SE; SW,W,NW→SW. */ .board-scene:not(.view-tilted) .sprite.face-n { background-position-y: 0; } .board-scene:not(.view-tilted) .sprite.face-e, .board-scene:not(.view-tilted) .sprite.face-ne { background-position-y: calc(100% * 1 / 7); } .board-scene:not(.view-tilted) .sprite.face-w, .board-scene:not(.view-tilted) .sprite.face-nw { background-position-y: calc(100% * 7 / 7); } .side-red .sprite-crystal { background-image: url("/images/sprites/crystal_red-caad48913f9dbdcf9372890df6f12058.png?vsn=d"); } .side-blue .sprite-crystal { background-image: url("/images/sprites/crystal_blue-0c6fa962f9b63d251122df4ac9a2a2e1.png?vsn=d"); } /* Crystal damage tiers by remaining health: dmg1 ≥50%, dmg2 ≥25%, dmg3 <25%, rubble at 0% (the crystal is destroyed and the tile becomes walkable). */ .side-red .sprite-crystal-dmg1 { background-image: url("/images/sprites/crystal_dmg1_red-c18ca86c86d8669ea94e063459c7766b.png?vsn=d"); } .side-blue .sprite-crystal-dmg1 { background-image: url("/images/sprites/crystal_dmg1_blue-35e97184cc07e0f422edeb763009acf2.png?vsn=d"); } .side-red .sprite-crystal-dmg2 { background-image: url("/images/sprites/crystal_dmg2_red-c95bc04eccb57371f5946ec1a3e4933c.png?vsn=d"); } .side-blue .sprite-crystal-dmg2 { background-image: url("/images/sprites/crystal_dmg2_blue-c48ea363151675cab2538814ac53ad2c.png?vsn=d"); } .side-red .sprite-crystal-dmg3 { background-image: url("/images/sprites/crystal_dmg3_red-3a9999afde6a458a64bf44d2d436894d.png?vsn=d"); } .side-blue .sprite-crystal-dmg3 { background-image: url("/images/sprites/crystal_dmg3_blue-1a4968c7a5ebb87c7220dd0d2f88dd83.png?vsn=d"); } .side-red .sprite-crystal-rubble { background-image: url("/images/sprites/crystal_rubble_red-71f08f463f655bc38fd4220b64578e89.png?vsn=d"); } .side-blue .sprite-crystal-rubble { background-image: url("/images/sprites/crystal_rubble_blue-60143add43fa386c06abf337c4106b4e.png?vsn=d"); } /* Death marker: a corpse renders as a team-tinted gravestone instead of the living hero tipped sideways. Keyed on `.piece.corpse` (specificity 0,4,0 beats each `.sprite-.side-*` at 0,2,0) so the CombatFx death-beat stand-in — a clone with the `corpse` class stripped — still shows the living hero while the strike lands, then collapses into the gravestone via `fx-death`. The inspector uses `.char-portrait.dead` (a different selector) and keeps its dimmed hero. */ .piece.corpse .sprite.side-blue { background-image: url("/images/sprites/gravestone_blue-07db403e6b8646e4da2e9ed667f2757b.png?vsn=d"); } .piece.corpse .sprite.side-red { background-image: url("/images/sprites/gravestone_red-2f40572dca52ee90ebbab5185f003c9e.png?vsn=d"); } .hp-bar { position: relative; /* keep the bar (and later-in-DOM badges) above .piece-shield */ width: 100%; height: 5px; margin-top: 3px; background: rgba(0, 0, 0, 0.6); border-radius: 2px; overflow: hidden; } /* Ease the fill toward its new width, delayed so the drop/rise lands with the combat pulse's impact beat (~500ms) rather than snapping the instant the authoritative state applies. */ .hp-fill { display: block; height: 100%; background: var(--green); transition: width 0.45s ease-out 0.5s; } /* Color health bars by team so they match the crystal colors. */ .side-red .hp-fill { background: var(--red); } .side-blue .hp-fill { background: var(--blue); } /* Equipped-item icon row: anchored to the tile's top-right corner (`.piece` is already position: relative) so it never competes with the HP bar below the sprite. Same markup for both sides' pieces. */ .equip-badges { position: absolute; top: 0; right: 0; display: flex; gap: 1px; } .equip-badges .icon { width: 11px; height: 11px; color: var(--card-color, var(--gold)); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); } /* Status badges — transient buffs (Scroll's surge, War Feast's empower) mirror the equip badges on the opposite corner, so a queued power spike is public board information just like carried gear. */ .status-badges { position: absolute; top: 0; left: 0; display: flex; gap: 1px; } .status-badges .icon { width: 11px; height: 11px; color: var(--card-color, var(--gold)); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); } /* ---------- Tray: one pill ---------- */ /* The whole control surface is a single glass "pill": an AP pie end-cap, the hand cards, and an action end-cap. --h is the pill height; the caps are true semicircles of width --h/2 so they align with the pill's rounded ends and the pie wedges stay round. */ .tray { /* 0.6rem wider than the board on each side, so the pill's end caps overhang the board edges (like the header's scroll endcaps — see .plate-endcap). The extra width also lets the hand cards breathe. The −0.6rem side margins cancel that added width in the flow box, so the parent `.game` (max-width: max-content) stays board-width and the bar straddles the board symmetrically instead of spilling only rightward. */ /* The turn-button (right .act-cap) is a bullet nose wider than a plain --h/2 semicircle; --act-cap-extra is the amount it grows beyond that old 30px. We add it to the pill width so the nose gets its own room instead of stealing from the hand cards. The negative side margins stay symmetric (half the extra each side) so the whole bar stays centred under the board — see the base comment above. */ --act-cap-extra: 11.2px; width: calc(var(--board-width) + 1.2rem + var(--act-cap-extra)); margin: 0.5rem calc(-0.6rem - var(--act-cap-extra) / 2) 0; /* The HandInspect hook long-presses cards to inspect them; mirror .board-wrap so iOS neither selects the glyph/label text nor pops its callout menu. The tray doesn't scroll, so suppressing the callout is safe. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .hand { --h: 60px; /* Right turn-button cap: the old --h/2 (30px) semicircle plus the extra that stretches its 999px curve into an elongated bullet nose. --act-cap-extra is inherited from .tray. */ --act-cap-w: calc(var(--h) / 2 + var(--act-cap-extra)); display: flex; align-items: stretch; height: var(--h); width: 100%; max-width: calc(var(--board-width) + 1.2rem + var(--act-cap-extra)); margin: 0 auto; border-radius: 999px; /* Concave glass dish, lit from the upper-left. A bowl carved into the surface shades opposite to a bump: the near (upper-left) inner wall faces away from the light so it falls into shadow, while the far (lower-right) inner wall faces the light and catches a bright specular. Kept translucent so the frosted backdrop reads through as glass body. No `border`: the AP pie forms the pill's rounded left end, and with global box-sizing:border-box a 1px border shrinks the pie's inscribed circle 1px smaller than the pill's end — so its rounded top peeks out above the pie and reads as a clip. The rim is drawn with inset shadows instead, which paint below the pie and never clip it. */ background: /* specular catch on the far, lower-right inner wall (paints on top) */ radial-gradient( 130% 120% at 80% 92%, color-mix(in srgb, white 26%, transparent) 0%, transparent 46% ), /* shadowed near, upper-left inner wall */ radial-gradient( 120% 120% at 20% 6%, color-mix(in srgb, black 32%, transparent) 0%, transparent 52% ), /* base translucent glass tint, deepening toward lower-right */ linear-gradient( 135deg, color-mix(in srgb, var(--tile) 16%, transparent) 0%, color-mix(in srgb, var(--tile) 42%, transparent) 100% ); /* inset shadows carve the depth and stand in for the rim: a 1px highlight on the lit upper-left lip, the interior dropping into shadow beneath it, and the far lower-right wall glowing where the light lands */ box-shadow: inset 1px 1px 0 color-mix(in srgb, white 30%, transparent), inset 2px 3px 7px rgba(0, 0, 0, 0.4), inset -2px -3px 8px color-mix(in srgb, white 15%, transparent); /* "Liquid Glass": heavily frost whatever backdrop shows through the dish so the sprites read against a fuzzed field. -webkit- for the iOS PWA. */ -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } /* --- AP pie end-cap (left) --- */ .ap-cap { position: relative; flex: 0 0 auto; width: calc(var(--h) / 2); height: 100%; padding: 0; border: none; background: none; } .ap-cap .ap-pie { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Wedge fills live here, not in a `fill="var(--…)"` presentation attribute: var() in a presentation attribute doesn't repaint until a style recalc, so the wedges rendered dark until the first LiveView DOM patch. The stroke is the bg colour, acting as the slice dividers; the slices' rounded inner tips come from the path geometry (see ap_wedge_path/1). */ .ap-pie .ap-wedge { stroke: var(--bg); stroke-width: 3; stroke-linejoin: round; } .ap-pie .remaining { fill: var(--gold); } .ap-pie .spent { fill: var(--gold-dim); } .ap-cap.dim { opacity: 0.4; } /* On the opponent's turn the right cap becomes the panel-2 ".next" button, so in the live hand recolour the passive AP pie into that same panel-2 family (in place of gold) and drop the .dim opacity, so both end caps read at matching strength. Scoped under .hand so the codex's passive .ap-cap.dim keeps gold. */ .hand .ap-cap.dim { opacity: 1; } .hand .ap-cap.dim .ap-pie .remaining { fill: var(--panel-2); } .hand .ap-cap.dim .ap-pie .spent { fill: color-mix(in srgb, var(--panel-2) 35%, transparent); } .ap-cap.undoable { cursor: pointer; } /* On your turn the cap is a live AP gauge even with nothing to undo, so opt it out of the global `button:disabled` dimming; it's only not-tappable, not inactive. The passive opponent-turn dimming is handled by .ap-cap.dim above. */ .ap-cap.undoable:disabled { cursor: default; opacity: 1; } /* spent wedges brighten on hover/focus so the cap reads as "tap to undo" */ .ap-cap.undoable:not(:disabled):hover .ap-pie .spent, .ap-cap.undoable:not(:disabled):focus-visible .ap-pie .spent { fill: var(--gold-muted); } /* --- hand cards (middle) --- */ .hand-cards { flex: 1 1 auto; display: flex; justify-content: space-evenly; /* fewer cards → more gap between them */ align-items: center; min-width: 0; padding: 0 4px; } .hand-card { flex: 0 0 auto; width: 44px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; padding: 0; cursor: pointer; } .hand-card .sprite { width: 100%; height: auto; max-width: 44px; aspect-ratio: 1; } .hand-card .spell-glyph { width: 60%; max-width: 40px; color: var(--gold); } .hand-card .spell-glyph svg { width: 100%; height: auto; aspect-ratio: 1; } .hand-card.selected { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 1; } /* --- action end-cap (right) --- */ .act-cap { flex: 0 0 auto; /* --act-cap-w > --h/2, so with the right corners' 999px radii clamped to the half-height the semicircle stretches into an elongated half-ellipse — the "more than a half circle" bullet nose, using the same curve we already had. Falls back to --h/2 for reuses (codex) that don't set the pill vars. */ width: var(--act-cap-w, calc(var(--h) / 2)); height: 100%; border: none; /* with border-box the