/* Info pages (FAQ, server info) use the same stone, bronze and gold palette as the shop. */
.info-panel {
    box-sizing: border-box;
    color: #e3dcc8;
    font: 12px/1.6 Verdana, Arial, sans-serif;
    padding: 18px;
    background: repeating-linear-gradient(135deg, #ffffff02 0, #ffffff02 1px, transparent 1px, transparent 5px), #20292a;
    border: 3px ridge #7c7762;
    box-shadow: inset 0 0 22px #080d0d, 0 2px 7px #0008;
    text-shadow: 0 1px 1px #000;
}
.info-panel * { box-sizing: border-box; }
.info-panel a { color: #e8c77e; }
.info-panel a:hover { color: #ffe29a; }
.info-panel [hidden] { display: none !important; }
.info-panel :focus-visible { outline: 2px solid #ffe19b; outline-offset: 3px; }
.info-panel kbd { font: 11px/1.4 Consolas, Menlo, monospace; padding: 1px 6px; background: #0c1312; border: 1px solid #5c5540; color: #f2cc61; white-space: nowrap; }
.info-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.info-panel .info-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0 18px; border-bottom: 1px solid #746044; }
.info-panel .info-eyebrow { color: #c1aa74; font-size: 11px; letter-spacing: 4px; }
.info-panel h1 { font: bold 32px/1.15 Georgia, serif; margin: 5px 0 6px; color: #edce85; text-align: left; text-shadow: 0 2px 2px #000; }
.info-panel .info-caption { margin: 0; color: #b9b5a5; font-size: 11px; }
.info-panel .info-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: bold 18px/1.4 Georgia, serif; color: #e2c582; margin: 22px 0 10px; }
.info-panel .info-section-title span { font: 10px Verdana, sans-serif; color: #b9b5a5; }

.info-panel .info-button { display: inline-block; border: 2px ridge #c7ac63; border-radius: 2px; padding: 8px 12px; color: #ffe6a7; background: linear-gradient(#685636, #3c301c); font: bold 11px/1.3 Verdana, sans-serif; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px #ffffff18, 0 2px 3px #0006; }
.info-panel .info-button:hover { color: #ffe6a7; background: linear-gradient(#816940, #514023); }
.info-panel .info-button.is-secondary { border-color: #746d55; color: #cfc5ad; background: linear-gradient(#3e4641, #252d2c); }
.info-panel .info-button.is-secondary:hover { color: #ffe29a; border-color: #b19c6c; }

.info-panel .info-chip { font: bold 11px/1.4 Verdana, sans-serif; color: #cfc5ad; background: linear-gradient(#3e4641, #252d2c); border: 2px ridge #746d55; border-radius: 2px; padding: 6px 10px; cursor: pointer; }
.info-panel .info-chip:hover { color: #ffe29a; border-color: #b19c6c; }
.info-panel .info-chip[aria-pressed="true"] { color: #ffe29a; border-color: #c8a45c; background: linear-gradient(#655638, #403520); }

.info-panel .info-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid; font-weight: bold; font-size: 11px; letter-spacing: 1px; }
.info-panel .info-status.is-online { border-color: #3f7a45; background: #16301b; color: #9fe0a4; }
.info-panel .info-status.is-offline { border-color: #7a3a36; background: #301715; color: #e8a29d; }
.info-panel .info-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

.info-panel .info-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid #857248; background: #111b18; box-shadow: inset 0 0 9px #0008; }
.info-panel .info-cta strong { display: block; color: #edce85; font: bold 15px/1.4 Georgia, serif; }
.info-panel .info-cta small { color: #b9b5a5; font-size: 11px; }
.info-panel .info-footer { border-top: 1px solid #625940; margin: 20px 0 0; padding-top: 14px; color: #b9b5a5; text-align: center; font-size: 11px; }

/* FAQ */
.faq .faq-tools { margin: 16px 0 4px; }
.faq .faq-search input { width: 100%; height: auto; margin: 0 0 10px; padding: 10px 12px; background: #111b18; border: 1px solid #857248; border-radius: 0; color: #e3dcc8; font: 12px Verdana, sans-serif; }
.faq .faq-search input::placeholder { color: #8d8a7a; }
.faq .faq-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.faq .faq-item { border: 2px ridge #6a6550; background: linear-gradient(135deg, #313a36, #222a29 70%); box-shadow: inset 0 0 16px #0005; margin-bottom: 6px; scroll-margin-top: 20px; }
.faq .faq-item:hover { border-color: #a68d53; }
.faq .faq-item[open] { border-color: #c2a25c; }
.faq .faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; color: #e6d7ab; font-size: 13px; cursor: pointer; }
.faq .faq-item summary::-webkit-details-marker { display: none; }
.faq .faq-item summary::after { content: '+'; flex-shrink: 0; color: #c7ac63; font-weight: bold; font-size: 15px; }
.faq .faq-item[open] summary::after { content: '\2212'; }
.faq .faq-answer { margin: 0 10px 10px; padding: 12px 14px; background: #111b18; border: 1px solid #4f4e37; color: #d9d6c4; line-height: 1.8; overflow-wrap: anywhere; }
.faq .faq-answer ol { margin: 0; padding-left: 20px; }
.faq .faq-answer p { margin: 8px 0 0; }
.faq .faq-answer b { color: #ecdcae; }
.faq .faq-answer .npc { color: #9fd3c7; font-weight: bold; }
.faq .faq-answer .warn { color: #e8a29d; }
.faq .faq-empty { margin: 18px 0 0; padding: 14px; text-align: center; color: #b9b5a5; border: 1px dashed #5c5540; }

/* Server info */
.server-info .server-connect { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 18px 0; padding: 14px; background: #111b18; border: 1px solid #857248; box-shadow: inset 0 0 9px #0008; }
.server-info .server-connect small { display: block; color: #b9b5a5; font-size: 10px; letter-spacing: 2px; }
.server-info .server-ip { font: bold 20px/1.3 Consolas, Menlo, monospace; color: #f2cc61; overflow-wrap: anywhere; }
.server-info .server-port { color: #8d8a7a; font-size: 13px; }
.server-info .server-connect-actions { display: flex; gap: 6px; }
.server-info .server-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.server-info .server-tile { padding: 12px 10px; border: 2px ridge #6a6550; background: linear-gradient(135deg, #313a36, #222a29 70%); box-shadow: inset 0 0 16px #0005; text-align: center; overflow-wrap: anywhere; }
.server-info .server-tile small { display: block; color: #b9b5a5; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.server-info .server-tile strong { display: block; margin-top: 3px; color: #f2cc61; font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.server-info .server-tile strong a { color: inherit; text-decoration: none; }
.server-info .server-tile strong a:hover { text-decoration: underline; }
.server-info .server-tile span, .server-info .server-tile > a { display: block; color: #c7b17b; font-size: 11px; }
.server-info .server-facts { display: grid; grid-template-columns: 150px 1fr; margin: 0; border: 1px solid #4f4e37; }
.server-info .server-facts dt, .server-info .server-facts dd { margin: 0; padding: 9px 12px; border-bottom: 1px solid #34382f; }
.server-info .server-facts dt:last-of-type, .server-info .server-facts dd:last-of-type { border-bottom: 0; }
.server-info .server-facts dt { color: #c1aa74; background: #1a2322; }
.server-info .server-facts dd { color: #d9d6c4; }

/* Events */
.events-page .events-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px; background: #111b18; border: 1px solid #857248; box-shadow: inset 0 0 9px #0008; }
.events-page .events-next small { display: block; color: #b9b5a5; font-size: 10px; letter-spacing: 2px; }
.events-page .events-next strong { display: block; color: #edce85; font: bold 18px/1.4 Georgia, serif; }
.events-page .events-next strong span { color: #8d8a7a; font: 11px Verdana, sans-serif; }
.events-page .events-next-timer { padding: 7px 12px; border: 2px ridge #6a6550; background: #0c1312; color: #f2cc61; font: bold 14px/1.3 Consolas, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.events-page .events-list { display: grid; gap: 8px; }
.events-page .events-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 12px; border: 2px ridge #6a6550; background: linear-gradient(135deg, #313a36, #222a29 70%); box-shadow: inset 0 0 16px #0005; }
.events-page .events-card:hover { border-color: #a68d53; }
.events-page .events-card-image { aspect-ratio: 1; border: 1px solid #5c5540; background: #0c1312; box-shadow: 0 2px 5px #0008; overflow: hidden; }
.events-page .events-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.events-page .events-card h3 { margin: 0 0 6px; color: #edce85; font: bold 16px/1.3 Georgia, serif; }
.events-page .events-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.events-page .events-tags li { padding: 1px 7px; border: 1px solid #5c5540; background: #1a2322; color: #c7b17b; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.events-page .events-card p { margin: 0; color: #d9d6c4; }
.events-page .events-card .events-reward { margin-top: 8px; padding: 6px 10px; border-left: 3px solid #c7ac63; background: #111b18; }
.events-page .events-reward b { color: #f2cc61; }

@media (max-width: 600px) {
    .info-panel { max-width: calc(100vw - 60px); padding: 12px; }
    .events-page .events-next { grid-template-columns: minmax(0, 1fr); }
    .events-page .events-card { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
    .info-panel h1 { font-size: 25px; }
    .info-panel .info-header, .info-panel .info-cta { flex-wrap: wrap; }
    .server-info .server-connect { grid-template-columns: minmax(0, 1fr); }
    .server-info .server-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-info .server-facts { grid-template-columns: minmax(0, 1fr); }
    .server-info .server-facts dt { border-bottom: 0; padding-bottom: 2px; }
}