:root {--fcard-rarity-n: linear-gradient(165deg, #8fa3b8, #cfd9e4 45%, #94a7bb);--fcard-rarity-r: linear-gradient(165deg, #1d4ed8, #7db4fd 45%, #2563eb);--fcard-rarity-sr: linear-gradient(165deg, #0e7490, #4ee0f5 40%, #2563eb 80%);--fcard-rarity-ssr: linear-gradient(150deg, #92400e, #f5b73c 30%, #fdeec0 50%, #f5b73c 70%, #92400e);--fcard-rarity-ssr-badge: linear-gradient(135deg, #b45309, #f59e0b);--fcard-rarity-ur: conic-gradient(from 210deg, #7dd3fc, #a78bfa 25%, #f472b6 50%, #fbbf24 70%, #34d399 85%, #7dd3fc);--fcard-rarity-lr: linear-gradient(150deg, #0f766e, #34d399 25%, #a78bfa 50%, #fbbf24 70%, #0f766e);--fcard-muted-legible: #61708a}
.fishing-cards-page {max-width: var(--layout-width-default);margin: 0 auto;padding: 16px}
.fcards-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fcards-title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); }
.fcards-subtitle { font-size: 12px; color: var(--color-text-muted); }
.fcards-header-link {display: inline-flex; align-items: center; gap: 6px;font-size: 12.5px; font-weight: 700; text-decoration: none;color: var(--color-aqua-700, #0e7490);background: var(--gradient-aqua-light, linear-gradient(135deg, #ecfeff, #eff6ff));border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 14px}
.fcards-header-link:hover { border-color: var(--color-aqua-500, #06b6d4); }
.fcards-publicity {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;margin-bottom: 14px; padding: 10px 14px;background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md)}
.fcards-publicity-state { min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--color-text-muted); }
.fcards-publicity-state.on { color: var(--color-aqua-700, #0e7490); }
.fcards-publicity-state small { display: block; font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.fcards-publicity-btn {margin-left: auto; flex-shrink: 0; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;color: var(--color-text-secondary); background: #fff;border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 16px}
.fcards-publicity-btn:hover { border-color: var(--color-text-muted); color: var(--color-text-primary); }
.fcards-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fcards-stat {flex: 1; min-width: 80px; text-align: center;background: var(--color-bg-muted); border: 1px solid var(--color-border-light);border-radius: var(--radius-md); padding: 10px 6px}
.fcards-stat .v {display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;background: linear-gradient(135deg, #06b6d4, #2563eb);-webkit-background-clip: text; background-clip: text; color: transparent}
.fcards-stat .k { display: block; font-size: 10px; color: var(--color-text-muted); }
.fcards-stat .v small { font-size: 11px; }
.fcards-stat.gold { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.fcards-stat.gold .v { background: linear-gradient(135deg, #b45309, #f59e0b 60%, #b45309); -webkit-background-clip: text; background-clip: text; }
.fcards-stat.gold .k { color: #92400e; }
.fcards-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fcards-chip {font-size: 11px; font-weight: 700; padding: 9px 14px; border-radius: 999px;background: var(--color-bg-secondary); color: var(--color-text-secondary);border: 1px solid transparent; text-decoration: none}
.fcards-chip.on {background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff;border-color: transparent; box-shadow: var(--shadow-sm)}
.profile-cards-tab { padding: 14px 0; }
.profile-cards-empty {text-align: center; font-size: 12.5px; color: var(--color-text-muted);padding: 26px 12px; background: var(--color-bg-muted);border: 1px dashed var(--color-border); border-radius: var(--radius-md)}
.profile-cards-more {display: flex; align-items: center; justify-content: center; gap: 8px;margin-top: 14px; padding: 12px 14px; text-decoration: none;font-size: 13px; font-weight: 700; color: var(--color-aqua-700, #0e7490);background: var(--gradient-aqua-light, linear-gradient(135deg, #ecfeff, #eff6ff));border: 1px solid var(--color-border); border-radius: var(--radius-md)}
.profile-cards-more:hover { border-color: var(--color-aqua-500, #06b6d4); }
.profile-cards-more-count {font-size: 11px; font-weight: 700; color: var(--color-text-muted);background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 9px}
.fcards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fcards-grid > * { animation: fcardEnter 0.45s ease backwards; }
.fcards-grid > *:nth-child(1) { animation-delay: 0.03s; }
.fcards-grid > *:nth-child(2) { animation-delay: 0.08s; }
.fcards-grid > *:nth-child(3) { animation-delay: 0.13s; }
.fcards-grid > *:nth-child(4) { animation-delay: 0.18s; }
.fcards-grid > *:nth-child(5) { animation-delay: 0.23s; }
.fcards-grid > *:nth-child(6) { animation-delay: 0.28s; }
.fcards-grid > *:nth-child(7) { animation-delay: 0.33s; }
.fcards-grid > *:nth-child(8) { animation-delay: 0.38s; }
@keyframes fcardEnter {from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }}
@media (prefers-reduced-motion: reduce) {.fcards-grid > * { animation: none; }}
@media (min-width: 560px) { .fcards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .fcards-grid { grid-template-columns: repeat(4, 1fr); } }
.fcards-slot-next {aspect-ratio: 5 / 7; border-radius: 12px;border: 2px dashed var(--color-border);display: flex; flex-direction: column; align-items: center; justify-content: center;gap: 7px; color: var(--color-text-muted); font-size: 10.5px; text-align: center;padding: 10px; font-weight: 700}
.fcards-empty-note { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }
.fcards-empty {border: 1px dashed var(--color-border); border-radius: var(--radius-md);padding: 22px 16px; text-align: center; background: var(--color-bg-muted)}
.fcards-empty-lead { font-size: 14px; font-weight: 800; color: var(--color-text-primary); }
.fcards-empty-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.fcards-empty-suggest { margin-top: 14px; text-align: left; }
.fcards-empty-suggest-title { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
.fcards-suggest-row {display: flex; align-items: baseline; gap: 8px; text-decoration: none;background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);padding: 10px 12px; margin-bottom: 6px; min-width: 0}
.fcards-suggest-fish { font-size: 13px; font-weight: 800; color: var(--color-text-primary); }
.fcards-suggest-meta { font-size: 11px; color: var(--color-text-muted); margin-left: auto; white-space: nowrap; }
.fcard {--fc-edge: linear-gradient(165deg, #cdd5de, #939eac 45%, #b6c0cb);--fc-glow: 0 10px 26px -8px rgba(10, 20, 35, 0.45);--fc-accent: #a7b1bd;--fc-star: #c4cdd6;--fc-star-glow: none;display: block; position: relative; width: 100%; min-width: 0; aspect-ratio: 5 / 7;border-radius: 14px; padding: 4px; text-decoration: none;background: var(--fc-edge);box-shadow: var(--fc-glow);isolation: isolate;transform-style: preserve-3d;transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1.4), box-shadow 0.3s ease}
a.fcard:hover { transform: translateY(-5px) scale(1.015); }
.fcard-in {position: relative; height: 100%; border-radius: 10px; overflow: hidden;background: linear-gradient(180deg, #12324c 0%, #0b2238 46%, #071523 100%);display: flex; flex-direction: column}
.fc-art {position: relative; flex: 1; min-height: 0; overflow: hidden;background:
radial-gradient(120% 70% at 50% -14%, rgba(125, 211, 252, 0.28), transparent 55%),
radial-gradient(80% 55% at 76% 18%, rgba(56, 189, 248, 0.12), transparent 60%),
linear-gradient(180deg, #0f3a58 0%, #0a2a44 48%, #071b2e 100%);display: flex; align-items: center; justify-content: center}
.fc-art::before {content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(147, 197, 253, 0.05) 22px 34px);mix-blend-mode: screen}
.fc-silhouette { width: 70%; height: auto; color: #dbe9f5; filter: drop-shadow(0 8px 18px rgba(2, 12, 24, 0.6)); }
.fc-illustration.fc-photo {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;object-fit: cover; padding: 0}
.fc-illustration:not(.fc-photo) {position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;width: 82%; height: auto; max-height: 78%; object-fit: contain;background: #f7fbfe; border-radius: 8px; padding: 3%;box-shadow: 0 8px 20px rgba(2, 12, 24, 0.55)}
.fc-serial {position: absolute; top: 7px; right: 7px; z-index: 3;font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;font-variant-numeric: tabular-nums;color: rgba(232, 244, 253, 0.85);background: rgba(8, 18, 30, 0.5);border: 1px solid rgba(255, 255, 255, 0.16);border-radius: 999px; padding: 2.5px 8px;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.fc-memorial {position: absolute; top: 7px; left: 7px; z-index: 3;font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em;color: rgba(226, 236, 246, 0.9);background: rgba(51, 65, 85, 0.6);border: 1px solid rgba(255, 255, 255, 0.18);border-radius: 999px; padding: 2.5px 8px;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px)}
.fc-stars { position: absolute; left: 9px; bottom: 8px; z-index: 4; display: flex; gap: 2.5px; }
.fc-star { width: 13px; height: 13px; flex: none; color: var(--fc-star); filter: var(--fc-star-glow); }
.fc-band {--fc-cut: 14px;--fc-cut-mid: 6px;--fc-edge-w: 2.5px;position: relative; z-index: 2;margin-top: calc(var(--fc-cut) * -1);padding: calc(var(--fc-cut) + 2px) 11px 9px; min-width: 0;background: linear-gradient(180deg, #0e1c2e 0%, #081422 100%);clip-path: polygon(0 var(--fc-cut), 58% var(--fc-cut-mid), 100% 0, 100% 100%, 0 100%)}
.fc-band::before {content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;clip-path: polygon(
0 var(--fc-cut), 58% var(--fc-cut-mid), 100% 0,
100% var(--fc-edge-w),
58% calc(var(--fc-cut-mid) + var(--fc-edge-w)),
0 calc(var(--fc-cut) + var(--fc-edge-w)));background: var(--fc-accent); opacity: 0.9}
.fc-name {display: block; min-width: 0;font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: #f4f9fd;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;text-shadow: 0 1px 3px rgba(2, 10, 20, 0.6)}
.fc-foot {display: flex; justify-content: space-between; gap: 6px; min-width: 0;margin-top: 3px; font-size: 8.5px; letter-spacing: 0.06em;color: rgba(214, 230, 242, 0.62);font-variant-numeric: tabular-nums}
.fc-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-foot .fc-issuer { font-style: italic; letter-spacing: 0.03em; }
.fc-shine {position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%) no-repeat;background-size: 240% 100%}
.fc-spark {position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;background-image:
radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 2.6px),
radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2.2px),
radial-gradient(circle at 64% 66%, rgba(255, 255, 255, 0.85) 0 1.1px, transparent 2.4px),
radial-gradient(circle at 32% 78%, rgba(255, 255, 255, 0.75) 0 0.9px, transparent 2px)}
.fc-glare {position: absolute; inset: 0; z-index: 6; border-radius: 14px; pointer-events: none;opacity: var(--fc-glare-o, 0);background: radial-gradient(circle at var(--fc-gx, 50%) var(--fc-gy, 50%),
rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 32%, transparent 58%);mix-blend-mode: soft-light;transition: opacity 0.25s ease}
.fcard.r-n { --fc-edge: linear-gradient(165deg, #cdd5de, #939eac 45%, #b6c0cb); }
.fcard.r-r {--fc-edge: linear-gradient(165deg, #7db8fd, #2563eb 45%, #5aa0f5);--fc-accent: #60a5fa; --fc-star: #93c5fd;--fc-glow: 0 10px 26px -8px rgba(10, 20, 35, 0.45), 0 0 14px rgba(59, 130, 246, 0.28)}
.fcard.r-sr {--fc-edge: linear-gradient(165deg, #c4a9fc, #7c3aed 45%, #a878f8);--fc-accent: #a78bfa; --fc-star: #c4b5fd;--fc-star-glow: drop-shadow(0 0 3px rgba(167, 139, 250, 0.7));--fc-glow: 0 10px 26px -8px rgba(10, 20, 35, 0.45), 0 0 16px rgba(139, 92, 246, 0.32)}
.fcard.r-ssr {--fc-edge: linear-gradient(165deg, #fce9a8, #d99f24 40%, #f7cf6b 65%, #b47f16);--fc-accent: #f5c04a; --fc-star: #fcd975;--fc-star-glow: drop-shadow(0 0 3.5px rgba(245, 192, 74, 0.8));--fc-glow: 0 10px 26px -8px rgba(10, 20, 35, 0.45), 0 0 18px rgba(245, 183, 60, 0.38)}
.fcard.r-ssr .fc-shine { opacity: 1; animation: fcShine 5.5s cubic-bezier(0.6, 0.05, 0.35, 0.95) infinite; }
.fcard.r-ur {--fc-edge: conic-gradient(from 210deg, #8fd3f4, #b7a6f7 22%, #f2a3c0 45%, #fbd786 62%, #95e6c0 80%, #8fd3f4);--fc-accent: #c0b3f9; --fc-star: #e6e0fd;--fc-star-glow: drop-shadow(0 0 3.5px rgba(192, 179, 249, 0.85));--fc-glow: 0 10px 26px -8px rgba(10, 20, 35, 0.45), 0 0 20px rgba(167, 139, 250, 0.4)}
.fcard.r-ur .fc-band::before { background: linear-gradient(90deg, #8fd3f4, #b7a6f7 30%, #f2a3c0 55%, #fbd786 80%, #95e6c0); }
.fcard.r-ur .fc-shine { opacity: 1; animation: fcShine 4.8s cubic-bezier(0.6, 0.05, 0.35, 0.95) infinite; }
.fcard.r-ur .fc-spark { opacity: 1; animation: fcSpark 3.2s ease-in-out infinite; }
.fcard.r-lr {--fc-edge: linear-gradient(165deg, #2b3340 0%, #05080e 40%, #1a212c 62%, #02040a 100%);--fc-accent: #e9eef4;--fc-glow: 0 14px 32px -8px rgba(0, 2, 8, 0.75), 0 0 22px rgba(226, 236, 246, 0.18);padding: 5px}
.fcard.r-lr .fcard-in { background: linear-gradient(180deg, #0d1622 0%, #070d16 46%, #02060c 100%); }
.fcard.r-lr .fc-art {background:
radial-gradient(120% 70% at 50% -14%, rgba(226, 236, 246, 0.14), transparent 55%),
linear-gradient(180deg, #101b29 0%, #091220 48%, #03070e 100%)}
.fcard.r-lr .fc-band { background: linear-gradient(180deg, #0a121e 0%, #04090f 100%); }
.fcard.r-lr .fc-band::before { background: linear-gradient(90deg, rgba(233, 238, 244, 0.9), rgba(233, 238, 244, 0.4)); }
.fcard.r-lr .fc-shine {opacity: 1;background: linear-gradient(112deg, transparent 42%, rgba(240, 246, 252, 0.22) 50%, transparent 58%) no-repeat;background-size: 240% 100%;animation: fcShine 6.5s cubic-bezier(0.6, 0.05, 0.35, 0.95) infinite}
.fcard.r-lr .fc-spark { opacity: 1; animation: fcSpark 3.4s ease-in-out infinite; }
.fcard.holo .fc-art::after {content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;background: linear-gradient(112deg,
transparent 25%, rgba(255, 255, 255, 0) 38%,
rgba(165, 243, 252, 0.5) 46%, rgba(255, 255, 255, 0.8) 50%,
rgba(253, 230, 138, 0.45) 54%, transparent 68%);background-size: 240% 240%;animation: fcard-sheen 3.6s ease-in-out infinite}
@keyframes fcard-sheen {0% { background-position: 130% 130%; }
60% { background-position: -30% -30%; }
100% { background-position: -30% -30%; }}
.fcard.foil-silver .fcard-in { box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.8), inset 0 0 10px rgba(203, 213, 225, 0.4); }
@keyframes fcShine { 0% { background-position: 210% 0; } 55%, 100% { background-position: -110% 0; } }
@keyframes fcSpark { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {.fcard { transition: none; }
a.fcard:hover { transform: none; }
.fc-shine, .fc-spark { animation: none !important; opacity: 0 !important; }
.fcard.holo .fc-art::after { animation: none; }}
.fcard-detail { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .fcard-detail { grid-template-columns: minmax(240px, 340px) 1fr; align-items: start; } }
.fcard-detail-card { display: flex; justify-content: center; }
.fcard-detail-side { min-width: 0; }
.fcard-stage {position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden;display: flex; justify-content: center;padding: 30px 22px 36px;background:
radial-gradient(ellipse 130% 70% at 50% -12%, rgba(125, 211, 252, 0.16), transparent 55%),
linear-gradient(172deg, #0d3454 0%, #0a2038 100%);--fcard-stage-glow: rgba(148, 163, 184, 0.28)}
.fcard-stage[data-rarity="rare"] { --fcard-stage-glow: rgba(96, 165, 250, 0.3); }
.fcard-stage[data-rarity="super_rare"] { --fcard-stage-glow: rgba(139, 92, 246, 0.32); }
.fcard-stage[data-rarity="ssr"] { --fcard-stage-glow: rgba(245, 183, 60, 0.34); }
.fcard-stage[data-rarity="ur"] { --fcard-stage-glow: rgba(192, 179, 249, 0.38); }
.fcard-stage[data-rarity="lr"] { --fcard-stage-glow: rgba(233, 238, 244, 0.26); }
.fcard-stage-glow {position: absolute; left: -20%; right: -20%; bottom: -42%; height: 75%; pointer-events: none;background: radial-gradient(ellipse at 50% 100%, var(--fcard-stage-glow), transparent 70%)}
.fcard-stage .fcard { width: min(64vw, 250px); }
.fcard-flip { width: min(64vw, 250px); perspective: 1400px; cursor: pointer; }
.fcard-flip .fcard { width: 100%; }
.fcard-flip-inner {position: relative; transform-style: preserve-3d;transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1)}
.fcard-flip-inner.flipped { transform: rotateY(180deg); }
.fcard-flip-front, .fcard-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fcard-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .fcard-flip-inner { transition: none; } }
.fcard-back-face {aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden;display: flex; flex-direction: column; align-items: center; justify-content: center;padding: 18px 14px; text-align: center; color: #eaf4fb;background: linear-gradient(180deg, #12324c 0%, #0b2238 46%, #071523 100%);border: 2px solid rgba(125, 211, 252, 0.28)}
.fcard-back-rare { border-color: rgba(96, 165, 250, 0.5); }
.fcard-back-super_rare { border-color: rgba(139, 92, 246, 0.5); }
.fcard-back-ssr { border-color: rgba(245, 183, 60, 0.55); }
.fcard-back-ur { border-color: rgba(192, 179, 249, 0.6); }
.fcard-back-lr { border-color: rgba(233, 238, 244, 0.5); }
.fcard-back-total {font-size: 72px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;background: linear-gradient(135deg, #7dd3fc, #e0f2fe 55%, #7dd3fc);-webkit-background-clip: text; background-clip: text; color: transparent}
.fcard-scarcity {border-radius: var(--radius-md); padding: 14px;background: linear-gradient(135deg, #0d3454, #0a2038);color: #fff; margin-bottom: 12px}
.fcard-scarcity-serial { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.fcs-no {font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;background: linear-gradient(135deg, #7dd3fc, #e0f2fe 55%, #7dd3fc);-webkit-background-clip: text; background-clip: text; color: transparent}
.fcard-history {border: 1px solid var(--color-border-light); border-radius: var(--radius-md);padding: 14px; background: #fff; box-shadow: var(--shadow-sm)}
.fcard-history-title {font-size: 13px; font-weight: 800; margin: 0 0 10px; color: var(--color-text-primary);display: flex; align-items: center; gap: 8px}
.fcard-history-title::before {content: ""; width: 4px; height: 14px; border-radius: 2px; flex-shrink: 0;background: linear-gradient(180deg, #06b6d4, #3b82f6)}
.fcard-timeline { position: relative; padding-left: 20px; list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.fcard-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); border-radius: 2px; }
.fcard-tl-item { position: relative; font-size: 12px; min-width: 0; }
.fcard-tl-item::before {content: ""; position: absolute; left: -18.5px; top: 5px;width: 9px; height: 9px; border-radius: 50%;background: var(--color-aqua-500, #06b6d4); box-shadow: 0 0 0 2.5px #fff}
.fcard-tl-item.origin::before { background: var(--fcard-rarity-ssr-badge); }
.fcard-tl-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 800; }
.fcard-tl-t a { color: var(--color-primary); text-decoration: none; }
.fcard-tl-d { display: block; font-size: 10.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.fcard-owner-gen {font-size: 9px; font-weight: 800; color: var(--color-aqua-700, #0e7490);background: #e0f2fe; border-radius: 999px; padding: 2px 8px}
.fcard-origin-link {margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: space-between;background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);padding: 12px; font-size: 12.5px; font-weight: 700; text-decoration: none;color: var(--color-text-primary);transition: border-color 0.2s ease, box-shadow 0.2s ease}
.fcard-origin-link:hover { border-color: var(--color-aqua-500, #06b6d4); box-shadow: var(--shadow-sm); }
.fcard-origin-link svg { color: var(--color-text-light); flex-shrink: 0; }
.fcard-memorial-note { margin-top: 12px; font-size: 11px; color: var(--fcard-muted-legible); }
.fcard-trade-hint { margin-top: 12px; font-size: 12px; color: var(--fcard-muted-legible); }
.fcard-back-link {display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700;color: var(--color-primary); text-decoration: none}
.fcard-reveal {position: fixed; inset: 0; z-index: var(--z-index-modal, 1100);background: linear-gradient(170deg, rgba(7, 42, 68, 0.96) 0%, rgba(8, 74, 106, 0.96) 100%);display: flex; align-items: center; justify-content: center;padding: 20px; overflow-y: auto;overflow-x: hidden;touch-action: pan-y;overscroll-behavior: contain;animation: fcardRevealFade 0.3s ease}
body.fcard-reveal-open { overflow: hidden; }
@keyframes fcardRevealFade { from { opacity: 0; } to { opacity: 1; } }
.fcard-reveal-rays {position: fixed; inset: -40%; pointer-events: none;background: conic-gradient(from 0deg,
transparent 0deg 20deg, rgba(255, 255, 255, 0.05) 20deg 30deg,
transparent 30deg 60deg, rgba(255, 255, 255, 0.05) 60deg 70deg,
transparent 70deg 100deg, rgba(255, 255, 255, 0.05) 100deg 110deg,
transparent 110deg 140deg, rgba(255, 255, 255, 0.05) 140deg 150deg,
transparent 150deg 180deg, rgba(255, 255, 255, 0.05) 180deg 190deg,
transparent 190deg 220deg, rgba(255, 255, 255, 0.05) 220deg 230deg,
transparent 230deg 260deg, rgba(255, 255, 255, 0.05) 260deg 270deg,
transparent 270deg 300deg, rgba(255, 255, 255, 0.05) 300deg 310deg,
transparent 310deg 340deg, rgba(255, 255, 255, 0.05) 340deg 350deg,
transparent 350deg 360deg);animation: fcardRaySpin 28s linear infinite}
@keyframes fcardRaySpin { to { transform: rotate(360deg); } }
.fcard-reveal-body {position: relative; width: 100%; max-width: 340px;margin: auto; text-align: center}
.fcard-reveal-lead { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.fcard-reveal-judges {list-style: none; margin: 0 0 16px; padding: 0;display: flex; flex-direction: column; gap: 6px; text-align: left}
.fcard-reveal-judge {display: flex; align-items: center; justify-content: space-between; gap: 8px;background: rgba(255, 255, 255, 0.94); border-radius: var(--radius-sm);padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--color-text-primary);opacity: 0; animation: fcardJudgeIn 0.35s ease forwards;min-width: 0}
.fcard-reveal-judge .frj-label { min-width: 0; overflow-wrap: anywhere; }
.fcard-reveal-judge .frj-result { flex-shrink: 0; font-weight: 800; color: var(--color-text-secondary); }
.fcard-reveal-judge .frj-result.up { color: var(--color-aqua-600, #0891b2); }
.fcard-reveal-judge .frj-result.holo-txt { color: #b45309; }
.fcard-reveal-judge.total {background: linear-gradient(135deg, #fffbeb, #fef3c7);border: 1px solid #fde68a; color: #92400e}
.fcard-reveal-judge.total .frj-result { color: #92400e; font-size: 14px; }
.fcard-reveal-judge:nth-child(1) { animation-delay: 0.15s; }
.fcard-reveal-judge:nth-child(2) { animation-delay: 0.45s; }
.fcard-reveal-judge:nth-child(3) { animation-delay: 0.75s; }
.fcard-reveal-judge:nth-child(4) { animation-delay: 1.05s; }
.fcard-reveal-judge:nth-child(5) { animation-delay: 1.35s; }
.fcard-reveal-judge:nth-child(6) { animation-delay: 1.65s; }
@keyframes fcardJudgeIn {from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }}
.fcard-reveal-card {width: min(62vw, 230px); margin: 0 auto 18px;opacity: 0; transform: scale(0.6) rotateY(90deg);animation: fcardPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;animation-delay: 2s}
@keyframes fcardPop {from { opacity: 0; transform: scale(0.6) rotateY(90deg); }
to { opacity: 1; transform: scale(1) rotateY(0deg); }}
.fcard-reveal-actions {display: flex; flex-direction: column; align-items: center; gap: 10px;opacity: 0; animation: fcardJudgeIn 0.4s ease forwards; animation-delay: 2.5s}
.fcard-reveal-mycard-link { font-size: 12.5px; font-weight: 700; color: #a5e0f7; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {.fcard-reveal-rays { animation: none; }
.fcard-reveal-judge, .fcard-reveal-card, .fcard-reveal-actions {animation: none; opacity: 1; transform: none}}
.fishing-card-issue-cta { position: relative; }
.fishing-card-issue-cta::after {content: ""; position: absolute; inset: -3px; border-radius: 50%;border: 2px solid var(--color-aqua-500, #06b6d4);animation: fcardCtaPulse 1.6s ease-out infinite;pointer-events: none}
@keyframes fcardCtaPulse {0% { transform: scale(0.9); opacity: 0.9; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }}
@media (prefers-reduced-motion: reduce) {.fishing-card-issue-cta::after { animation: none; opacity: 0.6; }}
.fcard-trade-target {display: grid; grid-template-columns: minmax(96px, 116px) auto 1fr;gap: 12px; align-items: center; margin-bottom: 18px}
.fcard-trade-target-card { min-width: 0; }
.fcard-trade-arrow { color: var(--color-aqua-600, #0891b2); display: flex; justify-content: center; }
.fcard-trade-pick-note { font-size: 12.5px; font-weight: 700; color: var(--color-text-secondary); min-width: 0; }
.fcard-trade-pick { position: relative; display: block; cursor: pointer; border-radius: 14px; }
.fcard-trade-radio { position: absolute; top: 8px; left: 8px; z-index: 5; width: 18px; height: 18px; accent-color: var(--color-aqua-600, #0891b2); }
.fcard-trade-pick:has(.fcard-trade-radio:checked) { outline: 3px solid var(--color-aqua-500, #06b6d4); outline-offset: 2px; }
.fcard-trade-compare {display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;max-width: 640px; margin: 0 auto}
.fcard-trade-side { min-width: 0; }
.fcard-trade-side-label { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--color-text-secondary); margin-bottom: 8px; }
.fcard-trade-warn {display: flex; gap: 8px; align-items: flex-start; max-width: 640px; margin: 14px auto 0;background: var(--color-status-pending-bg, #fef3c7); color: var(--color-status-pending-text, #92400e);border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; line-height: 1.6}
.fcard-trade-warn svg { flex-shrink: 0; margin-top: 1px; }
.fcard-trade-rows { display: flex; flex-direction: column; }
.fcard-trade-row {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;padding: 12px 4px; border-bottom: 1px solid var(--color-border-light);text-decoration: none; color: var(--color-text-primary); min-width: 0}
.fcard-trade-row-main { font-size: 12.5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.fcard-trade-row-sub { font-size: 11px; color: var(--color-text-muted); }
.fcard-trade-status {margin-left: auto; font-size: 10px; font-weight: 800; white-space: nowrap;border-radius: 999px; padding: 3px 10px}
.fcard-trade-status.st-pending { background: var(--color-status-pending-bg, #fef3c7); color: var(--color-status-pending-text, #92400e); }
.fcard-trade-status.st-accepted { background: var(--color-status-confirmed-bg, #dcfce7); color: var(--color-status-confirmed-text, #166534); }
.fcard-trade-status.st-declined, .fcard-trade-status.st-cancelled, .fcard-trade-status.st-expired { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.fcard-detail-actions .fcard-action-btn { border: none; }
.fc-name { padding-bottom: 4px; }
.fcard-gift-inline {margin-top: 12px; padding: 14px;background: var(--color-bg-muted); border: 1px solid var(--color-border);border-radius: var(--radius-md)}
.fcard-gift-inline[hidden] { display: none !important; }
.fcard-gift-inline .fcard-gift-label:first-child { margin-top: 0; }
.fcard-gift-label { display: block; font-size: 12px; font-weight: 800; color: var(--color-text-secondary); margin: 14px 0 6px; }
.fcard-gift-select, .fcard-gift-textarea {width: 100%; max-width: 100%; box-sizing: border-box;font-family: inherit; font-size: 13px;border: 1px solid var(--color-border); border-radius: var(--radius-sm);padding: 10px 12px; background: #fff; color: var(--color-text-primary)}
.fcard-gift-textarea { resize: vertical; }
.fcard-gift-recipient { position: relative; }
.fcard-gift-recipient-control { display: flex; align-items: center; gap: 8px; }
.fcard-gift-recipient-control .fcard-gift-select { flex: 1; min-width: 0; }
.fcard-gift-recipient-chip {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 13px; font-weight: 700; color: var(--color-text-primary);padding: 10px 12px; background: #fff;border: 1px solid var(--color-aqua-500, #06b6d4); border-radius: var(--radius-sm)}
.fcard-gift-recipient-clear {flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted);display: inline-flex; align-items: center; justify-content: center}
.fcard-gift-recipient-clear:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.fcard-gift-recipient-results {list-style: none; margin: 4px 0 0; padding: 4px;position: absolute; left: 0; right: 0; z-index: 20;max-height: 224px; overflow-y: auto;background: #fff; border: 1px solid var(--color-border);border-radius: var(--radius-sm); box-shadow: var(--shadow-md)}
.fcard-gift-opt {padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;font-size: 13px; color: var(--color-text-primary);min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.fcard-gift-opt:hover, .fcard-gift-opt.active { background: var(--color-bg-secondary); }
.fcard-gift-opt-empty { padding: 10px 12px; font-size: 12px; color: var(--color-text-muted); }
.fcard-gift-note { font-size: 11px; color: var(--color-text-muted); margin: 10px 0 12px; line-height: 1.7; }
.fcard-gift-submit { border: none; width: 100%; max-width: 100%; }
.fcard-guest-cta {margin-top: 14px; text-align: center;background: var(--gradient-aqua-light, linear-gradient(135deg, #ecfeff, #eff6ff));border: 1px solid var(--color-border); border-radius: var(--radius-md);padding: 16px 14px}
.fcard-guest-cta-lead { font-size: 13px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 10px; }
.fcard-detail-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fcard-icon-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.fcard-icon-btn {display: inline-flex; align-items: center; justify-content: center;width: 40px; height: 40px; border-radius: 50%; cursor: pointer;border: 1px solid var(--color-border); background: #fff; color: var(--color-text-secondary);transition: border-color 0.15s ease, color 0.15s ease}
.fcard-icon-btn:hover { border-color: var(--color-aqua-500, #06b6d4); color: var(--color-aqua-600, #0891b2); }
.fcard-action-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px;font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;border: none; border-radius: var(--radius-sm); padding: 13px 18px;background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff;box-shadow: var(--shadow-sm)}
.fcard-action-btn.secondary { background: var(--color-bg-secondary); color: var(--color-text-secondary); box-shadow: none; }
.fishing-card-issue-button { color: var(--color-aqua-600, #0891b2); }
.fishing-card-issue-locked { opacity: 0.4; }
.fcard-giveaway-open-row { position: relative; }
.fcard-giveaway-modal {position: fixed; inset: 0; z-index: 1000;display: flex; align-items: center; justify-content: center; padding: 20px;background: rgba(15, 23, 42, 0.55)}
.fcard-giveaway-modal[hidden] { display: none !important; }
.fcard-giveaway-modal-panel {width: 100%; max-width: 380px; box-sizing: border-box;background: var(--color-bg-primary, #fff); border-radius: var(--radius-md);padding: 22px 20px; box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.25));text-align: center}
.fcard-giveaway-modal-title { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--color-text-primary); }
.fcard-giveaway-modal-body { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fcard-giveaway-modal-body strong { color: var(--color-danger-600, #dc2626); }
.fcard-giveaway-modal-actions { display: flex; gap: 10px; justify-content: center; }
.fcard-giveaway-modal-actions form { margin: 0; }
.fcard-giveaway-modal-cancel {font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;border: 1px solid var(--color-border); border-radius: var(--radius-sm);padding: 13px 18px; background: var(--color-bg-secondary); color: var(--color-text-secondary)}
.fcard-giveaway-modal-confirm { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.fcard-giveaway-live {margin-top: 14px; padding: 14px;background: var(--color-bg-muted); border: 1px solid var(--color-border);border-radius: var(--radius-md)}
.fcard-giveaway-live-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--color-text-primary); }
.fcard-giveaway-live-note { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fcard-giveaway-linkbox { display: flex; gap: 8px; align-items: center; }
.fcard-giveaway-linkinput {flex: 1; min-width: 0; box-sizing: border-box;font-family: inherit; font-size: 12px; color: var(--color-text-secondary);border: 1px solid var(--color-border); border-radius: var(--radius-sm);padding: 10px 12px; background: var(--color-bg-primary, #fff)}
.fcard-giveaway-live-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fcard-giveaway-live-actions form { margin: 0; }
.fcard-giveaway-cancel {font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;border: none; background: none; color: var(--color-text-secondary);text-decoration: underline; padding: 6px 2px}
.fcard-claim { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; justify-content: center; }
.fcard-claim-card { flex: 0 1 320px; max-width: 100%; }
.fcard-claim-side { flex: 1 1 300px; min-width: 0; }
.fcard-claim-lead { margin: 0 0 4px; font-size: 13px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fcard-claim-serial { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--color-text-primary); overflow-wrap: anywhere; }
.fcard-claim-note { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fcard-claim-submit { width: 100%; max-width: 100%; box-sizing: border-box; padding: 15px; font-size: 14px; }
.fcard-claim-auth { display: flex; flex-direction: column; gap: 10px; }
.fcard-claim-auth .fcard-action-btn { width: 100%; max-width: 100%; box-sizing: border-box; }
.fcard-claim-status { padding: 16px; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.fcard-claim-status.done { text-align: center; }
.fcard-claim-status-title { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--color-text-primary); }
.fcard-claim-status-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fcard-claim-status-note:last-child { margin-bottom: 0; }