/* EduFabTech — game-block.css (Block puzzle) — every class prefixed gm-block- */
.gm-block-box {
  --gm-block-cell: 36px;
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--radius, 12px);
  background: var(--surface, #10141c);
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--text, #e6ebf2);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.gm-block-box:focus-visible { box-shadow: 0 0 0 2px var(--brand, #43d49b); }

.gm-block-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 2.6em;
  margin: 0 2px 8px;
  font-size: .95rem;
  line-height: 1.3;
}
.gm-block-score {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gm-block-note { color: var(--brand, #43d49b); font-weight: 600; }
.gm-block-over .gm-block-note { color: var(--warn, #f5b84a); }

/* Board: 8 × 12; the width also shrinks on short screens so the tray stays in view. */
.gm-block-boardwrap {
  width: min(100%, 22rem, max(12rem, calc((100vh - 16rem) * 0.6667)));
  margin: 0 auto;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid var(--border, #1f2733);
  border-radius: 14px;
  background: #0c1020;
}
.gm-block-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  aspect-ratio: 8 / 12;
  touch-action: none;
}
.gm-block-cell {
  position: relative;
  margin: 1px;
  border-radius: 22%;
  background: rgba(255, 255, 255, .045);
}
.gm-block-full,
.gm-block-pc {
  background: var(--gm-block-k);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.gm-block-ghost {
  background: var(--gm-block-k);
  opacity: .42;
}
.gm-block-bad {
  background: rgba(255, 93, 93, .18);
  box-shadow: inset 0 0 0 2px var(--err, #ff5d5d);
  background-image: repeating-linear-gradient(45deg, rgba(255, 93, 93, .35) 0 3px, transparent 3px 7px);
}
.gm-block-flash {
  background: var(--gm-block-k);
  animation: gm-block-pop .32s ease-out forwards;
}
@keyframes gm-block-pop {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.4); }
}

/* Colours: GameView PAL */
.gm-block-k0 { --gm-block-k: #19e3ff; }
.gm-block-k1 { --gm-block-k: #28ffb0; }
.gm-block-k2 { --gm-block-k: #ffe03a; }
.gm-block-k3 { --gm-block-k: #ff4d9d; }
.gm-block-k4 { --gm-block-k: #b26bff; }
.gm-block-k5 { --gm-block-k: #ff7a29; }
.gm-block-k6 { --gm-block-k: #3d8bff; }
.gm-block-k7 { --gm-block-k: #ff4d4d; }
.gm-block-k8 { --gm-block-k: #9dff3d; }

/* Tray: three slots under the board */
.gm-block-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 24rem);
  margin: 10px auto 0;
}
.gm-block-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--gm-block-cell) * 3.1);
  min-height: 72px;
  padding: 0;
  border: 1px solid var(--border, #1f2733);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  cursor: grab;
  touch-action: none;
  font: inherit;
  color: inherit;
}
.gm-block-slot:disabled { cursor: default; }
.gm-block-slot.gm-block-on {
  border-color: var(--brand, #43d49b);
  box-shadow: 0 0 0 1px var(--brand, #43d49b);
  background: rgba(67, 212, 155, .08);
}
.gm-block-slot.gm-block-dragging .gm-block-piece { opacity: .25; }
.gm-block-slot.gm-block-nofit .gm-block-piece { opacity: .35; filter: grayscale(.7); }
.gm-block-piece {
  position: relative;
  display: block;
  pointer-events: none;
}
.gm-block-pc {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 22%;
}

/* The piece under the finger / mouse while dragging */
.gm-block-float {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.gm-block-float[hidden] { display: none; }

.gm-block-hint {
  margin: 10px 2px 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted, #6f7c8d);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gm-block-flash { animation: none; opacity: 0; }
}