/* Inherits the shared paper/ink window and mobile sheet. No extra HUD button. */
#panel.artifacts-wide { width: min(760px, calc(100vw - 24px)); }
.museum, .artifact-profile, .artifact-medals { color: var(--ink); overflow-wrap: anywhere; }
#panel :is(.museum, .artifact-profile) h3 { margin: var(--space-1) 0; }
.museum p, .artifact-medals p, .artifact-profile p { line-height: 1.5; margin: var(--space-2) 0; }
.museum-heading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.museum-heading small, .artifact-profile small { letter-spacing: .06em; color: var(--muted); font-size: var(--text-xs); }
.museum-emblem { font-size: 30px; }
#panel .museum-heading h3 { margin: 0; font-size: 18px; }
.museum-help { font-size: var(--text-sm); color: var(--muted); }
/* First screen (2026-11-09): header, one stats line and the how-to ⓘ, then the set grid; the rules live behind the ⓘ. */
#panel .museum .museum-stats { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: var(--space-1) 0; font-size: var(--text-sm); line-height: 1.4; color: var(--ink); }
.museum-stats b { white-space: nowrap; }
.museum-stats b + b::before { content: '· '; font-weight: 400; color: var(--muted); } /* the dot leads the next item, never dangles at a line end (DE wraps) */
#panel .museum .museum-how { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: var(--space-1) 0; line-height: 1.3; }
.museum-pity { margin-left: auto; }
.museum-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.museum-sets button { text-align: left; padding: var(--space-2); min-width: 0; }
.museum-sets small { display: block; }
.museum-set-heading { border-left: 3px solid var(--border); padding: var(--space-1) var(--space-3); margin: var(--space-4) 0; }
.museum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-2); }
#panel .artifact-card { --rarity: var(--rarity-common); border-top: 3px solid var(--rarity); text-align: center; display: flex; flex-direction: column; min-width: 0; }
#panel .artifact-card.fine { --rarity: var(--rarity-fine); }
#panel .artifact-card.rare { --rarity: var(--rarity-rare); }
#panel .artifact-card.legendary { --rarity: var(--rarity-legendary); }
#panel .artifact-card.missing { background: var(--surface-inset); }
.artifact-rarity { color: var(--rarity); font-weight: bold; }
.artifact-display { height: 66px; display: grid; place-items: center; font-size: 36px; background: radial-gradient(ellipse at center, var(--surface-raised), transparent 70%); margin: var(--space-2) 0; border-bottom: 2px solid var(--border-soft); }
.missing .artifact-display { color: var(--muted); background: none; }
#panel .artifact-card h5 { margin: var(--space-2) 0; }
.artifact-card p { font-size: var(--text-sm); flex: 1; }
.artifact-card button { width: 100%; }
.artifact-card button small, .museum-dig button small, .museum-goods small { display: block; }
.artifact-kept { padding: var(--space-2) 0; color: var(--muted); }
.museum-dig, .museum-goods, .museum-recent { margin-top: var(--space-4); }
.museum-goods > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.museum-recent ul { padding: 0; list-style: none; }
.museum-recent li { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0; }
.artifact-profile { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.artifact-profile > span { font-size: 40px; }
.artifact-profile select { width: 100%; min-width: 0; min-height: var(--touch-target); color: var(--ink); background: var(--surface-raised); font: inherit; }
/* Başarımlar: one calm graphite card per tier. The accent (turquoise on the modern theme, gold on the older ones) is only for what the player can act on:
   a ready tier and its claim button. Taken tiers are green and quiet, locked tiers muted with a progress bar. Prizes are gold chips (icon + number in one chip). */
.achievement-ladder { --ach-hot: var(--a-accent, var(--even)); --ach-hot-ink: var(--a-on-accent, var(--ink)); --ach-hot-text: var(--a-accent-text, var(--even)); }
.achievement-ladder .ach-summary { display: grid; gap: var(--space-1); padding: 6px 12px; margin: 4px 0; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.achievement-ladder .ach-summary-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.achievement-ladder .ach-summary-line b { font: 700 var(--text-lg)/1.3 var(--font-display, var(--font-body)); color: var(--ink); font-variant-numeric: tabular-nums; }
.achievement-ladder .ach-ready-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 12px; border-radius: 999px; background: var(--ach-hot); color: var(--ach-hot-ink); font: 700 var(--text-xs)/1.5 var(--font-body); white-space: nowrap; }
.achievement-ladder .ach-summary .ui-progress-track { height: 8px; margin: 0; }
.achievement-ladder .ach-summary .ui-progress-fill { background: var(--ach-hot); }
#panel .achievement-ladder > .ui-section-head { margin-top: 0; }
/* Başarımlar rows: ready first (button on the right), then one "next step" row per chain. */
#panel .ach-rows { list-style: none; margin: var(--space-2) 0; padding: 0; }
#panel .ach-row.row { padding: 6px 10px; margin-bottom: var(--space-1); gap: var(--space-2); flex-wrap: nowrap; }
#panel .ach-row .ico { font-size: 22px; }
#panel .ach-row .ach-name { margin: 0; font: 700 14.5px/1.3 var(--font-body); }
#panel .ach-row .ach-sub { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
#panel .ach-row b .ach-sub { display: inline; }
#panel .ach-row .ach-sub .ui-cost { display: inline; }
#panel .ach-row .ach-sub .ach-chip { margin: 2px 0 0 6px; }
#panel .ach-row.is-ready { border-color: var(--ach-hot); background: var(--surface-selected); }
#panel .ach-row button.primary { flex: none; min-height: 40px; max-width: 42%; }
#panel .ach-row .grow { min-width: 0; }
/* Phones: the prize / next-step line is information (what comes next, what it pays), body size like the rest of the window; the "2/5" counter inside the name (a <small> in <b>) stays a label */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) { #panel .ach-row .grow > .ach-sub, html #panel .artifact-profile p, html #panel .row.kp-title label small { font-size: var(--text-sm); } } /* + Profil ("html" outranks the later desktop rules of this file at equal weight): rank / era / stats line and the "Haritada" / "Meydan sohbeti" sub-lines */
/* Folded Sezon card at the top of Başarımlar. */
#panel details.ach-season { margin: var(--space-1) 0 var(--space-2); background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
#panel details.ach-season > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; list-style: none; color: var(--ink); font-size: var(--text-sm); font-weight: 700; cursor: var(--cursor-pointer, pointer); }
#panel details.ach-season > summary::-webkit-details-marker { display: none; }
#panel details.ach-season > summary .ach-season-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* DE: the summary shortens, the chevron stays on the row */
#panel details.ach-season .season-donate small { margin-left: auto; color: var(--muted); }
#panel details.ach-season > summary::after { content: '›'; margin-left: auto; padding-left: 8px; font-size: 22px; line-height: 1; }
#panel details.ach-season[open] > summary::after { transform: rotate(90deg); }
#panel details.ach-season > .mk-fold-body { padding: 0 12px 10px; }
/* Profil: card + the two title rows ("Haritada" / "Sohbette"), each label left, select right. */
#panel .row.kp-title select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 58%; min-height: var(--touch-target, 44px); color: var(--ink); background: var(--surface-raised); font: inherit; }
#panel .row.kp-title label b, #panel .row.kp-title label small { display: block; }
#panel .artifact-profile p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; }
/* Profil first screen (2026-11-09): one profile card, two compact title rows, then the ledger as a 5-column tile grid and the villagers folded. */
#panel .artifact-profile { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 8px 12px; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
#panel .artifact-profile > span { font-size: 30px; }
#panel .artifact-profile h3 { margin: 0; font-size: 16px; }
#panel .artifact-profile b { font-size: 14px; }
#panel .body > .ui-section-head.kp-head { margin: 8px 0 4px; }
#panel .row.kp-title { padding: 6px 10px; min-height: 0; gap: 8px; }
#panel .row.kp-title label small { font-size: 12px; line-height: 1.3; }
#panel .body .stats.kp-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px; }
#panel .kp-stats > div { padding: 4px 2px; }
#panel .kp-stats b { font-size: var(--text-md); }
#panel .kp-stats small { display: block; font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; }
#panel details.kp-fold { margin: 6px 0; background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
#panel details.kp-fold > summary { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; list-style: none; cursor: var(--cursor-pointer, pointer); color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
#panel details.kp-fold > summary::-webkit-details-marker { display: none; }
#panel details.kp-fold > summary::after { content: '›'; margin-left: auto; padding-left: 8px; font-size: 22px; line-height: 1; }
#panel details.kp-fold[open] > summary::after { transform: rotate(90deg); }
#panel details.kp-fold[open] > summary { margin-bottom: 0; }
#panel details.kp-fold > .row { margin-inline: 8px; }
#panel .achievement-ladder > .ui-section-head h4, html.iso #panel .achievement-ladder > .ui-section-head h4, html.iso.ui-a #panel .achievement-ladder > .ui-section-head h4 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0; font: 700 var(--text-lg)/1.3 var(--font-display, var(--font-body)); }
.artifact-medals .ach-chain { padding: var(--space-4) 0 0; border: 0; }
.ach-chain-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ach-chain-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 18px; line-height: 1; }
#panel .ach-chain-head h4, html.iso #panel .ach-chain-head h4, html.iso.ui-a #panel .ach-chain-head h4 { text-transform: none; letter-spacing: 0; flex: 1; min-width: 0; margin: 0; color: var(--ink); font: 700 var(--text-md)/1.3 var(--font-display, var(--font-body)); }
.ach-chain-count { flex: none; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.medal-tiers.ach-tiers { display: grid; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--space-2); }
.ach-tier { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.ach-seal { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--surface-disabled); color: var(--muted); font-size: 15px; line-height: 1; }
.ach-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
#panel .ach-name { margin: 0; color: var(--ink); font: 700 var(--text-sm)/1.35 var(--font-body); }
.ach-req { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.ach-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.ach-progress .ui-progress-track { flex: 1; min-width: 0; height: 6px; margin: 0; }
.ach-count { flex: none; color: var(--text); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ach-prizes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.ach-prizes-label { color: var(--muted); font-size: var(--text-xs); }
.ach-prizes .ui-cost { display: contents; }
.ach-chip, .ach-prizes .ui-cost-item { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; max-width: 100%; padding: 0 10px 0 6px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--even) 38%, transparent); background: color-mix(in srgb, var(--even) 12%, transparent); color: var(--ink); font-size: var(--text-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; }
.ach-prizes .ui-cost-item { white-space: nowrap; }
.ach-chip { padding: 2px 10px; line-height: 1.3; overflow-wrap: anywhere; } /* a long title (DE/FR) wraps inside its chip instead of spilling out of the card */
.ach-prizes .ui-res-icon { width: 16px; height: 16px; vertical-align: baseline; }
.ach-body .ui-badge--done { align-self: flex-start; margin-top: var(--space-1); }
.ach-action { grid-column: 1 / -1; align-self: end; display: flex; }
#panel .ach-action button { width: 100%; min-height: var(--touch-target); }
.ach-action .ui-badge { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; padding: 2px var(--space-2); }
.ach-tier.is-done { background: transparent; }
.ach-tier.is-done .ach-seal { background: var(--success-surface); border-color: var(--good); color: var(--good); font-weight: 700; }
.ach-tier.is-done .ach-name { color: var(--text); }
.ach-tier.is-ready { border-color: var(--ach-hot); background: var(--surface-selected); box-shadow: 0 0 0 1px var(--ach-hot); }
.ach-tier.is-ready .ach-seal { background: var(--ach-hot); border-color: var(--ach-hot); color: var(--ach-hot-ink); }
.ach-tier.is-locked .ach-name { color: var(--text); }
.ach-tier.is-locked .ach-progress .ui-progress-fill { background: var(--muted); }
.ach-finished { margin-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.ach-finished > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); color: var(--text); font-weight: 600; cursor: var(--cursor-pointer, pointer); border-radius: var(--radius-sm); }
.ach-finished > summary { list-style: none; }
.ach-finished > summary::-webkit-details-marker { display: none; }
.ach-finished > summary::before { content: '▸'; color: var(--muted); margin-right: var(--space-2); }
.ach-finished[open] > summary::before { content: '▾'; }
.ach-finished > summary .ach-chain-count { margin-left: auto; }
.ach-finished > summary:focus-visible { outline: 2px solid var(--focus, var(--ach-hot)); outline-offset: 2px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  #panel.artifacts-wide { width: auto; }
    .museum-heading { gap: var(--space-2); }
}