/* VCC_CACHE_MANAGER_V1 */

body[data-page="cache"]{
  min-height:100vh;

  background:
    linear-gradient(
      90deg,
      rgba(6,10,16,.72) 0%,
      rgba(6,10,16,.46) 48%,
      rgba(6,10,16,.68) 100%
    ),
    url("../images/main-page-bg.png")
      center center / cover no-repeat fixed;
}


body[data-page="cache"] .cache-shell{
  width:min(
    1180px,
    calc(100% - 48px)
  );

  min-height:100vh;

  padding:
    28px 0 60px;
}


.cache-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}


.cache-main{
  width:min(1040px,100%);
  margin:72px auto 0;
}


.cache-heading{
  margin-bottom:28px;
}


.cache-kicker{
  margin-bottom:10px;

  color:#f0b84b;

  font-size:13px;
  line-height:1;

  font-weight:800;

  letter-spacing:.055em;
}


.cache-heading h1{
  margin:0;

  color:#f5f6f8;

  font-size:
    clamp(36px,5vw,54px);

  line-height:1;

  letter-spacing:-.035em;
}


.cache-heading p{
  margin:
    13px 0 0;

  color:
    rgba(181,193,207,.78);

  font-size:16px;
  line-height:1.45;
}


.cache-storage-card,
.cache-games-section{
  border:
    1px solid
    rgba(120,140,164,.30);

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      rgba(20,29,40,.86),
      rgba(12,19,28,.88)
    );

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 22px 60px
      rgba(0,0,0,.22);
}


.cache-storage-card{
  padding:24px;
}


.cache-storage-top,
.cache-games-head{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:20px;
}


.cache-section-title{
  color:#f4f6f8;

  font-size:20px;
  line-height:1.25;

  font-weight:750;
}


.cache-storage-value{
  margin-top:6px;

  color:
    rgba(185,197,210,.76);

  font-size:14px;
}


.cache-meter{
  width:100%;
  height:12px;

  margin-top:22px;

  overflow:hidden;

  border:
    1px solid
    rgba(113,132,155,.30);

  border-radius:999px;

  background:
    rgba(4,9,14,.72);
}


.cache-meter-fill{
  width:0%;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #d69b35,
      #f3c568
    );

  transition:
    width .25s ease;
}


.cache-storage-meta{
  display:flex;
  flex-wrap:wrap;

  gap:
    8px 24px;

  margin-top:13px;

  color:
    rgba(168,181,195,.70);

  font-size:13px;
}


.cache-info{
  display:flex;

  gap:14px;

  margin:18px 0 28px;

  padding:16px 18px;

  border:
    1px solid
    rgba(213,161,64,.22);

  border-radius:16px;

  background:
    rgba(42,32,16,.40);

  color:
    rgba(191,201,211,.78);

  font-size:13px;
  line-height:1.5;
}


.cache-info-mark{
  display:flex;

  align-items:center;
  justify-content:center;

  width:24px;
  height:24px;

  flex:
    0 0 24px;

  border:
    1px solid
    rgba(240,184,75,.48);

  border-radius:50%;

  color:#f0b84b;

  font-weight:800;
}


.cache-info b{
  display:block;

  margin-bottom:2px;

  color:#f1f3f5;
}


.cache-info span{
  display:block;
}


.cache-games-section{
  padding:24px;
}


.cache-list-summary{
  margin-top:5px;

  color:
    rgba(169,182,197,.70);

  font-size:13px;
}


.cache-status{
  min-height:20px;

  margin-top:15px;

  color:
    rgba(188,200,213,.78);

  font-size:13px;
}


.cache-list{
  display:flex;

  flex-direction:column;

  gap:10px;

  margin-top:10px;
}


.cache-row{
  display:grid;

  grid-template-columns:
    58px
    minmax(0,1fr)
    auto
    auto;

  align-items:center;

  gap:16px;

  min-height:82px;

  padding:
    11px 12px;

  border:
    1px solid
    rgba(104,124,148,.22);

  border-radius:16px;

  background:
    rgba(8,14,22,.62);
}


.cache-cover{
  width:58px;
  height:58px;

  overflow:hidden;

  border:
    1px solid
    rgba(116,135,157,.24);

  border-radius:10px;

  background:#070b10;
}


.cache-cover img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.cache-game-title{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  color:#f3f5f7;

  font-size:16px;
  line-height:1.25;

  font-weight:720;
}


.cache-party-badge{
  display:inline-flex;

  align-items:center;

  min-height:20px;

  padding:
    2px 7px;

  border:
    1px solid
    rgba(240,184,75,.32);

  border-radius:999px;

  color:#f0b84b;

  font-size:10px;

  font-weight:800;

  letter-spacing:.045em;
}


.cache-game-meta{
  margin-top:6px;

  color:
    rgba(163,176,191,.68);

  font-size:12px;
  line-height:1.4;
}


.cache-size{
  min-width:92px;

  color:
    rgba(221,228,234,.84);

  font-size:14px;

  font-variant-numeric:
    tabular-nums;

  text-align:right;
}


.cache-delete{
  min-width:90px;
}


.cache-delete:disabled{
  opacity:.38;
  cursor:default;
}


.cache-loading,
.cache-empty{
  padding:30px;

  border:
    1px dashed
    rgba(112,131,154,.24);

  border-radius:15px;

  color:
    rgba(164,177,192,.68);

  text-align:center;
}


.cache-error{
  color:
    rgba(255,155,166,.90);
}


.cache-busy{
  pointer-events:none;
  opacity:.62;
}


@media(max-width:760px){

  body[data-page="cache"]{
    background-position:
      center top;

    background-attachment:
      scroll;
  }

  .cache-main{
    margin-top:46px;
  }

  .cache-row{
    grid-template-columns:
      52px
      minmax(0,1fr)
      auto;
  }

  .cache-cover{
    width:52px;
    height:52px;
  }

  .cache-size{
    grid-column:2;
    grid-row:2;

    min-width:0;

    text-align:left;
  }

  .cache-delete{
    grid-column:3;
    grid-row:1 / span 2;
  }

  .cache-games-head{
    align-items:flex-start;
  }
}


@media(max-width:560px){

  body[data-page="cache"] .cache-shell{
    width:
      calc(100% - 24px);

    padding-top:18px;
  }

  .cache-main{
    margin-top:36px;
  }

  .cache-storage-top,
  .cache-games-head{
    align-items:stretch;

    flex-direction:column;
  }

  .cache-refresh-btn,
  .cache-clear-all{
    width:100%;
  }

  .cache-row{
    grid-template-columns:
      48px
      minmax(0,1fr);

    gap:12px;
  }

  .cache-cover{
    width:48px;
    height:48px;
  }

  .cache-size{
    grid-column:2;
    grid-row:auto;
  }

  .cache-delete{
    grid-column:1 / -1;
    grid-row:auto;

    width:100%;
  }
}


/* VCC_CACHE_PRELOAD_V2 */

.cache-row{
  grid-template-columns:
    58px
    minmax(0,1fr)
    auto
    auto;
}


.cache-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}


.cache-download,
.cache-delete{
  min-width:96px;
  white-space:nowrap;
}


.cache-download:disabled,
.cache-delete:disabled{
  opacity:.38;
  cursor:default;
  transform:none;
}


.cache-progress{
  width:min(430px,100%);
  margin-top:10px;
}


.cache-progress-track{
  position:relative;
  width:100%;
  height:7px;
  overflow:hidden;

  border:
    1px solid
    rgba(113,132,155,.28);

  border-radius:999px;

  background:
    rgba(4,9,14,.78);
}


.cache-progress-fill{
  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #d69b35,
      #f3c568
    );

  transition:
    width .15s linear;
}


.cache-progress-text{
  margin-top:5px;

  color:
    rgba(174,188,202,.72);

  font-size:11px;

  font-variant-numeric:
    tabular-nums;
}


.cache-progress.is-indeterminate
.cache-progress-fill{
  animation:
    vcc-cache-preload-slide
    1.1s ease-in-out infinite;
}


@keyframes vcc-cache-preload-slide{
  from{
    transform:translateX(-110%);
  }

  to{
    transform:translateX(310%);
  }
}


/*
 * Во время загрузки страница не затемняется:
 * блокируются только управляющие кнопки.
 */
.cache-busy{
  pointer-events:auto;
  opacity:1;
}


@media(max-width:760px){

  .cache-actions{
    grid-column:3;
    grid-row:1 / span 2;

    flex-direction:column;
  }

  .cache-actions
  .cache-download,
  .cache-actions
  .cache-delete{
    width:100%;
  }
}


@media(max-width:560px){

  .cache-actions{
    grid-column:1 / -1;
    grid-row:auto;

    width:100%;

    flex-direction:row;
  }

  .cache-actions
  .cache-download,
  .cache-actions
  .cache-delete{
    flex:1 1 0;
    min-width:0;
  }
}