/* Dungeon Tower page · item cards as in the game. The rules are the game's own (style-v08: base, art, rarity, items),
   copied from its source for the six cards shown, scoped to .dt-cards. The game's cascade layers become specificity:
   reset and base rules sit in :where() (no weight), component rules carry one class more. Built by a script from the
   QA capture; edit the script, not this file. Fonts come from the frame's core tokens. */
.dt-cards {
  --barrier: #8ccbe9;
  --bone: #f2e9d4;
  --bone-2: #cbbfa6;
  --bone-3: #9a907b;
  --contour: #0a0b0d;
  --core-light-20: color-mix(in srgb, #f2e9d4 20%, transparent);
  --core-shade-75: color-mix(in srgb, #0a0b0d 75%, transparent);
  --ease-wood: cubic-bezier(.2,.8,.2,1);
  --el-blood: #e0564e;
  --el-darkness: #7b83d6;
  --el-fire: #f08a4b;
  --el-frost: #8fe0ea;
  --font-sans: var(--font-dt-ui);
  --font-sans-sc: var(--font-dt-sc);
  --font-serif: var(--font-dt-text);
  --fs-body: 17px;
  --fs-label: 14px;
  --fs-min: 13px;
  --fs-small: 15px;
  --fs-value: 34px;
  --gain: #8fd57f;
  --gold-100: #fff0c8;
  --gold-300: #ffdb8e;
  --gold-500: #e8ad4f;
  --gold-ink: #2b1c08;
  --heal: #8fd57f;
  --hover-card-w: 368px;
  --idle-orbit-cycle: 7s;
  --idle-run-cycle: 6s;
  --idle-shard-cycle: 4.4s;
  --idle-shard-h: 12px;
  --idle-shard-w: 7px;
  --idle-spark-cycle: 3.4s;
  --idle-spark-size: 8px;
  --iron-200: #a9b1b5;
  --iron-400: #6a7379;
  --iron-600: #3c444a;
  --iron-900: #111416;
  --loss: #f27f66;
  --mat-slate: linear-gradient(180deg, #1a1f23, #13171a);
  --night: #0c0e10;
  --oak-400: #875832;
  --parch-50: #f5ecd3;
  --r-plate-tint-0: 0;
  --r-plate-tint-2: .14;
  --r-plate-tint-3: .20;
  --r-plate-tint-4: .26;
  --r-plate-tint-5: .30;
  --r0-hi: #aeb6b9;
  --r0-ink: #4a5357;
  --r0-light: transparent;
  --r0-metal: #6d7579;
  --r0-plate: #1e2225;
  --r0-text: color-mix(in srgb, #f2e9d4 79%, #a2cff3);
  --r1-hi: #d0c386;
  --r2-hi: #a2cff3;
  --r2-ink: #1d5a8f;
  --r2-light: #5aaef0;
  --r2-metal: #3f6f9f;
  --r2-plate: #15212c;
  --r2-text: color-mix(in srgb, #5aaef0 78%, #1d5a8f);
  --r3-hi: #e1d6f8;
  --r3-ink: #5a3894;
  --r3-light: #b58cf2;
  --r3-metal: #958bb3;
  --r3-plate: #1f1a2c;
  --r3-text: color-mix(in srgb, #b58cf2 53%, #e1d6f8);
  --r4-hi: #fadb98;
  --r4-ink: #7a4b08;
  --r4-light: #f2b25c;
  --r4-metal: #c68c34;
  --r4-plate: #2a1f12;
  --r4-text: color-mix(in srgb, #f2b25c 47%, #fadb98);
  --r5-crystal: #d8264f;
  --r5-hi: #ffcad3;
  --r5-ink: #9e2144;
  --r5-light: #f06a8e;
  --r5-metal: #cc737e;
  --r5-plate: #2b131c;
  --r5-rim: #8a4fd0;
  --r5-text: color-mix(in srgb, #f06a8e 73%, #9e2144);
  --rad-iron: 2px;
  --rad-leather: 4px;
  --rad-round: 50%;
  --rad-wood: 3px;
  --s2: 8px;
  --shadow-float: 0 18px 40px rgba(0,0,0,.6);
  --stone-700: #242a2f;
  --stone-800: #1a1f23;
  --stone-900: #13171a;
  font-family: var(--font-dt-ui); font-size: 17px; font-weight: 500; line-height: 23.8px;
  color: rgb(242, 233, 212); font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:where(.dt-cards) h3, :where(.dt-cards) h4, :where(.dt-cards) h5, :where(.dt-cards) p { margin: 0; }
:where(.dt-cards) ul { margin: 0; padding: 0; list-style: none; }
:where(.dt-cards) img { display: block; max-width: 100%; }
:where(.dt-cards) h3, :where(.dt-cards) h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.12; }
:where(.dt-cards) small { font-size: max(var(--fs-min), .86em); }
:where(.dt-cards) b, :where(.dt-cards) strong { font-weight: 700; }
:where(.dt-cards) .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.dt-cards .art { position: relative; display: inline-block; inline-size: 100%; aspect-ratio: 1; flex: none; line-height: 0; vertical-align: middle; overflow: visible; pointer-events: none; user-select: none; -webkit-user-select: none; }
.dt-cards .art-box { position: absolute; inset: 0; margin: auto; display: block; aspect-ratio: var(--ar, 1); max-inline-size: 100%; max-block-size: 100%; overflow: clip; }
.dt-cards .art-box > img { position: absolute; display: block; max-inline-size: none; block-size: auto; object-fit: contain; image-rendering: auto; -webkit-user-drag: none; user-select: none; }
.dt-cards .ui-glyph { display: inline-block; flex: none; vertical-align: middle; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--contour) 40%, transparent)); }
.dt-cards [data-rarity="0"] { --r-text: var(--r0-text); --r-metal: var(--r0-metal); --r-hi: var(--r0-hi); --r-plate: var(--r0-plate); --r-light: var(--r0-light); --r-ink: var(--r0-ink); --r-tint: var(--r-plate-tint-0); --r-name-scale: 1; --r-shelf-glow: 0; --r-glow: transparent; }
.dt-cards [data-rarity="2"] { --r-text: var(--r2-text); --r-metal: var(--r2-metal); --r-hi: var(--r2-hi); --r-plate: var(--r2-plate); --r-light: var(--r2-light); --r-ink: var(--r2-ink); --r-tint: var(--r-plate-tint-2); --r-name-scale: 1; --r-shelf-glow: .40; --r-glow: color-mix(in srgb, var(--r2-light) 30%, transparent); }
.dt-cards [data-rarity="3"] { --r-text: var(--r3-text); --r-metal: var(--r3-metal); --r-hi: var(--r3-hi); --r-plate: var(--r3-plate); --r-light: var(--r3-light); --r-ink: var(--r3-ink); --r-tint: var(--r-plate-tint-3); --r-name-scale: 1.08; --r-shelf-glow: .55; --r-glow: color-mix(in srgb, var(--r3-light) 38%, transparent); }
.dt-cards [data-rarity="4"] { --r-text: var(--r4-text); --r-metal: var(--r4-metal); --r-hi: var(--r4-hi); --r-plate: var(--r4-plate); --r-light: var(--r4-light); --r-ink: var(--r4-ink); --r-tint: var(--r-plate-tint-4); --r-name-scale: 1.16; --r-shelf-glow: .70; --r-glow: color-mix(in srgb, var(--r4-light) 46%, transparent); }
.dt-cards [data-rarity="5"] { --r-text: var(--r5-text); --r-metal: var(--r5-metal); --r-hi: var(--r5-hi); --r-plate: var(--r5-plate); --r-light: var(--r5-light); --r-ink: var(--r5-ink); --r-tint: var(--r-plate-tint-5); --r-name-scale: 1.24; --r-shelf-glow: .80; --r-glow: color-mix(in srgb, var(--r5-light) 52%, transparent); }
.dt-cards [data-el="darkness"] { --el: var(--el-darkness); }
.dt-cards [data-el="fire"] { --el: var(--el-fire); }
.dt-cards [data-el="frost"] { --el: var(--el-frost); }
.dt-cards [data-el="blood"] { --el: var(--el-blood); }
.dt-cards .f-ct { stroke: var(--contour); fill: none; }
.dt-cards .f-mt { stroke: var(--r-metal, var(--iron-400)); fill: none; }
.dt-cards .f-hi { stroke: var(--r-hi, var(--iron-200)); fill: none; }
.dt-cards .f-mf { fill: var(--r-metal, var(--iron-400)); stroke: var(--contour); stroke-width: 1.6; }
.dt-cards .f-gm { fill: var(--r-light, var(--iron-200)); stroke: var(--contour); stroke-width: 1.6; }
.dt-cards .f-gh { fill: var(--parch-50); opacity: .72; stroke: none; }
.dt-cards .f-cr { fill: var(--r5-crystal); stroke: var(--contour); stroke-width: 1.6; }
.dt-cards .f-rv { fill: var(--r1-hi); stroke: var(--contour); stroke-width: 1.2; }
.dt-cards .rar-idle { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; --idle-phase: 0; --idle-rise: 34px; --idle-sb: 12%; --idle-ring-inset: -3px; --idle-ring: 5px; --idle-ring-radius: 6px; --idle-ox: 50%; --idle-oy: 50%; --idle-od: 88%; }
.dt-cards .rar-idle > b { position: absolute; display: block; }
.dt-cards .rar-idle > b > i { position: absolute; display: block; }
.dt-cards .rar-idle > b.rar-run { inset: var(--idle-ring-inset); padding: var(--idle-ring); border-radius: var(--idle-ring-radius); overflow: hidden; -webkit-mask: linear-gradient(var(--contour) 0 0) content-box, linear-gradient(var(--contour) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--contour) 0 0) content-box exclude, linear-gradient(var(--contour) 0 0); }
.dt-cards .rar-run > i { top: -40%; bottom: -40%; left: 0; width: 34%; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--r-hi, var(--parch-50)) 85%, transparent) 30%, var(--parch-50) 50%, color-mix(in srgb, var(--r-hi, var(--parch-50)) 85%, transparent) 70%, transparent); transform: translateX(-130%) skewX(-18deg); animation: rar-run var(--idle-run-cycle) cubic-bezier(.45, .05, .55, .95) infinite; animation-delay: calc(var(--idle-phase) * var(--idle-run-cycle) * -1); }
.dt-cards .rar-idle > b.rar-sparks, .dt-cards .rar-idle > b.rar-shards { inset: 0; opacity: 0; }
.dt-cards .rar-idle > b.rar-sparks { animation: rar-float var(--idle-spark-cycle) cubic-bezier(.3, .2, .5, 1) infinite; animation-delay: calc(var(--idle-phase) * var(--idle-spark-cycle) * -1); }
.dt-cards .rar-idle > b.rar-shards { animation: rar-float var(--idle-shard-cycle) cubic-bezier(.3, .2, .5, 1) infinite; animation-delay: calc((var(--idle-phase) + .5) * var(--idle-shard-cycle) * -1); }
.dt-cards .rar-spark { left: var(--sx, 50%); bottom: calc(var(--idle-sb) + var(--sy, 0px)); width: var(--idle-spark-size); height: var(--idle-spark-size); border-radius: 50%; background: radial-gradient(closest-side, var(--gold-100) 0 36%, var(--gold-300) 58%, var(--gold-500) 80%, transparent); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--r4-light) 60%, transparent); }
.dt-cards .rar-spark[data-n="2"] { scale: .8; }
.dt-cards .rar-spark[data-n="3"] { scale: .65; }
.dt-cards .rar-shard { left: var(--sx, 50%); bottom: calc(var(--idle-sb) + var(--sy, 0px)); width: var(--idle-shard-w); height: var(--idle-shard-h); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, var(--r5-hi), var(--r5-crystal)); }
.dt-cards .rar-shard.is-rim { background: linear-gradient(180deg, color-mix(in srgb, var(--r5-rim) 60%, var(--parch-50)), var(--r5-rim)); rotate: 28deg; }
.dt-cards .rar-shard[data-n="3"] { scale: .8; rotate: -22deg; }
.dt-cards .rar-idle > b.rar-orbit { left: var(--idle-ox); top: var(--idle-oy); width: var(--idle-od); aspect-ratio: 1; translate: -50% -50%; opacity: 0; animation: rar-orbit var(--idle-orbit-cycle) linear infinite; animation-delay: calc(var(--idle-phase) * var(--idle-orbit-cycle) * -1); }
.dt-cards .rar-idle > b.rar-orbit > i { left: 50%; top: 0; width: 10px; height: 16px; margin: -8px 0 0 -5px; opacity: .95; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, var(--parch-50), var(--r5-hi) 35%, var(--r5-crystal)); }
.dt-cards .rar-idle > b.rar-orbit > i + i { top: auto; bottom: 0; width: 6px; height: 11px; margin: 0 0 -6px -3px; opacity: .75; background: linear-gradient(180deg, var(--parch-50), var(--r5-rim)); }
.dt-cards .rar-idle[data-kind="card"] { --idle-rise: 92px; --idle-spark-size: 10px; --idle-ring-inset: -6px; --idle-ring: 5px; --idle-ring-radius: 8px; --idle-ox: calc(100% - 52px); --idle-oy: 52px; --idle-od: 112px; z-index: 6; }
.dt-cards .rar-idle[data-kind="card"] .rar-spark, .dt-cards .rar-idle[data-kind="card"] .rar-shard { top: calc(96px - var(--sy, 0px)); bottom: auto; left: auto; right: var(--sr, 40px); }
.dt-cards .rar-idle[data-idle-off] i, .dt-cards .rar-idle[data-idle-off] b { animation: none; }
@media (max-width: 899px), (max-height: 599px) { .dt-cards .rar-idle :is(.rar-spark, .rar-shard)[data-n="3"] { display: none; } }
.dt-cards .rar-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; --glow-c: var(--r-light, var(--iron-200)); --glow-core: var(--glow-c); --glow-a: 22%; --glow-pa: 48%; --glow-halo: 0%; --glow-k: 1; --glow-w: 300%; --glow-h: 200%; --glow-y: -3%; --dome-rx: 35%; --dome-ry: 68%; --halo-cy: 72.5%; --halo-rx: 30%; --halo-ry: 30%; --ring-k: 1.15; --glow-pool-w: 170%; --glow-pool-h: 30%; --glow-pool-y: -10%; --idle-phase: 0; --glow-breath: 5.2s; --glow-pulse: 7.6s; }
.dt-cards .rar-glow[data-rarity="0"] { --glow-c: var(--r0-light); --glow-a: 22%; --glow-pa: 48%; --glow-halo: 0%; --glow-k: .8; }
.dt-cards .rar-glow[data-rarity="2"] { --glow-c: var(--r2-light); --glow-a: 40%; --glow-pa: 64%; --glow-halo: 24%; --glow-k: .9; }
.dt-cards .rar-glow[data-rarity="3"] { --glow-c: var(--r3-text); --glow-a: 50%; --glow-pa: 70%; --glow-halo: 40%; --glow-k: 1; }
.dt-cards .rar-glow[data-rarity="4"] { --glow-c: var(--r4-light); --glow-a: 60%; --glow-pa: 78%; --glow-halo: 58%; --glow-k: 1.15; }
.dt-cards .rar-glow[data-rarity="5"] { --glow-c: var(--r5-light); --glow-a: 62%; --glow-pa: 80%; --glow-halo: 60%; --glow-k: 1.2; }
.dt-cards .rar-glow[data-rarity="5"] { --glow-core: color-mix(in srgb, var(--r5-light) 45%, var(--r5-crystal)); }
.dt-cards .rar-glow > i { position: absolute; display: block; left: 50%; translate: -50% 0; pointer-events: none; }
.dt-cards .rar-glow-pool { bottom: var(--glow-pool-y); width: var(--glow-pool-w); height: var(--glow-pool-h); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-core) var(--glow-pa), transparent), transparent); }
.dt-cards .rar-glow[data-rarity="5"] > .rar-glow-pool { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-core) var(--glow-pa), transparent), color-mix(in srgb, var(--glow-core) calc(var(--glow-pa) * .55), transparent) 42%, color-mix(in srgb, var(--r5-rim) 58%, transparent) 70%, transparent); }
.dt-cards .rar-glow-rise { bottom: var(--glow-y); width: var(--glow-w); height: var(--glow-h); transform-origin: 50% var(--halo-cy); background: radial-gradient(calc(var(--halo-rx) * var(--glow-k)) calc(var(--halo-ry) * var(--glow-k)) at 50% var(--halo-cy), color-mix(in srgb, var(--glow-core) var(--glow-halo), transparent), color-mix(in srgb, var(--glow-core) calc(var(--glow-halo) * .72), transparent) 34%, color-mix(in srgb, var(--glow-core) calc(var(--glow-halo) * .3), transparent) 66%, transparent), radial-gradient(var(--dome-rx) var(--dome-ry) at 50% 100%, color-mix(in srgb, var(--glow-core) var(--glow-a), transparent), transparent 74%); }
.dt-cards .rar-glow-two { bottom: var(--glow-y); width: var(--glow-w); height: var(--glow-h); transform-origin: 50% var(--halo-cy); background: radial-gradient(calc(var(--halo-rx) * var(--glow-k) * var(--ring-k)) calc(var(--halo-ry) * var(--glow-k) * var(--ring-k)) at 50% var(--halo-cy), transparent 38%, color-mix(in srgb, var(--r5-rim) 34%, transparent) 54%, color-mix(in srgb, var(--r5-rim) 66%, transparent) 70%, color-mix(in srgb, var(--r5-rim) 30%, transparent) 86%, transparent); }
.dt-cards .rar-glow[data-live="breath"] > .rar-glow-rise { animation: rar-glow-breath var(--glow-breath) ease-in-out infinite; animation-delay: calc(var(--idle-phase) * var(--glow-breath) * -1); }
.dt-cards .rar-glow[data-live="pulse"] > .rar-glow-two { animation: rar-glow-pulse var(--glow-pulse) ease-in-out infinite; animation-delay: calc(var(--idle-phase) * var(--glow-pulse) * -1); }
.dt-cards .rar-glow[data-kind="card"] { --glow-w: 280%; --glow-h: 200%; --glow-y: -12%; --dome-rx: 41%; --dome-ry: 75%; --halo-cy: 69%; --halo-rx: 30.4%; --halo-ry: 30%; --ring-k: 1.3; }
.dt-cards .rar-glow[data-kind="card"] > .rar-glow-pool { display: none; }
.dt-cards .rar-glow[data-live][data-idle-off] > i { animation: none; }
.dt-cards .itm-np-gems { display: inline-flex; gap: 2px; }
.dt-cards .itm-np-gem { width: 8px; height: 10px; fill: var(--r-light, var(--iron-200)); stroke: var(--contour); stroke-width: 1.4; }
.dt-cards .itm-np-xtal { width: 17px; height: 11px; overflow: visible; }
.dt-cards .itm-np-xtal-gem { fill: var(--r5-crystal); stroke: var(--contour); stroke-width: 1.1; }
.dt-cards .itm-np-xtal-gem:first-child { fill: color-mix(in srgb, var(--r5-crystal) 70%, var(--r5-hi)); }
.dt-cards .itm-peak { display: inline-flex; vertical-align: -2px; font-style: normal; color: var(--gold-300); font-size: var(--fs-min); }
.dt-cards .itm-peak > svg { filter: drop-shadow(0 1px 0 var(--contour)); }
.dt-cards .itm-card { position: relative; isolation: isolate; width: var(--hover-card-w); color: var(--bone); border-radius: var(--rad-leather); background: var(--mat-slate); box-shadow: 0 0 0 2px var(--contour), 0 0 0 4px var(--r-metal, var(--iron-600)), 0 0 0 5.5px var(--contour), inset 0 0 0 1px color-mix(in srgb, var(--r-hi, var(--iron-200)) 22%, transparent), var(--shadow-float); font-variant-numeric: lining-nums tabular-nums; }
.dt-cards .itm-card[data-rarity="0"] { box-shadow: 0 0 0 2px var(--contour), 0 0 0 3px var(--r-metal), 0 0 0 4.5px var(--contour), var(--shadow-float); }
.dt-cards .itm-card[data-rarity="4"] { box-shadow: 0 0 0 2px var(--contour), 0 0 0 4px var(--r-metal), 0 0 0 5.5px var(--contour), inset 0 0 0 1px color-mix(in srgb, var(--r-hi) 35%, transparent), 0 0 34px color-mix(in srgb, var(--r-light) 30%, transparent), var(--shadow-float); }
.dt-cards .itm-card[data-rarity="5"] { box-shadow: 0 0 0 2px var(--contour), 0 0 0 4px var(--r-metal), 0 0 0 5.5px var(--contour), 0 0 0 7.5px var(--r5-rim), 0 0 0 9px var(--contour), inset 0 0 0 1px color-mix(in srgb, var(--r-hi) 35%, transparent), 0 0 40px color-mix(in srgb, var(--r-light) 34%, transparent), var(--shadow-float); }
.dt-cards .itm-card-deco { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dt-cards .itm-card-deco svg { position: absolute; overflow: visible; }
.dt-cards .itm-card-crest { left: 50%; top: -19px; translate: -50% 0; width: 196px; height: 34px; }
.dt-cards .itm-card-corner { width: 28px; height: 28px; }
.dt-cards .itm-card-corner[data-pos="tl"] { left: -9px; top: -9px; }
.dt-cards .itm-card-corner[data-pos="tr"] { right: -9px; top: -9px; scale: -1 1; }
.dt-cards .itm-card-corner[data-pos="bl"] { left: -9px; bottom: -9px; scale: 1 -1; }
.dt-cards .itm-card-corner[data-pos="br"] { right: -9px; bottom: -9px; scale: -1 -1; }
.dt-cards .itm-card-side { top: 50%; width: 14px; height: 40px; translate: 0 -50%; }
.dt-cards .itm-card-side[data-pos="l"] { left: -10px; }
.dt-cards .itm-card-side[data-pos="r"] { right: -10px; scale: -1 1; }
.dt-cards .itm-card[data-rarity="5"] .itm-card-side[data-pos="l"] { left: -13px; }
.dt-cards .itm-card[data-rarity="5"] .itm-card-side[data-pos="r"] { right: -13px; }
.dt-cards .itm-card-head { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 84px; padding: 12px 98px 7px 16px; border-radius: 3px 3px 0 0; overflow: hidden; background: linear-gradient(180deg, var(--stone-700), var(--stone-800)); }
.dt-cards .itm-card-head::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--r-metal) 15%, var(--r-hi) 50%, var(--r-metal) 85%, transparent); }
.dt-cards .itm-card-head > .itm-card-sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--r-hi, transparent) calc(var(--r-tint, 0) * 40%), transparent), transparent 62%); }
.dt-cards .itm-card[data-rarity="2"] .itm-card-head { background: radial-gradient(90% 120% at 85% 0, color-mix(in srgb, var(--r2-light) 25%, transparent), transparent 60%), linear-gradient(165deg, color-mix(in srgb, var(--r2-metal) 45%, var(--r2-plate)), var(--r2-plate) 70%); }
.dt-cards .itm-card[data-rarity="3"] .itm-card-head { background: radial-gradient(90% 120% at 85% 0, color-mix(in srgb, var(--r3-light) 30%, transparent), transparent 60%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--r3-hi) 6%, transparent) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(45deg, color-mix(in srgb, var(--r3-hi) 6%, transparent) 0 1.5px, transparent 1.5px 7px), linear-gradient(165deg, color-mix(in srgb, var(--r3-ink) 60%, var(--r3-plate)), var(--r3-plate) 72%); }
.dt-cards .itm-card[data-rarity="4"] .itm-card-head { background: radial-gradient(90% 120% at 85% 0, color-mix(in srgb, var(--r4-hi) 35%, transparent), transparent 60%), repeating-radial-gradient(circle at 20% 130%, color-mix(in srgb, var(--r4-hi) 7%, transparent) 0 1px, transparent 1px 7px), linear-gradient(165deg, color-mix(in srgb, var(--r4-ink) 70%, var(--r4-plate)), var(--r4-plate) 72%); }
.dt-cards .itm-card[data-rarity="5"] .itm-card-head { background: radial-gradient(48% 95% at 88% 34%, color-mix(in srgb, var(--r5-light) 42%, transparent), transparent 72%), linear-gradient(90deg, color-mix(in srgb, var(--night) 42%, transparent), transparent 68%), conic-gradient(from 200deg at 82% 40%, color-mix(in srgb, var(--r5-hi) 8%, transparent), transparent 10%, color-mix(in srgb, var(--r5-hi) 6%, transparent) 20%, transparent 32%, color-mix(in srgb, var(--r5-hi) 7%, transparent) 48%, transparent 60%), linear-gradient(170deg, color-mix(in srgb, var(--r5-ink) 58%, var(--r5-plate)), var(--r5-plate) 64%, color-mix(in srgb, var(--r5-rim) 22%, var(--r5-plate))); }
.dt-cards .itm-card[data-rarity="3"] .itm-kicker, .dt-cards .itm-card[data-rarity="4"] .itm-kicker, .dt-cards .itm-card[data-rarity="5"] .itm-kicker { color: var(--r-hi); text-shadow: 0 1px 0 var(--contour), 0 0 5px color-mix(in srgb, var(--contour) 80%, transparent); }
.dt-cards .itm-card[data-rarity="4"] .itm-card-head::before, .dt-cards .itm-card[data-rarity="5"] .itm-card-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 3; pointer-events: none; background: linear-gradient(110deg, transparent 18%, color-mix(in srgb, var(--r-hi) 26%, transparent) 50%, transparent 82%); opacity: 0; transform: translateX(-100%); animation: itm-lightrun .6s var(--ease-wood) .08s 1; }
.dt-cards .itm-card-title { position: relative; z-index: 2; flex: 1; min-width: 0; }
.dt-cards .itm-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; font: 700 var(--fs-label)/1.1 var(--font-sans-sc); letter-spacing: .07em; color: var(--r-text, var(--bone-2)); }
.dt-cards .itm-kicker-text { white-space: nowrap; }
.dt-cards .itm-unique-label { padding: 1px 6px 2px; border-radius: var(--rad-iron); font: 700 var(--fs-min)/1 var(--font-sans-sc); letter-spacing: .05em; color: var(--gold-ink); background: var(--gold-300); box-shadow: 0 0 0 1px var(--contour); }
.dt-cards .itm-name { margin: 4px 0 6px; font: 700 calc(21px * var(--r-name-scale, 1))/1.04 var(--font-serif); color: var(--r-text, var(--bone)); letter-spacing: .002em; text-shadow: 0 2px 0 color-mix(in srgb, var(--contour) 60%, transparent); text-wrap: balance; hyphens: none; overflow-wrap: normal; }
.dt-cards .itm-name .itm-base, .dt-cards .itm-name .itm-suffix { white-space: nowrap; }
.dt-cards .itm-card[data-rarity="4"] .itm-name, .dt-cards .itm-card[data-rarity="5"] .itm-name { line-height: 1.04; text-shadow: 0 2px 0 color-mix(in srgb, var(--contour) 65%, transparent), 0 0 14px color-mix(in srgb, var(--r-light) 45%, transparent); }
.dt-cards .itm-card[data-rarity="5"] .itm-name { color: color-mix(in srgb, var(--r5-text) 72%, var(--r5-hi)); text-shadow: 0 2px 0 color-mix(in srgb, var(--contour) 70%, transparent), 0 0 8px color-mix(in srgb, var(--contour) 70%, transparent); }
.dt-cards .itm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font: 500 var(--fs-small)/1 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-elchip { display: inline-flex; align-items: center; gap: 5px; color: var(--el, var(--bone-2)); font-weight: 700; }
.dt-cards .itm-elchip > i { width: 20px; height: 20px; border-radius: var(--rad-round); display: grid; place-items: center; background: var(--iron-900); box-shadow: 0 0 0 1.5px var(--el, var(--iron-400)); }
.dt-cards .itm-upg { display: inline-flex; gap: 2px; }
.dt-cards .itm-upg-mark { width: 14px; height: 11px; opacity: .45; }
.dt-cards .itm-upg-mark .f-mf { fill: transparent; stroke: var(--r-hi, var(--iron-200)); stroke-width: 1.2; }
.dt-cards .itm-card-art { position: absolute; right: 6px; top: 6px; z-index: 1; width: 92px; height: 92px; display: grid; place-items: center; }
.dt-cards .itm-card-art > .art { position: relative; width: 84px; height: 84px; filter: drop-shadow(0 6px 5px var(--core-shade-75)); }
.dt-cards .itm-card-art > .art { z-index: 1; }
.dt-cards .itm-ability { padding: 7px 16px 5px; }
.dt-cards .itm-ability-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.dt-cards .itm-ability-head b { font: 700 var(--fs-body)/1.05 var(--font-sans); color: var(--bone); }
.dt-cards .itm-cd { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--fs-small)/1 var(--font-sans); color: var(--bone-2); white-space: nowrap; }
.dt-cards .itm-bigvals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 2px; }
.dt-cards .itm-bv { display: grid; gap: 1px; min-width: 0; }
.dt-cards .itm-bv-label { font: 500 var(--fs-min)/1.1 var(--font-sans); color: var(--bone-3); }
.dt-cards .itm-bv-row { display: flex; align-items: baseline; gap: 5px; }
.dt-cards .itm-bv-ico { align-self: center; display: grid; place-items: center; flex: none; }
.dt-cards .itm-bv-num { font: 800 var(--fs-value)/1 var(--font-sans); color: var(--bone); }
.dt-cards .itm-bv[data-tone="heal"] .itm-bv-num { color: color-mix(in srgb, var(--heal) 70%, var(--parch-50)); }
.dt-cards .itm-bv[data-tone="shield"] .itm-bv-num { color: color-mix(in srgb, var(--barrier) 70%, var(--parch-50)); }
.dt-cards .itm-bv-unit { font: 700 var(--fs-label)/1.1 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-baseline { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 var(--fs-small)/1.2 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-power { margin: 0 12px 5px; padding: 5px 10px 5px; border-radius: var(--rad-wood); background: color-mix(in srgb, var(--night) 60%, transparent); box-shadow: inset 3px 0 0 var(--pw, var(--r4-metal)), inset 0 0 0 1px color-mix(in srgb, var(--pw, var(--r4-metal)) 35%, transparent); }
.dt-cards .itm-power[data-kind="signature"] { --pw: var(--r4-metal); }
.dt-cards .itm-power[data-kind="mystic"] { --pw: var(--r5-metal); }
.dt-cards .itm-power[data-kind="unique"] { --pw: var(--gold-500); }
.dt-cards .itm-power-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-cards .itm-power-head small { font: 700 var(--fs-min)/1 var(--font-sans-sc); letter-spacing: .06em; color: var(--bone-3); }
.dt-cards .itm-power-head b { font: 700 var(--fs-body)/1.1 var(--font-serif); color: var(--r4-hi); }
.dt-cards .itm-power[data-kind="mystic"] .itm-power-head b { color: var(--r5-hi); }
.dt-cards .itm-power-val { margin-left: auto; font: 800 var(--fs-body)/1 var(--font-sans); color: var(--r4-hi); white-space: nowrap; }
.dt-cards .itm-power-text, .dt-cards .itm-power-pro, .dt-cards .itm-power-con { margin-top: 3px; font: 500 var(--fs-label)/1.25 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-power-k { display: inline-block; min-width: 46px; margin-right: 6px; font: 700 var(--fs-min)/1 var(--font-sans-sc); letter-spacing: .05em; }
.dt-cards .itm-power-pro .itm-power-k { color: var(--gain); }
.dt-cards .itm-power-con .itm-power-k { color: var(--loss); }
.dt-cards .itm-power-range { display: block; margin-top: 3px; font: 600 var(--fs-min)/1.2 var(--font-sans); color: var(--bone-3); }
.dt-cards .itm-skillbox { margin: 0 12px 5px; padding: 6px 12px 6px 10px; border-radius: var(--rad-wood); background: linear-gradient(100deg, color-mix(in srgb, var(--el, var(--iron-400)) 16%, var(--stone-900)), var(--stone-900) 70%); box-shadow: inset 3px 0 0 var(--el, var(--iron-400)), inset 0 0 0 1px color-mix(in srgb, var(--el, var(--iron-400)) 25%, transparent); }
.dt-cards .itm-skillbox-head { display: flex; align-items: center; gap: 9px; }
.dt-cards .itm-skillbox-art { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.dt-cards .itm-skillbox-art > .art { width: 32px; height: 32px; }
.dt-cards .itm-skillbox-title { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dt-cards .itm-skillbox-title small { font: 700 var(--fs-min)/1 var(--font-sans-sc); letter-spacing: .06em; color: var(--bone-3); }
.dt-cards .itm-skillbox-title strong { font: 700 17px/1.1 var(--font-serif); color: var(--el, var(--bone)); }
.dt-cards .itm-skillbox-dmg { display: grid; justify-items: end; gap: 2px; }
.dt-cards .itm-skillbox-dmg b { font: 800 25px/1 var(--font-sans); color: var(--bone); white-space: nowrap; }
.dt-cards .itm-skillbox-dmg small { font: 500 var(--fs-min)/1 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-skillbox-line { display: flex; align-items: center; gap: 8px; margin-top: 3px; font: 500 var(--fs-small)/1.25 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-skillbox-line .itm-cd { padding-right: 8px; border-right: 1px solid var(--core-light-20); color: var(--bone); }
.dt-cards .itm-skill-rule { margin-top: 5px; font: 500 var(--fs-label)/1.3 var(--font-sans); color: var(--bone-2); display: flex; gap: 5px; align-items: flex-start; }
.dt-cards .itm-skill-rule em { color: var(--bone-3); font-style: normal; }
.dt-cards .itm-rule-line { margin: -2px 16px 8px; font: 500 var(--fs-label)/1.3 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-affixes { padding: 0 16px 6px; }
.dt-cards .itm-agroups { display: grid; }
.dt-cards .itm-agroup-title { display: flex; align-items: center; gap: 8px; margin: 3px 0 0; font: 700 var(--fs-min)/1 var(--font-sans-sc); letter-spacing: .08em; color: var(--bone-3); }
.dt-cards .itm-agroup-title::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--bone) 9%, transparent); }
.dt-cards .itm-affix { display: flex; align-items: center; gap: 9px; min-height: 23px; font: 500 14.5px/1.1 var(--font-sans); color: var(--bone-2); }
.dt-cards .itm-affix > svg { flex: none; }
.dt-cards .itm-affix-name { flex: 1; min-width: 0; }
.dt-cards .itm-affix-range { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 var(--fs-min)/1 var(--font-sans); color: var(--bone-3); }
.dt-cards .itm-roll { display: block; width: 100%; min-width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--bone-3) calc(var(--pos, 0) * 100%), color-mix(in srgb, var(--bone) 12%, transparent) 0); }
.dt-cards .itm-affix-rank { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border-radius: var(--rad-iron); font: 800 var(--fs-min)/1 var(--font-sans); letter-spacing: .02em; color: var(--bone-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone) 16%, transparent); }
.dt-cards .itm-affix-rank[data-rank="1"] { color: var(--gold-300); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-300) 55%, transparent); }
.dt-cards .itm-affix-rank[data-rank="2"] { color: var(--bone); }
.dt-cards .itm-affix-val { font: 800 15px/1 var(--font-sans); color: var(--bone); white-space: nowrap; }
.dt-cards .itm-affix[data-peak] .itm-affix-val { color: var(--gold-100); }
.dt-cards .itm-affix .itm-peak { margin-left: 3px; vertical-align: -1px; }
@keyframes rar-run {
 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
 3%, 21% { opacity: var(--idle-run-alpha); }
 24%, 100% { opacity: 0; transform: translateX(300%) skewX(-18deg); }
 }
@keyframes rar-float {
 0% { opacity: 0; transform: translate(0, 0); }
 14% { opacity: .95; }
 68% { opacity: .6; }
 100% { opacity: 0; transform: translate(var(--dx, 3px), calc(var(--idle-rise) * -1)); }
 }
@keyframes rar-glow-breath { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(1.05); } }
@keyframes rar-orbit { 0% { opacity: .9; transform: rotate(0deg); } 100% { opacity: .9; transform: rotate(360deg); } }
@keyframes rar-glow-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes itm-lightrun { 0% { opacity: 1; transform: translateX(-100%); } 99% { opacity: 1; transform: translateX(170%); } 100% { opacity: 0; transform: translateX(170%); } }
/* the inline styles of the game's card markup (positions, aspect ratios, animation phases) */
.dt-cards .dtc-s0 { --idle-phase:0.81 !important; }
.dt-cards .dtc-s1 { --ar:1.62 !important; }
.dt-cards .dtc-s2 { width:100.000% !important; left:0.000% !important; top:0.000% !important; }
.dt-cards .dtc-s3 { width:32px !important; height:32px !important; }
.dt-cards .dtc-s4 { --ar:0.914 !important; }
.dt-cards .dtc-s5 { --pos:0.14 !important; }
.dt-cards .dtc-s6 { --idle-phase:0.3 !important; }
.dt-cards .dtc-s7 { --ar:1.333 !important; }
.dt-cards .dtc-s8 { --ar:1 !important; }
.dt-cards .dtc-s9 { --pos:0.92 !important; }
.dt-cards .dtc-s10 { --pos:0.86 !important; }
.dt-cards .dtc-s11 { --pos:0.67 !important; }
.dt-cards .dtc-s12 { --idle-phase:0.55 !important; }
.dt-cards .dtc-s13 { --ar:0.936 !important; }
.dt-cards .dtc-s14 { --ar:0.871 !important; }
.dt-cards .dtc-s15 { --pos:0.17 !important; }
.dt-cards .dtc-s16 { --pos:0.2 !important; }
.dt-cards .dtc-s17 { --pos:0.5 !important; }
.dt-cards .dtc-s18 { --pos:0.29 !important; }
.dt-cards .dtc-s19 { --sr:74px !important; --sy:0px !important; }
.dt-cards .dtc-s20 { --sr:46px !important; --sy:10px !important; }
.dt-cards .dtc-s21 { --sr:24px !important; --sy:-6px !important; }
.dt-cards .dtc-s22 { --ar:1.008 !important; }
.dt-cards .dtc-s23 { --ar:0.923 !important; }
.dt-cards .dtc-s24 { --pos:0.13 !important; }
.dt-cards .dtc-s25 { --pos:0.25 !important; }
.dt-cards .dtc-s26 { --pos:0.71 !important; }
.dt-cards .dtc-s27 { --idle-phase:0.8 !important; }
.dt-cards .dtc-s28 { --sr:84px !important; --sy:0px !important; }
.dt-cards .dtc-s29 { --sr:54px !important; --sy:11px !important; }
.dt-cards .dtc-s30 { --sr:22px !important; --sy:-5px !important; }
.dt-cards .dtc-s31 { --ar:0.549 !important; }
.dt-cards .dtc-s32 { --pos:0.45 !important; }
.dt-cards .dtc-s33 { --pos:0.83 !important; }
.dt-cards .dtc-s34 { --pos:0.27 !important; }
.dt-cards .dtc-s35 { --pos:0.35 !important; }
.dt-cards .dtc-s36 { --pos:0.43 !important; }
.dt-cards .dtc-s37 { --pos:0.33 !important; }
.dt-cards .dtc-s38 { --idle-phase:0.41 !important; }
.dt-cards .dtc-s39 { --ar:0.93 !important; }
.dt-cards .dtc-s40 { --pos:0.7 !important; }
.dt-cards .dtc-s41 { --pos:0.8 !important; }
.dt-cards .dtc-s42 { --pos:1 !important; }
.dt-cards .dtc-s43 { --pos:0.23 !important; }