/* minimal extras — Tailwind does most work */
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Shelf container (home <main>): the SAME column as .gx-header-inner — the
 * --gx-gutter inset (3% of the viewport per side, capped at
 * --gx-content-max) + auto margins, so card rows sit on the exact vertical
 * line as the logo at every width. border-box keeps the gutter inside the
 * width so no horizontal overflow. Mobile keeps the 12px/10px pads below. */
.gx-page{width:100%;max-width:calc(var(--gx-content-max) + 2 * var(--gx-gutter));margin-inline:auto;padding-inline:var(--gx-gutter);box-sizing:border-box}
@media (max-width:859px){.gx-page{padding-inline:12px}}
@media (max-width:420px){.gx-page{padding-inline:10px}}
/* Phase 4: .card / .gx-card visuals live in css/shelves.css */
/* Phase 1: .nav-btn base + .active pill lives in css/navbar.css (glass system) */
/* season dropdown: native popup must stay dark, otherwise white-on-white */
#m-season option{background:#23272e;color:#fff}
#modal-close{pointer-events:auto}
/* Phase 1: scrollbars live in css/tokens.css */
code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px}

/* ---- loading skeletons + spinner (replaces blank page) ---- */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid var(--gx-glass-line);border-radius:var(--gx-radius-card);min-height:1rem}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{display:block;height:.9rem;margin-top:.6rem}
.skeleton-line.short{width:55%}
.spinner{display:inline-block;width:1.1em;height:1.1em;flex:none;border-radius:9999px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:spin .8s linear infinite;vertical-align:-0.2em}
@keyframes spin{to{transform:rotate(360deg)}}
.inline-loader{display:flex;align-items:center;gap:.6rem;color:#a1a1aa;font-size:.9rem;padding:.75rem 0}
#hero.hero-loading #hero-img{opacity:.15;filter:blur(2px)}
#hero.hero-loading #hero-title{color:#d4d4d8}
#grid:empty{min-height:40vh}

/* Infinite-scroll sentinel (Movies + TV auto-load): quiet strip under the
 * grid. Hidden unless js/app.js arms it; the spinner only shows while the
 * next page is in flight. #list-sentinel.hidden must beat the flex rule. */
#list-sentinel{display:flex;align-items:center;justify-content:center;min-height:84px;padding:8px 0}
#list-sentinel.hidden{display:none}
#list-sentinel .spinner{display:none;width:1.3em;height:1.3em}
#list-sentinel.is-loading .spinner{display:inline-block}

/* ---- catalog grid (Aetho .catalog-grid / .search-results-grid port) ----
 * ID selectors outrank Tailwind's responsive column utilities on the same
 * element (#grid / #collection-more keep their classes as mobile fallback).
 * auto-fill keeps cards in the reference's ~160-200px band at any width;
 * the narrow override below restores the 2-column phone layout. */
#grid,
#collection-more{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:24px 20px;
}
@media (max-width:420px){
  #grid,
  #collection-more{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 14px;
  }
}
/* Rise-in cascade for grid cards (matches the shelf stagger in shelves.css) */
#grid .card,
#collection-more .card{animation:gx-rise-in .55s var(--gx-ease-spring) backwards}
#grid .card:nth-child(2),#collection-more .card:nth-child(2){animation-delay:40ms}
#grid .card:nth-child(3),#collection-more .card:nth-child(3){animation-delay:80ms}
#grid .card:nth-child(4),#collection-more .card:nth-child(4){animation-delay:120ms}
#grid .card:nth-child(5),#collection-more .card:nth-child(5){animation-delay:160ms}
#grid .card:nth-child(6),#collection-more .card:nth-child(6){animation-delay:200ms}
#grid .card:nth-child(7),#collection-more .card:nth-child(7){animation-delay:240ms}
#grid .card:nth-child(8),#collection-more .card:nth-child(8){animation-delay:280ms}
#grid .card:nth-child(n+9),#collection-more .card:nth-child(n+9){animation-delay:.3s}

/* ---- list header: frosted glass strip with a faint grid mesh ----
 * (Aetho .category-header-banner + .grid-mesh). Holds the page title and
 * filter pills; the mesh is masked so it only glows near the top edge. */
#list-head{
  position:relative;
  overflow:hidden;
  align-items:center;
  gap:.75rem 1rem;
  padding:.85rem 1.15rem;
  margin-bottom:1.1rem;
  background:var(--gx-glass-fill);
  border:1px solid var(--gx-glass-line);
  border-radius:var(--gx-radius-bar);
  backdrop-filter:var(--gx-blur-glass);
  -webkit-backdrop-filter:var(--gx-blur-glass);
  box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}
#list-head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(80% 50% at 50% 0,#000 60%,transparent);
  mask-image:radial-gradient(80% 50% at 50% 0,#000 60%,transparent);
}
#list-head>*{position:relative;z-index:1}

/* ---- pager: glass pill controls ---- */
#pager button{
  background:rgba(255,255,255,.07);
  border:1px solid var(--gx-glass-line);
  border-radius:999px;
  padding:.55rem 1.15rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--gx-text-dim);
  backdrop-filter:var(--gx-blur-glass);
  -webkit-backdrop-filter:var(--gx-blur-glass);
  transition:transform 250ms var(--gx-ease-spring),color var(--gx-transition),
    background var(--gx-transition),border-color var(--gx-transition);
}
#pager button:hover:not(:disabled){
  color:#fff;
  background:rgba(255,255,255,.16);
  border-color:var(--gx-glass-line-bright);
  transform:translateY(-2px);
}

/* ---- Collections dropdown / mega-menu (public navbar) ---- */
#collections-wrap{position:relative}
#collections-btn[aria-expanded="true"]{color:#fff}
#collections-btn[aria-expanded="true"] #collections-chevron{transform:rotate(180deg)}
.collections-menu{position:absolute;left:0;top:calc(100% + 10px);width:21rem;max-width:min(21rem,calc(100vw - 2rem));
  background:rgba(20,20,31,.97);
  border:1px solid rgba(255,255,255,.12);border-radius:1rem;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  padding:.65rem;z-index:50}
.collections-menu::before{content:"";position:absolute;top:-6px;left:2rem;width:10px;height:10px;transform:rotate(45deg);
  background:rgba(20,20,31,.97);border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
/* Invisible hover bridge over the button→panel gap: the cursor stays "inside"
/  the menu while travelling down, so the panel never flickers mid-selection. */
.collections-menu::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:transparent}
.collections-menu.hidden{display:none}
.collections-menu.open{animation:collections-pop .16s ease-out}
@keyframes collections-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.collections-menu.open{animation:none}}
.collections-menu-head{display:flex;align-items:center;justify-content:space-between;padding:.35rem .6rem .55rem}
.collections-menu-title{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a1a1aa}
.collections-menu-count{font-size:.68rem;font-weight:700;color:#fca5a5;background:rgba(220,38,38,.15);
  border:1px solid rgba(220,38,38,.35);border-radius:9999px;padding:.05rem .5rem}
.collections-search-wrap{padding:0 .25rem .5rem}
.collections-search-wrap input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:.6rem;padding:.45rem .7rem;font-size:.82rem;color:#fff;outline:none}
.collections-search-wrap input::placeholder{color:#71717a}
.collections-search-wrap input:focus{border-color:rgba(220,38,38,.6);box-shadow:0 0 0 2px rgba(220,38,38,.25)}
.collections-list{max-height:19rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;padding:.1rem}
.collections-group-label{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#71717a;padding:.5rem .6rem .2rem}
.collections-item{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:.7rem;
  border:1px solid transparent;text-decoration:none}
.collections-item:hover,.collections-item:focus-visible{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.1);outline:none}
.collections-item:focus-visible{box-shadow:0 0 0 2px rgba(220,38,38,.5)}
.collections-item-icon{flex:none;width:2rem;height:2rem;border-radius:.6rem;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;font-weight:800;color:#fecaca;background:linear-gradient(135deg,rgba(220,38,38,.35),rgba(220,38,38,.08));
  border:1px solid rgba(220,38,38,.3)}
.collections-item-body{min-width:0;flex:1}
.collections-item-title{display:block;font-size:.87rem;font-weight:700;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collections-item-desc{display:block;font-size:.72rem;color:#a1a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.collections-item-arrow{flex:none;color:#52525b;font-size:.85rem;transition:transform .15s ease,color .15s ease}
.collections-item:hover .collections-item-arrow{transform:translateX(2px);color:#fca5a5}
.collections-empty{padding:.9rem .6rem;font-size:.82rem;color:#71717a;text-align:center}
.collections-menu-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border-top:1px solid rgba(255,255,255,.08);margin-top:.5rem;padding:.6rem .6rem .25rem}
.collections-viewall{font-size:.82rem;font-weight:800;color:#fca5a5;text-decoration:none}
.collections-viewall:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.collections-esc-hint{font-size:.66rem;color:#52525b}
/* Mobile expandable (not a mega-menu): simple stacked list reusing the same item style */
#mobile-collections.hidden{display:none}
.mobile-collections-panel{background:rgba(20,20,31,.97);border:1px solid rgba(255,255,255,.1);
  border-radius:.9rem;padding:.5rem;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.mobile-collections-panel.open{animation:collections-pop .16s ease-out}
.mobile-collections-list{display:flex;flex-direction:column;gap:.15rem;max-height:16rem;overflow-y:auto}
.mobile-collections-list .collections-item{padding:.6rem}
.mobile-viewall{display:block;padding:.6rem .6rem .35rem}
#collections-btn-mobile[aria-expanded="true"]{color:#fff}
#collections-btn-mobile[aria-expanded="true"] svg{transform:rotate(180deg)}
/* ---- interaction protection: no text selection / long-press menus,
   except inside editable fields. Scrolling, video, and controls unaffected
   (no touch-action / pointer-events changes). ---- */
body{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#player,#player *,#modal,#modal *{-webkit-touch-callout:none}
#player{user-select:none;-webkit-user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-touch-callout:default;user-select:text;-webkit-user-select:text}

/* ---- brand wordmark: pearl-white "Grey" + shiny poppy-red "Box", with a glass gloss ----
   gradients are clipped to the glyphs; .gx-wordmark-text::after paints a single
   specular sweep that travels across the whole lockup every few seconds. */
.gx-wordmark{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
}
.gx-wordmark-text{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  background-image:linear-gradient(180deg,#ffffff 0%,#ffffff 40%,#e6edf7 52%,#ffffff 66%,#f4f8fd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gx-wordmark-accent{
  background-image:linear-gradient(180deg,#ffd7db 0%,#ff6b75 32%,#ff3d4a 52%,#ff8b93 68%,#ff4d57 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,95,105,.95)) drop-shadow(0 0 20px rgba(255,60,74,.6));
}
.gx-wordmark-text::after{
  content:'GreyBox';
  position:absolute;
  inset:0;
  /* guards against any inherited shadow riding along on the sweep layer */
  text-shadow:none;
  background-image:linear-gradient(102deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 60%);
  background-size:320% 100%;
  background-position:170% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  pointer-events:none;
  animation:gx-wordmark-flair 5.6s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes gx-wordmark-flair{
  0%{background-position:170% 0;opacity:0}
  6%{opacity:1}
  46%{background-position:-70% 0;opacity:1}
  54%,100%{background-position:-70% 0;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .gx-wordmark-text::after{animation:none;opacity:0}
}


/* ---- icon-only controls: My List plus / check (GreyboxComponents.setListState) ---- */
.gx-ico {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gx-ico { transition: none !important; }
}


/* ---- source picker (js/sports-player.js renders #player-sources) ----
   Session states are shown per provider: Checking / Ready / Loading /
   Playing / Unavailable / Failed. The bar is toggled by js/stream.js and is
   never visible for movie/TV sessions. */
#player-sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  color: var(--gx-text-dim);
}
.gxsrc-label {
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gx-text-faint);
}
.gxsrc-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.gxsrc-none { color: var(--gx-text-faint); font-size: .8rem; }
.gxsrc {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .3rem .66rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--gx-border);
  color: var(--gx-text-dim);
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--gx-transition), background var(--gx-transition), color var(--gx-transition);
}
.gxsrc:hover { border-color: var(--gx-border-strong); color: var(--gx-text); }
.gxsrc.is-on { border-color: var(--gx-accent-border); background: var(--gx-accent-soft); color: var(--gx-text); }
.gxsrc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gx-text-faint);
  flex: 0 0 auto;
}
.gxsrc-name { font-weight: 600; }
.gxsrc-state {
  font: 500 .64rem/1 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-text-faint);
}
.gxsrc.is-checking .gxsrc-dot { background: var(--gx-text-faint); animation: gxsrc-pulse 1s ease-in-out infinite; }
.gxsrc.is-ready .gxsrc-dot { background: #4ade80; }
.gxsrc.is-loading .gxsrc-dot { background: var(--gx-accent); animation: gxsrc-pulse .8s ease-in-out infinite; }
.gxsrc.is-playing .gxsrc-dot { background: #4ade80; }
.gxsrc.is-playing { border-color: rgba(74, 222, 128, .5); }
.gxsrc.is-unavailable .gxsrc-dot { background: #a1a1aa; }
.gxsrc.is-unavailable { opacity: .62; }
.gxsrc.is-unavailable .gxsrc-state { text-transform: none; }
.gxsrc.is-failed .gxsrc-dot { background: #f87171; }
.gxsrc.is-failed .gxsrc-state { color: #fca5a5; }
@keyframes gxsrc-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#player-sources.is-pulse { animation: gxsrc-bar 1.6s ease-in-out 1; }
@keyframes gxsrc-bar {
  0%, 100% { background: transparent; }
  40% { background: rgba(208, 162, 79, .16); }
}
.gxsrc-status { margin-left: auto; font-size: .76rem; color: var(--gx-text-faint); }
@media (max-width: 640px) {
  .gxsrc-status { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gxsrc.is-checking .gxsrc-dot,
  .gxsrc.is-loading .gxsrc-dot,
  #player-sources.is-pulse { animation: none; }
}

/* ---- in-player episode panel (TV sessions; js/app.js epPanel* + js/stream.js) ----
   67movies-style right slide-over inside #player: season picker + episode
   cards (still / title / 2-line overview / E# · NOW PLAYING / air date).
   The #player-eps header button toggles .is-open; stream.js hides both the
   button and the panel (.hidden) for non-TV sessions and on close. */
#player-epspanel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  z-index: 40;
  /* .975: nearly opaque like the reference — a lower alpha let bright
     player text (header, source chips, loading copy) ghost through the
     full-width mobile panel. */
  background: rgba(9, 9, 11, .975);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, .12);
  box-shadow: -28px 0 64px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
}
#player-epspanel.is-open {
  transform: none;
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
#player-epspanel.hidden { display: none; }

.gxeps-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px 20px;
}
.gxeps-bar-txt { flex: 1; min-width: 0; }
.gxeps-kicker {
  font: 700 .68rem/1.2 "DM Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gx-text-faint);
}
.gxeps-show {
  margin-top: 5px;
  font-size: 1.26rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gxeps-collapse {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--gx-border);
  color: var(--gx-text);
  cursor: pointer;
  transition: background var(--gx-transition), border-color var(--gx-transition);
}
.gxeps-collapse:hover { background: rgba(255, 255, 255, .16); }

.gxeps-seasonwrap { padding: 2px 20px 14px; }
.gxeps-season {
  -webkit-appearance: none;
  appearance: none;
  width: min(230px, 100%);
  padding: 11px 40px 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--gx-border-strong);
  background:
    rgba(255, 255, 255, .05)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 16px center;
  color: var(--gx-text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.gxeps-season option { background: #18181b; color: #f4f4f5; }
.gxeps-season:disabled { opacity: .5; cursor: default; }

.gxeps-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.gxeps-list::-webkit-scrollbar { width: 8px; }
.gxeps-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); border-radius: 99px; }
.gxeps-list::-webkit-scrollbar-track { background: transparent; }

.gxeps-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  color: inherit;
  cursor: pointer;
  transition: background var(--gx-transition), border-color var(--gx-transition);
}
.gxeps-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.gxeps-card.is-active { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.gxeps-card:focus-visible { outline: 2px solid var(--gx-accent-border); outline-offset: 2px; }
.gxeps-thumb {
  flex: none;
  width: 112px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  background: #22272e;
}
.gxeps-body { display: block; flex: 1; min-width: 0; }
.gxeps-name {
  display: block;
  font-size: .93rem;
  font-weight: 700;
  color: var(--gx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gxeps-ov {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: .77rem;
  line-height: 1.45;
  color: var(--gx-text-dim);
}
.gxeps-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--gx-text-faint);
}
.gxeps-num { font-weight: 700; color: var(--gx-text-dim); letter-spacing: .05em; }
.gxeps-now { font-weight: 800; color: var(--gx-text); letter-spacing: .06em; }
.gxeps-date { margin-left: auto; }
.gxeps-empty { padding: 16px 6px; color: var(--gx-text-faint); font-size: .85rem; }

@media (max-width: 560px) {
  #player-epspanel { width: 100%; border-left: none; }
  .gxeps-thumb { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  #player-epspanel, #player-epspanel.is-open { transition: none; }
}