/* Identity name frames: one drawing per frame, shared by the hub and every game.
 * Markup comes from assets/identity/name-frames.js (IdentityFrames.render).  Everything is em-based, so the font-size of
 * the .idf element (sm / md / lg / xl or any inline size) scales the whole plate.  Colours arrive as --idf-p / -s / -a / -t
 * (primary / secondary / accent / text) from the item's `appearance`, so the old colour payload keeps working. */

.idf {
    --idf-p: #d2a24b; --idf-s: #1f5f8b; --idf-a: #f7ead1; --idf-t: #2b2216;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .42em;
    box-sizing: border-box; max-width: 100%; vertical-align: middle; isolation: isolate;
    padding: .36em 1em; border-radius: .4em; white-space: nowrap; letter-spacing: .01em;
    font: 800 14px/1.12 "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--idf-t);
    -webkit-font-smoothing: antialiased; text-align: left;
}
.idf--xs { font-size: 11px; } .idf--sm { font-size: 12.5px; } .idf--md { font-size: 15px; } .idf--lg { font-size: 21px; } .idf--xl { font-size: 30px; }
.idf-name { position: relative; z-index: 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.idf-cap { position: relative; z-index: 4; flex: none; height: 1.6em; width: auto; overflow: visible; }
.idf-cap--r.is-mirror { transform: scaleX(-1); }
.idf-cap .p { fill: var(--idf-p); } .idf-cap .s { fill: var(--idf-s); } .idf-cap .a { fill: var(--idf-a); } .idf-cap .t { fill: var(--idf-t); }
.idf-cap .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.idf-cap .lp { stroke: var(--idf-p); } .idf-cap .ls { stroke: var(--idf-s); } .idf-cap .la { stroke: var(--idf-a); } .idf-cap .lt { stroke: var(--idf-t); }
.idf-cap .k { fill: rgba(0, 0, 0, .35); } .idf-cap .w { fill: rgba(255, 255, 255, .7); }
.idf::before, .idf::after, .idf-deco { content: ""; position: absolute; pointer-events: none; }
.idf-deco { z-index: 2; display: block; }
.idf-deco i { position: absolute; display: block; }
.idf--plain { padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; border-radius: 0; gap: 0; }

/* ---- 01 Brass Badge: stamped brass rail with blue enamel inset and rivets */
.idf--brass_badge { --idf-t: var(--idf-a); padding: .4em 1em; border-radius: .38em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 50%, #fff), var(--idf-p) 42%, color-mix(in srgb, var(--idf-p) 65%, #000));
    box-shadow: inset 0 0 0 .09em color-mix(in srgb, var(--idf-p) 55%, #000), inset 0 .13em 0 .09em rgba(255, 255, 255, .45), 0 .14em .3em rgba(0, 0, 0, .38); }
.idf--brass_badge::before { inset: .27em; z-index: -1; border-radius: .22em; background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 80%, #fff), var(--idf-s) 40%, color-mix(in srgb, var(--idf-s) 80%, #000)); box-shadow: inset 0 .12em .3em rgba(0, 0, 0, .5), 0 0 0 .05em rgba(255, 255, 255, .4); }
.idf--brass_badge::after { inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) -160% 0 / 60% 100% no-repeat; animation: idf-sweep 5s ease-in-out infinite; }
.idf--brass_badge .idf-name { letter-spacing: .05em; text-shadow: 0 .08em 0 rgba(0, 0, 0, .5); }

/* ---- 02 Parchment Scroll: warm paper between two rolled ends */
.idf--parchment_scroll { --idf-t: #4a3418; padding: .4em .5em; font-family: Georgia, "Palatino Linotype", serif; font-style: italic; font-weight: 700; gap: 0; }
.idf--parchment_scroll::before { inset: .18em .6em; z-index: -1; border-radius: .08em;
    background: radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .55), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(120, 80, 20, .18), transparent 50%), linear-gradient(180deg, color-mix(in srgb, var(--idf-a) 90%, #fff), var(--idf-a) 60%, color-mix(in srgb, var(--idf-a) 80%, var(--idf-p)));
    box-shadow: 0 .12em .2em rgba(60, 35, 5, .35), inset 0 0 .6em rgba(120, 80, 20, .25); }
.idf--parchment_scroll .idf-name { padding: 0 .5em; }

/* ---- 03 Pixel Quest: stepped 8-bit plate with a blinking cursor */
.idf--pixel_quest { --idf-t: #fff; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .06em; border-radius: 0; padding: .45em 1.05em;
    clip-path: polygon(0 .3em, .3em .3em, .3em 0, calc(100% - .3em) 0, calc(100% - .3em) .3em, 100% .3em, 100% calc(100% - .3em), calc(100% - .3em) calc(100% - .3em), calc(100% - .3em) 100%, .3em 100%, .3em calc(100% - .3em), 0 calc(100% - .3em));
    background: #14101f; }
.idf--pixel_quest::before { inset: .3em; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #fff) 0 .22em, var(--idf-p) .22em calc(100% - .22em), color-mix(in srgb, var(--idf-p) 55%, #000) calc(100% - .22em)); }
.idf--pixel_quest .idf-name { text-shadow: .1em .1em 0 rgba(0, 0, 0, .55); text-transform: uppercase; }
.idf--pixel_quest .idf-name::after { content: ""; display: inline-block; width: .5em; height: .85em; margin-left: .2em; vertical-align: -.1em; background: var(--idf-s); animation: idf-blink 1s steps(1) infinite; }
.idf--pixel_quest .idf-cap { shape-rendering: crispEdges; }

/* ---- 04 Lime Ticket: admit-one ticket with perforation and punched notches */
.idf--lime_ticket { padding: .42em 1.15em; border-radius: .25em; --idf-t: #174b35;
    background: radial-gradient(circle at 0 50%, transparent 0 .34em, var(--idf-a) .35em) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 0 .34em, var(--idf-a) .35em) right / 51% 100% no-repeat;
    filter: drop-shadow(0 .1em 0 color-mix(in srgb, var(--idf-s) 70%, #000)); }
.idf--lime_ticket::before { inset: .24em .42em; z-index: -1; border: .09em dashed color-mix(in srgb, var(--idf-p) 80%, #000); border-radius: .12em; }
.idf--lime_ticket::after { top: .3em; bottom: .3em; right: 2.6em; border-right: .1em dotted var(--idf-s); z-index: 1; }
.idf--lime_ticket .idf-name { letter-spacing: .06em; text-transform: uppercase; font-size: .92em; }
.idf--lime_ticket .idf-cap { margin-right: .2em; }

/* ---- 05 Red Chalk: slate board in a wooden frame, chalk underline */
.idf--red_chalk { --idf-t: #fff4de; padding: .44em 1.05em; border-radius: .22em; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .13), transparent 60%), color-mix(in srgb, var(--idf-p) 22%, #1d1d1f);
    border: .3em solid var(--idf-a); box-shadow: inset 0 0 .5em rgba(0, 0, 0, .7), 0 .12em .25em rgba(0, 0, 0, .4), inset 0 0 0 .06em rgba(0, 0, 0, .35);
    border-image: linear-gradient(135deg, color-mix(in srgb, var(--idf-a) 60%, #fff), var(--idf-a) 45%, color-mix(in srgb, var(--idf-a) 60%, #000)) 1; }
.idf--red_chalk::before { left: .8em; right: .8em; bottom: .22em; height: .14em; z-index: 1; border-radius: .1em; background: repeating-linear-gradient(90deg, var(--idf-p) 0 .5em, transparent .5em .65em); opacity: .95; }
.idf--red_chalk::after { inset: 0; z-index: 0; background: radial-gradient(ellipse at 80% 100%, rgba(255, 255, 255, .12), transparent 50%); }
.idf--red_chalk .idf-name { text-shadow: 0 0 .22em rgba(255, 255, 255, .35); }

/* ---- 06 Green Felt: baize with stitched edge and brass pins */
.idf--green_felt { --idf-t: var(--idf-a); padding: .46em 1.15em; border-radius: .5em;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .15), transparent 55%), repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), var(--idf-p);
    box-shadow: inset 0 0 .7em rgba(0, 0, 0, .55), 0 .12em .3em rgba(0, 0, 0, .4); }
.idf--green_felt::before { inset: .24em; z-index: -1; border-radius: .34em; border: .09em dashed color-mix(in srgb, var(--idf-a) 80%, transparent); }
.idf--green_felt::after { inset: .1em; z-index: 1; background: radial-gradient(circle at 0 0, var(--idf-s) 0 .13em, transparent .15em) left top / 100% 100% no-repeat, radial-gradient(circle at 100% 0, var(--idf-s) 0 .13em, transparent .15em), radial-gradient(circle at 0 100%, var(--idf-s) 0 .13em, transparent .15em), radial-gradient(circle at 100% 100%, var(--idf-s) 0 .13em, transparent .15em); background-repeat: no-repeat; }
.idf--green_felt .idf-name { text-shadow: 0 .06em .12em rgba(0, 0, 0, .6); }

/* ---- 07 Forest Copper: bark plate with copper rails and leaf sprays */
.idf--forest_copper { --idf-t: var(--idf-a); padding: .5em 1em; border-radius: .3em; font-family: Georgia, serif; letter-spacing: .03em;
    background: repeating-linear-gradient(88deg, rgba(0, 0, 0, .12) 0 .08em, transparent .08em .42em), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 85%, #fff), var(--idf-p) 50%, color-mix(in srgb, var(--idf-p) 70%, #000)); box-shadow: 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--forest_copper::before { left: 0; right: 0; top: 0; height: .2em; background: linear-gradient(90deg, color-mix(in srgb, var(--idf-s) 65%, #000), var(--idf-s), color-mix(in srgb, var(--idf-s) 65%, #fff), var(--idf-s), color-mix(in srgb, var(--idf-s) 65%, #000)); z-index: 1; border-radius: .3em .3em 0 0; }
.idf--forest_copper::after { left: 0; right: 0; bottom: 0; height: .2em; background: linear-gradient(90deg, color-mix(in srgb, var(--idf-s) 65%, #000), var(--idf-s), color-mix(in srgb, var(--idf-s) 65%, #fff), var(--idf-s), color-mix(in srgb, var(--idf-s) 65%, #000)); z-index: 1; border-radius: 0 0 .3em .3em; }
.idf--forest_copper .idf-name { text-shadow: 0 .07em .1em rgba(0, 0, 0, .6); }
.idf--forest_copper .idf-cap { animation: idf-sway 4.5s ease-in-out infinite; transform-origin: 50% 100%; }

/* ---- 08 Coffee Cream: latte plate with a cup-ring stain */
.idf--coffee_cream { --idf-t: #3a2414; padding: .44em 1.05em; border-radius: 1.2em; font-family: Georgia, serif;
    background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .6), transparent 50%), linear-gradient(180deg, var(--idf-a), color-mix(in srgb, var(--idf-a) 75%, var(--idf-s)));
    box-shadow: inset 0 0 0 .14em var(--idf-p), inset 0 0 0 .22em var(--idf-a), 0 .14em .3em rgba(58, 36, 20, .45); }
.idf--coffee_cream::before { right: .35em; top: 50%; width: 1.7em; height: 1.7em; margin-top: -.85em; z-index: -1; border-radius: 50%; border: .12em solid color-mix(in srgb, var(--idf-p) 55%, transparent); border-bottom-color: transparent; transform: rotate(35deg); opacity: .7; }
.idf--coffee_cream .idf-steam { }
.idf--coffee_cream .steam { animation: idf-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.idf--coffee_cream .steam.b { animation-delay: -1.3s; }

/* ---- 09 Blue Porcelain: glazed tile with a delft pattern and scroll ends */
.idf--blue_porcelain { --idf-t: #1e3a8a; padding: .42em .5em; border-radius: .5em; font-family: Georgia, serif; font-weight: 700; gap: .1em;
    background: radial-gradient(circle at 50% 50%, transparent 0 .26em, color-mix(in srgb, var(--idf-s) 45%, transparent) .27em .34em, transparent .35em) 0 0 / 1.1em 1.1em, linear-gradient(180deg, #fff, color-mix(in srgb, var(--idf-a) 90%, var(--idf-s)));
    box-shadow: inset 0 0 0 .13em var(--idf-p), inset 0 0 0 .22em #fff, inset 0 0 0 .3em var(--idf-s), 0 .14em .28em rgba(30, 58, 138, .4); }
.idf--blue_porcelain::before { inset: .38em .9em; z-index: -1; background: rgba(255, 255, 255, .86); border-radius: .3em; box-shadow: 0 0 .5em .35em rgba(255, 255, 255, .86); }
.idf--blue_porcelain .idf-name { padding: 0 .3em; }

/* ---- 10 Stationmaster Plate: cream enamel railway sign with bolts */
.idf--stationmaster { --idf-t: #4a1010; padding: .4em .8em; border-radius: .3em; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size-adjust: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 90%, #fff), var(--idf-s));
    box-shadow: 0 0 0 .2em var(--idf-p), 0 0 0 .27em var(--idf-a), 0 .2em .3em .2em rgba(0, 0, 0, .35); margin: .3em; }
.idf--stationmaster::before { inset: .1em; z-index: -1; border: .06em solid var(--idf-p); border-radius: .2em; }
.idf--stationmaster::after { inset: .16em; z-index: 1; background: radial-gradient(circle at 0 0, #8a6a2a 0 .08em, transparent .1em), radial-gradient(circle at 100% 0, #8a6a2a 0 .08em, transparent .1em), radial-gradient(circle at 0 100%, #8a6a2a 0 .08em, transparent .1em), radial-gradient(circle at 100% 100%, #8a6a2a 0 .08em, transparent .1em); }
.idf--stationmaster .hand { transform-origin: 12px 12px; animation: idf-spin 12s linear infinite; }

/* ---- 11 Cobalt Counter Lights: marquee bulbs chasing round a dark panel */
.idf--cobalt_lights { --idf-t: var(--idf-s); padding: .62em 1.2em; border-radius: .4em; font-weight: 900; letter-spacing: .07em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 55%, #000), color-mix(in srgb, var(--idf-p) 30%, #000)); box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 80%, #fff), 0 0 .8em color-mix(in srgb, var(--idf-s) 45%, transparent); }
.idf--cobalt_lights .idf-name { text-shadow: 0 0 .5em var(--idf-s); }
.idf--cobalt_lights .idf-deco { inset: .1em .3em; }
.idf--cobalt_lights .idf-deco i { left: 0; right: 0; height: .26em; background: radial-gradient(circle, var(--idf-a) 0 .1em, transparent .13em) 0 0 / .8em .26em repeat-x; filter: drop-shadow(0 0 .12em var(--idf-a)); }
.idf--cobalt_lights .idf-deco i:nth-child(1) { top: 0; animation: idf-bulb 1s steps(1) infinite; }
.idf--cobalt_lights .idf-deco i:nth-child(2) { top: 0; background-position: .4em 0; animation: idf-bulb 1s steps(1) infinite reverse; }
.idf--cobalt_lights .idf-deco i:nth-child(3) { bottom: 0; animation: idf-bulb 1s steps(1) infinite; }
.idf--cobalt_lights .idf-deco i:nth-child(4) { bottom: 0; background-position: .4em 0; animation: idf-bulb 1s steps(1) infinite reverse; }

/* ---- 12 Sunset Split: diagonal dusk gradient, rolling sun */
.idf--sunset_split { --idf-t: var(--idf-a); padding: .44em 1.1em; border-radius: .5em .15em .5em .15em; overflow: hidden; font-weight: 900;
    background: linear-gradient(115deg, var(--idf-p) 0 49.5%, var(--idf-a) 49.5% 50.5%, var(--idf-s) 50.5%); box-shadow: 0 .14em .3em rgba(120, 30, 10, .45), inset 0 0 0 .1em rgba(255, 255, 255, .3); }
.idf--sunset_split::before { left: 0; right: 0; bottom: 0; height: 36%; z-index: -1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 .06em, transparent .06em .22em); mask: linear-gradient(0deg, #000, transparent); -webkit-mask: linear-gradient(0deg, #000, transparent); }
.idf--sunset_split::after { inset: 0; z-index: 1; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%) -150% 0 / 55% 100% no-repeat; animation: idf-sweep 3.6s ease-in-out infinite; }
.idf--sunset_split .idf-name { text-shadow: 0 .07em .12em rgba(80, 10, 0, .65); }
.idf--sunset_split .rays { transform-origin: 12px 18px; animation: idf-spin 14s linear infinite; }

/* ---- 13 Midnight Gold: navy plate, gold filigree border, tiny stars */
.idf--midnight_gold { --idf-t: #fff4d6; padding: .5em 1.2em; font-family: Georgia, serif; letter-spacing: .06em;
    clip-path: polygon(.5em 0, calc(100% - .5em) 0, 100% .5em, 100% calc(100% - .5em), calc(100% - .5em) 100%, .5em 100%, 0 calc(100% - .5em), 0 .5em);
    background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 70%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 88% 22%, #fff 0 .8px, transparent 1.3px), radial-gradient(circle at 45% 80%, #fff 0 .8px, transparent 1.3px), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 85%, #fff), var(--idf-p)); }
.idf--midnight_gold::before { inset: 0; z-index: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--idf-s) 60%, #fff), var(--idf-s) 40%, color-mix(in srgb, var(--idf-s) 60%, #000)); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: .13em; }
.idf--midnight_gold::after { inset: .3em; z-index: 1; border: .05em solid color-mix(in srgb, var(--idf-s) 70%, transparent); clip-path: polygon(.3em 0, calc(100% - .3em) 0, 100% .3em, 100% calc(100% - .3em), calc(100% - .3em) 100%, .3em 100%, 0 calc(100% - .3em), 0 .3em); }
.idf--midnight_gold .tw { animation: idf-twinkle 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- 14 Bubblegum Pop: comic panel with halftone and a hard shadow */
.idf--bubblegum_pop { --idf-t: #fff; padding: .46em 1.15em; border-radius: .6em; transform: rotate(-2.2deg); font-family: "Arial Black", Impact, sans-serif; font-weight: 900; letter-spacing: .02em;
    background: radial-gradient(circle, rgba(255, 255, 255, .45) 0 .08em, transparent .1em) 0 0 / .42em .42em, var(--idf-p); border: .14em solid #26112a; box-shadow: .22em .22em 0 var(--idf-s), .22em .22em 0 .14em #26112a; animation: idf-bob 2.2s ease-in-out infinite; }
.idf--bubblegum_pop .idf-name { -webkit-text-stroke: .05em #26112a; paint-order: stroke fill; text-shadow: .06em .08em 0 #26112a; }
.idf--bubblegum_pop .burst { animation: idf-pulse 1.1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- 15 Honeycomb: hexagon cells with dripping honey */
.idf--honeycomb { --idf-t: #4a2b05; padding: .62em 1.25em .5em; border-radius: .45em; font-weight: 900;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M14 2l12 7v14l-12 7-12-7V9zM0 33l12 7v9M28 33l-12 7v9' fill='none' stroke='%23b45309' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 1.3em auto, linear-gradient(180deg, var(--idf-s), var(--idf-p)); box-shadow: inset 0 0 0 .12em color-mix(in srgb, var(--idf-p) 60%, #000), 0 .14em .3em rgba(120, 60, 0, .45); }
.idf--honeycomb::before { left: 0; right: 0; top: 0; height: .5em; z-index: 1; border-radius: .45em .45em 0 0; background: radial-gradient(circle at 12% 100%, var(--idf-p) 0 .17em, transparent .18em), radial-gradient(circle at 38% 100%, var(--idf-p) 0 .12em, transparent .13em), radial-gradient(circle at 63% 100%, var(--idf-p) 0 .2em, transparent .21em), radial-gradient(circle at 88% 100%, var(--idf-p) 0 .13em, transparent .14em), linear-gradient(var(--idf-p), var(--idf-p)) 0 0 / 100% .26em no-repeat; background-repeat: no-repeat; animation: idf-drip 5s ease-in-out infinite; transform-origin: top; }
.idf--honeycomb .wing { animation: idf-flap .16s ease-in-out infinite alternate; transform-origin: 12px 12px; }
.idf--honeycomb .bee { animation: idf-bob 2.4s ease-in-out infinite; }

/* ---- 16 Royal Velvet: tufted velvet, braided gold rope and a crown */
.idf--royal_velvet { --idf-t: #fff2d2; padding: .62em 1.15em .5em; border-radius: .3em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .05em; margin-top: .45em;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 .12em, transparent .12em .5em), radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .22), transparent 70%), var(--idf-p);
    border: .22em solid transparent; border-image: repeating-linear-gradient(135deg, var(--idf-s) 0 .14em, color-mix(in srgb, var(--idf-s) 55%, #000) .14em .28em) 1; box-shadow: inset 0 0 .8em rgba(0, 0, 0, .55), 0 .15em .3em rgba(0, 0, 0, .4); }
.idf--royal_velvet .idf-name { text-shadow: 0 .06em .1em #000; }
.idf--royal_velvet .idf-deco { left: 50%; top: -.95em; width: 1.6em; margin-left: -.8em; height: 1.2em; z-index: 5; }

/* ---- 17 Sea Captain: rope-bound plate with anchor and ship's wheel */
.idf--sea_captain { --idf-t: #123847; padding: .46em .95em; border-radius: .5em; font-family: Georgia, serif; font-weight: 800;
    border: .3em solid transparent; background: linear-gradient(180deg, #fff, var(--idf-a)) padding-box, repeating-linear-gradient(60deg, var(--idf-s) 0 .16em, color-mix(in srgb, var(--idf-s) 55%, #000) .16em .32em) border-box; box-shadow: 0 .14em .3em rgba(0, 40, 60, .45); }
.idf--sea_captain::before { inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--idf-p) 12%, transparent) 0 .06em, transparent .06em .3em); }
.idf--sea_captain .wheel { transform-origin: 12px 12px; animation: idf-spin 18s linear infinite; }

/* ---- 18 Aurora Veil (mythic): northern lights over a night ridge */
.idf--aurora_veil { --idf-t: #f4fff9; padding: .6em 1.3em .95em; border-radius: .6em; overflow: hidden; font-weight: 900; letter-spacing: .04em;
    background: linear-gradient(180deg, #050b1f, #0a1d3a 70%, #112b4a); box-shadow: 0 0 0 .1em rgba(180, 255, 235, .5), 0 0 1em rgba(60, 255, 190, .4); }
.idf--aurora_veil::before { inset: -40% -10% 10%; z-index: -1; filter: blur(.35em); background: radial-gradient(ellipse at 20% 60%, color-mix(in srgb, var(--idf-p) 90%, transparent), transparent 55%), radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--idf-s) 85%, transparent), transparent 55%), radial-gradient(ellipse at 90% 70%, color-mix(in srgb, var(--idf-a) 80%, transparent), transparent 50%); animation: idf-aurora 7s ease-in-out infinite alternate; }
.idf--aurora_veil::after { left: 0; right: 0; bottom: 0; height: .42em; z-index: 1; background: #02060f; clip-path: polygon(0 100%, 0 55%, 10% 20%, 18% 60%, 28% 10%, 40% 65%, 52% 30%, 63% 70%, 75% 15%, 86% 60%, 94% 35%, 100% 70%, 100% 100%); }
.idf--aurora_veil .idf-name { text-shadow: 0 0 .4em color-mix(in srgb, var(--idf-p) 80%, #fff), 0 .06em .1em rgba(0, 0, 0, .8); }
.idf--aurora_veil .idf-deco { inset: 0; overflow: hidden; border-radius: inherit; }
.idf--aurora_veil .idf-deco i { width: .14em; height: .14em; border-radius: 50%; background: #fff; box-shadow: 0 0 .25em #fff; animation: idf-twinkle 2.4s ease-in-out infinite; }

/* ---- 19 Holo Prism: iridescent foil with a rainbow glare */
.idf--holo_prism { --idf-t: #1b1432; padding: .46em 1.2em; border-radius: .5em; font-weight: 900; letter-spacing: .03em;
    background: linear-gradient(115deg, #ff9ad5, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #bdb2ff, #ffc6ff, #ff9ad5) 0 0 / 300% 100%; animation: idf-holo 6s linear infinite; border: .08em solid rgba(255, 255, 255, .85); box-shadow: 0 0 .7em color-mix(in srgb, var(--idf-p) 50%, transparent), inset 0 0 .5em rgba(255, 255, 255, .6); }
.idf--holo_prism::before { inset: 0; z-index: 1; border-radius: inherit; background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .22) 0 .06em, transparent .06em .5em); mix-blend-mode: overlay; }
.idf--holo_prism::after { inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) -160% 0 / 55% 100% no-repeat; animation: idf-sweep 3.2s ease-in-out infinite; mix-blend-mode: soft-light; }
.idf--holo_prism .idf-name { text-shadow: 0 0 .25em rgba(255, 255, 255, .85); }

/* ---- 20 Circuit Trace: PCB with a data pulse running the trace */
.idf--circuit_trace { --idf-t: #b7ffe0; padding: .5em 1em; border-radius: .25em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .05em;
    background: repeating-linear-gradient(0deg, rgba(120, 255, 200, .1) 0 1px, transparent 1px .5em), repeating-linear-gradient(90deg, rgba(120, 255, 200, .1) 0 1px, transparent 1px .5em), radial-gradient(circle, color-mix(in srgb, var(--idf-s) 70%, #fff) 0 .09em, transparent .11em) .25em .25em / 1em 1em, linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 50%, #000), color-mix(in srgb, var(--idf-p) 25%, #000)); box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-s) 65%, #000), 0 0 .6em color-mix(in srgb, var(--idf-s) 45%, transparent); }
.idf--circuit_trace::before { left: .3em; right: .3em; bottom: .18em; height: .12em; z-index: 1; background: color-mix(in srgb, var(--idf-s) 60%, transparent); border-radius: .1em; }
.idf--circuit_trace::after { bottom: .1em; width: .9em; height: .28em; left: 0; z-index: 2; border-radius: .2em; background: radial-gradient(ellipse, #fff, var(--idf-s) 45%, transparent 72%); animation: idf-run 2.2s linear infinite; filter: drop-shadow(0 0 .2em var(--idf-s)); }
.idf--circuit_trace .led { animation: idf-blink 1.4s steps(1) infinite; }
.idf--circuit_trace .idf-name { text-shadow: 0 0 .35em color-mix(in srgb, var(--idf-s) 80%, transparent); }

/* ---- 21 Rainbow Loop (legendary): a spectrum ring forever circling the plate */
@property --idf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.idf--rainbow_loop { --idf-t: #fff; padding: .52em 1.2em; border-radius: 2em; font-weight: 900; border: .2em solid transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 30%, #0a1020), color-mix(in srgb, var(--idf-p) 15%, #060a14)) padding-box, conic-gradient(from var(--idf-ang), #ff5d5d, #ffc14d, #f6ff5d, #5dff9a, #5dd8ff, #8a6cff, #ff6ce0, #ff5d5d) border-box; animation: idf-ring 4s linear infinite; box-shadow: 0 0 .9em rgba(160, 120, 255, .45); }
.idf--rainbow_loop::before { inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .22), transparent 65%); }
.idf--rainbow_loop .idf-name { text-shadow: 0 0 .5em rgba(255, 255, 255, .45); }

/* ---- 22 Ice Crystal: cut glass with jagged crystal edges */
.idf--ice_crystal { --idf-t: #0a3a4f; padding: .55em 1.25em; font-weight: 900; letter-spacing: .03em;
    clip-path: polygon(.4em 0, 18% .22em, 36% 0, 54% .24em, 72% 0, 90% .22em, calc(100% - .4em) 0, 100% 50%, calc(100% - .4em) 100%, 88% calc(100% - .22em), 70% 100%, 52% calc(100% - .24em), 34% 100%, 16% calc(100% - .22em), .4em 100%, 0 50%);
    background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--idf-a) 70%, var(--idf-p)) 35%, color-mix(in srgb, var(--idf-p) 60%, #fff) 65%, #fff); }
.idf--ice_crystal::before { inset: .14em; z-index: 1; clip-path: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .85) 0 18%, transparent 18% 100%), linear-gradient(20deg, transparent 55%, rgba(255, 255, 255, .5) 55% 62%, transparent 62%); opacity: .75; }
.idf--ice_crystal::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 3.4s ease-in-out infinite; }
.idf--ice_crystal .flake { transform-origin: 12px 12px; animation: idf-spin 16s linear infinite; }

/* ---- 23 Cat Cafe: cosy cream plate with twitching ears and paws */
.idf--cat_cafe { --idf-t: #2f2216; padding: .5em 1.05em; border-radius: 1.1em; margin-top: .5em; font-weight: 900;
    background: radial-gradient(circle at 24% 30%, rgba(255, 255, 255, .7), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 80%, #fff), var(--idf-p)); border: .16em solid var(--idf-s); box-shadow: 0 .14em .28em rgba(60, 35, 10, .4); }
.idf--cat_cafe::before { inset: 0; z-index: -1; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 .8em, rgba(122, 79, 36, .1) .8em .85em); }
.idf--cat_cafe .idf-deco { left: 0; right: 0; top: -.72em; height: .9em; z-index: 1; }
.idf--cat_cafe .ear { position: absolute; top: 0; width: 1.05em; height: .9em; overflow: visible; transform-origin: 50% 100%; }
.idf--cat_cafe .ear.l { left: .45em; animation: idf-ear 5s ease-in-out infinite; } .idf--cat_cafe .ear.r { right: .45em; animation: idf-ear 5s ease-in-out 1.6s infinite; }

/* ---- 24 Fairy Lights: soft violet plate under a twinkling string */
.idf--fairy_lights { --idf-t: #4c1d95; padding: 1.1em 1.15em .5em; border-radius: .7em; font-weight: 900; margin-top: .3em;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--idf-a) 90%, var(--idf-p)), color-mix(in srgb, var(--idf-p) 45%, #fff)); box-shadow: 0 .14em .3em rgba(76, 29, 149, .4), inset 0 0 0 .08em rgba(255, 255, 255, .7); }
.idf--fairy_lights .idf-deco { left: .15em; right: .15em; top: -.1em; height: 1em; z-index: 5; }
.idf--fairy_lights .idf-deco svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.idf--fairy_lights .idf-deco i { width: .36em; height: .44em; margin-left: -.18em; border-radius: 50% 50% 55% 55%; animation: idf-fairy 2.2s ease-in-out infinite; }
.idf--fairy_lights .idf-deco i::before { content: ""; position: absolute; left: 50%; top: -.17em; width: .14em; height: .2em; margin-left: -.07em; background: #5b4a7a; border-radius: .05em; }

/* ---- 25 Ember Lane: charred plate with glowing cracks and rising embers */
.idf--ember_lane { --idf-t: #fff1d6; padding: .56em 1.25em; border-radius: .4em; font-weight: 900; letter-spacing: .04em;
    background: linear-gradient(62deg, transparent 42%, color-mix(in srgb, var(--idf-p) 90%, transparent) 43% 44%, transparent 45%) , linear-gradient(-20deg, transparent 58%, color-mix(in srgb, var(--idf-s) 80%, transparent) 59% 60%, transparent 61%), radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--idf-p) 70%, #000), transparent 65%), linear-gradient(180deg, #2a1a10, var(--idf-a)); box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 70%, #000), 0 0 .9em color-mix(in srgb, var(--idf-p) 55%, transparent); animation: idf-glow 2.4s ease-in-out infinite; }
.idf--ember_lane .idf-name { text-shadow: 0 0 .35em var(--idf-p), 0 .06em .1em #000; }
.idf--ember_lane .idf-deco { inset: -.2em 0 0; overflow: visible; }
.idf--ember_lane .idf-deco i { bottom: .1em; width: .18em; height: .18em; border-radius: 50%; background: var(--idf-s); box-shadow: 0 0 .3em var(--idf-p); opacity: 0; animation: idf-ember 2.6s ease-out infinite; }
.idf--ember_lane .fl { animation: idf-flicker .9s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }

/* ---- 26 Frosted Mint: scalloped icing with sugar sparkle */
.idf--frosted_mint { --idf-t: #0e5a54; padding: .78em 1.2em .5em; border-radius: .5em; font-weight: 900; margin-top: .1em;
    background: radial-gradient(circle at 20% 60%, #fff 0 .05em, transparent .07em), radial-gradient(circle at 60% 70%, #fff 0 .05em, transparent .07em), radial-gradient(circle at 85% 55%, #fff 0 .05em, transparent .07em), linear-gradient(180deg, color-mix(in srgb, var(--idf-a) 85%, #fff), color-mix(in srgb, var(--idf-p) 40%, #fff)); box-shadow: 0 .14em .28em rgba(14, 90, 84, .35); }
.idf--frosted_mint::before { left: 0; right: 0; top: -.05em; height: .72em; z-index: 1; border-radius: .5em .5em 0 0; background: radial-gradient(circle at 50% 0, #fff 0 .46em, transparent .48em) 0 0 / 1.15em 100% repeat-x; filter: drop-shadow(0 .1em 0 color-mix(in srgb, var(--idf-p) 50%, #fff)); }
.idf--frosted_mint .swirl { transform-origin: 12px 12px; animation: idf-spin 9s linear infinite; }
.idf--frosted_mint .idf-deco { inset: 0; }
.idf--frosted_mint .idf-deco i { width: .5em; height: .5em; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: idf-twinkle 2.2s ease-in-out infinite; }

/* ---- 27 Baroque Gold: gilded cartouche with a rolling shine */
.idf--baroque_gold { --idf-t: #ffe9a8; padding: .56em .6em; border-radius: .5em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .06em; gap: .2em;
    background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(180deg, #3b0d17, #230810);
    border: .2em solid transparent; border-image: linear-gradient(135deg, #fff1b0, var(--idf-p) 30%, #8a5a12 55%, var(--idf-p) 75%, #fff1b0) 1; box-shadow: 0 0 0 .08em #3a2406, 0 .18em .35em rgba(0, 0, 0, .55), inset 0 0 .6em rgba(0, 0, 0, .6); }
.idf--baroque_gold::before { inset: .12em; z-index: 1; border: .05em solid color-mix(in srgb, var(--idf-p) 80%, transparent); }
.idf--baroque_gold::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 238, 170, .5) 50%, transparent 60%) -160% 0 / 55% 100% no-repeat; animation: idf-sweep 4.4s ease-in-out infinite; }
.idf--baroque_gold .idf-name { background: linear-gradient(180deg, #fff6c8, var(--idf-p) 55%, #b9822a); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .35em; text-shadow: none; filter: drop-shadow(0 .05em 0 rgba(0, 0, 0, .7)); }
.idf--baroque_gold .idf-deco { left: 50%; top: -.5em; width: 1.4em; margin-left: -.7em; height: .8em; z-index: 5; }

/* ---- 28 Starlit Banner: swallow-tail ribbon over a starfield */
.idf--starlit_banner { --idf-t: #fff; padding: .5em 1.5em; gap: .5em; font-weight: 900; letter-spacing: .06em;
    clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%, .8em 50%);
    background: radial-gradient(circle at 15% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 40% 75%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 25%, #fff 0 1.2px, transparent 1.7px), radial-gradient(circle at 90% 70%, #fff 0 1px, transparent 1.5px), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 85%, #fff), var(--idf-p) 50%, color-mix(in srgb, var(--idf-p) 70%, #000)); }
.idf--starlit_banner::before { inset: 0; z-index: 1; clip-path: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 90%, #fff) 0 .12em, transparent .12em calc(100% - .12em), color-mix(in srgb, var(--idf-s) 60%, #000) calc(100% - .12em)); }
.idf--starlit_banner::after { inset: 0; z-index: 3; clip-path: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 4.8s ease-in-out infinite; }
.idf--starlit_banner .idf-name { text-shadow: 0 .06em .12em rgba(0, 0, 0, .7); }
.idf--starlit_banner .tw { animation: idf-twinkle 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- 29 Neon Sign (mythic): tube lettering on brick, flickering */
.idf--neon_sign { --idf-t: #f8fbff; padding: .55em 1.35em; border-radius: .6em; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 .5h40M0 10.5h40M10 .5v10M30 .5v10M0 10.5v10M20 10.5v10M40 10.5v10' stroke='%23000' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E") 0 0 / 1.6em auto, linear-gradient(180deg, #2a1d22, #160f14); box-shadow: inset 0 0 .8em #000; border: .13em solid var(--idf-p);
    box-shadow: inset 0 0 .8em #000, 0 0 .12em .02em var(--idf-p), 0 0 .5em .05em var(--idf-p), 0 0 1.2em color-mix(in srgb, var(--idf-p) 60%, transparent), inset 0 0 .5em color-mix(in srgb, var(--idf-p) 50%, transparent); animation: idf-neon 6s steps(1) infinite; }
.idf--neon_sign::before { inset: .3em; z-index: 1; border: .09em solid var(--idf-s); border-radius: .35em; box-shadow: 0 0 .15em var(--idf-s), 0 0 .6em var(--idf-s), inset 0 0 .35em color-mix(in srgb, var(--idf-s) 70%, transparent); }
.idf--neon_sign .idf-name { text-shadow: 0 0 .06em #fff, 0 0 .3em var(--idf-p), 0 0 .7em var(--idf-p), 0 0 1.2em var(--idf-s); animation: idf-neontext 5s steps(1) infinite; }

/* ---- 30 Sakura Drift: blossom branch and falling petals */
.idf--sakura_drift { --idf-t: #7a1f48; padding: .5em 1.15em; border-radius: 1.2em .3em 1.2em .3em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .04em;
    background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .75), transparent 55%), linear-gradient(135deg, #fff3f7, color-mix(in srgb, var(--idf-p) 55%, #fff)); box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 75%, #fff), 0 .14em .3em rgba(122, 31, 72, .3); }
.idf--sakura_drift .idf-deco { inset: 0; overflow: visible; }
.idf--sakura_drift .idf-deco i { top: -.2em; width: .42em; height: .3em; border-radius: 80% 0 80% 0; background: var(--idf-p); opacity: 0; animation: idf-petal 5s linear infinite; }

/* ======================================================================= 2026 plates (shop-extras-identity.php)
 * Same contract as above: em-based, colours from --idf-p/s/a/t, the name always sits on a calm, high-contrast field
 * (the busy art stays at the ends and edges) so it reads at the xs size of the matchup bar too. */

/* ---- 90s: Food Court Neon - pink and teal tubes on a dark mall sign */
.idf--food_court_neon { --idf-t: #fff; padding: .5em 1.2em; border-radius: .7em; font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-weight: 900; letter-spacing: .04em;
    background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--idf-p) 35%, transparent), transparent 60%), linear-gradient(180deg, #24123a, #160a26);
    border: .12em solid var(--idf-p); box-shadow: 0 0 .1em var(--idf-p), 0 0 .6em color-mix(in srgb, var(--idf-p) 70%, transparent), inset 0 0 .5em color-mix(in srgb, var(--idf-p) 45%, transparent); }
.idf--food_court_neon::before { inset: .25em; z-index: 1; border: .07em solid var(--idf-s); border-radius: .45em; box-shadow: 0 0 .3em var(--idf-s); }
.idf--food_court_neon::after { display: none; }
.idf--food_court_neon .idf-name { text-shadow: 0 0 .1em #fff, 0 0 .4em var(--idf-p), 0 0 .8em var(--idf-p); }
.idf--food_court_neon .buzz { animation: idf-neon 3.4s steps(1) infinite; }

/* ---- 90s: Glow Stick Rave - black plate wrapped in pulsing glow sticks */
.idf--glow_stick { --idf-t: #fff; padding: .5em 1.15em; border-radius: 2em; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
    background: radial-gradient(ellipse at 50% 50%, #1a1a24, #07070b); border: .16em solid transparent;
    background-clip: padding-box; box-shadow: 0 0 0 .16em var(--idf-p), 0 0 .5em var(--idf-p), 0 0 1em color-mix(in srgb, var(--idf-s) 60%, transparent), inset 0 0 .5em color-mix(in srgb, var(--idf-a) 40%, transparent); animation: idf-rave 2.4s linear infinite; }
.idf--glow_stick .idf-name { text-shadow: 0 0 .3em var(--idf-a), 0 0 .7em var(--idf-s); }
.idf--glow_stick .glw { animation: idf-pulse-glow 1.2s ease-in-out infinite; } .idf--glow_stick .glw.b { animation-delay: -.6s; }

/* ---- 90s: Torn Flannel - red tartan with a ripped lower edge */
.idf--torn_flannel { --idf-t: #fff3dc; padding: .48em 1.1em .62em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .03em;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 94% 100%, 88% 86%, 80% 97%, 72% 85%, 63% 100%, 55% 87%, 46% 98%, 38% 86%, 29% 99%, 20% 85%, 11% 97%, 5% 86%, 0 94%);
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 .32em, transparent .32em .9em, rgba(255, 255, 255, .08) .9em 1em, transparent 1em 1.6em), repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 .32em, transparent .32em .9em, rgba(255, 255, 255, .08) .9em 1em, transparent 1em 1.6em), var(--idf-p); }
.idf--torn_flannel::before { left: .55em; right: .55em; top: 50%; height: 1.3em; margin-top: -.72em; z-index: -1; border-radius: .2em; background: color-mix(in srgb, var(--idf-s) 85%, transparent); }
.idf--torn_flannel .idf-name { text-shadow: 0 .06em 0 #000; }

/* ---- 90s: Grip Tape - gritty black deck with a scuffed nose and stickers */
.idf--grip_tape { --idf-t: #f4f4f4; padding: .5em 1.25em; border-radius: 1.2em; font-family: Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0 .03em, transparent .05em) 0 0 / .18em .18em, radial-gradient(circle, rgba(0, 0, 0, .5) 0 .03em, transparent .05em) .09em .09em / .18em .18em, var(--idf-p);
    box-shadow: 0 0 0 .1em color-mix(in srgb, var(--idf-a) 70%, #000), 0 .16em 0 .1em var(--idf-s), 0 .2em .35em rgba(0, 0, 0, .45); }
.idf--grip_tape::before { right: 2.4em; top: .16em; width: 1.4em; height: .5em; z-index: 1; transform: rotate(-8deg); border-radius: .1em; background: var(--idf-s); opacity: .9; }
.idf--grip_tape .idf-name { text-shadow: .05em .05em 0 #000; }

/* ---- 90s: High Score - arcade score table, blinking 1ST */
.idf--high_score { --idf-t: var(--idf-p); padding: .5em 1em; border-radius: .15em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 .06em, transparent .06em .2em), #05060c; border: .14em solid var(--idf-s); box-shadow: 0 0 0 .1em #05060c, 0 0 0 .2em var(--idf-a), 0 0 .8em color-mix(in srgb, var(--idf-s) 45%, transparent); }
.idf--high_score .idf-name::before { content: "1ST "; color: var(--idf-s); animation: idf-blink 1.1s steps(1) infinite; }
.idf--high_score .idf-name { text-shadow: 0 0 .3em color-mix(in srgb, var(--idf-p) 70%, transparent); }
.idf--high_score .idf-cap { shape-rendering: crispEdges; }
.idf--high_score .coin { animation: idf-bob 1.6s ease-in-out infinite; }

/* ---- 90s: Backstage Pass - laminated pass with a holo strip */
.idf--backstage_pass { padding: .5em 1.15em; border-radius: .5em; font-weight: 900; letter-spacing: .03em;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), transparent 40%), linear-gradient(90deg, var(--idf-s) 0 .5em, var(--idf-a) .5em);
    border: .1em solid color-mix(in srgb, var(--idf-s) 70%, #000); box-shadow: inset 0 0 0 .14em rgba(255, 255, 255, .85), 0 .14em .3em rgba(42, 20, 64, .4); }
.idf--backstage_pass::before { right: .4em; top: .3em; bottom: .3em; width: .5em; z-index: 1; border-radius: .15em; background: linear-gradient(180deg, #ff9ad5, #9bf6ff, #fdffb6, #bdb2ff) 0 0 / 100% 300%; animation: idf-holo-v 4s linear infinite; }
.idf--backstage_pass::after { left: .5em; right: 1.1em; bottom: .16em; height: .1em; z-index: 1; background: repeating-linear-gradient(90deg, var(--idf-p) 0 .3em, transparent .3em .5em); }
.idf--backstage_pass .tw { animation: idf-twinkle 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- 90s: Dial-Up Window - grey desktop window with a progress bar */
.idf--dial_up_window { --idf-t: #111; padding: 1.05em .9em .55em; border-radius: 0; font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif; font-weight: 700;
    background: linear-gradient(90deg, var(--idf-p), #1084d0) 0 0 / 100% .7em no-repeat, var(--idf-s); box-shadow: inset -.08em -.08em 0 #404040, inset .08em .08em 0 #fff, inset -.16em -.16em 0 #808080, inset .16em .16em 0 #dfdfdf; }
.idf--dial_up_window::before { right: .22em; top: .14em; width: 1.5em; height: .44em; z-index: 1; background: radial-gradient(circle, #111 0 .05em, transparent .06em) 0 0 / .5em .44em, linear-gradient(#c0c0c0, #c0c0c0); box-shadow: inset -.04em -.04em 0 #404040; }
.idf--dial_up_window::after { left: .5em; right: .5em; bottom: .2em; height: .16em; z-index: 1; background: repeating-linear-gradient(90deg, #000080 0 .25em, transparent .25em .32em) 0 0 / 0 100% no-repeat, #fff; box-shadow: inset .03em .03em 0 #808080; animation: idf-progress 6s steps(14) infinite; }

/* ---- modern: Sold Out Tag - bold red box tag */
.idf--sold_out_tag { --idf-t: #fff; padding: .48em 1em; border-radius: .1em; font-family: "Arial Black", Impact, sans-serif; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; font-style: italic;
    background: var(--idf-p); box-shadow: .18em .18em 0 var(--idf-s); }
.idf--sold_out_tag::before { inset: .18em; z-index: -1; border: .06em solid rgba(255, 255, 255, .9); }

/* ---- modern: Reflective Strip - matte ripstop with a flaring reflective band */
.idf--reflective_strip { --idf-t: #eef3f8; padding: .55em 1.15em; border-radius: .2em; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; overflow: hidden;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 .05em, transparent .05em .28em), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 .05em, transparent .05em .28em), var(--idf-p); box-shadow: inset 0 0 0 .08em #3a4049, 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--reflective_strip::before { left: 0; right: 0; top: .2em; height: .18em; z-index: 1; background: linear-gradient(90deg, var(--idf-s), #fff, var(--idf-s)) 0 0 / 200% 100%; animation: idf-flare 3s ease-in-out infinite; box-shadow: 0 calc(100% + 1.3em) 0 transparent; }
.idf--reflective_strip::after { left: 0; right: 0; bottom: .2em; height: .18em; z-index: 1; background: linear-gradient(90deg, var(--idf-s), #fff, var(--idf-s)) 0 0 / 200% 100%; animation: idf-flare 3s ease-in-out -1.5s infinite; }
.idf--reflective_strip .idf-name { text-shadow: 0 .06em .12em #000; }
.idf--reflective_strip .idf-fx--rain i { opacity: .35; }

/* ---- cafe: Latte Art - cream cup, top-down, foam ring */
.idf--latte_art { padding: .5em 1.1em; border-radius: 2em; font-family: Georgia, serif; font-weight: 700; font-style: italic;
    background: radial-gradient(ellipse at 50% 50%, var(--idf-a) 55%, color-mix(in srgb, var(--idf-s) 70%, var(--idf-a)) 75%, var(--idf-s) 90%);
    box-shadow: 0 0 0 .14em #fff, 0 0 0 .22em color-mix(in srgb, var(--idf-p) 40%, #fff), 0 .16em .35em rgba(58, 36, 20, .4); }
.idf--latte_art .steam { animation: idf-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .idf--latte_art .steam.b { animation-delay: -1.3s; }

/* ---- gym: Personal Best - rubber gym plate, chalk dust */
.idf--personal_best { --idf-t: #fff; padding: .5em 1em; border-radius: .25em; font-family: Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .07em; text-transform: uppercase;
    background: radial-gradient(ellipse at 70% 20%, rgba(255, 255, 255, .14), transparent 50%), linear-gradient(180deg, #2c3742, var(--idf-p)); border-left: .32em solid var(--idf-s); border-right: .32em solid var(--idf-s); box-shadow: 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--personal_best::after { right: .5em; bottom: .1em; width: 2.4em; height: .4em; z-index: 1; background: radial-gradient(ellipse, rgba(255, 255, 255, .35), transparent 70%); }

/* ---- stream: Live Now - streamer overlay with a cycling RGB edge */
.idf--live_now { --idf-t: #fff; padding: .5em 1.1em; border-radius: .45em; font-weight: 900; letter-spacing: .03em; border: .15em solid transparent;
    background: linear-gradient(180deg, #17121f, #0d0a14) padding-box, conic-gradient(from var(--idf-ang), var(--idf-p), var(--idf-s), var(--idf-a), var(--idf-p)) border-box; animation: idf-ring 3s linear infinite; box-shadow: 0 0 .7em color-mix(in srgb, var(--idf-s) 45%, transparent); }
.idf--live_now .rec { animation: idf-blink 1.2s steps(1) infinite; }
.idf--live_now .idf-name { text-shadow: 0 0 .3em color-mix(in srgb, var(--idf-a) 60%, transparent); }

/* ---- halloween: Bat Wing - crimson coffin plate, gold trim */
.idf--bat_wing { --idf-t: #ffe9d6; padding: .5em 1.2em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .08em; gap: .2em;
    clip-path: polygon(.7em 0, calc(100% - .7em) 0, 100% 40%, calc(100% - .7em) 100%, .7em 100%, 0 40%);
    background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .15), transparent 60%), linear-gradient(180deg, var(--idf-p), color-mix(in srgb, var(--idf-p) 45%, #000)); }
.idf--bat_wing::before { inset: .12em; z-index: -1; clip-path: polygon(.66em 0, calc(100% - .66em) 0, 100% 40%, calc(100% - .66em) 100%, .66em 100%, 0 40%); background: linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #000), var(--idf-s)); }
.idf--bat_wing::after { inset: 0; z-index: -2; background: var(--idf-a); clip-path: inherit; }
.idf--bat_wing .idf-name { text-shadow: 0 0 .3em rgba(255, 60, 60, .5), 0 .06em .1em #000; }
.idf--bat_wing .flap { animation: idf-batflap 3.2s ease-in-out infinite; transform-origin: 100% 50%; transform-box: fill-box; }

/* ---- halloween: Cauldron Brew - bubbling witch-green potion */
.idf--cauldron_brew { --idf-t: #eaffef; padding: .5em 1.15em; border-radius: .6em; font-weight: 900; letter-spacing: .04em; overflow: visible;
    background: radial-gradient(ellipse at 50% 130%, color-mix(in srgb, var(--idf-p) 70%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 85%, #000), var(--idf-s));
    box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 60%, #000), 0 0 .8em color-mix(in srgb, var(--idf-p) 40%, transparent); }
.idf--cauldron_brew .idf-name { text-shadow: 0 0 .35em var(--idf-p), 0 .06em .1em #000; }
.idf--cauldron_brew .bub { animation: idf-bubpop 1.8s ease-in infinite; transform-origin: center; transform-box: fill-box; } .idf--cauldron_brew .bub.b { animation-delay: -.9s; }

/* ---- halloween: Jack-o'-Lantern - ribbed pumpkin, flickering candle faces */
.idf--jack_o_lantern { padding: .5em 1.15em; border-radius: 1.3em; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-weight: 900;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 .08em, transparent .08em 1.1em), radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--idf-p) 60%, #fff), var(--idf-p) 60%, color-mix(in srgb, var(--idf-p) 70%, #000));
    box-shadow: inset 0 -.18em .3em rgba(80, 30, 0, .45), 0 .14em .3em rgba(80, 30, 0, .45); }
.idf--jack_o_lantern .idf-name { text-shadow: 0 .06em 0 color-mix(in srgb, var(--idf-a) 60%, transparent); }
.idf--jack_o_lantern .candle { animation: idf-candle 1.4s ease-in-out infinite; }

/* ---- halloween: Scarab Tomb - sandstone tablet in linen wraps */
.idf--scarab_tomb { padding: .52em 1.1em; border-radius: .2em; font-family: "Papyrus", Georgia, serif; font-weight: 700; letter-spacing: .06em;
    background: linear-gradient(170deg, transparent 0 38%, rgba(245, 230, 196, .9) 38% 46%, transparent 46%), linear-gradient(8deg, transparent 0 60%, rgba(245, 230, 196, .85) 60% 67%, transparent 67%), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 80%, #fff), var(--idf-p));
    box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 50%, #000), 0 .14em .3em rgba(58, 42, 18, .45); }
.idf--scarab_tomb::before { inset: .3em .4em; z-index: -1; border-radius: .1em; background: rgba(245, 230, 196, .85); }
.idf--scarab_tomb .fl { animation: idf-flicker .9s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }

/* ---- halloween: Skull Disco - mirror-ball dance floor */
.idf--skull_disco { --idf-t: #fff; padding: .5em 1.1em; border-radius: .4em; font-weight: 900; letter-spacing: .05em; overflow: hidden;
    background: conic-gradient(from 0deg at 50% 50%, #111 0 25%, #1b1b22 0 50%, #111 0 75%, #1b1b22 0) 0 0 / .8em .8em; box-shadow: inset 0 0 0 .1em var(--idf-p), 0 0 .7em color-mix(in srgb, var(--idf-p) 45%, transparent); }
.idf--skull_disco .idf-name { text-shadow: 0 0 .3em var(--idf-p), 0 0 .6em var(--idf-s); }

/* ---- halloween: Friendly Boo - soft see-through ghost, floating */
.idf--friendly_boo { padding: .5em 1.15em .62em; border-radius: 1.2em 1.2em .3em .3em; font-weight: 900; animation: idf-float 3s ease-in-out infinite;
    background: radial-gradient(ellipse at 50% 20%, #fff, color-mix(in srgb, var(--idf-p) 80%, #fff)); box-shadow: 0 .3em .6em color-mix(in srgb, var(--idf-s) 45%, transparent), inset 0 0 0 .08em color-mix(in srgb, var(--idf-s) 60%, #fff); }
.idf--friendly_boo::after { left: 0; right: 0; bottom: -.24em; height: .3em; z-index: -1; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--idf-p) 80%, #fff) 0 .26em, transparent .27em) 0 0 / .62em 100% repeat-x; }
.idf--friendly_boo .boo { animation: idf-bob 2s ease-in-out infinite; }

/* ---- halloween: Haunted Manor (legendary) - moonlit manor, cobwebs, bats */
.idf--haunted_manor { --idf-t: #f3e8ff; padding: .55em 1.15em; border-radius: .3em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .05em; overflow: hidden;
    background: radial-gradient(circle at 82% 22%, #fff7d6 0 .38em, rgba(255, 247, 214, .25) .45em, transparent 1em), linear-gradient(180deg, var(--idf-p), var(--idf-s));
    box-shadow: inset 0 0 0 .09em #6b4a8f, 0 0 .8em rgba(107, 74, 143, .55); }
.idf--haunted_manor::after { left: 0; right: 0; bottom: 0; height: .4em; z-index: 1; background: #0d0716; clip-path: polygon(0 100%, 0 60%, 8% 60%, 8% 20%, 12% 0, 16% 20%, 16% 60%, 30% 60%, 34% 40%, 38% 60%, 62% 60%, 62% 30%, 70% 30%, 70% 60%, 86% 60%, 90% 10%, 94% 60%, 100% 60%, 100% 100%); }
.idf--haunted_manor .idf-name { text-shadow: 0 0 .35em rgba(255, 211, 77, .45), 0 .06em .1em #000; }
.idf--haunted_manor .win { animation: idf-candle 2.2s ease-in-out infinite; }

/* ---- halloween: Graveyard Fog (legendary) - rolling fog, rising hand */
.idf--graveyard_fog { --idf-t: #eaf7ea; padding: .55em 1.15em; border-radius: .35em; font-weight: 900; letter-spacing: .04em; overflow: hidden;
    background: radial-gradient(ellipse at 50% 0, rgba(201, 214, 207, .25), transparent 60%), linear-gradient(180deg, #2b3a32, var(--idf-s)); box-shadow: inset 0 0 0 .09em #4c6b3c, 0 0 .7em rgba(127, 211, 107, .35); }
.idf--graveyard_fog .idf-name { text-shadow: 0 0 .3em var(--idf-p), 0 .06em .1em #000; }
.idf--graveyard_fog .rise { animation: idf-rise 4s ease-in-out infinite; }

/* ---- film: Silver Screen - film strip, flickering title card */
.idf--silver_screen { --idf-t: #f6f6f6; padding: .7em 1.1em; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: radial-gradient(ellipse, #3a3a3a, #121212); box-shadow: 0 .14em .3em rgba(0, 0, 0, .5); filter: grayscale(.2); }
.idf--silver_screen::before { left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: linear-gradient(#111, #111) 0 0 / 100% .3em no-repeat, linear-gradient(#111, #111) 0 100% / 100% .3em no-repeat; }
.idf--silver_screen::after { left: 0; right: 0; top: .08em; height: calc(100% - .16em); z-index: 1; background: linear-gradient(90deg, #e8e8e8 0 .18em, transparent .18em) 0 0 / .45em .14em repeat-x, linear-gradient(90deg, #e8e8e8 0 .18em, transparent .18em) 0 100% / .45em .14em repeat-x; }
.idf--silver_screen .idf-name { animation: idf-projector 3.6s steps(1) infinite; text-shadow: 0 0 .2em rgba(255, 255, 255, .4); }
.idf--silver_screen .reel { animation: idf-spin 5s linear infinite; transform-origin: 8px 8px; }

/* ---- art: Sketchbook - spiral page, pencil hatching */
.idf--sketchbook { --idf-t: #2b2b2b; padding: .5em 1em .5em .6em; border-radius: .1em .3em .3em .1em; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700; gap: .3em;
    background: repeating-linear-gradient(0deg, transparent 0 .9em, rgba(80, 140, 220, .3) .9em .95em), var(--idf-p); box-shadow: inset .05em 0 0 rgba(0, 0, 0, .1), .1em .14em .2em rgba(0, 0, 0, .3); }
.idf--sketchbook::before { left: 1.3em; right: .4em; bottom: .26em; height: .14em; z-index: 1; background: repeating-linear-gradient(-45deg, #2b2b2b 0 .04em, transparent .04em .16em); opacity: .7; }
.idf--sketchbook .idf-cap--l { margin-right: .1em; }

/* ---- sport: Trophy Shelf - league banner between gold cups */
.idf--trophy_shelf { padding: .5em 1.05em; border-radius: .3em; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 80%, #fff), var(--idf-s) 50%, color-mix(in srgb, var(--idf-s) 70%, #000)); border: .12em solid var(--idf-p); box-shadow: 0 0 0 .07em #6b4a12, 0 .15em .3em rgba(0, 0, 0, .4); }
.idf--trophy_shelf::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 208, .55) 50%, transparent 60%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 4.2s ease-in-out infinite; }
.idf--trophy_shelf .idf-name { text-shadow: 0 .06em .1em rgba(0, 0, 0, .6); }

/* ---- nautical: Navy Stripe - breton stripes, rope edge */
.idf--navy_stripe { --idf-t: var(--idf-p); padding: .5em 1.05em; border-radius: .4em; font-family: Georgia, serif; font-weight: 800;
    background: repeating-linear-gradient(0deg, var(--idf-a) 0 .3em, var(--idf-p) .3em .45em); border: .16em solid transparent; background-clip: padding-box; box-shadow: 0 0 0 .16em var(--idf-s), 0 .14em .3em rgba(29, 53, 87, .45); }
.idf--navy_stripe::before { inset: .3em .5em; z-index: -1; border-radius: .25em; background: var(--idf-a); }

/* ---- pets: Kitten Nap - ginger kitten asleep on the plate */
.idf--kitten_nap { padding: .5em 1.1em; border-radius: 1em; margin-top: .9em; font-weight: 900;
    background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .7), transparent 55%), linear-gradient(180deg, var(--idf-a), color-mix(in srgb, var(--idf-p) 50%, var(--idf-a))); border: .14em solid var(--idf-s); box-shadow: 0 .14em .28em rgba(74, 46, 24, .4); }
.idf--kitten_nap::before { right: .7em; top: -1.12em; width: 2.6em; height: 1.3em; z-index: 5; transform-origin: 50% 100%; animation: idf-breathe 3s ease-in-out infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 26'%3E%3Cpath d='M4 25c-3-1-3-6 1-7' fill='none' stroke='%238a5a33' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M4 25c-3-1-3-6 1-7' fill='none' stroke='%23f6c27a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M3 25c0-9 8-15 19-15h10c8 0 13 5 13 15z' fill='%23f6c27a' stroke='%238a5a33' stroke-width='1.6'/%3E%3Cpath d='M12 14c2 2 3 5 3 10M19 11c2 2 3 6 3 13' stroke='%23d99a52' stroke-width='2' fill='none'/%3E%3Cpath d='M31 13L32 2l6 6 6-6 1 11a9 8 0 0 1-14 0z' fill='%23f6c27a' stroke='%238a5a33' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M33.5 5.5l.4 3 2.4-1.2zM42.5 5.5l-.4 3-2.4-1.2z' fill='%23f4a6b0'/%3E%3Cpath d='M33.5 15c1 1.2 2.4 1.2 3.4 0M39.5 15c1 1.2 2.4 1.2 3.4 0' stroke='%234a2e18' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M37.6 18h1.2l-.6.8z' fill='%23e88aa0'/%3E%3C/svg%3E") center bottom / contain no-repeat; }
.idf--kitten_nap .yarn { animation: idf-sway 3s ease-in-out infinite; transform-origin: 0 100%; transform-box: fill-box; }

/* ---- pets: Wagging Tail - sky-blue plate, paw prints, wagging tail */
.idf--wagging_tail { padding: .5em 1.1em; border-radius: .9em; font-weight: 900;
    background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 .08em, transparent .1em) 0 0 / .9em .9em, linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 35%, #fff), color-mix(in srgb, var(--idf-p) 60%, #fff)); border: .14em solid var(--idf-p); box-shadow: 0 .14em .28em rgba(30, 47, 92, .35); }
.idf--wagging_tail::after { right: -.42em; top: -.42em; width: .8em; height: 1em; z-index: -1; transform-origin: 15% 90%; animation: idf-wag .35s ease-in-out infinite alternate;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2 19C3 11 8 9 10 4c1-2 4-3 4 0 0 6-6 9-9 15z' fill='%23c47a3a' stroke='%231e2f5c' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---- pets: Capybara Onsen (epic) - steaming hot spring */
.idf--capybara_onsen { padding: .5em 1.15em; border-radius: .7em; font-weight: 900; overflow: visible;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 30%, #fff) 0 45%, var(--idf-s) 45% 100%); box-shadow: inset 0 0 0 .12em color-mix(in srgb, var(--idf-p) 70%, #000), 0 .14em .3em rgba(61, 38, 20, .35); }
.idf--capybara_onsen::before { left: .3em; right: .3em; top: 42%; height: .2em; z-index: 1; background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .8), transparent 70%) 0 0 / .8em 100% repeat-x; animation: idf-ripple 3s linear infinite; }
.idf--capybara_onsen .idf-name { text-shadow: 0 0 .25em rgba(255, 255, 255, .85); }
.idf--capybara_onsen .steam { animation: idf-steam 3s ease-in-out infinite; transform-origin: 50% 100%; } .idf--capybara_onsen .steam.b { animation-delay: -1.5s; }

/* ---- pets: Cookie Kitty - biscuit plate with crumbs */
.idf--cookie_kitty { padding: .5em 1.1em; border-radius: .9em; font-weight: 900;
    background: radial-gradient(circle at 15% 70%, #8a5a33 0 .08em, transparent .1em), radial-gradient(circle at 80% 25%, #8a5a33 0 .07em, transparent .09em), radial-gradient(circle at 60% 80%, #8a5a33 0 .06em, transparent .08em), linear-gradient(180deg, var(--idf-a), color-mix(in srgb, var(--idf-a) 75%, var(--idf-s)));
    border: .14em dashed color-mix(in srgb, var(--idf-s) 70%, #000); box-shadow: 0 0 0 .1em var(--idf-a), 0 .14em .28em rgba(59, 51, 48, .4); }

/* ---- christmas: Tinsel Knit - ugly sweater zigzag knit */
.idf--tinsel_knit { --idf-t: #fff; padding: .7em 1.15em; font-weight: 900; letter-spacing: .04em; border-radius: .2em;
    background: linear-gradient(135deg, var(--idf-s) 25%, transparent 25%) -.3em .1em / .6em .6em repeat-x, linear-gradient(225deg, var(--idf-s) 25%, transparent 25%) -.3em .1em / .6em .6em repeat-x, linear-gradient(315deg, var(--idf-s) 25%, transparent 25%) 0 calc(100% - .1em) / .6em .6em repeat-x, linear-gradient(45deg, var(--idf-s) 25%, transparent 25%) 0 calc(100% - .1em) / .6em .6em repeat-x, radial-gradient(circle, rgba(255, 255, 255, .25) 0 .05em, transparent .07em) 0 0 / .26em .26em, var(--idf-p); box-shadow: 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--tinsel_knit::before { left: 0; right: 0; top: .52em; bottom: .52em; z-index: -1; background: var(--idf-p); }
.idf--tinsel_knit::after { left: -.1em; right: -.1em; top: -.15em; height: .3em; z-index: 3; background: repeating-linear-gradient(80deg, #ffd34d 0 .06em, #fff1a8 .06em .12em, #c99a1a .12em .18em); border-radius: .2em; filter: drop-shadow(0 0 .1em #ffd34d); animation: idf-tinsel 1.6s ease-in-out infinite; }
.idf--tinsel_knit .idf-name { text-shadow: 0 .07em .1em rgba(0, 0, 0, .55); }
.idf--tinsel_knit .flake { animation: idf-spin 14s linear infinite; transform-origin: 11px 12px; }

/* ---- christmas: Gift Tag - kraft paper on red twine */
.idf--gift_tag { padding: .5em 1.1em .5em 1.4em; font-family: "Segoe Print", "Bradley Hand", cursive; font-weight: 700;
    clip-path: polygon(.8em 0, 100% 0, 100% 100%, .8em 100%, 0 50%); background: radial-gradient(circle at .95em 50%, transparent 0 .16em, color-mix(in srgb, var(--idf-a) 60%, var(--idf-p)) .17em .24em, transparent .25em), linear-gradient(180deg, var(--idf-a), color-mix(in srgb, var(--idf-a) 70%, var(--idf-p))); }
.idf--gift_tag::before { inset: .14em .14em .14em .9em; z-index: -1; border: .06em dashed color-mix(in srgb, var(--idf-p) 70%, #000); border-radius: .1em; }

/* ---- christmas: Candy Cane - peppermint-striped border */
.idf--candy_cane { padding: .5em 1em; border-radius: .6em; font-weight: 900; border: .24em solid transparent;
    background: linear-gradient(#fff, #fff4f6) padding-box, repeating-linear-gradient(45deg, var(--idf-p) 0 .26em, #fff .26em .52em) border-box; box-shadow: 0 .14em .3em rgba(122, 11, 34, .35); }
.idf--candy_cane .idf-cap--r { transform: scaleX(-1); }

/* ---- christmas: Fresh Snowfall - night-blue plate in falling snow */
.idf--fresh_snowfall { --idf-t: #fff; padding: .6em 1.15em .55em; border-radius: .5em; font-weight: 900; overflow: hidden;
    background: radial-gradient(ellipse at 50% 120%, rgba(201, 230, 255, .35), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #000), var(--idf-p)); box-shadow: inset 0 0 0 .08em rgba(201, 230, 255, .5), 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--fresh_snowfall::before { left: 0; right: 0; top: -.05em; height: .32em; z-index: 3; background: radial-gradient(circle at 50% 0, #fff 0 .22em, transparent .23em) 0 0 / .55em 100% repeat-x, linear-gradient(#fff, #fff) 0 0 / 100% .08em no-repeat; }
.idf--fresh_snowfall .idf-name { text-shadow: 0 .06em .14em rgba(0, 0, 0, .55); }
.idf--fresh_snowfall .nose { animation: idf-nose 2s ease-in-out infinite; }
.idf--fresh_snowfall .flake { animation: idf-spin 16s linear infinite; transform-origin: 11px 12px; }

/* ---- new year: Gold Foil Countdown - hammered gold, falling glitter */
.idf--gold_foil { --idf-t: var(--idf-s); padding: .55em 1.2em; border-radius: .3em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow: hidden;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 .12em, transparent .3em) 0 0 / .7em .6em, radial-gradient(circle at 70% 70%, rgba(150, 100, 0, .25) 0 .1em, transparent .3em) 0 0 / .6em .7em, linear-gradient(135deg, #fff4c2, var(--idf-p) 35%, #c99a1a 60%, var(--idf-p) 80%, #fff4c2);
    box-shadow: inset 0 0 0 .08em #8a6a00, 0 .14em .3em rgba(0, 0, 0, .35); }
.idf--gold_foil::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 3.6s ease-in-out infinite; }
.idf--gold_foil .idf-name { text-shadow: 0 .05em 0 rgba(255, 244, 194, .7); }
.idf--gold_foil .tw { animation: idf-twinkle 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .idf--gold_foil .tw.b { animation-delay: -1s; }

/* ---- new year: Party Streamers - purple party plate, curly streamers */
.idf--party_streamers { --idf-t: #fff; padding: .55em 1.15em; border-radius: .6em; font-weight: 900; letter-spacing: .03em;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(135deg, var(--idf-p), color-mix(in srgb, var(--idf-p) 60%, var(--idf-a))); box-shadow: 0 .14em .3em rgba(60, 20, 120, .45); }
.idf--party_streamers::before { left: .3em; right: .3em; top: -.12em; height: .36em; z-index: 3; background: radial-gradient(circle at 50% 100%, transparent 0 .1em, var(--idf-s) .11em .17em, transparent .18em) 0 0 / .5em .36em repeat-x; }
.idf--party_streamers .idf-name { text-shadow: 0 .06em .12em rgba(0, 0, 0, .5); }

/* ---- formal: Engraved Silver - polished silver, hand engraving */
.idf--engraved_silver { padding: .52em 1.15em; border-radius: .2em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: repeating-radial-gradient(circle at 0 50%, transparent 0 .3em, rgba(0, 0, 0, .06) .3em .34em), linear-gradient(180deg, #fff, var(--idf-p) 45%, color-mix(in srgb, var(--idf-p) 70%, #000) 55%, var(--idf-p)); box-shadow: inset 0 0 0 .07em #6b7280, inset 0 0 0 .16em #fff, inset 0 0 0 .22em color-mix(in srgb, var(--idf-p) 60%, #000), 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--engraved_silver::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 4.6s ease-in-out infinite; }
.idf--engraved_silver .idf-name { text-shadow: 0 .05em 0 #fff; }
.idf--engraved_silver .tw { animation: idf-twinkle 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- formal: Pinstripe - charcoal suit cloth */
.idf--pinstripe { padding: .5em 1.1em; border-radius: .2em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .05em;
    background: repeating-linear-gradient(90deg, transparent 0 .4em, color-mix(in srgb, var(--idf-s) 30%, transparent) .4em .44em), var(--idf-p); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--idf-p) 60%, #000), 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--pinstripe::before { left: .7em; right: .7em; bottom: .12em; height: .07em; z-index: 1; background: var(--idf-a); opacity: .8; }

/* ---- casual: Denim Patch - faded denim, orange top-stitch */
.idf--denim_patch { padding: .5em 1.05em; border-radius: .3em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .03em;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 .05em, transparent .05em .14em), radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--idf-p) 70%, #fff), var(--idf-p) 75%); box-shadow: 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--denim_patch::before { inset: .16em; z-index: -1; border-radius: .2em; border: .07em dashed var(--idf-s); }
.idf--denim_patch .idf-name { text-shadow: 0 .06em .1em rgba(0, 0, 0, .55); }

/* ---- cosy: Blanket Fort - fleece check */
.idf--blanket_fort { padding: .5em 1.1em; border-radius: .8em; font-weight: 900;
    background: linear-gradient(90deg, color-mix(in srgb, var(--idf-s) 30%, transparent) 50%, transparent 50%) 0 0 / 1em 1em, linear-gradient(0deg, color-mix(in srgb, var(--idf-s) 30%, transparent) 50%, transparent 50%) 0 0 / 1em 1em, color-mix(in srgb, var(--idf-p) 50%, #fff);
    box-shadow: inset 0 0 0 .14em color-mix(in srgb, var(--idf-p) 70%, #fff), 0 .14em .3em rgba(46, 59, 48, .35); }
.idf--blanket_fort::before { inset: .32em .7em; z-index: -1; border-radius: .4em; background: rgba(255, 247, 238, .9); }
.idf--blanket_fort .steam { animation: idf-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; }

/* ---- beach: Sandy Shore - warm sand, a lapping wave */
.idf--sandy_shore { padding: .5em 1.1em .6em; border-radius: .5em; font-weight: 900; overflow: hidden;
    background: radial-gradient(circle, rgba(140, 100, 40, .25) 0 .04em, transparent .06em) 0 0 / .3em .3em, linear-gradient(180deg, var(--idf-a), var(--idf-p)); box-shadow: 0 .14em .3em rgba(90, 61, 18, .35); }
.idf--sandy_shore .idf-fx--wave { inset: auto 0 0; height: .5em; }

/* ---- surf: Wave Crest - deep blue, curling wave */
.idf--wave_crest { --idf-t: #fff; padding: .55em 1.15em; border-radius: .5em 1.4em .5em 1.4em; font-weight: 900; letter-spacing: .03em; overflow: hidden;
    background: radial-gradient(ellipse at 90% 120%, color-mix(in srgb, var(--idf-s) 80%, transparent), transparent 60%), linear-gradient(180deg, var(--idf-p), color-mix(in srgb, var(--idf-p) 60%, #000)); box-shadow: 0 .14em .3em rgba(0, 50, 90, .45); }
.idf--wave_crest::after { left: -10%; right: -10%; bottom: -.05em; height: .4em; z-index: 1; background: radial-gradient(ellipse at 50% 100%, transparent 0 .3em, rgba(255, 255, 255, .85) .32em .4em, transparent .42em) 0 0 / 1em 100% repeat-x; animation: idf-ripple 2.2s linear infinite; }
.idf--wave_crest .idf-name { text-shadow: 0 .06em .12em rgba(0, 30, 60, .6); }
.idf--wave_crest .wave { animation: idf-sway 3s ease-in-out infinite; transform-origin: 0 100%; transform-box: fill-box; }

/* ---- summer: Pool Tile - small tiles under water */
.idf--pool_tile { padding: .5em 1.1em; border-radius: .25em; font-weight: 900; overflow: hidden;
    background: linear-gradient(90deg, rgba(255, 255, 255, .7) 0 .05em, transparent .05em) 0 0 / .5em .5em, linear-gradient(0deg, rgba(255, 255, 255, .7) 0 .05em, transparent .05em) 0 0 / .5em .5em, linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #fff), var(--idf-p)); box-shadow: inset 0 0 0 .14em var(--idf-s), inset 0 0 0 .2em var(--idf-a), 0 .14em .3em rgba(6, 59, 76, .35); }
.idf--pool_tile::before { inset: .35em .7em; z-index: -1; border-radius: .2em; background: rgba(255, 255, 255, .78); }

/* ---- summer: Daisy Chain - buttercup plate, swaying daisies */
.idf--daisy_chain { padding: .5em 1.1em; border-radius: 1.2em; font-weight: 900;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), transparent 55%), var(--idf-p); border: .12em solid var(--idf-s); box-shadow: 0 .14em .28em rgba(59, 74, 26, .3); }
.idf--daisy_chain::before { left: .6em; right: .6em; bottom: -.12em; height: .3em; z-index: 3; background: radial-gradient(circle, #ffc83d 0 .06em, #fff .07em .13em, transparent .14em) 0 50% / .55em .3em repeat-x; }
.idf--daisy_chain .daisy { animation: idf-spin 12s linear infinite; transform-origin: 12px 12px; }

/* ---- formal: Pearl Strand (epic) - wine satin framed by pearls */
.idf--pearl_strand { --idf-t: var(--idf-a); padding: .55em 1.2em; border-radius: .6em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .06em; font-style: italic;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 85%, #fff), var(--idf-s));
    border: .2em solid transparent; background-clip: padding-box; box-shadow: 0 .14em .3em rgba(59, 16, 34, .45); }
.idf--pearl_strand::before { inset: -.2em; z-index: 1; border-radius: .75em; padding: .22em; background: radial-gradient(circle at 40% 38%, #fff 0 .03em, var(--idf-p) .05em .09em, #b9a998 .12em, transparent .13em) .02em .02em / .28em .28em, color-mix(in srgb, var(--idf-s) 60%, #000);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.idf--pearl_strand .idf-name { text-shadow: 0 .06em .12em rgba(0, 0, 0, .55); }

/* ---- folk: Folk Embroidery - linen with cross-stitch borders */
.idf--folk_embroidery { padding: .7em 1.1em; border-radius: .2em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(45deg, transparent 40%, var(--idf-p) 40% 60%, transparent 60%) 0 .12em / .3em .3em repeat-x, linear-gradient(-45deg, transparent 40%, var(--idf-p) 40% 60%, transparent 60%) 0 .12em / .3em .3em repeat-x, linear-gradient(45deg, transparent 40%, var(--idf-s) 40% 60%, transparent 60%) 0 calc(100% - .12em) / .3em .3em repeat-x, linear-gradient(-45deg, transparent 40%, var(--idf-s) 40% 60%, transparent 60%) 0 calc(100% - .12em) / .3em .3em repeat-x, var(--idf-a); box-shadow: inset 0 0 0 .06em #d9cdb4, 0 .14em .3em rgba(122, 10, 28, .3); }

/* ---- retro: Synth Grid (epic) - retrowave sun over a racing grid */
.idf--synth_grid { --idf-t: #fff; padding: .55em 1.2em .75em; border-radius: .3em; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-weight: 900; font-style: italic; letter-spacing: .04em; overflow: hidden;
    background: linear-gradient(180deg, var(--idf-s), color-mix(in srgb, var(--idf-p) 40%, var(--idf-s)) 65%, var(--idf-s) 65%); box-shadow: inset 0 0 0 .08em var(--idf-p), 0 0 .8em color-mix(in srgb, var(--idf-p) 45%, transparent); }
.idf--synth_grid .idf-name { background: linear-gradient(180deg, #fff, var(--idf-a) 50%, var(--idf-p)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .05em 0 #2a0a3a) drop-shadow(0 0 .2em var(--idf-p)); }
.idf--synth_grid .idf-fx--grid { inset: 65% 0 0; }

/* ---- retro: VHS Tape - black cassette, hand label */
.idf--vhs_tape { --idf-t: #1f1f24; padding: .5em 1.05em; border-radius: .2em; font-family: "Segoe Print", "Bradley Hand", cursive; font-weight: 700;
    background: #1f1f24; box-shadow: inset 0 0 0 .08em #4b4b55, 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--vhs_tape::before { inset: .2em 2.1em; z-index: -1; background: linear-gradient(180deg, var(--idf-p) 0 .14em, var(--idf-a) .14em calc(100% - .14em), var(--idf-p) calc(100% - .14em)); border-radius: .08em; }
.idf--vhs_tape .reel { animation: idf-spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.idf--vhs_tape .idf-name { padding: 0 .3em; }

/* ---- retro: Lava Lamp (epic) - warm wax blobs */
.idf--lava_lamp { --idf-t: #fff; padding: .55em 1.2em; border-radius: 1.2em; font-weight: 900; letter-spacing: .04em; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 80%, #000), var(--idf-s)); box-shadow: inset 0 0 0 .1em #c0c0c0, inset 0 0 .6em rgba(0, 0, 0, .5), 0 0 .7em color-mix(in srgb, var(--idf-p) 40%, transparent); }
.idf--lava_lamp .idf-name { text-shadow: 0 .06em .14em rgba(0, 0, 0, .7), 0 0 .3em var(--idf-p); }
.idf--lava_lamp .blob { animation: idf-lava 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .idf--lava_lamp .blob.b { animation-delay: -2s; }

/* ---- retro: Floppy Save - blue disk label */
.idf--floppy_disk { --idf-t: #1d2b4a; padding: .5em 1.05em; border-radius: .15em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
    background: var(--idf-p); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--idf-p) 60%, #000), 0 .14em .3em rgba(0, 0, 0, .4); }
.idf--floppy_disk::before { inset: .24em 1.9em; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 .4em, rgba(47, 111, 219, .25) .4em .45em), var(--idf-a); border-radius: .08em; }

/* ---- arcade: Pixel Sparkle (legendary) - pastel 8-bit plate, popping pixel stars */
.idf--pixel_sparkle { padding: .5em 1.1em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .06em; border-radius: 0;
    clip-path: polygon(0 .25em, .25em .25em, .25em 0, calc(100% - .25em) 0, calc(100% - .25em) .25em, 100% .25em, 100% calc(100% - .25em), calc(100% - .25em) calc(100% - .25em), calc(100% - .25em) 100%, .25em 100%, .25em calc(100% - .25em), 0 calc(100% - .25em));
    background: linear-gradient(180deg, #fff 0 .2em, transparent .2em), linear-gradient(90deg, color-mix(in srgb, var(--idf-p) 50%, #fff), color-mix(in srgb, var(--idf-s) 40%, #fff)); }
.idf--pixel_sparkle .idf-cap { shape-rendering: crispEdges; }
.idf--pixel_sparkle .idf-cap.tw { animation: idf-twinkle 1.8s steps(3) infinite; }

/* ---- space: Galaxy Swirl (mythic) - a turning spiral galaxy */
.idf--galaxy_swirl { --idf-t: #fff; padding: .6em 1.3em; border-radius: 2em; font-weight: 900; letter-spacing: .05em; overflow: hidden;
    background: #090418; box-shadow: 0 0 0 .1em color-mix(in srgb, var(--idf-p) 70%, #fff), 0 0 1em color-mix(in srgb, var(--idf-p) 55%, transparent); }
.idf--galaxy_swirl::before { left: 50%; top: 50%; width: 9em; height: 9em; margin: -4.5em 0 0 -4.5em; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 .15em, color-mix(in srgb, var(--idf-a) 80%, transparent) .4em, transparent 1.2em), conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--idf-p) 75%, transparent) 15%, transparent 30%, color-mix(in srgb, var(--idf-s) 70%, transparent) 50%, transparent 65%, color-mix(in srgb, var(--idf-a) 65%, transparent) 82%, transparent);
    transform: scaleY(.35); animation: idf-galaxy 16s linear infinite; filter: blur(.12em); }
.idf--galaxy_swirl .idf-name { text-shadow: 0 0 .35em var(--idf-p), 0 .06em .1em #000; }
.idf--galaxy_swirl .spin { animation: idf-spin 10s linear infinite; transform-origin: 13px 12px; }

/* ---- weather: Thunderhead (legendary) - storm clouds and a lightning crack */
.idf--thunderhead { --idf-t: #fff; padding: .55em 1.2em; border-radius: .5em; font-weight: 900; letter-spacing: .05em; overflow: hidden;
    background: radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--idf-a) 50%, transparent), transparent 50%), radial-gradient(ellipse at 75% 0, color-mix(in srgb, var(--idf-a) 40%, transparent), transparent 45%), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #000), #10141f); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--idf-a) 60%, transparent), 0 .14em .3em rgba(0, 0, 0, .5); animation: idf-thunder 6s steps(1) infinite; }
.idf--thunderhead::after { left: 58%; top: 0; width: .7em; height: 100%; z-index: 1; background: var(--idf-s); clip-path: polygon(40% 0, 70% 0, 50% 40%, 80% 40%, 20% 100%, 38% 52%, 10% 52%); opacity: 0; filter: drop-shadow(0 0 .2em var(--idf-s)); animation: idf-bolt 6s steps(1) infinite; }
.idf--thunderhead .idf-name { text-shadow: 0 .06em .14em #000; }
.idf--thunderhead .bolt { animation: idf-blink 3s steps(1) infinite; }

/* ---- fire: Phoenix Rise (mythic) - wings of flame */
.idf--phoenix_rise { --idf-t: #fff6e0; padding: .6em 1.3em; border-radius: .6em; font-weight: 900; letter-spacing: .05em;
    background: radial-gradient(ellipse at 50% 130%, var(--idf-s), color-mix(in srgb, var(--idf-p) 80%, transparent) 40%, transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--idf-a) 70%, #000), var(--idf-a)); box-shadow: 0 0 0 .1em var(--idf-s), 0 0 1em color-mix(in srgb, var(--idf-p) 65%, transparent); animation: idf-glow 2.4s ease-in-out infinite; }
.idf--phoenix_rise .idf-name { text-shadow: 0 0 .35em var(--idf-s), 0 .06em .1em #3a0000; }
.idf--phoenix_rise .wing { animation: idf-flame-wing 1.6s ease-in-out infinite alternate; transform-origin: 100% 70%; transform-box: fill-box; }

/* ---- winter: North Star (legendary) - midnight, falling snow, guiding star */
.idf--north_star { --idf-t: #fff; padding: .55em 1.2em; border-radius: .5em; font-family: Georgia, serif; font-weight: 700; letter-spacing: .06em; overflow: hidden;
    background: radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--idf-s) 30%, transparent), transparent 40%), linear-gradient(180deg, var(--idf-p), color-mix(in srgb, var(--idf-p) 70%, #3a5a8a)); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--idf-s) 60%, transparent), 0 0 .8em rgba(245, 197, 66, .3); }
.idf--north_star .idf-name { text-shadow: 0 0 .3em rgba(245, 197, 66, .6), 0 .06em .1em #000; }
.idf--north_star .tw { animation: idf-twinkle 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- luxe: Marble & Gold (epic) */
.idf--marble_gold { padding: .52em 1.15em; border-radius: .25em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: linear-gradient(115deg, transparent 30%, rgba(154, 160, 166, .45) 31%, transparent 33%), linear-gradient(160deg, transparent 55%, rgba(154, 160, 166, .35) 56%, transparent 57.5%), linear-gradient(40deg, transparent 70%, rgba(154, 160, 166, .3) 71%, transparent 72%), radial-gradient(ellipse at 30% 30%, #fff, var(--idf-p));
    border: .16em solid transparent; border-image: linear-gradient(135deg, #fff1b0, var(--idf-s) 35%, #8a6a12 60%, var(--idf-s) 85%) 1; box-shadow: 0 .14em .3em rgba(0, 0, 0, .3); }
.idf--marble_gold::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 238, 170, .5) 50%, transparent 60%) -160% 0 / 50% 100% no-repeat; animation: idf-sweep 5s ease-in-out infinite; }

/* ---- luxe: Diamond Cut (legendary) - faceted gem */
.idf--diamond_cut { padding: .55em 1.3em; font-weight: 900; letter-spacing: .05em;
    clip-path: polygon(.7em 0, calc(100% - .7em) 0, 100% 50%, calc(100% - .7em) 100%, .7em 100%, 0 50%);
    background: conic-gradient(from 30deg at 50% 50%, #fff, var(--idf-p), #fff, var(--idf-s), #fff, var(--idf-p), #fff, var(--idf-s), #fff); }
.idf--diamond_cut::before { inset: .14em; z-index: -1; clip-path: polygon(.62em 0, calc(100% - .62em) 0, 100% 50%, calc(100% - .62em) 100%, .62em 100%, 0 50%); background: linear-gradient(180deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--idf-p) 50%, #fff)); }
.idf--diamond_cut::after { inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) -160% 0 / 45% 100% no-repeat; animation: idf-sweep 2.8s ease-in-out infinite; }
.idf--diamond_cut .tw { animation: idf-twinkle 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .idf--diamond_cut .tw.b { animation-delay: -.9s; }

/* ---- adventure: Treasure Map */
.idf--treasure_map { padding: .52em 1.05em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; font-style: italic;
    clip-path: polygon(0 4%, 6% 0, 20% 5%, 38% 0, 55% 4%, 72% 0, 88% 5%, 100% 1%, 98% 50%, 100% 96%, 84% 100%, 66% 95%, 48% 100%, 30% 96%, 14% 100%, 0 95%, 2% 50%);
    background: radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .45), transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(122, 92, 46, .45), transparent 45%), radial-gradient(ellipse at 5% 95%, rgba(122, 92, 46, .4), transparent 35%), var(--idf-p); }

/* ---- fantasy: Dragon's Hoard (legendary) - scales over gold */
.idf--dragon_hoard { padding: .55em 1.2em; border-radius: .4em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .06em;
    background: radial-gradient(circle at 50% 0, transparent 0 .3em, rgba(0, 0, 0, .3) .31em .36em, transparent .37em) 0 0 / .7em .4em, linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 70%, #000), var(--idf-p)); border: .12em solid var(--idf-s); box-shadow: 0 0 0 .06em #2b0a0a, 0 0 .8em color-mix(in srgb, var(--idf-s) 35%, transparent); }
.idf--dragon_hoard .idf-name { text-shadow: 0 0 .3em rgba(245, 197, 66, .6), 0 .06em .1em #000; }
.idf--dragon_hoard .eye { animation: idf-eye 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ---- fantasy: Spellbook - leather, brass, glowing runes */
.idf--spellbook { padding: .52em 1.1em; border-radius: .2em .5em .5em .2em; font-family: Georgia, "Palatino Linotype", serif; font-weight: 700; letter-spacing: .05em;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 .05em, transparent .05em .3em), linear-gradient(180deg, color-mix(in srgb, var(--idf-p) 80%, #fff), var(--idf-p)); border-left: .3em solid color-mix(in srgb, var(--idf-p) 60%, #000); box-shadow: inset 0 0 0 .1em var(--idf-s), 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--spellbook .idf-name { text-shadow: 0 0 .3em color-mix(in srgb, var(--idf-a) 70%, transparent), 0 .06em .1em #000; }
.idf--spellbook .rune { animation: idf-rune 2.6s ease-in-out infinite; }
.idf--spellbook .tw { animation: idf-twinkle 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .idf--spellbook .tw.b { animation-delay: -1s; }

/* ---- sci-fi: Starfighter Ace (epic) - cockpit HUD */
.idf--starfighter { padding: .55em 1.3em; border-radius: .2em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; overflow: hidden;
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--idf-s) 8%, transparent) 0 .05em, transparent .05em .2em), radial-gradient(ellipse, color-mix(in srgb, var(--idf-s) 15%, var(--idf-p)), var(--idf-p)); box-shadow: inset 0 0 0 .06em color-mix(in srgb, var(--idf-s) 50%, transparent), 0 0 .7em color-mix(in srgb, var(--idf-s) 35%, transparent); }
.idf--starfighter::before { inset: .2em .5em; z-index: 1; border: .1em solid var(--idf-s);
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / .5em .5em no-repeat, linear-gradient(#000 0 0) 100% 0 / .5em .5em no-repeat, linear-gradient(#000 0 0) 0 100% / .5em .5em no-repeat, linear-gradient(#000 0 0) 100% 100% / .5em .5em no-repeat;
    mask: linear-gradient(#000 0 0) 0 0 / .5em .5em no-repeat, linear-gradient(#000 0 0) 100% 0 / .5em .5em no-repeat, linear-gradient(#000 0 0) 0 100% / .5em .5em no-repeat, linear-gradient(#000 0 0) 100% 100% / .5em .5em no-repeat; animation: idf-lock 3s ease-in-out infinite; }
.idf--starfighter .idf-name { text-shadow: 0 0 .3em var(--idf-s); }
.idf--starfighter .sweep { animation: idf-spin 2.4s linear infinite; transform-origin: 12px 12px; }
.idf--starfighter .thrust { animation: idf-blink .3s steps(1) infinite; }

/* ---- cyber: Neon Ronin (mythic) - rain city, glitching name */
.idf--neon_ronin { --idf-t: #fff; padding: .6em 1.3em; border-radius: .15em; font-family: "Arial Black", "Segoe UI", sans-serif; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; overflow: hidden;
    background: linear-gradient(0deg, color-mix(in srgb, var(--idf-p) 30%, transparent), transparent 50%), repeating-linear-gradient(90deg, #0d0d1a 0 .5em, #161628 .5em .8em, #0d0d1a .8em 1.6em), var(--idf-s);
    box-shadow: inset 0 0 0 .08em var(--idf-a), 0 0 0 .14em var(--idf-p), 0 0 1em color-mix(in srgb, var(--idf-p) 50%, transparent); clip-path: polygon(0 0, calc(100% - .6em) 0, 100% .6em, 100% 100%, .6em 100%, 0 calc(100% - .6em)); }
.idf--neon_ronin .idf-name { text-shadow: .06em 0 0 var(--idf-p), -.06em 0 0 var(--idf-a), 0 0 .4em var(--idf-p); animation: idf-glitch 4s steps(1) infinite; }

/* ---- memes: Still Loading - progress bar stuck at 99% */
.idf--still_loading { padding: .5em 1.05em; border-radius: .4em; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 800;
    background: var(--idf-a); box-shadow: inset 0 0 0 .1em var(--idf-p), 0 .14em .3em rgba(30, 27, 75, .3); }
.idf--still_loading .idf-name::after { content: "..."; display: inline-block; width: 1.1em; overflow: hidden; vertical-align: bottom; animation: idf-dots 1.6s steps(4) infinite; }
.idf--still_loading .spin { animation: idf-spin 1.1s linear infinite; transform-origin: 11px 12px; }
.idf--still_loading .bar { animation: idf-stuck 5s ease-out infinite; transform-origin: 0 50%; transform-box: fill-box; }

/* ---- memes: Everything's Fine - calm plate, polite flames */
.idf--everything_fine { padding: .5em 1.1em .6em; border-radius: .5em; font-weight: 900; overflow: visible;
    background: linear-gradient(0deg, color-mix(in srgb, var(--idf-s) 60%, transparent) 0, transparent .5em), var(--idf-a); box-shadow: inset 0 0 0 .1em var(--idf-p), 0 .14em .3em rgba(78, 52, 46, .3); }
.idf--everything_fine::after { left: .4em; right: .4em; bottom: 0; height: .5em; z-index: 1; background: radial-gradient(ellipse at 50% 100%, var(--idf-s) 0 .16em, var(--idf-p) .2em, transparent .28em) 0 100% / .5em .5em repeat-x; animation: idf-flick-row .7s ease-in-out infinite alternate; }
.idf--everything_fine .fl { animation: idf-flicker .9s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
.idf--everything_fine .steam { animation: idf-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; }

/* ---- memes: Line Goes Up - trading screen */
.idf--line_goes_up { padding: .52em 1.1em; border-radius: .3em; font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: .03em; overflow: hidden;
    background: linear-gradient(0deg, rgba(34, 197, 94, .08) 1px, transparent 1px) 0 0 / .5em .5em, linear-gradient(90deg, rgba(34, 197, 94, .08) 1px, transparent 1px) 0 0 / .5em .5em, var(--idf-p); box-shadow: inset 0 0 0 .08em color-mix(in srgb, var(--idf-s) 50%, transparent), 0 .14em .3em rgba(0, 0, 0, .45); }
.idf--line_goes_up::before { left: .3em; right: .3em; bottom: .2em; height: 70%; z-index: -1; opacity: .35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 28L10 24 18 27 28 18 36 21 46 14 54 17 64 9 72 12 84 4 100 1' fill='none' stroke='%2322c55e' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.idf--line_goes_up .idf-name::after { content: " \25B2"; color: var(--idf-s); font-size: .7em; vertical-align: .15em; }

/* ---- memes: Touch Grass - sky plate, a fresh tuft of grass */
.idf--touch_grass { padding: .5em 1.1em .62em; border-radius: .5em; font-weight: 900;
    background: linear-gradient(180deg, var(--idf-a), color-mix(in srgb, var(--idf-a) 70%, #fff)); box-shadow: inset 0 0 0 .09em color-mix(in srgb, var(--idf-p) 60%, #fff), 0 .14em .28em rgba(31, 61, 31, .3); }
.idf--touch_grass::after { left: 0; right: 0; bottom: -.08em; height: .42em; z-index: 3; background: linear-gradient(60deg, transparent 45%, var(--idf-s) 46% 54%, transparent 55%) 0 0 / .26em 100% repeat-x, linear-gradient(-60deg, transparent 45%, var(--idf-p) 46% 54%, transparent 55%) .13em 0 / .26em 100% repeat-x; border-radius: 0 0 .5em .5em; }
.idf--touch_grass .blade { animation: idf-sway 3s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }

/* ---- memes: Rubber Duck - bubble bath */
.idf--rubber_duck { padding: .5em 1.1em; border-radius: 1em; font-weight: 900; overflow: visible;
    background: radial-gradient(circle at 15% 85%, #fff 0 .22em, transparent .23em), radial-gradient(circle at 30% 95%, #fff 0 .16em, transparent .17em), radial-gradient(circle at 75% 90%, #fff 0 .2em, transparent .21em), linear-gradient(180deg, color-mix(in srgb, var(--idf-s) 40%, #fff), var(--idf-s)); box-shadow: inset 0 0 0 .1em #fff, 0 .14em .28em rgba(11, 57, 84, .35); }
.idf--rubber_duck .bob { animation: idf-duck 2.4s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.idf--rubber_duck .bub { animation: idf-bubpop 2.4s ease-in infinite; transform-origin: center; transform-box: fill-box; } .idf--rubber_duck .bub.b { animation-delay: -1.2s; }

/* ---- food: Bubble Tea - milk tea with pearls */
.idf--bubble_tea { padding: .5em 1.1em .6em; border-radius: .6em; font-weight: 900;
    background: radial-gradient(circle, var(--idf-s) 0 .12em, transparent .13em) 0 100% / .45em .36em repeat-x, linear-gradient(180deg, color-mix(in srgb, var(--idf-a) 50%, #fff), var(--idf-p)); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .7), 0 .14em .28em rgba(59, 36, 22, .3); }

/* ---- food: Pizza Party - cheese, pepperoni, crust */
.idf--pizza_party { padding: .5em 1.1em; border-radius: .7em; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-weight: 900;
    background: radial-gradient(circle at 18% 30%, var(--idf-s) 0 .22em, transparent .23em), radial-gradient(circle at 84% 70%, var(--idf-s) 0 .2em, transparent .21em), radial-gradient(circle at 70% 22%, var(--idf-s) 0 .16em, transparent .17em), radial-gradient(circle at 30% 80%, var(--idf-s) 0 .14em, transparent .15em), radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--idf-p) 60%, #fff), var(--idf-p));
    border: .22em solid var(--idf-a); box-shadow: inset 0 0 .3em rgba(160, 90, 20, .4), 0 .14em .3em rgba(90, 26, 10, .35); }
.idf--pizza_party::before { inset: .3em 1.1em; z-index: -1; border-radius: .4em; background: color-mix(in srgb, var(--idf-p) 40%, #fff); opacity: .85; }
.idf--pizza_party .drip { animation: idf-drip 3s ease-in-out infinite; transform-origin: top; transform-box: fill-box; }

/* ---- readability pass on three originals: the name gets a soft local shade where the art runs behind it */
.idf--sunset_split .idf-name, .idf--ember_lane .idf-name { padding: 0 .3em; border-radius: .4em; background: radial-gradient(ellipse at 50% 55%, rgba(40, 8, 0, .42), transparent 72%); }
.idf--aurora_veil .idf-name { text-shadow: 0 0 .12em #02060f, 0 0 .4em color-mix(in srgb, var(--idf-p) 80%, #fff), 0 .06em .1em rgba(0, 0, 0, .9); }

/* ======================================================================= particle layers (.idf-fx--<kind>, from FX in name-frames.js) */
.idf-fx { inset: 0; z-index: 2; overflow: visible; }
.idf-fx i { opacity: 0; animation: 3s linear infinite; }
.idf-fx--snow { overflow: hidden; border-radius: inherit; }
.idf-fx--snow i { top: -.3em !important; width: calc(.12em + var(--k) * .03em); height: calc(.12em + var(--k) * .03em); border-radius: 50%; background: #fff; box-shadow: 0 0 .1em #fff; animation-name: idf-fall; animation-duration: calc(2.6s + var(--k) * .5s); }
.idf-fx--glitter i, .idf-fx--spark i, .idf-fx--star i { width: calc(.24em + var(--k) * .05em); height: calc(.24em + var(--k) * .05em); background: var(--idf-a, #fff); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation-name: idf-twinkle-fx; animation-duration: calc(1.6s + var(--k) * .4s); animation-timing-function: ease-in-out; }
.idf-fx--spark i { background: #fff; filter: drop-shadow(0 0 .1em var(--idf-p)); }
.idf-fx--star { overflow: hidden; border-radius: inherit; }
.idf-fx--star i { width: calc(.1em + var(--k) * .04em); height: calc(.1em + var(--k) * .04em); clip-path: none; border-radius: 50%; background: #fff; box-shadow: 0 0 .15em #fff; }
.idf-fx--glitter { overflow: hidden; border-radius: inherit; }
.idf-fx--glitter i { top: -.3em !important; background: color-mix(in srgb, var(--idf-p) 60%, #fff); animation-name: idf-fall-spin; animation-duration: calc(2.4s + var(--k) * .5s); animation-timing-function: linear; }
.idf-fx--confetti { overflow: hidden; border-radius: inherit; }
.idf-fx--confetti i { top: -.3em !important; width: .18em; height: .3em; background: var(--idf-s); animation-name: idf-fall-spin; animation-duration: calc(2.2s + var(--k) * .45s); }
.idf-fx--confetti i:nth-child(3n+1) { background: var(--idf-a); } .idf-fx--confetti i:nth-child(3n+2) { background: #38bdf8; }
.idf-fx--bubble i { top: auto !important; bottom: -.1em; width: calc(.18em + var(--k) * .06em); height: calc(.18em + var(--k) * .06em); border-radius: 50%; border: .04em solid rgba(255, 255, 255, .85); background: radial-gradient(circle at 30% 30%, #fff 0 .03em, color-mix(in srgb, var(--idf-a) 40%, transparent) .05em); animation-name: idf-rise-fx; animation-duration: calc(2.4s + var(--k) * .5s); animation-timing-function: ease-in; }
.idf-fx--pearl i { top: auto !important; bottom: .15em; width: .22em; height: .22em; border-radius: 50%; background: var(--idf-s); animation-name: idf-pearl; animation-duration: calc(2.4s + var(--k) * .6s); animation-timing-function: ease-in-out; opacity: 1; }
.idf-fx--steam i { top: -.2em !important; width: .5em; height: .9em; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .75), transparent 70%); filter: blur(.06em); animation-name: idf-steam-fx; animation-duration: calc(2.8s + var(--k) * .4s); animation-timing-function: ease-out; }
.idf-fx--ember i { top: auto !important; bottom: .1em; width: .16em; height: .16em; border-radius: 50%; background: var(--idf-s); box-shadow: 0 0 .3em var(--idf-p); animation-name: idf-ember; animation-duration: calc(2s + var(--k) * .4s); animation-timing-function: ease-out; --dx: calc((var(--k) - 1.5) * .25em); }
.idf-fx--rain { overflow: hidden; border-radius: inherit; }
.idf-fx--rain i { top: -.6em !important; width: .05em; height: .5em; background: linear-gradient(180deg, transparent, rgba(200, 230, 255, .75)); transform: rotate(12deg); animation-name: idf-rain; animation-duration: calc(.7s + var(--k) * .12s); }
.idf-fx--bats i { top: calc(var(--k) * .12em - .7em) !important; width: .5em; height: .25em; background: #0d0716; clip-path: polygon(0 20%, 20% 0, 35% 40%, 50% 30%, 65% 40%, 80% 0, 100% 20%, 80% 60%, 60% 100%, 50% 80%, 40% 100%, 20% 60%); animation-name: idf-bat; animation-duration: calc(5s + var(--k) * 1.2s); animation-timing-function: ease-in-out; }
.idf--haunted_manor .idf-fx--bats i { top: calc(var(--k) * .12em + .1em) !important; }
.idf-fx--leaf i { top: -.3em !important; width: .3em; height: .22em; border-radius: 80% 0 80% 0; background: #d9771c; animation-name: idf-petal; animation-duration: calc(4s + var(--k) * .6s); }
.idf-fx--leaf i:nth-child(2n) { background: #a8461e; }
.idf-fx--petal i { top: -.2em !important; width: .32em; height: .32em; border-radius: 50%; background: radial-gradient(circle, #ffc83d 0 .05em, #fff .06em); animation-name: idf-petal; animation-duration: calc(4.4s + var(--k) * .6s); }
.idf-fx--heart i { top: auto !important; bottom: .2em; width: .32em; height: .3em; background: #ff5a8a; clip-path: polygon(50% 100%, 0 40%, 10% 8%, 30% 0, 50% 20%, 70% 0, 90% 8%, 100% 40%); animation-name: idf-rise-fx; animation-duration: calc(2.6s + var(--k) * .5s); }
.idf-fx--zzz i { top: -.6em !important; right: auto; font: 900 .5em/1 "Trebuchet MS", sans-serif; color: var(--idf-s); animation-name: idf-zzz; animation-duration: 3s; }
.idf-fx--zzz i::before { content: "z"; }
.idf-fx--crumb i { top: auto !important; bottom: -.15em; width: .12em; height: .1em; border-radius: 30%; background: #a86b3c; animation-name: idf-crumb; animation-duration: calc(2.6s + var(--k) * .5s); }
.idf-fx--disco { overflow: hidden; border-radius: inherit; }
.idf-fx--disco i { width: .3em; height: .3em; border-radius: 50%; background: var(--idf-p); filter: blur(.04em); animation-name: idf-disco; animation-duration: calc(2.4s + var(--k) * .4s); animation-timing-function: ease-in-out; }
.idf-fx--disco i:nth-child(2n) { background: var(--idf-s); }
.idf-fx--pixstar i { width: .3em; height: .3em; background: linear-gradient(var(--idf-a, #fff36b), var(--idf-a, #fff36b)) 50% 0 / 33% 100% no-repeat, linear-gradient(var(--idf-a, #fff36b), var(--idf-a, #fff36b)) 0 50% / 100% 33% no-repeat; animation-name: idf-twinkle-fx; animation-duration: calc(1.4s + var(--k) * .3s); animation-timing-function: steps(3); }
.idf--pixel_sparkle .idf-fx--pixstar i:nth-child(2n) { --idf-a: #9ef0ff; }
.idf-fx--rune i { width: .3em; height: .4em; border: .05em solid var(--idf-a); border-radius: .05em; transform: skewX(-12deg); animation-name: idf-rune-fx; animation-duration: calc(2.6s + var(--k) * .5s); }
.idf-fx--ribbon i { top: auto !important; bottom: -.4em; width: .14em; height: .5em; border-radius: .1em; background: var(--idf-p); transform-origin: 50% 0; animation-name: idf-ribbon; animation-duration: calc(1.6s + var(--k) * .3s); animation-timing-function: ease-in-out; opacity: 1; }
.idf-fx--ribbon i:nth-child(2n) { background: var(--idf-s); }
.idf-fx--coin i { top: auto !important; bottom: .1em; width: .26em; height: .26em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #f5c542 50%, #b38a00); animation-name: idf-rise-fx; animation-duration: calc(2.2s + var(--k) * .4s); }
.idf-fx--spray i { top: auto !important; bottom: 0; width: .14em; height: .14em; border-radius: 50%; background: #fff; animation-name: idf-spray; animation-duration: calc(1.4s + var(--k) * .3s); animation-timing-function: ease-out; }
.idf-fx--fog { overflow: hidden; border-radius: inherit; }
.idf-fx--fog i { top: auto !important; bottom: -.2em; left: -50% !important; width: 200%; height: .7em; border-radius: 50%; background: radial-gradient(ellipse, rgba(201, 214, 207, .6), transparent 65%); animation-name: idf-fog; animation-duration: calc(7s + var(--k) * 2s); animation-timing-function: ease-in-out; animation-direction: alternate; opacity: .9; }
.idf-fx--wave i { inset: 0 !important; width: auto; opacity: 1; background: radial-gradient(ellipse at 50% 100%, var(--idf-s) 0 .36em, rgba(255, 255, 255, .9) .37em .45em, transparent .46em) 0 0 / 1.2em 100% repeat-x; animation: idf-ripple 3s linear infinite, idf-lap 3s ease-in-out infinite; }
.idf-fx--caustic i { inset: 0 !important; width: auto; opacity: .55; border-radius: inherit; background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, .7), transparent 30%) 0 0 / 1.4em 1em, radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, .6), transparent 30%) .7em .5em / 1.4em 1em; animation: idf-caustic 4s ease-in-out infinite alternate; }
.idf-fx--spot i { inset: 0 !important; width: auto; opacity: 1; border-radius: inherit; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .28), transparent 45%) -60% 0 / 60% 100% no-repeat; animation: idf-sweep 6s ease-in-out infinite; }
.idf-fx--grid i { inset: 0 !important; width: auto; opacity: 1; background: linear-gradient(0deg, var(--idf-p) .05em, transparent .05em) 0 0 / 100% .3em, repeating-linear-gradient(90deg, var(--idf-p) 0 .05em, transparent .05em .7em); transform: perspective(3em) rotateX(55deg); transform-origin: 50% 0; animation: idf-grid 1.2s linear infinite; }
.idf-fx--grid i ~ i { display: none; }
.idf-fx--blob { overflow: hidden; border-radius: inherit; }
.idf-fx--blob i { top: auto !important; bottom: -.4em; width: calc(.5em + var(--k) * .12em); height: calc(.6em + var(--k) * .12em); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--idf-a), var(--idf-p)); animation-name: idf-lava-fx; animation-duration: calc(6s + var(--k) * 1.4s); animation-timing-function: ease-in-out; opacity: .85; }

/* ---- generic: the old colour-payload look, for any frame without its own drawing */
.idf--generic { padding: .38em 1em; border-radius: .6em; background: linear-gradient(135deg, var(--idf-a), var(--idf-p)); border: .18em solid var(--idf-s); box-shadow: 0 .14em 0 rgba(0, 0, 0, .35); overflow: hidden; }
.idf--generic.is-animated::before { inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: idf-sweep 2.6s ease-in-out infinite; }

/* ---- keyframes */
@keyframes idf-sweep { from { background-position: -160% 0; } 60%, to { background-position: 260% 0; } }
@keyframes idf-blink { 50% { opacity: 0; } }
@keyframes idf-spin { to { transform: rotate(360deg); } }
@keyframes idf-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes idf-steam { 0% { opacity: 0; transform: translateY(2px) scaleY(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-4px) scaleY(1.1); } }
@keyframes idf-bulb { 50% { opacity: .15; } }
@keyframes idf-twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes idf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.1em; } }
@keyframes idf-pulse { 50% { transform: scale(1.14); } }
@keyframes idf-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.28); } }
@keyframes idf-flap { to { transform: scaleY(.45); } }
@keyframes idf-aurora { from { transform: translateX(-8%) skewX(-6deg); opacity: .85; } to { transform: translateX(8%) skewX(6deg); opacity: 1; } }
@keyframes idf-holo { to { background-position: 300% 0; } }
@keyframes idf-run { from { left: .2em; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 1.1em); opacity: 0; } }
@keyframes idf-ring { to { --idf-ang: 360deg; } }
@keyframes idf-ear { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-14deg); } 96% { transform: rotate(6deg); } }
@keyframes idf-fairy { 0%, 100% { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 .3em currentColor); } 50% { opacity: .45; filter: brightness(.85) drop-shadow(0 0 .08em currentColor); } }
@keyframes idf-glow { 50% { box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--idf-p) 70%, #000), 0 0 1.4em color-mix(in srgb, var(--idf-p) 70%, transparent); } }
@keyframes idf-ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, .3em), -1.8em) scale(.2); } }
@keyframes idf-flicker { from { transform: scaleY(.92) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
@keyframes idf-neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
@keyframes idf-neontext { 0%, 40%, 44%, 100% { opacity: 1; } 42% { opacity: .6; } }
@keyframes idf-petal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .95; } 100% { opacity: 0; transform: translate(.5em, 2.2em) rotate(280deg); } }

/* 2026 plates */
@keyframes idf-rave { 0%, 100% { box-shadow: 0 0 0 .16em var(--idf-p), 0 0 .5em var(--idf-p), 0 0 1em color-mix(in srgb, var(--idf-s) 60%, transparent); } 33% { box-shadow: 0 0 0 .16em var(--idf-s), 0 0 .5em var(--idf-s), 0 0 1em color-mix(in srgb, var(--idf-a) 60%, transparent); } 66% { box-shadow: 0 0 0 .16em var(--idf-a), 0 0 .5em var(--idf-a), 0 0 1em color-mix(in srgb, var(--idf-p) 60%, transparent); } }
@keyframes idf-pulse-glow { 50% { opacity: .55; filter: drop-shadow(0 0 1px currentColor); } }
@keyframes idf-holo-v { to { background-position: 0 300%; } }
@keyframes idf-progress { from { background-size: 0 100%, auto; } 85%, to { background-size: 96% 100%, auto; } }
@keyframes idf-flare { 0%, 100% { background-position: 100% 0; filter: none; } 50% { background-position: 0 0; filter: brightness(1.6) drop-shadow(0 0 .15em #fff); } }
@keyframes idf-batflap { 0%, 80%, 100% { transform: scaleY(1); } 86% { transform: scaleY(.45) rotate(-6deg); } 92% { transform: scaleY(1.1); } }
@keyframes idf-bubpop { 0% { transform: translateY(2px) scale(.4); opacity: 0; } 30% { opacity: 1; } 85% { transform: translateY(-4px) scale(1); opacity: 1; } 100% { transform: translateY(-5px) scale(1.4); opacity: 0; } }
@keyframes idf-candle { 0%, 100% { opacity: 1; } 30% { opacity: .7; } 55% { opacity: .95; } 75% { opacity: .6; } }
@keyframes idf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.14em; } }
@keyframes idf-rise { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-1px); } }
@keyframes idf-projector { 0%, 31%, 35%, 71%, 74%, 100% { opacity: 1; } 33%, 72% { opacity: .78; } }
@keyframes idf-breathe { 50% { transform: scaleY(1.07); } }
@keyframes idf-wag { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
@keyframes idf-ripple { to { background-position: 1em 0; } }
@keyframes idf-tinsel { 50% { filter: drop-shadow(0 0 .25em #ffe066) brightness(1.2); } }
@keyframes idf-nose { 50% { fill: #ff8080; filter: drop-shadow(0 0 2px #ff3030); } }
@keyframes idf-lava { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(.85, 1.2); } }
@keyframes idf-galaxy { to { transform: scaleY(.35) rotate(360deg); } }
@keyframes idf-thunder { 0%, 61%, 63.5%, 100% { filter: none; } 62%, 64% { filter: brightness(1.7); } }
@keyframes idf-bolt { 0%, 61%, 65%, 100% { opacity: 0; } 62%, 64% { opacity: 1; } }
@keyframes idf-flame-wing { from { transform: rotate(-4deg) scaleY(.95); } to { transform: rotate(4deg) scaleY(1.06); } }
@keyframes idf-eye { 0%, 40%, 100% { transform: scaleY(1); } 44% { transform: scaleY(.1); } 48% { transform: scaleY(1); } }
@keyframes idf-rune { 50% { stroke: #fff; filter: drop-shadow(0 0 2px #7df9ff); } }
@keyframes idf-lock { 0%, 100% { inset: .2em .5em; opacity: .8; } 50% { inset: .1em .25em; opacity: 1; } }
@keyframes idf-glitch { 0%, 88%, 100% { transform: none; } 89% { transform: translate(.04em, -.02em) skewX(-6deg); } 91% { transform: translate(-.05em, .02em); } 93% { transform: none; } }
@keyframes idf-dots { from { width: 0; } to { width: 1.1em; } }
@keyframes idf-stuck { 0% { transform: scaleX(.05); } 40% { transform: scaleX(.97); } 100% { transform: scaleX(.99); } }
@keyframes idf-flick-row { from { transform: scaleY(.85); opacity: .85; } to { transform: scaleY(1.1); opacity: 1; } }
@keyframes idf-duck { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-1px); } }
@keyframes idf-fall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .95; } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(.3em, 2.6em); } }
@keyframes idf-fall-spin { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-.25em, 2.6em) rotate(540deg); } }
@keyframes idf-twinkle-fx { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes idf-rise-fx { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(.2em, -2.1em) scale(1.1); } }
@keyframes idf-pearl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25em); } }
@keyframes idf-steam-fx { 0% { opacity: 0; transform: translateY(.4em) scale(.6); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-.9em) scale(1.3); } }
@keyframes idf-rain { 0% { opacity: 0; transform: translate(0, 0) rotate(12deg); } 10% { opacity: .8; } 100% { opacity: .5; transform: translate(-.4em, 3em) rotate(12deg); } }
@keyframes idf-bat { 0% { opacity: 0; transform: translate(-1.5em, .3em) scaleY(1); } 15% { opacity: 1; } 25%, 75% { transform: translate(-.4em, -.2em) scaleY(.4); } 50% { transform: translate(.5em, .2em) scaleY(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(1.6em, -.3em) scaleY(.4); } }
@keyframes idf-zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(.6em, -1em) scale(1.3); } }
@keyframes idf-crumb { 0% { opacity: 0; transform: translateY(-.6em); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes idf-disco { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: .55; transform: translate(.8em, .2em); } }
@keyframes idf-rune-fx { 0%, 100% { opacity: 0; transform: skewX(-12deg) translateY(.2em); } 50% { opacity: .7; transform: skewX(-12deg) translateY(-.2em); } }
@keyframes idf-ribbon { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes idf-spray { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(.5em, -1.2em); } }
@keyframes idf-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes idf-lap { 0%, 100% { transform: translateY(.12em); } 50% { transform: translateY(-.04em); } }
@keyframes idf-caustic { from { background-position: 0 0, .7em .5em; } to { background-position: .6em .3em, .1em .9em; } }
@keyframes idf-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 .3em, 0 0; } }
@keyframes idf-lava-fx { 0% { opacity: 0; transform: translate(0, 0) scale(.8, 1); } 15% { opacity: .85; } 50% { transform: translate(.15em, -1.4em) scale(1, 1.25); } 85% { opacity: .85; } 100% { opacity: 0; transform: translate(-.1em, -2.4em) scale(.7, .9); } }

@media (prefers-reduced-motion: reduce) {
    .idf, .idf *, .idf::before, .idf::after { animation: none !important; }
    .idf-fx { display: none; }
}
.idf.is-still, .idf.is-still *, .idf.is-still::before, .idf.is-still::after { animation: none !important; }
.idf.is-still .idf-fx { display: none; }
/* Lite mode (html[data-lite], set by the hub on small/slow devices): plates hold still and drop their particles.  The big
 * previews (item window, locker preview: .idf-live or [data-idf-live]) keep moving so the player still sees what they buy. */
html[data-lite] .idf:not(.idf-live) .idf-fx { display: none; }
html[data-lite] .idf:not(.idf-live), html[data-lite] .idf:not(.idf-live) *, html[data-lite] .idf:not(.idf-live)::before, html[data-lite] .idf:not(.idf-live)::after { animation-play-state: paused !important; }
html[data-lite] [data-idf-live] .idf, html[data-lite] [data-idf-live] .idf *, html[data-lite] [data-idf-live] .idf::before, html[data-lite] [data-idf-live] .idf::after { animation-play-state: running !important; }
html[data-lite] [data-idf-live] .idf .idf-fx { display: block; }