.triples-game{
  width:100%;
  margin-top:-12px;
}

.triples-panel{
  max-width:760px;
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(37,50,57,.12);
  border-radius:22px;
  background:#fff;
}

.triples-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  opacity:.58;
  margin-bottom:5px;
}

.triples-lobby{
  text-align:center;
}

.triples-lobby h2,
.triples-results h2{
  margin:4px 0 8px;
}

.triples-lobby p{
  margin:0 auto 12px;
  max-width:520px;
  opacity:.72;
}

.triples-lobby-count{
  font-size:32px;
  line-height:1;
  font-weight:900;
  margin:14px 0;
}

.triples-lobby-players{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
  margin:0 0 18px;
}

.triples-lobby-players span{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(37,50,57,.07);
  font-weight:700;
}


/* POZIOMY */

.triples-difficulty{
  margin:16px 0 18px;
}

.triples-difficulty-title{
  margin-bottom:9px;
  font-size:13px;
  font-weight:800;
}

.triples-level-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.triples-level-btn{
  appearance:none;
  border:2px solid rgba(37,50,57,.1);
  border-radius:14px;
  background:#fff;
  padding:10px 6px;
  min-height:78px;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.triples-level-btn strong{
  font-size:13px;
}

.triples-level-btn span{
  font-size:11px;
  opacity:.7;
}

.triples-level-btn small{
  font-size:10px;
  opacity:.52;
}

.triples-level-btn.active{
  border-color:#253239;
  background:rgba(37,50,57,.06);
}

.triples-level-btn:disabled{
  cursor:default;
}

.triples-selected-level{
  margin:-5px 0 15px;
  font-size:13px;
}

.triples-wait-host,
.triples-note{
  margin-top:11px;
  font-size:12px;
  opacity:.66;
}


/* COUNTDOWN */

.triples-countdown-panel{
  text-align:center;
}

.triples-countdown-level{
  font-size:13px;
  font-weight:800;
  opacity:.65;
}

.triples-countdown{
  font-size:72px;
  font-weight:1000;
  line-height:1;
  margin:16px 0 10px;
}


/* GRA */

.triples-play-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:12px;
  align-items:start;
}

.triples-main,
.triples-rivals{
  border:1px solid rgba(37,50,57,.12);
  border-radius:18px;
  background:#fff;
}

.triples-main{
  padding:11px;
  min-width:0;
}

.triples-rivals{
  padding:12px;
}

.triples-rivals h3{
  margin:0 0 10px;
  font-size:14px;
}

.triples-game-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.triples-game-head strong{
  font-size:13px;
}

.triples-own-left{
  text-align:center;
  font-size:23px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.triples-own-left small{
  display:block;
  margin-top:3px;
  font-size:9px;
  font-weight:700;
  opacity:.55;
}


/* PLANSZA */

.triples-board-wrap{
  position:relative;
  width:100%;
  transform-origin:center center;
}

.triples-board{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:4px;
  align-items:end;
  width:100%;
}

.triples-column{
  border:0;
  padding:3px 2px 5px;
  min-width:0;
  min-height:calc(
    var(--triples-rows,9) * 28px + 32px
  );
  border-radius:12px;
  background:rgba(37,50,57,.035);
  cursor:pointer;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
}

.triples-column:disabled{
  cursor:default;
  opacity:.5;
}

.triples-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:flex-end;
  flex:1;
}

.triples-block{
  display:block;
  width:100%;
  aspect-ratio:1 / .68;
  min-height:15px;
  border-radius:6px;
  border:2px solid rgba(0,0,0,.09);

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

.triples-block.is-playable{
  outline:2px solid rgba(37,50,57,.5);
  outline-offset:1px;
}

.triples-red{
  background:#e95a5a;
}

.triples-blue{
  background:#4c86df;
}

.triples-green{
  background:#55ad71;
}

.triples-yellow{
  background:#efc84d;
}

.triples-purple{
  background:#9669cd;
}

.triples-arrow{
  display:block;
  margin-top:5px;
  text-align:center;
  font-size:13px;
  opacity:.6;
}


/* BŁĄD */

@keyframes triplesShake{
  0%{
    transform:translateX(0);
  }

  12%{
    transform:translateX(-9px) rotate(-.5deg);
  }

  24%{
    transform:translateX(9px) rotate(.5deg);
  }

  36%{
    transform:translateX(-7px);
  }

  48%{
    transform:translateX(7px);
  }

  60%{
    transform:translateX(-5px);
  }

  72%{
    transform:translateX(5px);
  }

  84%{
    transform:translateX(-2px);
  }

  100%{
    transform:translateX(0);
  }
}

.triples-board-wrap.triples-shake{
  animation:
    triplesShake
    .62s
    ease-in-out;
}

.triples-error-overlay{
  position:absolute;
  inset:0;
  z-index:20;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
    rgba(20,24,27,.76);

  color:#fff;

  text-align:center;

  pointer-events:none;

  opacity:1;

  transition:
    opacity .18s ease;
}

.triples-error-overlay strong{
  font-size:clamp(36px,10vw,64px);
  line-height:1;
  font-weight:1000;
  letter-spacing:.03em;
}

.triples-error-overlay span{
  margin-top:8px;
  font-size:clamp(15px,4vw,22px);
  font-weight:800;
  letter-spacing:.08em;
}

.triples-error-overlay.hide{
  opacity:0;
}


/* POSTĘP */

.triples-progress-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.triples-progress-row{
  padding:7px 8px;
  border-radius:11px;
  background:rgba(37,50,57,.04);
}

.triples-progress-row.is-me{
  box-shadow:
    inset 0 0 0 2px
    rgba(37,50,57,.13);
}

.triples-progress-top{
  display:flex;
  justify-content:space-between;
  gap:7px;
  font-size:11px;
  margin-bottom:5px;
}

.triples-progress-top strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.triples-left,
.triples-place{
  white-space:nowrap;
  opacity:.7;
}

.triples-progress-track{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(37,50,57,.1);
}

.triples-progress-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#253239;

  transition:
    width .18s ease;
}

.triples-restart-btn{
  width:100%;
  margin-top:9px;
}


/* KONIEC */

.triples-finished-card{
  min-height:300px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
  gap:8px;
}

.triples-finish-place{
  font-size:29px;
  font-weight:1000;
}

.triples-finished-card strong{
  font-size:36px;
}

.triples-finished-card span{
  max-width:340px;
  opacity:.65;
  font-size:12px;
}

.triples-results{
  text-align:center;
}

.triples-result-list{
  display:flex;
  flex-direction:column;
  gap:7px;

  margin:16px 0;
  text-align:left;
}

.triples-result-row{
  display:grid;
  grid-template-columns:
    40px minmax(0,1fr) auto;

  align-items:center;

  gap:8px;

  padding:11px;

  border-radius:11px;

  background:
    rgba(37,50,57,.05);
}

.triples-result-row.is-me{
  box-shadow:
    inset 0 0 0 2px
    rgba(37,50,57,.18);
}

.triples-result-place{
  font-size:17px;
  font-weight:900;
}

.triples-loading{
  min-height:280px;

  display:grid;
  place-items:center;

  opacity:.6;
}


/* TELEFON */

@media(max-width:700px){

  .triples-game{
    margin-top:-18px;
  }

  .triples-play-layout{
    grid-template-columns:1fr;
    gap:9px;
  }

  /*
   * Plansza jest pierwsza.
   * Postęp graczy dopiero pod nią.
   */
  .triples-main{
    order:1;
  }

  .triples-rivals{
    order:2;
  }

  .triples-main{
    padding:8px;
  }

  .triples-rivals{
    padding:9px;
  }

  .triples-board{
    gap:3px;
  }

  .triples-column{
    min-height:calc(
      var(--triples-rows,9) * 23px + 27px
    );

    padding:
      2px 1px 4px;
  }

  .triples-stack{
    gap:2px;
  }

  .triples-block{
    border-radius:5px;
    border-width:1px;
  }

  .triples-progress-list{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


@media(max-width:420px){

  .triples-game{
    margin-top:-22px;
  }

  .triples-panel{
    padding:13px;
  }

  .triples-game-head{
    align-items:flex-start;
    margin-bottom:6px;
  }

  .triples-game-head strong{
    font-size:11px;
  }

  .triples-own-left{
    font-size:20px;
  }

  .triples-level-grid{
    gap:5px;
  }

  .triples-level-btn{
    min-height:72px;
    padding:8px 3px;
  }

  .triples-level-btn strong{
    font-size:11px;
  }

  .triples-level-btn span{
    font-size:9px;
  }

  .triples-level-btn small{
    font-size:9px;
  }

  .triples-progress-list{
    grid-template-columns:1fr;
  }
}


@media(
  prefers-reduced-motion:
  reduce
){
  .triples-board-wrap.triples-shake{
    animation:none;
  }

  .triples-error-overlay{
    transition:none;
  }
}


/* ==========================================================
   AKTYWNY KOLOR
   ========================================================== */

.triples-active-color{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:4px;
}

.triples-active-color-box{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:8px;
  border:2px solid rgba(0,0,0,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 2px 7px rgba(0,0,0,.08);
}

.triples-active-color-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.triples-active-color-text strong{
  font-size:13px;
  line-height:1.1;
}

.triples-active-color-text small{
  margin-top:2px;
  font-size:10px;
  opacity:.58;
}

.triples-indicator-none{
  background:
    linear-gradient(
      135deg,
      #e95a5a 0 20%,
      #4c86df 20% 40%,
      #55ad71 40% 60%,
      #efc84d 60% 80%,
      #9669cd 80% 100%
    );
}

.triples-indicator-red{
  background:#e95a5a;
}

.triples-indicator-blue{
  background:#4c86df;
}

.triples-indicator-green{
  background:#55ad71;
}

.triples-indicator-yellow{
  background:#efc84d;
}

.triples-indicator-purple{
  background:#9669cd;
}


@media(max-width:420px){
  .triples-active-color-box{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .triples-active-color-text strong{
    font-size:12px;
  }
}