/* SMK 感覺動作協調（立比薩）
   直向：上方刺激區，下方左右各一支搖桿
   橫向：左搖桿 | 刺激區 | 右搖桿（雙手拇指同時操作） */

.smk {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "stim stim"
    "l    r";
  --js-size: clamp(118px, min(36vw, 24vh), 220px);
}

.smk-stim {
  grid-area: stim;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.smk-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-top: 1px solid #0F1011;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  padding: 14px 8px calc(12px + var(--safe-bottom));
}
.smk-panel--l { grid-area: l; padding-left: calc(8px + var(--safe-left)); }
.smk-panel--r { grid-area: r; padding-right: calc(8px + var(--safe-right)); }

.smk-js .js-label { max-width: calc(var(--js-size) + 20px); line-height: 1.3; }

/* 橫向（App 主要模式）：畫面佔滿，搖桿浮在畫面左下、右下角（比照練習 App 的配置），
   畫面才維持實機的寬螢幕比例 */
@media (orientation: landscape) {
  .smk {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stim";
    --js-size: clamp(104px, min(18vw, 34vh), 200px);
  }
  .smk-panel {
    position: absolute;
    bottom: 0;
    z-index: 2;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 calc(10px + var(--safe-bottom));
    pointer-events: none;
  }
  .smk-panel > * { pointer-events: auto; }
  .smk-panel--l { left: calc(12px + var(--safe-left)); }
  .smk-panel--r { right: calc(12px + var(--safe-right)); }
  .smk-js .js-base { opacity: .82; }
  .smk-js .js-label { color: #333; text-shadow: 0 0 4px rgba(255,255,255,.9); }
}