/* Fields & Waters (M8): fishing, skills, the fish log, quality stars. See public/js/fields.ts. */

/* quality stars on a slot: silver, gold, iridium */
.slot .q { position: absolute; left: 2px; bottom: -1px; font-size: 12px; line-height: 1; pointer-events: none; text-shadow: 1px 1px 0 #3a2a1a, -1px -1px 0 #3a2a1a, 1px -1px 0 #3a2a1a, -1px 1px 0 #3a2a1a; }
.slot .q1 { color: #e8ecf4; }
.slot .q2 { color: #ffd23a; }
.slot .q3 { color: #d8a8ff; }

/* the cue over the hotbar while a line is out (and itself a big button to tap) */
#fd-cue { display: none; position: fixed; z-index: 20; left: 50%; bottom: calc(96px + var(--safe-b, 0px)); transform: translateX(-50%); padding: 8px 18px; border-radius: 999px; border: 3px solid var(--wood); background: rgba(255, 246, 216, .92); color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
#fd-cue.wait { opacity: .85; font-weight: 600; }
#fd-cue.fight { background: #fff0c0; }
#fd-cue.now { background: #ffd23a; border-color: #b4642a; font-size: 22px; padding: 10px 30px; animation: fd-pulse .5s ease-in-out infinite alternate; }
@keyframes fd-pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
body.touch #fd-cue { bottom: calc(170px + var(--safe-b, 0px)); }
@media (prefers-reduced-motion: reduce) { #fd-cue.now { animation: none; } }

/* the skills panel */
.fd-skhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fd-lvl { font-size: 13px; font-weight: 700; color: #8a5a34; }
.fd-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fd-perk { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--paper2); color: var(--ink2); opacity: .7; }
.fd-perk.on { background: #fff0b8; color: var(--ink); opacity: 1; box-shadow: inset 0 0 0 1px #f2c94c; }

/* the fish log: a grid of little cards, shadows until caught */
.fd-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 6px 0 10px; }
.fd-fish { position: relative; aspect-ratio: 1; padding: 0; border-radius: 8px; background: #eaf4f8; border: 2px solid #9ac0d0; display: flex; align-items: center; justify-content: center; }
.fd-fish .ico { width: 82%; height: 82%; image-rendering: pixelated; pointer-events: none; }
.fd-fish .n { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #2a3a4a, -1px -1px 0 #2a3a4a; }
.fd-fish.unknown .ico { filter: brightness(0) opacity(.3); }
.fd-fish.legend { background: #fff6d8; border-color: #f2c94c; box-shadow: inset 0 0 0 1px #fff; }
.fd-fish.sel { border-color: #f2a83a; box-shadow: 0 0 0 2px #f2a83a; }
.fd-pick { border-color: #9ac0d0; background: #f4fafc; }
.fd-now { margin: -4px 0 4px; }
.fd-biting { color: #2a7a4a; font-weight: 700; }

/* the derby board */
.fd-derby { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 10px; background: #fffaf0; border: 2px dashed #e8b8c0; border-radius: 8px; }