@media (orientation: landscape) and (min-width: 56rem) {
  .games > .gcard--fish { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; }
}
.gfish__art { background: linear-gradient(var(--color-fly-sky-top), var(--color-fly-sky-bottom) 48%, var(--color-fly-sea-near) 50%, var(--color-fish-water-deep)); }
.gfish__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.gfish__legend { display: grid; gap: .3rem; margin: .1rem 0 .2rem; }
.gfish__row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.gfish__label { min-width: 3.4rem; font-size: .9375rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.gfish__row.is-catch .gfish__label { color: var(--color-web-lime-dark); }
.gfish__row.is-avoid .gfish__label { color: var(--color-fish-time-warn); }
.gfish__cell { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .12rem var(--color-web-lime); animation: gfish-in var(--motion-base) var(--motion-ease-back) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }
.gfish__row.is-avoid .gfish__cell { background: var(--color-web-mist); box-shadow: inset 0 0 0 .12rem var(--color-fish-time-warn); }
.gfish__cell.is-gold { box-shadow: inset 0 0 0 .12rem var(--color-fish-golden), 0 0 .6rem var(--color-fish-golden); }
.gfish__cell.is-gold .stand { filter: sepia(1) saturate(4) hue-rotate(-10deg) brightness(1.15); }
.gfish__cell::after { position: absolute; right: -.25rem; top: -.25rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; font-size: .6875rem; font-weight: 900; line-height: 1; color: var(--color-web-paper); }
.gfish__row.is-catch .gfish__cell::after { content: '✓'; background: var(--color-web-lime-dark); }
.gfish__row.is-avoid .gfish__cell::after { content: '✕'; background: var(--color-fish-time-warn); }
.gfish__cell .stand { pointer-events: none; }
.gfish__trash { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.gfish__dot { font-weight: 900; }
@keyframes gfish-in { from { opacity: 0; transform: scale(.6); } }


.gfi.is-live .gf__pause { display: grid; }
.gfi.is-live .gf__x { display: none; }
.gfi.is-live { cursor: crosshair; touch-action: none; }
.gfi__score .stand { pointer-events: none; }


.gfi__lines { gap: .3rem; padding: .35rem .6rem; }
.gfi__line { width: .3rem; height: 1rem; border-radius: .2rem; background: var(--color-fish-line-on); box-shadow: 0 0 0 .08rem var(--color-web-ink); transition: background-color var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out; }
.gfi__line.is-off { background: var(--color-fish-line-off); box-shadow: none; }
.gfi__line.is-snap { animation: gfi-snap var(--motion-base) var(--motion-ease-out); }
@keyframes gfi-snap { 0% { background: var(--color-fish-line-hurt); transform: scaleY(1.3); } 60% { transform: scaleY(.4) rotate(18deg); } }


.gfi__time { position: absolute; left: 50%; top: calc(1.05rem + env(safe-area-inset-top)); z-index: 2; width: min(30vw, 14rem); height: .75rem; border-radius: .4rem; background: var(--color-fish-time-track); box-shadow: inset 0 0 0 .12rem var(--color-web-ink); overflow: hidden; translate: -50% 0; pointer-events: none; opacity: 0; transition: opacity var(--motion-base) ease-out; }
.gfi.is-live .gfi__time, .gfi.is-end .gfi__time { opacity: 1; }
.gfi__fill { position: absolute; inset: 0; background: var(--color-fish-time-ok); transform-origin: left center; transition: background-color var(--motion-fast) ease-out; }
.gfi.is-warn .gfi__fill { background: var(--color-fish-time-warn); }


.gfi__hint { position: absolute; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom)); z-index: 2; max-width: calc(100% - 2rem); padding: .4rem 1rem; border-radius: 1.4rem; background: var(--color-web-glass-dark); color: var(--color-web-paper); font-size: 1rem; font-weight: 900; text-align: center; translate: -50% 0; pointer-events: none; opacity: 0; transform: translateY(.6rem); transition: opacity var(--motion-fast) ease-out, transform var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) ease-out; }
.gfi__hint.is-on { opacity: 1; transform: none; }
.gfi__hint.is-warn { background: var(--color-fish-time-warn); animation: gfi-nudge var(--motion-base) var(--motion-ease-back); }
.gfi__hint.is-gold { background: var(--color-fish-golden); color: var(--color-web-ink); animation: gfi-nudge var(--motion-base) var(--motion-ease-back); }
@keyframes gfi-nudge { 30% { transform: scale(1.12); } }


.gfi__plus { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 2; font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1; color: var(--color-web-paper); text-shadow: 0 .18rem 0 var(--color-web-ink); translate: -50% -100%; pointer-events: none; animation: gfi-plus var(--pop-ms) var(--motion-ease-out) forwards; }
.gfi__plus.is-gold { color: var(--color-fish-golden); font-size: 2.2rem; }
@keyframes gfi-plus {
  0% { opacity: 0; transform: scale(.4); }
  20% { opacity: 1; transform: scale(1.2); }
  35% { transform: scale(1); }
  100% { opacity: 0; transform: translateY(-2.6rem); }
}


.gfi__pic { display: grid; place-items: end center; min-height: 7rem; animation: gfi-pop var(--motion-slow) var(--motion-ease-back) both; animation-delay: var(--motion-fast); }
@keyframes gfi-pop { from { opacity: 0; transform: translateY(1rem) scale(.6); } }
.gfi__golden { padding: .15rem .8rem; border-radius: 1rem; background: var(--color-fish-golden); color: var(--color-web-ink); font-weight: 900; animation: gfi-pop var(--motion-slow) var(--motion-ease-back) both; animation-delay: var(--motion-base); }
.gfi__avoid { color: var(--color-fish-time-warn); }