/* One persistent binding; content turns inside the paper, not the outside shape. */
.vp-home-awards { padding: 4px 0 12px; }
.vp-awards-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vp-home-awards > p { margin:0 0 10px; font-size:14px; color:var(--muted); }
.vp-home-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:5px; margin:12px 0 8px; }
.vp-award-step { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-height:150px; padding:10px 3px 30px; background:#ebe9d9; border-top:1px solid #abb793; box-shadow:0 3px 0 #c4cbb3; text-align:center; }
.vp-award-step.place-1 { min-height:180px; background:#dfe5cc; }
.vp-award-step.place-3 { min-height:126px; background:#eeeadf; }
.vp-award-leader { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; margin-bottom:2px; }
.vp-award-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#294936; color:#f7f4eb; font-weight:700; font-size:14px; overflow:hidden; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.vp-award-avatar img { width:100%; height:100%; object-fit:cover; }
/* 同分並列名次時，同一階顯示多位領先者頭像。 */
.vp-award-avatar-stack { display:flex; justify-content:center; }
.vp-award-avatar-stack .vp-award-avatar { margin-left:-10px; }
.vp-award-avatar-stack .vp-award-avatar:first-child { margin-left:0; }
.vp-award-avatar-more { font-size:11px; }
.vp-award-name { font-size:11px; color:#49533f; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.vp-award-medal { display:grid; place-items:center; width:29px; height:29px; border:3px double #9b8753; border-radius:50%; color:#806d40; }
.vp-award-medal svg { width:18px; height:18px; }
.vp-award-prize { font-size:16px; font-weight:700; color:#264836; }
.vp-award-number { position:absolute; bottom:5px; font-size:13px; font-weight:600; line-height:1; color:#61744b; white-space:nowrap; }
.vp-award-number b { font:24px/1 var(--serif); font-weight:400; margin-right:2px; }
.vp-archive-chapter { border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.vp-archive-chapter h2 { margin:0; }
.vp-archive-chapter h2 button { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:12px 0; min-height:60px; gap:12px; color:#264836; }
.vp-archive-chapter h2 strong { display:block; font-size:18px; }
.vp-archive-chapter h2 small { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:4px; }
.vp-archive-chapter h2 button[aria-expanded=true] { padding-bottom:16px; }
.vp-archive-chapter:last-child { border-bottom:0; }
/* 期間狀態：只有終身成就「進行中」，一眼看出只有它還會累積。 */
.vp-archive-chapter .vp-period-meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:4px; }
.vp-archive-chapter .vp-period-meta small { margin-top:0; }
.vp-period-status { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.6; vertical-align:1px; }
.vp-period-status.is-active { background:#e1ead9; color:#264836; box-shadow:inset 0 0 0 1px #9fb391; }
.vp-period-status.is-done { background:#eeebe2; color:#6b6d5e; box-shadow:inset 0 0 0 1px #cfccbf; }
.vp-journal-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin:0 0 10px; }
.vp-journal-tabs button { min-height:44px; font-size:16px; border-bottom:3px solid transparent; }
.vp-journal-tabs button[aria-pressed=true] { border-color:#264836; font-weight:700; color:#264836; }
.vp-journal-tabs { align-items:center; }
.vp-journal-tabs .vp-help-dot { margin-left:auto; border-bottom:0; }
/* 本季挑戰：賽事期間靠右，與標題同一列。 */
:is(#vpMain,.vp-turning-leaf) .vp-heading-dates { flex:none; align-self:flex-end; display:grid; justify-items:end; gap:2px; margin-bottom:8px; text-align:right; }
.vp-heading-dates span, .vp-heading-dates small { font-size:12px; line-height:1.3; color:var(--muted); }
.vp-heading-dates strong { font-size:14px; font-weight:600; line-height:1.3; color:#264836; white-space:nowrap; }
.vp-badge-wrapper { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.vp-badge-counter { position:absolute; top:-2px; left:-2px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#294936; color:#f7f4eb; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,0.2); }
.vp-ranking-list li.is-pinned { background:#f1ede2; border:1px solid #abb793; }
.vp-ranking-list li.is-pinned.is-you { background:#e2e9dc; border:1px solid #7c936b; }
.vp-journal-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; padding-bottom:12px; }
body { background:#dedfce; overflow:hidden; }
.vp-shell { display:flex; flex-direction:column; width:min(680px,calc(100% - 24px)); height:calc(100dvh - 30px); min-height:0; margin:16px auto 14px; gap:10px; }
.vp-workspace { order:0; position:relative; isolation:isolate; flex:1; min-height:0; display:grid; grid-template-rows:minmax(0,1fr); padding:0; border:1px solid #b7b69f; border-left:8px solid #264836; border-radius:7px 24px 24px 7px; background:var(--paper); box-shadow:3px 2px 0 #e9e4d3,6px 4px 0 #bab99f,9px 6px 0 #ece7d6,14px 12px 25px #263c2520; overflow:hidden; }
.vp-workspace:before { content:''; position:absolute; z-index:2; pointer-events:none; inset:0 auto 0 0; width:12px; background:linear-gradient(90deg,#796f4f20,transparent); }
/* Fixed app header sits outside the paper and its page-turn bounds. */
.vp-topbar { order:-1; flex:0 0 52px; min-width:0; height:auto; margin:0 4px; padding:0; border:0; }
.vp-topbar-identity { display:grid; gap:1px; }
.vp-topbar-brand { display:block; font:600 20px/1.1 var(--serif); letter-spacing:2.5px; }
.vp-topbar-caption { font:10px/1.3 var(--sans); letter-spacing:1.4px; color:var(--muted); }
.vp-topbar #vpLocation { display:none; }
.vp-topbar button { flex:none; gap:8px; min-height:44px; padding:6px 10px; border:1px solid #29493630; border-radius:24px; background:#f7f4eb66; font-size:13px; }
:is(#vpMain,.vp-turning-leaf) { min-height:0; padding:20px; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#b8b9a6 transparent; outline:none; }
/* Reading position is app chrome too, below the turning paper. */
.vp-footer { order:1; flex:0 0 24px; display:flex; width:100%; padding:0 8px; align-items:center; justify-content:center; border:0; color:#52604c; font:13px/1.2 var(--sans); letter-spacing:.6px; }
.vp-footer>span:first-child { display:block; max-width:none; }
.vp-sidebar { order:2; position:static; height:62px; padding:0; border:0; flex:none; background:transparent; box-shadow:none; backdrop-filter:none; }
.vp-sidebar .vp-brand,.vp-sidebar-rule,.vp-sidebar-bottom { display:none; }
.vp-sidebar nav { flex-direction:row; gap:4px; }
.vp-sidebar nav button { flex:1; min-width:0; height:60px; min-height:0; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:4px 0; border-radius:5px 12px 12px 5px; }
.vp-sidebar nav button>span { font-size:13px; }
.vp-sidebar nav button svg { width:20px; height:20px; }
.vp-sidebar nav button small,.vp-sidebar nav button i { display:none; }
.vp-sidebar nav button[aria-current=page] { background:#294936; color:#f7f4eb; }
.vp-preview-tag { z-index:55; top:0; font-size:10px; padding:1px 8px; }
.vp-cover-visible .vp-shell { visibility:hidden; }
.vp-cover-book { transform-origin:top left; }
.vp-cover-paper { display:none; }
.vp-cover-leaf { box-shadow:3px 3px 0 #d4ccb6,6px 6px 0 #eee8d8,12px 20px 35px #1b392d24; }
.vp-cover[data-opening] { overflow:visible; pointer-events:none; }
:is(#vpMain,.vp-turning-leaf) .vp-kicker { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-welcome { margin:0 0 18px; gap:8px; }
:is(#vpMain,.vp-turning-leaf) .vp-welcome p { font-size:14px; margin:0; }
:is(#vpMain,.vp-turning-leaf) .vp-welcome h1 { font-size:25px; }
:is(#vpMain,.vp-turning-leaf) .vp-welcome .vp-link { font-size:13px; white-space:nowrap; }
.vp-prize-line { display:block; width:100%; text-align:left; background:#e6e7d6; padding:15px 18px; border-radius:3px 14px 14px 3px; }
.vp-prize-line>span { display:block; font-size:14px; margin-bottom:5px; }
.vp-prize-line strong { display:flex; justify-content:space-between; font-size:20px; }
:is(#vpMain,.vp-turning-leaf) .vp-personal-standing { padding:18px 0; margin:0; border:0; gap:16px; }
:is(#vpMain,.vp-turning-leaf) .vp-personal-standing strong { font-size:36px; }
:is(#vpMain,.vp-turning-leaf) .vp-personal-standing>div>span { font-size:14px; }
:is(#vpMain,.vp-turning-leaf) .vp-personal-standing .vp-link { margin-left:auto; font-size:13px; }
:is(#vpMain,.vp-turning-leaf) .vp-next-label h2 { font-size:19px; margin:8px 0 0; }
:is(#vpMain,.vp-turning-leaf) .vp-mission { border:0; box-shadow:none; padding:12px 0 18px; grid-template-columns:42px minmax(0,1fr); gap:8px 12px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-art { width:42px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-copy h3 { font-size:17px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-copy p { font-size:14px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-copy small { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-reward { grid-column:2; display:flex; flex-direction:row; gap:8px; align-items:center; text-align:left; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-reward strong { font-size:24px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-reward span { font-size:13px; }
:is(#vpMain,.vp-turning-leaf) .vp-mission-reward i { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-home-shortcuts { border:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; margin:0; padding-top:10px; }
:is(#vpMain,.vp-turning-leaf) .vp-home-shortcuts button { padding:10px 0; border:0; gap:3px; }
:is(#vpMain,.vp-turning-leaf) .vp-home-shortcuts strong { font-size:16px; }
:is(#vpMain,.vp-turning-leaf) .vp-home-shortcuts span { font-size:13px; }
:is(#vpMain,.vp-turning-leaf) .vp-page-heading { padding:0 0 16px; margin:0; }
:is(#vpMain,.vp-turning-leaf) .vp-page-heading h1 { font-size:25px; margin:0 0 6px; letter-spacing:0; }
:is(#vpMain,.vp-turning-leaf) .vp-page-heading p { font-size:14px; line-height:1.7; }
.vp-atlas-summary { display:flex; justify-content:space-between; gap:10px; font-size:15px; margin:0 0 16px; }
:is(#vpMain,.vp-turning-leaf) .vp-atlas-toolbar { margin-bottom:12px; }
:is(#vpMain,.vp-turning-leaf) .vp-country-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
:is(#vpMain,.vp-turning-leaf) .vp-country-stamp { padding:12px; min-height:0; }
:is(#vpMain,.vp-turning-leaf) .vp-country-silhouette { height:65px; margin:14px 0 6px; }
:is(#vpMain,.vp-turning-leaf) .vp-country-stamp h2 { font-size:19px; margin:0 0 8px; }
:is(#vpMain,.vp-turning-leaf) .vp-country-en { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-country-count { font-size:13px; padding-top:8px; }
.vp-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 0 0; font-size:13px; }
.vp-pagination button { min-height:44px; font-size:14px; }
.vp-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vp-task-grid button { border:1px solid #d6d4bd; border-radius:3px 12px 12px 3px; padding:14px 10px; text-align:left; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:7px; background:#eeeede; }
.vp-task-grid img { width:38px; height:38px; object-fit:contain; }
.vp-task-grid > button > .vp-badge-wrapper { grid-row:span 2; width:38px; }
.vp-task-grid strong { font-size:15px; overflow-wrap:anywhere; }
.vp-task-grid span { font-size:13px; }
.vp-task-grid small { grid-column:span 2; font-size:13px; line-height:1.6; }
:is(#vpMain,.vp-turning-leaf) .vp-collection-top { margin-bottom:16px; }
:is(#vpMain,.vp-turning-leaf) .vp-text-tabs button { font-size:14px; padding:8px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter { padding:16px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-hero { display:block; min-height:0; }
:is(#vpMain,.vp-turning-leaf) .vp-medallion-scene { float:right; width:72px; height:72px; min-height:0; margin:0 0 8px 10px; }
:is(#vpMain,.vp-turning-leaf) .vp-medallion { width:66px; height:66px; }
:is(#vpMain,.vp-turning-leaf) .vp-medallion-halo,:is(#vpMain,.vp-turning-leaf) .vp-medallion-watermark { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-copy { padding:0; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-copy h2 { font-size:21px; margin:6px 0 10px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-copy p { font-size:14px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-reward { margin:12px 0; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-reward strong { font-size:30px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-progress { clear:both; margin:12px 0; }
:is(#vpMain,.vp-turning-leaf) .vp-stage-heading { margin-top:20px; padding-top:12px; }
:is(#vpMain,.vp-turning-leaf) .vp-stage-heading small { display:none; }
:is(#vpMain,.vp-turning-leaf) .vp-stage-track { grid-template-columns:repeat(var(--stage-count),minmax(51px,1fr)); gap:2px; margin-top:12px; }
:is(#vpMain,.vp-turning-leaf) .vp-stage-track button strong,:is(#vpMain,.vp-turning-leaf) .vp-stage-track button small { font-size:13px; }
:is(#vpMain,.vp-turning-leaf) .vp-chapter-copy>.vp-button { padding:10px 12px; width:100%; }
:is(#vpMain,.vp-turning-leaf) .vp-awards-spread { display:block; padding:20px 14px; }
:is(#vpMain,.vp-turning-leaf) .vp-awards-intro h2 { font-size:28px; }
:is(#vpMain,.vp-turning-leaf) .vp-podium { margin-top:20px; gap:6px; }
:is(#vpMain,.vp-turning-leaf) .vp-podium-place { padding:18px 4px; }
:is(#vpMain,.vp-turning-leaf) .vp-podium-place strong,:is(#vpMain,.vp-turning-leaf) .vp-podium-place small { font-size:13px; }
.vp-see-ranking { width:100%; margin-top:20px; }
:is(#vpMain,.vp-turning-leaf) .vp-leaderboard-layout { display:block; }
:is(#vpMain,.vp-turning-leaf) .vp-ranking-register { padding:0; border:0; }
:is(#vpMain,.vp-turning-leaf) .vp-ranking-list li { min-height:64px; }
:is(#vpMain,.vp-turning-leaf) .vp-rank-person>span { font-size:13px; }
:is(#vpMain,.vp-turning-leaf) .vp-ranking-register .vp-section-title h2 { font-size:20px; }
.vp-help-dot { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:16px; color:var(--muted); }
.vp-turning-leaf { position:absolute; z-index:3; top:62px; bottom:34px; left:0; right:0; overflow:hidden; pointer-events:none; background:var(--paper); transform-origin:left center; box-shadow:8px 0 16px #443e2926; border-radius:0 14px 14px 0; }
@media(min-width:761px) { .vp-task-grid,.vp-country-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:370px) {
  .vp-shell { width:calc(100% - 18px); }
  :is(#vpMain,.vp-turning-leaf) { padding:16px 12px; }
  .vp-topbar { margin:0 2px; }
  :is(#vpMain,.vp-turning-leaf) .vp-personal-standing { gap:10px; }
  :is(#vpMain,.vp-turning-leaf) .vp-personal-standing strong { font-size:30px; }
  :is(#vpMain,.vp-turning-leaf) .vp-personal-standing .vp-link { font-size:13px; }
  .vp-task-grid { gap:8px; }
  .vp-task-grid button { grid-template-columns:1fr; }
  .vp-task-grid img { display:none; }
  .vp-task-grid small { grid-column:auto; }
}
.vp-home-standing-note { margin-left:auto; color:#676a57; font-size:13px; text-align:right; }
:is(#vpMain,.vp-turning-leaf) { -webkit-overflow-scrolling:touch; }
@media(max-width:760px) { .vp-home-standing-note { font-size:13px; line-height:1.6; } }

/* Home is a single orientation page; detailed goals belong in the season chapter. */
:is(#vpMain,.vp-turning-leaf)[data-page=home] { padding:12px 20px; }
.vp-home-sheet { display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:100%; }
.vp-home-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; }
.vp-home-heading h1 { margin:0; font-size:20px; line-height:1.35; }
/* 玩法說明是首頁核心入口：放大並持續以光圈提示，讓新用戶先讀規則。 */
.vp-home-heading .vp-how-to-cta { flex:none; min-height:44px; min-width:64px; padding:6px 16px; border:1px solid var(--wine); border-radius:999px; background:var(--wine); color:#fbf6ee; font-size:17px; font-weight:700; letter-spacing:1px; animation:vp-how-to-pulse 1.6s ease-in-out infinite; }
@keyframes vp-how-to-pulse {
  0%,100% { box-shadow:0 0 0 0 #8d414866; background:var(--wine); }
  50% { box-shadow:0 0 0 7px #8d414800; background:#a8525a; }
}
@media(prefers-reduced-motion:reduce) { .vp-home-heading .vp-how-to-cta { animation:none; box-shadow:0 0 0 3px #8d414833; } }
.vp-home-sheet .vp-home-awards { padding:0; }
.vp-home-sheet .vp-awards-heading { min-height:44px; }
.vp-home-sheet .vp-awards-heading strong { font-size:16px; line-height:1.4; }
.vp-home-season { display:block; font-size:13px; line-height:1.4; color:var(--muted); }
.vp-home-sheet .vp-home-podium { margin:4px 0 6px; gap:6px; }
.vp-home-sheet .vp-award-step { min-height:148px; padding:8px 3px 28px; gap:4px; }
.vp-home-sheet .vp-award-step.place-1 { min-height:176px; }
.vp-home-sheet .vp-award-step.place-3 { min-height:122px; }
.vp-home-sheet .vp-award-prize { font-size:15px; font-weight:700; line-height:1.3; color:#264836; }
.vp-home-sheet .vp-award-number { font-size:13px; }
.vp-home-sheet .vp-award-number b { font-size:22px; }
.vp-home-standing { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:10px 0; border:1px solid var(--line); border-radius:6px; background:#fbf8f0; box-shadow:inset 0 1px #fff9; }
.vp-home-standing > div { display:grid; gap:2px; justify-items:center; text-align:center; }
.vp-home-standing > div + div { border-left:1px solid var(--line); }
.vp-home-standing > div > span { font-size:13px; color:var(--muted); }
.vp-home-standing strong { font:32px/1 var(--serif); color:var(--wine); }
.vp-home-standing small { font:13px var(--sans); margin-left:4px; }
.vp-home-standing .vp-home-standing-note { grid-column:1 / -1; margin:6px 0 0; text-align:center; }
.vp-home-routes { display:grid; gap:8px; margin:0; }
.vp-home-routes button { display:grid; grid-template-columns:24px minmax(0,1fr) 16px; gap:10px; align-items:center; min-height:56px; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); border-radius:3px; transition:background-color .15s,box-shadow .15s; }
.vp-home-routes button:last-child { border-bottom:0; }
.vp-home-routes strong { display:block; font-size:16px; line-height:1.4; }
.vp-home-routes small { display:block; font-size:13px; line-height:1.5; color:var(--muted); }
.vp-home-routes .vp-route-icon { color:var(--wine); }
.vp-home-routes button:active { background:#e0e5d5; box-shadow:inset 0 1px 3px #26483622; }
.vp-home-routes button:focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
.vp-home-offseason { font-size:15px; line-height:1.6; }
@media (max-height:700px) {
  .vp-shell { height:calc(100dvh - 16px); margin:8px auto; gap:6px; }
  .vp-topbar { flex-basis:44px; }
  .vp-footer { flex-basis:16px; }
  .vp-sidebar { height:48px; }
  .vp-sidebar nav button { height:48px; }
  .vp-turning-leaf { top:44px; bottom:22px; }
  :is(#vpMain,.vp-turning-leaf)[data-page=home] { padding:6px 12px; }
  .vp-home-sheet { gap:3px; }
  .vp-home-heading h1 { font-size:18px; }
  .vp-home-sheet .vp-award-step { min-height:68px; padding:5px 2px; gap:2px; }
  .vp-home-sheet .vp-award-step.place-1 { min-height:88px; }
  .vp-home-sheet .vp-award-step.place-3 { min-height:48px; }
  .vp-home-sheet .vp-award-number { position:static; font-size:12px; }
  .vp-home-sheet .vp-award-number b { font-size:16px; }
  .vp-home-standing { padding:4px 0; }
  .vp-home-standing > div { gap:0; }
  .vp-home-standing > div > span { line-height:1.2; }
  .vp-home-standing strong { font-size:24px; }
  .vp-home-routes button { min-height:48px; padding:4px; gap:8px; }
}

/* Reserve a true square. Status labels are outside the medal, never inside its circle. */
:is(#vpMain,.vp-turning-leaf) .vp-medallion { flex:none; min-width:66px; min-height:66px; aspect-ratio:1; }
.vp-medallion img,.vp-unlock-reveal img { aspect-ratio:1; object-fit:contain; flex:none; }
.vp-detail-medal:has(.vp-ink-seal) { width:fit-content; height:auto; max-width:100%; padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:8px; }
.vp-detail-medal:has(.vp-ink-seal)>img { display:block; width:110px; height:110px; min-width:110px; aspect-ratio:1; flex:none; padding:3px; border:3px double #b19b61; border-radius:50%; background:#2f4b32; box-shadow:2px 6px 10px #354a2729; }
.vp-detail-medal .vp-ink-seal { flex:none; }

/* 玩法說明：5 個難度的積分階梯。 */
.vp-how-to-tiers { margin:10px 0 0; }
.vp-how-to-tiers ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(48px,1fr)); gap:6px; align-items:end; margin:0; padding:0; list-style:none; }
.vp-how-to-tiers li { display:grid; justify-items:center; align-content:end; gap:3px; min-height:calc(78px + var(--tier) * 10px); padding:6px 2px 8px; border-radius:4px 4px 0 0; background:linear-gradient(#f4efe3,#e9e3d3); border-bottom:3px solid var(--tier-color,#b29153); }
.vp-how-to-tier-medal { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tier-color,#b29153); color:#fff; font-size:12px; font-weight:700; box-shadow:inset 0 -2px #0002,0 1px 2px #0003; }
.vp-how-to-tiers li:is(.level-platinum,.level-diamond) .vp-how-to-tier-medal { font-size:10px; }
.vp-how-to-tiers strong { font:20px/1 var(--serif); color:var(--wine); }
.vp-how-to-tiers small { font-size:11px; color:var(--muted); }
.vp-how-to-tiers figcaption { margin-top:6px; font-size:12px; color:var(--muted); }
.vp-how-to-tiers .level-bronze { --tier-color:#a8693d; }
.vp-how-to-tiers .level-silver { --tier-color:#8e979c; }
.vp-how-to-tiers .level-gold { --tier-color:#b8913f; }
.vp-how-to-tiers .level-platinum { --tier-color:#6f8b91; }
.vp-how-to-tiers .level-diamond { --tier-color:#4d7ea3; }