/* Jam Analog: jam SVG yang bisa diseret, belajar, tebak, atur, tambah, dan Inggris */
.jm { --jm: #0284c7; --jm-soft: #e0f2fe; }
.jm-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(6px, 1.4vw, 16px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #f0f9ff, #fff 60%); -webkit-overflow-scrolling: touch; }
.jm-view { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
.jm-view[hidden] { display: none; }
.jm-split { display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); flex: 1; min-height: 0; }
.jm-hud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.jm-hud:empty { display: none; }
.jm-chip { background: #fff; border: 3px solid var(--c); color: var(--ink); border-radius: 999px; padding: 1px 12px; font-weight: 800; font-size: clamp(13px, 1.5vw, 18px); display: inline-flex; gap: 8px; align-items: baseline; }
.jm-chip b { font-size: 1.2em; font-variant-numeric: tabular-nums; }
.jm-chip.on { background: var(--c); color: #fff; }
.jm-qn { font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.4vw, 17px); margin-left: 6px; }

/* jam */
.jm-clockarea { flex: 1 1 230px; min-height: 150px; min-width: 0; display: flex; gap: 8px; justify-content: center; align-items: stretch; }
.jm-clk { flex: 1 1 0; min-width: 0; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.jm-clk .box { position: relative; flex: 1; min-height: 0; width: 100%; }
.jm-clk .cap { font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.5vw, 18px); line-height: 1.2; padding-top: 2px; }
.jm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.jm-svg:not(.jm-live) { touch-action: auto; }
.jm-svg.jm-live { cursor: grab; }
.jm-svg.is-drag { cursor: grabbing; }
.jm-svg.jm-off { cursor: default; }
.jm-svg.jm-off .jm-hd { display: none; }
.jm-svg:focus-visible { outline: 3px solid var(--amber); outline-offset: -4px; border-radius: 50%; }
.jm-mini { width: clamp(84px, 14vh, 130px); height: clamp(84px, 14vh, 130px); margin: 0 auto; display: flex; }
.jm-mini[hidden] { display: none; }
.jm-mini .jm-clk { flex: 1; }

/* panel samping */
.jm-side { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); min-width: 0; justify-content: center; }
.jm-ask { text-align: center; font-weight: 800; color: var(--ink); font-size: clamp(15px, 2vw, 24px); line-height: 1.3; }
.jm-story { text-align: center; font-weight: 700; color: var(--ink); background: #fff; border: 3px solid var(--jm-soft); border-radius: 18px; padding: 8px 14px; font-size: clamp(15px, 1.9vw, 24px); line-height: 1.4; }
.jm-story[hidden], .jm-target[hidden], .jm-type[hidden], .jm-check[hidden], .jm-next[hidden] { display: none; }
.jm-digital { font: 800 clamp(40px, 9vh, 84px)/1.1 var(--font); color: var(--jm); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.jm-target { background: #fff; border: 4px solid var(--jm); border-radius: 22px; padding: 4px 12px; font-size: clamp(38px, 8vh, 72px); }
.jm-per { text-align: center; font-weight: 800; color: var(--muted); margin-top: -4px; }
.jm-read { background: #fff; border: 3px solid var(--jm-soft); border-radius: 22px; padding: 6px 14px 8px; }
.jm-line { margin: 4px 0 0; color: var(--ink); font-weight: 700; font-size: clamp(14px, 1.8vw, 21px); line-height: 1.35; }
.jm-line b { color: var(--muted); font-weight: 800; }
.jm-line[hidden], .jm-note[hidden] { display: none; }
.jm-note { margin: 6px 0 0; padding: 6px 10px; background: #fef3c7; border-radius: 12px; color: #78350f; font-weight: 700; font-size: clamp(13px, 1.6vw, 18px); line-height: 1.35; }
.jm-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jm-ctl .opt { min-height: 42px; padding: 0 14px; font-size: clamp(14px, 1.6vw, 18px); border-width: 2px; }
.jm-ctl .options { gap: 6px; }
.jm-legend, .jm-tip { margin: 0; font-weight: 700; color: var(--muted); font-size: clamp(12px, 1.4vw, 16px); text-align: center; }
.jm-legend i { display: inline-block; vertical-align: middle; border-radius: 4px; margin-right: 4px; }
.jm-legend i.h { width: 22px; height: 9px; background: #e11d48; }
.jm-legend i.m { width: 22px; height: 5px; background: #0284c7; }
.jm-done { margin-top: 2px; min-height: 48px; padding: 0 26px; font-size: clamp(16px, 1.8vw, 20px); }

/* pilihan */
.jm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.2vw, 14px); }
.jm-opts:empty { display: none; }
.jm-opt { position: relative; min-height: clamp(54px, 9vh, 92px); padding: 6px 10px; border-radius: 18px; border: 4px solid var(--jm-soft); background: #fff; color: var(--ink); font: 800 clamp(20px, 3vw, 34px)/1.15 var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; font-variant-numeric: tabular-nums; }
.jm-opt.txt { font-size: clamp(16px, 2.3vw, 26px); }
.jm-opt:hover:not(:disabled) { border-color: var(--jm); }
.jm-opt kbd { position: absolute; top: 3px; left: 8px; font: 800 11px var(--font); color: var(--muted); opacity: .7; }
.jm-opt:disabled { cursor: default; }
.jm-opt.good { background: #bbf7d0; border-color: var(--ok); }
.jm-opt.bad { background: #fecdd3; border-color: var(--bad); }
.jm-type { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 36px; color: var(--ink); }
.jm-type input { width: clamp(78px, 22vw, 120px); font: 800 clamp(26px, 5vh, 40px) var(--font); text-align: center; padding: 6px 4px; border: 4px solid var(--jm-soft); border-radius: 16px; color: var(--ink); background: #fff; min-width: 0; }
.jm-type input:focus { outline: none; border-color: var(--jm); }
.jm-type input:disabled { background: #f1f5f9; }
.jm-type.ok input { border-color: var(--ok); background: #bbf7d0; } .jm-type.bad input { border-color: var(--bad); background: #fecdd3; }
.jm-fb { min-height: 1.3em; text-align: center; font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.7vw, 20px); line-height: 1.35; }
.jm-fb.ok { color: var(--ok); } .jm-fb.bad { color: var(--bad); }
.jm-check, .jm-next { align-self: center; margin-top: 0; min-height: 52px; padding: 0 34px; font-size: clamp(18px, 2vw, 24px); }
.jm-names { display: grid; gap: 6px; }
.jm-names input { font: 700 16px var(--font); padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; min-width: 0; width: 100%; box-sizing: border-box; text-align: center; }
.jm-names input[hidden] { display: none; }
.jm-recap { display: flex; flex-direction: column; gap: 4px; font-size: clamp(15px, 2vw, 22px); margin-bottom: 4px; }

/* layar lebar atau HP mendatar: jam di kiri, soal di kanan */
@media (orientation: landscape) and (min-width: 640px) {
  .jm-view { flex: 1 1 0; }
  .jm-split { flex-direction: row; align-items: stretch; gap: clamp(8px, 2vw, 28px); }
  .jm-clockarea { flex: 1 1 48%; min-height: 0; }
  .jm-side { flex: 1 1 52%; overflow-y: auto; overflow-x: hidden; padding: 2px; }
}
@media (max-height: 520px) {
  .jm-wrap { gap: 3px; padding: 4px 8px; }
  .jm-side { gap: 4px; }
  .jm-opt { min-height: 44px; border-width: 3px; }
  .jm-story { padding: 4px 10px; }
  .jm-digital { font-size: clamp(30px, 11vh, 52px); }
  .jm-check, .jm-next { min-height: 44px; }
  .jm-mini { width: 70px; height: 70px; }
  .jm-read { padding: 2px 10px 4px; }
  .jm-ctl .opt { min-height: 36px; }
}
@media (orientation: portrait) and (max-height: 760px) { .jm-mini { display: none; } }
@media (max-width: 420px) { .jm-ctl .opt { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }