:root {--mode-facility: #0f766e;--mode-facility-dark: #115e59;--mode-facility-50: #f0fdfa;--mode-facility-100: #ccfbf1;--cat-tackle: #7c3aed;--cat-boat: #2563eb;--cat-park: #65a30d;--cat-food: #e11d48;--cat-fish: #ea580c;--cat-tavern: #a16207;--stamp-smile: #d97706;--stamp-wow: #db2777;--stamp-cry: #4f46e5;--plan-free: #94a3b8;--plan-normal: #0d9488;--plan-super: #2563eb;--plan-hyper: #7c3aed;--plan-master: #f59e0b}
.fo-plan-free { --pc: var(--plan-free); }
.fo-plan-normal { --pc: var(--plan-normal); }
.fo-plan-super { --pc: var(--plan-super); }
.fo-plan-hyper { --pc: var(--plan-hyper); }
.fo-plan-master { --pc: var(--plan-master); }
.fo-emblem {position: relative;display: inline-flex;flex: none;align-items: center;justify-content: center}
.fo-emblem--sm { width: 30px; height: 30px; }
.fo-emblem--md { width: 46px; height: 46px; }
.fo-emblem--lg { width: 64px; height: 64px; }
.fo-emblem-core {position: relative;z-index: 2;width: 54%;height: 54%;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 82%, #fff), var(--pc));box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.55)}
.fo-emblem-core svg {width: 56%;height: 56%;fill: currentColor}
.fo-emblem-core-hole {fill: var(--pc)}
.fo-emblem-ring {display: none;position: absolute;left: 50%;top: 50%;border-radius: 50%;transform: translate(-50%, -50%);pointer-events: none;box-sizing: border-box}
.fo-emblem[data-level="0"] .fo-emblem-core {background: #fff;box-shadow: none;border: 1.5px solid var(--color-border);color: #b7bfd0}
.fo-emblem[data-level="0"] .fo-emblem-core-hole { fill: #fff; }
.fo-emblem[data-level="0"] .fo-emblem-ring:nth-child(1) { display: block; width: 108%; height: 108%; border: 1.4px dashed color-mix(in srgb, var(--pc) 40%, var(--color-border)); opacity: 0.95; }
.fo-emblem[data-level="1"] .fo-emblem-ring:nth-child(1) { display: block; width: 122%; height: 122%; border: 2px solid var(--pc); opacity: 0.5; }
.fo-emblem[data-level="2"] .fo-emblem-ring:nth-child(1) { display: block; width: 120%; height: 120%; border: 2.4px solid var(--pc); opacity: 0.62; }
.fo-emblem[data-level="3"] .fo-emblem-ring:nth-child(1) { display: block; width: 118%; height: 118%; border: 2.8px solid var(--pc); opacity: 0.74; }
.fo-emblem[data-level="4"] .fo-emblem-ring:nth-child(1) { display: block; width: 116%; height: 116%; border: 3.2px solid var(--pc); opacity: 0.88; }
.fo-emblem[data-level="2"] .fo-emblem-ring:nth-child(2) { display: block; width: 144%; height: 144%; border: 1.8px solid var(--pc); opacity: 0.34; }
.fo-emblem[data-level="3"] .fo-emblem-ring:nth-child(2) { display: block; width: 140%; height: 140%; border: 2.2px solid var(--pc); opacity: 0.46; }
.fo-emblem[data-level="4"] .fo-emblem-ring:nth-child(2) { display: block; width: 136%; height: 136%; border: 2.6px solid var(--pc); opacity: 0.6; }
.fo-emblem[data-level="3"] .fo-emblem-ring:nth-child(3) { display: block; width: 162%; height: 162%; border: 1.6px solid var(--pc); opacity: 0.26; }
.fo-emblem[data-level="4"] .fo-emblem-ring:nth-child(3) { display: block; width: 158%; height: 158%; border: 2px solid var(--pc); opacity: 0.38; }
.fo-emblem[data-level="4"] .fo-emblem-ring:nth-child(4) { display: block; width: 182%; height: 182%; border: 1.6px solid var(--pc); opacity: 0.22; }
.fo-emblem[data-level="3"] { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pc) 35%, transparent)); }
.fo-emblem[data-level="4"] { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc) 55%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--pc) 28%, transparent)); }
.fo-emblem-spark {display: none;position: absolute;z-index: 3;top: -2px;right: -2px;width: 34%;height: 34%;color: var(--plan-master)}
.fo-emblem[data-level="4"] .fo-emblem-spark { display: block; }
.fo-emblem-spark svg {width: 100%;height: 100%;fill: currentColor}
.fo-plan-mini {display: inline-flex;align-items: center;gap: 6px;font-size: 12px;font-weight: 700;color: var(--pc)}
.fo-plan-mini-dot {flex: none;width: 8px;height: 8px;border-radius: 50%;background: var(--pc);box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--pc) 45%, transparent)}
.fo-ic {width: 1em;height: 1em;flex: none;vertical-align: -0.14em}
.fo-cat-tackle { --cat: var(--cat-tackle); }
.fo-cat-boat { --cat: var(--cat-boat); }
.fo-cat-park { --cat: var(--cat-park); }
.fo-cat-food { --cat: var(--cat-food); }
.fo-cat-fish { --cat: var(--cat-fish); }
.fo-cat-tavern { --cat: var(--cat-tavern); }
.fo-cat-tag {display: inline-flex;align-items: center;gap: 4px;font-size: 11px;font-weight: 700;color: var(--cat, var(--mode-facility));background: color-mix(in srgb, var(--cat, var(--mode-facility)) 11%, #fff);padding: 2px 8px;border-radius: 999px;white-space: nowrap}
.fo-view-count {display: inline-flex;align-items: center;gap: 4px;font-size: 12px;color: var(--color-text-muted)}
.fo-view-count .fo-ic {width: 14px;height: 14px}
.fo-stamp-mini-row {display: flex;align-items: center;gap: 9px;flex-wrap: wrap}
.fo-stamp-mini {display: inline-flex;align-items: center;gap: 3px;font-size: 12px;font-weight: 700}
.fo-stamp-mini svg {flex: none}
.fo-stamp-smile { color: var(--stamp-smile); }
.fo-stamp-wow { color: var(--stamp-wow); }
.fo-stamp-cry { color: var(--stamp-cry); }
.fo-support-chip {display: inline-flex;align-items: center;gap: 4px;padding: 2px 8px;border: 1px solid var(--color-border);border-radius: 999px;background: rgba(255, 255, 255, 0.92);color: var(--color-text-primary);font-size: 10.5px;font-weight: 800;line-height: 1.5;white-space: nowrap;box-shadow: var(--shadow-sm)}
.fo-support-chip-dot {flex: none;width: 6px;height: 6px;border-radius: 50%;background: var(--pc, var(--mode-facility))}
.fo-support-chip--photo {position: absolute;top: 4px;left: 4px;z-index: 1;padding: 1px 6px;font-size: 9.5px}
.fo-support-dialog {border: none;padding: 0;margin: auto auto 0;width: 100%;max-width: 480px;max-height: 82dvh;border-radius: 18px 18px 0 0;background: #fff;color: var(--color-text-primary);box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.22);overflow-y: auto;overscroll-behavior: contain}
.fo-support-dialog::backdrop {background: rgba(15, 23, 42, 0.42)}
.fo-support-dialog-inner {padding: 18px 18px 22px}
.fo-support-dialog-head {display: flex;align-items: flex-start;gap: 12px}
.fo-support-dialog-title {flex: 1;min-width: 0}
.fo-support-dialog-head h2 {margin: 0;font-size: 15.5px;overflow-wrap: anywhere}
.fo-support-dialog-head p {margin: 3px 0 0;font-size: 12.5px;font-weight: 400;color: var(--color-text-muted)}
.fo-support-dialog-close {flex: none;border: 0;background: var(--color-bg-secondary);color: var(--color-text-secondary);width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer}
.fo-support-dialog-body {margin: 14px 0 0;font-size: 13.5px;line-height: 1.7;color: var(--color-text-secondary);overflow-wrap: anywhere}
.fo-support-cards {display: grid;grid-template-columns: 1fr;gap: 8px;margin: 16px 0 0;padding: 14px 0 0;border-top: 1px solid var(--color-border);list-style: none}
.fo-support-card {display: grid;grid-template-columns: 64px minmax(0, 1fr);min-width: 0;border: 1px solid var(--color-border);border-radius: var(--radius-md);background: #fff;overflow: hidden}
.fo-support-card.is-current {border-color: var(--pc);box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 28%, transparent), var(--shadow-sm)}
.fo-support-card-head {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 2px;padding: 4px;background: var(--pc);color: #fff;font-size: 11.5px;font-weight: 800;box-sizing: border-box}
.fo-support-card-current {display: none;padding: 0 5px;border-radius: 999px;background: rgba(255, 255, 255, 0.3);font-size: 9.5px;line-height: 1.6;white-space: nowrap}
.fo-support-card.is-current .fo-support-card-current {display: inline-flex}
.fo-support-card-body {display: flex;flex-direction: column;gap: 2px;padding: 7px 10px 8px;min-width: 0;overflow-wrap: anywhere}
.fo-support-card-name {font-size: 12px;font-weight: 800;color: var(--color-text-primary)}
.fo-support-card-price {font-size: 10.5px;color: var(--color-text-muted)}
.fo-support-card-catch {margin: 0;font-size: 10.5px;line-height: 1.5;color: var(--color-text-secondary)}
@media (min-width: 769px) {.fo-support-dialog {margin: auto;border-radius: 18px}}