:root{color-scheme:light;--ink:#20334c;--paper:#fff8e8;--cream:#fffdf7;--coral:#ef786b;--line:#304c68}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% 5%,#ffe1a7 0 4%,transparent 22%),var(--paper);font-family:Nunito,"Trebuchet MS",sans-serif}button,a{font:inherit;min-height:44px}button{cursor:pointer}button:disabled{cursor:default;opacity:.58}:focus-visible{outline:4px solid #193b64;outline-offset:4px}[hidden]{display:none!important}.game-bar{min-height:64px;display:flex;justify-content:space-between;align-items:center;padding:10px clamp(12px,3vw,42px);background:#fffdf7cc;border-bottom:2px solid #e8d9be;gap:8px}.game-bar a,.game-bar button,.secondary-link{padding:9px 13px;border:2px solid var(--line);border-radius:14px;background:#fffdf7;color:var(--ink);font-weight:900;text-decoration:none}main{width:min(1160px,100%);margin:auto;padding:26px 16px 52px}.panel,.cabinet-card{background:var(--cream);border:3px solid var(--line);border-radius:26px;box-shadow:0 7px 0 #304c6829}.start-card{max-width:700px;margin:5vh auto;text-align:center;padding:clamp(24px,5vw,48px)}.eyebrow{margin:0 0 8px;color:#885449;font-weight:900;letter-spacing:.11em;font-size:.77rem}.start-card h1,.play-head h1{margin:0 0 12px;font-size:clamp(2.25rem,7vw,4.25rem);line-height:1}.start-card p:not(.eyebrow),.study-actions p,.build-tools p,.panel p{font-size:1.08rem;line-height:1.5}.primary{border:3px solid var(--line);border-radius:16px;padding:11px 20px;background:var(--coral);color:#1c3048;font-weight:900;box-shadow:0 3px 0 #b95a52}.text-button{border:0;background:transparent;color:#334e73;text-decoration:underline;font-weight:800}.mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:25px 0 18px}.mode-button{min-height:104px;border:3px solid #b9a9d8;border-radius:20px;padding:12px;background:#f4f0ff;color:var(--ink);text-align:left}.mode-button strong,.mode-button span{display:block}.mode-button strong{font-size:1.2rem}.mode-button span{font-size:.9rem;line-height:1.35;margin-top:5px}.mode-button.is-selected{border-color:var(--line);background:#e8e1ff;box-shadow:0 3px 0 #8d7aae}.help-panel{max-width:680px;margin:5vh auto;padding:clamp(24px,5vw,42px)}.help-panel li{margin:12px 0;line-height:1.45}.help-example{background:#f4f0ff;border:2px solid #bdafcf;border-radius:16px;padding:14px}.help-example p{margin-bottom:0}.mini-cabinet{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.mini-pocket{min-height:42px;display:grid;place-items:center;border:2px solid #8b6b57;border-radius:8px;background:#fff8de;font-size:.72rem;font-weight:800;overflow:hidden}.mini-pocket svg{width:28px;height:30px;stroke:currentColor;stroke-width:6;fill:#f3a06e}.play-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:18px}.play-head h1{font-size:clamp(2rem,5vw,3.3rem)}#support-label{margin:0;color:#704f77;font-weight:800}.stamp{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:5px;border:2px solid var(--line);border-radius:50%;background:#fff;font-weight:900}.stamp.done{background:#f6cf70}.study-actions,.build-tools,#compare,#correct{padding:18px 22px;margin:15px 0}.study-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.study-actions p{flex:1;margin:0}.cabinet-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.cabinet-card{padding:16px;background:#294a70;color:#fffdf7}.cabinet-card h2{margin:0 0 12px;font-size:1.25rem}.pockets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pocket{min-height:138px;border:3px solid #183858;border-radius:18px;background:#d9b887;box-shadow:inset 0 0 0 5px #a66f4f;color:#26384e;display:grid;place-items:center;padding:7px}.pocket:not(:disabled):hover{background:#f2d5a5}.pocket.has-object{background:#fff8de}.pocket.is-different{border-color:#b44d45;box-shadow:inset 0 0 0 5px #f3ada5}.pocket svg,.tray-object svg{width:64px;height:70px;stroke:currentColor;stroke-width:6;fill:#f3a06e;stroke-linecap:round;stroke-linejoin:round}.pocket span,.tray-object span{display:block;font-weight:900}.empty-mark,.closed-mark{font-size:2rem}.pocket.closed{background:#183858;color:#f6d584;box-shadow:inset 0 0 0 5px #496989}.work-card{background:#e7dce9;color:var(--ink)}.work-card .pocket{background:#fffaf0}.build-tools h2{margin:0}.tray{display:flex;flex-wrap:wrap;gap:10px;margin:13px 0}.tray-object{min-width:88px;min-height:104px;padding:7px;border:3px solid #bdafcf;border-radius:17px;background:#f4f0ff;color:var(--ink)}.tray-object.selected{border-color:var(--line);background:#e7d9fb;transform:translateY(-3px)}.tray-object.placed{border-style:dashed;background:#e7edf1}.tray-object.placed svg{opacity:.55}.action-row{display:flex;gap:9px;flex-wrap:wrap}.action-row button:not(.primary){border:2px solid var(--line);border-radius:13px;padding:8px 12px;background:#fff;color:var(--ink);font-weight:800}#feedback{min-height:26px;margin:12px 0 0;font-weight:900;color:#714841}#compare{border-color:#bd8278;background:#fff3ec}#correct{border-color:#679f83;background:#eff9e9}.secondary-link{display:inline-block;margin-left:8px}.start-card ol{text-align:left;max-width:390px;margin:20px auto}.start-card li{margin:8px 0}#completion-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px}.completed-picture{list-style:none;text-align:left}.completed-picture p{margin:7px 0 0;font-weight:900}[data-game-information]{max-width:760px;margin:0 auto 40px;padding:20px;border-top:2px solid #b7a98e;line-height:1.5}@media(max-width:700px){main{padding:15px 10px 35px}.game-bar{min-height:58px}.mode-choice,.cabinet-layout,#completion-list{grid-template-columns:1fr}.play-head{display:block}.pocket{min-height:116px}.cabinet-layout{gap:13px}.study-actions{display:block}.study-actions button{margin-top:12px}.stamp{margin:8px 4px 0 0}.action-row button{flex:1}.tray-object{flex:1;min-width:78px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the two cabinets close enough to compare on small screens. */
.pocket { min-height: 100px; }
.pocket:disabled { opacity: 1; }
.pocket svg { width: 44px; height: 48px; }
@media (max-width: 700px) {
  .cabinet-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cabinet-card { padding: 8px; border-radius: 16px; }
  .cabinet-card h2 { font-size: 1rem; min-height: 2.4em; margin-bottom: 6px; }
  .pockets { gap: 6px; }
  .pocket { min-height: 76px; padding: 4px; border-radius: 12px; }
  .pocket svg { width: 32px; height: 36px; }
  .pocket span { font-size: .75rem; }
  .pocket .closed-mark, .pocket .empty-mark { font-size: 1.5rem; }
  .play-head h1 { font-size: 2rem; }
  .build-tools { padding: 12px; }
  .tray-object { min-width: 64px; min-height: 80px; }
  .tray-object svg { width: 38px; height: 42px; }
}
@media (max-height: 500px) {
  .build-tools { padding: 10px 16px; }
  .build-tools p { margin: 6px 0; }
  .tray { margin: 8px 0; }
  .tray-object { min-height: 64px; }
  .tray-object svg { width: 28px; height: 30px; }
}

@media (max-width: 700px) {
  .play-head { margin-bottom: 10px; }
  .play-head h1 { font-size: 1.75rem; margin-bottom: 4px; }
  .play-head .eyebrow { margin-bottom: 4px; }
  #support-label { font-size: .875rem; }
  .stamp { width: 30px; height: 30px; margin-top: 4px; }
  .pocket { min-height: 68px; }
  .cabinet-card h2 { min-height: 2em; }
  .tray-object { min-height: 68px; }
  .tray-object svg { width: 30px; height: 34px; }
  #complete { margin: 15px auto; padding: 18px; }
  #complete h1 { font-size: 2rem; }
  #completion-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 8px; margin: 14px 0; }
  .completed-picture .mini-pocket { min-height: 40px; font-size: .6rem; }
  .completed-picture svg { width: 20px; height: 22px; }
  .completed-picture p { font-size: .85rem; margin: 4px 0; }
}

@media (max-width: 700px) {
  .build-tools #build-copy { margin: 8px 0; font-size: 1rem; line-height: 1.35; }
  .tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
  .tray-object { min-width: 48px; padding: 4px; font-size: .875rem; }
}

@media (max-height: 850px) and (min-width: 701px) {
  .play-head h1 { font-size: 2rem; }
  .pocket { min-height: 72px; }
  .pocket svg { width: 32px; height: 36px; }
  .build-tools { padding: 12px 18px; }
  .build-tools p { margin: 6px 0; }
  .tray-object { min-height: 72px; }
  .tray-object svg { width: 36px; height: 40px; }
  #complete { margin: 16px auto; padding: 24px; }
  #complete h1 { font-size: 2.5rem; }
  #completion-list { margin: 12px auto; padding: 0; }
  .completed-picture p { margin: 4px 0; }
}

@media (max-height: 500px) and (min-width: 600px) {
  .game-bar { min-height: 52px; padding-block: 4px; }
  main { padding-top: 10px; }
  #welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 0 auto; padding: 12px; }
  #welcome > .eyebrow, #welcome > h1, #welcome > p { grid-column: 1; margin: 0; }
  #welcome h1 { font-size: 2rem; }
  #welcome > p:not(.eyebrow) { font-size: 1rem; line-height: 1.3; }
  #welcome .mode-choice { grid-column: 2; grid-row: 1 / 4; margin: 0; gap: 8px; }
  #welcome .mode-button { min-height: 48px; padding: 8px; }
  #welcome #start { grid-column: 1; min-height: 48px; }
  #welcome #help { grid-column: 2; min-height: 48px; }
}