/* 收集與玩（app/features/play.py）：屏東時刻／嘉義時刻、集章冊、每週小測驗、我的屏東／我的嘉義。類名前綴 py-。
   卡面同島引馬祖「立體剪紙」收藏卡：米白卡紙雙線框、四角剪紙花、頂列（編號、類別章、地區）、畫窗、標題＋短句、底列。 */
.py-hero { background: var(--surface-tint, #f5f3ec); border-bottom: 1px solid var(--line, #dfe3df); }
.py-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; padding-block: 24px; }
.py-kick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.py-kick__n { margin: 0; font-size: 14px; font-weight: 700; color: var(--grp-c, #c2560c); letter-spacing: .04em; }
.py-how summary { font-size: 13px; }
.py-title { margin: 0 0 8px; }
.py-sub { margin: 0 0 12px; color: var(--ink-muted, #56676c); font-size: 15px; }
.py-hero__art { position: relative; min-width: 0; }
.py-map { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line, #dfe3df); background: #e8f1f2; }
.py-tip { position: absolute; z-index: 2; pointer-events: none; background: #10242a; color: #fff; font-size: 13px; padding: 4px 8px; border-radius: 6px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--ink-muted, #56676c); }
.py-legend span { display: inline-flex; align-items: center; gap: 6px; }
.py-sw { display: inline-block; width: 10px; height: 10px; }
.py-sw.is-dot { border-radius: 50%; background: var(--c); }
.py-sw.is-ring { border-radius: 50%; border: 2px solid var(--c); background: #fff; }
.py-sw.is-sq { background: var(--c); }
.py-sw.is-sqo { border: 1px solid #a7b3b5; width: 8px; height: 8px; }
.py-ring { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.py-ring svg { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.py-ring__bg { fill: none; stroke: var(--line, #dfe3df); stroke-width: 6; }
.py-ring__fg { fill: none; stroke: var(--grp-c, #c2560c); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; stroke-dasharray: 170; stroke-dashoffset: 170; }
.py-ring__fg.is-red { stroke: #b42318; }
.py-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.py-pills span { background: var(--surface, #fff); border: 1px solid var(--line, #dfe3df); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--ink-muted, #56676c); }
.py-pills b { color: var(--ink, #10242a); font-size: 16px; }
#pyArt { min-height: 170px; }
.py-nav { border-bottom: 1px solid var(--line, #dfe3df); background: var(--surface, #fff); }
.py-nav .shell { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.py-nav__a { flex: none; padding: 12px 14px; font-size: 15px; color: var(--ink-muted, #56676c); text-decoration: none; border-bottom: 2px solid transparent; }
.py-nav__a.is-on { color: var(--ink, #10242a); font-weight: 700; border-color: var(--grp-c, #c2560c); }
.py-page { padding-block: 20px 48px; }
.py-keep { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--surface-sunken, #f1f3f0); font-size: 14px; color: var(--ink-muted, #56676c); }
.py-keep b { color: var(--ink, #10242a); }
.py-fine { font-size: 13px; color: var(--ink-muted, #56676c); margin: 12px 0 0; }
.py-h2 { font-size: 18px; margin: 24px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.py-h2 small { font-size: 13px; font-weight: 400; color: var(--ink-muted, #56676c); }
.py-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong, #c3ccc9); background: var(--surface, #fff); color: var(--ink, #10242a); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
.py-btn--main { background: var(--grp-c, #c2560c); border-color: var(--grp-c, #c2560c); color: #fff; font-weight: 700; }
.py-btn:focus-visible, .py-chip:focus-visible, .py-card:focus-visible, .py-stamp:focus-visible, .py-qo:focus-visible { outline: 3px solid var(--focus, #2a7cd9); outline-offset: 2px; }
.py-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--go-tint, #e3f1e7); color: var(--go, #186b43); white-space: nowrap; }
.py-tag.is-mut { background: var(--surface-sunken, #f1f3f0); color: var(--ink-muted, #56676c); }
.py-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-sunken, #f1f3f0); margin-bottom: 16px; }
.py-seg__b { border: 0; background: transparent; font: inherit; font-size: 15px; padding: 8px 16px; border-radius: 9px; cursor: pointer; color: var(--ink-muted, #56676c); min-height: 36px; }
.py-seg__b.is-on { background: var(--surface, #fff); color: var(--ink, #10242a); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.py-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.py-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.py-chip { border: 1px solid var(--line-strong, #c3ccc9); background: var(--surface, #fff); border-radius: 999px; padding: 0 14px; min-height: 32px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink, #10242a); }
.py-chip.is-on { background: var(--ink, #10242a); color: #fff; border-color: var(--ink, #10242a); }
.py-sel { min-height: 34px; border-radius: 10px; border: 1px solid var(--line-strong, #c3ccc9); padding: 0 10px; font: inherit; font-size: 14px; background: var(--surface, #fff); }

/* 抽卡包 */
.py-pack { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 18px; }
.py-pack__box { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink, #10242a); }
.py-pack__wrap { position: relative; width: 110px; height: 150px; border-radius: 10px; background: linear-gradient(150deg, #e9dcc3, #d8c29b); box-shadow: 0 6px 16px rgba(80,60,20,.22), inset 0 0 0 4px #f8f1e2, inset 0 0 0 5px #b89a68; display: grid; place-items: center; transition: transform .25s ease; }
.py-pack__box:hover .py-pack__wrap { transform: translateY(-3px) rotate(-2deg); }
.py-pack__box.is-open .py-pack__wrap { animation: pyShake .5s; }
.py-pack__box.is-empty .py-pack__wrap { filter: grayscale(.6) opacity(.6); }
.py-pack__box:disabled { cursor: default; }
.py-pack__seal { font-family: var(--font-serif, serif); font-weight: 800; font-size: 17px; color: #7a2a14; writing-mode: vertical-rl; letter-spacing: .2em; }
.py-pack__n { position: absolute; top: -8px; right: -8px; min-width: 28px; height: 28px; border-radius: 14px; background: var(--grp-c, #c2560c); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 0 3px #fff; }
.py-pack__msg { margin: 0; flex: 1 1 240px; color: var(--ink-muted, #56676c); font-size: 15px; }
.py-pack__fest { flex-basis: 100%; margin: 0; font-size: 14px; }
@keyframes pyShake { 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg) scale(1.04); } 75% { transform: rotate(-3deg); } }
.py-draw { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .py-draw { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .py-draw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 卡片 */
.py-card { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; text-align: left; }
.py-card__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.py-face { position: absolute; inset: 0; border-radius: 4.5%/3.4%; overflow: hidden; container-type: inline-size; }
.py-face--f, .py-face--b { background: #fbf6ea; box-shadow: 0 2px 8px rgba(70,50,20,.16), inset 0 0 0 1px rgba(120,90,40,.25); }
.py-face--f::before, .py-face--b::before { content: ""; position: absolute; inset: 3.2cqw; border: .6cqw solid var(--cc); border-radius: 3cqw; pointer-events: none; z-index: 1; }
.py-face--f::after, .py-face--b::after { content: ""; position: absolute; inset: 4.8cqw; border: .25cqw solid var(--cc); border-radius: 2cqw; opacity: .55; pointer-events: none; z-index: 1; }
.py-cn { position: absolute; width: 9cqw; height: 9cqw; color: var(--cc); z-index: 2; }
.py-cn svg { width: 100%; height: 100%; fill: currentColor; }
.py-cn--tl { top: 1.5cqw; left: 1.5cqw; } .py-cn--tr { top: 1.5cqw; right: 1.5cqw; transform: scaleX(-1); }
.py-cn--bl { bottom: 1.5cqw; left: 1.5cqw; transform: scaleY(-1); } .py-cn--br { bottom: 1.5cqw; right: 1.5cqw; transform: scale(-1); }
.py-ct { position: absolute; top: 7cqw; left: 8cqw; right: 8cqw; display: flex; align-items: center; gap: 2cqw; font-size: max(10px, 4.6cqw); color: #4a3b22; z-index: 2; }
.py-ct__no { font-family: var(--font-mono, monospace); font-weight: 700; }
.py-ct__cat { background: var(--cc); color: #fff; border-radius: 1.2cqw; padding: .4cqw 1.8cqw; font-weight: 700; }
.py-ct__ar { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-cart { position: absolute; top: 14.5cqw; left: 8cqw; right: 8cqw; height: 73cqw; border-radius: 2cqw; overflow: hidden; background: linear-gradient(160deg, #e7ece6, #d8e3e4); z-index: 0; }
.py-cart img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); display: block; }
.py-cart.is-noimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.7) 0 10%, transparent 11%), linear-gradient(transparent 60%, color-mix(in srgb, var(--cc) 40%, #fff) 60%); }
.py-ctt { position: absolute; top: 90cqw; left: 8cqw; right: 8cqw; font-family: var(--font-serif, serif); font-weight: 800; font-size: max(12px, 6.4cqw); line-height: 1.25; color: #2b2112; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; z-index: 2; }
.py-ctl { position: absolute; top: 107.5cqw; left: 8cqw; right: 8cqw; font-size: max(10px, 4.4cqw); color: #6b5a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.py-cb { position: absolute; bottom: 6cqw; left: 8cqw; right: 8cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: max(9px, 3.8cqw); color: #7c6a48; border-top: .25cqw dashed rgba(120,90,40,.35); padding-top: 1.6cqw; z-index: 2; }
.py-cb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-cb span:last-child { color: var(--cc); font-weight: 700; flex: none; }
.py-face--cover { background: linear-gradient(150deg, #e9dcc3, #c9ae7e); box-shadow: inset 0 0 0 3cqw #f8f1e2, inset 0 0 0 3.6cqw #b89a68; display: grid; place-items: center; transform: rotateY(0deg); }
.py-cover__s { font-family: var(--font-serif, serif); font-weight: 800; font-size: 9cqw; color: #7a2a14; writing-mode: vertical-rl; letter-spacing: .2em; }
/* 翻面不靠 backface-visibility（iPad Safari 會壓平），轉到一半換顯示的那一面 */
.py-card--draw .py-face--f { visibility: hidden; }
.py-card--draw.is-up .py-card__in { animation: pyFlipIn .9s var(--d, 0s) both; }
.py-card--draw.is-up .py-face--cover { animation: pyHideHalf .9s var(--d, 0s) both; }
.py-card--draw.is-up .py-face--f { animation: pyShowHalf .9s var(--d, 0s) both; }
@keyframes pyFlipIn { 0% { transform: translateY(20px) rotateY(0); opacity: 0; } 30% { opacity: 1; transform: translateY(0) rotateY(0); } 100% { transform: rotateY(180deg); } }
@keyframes pyHideHalf { 0%, 64% { visibility: visible; } 65%, 100% { visibility: hidden; } }
@keyframes pyShowHalf { 0%, 64% { visibility: hidden; } 65%, 100% { visibility: visible; transform: rotateY(180deg); } }
.py-card--draw.is-up .py-face--f { transform: rotateY(180deg); }
.py-new { position: absolute; top: -6px; right: -4px; z-index: 3; background: #b42318; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; opacity: 0; animation: pyPop .3s calc(var(--d, 0s) + .8s) forwards; }
.py-new.is-old { background: #56676c; }
@keyframes pyPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .py-card--draw .py-card__in, .py-card--draw .py-face { animation: none !important; } .py-card--draw .py-face--cover { visibility: hidden; } .py-card--draw .py-face--f { visibility: visible; transform: none !important; } .py-new { opacity: 1; animation: none; } }
.py-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 460px) { .py-album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .py-slot__no { font-size: 18px; } .py-slot__t { font-size: 11px; } }
.py-slot { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed color-mix(in srgb, var(--cc) 45%, #c9c2b0); background: repeating-linear-gradient(135deg, #faf7f0 0 8px, #f4efe4 8px 16px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8a7a5c; text-align: center; padding: 8px; }
.py-slot__no { font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 700; color: color-mix(in srgb, var(--cc) 60%, #8a7a5c); }
.py-slot__c { font-size: 13px; border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; }
.py-slot__t { font-size: 12px; }
.py-card--mini .py-face--f { box-shadow: 0 1px 4px rgba(70,50,20,.18), inset 0 0 0 1px rgba(120,90,40,.25); }
.py-card--mini:hover .py-card__in { transform: translateY(-3px); }
.py-minidone { position: absolute; right: 6%; bottom: 20%; z-index: 3; transform: rotate(-14deg); border: 2px solid #b42318; color: #b42318; background: rgba(255,250,240,.8); border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.py-donelist { display: grid; gap: 10px; }
.py-dl { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line, #dfe3df); border-radius: 12px; background: var(--surface, #fff); padding: 8px; cursor: pointer; font: inherit; color: var(--ink, #10242a); }
.py-dl img { width: 64px; height: 84px; object-fit: cover; border-radius: 6px; }
.py-dl b { display: block; } .py-dl small { color: var(--ink-muted, #56676c); } .py-dl q { display: block; margin-top: 4px; font-size: 14px; }

/* 放大的大卡 */
.py-lock, .py-lock body { overflow: hidden; }
.py-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(12,22,26,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overscroll-behavior: contain; }
.py-zoom__x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; cursor: pointer; }
.py-zoom__stage { width: min(78vw, 360px, calc((100vh - 200px) * .75)); }
.py-card--big { touch-action: none; }
.py-card--big .py-card__in { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.py-card--big.is-drag .py-card__in { transition: none; }
.py-card--big .py-face--b { visibility: hidden; transform: rotateY(180deg); }
.py-card--big.is-flip .py-card__in { transform: rotateX(var(--rx, 0)) rotateY(calc(180deg + var(--ry, 0))); }
.py-card--big.is-flip .py-face--b { animation: pyShowHalf .45s both; } .py-card--big.is-flip .py-face--f { animation: pyHideHalf .45s both; }
.py-card--big:not(.is-flip) .py-face--f { animation: pyShowF .45s both; }
@keyframes pyShowF { 0%, 49% { visibility: hidden; } 50%, 100% { visibility: visible; } }
.py-glare { position: absolute; inset: 0; border-radius: 4.5%/3.4%; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,.35), transparent 45%); mix-blend-mode: soft-light; }
.py-zoom__hint { margin: 0; color: rgba(255,255,255,.75); font-size: 13px; text-align: center; }
.py-zoom__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.py-bk { position: absolute; inset: 7cqw 8cqw; z-index: 2; overflow: auto; font-size: max(12px, 4.3cqw); line-height: 1.6; color: #2b2112; scrollbar-width: thin; }
.py-bk__h span { display: block; color: var(--cc); font-weight: 700; font-size: max(11px, 3.8cqw); }
.py-bk__h b { display: block; font-family: var(--font-serif, serif); font-size: max(14px, 6cqw); line-height: 1.3; margin-bottom: 2cqw; }
.py-bk p { margin: 0 0 2.5cqw; }
.py-bk__tip { background: rgba(194,86,12,.08); border-radius: 1.5cqw; padding: 1.5cqw 2.5cqw; }
.py-bk__kv { display: grid; grid-template-columns: auto 1fr; gap: .8cqw 3cqw; margin: 0 0 2.5cqw; }
.py-bk__kv dt { color: #7c6a48; } .py-bk__kv dd { margin: 0; }
.py-bk__src { font-size: max(11px, 3.6cqw); color: #6b5a3a; }
.py-bk__src a { color: #0c5f66; }
.py-bk__done { display: flex; flex-wrap: wrap; align-items: center; gap: 3cqw; }
.py-bk__ph { width: 100%; border-radius: 2cqw; }
.py-seal { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #b42318; color: #b42318; font-weight: 800; font-size: 14px; line-height: 1.1; transform: rotate(-12deg); text-align: center; background: rgba(255,250,240,.6); }
.py-seal small { display: block; font-size: 10px; font-weight: 600; }
.py-seal--pop { animation: pySeal .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pySeal { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.py-form { width: min(92vw, 440px); background: var(--surface, #fff); color: var(--ink, #10242a); border-radius: 16px; padding: 20px; display: grid; gap: 12px; max-height: 90vh; overflow: auto; }
.py-form h2 { margin: 0; font-size: 18px; }
.py-form label { display: grid; gap: 4px; font-size: 14px; color: var(--ink-muted, #56676c); }
.py-form input[type=date], .py-form input[type=text] { min-height: 40px; border-radius: 10px; border: 1px solid var(--line-strong, #c3ccc9); padding: 0 10px; font: inherit; color: var(--ink, #10242a); }
.py-form__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.py-drop { display: block; border: 2px dashed var(--line-strong, #c3ccc9); border-radius: 12px; padding: 14px; text-align: center; color: var(--ink-muted, #56676c); cursor: pointer; font-size: 14px; }
.py-drop.is-over { border-color: var(--grp-c, #c2560c); background: rgba(194,86,12,.06); }
.py-drop u { color: var(--tide, #0c7078); }
.py-ms { background: #fbf6ea; border-radius: 18px; padding: 28px 24px; text-align: center; width: min(90vw, 360px); display: grid; gap: 10px; justify-items: center; }
.py-ms__n { font-family: var(--font-serif, serif); font-size: 64px; font-weight: 800; color: #b42318; line-height: 1; }
.py-ms b { font-size: 20px; } .py-ms p { margin: 0; color: #6b5a3a; }
.py-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 1100; background: #10242a; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 15px; max-width: 90vw; transition: opacity .4s; }
.py-toast.is-out { opacity: 0; }

/* 集章冊 */
.py-locate { display: grid; gap: 8px; margin-bottom: 18px; padding: 16px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #dfe3df); }
.py-locate .py-btn { justify-self: start; }
.py-near { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.py-near li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line, #dfe3df); }
.py-near li b { display: block; } .py-near li small { color: var(--ink-muted, #56676c); }
.py-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.py-stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #c3ccc9; background: #fbfaf6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px; cursor: pointer; font: inherit; color: #8b979a; text-align: center; }
.py-stamp__t { font-size: 13px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.py-stamp__d { font-size: 11px; }
.py-stamp.is-on { border: 3px double #b42318; color: #b42318; background: rgba(180,35,24,.05); transform: rotate(-6deg); }
.py-stamp.is-on .py-stamp__t { font-family: var(--font-serif, serif); font-weight: 800; }
.py-seal-l { margin: 4px 0; }

/* 每週小測驗 */
.py-qchart { margin: 0; background: var(--surface, #fff); border: 1px solid var(--line, #dfe3df); border-radius: 12px; padding: 12px; }
.py-qchart figcaption { font-size: 14px; color: var(--ink-muted, #56676c); margin-bottom: 4px; }
.py-qchart svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.py-qchart rect { fill: #b8c6c3; } .py-qchart rect.is-me { fill: var(--grp-c, #c2560c); }
.py-qchart .lb { font-size: 11px; fill: #56676c; text-anchor: middle; } .py-qchart .vl { font-size: 11px; fill: #10242a; text-anchor: middle; } .py-qchart .me { font-size: 12px; font-weight: 700; fill: var(--grp-c, #c2560c); text-anchor: middle; }
.py-qspark { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted, #56676c); margin-top: 6px; }
.py-qspark rect { fill: #8fa5a1; }
.py-qz { max-width: 640px; margin: 0 auto; }
.py-qcard { background: var(--surface, #fff); border: 1px solid var(--line, #dfe3df); border-radius: 16px; padding: 20px; }
.py-qtop { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-muted, #56676c); margin-bottom: 10px; }
.py-qbar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunken, #f1f3f0); overflow: hidden; } .py-qbar i { display: block; height: 100%; background: var(--grp-c, #c2560c); transition: width .3s; }
.py-qq { font-size: 20px; margin: 4px 0 16px; line-height: 1.45; }
.py-qopts { display: grid; gap: 8px; }
.py-qo { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 48px; border-radius: 12px; border: 1px solid var(--line-strong, #c3ccc9); background: var(--surface, #fff); padding: 8px 14px; font: inherit; font-size: 16px; cursor: pointer; color: var(--ink, #10242a); }
.py-qo i { font-style: normal; width: 26px; height: 26px; border-radius: 13px; background: var(--surface-sunken, #f1f3f0); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.py-qo:hover { border-color: var(--grp-c, #c2560c); } .py-qo.is-pick { background: var(--grp-c, #c2560c); color: #fff; border-color: var(--grp-c, #c2560c); }
.py-qres__s { font-size: 18px; } .py-qres__s b { font-size: 44px; font-family: var(--font-serif, serif); color: var(--grp-c, #c2560c); }
.py-qlist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.py-qlist li { border-left: 4px solid #186b43; padding: 4px 0 4px 12px; } .py-qlist li.is-ng { border-color: #b42318; }
.py-qlist b { display: block; margin: 4px 0; } .py-qlist p { margin: 2px 0; } .py-qwhy { font-size: 14px; color: var(--ink-muted, #56676c); }

/* 我的屏東／我的嘉義 */
.py-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.py-sc { position: relative; display: block; background: var(--surface, #fff); border: 1px solid var(--line, #dfe3df); border-radius: 16px; padding: 16px 16px 40px; color: var(--ink, #10242a); text-decoration: none; }
.py-sc:hover { border-color: var(--grp-c, #c2560c); }
.py-sc h2 { margin: 0 0 6px; font-size: 16px; color: var(--grp-c, #c2560c); }
.py-sc__big { font-size: 15px; } .py-sc__big b { font-size: 34px; font-family: var(--font-serif, serif); }
.py-sc p { margin: 4px 0; font-size: 14px; color: var(--ink-muted, #56676c); }
.py-sc__go { position: absolute; right: 16px; bottom: 12px; font-size: 14px; color: var(--tide, #0c7078); }
.py-bar { display: block; height: 8px; border-radius: 4px; background: var(--surface-sunken, #f1f3f0); overflow: hidden; margin: 6px 0; flex: 1; } .py-bar i { display: block; height: 100%; background: var(--grp-c, #c2560c); }
.py-cats { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.py-cats li { display: inline-flex; align-items: center; gap: 4px; } .py-cats i { font-style: normal; background: var(--cc); color: #fff; border-radius: 4px; padding: 0 5px; }
.py-arows { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.py-arows li { display: grid; grid-template-columns: 7.5em 1fr 4em; align-items: center; gap: 8px; } .py-arows li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .py-arows b { text-align: right; font-weight: 600; }
.py-arows .py-bar i { background: #b42318; }
.py-tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.py-tl li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; font-size: 15px; padding-left: 12px; border-left: 3px solid #c2560c; }
.py-tl li.is-s { border-color: #b42318; } .py-tl li.is-q { border-color: #0c7078; }
.py-tl time { color: var(--ink-muted, #56676c); font-family: var(--font-mono, monospace); font-size: 13px; padding-top: 2px; }
.py-backup p { margin: 0 0 10px; }
.py-backup__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.py-backup__row .py-drop { flex: 1 1 240px; }

@media (max-width: 860px) {
  .py-hero__in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 18px; }
  .py-zoom__stage { width: min(80vw, 340px, calc((100vh - 220px) * .75)); }
}
@media (max-width: 460px) { .py-arows li { grid-template-columns: 6em 1fr 3.6em; } .py-qq { font-size: 18px; } .py-seg__b { padding: 8px 12px; } }
.py-tl li.py-fine { display: block; border: 0; padding: 0; }