/* Themed tile art for the home screen (templates/_tileart.html).
   Pictures are inline SVG drawn with the theme variables, so they recolour with every style.
   The art set is picked with <html data-tileart="...">: glow (default), neon, pixel, cinema, circuit,
   comic, geo, nature, luxe, minimal. Layers inside .tileart (back to front):
     span background (deep backdrop on photo tiles) > .ta-bg (set backdrop) > ::before (set shapes)
     > svg.ta-svg (the drawing) > .ta-fx (set overlay) > ::after (scrim that keeps the text readable) */

/* ------------------------------------------------------------------ structure */
.tile:has(.tileart) { isolation: isolate; }
.tile:has(.tileart) .tilefx, .tile:has(.tileart) .tilebg { display: none; }
.tile > span.tileart.tileart {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit;
  --ta-fg: var(--fg); --ta-cut: var(--solid); --ta-ink: #100e17; --ta-o: 1;
  contain: paint;
}
.tileart > i { position: absolute; inset: 0; display: block; pointer-events: none; }
.tileart::before, .tileart::after { content: ""; position: absolute; pointer-events: none; }
.tileart::after { inset: 0; }
.tileart .ta-svg { position: absolute; display: block; overflow: visible; opacity: var(--ta-o); transition: scale .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover .tileart .ta-svg { scale: 1.04; }

/* emblem: sits bottom-right of a square tile, right of the text on a wide one */
.ta-emblem .ta-svg { right: -7%; top: 3%; height: 74%; width: auto; aspect-ratio: 1; max-width: 70%; transform-origin: 70% 40%; }
.tile.wide .ta-emblem .ta-svg { right: 46px; top: -9%; height: 118%; max-width: 40%; }
/* scene: fills the tile, anchored right so the left (text side) stays calm */
.ta-scene .ta-svg { inset: 0; width: 100%; height: 100%; transform-origin: 80% 60%; }

/* other layouts */
[data-layout="list"] .ta-emblem .ta-svg, [data-layout="cards"] .ta-emblem .ta-svg { right: 40px; top: -15%; height: 130%; max-width: 30%; }
[data-layout="compact"] .ta-emblem .ta-svg { right: -16%; top: -8%; height: 76%; }
[data-layout="compact"] .tileart, [data-layout="mosaic"] .tileart { --ta-o: .8; }
html[data-layout="mosaic"] .bento > .tile:not(.wide) > .ta-emblem .ta-svg { height: 58%; top: 4%; right: -4%; }
html[data-layout="compact"] .bento > .tile > .ta-emblem .ta-svg { height: 70%; top: -8%; right: -16%; }

/* per-kind SVG filters for the pixel and nature sets (ids are per kind; no inline styles because of the CSP) */
html[data-tileart="pixel"] .ta-info .art { filter: url(#tapx-info); } html[data-tileart="nature"] .ta-info .art { filter: url(#tawb-info); }
html[data-tileart="pixel"] .ta-support .art { filter: url(#tapx-support); } html[data-tileart="nature"] .ta-support .art { filter: url(#tawb-support); }
html[data-tileart="pixel"] .ta-tickets .art { filter: url(#tapx-tickets); } html[data-tileart="nature"] .ta-tickets .art { filter: url(#tawb-tickets); }
html[data-tileart="pixel"] .ta-zones .art { filter: url(#tapx-zones); } html[data-tileart="nature"] .ta-zones .art { filter: url(#tawb-zones); }
html[data-tileart="pixel"] .ta-sport .art { filter: url(#tapx-sport); } html[data-tileart="nature"] .ta-sport .art { filter: url(#tawb-sport); }
html[data-tileart="pixel"] .ta-lifestyle .art { filter: url(#tapx-lifestyle); } html[data-tileart="nature"] .ta-lifestyle .art { filter: url(#tawb-lifestyle); }
html[data-tileart="pixel"] .ta-shop .art { filter: url(#tapx-shop); } html[data-tileart="nature"] .ta-shop .art { filter: url(#tawb-shop); }
html[data-tileart="pixel"] .ta-videos .art { filter: url(#tapx-videos); } html[data-tileart="nature"] .ta-videos .art { filter: url(#tawb-videos); }
html[data-tileart="pixel"] .ta-report .art { filter: url(#tapx-report); } html[data-tileart="nature"] .ta-report .art { filter: url(#tawb-report); }
html[data-tileart="pixel"] .ta-request .art { filter: url(#tapx-request); } html[data-tileart="nature"] .ta-request .art { filter: url(#tawb-request); }
html[data-tileart="pixel"] .ta-ideas .art { filter: url(#tapx-ideas); } html[data-tileart="nature"] .ta-ideas .art { filter: url(#tawb-ideas); }
html[data-tileart="pixel"] .ta-announce .art { filter: url(#tapx-announce); } html[data-tileart="nature"] .ta-announce .art { filter: url(#tawb-announce); }
html[data-tileart="pixel"] .ta-prizes .art { filter: url(#tapx-prizes); } html[data-tileart="nature"] .ta-prizes .art { filter: url(#tawb-prizes); }

/* soft backing behind the title and subtitle (bottom-left) on normal tiles */
.tileart::after { background: radial-gradient(85% 70% at 0% 100%, color-mix(in oklab, var(--solid) 55%, transparent), transparent 75%); }
.tile.wide:not(.phototile) .tileart::after { background: linear-gradient(90deg, color-mix(in oklab, var(--solid) 50%, transparent) 0%, transparent 60%); }

/* hidden helpers; each set shows its own */
.tileart .v { display: none; }
.tileart .k { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tileart .b { stroke: none; }
.tileart .crowd { stroke: none; }
.tileart .s1 { stop-color: var(--a); }
.tileart .s2 { stop-color: var(--a2); }
.tileart .m1 { stop-color: var(--a); }
.tileart .m2 { stop-color: color-mix(in oklab, var(--a) 30%, #fff); }
[data-mode="light"] .tileart .m2 { stop-color: color-mix(in oklab, var(--a) 55%, #000); }
.tileart .b1 { stop-color: color-mix(in oklab, var(--a) 35%, #fff); stop-opacity: .55; }
.tileart .b2 { stop-color: var(--a); stop-opacity: 0; }

/* photo tiles (white text): always a deep backdrop in the community's colours, plus a strong scrim */
.phototile > span.tileart.tileart {
  --ta-fg: #fff; --ta-cut: color-mix(in oklab, var(--a) 26%, #07060d);
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--a2) 34%, transparent), transparent 60%),
    linear-gradient(120deg, color-mix(in oklab, var(--a) 18%, #06050b) 0%, color-mix(in oklab, var(--a) 40%, #0b0916) 60%, color-mix(in oklab, var(--a2) 38%, #0b0916) 100%);
}
[data-mode="light"] .phototile > span.tileart.tileart {
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--a2) 55%, transparent), transparent 60%),
    linear-gradient(120deg, color-mix(in oklab, var(--a) 40%, #120f22) 0%, color-mix(in oklab, var(--a) 70%, #120f22) 60%, color-mix(in oklab, var(--a2) 65%, #120f22) 100%);
}
.phototile .tileart::after { background: linear-gradient(90deg, rgba(4,3,10,.78) 0%, rgba(4,3,10,.5) 38%, rgba(4,3,10,.08) 72%, transparent 100%); }
.phototile:has(.tileart) { border-color: color-mix(in oklab, var(--a) 30%, rgba(255,255,255,.12)); }

/* the drawing on photo tiles fades out under the title (all sets) */
.phototile .tileart .ta-svg { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 10%, #000 55%); mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 10%, #000 55%); }

/* ================================================================== GLOW (default) */
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart {
  --ta-o: .5;
}
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .ta-bg {
  background: radial-gradient(60% 70% at 90% 30%, var(--a-30), transparent 70%), radial-gradient(45% 50% at 70% 85%, var(--a2-20), transparent 70%);
}
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .ta-svg {
  filter: drop-shadow(0 8px 18px var(--a-45));
  -webkit-mask-image: linear-gradient(105deg, transparent 8%, #000 55%); mask-image: linear-gradient(105deg, transparent 8%, #000 55%);
  animation: ta-float 9s ease-in-out infinite alternate;
}
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart :is(.f, .f2) { stroke: none; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .f2 { fill: var(--a2); fill-opacity: .55; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .k { stroke: rgba(255,255,255,.7); stroke-width: 2.5; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart :is(.k.thin, .k.dash) { stroke-width: 1.6; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .k.dash { stroke-dasharray: 3 4; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .k.thick { stroke-width: 7; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart :is(.d, .p, .w) { fill: #fff; stroke: none; fill-opacity: .9; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .w { fill-opacity: .55; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .tileart .crowd { opacity: .35; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .ta-scene { --ta-o: .8; }
:is(html:not([data-tileart]), html[data-tileart="glow"], html[data-tileart=""]) .ta-scene .ta-svg { -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 62%); mask-image: linear-gradient(90deg, transparent 22%, #000 62%); }

html[data-mode="light"]:is(:not([data-tileart]), [data-tileart="glow"], [data-tileart=""]) .tileart:not(.phototile *) { --ta-o: .5; }
html[data-mode="light"]:is(:not([data-tileart]), [data-tileart="glow"], [data-tileart=""]) .tileart:not(.phototile *) .ta-bg { opacity: .7; }

/* ================================================================== NEON */
html[data-tileart="neon"] .tileart { --ta-o: .95; }
html[data-tileart="neon"] .tileart .ta-bg {
  background: radial-gradient(70% 80% at 85% 85%, color-mix(in oklab, var(--a) 16%, transparent), transparent 70%),
              repeating-linear-gradient(0deg, rgba(var(--tint), .035) 0 1px, transparent 1px 4px);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 70%); mask-image: linear-gradient(100deg, transparent 20%, #000 70%);
}
html[data-tileart="neon"][data-mode="dark"] .tileart:not(.phototile *) .ta-bg {
  background: radial-gradient(70% 80% at 85% 85%, color-mix(in oklab, var(--a) 18%, transparent), transparent 70%),
              radial-gradient(80% 100% at 90% 70%, rgba(0,0,0,.45), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}
html[data-tileart="neon"] .tileart :is(.f, .f2, .k, .d, .p, .w, .b) { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="neon"] .tileart .f { stroke: color-mix(in oklab, var(--a) 70%, #fff); }
html[data-tileart="neon"] .tileart .f2 { stroke: var(--a2); }
html[data-tileart="neon"] .tileart .k { stroke: var(--a); stroke-width: 1.6; }
html[data-tileart="neon"] .tileart .k.dash { stroke-dasharray: 3 4; }
html[data-tileart="neon"] .tileart .k.thick { stroke-width: 5; stroke: color-mix(in oklab, var(--a2) 70%, #fff); }
html[data-tileart="neon"] .tileart :is(.d, .p) { fill: color-mix(in oklab, var(--a2) 60%, #fff); stroke: none; }
html[data-tileart="neon"] .tileart .w { fill: var(--a); stroke: none; opacity: .8; }
html[data-tileart="neon"] .tileart .b { fill: var(--a); fill-opacity: .08; stroke: none; }
html[data-tileart="neon"] .tileart .crowd { opacity: .3; }
html[data-tileart="neon"] .tileart .ta-svg {
  filter: drop-shadow(0 0 2px var(--a)) drop-shadow(0 0 9px var(--a-60));
  animation: ta-flicker 7s steps(1) infinite;
}
html[data-tileart="neon"][data-mode="light"] .tileart:not(.phototile *) .ta-svg { filter: drop-shadow(0 0 3px var(--a-45)); }
html[data-tileart="neon"][data-mode="light"] .tileart:not(.phototile *) .f { stroke: var(--a); }
html[data-tileart="neon"][data-mode="light"] .tileart:not(.phototile *) :is(.d, .p) { fill: var(--a2); }
html[data-tileart="neon"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 40%); mask-image: linear-gradient(100deg, transparent 0%, #000 40%); }

/* ================================================================== PIXEL */
html[data-tileart="pixel"] .tileart { --ta-o: .78; }
html[data-tileart="pixel"] .tileart .ta-svg { image-rendering: pixelated; }
html[data-tileart="pixel"] .tileart :is(.f, .f2, .d, .p, .w) { stroke: none; }
html[data-tileart="pixel"] .tileart .f { fill: var(--a); }
html[data-tileart="pixel"] .tileart .f2 { fill: var(--a2); }
html[data-tileart="pixel"] .tileart .k { stroke: color-mix(in oklab, var(--a) 25%, #fff); stroke-width: 3.5; stroke-linecap: square; stroke-linejoin: miter; }
html[data-tileart="pixel"] .tileart .k.thin { stroke-width: 3; }
html[data-tileart="pixel"] .tileart .k.dash { stroke-dasharray: 4 4; }
html[data-tileart="pixel"] .tileart .k.thick { stroke-width: 8; }
html[data-tileart="pixel"] .tileart :is(.d, .p, .w) { fill: #fff; }
html[data-tileart="pixel"] .tileart .b { fill: color-mix(in oklab, var(--a) 40%, #fff); fill-opacity: .18; }
html[data-tileart="pixel"] .tileart .crowd { opacity: .5; }
html[data-tileart="pixel"][data-mode="light"] .tileart:not(.phototile *) .k { stroke: color-mix(in oklab, var(--a) 35%, #000); }
html[data-tileart="pixel"][data-mode="light"] .tileart:not(.phototile *) :is(.d, .p) { fill: color-mix(in oklab, var(--a) 20%, #000); }
html[data-tileart="pixel"][data-mode="light"] .tileart:not(.phototile *) .w { fill: #fff; }
/* pixel grid + scanlines over the art side */
html[data-tileart="pixel"] .tileart .ta-fx {
  background: repeating-linear-gradient(0deg, rgba(var(--tint), .05) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(var(--tint), .05) 0 1px, transparent 1px 5px);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 80%); mask-image: linear-gradient(100deg, transparent 30%, #000 80%);
}
html[data-tileart="pixel"] .phototile .tileart .ta-fx { background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px); }
/* 8-bit stars */
html[data-tileart="pixel"] .tileart::before {
  width: 4px; height: 4px; top: 18px; right: 30%; background: var(--a2);
  box-shadow: 20px 8px 0 var(--a), 44px -6px 0 var(--a2), 64px 20px 0 #fff, -26px 14px 0 var(--a), 78px 52px 0 var(--a2), 12px 40px 0 var(--a-60);
  animation: ta-blink 2.4s steps(2) infinite;
}

/* ================================================================== CINEMA */
html[data-tileart="cinema"] .tileart { --ta-o: .8; }
html[data-tileart="cinema"] .tileart .ta-bg {
  background:
    radial-gradient(80% 90% at 100% 110%, color-mix(in oklab, var(--a) 30%, transparent), transparent 70%),
    radial-gradient(120% 120% at 100% 50%, transparent 40%, rgba(0,0,0,.25) 100%);
}
html[data-mode="light"][data-tileart="cinema"] .tileart:not(.phototile *) .ta-bg {
  background: radial-gradient(80% 90% at 100% 110%, var(--a-20), transparent 70%);
}
/* two spotlight beams sweeping from the top corner */
html[data-tileart="cinema"] .tileart::before {
  width: 140%; height: 200%; right: -60%; top: -40%; transform-origin: 80% 0%;
  background: conic-gradient(from 196deg at 80% 0%, transparent 0deg, color-mix(in oklab, var(--a) 30%, rgba(255,255,255,.25)) 7deg, transparent 15deg, transparent 22deg, color-mix(in oklab, var(--a2) 22%, rgba(255,255,255,.18)) 27deg, transparent 33deg);
  filter: blur(3px); opacity: .7;
  animation: ta-sweep 11s ease-in-out infinite alternate;
}
html[data-mode="light"][data-tileart="cinema"] .tileart:not(.phototile *)::before {
  background: conic-gradient(from 196deg at 80% 0%, transparent 0deg, var(--a-30) 7deg, transparent 15deg, transparent 22deg, var(--a2-20) 27deg, transparent 33deg);
}
html[data-tileart="cinema"] .tileart :is(.f, .f2) { stroke: none; }
html[data-tileart="cinema"] .tileart .f2 { fill: color-mix(in oklab, var(--a2) 70%, #000); }
html[data-tileart="cinema"] .tileart .k { stroke: color-mix(in oklab, var(--a) 20%, #fff); stroke-width: 2.2; stroke-opacity: .8; }
html[data-tileart="cinema"] .tileart .k.dash { stroke-dasharray: 3 4; }
html[data-tileart="cinema"] .tileart .k.thick { stroke-width: 7; }
html[data-tileart="cinema"] .tileart :is(.d, .p, .w) { fill: #fff6e0; stroke: none; }
html[data-tileart="cinema"] .tileart .w { fill-opacity: .7; }
html[data-tileart="cinema"] .tileart .crowd { opacity: .3; }
html[data-tileart="cinema"] .tileart .ta-svg { filter: drop-shadow(0 0 16px var(--a-60)) drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
html[data-mode="light"][data-tileart="cinema"] .tileart:not(.phototile *) .ta-svg { filter: drop-shadow(0 10px 14px var(--a-30)); }
html[data-tileart="cinema"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 40%); mask-image: linear-gradient(105deg, transparent 0%, #000 40%); }
/* film strip along the bottom edge */
html[data-tileart="cinema"] .tileart .ta-fx {
  top: auto; height: 11px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.42) 4px 9px, transparent 9px 13px) 0 3px / 100% 5px no-repeat,
    linear-gradient(#0c0a12, #0c0a12);
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* ================================================================== CIRCUIT */
html[data-tileart="circuit"] .tileart { --ta-o: .85; }
html[data-tileart="circuit"] .tileart .v-circuit { display: inline; }
html[data-tileart="circuit"] .tileart .ta-bg {
  background:
    linear-gradient(rgba(var(--tint), .045) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgba(var(--tint), .045) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(60% 70% at 88% 90%, var(--a-20), transparent 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 70%); mask-image: linear-gradient(100deg, transparent 15%, #000 70%);
}
html[data-tileart="circuit"] .phototile .tileart .ta-bg { background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 14px 14px; }
html[data-tileart="circuit"] .tileart .tr { fill: none; stroke: var(--a); stroke-width: 1.4; stroke-opacity: .55; stroke-linejoin: miter; }
html[data-tileart="circuit"] .tileart .nd { fill: var(--bg); stroke: var(--a2); stroke-width: 1.6; }
html[data-tileart="circuit"] .phototile .tileart .nd { fill: var(--ta-cut); }
html[data-tileart="circuit"] .tileart :is(.f, .f2) { stroke-width: 1.6; stroke-linejoin: miter; }
html[data-tileart="circuit"] .tileart .f { fill: var(--a-12); stroke: var(--a); }
html[data-tileart="circuit"] .tileart .f2 { fill: var(--a2-20); stroke: var(--a2); }
html[data-tileart="circuit"] .tileart .k { stroke: var(--a); stroke-width: 1.4; stroke-linecap: square; stroke-dasharray: 6 3 1 3; }
html[data-tileart="circuit"] .tileart .k.thick { stroke-width: 5; stroke-dasharray: none; }
html[data-tileart="circuit"] .tileart :is(.d, .p) { fill: var(--a2); stroke: none; }
html[data-tileart="circuit"] .tileart .w { fill: var(--a); stroke: none; }
html[data-tileart="circuit"] .tileart .b { fill: var(--a); fill-opacity: .07; }
html[data-tileart="circuit"] .tileart .crowd { opacity: .25; }
html[data-tileart="circuit"] .tileart .ta-svg { filter: drop-shadow(0 0 6px var(--a-45)); }
html[data-tileart="circuit"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 38%); mask-image: linear-gradient(100deg, transparent 0%, #000 38%); }
/* a scan line sweeping across the board */
html[data-tileart="circuit"] .tileart .ta-fx {
  left: auto; width: 40%; right: 0;
  background: linear-gradient(90deg, transparent, var(--a-20) 50%, transparent);
  animation: ta-scan 6s linear infinite;
}

/* ================================================================== COMIC */
html[data-tileart="comic"] .tileart { --ta-o: 1; }
html[data-tileart="comic"] .tileart .v-comic { display: inline; }
html[data-tileart="comic"] .tileart .burst { fill: var(--a2); fill-opacity: .2; stroke: color-mix(in oklab, var(--a2) 55%, var(--ta-ink)); stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; scale: .9; }
html[data-tileart="comic"][data-mode="dark"] .tileart .burst { stroke: color-mix(in oklab, var(--a2) 50%, #000); }
html[data-tileart="comic"] .tileart .ta-bg {
  background: radial-gradient(circle, var(--a-45) 1.3px, transparent 1.8px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(75% 90% at 95% 15%, #000 10%, transparent 75%); mask-image: radial-gradient(75% 90% at 95% 15%, #000 10%, transparent 75%);
}
html[data-tileart="comic"] .tileart :is(.f, .f2) { stroke: var(--ta-ink); stroke-width: 3.2; stroke-linejoin: round; }
html[data-tileart="comic"] .tileart .f { fill: var(--a); }
html[data-tileart="comic"] .tileart .f2 { fill: var(--a2); }
html[data-tileart="comic"] .tileart .k { stroke: var(--ta-ink); stroke-width: 2.6; }
html[data-tileart="comic"] .tileart .k.dash { stroke-dasharray: 3 4; }
html[data-tileart="comic"] .tileart .k.thick { stroke-width: 7; }
html[data-tileart="comic"] .tileart :is(.d, .p) { fill: #fff; stroke: var(--ta-ink); stroke-width: 2; }
html[data-tileart="comic"] .tileart .sp { stroke-width: 1.4; }
html[data-tileart="comic"] .tileart .w { fill: #fff8c8; stroke: none; }
html[data-tileart="comic"] .tileart .b { fill: #fff; fill-opacity: .14; }
html[data-tileart="comic"] .tileart .crowd { opacity: .45; }
html[data-tileart="comic"] .tileart .ta-svg { filter: drop-shadow(3px 3px 0 var(--ta-ink)); }
html[data-tileart="comic"][data-mode="dark"] .tileart:not(.phototile *) .ta-svg { filter: drop-shadow(3px 3px 0 color-mix(in oklab, var(--a) 35%, #000)); }
html[data-tileart="comic"] .ta-emblem .ta-svg { height: 64%; right: -3%; top: 6%; rotate: -6deg; }
html[data-tileart="comic"] .tile.wide .ta-emblem .ta-svg { height: 104%; right: 44px; top: -2%; }
/* bottom-left wash keeps the bold art off the text */
html[data-tileart="comic"] .tileart:not(.phototile *)::after { background: linear-gradient(60deg, color-mix(in oklab, var(--solid) 70%, transparent) 0%, transparent 46%); }
html[data-tileart="comic"] .phototile .tileart .ta-bg { background: radial-gradient(circle, rgba(255,255,255,.18) 1.3px, transparent 1.8px) 0 0 / 7px 7px; }

/* ================================================================== GEO */
html[data-tileart="geo"] .tileart { --ta-o: .9; }
html[data-tileart="geo"] .tileart .ta-bg {
  inset: -46px -40px auto auto; width: 150px; height: 150px; border-radius: 50%;
  background: var(--a); opacity: .16;
}
html[data-tileart="geo"] .tileart::before {
  width: 90px; height: 90px; right: -14px; bottom: -40px; background: var(--a2); opacity: .16;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: ta-spin 40s linear infinite;
}
html[data-tileart="geo"] .tileart .ta-fx {
  inset: 14% auto auto 52%; width: 14px; height: 14px; border: 3px solid var(--a); opacity: .35; rotate: 20deg;
}
html[data-tileart="geo"] .tileart :is(.f, .f2, .d, .p, .w) { stroke: none; }
html[data-tileart="geo"] .tileart .f { fill: var(--a); }
html[data-tileart="geo"] .tileart .f2 { fill: var(--a2); }
html[data-tileart="geo"] .tileart .k { stroke: var(--ta-cut); stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; }
html[data-tileart="geo"] .tileart .k.thin { stroke-width: 2.2; }
html[data-tileart="geo"] .tileart .k.dash { stroke-dasharray: 4 4; }
html[data-tileart="geo"] .tileart .k.thick { stroke-width: 7; }
html[data-tileart="geo"] .tileart :is(.d, .p) { fill: var(--ta-cut); }
html[data-tileart="geo"] .tileart .w { fill: var(--ta-cut); opacity: .8; }
html[data-tileart="geo"] .tileart .b { fill: var(--a2); fill-opacity: .14; }
html[data-tileart="geo"] .tileart .crowd { opacity: .35; }
html[data-tileart="geo"] .phototile .tileart .ta-bg { opacity: .3; }
html[data-tileart="geo"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 42%); mask-image: linear-gradient(105deg, transparent 0%, #000 42%); }
html[data-tileart="geo"] .tileart:not(.phototile *)::after { background: linear-gradient(60deg, color-mix(in oklab, var(--solid) 55%, transparent) 0%, transparent 42%); }

/* ================================================================== NATURE */
html[data-tileart="nature"] .tileart { --ta-o: .8; }
html[data-tileart="nature"] .tileart .v-nature { display: inline; }
html[data-tileart="nature"] .tileart .ta-bg {
  inset: -36px -44px auto auto; width: 170px; height: 140px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: radial-gradient(circle at 40% 40%, var(--a-20), var(--a2-20));
  animation: ta-blob 18s ease-in-out infinite alternate;
}
html[data-tileart="nature"] .tileart::before {
  width: 80px; height: 70px; right: -20px; bottom: -30px; border-radius: 42% 58% 37% 63% / 55% 45% 55% 45%;
  background: var(--a2-20); animation: ta-blob 22s ease-in-out infinite alternate-reverse;
}
html[data-tileart="nature"] .tileart .lf { fill: var(--a2); fill-opacity: .4; stroke: none; }
html[data-tileart="nature"] .tileart .st { fill: none; stroke: var(--a2); stroke-width: 1.2; stroke-opacity: .6; stroke-linecap: round; }
html[data-tileart="nature"] .tileart :is(.f, .f2) { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="nature"] .tileart .f { fill: var(--a-20); stroke: var(--a); }
html[data-tileart="nature"] .tileart .f2 { fill: var(--a2-20); stroke: var(--a2); }
html[data-tileart="nature"] .tileart .k { stroke: var(--a); stroke-width: 1.8; }
html[data-tileart="nature"] .tileart .k.dash { stroke-dasharray: 2 5; }
html[data-tileart="nature"] .tileart .k.thick { stroke-width: 6; }
html[data-tileart="nature"] .tileart :is(.d, .p) { fill: var(--a2); stroke: none; }
html[data-tileart="nature"] .tileart .w { fill: var(--a); stroke: none; opacity: .5; }
html[data-tileart="nature"] .tileart .b { fill: var(--a); fill-opacity: .06; }
html[data-tileart="nature"] .tileart .crowd { opacity: .25; }
html[data-tileart="nature"] .phototile .tileart .f { fill: var(--a-30); stroke: color-mix(in oklab, var(--a) 50%, #fff); }
html[data-tileart="nature"] .phototile .tileart .k { stroke: color-mix(in oklab, var(--a) 40%, #fff); }
html[data-tileart="nature"] .tileart .ta-svg { animation: ta-sway 10s ease-in-out infinite alternate; }
html[data-tileart="nature"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 40%); mask-image: linear-gradient(105deg, transparent 0%, #000 40%); }

/* ================================================================== LUXE */
html[data-tileart="luxe"] .tileart { --ta-o: .9; }
html[data-tileart="luxe"] .tileart .ta-bg {
  background: radial-gradient(70% 80% at 90% 100%, var(--a-12), transparent 70%), linear-gradient(135deg, transparent 55%, color-mix(in oklab, var(--a) 6%, transparent));
}
/* the art keeps the metallic gradient stroke from the markup; fills go almost clear */
html[data-tileart="luxe"] .tileart :is(.f, .f2) { fill: var(--a-6); stroke-width: .9; }
html[data-tileart="luxe"] .tileart .k { stroke-width: .8; }
html[data-tileart="luxe"] .tileart .k.dash { stroke-dasharray: 1.5 3; }
html[data-tileart="luxe"] .tileart .k.thick { stroke-width: 3; }
html[data-tileart="luxe"] .tileart :is(.d, .p) { fill: none; stroke-width: .9; }
html[data-tileart="luxe"] .tileart .sp { fill: var(--a); stroke: none; }
html[data-tileart="luxe"] .tileart .w { fill: var(--a); stroke: none; opacity: .5; }
html[data-tileart="luxe"] .tileart .b { fill: var(--a); fill-opacity: .05; }
html[data-tileart="luxe"] .tileart .crowd { opacity: .18; }
html[data-tileart="luxe"] .ta-scene :is(.f, .f2) { stroke-width: 1.1; }
html[data-tileart="luxe"] .tileart .ta-svg { filter: drop-shadow(0 0 6px var(--a-30)); }
html[data-tileart="luxe"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 40%); mask-image: linear-gradient(105deg, transparent 0%, #000 40%); }
html[data-tileart="luxe"] .ta-emblem .ta-svg { height: 66%; right: 2%; top: 9%; }
html[data-tileart="luxe"] .tile.wide .ta-emblem .ta-svg { height: 96%; right: 46px; top: 2%; }
/* ornamental corners with a small diamond */
html[data-tileart="luxe"] .tileart .ta-fx {
  inset: 7px;
  --c: color-mix(in oklab, var(--a) 70%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) 4px 4px / 10px 1px no-repeat, linear-gradient(var(--c), var(--c)) 4px 4px / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 4px) calc(100% - 4px) / 10px 1px no-repeat, linear-gradient(var(--c), var(--c)) calc(100% - 4px) calc(100% - 4px) / 1px 10px no-repeat;
  opacity: .8;
}
html[data-tileart="luxe"] .tileart::before {
  width: 6px; height: 6px; right: 10px; bottom: 10px; rotate: 45deg; background: var(--a); opacity: .85;
  box-shadow: 0 0 8px var(--a-60);
}
/* slow sheen across the tile */
html[data-tileart="luxe"] .tileart::after {
  inset: -20% auto -20% 0; width: 45%;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--a) 14%, rgba(255,255,255,.1)) 50%, transparent);
  translate: -120% 0; animation: ta-sheen 9s ease-in-out infinite;
}
html[data-tileart="luxe"] .phototile .tileart::after {
  inset: 0; width: auto; translate: none; animation: none;
  background: linear-gradient(90deg, rgba(4,3,10,.78) 0%, rgba(4,3,10,.5) 38%, rgba(4,3,10,.08) 72%, transparent 100%);
}
html[data-tileart="luxe"] .phototile .tileart .ta-fx { --c: color-mix(in oklab, var(--a) 60%, #fff); }
html[data-tileart="luxe"] .phototile .tileart .m2 { stop-color: color-mix(in oklab, var(--a) 30%, #fff); }

/* ================================================================== MINIMAL */
html[data-tileart="minimal"] .tileart { --ta-o: .2; }
html[data-tileart="minimal"] .tileart :is(.f, .f2, .d, .p) { fill: none; stroke: var(--ta-fg); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="minimal"] .tileart .k { stroke: var(--ta-fg); stroke-width: 1.1; }
html[data-tileart="minimal"] .tileart .k.dash { stroke-dasharray: 2 4; }
html[data-tileart="minimal"] .tileart .k.thick { stroke-width: 2; }
html[data-tileart="minimal"] .tileart .sp { fill: var(--ta-fg); stroke: none; }
html[data-tileart="minimal"] .tileart :is(.w, .crowd, .b) { display: none; }
html[data-tileart="minimal"] .ta-emblem .ta-svg { height: 50%; right: 9%; top: 16%; }
html[data-tileart="minimal"] .tile.wide .ta-emblem .ta-svg { height: 70%; right: 54px; top: 15%; }
html[data-tileart="minimal"] .phototile .tileart { --ta-o: .4; }
html[data-tileart="minimal"] .tile:hover .tileart { --ta-o: .32; }

/* ------------------------------------------------------------------ motion */
@keyframes ta-float { from { translate: 0 0; } to { translate: -3px -5px; } }
@keyframes ta-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes ta-flicker { 0%, 100% { opacity: var(--ta-o); } 61% { opacity: calc(var(--ta-o) * .55); } 62% { opacity: var(--ta-o); } 64% { opacity: calc(var(--ta-o) * .7); } 65% { opacity: var(--ta-o); } }
@keyframes ta-blink { 0% { opacity: .9; } 100% { opacity: .35; } }
@keyframes ta-sweep { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes ta-scan { from { translate: -250% 0; } to { translate: 260% 0; } }
@keyframes ta-spin { to { rotate: 360deg; } }
@keyframes ta-blob { from { rotate: 0deg; scale: 1; } to { rotate: 24deg; scale: 1.08; } }
@keyframes ta-sheen { 0%, 55% { translate: -120% 0; } 100% { translate: 330% 0; } }
@media (prefers-reduced-motion: reduce) {
  .tileart, .tileart *, .tileart::before, .tileart::after { animation: none !important; transition: none !important; }
}

/* ================================================================== 2.8.56: SUBTLE SETS
   faded      : the original look: one big faint icon, tilted, in the corner (no picture)
   silhouette : the picture as a flat faint shape
   whisper    : the full picture, but soft and faded
   ghost      : the picture as faint thin outlines
   none       : no pictures at all                                                         */
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"]) .tileart :is(.f, .f2, .d, .w, .p, .crowd, .b) { fill: var(--a); }
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"]) .tileart .f2 { fill: var(--a2); }
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"]) .tileart .k { stroke: var(--a); stroke-width: 2; }
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"], html[data-tileart="none"]) .tileart .ta-bg { background: none; }
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"]) .tileart .ta-svg {
  -webkit-mask-image: none; mask-image: none; filter: none; }

/* faded: back to the faint tilted icon on the normal tiles; photo tiles keep a very faint picture */
html[data-tileart="faded"] .tile:not(.phototile):not(.videotile) .tileart { display: none; }
html[data-tileart="faded"] .tile:has(.tileart) .tilefx { display: block; }
html[data-tileart="faded"] :is(.phototile, .videotile) .tileart .ta-svg { opacity: .16; filter: saturate(.4); }

/* silhouette: flat shapes, no detail */
html[data-tileart="silhouette"] .tileart .ta-svg { opacity: .1; filter: brightness(0) invert(1); }
html[data-tileart="silhouette"][data-mode="light"] .tile:not(.phototile) .tileart .ta-svg { opacity: .08; filter: brightness(0); }
html[data-tileart="silhouette"] :is(.phototile) .tileart .ta-svg { opacity: .16; }
html[data-tileart="silhouette"] .tileart .ta-emblem .ta-svg, html[data-tileart="silhouette"] .ta-emblem .ta-svg { transform: rotate(-10deg); }

/* whisper: the full picture, faded right back */
html[data-tileart="whisper"] .tileart .ta-svg { opacity: .22; filter: saturate(.55); }
html[data-tileart="whisper"] .phototile .tileart .ta-svg { opacity: .3; }

/* ghost: thin outlines only */
html[data-tileart="ghost"] .tileart .ta-svg * { fill: none !important; stroke: var(--a); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
html[data-tileart="ghost"] .tileart .ta-svg { opacity: .32; }
html[data-tileart="ghost"] .tileart .ta-svg :is(defs, defs *) { stroke: none; }

/* none: nothing behind the tiles but the soft colour wash */
html[data-tileart="none"] .tileart .ta-svg, html[data-tileart="none"] .tile .tilefx { display: none; }

/* the subtle sets stand still unless an owner picks a Tile animation */
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"], html[data-tileart="none"])[data-tilefx="own"] .tileart :is(*, *::before, *::after),
:is(html[data-tileart="faded"], html[data-tileart="silhouette"], html[data-tileart="whisper"], html[data-tileart="ghost"], html[data-tileart="none"])[data-tilefx="own"] .tileart::before { animation: none; }