/* The room's tokens and the card box's custom properties, kept from vendor/cards/card.gen.css when the battle's card
   moved to the home page's own card (r4/ex/card.css, shared/excard.js): the room, the console and the HUD read these. */
@property --card { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.bc-card { --sans: "Katagami Sans", "Katagami Sans Cards", system-ui, sans-serif; --ease: cubic-bezier(0.2, 0, 0, 1); --emb-hi: oklch(100% 0 0 / 0.95); --emb-lo: oklch(42% 0.035 70 / 0.42); --rival: oklch(52% 0.19 30); --clay: oklch(91.5% 0.01 80); --ink-1: oklch(19% 0.012 75); --edge-print: inset 0 0 0 1px oklch(0% 0 0 / 0.12), inset 0 1px 0 oklch(100% 0 0 / 0.3); --cast-rest: 0.45px 0.89px 2px oklch(42% 0.035 70 / 0.18), 0.89px 1.79px 4px -0.5px oklch(42% 0.035 70 / 0.14), 1.79px 3.58px 8px -1px oklch(42% 0.035 70 / 0.12); --cast-lift: 2.68px 5.37px 12px oklch(42% 0.035 70 / 0.198), 5.37px 10.73px 24px -3px oklch(42% 0.035 70 / 0.154), 10.73px 21.47px 48px -6px oklch(42% 0.035 70 / 0.132); --mask-win: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20shape-rendering%3D%27crispEdges%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27b0%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b1%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b2%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%276%27%20y%3D%270%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b3%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%270%27%20y%3D%276%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b4%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b5%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%279%27%20y%3D%279%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b6%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b7%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%273%27%20y%3D%279%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b8%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%273%27%20y%3D%270%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b9%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%279%27%20y%3D%276%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b10%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%279%27%20y%3D%270%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b11%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b12%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%270%27%20y%3D%273%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b13%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%276%27%20y%3D%279%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b14%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27b15%27%20width%3D%2712%27%20height%3D%2712%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%273%27%20height%3D%273%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20y%3D%270%25%27%20width%3D%27100%25%27%20height%3D%2788.687%25%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%2710.115%25%27%20fill%3D%27url(%23b0)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%279.174%25%27%20fill%3D%27url(%23b1)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%278.485%25%27%20fill%3D%27url(%23b2)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%277.894%25%27%20fill%3D%27url(%23b3)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%277.358%25%27%20fill%3D%27url(%23b4)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%276.853%25%27%20fill%3D%27url(%23b5)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%276.367%25%27%20fill%3D%27url(%23b6)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%275.892%25%27%20fill%3D%27url(%23b7)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%275.421%25%27%20fill%3D%27url(%23b8)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%274.946%25%27%20fill%3D%27url(%23b9)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%274.46%25%27%20fill%3D%27url(%23b10)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%273.955%25%27%20fill%3D%27url(%23b11)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%273.419%25%27%20fill%3D%27url(%23b12)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%272.828%25%27%20fill%3D%27url(%23b13)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%272.139%25%27%20fill%3D%27url(%23b14)%27%2F%3E%3Crect%20y%3D%2788.687%25%27%20width%3D%27100%25%27%20height%3D%271.198%25%27%20fill%3D%27url(%23b15)%27%2F%3E%3C%2Fsvg%3E"); }
:root { --room-clay: oklch(91.5% 0.01 80); --room-clay-hi: oklch(94% 0.01 80); --room-ink-1: oklch(19% 0.012 75); --room-ink-2: oklch(50% 0.014 75); --room-ink-3: oklch(60% 0.012 75); --room-fill: oklch(42% 0.035 70 / 0.1); --room-raise-s: 1.34px 2.68px 6px oklch(42% 0.035 70 / 0.3), -1.34px -2.68px 6px oklch(100% 0 0), inset 0 1px 0 oklch(100% 0 0 / 0.7), 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-raise-m: 2.24px 4.47px 10px oklch(42% 0.035 70 / 0.3), -2.24px -4.47px 10px oklch(100% 0 0), inset 0 1px 0 oklch(100% 0 0 / 0.7), 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-raise-l: 4.47px 8.94px 20px oklch(42% 0.035 70 / 0.3), -4.47px -8.94px 20px oklch(100% 0 0), inset 0 1px 0 oklch(100% 0 0 / 0.7), 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-sink-s: inset 1.34px 2.68px 6px oklch(42% 0.035 70 / 0.26), inset -1.34px -2.68px 6px oklch(100% 0 0 / 0.9), inset 0 -1px 0 oklch(100% 0 0 / 0.7), inset 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-sink-m: inset 2.24px 4.47px 10px oklch(42% 0.035 70 / 0.3), inset -2.24px -4.47px 10px oklch(100% 0 0 / 0.9), inset 0 -1px 0 oklch(100% 0 0 / 0.7), inset 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-sink-l: inset 4.47px 8.94px 20px oklch(42% 0.035 70 / 0.3), inset -4.47px -8.94px 20px oklch(100% 0 0 / 0.9), inset 0 -1px 0 oklch(100% 0 0 / 0.7), inset 0 0 0 1px oklch(42% 0.035 70 / 0.07); --room-cast-rest: 0.45px 0.89px 2px oklch(42% 0.035 70 / 0.18), 0.89px 1.79px 4px -0.5px oklch(42% 0.035 70 / 0.14), 1.79px 3.58px 8px -1px oklch(42% 0.035 70 / 0.12); --room-cast-lift: 2.68px 5.37px 12px oklch(42% 0.035 70 / 0.198), 5.37px 10.73px 24px -3px oklch(42% 0.035 70 / 0.154), 10.73px 21.47px 48px -6px oklch(42% 0.035 70 / 0.132); --room-edge-print: inset 0 0 0 1px oklch(0% 0 0 / 0.12), inset 0 1px 0 oklch(100% 0 0 / 0.3); --room-rival: oklch(52% 0.19 30); --room-ctl: 40px; --room-r-ctl: 12px; --room-ease: cubic-bezier(0.2, 0, 0, 1); --room-ease-move: cubic-bezier(0.25, 1, 0.5, 1); }
:root[data-theme="dark"] { --room-clay: oklch(25% 0.008 75); --room-clay-hi: oklch(28.5% 0.008 75); --room-ink-1: oklch(98.5% 0.004 80); --room-ink-2: oklch(64% 0.01 80); --room-ink-3: oklch(53% 0.01 80); --room-fill: oklch(100% 0 0 / 0.08); --room-raise-s: 1.34px 2.68px 6px oklch(8% 0.01 70 / 0.6), -1.34px -2.68px 6px oklch(100% 0 0 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.09), 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-raise-m: 2.24px 4.47px 10px oklch(8% 0.01 70 / 0.6), -2.24px -4.47px 10px oklch(100% 0 0 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.09), 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-raise-l: 4.47px 8.94px 20px oklch(8% 0.01 70 / 0.6), -4.47px -8.94px 20px oklch(100% 0 0 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.09), 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-sink-s: inset 1.34px 2.68px 6px oklch(8% 0.01 70 / 0.55), inset -1.34px -2.68px 6px oklch(100% 0 0 / 0.06), inset 0 -1px 0 oklch(100% 0 0 / 0.09), inset 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-sink-m: inset 2.24px 4.47px 10px oklch(8% 0.01 70 / 0.6), inset -2.24px -4.47px 10px oklch(100% 0 0 / 0.07), inset 0 -1px 0 oklch(100% 0 0 / 0.09), inset 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-sink-l: inset 4.47px 8.94px 20px oklch(8% 0.01 70 / 0.6), inset -4.47px -8.94px 20px oklch(100% 0 0 / 0.07), inset 0 -1px 0 oklch(100% 0 0 / 0.09), inset 0 0 0 1px oklch(8% 0.01 70 / 0.35); --room-cast-rest: 0.45px 0.89px 2px oklch(8% 0.01 70 / 0.45), 0.89px 1.79px 4px -0.5px oklch(8% 0.01 70 / 0.35), 1.79px 3.58px 8px -1px oklch(8% 0.01 70 / 0.3); --room-cast-lift: 2.68px 5.37px 12px oklch(8% 0.01 70 / 0.495), 5.37px 10.73px 24px -3px oklch(8% 0.01 70 / 0.385), 10.73px 21.47px 48px -6px oklch(8% 0.01 70 / 0.33); --room-edge-print: inset 0 0 0 1px oklch(0% 0 0 / 0.12), inset 0 1px 0 oklch(100% 0 0 / 0.3); --room-rival: oklch(72% 0.15 32); }