/* Shared controls, parchment surfaces and future-ready game UI primitives. */
.btn { min-height: 2.85rem; padding: .6rem 1.12rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: 2px; text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: .025em; line-height: 1.2; transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast), box-shadow var(--fast), color var(--fast); }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { cursor: not-allowed; opacity: .43; }
.btn-wide { width: 100%; min-height: 3.65rem; justify-content: space-between; padding-inline: 1.4rem; font-size: 1.1rem; }
.btn-symbol { width: 1.2rem; text-align: center; font-weight: 400; }
.btn-arrow { margin-left: auto; font-size: 1.2rem; font-weight: 400; }
.btn-gold { background: linear-gradient(155deg, #eed18a, var(--gold) 60%, #aa752e); border-color: #f3d990; box-shadow: 0 6px 20px rgba(5, 3, 1, .27), inset 0 1px rgba(255, 250, 218, .5); color: #2b1609; }
.btn-gold:hover:not(:disabled) { background: linear-gradient(155deg, #f7e3ac, #e8bc62 65%, #b78332); box-shadow: 0 8px 26px rgba(212, 168, 67, .22); }
.btn-outline { border-color: rgba(229, 196, 125, .63); background: rgba(21, 12, 8, .6); color: var(--parchment); }
.btn-outline:hover:not(:disabled) { background: rgba(139, 69, 19, .32); border-color: var(--gold-light); }
.btn-wood { background: linear-gradient(145deg, #8c4b26, #613119); border-color: #a77548; color: #fff1d2; box-shadow: inset 0 1px rgba(255, 239, 196, .15); }
.btn-wood:hover:not(:disabled) { background: #a2582a; }
.btn-stone { background: linear-gradient(155deg, #514c44, #312c28); border-color: #9b8d71; color: var(--parchment); box-shadow: inset 0 1px rgba(255, 250, 227, .15); }
.btn-stone:hover:not(:disabled) { background: linear-gradient(155deg, #625d52, #40382f); border-color: var(--gold); }
.text-button { min-height: 2.75rem; padding: .35rem .25rem; border: 0; background: none; color: var(--parchment); font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; transition: color var(--fast); }
.text-button:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: .35em; }
.icon-button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; font-size: 1.6rem; line-height: 1; transition: background var(--fast), transform var(--fast); }
.icon-button:hover { background: rgba(139, 69, 19, .13); transform: rotate(90deg); }

.parchment-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: min(90dvh, 50rem); padding: clamp(1.35rem, 4vw, 2.15rem); overflow: auto; border: 1px solid #a87b3b; outline: 5px solid rgba(25, 13, 5, .83); box-shadow: 0 30px 100px #070301, inset 0 0 0 5px rgba(116, 64, 25, .12); color-scheme: light; color: #28160f; background: var(--parchment); background-image: radial-gradient(ellipse at 15% 5%, rgba(255, 255, 255, .72), transparent 64%), repeating-linear-gradient(35deg, transparent 0 13px, rgba(112, 68, 29, .026) 14px 15px), radial-gradient(ellipse at 88% 89%, rgba(137, 75, 31, .18), transparent 63%); }
.parchment-dialog::backdrop { background: rgba(8, 5, 3, .81); backdrop-filter: blur(6px); }
.parchment-dialog h2 { margin: .3rem 0 .4rem; font-family: var(--font-display); font-size: clamp(1.85rem, 6vw, 2.55rem); font-weight: 400; line-height: 1.12; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #774c21; }
.dialog-close { border-color: rgba(88, 51, 25, .36); }
.dialog-intro { margin-bottom: 1.5rem; color: #574030; font-size: 1.04rem; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.dialog-actions .btn-outline { border-color: #a87844; background: transparent; color: var(--leather); }
.dialog-actions .btn-outline:hover { background: rgba(139, 69, 19, .1); }
.dialog-status { min-height: 1.1rem; margin: 1.1rem 0 0; color: #67492d; font-size: .92rem; }
.warning-note { margin: 1rem 0 0; padding: .75rem 1rem; border-left: 3px solid #8f351c; background: rgba(151, 80, 33, .13); color: #572716; font-weight: 700; }
.slot-list { display: grid; gap: .68rem; }
.slot-card { width: 100%; min-height: 5.35rem; padding: .75rem .95rem; display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(130, 88, 41, .46); background: rgba(255, 249, 224, .52); color: #382418; text-align: left; transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.slot-card:hover:not(:disabled), .slot-card:focus-visible { border-color: #8b4513; background: rgba(255, 251, 235, .96); transform: translateX(3px); }
.slot-card:disabled { opacity: .5; cursor: not-allowed; }
.slot-number { flex: 0 0 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid #ae8550; border-radius: 50%; font-family: var(--font-display); font-size: 1.3rem; }
.slot-details { min-width: 0; display: grid; gap: .1rem; }
.slot-details strong { font-size: 1.13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-details small { color: #69513b; font-size: .85rem; }
.slot-chevron { margin-left: auto; color: #77552b; font-size: 1.4rem; }
.setting-list { border-top: 1px solid rgba(94, 54, 24, .25); }
.setting-row { min-height: 4.4rem; padding: .75rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid rgba(94, 54, 24, .25); cursor: pointer; }
.setting-row span { display: grid; gap: .06rem; }
.setting-row strong { font-size: 1.05rem; }
.setting-row small { color: #664d37; font-size: .87rem; line-height: 1.2; }
.setting-row input[type='checkbox'] { width: 1.25rem; height: 1.25rem; margin: .35rem; flex: 0 0 auto; accent-color: var(--wood); }
.setting-row select { max-width: 8rem; padding: .4rem .55rem; border: 1px solid #9f733e; background: #fff6e0; color: #27160f; }
.credit-entry { padding: .7rem 0; display: grid; gap: .05rem; border-top: 1px solid rgba(94, 54, 24, .22); }
.credit-entry > span { color: #835e30; font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.credit-entry strong { font-size: 1.1rem; }
.credit-entry small, .credits-footnote { color: #604833; font-size: .9rem; }
.credits-footnote { margin: 1rem 0 0; }

/* Reusable primitives for the full HUD and inventory in later sections. */
.tooltip { max-width: 19rem; padding: .7rem 1rem; border: 1px solid var(--gold); background: var(--leather); color: var(--parchment); box-shadow: var(--shadow); font-size: .93rem; }
.progress-bar { height: .6rem; overflow: hidden; border: 1px solid rgba(212, 168, 67, .5); background: #160c09; }
.progress-bar > .fill { width: 0; height: 100%; display: block; background: linear-gradient(90deg, #d4a843, #f1d384); transition: width var(--medium) var(--ease); }
.progress-bar.health > .fill { background: linear-gradient(90deg, var(--health-critical-bottom, #711c20), var(--health-critical-top, #da5145)); }
.progress-bar.mana > .fill { background: linear-gradient(90deg, #193462, #60a5e0); }
.progress-bar.experience > .fill { background: linear-gradient(90deg, #927120, var(--gold-light)); }
.inventory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.inventory-slot { min-width: 0; aspect-ratio: 1; border: 1px solid var(--line); background: rgba(44, 24, 16, .81); }

@media (max-width: 550px) {
  .parchment-dialog { width: calc(100vw - 1.25rem); padding: 1.25rem; }
  .dialog-actions { justify-content: stretch; }
  .dialog-actions .btn { flex: 1 1 auto; }
  .slot-card { min-height: 4.8rem; }
}