/* Room wall variants — modifier classes on .crt-room-wall
   Preview at /room-wall-lab. Shipped default is .crt-room-wall--sage in MainLayout. */

/* A — Sage paint (previous shipped look) */
.crt-room-wall.crt-room-wall--sage {
  background-color: #aebfaa;
  background-image:
    radial-gradient(ellipse 115% 70% at 50% -6%, rgba(255, 255, 255, 0.42) 0%, transparent 52%),
    linear-gradient(180deg, transparent 66%, rgba(36, 46, 38, 0.2) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.14) 0 1px,
      transparent 1px 26px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.045) 0 1px,
      transparent 1px 26px
    ),
    linear-gradient(168deg, #c4d2bc 0%, #aebfaa 44%, #8f9f8c 100%);
}

.crt-room-wall.crt-room-wall--sage::before {
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.crt-room-wall.crt-room-wall--sage::after {
  background:
    radial-gradient(ellipse 88% 78% at 50% 44%, transparent 38%, rgba(28, 38, 30, 0.22) 100%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 16%,
      transparent 76%,
      rgba(48, 58, 46, 0.14) 100%
    );
}

/* B — Cool grey plaster */
.crt-room-wall.crt-room-wall--plaster {
  background-color: #a8adb6;
  background-image:
    radial-gradient(ellipse 120% 75% at 50% -8%, rgba(255, 255, 255, 0.55) 0%, transparent 48%),
    linear-gradient(180deg, transparent 70%, rgba(28, 32, 40, 0.28) 100%),
    repeating-linear-gradient(
      117deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(175deg, #c2c8d0 0%, #a8adb6 42%, #868d98 100%);
}

.crt-room-wall.crt-room-wall--plaster::before {
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
}

.crt-room-wall.crt-room-wall--plaster::after {
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%, transparent 34%, rgba(24, 28, 36, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 18%, transparent 80%, rgba(40, 44, 52, 0.16) 100%);
}

/* C — Dark walnut (horizontal boards, moody) */
.crt-room-wall.crt-room-wall--walnut {
  background-color: #3d2e24;
  background-image:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 220, 180, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 220, 180, 0.04) 0 1px,
      transparent 1px 22px,
      rgba(0, 0, 0, 0.22) 22px 24px
    ),
    repeating-linear-gradient(
      0deg,
      #4a382c 0 48px,
      #3a2a20 48px 96px
    ),
    linear-gradient(180deg, #524038 0%, #3d2e24 55%, #2a1e16 100%);
}

.crt-room-wall.crt-room-wall--walnut::before {
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.08' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 240px 96px;
  mix-blend-mode: multiply;
}

.crt-room-wall.crt-room-wall--walnut::after {
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(
      180deg,
      transparent calc(100% - 48px),
      rgba(120, 82, 48, 0.65) calc(100% - 48px) calc(100% - 46px),
      rgba(255, 220, 180, 0.08) calc(100% - 46px) calc(100% - 44px),
      transparent calc(100% - 44px)
    );
}

/* D — Grey-washed shiplap (cool wood, not honey) */
.crt-room-wall.crt-room-wall--shiplap {
  background-color: #98a4a4;
  background-image:
    radial-gradient(ellipse 115% 70% at 50% -6%, rgba(255, 255, 255, 0.38) 0%, transparent 52%),
    linear-gradient(180deg, transparent 68%, rgba(32, 38, 42, 0.3) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(48, 58, 62, 0.35) 0 2px,
      transparent 2px 96px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.06) 0 6px,
      transparent 6px 28px,
      rgba(0, 0, 0, 0.04) 28px 29px,
      transparent 29px 48px
    ),
    repeating-linear-gradient(
      90deg,
      #a8b4b2 0 48px,
      #96a2a0 48px 96px
    ),
    linear-gradient(168deg, #b4c0be 0%, #98a4a4 44%, #7a8684 100%);
}

.crt-room-wall.crt-room-wall--shiplap::before {
  opacity: 0.36;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.14' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  background-size: 192px 192px;
  mix-blend-mode: multiply;
}

.crt-room-wall.crt-room-wall--shiplap::after {
  background:
    radial-gradient(ellipse 88% 78% at 50% 44%, transparent 36%, rgba(28, 36, 40, 0.22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 14%, transparent 78%, rgba(40, 48, 52, 0.16) 100%);
}

/* E — Minimal warm grey (flat, CRT is the hero) */
.crt-room-wall.crt-room-wall--minimal {
  background-color: #c8c2ba;
  background-image:
    radial-gradient(ellipse 110% 65% at 50% -5%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
    linear-gradient(180deg, #d6d0c8 0%, #c8c2ba 50%, #b0aaa2 100%);
}

.crt-room-wall.crt-room-wall--minimal::before {
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: multiply;
}

.crt-room-wall.crt-room-wall--minimal::after {
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 42%, rgba(40, 38, 34, 0.14) 100%),
    linear-gradient(180deg, transparent 80%, rgba(48, 44, 40, 0.1) 100%);
}

/* F — Honey vertical panelling (rejected attempt — kept for comparison) */
.crt-room-wall.crt-room-wall--honey-oak {
  background-color: #c4a882;
  background-image:
    radial-gradient(ellipse 115% 70% at 50% -6%, rgba(255, 245, 228, 0.48) 0%, transparent 52%),
    linear-gradient(180deg, transparent 68%, rgba(38, 24, 12, 0.34) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(72, 46, 24, 0.42) 0 2px,
      transparent 2px 108px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 236, 205, 0.07) 0 4px,
      transparent 4px 14px,
      rgba(0, 0, 0, 0.05) 14px 15px,
      transparent 15px 32px
    ),
    repeating-linear-gradient(
      90deg,
      #c9ae88 0 54px,
      #b89568 54px 108px
    ),
    linear-gradient(168deg, #dcc8aa 0%, #c4a882 44%, #a88862 100%);
}

.crt-room-wall.crt-room-wall--honey-oak::before {
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72 0.18' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 192px 192px;
  mix-blend-mode: multiply;
}

.crt-room-wall.crt-room-wall--honey-oak::after {
  background:
    radial-gradient(ellipse 88% 78% at 50% 44%, transparent 36%, rgba(42, 28, 14, 0.24) 100%),
    linear-gradient(180deg, rgba(255, 248, 235, 0.08) 0%, transparent 14%, transparent 78%, rgba(52, 34, 18, 0.18) 100%),
    linear-gradient(
      180deg,
      transparent calc(100% - 52px),
      rgba(90, 58, 32, 0.55) calc(100% - 52px) calc(100% - 50px),
      rgba(255, 232, 200, 0.12) calc(100% - 50px) calc(100% - 48px),
      transparent calc(100% - 48px)
    );
}

/* G — No wall (dark void, monitor floats) */
.crt-room-wall.crt-room-wall--void {
  background-color: #1e1c1a;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 248, 235, 0.06) 0%, transparent 62%),
    linear-gradient(180deg, #282624 0%, #1e1c1a 55%, #121110 100%);
}

.crt-room-wall.crt-room-wall--void::before {
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: soft-light;
}

.crt-room-wall.crt-room-wall--void::after {
  background: radial-gradient(ellipse 90% 80% at 50% 42%, transparent 28%, rgba(0, 0, 0, 0.55) 100%);
}