#batapan, #batapan * { box-sizing: border-box; }
#batapan { max-width: 600px; margin: 0 auto; padding: 0 0 32px; color: #343329; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans', sans-serif; line-height: 1.6; }
#batapan [hidden] { display: none !important; }
#batapan button, #batapan a { touch-action: manipulation; }
#batapan button { font: inherit; cursor: pointer; border: 1px solid #c8c5b9; border-radius: 6px; background: #faf9f5; background-image: none; box-shadow: none; color: inherit; min-height: 44px; padding: 10px 14px; }
#batapan button:disabled { cursor: default; opacity: .65; }
#batapan button:focus-visible, #batapan a:focus-visible { outline: 3px solid #386758; outline-offset: 3px; }
#batapan a { color: #386758; }
#batapan h2 { background: none; border: 0; padding: 0; color: inherit; }
#batapan .eyebrow { font-size: 11px; letter-spacing: .16em; margin: 0; }
#batapan .stage-shell { border: 1px solid #cfccc0; border-radius: 8px; overflow: hidden; background: #faf9f5; }
#batapan .player-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #cfccc0; }
#batapan .tools { display: flex; align-items: center; gap: 8px; }
#batapan .player-controls button { font-size: 12px; font-weight: 600; min-height: 44px; padding: 8px 10px; white-space: nowrap; }
#batapan [data-fullscreen] { display: inline-flex; align-items: center; gap: 7px; }
#batapan [data-fullscreen] svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#batapan [data-fullscreen] .collapse-icon { display: none; }
#batapan [data-fullscreen][aria-pressed="true"] .expand-icon { display: none; }
#batapan [data-fullscreen][aria-pressed="true"] .collapse-icon { display: inline; }
#batapan .stage { max-width: 720px; margin: 0 auto; width: 100%; }
#batapan .hud { display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#batapan .scene { position: relative; width: 100%; aspect-ratio: 1122 / 1402; overflow: hidden; }
#batapan canvas { display: block; width: 100%; height: 100%; }
#batapan .count-wrap { position: absolute; top: 9%; left: 22%; width: 42%; text-align: center; pointer-events: none; color: #fffdf5; }
#batapan .count-wrap p { min-height: 22px; margin: 0; font-size: 13px; }
#batapan .count-wrap strong { display: block; font-size: clamp(48px, 11vw, 80px); line-height: 1.05; font-variant-numeric: tabular-nums; }
#batapan .intro { position: absolute; top: 9%; left: 21%; width: 44%; text-align: center; color: #fffdf5; pointer-events: none; }
#batapan .intro .eyebrow { font-size: 10px; letter-spacing: .04em; }
#batapan .intro h2 { margin: 9px auto; max-width: 260px; font-size: clamp(16px, 4vw, 24px); line-height: 1.5; }
#batapan .action-area { padding: 14px 22px 16px; text-align: center; }
#batapan .feedback { min-height: 46px; margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
#batapan .primary { width: 100%; max-width: 440px; background: #365a48; border-color: #365a48; color: #fffdf5; min-height: 58px; font-size: 18px; font-weight: 600; }
#batapan .primary:not(:disabled):hover { background: #2d4c3c; }
#batapan .practice-button { display: block; width: 100%; max-width: 440px; margin: 8px auto 0; font-size: 14px; }
#batapan .hint { font-size: 11px; min-height: 16px; margin: 10px 0 0; color: #656457; }
#batapan .status { margin: 0; padding: 0 16px 10px; text-align: center; font-size: 12px; }
#batapan .status:empty { padding: 0; }
#batapan .instructions { max-width: 680px; margin: 28px auto 0; font-size: 13px; line-height: 1.9; }
#batapan .instructions h2 { font-size: 17px; }
#batapan .instructions ol { padding-left: 22px; }
#batapan .instructions p { color: #656457; }
#batapan .policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; border-top: 1px solid #cfccc0; padding: 16px 0; margin-top: 20px; font-size: 12px; }
#batapan .results { position: absolute; inset: 0; display: flex; align-items: center; padding: 12px; background: #faf9f5; text-align: center; overflow-y: auto; }
#batapan .result-summary { width: 100%; }
#batapan .results h2 { font-size: 16px; margin: 0 0 16px; }
#batapan .collection { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#batapan .collection figure { margin: 0; }
#batapan .result-number { margin: 0 0 5px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
#batapan .collection canvas { aspect-ratio: 150 / 190; height: auto; }
#batapan .collection figcaption { font-size: 12px; }
#batapan .stage-shell:fullscreen, #batapan .stage-shell[data-expanded="true"] { width: 100%; height: 100dvh; border: 0; border-radius: 0; overflow-y: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #faf9f5; }
#batapan .stage-shell[data-expanded="true"] { position: fixed; inset: 0; z-index: 100000; }
#batapan .stage-shell:fullscreen .stage, #batapan .stage-shell[data-expanded="true"] .stage { max-width: min(560px, max(240px, calc((100dvh - 250px) * .8))); }
@media (max-width: 420px) {
  #batapan { padding: 0 0 24px; }
  #batapan .player-controls { padding: 6px; gap: 4px; }
  #batapan .tools { gap: 4px; }
  #batapan .player-controls button { padding: 7px 6px; font-size: 11px; }
  #batapan [data-fullscreen] { gap: 4px; }
  #batapan [data-fullscreen] svg { width: 15px; height: 15px; }
  #batapan .action-area { padding: 12px 16px 16px; }
  #batapan .feedback { font-size: 14px; }
  #batapan .collection { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; }
  #batapan .collection figure { grid-column: span 2; }
  #batapan .collection figure:nth-child(4) { grid-column: 2 / span 2; }
  #batapan .collection figure:nth-child(5) { grid-column: 4 / span 2; }
  #batapan .collection canvas { max-width: 90px; margin: 0 auto; }
}