/* Organ Tubuh Manusia: Belajar, Susun Huruf, Pasang Fungsi, Susun ke Tubuh, Jalur Organ, Tebak Organ, Kuis */
.og { --og: #be185d; --og-soft: #fce7f3; --ca: #c2410c; }
.og-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(8px, 1.6vw, 18px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #fff1f2, #fff 55%); -webkit-overflow-scrolling: touch; }
.og-view { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); min-width: 0; }
.og-view[hidden] { display: none; }
.og-hud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.og-hud:empty { display: none; }
.og-chip { background: #fff; border: 3px solid var(--c); color: var(--ink); border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: clamp(13px, 1.6vw, 19px); display: inline-flex; gap: 6px; align-items: baseline; }
.og-chip b { font-size: 1.2em; font-variant-numeric: tabular-nums; }
.og-chip i { font-style: normal; }
.og-chip.on { background: var(--c); color: #fff; }
.og-qn { font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.5vw, 17px); margin-left: 6px; }
.og h2 { margin: 0; font-size: clamp(18px, 2.4vw, 26px); }
.og h3 { margin: 0 0 6px; font-size: clamp(16px, 1.9vw, 20px); }
.og-names { display: grid; gap: 6px; }
.og-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; }
.og-names input[hidden] { display: none; }
#game-opts[hidden] { display: none; }
.og-tip { margin: 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 14px; }
.og-turn { text-align: center; font-weight: 800; font-size: clamp(14px, 1.7vw, 18px); color: var(--c); }

/* gambar organ */
.og-pic { display: inline-block; width: var(--ps, 64px); height: var(--ps, 64px); flex: none; line-height: 0; }
.og-pic svg { width: 100%; height: 100%; display: block; }
.og-ph { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--h, #94a3b8); color: #fff; font: 800 calc(var(--ps, 64px) * .5)/1 var(--font); }

/* belajar */
.og-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.og-tab { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: 800 clamp(14px, 1.6vw, 17px) var(--font); cursor: pointer; }
.og-tab[aria-pressed="true"] { background: var(--sc); border-color: var(--sc); color: #fff; }
.og-sec { background: #fff; border: 3px solid var(--sc); border-radius: 22px; padding: 10px 14px 14px; min-width: 0; }
.og-sec h2 { color: var(--sc); }
.og-ringkas { margin: 4px 0 6px; color: var(--ink); line-height: 1.5; font-size: clamp(14px, 1.5vw, 16px); }
.og-jalur { margin: 0 0 8px; background: var(--st); border-radius: 12px; padding: 6px 12px; color: var(--ink); font-size: clamp(13px, 1.5vw, 16px); line-height: 1.5; }
.og-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.og-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 18px; border: 3px solid var(--st); background: #fff; cursor: pointer; font: inherit; color: var(--ink); text-align: center; min-height: 44px; }
.og-card:hover { border-color: var(--sc); background: var(--st); }
.og-card b { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.2; overflow-wrap: anywhere; }
.og-card small { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.og-detail { text-align: left; }
.og-dtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-right: 44px; }
.og-dtop .og-pic { --ps: clamp(96px, 20vh, 150px); background: var(--st); border-radius: 22px; padding: 6px; box-sizing: content-box; }
.og-dtop h2 { font-size: clamp(24px, 4vw, 36px); margin-top: 4px; }
.og-badge { display: inline-block; background: var(--sc); color: #fff; border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 14px; }
.og-alias { margin: 2px 0 0 !important; font-size: 14px !important; }
.og-dl { margin: 10px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; color: var(--ink); font-size: clamp(14px, 1.6vw, 17px); line-height: 1.5; }
.og-dl dt { font-weight: 800; color: var(--muted); }
.og-dl dd { margin: 0; }
@media (max-width: 480px) { .og-dl { grid-template-columns: 1fr; gap: 0; } .og-dl dd { margin-bottom: 8px; } }
.og-mini { position: relative; height: clamp(150px, 26vh, 230px); aspect-ratio: 300 / 640; margin: 12px auto 0; }
.og-mini .b, .og-mini .b svg { display: block; width: 100%; height: 100%; }
.og-mini .o { position: absolute; display: block; filter: drop-shadow(0 0 3px #f59e0b) drop-shadow(0 0 3px #f59e0b); }
.og-mini .o svg { width: 100%; height: 100%; display: block; }

/* kuis dan tebak */
.og-prompt { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); background: #fff; border: 4px solid var(--og); border-radius: 24px; padding: 8px 14px; min-height: 80px; flex-wrap: wrap; }
.og-prompt .og-pic { --ps: clamp(80px, 22vh, 140px); }
.og-qtext { margin: 0; flex: 1 1 220px; text-align: center; font-weight: 800; color: var(--ink); font-size: clamp(18px, 2.5vw, 28px); line-height: 1.35; overflow-wrap: anywhere; }
.og-qtext small { display: block; font-size: .55em; color: var(--og); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.og-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 14px); }
@media (max-width: 480px) { .og-opts:not(.pic) { grid-template-columns: 1fr; } }
.og-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(56px, 9vh, 88px); padding: 6px 12px 6px 30px; border-radius: 18px; border: 4px solid var(--og-soft); background: #fff; color: var(--ink); font: 800 clamp(15px, 2vw, 24px)/1.25 var(--font); cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.og-opts.pic .og-opt { flex-direction: column; padding: 6px 8px; }
.og-opts.pic .og-pic { --ps: clamp(70px, 15vh, 120px); }
.og-opt kbd { position: absolute; top: 3px; left: 8px; font: 800 12px var(--font); color: var(--muted); }
.og-opt:hover:not(:disabled) { border-color: var(--og); }
.og-opt:disabled { cursor: default; }
.og-opt.good { background: #bbf7d0; border-color: var(--ok); }
.og-opt.bad { background: #fecdd3; border-color: var(--bad); }
.og-fb { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--muted); font-size: clamp(14px, 1.7vw, 19px); line-height: 1.4; }
.og-fb.ok b.r { color: var(--ok); } .og-fb.bad b.r { color: var(--bad); }
.og-fb p { margin: 4px 0 0; font-weight: 700; color: var(--ink); text-align: left; background: #f8fafc; border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: clamp(14px, 1.5vw, 16px); }
.og-next { align-self: center; margin-top: 0; min-height: 52px; padding: 0 34px; font-size: clamp(18px, 2vw, 24px); }
.og-next[hidden] { display: none; }

/* tombol kecil dan aksi */
.og-act { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.og-mini-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 3px solid var(--line); background: #fff; font: 800 15px var(--font); color: var(--ink); cursor: pointer; }
.og-mini-btn:hover:not(:disabled) { border-color: var(--og); background: var(--og-soft); }
.og-mini-btn:disabled { opacity: .45; cursor: not-allowed; }
.og-check { margin-top: 0; min-height: 48px; padding: 0 26px; font-size: 18px; }
.og-check:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* susun huruf */
.og-hu { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.og-hu-pic { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 24px); flex-wrap: wrap; background: #fff; border: 4px solid var(--og); border-radius: 24px; padding: 8px 14px; }
.og-hu-pic .og-pic { --ps: clamp(110px, 24vh, 190px); }
.og-hu-info { flex: 1 1 200px; min-width: 0; }
.og-clue { margin: 4px 0 0; text-align: center; color: var(--ink); font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); background: #fffbeb; border: 2px solid #fde68a; border-radius: 12px; padding: 4px 10px; }
.og-clue[hidden] { display: none; }
.og-boxes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.og-sp { width: 14px; }
.og-box { width: clamp(40px, 7vw, 60px); height: clamp(48px, 8vw, 66px); border-radius: 12px; border: 3px dashed #94a3b8; background: #f8fafc; color: var(--ink); font: 800 clamp(22px, 3.4vw, 32px) var(--font); cursor: pointer; padding: 0; touch-action: manipulation; }
.og-box.fill { border-style: solid; border-color: var(--og); background: var(--og-soft); }
.og-box.lock { border-color: #ca8a04; background: #fef9c3; cursor: default; }
.og-box.hot { border-style: solid; border-color: var(--og); background: #ecfdf5; }
.og-box.good { background: #bbf7d0; border-color: var(--ok); }
.og-box.bad { background: #fecdd3; border-color: var(--bad); animation: og-shake .35s; }
.og-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px; border: 2px dashed var(--line); border-radius: 16px; background: #fff; min-height: 56px; }
.og-tile { width: clamp(44px, 7vw, 60px); height: clamp(48px, 8vw, 62px); border-radius: 12px; border: 3px solid var(--og); background: #fff; color: var(--ink); font: 800 clamp(22px, 3.4vw, 32px) var(--font); cursor: grab; padding: 0; box-shadow: 0 4px 0 rgba(190,24,93,.3); touch-action: none; }
.og-tile.used { display: none; }
.og-tile:disabled { opacity: .5; cursor: default; }
.og-ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -60%); opacity: .92; margin: 0; }
@keyframes og-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* pasang */
.og-pas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 24px); align-items: start; }
.og-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.og-col li { min-width: 0; }
.og-colh { text-align: center; font-weight: 800; color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.og-pc { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 72px; padding: 4px 10px; border-radius: 14px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: 800 clamp(14px, 1.8vw, 19px)/1.25 var(--font); cursor: pointer; text-align: left; overflow-wrap: break-word; }
.og-pc.l { touch-action: none; cursor: grab; }
.og-pc.r { justify-content: center; text-align: center; }
.og-pc:hover:not(:disabled) { border-color: var(--og); }
.og-pc.hot { border-color: var(--og); background: #ecfdf5; }
.og-pc.sel { border-color: #ca8a04; background: #fef9c3; box-shadow: 0 0 0 3px rgba(250,204,21,.6); }
.og-pc.done { border-color: var(--ok); background: #ecfdf5; cursor: default; }
.og-pc.done .bd { position: absolute; top: -7px; right: -5px; min-width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 13px; display: grid; place-items: center; }
.og-pc.wrong { border-color: var(--bad); background: #fff1f2; animation: og-shake .35s; }
@media (max-width: 420px) { .og-pc { padding: 2px 6px; gap: 5px; font-size: 14px; } .og-pas { gap: 6px; } .og-pc.l .og-pic { --ps: 48px !important; } }

/* susun ke tubuh */
.og-su { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 639px) { .og-su { gap: 8px; } .og-body { height: clamp(250px, 50vh, 420px); } .og-tc { width: 78px; min-height: 64px; font-size: 12px; } .og-tc .og-pic { --ps: 44px !important; } .og-tray { gap: 6px; padding: 6px; } .og-su-t { font-size: 14px; } }
.og-bodybox { display: flex; justify-content: center; }
.og-body { position: relative; height: clamp(300px, 58vh, 540px); aspect-ratio: 300 / 640; background: #fff; border: 3px solid var(--line); border-radius: 18px; cursor: pointer; touch-action: manipulation; }
.og-body.hot { border-color: var(--og); background: #ecfdf5; }
.og-bsvg, .og-bsvg svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.og-slot { position: absolute; border: 3px dashed var(--og); border-radius: 50%; opacity: .7; pointer-events: none; }
.og-pl { position: absolute; display: block; pointer-events: none; animation: og-pop .45s ease-out; }
.og-pl svg { width: 100%; height: 100%; display: block; }
@keyframes og-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.og-su-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; }
.og-su-t { margin: 0; text-align: center; color: var(--ink); font-size: clamp(15px, 1.8vw, 19px); }
.og-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: flex-start; min-height: 56px; padding: 8px; border: 2px dashed var(--line); border-radius: 16px; background: #fff; }
.og-tc { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(84px, 14vw, 112px); min-height: 70px; padding: 4px 4px 6px; border-radius: 14px; border: 3px solid var(--og); background: #fff; color: var(--ink); font: 800 13px/1.2 var(--font); cursor: grab; touch-action: none; box-shadow: 0 4px 0 rgba(190,24,93,.25); overflow-wrap: anywhere; text-align: center; }
.og-tc.sel { background: #fef9c3; border-color: #ca8a04; box-shadow: 0 0 0 4px rgba(250,204,21,.6); }
.og-tc.placed { display: none; }
.og-tc:disabled { cursor: default; }
.og-letak { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; color: var(--ink); font-size: clamp(14px, 1.5vw, 16px); }
.og-letak ul { margin: 0; padding-left: 18px; line-height: 1.5; }

/* jalur */
.og-jl-top { text-align: center; }
.og-jl-top p { margin: 2px 0 0; color: var(--muted); font-weight: 700; font-size: clamp(14px, 1.6vw, 17px); }
.og-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 4px; justify-content: center; align-items: center; }
.og-lk { display: flex; align-items: center; gap: 4px; }
.og-arrow { color: var(--muted); font-weight: 800; font-size: 22px; }
.og-jslot { position: relative; width: clamp(88px, 13vw, 118px); min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 4px 6px; border-radius: 16px; border: 3px dashed #94a3b8; background: #f8fafc; color: var(--ink); font: 800 13px/1.2 var(--font); cursor: pointer; text-align: center; overflow-wrap: anywhere; touch-action: manipulation; }
.og-jslot .no { position: absolute; top: -9px; left: -7px; width: 26px; height: 26px; border-radius: 50%; background: var(--og); color: #fff; display: grid; place-items: center; font-size: 14px; }
.og-jslot .t.e { color: var(--muted); font-weight: 600; }
.og-jslot.fill { border-style: solid; border-color: var(--og); background: var(--og-soft); }
.og-jslot.want, .og-jslot.hot { border-style: solid; border-color: #ca8a04; background: #fef9c3; }
.og-jslot.good { background: #bbf7d0; border-color: var(--ok); }
.og-jslot.bad { background: #fecdd3; border-color: var(--bad); animation: og-shake .35s; }
.og-jslot:disabled { cursor: default; opacity: 1; }
.og-jslot .tok { display: none; position: absolute; right: -4px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--tk); border: 3px solid #1f2937; }
.og-jslot.go { box-shadow: 0 0 0 4px rgba(245,158,11,.7); transform: scale(1.06); transition: transform .2s; }
.og-jslot.go .tok { display: block; animation: og-pulse .7s ease-in-out infinite; }
@keyframes og-pulse { 50% { transform: scale(1.3); } }

/* hasil */
.og-score { display: flex; flex-direction: column; gap: 4px; font-size: clamp(15px, 2vw, 22px); margin-bottom: 6px; }
.og-recap { text-align: left; max-height: 36vh; overflow: auto; margin: 6px 0; }
.og-recap:empty { display: none; }
.og-recap h3 { margin: 4px 0 6px; font-size: 16px; }
.og-recap ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.og-recap li span { display: block; color: var(--muted); }

@media (max-height: 520px) {
  #overlay-result .trophy { display: none; } #overlay-result .winner { font-size: 30px; margin: 0; } #overlay-result .panel { padding-top: 14px; }
  .og-wrap { gap: 4px; padding: 4px 8px; }
  .og-prompt { min-height: 56px; border-width: 3px; padding: 4px 10px; }
  .og-prompt .og-pic { --ps: 64px; }
  .og-hu-pic .og-pic { --ps: 90px; }
  .og-opt { min-height: 46px; border-width: 3px; }
  .og-opts { grid-template-columns: repeat(2, 1fr); }
  .og-body { height: 300px; }
  .og-su { grid-template-columns: auto 1fr; }
  .og-recap { max-height: 28vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.og-fixed { position: relative; width: clamp(88px, 13vw, 118px); min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border-radius: 16px; border: 3px solid #cbd5e1; background: #f1f5f9; color: var(--ink); font: 800 13px/1.2 var(--font); text-align: center; }
.og-fixed small { font-weight: 600; color: var(--muted); font-size: 11px; }
.og-fixed .tok { display: none; position: absolute; right: -4px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--tk); border: 3px solid #1f2937; }
.og-fixed.go { box-shadow: 0 0 0 4px rgba(245,158,11,.7); transform: scale(1.06); transition: transform .2s; }
.og-fixed.go .tok { display: block; animation: og-pulse .7s ease-in-out infinite; }