/* ABSOLUTE ARCADE — homepage (hero marquee + cabinet grid) */

/* ---------- Hero marquee ---------- */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.hero__kicker { margin-bottom: 18px; }
.hero__kicker .coin {
  display: inline-block; background: var(--c-sun); color: var(--ink);
  border: var(--border); border-radius: 999px; padding: 2px 12px;
  box-shadow: var(--shadow-sm); margin-right: 10px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.wordmark .a { color: var(--c-magenta); }
.wordmark .b { color: var(--c-cobalt); display: block; }
/* layered hard shadow on the wordmark for a backglass pop */
.wordmark { text-shadow: 4px 4px 0 var(--ink); }

.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 28px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; }

/* The attract-mode screen */
.screenbox {
  position: relative;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-grape);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  rotate: 1.4deg;
}
.screenbox__bezel {
  border-radius: 12px;
  background: var(--screen);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
}
#attract { display: block; width: 100%; height: 100%; }
.screenbox__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 4px);
  mix-blend-mode: multiply;
}
.screenbox__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-mint);
}
.screenbox__coin {
  position: absolute; top: -16px; right: 26px;
  background: var(--c-sun); color: var(--ink);
  border: var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; padding: 4px 12px; box-shadow: var(--shadow-sm);
  rotate: -3deg;
}

/* ---------- Section headers ---------- */
.section { padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 88px); }
.section__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
  border-top: var(--border); padding-top: 22px;
}
.section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.section__title em { color: var(--c-magenta); font-style: normal; }

/* ---------- Filter chips ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: 999px;
  padding: 7px 14px; box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---------- Cabinet grid ---------- */
.cabinets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: clamp(20px, 3vw, 30px);
}
.cabinet {
  display: flex; flex-direction: column;
  background: var(--cab, var(--c-cobalt));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cabinet:hover, .cabinet:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-lg);
}
.cabinet:active {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-sm);
}
.cabinet__screen {
  margin: 14px 14px 0;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, #3940A2 0%, #25215E 54%, #15133A 100%);
  aspect-ratio: 5 / 4;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.32);
}
.cabinet__screen::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 62%);
  filter: blur(1px);
  pointer-events: none;
}
.cabinet__screen::after { /* scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.12) 2px 4px);
}
.cabinet__glyph {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 8vw, 4rem);
  filter: grayscale(0.04) drop-shadow(0 0 18px rgba(255,255,255,0.2));
  transition: transform 0.25s ease, filter 0.25s ease;
  transform: translateZ(0);
}
.cabinet:hover .cabinet__glyph {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 22px var(--cab));
}
.cabinet__preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(1.08) contrast(0.98);
}
.cabinet__preview[hidden] {
  display: none;
}
.cabinet--artified .cabinet__glyph {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.cabinet--has-preview .cabinet__art {
  display: none;
}
.cabinet--has-preview .cabinet__marquee {
  display: none;
}
.cabinet__art {
  --art-hue: 210;
  --art-spin: 0deg;
  --art-drift: 0%;
  --art-scale: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, hsla(calc(var(--art-hue) + 44), 92%, 72%, 0.72) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 24%, hsla(calc(var(--art-hue) + 155), 86%, 68%, 0.45) 0 16px, transparent 17px),
    linear-gradient(135deg, hsl(var(--art-hue), 68%, 38%), hsl(calc(var(--art-hue) + 42), 68%, 22%));
}
.cabinet__art::before,
.cabinet__art::after,
.cabinet__art-part {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.cabinet__art::before {
  inset: 16% 12% auto;
  height: 2px;
  background: rgba(255,255,255,0.38);
  box-shadow:
    0 24px 0 rgba(255,255,255,0.12),
    0 48px 0 rgba(255,255,255,0.1),
    0 72px 0 rgba(255,255,255,0.08);
}
.cabinet__art::after {
  left: 12%;
  right: 12%;
  bottom: 13%;
  height: 8px;
  border: 2px solid rgba(251,250,255,0.48);
  border-left: 0;
  border-right: 0;
  transform: skewX(-14deg);
}
.cabinet__art-part--1 {
  width: 36%;
  aspect-ratio: 1;
  left: calc(30% + var(--art-drift));
  top: 26%;
  border: 3px solid rgba(251,250,255,0.86);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.08)),
    hsl(calc(var(--art-hue) + 96), 86%, 56%);
  box-shadow: 7px 8px 0 rgba(23,20,42,0.58);
  transform: rotate(var(--art-spin)) scale(var(--art-scale));
}
.cabinet__art-part--2 {
  width: 18%;
  aspect-ratio: 1;
  right: 19%;
  top: 30%;
  border-radius: 999px;
  background: var(--c-sun);
  border: 3px solid rgba(23,20,42,0.7);
  box-shadow: 0 0 0 6px rgba(255,194,59,0.18);
}
.cabinet__art-part--3 {
  width: 42%;
  height: 18%;
  left: 20%;
  bottom: 22%;
  border: 3px solid rgba(23,20,42,0.62);
  border-radius: 999px 999px 14px 14px;
  background: hsl(calc(var(--art-hue) + 180), 74%, 62%);
  box-shadow: 5px 6px 0 rgba(23,20,42,0.42);
}
.cabinet__art-part--4,
.cabinet__art-part--5,
.cabinet__art-part--6,
.cabinet__art-part--7 {
  width: 9%;
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(251,250,255,0.82);
  border: 2px solid rgba(23,20,42,0.55);
}
.cabinet__art-part--4 { left: 15%; top: 20%; transform: rotate(12deg); }
.cabinet__art-part--5 { right: 16%; bottom: 26%; transform: rotate(-18deg); }
.cabinet__art-part--6 { left: 48%; bottom: 13%; transform: rotate(22deg); }
.cabinet__art-part--7 { right: 32%; top: 15%; transform: rotate(-8deg); }

.cabinet__art--card {
  background:
    radial-gradient(circle at 17% 18%, rgba(251,250,255,0.6) 0 10px, transparent 11px),
    radial-gradient(circle at 82% 74%, rgba(255,61,127,0.34) 0 18px, transparent 19px),
    linear-gradient(145deg, #14D1A3 0%, #267F84 46%, #17142A 100%);
}
.cabinet__art--card .cabinet__art-part--1,
.cabinet__art--card .cabinet__art-part--2,
.cabinet__art--card .cabinet__art-part--3 {
  width: 31%;
  aspect-ratio: 3 / 4;
  top: 27%;
  border-radius: 9px;
  border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 50% 28%, #FF3D7F 0 9px, transparent 10px),
    linear-gradient(#FBFAFF, #ECEAFB);
}
.cabinet__art--card .cabinet__art-part--1 { left: 20%; transform: rotate(-13deg); }
.cabinet__art--card .cabinet__art-part--2 { left: 35%; transform: rotate(2deg); box-shadow: 5px 6px 0 rgba(23,20,42,0.45); }
.cabinet__art--card .cabinet__art-part--3 { left: 50%; transform: rotate(15deg); background:
  radial-gradient(circle at 50% 28%, #17142A 0 8px, transparent 9px),
  linear-gradient(#FFC23B, #FBFAFF); }
.cabinet__art--card .cabinet__art-part--4,
.cabinet__art--card .cabinet__art-part--5,
.cabinet__art--card .cabinet__art-part--6,
.cabinet__art--card .cabinet__art-part--7 {
  border-radius: 999px;
  background: var(--c-sun);
}

.cabinet__art--word {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(145deg, #243D7A, #15133A);
}
.cabinet__art--word .cabinet__art-part {
  width: 24%;
  aspect-ratio: 1;
  border: 3px solid rgba(23,20,42,0.72);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.1)),
    hsl(calc(var(--art-hue) + 35), 84%, 66%);
  box-shadow: 5px 5px 0 rgba(23,20,42,0.45);
}
.cabinet__art--word .cabinet__art-part--1 { left: 20%; top: 27%; transform: rotate(-8deg); }
.cabinet__art--word .cabinet__art-part--2 { left: 39%; top: 21%; transform: rotate(5deg); background-color: var(--c-mint); }
.cabinet__art--word .cabinet__art-part--3 { left: 56%; top: 33%; transform: rotate(-3deg); background-color: var(--c-sun); }
.cabinet__art--word .cabinet__art-part--4 { left: 26%; top: 53%; transform: rotate(7deg); background-color: #FBFAFF; }
.cabinet__art--word .cabinet__art-part--5 { left: 47%; top: 55%; transform: rotate(-9deg); background-color: var(--c-magenta); }
.cabinet__art--word .cabinet__art-part--6 { width: 12%; left: 73%; top: 20%; border-radius: 999px; background: var(--c-sun); }
.cabinet__art--word .cabinet__art-part--7 { width: 9%; left: 13%; top: 66%; border-radius: 999px; background: var(--c-mint); }

.cabinet__art--space {
  background:
    radial-gradient(circle at 22% 18%, #FBFAFF 0 2px, transparent 3px),
    radial-gradient(circle at 74% 26%, #FBFAFF 0 2px, transparent 3px),
    radial-gradient(circle at 58% 76%, rgba(255,194,59,0.52) 0 22px, transparent 23px),
    linear-gradient(145deg, #17142A, #243D7A);
}
.cabinet__art--space .cabinet__art-part--1 {
  width: 36%;
  left: 34%;
  top: 29%;
  border-radius: 999px 999px 45% 45%;
  background: linear-gradient(135deg, #FBFAFF, #8BA0FF);
  transform: rotate(32deg);
}
.cabinet__art--space .cabinet__art-part--2 {
  width: 13%;
  right: 22%;
  top: 28%;
  border-radius: 999px;
  background: var(--c-sun);
}
.cabinet__art--space .cabinet__art-part--3 {
  width: 43%;
  height: 8%;
  left: 18%;
  bottom: 29%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c-magenta), var(--c-mint));
  transform: rotate(-18deg);
}

.cabinet__art--nautical {
  background:
    linear-gradient(180deg, #243D7A 0 46%, #14D1A3 47% 100%);
}
.cabinet__art--nautical::after {
  left: 0;
  right: 0;
  bottom: 16%;
  height: 22%;
  border: 0;
  background:
    radial-gradient(60% 60% at 22% 0%, rgba(251,250,255,0.48) 0 18px, transparent 19px),
    radial-gradient(60% 60% at 72% 0%, rgba(251,250,255,0.36) 0 18px, transparent 19px);
  transform: none;
}
.cabinet__art--nautical .cabinet__art-part--1 {
  width: 42%;
  height: 20%;
  left: 29%;
  top: 52%;
  border-radius: 10px 10px 34px 34px;
  background: #FFC23B;
}
.cabinet__art--nautical .cabinet__art-part--2 {
  width: 4%;
  height: 38%;
  left: 50%;
  top: 24%;
  border-radius: 999px;
  background: #FBFAFF;
}
.cabinet__art--nautical .cabinet__art-part--3 {
  width: 26%;
  height: 32%;
  left: 53%;
  top: 25%;
  clip-path: polygon(0 0, 100% 70%, 0 100%);
  background: var(--c-magenta);
}

.cabinet__art--circuit {
  background:
    linear-gradient(90deg, rgba(20,209,163,0.18) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(0deg, rgba(20,209,163,0.16) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(145deg, #15133A, #243D7A);
}
.cabinet__art--circuit .cabinet__art-part {
  background: var(--c-mint);
  border: 3px solid rgba(251,250,255,0.64);
  box-shadow: 0 0 18px rgba(20,209,163,0.52);
}
.cabinet__art--circuit .cabinet__art-part--1 { width: 24%; left: 38%; top: 34%; border-radius: 14px; }
.cabinet__art--circuit .cabinet__art-part--2,
.cabinet__art--circuit .cabinet__art-part--3 { width: 34%; height: 5%; top: 45%; border-radius: 999px; }
.cabinet__art--circuit .cabinet__art-part--2 { left: 12%; }
.cabinet__art--circuit .cabinet__art-part--3 { right: 12%; }

.cabinet__art--platform .cabinet__art-part--1,
.cabinet__art--platform .cabinet__art-part--2,
.cabinet__art--platform .cabinet__art-part--3 {
  width: 23%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF8A3D, #FFC23B);
}
.cabinet__art--platform .cabinet__art-part--1 { left: 22%; top: 48%; }
.cabinet__art--platform .cabinet__art-part--2 { left: 40%; top: 35%; }
.cabinet__art--platform .cabinet__art-part--3 { left: 58%; top: 48%; }

.cabinet__art--field {
  background:
    radial-gradient(circle at 72% 22%, #FFC23B 0 18px, transparent 19px),
    linear-gradient(180deg, #76B7FF 0 46%, #14D1A3 47% 100%);
}
.cabinet__art--field .cabinet__art-part--1 {
  width: 18%;
  height: 42%;
  left: 44%;
  top: 38%;
  border-radius: 999px 999px 6px 6px;
  background: #FF3D7F;
}
.cabinet__art--field .cabinet__art-part--2,
.cabinet__art--field .cabinet__art-part--3 {
  width: 24%;
  height: 16%;
  top: 44%;
  border-radius: 999px 999px 0 999px;
  background: #FBFAFF;
}
.cabinet__art--field .cabinet__art-part--2 { left: 22%; transform: rotate(-24deg); }
.cabinet__art--field .cabinet__art-part--3 { right: 20%; transform: rotate(34deg) scaleX(-1); }

.cabinet__art--cavern {
  background:
    radial-gradient(circle at 28% 72%, rgba(20,209,163,0.42) 0 18px, transparent 19px),
    linear-gradient(145deg, #17142A, #51306E);
}
.cabinet__art--cavern .cabinet__art-part {
  clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%);
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #FBFAFF, hsl(calc(var(--art-hue) + 100), 86%, 62%));
}
.cabinet__art--cavern .cabinet__art-part--1 { width: 28%; left: 37%; top: 31%; }
.cabinet__art--cavern .cabinet__art-part--2 { width: 18%; left: 22%; top: 52%; }
.cabinet__art--cavern .cabinet__art-part--3 { width: 16%; right: 21%; top: 22%; }

.cabinet__art--puzzle .cabinet__art-part--1,
.cabinet__art--puzzle .cabinet__art-part--2,
.cabinet__art--puzzle .cabinet__art-part--3,
.cabinet__art--brain .cabinet__art-part--1,
.cabinet__art--brain .cabinet__art-part--2,
.cabinet__art--brain .cabinet__art-part--3 {
  border-radius: 14px;
}
.cabinet__art--arcade .cabinet__art-part--1 {
  border-radius: 999px 999px 14px 14px;
}
.cabinet__art--arcade .cabinet__art-part--2 {
  width: 12%;
  right: 28%;
  top: 30%;
  border-radius: 999px;
  background: #FBFAFF;
}
.cabinet__art--arcade .cabinet__art-part--3 {
  width: 52%;
  height: 5%;
  left: 24%;
  bottom: 25%;
  border-radius: 999px;
  background: var(--c-mint);
}

.cabinet__motif--snake .cabinet__art-part--1 {
  width: 54%;
  height: 32%;
  left: 22%;
  top: 43%;
  border: 9px solid #F7F36B;
  border-right-color: transparent;
  border-radius: 999px 999px 10px 999px;
  background: transparent;
}
.cabinet__motif--snake .cabinet__art-part--2 {
  width: 14%;
  right: 25%;
  top: 38%;
  border-radius: 999px;
  background: #FBFAFF;
}
.cabinet__motif--bricks .cabinet__art-part--1,
.cabinet__motif--drop .cabinet__art-part--1,
.cabinet__motif--stacks .cabinet__art-part--1,
.cabinet__motif--crates .cabinet__art-part--1,
.cabinet__motif--card-cascade .cabinet__art-part--1 {
  width: 58%;
  height: 38%;
  left: 23%;
  top: 34%;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(23,20,42,0.72) 3px, transparent 3px) 0 0 / 33% 50%,
    linear-gradient(0deg, rgba(23,20,42,0.72) 3px, transparent 3px) 0 0 / 100% 50%,
    linear-gradient(135deg, #FF8A3D, #FFC23B);
}
.cabinet__motif--merge .cabinet__art-part--1,
.cabinet__motif--tiles .cabinet__art-part--1,
.cabinet__motif--grid .cabinet__art-part--1,
.cabinet__motif--number-grid .cabinet__art-part--1,
.cabinet__motif--crossword .cabinet__art-part--1 {
  width: 50%;
  left: 26%;
  top: 29%;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(23,20,42,0.55) 3px, transparent 3px) 0 0 / 33.33% 100%,
    linear-gradient(0deg, rgba(23,20,42,0.55) 3px, transparent 3px) 0 0 / 100% 33.33%,
    linear-gradient(135deg, #80C7F2, #C958E8);
}
.cabinet__motif--memory .cabinet__art-part--1,
.cabinet__motif--draw-cards .cabinet__art-part--1,
.cabinet__motif--card-table .cabinet__art-part--1 {
  width: 56%;
  height: 34%;
  left: 22%;
  top: 34%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 23% 50%, #FBFAFF 0 12px, transparent 13px),
    radial-gradient(circle at 50% 50%, #FFC23B 0 12px, transparent 13px),
    radial-gradient(circle at 77% 50%, #FF3D7F 0 12px, transparent 13px),
    transparent;
}
.cabinet__motif--mines .cabinet__art-part--1 {
  width: 52%;
  left: 25%;
  top: 30%;
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 25%, #14D1A3 0 9px, transparent 10px),
    radial-gradient(circle at 50% 50%, #FF3D7F 0 9px, transparent 10px),
    radial-gradient(circle at 75% 75%, #FBFAFF 0 9px, transparent 10px),
    linear-gradient(90deg, rgba(23,20,42,0.5) 3px, transparent 3px) 0 0 / 33% 100%,
    linear-gradient(0deg, rgba(23,20,42,0.5) 3px, transparent 3px) 0 0 / 100% 33%,
    #51306E;
}
.cabinet__motif--paddle .cabinet__art-part--1,
.cabinet__motif--bumper .cabinet__art-part--1 {
  width: 8%;
  height: 44%;
  left: 24%;
  top: 30%;
  border-radius: 999px;
  background: var(--c-magenta);
  box-shadow: 48px 0 0 var(--c-mint);
}
.cabinet__motif--paddle .cabinet__art-part--2,
.cabinet__motif--bumper .cabinet__art-part--2 {
  width: 13%;
  left: 46%;
  top: 43%;
  border-radius: 999px;
  background: var(--c-sun);
}
.cabinet__motif--flap .cabinet__art-part--1,
.cabinet__motif--wind .cabinet__art-part--1 {
  width: 36%;
  left: 31%;
  top: 35%;
  border-radius: 999px 999px 18px 18px;
  background: #B98AF4;
}
.cabinet__motif--flap .cabinet__art-part--2,
.cabinet__motif--wind .cabinet__art-part--2 {
  width: 28%;
  height: 15%;
  right: 19%;
  top: 41%;
  border-radius: 999px 999px 0 999px;
  background: #FBFAFF;
  transform: rotate(-15deg);
}
.cabinet__motif--meteor .cabinet__art-part--1,
.cabinet__motif--comet-card .cabinet__art-part--1 {
  width: 19%;
  left: 55%;
  top: 30%;
  border-radius: 999px;
  background: #FFC23B;
  box-shadow: -28px 18px 0 -5px #FF8A3D, -58px 36px 0 -8px #FF3D7F;
}
.cabinet__motif--shield .cabinet__art-part--1,
.cabinet__motif--defense .cabinet__art-part--1 {
  width: 38%;
  left: 32%;
  top: 27%;
  clip-path: polygon(50% 0, 88% 16%, 78% 76%, 50% 100%, 22% 76%, 12% 16%);
  border-radius: 0;
  background: linear-gradient(135deg, #FBFAFF, #14D1A3);
}
.cabinet__motif--gems .cabinet__art-part--1,
.cabinet__motif--crystals .cabinet__art-part--1,
.cabinet__motif--crystal .cabinet__art-part--1 {
  width: 45%;
  left: 28%;
  top: 29%;
  clip-path: polygon(50% 0, 96% 30%, 78% 100%, 22% 100%, 4% 30%);
  border-radius: 0;
  background: linear-gradient(135deg, #FBFAFF, #8EF3DD 48%, #C958E8);
}
.cabinet__motif--bubbles .cabinet__art-part--1,
.cabinet__motif--clouds .cabinet__art-part--1 {
  width: 62%;
  height: 34%;
  left: 20%;
  top: 34%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 54%, rgba(251,250,255,0.92) 0 17px, transparent 18px),
    radial-gradient(circle at 49% 36%, rgba(128,199,242,0.92) 0 21px, transparent 22px),
    radial-gradient(circle at 73% 58%, rgba(251,250,255,0.82) 0 15px, transparent 16px);
}
.cabinet__motif--maze .cabinet__art-part--1,
.cabinet__motif--path .cabinet__art-part--1,
.cabinet__motif--trail .cabinet__art-part--1,
.cabinet__motif--start-finish .cabinet__art-part--1 {
  width: 58%;
  height: 40%;
  left: 21%;
  top: 32%;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 18%, #FBFAFF 18% 24%, transparent 24% 45%, #FBFAFF 45% 51%, transparent 51%),
    linear-gradient(0deg, transparent 0 22%, #FBFAFF 22% 28%, transparent 28% 62%, #FBFAFF 62% 68%, transparent 68%),
    #243D7A;
}
.cabinet__motif--code .cabinet__art-part--1,
.cabinet__motif--keys .cabinet__art-part--1,
.cabinet__motif--typing .cabinet__art-part--1 {
  width: 58%;
  height: 35%;
  left: 21%;
  top: 35%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #14D1A3 0 18%, transparent 18% 24%, #FFC23B 24% 42%, transparent 42% 48%, #FBFAFF 48% 72%, transparent 72%),
    #17142A;
  box-shadow: 0 0 18px rgba(20,209,163,0.42);
}
.cabinet__motif--vials .cabinet__art-part--1,
.cabinet__motif--prism .cabinet__art-part--1 {
  width: 52%;
  height: 42%;
  left: 25%;
  top: 31%;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(90deg, #FF3D7F 0 25%, #14D1A3 25% 50%, #FFC23B 50% 75%, #80C7F2 75%),
    #FBFAFF;
  border-color: rgba(251,250,255,0.75);
}
.cabinet__motif--dice .cabinet__art-part--1 {
  width: 45%;
  left: 29%;
  top: 31%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 28%, #17142A 0 5px, transparent 6px),
    radial-gradient(circle at 72% 28%, #17142A 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, #17142A 0 5px, transparent 6px),
    radial-gradient(circle at 28% 72%, #17142A 0 5px, transparent 6px),
    radial-gradient(circle at 72% 72%, #17142A 0 5px, transparent 6px),
    #FBFAFF;
}
.cabinet__motif--beam .cabinet__art-part--1,
.cabinet__motif--circuit .cabinet__art-part--1,
.cabinet__motif--relay .cabinet__art-part--1 {
  width: 64%;
  height: 8%;
  left: 18%;
  top: 46%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC23B, #FBFAFF, #14D1A3);
  box-shadow: 0 0 18px rgba(255,194,59,0.65);
}
.cabinet__motif--shapes .cabinet__art-part--1,
.cabinet__motif--panels .cabinet__art-part--1,
.cabinet__motif--glyphs .cabinet__art-part--1 {
  width: 54%;
  height: 38%;
  left: 23%;
  top: 33%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 50%, #FF3D7F 0 13px, transparent 14px),
    linear-gradient(45deg, transparent 52%, #FFC23B 53% 72%, transparent 73%),
    conic-gradient(from 45deg at 76% 50%, #14D1A3 0 25%, transparent 0);
}
.cabinet__motif--gauge .cabinet__art-part--1,
.cabinet__motif--dials .cabinet__art-part--1,
.cabinet__motif--meter .cabinet__art-part--1 {
  width: 52%;
  height: 34%;
  left: 24%;
  top: 38%;
  border-radius: 999px 999px 14px 14px;
  background:
    conic-gradient(from 220deg, #FF3D7F 0 24%, #FFC23B 24% 50%, #14D1A3 50% 72%, transparent 72%),
    #17142A;
}
.cabinet__motif--coins .cabinet__art-part--1,
.cabinet__motif--sum .cabinet__art-part--1,
.cabinet__motif--total .cabinet__art-part--1 {
  width: 58%;
  height: 34%;
  left: 21%;
  top: 35%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 50%, #FFC23B 0 16px, transparent 17px),
    radial-gradient(circle at 50% 50%, #FFC23B 0 16px, transparent 17px),
    radial-gradient(circle at 76% 50%, #FFC23B 0 16px, transparent 17px);
}
.cabinet__motif--balance .cabinet__art-part--1 {
  width: 58%;
  height: 36%;
  left: 21%;
  top: 32%;
  border-radius: 0;
  background:
    linear-gradient(#FBFAFF 0 6px, transparent 6px) 50% 38% / 80% 6px no-repeat,
    radial-gradient(ellipse at 24% 72%, #FFC23B 0 22px, transparent 23px),
    radial-gradient(ellipse at 76% 72%, #14D1A3 0 22px, transparent 23px);
}
.cabinet__motif--anchor .cabinet__art-part--1,
.cabinet__motif--harbor .cabinet__art-part--1 {
  width: 42%;
  height: 44%;
  left: 31%;
  top: 29%;
  border: 8px solid #FBFAFF;
  border-top-width: 18px;
  border-radius: 999px 999px 8px 8px;
  background: transparent;
}
.cabinet__motif--moon .cabinet__art-part--1 {
  width: 38%;
  left: 32%;
  top: 29%;
  border-radius: 999px;
  background: radial-gradient(circle at 68% 36%, #243D7A 0 22px, transparent 23px), #FBFAFF;
}
.cabinet__motif--compass .cabinet__art-part--1,
.cabinet__motif--radar .cabinet__art-part--1 {
  width: 48%;
  left: 27%;
  top: 28%;
  border-radius: 999px;
  background:
    conic-gradient(from 20deg, transparent 0 35%, #FF3D7F 35% 42%, transparent 42%),
    radial-gradient(circle, transparent 0 32%, #14D1A3 33% 37%, transparent 38% 58%, #FBFAFF 59% 63%, transparent 64%),
    #17142A;
}
.cabinet__motif--rocket .cabinet__art-part--1 {
  width: 24%;
  height: 48%;
  left: 39%;
  top: 23%;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(#FBFAFF, #80C7F2);
  transform: rotate(24deg);
}
.cabinet__motif--rocket .cabinet__art-part--2 {
  width: 24%;
  height: 9%;
  left: 27%;
  top: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #FF8A3D, #FFC23B);
  transform: rotate(24deg);
}
.cabinet__motif--cargo .cabinet__art-part--1,
.cabinet__motif--parcel .cabinet__art-part--1,
.cabinet__motif--packet .cabinet__art-part--1,
.cabinet__motif--chute .cabinet__art-part--1 {
  width: 46%;
  height: 34%;
  left: 28%;
  top: 36%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(23,20,42,0.45) 46% 54%, transparent 55%),
    linear-gradient(135deg, #FFC23B, #FF8A3D);
}
.cabinet__motif--rail .cabinet__art-part--1,
.cabinet__motif--minecart .cabinet__art-part--1 {
  width: 62%;
  height: 36%;
  left: 19%;
  top: 38%;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(0deg, #FBFAFF 0 4px, transparent 5px) 0 82% / 100% 8px no-repeat,
    linear-gradient(90deg, transparent 0 18%, #FF8A3D 18% 78%, transparent 78%);
}
.cabinet__motif--gear .cabinet__art-part--1,
.cabinet__motif--rotor .cabinet__art-part--1 {
  width: 42%;
  left: 30%;
  top: 29%;
  border-radius: 999px;
  background: repeating-conic-gradient(#FFC23B 0 12deg, #17142A 12deg 20deg);
}
.cabinet__motif--cannon .cabinet__art-part--1 {
  width: 54%;
  height: 18%;
  left: 24%;
  top: 50%;
  border-radius: 999px;
  background: #17142A;
  transform: rotate(-18deg);
}
.cabinet__motif--magnet .cabinet__art-part--1 {
  width: 42%;
  height: 42%;
  left: 30%;
  top: 31%;
  border: 9px solid #FF3D7F;
  border-top-color: transparent;
  border-radius: 8px 8px 999px 999px;
  background: transparent;
}

.cabinet__motif--blackjack .cabinet__art-part--1,
.cabinet__motif--baccarat .cabinet__art-part--1,
.cabinet__motif--thirty-one .cabinet__art-part--1 {
  background:
    radial-gradient(circle at 34% 30%, #17142A 0 8px, transparent 9px),
    radial-gradient(circle at 66% 70%, #FF3D7F 0 8px, transparent 9px),
    linear-gradient(#FBFAFF, #FFC23B);
}
.cabinet__motif--trick-cards .cabinet__art-part--1,
.cabinet__motif--trump .cabinet__art-part--1,
.cabinet__motif--bridge .cabinet__art-part--1,
.cabinet__motif--piquet .cabinet__art-part--1,
.cabinet__motif--palace .cabinet__art-part--1 {
  width: 52%;
  height: 40%;
  left: 24%;
  top: 31%;
  border-radius: 10px;
  background:
    linear-gradient(105deg, #FBFAFF 0 31%, transparent 32%),
    linear-gradient(78deg, transparent 34%, #FFC23B 35% 66%, transparent 67%),
    linear-gradient(65deg, transparent 58%, #FF3D7F 59%);
}
.cabinet__motif--poker .cabinet__art-part--1,
.cabinet__motif--melds .cabinet__art-part--1,
.cabinet__motif--capture .cabinet__art-part--1,
.cabinet__motif--cribbage .cabinet__art-part--1 {
  width: 64%;
  height: 36%;
  left: 18%;
  top: 35%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 50%, #FBFAFF 0 14px, transparent 15px),
    radial-gradient(circle at 40% 50%, #FFC23B 0 14px, transparent 15px),
    radial-gradient(circle at 60% 50%, #FBFAFF 0 14px, transparent 15px),
    radial-gradient(circle at 80% 50%, #FF3D7F 0 14px, transparent 15px);
}
.cabinet__motif--war-cards .cabinet__art-part--1,
.cabinet__motif--snap-cards .cabinet__art-part--1,
.cabinet__motif--slapjack .cabinet__art-part--1,
.cabinet__motif--speed-cards .cabinet__art-part--1 {
  width: 50%;
  height: 40%;
  left: 25%;
  top: 31%;
  border-radius: 10px;
  background:
    linear-gradient(88deg, #FBFAFF 0 46%, #17142A 47% 53%, #FFC23B 54%);
}
.cabinet__motif--fish-cards .cabinet__art-part--1,
.cabinet__motif--old-maid .cabinet__art-part--1,
.cabinet__motif--crazy-eights .cabinet__art-part--1,
.cabinet__motif--shed-cards .cabinet__art-part--1,
.cabinet__motif--bluff .cabinet__art-part--1,
.cabinet__motif--rules .cabinet__art-part--1 {
  width: 54%;
  height: 36%;
  left: 23%;
  top: 34%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 50%, #FBFAFF 0 15px, transparent 16px),
    radial-gradient(circle at 51% 50%, #14D1A3 0 15px, transparent 16px),
    radial-gradient(circle at 74% 50%, #FF3D7F 0 15px, transparent 16px);
}
.cabinet__motif--hearts .cabinet__art-part--1,
.cabinet__motif--spades .cabinet__art-part--1,
.cabinet__motif--aces .cabinet__art-part--1 {
  width: 38%;
  height: 38%;
  left: 32%;
  top: 33%;
  border-radius: 999px 999px 10px 10px;
  background: #FF3D7F;
  transform: rotate(45deg);
}
.cabinet__motif--pyramid .cabinet__art-part--1,
.cabinet__motif--peaks .cabinet__art-part--1,
.cabinet__motif--sevens .cabinet__art-part--1,
.cabinet__motif--tableau .cabinet__art-part--1,
.cabinet__motif--solitaire .cabinet__art-part--1,
.cabinet__motif--freecell .cabinet__art-part--1,
.cabinet__motif--reserve .cabinet__art-part--1,
.cabinet__motif--accordion .cabinet__art-part--1,
.cabinet__motif--fan .cabinet__art-part--1,
.cabinet__motif--spider .cabinet__art-part--1,
.cabinet__motif--golf-cards .cabinet__art-part--1 {
  width: 58%;
  height: 42%;
  left: 21%;
  top: 31%;
  border-radius: 8px;
  background:
    linear-gradient(120deg, transparent 0 18%, #FBFAFF 19% 32%, transparent 33%),
    linear-gradient(120deg, transparent 22%, #FFC23B 23% 44%, transparent 45%),
    linear-gradient(120deg, transparent 46%, #FF3D7F 47% 64%, transparent 65%),
    linear-gradient(120deg, transparent 66%, #FBFAFF 67% 84%, transparent 85%);
}

.cabinet__motif--letters .cabinet__art-part--1,
.cabinet__motif--vault .cabinet__art-part--1,
.cabinet__motif--phrase .cabinet__art-part--1,
.cabinet__motif--vowels .cabinet__art-part--1,
.cabinet__motif--cavern-letters .cabinet__art-part--1,
.cabinet__motif--anagram .cabinet__art-part--1,
.cabinet__motif--rhyme .cabinet__art-part--1,
.cabinet__motif--spelling .cabinet__art-part--1,
.cabinet__motif--ladder .cabinet__art-part--1,
.cabinet__motif--change .cabinet__art-part--1,
.cabinet__motif--morph .cabinet__art-part--1,
.cabinet__motif--swap .cabinet__art-part--1,
.cabinet__motif--rung .cabinet__art-part--1 {
  width: 62%;
  height: 40%;
  left: 19%;
  top: 31%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 38%, #FBFAFF 0 15px, transparent 16px),
    radial-gradient(circle at 50% 60%, #FFC23B 0 15px, transparent 16px),
    radial-gradient(circle at 78% 38%, #14D1A3 0 15px, transparent 16px);
}
.cabinet__motif--lighthouse .cabinet__art-part--1,
.cabinet__motif--beacon .cabinet__art-part--1 {
  width: 26%;
  height: 48%;
  left: 38%;
  top: 27%;
  clip-path: polygon(36% 0, 64% 0, 82% 100%, 18% 100%);
  border-radius: 0;
  background: repeating-linear-gradient(0deg, #FBFAFF 0 12px, #FF3D7F 12px 22px);
}
.cabinet__motif--marquee .cabinet__art-part--1,
.cabinet__motif--arcade-word .cabinet__art-part--1 {
  width: 62%;
  height: 30%;
  left: 19%;
  top: 37%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 50%, #FFC23B 0 5px, transparent 6px),
    radial-gradient(circle at 28% 50%, #FFC23B 0 5px, transparent 6px),
    radial-gradient(circle at 44% 50%, #FFC23B 0 5px, transparent 6px),
    radial-gradient(circle at 60% 50%, #FFC23B 0 5px, transparent 6px),
    radial-gradient(circle at 76% 50%, #FFC23B 0 5px, transparent 6px),
    radial-gradient(circle at 92% 50%, #FFC23B 0 5px, transparent 6px),
    #17142A;
}
.cabinet__motif--animal .cabinet__art-part--1,
.cabinet__motif--garden .cabinet__art-part--1,
.cabinet__motif--forest .cabinet__art-part--1,
.cabinet__motif--field .cabinet__art-part--1 {
  width: 50%;
  height: 40%;
  left: 25%;
  top: 34%;
  border-radius: 999px 999px 12px 12px;
  background:
    radial-gradient(circle at 34% 20%, #FBFAFF 0 8px, transparent 9px),
    radial-gradient(circle at 66% 20%, #FBFAFF 0 8px, transparent 9px),
    #14D1A3;
}
.cabinet__motif--kitchen .cabinet__art-part--1,
.cabinet__motif--pantry .cabinet__art-part--1,
.cabinet__motif--compound .cabinet__art-part--1 {
  width: 44%;
  height: 44%;
  left: 29%;
  top: 31%;
  border-radius: 10px 10px 18px 18px;
  background:
    linear-gradient(#FBFAFF 0 12%, transparent 12%),
    linear-gradient(90deg, #FFC23B 0 50%, #FF8A3D 50%);
}
.cabinet__motif--music .cabinet__art-part--1 {
  width: 42%;
  height: 48%;
  left: 34%;
  top: 27%;
  border: 7px solid #FFC23B;
  border-left-width: 0;
  border-bottom-width: 0;
  border-radius: 0 999px 0 0;
  background: transparent;
}
.cabinet__motif--sports .cabinet__art-part--1 {
  width: 38%;
  left: 32%;
  top: 31%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 44%, #FBFAFF 45% 55%, transparent 56%),
    linear-gradient(0deg, transparent 44%, #FBFAFF 45% 55%, transparent 56%),
    #FF8A3D;
}
.cabinet__motif--weather .cabinet__art-part--1 {
  width: 58%;
  height: 42%;
  left: 21%;
  top: 30%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 44%, #FBFAFF 0 18px, transparent 19px),
    radial-gradient(circle at 58% 36%, #FBFAFF 0 23px, transparent 24px),
    linear-gradient(120deg, transparent 56%, #FFC23B 57% 64%, transparent 65%);
}
.cabinet__motif--travel .cabinet__art-part--1,
.cabinet__motif--city .cabinet__art-part--1 {
  width: 54%;
  height: 40%;
  left: 23%;
  top: 33%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #FBFAFF 0 18%, transparent 18% 28%, #FFC23B 28% 46%, transparent 46% 56%, #14D1A3 56% 78%, transparent 78%),
    #243D7A;
}
.cabinet__motif--loot .cabinet__art-part--1,
.cabinet__motif--definition .cabinet__art-part--1,
.cabinet__motif--synonym .cabinet__art-part--1,
.cabinet__motif--antonym .cabinet__art-part--1,
.cabinet__motif--riddle .cabinet__art-part--1,
.cabinet__motif--homophone .cabinet__art-part--1,
.cabinet__motif--trivia .cabinet__art-part--1,
.cabinet__motif--category .cabinet__art-part--1,
.cabinet__motif--origin .cabinet__art-part--1,
.cabinet__motif--idiom .cabinet__art-part--1,
.cabinet__motif--prefix .cabinet__art-part--1,
.cabinet__motif--suffix .cabinet__art-part--1,
.cabinet__motif--flip .cabinet__art-part--1 {
  width: 58%;
  height: 38%;
  left: 21%;
  top: 33%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #FBFAFF 0 14%, transparent 14% 20%, #FFC23B 20% 34%, transparent 34% 40%, #14D1A3 40% 54%, transparent 54% 60%, #FF3D7F 60% 74%, transparent 74%),
    #17142A;
}
.cabinet__motif--arrows .cabinet__art-part--1,
.cabinet__motif--target .cabinet__art-part--1,
.cabinet__motif--catcher .cabinet__art-part--1,
.cabinet__motif--pulse .cabinet__art-part--1,
.cabinet__motif--tempo .cabinet__art-part--1 {
  width: 52%;
  height: 38%;
  left: 24%;
  top: 33%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #FFC23B 0 10px, transparent 11px),
    radial-gradient(circle at 50% 50%, transparent 0 22px, #FBFAFF 23px 27px, transparent 28px),
    radial-gradient(circle at 50% 50%, transparent 0 42px, #14D1A3 43px 47px, transparent 48px);
}
.cabinet__motif--orbit .cabinet__art-part--1,
.cabinet__motif--space-word .cabinet__art-part--1 {
  width: 56%;
  height: 38%;
  left: 22%;
  top: 33%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #FFC23B 0 13px, transparent 14px),
    radial-gradient(ellipse at 50% 50%, transparent 0 39%, #FBFAFF 40% 46%, transparent 47%);
}
.cabinet__motif--signal .cabinet__art-part--1,
.cabinet__motif--signals .cabinet__art-part--1,
.cabinet__motif--stripe .cabinet__art-part--1,
.cabinet__motif--switches .cabinet__art-part--1,
.cabinet__motif--locks .cabinet__art-part--1 {
  width: 58%;
  height: 38%;
  left: 21%;
  top: 33%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #FF3D7F 0 16%, transparent 16% 22%, #FFC23B 22% 38%, transparent 38% 44%, #14D1A3 44% 60%, transparent 60%),
    linear-gradient(0deg, transparent 0 42%, rgba(251,250,255,0.72) 43% 49%, transparent 50%),
    #17142A;
}
.cabinet__motif--clock .cabinet__art-part--1 {
  width: 42%;
  left: 30%;
  top: 30%;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, #FFC23B 0 8%, transparent 8% 100%),
    radial-gradient(circle, #FBFAFF 0 58%, #17142A 59% 64%, transparent 65%);
}
.cabinet__motif--flood .cabinet__art-part--1,
.cabinet__motif--lanes .cabinet__art-part--1,
.cabinet__motif--marbles .cabinet__art-part--1 {
  width: 60%;
  height: 40%;
  left: 20%;
  top: 32%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #FF3D7F 0 20%, #FFC23B 20% 40%, #14D1A3 40% 60%, #80C7F2 60% 80%, #C958E8 80%);
}
.cabinet__motif--forge .cabinet__art-part--1,
.cabinet__motif--rivet .cabinet__art-part--1 {
  width: 50%;
  height: 36%;
  left: 25%;
  top: 35%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 38%, #FFC23B 0 17px, transparent 18px),
    linear-gradient(0deg, #17142A 0 28%, #FF8A3D 29% 58%, #FBFAFF 59%);
}
.cabinet__motif--runes .cabinet__art-part--1,
.cabinet__motif--shadow .cabinet__art-part--1 {
  width: 52%;
  height: 40%;
  left: 24%;
  top: 32%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(23,20,42,0.82) 0 24%, transparent 24% 32%, rgba(251,250,255,0.92) 32% 56%, transparent 56% 64%, rgba(20,209,163,0.88) 64% 88%, transparent 88%),
    #51306E;
}
.cabinet__motif--spoons .cabinet__art-part--1 {
  width: 56%;
  height: 38%;
  left: 22%;
  top: 34%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 24% 38%, #FBFAFF 0 10px, transparent 11px),
    radial-gradient(ellipse at 50% 38%, #FBFAFF 0 10px, transparent 11px),
    radial-gradient(ellipse at 76% 38%, #FBFAFF 0 10px, transparent 11px),
    linear-gradient(90deg, transparent 20%, #FBFAFF 21% 24%, transparent 25% 46%, #FBFAFF 47% 50%, transparent 51% 72%, #FBFAFF 73% 76%, transparent 77%);
}
.cabinet__motif--spread .cabinet__art-part--1 {
  width: 58%;
  height: 36%;
  left: 21%;
  top: 35%;
  border-radius: 10px;
  background:
    linear-gradient(78deg, #FBFAFF 0 28%, transparent 29%),
    linear-gradient(102deg, transparent 34%, #FFC23B 35% 64%, transparent 65%),
    linear-gradient(116deg, transparent 58%, #FF3D7F 59%);
}
.cabinet__motif--spring .cabinet__art-part--1 {
  width: 40%;
  height: 44%;
  left: 31%;
  top: 31%;
  border: 7px solid #14D1A3;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 999px;
  background: transparent;
}
.cabinet__motif--card-climb .cabinet__art-part--1 {
  width: 56%;
  height: 44%;
  left: 22%;
  top: 29%;
  border-radius: 10px;
  background:
    linear-gradient(0deg, #FBFAFF 0 20%, transparent 21%) 0 72% / 100% 18% no-repeat,
    linear-gradient(0deg, #FFC23B 0 20%, transparent 21%) 0 48% / 100% 18% no-repeat,
    linear-gradient(0deg, #FF3D7F 0 20%, transparent 21%) 0 24% / 100% 18% no-repeat;
}
.cabinet__motif--word-forge .cabinet__art-part--1 {
  width: 62%;
  height: 40%;
  left: 19%;
  top: 32%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 42%, #FBFAFF 0 13px, transparent 14px),
    radial-gradient(circle at 50% 58%, #FFC23B 0 13px, transparent 14px),
    radial-gradient(circle at 78% 42%, #14D1A3 0 13px, transparent 14px),
    linear-gradient(0deg, #FF8A3D 0 8px, transparent 9px),
    #17142A;
}
.cabinet__motif--lantern .cabinet__art-part--1 {
  width: 34%;
  height: 48%;
  left: 34%;
  top: 27%;
  border-radius: 14px 14px 20px 20px;
  background:
    radial-gradient(circle at 50% 52%, #FFC23B 0 20px, transparent 21px),
    linear-gradient(90deg, #17142A 0 16%, transparent 16% 84%, #17142A 84%),
    #FBFAFF;
}
.cabinet__motif--ferry .cabinet__art-part--1,
.cabinet__motif--tide .cabinet__art-part--1 {
  width: 60%;
  height: 34%;
  left: 20%;
  top: 42%;
  border-radius: 10px 10px 999px 999px;
  background:
    linear-gradient(90deg, transparent 0 12%, #FBFAFF 12% 28%, transparent 28% 36%, #FBFAFF 36% 52%, transparent 52%),
    linear-gradient(0deg, #243D7A 0 28%, #FFC23B 29% 70%, transparent 71%);
}
.cabinet__motif--tide .cabinet__art-part--2,
.cabinet__motif--ferry .cabinet__art-part--2 {
  width: 70%;
  height: 12%;
  left: 15%;
  top: 70%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 24% 50%, rgba(251,250,255,0.86) 0 16px, transparent 17px),
    radial-gradient(ellipse at 58% 50%, rgba(251,250,255,0.68) 0 18px, transparent 19px);
}
.cabinet__marquee {
  position: absolute; z-index: 2; top: 8px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255,255,255,0.74);
}
.cabinet__body { padding: 14px 16px 16px; }
.cabinet__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cabinet__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: 999px; padding: 2px 9px;
}
.cabinet__desc { font-size: 0.92rem; color: var(--ink); opacity: 0.82; margin: 6px 0 14px; }
.cabinet__slot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 9px 16px;
}
.cabinet__slot .arrow { transition: transform 0.15s ease; }
.cabinet:hover .cabinet__slot .arrow { transform: translateX(5px); }
.cabinet.is-hidden { display: none; }
.cabinet[data-tags~="card"] {
  --cab: var(--c-sun);
}
.cabinet[data-tags~="card"] .cabinet__screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.55) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 78%, rgba(255,194,59,0.42) 0 10px, transparent 11px),
    linear-gradient(145deg, #49D6B9 0%, #2FAE91 44%, #1C6F70 100%);
}
.cabinet[data-tags~="card"] .cabinet__screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 44%;
  aspect-ratio: 3 / 4.1;
  left: 17%;
  top: 28%;
  border: 2px solid rgba(23,20,42,0.72);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,61,127,0.18), transparent 42%),
    #FBFAFF;
  box-shadow:
    18px -12px 0 -2px #FFC23B,
    20px -14px 0 0 rgba(23,20,42,0.72),
    36px 8px 0 -2px #ECEAFB,
    38px 6px 0 0 rgba(23,20,42,0.72);
  transform: rotate(-9deg);
}
.cabinet[data-tags~="card"] .cabinet__screen::after {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0) 0 3px, rgba(255,255,255,0.08) 3px 5px),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.08));
}
.cabinet[data-tags~="card"] .cabinet__glyph {
  display: grid;
  place-items: center;
  min-width: clamp(78px, 12vw, 104px);
  min-height: clamp(78px, 12vw, 104px);
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #FBFAFF;
  color: var(--ink);
  box-shadow: 5px 5px 0 rgba(23,20,42,0.72);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.8rem);
  line-height: 1;
  text-shadow: none;
}
.cabinet[data-tags~="card"]:nth-child(3n) .cabinet__screen {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(255,255,255,0.14) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(145deg, #FF8A3D 0%, #FFCB55 52%, #3D5AFE 100%);
}
.cabinet[data-tags~="card"]:nth-child(3n) .cabinet__screen::before {
  left: 24%;
  top: 22%;
  transform: rotate(7deg);
  box-shadow:
    -18px 12px 0 -2px #14D1A3,
    -20px 10px 0 0 rgba(23,20,42,0.72),
    20px 16px 0 -2px #FF3D7F,
    22px 14px 0 0 rgba(23,20,42,0.72);
}
.cabinet[data-tags~="card"]:nth-child(3n+1) .cabinet__screen {
  background:
    radial-gradient(circle at 24% 72%, rgba(251,250,255,0.52) 0 12px, transparent 13px),
    radial-gradient(circle at 76% 28%, rgba(255,61,127,0.38) 0 14px, transparent 15px),
    linear-gradient(145deg, #8B5CF6 0%, #3D5AFE 45%, #14D1A3 100%);
}
.cabinet[data-tags~="card"]:nth-child(4n) .cabinet__glyph {
  border-radius: 999px;
  background: #FFC23B;
}
.cabinet[data-tags~="card"]:nth-child(5n) .cabinet__glyph {
  background: #17142A;
  color: #FBFAFF;
  border-color: #FBFAFF;
}
.cabinet[data-tags~="card"] .cabinet__tag {
  background: #FBFAFF;
}
.cabinet[data-tags~="word"] {
  --cab: var(--c-cobalt);
}
.cabinet[data-tags~="word"] .cabinet__screen {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(120% 90% at 50% 0%, #243D7A, var(--screen));
}
.cabinet[data-tags~="word"] .cabinet__tag {
  background: var(--c-mint);
}

/* cabinet shell colors cycle through the backglass palette */
.cabinet:nth-child(6n+1) { --cab: var(--c-magenta); }
.cabinet:nth-child(6n+2) { --cab: var(--c-cobalt); }
.cabinet:nth-child(6n+3) { --cab: var(--c-mint); }
.cabinet:nth-child(6n+4) { --cab: var(--c-sun); }
.cabinet:nth-child(6n+5) { --cab: var(--c-grape); }
.cabinet:nth-child(6n+6) { --cab: var(--c-magenta); }
.cabinet:nth-child(6n+2) .cabinet__slot,
.cabinet:nth-child(6n+5) .cabinet__slot { color: var(--bg); }

/* ---------- Footer ---------- */
.foot {
  border-top: var(--border);
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-block: 24px; }
.foot a { color: var(--c-mint); text-decoration: none; }
.foot a:hover { color: var(--c-sun); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .screenbox { rotate: 0deg; order: -1; max-width: 460px; }
}