/* public/clipsPage.css */

.modeCards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px){
  .modeCards{ grid-template-columns: 1fr; }
}

.modeCard{
  position: relative;
  border-radius: calc(var(--r) - 2px);
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px;
  min-height: 140px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.modeCard:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.modeCard.is-active{ border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.04); }

.modeCard__title{
  font-weight: 980;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(238,240,255,.88);
}
.modeCard__meta{
  margin-top: 8px;
  color: rgba(238,240,255,.62);
  font-size: 12.5px;
  line-height: 1.35;
}

.galleryTop{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.galleryTitle{
  font-weight: 950;
  letter-spacing: -.2px;
  font-size: 16px;
}

.galleryGameGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .galleryGameGrid{ grid-template-columns: 1fr; }
}

.galleryGameTile{
  position: relative;
  border-radius: calc(var(--r) - 2px);
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.galleryGameTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.galleryGameTile__cover{
  position:absolute; inset:0;
  background: rgba(0,0,0,.28);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.galleryGameTile__shade{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 40% 20%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.82) 100%);
}
.galleryGameTile__label{
  position:absolute; left: 14px; top: 14px;
  font-weight: 950;
  font-size: 14px;
  color: rgba(238,240,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.70);
}
.galleryGameTile__meta{
  position:absolute; left: 14px; bottom: 12px;
  font-size: 12px;
  color: rgba(238,240,255,.70);
  text-shadow: 0 10px 30px rgba(0,0,0,.70);
}

.galleryMediaGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .galleryMediaGrid{ grid-template-columns: 1fr; }
}

.mediaTile{
  position: relative;
  border-radius: calc(var(--r) - 2px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  aspect-ratio: 16 / 9;
  cursor:pointer;
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.mediaTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.mediaTile__thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  background: rgba(0,0,0,.35);
}
.mediaTile__tag{
  position:absolute; left: 10px; top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(238,240,255,.86);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mediaTile__title{
  position:absolute; left: 12px; right: 12px; bottom: 10px;
  color: rgba(238,240,255,.90);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 10px 30px rgba(0,0,0,.70);
}

.mediaModal__body{
  margin-top: 12px;
}
.mediaModal__body img,
.mediaModal__body video{
  width: 100%;
  max-height: min(70vh, 620px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  display:block;
}

/* Bigger fullscreen media modal */
.modal--media .modal__panel{
  top: 8%;
  width: min(980px, calc(100vw - 24px));
  padding: 16px;
}
@media (max-width: 720px){
  .modal--media .modal__panel{ top: 6%; width: calc(100vw - 16px); }
}
.modal--media .mediaModal__body img,
.modal--media .mediaModal__body video{
  max-height: min(78vh, 760px);
}

.gameGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px){
  .gameGrid{ grid-template-columns: 1fr; }
}

.gameTile{
  position: relative;
  border-radius: calc(var(--r) - 2px);
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.gameTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.gameTile.is-active{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
}

.gameTile__inner{
  position:absolute;
  inset: 0;
  padding: 14px;
  display:flex;
  flex-direction: column;
}

.gameTile__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gameTile__title{
  font-weight: 950;
  letter-spacing: -.2px;
  font-size: 18px;
}

.gameTile__select{
  min-width: 120px;
  max-width: 54%;
}

.gameTile__player{
  margin-top: 10px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.gameTile__video{
  width: 100%;
  aspect-ratio: 16 / 9;
  display:block;
  background: rgba(0,0,0,.35);
}

.select.select--sm{
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 800;
}

.gameTile__bottom{
  margin-top: auto;
  display:flex;
  align-items:flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.gameTile__list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 7px;
  overflow: auto;
}

/* More compact rows inside the tiles */
.clipRow.clipRow--sm{
  padding: 4px 6px;
  border-radius: 9px;
  gap: 8px;
}

/* If you want the big "box" look gone: flatten rows inside tiles */
.gameTile__list .clipRow.clipRow--sm{
  border: 0;
  background: transparent;
  padding: 2px 0;
  border-radius: 0;
  transform: none;
}
.gameTile__list .clipRow.clipRow--sm:hover{
  background: transparent;
  border-color: transparent;
  transform: none;
}
.clipRow.clipRow--sm .clipRow__title{
  font-size: 9.2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.clipRow.clipRow--sm .clipRow__meta{
  font-size: 9.2px;
  line-height: 1.2;
  flex: 0 0 auto;
}

/* No outline/highlight for active clip inside tiles */
.gameTile__list .clipRow.is-active{
  border-color: transparent;
  background: transparent;
}

.gameTile__empty{
  color: rgba(238,240,255,.62);
  font-size: 12.5px;
  line-height: 1.4;
}

.gameTile__count{
  color: rgba(238,240,255,.70);
  font-size: 12.5px;
}

.gameTile__btn{
  padding: 10px 14px;
  font-size: 13px;
}