/* ---------- Grade games: Put in Order, Match Up, Word Detective, Reading Detective ----------
   (types/order.js, types/match.js, types/tapword.js; games in js/puzzles/games/words.js)
   Every one fits the puzzle window with no scrolling down to 568x320 (CLAUDE.md). */

/* a paper card, the look of the picture answers (.opt.pic) */
.or-card, .or-slot, .mt-card, .tw-chip {
  position: relative; border: none; cursor: pointer; font-family: var(--font); font-weight: 700; color: var(--ink2);
  background: linear-gradient(#fffcf6, var(--th-card-lo)); border-radius: 12px;
  box-shadow: inset 0 -5px 0 var(--th-card-sh), inset 0 3px 0 #fff, 0 0 0 3px var(--ink); transition: transform .12s, opacity .25s, filter .2s;
}
:is(.or-card, .mt-card, .tw-chip):hover:not(.done):not(.lock):not(.used) { transform: translateY(-2px); filter: brightness(1.04); }
:is(.or-card, .or-slot, .mt-card, .tw-chip):focus-visible { outline: 4px solid #ffd25a; outline-offset: 2px; }
:is(.or-card, .mt-card, .tw-chip).hinted { animation: pulseBox .9s ease-in-out 3; }
.or-card.glow, .tw-chip.glow { animation: pulseBox .9s ease-in-out infinite; }
/* the red ✗ on a wrong one, like a wrong answer button */
:is(.or-slot, .or-card, .mt-card, .tw-chip).bad { animation: wiggle .4s; background: linear-gradient(#ffe8e2, #f5cbc2); box-shadow: inset 0 -5px 0 #d79a8f, 0 0 0 3px #c8372b; }
:is(.or-slot, .or-card, .tw-chip).bad::after { content: '✖'; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 24px; text-align: center; color: #fff; background: #c8372b; box-shadow: 0 0 0 2px #fff; }
:is(.or-slot, .or-card, .tw-chip).good, .tw-chip.lock { background: linear-gradient(#d6f8d2, #a8e6a2); box-shadow: inset 0 -5px 0 #74c46c, 0 0 0 3px #1f6a28; color: #1f5a24; cursor: default; }

/* ---------- Put in Order ---------- */
.or-prompt, .mt-prompt, .tw-prompt { font-weight: 700; font-size: clamp(18px, min(3.4vw, 5.4vh), 34px); line-height: 1.15; text-align: center; color: var(--ink2); }
.or-prompt .big, .tw-prompt .big { font-size: 1.6em; vertical-align: middle; }
.or-strip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.or-ends { display: flex; align-items: center; gap: 8px; width: min(100%, 640px); font-weight: 700; font-size: clamp(12px, 2.4vh, 16px); color: #6b4f24; text-transform: uppercase; letter-spacing: .04em; }
.or-ends i { flex: 1; height: 4px; border-radius: 2px; background: #c9a56a; position: relative; }
.or-ends i::after { content: ''; position: absolute; right: -2px; top: -6px; border: 8px solid transparent; border-left: 12px solid #c9a56a; border-right: 0; }
.or-slots, .or-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.2vw, 12px); width: 100%; max-width: 760px; }
.or-slot { display: flex; align-items: center; justify-content: center; min-width: clamp(54px, 9vw, 96px); height: clamp(52px, 12vh, 90px); padding: 0 8px; color: #b49a70;
  background: rgba(255, 255, 255, .35); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .15), 0 0 0 3px var(--th-pz-line); border-radius: 12px; }
.or-slot .or-num { position: absolute; top: 2px; left: 6px; font-size: 11px; opacity: .6; }
.or-slot.filled { background: linear-gradient(#fffcf6, var(--th-card-lo)); box-shadow: inset 0 -5px 0 var(--th-card-sh), 0 0 0 3px var(--ink); color: var(--ink2); animation: popIn .2s; }
.or-slot.filled .or-num { display: none; }
.or-slot.filling { box-shadow: 0 0 0 3px #ffd25a; }
.or-card { display: flex; align-items: center; justify-content: center; min-width: clamp(54px, 9vw, 96px); height: clamp(48px, 11vh, 84px); padding: 0 10px; }
.or-card.used { opacity: .25; transform: scale(.92); cursor: default; }
.or-face, .or-in { display: flex; align-items: center; justify-content: center; font-size: clamp(20px, min(3.6vw, 5.6vh), 36px); line-height: 1.05; white-space: nowrap; }
.or-face .pic, .or-in .pic { font-size: 1.5em; }
.or-face small { display: block; font-size: .45em; color: #6b4f24; }
.flyer.or-fly { font-family: var(--font); font-weight: 700; font-size: 26px; color: var(--ink2); }
/* dot cards for the youngest (Order Up) */
.ou-dots { display: grid; grid-template-columns: repeat(3, .42em); gap: .08em; justify-content: center; font-size: 1.4em; }
.ou-dots i { width: .42em; height: .42em; border-radius: 50%; background: #c8372b; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2); }
/* long cards (sentences): numbered in place, one per row */
.or-list { display: flex; flex-direction: column; gap: clamp(5px, 1.2vh, 10px); width: min(100%, 720px); }
.or-long .or-ends { width: min(100%, 720px); }
.or-list .or-card { justify-content: flex-start; height: auto; min-height: clamp(36px, 8vh, 56px); padding: 6px 12px 6px 48px; text-align: left; }
.or-list .or-face { white-space: normal; justify-content: flex-start; font-size: clamp(14px, min(2.2vw, 3.6vh), 20px); line-height: 1.2; }
.or-list .or-num { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #b49a70; box-shadow: inset 0 0 0 3px #d8c4a0; }
.or-list .or-card.on .or-num, .or-list .or-card.good .or-num { color: #fff; background: #2a6fc4; box-shadow: 0 0 0 2px #fff; }
.or-list .or-card.good .or-num { background: #2e8a37; }

/* ---------- Match Up ---------- */
.mt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 6vw, 70px); width: min(100%, 720px); }
.mt-col { display: flex; flex-direction: column; gap: clamp(5px, 1.2vh, 10px); }
.mt-head { text-align: center; font-weight: 700; font-size: clamp(12px, 2.2vh, 15px); text-transform: uppercase; letter-spacing: .05em; color: #6b4f24; }
.mt-card { display: flex; align-items: center; justify-content: center; min-height: clamp(38px, 9vh, 70px); padding: 4px 10px; text-align: center; }
.mt-face { font-size: clamp(16px, min(2.8vw, 4.6vh), 30px); line-height: 1.12; }
.mt-card.pic .mt-face { font-size: clamp(28px, min(5vw, 8vh), 54px); }
.mt-long .mt-face { font-size: clamp(13px, min(2vw, 3.4vh), 19px); }
.mt-long .mt-card.l .mt-face { font-size: clamp(15px, min(2.4vw, 4vh), 23px); }
.mt-card.sel { transform: translateY(-3px) scale(1.03); box-shadow: inset 0 -5px 0 var(--th-card-sh), 0 0 0 4px #2a6fc4, 0 0 18px rgba(42, 111, 196, .6); }
.mt.armed .mt-card:not(.done):not(.sel) { animation: none; }
.mt-card.done { cursor: default; color: #fff; background: var(--pc); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 0 0 3px var(--ink); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); animation: popIn .25s; }
.mt-badge { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; font-size: 13px; line-height: 22px; color: var(--pc); background: #fff; box-shadow: 0 0 0 2px var(--ink); text-shadow: none; }
.mt-card.done .mt-badge { display: block; }
.mt-card.l .mt-badge { right: -12px; }
.mt-card.r .mt-badge { left: -12px; }

/* ---------- Word Detective ---------- */
.tw-sent { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(6px, 1.2vh, 10px) clamp(5px, 1vw, 10px); max-width: 780px; }
.tw-chip { padding: clamp(5px, 1.2vh, 10px) clamp(8px, 1.4vw, 14px); font-size: clamp(18px, min(3.4vw, 5.6vh), 34px); line-height: 1.1; }
.tw-chip.on { background: linear-gradient(#cfe2ff, #9ec2f5); box-shadow: inset 0 -5px 0 #6f98d4, 0 0 0 3px #1d3f78; transform: translateY(-3px); }
.tw-chip.pic { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; }
.tw-chip.pic .tw-face { font-size: clamp(38px, min(7vw, 12vh), 70px); line-height: 1.05; }
.tw-lbl { font-size: clamp(12px, 2.2vh, 16px); color: #6b4f24; }
.tw-punct { font-weight: 700; font-size: clamp(18px, min(3.4vw, 5.6vh), 34px); color: var(--ink2); margin-left: -4px; }
.tw-count { font-weight: 700; font-size: clamp(12px, 2.2vh, 15px); color: #6b4f24; }
.tw-count b { color: #b5281f; }

/* ---------- Reading Detective (Tap to Choose with a story: layout 'rd') ---------- */
.rd-pass { max-width: 720px; padding: clamp(6px, 1.4vh, 12px) clamp(10px, 1.6vw, 16px); border-radius: 10px; text-align: left; font-weight: 600; font-size: clamp(14px, min(2.1vw, 3.4vh), 21px); line-height: 1.32; color: var(--ink2); text-shadow: none;
  background: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 2px var(--th-pz-soft); }
.rd-pass .big { display: block; text-align: center; font-size: 2.2em; line-height: 1.1; }
.pz-prompt:has(.rd-pass), .pz-prompt.rd { font-size: inherit; }
.pz-options.l-rd { max-width: 720px; }
.pz-options.l-rd.n4 { grid-template-columns: repeat(2, 1fr); }
.l-rd .opt { min-height: clamp(36px, 8vh, 64px); font-size: clamp(14px, min(2.2vw, 3.6vh), 22px); line-height: 1.15; padding: 4px 10px; }
.l-rd .opt .k { display: none; }

/* ---------- Spelling Bee: long words ----------
   Quantity queries (a slot that is the first of 7+, 9+, 11+) shrink the slots and tiles of long
   words, so the word stays on one line. Short words keep the Word Builder's own sizes. */
.wb-slot:first-child:nth-last-child(n+7), .wb-slot:first-child:nth-last-child(n+7) ~ .wb-slot { width: clamp(40px, 6.2vw, 62px); font-size: clamp(26px, 4.4vw, 44px); }
.wb-slot:first-child:nth-last-child(n+9), .wb-slot:first-child:nth-last-child(n+9) ~ .wb-slot { width: clamp(32px, 5vw, 54px); font-size: clamp(22px, 3.8vw, 38px); }
.wb-slot:first-child:nth-last-child(n+11), .wb-slot:first-child:nth-last-child(n+11) ~ .wb-slot { width: clamp(28px, 4.3vw, 48px); font-size: clamp(20px, 3.4vw, 34px); }
.wb-tile:first-child:nth-last-child(n+9), .wb-tile:first-child:nth-last-child(n+9) ~ .wb-tile { width: clamp(42px, 7vw, 70px); height: clamp(42px, 7vw, 70px); font-size: clamp(26px, 4.4vw, 44px); }
@media (max-height: 480px) {
  .wb-pic.sound { font-size: 34px; padding: 4px 12px; border-radius: 14px; }
  .wb-slot:first-child:nth-last-child(n+7), .wb-slot:first-child:nth-last-child(n+7) ~ .wb-slot { width: 36px; height: 46px; font-size: 26px; }
  .wb-slot:first-child:nth-last-child(n+9), .wb-slot:first-child:nth-last-child(n+9) ~ .wb-slot { width: 29px; font-size: 22px; }
  .wb-slot:first-child:nth-last-child(n+11), .wb-slot:first-child:nth-last-child(n+11) ~ .wb-slot { width: 24px; font-size: 19px; }
  .wb-tile:first-child:nth-last-child(n+8), .wb-tile:first-child:nth-last-child(n+8) ~ .wb-tile { width: 38px; height: 38px; font-size: 24px; }
}
@media (max-height: 480px) and (max-width: 700px) {
  .wb-pic.sound { font-size: 28px; padding: 3px 8px; }
  .wb-slot:first-child:nth-last-child(n+7), .wb-slot:first-child:nth-last-child(n+7) ~ .wb-slot { width: 30px; height: 42px; font-size: 22px; }
  .wb-slot:first-child:nth-last-child(n+9), .wb-slot:first-child:nth-last-child(n+9) ~ .wb-slot { width: 25px; font-size: 19px; }
  .wb-slot:first-child:nth-last-child(n+11), .wb-slot:first-child:nth-last-child(n+11) ~ .wb-slot { width: 21px; font-size: 17px; }
  .wb-slots { gap: 4px; }
}
@media (max-aspect-ratio: 1/1) {
  .wb-slot:first-child:nth-last-child(n+7), .wb-slot:first-child:nth-last-child(n+7) ~ .wb-slot { width: clamp(30px, 8.6vw, 56px); font-size: clamp(22px, 6.4vw, 40px); }
  .wb-slot:first-child:nth-last-child(n+9), .wb-slot:first-child:nth-last-child(n+9) ~ .wb-slot { width: clamp(24px, 6.8vw, 48px); font-size: clamp(18px, 5.2vw, 34px); }
  .wb-slot:first-child:nth-last-child(n+11), .wb-slot:first-child:nth-last-child(n+11) ~ .wb-slot { width: clamp(20px, 5.6vw, 42px); font-size: clamp(16px, 4.5vw, 30px); }
  .wb-slots { gap: 4px; }
  .wb-slots:has(.wb-slot:nth-child(12)) { gap: 2px; } /* (12 letters and more: perseverance) */
  .wb-slot:first-child:nth-last-child(n+12), .wb-slot:first-child:nth-last-child(n+12) ~ .wb-slot { width: clamp(18px, 5vw, 40px); }
}

/* ---------- small screens ---------- */
@media (max-height: 420px) {
  .or-slot, .or-card { height: 42px; min-width: 46px; border-radius: 10px; }
  .or-face, .or-in { font-size: 19px; }
  .or-list .or-card { min-height: 30px; padding: 3px 8px 3px 38px; }
  .or-list .or-face { font-size: 13px; }
  .or-list .or-num { width: 24px; height: 24px; font-size: 14px; left: 6px; }
  .or-list { gap: 4px; }
  .mt-col { gap: 4px; }
  .mt-card { min-height: 32px; padding: 2px 8px; border-radius: 10px; }
  .mt-face { font-size: 16px; }
  .mt-card.pic .mt-face { font-size: 26px; }
  .mt-long .mt-face { font-size: 12.5px; }
  .mt-long .mt-card.l .mt-face { font-size: 14px; }
  .tw-chip { font-size: 18px; padding: 4px 8px; border-radius: 9px; }
  .tw-punct { font-size: 18px; }
  .tw-chip.pic .tw-face { font-size: 34px; }
  .rd-pass { font-size: 12.5px; line-height: 1.25; padding: 4px 8px; }
  .rd-pass .big { font-size: 26px; }
  .pz-options.l-rd { gap: 6px; }
  .pz-options.l-rd.n4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .l-rd .opt { min-height: 30px; font-size: 13px; border-radius: 9px; padding: 3px 6px; }
  .or-prompt, .mt-prompt, .tw-prompt { font-size: 17px; }
}
@media (max-height: 340px) {
  .or-slot, .or-card { height: 38px; }
  .or-list { gap: 3px; }
  .or-list .or-card { min-height: 26px; padding: 2px 8px 2px 34px; }
  .or-list .or-face { font-size: 12px; line-height: 1.15; }
  .or-list .or-num { width: 22px; height: 22px; font-size: 13px; }
  .or-long .or-ends { font-size: 10px; }
  .or-ends { font-size: 11px; }
  .mt-card { min-height: 28px; }
}
@media (max-aspect-ratio: 1/1) {
  .or-slot { height: clamp(48px, 15vw, 72px); min-width: clamp(48px, 15vw, 80px); }
  .or-card { height: clamp(46px, 14vw, 68px); min-width: clamp(48px, 15vw, 80px); }
  .or-face, .or-in { font-size: clamp(18px, 6vw, 30px); }
  .tw-chip { font-size: clamp(18px, 6vw, 30px); }
  .mt { gap: 14px; }
  .mt-long .mt-face { font-size: clamp(12px, 3.4vw, 16px); }
  .or-list .or-face { font-size: clamp(14px, 3.8vw, 18px); }
  .rd-pass { font-size: clamp(14px, 3.9vw, 18px); }
}