/* 💛 หุ้นในดวงใจ board on watchlist.html — see assets/fav-board.js */
.fb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:center;margin:8px 0 30px}
.fb h2{display:flex;align-items:center;gap:12px;margin:0 0 8px;font:700 clamp(1.7rem,3vw,2.3rem)/1.15 'Mitr',sans-serif;color:var(--wp-ink,#eef2f8)}
.fb-px{display:inline-grid;width:52px;height:52px;flex:none}
.fb-px svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3));animation:fbbeat 1.6s steps(1) infinite;transform-origin:50% 60%}
@keyframes fbbeat{0%,60%,100%{transform:scale(1)}66%{transform:scale(1.15)}74%{transform:scale(.95)}82%{transform:scale(1.1)}}
.fb-copy>p{margin:0;font-size:1rem;line-height:1.65;color:var(--wp-ink2,#c9d2e3)}
.fb-stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0}
.fb-stats span{display:grid;gap:6px}
.fb-stats b{font:400 1.15rem 'Press Start 2P',monospace;color:#E5C586;text-shadow:0 0 14px rgba(229,197,134,.35)}
.fb-stats small{font-size:.84rem;color:var(--wp-ink3,#9fabbf)}
.fb-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffd1dc,#ff8fa6 55%,#e0567a);color:#3a0d1a;font:600 .98rem 'Mitr',sans-serif;cursor:pointer;box-shadow:0 5px 0 #a8324f,0 12px 26px rgba(255,92,138,.25)}
.fb-cta:active{translate:0 4px;box-shadow:0 1px 0 #a8324f}
.fb-legend{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 8px}
.fb-legend button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,16,32,.5);color:var(--wp-ink2,#c9d2e3);font:500 .84rem 'Mitr',sans-serif;cursor:pointer}
.fb-legend button i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.fb-legend button b{font:400 .6rem 'Press Start 2P',monospace;color:var(--wp-ink3,#9fabbf)}
.fb-legend button[aria-pressed=true]{border-color:var(--c);color:var(--wp-ink,#eef2f8);background:color-mix(in srgb,var(--c) 22%,transparent)}
.fb-note{margin:6px 0 0;font-size:.84rem;color:var(--wp-ink3,#9fabbf)}
.fb-field{position:relative;height:440px;border-radius:28px;overflow:hidden;touch-action:none;
  background:radial-gradient(60% 55% at 50% 45%,rgba(255,143,166,.12),transparent 70%),radial-gradient(40% 40% at 80% 80%,rgba(229,197,134,.1),transparent 70%),linear-gradient(160deg,rgba(32,56,104,.55),rgba(10,18,38,.7));
  border:1px solid rgba(229,197,134,.22);box-shadow:inset 0 0 60px rgba(0,0,0,.35),0 20px 50px rgba(0,0,0,.3)}
.fb-empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--wp-ink2,#c9d2e3)}
.fb-bub{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:50%;cursor:grab;color:#fff;will-change:transform;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),color-mix(in srgb,var(--c) 85%,#fff) 18%,var(--c) 55%,color-mix(in srgb,var(--c) 55%,#0b1226) 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,#fff),0 10px 26px rgba(0,0,0,.35),0 0 28px color-mix(in srgb,var(--c) 45%,transparent);transition:opacity .25s,filter .25s}
.fb-bub:active{cursor:grabbing}
.fb-bub:hover,.fb-bub:focus-visible{filter:brightness(1.12);z-index:3}
.fb-bub:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fb-bub.dim{opacity:.18;filter:grayscale(.7)}
.fb-logo{position:relative;display:grid;place-items:center;width:calc(var(--r,40) * 1.2px);height:calc(var(--r,40) * 1.2px);max-width:110px;max-height:110px;min-width:26px;min-height:26px;border-radius:50%;background:#f3f5f8;border:2px solid rgba(255,255,255,.85);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none}
.fb-logo img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;border-radius:50%;background:#f3f5f8;z-index:1}
.fb-logo em{font:700 .8rem 'Mitr',sans-serif;font-style:normal;color:#32394a}
.fb-bub b{font:700 clamp(.72rem,calc(var(--r) * .03rem),1.05rem) 'Mitr',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;line-height:1}
.fb-bub i{position:absolute;top:4%;right:4%;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:7px;background:#172b43;color:#ffe2a3;font:400 .58rem 'Press Start 2P',monospace;font-style:normal;box-shadow:0 0 0 2px var(--c);pointer-events:none}
/* peek */
.fb-peek{width:min(620px,calc(100% - 24px));max-height:min(86vh,860px);padding:0;border:1px solid rgba(229,197,134,.45);border-radius:22px;background:linear-gradient(145deg,#1d2a48,#0a1020);color:#eef2f8;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:auto;position:fixed;inset:0;margin:auto;height:fit-content}
.fb-peek::backdrop{background:rgba(3,7,18,.72);backdrop-filter:blur(4px)}
.fb-x{position:sticky;top:8px;float:right;margin:8px 8px 0 0;min-width:44px;min-height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:inherit;font-size:1.2rem;cursor:pointer;z-index:2}
.fb-in{padding:22px 22px 24px}
.fb-pk-hd{display:flex;align-items:center;gap:14px}
.fb-pk-hd .fb-logo{width:56px;height:56px;max-width:none;max-height:none}
.fb-pk-hd h3{margin:0;font:700 1.5rem 'Mitr',sans-serif}
.fb-pk-hd p{margin:2px 0 0;font-size:.9rem;color:#c9d2e3}
.fb-pk-hd .px b{color:#eef2f8}.fb-pk-hd .px i{font-style:normal;font-weight:600}.fb-pk-hd .up{color:#4fd39a}.fb-pk-hd .down{color:#f0776b}
.fb-pk-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 10px;color:#c9d2e3}
.fb-sec{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:.82rem;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid var(--c);color:#eef2f8}
.fb-sec i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.fb-pk-acts{margin-bottom:6px}
.fb-add{min-height:40px;padding:0 16px;border-radius:12px;border:1px solid rgba(229,197,134,.5);background:rgba(229,197,134,.12);color:#eef2f8;font:500 .9rem 'Mitr',sans-serif;cursor:pointer}
.fb-in .fb-in{color:#4fd39a}
.fb-pk-acts .fb-in,.fb-pk-acts span{font-size:.9rem;color:#4fd39a}
.fb-holders{list-style:none;margin:8px 0 0;padding:0}
.fb-holders li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid rgba(229,197,134,.14)}
.fb-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);overflow:hidden;font-size:1rem}
.fb-av img{width:100%;height:100%;object-fit:cover}
.fb-holders .nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px}
.fb-holders .nm b{font:600 .95rem 'Mitr',sans-serif}
.fb-holders .bk{font-size:.74rem;font-weight:700;border-radius:999px;padding:1px 8px;background:rgba(255,255,255,.08)}
.fb-holders .bk.core{color:#4DD2A0;background:rgba(77,210,160,.12)}.fb-holders .bk.satellite{color:#6aa9e8;background:rgba(106,169,232,.12)}.fb-holders .bk.interesting{color:#F7C548;background:rgba(247,197,72,.12)}
.fb-holders .you{font-size:.72rem;color:#ffc2cf}
.fb-holders .why{margin:0;font-size:.92rem;line-height:1.6;color:#c9d2e3;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-holders .why.none{color:#9fabbf;font-style:italic}
.fb-vote{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#c9d2e3;font:600 .84rem 'Mitr',sans-serif;cursor:pointer;white-space:nowrap}
.fb-vote.on{border-color:#ff8fa6;color:#ffc2cf;background:rgba(255,143,166,.14)}
.fb-vote.own{cursor:default;border-style:dashed}
.fb-pk-note{margin:14px 0 0;font-size:.82rem;color:#9fabbf}
@media (max-width:900px){.fb{grid-template-columns:1fr;gap:16px}.fb-field{height:420px}}
@media (max-width:640px){.fb-field{height:400px;border-radius:22px}.fb-px{width:44px;height:44px}.fb-stats b{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.fb-px svg{animation:none}.fb-bub{transition:none}}
html[data-motion=paused] .fb-px svg,body.paused .fb-px svg{animation:none}
html[data-theme=light] .fb h2{color:#13233a}
html[data-theme=light] .fb-copy>p,html[data-theme=light] .fb-note,html[data-theme=light] .fb-stats small{color:#34465f}
html[data-theme=light] .fb-stats b{color:#8a6414;text-shadow:none}
html[data-theme=light] .fb-field{background:radial-gradient(60% 55% at 50% 45%,rgba(255,143,166,.14),transparent 70%),linear-gradient(160deg,#eef3fb,#dde6f3);border-color:#c9d3e2;box-shadow:inset 0 0 40px rgba(20,35,60,.06)}
html[data-theme=light] .fb-legend button{background:#fff;border-color:#c9d3e2;color:#34465f}
html[data-theme=light] .fb-peek{background:#fff;color:#13233a;border-color:#d9c08a}
html[data-theme=light] .fb-peek .fb-x{background:#eef2f8}
html[data-theme=light] .fb-pk-hd p,html[data-theme=light] .fb-pk-meta,html[data-theme=light] .fb-holders .why{color:#34465f}
html[data-theme=light] .fb-pk-hd .px b,html[data-theme=light] .fb-sec{color:#13233a}
html[data-theme=light] .fb-holders li{border-top-color:#e3e8f0}
html[data-theme=light] .fb-add{background:#fff8e8;border-color:#d9c08a;color:#13233a}
html[data-theme=light] .fb-vote{background:#fff;border-color:#c9d3e2;color:#34465f}
html[data-theme=light] .fb-pk-acts span{color:#13804f}

/* below-average picks fade back, above-average ones glow (Audi 2026-10-17) */
.fb-bub.low{opacity:.55;filter:saturate(.7)}
.fb-bub.low:hover,.fb-bub.low:focus-visible{opacity:1;filter:none}
.fb-bub.top{box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c) 60%,transparent),0 12px 30px rgba(0,0,0,.4),0 0 46px color-mix(in srgb,var(--c) 70%,transparent);z-index:2}
.fb-bub.top i{background:#E5C586;color:#172b43;font-size:.7rem;min-width:30px;height:30px}
.fb-bub.dim{opacity:.14}
.fb-bub b{margin-top:2px}
/* breathing room in the copy column */
.fb-copy>p{line-height:1.8}
.fb-stats{gap:12px 30px;margin:22px 0}
.fb-legend{margin:22px 0 10px;gap:8px}
.fb-note{margin-top:10px;line-height:1.6}