/* Games section (#games view). Everything is scoped to #games so it can't touch the rest of the site.
   Layout: plum hero with group + level pickers → 10 units in order → player overlay. Titles use Tanker. */
@font-face { font-family: "Tanker"; src: url("fonts/Tanker-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

#games {
  --plum: #301D50; --plum-ink: #FFFFFF; --plum-muted: #CDBDEB;
  --kids: #FFE3B3; --kids-ink: #7A4B00;
  --teens: #EADBFF; --teens-ink: #583B8A;
  --adults: #DCE6FF; --adults-ink: #2C4FA8;
  --star: #F2A900;
  --f-title: "Tanker", var(--f-display);
  --f-game: "Fredoka", "Poppins", "Segoe UI", sans-serif;
  --g-radius: 18px;
}

/* Undo site-wide rules that share class names */
#games section { padding-block: 0; }
#games :is(h1, h2, h3, h4) { color: inherit; text-shadow: none; }
#games :is(.hero h1, .content-head h2, .unit-title h3, .pl-head h2, .res h3) { font-family: var(--f-title); font-weight: 400; letter-spacing: .02em; line-height: 1.05; }

/* Hero + pickers */
#games .hero { background: var(--plum); color: var(--plum-ink); }
#games .hero .wrap { padding-block: 48px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
#games .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--hi); text-transform: uppercase; }
#games .hero h1 { margin: 0; font-size: clamp(40px, 7vw, 64px); text-wrap: balance; }
#games .hero p { margin: 0; color: var(--plum-muted); max-width: 58ch; }
#games .pick { display: grid; gap: 8px; margin-top: 6px; }
#games .pick-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plum-muted); }
#games .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#games .chips button { border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: var(--plum-ink); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
#games .chips button[aria-pressed="true"] { background: var(--hi); border-color: var(--hi); color: #301D50; }
#games .chips.lv button { min-width: 64px; }
#games .testlink { justify-self: start; background: none; border: 0; padding: 0; color: var(--hi); font-size: 14px; text-decoration: underline; cursor: pointer; }

/* Content */
#games .content .wrap { padding-block: 40px 72px; display: grid; gap: 22px; }
#games .content-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
#games .content-head h2 { margin: 0; font-size: 36px; }
#games .content-head p { margin: 0; color: var(--muted); font-size: 14px; }

#games .tag { font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
#games .tag.kids { background: var(--kids); color: var(--kids-ink); }
#games .tag.teens { background: var(--teens); color: var(--teens-ink); }
#games .tag.adults { background: var(--adults); color: var(--adults-ink); }

/* Game tile */
#games .ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
#games .gcard { display: grid; grid-template-rows: auto 1fr; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
#games .gcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(48, 29, 80, .12); }
#games .gcard .gb { padding: 12px 14px 14px; display: grid; gap: 2px; align-content: start; }
#games .gcard h4 { margin: 0; font-size: 16px; line-height: 1.3; }
#games .gcard .gt { font-size: 13px; color: var(--muted); }
#games .gcard .gs { font-size: 13px; color: var(--star); letter-spacing: 2px; min-height: 1.5em; }
#games .gcard .gs.none { color: var(--line); }

/* Covers: shapes only, never the answers */
#games .thumb { height: 104px; display: grid; place-items: center; position: relative; overflow: hidden; }
#games .thumb.kids { background: var(--kids); color: var(--kids-ink); }
#games .thumb.teens { background: var(--teens); color: var(--teens-ink); }
#games .thumb.adults { background: var(--adults); color: var(--adults-ink); }
#games .m-mem { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; }
#games .m-mem span { height: 32px; border-radius: 6px; background: currentColor; opacity: .75; display: grid; place-items: center; color: var(--surface); font-family: var(--f-game); font-weight: 700; font-size: 15px; }
#games .m-mem span:nth-child(3n) { opacity: .45; }
#games .m-quiz { display: grid; gap: 6px; width: 64%; }
#games .m-quiz .q { height: 16px; padding: 0; border: 0; border-radius: 8px; background: var(--surface); display: block; }
#games .m-quiz .o { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#games .m-quiz .o span { background: var(--surface); border-radius: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; color: var(--muted); }
#games .m-clock { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid currentColor; box-sizing: border-box; }
#games .m-clock::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; background: currentColor; }
#games .m-match { display: grid; grid-template-columns: 46px 26px 66px; gap: 7px 0; align-items: center; }
#games .m-match span { height: 14px; border-radius: 7px; background: var(--surface); }
#games .m-match i { height: 2px; background: currentColor; }
#games .m-uns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 70%; }
#games .m-uns span { height: 22px; border-radius: 7px; background: var(--surface); }
#games .m-uns span:nth-child(odd) { transform: rotate(-5deg); }
#games .m-wheel { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#583B8A 0 45deg, #C9A8E1 0 90deg, #FFBD59 0 135deg, #8EAAFF 0 180deg, #583B8A 0 225deg, #C9A8E1 0 270deg, #FFBD59 0 315deg, #8EAAFF 0 360deg); border: 4px solid var(--surface); position: relative; }
#games .m-wheel::after { content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top: 11px solid var(--ink); }

/* Units */
#games .units { display: grid; gap: 18px; }
#games .unit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--g-radius); padding: 20px; display: grid; gap: 14px; }
#games .unit-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
#games .unit-title { display: grid; gap: 2px; min-width: 0; }
#games .unit-num { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#games .unit-title h3 { margin: 0; font-size: 30px; }
#games .grammar { justify-self: start; font-size: 13px; background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 3px 10px; }
#games .prog { display: grid; gap: 4px; min-width: 160px; font-size: 13px; color: var(--muted); }
#games .bar { height: 8px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
#games .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

#games .empty { border: 1.5px dashed var(--line); border-radius: var(--g-radius); padding: 28px; text-align: center; color: var(--muted); display: grid; gap: 6px; justify-items: center; }
#games .empty b { color: var(--ink); font-size: 17px; }

/* Player overlay */
#games .player { position: fixed; inset: 0; z-index: 50; background: rgba(18, 11, 30, .72); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-sizing: border-box; }
#games .player[hidden] { display: none; }
#games .pl-box { background: var(--surface); color: var(--ink); width: min(820px, 100%); max-height: 100%; overflow: auto; border-radius: 26px; padding: clamp(18px, 4vw, 34px); box-sizing: border-box; display: grid; gap: 14px; }
#games .pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#games .pl-head h2 { margin: 0; font-size: clamp(28px, 5vw, 38px); }
#games .pl-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#games .pl-close { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; }
#games .pl-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
#games .pl-bar b { color: var(--ink); font-variant-numeric: tabular-nums; }
#games .pl-stage { font-family: var(--f-game); min-width: 0; }
#games .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 12px 26px; font-family: var(--f-body); font-weight: 600; cursor: pointer; }
#games .btn:disabled { opacity: .4; cursor: default; }
#games .btn.ghost { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 10px 24px; }
#games .btn.small { padding: 7px 16px; font-size: 14px; }
#games .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Memory */
#games .mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
#games .mem-c { aspect-ratio: 4 / 5; max-width: 100%; border: 0; border-radius: 14px; cursor: pointer; background: var(--accent); color: var(--accent-ink); font-family: var(--f-game); font-size: clamp(14px, 3.4vw, 20px); font-weight: 600; display: grid; place-items: center; padding: 4px; transition: transform .25s ease, background .25s ease; }
#games .mem-c .face { display: none; }
#games .mem-c .back { font-size: 26px; opacity: .6; }
#games .mem-c.up { background: var(--accent-soft); color: var(--ink); transform: rotateY(180deg); }
#games .mem-c.up > * { transform: rotateY(180deg); }
#games .mem-c.up .face { display: block; }
#games .mem-c.up .back { display: none; }
#games .mem-c .face.pic { font-size: clamp(30px, 8vw, 46px); }
#games .mem-c.ok { background: var(--ok-soft); box-shadow: inset 0 0 0 3px var(--ok); cursor: default; }

/* Match up */
#games .match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
#games .match .col { display: grid; gap: 10px; align-content: start; }
#games .mt { border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; text-align: left; cursor: pointer; font-family: var(--f-game); font-size: 16px; font-weight: 500; }
#games .mt.term { font-weight: 600; }
#games .mt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
#games .mt.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); cursor: default; }
#games .mt.bad { border-color: var(--bad); background: var(--bad-soft); animation: g-shake .35s; }
@keyframes g-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Quiz */
#games .timer { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
#games .timer i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
#games .qz { display: grid; gap: 14px; }
#games .qz h3 { margin: 0; font-size: clamp(22px, 4vw, 28px); font-weight: 600; line-height: 1.25; }
#games .qz .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
#games .op { border: 2px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px 16px; text-align: left; cursor: pointer; font-family: var(--f-game); font-size: 17px; display: flex; gap: 12px; align-items: center; }
#games .op .k { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
#games .op:hover:not(:disabled) { border-color: var(--accent); }
#games .op:disabled { cursor: default; }
#games .op.ok { border-color: var(--ok); background: var(--ok-soft); }
#games .op.bad { border-color: var(--bad); background: var(--bad-soft); }
#games .feedback { font-family: var(--f-body); font-weight: 600; min-height: 1.6em; margin: 0; }
#games .feedback.ok { color: var(--ok); }
#games .feedback.bad { color: var(--bad); }

/* Unscramble */
#games .us { display: grid; gap: 16px; }
#games .us-line { min-height: 62px; border: 2px dashed var(--line); border-radius: 16px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
#games .us-line.ok { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
#games .us-line.bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); }
#games .us-bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
#games .chip { border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); padding: 9px 16px; font-family: var(--f-game); font-size: 18px; font-weight: 500; cursor: pointer; }
#games .us-line .chip { background: var(--accent-soft); color: var(--ink); }

/* Wheel */
#games .wh { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: center; }
#games .wh-wrap { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
#games .wh-wrap canvas { width: 100%; height: 100%; display: block; }
#games .wh-wrap::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 14px solid transparent; border-top: 24px solid var(--ink); }
#games .prompt { background: var(--accent-soft); border-radius: 20px; padding: 20px 22px; display: grid; gap: 8px; min-height: 120px; align-content: center; }
#games .prompt small { font-family: var(--f-body); color: var(--muted); font-size: 13px; }
#games .prompt strong { font-size: clamp(22px, 4vw, 28px); font-weight: 600; line-height: 1.25; }
#games .wh-side { display: grid; gap: 14px; }

/* Result */
#games .res { display: grid; gap: 10px; justify-items: center; text-align: center; padding-block: 12px; }
#games .res-stars { font-size: 56px; letter-spacing: 6px; color: var(--star); line-height: 1; }
#games .res-stars span { color: var(--line); }
#games .res h3 { margin: 0; font-size: 40px; }
#games .res p { margin: 0; font-family: var(--f-body); color: var(--muted); }

@media (max-width: 560px) {
  /* Phones: keep both match columns side by side, and a smaller wheel so the question shows without scrolling */
  #games .pl-box { padding: 16px; gap: 10px; border-radius: 20px; }
  #games .match { gap: 8px; }
  #games .mt { font-size: 14px; padding: 10px; }
  #games .wh { grid-template-columns: 1fr; gap: 14px; }
  #games .wh-wrap { max-width: 220px; }
  #games .prompt { min-height: 0; padding: 14px 16px; }
  #games .prompt strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #games .gcard, #games .mem-c { transition: none; }
  #games .mt.bad { animation: none; }
}

/* Maze chase (Laberinto): Globi runs to the right answer */
#games .pl-box.is-maze { width: min(1040px, 100%); }
#games .pl-box.is-maze #pl-ins { display: none; }
@media (max-width: 600px) { #games .pl-box.is-maze { padding: 14px 12px; } }
#games .m-maze { width: 88px; height: 64px; border-radius: 12px; background: #2E1A4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 64'%3E%3Cg fill='none' stroke='%23C9A8E1' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5H83V59H5Z'/%3E%3Cpath d='M22 5V20M66 5V20M22 59V44M66 59V44M5 32H14M74 32H83'/%3E%3C/g%3E%3Crect x='10' y='10' width='12' height='9' rx='3' fill='%23E4D2F5'/%3E%3Crect x='66' y='10' width='12' height='9' rx='3' fill='%23FFE3A8'/%3E%3Crect x='10' y='45' width='12' height='9' rx='3' fill='%23CFDCFF'/%3E%3Crect x='66' y='45' width='12' height='9' rx='3' fill='%23C9F0DA'/%3E%3Ccircle cx='32' cy='14' r='1' fill='%23fff'/%3E%3Ccircle cx='58' cy='50' r='1' fill='%23fff'/%3E%3Ccircle cx='70' cy='30' r='1.2' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; display: grid; place-items: center; }
#games .m-maze img { display: block; width: 40px; height: 40px; }
#games .mz { display: grid; gap: 8px; justify-items: center; grid-template-columns: minmax(0, 1fr); min-width: 0; }
#games .mz-q { font-family: var(--f-game); font-size: clamp(18px, 4.6vw, 24px); font-weight: 700; text-align: center; line-height: 1.3; min-height: 1.3em; }
#games .mz-q .gap { color: var(--accent); letter-spacing: 1px; }
#games .mz-wrap { position: relative; width: 100%; max-width: 960px; min-width: 0; display: grid; justify-items: center; overflow: hidden; }
#games .mz-wrap canvas { display: block; border-radius: 18px; box-shadow: 0 14px 34px rgba(42, 23, 71, .35); touch-action: none; user-select: none; -webkit-user-select: none; }
#games .mz-msg { position: absolute; left: 50%; top: 29%; transform: translateX(-50%); width: max-content; max-width: min(78%, 46ch); box-sizing: border-box; padding: 8px 14px; border-radius: 12px; background: rgba(36, 20, 62, .88); color: #FFFFFF; font-family: var(--f-game); font-weight: 600; font-size: 15px; line-height: 1.35; text-align: center; pointer-events: none; visibility: hidden; }
#games .mz-msg.on { visibility: visible; }
#games .mz-msg.ok { background: #1F8A55; }
#games .mz-msg.bad { background: #C23B4E; }
#games .mz-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; }
#games .mz-pad button { border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 20px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
#games .mz-pad button:active { filter: brightness(1.15); }
#games .mz-pad [data-d="up"] { grid-column: 2; }
#games .mz-pad [data-d="left"] { grid-column: 1; grid-row: 2; }
#games .mz-pad [data-d="down"] { grid-column: 2; grid-row: 2; }
#games .mz-pad [data-d="right"] { grid-column: 3; grid-row: 2; }
#games .mz-lives { color: #C23B4E; letter-spacing: 1px; }
#games .mz-lives span { color: var(--line); }
@media (hover: hover) and (pointer: fine) { #games .mz-pad { display: none; } }
@media (max-width: 600px) { #games .mz-msg { font-size: 13px; padding: 6px 10px; max-width: 94%; } }