/* 線上求籤頁專用樣式 */
.fs-fun { background: #fffbeb; border-left: 4px solid #d97706; padding: 10px 14px; border-radius: 6px; font-size: 1rem; }
.fs-chk { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 1rem; font-weight: 600; cursor: pointer; }
.fs-chk input { width: 22px; height: 22px; flex: none; }
.fs-go { width: 100%; min-height: 56px; font-size: 1.2rem; margin-top: 10px; }
.fs-stage { margin-top: 8px; background: #fff7ed; border: 2px solid #b45309; border-radius: 12px; padding: 12px 10px 10px; text-align: center; }
.fs-tube { width: 120px; height: 150px; margin: 0 auto; }
.fs-tube svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fs-pop { opacity: 0; transform: translateY(60px); transition: transform .45s ease-out, opacity .2s; }
.fs-tube.popped .fs-pop { opacity: 1; transform: translateY(0); }
.fs-tube.shake { animation: fs-shake .18s ease-in-out infinite alternate; transform-origin: 60px 140px; }
@keyframes fs-shake { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.fs-status { font-size: 1.15rem; font-weight: 700; color: #7c2d12; margin: 10px 0 4px; min-height: 1.5em; overflow-wrap: anywhere; }
.fs-blocks { display: flex; justify-content: center; gap: 28px; align-items: center; margin-top: 6px; }
.fs-blocks[hidden] { display: none; }
.fs-blk { width: 110px; text-align: center; }
.fs-blk > div { width: 100px; height: 60px; margin: 0 auto; }
.fs-blk svg { width: 100%; height: 100%; display: block; }
.fs-blk small { display: block; color: var(--muted); font-size: .95rem; margin-top: 4px; }
.fs-blocks.spin .fs-blk > div { animation: fs-tumble .32s linear infinite; }
.fs-blocks.spin .fs-blk:nth-child(2) > div { animation-duration: .4s; animation-direction: reverse; }
@keyframes fs-tumble { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
.fs-actions { margin-top: 4px; }
.fs-actions[hidden] { display: none; }
.fs-actions .btn-sm { margin-top: 8px; }
.fs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fs-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fs-lookup label { font-weight: 600; }
.fs-lookup input { width: 8em; font-size: 1.1rem; padding: 8px 10px; }
.fs-err { color: #b91c1c; min-height: 1.4em; margin: 6px 0 0; }
.fs-result { margin-top: 14px; border: 2px solid #b45309; border-radius: 12px; padding: 4px 16px 14px; background: #fffdf7; outline: none; scroll-margin-top: 12px; }
.fs-result[hidden] { display: none; }
.fs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.fs-no { font-size: 1.35rem; font-weight: 800; color: #7c2d12; }
.fs-grade { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 700; color: #fff; }
.fs-grade.g-上, .fs-cat .g-上 { --g: #15803d; }
.fs-grade.g-中, .fs-cat .g-中 { --g: #b45309; }
.fs-grade.g-下, .fs-cat .g-下 { --g: #b91c1c; }
.fs-grade { background: var(--g, #555); }
.fs-cat td.g-上, .fs-cat td.g-中, .fs-cat td.g-下 { color: var(--g); font-weight: 700; white-space: nowrap; }
.fs-story { margin: 4px 0 8px; }
.fs-poem { background: #fef3c7; border-radius: 10px; padding: 10px 14px; text-align: center; }
.fs-poem p { margin: 4px 0; font-size: 1.4rem; font-weight: 700; letter-spacing: .12em; color: #451a03; }
.fs-note { margin-top: 10px; }
.fs-note-h { margin: 6px 0 2px; font-weight: 700; color: #7c2d12; }
.fs-note p { margin: 4px 0; }
.fs-small { color: var(--muted); font-size: .95rem; margin: 8px 0; }
.fs-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-cat td, .fs-cat th { vertical-align: top; }
.fs-cat td:first-child { white-space: nowrap; }
.fs-cat-poem { min-width: 14em; }
@media (max-width: 480px) { .fs-poem p { font-size: 1.2rem; letter-spacing: .06em; } .fs-blocks { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .fs-tube.shake, .fs-blocks.spin .fs-blk > div { animation: none; } .fs-pop { transition: none; } }