/* ===== Summoner Guess (BETA) ===== */

.gguess-wrap{
  padding-bottom: 128px;
  padding-top: 128px;
}

.gguess-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 16px;
  margin-bottom: 12px;

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

.gguess-hero__left{ min-width:0; }
.gguess-hero__right{ display:flex; align-items:center; gap:10px; }

.gguess-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 1px solid rgba(147,197,253,.30);
  background: rgba(147,197,253,.10);
  color: rgba(232,238,252,.92);
  margin-bottom: 10px;
}

.gguess-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
}

.gguess-sub{
  margin: 6px 0 0;
  opacity: .85;
}

/* ===== GGUESS BUTTON ===== */
.gguess-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 16px;
  border-radius: 14px;

  font-weight: 900;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  color: rgba(232,238,252,.95);

  background: linear-gradient(
    180deg,
    rgba(147,197,253,.28),
    rgba(59,130,246,.22)
  );

  border: 1px solid rgba(147,197,253,.45);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 18px rgba(59,130,246,.18);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease,
    background .12s ease;
}

/* Hover */
.gguess-btn:hover{
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 26px rgba(59,130,246,.28);
}

.gguess-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.25),
    0 4px 10px rgba(59,130,246,.20);
}

.gguess-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.gguess-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
}


.gguess-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin-bottom: 12px;
}

.gguess-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  border-radius: 16px;
}

.gguess-search{
  position: relative;
  margin-top: 8px;
}

.gguess-input{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(232,238,252,.92);
  outline: none;
}

.gguess-input::placeholder{ color: rgba(232,238,252,.45); }

.gguess-input:focus{
  border-color: rgba(147,197,253,.35);
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

.gguess-dd{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 12, 24, .90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;

  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.gg-dd__item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;

  background: transparent;
  border: 0;
  cursor: pointer;

  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  color: rgba(232,238,252,.92);
}

.gg-dd__item:last-child{ border-bottom: none; }

.gg-dd__item:hover{
  background: rgba(147,197,253,.10);
}

.gg-dd__img{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  flex-shrink: 0;
}

.gg-dd__name{
  font-weight: 900;
  letter-spacing: .1px;
}

.gguess-status{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.gguess-status__line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.gguess-win{
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
  padding: 12px;
}

.gguess-win__top{
  display:flex;
  align-items:center;
  gap: 10px;
}

.gguess-trophy{
  font-size: 22px;
}

.gguess-win__title{
  font-weight: 900;
  margin-bottom: 2px;
}

.gguess-legal{
  opacity: .70;
}

.gguess-table-wrap{
  margin-top: 10px;
}

.gguess-empty{
  opacity: .75;
  padding: 8px 0;
}

.gguess-table{
  overflow-x: auto;
  padding-bottom: 6px;
}

.gguess-head{
  min-width: 860px;
  display:grid;
  grid-template-columns: 220px repeat(7, 1fr);
  gap: 8px;
  padding: 8px 6px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 11px;
  color: rgba(232,238,252,.60);
}

.gguess-body{
  min-width: 860px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 8px 6px;
}

.gg-row{
  display:grid;
  grid-template-columns: 220px repeat(7, 1fr);
  gap: 8px;
  align-items: stretch;
}

.gg-champ{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  min-width:0;
}

.gg-champ__img{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  flex-shrink:0;
}

.gg-champ__name{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gg-cell{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  background: rgba(0,0,0,.16);
}

.gg-cell__inner{
  height: 62px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
  text-align:center;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,.95);
}

.gg-cell--ok .gg-cell__inner{
  background: rgba(34,197,94,.55);
  border: 1px solid rgba(34,197,94,.30);
}

.gg-cell--mid .gg-cell__inner{
  background: rgba(249,115,22,.50);
  border: 1px solid rgba(249,115,22,.25);
}

.gg-cell--no .gg-cell__inner{
  background: rgba(239,68,68,.50);
  border: 1px solid rgba(239,68,68,.25);
}

.gg-year{
  display:inline-block;
  margin-left: 8px;
  font-size: 14px;
  opacity: .95;
}

/* Responsive */
@media (max-width: 980px){
  .gguess-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .gguess-hero{
    flex-direction: column;
    align-items: stretch;
  }
  .gguess-hero__right{
    justify-content: flex-end;
  }
  .gguess-title{ font-size: 22px; }
  .gguess-sub{ font-size: 13px; }
}

.gguess-grid { 
  position: relative; 
}

.gguess-grid > .gguess-card:first-child{
  position: relative;
  z-index: 200;
}

.gguess-search{
  position: relative;
  z-index: 210;
}

.gguess-dd{
  z-index: 999;
}