/* ============================================================================
   COFFEE FESTIVAL EUROPE — the game page
   Namespaced g* throughout, per the house rule.
   ========================================================================= */

/* ---------- the launch panel ---------------------------------------------
   The game is no longer framed, so what sits on the page is an invitation
   rather than a viewport: one large anchor that opens the game in its own
   tab. Deliberately an <a> and not a button — middle-click, ⌘-click and
   "open in new window" have to keep working, and a link is what a screen
   reader should announce for something that leaves the page.            */
.glaunch{position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,3vw,52px);
  margin-top:clamp(18px,2.4vw,32px);
  padding:clamp(26px,3.6vw,58px) clamp(24px,3.4vw,54px);
  overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;
  border-radius:clamp(16px,1.8vw,26px);
  border:1px solid rgba(244,238,228,.12);
  background:linear-gradient(160deg,rgba(36,23,16,.92),rgba(16,14,12,.96));
  box-shadow:0 34px 90px rgba(0,0,0,.45);
  transition:transform .9s var(--e-out-expo),border-color .6s var(--e-out-cubic),
             box-shadow .9s var(--e-out-expo)}
.glaunch:hover{transform:translateY(-4px);border-color:rgba(226,85,30,.42);
  box-shadow:0 46px 116px rgba(0,0,0,.56)}
.glaunch:focus-visible{outline:2px solid var(--ember);outline-offset:6px}

/* the ember behind the play control, breathing on its own and swelling on
   hover — the same glow language as the orb */
.glaunch__glow{position:absolute;z-index:-1;right:2%;top:50%;translate:0 -50%;
  width:min(46%,460px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--ember-glow),transparent 66%);opacity:.5;
  animation:gGlow 5.4s ease-in-out infinite;
  transition:opacity .8s var(--e-out-cubic),scale .9s var(--e-out-expo)}
.glaunch:hover .glaunch__glow{opacity:.85;scale:1.12}
@keyframes gGlow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:.75}}

/* a faint pixel grid, so the panel reads as a screen without being one. It
   drifts one cell on hover, which is the whole animation. */
.glaunch__grid{position:absolute;z-index:-1;inset:-2px;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(244,238,228,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,238,228,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 78% 50%,#000,transparent 72%);
          mask-image:radial-gradient(120% 100% at 78% 50%,#000,transparent 72%);
  transition:transform 1.4s var(--e-out-expo),opacity .8s var(--e-out-cubic)}
.glaunch:hover .glaunch__grid{transform:translate3d(-44px,0,0);opacity:.8}

.glaunch__say{display:grid;justify-items:start;gap:.55rem;min-width:0}
.glaunch__h{display:block;margin-top:.15em;
  font-family:var(--f-display);font-weight:720;font-stretch:104%;line-height:1.04;
  font-size:clamp(1.7rem,3vw,2.9rem);letter-spacing:-.015em;color:var(--ivory)}
.glaunch__b{display:block;max-width:46ch;line-height:1.6;color:var(--bone);
  font-size:clamp(.9rem,1vw,1.02rem)}

/* three facts, so nobody has to click to find out what they are getting */
.glaunch__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.glaunch__meta > span{display:grid;gap:.3em;padding:.6rem .9rem;border-radius:12px;
  border:1px solid rgba(244,238,228,.12);background:rgba(244,238,228,.03);
  transition:border-color .5s var(--e-out-cubic),background-color .5s var(--e-out-cubic),
             transform .7s var(--e-out-expo)}
.glaunch__meta i{font-style:normal;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.glaunch__meta b{font-weight:620;font-size:.88rem;color:var(--ivory)}
.glaunch:hover .glaunch__meta > span{border-color:rgba(226,85,30,.3);
  background:rgba(226,85,30,.07);transform:translateY(-2px)}
/* staggered, so the row settles rather than snapping */
.glaunch__meta > span:nth-child(1){transition-delay:0s}
.glaunch__meta > span:nth-child(2){transition-delay:.05s}
.glaunch__meta > span:nth-child(3){transition-delay:.1s}

.glaunch__go{display:grid;justify-items:center;gap:1rem}

.gnote{margin-top:clamp(14px,1.8vw,22px);max-width:70ch;line-height:1.6}
.gnote[hidden]{display:none}

/* the play button: the orb's language, at stage size */
.gplay{position:relative;display:grid;place-items:center;gap:.9rem;
  width:clamp(128px,13vw,180px);height:clamp(128px,13vw,180px);
  border:0;border-radius:50%;cursor:pointer;background:none;color:var(--ivory);
  transition:transform .6s var(--e-out-expo)}
.gplay:hover{transform:scale(1.05)}
.gplay:focus-visible{outline:2px solid var(--ember);outline-offset:8px}
.gplay__ring{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(226,85,30,.5);
  background:radial-gradient(circle at 50% 30%,rgba(226,85,30,.22),rgba(226,85,30,.06));
  transition:background-color .5s var(--e-out-cubic),border-color .5s var(--e-out-cubic)}
.gplay::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(226,85,30,.4);
  animation:gPing 2.8s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes gPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.42);opacity:0}}
.gplay:hover .gplay__ring{background:var(--ember);border-color:var(--ember)}
/* the triangle is drawn, so there is no glyph to go missing */
.gplay__tri{position:relative;z-index:1;width:0;height:0;margin-left:.28em;
  border-left:clamp(17px,1.7vw,23px) solid currentColor;
  border-top:clamp(11px,1.1vw,15px) solid transparent;
  border-bottom:clamp(11px,1.1vw,15px) solid transparent;
  transition:transform .6s var(--e-out-expo)}
.gplay:hover .gplay__tri{transform:translateX(2px)}
.gplay__t{position:relative;z-index:1;font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase}

/* the play control is a span inside the link now, not a button of its own, so
   every hover state has to be driven from the link — including from keyboard
   focus, which never produces a :hover at all */
.glaunch:hover .gplay,.glaunch:focus-visible .gplay{transform:scale(1.06)}
.glaunch:hover .gplay__ring,.glaunch:focus-visible .gplay__ring{
  background:var(--ember);border-color:var(--ember)}
.glaunch:hover .gplay__tri,.glaunch:focus-visible .gplay__tri{transform:translateX(2px)}
.glaunch:active .gplay{transform:scale(.98)}
.glaunch:hover .gplay__t{color:var(--ivory)}


/* ---------- the info card ------------------------------------------------ */
.gmodal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;
  padding:clamp(16px,3vw,40px)}
.gmodal[hidden]{display:none}
.gmodal__scrim{position:absolute;inset:0;background:rgba(6,4,3,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .5s var(--e-out-cubic)}
.gmodal.is-on .gmodal__scrim{opacity:1}

.gmodal__card{position:relative;width:min(100%,620px);max-height:88svh;overflow:auto;
  padding:clamp(24px,3vw,40px);border-radius:clamp(18px,2vw,28px);
  border:1px solid rgba(226,85,30,.34);
  background:linear-gradient(160deg,rgba(38,24,17,.98),rgba(18,15,13,.98));
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .5s var(--e-out-cubic),transform .7s var(--e-out-expo)}
.gmodal.is-on .gmodal__card{opacity:1;transform:none}
.gmodal__glow{position:absolute;inset:auto -20% -50% auto;width:70%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--ember-glow),transparent 68%);opacity:.5}

.gmodal__x{position:absolute;top:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px);z-index:2;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;
  color:var(--muted);background:rgba(244,238,228,.05);border:1px solid rgba(244,238,228,.12);
  transition:color .35s,background-color .35s,transform .5s var(--e-out-expo)}
.gmodal__x svg{width:14px;height:14px}
.gmodal__x:hover{color:var(--ivory);background:rgba(244,238,228,.14);transform:rotate(90deg)}

.gmodal__h{position:relative;z-index:1;margin-top:.6em;
  font-family:var(--f-display);font-weight:780;font-stretch:108%;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.04;letter-spacing:-.025em;color:var(--ivory)}
.gmodal__b{position:relative;z-index:1;margin-top:.7em;max-width:46ch;
  font-size:clamp(.9rem,1vw,1rem);line-height:1.6;color:var(--bone);opacity:.86}

.gmodal__list{position:relative;z-index:1;list-style:none;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;
  display:grid;gap:clamp(9px,1.2vw,14px)}
.gmodal__list li{display:flex;gap:.85rem;align-items:flex-start;
  padding:.7rem .85rem;border-radius:13px;
  border:1px solid rgba(244,238,228,.08);background:rgba(244,238,228,.025)}
.gmodal__n{flex:none;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  color:var(--ember);padding-top:.25em}
.gmodal__list b{display:block;font-weight:640;color:var(--ivory);
  font-size:clamp(.88rem,.98vw,.98rem)}
.gmodal__list i{display:block;margin-top:.2em;font-style:normal;
  font-size:clamp(.8rem,.88vw,.88rem);line-height:1.5;color:var(--bone);opacity:.78}

.gmodal__act{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;margin-top:clamp(20px,2.4vw,30px)}
.gmodal__later{cursor:pointer;background:none;border:0;color:var(--muted);
  font-family:var(--f-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.12em;
  text-decoration:underline;text-underline-offset:.3em;
  text-decoration-color:rgba(244,238,228,.24);transition:color .35s,text-decoration-color .35s}
.gmodal__later:hover{color:var(--ivory);text-decoration-color:var(--ivory)}

/* while the card is open the page behind it does not scroll */
body.has-gmodal{overflow:hidden}

@media (max-width:760px){
  .glaunch{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
  .glaunch__go{justify-items:start}
  .glaunch__glow{right:auto;left:8%;top:auto;bottom:8%;width:min(80%,320px)}
  .gmodal__card{max-height:92svh}
}
@media (prefers-reduced-motion:reduce){
  .glaunch__glow,.gplay::after{animation:none}
  .glaunch:hover{transform:none}
  .glaunch:hover .glaunch__grid{transform:none}
  .gmodal__card,.gmodal__scrim{transition-duration:.01ms}
  .gmodal__x:hover{transform:none}
}

/* the dialog takes focus on open; it is a container, not a control */
.gmodal__card:focus{outline:none}
.gmodal__card:focus-visible{outline:2px solid var(--ember);outline-offset:4px}