/* GESTA 完形知覺測驗（蓋房子） */

/* 直向：上方範本＋題數＋計時條，中間圖案，下方按鈕 */
.gesta {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "tpl info"
    "bar bar"
    "board board"
    "actions actions";
  gap: 8px 12px;
  padding: 10px calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));
}

.gesta-board {
  grid-area: board;
  position: relative;
  min-height: 0;
  background: #fff;
  border: 1px solid #C9C9C4;
  border-radius: 4px;
  overflow: hidden;
}
/* 直向：圖案格子接近正方形，白框貼齊圖案、在剩餘空間垂直置中，不留大片上下空白 */
.gesta:not(.gesta--wide) .gesta-board {
  align-self: center;
  aspect-ratio: 16 / 14;
  max-height: 100%;
}

.gesta-tpl {
  grid-area: tpl;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--vts-screen);
  border: 1px solid #C9C9C4;
  border-radius: 4px;
  padding: 4px 8px 6px;
}
.gesta-cap { font-size: .7rem; color: #666; letter-spacing: .06em; white-space: nowrap; }
.gesta-tpl-canvas { position: relative; width: 60px; height: 58px; }

.gesta-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.gesta-count { font-weight: 700; font-size: 1.05rem; }
.gesta-secs { font-variant-numeric: tabular-nums; color: #444; font-size: .9rem; }
.gesta-picked { color: #666; font-size: .82rem; }

.gesta-bar {
  grid-area: bar;
  height: 6px;
  border-radius: 99px;
  background: #CFCFCA;
  overflow: hidden;
}
.gesta-bar-fill {
  height: 100%;
  background: #1D3B5A;
  transform-origin: left center;
  transition: background-color .3s;
}
.gesta-bar.is-low .gesta-bar-fill { background: #C43B32; }

.gesta-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
}
.gesta-btn { width: 100%; min-height: 50px; padding-inline: .5em; background: #fff; }
.session .gesta-ok { background: #1D3B5A; }
.gesta-ok.is-ready { animation: gestaReady 1.2s ease-in-out infinite; }

/* 橫向（手機橫放、平板橫放）：左邊圖案，右邊側欄 */
.gesta.gesta--wide {
  grid-template-columns: 1fr clamp(150px, 22%, 240px);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "board tpl"
    "board info"
    "board bar"
    "board actions";
}
.gesta--wide .gesta-tpl { padding: 8px; }
.gesta--wide .gesta-tpl-canvas { width: 100%; height: clamp(60px, 22vh, 150px); }
.gesta--wide .gesta-actions {
  align-self: end;
  grid-template-columns: 1fr 1fr;
}
.gesta--wide .gesta-ok { grid-column: 1 / -1; order: -1; }

/* 橫向且很矮（手機橫放）：側欄更緊湊 */
@media (max-height: 460px) {
  .gesta { padding-top: 6px; gap: 6px 10px; }
  .gesta--wide .gesta-tpl-canvas { height: 64px; }
  .gesta--wide .gesta-btn { min-height: 44px; }
  .gesta--wide .gesta-count { font-size: .95rem; }
}

@keyframes gestaReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 59, 90, .45); }
  50% { box-shadow: 0 0 0 6px rgba(29, 59, 90, 0); }
}