:root { color-scheme: light; --ink:#18324a; --blue:#176b87; --blue-dark:#0d4d65; --cream:#f5fbf8; --yellow:#ffd66b; --line:#b8d2d8; --ok:#176b45; --review:#8a4b00; }
* { box-sizing:border-box; }
html { font-size:18px; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(160deg,#e9f7f3,#fff9e9); font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.65; }
button { font:inherit; }
.app { min-height:100vh; padding:clamp(16px,4vw,40px); }
.screen { min-height:calc(100vh - clamp(32px,8vw,80px)); display:grid; place-items:center; }
.screen[hidden] { display:none; }
.panel,.quiz-shell,.result-shell { width:min(100%,1180px); background:#fff; border:3px solid #d5e7e5; border-radius:28px; box-shadow:0 10px 30px rgba(24,50,74,.1); padding:clamp(24px,4vw,44px); text-align:center; }
.panel,.result-shell { max-width:760px; }
.eyebrow { display:inline-block; margin:0 0 12px; padding:5px 16px; border-radius:999px; background:#e7f5ef; color:var(--blue-dark); font-weight:800; }
h1 { margin:.15em 0 .45em; font-size:clamp(2rem,7vw,3.6rem); line-height:1.3; letter-spacing:.04em; }
h2 { margin:0 0 24px; font-size:clamp(1.8rem,5vw,2.7rem); }
.lead,.instruction { font-size:clamp(1.2rem,3vw,1.55rem); font-weight:700; }
.button-stack { width:min(100%,430px); margin:34px auto 0; display:grid; gap:18px; }
.button-row,.answer-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.button { min-height:64px; min-width:190px; padding:12px 24px; border:3px solid transparent; border-radius:16px; font-weight:800; font-size:1.25rem; cursor:pointer; box-shadow:0 5px 0 rgba(24,50,74,.18); transition:transform .08s,box-shadow .08s,filter .15s; }
.button:hover { filter:brightness(.97); }
.button:active { transform:translateY(4px); box-shadow:0 1px 0 rgba(24,50,74,.22); }
.button:focus-visible { outline:5px solid var(--yellow); outline-offset:4px; }
.button:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; }
.primary { color:#fff; background:var(--blue); border-color:var(--blue-dark); }
.secondary { color:var(--ink); background:#fff; border-color:#7195a1; }
.take { color:#173f32; background:#d7f3e5; border-color:#267456; }
.leave { color:#563710; background:#fff0c7; border-color:#9b6b1f; }
.quiz-shell { padding-top:28px; }
.progress-area { width:min(100%,560px); margin:0 auto 22px; }
.progress-text { margin:0 0 7px; font-size:1.35rem; font-weight:900; }
.progress-track { height:20px; overflow:hidden; background:#e2ecee; border:2px solid #789aa4; border-radius:999px; }
.progress-fill { height:100%; width:0; background:var(--blue); transition:width .2s; }
.selection-guide { min-height:2em; margin:12px 0; padding:7px; font-size:1.12rem; font-weight:800; color:var(--blue-dark); }
.sorting-board { display:grid; gap:22px; text-align:left; }
.classified-zones { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.drop-zone { min-width:0; min-height:225px; padding:16px; border:4px dashed #789aa4; border-radius:22px; background:#f7fbfc; transition:border-color .12s,background .12s,box-shadow .12s; }
.drop-zone h3 { margin:0 0 10px; text-align:center; font-size:clamp(1.15rem,2.5vw,1.5rem); }
.take-zone { background:#f2faf7; border-color:#267456; }
.leave-zone { background:#fff9e9; border-color:#9b6b1f; }
.drop-zone.drag-over,.drop-zone.selected-target { border-style:solid; border-width:6px; background:#e7f4fa; box-shadow:0 0 0 5px var(--yellow); }
.drop-zone.drag-over .drop-hint::after { content:" — ここに おこう"; color:var(--blue-dark); font-weight:900; }
.drop-zone:focus-visible { outline:5px solid var(--yellow); outline-offset:4px; }
.drop-hint { margin:0 0 10px; text-align:center; color:#607681; font-weight:700; }
.drop-zone:has(.item-card) > .drop-hint { display:none; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; align-items:start; }
.item-card { position:relative; min-width:120px; min-height:150px; padding:10px; display:grid; place-items:center; align-content:center; background:#fff; border:4px solid #557783; border-radius:18px; box-shadow:0 3px 8px rgba(24,50,74,.13); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.item-card img { width:95px; height:88px; object-fit:contain; pointer-events:none; }
.item-card h4 { margin:7px 0 0; text-align:center; font-size:1rem; line-height:1.35; pointer-events:none; }
.item-card:focus-visible { outline:6px solid var(--yellow); outline-offset:3px; }
.item-card.selected { border:7px solid var(--blue-dark); background:#e8f7fb; }
.item-card.dragging { position:fixed; z-index:1000; width:145px; min-height:160px; transform:translate(-50%,-115%) scale(1.06); pointer-events:none; box-shadow:0 18px 35px rgba(24,50,74,.35); cursor:grabbing; }
.card-placeholder { min-width:120px; min-height:150px; border:4px dashed #9eb3ba; border-radius:18px; background:#eef4f5; opacity:.65; }
body.is-dragging { overflow:hidden; user-select:none; -webkit-user-select:none; }
.sorting-actions { margin-top:25px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.sorting-actions .button { min-width:180px; }
.button[aria-disabled="true"] { opacity:.58; }
.dialog-backdrop { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(15,38,53,.62); }
.dialog-backdrop[hidden] { display:none; }
.confirm-dialog { width:min(100%,560px); padding:35px; border:4px solid var(--blue-dark); border-radius:24px; background:#fff; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.button.small { min-width:170px; font-size:1.05rem; }
.score-text { font-size:clamp(1.5rem,4vw,2.15rem); font-weight:900; }
.result-message { padding:15px; background:#edf7f3; border-radius:16px; font-size:1.35rem; font-weight:800; white-space:pre-line; }
.result-list { display:grid; gap:18px; margin:28px 0; text-align:left; }
.result-card { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:20px; border:3px solid var(--line); border-radius:20px; background:#fff; }
.result-card.correct { border-left:12px solid var(--ok); }
.result-card.incorrect { border-left:12px solid var(--review); background:#fffaf0; }
.result-card img { width:110px; height:110px; object-fit:contain; align-self:center; }
.result-card h3 { margin:0 0 6px; font-size:1.35rem; }
.result-card p { margin:3px 0; }
.status { font-size:1.15rem; font-weight:900; }
.correct .status { color:var(--ok); }
.incorrect .status { color:var(--review); }
.reason { margin-top:10px!important; padding-top:10px; border-top:2px dashed #c8d8db; font-weight:700; }
.result-buttons { position:sticky; bottom:12px; padding:16px; background:rgba(255,255,255,.96); border-radius:18px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:600px) {
  html { font-size:16px; }
  .app { padding:10px; }
  .panel,.quiz-shell,.result-shell { border-radius:20px; padding:22px 16px; }
  .button-row .button { width:100%; max-width:none; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .item-card { min-height:145px; min-width:0; padding:8px; }
  .item-card img { width:82px; height:76px; }
  .sorting-actions .button { width:100%; }
  .result-card { grid-template-columns:80px 1fr; gap:12px; padding:15px; }
  .result-card img { width:76px; height:76px; }
  .result-buttons { position:static; }
}
@media (max-width:800px) { .classified-zones { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }