/* QUIZ KING / production UI foundation. All text stays in HTML. */
:root{--paper:#FFF8E8;--sky:#8BC6D4;--ink:#202B32;--red:#C33224;--blue:#154F79;--green:#176A50;--yellow:#E6B328;--muted:#5D6668;--line:3px;--radius:14px;--gap:16px;--tap:56px}
.qk{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
.qk button{font:inherit;font-weight:700;min-height:var(--tap);border:var(--line) solid var(--ink);border-radius:var(--radius);padding:12px 20px;background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation}
.qk button:focus-visible{outline:4px solid var(--blue);outline-offset:4px}
.qk button:active:not(:disabled){transform:translateY(2px)}
.qk button:disabled{cursor:default;opacity:.55}
.qk .primary{background:var(--red);color:white;border-color:var(--red)}
.qk .secondary{background:var(--blue);color:white;border-color:var(--blue)}
.qk .answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.qk .answer{overflow-wrap:anywhere;font-size:clamp(18px,2.2vw,28px);min-height:80px;text-align:left}
.qk .is-correct{border-color:var(--green);background:#E6F1E5}
.qk .is-wrong{border-color:var(--red);background:#FBE9E1}
.qk .question{font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.5}
.qk .character{object-fit:contain;transform-origin:50% 90%}
.qk .react-happy{animation:qk-hop .45s ease-out 2}
@keyframes qk-hop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-3deg)}}
@media(max-width:640px){.qk .answers{grid-template-columns:1fr}.qk .answer{min-height:64px}.qk .question{font-size:24px}}
@media(prefers-reduced-motion:reduce){.qk *{animation:none!important;transition:none!important}}