/* ---------- look: Katten ---------- */
/* Layout: same as Klassiek; an evening living room with violet dusk, wool-pink accent, amber cat-eye highlights and paw prints instead of the grill */
:root[data-look="cats"] {
  --coal: #16121f;
  --grate: #221c31;
  --grate-2: #2c2540;
  --line: #4a4062;
  --ember: #ff7a9a;
  --ember-deep: #c24a6c;
  --glow: #ffc04d;
  --tile: #f6ead2;
  --tile-shade: #dccaa6;
  --tile-ink: #352544;
  --worm: #ff7a9a;
  --text: #f4eefb;
  --muted: #b6abcb;
  --bust: #b8334f;
  --good: #9fdc9a;
  --cat-line: rgba(40, 26, 44, .8);
  color-scheme: dark;
}
[data-look="cats"] body { background: var(--coal); }
[data-look="cats"] body { isolation: isolate; }
[data-look="cats"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 55% at 50% 105%, rgba(255, 192, 77, .18), transparent 62%),
    radial-gradient(90% 40% at 50% -5%, rgba(255, 122, 154, .14), transparent 60%);
  transform: scale(1.07);
  will-change: transform, filter;
  animation: cats-ambient 40s ease-in-out infinite alternate;
}
@keyframes cats-ambient {
  from { transform: translate3d(-3%, 1.5%, 0) scale(1.07); filter: hue-rotate(-8deg); }
  to { transform: translate3d(3%, -1.5%, 0) scale(1.1); filter: hue-rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-look="cats"] body::before { animation: none; will-change: auto; }
}
[data-look="cats"] .grill {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='white' fill-opacity='.055'%3E%3Cg transform='translate(16 18) rotate(-18)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(48 50) rotate(16)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, var(--grate-2), var(--grate));
  box-shadow: inset 0 0 0 1px rgba(255, 192, 77, .08), 0 18px 40px -24px rgba(255, 122, 154, .45);
}
[data-look="cats"] .tile.can { animation-name: pulse-cat; }
[data-look="cats"] .prow.current { background: linear-gradient(90deg, rgba(255, 122, 154, .16), var(--grate) 70%); }
[data-look="cats"] .chip.on, [data-look="cats"] .worm-flag.yes { background: rgba(255, 122, 154, .12); }
[data-look="cats"] .t-worms svg { width: 76cqi; }
[data-look="cats"] .t-worms.w3 svg { width: 58cqi; }
[data-look="cats"] .t-worms.w4 svg { width: 45cqi; }
[data-look="cats"] .chip svg, [data-look="cats"] .worm-flag svg { width: 30px; height: 16px; }
[data-look="cats"] .p-worms svg { width: 32px; height: 17px; }
@keyframes pulse-cat {
  0%, 100% { box-shadow: inset 0 -3px 0 var(--tile-shade), 0 0 10px 2px rgba(255, 192, 77, .5); }
  50% { box-shadow: inset 0 -3px 0 var(--tile-shade), 0 0 22px 7px rgba(255, 192, 77, .78); }
}