/* =====================================================================
   ΤΟ ΠΡΟΑΥΛΙΟ · the games layer of aporia.gr
   =====================================================================
   Everything here lives under /proaylio/. The unit pages stay exactly as they were:
   one link at most, never a game inside a lesson. The index teaches, the playground
   brings people back.

   Built on style.css tokens (--accent, --ink, --surface, the squircle radii), so the
   games tint by class exactly like the rest of the site and follow dark mode for free.

   MOTION. The index moves nothing the reader did not start. The playground does move,
   because a game that answers with nothing feels broken to a seven year old. But only
   transform and opacity, only in answer to a tap, never on a loop, and every effect is
   switched off by the site's own «Ηρεμία» switch and by prefers-reduced-motion. */

/* the thirteenth rung: the graduate. Gold, because it is not a class. */
[data-level="K13"]{--accent:#a8761a}
@media (prefers-color-scheme:dark){[data-level="K13"]{--accent:#e2b04a}}

/* 🚨 [hidden] is a user-agent rule, so ANY display rule beats it. .pg-play and .pg-foot
   are display:flex, and on the first build the last question and its button stayed on
   screen above the result, because setting .hidden on them did nothing. Every element
   this file toggles with hidden is listed here. */
.pg-play[hidden],.pg-foot[hidden],.pg-verdict[hidden],.pg-end[hidden],.pg-chal[hidden],
.pg-widen[hidden],#pg-app[hidden]{display:none!important}

/* ---------- shared bits ---------- */
.pg-mark{display:inline-grid;place-items:center;background:var(--accent);color:var(--on-accent);
  border-radius:28%;flex:none}
.pg-mark svg{width:72%;height:72%;display:block}
@supports (corner-shape:squircle){.pg-mark,.pg-card,.pg-opt,.pg-key,.pg-tile,.pg-slab,.pg-box,
  .pg-rig,.pg-stage,.pg-end,.pg-rung,.pg-bar,.pg-chal,.pg-numtile{corner-shape:squircle}}
.pg-eyebrow{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  color:var(--ink-3);text-transform:uppercase;display:block;margin-bottom:6px}

/* ---------- HUB: the rig with the growing silhouette ---------- */
.pg-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  padding-block:22px 6px}
.pg-hero h1{font-size:clamp(34px,6vw,54px);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.pg-hero h1 em{font-style:normal;color:var(--accent)}
.pg-facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
.pg-facts div{display:grid;gap:1px}
.pg-facts b{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.1}
.pg-facts span{font-size:12px;color:var(--ink-3)}

.pg-rig{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--spec),var(--shadow);padding:18px 20px 16px;position:relative;overflow:hidden}
.pg-rig::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
.pg-figbox{height:214px;display:grid;place-items:end center;position:relative}
.pg-figbox .gnd{position:absolute;bottom:0;left:8%;right:8%;height:1px;background:var(--rule)}

/* THE SILHOUETTE, seen from the side, walking to the right. Pure CSS off one number, --t,
   from 0 (six years old) to 1 (eighteen). Real proportions: a six year old's head is about
   a fifth of the height, an adult's about a seventh and a half; legs go from 44% to 52%.
   Side view since 25 Sep 2026 (George's review note: the front figure «is not nice»).
   The far arm and leg sit behind, lighter; arms swing against the legs, as in a real
   stride. Nothing moves on its own: it changes only when the slider does. */
@property --t{syntax:'<number>';inherits:true;initial-value:0}
.pg-fig{
  --H:calc(112px + 84px * var(--t));
  --head:calc(var(--H) / (5 + 2.6 * var(--t)));
  --leg:calc(var(--H) * (.435 + .085 * var(--t)));
  --D:calc(var(--head) * (.8 + .34 * var(--t)));            /* chest depth, side on */
  --top:calc(var(--head) + var(--H) * .022);                  /* where the torso starts */
  --torso:calc(var(--H) - var(--leg) - var(--top) + var(--head) * .12);
  --limb:calc(var(--head) * .27);
  position:relative;width:170px;height:var(--H);color:var(--accent);
  transition:--t .38s var(--ease)}
.pg-fig i{position:absolute;background:currentColor;display:block}
.pg-fig .far{opacity:.5}
.pg-fig .head{width:calc(var(--head)*.92);height:var(--head);top:0;
  left:calc(50% - var(--head)*.46 + var(--head)*.1);
  border-radius:48% 52% 46% 50%/52% 50% 50% 48%}
.pg-fig .neck{width:calc(var(--head)*.3);height:calc(var(--H)*.04);top:calc(var(--head)*.9);
  left:calc(50% - var(--head)*.15 + var(--head)*.06)}
.pg-fig .torso{width:var(--D);height:var(--torso);top:var(--top);left:calc(50% - var(--D)/2);
  border-radius:calc(var(--head)*.3) calc(var(--head)*.36) calc(var(--head)*.2) calc(var(--head)*.24)}
.pg-fig .arm{width:var(--limb);height:calc(var(--torso)*(1.02 + .1*var(--t)));border-radius:999px;
  top:calc(var(--top) + var(--head)*.1);left:calc(50% - var(--limb)/2);transform-origin:50% calc(var(--limb)/2)}
.pg-fig .arm.near{transform:rotate(24deg)}
.pg-fig .arm.far{transform:rotate(-26deg)}
.pg-fig .leg{width:calc(var(--D)*.5);height:var(--leg);top:calc(var(--H) - var(--leg));
  left:calc(50% - var(--D)*.25);transform-origin:50% 0;border-radius:calc(var(--head)*.2)}
.pg-fig .leg.near{transform:rotate(-17deg)}
.pg-fig .leg.far{transform:rotate(15deg)}
/* the foot points the way the figure walks */
.pg-fig .leg::after{content:"";position:absolute;bottom:0;left:30%;width:calc(var(--D)*.62);
  height:calc(var(--head)*.2);background:currentColor;border-radius:calc(var(--head)*.12) calc(var(--head)*.16) 3px 3px}
.pg-fig .leg.near::after{transform:rotate(17deg);transform-origin:0 100%}
.pg-fig .leg.far::after{transform:rotate(-15deg);transform-origin:0 100%}
/* the school bag, on the back: big and square at six, small and slung by eighteen */
.pg-fig .bag{width:calc(var(--head)*(.66 - .22*var(--t)));height:calc(var(--torso)*(.66 - .14*var(--t)));
  top:calc(var(--top) + var(--head)*(.12 + .2*var(--t)));
  left:calc(50% - var(--D)/2 - var(--head)*(.66 - .22*var(--t))*.82);
  border-radius:calc(var(--head)*.18);opacity:calc(.82 - .28*var(--t))}

.pg-age{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;
  text-align:center;margin-top:6px}
.pg-age .yrs{font-family:var(--f-mono);font-size:30px;font-weight:700;color:var(--accent);line-height:1}
.pg-age .kl{font-family:var(--f-display);font-size:20px;font-weight:800}
.pg-age .band{width:100%;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;color:var(--ink-3)}
.pg-slider{width:100%;margin-top:12px;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}
.pg-slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,#427a1d,#1c7926,#1b7346,#2771a6,#3a58d1,#814fd6,#9b2cbd,#a8761a)}
.pg-slider::-moz-range-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,#427a1d,#1c7926,#1b7346,#2771a6,#3a58d1,#814fd6,#9b2cbd,#a8761a)}
.pg-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;
  border-radius:50%;background:var(--surface);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.28)}
.pg-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);
  border:3px solid var(--accent)}
.pg-ticks{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--f-mono);
  font-size:9.5px;color:var(--ink-3)}
.pg-note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule-soft);font-size:13px;
  color:var(--ink-2);line-height:1.5}
.pg-note b{color:var(--accent)}

/* the player's own rank, under the rig */
.pg-me{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
  border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--hair)}
.pg-me .pg-mark{width:38px;height:38px}
.pg-me .who{display:grid;line-height:1.25;flex:1;min-width:0}
.pg-me .who b{font-family:var(--f-display);font-size:15px}
.pg-me .who small{font-size:12px;color:var(--ink-3)}
.pg-me{flex-wrap:wrap}
.pg-me .pg-mshare{flex-basis:100%;justify-content:center;margin-top:4px}
.pg-me .pts{font-family:var(--f-mono);font-weight:700;font-size:20px;color:var(--accent);
  font-variant-numeric:tabular-nums}
.pg-meter{height:5px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-top:5px}
.pg-meter i{display:block;height:100%;width:var(--p,0%);background:var(--accent);transition:width .5s var(--ease)}

/* ---------- HUB: game cards and ladder ---------- */
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pg-card{display:grid;gap:6px;align-content:start;padding:16px 16px 14px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair);box-shadow:var(--spec);color:var(--ink);
  border-bottom:1px solid var(--hair);transition:transform .18s var(--ease),box-shadow .18s var(--ease),
  border-color .18s var(--ease);position:relative;min-height:150px}
.pg-card:hover{transform:translateY(-3px);border-color:var(--accent-ring);box-shadow:var(--spec),var(--glow)}
.pg-card .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.pg-card .t{font-family:var(--f-display);font-size:20px;font-weight:800;letter-spacing:-.01em}
.pg-card .d{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.pg-card .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-top:auto}
.pg-card .best{position:absolute;top:14px;right:14px;font-family:var(--f-mono);font-size:10.5px;
  color:var(--accent);font-weight:700}
.pg-card.empty{opacity:.45}
/* the game being played, in the strip of all six: lit, not hidden */
.pg-card.now{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.pg-card.now .k::after{content:" · ΠΑΙΖΕΙΣ ΤΩΡΑ"}
.pg-card.now:hover{transform:none}
.pg-card .glyph{position:absolute;right:14px;bottom:10px;font-family:var(--f-display);font-size:40px;
  font-weight:800;color:var(--accent);opacity:.12;line-height:1}

.pg-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
/* THE LADDER AS A DECK. Each rung is a card that pins below the header and piles on the
   ones before it, each resting 12 px lower, so the climb reads as a stack you are building.
   games.js scales the buried cards back (a fanned deck) and writes each card's state. No
   sideways scroll anywhere. Ηρεμία and reduced motion release the pins into a plain list. */
.pg-ladder{position:relative;max-width:640px;margin:8px auto 0;padding-bottom:12px}
.pg-pin{position:sticky;top:calc(72px + var(--i) * 12px);margin-bottom:22px}
.pg-rung{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:14px 18px;border-radius:var(--r-lg);color:var(--ink);transform-origin:top center;
  will-change:transform;transition:opacity .25s var(--ease)}
.pg-rung .pg-mark{width:40px;height:40px}
.pg-rung .rt{display:grid;gap:2px;min-width:0}
.pg-rung b{font-family:var(--f-display);font-size:17px;font-weight:800;line-height:1.2}
.pg-rung small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.pg-rung .rbar{display:block;height:6px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden;margin-top:6px}
.pg-rung .rbar[hidden]{display:none}
.pg-rung .rbar i{display:block;height:100%;width:var(--p,0%);background:var(--accent);border-radius:inherit}
.pg-rung .st{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--hair);color:var(--ink-2)}
.pg-rung.done .st{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pg-rung.here{box-shadow:var(--lg-edge),0 0 0 2px var(--accent),0 12px 34px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.pg-rung.here .st{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pg-rung.next{outline:1.5px dashed var(--accent);outline-offset:-5px}
.pg-rung.next .st{color:var(--accent);border-color:var(--accent)}
.pg-rung.locked .pg-mark{background:var(--ink-3)}
.pg-rung.locked .rt,.pg-rung.locked .st{opacity:.62}
@media (max-width:560px){.pg-rung{padding:11px 13px;gap:10px}.pg-rung .pg-mark{width:32px;height:32px}
  .pg-rung b{font-size:15px}.pg-pin{top:calc(64px + var(--i) * 9px);margin-bottom:16px}}
@media (prefers-reduced-motion:reduce){.pg-pin{position:static;margin-bottom:8px}.pg-rung{transform:none!important}}
[data-calm="on"] .pg-pin{position:static;margin-bottom:8px}
[data-calm="on"] .pg-rung{transform:none!important}

.pg-room{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pg-room input{font-family:var(--f-mono);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--hair-2);
  background:var(--surface);color:var(--ink);min-width:0;flex:1 1 220px;max-width:340px}

/* ---------- GAME PAGE ---------- */
.pg-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:12px 14px;
  border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--hair);margin-bottom:14px}
.pg-bar .cls{display:grid;gap:2px;flex:1 1 230px;min-width:0}
.pg-bar .cls label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-3)}
.pg-bar .cls output{font-family:var(--f-display);font-weight:800;font-size:15px}
.pg-bar .cls .pg-slider{margin-top:2px}
.pg-bar select{font-family:var(--f-body);font-size:14px;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);flex:1 1 260px;min-width:0;
  max-width:100%}

.pg-chal{padding:11px 14px;border-radius:var(--r-md);margin-bottom:12px;font-size:14px;
  background:var(--accent-soft);border:1px solid var(--accent-ring);color:var(--ink)}
.pg-chal b{color:var(--accent)}
.pg-widen{font-size:13px;color:var(--ink-3);margin:-4px 0 12px}

.pg-stage{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--spec),var(--shadow);overflow:hidden;position:relative}
.pg-hud{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.pg-hud .pg-mark{width:30px;height:30px}
.pg-hud .who{display:grid;line-height:1.2;margin-right:auto;min-width:0}
.pg-hud .who b{font-family:var(--f-display);font-size:14px}
.pg-hud .who small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pg-lives{display:flex;gap:3px}
.pg-lives .pg-mark{width:17px;height:17px;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pg-lives .pg-mark.out{opacity:.18;transform:translateY(4px) rotate(-14deg);background:var(--ink-3)}
.pg-score{text-align:right;line-height:1.05}
.pg-score b{display:block;font-family:var(--f-mono);font-size:21px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums}
.pg-score small{font-family:var(--f-mono);font-size:9px;letter-spacing:.11em;color:var(--ink-3)}
.pg-prog{height:3px;background:var(--sunk)}
.pg-prog i{display:block;height:100%;width:var(--p,0%);background:var(--accent);transition:width .35s var(--ease)}

/* A FIXED stage height, so «Επόμενη» never moves between questions. George measured
   182 px of drift on the practice panel once; the fix there was a fixed height with
   internal scroll, and it is the same fix here. */
/* a floor, not a box: short rounds keep the stage still, a twelve-card board grows it
   instead of scrolling inside it (George's review note, 25 Sep: «avoid scrolling in tab») */
.pg-play{padding:20px 18px 6px;min-height:372px;display:flex;flex-direction:column}
/* Centred with auto margins, NOT justify-content:center. A flex column centred that way
   pushes overflowing content ABOVE the scroll origin, where it cannot be scrolled to, so
   on a phone the top of the question (the prompt itself) could be cut off for good.
   Auto margins centre while there is room and fall back to top-aligned scrolling when
   there is not. */
.pg-play>:first-child{margin-top:auto}
.pg-play>:last-child{margin-bottom:auto}
.pg-q{font-family:var(--f-display);font-size:clamp(17px,2.6vw,21px);font-weight:700;line-height:1.4;
  text-align:center;text-wrap:balance;margin:0 0 6px}
.pg-sub{font-size:13px;color:var(--ink-3);text-align:center;margin:0 0 14px}
.pg-verdict{height:5.4em;overflow-y:auto;padding:8px 18px 0;text-align:center;font-size:14.5px;
  line-height:1.5;color:var(--ink-2)}
.pg-verdict .vk{font-family:var(--f-display);font-weight:800;font-size:16px;margin-right:4px}
.pg-verdict.ok .vk{color:var(--green)}
.pg-verdict.no .vk{color:var(--red)}
.pg-verdict b{color:var(--ink)}
.pg-foot{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;padding:8px 16px 18px}
@media (max-width:640px){
  .pg-play{min-height:360px;padding:10px 12px 2px}
  .pg-verdict{height:6.2em}
  /* eight boxes at Λύκειο did not fit a phone: 442 px of content in a 360 px stage,
     with «σύνδεσμος» below the fold where a student could miss that it was an option */
  .pg-boxes.many{gap:6px;margin-top:10px}
  .pg-boxes.many .pg-box{padding:8px 6px}
  .pg-boxes.many small{display:none}
  .pg-bigword{font-size:28px}
  /* six placed rows at Λύκειο ran 29 px past the stage on the last two taps */
  .pg-rack{gap:4px}
  .pg-row{padding:5px 10px}
  .pg-row .t{font-size:13.5px}
  .pg-q{margin-bottom:4px}
  .pg-sub{margin-bottom:10px}
}

/* options */
.pg-opts{display:grid;gap:8px;max-width:540px;margin:0 auto;width:100%}
.pg-opts.two{grid-template-columns:1fr 1fr}
.pg-opt{font-family:var(--f-body);font-size:15.5px;padding:13px 15px;border-radius:var(--r-md);
  border:1.5px solid var(--hair-2);background:var(--surface-2);color:var(--ink);cursor:pointer;
  text-align:left;transition:border-color .15s,background .15s,transform .15s}
.pg-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateX(2px)}
.pg-opt:disabled{cursor:default}
.pg-opt.right,.pg-numtile.right{border-color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent);
  color:var(--green);font-weight:650}
.pg-opt.wrong,.pg-numtile.wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}

/* Κρεμάλα */
.pg-word{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.pg-slot{min-width:28px;height:40px;border-bottom:3px solid var(--rule);display:grid;place-items:center;
  font-family:var(--f-display);font-size:23px;font-weight:800;padding:0 2px}
.pg-slot.fix{border-bottom-color:transparent;min-width:12px}
.pg-slot.on{border-bottom-color:var(--accent)}
.pg-slot.miss{color:var(--red);border-bottom-color:var(--red)}
.pg-tries{display:flex;gap:4px;justify-content:center;margin:8px 0 2px}
.pg-tries .pg-mark{width:15px;height:15px}
.pg-tries .pg-mark.out{opacity:.16;background:var(--ink-3)}
.pg-keys{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:540px;margin:12px auto 0}
.pg-key{width:36px;height:40px;border-radius:var(--r-xs);border:1px solid var(--hair-2);background:var(--surface-2);
  font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;padding:0}
.pg-key:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.pg-key:disabled{opacity:.25;cursor:default}
.pg-key.hit{background:var(--accent);border-color:var(--accent);color:var(--on-accent);opacity:1}

/* Ζευγάρια */
.pg-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:620px;margin:0 auto;width:100%}
.pg-mem.c3{grid-template-columns:repeat(3,1fr)}
.pg-tile{position:relative;min-height:82px;border-radius:var(--r-md);border:1.5px solid var(--accent);
  background:var(--accent);color:transparent;cursor:pointer;padding:8px 7px;font-family:var(--f-body);
  font-size:12.5px;line-height:1.3;display:grid;place-items:center;text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s}
.pg-tile::after{content:";";position:absolute;font-family:var(--f-display);font-size:30px;font-weight:800;
  color:var(--on-accent);opacity:.5}
.pg-tile.up,.pg-tile.done{background:var(--surface-2);color:var(--ink);border-color:var(--hair-2)}
.pg-tile.up::after,.pg-tile.done::after{content:none}
.pg-tile.term{font-family:var(--f-display);font-weight:800;font-size:14.5px}
.pg-tile.done{border-color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent);cursor:default}
.pg-tile.up{animation:pgFlip .28s var(--ease)}
@keyframes pgFlip{from{transform:rotateY(-80deg)}to{transform:none}}

/* order games: Η σειρά, Χρονογραμμή */
.pg-src{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.pg-slab{padding:10px 14px;border-radius:var(--r-md);border:1.5px solid var(--hair-2);background:var(--surface-2);
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);cursor:pointer;max-width:100%;text-align:left;
  transition:border-color .15s,transform .15s,background .15s}
.pg-slab:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.pg-slab:disabled{opacity:.2;cursor:default}
.pg-rack{display:grid;gap:6px;max-width:560px;margin:0 auto;width:100%}
.pg-row{display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:var(--r-md);
  background:var(--surface-2);border:1.5px solid var(--green);animation:pgIn .28s var(--ease)}
.pg-row.bad{border-color:var(--red)}
.pg-row .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);width:1.4em}
.pg-row .t{flex:1;font-size:14px}
.pg-row .v{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.pg-row.bad .v{color:var(--red)}
@keyframes pgIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Κουτιά */
.pg-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:600px;margin:14px auto 0;width:100%}
.pg-box{padding:12px 8px;border-radius:var(--r-md);border:1.5px dashed var(--hair-2);background:var(--surface-2);
  text-align:center;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .15s,background .15s}
.pg-box:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.pg-box b{display:block;font-family:var(--f-display);font-size:14.5px}
.pg-box small{font-size:11px;color:var(--ink-3)}
.pg-box.right{border-style:solid;border-color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
.pg-box.wrong{border-style:solid;border-color:var(--red)}
.pg-bigword{font-family:var(--f-display);font-size:34px;font-weight:800;text-align:center;color:var(--accent);
  margin:4px 0 2px}

/* Σχήματα: the pie is two conic gradients, no image at all */
@property --fill{syntax:'<angle>';inherits:false;initial-value:0deg}
.pg-pie{width:148px;height:148px;border-radius:50%;border:3px solid var(--accent);margin:0 auto 16px;
  position:relative;background:conic-gradient(var(--accent) var(--fill),color-mix(in srgb,var(--accent) 9%,transparent) 0)}
.pg-pie::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(transparent 0,transparent calc(var(--slice) - 1.5deg),
    color-mix(in srgb,var(--ink) 34%,transparent) calc(var(--slice) - 1.5deg),transparent var(--slice))}
.pg-pie.run{animation:pgPie .7s var(--ease) both}
@keyframes pgPie{from{--fill:0deg}}
.pg-numtile{font-family:var(--f-display);font-size:24px;font-weight:800;padding:12px 8px;border-radius:var(--r-md);
  border:1.5px solid var(--hair-2);background:var(--surface-2);color:var(--ink);cursor:pointer}
.pg-numtile:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.pg-fr{display:inline-grid;line-height:1;text-align:center}
.pg-fr i{font-style:normal;border-top:2.5px solid currentColor;padding-top:2px}

/* ---------- the end of a round ---------- */
.pg-end{padding:22px 18px 20px;text-align:center}
.pg-end h2{margin:0 0 6px;font-size:26px}
.pg-end .big{font-family:var(--f-mono);font-size:44px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.1}
.pg-end .line{color:var(--ink-2);margin:6px auto 16px;max-width:52ch}
.pg-end img{width:100%;max-width:600px;border-radius:var(--r-lg);border:1px solid var(--hair);display:block;
  margin:0 auto 14px;aspect-ratio:1200/630;background:var(--surface-2)}
.pg-end .link{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);word-break:break-all;
  background:var(--surface-2);border:1px solid var(--rule-soft);border-radius:var(--r-sm);padding:8px 10px;
  margin:0 auto 12px;max-width:600px}

/* ---------- effects: transform and opacity only ---------- */
.pg-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.pg-tok{position:absolute;left:50%;top:44%;width:15px;height:15px;border-radius:30%;background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;
  font-size:11px;animation:pgTok 1.1s cubic-bezier(.2,.75,.3,1) forwards}
.pg-tok::before{content:";"}
@keyframes pgTok{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}14%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--r));opacity:0}}
/* losing: the question mark drops its dot. The question is still open, which is
   literally what ἀπορία means. */
.pg-dot{position:absolute;left:50%;top:40%;width:10px;height:10px;border-radius:50%;background:var(--red);
  animation:pgDot .8s cubic-bezier(.5,0,.75,.4) forwards}
@keyframes pgDot{to{transform:translate(-50%,86px) scale(.6);opacity:0}}
.pg-stage.won{animation:pgGlow .8s var(--ease)}
@keyframes pgGlow{50%{box-shadow:var(--spec),0 0 0 4px var(--accent-ring)}}
.pg-shake{animation:pgShake .42s}
@keyframes pgShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
.pg-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:80;
  transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--accent-ring);
  box-shadow:var(--shadow);font-size:14px;animation:pgIn .35s var(--ease)}
.pg-toast .pg-mark{width:34px;height:34px;animation:pgStamp .5s var(--ease)}
@keyframes pgStamp{0%{transform:scale(1.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .pg-fig,.pg-meter i,.pg-prog i{transition:none}
  .pg-tok,.pg-dot{display:none}
  .pg-tile.up,.pg-row,.pg-pie.run,.pg-stage.won,.pg-shake,.pg-toast,.pg-toast .pg-mark{animation:none}
}
[data-calm="on"] .pg-fx{display:none}
[data-calm="on"] .pg-tile.up,[data-calm="on"] .pg-row,[data-calm="on"] .pg-pie.run,
[data-calm="on"] .pg-stage.won,[data-calm="on"] .pg-shake,[data-calm="on"] .pg-toast{animation:none}
[data-calm="on"] .pg-fig{transition:none}

@media (max-width:860px){
  .pg-hero{grid-template-columns:1fr}
  .pg-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .pg-grid{grid-template-columns:1fr}
  .pg-mem{grid-template-columns:repeat(3,1fr);gap:6px}
  .pg-tile{min-height:64px;padding:6px 5px;font-size:11.5px;line-height:1.25}
  .pg-tile.term{font-size:13px}
  .pg-mem.c3{grid-template-columns:repeat(2,1fr)}
  .pg-boxes{grid-template-columns:1fr 1fr}
  .pg-key{width:31px;height:37px;font-size:15px}
  .pg-slot{min-width:23px;height:36px;font-size:20px}
  .pg-opts.two{grid-template-columns:1fr}
}
/* the career card, shown under the button once drawn, with a save link */
.pg-career{flex-basis:100%;display:grid;gap:8px;justify-items:center;margin-top:6px}
.pg-career img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--hair)}
.pg-career[hidden]{display:none}

/* ═══ LIQUID GLASS (George's review notes, 25 Sep 2026: «apply liquid glass effect in all ui
   elements … flatten like this when in focus») ═══════════════════════════════════════════
   Glass needs something behind it to bend, so the game pages and the hub get a still field
   of three soft colours (no motion: nothing here moves that the reader did not move). Every
   panel is translucent with blur, a diagonal sheen and lit edges. Εστίαση and Ηρεμία flatten
   all of it back to solid surfaces. */
:root{
  --lg-sheen:linear-gradient(140deg,color-mix(in srgb,#fff 46%,transparent) 0%,color-mix(in srgb,#fff 10%,transparent) 32%,transparent 58%);
  --lg-edge:inset 0 1px 0 color-mix(in srgb,#fff 80%,transparent),inset 1px 0 0 color-mix(in srgb,#fff 30%,transparent),
            inset 0 -1px 0 color-mix(in srgb,#fff 16%,transparent);
  --lg-drop:0 18px 42px -24px rgba(15,28,41,.5);
  --lg-line:color-mix(in srgb,#fff 34%,var(--hair))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lg-sheen:linear-gradient(140deg,color-mix(in srgb,#fff 13%,transparent) 0%,color-mix(in srgb,#fff 3%,transparent) 32%,transparent 58%);
  --lg-edge:inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent),inset 1px 0 0 color-mix(in srgb,#fff 7%,transparent),
            inset 0 -1px 0 color-mix(in srgb,#fff 4%,transparent);
  --lg-drop:0 20px 46px -22px rgba(0,0,0,.75);
  --lg-line:color-mix(in srgb,#fff 11%,transparent)}}
:root[data-theme="dark"]{
  --lg-sheen:linear-gradient(140deg,color-mix(in srgb,#fff 13%,transparent) 0%,color-mix(in srgb,#fff 3%,transparent) 32%,transparent 58%);
  --lg-edge:inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent),inset 1px 0 0 color-mix(in srgb,#fff 7%,transparent),
            inset 0 -1px 0 color-mix(in srgb,#fff 4%,transparent);
  --lg-drop:0 20px 46px -22px rgba(0,0,0,.75);
  --lg-line:color-mix(in srgb,#fff 11%,transparent)}

body:has(#pg-app)::before,body:has(.pg-hero)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 10% 28%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%),
    radial-gradient(34% 30% at 90% 58%,color-mix(in srgb,#6f5cff 15%,transparent),transparent 72%),
    radial-gradient(30% 26% at 55% 98%,color-mix(in srgb,#e2b04a 14%,transparent),transparent 72%)}

.pg-stage,.pg-rig,.pg-card,.pg-bar,.pg-me,.pg-rung,.pg-chal,.pg-switch,.pg-pill,.pg-mechip{
  background:var(--lg-sheen),var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-edge),var(--lg-drop)}
.pg-hud{background:color-mix(in srgb,var(--surface-2) 52%,transparent)}
.pg-card.now{background:var(--lg-sheen),var(--accent-soft)}

:is([data-focus="on"],[data-calm="on"]) :is(.pg-stage,.pg-rig,.pg-card,.pg-bar,.pg-me,.pg-rung,.pg-chal,.pg-switch,.pg-pill,.pg-mechip){
  background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:var(--hair)}
:is([data-focus="on"],[data-calm="on"]) .pg-hud{background:var(--surface-2)}
:is([data-focus="on"],[data-calm="on"]) .pg-card.now{background:var(--accent-soft)}
:is([data-focus="on"],[data-calm="on"]) body::before{display:none}

/* ═══ THE SWITCH BAR on every game page: the career chip and the six games as pills. It
   sits inside .work, so Εστίαση keeps it (George: «even in focus mode») ═══ */
.pg-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px;border-radius:var(--r-pill);margin:0 0 12px}
.pg-mechip{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 8px;border-radius:var(--r-pill);
  color:var(--ink);text-decoration:none;flex:none}
.pg-mechip:hover{border-color:var(--accent)}
.pg-mechip .pg-fig{--H:calc(26px + 12px * var(--t));width:26px;transition:none;color:var(--accent)}
.pg-mechip .mc{display:grid;line-height:1.15}
.pg-mechip .mc b{font-family:var(--f-display);font-size:13.5px;font-weight:800}
.pg-mechip .mc small{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.pg-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.pg-pill{padding:6px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:650;color:var(--ink-2);
  text-decoration:none;white-space:nowrap}
.pg-pill:hover{color:var(--ink);border-color:var(--accent)}
.pg-pill.now{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}
@media (max-width:560px){.pg-switch{border-radius:var(--r-lg)}.pg-pills{flex-basis:100%}}

/* ═══ review round, 25 Sep 2026 (seven notes) ═══ */
/* hub sections: a line and room between them, and room under each intro */
.pg-sec{margin-top:44px;padding-top:40px;border-top:1px solid var(--hair)}
.pg-sec > .lede{margin-bottom:24px}
.pg-sec > h2{margin-bottom:14px}

/* the multiplier scale under the age slider: four segments sized like the slider's bands */
.pg-xscale{display:flex;gap:4px;margin-top:10px}
.pg-xscale span{flex:var(--w) 1 0;display:grid;justify-items:center;gap:1px;padding:6px 2px;border-radius:var(--r-sm);
  border:1px solid var(--hair);color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease)}
.pg-xscale b{font-family:var(--f-mono);font-size:15px;font-weight:700}
.pg-xscale small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:inherit;opacity:.85}
.pg-xscale span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* the game HUD's multiplier: its own badge, not a footnote */
.pg-x{flex:none;font-family:var(--f-mono);font-size:17px;font-weight:800;line-height:1;padding:7px 10px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}

/* the ladder's small lines, readable: full ink (white in dark mode), less dimming */
.pg-rung small{color:var(--ink);opacity:.88;font-size:11px}
.pg-rung.locked .rt,.pg-rung.locked .st{opacity:.84}

/* the walker faces the pointer and can be dragged to change the age */
.pg-rig .pg-fig{transition:--t .38s var(--ease),transform .3s var(--ease)}
.pg-fig.face-left{transform:scaleX(-1)}
.pg-figbox{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pg-figbox.dragging{cursor:grabbing}
[data-focus="on"] .pg-figbox{cursor:default}
[data-focus="on"] .pg-fig.face-left{transform:none}

/* ── loading screen (George, 25 Sep 2026: "you didnt make loading hero") ────────────────
   The «;» pops in, a ring fills once around it, and the whole screen fades at 1,0 s. The
   fade is a CSS animation, so it clears even if a script fails. Once per visit: the inline
   script sets data-pgl on later pages. Never in Εστίαση, ήρεμη or reduced motion. */
@property --pgl{syntax:"<angle>";inherits:false;initial-value:0deg}
#pg-loader{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:var(--paper);animation:pgLoadOut .45s cubic-bezier(.2,.7,.2,1) 1s forwards}
#pg-loader .lm{width:112px;height:112px;position:relative;animation:pgLoadPop .5s cubic-bezier(.2,.7,.2,1) both}
/* 🔴 as in the proposal: the tile and the ring are the SAME accent, so the «;» sits on one
   colour. A brand-blue tile inside an accent ring clashed (George, 25 Sep: "not correct"). */
#pg-loader .mark{position:absolute;inset:0;display:grid;place-items:center;border-radius:28%;
  background:var(--accent);color:var(--on-accent)}
/* the site's MARK draws its own tile in var(--blue): repaint that tile in the accent and fill the
   box with it, so there is one colour, not a blue square inside a green one */
#pg-loader .mark{--blue:var(--accent);--on-blue:var(--on-accent)}
#pg-loader .mark svg{width:84%;height:84%;display:block}
#pg-loader .ring{position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(var(--accent) var(--pgl),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 59%);mask:radial-gradient(circle,transparent 57%,#000 59%);
  animation:pgLoadRing .85s cubic-bezier(.2,.7,.2,1) both}
#pg-loader .lbl{position:absolute;top:calc(50% + 96px);left:16px;right:16px;text-align:center;
  font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:var(--ink-3);
  animation:pgLoadFade .5s ease .25s both}
@keyframes pgLoadPop{from{transform:scale(.72);opacity:0}to{transform:none;opacity:1}}
@keyframes pgLoadRing{from{--pgl:0deg}to{--pgl:360deg}}
@keyframes pgLoadFade{from{opacity:0}}
@keyframes pgLoadOut{to{opacity:0;visibility:hidden;pointer-events:none}}
/* the hero arrives as the loader leaves, once */
:root:not([data-pgl]) .pg-hero > *{animation:pgHeroIn .6s cubic-bezier(.2,.7,.2,1) both}
:root:not([data-pgl]) .pg-hero > :nth-child(1){animation-delay:1.05s}
:root:not([data-pgl]) .pg-hero > :nth-child(2){animation-delay:1.2s}
@keyframes pgHeroIn{from{opacity:0;transform:translateY(14px)}}
:root[data-pgl] #pg-loader,:root[data-focus="on"] #pg-loader,:root[data-calm="on"] #pg-loader{display:none}
:root:is([data-focus="on"],[data-calm="on"]) .pg-hero > *{animation:none}
@media (prefers-reduced-motion:reduce){#pg-loader{display:none}.pg-hero > *{animation:none!important}}

/* ── «Να κρατήσουμε την πρόοδό σου;» (George, 25 Sep 2026) ─────────────────────────── */
#pg-keep{position:fixed;inset:0;z-index:8500;display:grid;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--paper) 62%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:pgLoadFade .25s ease both}
.pg-keep-box{width:min(460px,100%);padding:26px 24px 22px;border-radius:24px;text-align:center;
  background:var(--surface);border:1px solid var(--line,rgba(127,127,127,.25));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);animation:pgLoadPop .35s cubic-bezier(.2,.7,.2,1) both}
@supports (corner-shape:squircle){.pg-keep-box{corner-shape:squircle}}
.pg-keep-box .pg-mark{width:48px;height:48px;margin:0 auto 12px}
.pg-keep-box h2{font-size:21px;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em}
.pg-keep-box p{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.pg-keep-box .pg-sub{font-size:13.5px;color:var(--ink-3)}
.pg-keep-box .pg-actions{display:grid;gap:8px;margin-top:16px}
.pg-keep-box .act{width:100%;justify-content:center}
:root:is([data-calm="on"],[data-focus="on"]) #pg-keep{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:color-mix(in srgb,var(--paper) 92%,transparent);animation:none}
:root:is([data-calm="on"],[data-focus="on"]) .pg-keep-box{animation:none}
@media (prefers-reduced-motion:reduce){#pg-keep,.pg-keep-box{animation:none}}
.pg-hint{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}

/* ── scroll reveal on the hub: hidden set = .pg-rv:not(.in), revealed set = the same with
   .in. Only games.js puts either class on, and only when it can also take it off. */
.pg-rvon .pg-rv{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.pg-rvon .pg-rv:not(.in){opacity:0;transform:translateY(22px)}
:root:is([data-focus="on"],[data-calm="on"]) .pg-rv{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.pg-rv{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.pg-rv{opacity:1!important;transform:none!important}}

/* the number key under each answer (George's review note, 25 Sep 2026). Only where a
   keyboard is likely: a fine pointer that can hover. */
.pg-numtile{position:relative}
.pg-kbd{display:none}
@media (hover:hover) and (pointer:fine){
  .pg-kbd{display:block;margin:8px auto 0;width:max-content;min-width:22px;padding:2px 6px;border-radius:6px;
    font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-3);
    border:1px solid var(--hair);border-bottom-width:2px;background:var(--glass-2)}
}