/* THE LOBBY'S RARITY REEL, AS blockrips.com DRAWS IT (Luke, 24 Oct: "the spinning on the rarity is the old one ... not
   the one on the live site"). Every rule below was read off the live lobby (document.styleSheets on blockrips.com, 24 Oct
   2026): style.css, rips-glue.css and the redesign skin rebrand-clans/homepage-items.css (html[data-rbc="1"]: the paper
   plate, Titan One, the tilted RARITY tab, the tier fills). Copied verbatim; only the reduced-motion blocks (switched
   off on the site by motion.js) and the Rip Room's rules are left out. The lobby's own tokens are set on the overlay so
   nothing on this page changes. Regenerate from the live site rather than editing by hand. */
.suspense{--key:#0B0F18;--ink:#141A28;--ink-faint:#5A6478;--acc:#D8498D;--display:'Barlow Condensed',system-ui,sans-serif;
  --ui:'Barlow Semi Condensed',system-ui,sans-serif;--slant:skewX(-7deg);--rb-paper:#F4F1EA}
.suspense { position: fixed; inset: 0px; z-index: 35; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "year rarity company"; place-items: center; padding: 0px 4%; background: none; opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(0.22, 0.8, 0.36, 1); }   /* live style.css */
.suspense[data-on="1"] { opacity: 1; }   /* live style.css */
.sus { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px; opacity: 0; transform: translateY(14px); transition: opacity 320ms cubic-bezier(0.22, 0.8, 0.36, 1), transform 320ms cubic-bezier(0.22, 0.8, 0.36, 1); }   /* live style.css */
.sus--in { opacity: 1; transform: none; }   /* live style.css */
.sus--year { grid-area: year; }   /* live style.css */
.sus--company { grid-area: company; }   /* live style.css */
.sus--rarity { grid-area: rarity; }   /* live style.css */
.sus--off { transition: opacity 350ms ease-out; opacity: 0 !important; }   /* live style.css */
.sus__label { font-family: var(--ui); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; text-shadow: rgb(0, 0, 0) 0px 2px 8px; }   /* live style.css */
.sus__row { display: flex; gap: 0.06em; }   /* live style.css */
.sus__reel { position: relative; overflow: hidden; font-family: var(--display); font-weight: 900; font-style: italic; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.15; height: 1.15em; transform: var(--slant); mask-image: linear-gradient(rgba(0, 0, 0, 0.25), rgb(0, 0, 0) 26%, rgb(0, 0, 0) 74%, rgba(0, 0, 0, 0.25)); }   /* live style.css */
.sus__strip { display: flex; flex-direction: column; will-change: transform; }   /* live style.css */
.sus__item { height: 1.15em; display: flex; align-items: center; justify-content: center; color: var(--ink); white-space: nowrap; padding: 0px 0.06em; text-shadow: rgba(0, 0, 0, 0.92) 0px 2px 6px, rgba(0, 0, 0, 0.75) 0px 0px 26px; }   /* live style.css */
.sus__strip[data-spin="1"] { animation: sus-spin var(--sus-dur,.72s) linear infinite; }   /* live style.css */
.sus__strip[data-dir="down"][data-spin="1"] { animation-direction: reverse; }   /* live style.css */
.sus--year .sus__reel, .sus--company .sus__reel { font-size: clamp(32px, 4.8vh, 58px); }   /* live style.css */
.sus--rarity .sus__reel { font-size: clamp(54px, 9vh, 110px); }   /* live style.css */
.sus--rarity { align-self: end; margin-bottom: calc(30px + 5vh); }   /* live style.css */
.sus__item[data-tier="common"] { color: rgb(0, 230, 3); }   /* live style.css */
.sus__item[data-tier="uncommon"] { color: rgb(174, 175, 187); }   /* live style.css */
.sus__item[data-tier="rare"] { color: rgb(30, 146, 255); }   /* live style.css */
.sus__item[data-tier="epic"] { color: rgb(221, 43, 255); }   /* live style.css */
.sus__item[data-tier="legendary"] { color: rgb(255, 206, 27); }   /* live style.css */
.sus__reel[data-set="1"] .sus__strip { will-change: auto; }   /* live style.css */
.sus__reel[data-set="1"] { overflow: visible; mask-image: none; }   /* live style.css */
.sus__reel[data-set="1"] .sus__item:not([data-hit="1"]) { opacity: 0; }   /* live style.css */
.sus__reel[data-set="1"] .sus__item:not([data-tier]) { color: var(--ink); }   /* live style.css */
.sus__reel[data-set="1"] .sus__item[data-hit="1"]:not([data-tier]) { color: var(--acc); }   /* live style.css */
.sus__reel[data-set="1"] .sus__item[data-hit="1"] { text-shadow: currentcolor 0px 0px 18px, rgba(0, 0, 0, 0.9) 0px 2px 10px; filter: drop-shadow(currentcolor 0px 0px 26px); }   /* live style.css */
.sus__reel[data-set="1"] .sus__item[data-hit="1"] { animation: 260ms cubic-bezier(0.22, 0.8, 0.36, 1) 0s 1 normal none running sus-lock; }   /* live style.css */
.sus__status { grid-area: rarity; align-self: end; margin-bottom: max(1.6vh, 12px); font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); min-height: 1.4em; text-align: center; }   /* live style.css */
@media (max-width: 1023px) { .sus__label { letter-spacing: 0.22em; font-size: 11px; } }   /* live style.css */
@media (max-width: 1023px) { .suspense { grid-template: "year company" "rarity rarity" 1fr / 1fr 1fr; padding: 13vh 5% 0px; align-items: start; } }   /* live style.css */
@media (max-width: 1023px) { .sus--year .sus__reel, .sus--company .sus__reel { font-size: clamp(28px, 7.4vw, 42px); } }   /* live style.css */
@media (max-width: 1023px) { .sus--rarity .sus__reel { font-size: clamp(42px, 12vw, 68px); } }   /* live style.css */
@media (max-width: 1023px) { .sus--rarity { align-self: end; margin-bottom: calc(13vh + env(safe-area-inset-bottom,0px)); } }   /* live style.css */
@media (max-width: 1023px) { .sus__status { margin-bottom: calc(6vh + env(safe-area-inset-bottom,0px)); } }   /* live style.css */
.sus__label { color: var(--key); font-size: 15px; font-weight: 800; opacity: 0.78; text-shadow: none; letter-spacing: 0.3em; }   /* live style.css */
.sus__item { text-shadow: none; -webkit-text-stroke: 7px var(--key); paint-order: stroke; }   /* live style.css */
.sus--year .sus__reel, .sus--company .sus__reel { font-size: clamp(48px, 7.4vh, 92px); }   /* live style.css */
.sus--rarity .sus__reel { font-size: clamp(64px, 11vh, 138px); }   /* live style.css */
.sus--rarity { margin-bottom: calc(8px + 3vh); }   /* live style.css */
.sus__reel[data-set="1"] .sus__item[data-hit="1"] { text-shadow: none; filter: drop-shadow(rgba(11, 15, 24, 0.3) 0px 5px 0px); -webkit-text-stroke: 8px var(--key); paint-order: stroke; }   /* live style.css */
.sus--stat { transition: opacity 140ms ease-out; transform: none; gap: 4px; }   /* live style.css */
.sus--stat .sus__row { display: none; }   /* live style.css */
.sus--stat .sus__label { font-family: var(--ui); font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--key); opacity: 1; text-shadow: none; }   /* live style.css */
.sus__stat { display: block; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; font-size: 54px; color: rgb(255, 255, 255); text-shadow: 0 3px 0 var(--key),0 0 1px var(--key); }   /* live style.css */
@media (min-width: 1024px) { .sus__stat { font-size: clamp(54px, 7vh, 88px); text-shadow: 0 4px 0 var(--key),0 0 1px var(--key); } }   /* live style.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus__reel { mask-image: none; overflow: hidden; transform: none; } }   /* live rips-glue.css */
@media (max-width: 1023px) { @supports (overflow:clip) { html[data-rbc="1"] .sus__reel { overflow: visible clip; } } }   /* live rips-glue.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus__item { -webkit-text-stroke: 0px; paint-order: normal; text-shadow: 0 2px 0 var(--key),0 0 3px var(--key); } }   /* live rips-glue.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus__reel[data-set="1"] .sus__item[data-hit="1"] { -webkit-text-stroke: 6px var(--key); paint-order: stroke; text-shadow: none; } }   /* live rips-glue.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus__reel { height: 1em; line-height: 1; } }   /* live rips-glue.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus__item { height: 1em; line-height: 1; padding: 0px 0.04em; } }   /* live rips-glue.css */
@media (max-width: 1023px) { html[data-rbc="1"] .sus--year .sus__reel, html[data-rbc="1"] .sus--company .sus__reel { font-size: clamp(44px, 6.6vh, 80px); } }   /* live rips-glue.css */
html[data-rbc="1"] .suspense .sus__label, html[data-rbc="1"] .suspense .sus--stat .sus__label { display: block; margin: 0px 0px 2px; transform: rotate(-3.5deg); text-transform: uppercase; -webkit-text-stroke: 5px rgb(14, 17, 22); paint-order: stroke; white-space: nowrap; opacity: 1 !important; font: 400 20px / 1.1 "Titan One", system-ui, sans-serif !important; letter-spacing: 0.06em !important; color: rgb(255, 255, 255) !important; text-shadow: none !important; }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus__stat { text-transform: uppercase; text-align: center; max-width: 100%; padding: 0.06em 0.08em; -webkit-text-fill-color: transparent; background: linear-gradient(rgb(255, 135, 190) 0%, rgb(255, 77, 150) 35%, rgb(240, 24, 122) 70%, rgb(176, 10, 84) 100%) text; filter: drop-shadow(rgb(255, 255, 255) 0.05em 0px 0px) drop-shadow(rgb(255, 255, 255) -0.05em 0px 0px) drop-shadow(rgb(255, 255, 255) 0px 0.05em 0px) drop-shadow(rgb(255, 255, 255) 0px -0.05em 0px) drop-shadow(rgba(14, 17, 22, 0.4) 0px 0.1em 0.14em); font-family: "Titan One", system-ui, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: clamp(48px, 6.6vh, 80px) !important; line-height: 1 !important; letter-spacing: -0.01em !important; white-space: normal !important; color: transparent !important; text-shadow: none !important; -webkit-text-stroke: 0px !important; }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus__reel { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0px; transform: none !important; }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus__item, html[data-rbc="1"] .suspense .sus__reel[data-set="1"] .sus__item[data-hit="1"] { color: rgb(14, 17, 22) !important; -webkit-text-stroke: 0px !important; paint-order: normal !important; text-shadow: none !important; filter: none !important; }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__row { position: relative; gap: 0px; overflow: hidden; border: 3px solid rgb(14, 17, 22); border-radius: 20px; background: var(--rb-paper,#fff); box-shadow: 0 0 0 4px var(--rb-paper,#fff),0 24px 44px -18px rgba(14,17,22,.6); }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__item { background: rgb(230, 236, 243); padding: 0px 0.34em !important; }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__item[data-tier="common"], html[data-rbc="1"] .suspense .sus--rarity .sus__item[data-tier="uncommon"] { background: rgb(230, 236, 243); }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__item[data-tier="rare"] { background: rgb(185, 236, 252); }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__item[data-tier="epic"] { background: rgb(255, 135, 190); }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus--rarity .sus__item[data-tier="legendary"] { background: linear-gradient(rgb(255, 232, 119), rgb(242, 185, 12)); }   /* live homepage-items.css */
@media (min-width: 1024px) { html[data-rbc="1"] .suspense .sus--rarity .sus__reel { font-size: clamp(52px, 8.6vh, 108px); } }   /* live homepage-items.css */
html[data-rbc="1"] .suspense .sus__status { font: 700 13px / 1.4 "Barlow Semi Condensed", system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(14, 17, 22); }   /* live homepage-items.css */
html[data-rbc="1"] .rip-skip { min-height: 44px; font-family: "Titan One", system-ui, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 16px !important; letter-spacing: 0.02em !important; color: rgb(14, 17, 22) !important; background: var(--rb-paper,#fff) !important; border: 3px solid rgb(14, 17, 22) !important; border-radius: 999px !important; box-shadow: 0 0 0 3px var(--rb-paper,#fff),0 6px 12px -6px rgba(14,17,22,.4) !important; padding: 0px 18px !important; }   /* live homepage-items.css */
html[data-rbc="1"] .rip-skip:focus-visible { outline: rgb(34, 166, 220) solid 3px !important; outline-offset: 3px !important; }   /* live homepage-items.css */
@media (max-width: 1023px) { html[data-rbc="1"] .suspense .sus__label, html[data-rbc="1"] .suspense .sus--stat .sus__label { -webkit-text-stroke: 4px rgb(14, 17, 22); font-size: 16px !important; } }   /* live homepage-items.css */
@media (max-width: 1023px) { html[data-rbc="1"] .suspense .sus--year, html[data-rbc="1"] .suspense .sus--company { padding-left: 0px; padding-right: 0px; } }   /* live homepage-items.css */
@media (max-width: 1023px) { html[data-rbc="1"] .suspense .sus__stat { font-size: clamp(28px, 9vw, 42px) !important; } }   /* live homepage-items.css */
@media (max-width: 1023px) { html[data-rbc="1"] .suspense .sus--rarity .sus__row { border-radius: 16px; } }   /* live homepage-items.css */
@keyframes sus-spin{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
@keyframes sus-lock{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}   /* live style.css */
