/* Copied from the IRIS app (desk/style.css): the card base, the reveal card and the tokens they read. */
:root {
  --line-hi: rgba(236, 228, 216, .26);
  --bone: #ece4d8;
  --bone-2: #b9b0a5;
  --bone-3: #847b72;
  --red: #b3141d;
  --red-hi: #cf1c26;
  --t-mythic: #ff2a40; /* #167 the red tier above Titan (the Mythic pack's red, a touch lighter so it reads as text) */
  --t-mythic-deep: #9e0a1e;
  --t-titan: #f0c870;
  --t-demigod: #c9a2ff;
  --t-oracle: #8cbcff;
  --t-hero: #8fdcae;
  --t-mortal: #cfc6bb;
  --wordmark: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --serif: "Libre Caslon Text", "Times New Roman", Times, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-fast: 150ms;   /* hover, colour, press */
  --dur: 220ms;        /* small panels, tabs, toggles */
  --focus: #f3d3a3;
}
.tc { --ink: #efe4d2; --tierink: #d8d0c6; --glowc: rgba(220, 210, 200, .18); position: relative; aspect-ratio: 1024 / 1536; container-type: inline-size; border-radius: 3.6cqw; overflow: hidden;
  background: #000 var(--tpl) center / 100% 100% no-repeat; box-shadow: 0 2cqw 7cqw rgba(0, 0, 0, .65), 0 0 6cqw var(--glowc);
  transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s var(--ease), box-shadow .4s; }
.tc:hover { transition: transform .12s linear, box-shadow .4s; }
.tc.titan { --ink: #f6e3b0; --tierink: #f3cf7c; --glowc: rgba(255, 196, 80, .38); }
.tc.demigod { --tierink: #dcbcff; --glowc: rgba(170, 110, 255, .32); }
.tc.oracle { --tierink: #b0d2ff; --glowc: rgba(90, 150, 255, .28); }
.tc.hero { --tierink: #a8e6c2; --glowc: rgba(80, 210, 140, .24); }
.tc-holo { position: absolute; inset: 0; border-radius: inherit; padding: 6.6%; pointer-events: none; opacity: .32; mix-blend-mode: color-dodge; transition: opacity .35s;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .7), transparent 32%), var(--rainbow);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--bx, 30%) var(--by, 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tc.titan .tc-holo { opacity: .5; } .tc.demigod .tc-holo { opacity: .45; }
.tc:hover .tc-holo { opacity: .85; }
.reveal { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.big-card { position: absolute; height: min(64vh, 640px); aspect-ratio: 1024 / 1536; cursor: pointer; pointer-events: auto; transform-style: preserve-3d; transition: transform .75s var(--ease), opacity .5s; }
.big-card.stacked { transform: translateY(calc(var(--i) * -3px)) translateX(calc(var(--i) * 1px)); }
.big-card.rising { animation: riseCard .7s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes riseCard { from { transform: translateY(40vh) scale(.6); opacity: 0; } }
.big-card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.big-card .face .tc, .big-card .face .pack-face { height: 100%; }
.big-card .front { transform: rotateY(180deg); }
.big-card .front .tc { transform: none; }
.big-card.flipped { transform: rotateY(180deg) scale(1.03); }
.big-card.away { transform: translate(0, 45vh) rotateY(180deg) scale(.2); opacity: 0; }
.big-card.charging .back .pack-face { animation: charge var(--charge, .6s) ease-in forwards; }
.big-card.charge-demigod.charging, .big-card.charge-titan.charging { animation: rumble .09s linear infinite; }
.tc-holo { mix-blend-mode: overlay; opacity: .3; }
.tc.titan .tc-holo { opacity: .45; } .tc.demigod .tc-holo { opacity: .4; }
.tc:hover .tc-holo { opacity: .75; }
.tc.mythic { --ink: #ffe1dc; --tierink: #ff6b78; --glowc: rgba(255, 30, 50, .5); }
.tc.mythic .tc-holo { opacity: .55; }
/* desk/pack3d.css: the face-down card */
.card-down { position: absolute; inset: 0; container-type: inline-size; border-radius: 3.6% / 2.4%; overflow: hidden; background: #0b0809 url("assets/art/new/cards/web/card-back.webp") 0 0 / 100% 100%;
  box-shadow: 0 2cqw 7cqw rgba(0, 0, 0, .7), 0 0 0 1px rgba(236, 228, 216, .08); }
.card-down::before { content: ""; position: absolute; left: 8.8%; right: 8.6%; top: 20.8%; height: 67.1%; border-radius: 1cqw;
  background: linear-gradient(rgba(8, 6, 7, .55), rgba(8, 6, 7, .55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='450'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.006 .022' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .86 0 0 0 0 .8 -2.6 0 0 0 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    radial-gradient(90% 70% at 50% 45%, #1e1719, #070506 75%);
  box-shadow: inset 0 0 0 .5cqw rgba(214, 196, 160, .35), inset 0 0 0 1.4cqw rgba(0, 0, 0, .6), inset 0 0 0 1.7cqw rgba(214, 196, 160, .18), inset 0 0 8cqw #000; }
.card-down .cd-seal { position: absolute; left: 42%; top: 2.6%; width: 16.4%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #d9c79f 0 7%, transparent 8%), radial-gradient(circle, #19121a 0 62%, transparent 63%), conic-gradient(from 45deg, #6d5a3c, #e3d1a6, #6d5a3c, #e3d1a6, #6d5a3c); }
.card-down .cd-mark { position: absolute; left: 50%; top: 54%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 .35cqw rgba(214, 196, 160, .7), 0 0 0 1.6cqw rgba(0, 0, 0, .35), 0 0 0 1.9cqw rgba(214, 196, 160, .35), 0 0 6cqw rgba(0, 0, 0, .8) inset; }
.card-down .cd-mark b { font: 400 11cqw/1 var(--wordmark, var(--serif)); letter-spacing: .12em; padding-left: .12em; color: #eadbbd; text-shadow: 0 .3cqw 1cqw #000; }
.card-down .cd-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 205, .22) 47%, rgba(205, 230, 255, .18) 53%, transparent 65%) calc(100% - var(--bx, 50%)) 0 / 260% 100%; }
.big-card.charging .card-down { animation: charge var(--charge, .6s) ease-in forwards; }
/* the card back you wear (board #109): card-backs.js puts data-card-back and --card-back(-2x) / --cb-foil on <html>.
   Codex's backs carry IRIS in the art, so the drawn panel, seal and mark step aside; their rounded corners are baked in
   as alpha (6.25% / 4.17%), which the radius here matches so the shadow follows the card. The glint is tuned per
   material and kept off the IRIS letters (a band across the middle, where every back has them). .is-stock = a picture
   of the stock back somewhere else (the Locker), which stays stock. */
html[data-card-back] .card-down:not(.is-stock) { background: transparent var(--card-back) 0 0 / 100% 100% no-repeat; border-radius: 6.25% / 4.17%; }
html[data-card-back] .card-down:not(.is-stock)::before, html[data-card-back] .card-down:not(.is-stock) > .cd-seal, html[data-card-back] .card-down:not(.is-stock) > .cd-mark { display: none; }
html[data-card-back] .card-down:not(.is-stock) > .cd-foil { opacity: var(--cb-foil, .3);
  -webkit-mask-image: radial-gradient(40% 7% at 50% 47.5%, transparent 55%, #000 100%); mask-image: radial-gradient(40% 7% at 50% 47.5%, transparent 55%, #000 100%); }
html[data-card-back="iris-holo"] .card-down:not(.is-stock) > .cd-foil,
html[data-card-back="random"] .card-down[data-cb="iris-holo"]:not(.is-stock) > .cd-foil { mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 34%, rgba(229, 156, 169, .3) 42%, rgba(199, 164, 90, .3) 47%, rgba(110, 155, 129, .28) 52%, rgba(97, 143, 191, .3) 57%, rgba(152, 118, 199, .28) 62%, transparent 70%) calc(100% - var(--bx, 50%)) 0 / 260% 100%; }
@media (min-resolution: 1.5dppx) { html[data-card-back] .card-down:not(.is-stock) { background-image: var(--card-back-2x, var(--card-back)); } }