/* Shared styles for the quiz hub, prefecture pages and player. */
:root{color-scheme:dark;--ink:#e8edf5;--muted:#b1bfd2;--blue:#91c1ff;--blue-deep:#bedcff;--line:#31456a;--gold:#f2cf83;--ivory:#202a3b;--soft:#1e3455;--card:#15233c;--primary:#2a64c0;--primary-hover:#2357aa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#10254a 0%,#0c1a33 38%,#0a1120 100%);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:var(--blue);text-underline-offset:3px}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.container{width:min(100% - 36px,1000px);margin:0 auto}
.site-header{border-bottom:1px solid var(--line);background:#0c1a33e8;padding:16px 0}
.site-header .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-size:1.05rem;font-weight:800;text-decoration:none;letter-spacing:.03em}
.site-header nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem}
.breadcrumb{font-size:.8rem;color:var(--muted);padding:18px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.hero{padding:36px 0 32px;max-width:740px}
.hero h1{font-size:clamp(1.7rem,5vw,2.65rem);line-height:1.45;letter-spacing:.035em;margin:6px 0 16px}
.eyebrow{font-size:.77rem;letter-spacing:.12em;font-weight:800;color:var(--gold);margin:0 0 8px}
.lead{color:var(--muted);font-size:1rem;max-width:700px}
.muted{color:var(--muted);font-size:.92rem}
.question-preview{margin:28px 0}.question-preview h2,.quiz-howto h2{font-size:1.25rem;margin-top:0}.question-preview li{margin:10px 0}.quiz-howto li{margin:8px 0}
.app-features{margin:48px 0 20px}.app-features h2{font-size:clamp(1.4rem,4vw,2rem);line-height:1.5;margin:8px 0 14px}
.quiz-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0}.quiz-showcase figure{margin:0;min-width:0}.quiz-showcase img{display:block;width:min(100%,240px);height:auto;margin:0 auto 18px;border:1px solid #536c91;border-radius:18px;box-shadow:0 14px 32px #0006}.quiz-showcase figcaption strong{display:block;font-size:1.05rem;color:var(--gold);margin-bottom:8px}.quiz-showcase figcaption span{display:block;color:var(--muted);font-size:.9rem}
@media(max-width:600px){.quiz-showcase{grid-template-columns:1fr;gap:32px}.quiz-showcase figure{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:center}.quiz-showcase img{margin:0}.quiz-showcase figcaption strong{font-size:1rem}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 32px #00000026}
.section-heading{margin:42px 0 18px;font-size:1.35rem}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin:20px 0 36px}
.pref-card{display:block;background:var(--card);padding:17px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:transform .18s,box-shadow .18s;color:var(--ink)}
.pref-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #00000040;border-color:#7aa5d5}
.pref-card strong{display:block;font-size:1.1rem}
.pref-card span,.pref-card small{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}
.app-cta{background:var(--ivory);border:1px solid #66583d;border-radius:22px;padding:28px;margin:32px 0;text-align:center}
.app-cta h2{font-size:1.3rem;line-height:1.55;margin:0 0 10px}
.app-cta p{color:var(--muted);margin:8px auto;max-width:650px}
.store-links,.related-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.button{border:1px solid var(--primary);display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;background:var(--primary);border-radius:12px;color:#fff;text-decoration:none;font-weight:750;line-height:1.5;transition:background .15s,transform .15s}
.button:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}
.button.secondary{background:var(--card);color:var(--blue);border-color:#536c91}
.button.secondary:hover{background:var(--soft)}
.button:disabled{opacity:.48;cursor:default}
.related-links{justify-content:flex-start;margin:28px 0}
.related-links h2{width:100%;font-size:1.3rem;margin:0}
.related-links a{border:1px solid var(--line);border-radius:30px;padding:7px 16px;background:var(--card);font-size:.9rem}
.question-bank{margin:36px 0}
.question-bank h2{font-size:1.3rem}
.question-bank details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.question-bank details details{background:#102039;border:0;border-left:3px solid #536c91;border-radius:0;margin:10px 0;padding:10px 14px}
.question-bank summary{cursor:pointer;font-weight:700;min-height:28px}
.question-bank li{padding-bottom:8px}
.question-bank p{margin:10px 0 0}
.site-footer{margin-top:48px;padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.site-footer .container{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.quiz-player{max-width:760px;margin:0 auto 32px;padding:32px;background:linear-gradient(135deg,#15233c,#19283e);border-color:#465777;scroll-margin-top:16px}
.quiz-title{font-size:clamp(1.2rem,3.8vw,1.65rem);line-height:1.65;margin:12px 0 20px}
.quiz-title:focus:not(:focus-visible){outline:none}
.quiz-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:24px 0 16px}
.quiz-level{background:var(--card);color:var(--ink);border:1px solid #536c91;border-radius:12px;padding:12px 8px;min-height:76px;line-height:1.5}
.quiz-level span{display:block;font-weight:750}
.quiz-level small{color:var(--muted);display:block;margin-top:5px}
.quiz-level[aria-pressed="true"]{background:#213d61;border:2px solid var(--blue);padding:11px 7px}
.quiz-level[aria-pressed="true"] span{color:var(--blue-deep)}
.quiz-set-summary{font-size:.9rem;color:var(--muted)}
.quiz-player progress{display:block;appearance:none;width:100%;height:6px;border:0;border-radius:10px;background:#31456a;accent-color:var(--blue);margin:10px 0 24px;overflow:hidden}
.quiz-player progress::-webkit-progress-bar{background:#31456a}
.quiz-player progress::-webkit-progress-value{background:var(--blue);border-radius:10px}
.quiz-choices{display:grid;gap:12px}
.quiz-choice{display:block;width:100%;text-align:left;background:var(--card);border:1px solid #536c91;border-radius:12px;padding:15px 18px;min-height:56px;color:var(--ink);line-height:1.55;overflow-wrap:anywhere}
.quiz-choice:hover:not(:disabled){border-color:var(--blue);background:#1e3455}
.quiz-choice:disabled{cursor:default;opacity:1;color:var(--muted)}
.quiz-choice.is-correct{background:#183b30;border:2px solid #6bbb8c;color:#a1e4b9;padding:14px 17px}
.quiz-choice.is-wrong{background:#432d29;border-color:#cf9275;color:#ffbc9e}
.quiz-feedback{min-height:32px;margin:18px 0;font-weight:700}
.quiz-feedback.is-correct{color:#a1e4b9}
.quiz-feedback.is-wrong{color:#ffbc9e}
.quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.quiz-actions .button{flex:1 1 200px}
.quiz-result{text-align:center;animation:quiz-appear .4s ease-out}
.quiz-medal{display:grid;place-items:center;margin:8px auto 16px;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#fff2c8,#ead08a);border:3px double #a77b2f;box-shadow:0 8px 22px #a77b2f20;color:#8c6421;font-size:2.3rem}
.quiz-score{font-size:clamp(2.5rem,9vw,3.8rem);font-variant-numeric:tabular-nums;line-height:1.1;font-weight:800;color:var(--blue-deep);margin:16px 0 4px}
.quiz-result>.muted{margin:0 0 20px}
.quiz-review{text-align:left;border-top:1px solid #465777;margin-top:30px;padding-top:12px}
.quiz-review h3{font-size:1.1rem}
.quiz-review ol{padding-left:24px}
.quiz-review li{padding:6px 0 14px}
.quiz-review p{margin:0 0 4px}
.quiz-review strong{font-size:.95rem;color:#a1e4b9}
@keyframes quiz-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.container{width:calc(100% - 28px)}.hero{padding-top:24px}.card,.quiz-player{padding:22px 18px;border-radius:18px}.quiz-levels{grid-template-columns:repeat(3,1fr)}.quiz-level{min-height:68px}.app-cta{padding:24px 18px}.pref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pref-card{padding:14px 12px}.site-header nav{gap:12px}.quiz-actions{gap:10px}.store-links .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}