.table,
.table[data-mat-far="rift"] :is(.half.far, .scene-mat.far) {
  
  --mat-felt-0: oklch(15.2% 0.020 274);
  --mat-felt-1: oklch(21.5% 0.024 274);
  --mat-felt-2: oklch(13.2% 0.018 274);
  --mat-felt-top: oklch(18.6% 0.022 274);
  --mat-felt-bottom: oklch(16.4% 0.020 274);
  --mat-playmat: oklch(12.4% 0.020 292);
  
  --mat-felt-glow: oklch(20% 0.03 280 / 0.9);
  --mat-veil-in: oklch(21.5% 0.024 274 / 0.5);
  --mat-veil-out: oklch(13.2% 0.018 274 / 0.7);
  
  --mat-stage-lit: oklch(90% 0.02 274 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 274 / 0.5);
  
  --mat-weave: oklch(80% 0.02 274 / 0.035);
  --mat-sheen: oklch(88% 0.03 274 / 0.07);
  
  --mat-ink: oklch(94% 0.014 274 / 0.52);
  --mat-ornament: none;
  
  --mat-accent: var(--rift-light);
  --mat-shade: var(--rift-shade);
  
  --mat-light-hi: var(--light-warm-hi);
  --mat-light-lo: var(--light-warm-lo);
  --mat-light-edge: var(--light-warm-edge);
  
  --mat-base: oklch(10% 0.02 274 / 0.32);
  --mat-territory-in: oklch(12% 0.022 274 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 274 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 274 / 0.035);
  
  --mat-plate: linear-gradient(180deg, oklch(24% 0.02 274 / 0.92), oklch(17% 0.02 274 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 274 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 274 / 0.06);
  --mat-trim: none;
  
  --mat-banner: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  --mat-mote: 18;
  
  --mat-weave-img: none;
  --mat-band-img: none;
  --mat-art-img: none;
}

.table {
  --mat-near-ink: var(--mat-ink);
  --mat-near-weave: var(--mat-weave);
  --mat-near-veil-in: var(--mat-veil-in);
  --mat-near-veil-out: var(--mat-veil-out);
  --mat-near-frame: var(--mat-ornament);
  --mat-far-ink: oklch(94% 0.014 274 / 0.52);
  --mat-far-weave: oklch(80% 0.02 274 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.024 274 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.018 274 / 0.7);
  --mat-far-frame: none;
  
  --mat-dress: 40px;
}
.table[data-shape="tall"] { --mat-dress: 28px; }


.table[data-mat-near="forge"],
.table[data-mat-far="forge"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.022 28);
  --mat-felt-1: oklch(21.5% 0.026 28);
  --mat-felt-2: oklch(13.2% 0.02 28);
  --mat-felt-top: oklch(18.6% 0.024 28);
  --mat-felt-bottom: oklch(16.4% 0.022 28);
  --mat-playmat: oklch(12.4% 0.022 46);
  --mat-felt-glow: oklch(20% 0.033 34 / 0.9);
  --mat-veil-in: oklch(21.5% 0.026 28 / 0.5);
  --mat-veil-out: oklch(13.2% 0.02 28 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 28 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 28 / 0.5);
  --mat-weave: oklch(80% 0.02 28 / 0.035);
  --mat-sheen: oklch(88% 0.03 28 / 0.07);
  --mat-ink: oklch(70% 0.04 45 / 0.5);
  --mat-ornament: url("../brand/mat-forge-frame.svg");
  --mat-accent: oklch(58% 0.12 18);
  --mat-shade: oklch(9% 0.02 28 / 0.55);
  --mat-light-hi: oklch(86% 0.05 25 / 0.32);
  --mat-light-lo: oklch(86% 0.05 25 / 0.11);
  --mat-light-edge: oklch(82% 0.07 22 / 0.55);
  --mat-base: oklch(10% 0.02 28 / 0.32);
  --mat-territory-in: oklch(12% 0.022 28 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 28 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 28 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 28 / 0.92), oklch(17% 0.02 28 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 28 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 28 / 0.06);
  --mat-trim: oklch(66% 0.05 40 / 0.55);
  --mat-banner: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 84% 84%, 16% 84%, 16% 100%, 0 100%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-forge-weave.svg");
  --mat-band-img: url("../brand/mat-forge-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="forge"] {
  --mat-far-ink: oklch(70% 0.04 45 / 0.5);
  --mat-far-weave: oklch(80% 0.02 28 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.026 28 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.02 28 / 0.7);
  --mat-far-frame: url("../brand/mat-forge-frame.svg");
}

.table[data-mat-near="grove"],
.table[data-mat-far="grove"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.02 160);
  --mat-felt-1: oklch(21.5% 0.024 160);
  --mat-felt-2: oklch(13.2% 0.018 160);
  --mat-felt-top: oklch(18.6% 0.022 160);
  --mat-felt-bottom: oklch(16.4% 0.02 160);
  --mat-playmat: oklch(12.4% 0.02 178);
  --mat-felt-glow: oklch(20% 0.03 166 / 0.9);
  --mat-veil-in: oklch(21.5% 0.024 160 / 0.5);
  --mat-veil-out: oklch(13.2% 0.018 160 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 160 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 160 / 0.5);
  --mat-weave: oklch(80% 0.02 160 / 0.035);
  --mat-sheen: oklch(88% 0.03 160 / 0.07);
  --mat-ink: oklch(72% 0.04 155 / 0.45);
  --mat-ornament: url("../brand/mat-grove-frame.svg");
  --mat-accent: oklch(78% 0.07 178);
  --mat-shade: oklch(9% 0.02 160 / 0.55);
  --mat-light-hi: oklch(90% 0.07 130 / 0.32);
  --mat-light-lo: oklch(90% 0.07 130 / 0.11);
  --mat-light-edge: oklch(86% 0.09 127 / 0.55);
  --mat-base: oklch(10% 0.02 160 / 0.32);
  --mat-territory-in: oklch(12% 0.022 160 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 160 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 160 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 160 / 0.92), oklch(17% 0.02 160 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 160 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 160 / 0.06);
  --mat-trim: oklch(70% 0.045 158 / 0.5);
  --mat-banner: polygon(0 0, 100% 0, 100% 88%, 72% 100%, 50% 84%, 28% 100%, 0 88%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-grove-weave.svg");
  --mat-band-img: url("../brand/mat-grove-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="grove"] {
  --mat-far-ink: oklch(72% 0.04 155 / 0.45);
  --mat-far-weave: oklch(80% 0.02 160 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.024 160 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.018 160 / 0.7);
  --mat-far-frame: url("../brand/mat-grove-frame.svg");
}

.table[data-mat-near="clockwork"],
.table[data-mat-far="clockwork"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.02 236);
  --mat-felt-1: oklch(21.5% 0.024 236);
  --mat-felt-2: oklch(13.2% 0.018 236);
  --mat-felt-top: oklch(18.6% 0.022 236);
  --mat-felt-bottom: oklch(16.4% 0.02 236);
  --mat-playmat: oklch(12.4% 0.02 254);
  --mat-felt-glow: oklch(20% 0.03 242 / 0.9);
  --mat-veil-in: oklch(21.5% 0.024 236 / 0.5);
  --mat-veil-out: oklch(13.2% 0.018 236 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 236 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 236 / 0.5);
  --mat-weave: oklch(80% 0.02 236 / 0.035);
  --mat-sheen: oklch(88% 0.03 236 / 0.07);
  --mat-ink: oklch(74% 0.05 80 / 0.45);
  --mat-ornament: url("../brand/mat-clockwork-frame.svg");
  --mat-accent: oklch(86% 0.03 240);
  --mat-shade: oklch(9% 0.02 236 / 0.55);
  --mat-light-hi: oklch(92% 0.05 80 / 0.32);
  --mat-light-lo: oklch(92% 0.05 80 / 0.11);
  --mat-light-edge: oklch(88% 0.07 77 / 0.55);
  --mat-base: oklch(10% 0.02 236 / 0.32);
  --mat-territory-in: oklch(12% 0.022 236 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 236 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 236 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 236 / 0.92), oklch(17% 0.02 236 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 236 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 236 / 0.06);
  --mat-trim: oklch(72% 0.05 82 / 0.55);
  --mat-banner: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-clockwork-weave.svg");
  --mat-band-img: url("../brand/mat-clockwork-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="clockwork"] {
  --mat-far-ink: oklch(74% 0.05 80 / 0.45);
  --mat-far-weave: oklch(80% 0.02 236 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.024 236 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.018 236 / 0.7);
  --mat-far-frame: url("../brand/mat-clockwork-frame.svg");
}

.table[data-mat-near="oasis"],
.table[data-mat-far="oasis"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.018 70);
  --mat-felt-1: oklch(21.5% 0.022 70);
  --mat-felt-2: oklch(13.2% 0.016 70);
  --mat-felt-top: oklch(18.6% 0.02 70);
  --mat-felt-bottom: oklch(16.4% 0.018 70);
  --mat-playmat: oklch(12.4% 0.018 88);
  --mat-felt-glow: oklch(20% 0.027 76 / 0.9);
  --mat-veil-in: oklch(21.5% 0.022 70 / 0.5);
  --mat-veil-out: oklch(13.2% 0.016 70 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 70 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 70 / 0.5);
  --mat-weave: oklch(80% 0.02 70 / 0.035);
  --mat-sheen: oklch(88% 0.03 70 / 0.07);
  --mat-ink: oklch(78% 0.04 85 / 0.4);
  --mat-ornament: url("../brand/mat-oasis-frame.svg");
  --mat-accent: oklch(70% 0.06 205);
  --mat-shade: oklch(9% 0.02 70 / 0.55);
  --mat-light-hi: oklch(93% 0.06 90 / 0.32);
  --mat-light-lo: oklch(93% 0.06 90 / 0.11);
  --mat-light-edge: oklch(89% 0.08 87 / 0.55);
  --mat-base: oklch(10% 0.02 70 / 0.32);
  --mat-territory-in: oklch(12% 0.022 70 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 70 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 70 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 70 / 0.92), oklch(17% 0.02 70 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 70 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 70 / 0.06);
  --mat-trim: oklch(76% 0.045 85 / 0.5);
  --mat-banner: polygon(0 0, 100% 10%, 100% 78%, 50% 100%, 0 78%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-oasis-weave.svg");
  --mat-band-img: url("../brand/mat-oasis-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="oasis"] {
  --mat-far-ink: oklch(78% 0.04 85 / 0.4);
  --mat-far-weave: oklch(80% 0.02 70 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.022 70 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.016 70 / 0.7);
  --mat-far-frame: url("../brand/mat-oasis-frame.svg");
}

.table[data-mat-near="vats"],
.table[data-mat-far="vats"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.024 305);
  --mat-felt-1: oklch(21.5% 0.029 305);
  --mat-felt-2: oklch(13.2% 0.022 305);
  --mat-felt-top: oklch(18.6% 0.026 305);
  --mat-felt-bottom: oklch(16.4% 0.024 305);
  --mat-playmat: oklch(12.4% 0.024 323);
  --mat-felt-glow: oklch(20% 0.036 311 / 0.9);
  --mat-veil-in: oklch(21.5% 0.029 305 / 0.5);
  --mat-veil-out: oklch(13.2% 0.022 305 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 305 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 305 / 0.5);
  --mat-weave: oklch(80% 0.02 305 / 0.035);
  --mat-sheen: oklch(88% 0.03 305 / 0.07);
  --mat-ink: oklch(70% 0.05 310 / 0.45);
  --mat-ornament: url("../brand/mat-vats-frame.svg");
  --mat-accent: oklch(80% 0.11 128);
  --mat-shade: oklch(9% 0.02 305 / 0.55);
  --mat-light-hi: oklch(88% 0.07 330 / 0.32);
  --mat-light-lo: oklch(88% 0.07 330 / 0.11);
  --mat-light-edge: oklch(84% 0.09 327 / 0.55);
  --mat-base: oklch(10% 0.02 305 / 0.32);
  --mat-territory-in: oklch(12% 0.022 305 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 305 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 305 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 305 / 0.92), oklch(17% 0.02 305 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 305 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 305 / 0.06);
  --mat-trim: oklch(68% 0.06 312 / 0.55);
  --mat-banner: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-vats-weave.svg");
  --mat-band-img: url("../brand/mat-vats-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="vats"] {
  --mat-far-ink: oklch(70% 0.05 310 / 0.45);
  --mat-far-weave: oklch(80% 0.02 305 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.029 305 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.022 305 / 0.7);
  --mat-far-frame: url("../brand/mat-vats-frame.svg");
}

.table[data-mat-near="bastion"],
.table[data-mat-far="bastion"] :is(.half.far, .scene-mat.far) {
  --mat-felt-0: oklch(15.2% 0.016 255);
  --mat-felt-1: oklch(21.5% 0.019 255);
  --mat-felt-2: oklch(13.2% 0.014 255);
  --mat-felt-top: oklch(18.6% 0.018 255);
  --mat-felt-bottom: oklch(16.4% 0.016 255);
  --mat-playmat: oklch(12.4% 0.016 273);
  --mat-felt-glow: oklch(20% 0.024 261 / 0.9);
  --mat-veil-in: oklch(21.5% 0.019 255 / 0.5);
  --mat-veil-out: oklch(13.2% 0.014 255 / 0.7);
  --mat-stage-lit: oklch(90% 0.02 255 / 0.06);
  --mat-stage-rim: oklch(8% 0.02 255 / 0.5);
  --mat-weave: oklch(80% 0.02 255 / 0.035);
  --mat-sheen: oklch(88% 0.03 255 / 0.07);
  --mat-ink: oklch(80% 0.06 92 / 0.45);
  --mat-ornament: url("../brand/mat-bastion-frame.svg");
  --mat-accent: oklch(92% 0.02 95);
  --mat-shade: oklch(9% 0.02 255 / 0.55);
  --mat-light-hi: oklch(94% 0.05 92 / 0.32);
  --mat-light-lo: oklch(94% 0.05 92 / 0.11);
  --mat-light-edge: oklch(90% 0.07 89 / 0.55);
  --mat-base: oklch(10% 0.02 255 / 0.32);
  --mat-territory-in: oklch(12% 0.022 255 / 0.42);
  --mat-territory-out: oklch(9.5% 0.02 255 / 0.6);
  --mat-territory-rim: oklch(90% 0.02 255 / 0.035);
  --mat-plate: linear-gradient(var(--mat-trim), var(--mat-trim)) left top / 100% 1px no-repeat, linear-gradient(var(--mat-trim), var(--mat-trim)) left bottom / 100% 1px no-repeat, linear-gradient(225deg, var(--mat-trim) 0 7px, transparent 7px) right top / 12px 12px no-repeat, linear-gradient(180deg, oklch(24% 0.02 255 / 0.92), oklch(17% 0.02 255 / 0.92));
  --mat-plate-hi: oklch(95% 0.01 255 / 0.08);
  --mat-plate-hi-soft: oklch(95% 0.01 255 / 0.06);
  --mat-trim: oklch(78% 0.06 92 / 0.55);
  --mat-banner: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
  --mat-mote: 18;
  --mat-weave-img: url("../brand/mat-bastion-weave.svg");
  --mat-band-img: url("../brand/mat-bastion-band.svg");
  --mat-art-img: none;
}
.table[data-mat-far="bastion"] {
  --mat-far-ink: oklch(80% 0.06 92 / 0.45);
  --mat-far-weave: oklch(80% 0.02 255 / 0.035);
  --mat-far-veil-in: oklch(21.5% 0.019 255 / 0.5);
  --mat-far-veil-out: oklch(13.2% 0.014 255 / 0.7);
  --mat-far-frame: url("../brand/mat-bastion-frame.svg");
}



.scene-mat {
  left: 0;
  right: 0;
  pointer-events: none;
}
.scene-mat.far { top: 0; bottom: 50%; }
.scene-mat.near { top: 50%; bottom: 0; }
.scene-mat:not([data-mat="rift"]) {
  background-size: cover, auto, auto;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}
.scene-mat.far:not([data-mat="rift"]) {
  background-image: var(--mat-art-img), var(--mat-weave-img), linear-gradient(180deg, var(--mat-felt-top) 0%, var(--mat-felt-0) 100%);
}
.scene-mat.near:not([data-mat="rift"]) {
  background-image: var(--mat-art-img), var(--mat-weave-img), linear-gradient(180deg, var(--mat-felt-0) 0%, var(--mat-felt-bottom) 100%);
}

.table[data-shape="tall"] .scene-mat.far:not([data-mat="rift"]) {
  background-image: var(--mat-band-img), var(--mat-art-img), var(--mat-weave-img), linear-gradient(180deg, var(--mat-felt-top) 0%, var(--mat-felt-0) 100%);
  background-size: auto 14px, cover, auto, auto;
  background-position: 0 0, center, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, repeat, repeat;
}




.table:not([data-mat-near="rift"][data-mat-far="rift"]) .stage {
  background:
    repeating-linear-gradient(45deg, var(--mat-far-weave) 0 1px, transparent 1px 4px) top / 100% 50% no-repeat,
    repeating-linear-gradient(-45deg, var(--mat-far-weave) 0 1px, transparent 1px 4px) top / 100% 50% no-repeat,
    repeating-linear-gradient(45deg, var(--mat-near-weave) 0 1px, transparent 1px 4px) bottom / 100% 50% no-repeat,
    repeating-linear-gradient(-45deg, var(--mat-near-weave) 0 1px, transparent 1px 4px) bottom / 100% 50% no-repeat,
    radial-gradient(120% 180% at 50% 100%, var(--mat-far-veil-in) 0%, var(--mat-far-veil-out) 100%) top / 100% 50% no-repeat,
    radial-gradient(120% 180% at 50% 0%, var(--mat-near-veil-in) 0%, var(--mat-near-veil-out) 100%) bottom / 100% 50% no-repeat;
}

.table:not([data-mat-near="rift"][data-mat-far="rift"]) .battlefield {
  background:
    linear-gradient(var(--mat-far-ink), var(--mat-far-ink)) left top / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-far-ink), var(--mat-far-ink)) left top / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-far-ink), var(--mat-far-ink)) right top / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-far-ink), var(--mat-far-ink)) right top / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-near-ink), var(--mat-near-ink)) left bottom / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-near-ink), var(--mat-near-ink)) left bottom / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-near-ink), var(--mat-near-ink)) right bottom / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-near-ink), var(--mat-near-ink)) right bottom / 1px var(--bracket) no-repeat,
    radial-gradient(90% 80% at 50% 50%, var(--mat-territory-in) 0%, var(--mat-territory-out) 100%);
}

.table:not([data-mat-near="rift"][data-mat-far="rift"]) .battlefield-half {
  border: 0 solid transparent;
}
.table:not([data-mat-near="rift"][data-mat-far="rift"]) .battlefield-half:not(.mine) {
  border-image: var(--mat-far-frame) 40 / var(--mat-dress) var(--mat-dress) 0 var(--mat-dress) repeat;
}
.table:not([data-mat-near="rift"][data-mat-far="rift"]) .battlefield-half.mine {
  border-image: var(--mat-near-frame) 40 / 0 var(--mat-dress) var(--mat-dress) var(--mat-dress) repeat;
}




.table[data-mat-far="forge"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="forge"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="forge"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-forge-frame.svg");
  --mat-accent: oklch(58% 0.12 18);
  --mat-trim: oklch(66% 0.05 40 / 0.55);
  --mat-banner: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 84% 84%, 16% 84%, 16% 100%, 0 100%);
}
.table[data-mat-far="grove"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="grove"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="grove"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-grove-frame.svg");
  --mat-accent: oklch(78% 0.07 178);
  --mat-trim: oklch(70% 0.045 158 / 0.5);
  --mat-banner: polygon(0 0, 100% 0, 100% 88%, 72% 100%, 50% 84%, 28% 100%, 0 88%);
}
.table[data-mat-far="clockwork"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="clockwork"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="clockwork"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-clockwork-frame.svg");
  --mat-accent: oklch(86% 0.03 240);
  --mat-trim: oklch(72% 0.05 82 / 0.55);
  --mat-banner: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
}
.table[data-mat-far="oasis"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="oasis"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="oasis"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-oasis-frame.svg");
  --mat-accent: oklch(70% 0.06 205);
  --mat-trim: oklch(76% 0.045 85 / 0.5);
  --mat-banner: polygon(0 0, 100% 10%, 100% 78%, 50% 100%, 0 78%);
}
.table[data-mat-far="vats"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="vats"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="vats"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-vats-frame.svg");
  --mat-accent: oklch(80% 0.11 128);
  --mat-trim: oklch(68% 0.06 312 / 0.55);
  --mat-banner: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}
.table[data-mat-far="bastion"] :is(.conquer-banner.them, .mat-dress.far, .mat-scar.far),
.table[data-me="0"][data-mat-far="bastion"] .battlefield.control-1 > .field-hum,
.table[data-me="1"][data-mat-far="bastion"] .battlefield.control-0 > .field-hum {
  --mat-ornament: url("../brand/mat-bastion-frame.svg");
  --mat-accent: oklch(92% 0.02 95);
  --mat-trim: oklch(78% 0.06 92 / 0.55);
  --mat-banner: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
}


.conquer-banner { clip-path: var(--mat-banner); }
.table:not([data-mat-near="rift"]) .conquer-banner.you {
  background: linear-gradient(var(--mat-trim), var(--mat-trim)) top / 100% 3px no-repeat, var(--you);
}
.table:not([data-mat-far="rift"]) .conquer-banner.them {
  background: linear-gradient(var(--mat-trim), var(--mat-trim)) top / 100% 3px no-repeat, color-mix(in oklch, var(--opponent) 70%, transparent);
}


.table[data-me="0"]:not([data-mat-near="rift"]) .battlefield.control-0 > .field-hum,
.table[data-me="1"]:not([data-mat-near="rift"]) .battlefield.control-1 > .field-hum {
  background:
    radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--you) 12%, transparent), transparent 72%),
    radial-gradient(75% 55% at 50% 88%, color-mix(in oklch, var(--mat-accent) 10%, transparent), transparent 78%);
}
.table[data-me="0"]:not([data-mat-far="rift"]) .battlefield.control-1 > .field-hum,
.table[data-me="1"]:not([data-mat-far="rift"]) .battlefield.control-0 > .field-hum {
  background:
    radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--opponent) 8%, transparent), transparent 72%),
    radial-gradient(75% 55% at 50% 88%, color-mix(in oklch, var(--mat-accent) 10%, transparent), transparent 78%);
}


.mat-dress {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.9;
  border: 0 solid transparent;
  box-shadow: inset 0 0 22px 0 color-mix(in oklch, var(--mat-accent) 34%, transparent);
}
.mat-dress.far { border-image: var(--mat-ornament) 40 / var(--mat-dress) var(--mat-dress) 0 var(--mat-dress) repeat; }
.mat-dress.near { border-image: var(--mat-ornament) 40 / 0 var(--mat-dress) var(--mat-dress) var(--mat-dress) repeat; }
.mat-dress > .mat-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  opacity: 0;
  background: linear-gradient(100deg, transparent 0%, color-mix(in oklch, var(--mat-accent) 70%, transparent) 50%, transparent 100%);
}


.mat-scar {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}
.mat-scar::before { content: ""; position: absolute; }

.mat-scar[data-look="scorch"]::before {
  inset: 14% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(7% 0.02 28 / 0.95) 0 40%, color-mix(in oklch, var(--mat-accent) 55%, oklch(20% 0.05 28)) 66%, transparent 100%);
}

.mat-scar[data-look="leaf"]::before {
  inset: 28% 22%;
  border-radius: 0 100% 0 100%;
  rotate: 24deg;
  background: linear-gradient(135deg, color-mix(in oklch, var(--mat-accent) 70%, oklch(30% 0.05 160)), oklch(22% 0.04 160)), linear-gradient(135deg, transparent 48%, color-mix(in oklch, var(--mat-trim) 80%, transparent) 50%, transparent 52%);
}

.mat-scar[data-look="crack"]::before {
  inset: 4% 40%;
  background: color-mix(in oklch, var(--mat-accent) 80%, transparent);
  clip-path: polygon(40% 0, 60% 0, 52% 24%, 70% 38%, 48% 56%, 66% 74%, 50% 100%, 36% 76%, 50% 58%, 32% 40%, 46% 24%);
}

.mat-scar[data-look="stain"]::before {
  inset: 18% 12%;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, oklch(12% 0.04 215 / 0.95), color-mix(in oklch, var(--mat-accent) 35%, oklch(18% 0.04 210)) 78%, transparent 100%);
}

.mat-scar[data-look="etch"]::before {
  inset: 20% 12%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--mat-accent) 75%, transparent) 0 1px, transparent 1px 6px);
}

.mat-scar[data-look="chipped"]::before {
  inset: 42% 4%;
  background: color-mix(in oklch, var(--mat-accent) 70%, transparent);
  clip-path: polygon(0 40%, 14% 30%, 20% 62%, 38% 44%, 52% 74%, 66% 38%, 80% 58%, 100% 32%, 100% 60%, 84% 88%, 64% 66%, 50% 100%, 34% 70%, 16% 90%, 0 66%);
}

:root[data-scene="off"] .mat-dress,
:root[data-scene="off"] .mat-scar { display: none; }



.scene-ambient {
  width: 40%;
  height: 50%;
  left: 30%;
  opacity: var(--amb-mid);
  pointer-events: none;
}
.scene-ambient.far { top: 0; --amb-y: 14%; }
.scene-ambient.near { top: 50%; --amb-y: 86%; }
.table[data-shape="tall"] .scene-ambient { display: none; }
:root[data-scene="lights"] .scene-ambient { display: none; }
.scene[data-link="down"] .scene-ambient[data-mat] { animation: none; opacity: calc(var(--amb-mid) * 0.4); }


.scene-ambient[data-mat="forge"] {
  --amb-mid: 0.5;
  background:
    radial-gradient(ellipse 50% 38% at 32% var(--amb-y), oklch(58% 0.12 18 / 0.55), transparent 72%),
    radial-gradient(ellipse 40% 28% at 70% var(--amb-y), oklch(64% 0.12 45 / 0.42), transparent 72%);
  animation: amb-embers 1.6s steps(8) infinite alternate;
}
@keyframes amb-embers {
  from { opacity: 0.3; }
  to { opacity: 0.7; }
}

.scene-ambient[data-mat="grove"] {
  --amb-mid: 0.6;
  background:
    radial-gradient(ellipse 16% 9% at 28% 34%, oklch(8% 0.03 160 / 0.5), transparent 72%),
    radial-gradient(ellipse 12% 7% at 52% 58%, oklch(8% 0.03 160 / 0.45), transparent 72%),
    radial-gradient(ellipse 15% 8% at 72% 30%, oklch(8% 0.03 160 / 0.4), transparent 72%);
  animation: amb-leaves 24s steps(60) infinite alternate;
}
@keyframes amb-leaves {
  from { transform: translate(-6%, -3%); }
  to { transform: translate(6%, 3%); }
}

.scene-ambient[data-mat="clockwork"] {
  --amb-mid: 0.5;
  width: auto;
  height: 36%;
  aspect-ratio: 1;
  left: 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58%, oklch(86% 0.03 240 / 0.4) 59% 61%, transparent 62%),
    repeating-conic-gradient(oklch(86% 0.03 240 / 0.3) 0 11deg, transparent 11deg 30deg);
  animation: amb-gear 12s steps(12) infinite;
}
@keyframes amb-gear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.scene-ambient[data-mat="oasis"] {
  --amb-mid: 0.6;
  background: linear-gradient(100deg, transparent 22%, oklch(70% 0.06 205 / 0.34) 50%, transparent 78%);
  animation: amb-sheen 8s steps(40) infinite;
}
@keyframes amb-sheen {
  from { transform: translateX(-75%); }
  to { transform: translateX(75%); }
}

.scene-ambient[data-mat="vats"] {
  --amb-mid: 0.5;
  background: linear-gradient(180deg, transparent 6%, oklch(80% 0.11 128 / 0.22) 50%, transparent 94%);
  animation: amb-neon 3.2s steps(1) infinite;
}
@keyframes amb-neon {
  0% { opacity: 0.25; }
  9.375% { opacity: 0.8; }
  15.625% { opacity: 0.35; }
  31.25% { opacity: 0.7; }
  37.5% { opacity: 0.2; }
  62.5% { opacity: 0.75; }
  68.75% { opacity: 0.4; }
  100% { opacity: 0.25; }
}

.scene-ambient[data-mat="bastion"] {
  --amb-mid: 0.42;
  transform: scale(1.02);
  background: radial-gradient(ellipse 60% 50% at 50% 42%, oklch(92% 0.02 95 / 0.3), transparent 72%);
  animation: amb-moon 6s steps(12) infinite alternate;
}
@keyframes amb-moon {
  from { opacity: 0.25; transform: scale(1); }
  to { opacity: 0.6; transform: scale(1.04); }
}


.table { --mat-mote-size: 1; --mat-mote-way: 1 1; }
.table[data-mat-near="forge"] { --mat-mote-size: 1.5; --mat-mote-way: 1 1; }
.table[data-mat-near="grove"] { --mat-mote-size: 1.25; --mat-mote-way: -1 1; }
.table[data-mat-near="clockwork"] { --mat-mote-size: 0.75; --mat-mote-way: 1 1; }
.table[data-mat-near="oasis"] { --mat-mote-size: 1.25; --mat-mote-way: -1 -1; }
.table[data-mat-near="vats"] { --mat-mote-size: 1.5; --mat-mote-way: 1 -1; }
.table[data-mat-near="bastion"] { --mat-mote-size: 1; --mat-mote-way: -1 -1; }
.table:not([data-mat-near="rift"]) .scene-motes > i {
  width: calc(var(--mote-s) * var(--mat-mote-size));
  height: calc(var(--mote-s) * var(--mat-mote-size));
  scale: var(--mat-mote-way);
}