:root {--fp-text-primary: #e2e8f0;--fp-text-secondary: #94a3b8;--fp-text-muted: #64748b;--fp-text-accent: #38bdf8;--fp-text-accent-warm: #fbbf24;--fp-card-bg: rgba(255, 255, 255, 0.04);--fp-card-border: rgba(255, 255, 255, 0.08);--fp-card-bg-hover: rgba(255, 255, 255, 0.07);--fp-card-border-hover: rgba(56, 189, 248, 0.3);--fp-section-padding-x: 24px;--fp-section-max-width: 1100px;--fp-font-main: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;--fp-gradient-ocean: linear-gradient(180deg, #020818 0%, #041020 40%, #020818 100%);--fp-glow-blue: rgba(56, 189, 248, 0.15);--fp-glow-blue-strong: rgba(56, 189, 248, 0.25)}
.fishing-parks-page {background: #020818;color: var(--fp-text-primary);font-family: var(--fp-font-main);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.fishing-parks-page .main-content {overflow-x: hidden}
.fp-container {min-height: 100vh;padding-bottom: 96px}
.fp-section-inner {max-width: var(--fp-section-max-width);width: 100%;margin: 0 auto;padding: 0 var(--fp-section-padding-x);box-sizing: border-box}
.fp-hero {padding: 88px 0 64px;text-align: center;background: var(--fp-gradient-ocean);position: relative;overflow: hidden}
.fp-hero::before {content: '';position: absolute;top: -60px;left: 50%;transform: translateX(-50%);width: 600px;height: 300px;background: radial-gradient(ellipse, rgba(56, 189, 248, 0.08) 0%, transparent 70%);pointer-events: none}
.fp-hero-eyebrow {font-size: 0.72rem;font-weight: 600;letter-spacing: 0.18em;text-transform: uppercase;color: var(--fp-text-accent);margin: 0 0 16px;opacity: 0.85}
.fp-hero-title {font-size: clamp(2.4rem, 7vw, 4rem);font-weight: 900;letter-spacing: -0.03em;line-height: 1.1;margin: 0 0 12px;background: linear-gradient(135deg, #e2e8f0 0%, #7dd3fc 60%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-hero-subtitle {font-size: clamp(0.85rem, 2.5vw, 1rem);color: var(--fp-text-secondary);margin: 0 0 48px}
.fp-hero-stats {display: flex;justify-content: center;gap: 16px;flex-wrap: wrap}
.fp-hero-stat-card {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(56, 189, 248, 0.15);border-radius: 16px;padding: 20px 32px;backdrop-filter: blur(8px);min-width: 140px}
.fp-hero-stat-value {display: block;font-size: clamp(2rem, 5vw, 2.8rem);font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: -0.03em;line-height: 1;background: linear-gradient(135deg, var(--fp-text-accent) 0%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-hero-stat-label {display: block;font-size: 0.75rem;color: var(--fp-text-muted);margin-top: 6px;letter-spacing: 0.05em}
.fp-region-section {padding: 48px 0 8px}
.fp-region-header {display: flex;align-items: center;gap: 12px;margin-bottom: 20px}
.fp-region-title {font-size: 1.1rem;font-weight: 700;color: var(--fp-text-accent);margin: 0;white-space: nowrap}
.fp-region-divider {flex: 1;height: 1px;background: linear-gradient(to right, rgba(56, 189, 248, 0.25), transparent);min-width: 0}
.fp-region-count {font-size: 0.75rem;color: var(--fp-text-muted);white-space: nowrap}
.fp-parks-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 16px}
.fp-park-card {display: block;background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 14px;padding: 20px;text-decoration: none;color: var(--fp-text-primary);transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;position: relative;overflow: hidden}
.fp-park-card::after {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, var(--fp-text-accent), #818cf8);opacity: 0;transition: opacity 0.2s ease}
.fp-park-card:hover {background: var(--fp-card-bg-hover);border-color: var(--fp-card-border-hover);transform: translateY(-3px);box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(56, 189, 248, 0.08)}
.fp-park-card:hover::after {opacity: 1}
.fp-park-card-header {display: flex;align-items: flex-start;justify-content: space-between;gap: 8px;margin-bottom: 6px}
.fp-park-name {font-size: 1rem;font-weight: 700;margin: 0;min-width: 0;overflow-wrap: anywhere;line-height: 1.35;flex: 1}
.fp-park-prefecture {font-size: 0.72rem;color: var(--fp-text-muted);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 4px;padding: 2px 7px;white-space: nowrap;flex-shrink: 0;align-self: flex-start}
.fp-park-specs {display: flex;flex-wrap: wrap;gap: 14px;align-items: flex-start}
.fp-spec {display: flex;flex-direction: column;gap: 1px}
.fp-spec-label {font-size: 0.65rem;color: var(--fp-text-muted);letter-spacing: 0.06em;text-transform: uppercase}
.fp-spec-value {font-size: 0.9rem;font-weight: 700;font-variant-numeric: tabular-nums;color: var(--fp-text-primary)}
.fp-spec-value--accent {color: var(--fp-text-accent)}
.fp-park-status-badge {display: inline-block;font-size: 0.68rem;font-weight: 600;padding: 3px 8px;border-radius: 4px;margin-top: 12px}
.fp-status-suspended {background: rgba(251, 146, 60, 0.12);color: #fb923c;border: 1px solid rgba(251, 146, 60, 0.2)}
.fp-status-closed {background: rgba(239, 68, 68, 0.12);color: #f87171;border: 1px solid rgba(239, 68, 68, 0.2)}
.fp-detail-hero {padding: 64px 0 40px;background: var(--fp-gradient-ocean);position: relative;overflow: hidden}
.fp-detail-hero::before {content: '';position: absolute;top: -80px;left: -100px;width: 500px;height: 400px;background: radial-gradient(ellipse, rgba(56, 189, 248, 0.06) 0%, transparent 65%);pointer-events: none}
.fp-detail-breadcrumb {font-size: 0.78rem;color: var(--fp-text-muted);margin: 0 0 20px;display: flex;align-items: center;gap: 6px;flex-wrap: wrap}
.fp-detail-breadcrumb a {color: var(--fp-text-accent);text-decoration: none;transition: opacity 0.15s}
.fp-detail-breadcrumb a:hover {opacity: 0.75;text-decoration: underline}
.fp-detail-breadcrumb-sep {color: var(--fp-text-muted);font-size: 0.7rem;opacity: 0.5}
.fp-detail-title {font-size: clamp(1.7rem, 5vw, 2.6rem);font-weight: 900;letter-spacing: -0.025em;margin: 0 0 16px;line-height: 1.2;overflow-wrap: anywhere}
.fp-detail-badges {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-bottom: 20px}
.fp-detail-pref {font-size: 0.78rem;color: var(--fp-text-accent);padding: 3px 10px;border: 1px solid rgba(56, 189, 248, 0.25);border-radius: 4px;background: rgba(56, 189, 248, 0.06)}
.fp-detail-description {font-size: 0.92rem;color: var(--fp-text-secondary);line-height: 1.75;margin: 0;max-width: 680px;overflow-wrap: anywhere}
.fp-hero-map-wrapper {border-radius: 12px;overflow: hidden;border: 1px solid var(--fp-card-border);margin-top: 20px}
.fp-hero-map-canvas {width: 100%;height: 280px}
@media (max-width: 640px) {.fp-hero-map-canvas {height: 200px}}
.fp-hero-grid {display: grid;grid-template-columns: 1fr 420px;gap: 32px;align-items: start}
.fp-hero-info {min-width: 0}
.fp-hero-actions {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 20px}
.fp-btn-primary {display: inline-flex;align-items: center;gap: 8px;padding: 11px 22px;border-radius: 10px;background: linear-gradient(135deg, #38bdf8, #818cf8);color: #020818;text-decoration: none;font-size: 0.88rem;font-weight: 800;box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);transition: transform 0.15s ease, box-shadow 0.2s ease}
.fp-btn-primary:hover {transform: translateY(-1px);box-shadow: 0 8px 24px rgba(56, 189, 248, 0.35);text-decoration: none}
.fp-btn-ghost {display: inline-flex;align-items: center;gap: 8px;padding: 11px 20px;border-radius: 10px;border: 1px solid rgba(56, 189, 248, 0.3);background: rgba(56, 189, 248, 0.06);color: var(--fp-text-accent);text-decoration: none;font-size: 0.85rem;font-weight: 600;transition: background 0.2s ease, border-color 0.2s ease}
.fp-btn-ghost:hover {background: rgba(56, 189, 248, 0.12);border-color: rgba(56, 189, 248, 0.5);text-decoration: none}
.fp-btn-primary svg,
.fp-btn-ghost svg {flex-shrink: 0}
.fp-hero-mapcard {border-radius: 16px;overflow: hidden;border: 1px solid var(--fp-card-border);background: var(--fp-card-bg)}
.fp-hero-mapcard .fp-hero-map-wrapper {border: none;border-radius: 0;margin-top: 0}
.fp-hero-mapcard .fp-hero-map-canvas {height: 240px}
.fp-hero-mapstats {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));border-top: 1px solid var(--fp-card-border)}
.fp-hero-mapstat {padding: 14px 10px;text-align: center;border-right: 1px solid var(--fp-card-border)}
.fp-hero-mapstat:last-child {border-right: none}
.fp-hero-mapstat-value {display: block;font-size: 1.4rem;font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: -0.02em;background: linear-gradient(135deg, var(--fp-text-accent) 0%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-hero-mapstat-value small {font-size: 0.9rem}
.fp-hero-mapstat-label {font-size: 0.68rem;color: var(--fp-text-muted);margin-top: 3px;white-space: nowrap}
.fp-detail-pills {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 16px}
.fp-detail-pill {display: inline-flex;align-items: center;gap: 5px;background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 999px;padding: 5px 14px;font-size: 0.78rem;color: var(--fp-text-secondary);white-space: nowrap;max-width: 100%;box-sizing: border-box}
.fp-detail-pill--wrap {white-space: normal;overflow-wrap: anywhere;line-height: 1.5}
.fp-detail-pill svg {opacity: 0.6;flex-shrink: 0}
.fp-detail-pill strong {color: var(--fp-text-primary);font-weight: 600}
.fp-gradient-text {background: linear-gradient(135deg, #38bdf8, #818cf8);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-section {padding: 28px 0}
.fp-section-head {display: flex;align-items: center;gap: 10px;margin: 0 0 18px}
.fp-section-title {font-size: 1.1rem;font-weight: 800;margin: 0;display: flex;align-items: center;gap: 9px;color: var(--fp-text-primary)}
.fp-section-title svg {flex-shrink: 0}
.fp-section-sub {font-size: 0.76rem;color: var(--fp-text-muted);white-space: nowrap;flex-shrink: 0}
.fp-section-divider {flex: 1;height: 1px;min-width: 0;background: linear-gradient(to right, rgba(56, 189, 248, 0.2), transparent)}
.fp-card {background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 16px;padding: 20px 24px}
.fp-gradient-text-gold {background: linear-gradient(135deg, #fbbf24, #fb923c);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-two-col {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 20px}
.fp-fishrank {display: flex;flex-direction: column;gap: 4px}
.fp-fishrank-row {display: grid;grid-template-columns: 26px minmax(64px, 128px) 1fr auto;align-items: center;gap: 12px;padding: 9px 8px;border-radius: 10px;transition: background 0.15s ease}
.fp-fishrank-row:hover {background: rgba(255, 255, 255, 0.03)}
.fp-fishrank-rank {width: 24px;height: 24px;border-radius: 7px;display: inline-flex;align-items: center;justify-content: center;font-size: 0.74rem;font-weight: 800;font-variant-numeric: tabular-nums;background: rgba(255, 255, 255, 0.06);color: var(--fp-text-secondary)}
.fp-fishrank-rank.is-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #020818; }
.fp-fishrank-rank.is-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #020818; }
.fp-fishrank-rank.is-3 { background: linear-gradient(135deg, #c2855a, #92400e); color: #fff; }
.fp-fishrank-name {font-size: 0.86rem;font-weight: 700;color: var(--fp-text-primary);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-fishrank-track {height: 20px;border-radius: 6px;background: rgba(255, 255, 255, 0.04);overflow: hidden;min-width: 0}
.fp-fishrank-fill {height: 100%;border-radius: 6px;background: linear-gradient(90deg, #38bdf8, #818cf8);min-width: 3px}
.fp-fishrank-row.is-top .fp-fishrank-fill {background: linear-gradient(90deg, #fbbf24, #fb923c)}
.fp-fishrank-metric {text-align: right;white-space: nowrap;font-variant-numeric: tabular-nums}
.fp-fishrank-count {font-size: 0.82rem;font-weight: 800;color: var(--fp-text-primary)}
.fp-fishrank-share {font-size: 0.68rem;color: var(--fp-text-muted);margin-left: 4px}
.fp-fishrank-foot {margin-top: 12px;padding-top: 12px;border-top: 1px solid var(--fp-card-border);display: flex;justify-content: space-between;gap: 8px;font-size: 0.74rem;color: var(--fp-text-muted)}
.fp-fishrank-foot strong {color: var(--fp-text-secondary)}
.fp-season-strip {display: grid;grid-template-columns: repeat(12, 1fr);gap: 6px}
.fp-season-cell {text-align: center;min-width: 0}
.fp-season-bar {height: 56px;border-radius: 6px;background: rgba(255, 255, 255, 0.04);display: flex;align-items: flex-end;overflow: hidden}
.fp-season-bar > span {display: block;width: 100%;border-radius: 6px 6px 0 0;background: linear-gradient(180deg, #38bdf8, #6366f1)}
.fp-season-cell.is-peak .fp-season-bar > span {background: linear-gradient(180deg, #fbbf24, #fb923c)}
.fp-season-month {font-size: 0.64rem;color: var(--fp-text-muted);margin-top: 5px}
.fp-season-cell.is-peak .fp-season-month {color: var(--fp-text-accent-warm);font-weight: 700}
.fp-season-legend {display: flex;flex-wrap: wrap;gap: 16px;margin-top: 14px;font-size: 0.72rem;color: var(--fp-text-muted)}
.fp-season-dot {display: inline-block;width: 9px;height: 9px;border-radius: 3px;margin-right: 6px;vertical-align: middle}
.fp-season-dot--peak { background: linear-gradient(180deg, #fbbf24, #fb923c); }
.fp-season-dot--normal { background: linear-gradient(180deg, #38bdf8, #6366f1); }
.fp-sizebar-item {display: flex;align-items: center;gap: 12px;padding: 14px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.05);text-decoration: none;color: inherit;transition: opacity 0.15s ease}
.fp-sizebar-item:hover {opacity: 0.8;text-decoration: none}
.fp-sizebar-item:last-child {border-bottom: none}
.fp-sizebar-rank {width: 24px;height: 24px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 0.72rem;font-weight: 800;flex-shrink: 0}
.fp-rank-gold {background: linear-gradient(135deg, #fbbf24, #f59e0b);color: #020818}
.fp-rank-silver {background: linear-gradient(135deg, #94a3b8, #64748b);color: #020818}
.fp-rank-bronze {background: linear-gradient(135deg, #c2855a, #92400e);color: #fff}
.fp-sizebar-main {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 6px}
.fp-sizebar-top {display: flex;align-items: baseline;justify-content: space-between;gap: 8px}
.fp-sizebar-fish {font-size: 0.88rem;font-weight: 700;color: var(--fp-text-primary)}
.fp-sizebar-size {font-size: 1rem;font-weight: 800;font-variant-numeric: tabular-nums}
.fp-sizebar-size--gold {color: #fbbf24}
.fp-sizebar-size--silver {color: #94a3b8}
.fp-sizebar-size--bronze {color: #c2855a}
.fp-sizebar-track {height: 6px;background: rgba(255, 255, 255, 0.06);border-radius: 3px;overflow: hidden}
.fp-sizebar-fill {height: 100%;border-radius: 3px}
.fp-sizebar-fill--gold {background: linear-gradient(90deg, #fbbf24, #f59e0b)}
.fp-sizebar-fill--silver {background: linear-gradient(90deg, #94a3b8, #64748b)}
.fp-sizebar-fill--bronze {background: linear-gradient(90deg, #c2855a, #92400e)}
.fp-sizebar-meta {display: flex;align-items: center;gap: 6px;font-size: 0.7rem;color: var(--fp-text-muted)}
.fp-sizebar-meta .user-avatar,
.fp-sizebar-meta .user-avatar-image,
.fp-sizebar-meta .user-avatar-default {flex-shrink: 0}
.fp-sizebar-user {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-map-section {padding: 32px 0 8px}
.fp-map-title {font-size: 1.1rem;font-weight: 600;color: var(--fp-text-primary);margin: 0 0 14px}
.fp-map-wrapper {border-radius: 12px;overflow: hidden;border: 1px solid var(--fp-card-border)}
.fp-map-canvas {width: 100%;height: 300px}
@media (max-width: 640px) {.fp-map-canvas {height: 220px}}
.fp-reports-section {padding: 40px 0}
.fp-reports-header {display: flex;align-items: baseline;gap: 10px;margin-bottom: 24px}
.fp-reports-title {font-size: 1.1rem;font-weight: 700;margin: 0;color: var(--fp-text-primary)}
.fp-reports-count {font-size: 0.8rem;font-weight: 500;color: var(--fp-text-muted);padding: 2px 8px;background: rgba(255, 255, 255, 0.04);border: 1px solid var(--fp-card-border);border-radius: 20px}
.fp-catch-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 14px}
.fp-catch-card {display: flex;flex-direction: column;background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 14px;overflow: hidden;text-decoration: none;color: var(--fp-text-primary);transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease}
.fp-catch-card:hover {transform: translateY(-3px);border-color: var(--fp-card-border-hover);box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);text-decoration: none}
.fp-catch-thumb {position: relative;width: 100%;aspect-ratio: 4 / 3;overflow: hidden;background: linear-gradient(160deg, #0a1628 0%, #0e2038 100%);display: flex;align-items: center;justify-content: center}
.fp-catch-thumb img,
.fp-catch-thumb picture {width: 100%;height: 100%;object-fit: cover;display: block}
.fp-catch-no-image {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
.fp-catch-no-image svg {opacity: 0.25}
.fp-catch-cardbody {display: flex;flex-direction: column;gap: 5px;padding: 10px 12px 12px}
.fp-catch-fish {font-size: 0.9rem;font-weight: 700;color: var(--fp-text-primary);overflow-wrap: anywhere}
.fp-catch-spec {font-size: 0.76rem;color: var(--fp-text-secondary);font-variant-numeric: tabular-nums}
.fp-catch-footer {display: flex;align-items: center;justify-content: space-between;gap: 8px;margin-top: 2px}
.fp-catch-user {display: flex;align-items: center;gap: 6px;min-width: 0}
.fp-catch-user .user-avatar,
.fp-catch-user .user-avatar-image,
.fp-catch-user .user-avatar-default {flex-shrink: 0}
.fp-catch-user-name {font-size: 0.7rem;color: var(--fp-text-muted);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-catch-date {font-size: 0.7rem;color: var(--fp-text-muted);white-space: nowrap;flex-shrink: 0}
.fp-spotlight {min-width: 0}
.fp-spotlight-stage {position: relative;aspect-ratio: 16 / 10;border-radius: 14px;overflow: hidden;background: #0c2438}
.fp-spotlight-slide {position: absolute;inset: 0;opacity: 0;transform: scale(1.04);transition: opacity 0.7s ease;pointer-events: none}
.fp-spotlight-slide.is-active {opacity: 1;transform: scale(1);pointer-events: auto;transition: opacity 0.7s ease, transform 5s linear}
.fp-spotlight-link {position: absolute;inset: 0;display: block;text-decoration: none;color: inherit}
.fp-spotlight-photo {position: absolute;inset: 0}
.fp-spotlight-img {width: 100%;height: 100%;object-fit: cover;display: block}
.fp-spotlight-noimage {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(160deg, #0c4a6e, #075985 45%, #0ea5e9);color: rgba(255, 255, 255, 0.85)}
.fp-spotlight-slide::after {content: "";position: absolute;inset: 0;background: linear-gradient(to top, rgba(2, 8, 24, 0.82) 0%, rgba(2, 8, 24, 0) 52%);pointer-events: none}
.fp-spotlight-overlay {position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;padding: 16px;display: flex;flex-direction: column;gap: 4px;color: #fff;min-width: 0}
.fp-spotlight-rank {display: inline-flex;align-items: center;gap: 5px;align-self: flex-start;padding: 3px 10px;border-radius: 999px;font-size: 0.72rem;font-weight: 800;background: linear-gradient(135deg, #fbbf24, #d4a017);color: #422006;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)}
.fp-spotlight-rank--2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.fp-spotlight-rank--3 { background: linear-gradient(135deg, #d9b99b, #b08968); color: #3d2b1f; }
.fp-spotlight-rank--4,
.fp-spotlight-rank--5 { background: rgba(2, 8, 24, 0.72); color: #fff; }
.fp-spotlight-fish {font-size: 0.98rem;font-weight: 700;overflow-wrap: anywhere}
.fp-spotlight-meta {display: flex;align-items: center;gap: 7px;font-size: 0.78rem;color: rgba(255, 255, 255, 0.88);min-width: 0}
.fp-spotlight-avatar {flex-shrink: 0;border-radius: 50%}
.fp-spotlight-username {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-spotlight-grade {flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;min-width: 18px;height: 18px;padding: 0 4px;border-radius: 5px;font-size: 0.68rem;font-weight: 800;color: #fff;background: linear-gradient(135deg, #6b7280, #4b5563)}
.fp-spotlight-grade[data-grade="S"] { background: linear-gradient(135deg, #f59e0b, #eab308); }
.fp-spotlight-grade[data-grade="A"] { background: linear-gradient(135deg, #b0bec5, #78909c); }
.fp-spotlight-grade[data-grade="B"] { background: linear-gradient(135deg, #d97706, #b45309); }
.fp-spotlight-grade[data-grade="C"] { background: linear-gradient(135deg, #6b7280, #4b5563); }
.fp-spotlight-grade[data-grade="D"] { background: linear-gradient(135deg, #374151, #1f2937); }
.fp-spotlight-price {font-size: 2.2rem;line-height: 1.1;font-weight: 800;font-variant-numeric: tabular-nums;background: linear-gradient(90deg, #fef3c7, #fbbf24 40%, #fff7ed 60%, #fbbf24);background-size: 200% 100%;-webkit-background-clip: text;background-clip: text;color: transparent;animation: fp-spotlight-shimmer 3s linear infinite}
.fp-spotlight-price small {font-size: 0.42em;font-weight: 700;margin-left: 2px;-webkit-text-fill-color: #fde68a}
@keyframes fp-spotlight-shimmer {from { background-position: 200% 0; }
to { background-position: 0 0; }}
.fp-spotlight-progress {position: absolute;left: 0;bottom: 0;height: 3px;width: 0;z-index: 3;background: #fbbf24}
@keyframes event-spotlight-progress {from { width: 0; }
to { width: 100%; }}
.fp-spotlight-thumbs {display: grid;grid-template-columns: repeat(5, 1fr);gap: 8px;margin-top: 12px}
.fp-spotlight-thumb {position: relative;aspect-ratio: 1;border: 2px solid transparent;border-radius: 10px;overflow: hidden;padding: 0;cursor: pointer;background: #0c2438}
.fp-spotlight-thumb.is-active {border-color: #fbbf24}
.fp-spotlight-thumb-img {width: 100%;height: 100%;object-fit: cover;display: block}
.fp-spotlight-thumb-noimage {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(160deg, #075985, #0ea5e9);color: rgba(255, 255, 255, 0.8)}
.fp-spotlight-thumb-rank {position: absolute;top: 3px;left: 3px;z-index: 2;width: 18px;height: 18px;border-radius: 50%;background: rgba(2, 8, 24, 0.78);color: #fff;font-size: 0.62rem;font-weight: 800;display: flex;align-items: center;justify-content: center}
@media (min-width: 641px) {.fp-spotlight-stage,
.fp-spotlight-thumbs {max-width: 640px;margin-inline: auto}}
@media (min-width: 900px) {.fp-spotlight {display: grid;grid-template-columns: minmax(0, 640px) 76px;justify-content: center;gap: 10px}
.fp-spotlight-stage {width: 100%;align-self: start}
.fp-spotlight-thumbs {grid-template-columns: 1fr;grid-auto-rows: 72px;align-content: start;gap: 10px;margin-top: 0;margin-inline: 0}
.fp-spotlight-thumb {aspect-ratio: auto}}
@media (prefers-reduced-motion: reduce) {.fp-spotlight-slide,
.fp-spotlight-slide.is-active {transition: opacity 0.2s ease;transform: none}
.fp-spotlight-price {animation: none}
.fp-spotlight-progress {display: none}}
.fp-reports-empty {text-align: center;padding: 64px 24px;color: var(--fp-text-muted)}
.fp-reports-empty-icon {margin: 0 auto 16px;opacity: 0.2}
.fp-reports-empty p {font-size: 0.88rem;line-height: 1.8;margin: 0}
@media (max-width: 640px) {.fp-hero {padding: 56px 0 48px}
.fp-hero::before {width: 320px;height: 200px}
.fp-hero-stat-card {padding: 16px 24px;min-width: 120px}
.fp-region-section {padding: 36px 0 8px}
.fp-parks-grid {grid-template-columns: 1fr;gap: 12px}
.fp-detail-hero {padding: 40px 0 28px}
.fp-hero-grid {grid-template-columns: 1fr;gap: 24px}
.fp-fishrank-row {grid-template-columns: 22px minmax(52px, 96px) 1fr auto;gap: 8px}
.fp-fishrank-share {display: none}
.fp-season-strip {gap: 3px}
.fp-season-bar {height: 44px}
.fp-season-month {font-size: 0.56rem}
.fp-spotlight-price {font-size: 1.8rem}
.fp-catch-grid {grid-template-columns: repeat(2, 1fr);gap: 10px}}
@media (max-width: 390px) {.fp-hero-stats {gap: 10px}
.fp-hero-stat-card {padding: 14px 18px;min-width: 0;flex: 1}
.fp-detail-pills {gap: 6px}
:root {--fp-section-padding-x: 16px}}