@media (orientation: landscape) and (min-width: 56rem) {
  .games > .gcard--fly { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; }
}
.gfly__art { background: linear-gradient(var(--color-fly-sky-top), var(--color-fly-sky-mid) 58%, var(--color-fly-sky-bottom)); }
.gfly__cloud { position: absolute; left: 58%; top: 12%; width: 5.5rem; height: 2.2rem; border-radius: 1.1rem; background: var(--color-fly-cloud); box-shadow: -2.8rem .7rem 0 -.25rem var(--color-fly-cloud), 2.1rem .55rem 0 -.45rem var(--color-fly-cloud), 0 .45rem 0 0 var(--color-fly-cloud-shade); }
.gfly__col { position: absolute; width: 3.2rem; background: repeating-linear-gradient(var(--color-fly-stone) 0 1.2rem, var(--color-fly-mortar) 1.2rem 1.32rem); box-shadow: inset -.7rem 0 0 var(--color-fly-shade), inset .35rem 0 0 var(--color-fly-stone-light); }

.gfly__col::after { content: ""; position: absolute; left: -.3rem; right: -.3rem; height: 1rem; border-radius: .25rem; background: linear-gradient(var(--color-fly-stone-light), var(--color-fly-stone-dark)); }
.gfly__col--a { left: 16%; top: 0; height: 36%; }
.gfly__col--a::after { bottom: -.2rem; border-bottom: .4rem solid var(--color-fly-moss); }
.gfly__col--b { right: 14%; bottom: 0; height: 48%; }
.gfly__col--b::after { top: -.2rem; border-top: .4rem solid var(--color-fly-moss); }
.gfly__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(var(--color-fly-sea-top), var(--color-fly-sea-deep)); box-shadow: inset 0 .2rem 0 var(--color-fly-foam); }
.gfly__art .stand { z-index: 1; }

.gfly__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gfly__art.has-art > .gfly__cloud, .gfly__art.has-art > .gfly__col, .gfly__art.has-art > .gfly__sea { display: none; }


.gf { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: var(--color-fly-sky-top); color: var(--color-web-paper); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; animation: gf-in var(--motion-base) var(--motion-ease-out); }
.gf__sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@keyframes gf-in { from { opacity: 0; } }


.gf__hud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: flex-start; gap: .5rem; padding: calc(.7rem + env(safe-area-inset-top)) .9rem .5rem; pointer-events: none; }
.gf__hud button { pointer-events: auto; }
.gf__left { display: grid; justify-items: start; gap: .35rem; margin-right: auto; min-width: 0; }
.gf__score { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .85rem .2rem .45rem; border-radius: 1.6rem; background: var(--color-web-glass-dark); box-shadow: 0 .22rem 0 var(--color-web-shade); }
.gf__star .hub-icon { width: 1.8rem; height: 1.8rem; fill: var(--color-fly-star); stroke: var(--color-web-ink); stroke-width: 1.2; }
.gf__n { min-width: 1.2ch; font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.gf__n.is-bump { animation: gf-bump var(--bump-ms) var(--motion-ease-back); }
@keyframes gf-bump { 40% { transform: scale(1.3); } }
.gf__track { display: flex; align-items: center; gap: .22rem; padding: .3rem .5rem; border-radius: 1rem; background: var(--color-web-glass-dark); }
.gf__pip { width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-web-ink3); transition: transform var(--motion-fast) var(--motion-ease-back), background-color var(--motion-fast) ease-out; }
.gf__pip.is-on { background: var(--color-web-lime); transform: scale(1.25); }
.gf__gift .hub-icon { width: 1.15rem; height: 1.15rem; margin-left: .15rem; fill: var(--color-web-gold); stroke: var(--color-web-ink); stroke-width: 1.2; }
.gf__track.is-full { animation: gf-full var(--motion-slow) var(--motion-ease-out); }
.gf__track.is-full .gf__pip { background: var(--color-web-gold); }
@keyframes gf-full { 25% { transform: scale(1.12); box-shadow: 0 0 1.2rem var(--color-web-lime-glow); } }
.gf__bag { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 62vw; min-height: 1.6rem; }
.gf__btn { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border: 0; border-radius: 50%; background: var(--color-web-glass-dark); color: var(--color-web-paper); font-size: 1.6rem; font-weight: 900; line-height: 1; box-shadow: 0 .22rem 0 var(--color-web-shade); transition: transform var(--motion-fast) ease-out; }
.gf__btn:active { transform: translateY(.15rem); box-shadow: none; }
.gf__pause { grid-auto-flow: column; gap: .24rem; }
.gf__pause i { width: .32rem; height: 1.05rem; border-radius: .12rem; background: currentColor; }
.gf:not(.is-fly) .gf__pause, .gf.is-fly .gf__x { display: none; }


.gf__prize { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem .15rem .25rem; border-radius: 1rem; background: var(--color-web-glass-dark); color: var(--color-web-paper); font-size: .9375rem; font-weight: 900; white-space: nowrap; }
.gf__prize--oro b { color: var(--color-web-gold-pale); }
.gf__prize .eball { width: 1.4rem; height: 1.4rem; }
.gf__prize .coin { width: 1.25rem; height: 1.25rem; }
.gf__prize.is-new { animation: gf-land var(--motion-slow) var(--motion-ease-back); }
@keyframes gf-land { from { transform: scale(1.5); box-shadow: 0 0 1.2rem var(--color-web-lime-glow); } }

.gf__pops { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.gf__pop { position: fixed; left: 0; top: 0; animation: gf-pop var(--pop-ms) var(--motion-ease-out) forwards; }
@keyframes gf-pop {
  0% { transform: translate(var(--fx), var(--fy)) translate(-50%, -50%) scale(.3); opacity: 0; }
  22% { transform: translate(var(--fx), calc(var(--fy) - 3rem)) translate(-50%, -50%) scale(1.25); opacity: 1; }
  45% { transform: translate(var(--fx), calc(var(--fy) - 3.4rem)) translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) translate(-50%, -50%) scale(.6); opacity: .35; }
}


.gf__prompt { position: absolute; left: 50%; top: 60%; z-index: 1; display: grid; justify-items: center; gap: .4rem; width: min(calc(100% - 2rem), 26rem); translate: -50% 0; text-align: center; pointer-events: none; opacity: 0; transform: translateY(1rem); transition: opacity var(--motion-base) ease-out, transform var(--motion-base) var(--motion-ease-out); }
.gf__prompt.is-on { opacity: 1; transform: none; }
.gf__go { font-family: var(--font-display); font-size: 2.3rem; font-weight: 400; line-height: 1.05; text-shadow: 0 .22rem 0 var(--color-web-ink), 0 0 1.2rem var(--color-fly-shade); }
.gf__keys, .gf__every { font-weight: 800; text-shadow: 0 .1rem .35rem var(--color-web-ink); }
.gf__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }


.gf__paused, .gf__end { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 1rem; background: var(--color-fly-shade); opacity: 0; pointer-events: none; transition: opacity var(--motion-base) ease-out; }
.gf__paused.is-on, .gf__end.is-on { opacity: 1; pointer-events: auto; cursor: default; }
.gf__card { display: grid; justify-items: center; gap: .3rem; width: min(calc(100vw - 2rem), 22rem); padding: 1.1rem 1.2rem 1rem; border-radius: 1.2rem; background: linear-gradient(160deg, var(--color-web-ink2), var(--color-web-ink)); box-shadow: 0 1rem 2.4rem var(--color-web-shade); text-align: center; transform: translateY(2.2rem) scale(.92); transition: transform var(--motion-slow) var(--motion-ease-back); }
.gf__end.is-on .gf__card { transform: none; }
.gf__title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1.05; }
.gf__big { font-family: var(--font-display); font-size: 4.2rem; font-weight: 400; line-height: .95; color: var(--color-web-lime); text-shadow: 0 0 1.2rem var(--color-web-lime-glow); }
.gf__unit, .gf__bestline, .gf__none { color: var(--color-web-line-dark); font-weight: 800; }
.gf__got { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; min-height: 1.8rem; margin-top: .3rem; }
.gf__got .gf__prize { animation: gq-in .35s var(--motion-ease-back) both; animation-delay: calc(var(--motion-slow) + var(--k, 0) * var(--motion-stagger)); }
.gf__row { display: flex; justify-content: center; gap: .6rem; margin-top: .35rem; }
.gf__out { padding: .6rem 1.2rem; border: 0; border-radius: 1.4rem; background: var(--color-web-ink3); color: var(--color-web-paper); font-size: 1rem; font-weight: 900; transition: transform var(--motion-fast) ease-out; }
.gf__out:active, .gf__again:active { transform: translateY(.15rem); }


.gfr__btn { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .35rem; padding: .35rem .9rem; border: 0; border-radius: 1.2rem; background: var(--color-web-ink2); color: var(--color-web-paper); font-weight: 900; transition: transform var(--motion-fast) ease-out; }
.gfr__btn .ic { width: 1.1rem; height: 1.1rem; fill: var(--color-web-gold); }
.gfr__btn small { grid-column: 1 / -1; color: var(--color-web-gold-pale); font-weight: 800; }
.gfr__btn:active { transform: translateY(.12rem); }
.gfr { display: grid; gap: .6rem; }
.gfr__list { display: grid; gap: .3rem; }
.gfr__row { color: var(--color-web-paper); display: grid; grid-template-columns: 2.2rem 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .35rem .7rem .35rem .4rem; border-radius: .8rem; background: var(--color-web-ink2); animation: gq-in .3s var(--motion-ease-back) both; animation-delay: calc(var(--k, 0) * var(--motion-stagger)); }
.gfr__row--1 { background: linear-gradient(90deg, var(--color-web-gold-dark), var(--color-web-ink2) 70%); }
.gfr__row--2 { background: linear-gradient(90deg, var(--color-web-line-dark), var(--color-web-ink2) 70%); }
.gfr__row--3 { background: linear-gradient(90deg, var(--color-web-gold-dark), var(--color-web-ink2) 45%); }
.gfr__row.is-me { box-shadow: inset 0 0 0 .15rem var(--color-web-lime); }
.gfr__rank { display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-web-paper); }
.gfr__cup { width: 1.5rem; height: 1.5rem; fill: var(--color-web-gold); stroke: var(--color-web-ink); stroke-width: 1.2; }
.gfr__pic { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; overflow: hidden; border-radius: 50%; background: var(--color-web-ink3); color: var(--color-web-paper); font-weight: 900; }
.gfr__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gfr__name { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.gfr__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfr__you { padding: .05rem .45rem; border-radius: .6rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-size: .8rem; font-style: normal; font-weight: 900; }
.gfr__best { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--color-web-lime); font-variant-numeric: tabular-nums; }
.gfr__mine { justify-self: center; margin: 0; padding: .3rem .9rem; border-radius: 1rem; background: var(--color-web-gold-pale); color: var(--color-web-ink); font-weight: 900; }