/*
 * SIMKAP 多工能力測驗（刪數字）
 *
 * 配色與版面依實機軟體截圖（Screenshot_1 ~ _15）：
 * 灰色 3D 外框、兩塊白色面板、深藍粗體、灰色手寫斜線、
 * 右側黑底綠字 LCD 時鐘與灰色立體按鈕、最下方淡黃色 5×4 答案區。
 */

.sk, .sk-fig {
  --sk-frame: #BDBDBD;
  --sk-panel: #FFFFFF;
  --sk-ink: #1A1A8C;            /* 方陣與答案區的深藍 */
  --sk-slash-color: #545454;
  --sk-btn: linear-gradient(#EDEDED, #C9C9C9);
  /* 手寫斜線（左下 → 右上，比字高一截） */
  --sk-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 37C13 26 21 13 33 3' fill='none' stroke='%234A4A4A' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --sk-slash-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 38C12 26 20 12 34 2' fill='none' stroke='%232A2A2A' stroke-width='5.2' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--vts-screen);
  color: #1B1B1B;
}

/* ---------- 版面：灰框 ＋ 右側一欄 ＋ 下方答案區 ---------- */

.sk-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 13vw, 156px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "frame side" "answer answer";
  gap: 8px 10px;
  padding: 10px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
}

.sk-frame {
  grid-area: frame;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 11px;
  background: var(--sk-frame);
  border: 2px solid;
  border-color: #EFEFEF #9A9A9A #9A9A9A #EFEFEF;
}
.sk-main { flex: 1; min-height: 0; position: relative; overflow: hidden; }

/* ---------- 兩塊白色面板 ---------- */

.sk-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.sk-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 100%;
  align-items: stretch;
}
.sk-pane {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px clamp(6px, 1.4vw, 20px);
  background: var(--sk-panel);
  border: 1px solid #A8A8A8;
}
.sk-line {
  display: grid;
  grid-template-columns: repeat(var(--sk-cols, 5), minmax(0, 1fr));
  align-items: center;
}
.sk-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: 700 clamp(.85rem, 3vh, 1.7rem)/1.1 Arial, "Helvetica Neue", "Liberation Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--sk-ink);
}
button.sk-item { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button.sk-item:active { background: #EFEFF8; }
@media (hover: hover) {
  button.sk-item:hover { background: #F2F2FA; }
}
button.sk-item:focus-visible { outline: 2px solid #2D6CDF; outline-offset: -2px; }

.sk-item.is-struck::after,
.sk-fig-line span.is-struck::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6em;
  height: 2.2em;
  transform: translate(-52%, -50%);
  background: var(--sk-slash) center / contain no-repeat;
  pointer-events: none;
}
button.sk-item.is-struck::after { animation: skPen .12s ease-out; }
@keyframes skPen { from { clip-path: inset(45% 45% 45% 45%); } to { clip-path: inset(-10%); } }
.sk-item.flash-ok { animation: skOk .4s ease; }
.sk-item.flash-err { animation: skErr .4s ease; }
@keyframes skOk { 30% { box-shadow: inset 0 0 0 3px #2BA24C; } }
@keyframes skErr { 30% { box-shadow: inset 0 0 0 3px #D3302C; } }

/* 圖形項目。圖形本身就有一種是「圓圈加斜線」，所以刪除記號要更長、更深，才分得出來 */
.sk-glyph svg { width: 1.7em; height: 1.7em; display: block; }
.sk-glyph.is-struck::after { width: 1.8em; height: 2.4em; }
.sk-glyph.is-struck::after,
.sk-fig-line .sk-glyph.is-struck::after { background-image: var(--sk-slash-strong); }

/* ---------- 右側一欄 ---------- */

.sk-side {
  grid-area: side;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-timer {
  position: relative;
  background: #0B0B0B;
  border: 2px solid;
  border-color: #6E6E6E #E4E4E4 #E4E4E4 #6E6E6E;
  padding: 6px 4px 5px;
  text-align: center;
}
.sk-clock, .sk-clock-ghost {
  font: 700 clamp(1.2rem, 2.6vw, 1.75rem)/1 ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.sk-clock { position: relative; color: #2BE04B; text-shadow: 0 0 7px rgba(43, 224, 75, .5); }
.sk-clock-ghost { position: absolute; inset: 6px 0 0; color: rgba(43, 224, 75, .13); }

.sk-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: .74rem;
  line-height: 1.3;
}
.sk-part { font-weight: 700; color: #1D3B5A; text-align: center; }
.sk-page { color: #6A6A6A; }

.sk-tools { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.sk-tool {
  appearance: none;
  min-height: 42px;
  padding: 0 8px;
  border: 2px solid;
  border-color: #FAFAFA #8C8C8C #8C8C8C #FAFAFA;
  border-radius: 0;
  background: var(--sk-btn);
  font-size: .85rem;
  font-weight: 500;
  color: #1B1B1B;
  cursor: pointer;
  touch-action: manipulation;
}
.sk-tool:active { border-color: #8C8C8C #FAFAFA #FAFAFA #8C8C8C; background: linear-gradient(#C9C9C9, #EDEDED); }
.sk-tool--cc[aria-pressed="true"] { background: linear-gradient(#BFC9DC, #9FAFC8); font-weight: 700; color: #16305A; }
.sk-tool--next { margin-top: auto; min-height: 50px; font-size: .95rem; }

/* ---------- 對話框（Calendar / Teleph. book / 筆記） ---------- */

/*
 * 用 flex 置中，不要用 grid：
 * grid 的隱含 row 是 auto，會被內容撐大，.sk-dialog-box 的 max-height: 100%
 * 就變成「對著撐大後的高度」算，等於沒有限制——行事曆／電話簿因此整個溢出被切掉。
 * flex 容器的高度是確定的，百分比才算得對。
 */
.sk-dialog {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(40, 40, 40, .28);
}
.sk-dialog-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  width: min(760px, 100%);
  background: #FFFFFF;
  border: 2px solid;
  border-color: #FAFAFA #7E7E7E #7E7E7E #FAFAFA;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
.sk-dialog-box h3 { flex: none; margin: 0; padding: 10px 14px 6px; text-align: center; font-size: 1.05rem; color: #111; }
.sk-dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  touch-action: pan-y;
  padding: 4px 14px 10px;
  user-select: text;
  -webkit-user-select: text;
}
.sk-dialog-foot { flex: none; display: flex; justify-content: center; padding: 8px 0 12px; }
.sk-dialog-foot .sk-tool { min-width: 108px; min-height: 34px; }

.sk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sk-table th, .sk-table td { text-align: left; padding: 3px 8px; border-bottom: 1px solid #DDD; white-space: nowrap; }
.sk-table th { font-weight: 700; border-bottom: 2px solid #333; }
.sk-table .mono { font-family: ui-monospace, Consolas, monospace; }

.sk-cal { font-size: .88rem; }
.sk-cal-day { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: start; border-bottom: 2px solid #333; }
.sk-cal-name { padding: 6px 4px; font-weight: 700; }
.sk-cal-name small { display: block; font-weight: 500; color: #888; }
.sk-cal-rows { min-width: 0; }
.sk-cal-row { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 4px; padding: 3px 0; border-bottom: 1px solid #E2E2E2; }
.sk-cal-row:last-child { border-bottom: 0; }
.sk-cal-slot { font-weight: 700; }
.sk-cal-text { min-width: 0; }

.sk-notes {
  width: 100%;
  min-height: 180px;
  font: 1rem/1.6 ui-monospace, Consolas, monospace;
  padding: 10px;
  border: 1px solid #BDBDB8;
  background: #FFFEF2;
  resize: vertical;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- 答案區（淡黃色 5×4 固定答案池） ---------- */

.sk-answer {
  grid-area: answer;
  padding: 5px 7px;
  background: #FFFEE0;
  border: 2px solid;
  border-color: #FFFFFF #B9B48A #B9B48A #FFFFFF;
}
.sk-pool {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px 6px;
}
.sk-ans {
  appearance: none;
  min-width: 0;
  min-height: 26px;
  padding: 1px 4px;
  border: 0;
  border-radius: 2px;
  background: none;
  font: 700 clamp(.8rem, 2.3vh, 1.35rem)/1.15 Arial, "Helvetica Neue", "Liberation Sans", sans-serif;
  color: var(--sk-ink);
  cursor: pointer;
  touch-action: manipulation;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.sk-ans:active { background: #1A1A8C; color: #FFF; }
@media (hover: hover) {
  .sk-ans:hover { background: #FFF7A8; }
}
.sk-ans.is-used,
.sk-ans:disabled {
  text-decoration: line-through;
  text-decoration-color: #555;
  text-decoration-thickness: 2px;
  color: #8A8AB0;
  cursor: default;
  pointer-events: none;
}

.sk-caption-slot { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-top: 3px; font-size: .8rem; }
.sk-caption { color: #14145A; font-weight: 600; }
.sk-caption-hint { color: #8A8A6E; }
.sk-delay-tag { margin-left: auto; font-size: .74rem; font-weight: 700; background: #F6D78B; color: #5A3E00; border-radius: 99px; padding: 1px 9px; }
.sk-speaking { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.sk-speaking i { width: 3px; background: #1A1A8C; border-radius: 2px; animation: skEq .8s ease-in-out infinite; }
.sk-speaking i:nth-child(2) { animation-delay: .15s; }
.sk-speaking i:nth-child(3) { animation-delay: .3s; }
@keyframes skEq { 0%, 100% { height: 4px; } 50% { height: 13px; } }

/* ---------- 說明頁示意（同實機：灰框裡左右兩塊白面板） ---------- */

.sk-fig {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
}
.sk-fig-frame {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 10px;
  background: var(--sk-frame);
  border: 2px solid;
  border-color: #EFEFEF #9A9A9A #9A9A9A #EFEFEF;
}
.sk-fig-pane {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 6px clamp(4px, 1.2vw, 16px);
  background: #FFFFFF;
  border: 1px solid #A8A8A8;
}
.sk-fig-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sk-fig-line span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  font: 700 clamp(.7rem, 2.1vh, 1.15rem)/1.1 Arial, "Helvetica Neue", "Liberation Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #1A1A8C;
}
.intro-text .quote { margin: 6px 0 8px; padding: 6px 12px; border-left: 3px solid #C8C39A; background: #FFFDEE; }
.sk-fig-cap { flex: none; margin: 0; font-size: .78rem; color: #3A3A3A; text-align: center; }

/* ---------- 窄畫面 ---------- */

/*
 * 手機橫向：畫面只有 ~350px 高。原本答案區吃掉快一半、右側一欄整個被切掉（使用者回報），
 * 所以這裡把答案區壓扁、按鈕縮小，並讓右側一欄在真的放不下時可以捲。
 */
@media (orientation: landscape) and (max-height: 620px) {
  .sk-body { gap: 5px 7px; padding: 5px calc(7px + var(--safe-right)) calc(5px + var(--safe-bottom)) calc(7px + var(--safe-left)); }
  .sk-frame { padding: 4px; }
  .sk-panes { gap: 8px; }
  .sk-pane { padding: 4px 6px; }

  .sk-side { overflow-y: auto; overscroll-behavior: contain; gap: 5px; }
  .sk-timer { padding: 3px 4px 2px; }
  .sk-clock, .sk-clock-ghost { font-size: 1.05rem; }
  .sk-clock-ghost { inset: 3px 0 0; }
  .sk-info { font-size: .64rem; }
  .sk-tools { gap: 4px; margin-top: 2px; }
  .sk-tool { min-height: 27px; padding: 0 4px; font-size: .68rem; }
  .sk-tool--next { min-height: 32px; font-size: .78rem; }

  .sk-answer { padding: 2px 6px; }
  .sk-pool { gap: 0 4px; }
  .sk-ans { min-height: 15px; padding: 0 3px; font-size: clamp(.58rem, 3.1vh, .88rem); }
  .sk-caption-slot { min-height: 0; margin-top: 1px; font-size: .68rem; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .sk-info { display: none; }
  .sk-tool { min-height: 25px; font-size: .64rem; }
  .sk-tool--next { min-height: 30px; }
}

@media (max-width: 599px) {
  .sk-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "side" "frame" "answer";
    gap: 0;
    padding: 0 var(--safe-right) 0 var(--safe-left);
  }
  .sk-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #E4E4E0;
    border-bottom: 1px solid #C6C6C0;
  }
  .sk-timer { padding: 4px 8px 3px; }
  .sk-clock, .sk-clock-ghost { font-size: 1.05rem; }
  .sk-clock-ghost { inset: 4px 8px 0; }
  .sk-info { flex-direction: row; gap: 8px; margin-right: auto; font-size: .76rem; }
  .sk-tools { flex-direction: row; gap: 6px; margin: 0; }
  .sk-tool--next { margin: 0; min-height: 42px; }

  /*
   * 直向時左右並排會把 10 個四位數擠進 393px，數字整片疊在一起（使用者回報）。
   * 改成上下兩塊，每塊仍是 5 欄、佔滿整個寬度；每頁的列數由 js 減半（見 rowsForPage）。
   */
  .sk-panes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sk-item { font-size: clamp(.85rem, 4.4vw, 1.35rem); min-height: 30px; }

  /* 答案區：五欄會把 "insurance company" 拆成直的一個字一行，改兩欄 */
  .sk-pool { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 8px; }
  .sk-ans { min-height: 30px; font-size: clamp(.75rem, 3.6vw, 1rem); }
  .sk-answer { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
  .sk-frame { border: 0; padding: 4px; }
  .sk-answer { border-width: 1px 0 0; padding-bottom: calc(6px + var(--safe-bottom)); }
}