/* PST 飛行員空間測驗（飛機三軸） */

.pst { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pst-views { flex: 1; min-height: 0; position: relative; overflow: hidden; }

/* 下半部：左 = 三軸作答圖、右 = 航向圓盤 + 確定 */
.pst-panel {
  flex: none;
  border-top: 1px solid #D0D0CB;
  padding: 4px calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pst-answer {
  position: relative;
  height: clamp(200px, 31vh, 300px);
  min-width: 0;
  display: grid;
  place-items: center;
}
.pst-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pst-dial { display: none; min-height: 0; }
.pst-dial-svg { display: block; width: 100%; height: 100%; }
.pst-dial-num { font: 600 13px ui-monospace, "SF Mono", Consolas, monospace; fill: #2A2A27; }

.pst-actions { display: flex; }
.pst-confirm { flex: 1; min-height: 48px; border-radius: 10px; }

/* ---------- 三軸作答圖 ---------- */

.pst-fig { position: relative; width: 100%; height: 100%; --pst-btn: 44px; }
.pst-fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.pst-fig-axis { stroke: #6F6F6A; stroke-width: 1.4; }
.pst-fig-tag { font: 700 12px ui-monospace, "SF Mono", Consolas, monospace; fill: #5A5A56; letter-spacing: .04em; }
.pst-fig-plane { fill: #141414; stroke: #141414; stroke-width: 1; stroke-linejoin: round; }
.pst-fig-arrow { fill: #FFFFFF; stroke: #1B1B1B; stroke-width: 1.6; stroke-linejoin: round; transition: fill .12s; }
.pst-fig-arrow.is-on { fill: #1D3B5A; }
.pst-fig-arrow.is-truth { fill: #1E8A4C; }
.pst-fig-arrow.is-wrong { fill: #C43B32; }

.pst-dir {
  appearance: none;
  position: absolute;
  width: var(--pst-btn);
  height: var(--pst-btn);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid #6F6F6A;
  border-radius: 4px;
  background: linear-gradient(#F2F2EF, #D6D6D1);
  box-shadow: inset 1px 1px 0 #fff, 1px 2px 0 rgba(0, 0, 0, .18);
  color: #2A2A27;
  font: 700 calc(var(--pst-btn) * .27)/1 -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pst-dir span { pointer-events: none; }
/* 方塊本身跟著圖縮小，觸控範圍另外用透明區塊撐到至少 40px，手指才按得到 */
.pst-dir::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 40px);
  height: max(100%, 40px);
  transform: translate(-50%, -50%);
}
.pst-dir:active { transform: translate(-50%, -50%) scale(.95); }
.pst-dir:focus-visible { outline: 3px solid #2D6CDF; outline-offset: 2px; }
.pst-dir[aria-pressed="true"] { background: #1D3B5A; border-color: #1D3B5A; color: #fff; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.pst-dir.is-truth { box-shadow: 0 0 0 3px #1E8A4C; border-color: #1E8A4C; }
.pst-dir.is-truth:not([aria-pressed="true"]) { background: #DFF2E6; color: #145C33; }
.pst-dir.is-wrong { background: #C43B32; border-color: #C43B32; color: #fff; }
.pst-fig.is-locked .pst-dir { pointer-events: none; }

/* 說明頁的作答圖展示 */
.pst-intro-answer { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 8px; padding: 8px 12px; }
.pst-intro-answer .pst-answer { flex: 1.7; height: auto; }
.pst-intro-answer .pst-dial { display: block; flex: 1; padding: 6% 0; }

/* 平板（寬畫面）：下半部左右分，右邊有航向圓盤 */
@media (min-width: 700px) and (min-height: 621px) {
  .pst-panel {
    flex-direction: row;
    align-items: stretch;
    height: clamp(260px, 46%, 440px);
    gap: 16px;
    padding-top: 8px;
    padding-bottom: calc(12px + var(--safe-bottom));
  }
  .pst-answer { flex: 1.5; height: auto; }
  .pst-side { flex: 1; max-width: 340px; }
  .pst-dial { display: block; flex: 1; padding: 4px 0; }
  .pst-confirm { min-height: 52px; }
}

/* 平板直放：圖上下有空，作答區再高一點 */
@media (min-width: 700px) and (min-height: 621px) and (orientation: portrait) {
  .pst-panel { height: clamp(260px, 52%, 540px); }
}

/* 橫向且高度不足（手機橫放）：作答圖移到右側，圓盤省略 */
@media (orientation: landscape) and (max-height: 620px) {
  .pst { flex-direction: row; }
  .pst-panel {
    width: min(42%, 330px);
    border-top: 0;
    border-left: 1px solid #D0D0CB;
    padding: 4px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) 8px;
  }
  .pst-answer { flex: 1; height: auto; min-height: 0; }
  .pst-confirm { min-height: 44px; }
}