.gg{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,3vh,28px);
  padding:20px 16px;
  color:var(--text);
  font-family:var(--font-body);
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.gg-head,
.gg-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease .25s,transform .4s var(--ease) .25s;
}
.gg.in .gg-head,
.gg.in .gg-foot{opacity:1;transform:none}
.gg.is-revealing .gg-foot,
.gg.is-won .gg-foot{opacity:0;pointer-events:none;transition-delay:0s}
.gg-title{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:34px;
  padding:0 16px;
  border-radius:99px;
  border:1px solid rgba(255,215,120,.28);
  background:rgba(228,174,57,.08);
  color:#ffd36a;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.gg-title .fa-star{font-size:.72rem}
.gg-title b{
  margin-left:4px;
  padding-left:11px;
  border-left:1px solid rgba(255,215,120,.28);
  font-family:var(--font-num);
  font-size:.92rem;
  letter-spacing:.04em;
  color:#fff3cf;
}
html.reduced-borders .gg-title b{border-left-width:0!important;padding-left:4px}
.gg-hint{
  min-height:1.4em;
  max-width:min(92vw,640px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.14rem;
  line-height:1.3;
  text-align:center;
  color:var(--text);
}
.gg-hint.good{color:#ffe7a6}
.gg-hint.mute{color:var(--text-2)}
.gg-board{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:min(92vw,1020px);
}
.gg-board.wait > *{visibility:hidden}
.gg-skip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 18px;
  border-radius:99px;
  border:1px solid var(--border);
  background:rgba(17,19,26,.72);
  color:var(--text-2);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.gg-skip:hover{color:#fff;background:var(--surface2)}
.gg-skip i{font-size:.8rem;color:#ffd36a}
.gg-skip kbd{
  padding:2px 6px;
  border-radius:5px;
  background:var(--surface3);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:.68rem;
  font-weight:600;
}
@media (pointer:coarse){.gg-skip kbd{display:none!important}}

.gg-card{
  --gold-hi:#ffe7a6;
  position:relative;
  width:var(--cw);
  height:calc(var(--cw) * 1.267);
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:var(--r-sm);
  font-size:calc(9px + var(--cw) * .04);
  isolation:isolate;
}
.gg-card-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  border:1px solid rgba(255,228,132,.22);
  background:
    radial-gradient(ellipse at 26% 8%,rgba(255,230,130,.2),transparent 54%),
    linear-gradient(168deg,#1a1305 0%,#2f220a 38%,#45320f 56%,#2a1e08 80%,#171104 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.08),0 14px 30px -14px rgba(0,0,0,.8);
}
.gg-card-bg::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:#ffe588;
}
.gg-card-bg .shimmer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.gg-card-top{
  position:relative;
  z-index:2;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:.6em .62em 0;
}
.gg-rc{
  display:inline-flex;
  align-items:center;
  gap:.28em;
  font-family:var(--font-num);
  font-weight:700;
  font-size:.92em;
  line-height:1;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.gg-rc img[src*="RazeCoin"]{width:1em;height:1em;transform:none}
.gg-card-img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:56%;
  margin-top:3%;
  padding:4% 7%;
  object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));
  pointer-events:none;
}
.gg-back-icon{
  position:relative;
  z-index:2;
  width:58%;
  margin-top:20%;
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  pointer-events:none;
}
.gg-card-name{
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:0 .6em .78em;
  text-align:center;
  line-height:1.25;
}
.gg-card-name .w,
.gg-card-name .s{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gg-card-name .w{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.7em;
  color:var(--muted);
}
.gg-card-name .s{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88em;
  color:var(--gold-hi);
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.gg-shade{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  background:rgba(6,7,10,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease .15s;
}
.gg-glint{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(255,236,170,.26),transparent 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.gg-flip{
  position:relative;
  width:var(--cw);
  height:calc(var(--cw) * 1.267);
}
.gg-face,
.gg-backface{
  position:absolute;
  inset:0;
}
.gg-face{visibility:hidden}
.gg-flip.is-open .gg-face{visibility:visible}
.gg-flip.is-open .gg-backface{visibility:hidden}
.gg-fly{
  position:fixed;
  z-index:40;
  pointer-events:none;
  will-change:transform;
}
.gg-halo{
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,215,90,.34),rgba(255,190,60,.12) 55%,transparent);
  animation:ggHalo 1.6s ease-in-out infinite;
}
@keyframes ggHalo{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
html.reduce-motion .gg-halo{animation:none}

.gg-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
  max-width:100%;
}
.gg-slot{
  position:relative;
  width:var(--cw);
  height:calc(var(--cw) * 1.267);
  border-radius:var(--r-sm);
  outline:none;
}
.gg-lift{
  position:relative;
  transition:transform .22s var(--ease);
}
.gg-cards.live .gg-slot{cursor:pointer}
@media (hover:hover){
  .gg-cards.live .gg-slot:hover .gg-lift{transform:translateY(-8px)}
  .gg-cards.live .gg-slot:hover .gg-glint{opacity:1}
}
.gg-cards.live .gg-slot:focus-visible .gg-lift{transform:translateY(-8px)}
.gg-cards.live .gg-slot:focus-visible .gg-glint{opacity:1}
.gg-mark{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:var(--r-sm);
  pointer-events:none;
  opacity:0;
  box-shadow:0 0 0 2px #ffd36a,0 0 26px rgba(255,196,70,.45);
  transition:opacity .2s ease;
}
.gg-mark b{
  position:absolute;
  top:-9px;
  right:-9px;
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:99px;
  background:#ffd36a;
  color:#1a1305;
  font-family:var(--font-num);
  font-weight:700;
  font-size:.86rem;
  line-height:1;
}
.gg-mark b:empty{display:none}
.gg-slot.is-chosen{z-index:5}
.gg-slot.is-chosen .gg-mark{opacity:1}
.gg-slot.is-chosen.shown .gg-mark{opacity:0}
.gg-slot.dim .gg-shade{opacity:1}
.gg-cards.has-win .gg-slot:not(.is-chosen){opacity:.5;transition:opacity .4s ease}
.gg-cards.tiny .gg-card-name .w{display:none}
.gg-cards.tiny .gg-card-name{padding-bottom:.62em}
.gg-cards.tiny .gg-card-top{padding:.45em .5em 0}
.gg-cards.tiny .gg-backface .gg-card-name{display:none}
.gg-cards.tiny .gg-back-icon{width:66%;margin-top:28%}

@media (max-width:768px){
  .gg{padding:16px 14px;gap:16px}
  .gg-title{height:30px;padding:0 13px;font-size:.68rem;letter-spacing:.14em}
  .gg-hint{font-size:1rem}
  .gg-skip{height:36px;font-size:.8rem}
}