/* Aptitude Test (counting-order puzzle) page */
#cop { --ink:#1f2a37; --card:#fff; --accent:#2f3192; --good:#1a9b5b; --bad:#d9534f; --slot:#fff6d6; --size:100px;
       color: var(--ink); width: 100%; max-width: 1100px; margin: 0 auto; }
@media (max-width: 600px) {
  #cop { --size:72px; }
  #cop #cop-stage { padding: 4px 12px 24px; }
  #cop #cop-scatter { height: clamp(228px, calc(100svh - 470px), 420px); }
  #cop #cop-slots { grid-template-columns: repeat(3, calc(var(--size) + 8px)); justify-content: center; gap: 8px; margin-top: 12px; }
  #cop .cop-slot:nth-child(3n) .cop-arrow { display: none; }
}
#cop * { box-sizing: border-box; }
#cop-msg { min-height: 1.4em; font-weight: 600; }
#cop-msg.bad { color: var(--bad); }
#cop-stage { position: relative; max-width: 1100px; margin: 0 auto; padding: 8px 16px 32px; user-select: none; -webkit-user-select: none; }
#cop-scatter { position: relative; height: 520px; border: 2px dashed #cfc6b3; border-radius: 16px; background: #fbf9f4; }
#cop-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--size) + 8px), 1fr)); gap: 10px; margin-top: 16px; }
#cop .cop-slot { height: calc(var(--size) + 8px); border-radius: 14px; background: var(--slot); border: 2px dashed #e6b422; position: relative; transition: background .15s; }
#cop .cop-slot.hover { background: #e4e5f6; border-color: var(--accent); }
#cop .cop-arrow { position: absolute; top: 50%; right: -9px; transform: translateY(-50%); font-size: 12px; color: #f7941d; }
#cop .cop-card { position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); background: var(--card); border-radius: 14px;
        box-shadow: 0 2px 6px rgba(0,0,0,.15); display: grid; align-content: center; justify-content: center;
        gap: 3px; padding: 6px; cursor: grab; z-index: 1; overflow: hidden; touch-action: none; }
#cop .cop-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; display: block;
        pointer-events: none; -webkit-user-drag: none; user-select: none; }
#cop .cop-card.single img { aspect-ratio: auto; height: 100%; object-fit: contain; }
#cop .cop-card.single { padding: 4px; }
#cop .cop-card.snap { transition: left .2s, top .2s; }
#cop .cop-card.dragging { cursor: grabbing; box-shadow: 0 12px 26px rgba(0,0,0,.25); z-index: 1000; transform: scale(1.06); }
#cop .cop-card.wrong { animation: cop-shake .45s; outline: 2px solid var(--bad); }
@keyframes cop-shake { 0%,100%{translate:0} 20%{translate:-6px} 40%{translate:6px} 60%{translate:-4px} 80%{translate:4px} }
.cop-icon { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent, #2f3192); color: #fff;
     font-size: 24px; line-height: 48px; text-align: center; text-decoration: none; cursor: pointer; display: inline-block; padding: 0; margin: 4px; }
.cop-icon:hover { filter: brightness(1.1); }
#cop .cop-skip { display: none; }
#cop .cop-skip.show { display: inline-block; }
#cop-overlay { position: fixed; inset: 0; background: rgba(20,25,35,.55); display: none; align-items: center; justify-content: center; z-index: 9000; padding: 16px; }
#cop-overlay.show { display: flex; }
#cop-overlay .cop-modal { background: #fff; color: #1f2a37; border-radius: 20px; padding: 28px 24px; max-width: 420px; width: 100%; text-align: center; animation: cop-pop .35s ease-out; font-family: system-ui, sans-serif; }
#cop-overlay .cop-modal h2 { margin: 0 0 8px; font-size: 2rem; color: #1a9b5b; }
#cop-overlay .cop-ghost { background: #e4e5f6; color: #2f3192; }
@keyframes cop-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cop-confetti { position: fixed; top: -30px; font-size: 22px; pointer-events: none; z-index: 9100; animation: cop-fall linear forwards; }
@keyframes cop-fall { to { transform: translateY(110vh) rotate(540deg); } }
  
/* toolbar: intro line + shuffle button */
#cop .cop-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 16px; }
#cop .cop-intro { margin: 0; font-weight: 700; color: #2f3192; font-size: 1.05rem; }
.puzzle-page .page-title { margin-bottom: 10px; }
@media (max-width: 600px) {
  #cop div.cop-bar { padding: 0 12px; }
  #cop .cop-intro { font-size: .95rem; }
  #cop .cop-icon { width: 40px; height: 40px; line-height: 40px; font-size: 20px; margin: 2px; }
  .puzzle-page .page-title { font-size: 1.55rem; margin: 0 0 6px; }
  .puzzle-page .page-title::after { margin-top: 6px; }
}
.puzzle-page { padding: 28px 0 8px; }
#cop-scatter { height: clamp(300px, calc(100vh - 470px), 520px); }
@media (max-width: 600px) {
  .puzzle-page { padding-top: 12px; }
  #cop #cop-scatter { height: clamp(228px, calc(100svh - 470px), 420px); }
}

/* 5 cards: bigger cards, the 5 boxes centred in one row */
#cop { --size: 136px; }
#cop-scatter { height: clamp(260px, calc(100vh - 500px), 380px); }
#cop #cop-slots { grid-template-columns: repeat(5, calc(var(--size) + 8px)); justify-content: center; gap: 22px; }
@media (max-width: 860px) {
  #cop { --size: 100px; }
  #cop #cop-slots { grid-template-columns: repeat(5, calc(var(--size) + 8px)); gap: 12px; }
}
@media (max-width: 600px) {
  #cop { --size: 72px; }
  #cop #cop-scatter { height: clamp(190px, calc(100svh - 390px), 300px); }
  #cop #cop-slots { grid-template-columns: repeat(3, calc(var(--size) + 8px)); gap: 8px; }
}