discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD
All checks were successful
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline was successful
Details

Browse Source 
- fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has)
- mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width
- shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated
- shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring
- model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank
- class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next
- custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS
- Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes
- 748 ITs + Jasmine green

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-30 21:01:52 -04:00
parent 61162e36da
commit 2f039559e6
23 changed files with 1916 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

605
src/static_src/scss/_card-deck.scss
View File

@@ -3,6 +3,132 @@
// Shared card display classes (.fan-card, .fan-card-corner, .fan-card-face, .fan-nav)
// extracted from _game-kit.scss; sig-select overlay extracted from _room.scss.
// ── Shared stage-card polarity rules ─────────────────────────────────────────
//
// Used by .sea-stage-card (Sea Select polarity is fixed by the deck-stack the
// gamer drew from) and .fan-card[data-polarity="..."] (Game Kit fan, FLIP-able).
// Sets title/qualifier color uniformly across both upright and reversal slots;
// optionally inverts the card frame (bg ⇄ border) for levity polarity, and
// applies an optional text-shadow (Sea uses one for the deeper card-art look;
// Fan does not).
@mixin stage-card-polarity($titles-color, $text-shadow: null, $invert-frame: false) {
@if $invert-frame {
background: rgba(var(--secUser), 1);
border-color: rgba(var(--priUser), 1);
}
.fan-card-name,
.sig-qualifier-above,
.sig-qualifier-below,
.fan-card-reversal-name,
.fan-card-reversal-qualifier {
color: $titles-color;
@if $text-shadow { text-shadow: $text-shadow; }
}
}
// ── Shared stat-block contents ───────────────────────────────────────────────
//
// Used by .sig-stat-block (Sig Select), .sea-stat-block (Sea Select), and
// .fan-stage-block (Game Kit fan). The mixin emits the *inner* rules — stat-face
// padding/swap, stat-keywords, sig-info tooltip + header/title/type/effect/index.
// Each call site keeps its own outer rule (background, border, animation, button
// positioning + class hooks, visibility triggers).
@mixin stat-block-shared {
// SPIN / FYI buttons — pinned to the top-right edge
.spin-btn { position: absolute; top: -1rem; right: -1rem; margin: 0; z-index: 50; }
.fyi-btn { position: absolute; top: 1.25rem; right: -1rem; margin: 0; z-index: 50; }
// PRV / NXT — pinned to bottom corners; hidden by default. Sig + fan reveal
// them on .fyi-open (see each site's outer rule). Sea overrides to always
// visible (its FYI panel is permanent, not hover-toggled).
.fyi-prev, .fyi-next {
display: none;
position: absolute;
bottom: -1rem;
margin: 0;
z-index: 70;
}
.fyi-prev { left: -1rem; }
.fyi-next { right: -1rem; }
.stat-face {
display: none;
padding: calc(var(--sig-card-w, 120px) * 0.37)
calc(var(--sig-card-w, 120px) * 0.1)
calc(var(--sig-card-w, 120px) * 0.08);
}
.stat-face--upright { display: block; }
&.is-reversed {
.stat-face--upright { display: none; }
.stat-face--reversed { display: block; }
}
.stat-face-label {
font-size: calc(var(--sig-card-w, 120px) * 0.063);
text-transform: uppercase;
letter-spacing: 0.09em;
opacity: 0.7;
color: rgba(var(--terUser), 1);
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
}
.stat-keywords {
list-style: none;
padding: 0;
margin: 0;
li {
font-size: calc(var(--sig-card-w, 120px) * 0.083);
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
opacity: 1;
border-bottom: 0.05rem solid rgba(var(--terUser), 0.18);
&:last-child { border-bottom: none; }
}
}
// FYI tooltip — covers the entire stat block when open
.sig-info {
display: none;
position: absolute;
inset: 0;
z-index: 60;
background-color: rgba(var(--tooltip-bg), 0.6);
backdrop-filter: blur(6px);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--priYl), 0.35);
padding: 0.75rem;
flex-direction: column;
gap: 0.4rem;
overflow-y: auto;
}
.sig-info-header { display: flex; flex-direction: column; gap: 0.1rem; }
.sig-info-title {
font-size: calc(var(--sig-card-w, 120px) * 0.093);
font-weight: 700;
margin: 0;
&--energies, &--operations { color: rgba(var(--quaUser), 1); }
}
.sig-info-type {
font-size: calc(var(--sig-card-w, 120px) * 0.058);
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.sig-info-effect {
flex: 1;
font-size: calc(var(--sig-card-w, 120px) * 0.075);
margin: 0;
line-height: 1.55;
.card-ref { color: rgba(var(--terUser), 1); font-weight: 600; }
}
.sig-info-index {
font-size: calc(var(--sig-card-w, 120px) * 0.063);
opacity: 0.55;
}
}
// ── Tarot fan modal ──────────────────────────────────────────────────────────
#id_tarot_fan_dialog {
@@ -22,6 +148,14 @@
}
.tarot-fan-wrap {
// Fan card dimensions + carousel layout — overrideable per breakpoint via
// @media rules. game-kit.js reads --fan-carousel-step at runtime so the JS
// transform stack stays in sync with the CSS-driven sizing.
--fan-card-w: 220px;
--fan-card-h: 340px;
--fan-stage-shift: 130px;
--fan-carousel-step: 200px;
position: relative;
width: 100%;
height: 100%;
@@ -41,15 +175,93 @@
.tarot-fan {
position: relative;
width: 220px;
height: 340px;
width: var(--fan-card-w);
height: var(--fan-card-h);
// Shift the whole carousel left so the focused card sits left-of-center,
// making symmetric room on the right for .fan-stage-block.
transform: translateX(calc(-1 * var(--fan-stage-shift)));
transition: transform 0.3s ease;
}
// ── Mobile breakpoints ───────────────────────────────────────────────────────
// Override the four geometry vars on .tarot-fan-wrap; everything downstream
// (.tarot-fan size, .fan-card size, carousel stride read by JS, .fan-stage-block
// width via --sig-card-w, stat-face / stat-keywords typography) scales from them.
// Portrait mobile — true phone widths (≤ 480px). Narrow desktop windows in
// portrait orientation stay on the desktop default.
@media (orientation: portrait) and (max-width: 480px) {
.tarot-fan-wrap {
--fan-card-w: 150px;
--fan-card-h: 230px;
--fan-stage-shift: 90px;
--fan-carousel-step: 130px;
}
}
// Landscape mobile — short viewport, fan needs to stay above the fold
@media (orientation: landscape) and (max-height: 500px) {
.tarot-fan-wrap {
--fan-card-w: 150px;
--fan-card-h: 235px;
--fan-stage-shift: 90px;
--fan-carousel-step: 130px;
}
}
// ── Fan stage block — symmetric right-of-focused-card stat panel ───────────
//
// Visual styling mirrors .sig-stat-block / .sea-stat-block (see Step-6 DRY note).
// Uses --sig-card-w: 220px so the cascaded font-size / padding calc() rules in
// the sea-stat-block block (which key off --sig-card-w) produce fan-card-sized
// typography. Animation/positioning is fan-specific (carousel symmetric slot,
// careen-out on nav, idle-reveal).
.fan-stage-block {
--sig-card-w: var(--fan-card-w);
position: absolute;
top: 50%;
left: 50%;
width: var(--sig-card-w);
height: calc(var(--sig-card-w) * 8 / 5);
background: rgba(var(--priUser), 1);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--terUser), 0.15);
color: rgba(var(--secUser), 1);
z-index: 15;
// Symmetric counterpart to the carousel shift: stat block lives at +stage-shift
// from screen-center, mirroring the focused card at -stage-shift.
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(120vw);
opacity: 0;
pointer-events: none;
// Careen-out (default → no .is-revealed): swift exit, fade trails the slide
transition: transform 0.2s cubic-bezier(.5,0,.75,0),
opacity 0.2s ease 0.1s;
&.is-revealed {
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(0);
opacity: 1;
pointer-events: auto;
// Reveal: gentler ease-out, opacity leads slightly
transition: transform 0.6s ease-out,
opacity 0.5s ease-out 0.1s;
}
@include stat-block-shared;
&.fyi-open {
.sig-info { display: flex; }
.fyi-prev,
.fyi-next { display: inline-flex; }
}
}
.fan-card {
position: absolute;
inset: 0;
width: 220px;
height: 340px;
width: var(--fan-card-w);
height: var(--fan-card-h);
border-radius: 0.75rem;
background: rgba(var(--priUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.4);
@@ -64,6 +276,34 @@
box-shadow: 0 0 2rem rgba(var(--secUser), 0.3);
}
// SPIN — whole card rotates (carousel transform + rotate(180deg) is combined
// in JS via updateFan/spinBtn handler, since the inline transform owns the
// carousel layout). Inner spans swap opacity so the upright fades and the
// reversal pops — matches sig/sea pattern.
&.stage-card--reversed {
.fan-card-reversal-qualifier,
.fan-card-reversal-name { opacity: 1; }
.fan-card-name,
.sig-qualifier-above,
.sig-qualifier-below { opacity: 0.25; }
}
// FLIP — polarity-aware coloring. Default (no data-polarity) is gravity:
// priUser bg, secUser border. Levity inverts to secUser bg + priUser border.
&[data-polarity="levity"] {
@include stage-card-polarity(
$titles-color: rgba(var(--quiUser), 1),
$invert-frame: true,
);
.fan-card-corner { color: rgba(var(--priUser), 0.75); }
.fan-card-arcana,
.fan-card-name-group { color: rgba(var(--priUser), 0.85); }
}
// FLIP — animation runs via Element.animate() in JS (game-kit.js _flipActive)
// so the rotateY layer stacks on top of the carousel inline transform
// (translateX/rotateY/scale + optional SPIN rotate(180deg)).
.fan-card-corner { padding-top: 0.25rem; }
}
@@ -80,27 +320,101 @@
&--tl { top: 0.4rem; left: 0.4rem; }
&--br { bottom: 0.4rem; right: 0.4rem; transform: rotate(180deg); }
// Corner rank + suit icon scale with the card so they shrink on mobile
// breakpoints alongside .fan-card. 0.109 of card-width ≈ 24px @ 220px (the
// original 1.5rem default).
.fan-corner-rank {
font-size: 1.5rem;
font-size: calc(var(--fan-card-w, 220px) * 0.109);
font-weight: bold;
padding: 0.18rem 0;
}
// Icon always at the outer card edge regardless of rank width
i { font-size: 1.5rem; align-self: flex-start; }
i {
font-size: calc(var(--fan-card-w, 220px) * 0.109);
align-self: flex-start;
}
}
.fan-card-face {
padding: 1.25rem;
// Padding + gaps scale with card width so they stay proportional on mobile.
padding: calc(var(--fan-card-w) * 0.057);
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: calc(var(--fan-card-w) * 0.023);
// Face flips on SPIN; corners stay put because they live outside .fan-card-face
transition: transform 0.4s ease;
.fan-card-number { font-size: 0.65rem; }
.fan-card-name-group { font-size: 0.65rem; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--secUser), 1); }
.fan-card-name { font-size: 0.95rem; font-weight: bold; margin: 0; color: rgba(var(--terUser), 1); }
.fan-card-arcana { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--secUser), 1); }
.fan-card-correspondence { font-size: 0.6rem; font-style: italic; color: rgba(var(--secUser), 0.5); }
.fan-card-face-upright,
.fan-card-face-reversal {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--fan-card-w) * 0.007);
}
// Qualifier shares the name's typography — same line, different content.
// Sizes scale with --fan-card-w so they stay proportional on mobile.
.sig-qualifier-above,
.sig-qualifier-below,
.fan-card-reversal-qualifier,
.fan-card-reversal-name,
.fan-card-name {
font-size: calc(var(--fan-card-w) * 0.1);
font-weight: bold;
margin: 0;
color: rgba(var(--terUser), 1);
transition: opacity 0.2s;
}
// Reversal-face spans pre-rotated so they read forward once the card spins
// 180deg via .stage-card--reversed. Matches sig/sea convention (rotation +
// base opacity live on the inner spans, NOT the wrapping .fan-card-face-reversal
// div — otherwise the outer div's transform stacks with sig/sea's scoped rule
// and double-rotates back to upright).
.fan-card-reversal-qualifier,
.fan-card-reversal-name {
transform: rotate(180deg);
opacity: 0.25;
}
.fan-card-number { font-size: calc(var(--fan-card-w) * 0.043); }
.fan-card-name-group { font-size: calc(var(--fan-card-w) * 0.043); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--secUser), 1); }
.fan-card-arcana { font-size: calc(var(--fan-card-w) * 0.043); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--secUser), 1); }
.fan-card-correspondence { font-size: calc(var(--fan-card-w) * 0.04); font-style: italic; color: rgba(var(--secUser), 0.5); }
}
// FLIP button — invisible at rest, fades in when the user hovers/taps the wrap.
// Positioned at bottom-left of the focused card slot (carousel-shifted, so its
// translateX matches .tarot-fan's leftward shift).
.fan-flip-btn {
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
transform: translate(calc(-50% - var(--fan-stage-shift) - var(--fan-card-w) / 2 + 1.5rem),
calc(-50% + var(--fan-card-h) / 2 - 1.5rem));
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
// Reveal when the focused card OR the FLIP button itself is hovered. Without
// the `.fan-flip-btn:hover` clause the button (z-index 25, sitting on top of
// the card) steals :hover from the card the moment the cursor moves onto it,
// flipping :has() false, fading the button to opacity:0 + pointer-events:none,
// and letting the in-flight click pass through to the dialog backdrop (which
// closes the modal). Keeping the button in the trigger list pins it visible
// while the cursor is on it.
.tarot-fan-wrap:has(.fan-card--active:hover) .fan-flip-btn,
.tarot-fan-wrap:has(.fan-flip-btn:hover) .fan-flip-btn,
.tarot-fan-wrap.fan-touch-revealed .fan-flip-btn {
opacity: 1;
pointer-events: auto;
}
.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
opacity: 0;
pointer-events: none;
}
.fan-nav {
@@ -272,130 +586,15 @@ html:has(.sig-backdrop) {
display: none;
position: relative;
.sig-flip-btn {
position: absolute;
top: -1rem;
right: -1rem;
margin: 0;
z-index: 50;
}
.sig-info-btn {
position: absolute;
top: 1.25rem;
right: -1rem;
margin: 0;
z-index: 50;
}
// Caution tooltip — covers the entire stat block (inset: 0), z-index above buttons.
.sig-info {
display: none;
position: absolute;
inset: 0;
z-index: 60;
background-color: rgba(var(--tooltip-bg), 0.6);
backdrop-filter: blur(6px);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--priYl), 0.35);
padding: 0.75rem;
flex-direction: column;
gap: 0.4rem;
overflow-y: auto;
}
.sig-info-header {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sig-info-title {
font-size: calc(var(--sig-card-w, 120px) * 0.093);
font-weight: 700;
margin: 0;
&--energies { color: rgba(var(--quaUser), 1); }
&--operations { color: rgba(var(--quaUser), 1); }
}
.sig-info-type {
font-size: calc(var(--sig-card-w, 120px) * 0.058);
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.sig-info-effect {
flex: 1;
font-size: calc(var(--sig-card-w, 120px) * 0.075);
margin: 0;
line-height: 1.55;
.card-ref {
color: rgba(var(--terUser), 1);
font-weight: 600;
}
}
.sig-info-index {
font-size: calc(var(--sig-card-w, 120px) * 0.063);
opacity: 0.55;
}
// Nav arrows portaled out of tooltip — sit at bottom corners above tooltip (z-70)
.sig-info-prev,
.sig-info-next {
display: none;
position: absolute;
bottom: -1rem;
margin: 0;
z-index: 70;
}
.sig-info-prev { left: -1rem; }
.sig-info-next { right: -1rem; }
.stat-face {
display: none;
padding: calc(var(--sig-card-w, 120px) * 0.37) calc(var(--sig-card-w, 120px) * 0.1) calc(var(--sig-card-w, 120px) * 0.08);
&--upright { display: block; }
}
&.is-reversed {
.stat-face--upright { display: none; }
.stat-face--reversed { display: block; }
}
.stat-face-label {
font-size: calc(var(--sig-card-w, 120px) * 0.063);
text-transform: uppercase;
letter-spacing: 0.09em;
opacity: 0.4;
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
}
.stat-keywords {
list-style: none;
padding: 0;
margin: 0;
li {
font-size: calc(var(--sig-card-w, 120px) * 0.083);
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
opacity: 0.85;
border-bottom: 0.05rem solid rgba(var(--terUser), 0.12);
&:last-child { border-bottom: none; }
}
}
@include stat-block-shared;
}
&.sig-stage--frozen .sig-stat-block { display: block; }
&.sig-info-open .sig-stat-block {
.sig-info { display: flex; }
.sig-info-prev, .sig-info-next { display: inline-flex; }
// Unified .fyi-open class — opens the FYI panel + reveals PRV/NXT nav.
.sig-stat-block.fyi-open {
.sig-info { display: flex; }
.fyi-prev, .fyi-next { display: inline-flex; }
}
}
@@ -424,12 +623,16 @@ html:has(.sig-backdrop) {
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem }
// Override: center the element within the card instead.
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem;
// padding-left:0.5rem }. Sig thumbnails reset position to dead-center; we
// also zero the inherited padding-left (it's there for game-kit fan corners
// that need outer-edge breathing room — at thumb size it nudges the rank +
// icon visibly off-center after the translate).
.fan-card-corner--tl {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 0;
gap: 0; // game-kit has gap:0.15rem — too large at 0.5rem font-size
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
@@ -962,6 +1165,13 @@ $sea-card-h: 6.5rem;
background: rgba(var(--priUser), 1);
}
// Mobile: stack crucifix on top, form (select / stacks / LOCK HAND / DEL) below
@media (max-width: 600px) {
.sea-modal-body { flex-direction: column; }
.sea-cards-col { flex: 0 0 auto; padding: 1.25rem 1rem; }
.sea-form-col { width: 100%; }
}
.sea-form-main {
flex: 1;
overflow-y: auto;
@@ -976,7 +1186,13 @@ $sea-card-h: 6.5rem;
label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
}
// Custom combobox replacement for native <select>. See combobox.js for the
// expected markup; SCSS owns all visuals because the OS-native dropdown ignored
// option background/color anyway.
.sea-select {
position: relative;
cursor: pointer;
user-select: none;
background: rgba(var(--duoUser), 0.6);
border: 1px solid rgba(var(--terUser), 0.3);
border-radius: 0.3rem;
@@ -984,8 +1200,64 @@ $sea-card-h: 6.5rem;
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
width: 100%;
max-width: 12.5rem;
outline: none;
option { background: rgba(var(--priUser), 1); }
&:focus-visible { box-shadow: 0 0 0 2px rgba(var(--terUser), 0.5); }
.sea-select-current {
display: block;
padding-right: 1.1rem; // room for the arrow
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sea-select-arrow {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.6;
pointer-events: none;
font-size: 0.75rem;
}
.sea-select-list {
display: none;
list-style: none;
margin: 0.2rem 0 0;
padding: 0.15rem;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: rgba(var(--undUser), 1);
border: 1px solid rgba(var(--terUser), 0.5);
border-radius: 0.3rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
li[role="option"] {
padding: 0.4rem 0.5rem;
border-radius: 0.2rem;
color: rgba(var(--priUser), 1);
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
// Hover + keyboard-focus + selected all share the inverted scheme so
// the visual feedback stays consistent regardless of input device.
li[role="option"]:hover,
li[role="option"].sea-select-option--focus,
li[role="option"][aria-selected="true"] {
background: rgba(var(--priUser), 1);
color: rgba(var(--secUser), 1);
}
}
&[aria-expanded="true"] {
.sea-select-list { display: block; }
.sea-select-arrow { transform: translateY(-50%) rotate(180deg); }
}
}
// Deck stacks — DECKS label + gravity + levity piles
@@ -1206,25 +1478,20 @@ $_sea-title-shadow: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.
$_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .fan-card-reversal-name, .fan-card-reversal-qualifier';
.sea-stage--levity .sea-stage-card {
background: rgba(var(--secUser), 1);
border-color: rgba(var(--priUser), 1);
@include stage-card-polarity(
$titles-color: rgba(var(--quiUser), 1),
$text-shadow: $_sea-title-shadow,
$invert-frame: true,
);
color: rgba(var(--priUser), 1);
.fan-card-arcana,
.fan-card-corner {
color: rgba(var(--priUser), 1);
}
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--quiUser), 1);
text-shadow: $_sea-title-shadow;
}
.fan-card-corner { color: rgba(var(--priUser), 1); }
}
.sea-stage--gravity .sea-stage-card {
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--terUser), 1);
text-shadow: $_sea-title-shadow;
}
@include stage-card-polarity(
$titles-color: rgba(var(--terUser), 1),
$text-shadow: $_sea-title-shadow,
);
}
// Sea stat block — reuses sig-select stat-block sizing, scoped to sea-stage
@@ -1238,37 +1505,11 @@ $_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .f
position: relative;
display: block;
.sea-spin-btn { position: absolute; top: -1rem; right: -1rem; margin: 0; z-index: 50; }
.sea-fyi-btn { position: absolute; top: 1.25rem; right: -1rem; margin: 0; z-index: 50; }
@include stat-block-shared;
.stat-face { display: none; padding: calc(var(--sig-card-w, 140px) * 0.37) calc(var(--sig-card-w, 140px) * 0.1) calc(var(--sig-card-w, 140px) * 0.08); }
.stat-face--upright { display: block; }
&.is-reversed { .stat-face--upright { display: none; } .stat-face--reversed { display: block; } }
.stat-face-label { font-size: calc(var(--sig-card-w, 140px) * 0.063); text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.4; margin: 0 0 calc(var(--sig-card-w, 140px) * 0.07); }
.stat-keywords { list-style: none; padding: 0; margin: 0;
li { font-size: calc(var(--sig-card-w, 140px) * 0.083); padding: calc(var(--sig-card-w, 140px) * 0.042) 0; opacity: 0.85; border-bottom: 0.05rem solid rgba(var(--terUser), 0.12); &:last-child { border-bottom: none; } }
}
.sig-info {
position: absolute;
inset: 0;
z-index: 60;
background-color: rgba(var(--tooltip-bg), 0.6);
backdrop-filter: blur(6px);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--priYl), 0.35);
padding: 0.75rem;
flex-direction: column;
gap: 0.4rem;
overflow-y: auto;
display: none;
}
.sea-fyi-prev,
.sea-fyi-next { display: inline-flex; position: absolute; bottom: -1rem; margin: 0; z-index: 70; }
.sea-fyi-prev { left: -1rem; }
.sea-fyi-next { right: -1rem; }
// Sea's FYI panel is permanent (not hover-toggled), so its PRV/NXT nav
// buttons are always visible — overrides the mixin's hidden-by-default.
.fyi-prev, .fyi-next { display: inline-flex; }
}
@media (orientation: landscape) {