/* Asmaul Husna: kartu belajar, kartu pasangan, dan kuis */
.ah-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 14px); padding: clamp(8px, 1.6vw, 20px); position: relative; background: linear-gradient(135deg, #ecfdf5, var(--amber-100) 85%); }
.ah-score { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 0; }
.ah-score:empty { display: none; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #fff; border: 3px solid var(--line); font-family: var(--font); color: var(--ink); }
.chip .l { font-weight: 700; font-size: clamp(13px, 1.5vw, 18px); color: var(--muted); }
.chip b { font-weight: 800; font-size: clamp(16px, 2vw, 26px); }
.chip.a { border-color: var(--team-a); } .chip.b { border-color: var(--team-b); }
.chip.a .l { color: var(--team-a); } .chip.b .l { color: var(--team-b); }
.chip.turn { box-shadow: 0 0 0 4px var(--amber); transform: scale(1.05); }
.chip.info .l { color: var(--ink); }
.ah-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(8px, 1.6vh, 18px); overflow-y: auto; width: 100%; }
.ah-main > :first-child { margin-top: auto; } .ah-main > :last-child { margin-bottom: auto; }
.ah-main > * { flex-shrink: 0; }
.ah-main > .ah-board { flex: 1 1 0; }

.ah-nama { background: #fff; border: 4px solid #059669; border-radius: 28px; padding: clamp(8px, 2vh, 22px) clamp(16px, 3vw, 40px); text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.12); max-width: 100%; }
.ah-nama .ar { font-size: clamp(40px, 12vh, 120px); color: #064e3b; display: block; line-height: 1.5; }
.ah-nama .lat { font-weight: 800; font-size: clamp(18px, 3.4vh, 34px); color: var(--ink); display: block; }
.ah-nama .arti { font-weight: 700; font-size: clamp(16px, 3vh, 28px); color: #047857; display: block; }
.ah-nama .makna { font-size: clamp(13px, 2.4vh, 22px); color: var(--muted); margin: 6px auto 0; max-width: 34em; line-height: 1.45; }
.ah-nama .no { display: inline-block; min-width: 2.2em; padding: 2px 10px; border-radius: 999px; background: #d1fae5; color: #065f46; font-weight: 800; font-size: clamp(12px, 2vh, 18px); margin-bottom: 4px; }
.ah-row { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px); }
.ah-row .part { text-align: center; }
.ah-row .dots { font-weight: 800; font-size: clamp(32px, 9vh, 80px); color: #059669; }
.ah-tanya { font-weight: 800; font-size: clamp(15px, 2.8vh, 26px); text-align: center; color: var(--ink); max-width: 38em; line-height: 1.35; }
.ah-tanya small { display: block; font-weight: 600; color: var(--muted); font-size: .7em; }

.ah-nav { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ah-btn { font: inherit; font-family: var(--font); font-weight: 800; font-size: clamp(16px, 2.6vh, 24px); min-height: 48px; padding: 0 22px; border-radius: 999px; border: 3px solid var(--sky-d); background: #fff; color: var(--sky-d); cursor: pointer; touch-action: manipulation; }
.ah-btn.go { background: var(--sky-d); color: #fff; }
.ah-btn:disabled { opacity: .4; cursor: default; }
.ah-btn:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }

.ah-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vh, 16px); width: min(900px, 100%); }
.ah-opt { font-family: var(--font); font-weight: 800; font-size: clamp(16px, 3vh, 28px); min-height: clamp(52px, 11vh, 96px); padding: 6px 14px; border-radius: 22px; border: 4px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; touch-action: manipulation; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.ah-opt .ar { font-size: 1.7em; line-height: 1.4; }
.ah-opt:hover:not(:disabled) { border-color: var(--sky); }
.ah-opt.ok { border-color: var(--ok); background: #d1fae5; }
.ah-opt.bad { border-color: var(--bad); background: var(--rose-100); }
.ah-opt:disabled { cursor: default; }
.ah-opt:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.ah-info { width: min(900px, 100%); text-align: center; font-size: clamp(13px, 2.4vh, 22px); color: var(--ink); background: #fff; border: 4px solid var(--ok); border-radius: 18px; padding: 6px 14px; line-height: 1.4; }
.ah-info.bad { border-color: var(--bad); }
.ah-info[hidden] { display: none; }

.ah-board { display: grid; justify-content: center; align-content: center; width: 100%; flex: 1; min-height: 0; }
.mc { padding: 0; border: 0; background: transparent; perspective: 700px; cursor: pointer; touch-action: manipulation; width: 100%; height: 100%; }
.mc .inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s ease; }
.mc.open .inner { transform: rotateY(180deg); }
.mc .back, .mc .front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.18); overflow: hidden; }
.mc .back { background: repeating-linear-gradient(45deg, #047857 0 10px, #059669 10px 20px); border: 4px solid #fff; }
.mc .back i { width: 34%; aspect-ratio: 1; background: #fde047; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mc .front { transform: rotateY(180deg); background: #fff; border: 4px solid #059669; padding: 4%; text-align: center; line-height: 1.15; font-family: var(--font); font-weight: 800; color: var(--ink); }
.mc .front.t { background: #fffbeb; border-color: var(--amber); }
.mc .front .ar { color: #064e3b; line-height: 1.5; }
.mc .front small { display: block; font-weight: 700; color: var(--muted); }
.mc.done .front { background: #d1fae5; border-color: var(--ok); }
.mc:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.ah-toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100% - 24px); padding: 8px 18px; border-radius: 999px; background: #fff; border: 4px solid var(--ok); font-weight: 800; color: var(--ink); font-size: clamp(13px, 1.7vw, 22px); text-align: center; transition: opacity .2s, transform .2s; z-index: 5; }
.ah-toast.show { opacity: 1; transform: translate(-50%, 0); }
.op-desc { font-size: .9em; }

@media (max-width: 560px) and (orientation: portrait) {
  .ah-opts { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  .ah-main.answered .ah-tanya { display: none; }
  .ah-tanya { font-size: 14px; }
  .ah-body { padding: 4px 8px; gap: 4px; }
  .chip { padding: 1px 10px; border-width: 2px; }
  .ah-nama { padding: 2px 16px; border-width: 3px; border-radius: 18px; }
  .ah-nama .ar { font-size: clamp(30px, 14vh, 60px); line-height: 1.3; }
  .ah-nama .makna { margin-top: 2px; }
  .ah-btn { min-height: 38px; font-size: 16px; border-width: 2px; }
  .ah-opts { gap: 6px; }
  .ah-opt { min-height: 40px; border-width: 3px; border-radius: 14px; font-size: 16px; padding: 2px 8px; }
  .ah-info { border-width: 3px; padding: 2px 10px; }
  .ah-toast { bottom: 4px; padding: 4px 12px; border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mc .inner { transition: none; } }