/* /css/tetris.css */

.tetris-wrap{ display:flex; justify-content:center; }

.tetris-card{
  width: min(980px, 100%);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
}

.tetris-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background: linear-gradient(180deg, rgba(15,17,21,.04), rgba(15,17,21,0));
}

.tetris-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tetris-sub{ color:rgba(0,0,0,.55); font-size:.92rem; }
.tetris-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* MAIN */
.tetris-layout{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:flex-start;
  padding:14px;
}

.tetris-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Next above field */
.tetris-next-top{
  width:100%;
  max-width: 360px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.tetris-next-label{ font-weight:800; letter-spacing:.2px; }

#tNext{
  width:86px;
  height:86px;
  border-radius:12px;
  background: rgba(15,17,21,.06);
  border:1px solid rgba(0,0,0,.06);
}

.tetris-stage{ position:relative; display:flex; justify-content:center; width:100%; }

#tCanvas{
  width:100%;
  max-width: 360px;
  aspect-ratio: 1 / 2;
  height:auto;
  background:#0f1115;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.tetris-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}

.tetris-overlay-inner{
  background: rgba(15,17,21,.94);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 16px;
  width:min(92%, 360px);
  text-align:center;
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
}
.tetris-overlay-title{ font-weight:800; font-size:1.15rem; }
.tetris-overlay-sub{ opacity:.85; font-size:.95rem; margin-top:6px; }

/* Right side */
.tetris-right{
  width: 340px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tetris-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.tetris-panel-accent{
  background: linear-gradient(180deg, rgba(76,110,245,.06), rgba(0,0,0,0));
  border-color: rgba(76,110,245,.18);
}

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

.tetris-panel-title{ font-weight:800; }

.tetris-best{ display:flex; align-items:baseline; gap:6px; }

.tetris-stats{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}

.tetris-stat{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.tetris-stat .k{ font-size:.78rem; color:rgba(0,0,0,.55); }
.tetris-stat .v{ font-size:1.25rem; font-weight:900; letter-spacing:.2px; }

/* Desktop controls panel */
.tetris-controls-desktop{ display:block; }

/* Touch buttons base */
.tbtn{
  border:1px solid rgba(0,0,0,.12);
  background:#f7f7f9;
  border-radius:12px;
  padding:10px 8px;
  font-weight:900;
  font-size:1rem;
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.tbtn:active{ transform: translateY(1px); }

/* ===== MOBILE MODE ===== */
.tetris-mobile-controls{
  display:none;
}

/* when screen is small, reduce field height and make sticky controls */
@media (max-width: 768px){
  .tetris-layout{
    flex-direction:column;
    align-items:center;
    padding-bottom: 92px; /* reserve space for sticky bar */
  }

  .tetris-right{
    width: min(520px, 100%);
  }

  .tetris-next-top{
    max-width: min(420px, 100%);
  }

  /* make board not consume whole screen */
  #tCanvas{
    max-width: min(420px, 100%);
    max-height: 62vh;          /* ключ: поле не займає весь екран */
    aspect-ratio: auto;
    height: 62vh;
  }

  /* hide desktop controls block on mobile (we use sticky bar) */
  .tetris-controls-desktop{
    display:none;
  }

  .tetris-mobile-controls{
    display:block;
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 10px 10px env(safe-area-inset-bottom);
  }

  .tetris-mobile-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    max-width: 980px;
    margin: 0 auto;
  }

  .tbtn-lg{
    padding: 14px 10px;
    font-size: 1.05rem;
    border-radius: 14px;
    min-width: 46px;
  }
}