@media (prefers-reduced-motion: no-preference) {
  .fy-animate .fy-float { animation: fy-float 3.4s ease-in-out infinite; }
  .fy-animate .fy-wing { animation: fy-wing .9s ease-in-out infinite; }
  .fy-animate .fy-spin { animation: fy-spin 1.6s linear infinite; }
  .fy-animate .fy-prop { animation: fy-spin .5s linear infinite; }
  .fy-animate .fy-slow { animation: fy-spin 9s linear infinite; }
  .fy-animate .fy-blink { animation: fy-blink 4.6s linear infinite; }
  .fy-animate .fy-twinkle { animation: fy-twinkle 2.2s ease-in-out infinite; }
  .fy-animate .fy-sway { animation: fy-sway 7s ease-in-out infinite; }
  @keyframes fy-float { 50% { transform: translateY(-7px); } }
  @keyframes fy-wing { 50% { transform: scaleX(.9); } }
  @keyframes fy-spin { to { transform: rotate(360deg); } }
  @keyframes fy-blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }
  @keyframes fy-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
  @keyframes fy-sway { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(4deg); } }
}
:root {
  --fy-body: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --fy-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}
:root:lang(zh) {
  --fy-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --fy-round: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
:root:lang(ko) {
  --fy-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --fy-round: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
:root:lang(ru) {
  --fy-body: system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fy-round: system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
.fy-dialog { background: #121826; color: #e8edf2; border: 1px solid #2e3a46; border-radius: 16px; padding: 0; width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.fy-dialog::backdrop { background: rgba(5, 8, 14, .72); }
.fy-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; }
.fy-stage { position: relative; background: #0d1220; padding: 12px; display: grid; gap: 10px; align-content: start; }
.fy-stage .fy-art svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.fy-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fy-tabs[hidden] { display: none; }
.fy-tabs button { font: 500 12px/1 var(--fy-body); padding: 7px 9px; border-radius: 999px; border: 1px solid #2e3a46; background: transparent; color: #9aa8b5; cursor: pointer; }
.fy-tabs button.on { background: #ffd166; border-color: #ffd166; color: #241b05; font-weight: 700; }
.fy-tabs button:focus-visible, .fy-close:focus-visible, .fy-save:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.fy-info { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.fy-info h2 { margin: 0; font: 900 24px/1.25 var(--fy-round); }
/* 家の名前は他人が決めるので、何行にも伸ばさない（3 行まで） */
.fy-info .fy-sub { color: #9aa8b5; font-size: 13px; margin: 2px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.fy-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fy-chip { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 999px; color: #10151a; background: var(--c, #a8dadc); }
.fy-chip.ghost { background: transparent; color: #cfd8e3; border: 1px solid #2e3a46; font-weight: 500; }
.fy-grid2 { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: center; }
.fy-grid2 > svg { width: 100%; height: auto; }
.fy-table { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 13px; margin: 0; }
.fy-table dt { color: #6b7a88; }
.fy-table dd { margin: 0; overflow-wrap: anywhere; }
.fy-styles { display: grid; gap: 6px; }
.fy-style { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 8px; font-size: 13px; align-items: baseline; }
.fy-style b { font: 700 15px/1.3 var(--fy-round); color: #ffd166; }
.fy-style small { color: #9aa8b5; line-height: 1.4; }
.fy-marks { display: flex; gap: 12px; align-items: center; font-size: 12px; color: #9aa8b5; }
.fy-marks div { display: flex; gap: 6px; align-items: center; }
.fy-section { font: 700 13px/1 var(--fy-body); color: #6b7a88; margin: 0 0 6px; }
.fy-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2e3a46; background: #121826cc; color: #e8edf2; font-size: 18px; cursor: pointer; }
.fy-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; max-width: min(92vw, 420px); margin: 0; padding: 9px 14px; border-radius: 10px; border: 1px solid #ff7b72; background: #1e2730; color: #e8edf2; font: 500 13px/1.45 var(--fy-body); }
.fy-save[hidden] { display: none; }
.fy-save { font: 500 13px/1 var(--fy-body); padding: 9px 12px; border-radius: 8px; border: 1px solid #2e3a46; background: transparent; color: #e8edf2; cursor: pointer; justify-self: start; }
.fy-note { color: #9aa8b5; font-size: 12px; margin: 0; line-height: 1.5; }
.fy-say { position: relative; margin: 0; padding: 8px 12px; border-radius: 12px; background: #1e2730; font: 500 14px/1.45 var(--fy-round); color: #e8edf2; }
.fy-say::before { content: ""; position: absolute; left: 18px; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #1e2730; }
.fy-lang { display: inline-flex; align-items: center; gap: 6px; color: #9aa8b5; font-size: 13px; }
.fy-lang svg { flex: none; }
.fy-lang select { background: #161d24; color: #e8edf2; border: 1px solid #2e3a46; border-radius: 8px; padding: 7px 8px; font: 500 13px/1 var(--fy-body); cursor: pointer; }
.fy-lang select:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
/* 足もとの公式の表示と権利の表示（遊ぶ画面と無料診断で共通。中身は ui.js の officialFooter） */
.official { display: grid; gap: 6px; margin: 6px 0 2px; padding: 10px 12px; border: 1px solid #2e3a46; border-radius: 10px; }
.official[hidden], .official-list > div[hidden] { display: none; }
.official-head { font-weight: 700; color: #cfd8e3; }
.official-list { display: grid; gap: 6px; margin: 0; }
.official-list dt { color: #9aa8b5; }
.official-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.official-address { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: #e8edf2; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.terms summary { cursor: pointer; }
.terms p { margin: 4px 0 0; }
@media (max-width: 760px) {
  .fy-body { grid-template-columns: minmax(0, 1fr); }
  .fy-grid2 { grid-template-columns: 124px minmax(0, 1fr); }
}
/* めずらしさの上 2 段。まぼろしは薄紫、超伝説は虹色に光らせる（DESIGN.md 2.19） */
.fy-chip.rare-phantom { background: linear-gradient(120deg, #c9b8ff, #e9e2ff 55%, #b3a1f5); color: #160b33; box-shadow: 0 0 8px rgba(201, 184, 255, .55); }
.fy-chip.rare-legend { background: linear-gradient(120deg, #ffd166, #ff8fd8 35%, #9be7ff 70%, #ffd166); background-size: 200% 100%; color: #2a0820; font-weight: 800; box-shadow: 0 0 10px rgba(255, 143, 216, .7), 0 0 2px #fff inset; }
.fy-table dd.rare-phantom { color: #d9ceff; }
.fy-table dd.rare-legend { color: #ffd6f2; font-weight: 700; text-shadow: 0 0 6px rgba(255, 143, 216, .6); }
@media (prefers-reduced-motion: no-preference) {
  .fy-chip.rare-legend { animation: fy-legend-shine 3s linear infinite; }
  @keyframes fy-legend-shine { to { background-position: -200% 0; } }
}