/* ---------- The grade games' grid, clock and robot puzzles (types/grid.js, clock.js, code.js) ----------
   Their boards are sized in JS (fitBoard in types/grid.js sets --cs, the size of one square) from
   the room the puzzle window has left, so nothing scrolls, down to 568x320. */

/* ---------- Pixel Grid ---------- */
.gd, .ck, .cd { --cs: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.gd.col, .ck.col, .cd.col { flex-direction: column; gap: 10px; }
.gd-board { position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: "yl cells" ". xl"; }
.gd-cells { grid-area: cells; position: relative; display: grid; grid-template-columns: repeat(var(--w), var(--cs)); grid-auto-rows: var(--cs);
  touch-action: none; background: #fffdf7; border-radius: 3px; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px rgba(0, 0, 0, .18); }
.gd-c { position: relative; width: var(--cs); height: var(--cs); margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; font: inherit;
  background: #fffdf7; box-shadow: inset 0 0 0 1px rgba(70, 50, 25, .22); transition: background .12s; }
.gd-c:hover:not(.shut):not(.given):not(.hole) { background-color: #fff3c9; }
.gd-c.paint { background: var(--pc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset calc(var(--cs) * -.08) calc(var(--cs) * -.1) 0 rgba(0, 0, 0, .18), inset calc(var(--cs) * .06) calc(var(--cs) * .06) 0 rgba(255, 255, 255, .3); }
/* the example: locked squares, with soft stripes */
.gd-c.given { cursor: default; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 8px); }
.gd-c.shut { cursor: default; background-color: #eadfc8; box-shadow: inset 0 0 0 1px rgba(70, 50, 25, .14); }
.gd-c.shut.paint, .gd-c.given { background-color: var(--pc); }
.gd-c.hole { visibility: hidden; pointer-events: none; }
.gd-c.still { cursor: default; }
.gd-c.shut.has-pic { background: transparent; box-shadow: none; }
.gd-c .pic { position: relative; z-index: 1; display: block; font-size: calc(var(--cs) * .66); line-height: var(--cs); pointer-events: none; }
.gd-c.has-pic.paint .pic { filter: drop-shadow(0 0 2px #fff); }
.gd-c.lock { box-shadow: inset 0 0 0 2px #2e8a37, inset 0 0 0 1px rgba(0, 0, 0, .35); }
.gd-c.good { animation: gdGood .5s ease-out; }
.gd-c.bad::after, .gd-c.nope::after { content: '✖'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  color: #fff; font-size: calc(var(--cs) * .6); font-weight: 700; background: rgba(200, 55, 43, .85); animation: popIn .25s; }
.gd-c.nope { cursor: default; }
.gd-c.ghost { box-shadow: inset 0 0 0 calc(var(--cs) * .12) var(--gc), inset 0 0 0 calc(var(--cs) * .2) #fff; animation: gdGhost .7s ease-in-out infinite alternate; }
.gd-c.glow { z-index: 2; animation: gdGlow .7s ease-in-out infinite alternate; }
.gd-c.found { z-index: 3; background: #ffe066; box-shadow: 0 0 0 3px #b8860b, 0 0 22px 6px rgba(255, 215, 80, .9); }
.gd-c .prize { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; font-size: calc(var(--cs) * .8); animation: popIn .35s cubic-bezier(.2, 1.8, .4, 1); }
.gd-board.done .gd-cells { box-shadow: 0 0 0 3px #0b2a0c, 0 0 26px rgba(110, 255, 120, .75); }
.gd-board.no { animation: wiggle .4s; }
/* lines over the squares */
.gd-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.gd-lines line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.gd-lines .mirror { stroke: #7a2fd0; stroke-width: 5; stroke-dasharray: 10 6; filter: drop-shadow(0 0 2px #fff); }
.gd-lines .mirror.pulse { animation: gdLine .5s ease-in-out 4 alternate; }
.gd-lines .axis { stroke: #2b1d0e; stroke-width: 3; }
.gd-lines .frame { stroke: var(--ink); stroke-width: 3; }
.gd-lines .thin { stroke: rgba(70, 50, 25, .35); stroke-width: 1.2; }
.gd-dot { position: absolute; z-index: 3; width: max(10px, calc(var(--cs) * .34)); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #e8352b; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); pointer-events: none; }
/* coordinate grids: a square is the point where its lines cross */
.gd.pts .gd-cells { background: #fffdf7; }
.gd.pts .gd-c { background: transparent; box-shadow: none; }
.gd.pts .gd-c::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(70, 50, 25, .25); }
.gd.pts .gd-c:hover::before { width: 40%; background: #ffc83a; }
.gd.pts .gd-c.paint, .gd.pts .gd-c.given { background: transparent; }
.gd.pts .gd-c.paint::before, .gd.pts .gd-c.given::before { width: 46%; background: var(--pc); box-shadow: 0 0 0 2px var(--ink); }
.gd.pts .gd-c.found { background: transparent; box-shadow: none; }
.gd.pts .gd-c.has-pic::before { display: none; }
.gd.pts .gd-c .pic { font-size: calc(var(--cs) * .7); font-weight: 700; }
.gd-yl { grid-area: yl; display: grid; grid-auto-rows: var(--cs); padding-right: 4px; }
.gd-xl { grid-area: xl; display: grid; grid-template-columns: repeat(var(--w), var(--cs)); padding-top: 3px; }
.gd-yl span, .gd-xl span { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: max(10px, calc(var(--cs) * .44)); color: #6b4f24; line-height: 1; }
.gd-xl span { height: calc(var(--cs) * .7); }
/* the side: the question's numbers, the paint pots, Done */
.gd-board, .ck-face, .cd-board { flex: 0 0 auto; }
.gd-side, .ck-side, .cd-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 250px; min-width: 0; }
.gd.col .gd-side, .ck.col .ck-side { flex-direction: row; flex-wrap: wrap; max-width: 100%; gap: 8px 14px; }
.gd-prompt { font-weight: 700; font-size: clamp(20px, 5vh, 40px); line-height: 1.1; color: var(--ink2); text-align: center; }
.gd-prompt small { display: block; font-size: .5em; color: #6b4f24; }
.gd-prompt .frac { font-size: 1em; }
.gd-prompt .cmp { display: inline-grid; grid-template-columns: repeat(3, 1.2em); grid-template-rows: repeat(3, 1.1em); place-items: center; font-size: .6em; line-height: 1; margin-bottom: 4px; }
.gd-prompt .cmp > * { font-style: normal; }
.gd-prompt .cmp > :nth-child(1) { grid-area: 1 / 2; } .gd-prompt .cmp > :nth-child(2) { grid-area: 2 / 1; } .gd-prompt .cmp > :nth-child(3) { grid-area: 2 / 2; font-size: 1.3em; }
.gd-prompt .cmp > :nth-child(4) { grid-area: 2 / 3; } .gd-prompt .cmp > :nth-child(5) { grid-area: 3 / 2; }
.gd-prompt .legs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .8em; }
.gd.col .gd-prompt .legs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.gd-pal { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gd-pot { width: clamp(38px, 8vh, 50px); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--pc);
  box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), inset 3px 3px 0 rgba(255, 255, 255, .35), 0 0 0 3px var(--ink); transition: transform .12s; }
.gd-pot.on { transform: scale(1.15); box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), inset 3px 3px 0 rgba(255, 255, 255, .35), 0 0 0 3px var(--ink), 0 0 0 6px #ffd25a; }
.gd-count { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff; background: #2a6fc4; box-shadow: 0 0 0 3px var(--ink); }
.gd-count.pop { animation: popIn .3s; }
.gd-count .sw { display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 6px; border-radius: 3px; vertical-align: -2px; background: var(--pc); box-shadow: 0 0 0 2px #fff; }
.gd-acts { display: flex; gap: 8px; }
.gd-acts .clear { min-width: 48px; }
@media (max-height: 420px) {
  .gd-side, .ck-side, .cd-side { gap: 6px; }
  .gd-pot { width: 34px; }
  .gd-acts .btn.small, .ck-side .btn.small, .cd-side .btn.small { min-height: 34px; padding: 3px 12px; font-size: 15px; }
  .gd-prompt { font-size: clamp(18px, 6vh, 26px); }
}
@keyframes gdGood { 40% { transform: scale(1.18); filter: brightness(1.3); } }
@keyframes gdGhost { from { opacity: .4; } to { opacity: 1; } }
@keyframes gdGlow { from { box-shadow: inset 0 0 0 3px #ffd25a; background-color: #fff3c9; } to { box-shadow: inset 0 0 0 3px #ffb000, 0 0 16px 4px rgba(255, 200, 60, .9); background-color: #ffe48a; } }
@keyframes gdLine { to { stroke: #ff9a1c; stroke-width: 8; } }

/* small pictures of grids in a question (Area Builder) */
.gs { display: inline-grid; grid-template-columns: repeat(var(--w), var(--s, clamp(14px, 3.6vh, 28px))); grid-auto-rows: var(--s, clamp(14px, 3.6vh, 28px)); background: #fffdf7; box-shadow: 0 0 0 2px var(--ink); vertical-align: middle; }
.gs i { box-shadow: inset 0 0 0 1px rgba(70, 50, 25, .2); }
.gs i.on { background: var(--pc, #5aa0ff); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.opt .gs { --s: clamp(9px, 2.6vh, 20px); }
@media (max-aspect-ratio: 1/1) { .opt .gs { --s: clamp(6px, 2.1vw, 14px); } }
@media (max-height: 420px) { .gs { --s: 13px; } .opt .gs { --s: 9px; } }
/* drawings in a question (Shape Detective, Area Builder) */
.sd-art { display: block; width: auto; height: clamp(110px, 30vh, 230px); max-width: 100%; }
@media (max-aspect-ratio: 1/1) { .sd-art { height: clamp(80px, 16vh, 140px); } }
.sd-art text { font: 700 15px var(--font, sans-serif); fill: #2b1d0e; }
.sd-dims { display: inline-flex; align-items: center; gap: clamp(8px, 2vw, 18px); max-width: 100%; }
.sd-dims .dl { font-weight: 700; font-size: clamp(15px, 3.4vh, 22px); line-height: 1.25; color: #6b4f24; white-space: nowrap; text-align: left; }
@media (max-height: 420px) { .sd-art { height: clamp(48px, 15vh, 64px); } .sd-dims .dl { font-size: 14px; } }
.opt .sd-pic { display: block; width: 1.5em; height: 1.5em; }
.pz-prompt .sd-pic { width: clamp(80px, 22vh, 170px); height: clamp(80px, 22vh, 170px); }
.pz-prompt .ck-mini { width: clamp(90px, 26vh, 190px); height: clamp(90px, 26vh, 190px); }
@media (max-height: 420px) { .pz-prompt .sd-pic, .pz-prompt .ck-mini { width: 72px; height: 72px; } }

/* ---------- Clock ---------- */
.ck-face { width: calc(var(--cs) * 1); height: calc(var(--cs) * 1); flex: 0 0 auto; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .2)); }
.ck-face .hand { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.ck-face.done circle.rim { stroke: #2e8a37; }
.ck-face.no { animation: wiggle .4s; }
.ck-prompt { font-weight: 700; font-size: clamp(18px, 4.6vh, 34px); line-height: 1.15; text-align: center; color: var(--ink2); }
.ck-prompt b { color: #b5281f; white-space: nowrap; }
.ck-read { padding: 4px 14px; border-radius: 10px; font: 700 clamp(20px, 5vh, 32px) var(--font); color: #1d3f78; background: #fff; box-shadow: 0 0 0 3px var(--ink); }
.ck-ctl { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px 8px; }
.ck-ctl .lbl { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: clamp(14px, 3vh, 18px); color: #6b4f24; }
.ck-ctl .lbl i { display: inline-block; width: 26px; height: 7px; border-radius: 4px; background: var(--hc); box-shadow: 0 0 0 2px var(--ink); }
.ck-b { width: clamp(46px, 10vh, 60px); height: clamp(40px, 9vh, 52px); padding: 0; border: 0; border-radius: 12px; cursor: pointer; font: 700 clamp(18px, 4vh, 24px) var(--font); color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--hc) 75%, #fff), var(--hc)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--ink); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.ck-b:active { transform: translateY(3px); }
.ck-b small { font-size: .62em; }
@media (max-height: 420px) { .ck-b { width: 42px; height: 34px; border-radius: 9px; } .ck-ctl { gap: 4px 6px; } }

/* ---------- Robot Coder ---------- */
.cd-board { position: relative; display: grid; grid-template-columns: repeat(var(--w), var(--cs)); grid-auto-rows: var(--cs); border-radius: 6px; overflow: hidden;
  background: #8fd36a; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px rgba(0, 0, 0, .18); }
.cd-board .t { position: relative; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cs) * .68); line-height: 1; }
.cd-board .t:nth-child(odd) { background: rgba(255, 255, 255, .12); }
.cd-board .t.wall { background: #9a8a74; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.cd-board .t.step::after { content: ''; position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px #2a6fc4; animation: popIn .3s; }
.cd-board .t.got { opacity: 0; transform: scale(1.8); transition: transform .3s, opacity .3s; }
.cd-bot { position: absolute; left: 0; top: 0; z-index: 3; width: var(--cs); height: var(--cs); display: flex; align-items: center; justify-content: center; font-size: calc(var(--cs) * .78); line-height: 1;
  transition: transform .26s ease-in-out; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.cd-bot.bonk { animation: cdBonk .45s; }
.cd-bot.yay { animation: cdYay .6s; }
.cd-board.done { box-shadow: 0 0 0 3px #0b2a0c, 0 0 26px rgba(110, 255, 120, .75); }
.cd-side { max-width: 300px; gap: 8px; }
.cd.col .cd-side { max-width: 100%; }
.cd-fn { font-weight: 700; font-size: 15px; color: #6b4f24; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cd-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 44px; width: 100%; max-width: 300px; padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 2px var(--th-pz-line); }
.cd-prog:empty::before { content: 'Your plan goes here'; margin: auto; color: #a08a68; font-weight: 600; font-size: 14px; }
.cd-blocks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cd-k, .cd-chip { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font: 700 22px var(--font); color: #fff; border-radius: 10px;
  background: var(--bc, #2f6fe0); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 0 0 3px var(--ink); }
.cd-k { min-width: clamp(42px, 9.5vh, 54px); height: clamp(40px, 9vh, 50px); padding: 0 6px; }
.cd-k:active { transform: translateY(3px); }
.cd-k.glow { animation: gdGlowBtn .6s ease-in-out infinite alternate; }
.cd-k:disabled { filter: grayscale(.7); opacity: .55; }
.cd-chip { min-width: 32px; height: 32px; padding: 0 4px; font-size: 18px; border-radius: 8px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 0 0 2px var(--ink); }
.cd-chip.now { outline: 3px solid #ffd25a; outline-offset: 1px; }
.cd-chip.bug { animation: wiggle .4s; }
.cd-loop { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 2px 3px; border-radius: 9px; background: rgba(255, 140, 30, .22); box-shadow: 0 0 0 2px #e0702a; }
.cd-loop.open { box-shadow: 0 0 0 2px #e0702a, 0 0 10px 2px rgba(255, 170, 40, .9); }
.cd-loop .cd-end { --bc: #e0702a; min-width: 22px; font-size: 14px; }
.cd-loop.open .cd-end { animation: gdGlowBtn .6s ease-in-out infinite alternate; }
.cd-acts { display: flex; gap: 8px; align-items: center; }
.cd-left { font-weight: 700; font-size: 14px; color: #6b4f24; }
.cd-left.full { color: #b5281f; }
@media (max-height: 420px) {
  .cd-side { max-width: 214px; gap: 5px; }
  .cd-blocks { gap: 5px; }
  .cd-k { min-width: 34px; height: 30px; padding: 0 4px; font-size: 17px; border-radius: 8px; }
  .cd-k[data-c^="loop"] { font-size: 13px; }
  .cd-chip { min-width: 24px; height: 24px; font-size: 14px; }
  .cd-fn .cd-chip { min-width: 20px; height: 20px; }
  .cd-prog { min-height: 32px; padding: 3px; }
  .cd-prog:empty::before { font-size: 12px; }
  .cd-fn { font-size: 12px; gap: 2px; }
  .cd-left { font-size: 12px; }
  .cd-acts { gap: 6px; }
  .cd-side .btn.small { min-height: 30px; padding: 2px 10px; }
}
@keyframes cdBonk { 30% { transform: var(--at) translateX(calc(var(--cs) * .25)) rotate(12deg); } 60% { transform: var(--at) translateX(calc(var(--cs) * -.1)) rotate(-8deg); } }
@keyframes cdYay { 50% { transform: var(--at) translateY(calc(var(--cs) * -.35)) scale(1.2); } }
@keyframes gdGlowBtn { from { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 0 0 3px var(--ink); } to { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 0 0 3px var(--ink), 0 0 0 7px #ffd25a; } }
.cd-left.pop { animation: wiggle .4s; }