@font-face{font-family:Pixel;src:url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ink:#1f2937;--cream:#fffbeb;--pink:#fb7185;--yellow:#facc15}
*{box-sizing:border-box}
html{min-height:100%;background:#fde68a}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;color:var(--ink);font-family:'Trebuchet MS',Verdana,Arial,sans-serif;background-color:#fde68a;background-image:linear-gradient(45deg,#f5d37444 25%,transparent 25%,transparent 75%,#f5d37444 75%),linear-gradient(45deg,#f5d37444 25%,transparent 25%,transparent 75%,#f5d37444 75%);background-position:0 0,16px 16px;background-size:32px 32px}
#app{width:100%;display:grid;place-items:center;min-width:0}
.stage{position:relative;width:min(100vw,52.53846154vh,480px);width:min(100vw,52.53846154dvh,480px);aspect-ratio:1024.5/1950;background-size:100% 100%;background-repeat:no-repeat;container-type:inline-size;isolation:isolate;animation:arrive .18s ease-out}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
.hot{position:absolute;display:block;border:0;padding:0;background:transparent;border-radius:12px;z-index:2}
button:focus-visible,#card:focus-visible{outline:3px solid #1f2937;outline-offset:3px;box-shadow:0 0 0 6px #fffbeb}
.hot:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px #fffbeb;background:#fffbeb22}
#card{position:absolute;left:5.56%;top:11%;width:88.77%;height:57.1%;border-radius:5.07% / 4.15%;padding:4%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9c7e64 transparent;font-size:15px;font-size:clamp(15px,4cqw,18px);line-height:1.6;overflow-wrap:anywhere;color:var(--ink);background:transparent;scroll-padding:16px}
#card p{margin:0 0 .85em}#card h2,#card h3{font-size:1.15em;line-height:1.4;margin:0 0 .8em}
#card img{max-width:100%;height:auto;vertical-align:middle}#card table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto;margin:.8em 0;font-size:.94em}#card th,#card td{border:1px solid #807663;padding:.4em .5em;min-width:3em}#card ul,#card ol{padding-left:1.4em}
#card .fraction,#card .frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.2}#card .fraction>:first-child,#card .frac>:first-child{border-bottom:1px solid currentColor}
.pixel-label,#item-count,.action{font-family:Pixel,monospace;font-size:10px;font-size:clamp(9px,2.45cqw,12px);line-height:1.8}
.pixel-label{display:block;margin:0 0 1.1em}#item-count{position:absolute;left:29%;top:70.7%;width:42%;height:3.7%;display:grid;place-items:center;margin:0;text-align:center}
.options{display:grid;gap:12px;margin:1em 0}.option{width:100%;display:flex;gap:10px;align-items:baseline;text-align:left;padding:10px 12px;background:var(--cream);border:2px solid var(--ink);border-radius:15px;box-shadow:2px 3px 0 #1f2937;font-size:inherit;line-height:1.5;overflow-wrap:anywhere}.option p:last-child{margin-bottom:0!important}.option-letter{font-weight:bold;flex:none}.option-copy{min-width:0}.option[aria-pressed=true]{background:var(--yellow);box-shadow:inset 0 0 0 2px #1f2937,2px 3px 0 #1f2937}.selection-mark{margin-left:auto;font-weight:bold;flex:none}.option.correct,.option[aria-pressed=true].correct{background:#dcfce7;border-color:#166534}.option.wrong,.option[aria-pressed=true].wrong{background:#fee2e2;border-color:#991b1b}.category-row{padding-bottom:12px;border-bottom:1px solid #9c8e76}.category-buttons{display:flex;gap:10px;margin-top:8px}.category-buttons .option{justify-content:center;flex-wrap:wrap;padding:9px 6px}
.action{display:inline-block;max-width:100%;padding:12px 14px;border:2px solid var(--ink);border-radius:18px;background:var(--pink);box-shadow:3px 4px 0 var(--ink);margin:4px 4px 14px 0;line-height:1.8}.action:disabled{background:#e9e3d7;box-shadow:1px 2px 0 var(--ink)}
.feedback{margin:14px 0 4px;padding:12px;background:var(--cream);border:2px solid var(--ink);border-radius:14px}.feedback[data-status=correct]{border-color:#166534}.feedback[data-status=wrong]{border-color:#991b1b}.feedback strong{display:block;margin-bottom:.6em}.feedback p:last-child{margin-bottom:0!important}
.score-panel{position:absolute;top:12%;left:12%;width:76%;height:24%;padding:3%;overflow:auto;background:var(--cream);border:2px solid var(--ink);border-radius:18px;text-align:center;line-height:1.5;font-size:clamp(13px,3.8cqw,17px)}#score{font-weight:bold;font-size:1.2em}.score-panel p{margin:.35em 0}.score-panel .action{background:var(--yellow);margin-top:.5em;padding:8px 10px}
[hidden]{display:none!important}
@keyframes arrive{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

#card.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
.stage:has(#card.more)::after{content:'\25BC  geser ke bawah';position:absolute;left:0;right:0;top:68.35%;width:max-content;margin:0 auto;padding:2px 8px;border-radius:999px;background:var(--cream);border:1.5px solid var(--ink);text-align:center;font:8px 'Press Start 2P',monospace;color:var(--ink);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.stage:has(#card.more)::after{animation:nudge 1.4s ease-in-out infinite}}@keyframes nudge{50%{transform:translateY(3px)}}