:root {
  --ink: #fff;
  --red: #ff0000;
  --org: #ff7a00;
  --ylw: #ffe600;
  --grn: #00e635;
  --cy: #00b3ff;
  --blu: #2a2aff;
  --vio: #9b00ff;
  --mg: var(--vio);
  --rainbow: linear-gradient(
  	90deg,
  	var(--red) 0%, var(--red) 7%,
  	var(--org) 14%, var(--org) 21%,
  	var(--ylw) 28%, var(--ylw) 35%,
  	var(--grn) 42%, var(--grn) 49%,
  	var(--cy) 56%, var(--cy) 63%,
  	var(--blu) 70%, var(--blu) 77%,
  	var(--vio) 84%, var(--vio) 91%,
  	var(--red) 100%
  );
}

* {
  min-width: 0;
}

@keyframes hue-rave {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes bg-slide {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes title-bounce {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}
@keyframes glitch-a {
  0%, 84%, 100% {
    transform: translate(-4px, 0) skewX(0);
    clip-path: inset(0 0 0 0);
  }
  86% {
    transform: translate(-12px, -3px) skewX(-8deg);
    clip-path: inset(8% 0 50% 0);
  }
  92% {
    transform: translate(8px, 3px) skewX(6deg);
    clip-path: inset(60% 0 10% 0);
  }
}
@keyframes glitch-b {
  0%, 80%, 100% {
    transform: translate(4px, 0) skewX(0);
    clip-path: inset(0 0 0 0);
  }
  82% {
    transform: translate(12px, 3px) skewX(8deg);
    clip-path: inset(40% 0 30% 0);
  }
  90% {
    transform: translate(-8px, -3px) skewX(-6deg);
    clip-path: inset(12% 0 70% 0);
  }
}
@keyframes wiggle {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes float-up {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-14px) rotate(20deg);
  }
}
@keyframes bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes crt-scan-move {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 100vh;
  }
}
@keyframes crt-flicker {
  0%, 100% {
    opacity: 0;
  }
  7%, 9% {
    opacity: 0.08;
  }
  50% {
    opacity: 0;
  }
  52% {
    opacity: 0.06;
  }
  80% {
    opacity: 0;
  }
  82% {
    opacity: 0.05;
  }
}
@keyframes glitch-burst {
  0%, 92%, 100% {
    transform: translate(0, 0) skewX(0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  93% {
    transform: translate(-6px, 2px) skewX(-4deg);
    clip-path: inset(10% 0 60% 0);
  }
  94% {
    transform: translate(5px, -2px) skewX(3deg);
    clip-path: inset(70% 0 5% 0);
  }
  96% {
    transform: translate(-3px, 1px) skewX(0);
    clip-path: inset(30% 0 30% 0);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
  20% {
    transform: translate(-1px, 1px) rotate(-0.3deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(0.3deg);
  }
  60% {
    transform: translate(-1px, -1px) rotate(-0.2deg);
  }
  80% {
    transform: translate(1px, 1px) rotate(0.2deg);
  }
}
@keyframes border-rainbow {
  0% {
    border-color: var(--red);
    box-shadow: 0 0 12px var(--red);
  }
  16% {
    border-color: var(--org);
    box-shadow: 0 0 12px var(--org);
  }
  33% {
    border-color: var(--ylw);
    box-shadow: 0 0 12px var(--ylw);
  }
  50% {
    border-color: var(--grn);
    box-shadow: 0 0 12px var(--grn);
  }
  66% {
    border-color: var(--cy);
    box-shadow: 0 0 12px var(--cy);
  }
  83% {
    border-color: var(--blu);
    box-shadow: 0 0 12px var(--blu);
  }
  100% {
    border-color: var(--vio);
    box-shadow: 0 0 12px var(--vio);
  }
}
@keyframes new-pop {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.3) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-6deg);
    opacity: 1;
  }
}
@keyframes new-bob {
  0%, 100% {
    transform: rotate(-6deg) scale(1);
  }
  50% {
    transform: rotate(-4deg) scale(1.08);
  }
}
@keyframes toast-in {
  from {
    transform: translateY(120%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes count-blink {
  0%, 100% {
    text-shadow: 0 0 6px var(--ylw);
  }
  50% {
    text-shadow: 0 0 14px var(--ylw), 0 0 24px var(--org);
  }
}
@keyframes toast-auto {
  0% {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
  }
  8% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  88% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
  }
}
.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: #000;
  color: var(--ylw);
  border: 3px solid var(--ylw);
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: 0.1em;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 16px;
  outline: none;
}

a:focus-visible,
[href]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--red), 0 0 0 8px var(--ink);
}

@media (prefers-contrast: more) {
  .slot::before,
  .slot::after {
    opacity: 0 !important;
  }
  .slot {
    background: #000 !important;
    border-color: var(--ink) !important;
  }
  .portal__title,
  .portal__kicker,
  .portal__foot,
  .slot__no {
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    filter: none !important;
  }
}
html {
  background: #000;
  color-scheme: dark;
}

body {
  min-height: 100dvh;
  font-family: "Comic Sans MS", "Chalkboard SE", "Hiragino Kaku Gothic ProN", "Noto Sans JP", cursive, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 10%, rgba(255, 0, 51, 0.35), transparent 30%), radial-gradient(circle at 90% 20%, rgba(255, 122, 0, 0.35), transparent 30%), radial-gradient(circle at 80% 80%, rgba(0, 229, 53, 0.35), transparent 30%), radial-gradient(circle at 20% 90%, rgba(42, 91, 255, 0.35), transparent 30%), radial-gradient(circle at 50% 50%, rgba(255, 0, 212, 0.25), transparent 40%), #000;
  overflow-x: hidden;
}

.crt {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  mix-blend-mode: screen;
}

.crt__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0) 4px);
  animation: crt-scan-move 7s linear infinite;
}

.crt__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: bg-slide 0.5s steps(4) infinite;
}

.crt__flicker {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: crt-flicker 5s steps(2) infinite;
}

.toast {
  position: fixed;
  bottom: 64px;
  left: 50%;
  z-index: 180;
  transform: translateX(-50%) translateY(120%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--red);
  color: var(--ylw);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.08em;
  border: 3px outset var(--ylw);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #000, 0 8px 0 0 rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.7);
  text-shadow: 2px 2px 0 #000;
  opacity: 0;
  max-width: calc(100vw - 32px);
}
.toast[hidden] {
  display: none;
}
.toast--auto {
  animation: toast-auto 9s ease-in-out 0s infinite, hue-rave 4s linear infinite;
}

.toast__msg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marquee {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 90;
  overflow: hidden;
  background: var(--rainbow);
  background-size: 400% 100%;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  animation: hue-rave 8s linear infinite, bg-slide 3s linear infinite;
}
.marquee--top {
  top: 0;
}
.marquee--bottom {
  bottom: 0;
}
.marquee--bottom .marquee__track {
  animation-direction: reverse;
  animation-duration: 22s;
}

.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  padding: 8px 0;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #000;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff;
  animation: ticker 16s linear infinite;
}
.marquee__track span {
  padding-right: 0;
}

.portal {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding: 80px clamp(16px, 5vw, 40px) 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.status {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 3px ridge var(--ylw);
  border-radius: 8px;
  background: #000;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ylw);
  text-shadow: 0 0 6px var(--org);
  animation: hue-rave 12s linear infinite;
}

.status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red), 0 0 16px var(--red);
  animation: blink 0.8s steps(2) infinite;
}

.status__sep {
  color: var(--mg);
}

.status__clock {
  color: var(--cy);
}

.status__count {
  color: var(--ylw);
  font-variant-numeric: tabular-nums;
  animation: count-blink 1.4s ease-in-out infinite;
}

.portal__head {
  position: relative;
  padding-block: 24px;
  text-align: center;
}

.portal__kicker {
  font-size: clamp(18px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: 0.2em;
  background: var(--rainbow);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  filter: drop-shadow(2px 2px 0 #000);
  animation: hue-rave 6s linear infinite, bg-slide 2s linear infinite;
  margin-bottom: 14px;
}

.portal__title {
  position: relative;
  display: inline-block;
  font-size: clamp(72px, 18vw, 200px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  background: var(--rainbow);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #000;
  filter: drop-shadow(4px 4px 0 #000) drop-shadow(8px 8px 0 var(--mg));
  animation: hue-rave 5s linear infinite, bg-slide 2.5s linear infinite, title-bounce 1.6s ease-in-out infinite, glitch-burst 6s steps(2) infinite;
}
.portal__title::before, .portal__title::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rainbow);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  mix-blend-mode: screen;
}
.portal__title::before {
  animation: glitch-a 2.4s steps(2) infinite;
}
.portal__title::after {
  animation: glitch-b 2.4s steps(2) infinite;
}

.portal__tagline {
  margin-top: 18px;
  font-size: clamp(16px, 3vw, 26px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--ylw);
  background: var(--red);
  border: 3px outset var(--ylw);
  border-radius: 6px;
  display: inline-block;
  padding: 6px 16px;
  text-shadow: 2px 2px 0 #000;
  transform: rotate(-2deg);
  animation: hue-rave 10s linear infinite, wiggle 0.4s ease-in-out infinite alternate;
}

.badge {
  position: absolute;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #000;
  line-height: 1.1;
  background: var(--ylw);
  border: 3px solid #000;
  clip-path: polygon(50% 0%, 61% 12%, 75% 5%, 75% 22%, 95% 25%, 82% 39%, 100% 50%, 82% 61%, 95% 75%, 75% 78%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 25% 78%, 5% 75%, 18% 61%, 0% 50%, 18% 39%, 5% 25%, 25% 22%, 25% 5%, 39% 12%);
  text-shadow: 1px 1px 0 #fff;
  animation: spin 6s linear infinite;
}
.badge--a {
  top: 0;
  right: 4%;
  background: var(--red);
  color: var(--ylw);
  animation-duration: 5s;
}
.badge--b {
  top: 60%;
  right: 10%;
  background: var(--grn);
  color: var(--mg);
  animation-duration: 7s;
  animation-direction: reverse;
}
.badge--c {
  top: 30%;
  left: 4%;
  background: var(--cy);
  color: var(--red);
  animation-duration: 6.5s;
}

.slots {
  display: grid;
  gap: 18px;
}

.slot {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: #000;
  border: 4px outset var(--ylw);
  border-radius: 4px;
  color: var(--ink);
  overflow: visible;
  isolation: isolate;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--rainbow);
  background-size: 400% 100%;
  opacity: 0.22;
  animation: bg-slide 4s linear infinite;
}
.slot::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 2px;
}
.slot:hover, .slot:focus-visible {
  transform: scale(1.04) rotate(-1deg);
  border-color: var(--mg);
  background: var(--red);
  box-shadow: 0 0 0 4px var(--ylw), 0 0 24px var(--mg), 0 12px 32px rgba(0, 0, 0, 0.7);
  animation: hue-rave 1.5s linear infinite, shake 0.3s ease-in-out infinite;
}
.slot:focus-visible {
  box-shadow: 0 0 0 4px var(--ylw), 0 0 0 6px #000, 0 0 0 9px var(--ink), 0 0 24px var(--mg), 0 12px 32px rgba(0, 0, 0, 0.7);
}
.slot:hover::before, .slot:focus-visible::before {
  background: rgba(0, 0, 0, 0.6);
}
.slot:nth-child(1) {
  animation: hue-rave 7s linear infinite, shake 0.6s ease-in-out infinite;
}
.slot:nth-child(2) {
  animation: hue-rave 7s linear infinite -2.3s, shake 0.6s ease-in-out infinite -0.2s;
}
.slot:nth-child(3) {
  animation: hue-rave 7s linear infinite -4.6s, shake 0.6s ease-in-out infinite -0.4s;
}

.slot__new {
  position: absolute;
  top: -12px;
  right: 16px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #000;
  background: var(--grn);
  border: 2px solid #000;
  border-radius: 4px;
  text-shadow: 1px 1px 0 #fff;
  transform-origin: center;
  animation: new-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both, new-bob 1.2s ease-in-out 1s infinite, hue-rave 6s linear infinite;
}

.slot__ribbon {
  position: absolute;
  top: -14px;
  left: 18px;
  z-index: 2;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #000;
  background: var(--ylw);
  border: 2px solid #000;
  border-radius: 3px;
  transform: rotate(-4deg);
  text-shadow: 1px 1px 0 #fff;
  animation: hue-rave 9s linear infinite;
}

.slot:nth-child(1) .slot__ribbon {
  background: var(--red);
  color: var(--ylw);
}

.slot:nth-child(2) .slot__ribbon {
  background: var(--cy);
  color: var(--red);
}

.slot:nth-child(3) .slot__ribbon {
  background: var(--grn);
  color: var(--mg);
}

.slot__ribbon--caution {
  background: repeating-linear-gradient(45deg, var(--ylw), var(--ylw) 8px, #000 8px, #000 16px) !important;
  color: var(--ylw) !important;
  border-color: var(--ylw) !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000 !important;
}

.slot__no {
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 900;
  line-height: 1;
  background: var(--rainbow);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  filter: drop-shadow(2px 2px 0 #000);
  animation: bg-slide 2s linear infinite, blink 1.2s steps(2) infinite;
  min-width: 1.6ch;
}

.slot__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.slot__name {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--ylw);
  text-shadow: 2px 2px 0 var(--red), -2px -2px 0 var(--cy), 0 0 10px var(--mg);
}

.slot__desc {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot__arrow {
  font-size: 18px;
  font-weight: 900;
  color: var(--grn);
  text-shadow: 0 0 8px var(--grn);
  transform: translateX(-10px);
  opacity: 0.4;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.slot:hover .slot__arrow,
.slot:focus-visible .slot__arrow {
  transform: translateX(0) scale(1.3);
  opacity: 1;
  animation: hue-rave 4s linear infinite;
}

.slot--disabled {
  position: relative;
  cursor: not-allowed;
  border-style: solid;
  border-color: var(--ylw) !important;
  background: #1a1a1a !important;
  filter: grayscale(0.7) brightness(0.7);
}
.slot--disabled::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(45deg, rgba(255, 230, 0, 0.18), rgba(255, 230, 0, 0.18) 12px, rgba(0, 0, 0, 0.4) 12px, rgba(0, 0, 0, 0.4) 24px);
  animation: bg-slide 6s linear infinite;
  border-radius: inherit;
}
.slot--disabled::after {
  display: none !important;
}
.slot--disabled:hover {
  transform: none;
  background: #1a1a1a !important;
  box-shadow: 0 0 0 2px var(--ylw), 0 0 18px rgba(255, 230, 0, 0.35) !important;
}
.slot--disabled:hover .slot__arrow {
  opacity: 0 !important;
  transform: none !important;
}
.slot--disabled:focus-visible {
  transform: none;
  background: #1a1a1a !important;
  box-shadow: 0 0 0 2px var(--ylw), 0 0 0 5px #000, 0 0 0 8px var(--ink), 0 0 18px rgba(255, 230, 0, 0.4) !important;
}
.slot--disabled .slot__name {
  color: var(--ylw);
  text-shadow: 2px 2px 0 #000;
}
.slot--disabled .slot__desc {
  color: #c9c9c9;
}
.slot--disabled .slot__no {
  -webkit-text-stroke: 2px var(--ylw);
}

.slot__lock {
  font-size: clamp(24px, 4vw, 36px);
  filter: drop-shadow(0 0 6px rgba(255, 230, 0, 0.6));
  animation: bob 1.6s ease-in-out infinite;
}

.sparkles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 12px;
  font-size: clamp(20px, 4vw, 36px);
  margin: 8px 0;
}
.sparkles span {
  animation: float-up 3s ease-in-out infinite;
}
.sparkles span:nth-child(1) {
  animation-delay: 0s;
  color: var(--red);
}
.sparkles span:nth-child(2) {
  animation-delay: 0.4s;
  color: var(--org);
}
.sparkles span:nth-child(3) {
  animation-delay: 0.8s;
  color: var(--ylw);
}
.sparkles span:nth-child(4) {
  animation-delay: 1.2s;
  color: var(--grn);
}
.sparkles span:nth-child(5) {
  animation-delay: 1.6s;
  color: var(--cy);
}
.sparkles span:nth-child(6) {
  animation-delay: 2s;
  color: var(--blu);
}
.sparkles span:nth-child(7) {
  animation-delay: 2.4s;
  color: var(--mg);
}
.sparkles span:nth-child(8) {
  animation-delay: 2.8s;
  color: var(--red);
}

.portal__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 4px ridge var(--mg);
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ylw);
  background: linear-gradient(90deg, var(--red), var(--mg), var(--blu));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px #000;
  animation: hue-rave 9s linear infinite, bg-slide 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .slot:hover,
  .slot:focus-visible {
    transform: none;
  }
  .portal__title::before,
  .portal__title::after {
    display: none;
  }
  .crt {
    display: none;
  }
  .slot__new {
    opacity: 1;
    transform: rotate(-6deg);
  }
}
