/* Proto-Germanic lesson. All rules scoped under .pgm-* */
.pgm-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* word tiles */
.pgm-twos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 340px; }
.pgm-t { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; border-radius: 14px; background: linear-gradient(180deg, #2C3049, #1B1F33);
  border: 1.5px solid var(--line-strong); box-shadow: 0 4px 0 #0D1022; animation: pgmDrop .5s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes pgmDrop { from { opacity: 0; translate: 0 -24px; } }
.pgm-t b { font: 700 24px var(--serif); color: var(--text); white-space: nowrap; }
.pgm-t b i { font-style: normal; color: #1A1206; background: var(--gold); border-radius: 6px; padding: 0 2px; }
.pgm-t small { margin-top: 2px; font: 700 11.5px var(--sans); color: var(--dim); letter-spacing: .05em; text-transform: uppercase; }

/* the tree */
.pgm-tree { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.pgm-leaves .pgm-t { animation: none; }
.pgm-br { width: 100%; height: 64px; }
.pgm-br svg { width: 100%; height: 100%; }
.pgm-br path { fill: none; stroke: var(--gold); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-out; }
.pgm-grow .pgm-br path { stroke-dashoffset: 0; }
.pgm-root { display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 16px; background: linear-gradient(180deg, #3A2E12, #261D0A);
  border: 2px dashed var(--gold); box-shadow: 0 4px 0 #120D02; }
.pgm-root b { font: 700 22px var(--serif); color: var(--gold); }
.pgm-root small { font: 700 12px var(--sans); color: var(--dim); }

/* the machine */
.pgm-mach { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pgm-cap { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .05em; text-transform: uppercase; }
.pgm-in { display: flex; gap: 10px; justify-content: center; min-height: 48px; }
.pgm-chip { min-width: 84px; min-height: 46px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--violet-bright); background: linear-gradient(180deg, #33295E, #221B44);
  box-shadow: 0 4px 0 #120E28; font: 700 21px var(--serif); color: var(--text); cursor: pointer; }
.pgm-chip.pgm-used { visibility: hidden; }
.pgm-chip.pgm-static { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; padding: 10px 22px; cursor: default; }
.pgm-body { position: relative; width: 70%; max-width: 250px; }
.pgm-body img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); transform-origin: 50% 90%; }
.pgm-body.pgm-run img { animation: pgmShake .13s linear 5; }
@keyframes pgmShake { 25% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
.pgm-plate { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; padding: 2px 8px; border-radius: 6px; background: rgba(10,14,26,.88); border: 1px solid var(--gold);
  font: 800 12px var(--sans); color: var(--gold); letter-spacing: .04em; white-space: nowrap; }
.pgm-out { display: flex; gap: 10px; justify-content: center; min-height: 58px; }
.pgm-o { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 8px; border-radius: 12px; border: 1.5px dashed var(--line-strong); opacity: .5; }
.pgm-o b { font: 700 21px var(--serif); color: var(--text); min-height: 26px; }
.pgm-o b i { font-style: normal; color: #1A1206; background: var(--gold); border-radius: 6px; padding: 0 2px; }
.pgm-o small { font: 800 12px var(--sans); color: var(--gold); min-height: 15px; }
.pgm-o.pgm-on { opacity: 1; border-style: solid; border-color: rgba(252,192,80,.6); background: linear-gradient(180deg, #2C3049, #1B1F33); animation: pgmDrop .4s cubic-bezier(.2,.9,.25,1.2) both; }

.pgm-big { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pgm-big small { font: 700 12.5px var(--sans); color: var(--dim); }
.pgm-pair { display: flex; gap: 14px; justify-content: center; }
.pgm-pair .pgm-t { min-width: 130px; padding: 14px 10px; }

/* what Finnish kept */
.pgm-fin { width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 8px; }
.pgm-fh, .pgm-fr { display: grid; grid-template-columns: 1.1fr 1.2fr .7fr; gap: 8px; align-items: center; }
.pgm-fh b { font: 800 11.5px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.pgm-fr span { font: 700 19px var(--serif); color: var(--text); white-space: nowrap; }
.pgm-fp, .pgm-fe { opacity: 0; translate: -10px 0; transition: opacity .35s, translate .35s; }
.pgm-fp { color: var(--gold) !important; }
.pgm-fe { color: var(--dim) !important; }
.pgm-fr.pgm-on .pgm-fp, .pgm-fr.pgm-on .pgm-fe { opacity: 1; translate: 0 0; }
.pgm-fn { font: 700 12px var(--sans); color: var(--dim); text-align: right; }
.pgm-fr { padding: 8px 10px; border-radius: 12px; background: linear-gradient(180deg, #2C3049, #1B1F33); border: 1.5px solid var(--line-strong); }

@media (max-height: 700px) {
  .pgm-t b { font-size: 21px; }
  .pgm-body { width: 60%; }
  .pgm-br { height: 46px; }
  .pgm-fr { padding: 6px 8px; }
  .pgm-fr span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .pgm-t, .pgm-o.pgm-on { animation: none; } .pgm-br path { transition: none; } }