/* Could They Find It? - styles
 * v5 "spotlight board" skin: the retro cabinet is retired for a soft 24px
 * rounded card on a night-green gradient, with a persistent header, a
 * board-left / panel-right split on the round and result (>=820px), and a
 * decorative spotlight overlay (veil, ring, pin, badges, glow pools) drawn
 * over the board by spotlight.js. All copy a user reads or taps is Atkinson
 * Hyperlegible; the masthead is bold Literata. Mobile-first from 360px.
 * WCAG 2.2 AA (visible gold focus ring, 48px+ targets, reduced-motion freeze).
 */

/* ---- self-hosted fonts ------------------------------------------- */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/atkinson-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/literata-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/pressstart.woff2') format('woff2');
}

/* ---- tokens ------------------------------------------------------ */
:root {
  --pebble: #F9F7F1;
  --moss: #2C3329;
  --sage: #6B8B72;
  --sage-dark: #4E6B57;
  --sage-text: #4A6B50;
  --gold: #C0AA78;
  --gold-dark: #9c855a;
  --surface: #ffffff;
  --panel: #F6F5F0;
  --board-bg: #1a140a;
  --surface-2: #EDE9DD;
  --border: #d9d4c6;
  --border-soft: #cfc8b8;
  --divider: #E7E1D3;
  --text: #3D3D3D;
  --text-soft: #565d52;
  --text-muted: #7c8278;
  --found: #5E8A1F;
  --partial: #B47A12;
  --missing: #B23B33;
  /* soft state tints (feedback card + result tiles) */
  --tint-found: #E7EFE6;
  --tint-partial: #F5EEE4;
  --tint-missing: #F4EAEA;
  --tile-found: #EAEFE7;
  --tile-partial: #F3EEE4;
  --tile-missing: #F1EAEA;
  --shadow-card: 0 4px 18px rgba(124, 154, 130, 0.16);
  --shadow-btn: 0 6px 16px rgba(124, 154, 130, 0.3);
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif;
  --serif: 'Literata', Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--body);
  color: var(--text);
  line-height: 1.6;
  background-color: #20261e;
  background-image:
    radial-gradient(130% 100% at 50% 0%, #2a3228 0%, #20261e 46%, #14180f 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 14px 40px;
}

.ctfi-stage { width: 100%; max-width: 620px; position: relative; z-index: 1; }

/* ---- the soft card ---------------------------------------------- */
.ctfi-frame {
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ---- the persistent header -------------------------------------- */
.ctfi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--divider);
}
.ctfi-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--moss);
  margin: 0;
  line-height: 1.15;
}
.ctfi-title b { color: var(--gold-dark); font-weight: 700; }
.ctfi-headstep {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sage);
  margin: 0;
  white-space: nowrap;
}

#ctfi-root { min-height: 60px; }
.ctfi-loading { padding: 24px 22px; }

/* ---- single-column scenes (intro / reveal) ---------------------- */
.ctfi-single { padding: 24px 22px 28px; }

/* ---- two-region scenes (round / result) ------------------------- */
/* mobile: board on top (full width), panel below as a rounded-top sheet.
   No overlap, no fixed positioning; content scrolls naturally. */
.ctfi-two { display: block; }
.ctfi-board-col { background: var(--board-bg); display: flex; align-items: center; }
.ctfi-panel-col { background: var(--panel); }
/* mobile: a flush rounded-top sheet below the board (no overlap of the board's
   lower edge, so the bottom-row labels stay clear); a soft upward shadow gives
   the raised-sheet feel without covering anything. */
.ctfi-panel {
  padding: 22px 22px 26px;
  border-radius: 22px 22px 0 0;
  position: relative;
  background: var(--panel);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
}

/* ---- the table board -------------------------------------------- */
/* the board SVG fills the box (preserveAspectRatio slice), so the box owns
   the 1000:680 aspect ratio and the overlay maps onto it 1:1. */
.ctfi-tablebox {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 680;
  margin: 0 auto;
  overflow: hidden;
  background: #b88a52;
}
.ctfi-tablebox svg { width: 100%; height: 100%; display: block; }

/* single-column board (intro / reveal): a framed centrepiece */
.ctfi-single .ctfi-tablebox {
  border: 3px solid var(--moss);
  border-radius: 10px;
  margin-bottom: 20px;
}

/* the warm bloom as an object fills in (per-answer + reveal sweep) */
.ctfi-tobj { transform-box: fill-box; transform-origin: center; }
.ctfi-tobj--bloom { animation: ctfi-tobj-bloom .5s ease-out; }
@keyframes ctfi-tobj-bloom {
  0% { filter: brightness(1.6); opacity: .35; }
  100% { filter: brightness(1); opacity: 1; }
}

/* the cup of tea's steam wisps (ambient loop; frozen under reduced motion) */
[data-steam] { transform-box: fill-box; transform-origin: center bottom; }
@keyframes steamRise {
  0%   { opacity: 0;    transform: translateY(8px)  scaleX(0.8); }
  25%  { opacity: 0.6; }
  60%  { opacity: 0.45; }
  100% { opacity: 0;    transform: translateY(-18px) scaleX(1.2); }
}

/* ---- the spotlight overlay (spotlight.js) ----------------------- */
.ctfi-overlay { position: absolute; inset: 0; pointer-events: none; }
.ctfi-veil {
  position: absolute; inset: 0; pointer-events: none;
  transition: background .4s ease-out;
}
.ctfi-glow {
  position: absolute; width: 44%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  /* brighten the art beneath like light would, rather than painting over it */
  mix-blend-mode: screen;
}
.ctfi-ring {
  position: absolute; width: 30%; aspect-ratio: 1;
  border: 2px solid rgba(107, 139, 114, 0.9);
  border-radius: 16px;
  transform: translate(-50%, -50%);
  animation: ctfi-ring-pulse 2.2s ease-in-out infinite;
}
@keyframes ctfi-ring-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.94); opacity: 0.55; }
  50%  { transform: translate(-50%, -50%) scale(1.06); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.55; }
}
.ctfi-pin, .ctfi-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--body); font-weight: 700; color: #fff;
  border: 2px solid var(--pebble);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.ctfi-pin { width: 30px; height: 30px; font-size: 14px; }
.ctfi-badge { width: 34px; height: 34px; font-size: 17px; }

/* ---- type ------------------------------------------------------- */
.ctfi-kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 10px;
  line-height: 1.5;
}
.ctfi-h {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--moss);
}
.ctfi-p { font-size: 17px; margin: 0 0 14px; color: var(--text); }
.ctfi-p--lead {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--moss);
  margin: 6px 0 16px;
}
.ctfi-aside { font-size: 14px; color: var(--text-muted); margin: 0 0 4px; }

/* the biggest gaps, named on the result */
.ctfi-gaps { font-size: 17px; color: var(--text); margin: 0 0 14px; }
.ctfi-gaps-lead {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--missing);
  margin: 0 0 6px;
}

/* the small heading above the reveal's "where each one lives" list */
.ctfi-noteslead {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 18px 0 6px;
}

.ctfi-out {
  font-size: 16px;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.ctfi-out--warm { background: #e9efe9; color: #3c4a3e; }

/* ---- reveal "where each one lives" list ------------------------- */
.ctfi-list { list-style: none; padding: 0; margin: 18px 0 0; }
.ctfi-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--divider);
}
.ctfi-mark { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.ctfi-mark svg { width: 24px; height: 24px; }
/* the table object repeated as a small icon beside its line: a warm wood
   tile (echoing the board) with the found mark on its corner */
.ctfi-noteart {
  position: relative;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(160deg, #c49a63, #ab7f4b);
  overflow: hidden;
}
.ctfi-noteart > svg { display: block; width: 100%; height: 100%; }
.ctfi-noteart-mark { position: absolute; right: 1px; bottom: 1px; width: 20px; height: 20px; }
.ctfi-noteart-mark svg { display: block; width: 20px; height: 20px; }
.ctfi-rowtext { display: flex; flex-direction: column; }
.ctfi-label { font-size: 16px; color: var(--text); }
.ctfi-note { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }

/* ---- answer group (the three choices) --------------------------- */
.ctfi-answers {
  margin-top: 8px;
  display: flex;
  gap: 9px;
}
.ctfi-answer {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .2px;
  color: var(--sage-text);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: 13px;
  padding: 12px 6px;
  min-height: 56px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.ctfi-answer:hover { border-color: var(--sage); background: #F3F6F1; transform: translateY(-1px); }
.ctfi-answer[data-answer="partial"]:hover { border-color: #C4A484; background: #F7F3EE; }
.ctfi-answer[data-answer="missing"]:hover { border-color: var(--missing); background: #F8F1F1; }
.ctfi-answer:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---- the who-are-you cards (intro picker) -----------------------
   A single row-button pattern (icon badge -> text -> arrow) rather than a
   card-with-footer-bar: the whole tile is one unmistakable tap target, and
   the two options are told apart by icon + label, not by a second hue. */
.ctfi-cards { display: grid; gap: 14px; margin: 18px 0 16px; }
.ctfi-card {
  text-align: left;
  background: var(--surface);
  border: 3px solid var(--sage);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(124, 154, 130, 0.10);
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.ctfi-card:hover { background: var(--tint-found); border-color: var(--sage-dark); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.ctfi-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ctfi-card-icon { flex: none; width: 44px; height: 44px; }
.ctfi-card-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctfi-card-title { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--moss); }
.ctfi-card-desc { font-size: 14px; color: var(--text-soft); }
.ctfi-card-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: transform .15s, background .15s;
}
.ctfi-card:hover .ctfi-card-arrow { background: var(--sage-dark); transform: translateX(3px); }

/* ---- the feedback card (after an answer) ------------------------ */
.ctfi-feedback {
  position: relative;
  border-radius: 20px;
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--tint-found);
}
.ctfi-feedback[data-status="partial"] { background: var(--tint-partial); }
.ctfi-feedback[data-status="missing"] { background: var(--tint-missing); }
.ctfi-feedback-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ctfi-feedback-badge { width: 34px; height: 34px; flex: none; }
.ctfi-feedback-badge svg { width: 34px; height: 34px; }
.ctfi-feedback-said { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--sage-text); }
.ctfi-feedback[data-status="partial"] .ctfi-feedback-said { color: #8B6B4A; }
.ctfi-feedback[data-status="missing"] .ctfi-feedback-said { color: #a24d4d; }
.ctfi-feedback-said b { color: inherit; }
.ctfi-feedback-say { font-size: 16.5px; line-height: 1.6; color: var(--text); margin: 0; }

/* the folded "what findable looks like" tip, inside the card */
.ctfi-findable {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ctfi-findable-lead {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 4px;
}

/* ---- result: reassure band + stat tiles ------------------------- */
.ctfi-band {
  font-size: 16px;
  color: var(--text-soft);
  background: #eef1ea;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.ctfi-tiles { display: flex; gap: 8px; margin: 0 0 18px; }
.ctfi-tile {
  flex: 1;
  text-align: center;
  border-radius: 12px;
  padding: 12px 4px;
}
.ctfi-tile-n { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1; }
.ctfi-tile-l { font-size: 11px; margin-top: 4px; }
.ctfi-tile--found { background: var(--tile-found); }
.ctfi-tile--found .ctfi-tile-n { color: var(--sage-text); }
.ctfi-tile--found .ctfi-tile-l { color: var(--sage-dark); }
.ctfi-tile--partial { background: var(--tile-partial); }
.ctfi-tile--partial .ctfi-tile-n, .ctfi-tile--partial .ctfi-tile-l { color: #8B6B4A; }
.ctfi-tile--missing { background: var(--tile-missing); }
.ctfi-tile--missing .ctfi-tile-n { color: #B85C5C; }
.ctfi-tile--missing .ctfi-tile-l { color: #a06868; }

.ctfi-h:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ---- share controls --------------------------------------------- */
/* The pass-along share is the SECONDARY action here, so it is styled quiet
   (outline, not filled) - the filled sage "See it sorted" / demo CTA above it
   must be the one thing the eye lands on. */
.ctfi-share { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--divider); }
.ctfi-sharerow { display: flex; flex-wrap: wrap; gap: 12px; }
.ctfi-btn.ctfi-btn--share {
  font-size: 16px;
  min-height: 52px;
  color: var(--sage-text);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  box-shadow: none;
}
.ctfi-btn.ctfi-btn--share:hover { background: #f3efe4; border-color: var(--sage); }

/* what "copy" and "save" act on, shown rather than described: the result
   card as a thumbnail with the pass-along message beside it (desktop
   fallback only; the native share sheet previews these itself) */
.ctfi-sharepreview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
}
.ctfi-sharethumb {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}
.ctfi-sharemsg {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* the optional "who did you do this for?" chips (loved persona only): a quiet
   single-select row above the share buttons. Tapping the chosen chip again
   clears it back to the generic wording. */
.ctfi-relrow { margin: 0 0 14px; }
.ctfi-relprompt { font-size: 14px; color: var(--text-muted); margin: 0 0 8px; }
.ctfi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ctfi-chip {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  color: var(--sage-text);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: 999px;
  min-height: 48px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ctfi-chip:hover { background: #f3efe4; border-color: var(--sage); }
.ctfi-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ctfi-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--sage);
  border-color: var(--sage-dark);
}

/* the halfway beat: one quiet glance at the whole table after answer four,
   a sage aside distinct from the status-tinted feedback card above it */
.ctfi-midway {
  font-size: 15px;
  color: var(--sage-text);
  background: var(--tint-found);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 0;
}

/* ---- buttons ---------------------------------------------------- */
.ctfi-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.ctfi-actions--cta { flex-direction: column; align-items: stretch; }

/* the result's "See it sorted" is the primary conversion step - make it
   unmissable: full width, larger, a lift shadow and a forward arrow. Stays
   full width at every breakpoint (overrides the desktop `width:auto`). */
.ctfi-actions--primary { margin-top: 24px; }
.ctfi-actions--primary .ctfi-btn {
  width: 100%;
  font-size: 20px;
  min-height: 66px;
  padding: 18px 28px;
  box-shadow: 0 12px 28px rgba(107, 139, 114, 0.42);
}
.ctfi-cta-arrow { margin-left: 10px; font-weight: 700; }
.ctfi-actions--primary .ctfi-btn:hover .ctfi-cta-arrow { transform: translateX(2px); }

.ctfi-btn {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2px;
  color: #fff;
  background: var(--sage);
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow-btn);
  padding: 14px 22px;
  min-height: 56px;
  width: 100%;
  cursor: pointer;
  transition: background .15s;
}
.ctfi-btn:hover { background: var(--sage-dark); }
.ctfi-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.ctfi-btn--ghost {
  color: var(--sage-text);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  box-shadow: none;
}
.ctfi-btn--ghost:hover { background: #f3efe4; border-color: var(--sage); }

/* ---- helpers ---------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* phones: shrink the intro's empty board so the who-are-you choice arrives
   nearer the first screen (a board of dashed gaps doesn't earn full width) */
@media (max-width: 479px) {
  #ctfi-introboard { max-width: 76%; margin-left: auto; margin-right: auto; }
}

/* gentle scene entrance */
#ctfi-root > * { animation: ctfi-fade .28s ease-out both; }
@keyframes ctfi-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- larger screens --------------------------------------------- */
@media (min-width: 480px) {
  .ctfi-single { padding: 30px 30px 34px; }
  .ctfi-panel { padding: 26px 30px 30px; }
  .ctfi-h { font-size: 26px; }
  .ctfi-p { font-size: 18px; }
  .ctfi-actions--cta { flex-direction: row; align-items: center; }
  .ctfi-btn { width: auto; }
  .ctfi-actions--cta .ctfi-btn { flex: 1; }
  .ctfi-card { padding: 14px 16px; gap: 16px; min-height: 96px; }
  .ctfi-card-icon { width: 52px; height: 52px; }
  .ctfi-card-title { font-size: 21px; }
  .ctfi-card-desc { font-size: 15px; }
  .ctfi-card-arrow { width: 40px; height: 40px; font-size: 18px; }
}

/* desktop: the board becomes the hero, board-left / panel-right on round and
   result. The card widens for those scenes; the single-column scenes keep a
   comfortable reading measure. */
@media (min-width: 820px) {
  .ctfi-stage { max-width: min(620px, 92vw); }
  .ctfi-stage--wide { max-width: min(1100px, 94vw); }
  .ctfi-p { font-size: 19px; }

  .ctfi-two { display: grid; grid-template-columns: 1.4fr min(440px, 42%); }
  .ctfi-board-col { min-width: 0; }
  .ctfi-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    padding: 34px;
    overflow: auto;
  }
  .ctfi-h { font-size: 28px; }
}

/* ---- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, #ctfi-root > * { animation: none !important; transition: none !important; }
  /* the steam wisps start at opacity 0 and rely on the loop to show; with the
     animation killed they would vanish, so freeze them softly visible. */
  [data-steam] { opacity: 0.28 !important; transform: none !important; }
}