/* ==========================================================
   THE ANGLERS OF THE COIL — fishing.html
   A moonlit lake over the serpent's coil (inline SVG), the stats on glass, a podium of the top three with
   gold, silver and bronze medals, the ranked list, the Rich Waters priced at this hour's auction house,
   jackpots and records. Still for reduced motion.
   ========================================================== */

/* the hero: art behind, words in front */
.fx-hero { position: relative; overflow: hidden; padding: 72px 16px 40px; min-height: 520px; isolation: isolate; }
.page-head.fx-hero > .fx-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page-head.fx-hero > .fx-hero-text { position: relative; z-index: 3; }
.fx-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(8, 5, 15, .55), rgba(8, 5, 15, 0) 100%), linear-gradient(transparent 78%, var(--void)); }
.fx-hero-text { position: relative; max-width: 860px; margin: 0 auto; }
.fx-hero-text > p { text-shadow: 0 0 6px #08050f, 0 0 18px #08050f, 0 0 32px #08050f; }
.fx-hero-text > h1 { filter: drop-shadow(0 0 10px #08050f) drop-shadow(0 0 22px rgba(8, 5, 15, .9)); }
.fx-hero-text > .eyebrow { display: inline-flex; align-items: center; gap: 14px; }

/* moving parts of the lake */
.fx-bob { animation: fx-bob 3.2s ease-in-out infinite; transform-origin: 560px 270px; }
.fx-ring { transform-origin: 560px 276px; animation: fx-ring 3.2s ease-out infinite; opacity: 0; }
.fx-ring.r2 { animation-delay: 1.6s; }
.fx-coil { animation: fx-drift 18s ease-in-out infinite alternate; }
.fx-eye { animation: fx-blink 7s infinite; transform-origin: 470px 440px; }
.fx-fish path { animation: fx-swim 14s linear infinite; }
.fx-fish path:nth-child(2) { animation-duration: 19s; animation-delay: -6s; }
.fx-fish path:nth-child(3) { animation-duration: 16s; animation-direction: reverse; animation-delay: -3s; }
.fx-stars circle { animation: fx-twinkle 4s ease-in-out infinite; }
.fx-stars circle:nth-child(3n) { animation-delay: -1.3s; } .fx-stars circle:nth-child(3n+1) { animation-delay: -2.6s; }
.fx-moonpath rect { animation: fx-shimmer 5s ease-in-out infinite; }
.fx-moonpath rect:nth-child(even) { animation-delay: -2.5s; }
@keyframes fx-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(4px) rotate(2deg); } }
@keyframes fx-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes fx-drift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes fx-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes fx-swim { from { transform: translateX(-140px); } to { transform: translateX(140px); } }
@keyframes fx-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes fx-shimmer { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: .8; transform: translateX(6px); } }

/* the stats on glass */
.fx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px auto 0; max-width: 860px; }
.fx-stats > div { padding: 14px 12px; text-align: center; border: 1px solid rgba(228, 212, 255, .18); border-radius: 4px;
  background: linear-gradient(180deg, rgba(40, 20, 74, .62), rgba(12, 7, 24, .72)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px -12px #000; }
.fx-stats .lbl { display: block; font: 900 .58rem var(--serif-display); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); }
.fx-stats b { display: block; margin-top: 4px; font: 1.6rem/1.2 var(--fat); color: #fff; text-shadow: 0 0 18px rgba(166, 107, 255, .7); overflow-wrap: anywhere; }

/* sections */
.fx-page { padding-bottom: 40px; }
.fx-section { margin: 38px 0; }
.fx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 12px; }
.fx-head h2 { margin: 0; }
.fx-head .kicker { margin: 0 0 4px; font: 900 .66rem var(--serif-display); letter-spacing: .26em; text-transform: uppercase; color: var(--scale-bright); }
.fx-note, .fx-mode-note { color: var(--bone-dim); font-style: italic; margin: 0 0 16px; max-width: 760px; }
.fx-wait { margin: 28px 0; padding: 26px; text-align: center; border: 1px dashed var(--line); color: var(--bone-dim); }
.fx-wait b { display: block; font: 1.5rem var(--fat); color: var(--venom); margin-bottom: 8px; }

/* tabs: bright squared blocks, like the menu */
.fx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tabs button { font: 900 .66rem var(--serif-display); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim);
  background: rgba(17, 10, 29, .7); border: 1px solid var(--line); padding: 9px 12px; cursor: pointer; position: relative; }
.fx-tabs button:hover, .fx-tabs button:focus-visible { color: #fff; border-color: var(--scale-bright); outline: none; }
.fx-tabs button[aria-selected="true"] { color: #fff; border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(166, 107, 255, .65), rgba(75, 35, 134, .65)); box-shadow: 0 0 18px rgba(166, 107, 255, .45); }

/* quality colours, as the game paints them */
.q0 { --qc: #9d9d9d; } .q1 { --qc: #f2f2f2; } .q2 { --qc: #1eff00; } .q3 { --qc: #2b8cff; } .q4 { --qc: #b64dff; } .q5 { --qc: #ff8000; } .q6 { --qc: #e6cc80; } .q7 { --qc: #00ccff; }
.nm { color: var(--qc, var(--bone)); text-decoration: none; }
.fx-ico { display: inline-block; flex: none; width: 36px; height: 36px; border-radius: 3px; background: #1b1030 center / cover no-repeat;
  border: 1px solid var(--qc, var(--line)); box-shadow: 0 0 10px -2px var(--qc, transparent); }
.fx-ico.big { width: 52px; height: 52px; }

/* the podium */
.fx-podium { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 14px; align-items: end; }
.fx-pod { position: relative; text-align: center; padding: 34px 14px 16px; border: 1px solid rgba(228, 212, 255, .18);
  background: linear-gradient(180deg, rgba(40, 20, 74, .55), rgba(12, 7, 24, .85)); display: grid; gap: 10px; justify-items: center; }
.fx-pod.p1 { order: 2; padding-top: 46px; border-color: rgba(255, 210, 74, .55); box-shadow: 0 0 34px -8px rgba(255, 210, 74, .45); }
.fx-pod.p2 { order: 1; } .fx-pod.p3 { order: 3; }
.fx-pod .medal { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font: 1.2rem var(--fat); color: #1a1006; box-shadow: 0 0 18px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .5); }
.p1 .medal { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd24a 45%, #a8781c); width: 48px; height: 48px; top: -22px; }
.p2 .medal { background: radial-gradient(circle at 35% 30%, #fff, #ccd9eb 45%, #7c8796); }
.p3 .medal { background: radial-gradient(circle at 35% 30%, #ffe0c4, #d98c4d 45%, #8a4f22); }
.fx-pod .who b { display: block; font: 1.3rem var(--fat); color: #fff; overflow-wrap: anywhere; }
.fx-pod .who small, .fx-row .who small { color: var(--bone-dim); font-size: .8rem; }
.fx-pod .score b { display: block; font: 1.7rem/1.1 var(--fat); color: var(--venom); text-shadow: 0 0 18px rgba(166, 107, 255, .6); }
.fx-pod.p1 .score b { color: #ffe08a; text-shadow: 0 0 18px rgba(255, 210, 74, .5); }
.fx-pod .score small, .fx-row .score small { color: var(--bone-dim); font: 900 .6rem var(--serif-display); letter-spacing: .18em; text-transform: uppercase; }
.fx-catch { display: flex; align-items: center; gap: 10px; text-align: left; text-decoration: none; min-width: 0; }
.fx-catch > span:last-child { display: grid; min-width: 0; }
.fx-catch .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.fx-catch small { color: var(--bone-dim); font-size: .78rem; }
.fx-catch.none { color: var(--bone-dim); font-style: italic; font-size: .85rem; }
.fx-empty { grid-column: 1 / -1; text-align: center; color: var(--bone-dim); font-style: italic; padding: 20px; }

/* the ranked list */
.fx-list { list-style: none; margin: 0; padding: 0; }
.fx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--line); }
.fx-row:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.fx-row:hover { background: rgba(166, 107, 255, .08); }
.fx-row .rk { font: 1.15rem var(--fat); color: var(--bone-dim); text-align: center; }
.fx-row .who b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row .score { text-align: right; }
.fx-row .score b { display: block; font: 1.15rem var(--fat); color: var(--venom); }
.fx-more { display: block; margin: 16px auto 0; }
.fx-more[hidden], .fx-page [hidden] { display: none !important; }

/* the Rich Waters */
.fx-rich { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fx-fish { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(36, 16, 68, .6), rgba(10, 6, 20, .85)); position: relative; overflow: hidden; }
.fx-fish::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 80%; background: radial-gradient(ellipse at 50% 0, var(--qc), transparent 70%); opacity: .12; pointer-events: none; }
.fx-fish > div { display: grid; min-width: 0; }
.fx-fish .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-fish .px { font: 1.1rem var(--fat); color: #ffe08a; }
.fx-fish .px small, .fx-fish > div > small { font: italic .78rem var(--serif-body); color: var(--bone-dim); }

/* jackpots and records */
.fx-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 28px; }
.fx-jack { list-style: none; margin: 0; padding: 0; }
.fx-jack li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fx-jack li > div { display: grid; min-width: 0; }
.fx-jack .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-jack small { color: var(--bone-dim); font-size: .8rem; }
.fx-jack b { font: 1.05rem var(--fat); color: #ffe08a; }
.fx-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-recs li { padding: 12px 14px; border: 1px solid var(--line); background: rgba(17, 10, 29, .7); display: grid; }
.fx-recs .lbl { font: 900 .6rem var(--serif-display); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.fx-recs b { font: 1.3rem var(--fat); color: #fff; }
.fx-recs small { color: var(--venom); font-style: italic; }

/* how to join */
.fx-steps { margin: 0 0 18px; padding-left: 1.4em; max-width: 780px; }
.fx-steps li { margin-bottom: 10px; color: var(--bone); }
.fx-credit { color: var(--bone-dim); font-size: .88rem; max-width: 780px; }
.fx-fresh { color: var(--venom); }

/* phones */
@media (max-width: 760px) {
  .fx-hero { min-height: 0; padding-top: 56px; }
  .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-podium { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 18px; }
  .fx-pod.p1, .fx-pod.p2, .fx-pod.p3 { order: 0; }
  .fx-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .fx-row .fx-catch { grid-column: 2 / -1; grid-row: 2; }
  .fx-two { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-art *, .fx-art { animation: none !important; }
  .fx-ring { opacity: 0; }
}