/* Gross-Off card component, v0.1. Self-contained and namespaced .gx-*.
 * The tokens are declared on .gx-card so a host page can theme around it. Dark mode switches on
 * [data-theme="dark"] on an ancestor, on .gx-dark, or on the OS preference (unless data-theme="light").
 * Reduced motion switches on prefers-reduced-motion or a .gx-still ancestor (the app's
 * "reduce effects" setting and the Zen tone).
 */

/* ------------------------------------------------------------------ tokens */
.gx-card {
  /* Tovvle "Fresh Mint" (src/design/tokens.ts) */
  --gx-stock: #FFFFFF;          /* card stock = colors.surface */
  --gx-surface-alt: #ECF6F1;    /* colors.surfaceAlt */
  --gx-ink: #16261F;            /* colors.text */
  --gx-ink-2: #34493F;          /* story text: stronger than textMuted for kid legibility */
  --gx-muted: #5F7A72;          /* colors.textMuted */
  --gx-line: #DCEFE8;           /* colors.border (muted badge border) */
  --gx-shadow: rgba(11, 61, 46, .30);

  /* Rarity ladder: tokens green, primary, accent, gold */
  --gx-common: #3FB984;  --gx-common-ink: #1F7F55;
  --gx-rare:   #10A87E;  --gx-rare-ink:   #0A7457;
  --gx-epic:   #5B5BD6;  --gx-epic-ink:   #4343B5;
  --gx-legend: #E8A317;  --gx-legend-ink: #8E6100;

  /* Elements: Okabe-Ito-leaning, spread by hue AND lightness; shape does the heavy lifting */
  --gx-splash: #2F8FE8;  --gx-splash-deep: #155FAE;
  --gx-slime:  #8CC21A;  --gx-slime-deep:  #4B7400;
  --gx-gas:    #C04AA0;  --gx-gas-deep:    #8A2A74;
  --gx-dust:   #B7793F;  --gx-dust-deep:   #71441A;
  --gx-ick: #CFE63C;     /* stink-line green on dark pills */

  --gx-font-display: 'Fredoka', ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  --gx-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* per-card resolved values (set by rarity / element / size classes) */
  --gx-tier: var(--gx-common);
  --gx-tier-ink: var(--gx-common-ink);
  --gx-el: var(--gx-splash);
  --gx-el-deep: var(--gx-splash-deep);
  --gx-el-ink: var(--gx-el-deep);
  --gx-el-soft: color-mix(in srgb, var(--gx-el) 15%, var(--gx-stock));
  --gx-fu: 8px;       /* frame unit for this size */
  --gx-fm: 1;         /* frame multiplier for this rarity (thicker = rarer, a non-colour cue) */
  --gx-frame: calc(var(--gx-fu) * var(--gx-fm));
  --gx-frame-bg: var(--gx-tier);
  --gx-radius: 18px;
  --gx-face-radius: 11px;
  --gx-pad: 7px;
  --gx-gap: 6px;
}

/* dark: deep teal-navy counterpart (darkColors) */
[data-theme="dark"] .gx-card, .gx-dark .gx-card, .gx-card.gx-dark {
  --gx-stock: #172420; --gx-surface-alt: #1F2E29; --gx-ink: #EAF4EF; --gx-ink-2: #CFDFD8;
  --gx-muted: #9DB3AB; --gx-line: #2A3A34; --gx-shadow: rgba(0, 0, 0, .55);
  --gx-common: #46C892; --gx-common-ink: #6FDCAB; --gx-rare: #2ED3A7; --gx-rare-ink: #5EE3BF;
  --gx-epic: #7C7CEB; --gx-epic-ink: #A9A8F5; --gx-legend: #F0B53C; --gx-legend-ink: #F6C95F;
  --gx-el-ink: color-mix(in srgb, var(--gx-el) 70%, #fff);
  --gx-el-soft: color-mix(in srgb, var(--gx-el) 20%, var(--gx-stock));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-card:not(.gx-light) {
    --gx-stock: #172420; --gx-surface-alt: #1F2E29; --gx-ink: #EAF4EF; --gx-ink-2: #CFDFD8;
    --gx-muted: #9DB3AB; --gx-line: #2A3A34; --gx-shadow: rgba(0, 0, 0, .55);
    --gx-common: #46C892; --gx-common-ink: #6FDCAB; --gx-rare: #2ED3A7; --gx-rare-ink: #5EE3BF;
    --gx-epic: #7C7CEB; --gx-epic-ink: #A9A8F5; --gx-legend: #F0B53C; --gx-legend-ink: #F6C95F;
    --gx-el-ink: color-mix(in srgb, var(--gx-el) 70%, #fff);
    --gx-el-soft: color-mix(in srgb, var(--gx-el) 20%, var(--gx-stock));
  }
}

/* element + rarity resolution */
.gx-e-splash { --gx-el: var(--gx-splash); --gx-el-deep: var(--gx-splash-deep);
  --gx-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 5.5Q4 1.5 8 5.5T16 5.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); --gx-tex-size: 16px 8px; }
.gx-e-slime  { --gx-el: var(--gx-slime);  --gx-el-deep: var(--gx-slime-deep);
  --gx-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='2.5' cy='2.5' r='1.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.6'/%3E%3C/svg%3E"); --gx-tex-size: 10px 10px; }
.gx-e-gas    { --gx-el: var(--gx-gas);    --gx-el-deep: var(--gx-gas-deep);
  --gx-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10L10 6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); --gx-tex-size: 8px 8px; }
.gx-e-dust   { --gx-el: var(--gx-dust);   --gx-el-deep: var(--gx-dust-deep);
  --gx-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3 1.3v3.4M1.3 3h3.4' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='9' r='1.2'/%3E%3C/svg%3E"); --gx-tex-size: 12px 12px; }

.gx-r-common { --gx-tier: var(--gx-common); --gx-tier-ink: var(--gx-common-ink); --gx-fm: 1; }
.gx-r-rare   { --gx-tier: var(--gx-rare);   --gx-tier-ink: var(--gx-rare-ink);   --gx-fm: 1.12; }
.gx-r-epic   { --gx-tier: var(--gx-epic);   --gx-tier-ink: var(--gx-epic-ink);   --gx-fm: 1.25; }
.gx-r-legend { --gx-tier: var(--gx-legend); --gx-tier-ink: var(--gx-legend-ink); --gx-fm: 1.4; }

/* ------------------------------------------------------------------ shell */
.gx-card, .gx-card *, .gx-card *::before, .gx-card *::after { box-sizing: border-box; }
.gx-card {
  container-type: inline-size;
  position: relative;
  display: block;
  width: var(--gx-w, min(340px, 100%));
  aspect-ratio: 5 / 7;
  padding: var(--gx-frame);
  border-radius: var(--gx-radius);
  background: var(--gx-frame-bg);
  color: var(--gx-ink);
  font-family: var(--gx-font-body);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 4px -1px var(--gx-shadow), 0 14px 28px -12px var(--gx-shadow);
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.gx-face {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gx-gap);
  padding: var(--gx-pad);
  border-radius: var(--gx-face-radius);
  background: linear-gradient(180deg, var(--gx-stock) 55%, color-mix(in srgb, var(--gx-el) 7%, var(--gx-stock)));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gx-tier) 55%, transparent);
  overflow: hidden;
}
.gx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-card svg { display: block; }

/* ------------------------------------------------------------------ rarity frames */
/* Common: flat. A plain tinted band. */
.gx-r-common { --gx-frame-bg: color-mix(in srgb, var(--gx-common) 38%, var(--gx-stock)); }

/* Rare: a fixed sheen, with no motion. A double glint across the top-left corner. */
.gx-r-rare {
  --gx-frame-bg:
    linear-gradient(128deg, transparent 0 11%, rgba(255,255,255,.7) 15%, transparent 20%, transparent 22%, rgba(255,255,255,.35) 24.5%, transparent 27%),
    linear-gradient(160deg, color-mix(in srgb, var(--gx-rare) 80%, #fff), var(--gx-rare) 45%, color-mix(in srgb, var(--gx-rare) 75%, #000));
}
.gx-r-rare .gx-face { box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 0 0 2.5px color-mix(in srgb, var(--gx-rare) 60%, #000); }

/* Epic: a holo band on the FRAME only (the face covers the middle). It drifts gently. */
.gx-r-epic {
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,150,210,.9) 30%, rgba(150,228,255,.9) 38%, rgba(180,255,170,.9) 46%, rgba(255,243,150,.9) 54%, rgba(200,168,255,.9) 62%, transparent 74%) 30% 30% / 320% 320% no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--gx-epic) 85%, #fff), var(--gx-epic) 40%, color-mix(in srgb, var(--gx-epic) 70%, #000));
  animation: gx-holo 7s ease-in-out infinite alternate;
}
.gx-r-epic .gx-face { box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 0 0 2.5px color-mix(in srgb, var(--gx-epic) 70%, #000); }
@keyframes gx-holo {
  from { background-position: 100% 100%, 0 0; }
  to   { background-position: 0% 0%, 0 0; }
}

/* Legend: gold foil frame with a slow glint. The art bleeds under frosted text panels. */
.gx-r-legend {
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 47%, transparent 56%) 120% 0 / 260% 100% no-repeat,
    linear-gradient(135deg, #9A6400 0%, #F7D774 17%, #E8A317 33%, #FFF1B8 50%, #CF8E0E 66%, #F7D774 83%, #8E5B00 100%);
  animation: gx-glint 5.5s ease-in-out infinite;
}
@keyframes gx-glint {
  0%, 55% { background-position: 120% 0, 0 0; }
  100%    { background-position: -20% 0, 0 0; }
}
.gx-r-legend .gx-face { background: #0E1714; box-shadow: 0 0 0 1px rgba(255,241,184,.9), 0 0 0 2.5px #8E5B00; }
.gx-bleed { position: absolute; inset: 0; z-index: 0; }
.gx-bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-r-legend .gx-namebar, .gx-r-legend .gx-art, .gx-r-legend .gx-body { position: relative; z-index: 1; }
.gx-foil-stars { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gx-foil-stars::before, .gx-foil-stars::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.6 4.4 3.6 7.4 8 8-4.4.6-7.4 3.6-8 8-.6-4.4-3.6-7.4-8-8 4.4-.6 7.4-3.6 8-8Z' fill='%23FFF6CF' stroke='%23B07A00' stroke-width='.6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: gx-twinkle 3.2s ease-in-out infinite;
}
.gx-foil-stars::before { top: -7px; left: -7px; }
.gx-foil-stars::after  { bottom: -6px; right: -6px; width: 16px; height: 16px; animation-delay: 1.6s; }
@keyframes gx-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(20deg); } }

/* ------------------------------------------------------------------ detail zones */
.gx-namebar {
  position: relative;
  flex: none;
  display: flex; align-items: center; gap: 8px;
  min-height: clamp(34px, 11.5cqw, 40px);
  padding: 3px 4px 3px 10px;
  border-radius: 9px;
  background: var(--gx-el-soft);
}
.gx-namebar::before {  /* element texture, the third cue after shape and colour */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--gx-el); opacity: .26;
  -webkit-mask-image: var(--gx-tex), linear-gradient(90deg, transparent 30%, #000 80%);
          mask-image: var(--gx-tex), linear-gradient(90deg, transparent 30%, #000 80%);
  -webkit-mask-size: var(--gx-tex-size), 100% 100%; mask-size: var(--gx-tex-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.gx-name {
  position: relative; flex: 1; min-width: 0; margin: 0;
  font: 600 clamp(17px, 6.4cqw, 22px)/1.1 var(--gx-font-display);
  letter-spacing: .005em; color: var(--gx-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-name--long { font-size: clamp(15px, 5.4cqw, 19px); }

.gx-el {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: clamp(26px, 9.4cqw, 34px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gx-stock);
  color: var(--gx-el-ink);
  box-shadow: 0 0 0 1.5px var(--gx-el), 0 1px 3px rgba(0,0,0,.18);
}
.gx-el .gx-ico { width: 74%; height: 74%; }

.gx-art {
  position: relative; flex: 1 1 auto; min-height: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--gx-el-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gx-ink) 12%, transparent) inset;
}
.gx-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.gx-r-legend .gx-art { background: transparent; box-shadow: none; }

/* power: an ink splat with a big number */
.gx-pow {
  position: absolute; left: 3px; bottom: 1px; z-index: 2;
  width: clamp(46px, 18cqw, 62px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.gx-splat { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-splat path, .gx-splat circle { fill: #16261F; stroke: #fff; stroke-width: 4; paint-order: stroke; }
.gx-pow b {
  position: relative; margin-top: -4%;
  font: 700 clamp(21px, 8cqw, 28px)/1 var(--gx-font-display); color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.gx-pow i, .gx-ick > b { display: none; }

/* ick: 1–3 stink lines in a dark pill (tiebreaker) */
.gx-ick {
  position: absolute; right: 6px; bottom: 7px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 9px; border-radius: 999px;
  background: rgba(14, 23, 20, .74);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}
.gx-ick i { font: 700 10px/1 var(--gx-font-display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.gx-pips { display: flex; gap: 1px; }
.gx-stink { width: 8px; height: 16px; color: rgba(255,255,255,.28); }
.gx-stink.is-on { color: var(--gx-ick); }
.gx-ick > b { font: 700 13px/1 var(--gx-font-display); }

.gx-el--corner, .gx-gem-corner, .gx-plate { display: none; }

.gx-body { flex: none; display: flex; flex-direction: column; gap: var(--gx-gap); }
.gx-story {
  margin: 0; padding: 0 3px;
  font: italic 500 max(13px, 4.1cqw)/1.3 var(--gx-font-body);
  color: var(--gx-ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gx-ability {
  padding: 6px 10px 7px;
  border-radius: 9px;
  background: var(--gx-surface-alt);
  box-shadow: 0 0 0 1px var(--gx-line) inset;
}
.gx-ab-name {
  margin: 0 0 1px; display: flex; align-items: center; gap: 5px;
  font: 600 max(14px, 4.5cqw)/1.2 var(--gx-font-display); color: var(--gx-ink);
}
.gx-ab-star { width: .85em; height: .85em; flex: none; color: var(--gx-legend); }
.gx-ab-text {
  margin: 0;
  font: 500 max(13px, 4.1cqw)/1.28 var(--gx-font-body); color: var(--gx-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gx-inline { display: inline-flex; vertical-align: -.2em; width: 1.15em; height: 1.15em; color: var(--gx-el-ink); }
.gx-inline .gx-ico { width: 100%; height: 100%; }

.gx-foot {
  display: flex; align-items: center; gap: 6px;
  min-height: 18px; padding: 0 3px;
  font: 600 11px/1 var(--gx-font-body); color: var(--gx-muted);
  font-variant-numeric: tabular-nums;
}
.gx-foot .gx-gem { width: 13px; height: 13px; color: var(--gx-tier); filter: drop-shadow(0 0 .5px rgba(0,0,0,.4)); }
/* HOUSE BADGE: 9px / 700 / 2px 8px / r10 / .1em / muted border. Never a full accent fill. */
.gx-badge {
  font: 700 9px/1.25 var(--gx-font-body); letter-spacing: .1em;
  padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--gx-line); background: var(--gx-surface-alt);
  color: var(--gx-tier-ink);
}
.gx-set { margin-left: auto; letter-spacing: .02em; }
.gx-copies { display: inline-flex; align-items: center; gap: 3px; color: var(--gx-ink); }
.gx-copies svg { width: 12px; height: 12px; }

/* Legend: frosted panels. rgba(14,23,20,.76) over pure white still gives about 7:1 for #fff text. */
.gx-r-legend .gx-namebar,
.gx-r-legend .gx-body {
  background: rgba(14, 23, 20, .76);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 241, 184, .28) inset;
}
.gx-r-legend .gx-namebar::before { opacity: .16; background: #fff; }
.gx-r-legend .gx-name { color: #FFF6DA; }
.gx-r-legend .gx-body { padding: 7px 6px 5px; border-radius: 10px; }
.gx-r-legend .gx-story { color: #E4EEEA; -webkit-line-clamp: 2; }
.gx-r-legend .gx-ability { background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset; }
.gx-r-legend .gx-ab-name, .gx-r-legend .gx-ab-text { color: #FFFFFF; }
.gx-r-legend .gx-foot { color: #C9D8D2; }
.gx-r-legend .gx-copies { color: #fff; }
.gx-r-legend .gx-badge { background: rgba(255,255,255,.06); border-color: rgba(255,241,184,.3); color: #F6C95F; }
.gx-r-legend .gx-inline { color: color-mix(in srgb, var(--gx-el) 60%, #fff); }

/* ------------------------------------------------------------------ sizes */
.gx-card--detail { --gx-fu: 8px; }

.gx-card--board { --gx-w: 120px; --gx-fu: 4px; --gx-radius: 10px; --gx-face-radius: 6px; --gx-pad: 0px; }
.gx-card--hand  { --gx-w: 84px;  --gx-fu: 3px; --gx-radius: 8px;  --gx-face-radius: 5px; --gx-pad: 0px; }

.gx-card--board .gx-namebar, .gx-card--board .gx-body,
.gx-card--hand  .gx-namebar, .gx-card--hand  .gx-body,
.gx-card--board .gx-foil-stars, .gx-card--hand .gx-foil-stars { display: none; }
.gx-card--board .gx-art, .gx-card--hand .gx-art { border-radius: 0; box-shadow: none; }
.gx-card--board .gx-art > img, .gx-card--hand .gx-art > img { object-position: 50% 30%; }

.gx-card--board .gx-el--corner, .gx-card--hand .gx-el--corner {
  display: grid; position: absolute; top: 3px; right: 3px; z-index: 2;
}
.gx-card--hand  .gx-el--corner { width: 27cqw; }
.gx-card--board .gx-el--corner { width: 24cqw; }
.gx-card--hand  .gx-pow { left: -1px; top: -1px; bottom: auto; width: 42cqw; }
.gx-card--board .gx-pow { left: -1px; top: -1px; bottom: auto; width: 38cqw; }
.gx-card--hand  .gx-pow b { font-size: 23cqw; }
.gx-card--board .gx-pow b { font-size: 20cqw; }
.gx-card--hand .gx-splat path, .gx-card--hand .gx-splat circle,
.gx-card--board .gx-splat path, .gx-card--board .gx-splat circle { stroke-width: 6; }

.gx-card--hand .gx-ick, .gx-card--board .gx-ick { gap: 1px; padding: 1px 6px 1px 3px; left: 3px; right: auto; bottom: 3px; }
.gx-card--hand .gx-ick i, .gx-card--board .gx-ick i { display: none; }
.gx-card--hand .gx-ick > b, .gx-card--board .gx-ick > b { display: block; font-size: 13px; }
.gx-card--hand .gx-stink:not(:first-child), .gx-card--board .gx-stink:not(:first-child) { display: none; }
.gx-card--hand .gx-stink, .gx-card--board .gx-stink { width: 7px; height: 13px; }

.gx-card--hand .gx-gem-corner, .gx-card--board .gx-gem-corner {
  display: block; position: absolute; right: 4px; bottom: 4px; z-index: 2;
  width: 14px; height: 14px; color: var(--gx-tier);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.gx-gem-corner .gx-gem { width: 100%; height: 100%; }

/* board: one-line frosted name plate */
.gx-card--board .gx-plate {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 4px 22px 5px 7px;
  background: rgba(14, 23, 20, .76);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gx-card--board .gx-plate span {
  display: block; font: 600 13px/1.15 var(--gx-font-display); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-card--board .gx-ick { bottom: 29px; }
.gx-card--board .gx-gem-corner { bottom: 6px; right: 5px; z-index: 3; }

/* ------------------------------------------------------------------ card back */
.gx-back {
  --gx-fm: 1.25;
  background: linear-gradient(150deg, #13B488 0%, #27B9A6 40%, #6366E8 100%);
}
.gx-back .gx-face {
  padding: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M11 4c.3 2.2 1.8 3.7 4 4-2.2.3-3.7 1.8-4 4-.3-2.2-1.8-3.7-4-4 2.2-.3 3.7-1.8 4-4Z' fill='%23F6C544' fill-opacity='.55'/%3E%3Cpath d='M33 38c-1.6-1.3 1.6-2.4 0-3.7s1.6-2.4 0-3.7 1.6-2.4 0-3.7' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 44px 44px,
    radial-gradient(120% 80% at 50% 40%, #5B5BD6 0%, #3D3DB4 45%, #22226E 100%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.55);
}
.gx-drip { position: absolute; top: 0; left: 0; width: 100%; height: 13%; fill: #9BD22A; filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
.gx-back-medal {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #F0FBF6, #D9F2E9 60%, #B8E6D3);
  box-shadow: 0 0 0 max(2px, 2.4cqw) #fff, 0 0 0 max(3px, 4.2cqw) #9BD22A, 0 8px 18px rgba(0,0,0,.35);
  display: grid; place-items: center;
}
.gx-mascot { width: 88%; height: 88%; margin-top: -4%; }
.gx-back-mark {
  position: absolute; left: 0; right: 0; bottom: 9%;
  display: flex; flex-direction: column; align-items: center; gap: 1cqw;
  font-family: var(--gx-font-display); color: #fff; text-align: center;
}
.gx-back-by { font-weight: 600; font-size: max(9px, 5.5cqw); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gx-back-word {
  font-weight: 700; font-size: 15cqw; line-height: .95; letter-spacing: .01em;
  text-shadow: 0 .06em 0 #1B1B5E, 0 .12em .2em rgba(0,0,0,.35);
  transform: rotate(-4deg);
}
.gx-back-word span { color: #9BD22A; }
.gx-card--hand .gx-back-by, .gx-card--board .gx-back-by { display: none; }
.gx-card--hand .gx-back-word { font-size: 17cqw; }

/* ------------------------------------------------------------------ flip */
.gx-flip { display: inline-block; perspective: 900px; }
.gx-flip-inner { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .75, .25, 1.05); }
.gx-flip-inner > .gx-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.gx-flip-inner > .gx-card + .gx-card { position: absolute; top: 0; left: 0; transform: rotateY(180deg); }
.gx-flip.is-down .gx-flip-inner { transform: rotateY(180deg); }

/* ------------------------------------------------------------------ element wheel */
.gx-wheel { width: 100%; max-width: 280px; height: auto; color: #5F7A72; font-family: var(--gx-font-display, 'Fredoka', system-ui, sans-serif); }
.gx-wheel-disc { fill: #fff; stroke-width: 2.5; }
.gx-wheel-node.gx-e-splash { color: #155FAE; stroke: #2F8FE8; }
.gx-wheel-node.gx-e-slime  { color: #4B7400; stroke: #8CC21A; }
.gx-wheel-node.gx-e-gas    { color: #8A2A74; stroke: #C04AA0; }
.gx-wheel-node.gx-e-dust   { color: #71441A; stroke: #B7793F; }
.gx-wheel-ico { fill: currentColor; stroke: none; }
.gx-wheel-label { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; fill: currentColor; stroke: none; }
.gx-wheel-beats { font-size: 10px; font-weight: 600; fill: currentColor; font-style: italic; }
.gx-wheel-center { font-size: 13px; font-weight: 600; fill: currentColor; }
[data-theme="dark"] .gx-wheel { color: #9DB3AB; }
[data-theme="dark"] .gx-wheel-disc { fill: #172420; }
[data-theme="dark"] .gx-wheel-node.gx-e-splash { color: #7DB8F0; }
[data-theme="dark"] .gx-wheel-node.gx-e-slime  { color: #B4D96A; }
[data-theme="dark"] .gx-wheel-node.gx-e-gas    { color: #DB8FC6; }
[data-theme="dark"] .gx-wheel-node.gx-e-dust   { color: #D6AC84; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-wheel { color: #9DB3AB; }
  :root:not([data-theme="light"]) .gx-wheel-disc { fill: #172420; }
  :root:not([data-theme="light"]) .gx-wheel-node.gx-e-splash { color: #7DB8F0; }
  :root:not([data-theme="light"]) .gx-wheel-node.gx-e-slime  { color: #B4D96A; }
  :root:not([data-theme="light"]) .gx-wheel-node.gx-e-gas    { color: #DB8FC6; }
  :root:not([data-theme="light"]) .gx-wheel-node.gx-e-dust   { color: #D6AC84; }
}

/* ------------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  .gx-card, .gx-card *, .gx-card *::before, .gx-card *::after { animation: none !important; transition: none !important; }
  .gx-flip-inner { transition: none !important; }
}
.gx-still .gx-card, .gx-still .gx-card *, .gx-still .gx-card *::before, .gx-still .gx-card *::after,
.gx-card.gx-still, .gx-card.gx-still * { animation: none !important; transition: none !important; }
.gx-still .gx-flip-inner { transition: none !important; }