.channel.arena-channel {
  border-color: #79acbd;
  background: radial-gradient(ellipse at 50% 22%, #315e70, #183a4c 70%);
}
.arena-channel::before { border-color: #ddfbff57; }
.arena-tile-art { position: absolute; inset: 4% 12% 28%; display: grid; place-items: center; }
.arena-tile-art svg { height: 95%; width: 85%; position: relative; filter: drop-shadow(0 3px 7px #001d3675); }
.arena-tile-ring { position: absolute; inset: 4% 13%; border: 1px solid #8defff40; border-radius: 50%; box-shadow: 0 0 0 10px #85e7fa0a; }
.motion-enabled .arena-tile-ring { animation: arena-ring 4s ease-in-out infinite; }
.motion-enabled .arena-tile-art svg { animation: arena-float 5s ease-in-out infinite; }
.arena-tile-name { position: absolute; left: 0; right: 0; bottom: 12%; color: #f0fbff; font-size: clamp(9px, 1.35vw, 18px); letter-spacing: 1.7px; font-weight: 800; }
.arena-tile-name strong { color: #71e4ec; }
.arena-tile-online { position: absolute; bottom: 3.5%; left: 0; right: 0; color: #bddde5; font-size: clamp(5px, .51vw, 8px); letter-spacing: 2.2px; }
.arena-poster { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 24px 16px; min-height: 307px; background: linear-gradient(145deg, #102d41, #234b60); color: #f2fbff; border-right: 1px solid #cfe0e8; }
.arena-poster-grid { position: absolute; inset: 40% -60% -65%; z-index: -1; background-image: linear-gradient(#65e1ee18 1px, transparent 1px), linear-gradient(90deg, #65e1ee18 1px, transparent 1px); background-size: 30px 30px; transform: perspective(230px) rotateX(50deg); }
.arena-poster-kicker { font-size: 8px; letter-spacing: 3px; color: #c2e1e8; font-weight: 700; }
.arena-poster-mark { width: 150px; height: 125px; margin: 11px 0 3px; }
.arena-poster-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px #071e4480); }
.arena-poster-title { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 9px; font: 800 clamp(25px, 2.6vw, 37px)/1.2 "Trebuchet MS", Arial, sans-serif; letter-spacing: 1px; }
.arena-poster-title > span { color: #77e9ef; }
.arena-poster-caption { font-size: 8px; letter-spacing: 1.7px; color: #a6cdd9; margin-top: 14px; }
.arena-poster-block { z-index: -1; position: absolute; width: 55px; height: 65px; background: linear-gradient(110deg, #c5726440 40%, #e8aa9c30 41%); transform: skewY(-20deg); box-shadow: 12px 0 #123548; }
.arena-poster .block-one { left: -17px; bottom: 37px; }
.arena-poster .block-two { right: -15px; top: 61px; transform: rotate(180deg) skewY(-20deg); background: linear-gradient(110deg, #5ebdcd50 40%, #9aefff30 41%); }
.arena-shop-card .new-app-badge { background: #e2f7f6; color: #266f75; }
.arena-shop-card #play-arena { border-color: #76c4d2; }
@keyframes arena-ring { 0%, 100% { scale: .94; opacity: .55; } 50% { scale: 1.08; opacity: 1; } }
@keyframes arena-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (max-width: 760px) {
  .arena-poster-title { font-size: 26px; gap: 5px; }
  .arena-poster-kicker { font-size: 7px; letter-spacing: 1.7px; }
  .arena-poster-caption { font-size: 7px; letter-spacing: 1px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .arena-tile-name { font-size: 9px; letter-spacing: .3px; bottom: 14%; }
  .arena-tile-online { font-size: 5px; letter-spacing: 1.2px; bottom: 5%; }
  .arena-poster { min-height: 153px; height: 153px; padding: 25px 21px; align-items: flex-start; border-right: 0; border-bottom: 1px solid #cfdae4; }
  .arena-poster-mark { position: absolute; width: 123px; height: 100px; right: 9px; top: 18px; }
  .arena-poster-kicker { font-size: 6px; letter-spacing: 1.5px; }
  .arena-poster-title { width: 58%; display: block; margin-top: 9px; font-size: 25px; }
  .arena-poster-title > span { display: block; }
  .arena-poster-caption { font-size: 6px; letter-spacing: .4px; margin-top: 8px; }
}
@media (max-height: 570px) and (orientation: landscape) {
  .arena-poster { min-height: 230px; padding: 16px 12px; }
  .arena-poster-mark { height: 84px; width: 103px; margin: 8px 0; }
  .arena-poster-title { font-size: 26px; }
  .arena-poster-caption { margin-top: 8px; font-size: 7px; }
  .arena-tile-name { font-size: 10px; letter-spacing: .4px; }
  .arena-tile-online { font-size: 5px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-tile-ring, .arena-tile-art svg { animation: none !important; }
}