/* PocaPal Games (/games/; the owner, 29 October 2026: "can you also add the /games/ landing page to pocapal"), as
   Peregrino's /games/ is laid out, in Encore: the night of the home page's hero (in both themes, a venue with the
   lights down, the pink's halo at its top) with "PocaPal Games" in Anton, and each game a cabinet on it, its little
   board playing the game by itself (assets/games.js); behind the cabinets, the home page's queue of cards and things
   (the owner: "make the bottom part of /games/ carry the marquee background but not the game profiles themselves");
   then the paper with the app. Selectors start
   with .doc where doc.css's own (lists, links, paragraphs) would otherwise win. */

.gm-page{--mk-nav-bg:rgba(9,9,13,.68);--mk-nav-fg:#F2F2F0;--mk-nav-line:rgba(255,255,255,.08);
  --hangul:"Black Han Sans",var(--f-display);--night:#09090D;--night-panel:#131318;--night-card:#1B1B21;--night-ink:#F2F2F0;--night-grey:#A2A4AA}
.gm-page::before{display:none}
body.gm-page{background:var(--night)}  /* under the navbar, which sits over the night */
.doc main.gm{max-width:none;padding:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gm-page :focus-visible{outline:3px solid var(--block);outline-offset:3px}

/* MARK: The night */
.gm-hero{position:relative;overflow:hidden;padding:clamp(48px,8vh,88px) var(--pad) calc(var(--peek) + clamp(28px,5vh,48px));--peek:clamp(96px,11vw,150px);text-align:center;color:var(--night-ink);
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,61,127,.24),transparent 70%),var(--night)}
.doc .gm-kicker{margin:0;font:500 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--block)}
.doc .gm-hero h1{margin:16px 0 0;font:400 clamp(64px,11vw,148px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:.004em;color:var(--night-ink)}
.gm-lit{color:var(--block);text-shadow:0 0 34px rgba(255,61,127,.55)}

/* MARK: A cabinet: the game's little board beside what it is and Play */
.gm-floor{position:relative;max-width:1060px;margin:clamp(36px,6vh,60px) auto 0}
.doc .gm-games{position:relative;z-index:2;list-style:none;margin:0;padding:0;text-align:left}

/* MARK: The queue behind the cabinets: the home page's two lanes (styles.css, .marquee), the whole window wide, their
   lower one running out under the cabinets' foot */
.gm-marquee{position:absolute;z-index:0;left:50%;bottom:calc(-1 * var(--peek));width:100vw;transform:translateX(-50%);display:grid;gap:clamp(14px,2vw,26px);
  pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gm-lane{overflow:hidden;padding:8px 0}
.gm-row{display:flex;align-items:flex-end;width:max-content;animation:gm-lane var(--dur,40s) linear infinite;animation-play-state:paused}
.gm-lane[data-lane="things"] .gm-row{animation-direction:reverse}
.gm-marquee.is-live .gm-row{animation-play-state:running}
.gm-marquee.is-paused .gm-row{animation-play-state:paused}
@keyframes gm-lane{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* the spacing is a margin, not a gap: a gap leaves one fewer than items and the loop would jump */
.gm-marquee img{display:block;height:clamp(118px,13.5vw,176px);width:auto;margin-right:clamp(26px,3.2vw,52px);border-radius:clamp(8px,.95vw,12px);
  box-shadow:5px 5px 0 rgba(255,61,127,.34);opacity:.5}
.gm-marquee img.is-cut{border-radius:0;box-shadow:none;filter:drop-shadow(5px 5px 0 rgba(255,61,127,.34))}
.gm-marquee img.is-square{height:clamp(104px,12vw,156px)}
/* the one button that stops what moves on the page (WCAG 2.2.2), as the home page's queue has */
.gm-pause{position:absolute;z-index:3;right:0;top:calc(-1 * clamp(44px,6vh,56px));display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:0;
  border-radius:999px;cursor:pointer;background:rgba(255,255,255,.1);color:var(--night-ink);font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 .75px 0 rgba(255,255,255,.16)}
.gm-pause:hover{background:rgba(255,255,255,.16)}
.gm-pp{width:10px;height:11px;display:inline-block;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.gm-pause[aria-pressed="true"] .gm-pp{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.doc .gm-game{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;margin:0;padding:clamp(16px,2.4vw,26px);
  border-radius:14px;background:var(--night-card);box-shadow:inset 0 .75px 0 rgba(255,255,255,.14),inset 0 0 0 .75px rgba(255,255,255,.06),0 20px 60px -20px rgba(0,0,0,.8)}
.gm-info{padding:4px clamp(0px,1vw,10px) 4px 0}
.doc .gm-tag{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--block)}
.doc .gm-info h2{margin:12px 0 0;font:400 clamp(38px,4.4vw,56px)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.004em;color:var(--night-ink)}
.gm-ko{font-family:var(--hangul);color:var(--block);letter-spacing:0}
.doc .gm-line{margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--night-grey)}
.doc .gm-facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.doc .gm-facts li{margin:0;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--night-ink)}
.gm-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.gm-scores div{min-width:0;padding:11px 14px;border-radius:12px;background:var(--night-panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.gm-scores dt{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night-grey)}
.gm-scores dd{margin:6px 0 0;font:500 18px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--night-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-scores dd.is-none{font:500 15px/1.2 var(--f-ui);color:var(--night-grey)}
.doc main a.gm-play{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 0;min-height:58px;border-radius:999px;background:var(--block);color:#0B0B0C;
  font:700 19px/1 var(--f-ui);text-decoration:none;box-shadow:0 0 30px -6px rgba(255,61,127,.6);transition:background .15s,transform .12s}
.gm-play svg{width:18px;height:18px;fill:currentColor}
.doc main a.gm-play:hover{background:#FF5A93}
.doc main a.gm-play:active{transform:scale(.98)}

/* MARK: The little board: ten letters going onto their sounds by themselves */
.gm-stage{position:relative;padding:14px 16px 16px;border-radius:12px;background:var(--night-panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.gm-stage-bar{display:flex;gap:22px;padding:0 2px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.gm-stage-bar span{display:flex;flex-direction:column;gap:5px}
.gm-stage-bar i{font:500 10px/1 var(--f-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--night-grey)}
.doc .gm-stage-bar b{font:500 18px/1 var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--night-ink)}
.gm-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 10px;margin:16px 0 0;padding:0;list-style:none}
.gm-slots li{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0}
.gm-place{display:grid;place-items:center;width:100%;max-width:58px;aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--night-ink);font:400 28px/1 var(--hangul);transition:background .25s,box-shadow .25s}
.gm-slots li.is-filled .gm-place{background:rgba(255,61,127,.16);box-shadow:inset 0 0 0 1px rgba(255,61,127,.38)}
.gm-slots li.is-new .gm-place{animation:gm-lit .7s ease-out}
@keyframes gm-lit{0%{background:var(--block);color:#0B0B0C;box-shadow:0 0 24px -2px rgba(255,61,127,.7)}}
.gm-slots li.is-wrong .gm-place{box-shadow:inset 0 0 0 2px #E5484D;animation:gm-no .42s}
@keyframes gm-no{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
.gm-sound{font:500 12px/1 var(--f-mono);color:var(--night-grey)}
.gm-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:46px;margin:16px -16px -16px;padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18)}
.gm-tray span,.gm-flying{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#26262E;color:var(--night-ink);
  font:400 25px/1 var(--hangul);box-shadow:inset 0 .75px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.4);transform:rotate(var(--tilt,0deg));transition:background .2s,transform .2s}
.gm-tray span.is-held{background:var(--block);color:#0B0B0C;transform:scale(1.08);box-shadow:0 0 22px -4px rgba(255,61,127,.7)}
.gm-tray span.is-away{visibility:hidden}
.gm-flying{position:absolute;z-index:3;left:0;top:0;margin:0;background:var(--block);color:#0B0B0C;transform:none;box-shadow:0 0 24px -4px rgba(255,61,127,.7),0 12px 24px -8px rgba(0,0,0,.6)}
.gm-stage.is-clearing .gm-place,.gm-stage.is-clearing .gm-tray{transition:opacity .35s;opacity:0}

/* MARK: The paper: the app */
.gm-paper{background:var(--paper)}
.gm-more{max-width:740px;margin:0 auto;padding:clamp(44px,7vh,72px) var(--pad) clamp(56px,8vh,90px)}
.doc .gm-more .contact{margin-top:0}

@media (max-width:860px){
  .doc .gm-game{grid-template-columns:minmax(0,1fr)}
  .gm-info{padding:0 4px 4px}
}
@media (max-width:480px){
  .gm-stage{padding:12px 12px 14px}
  .gm-slots{gap:10px 6px}
  .gm-place{font-size:24px}
  .gm-tray{margin:14px -12px -14px;padding:12px 12px 14px;gap:6px}
  .gm-tray span,.gm-flying{width:40px;height:40px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .gm-slots li.is-new .gm-place,.gm-slots li.is-wrong .gm-place{animation:none}
  .gm-row{animation:none}
}