:root { --info-header: 72px; }
html.info-document { scroll-padding-top: 0; }
body { font-size: 15px; line-height: 1.7; }
.info-backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(110deg, #100b10f5, #130d13eb 55%, #160b13f0), url('info-art/prison-yard.webp') center / cover; }
.store-header { position: sticky; top: 0; z-index: 6; background: #100b10ed; backdrop-filter: blur(14px); }
.header-inner, .ui-ready .ui-header, .info-shell { width: min(1120px, calc(100% - 48px)); }
.store-logo .logo-img { max-width: 100%; }
.info-document:not(.ui-ready) .header-inner { flex-wrap: wrap; gap: 8px 24px; padding-block: 8px; }
.info-document:not(.ui-ready) .header-nav { flex-wrap: wrap; gap: 5px 20px; }
.info-document:not(.ui-ready) .header-nav > a { display: flex; align-items: center; min-height: 44px; width: auto; }
.info-shell { position: relative; z-index: 2; margin: auto; }
.info-opening { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 42px; align-items: center; padding: 26px 0 35px; }
.info-season { margin: 0 0 6px; color: #d8b789; font: 500 12px/1.4 'Saira', sans-serif; }
.info-opening h1 { margin: 0 0 12px; font: 600 46px/1.12 'Saira', sans-serif; letter-spacing: -.04em; }
.info-intro { margin: 0; max-width: 62ch; font-size: 16px; color: #d2c6b8; }
.info-connection { position: relative; padding-left: 20px; border-left: 1px solid #a77a4e66; }
.connection-label { display: block; color: #cdbda6; font-size: 12px; margin-bottom: 4px; }
#serverAddress { display: block; color: #f0d8ae; font: 500 20px/1.5 'Saira', sans-serif; user-select: all; }
#copyAddress, .ui-ready #copyAddress { min-width: 114px; margin-top: 7px; font-size: 12px; padding-inline: 15px; }
.info-status { position: absolute; left: 20px; top: calc(100% + 4px); color: #dfceb9; font-size: 11px; }
.info-layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: start; }
.info-index { position: sticky; top: calc(var(--info-header) + 19px); }
.info-index summary { display: none !important; }
.info-index nav { display: flex; flex-direction: column; }
.info-index nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 0 10px 14px; color: #bcae9f; font: 500 13px/1.3 'Saira', sans-serif; }
.info-index nav a::before { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: #9b76553d; }
.info-index nav a[aria-current] { color: #f1d19b; }
.info-index nav a[aria-current]::before { width: 2px; background: #e8bd7c; box-shadow: 0 0 9px #cc954633; }
.info-index nav a:hover { color: #f4e3ca; }
.info-guide { min-width: 0; }
.info-section { position: relative; scroll-margin-top: calc(var(--info-header) + 20px); margin-bottom: 44px; }
.info-section h2 { margin: 0 0 17px; color: #f4e7d4; font: 600 29px/1.22 'Saira', sans-serif; letter-spacing: -.025em; }
.info-section h3 { margin: 0 0 7px; color: #e5c6a1; font: 550 19px/1.35 'Saira', sans-serif; }
.info-section p { max-width: 66ch; margin: 0 0 13px; color: #d6cabb; }
.info-section a:not([data-ui-button]), .info-footer a { color: #e9bf84; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #bf93515c; }
.info-section a:not([data-ui-button]):hover, .info-footer a:hover { text-decoration-color: #edc287; }
.info-section code { padding: 2px 6px; background: #71344420; color: #f1d4a4; border-bottom: 1px solid #b7895652; font: 13px/1.6 ui-monospace, monospace; white-space: nowrap; }
.info-start { display: grid; grid-template-columns: 1.06fr 1fr; gap: 28px; align-items: center; }
.start-copy p { font-size: 15px; }
.start-copy p:last-child { margin-bottom: 0; }
.officer-note strong { color: #e8c794; font-weight: 600; }
.info-photo { position: relative; margin: 0; min-width: 0; }
.info-photo > img { display: block; width: 100%; height: 252px; object-fit: cover; object-position: 50% 58%; border-radius: 3px 9px 3px 2px; }
.info-photo::before { content: ''; position: absolute; z-index: -1; inset: 15% -10px 9%; background: radial-gradient(ellipse at 65% 80%, #912c3a35, transparent 67%); pointer-events: none; }
.info-photo::after { content: ''; position: absolute; left: 5%; right: 9%; bottom: 31px; height: 1px; background: linear-gradient(90deg, #b4824b20, #ebc18499, #b4824b05); transform: rotate(-1deg); pointer-events: none; }
figcaption { margin-top: 9px; color: #bfb0a0; font-size: 12px; line-height: 1.5; }
.info-ranks { position: relative; padding-left: 21px; }
.rank-list { position: relative; }
.rank-list::before { content: ''; position: absolute; left: -19px; top: 13px; bottom: 17px; width: 5px; background: linear-gradient(90deg, #71304488, #bd6a7980 48%, #38162888); border-right: 1px solid #d3aa715c; border-radius: 4px; box-shadow: 0 0 16px #9d364015; }
.info-rank { min-height: 44px; }
.info-rank > summary { position: relative; display: flex; align-items: center; min-height: 44px; width: fit-content; padding: 10px 18px; color: #cebca7; list-style: none; cursor: pointer; font: 500 14px/1.3 'Saira', sans-serif; }
.info-rank > summary::-webkit-details-marker { display: none; }
.info-rank > summary::marker { content: ''; }
.ui-ready .info-rank > summary.ui-button { justify-content: flex-start; width: fit-content; min-width: 105px; padding-inline: 20px; }
.info-rank[open] > summary { color: #f4d394; }
.info-rank[open] > summary::before { content: ''; position: absolute; left: -19px; top: 16px; width: 5px; height: 13px; border-radius: 4px; background: #f2cd88; box-shadow: 0 0 12px #deb16b55; }
.info-rank:first-child { padding-bottom: 7px; margin-bottom: 9px; }
.info-rank:first-child > summary { color: #b6a898; }
.rank-copy { padding: 12px 0 18px 18px; max-width: 62ch; }
.info-section .rank-copy h3 { margin-bottom: 10px; color: #f1dfc1; font-size: 30px; }
.rank-copy p { line-height: 1.7; }
.rank-next { display: inline-flex; align-items: center; gap: 12px; color: #e9bf84; margin-top: 3px; }
.rank-photo { position: relative; margin: 17px 0 0; min-width: 0; }
.rank-photo img { display: block; width: 100%; height: 218px; object-fit: cover; object-position: 50% 65%; border-radius: 2px 3px 9px 3px; }
.rank-photo::after { content: ''; position: absolute; left: 0; bottom: 32px; height: 1px; width: 55%; background: linear-gradient(90deg, #e6bb7580, transparent); pointer-events: none; }
.info-section .rank-footnote { margin: 18px 0 0; font-size: 13px; color: #cbb79a; }
.money-notes { margin: 0; }
.money-notes > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 22px; padding: 14px 0; border-top: 1px solid #c49b6330; }
.money-notes dt { color: #e8c897; font: 600 22px/1.3 'Saira', sans-serif; }
.money-notes dd { margin: 0; max-width: 66ch; color: #d6cabb; }
.money-notes > div:first-child { border-image: linear-gradient(90deg, #d7aa6c, #c49b6330 18%) 1; }
.money-notes > div:last-child dt { color: #e9a49f; }
.ward-note { margin: 15px 0 0 108px; }
.ward-note h3 { margin-bottom: 7px; }
.ward-note p { margin-bottom: 9px; }
.info-section .related-link { margin: 17px 0 0 108px; font-size: 13px; }
.info-section .cell-intro { margin-bottom: 18px; }
.info-cells { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 27px; }
.cell-copy h3 { margin-top: 18px; font-size: 18px; }
.cell-copy h3:first-child { margin-top: 0; }
.cell-copy p { font-size: 14px; line-height: 1.75; }
.cell-copy p:last-child { margin-bottom: 0; }
.cell-figure { position: relative; min-width: 0; margin: 0; }
.cell-figure::before { content: ''; position: absolute; z-index: -1; inset: 18% 0 10%; background: radial-gradient(ellipse, #99324530, transparent 70%); pointer-events: none; }
.cell-figure img { display: block; width: 100%; height: auto; }
.cell-figure figcaption { padding-left: 18px; margin-top: 4px; }
.world-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.world-notes p { font-size: 15px; }
.outlands-note { padding-left: 25px; border-left: 1px solid #c49b6330; }
.zone-key { display: grid; gap: 14px; margin: 20px 0 5px; }
.zone-key > div { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: #cabbab; font-size: 12px; }
.zone-key strong { font-weight: 600; margin-right: 5px; }
.zone-safe { --zone: #e8bd7f; }
.zone-pvp { --zone: #d56a76; }
.zone-key strong { color: var(--zone); }
.hotbar { display: flex; gap: 3px; padding: 6px 5px; border-bottom: 1px solid var(--zone); }
.hotbar i { display: block; width: 14px; height: 14px; border: 1px solid var(--zone); background: linear-gradient(130deg, #b8667715, transparent); box-shadow: inset 1px 1px 0 #eeccb212; opacity: .8; }
.hotbar i:first-child { outline: 1px solid var(--zone); outline-offset: 1px; background: #f0c39615; opacity: 1; }
.gang-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #c49b6330; }
.gang-note p { margin-bottom: 0; }
.rule-lines { list-style: none; padding: 0; margin: 0; }
.rule-lines li { position: relative; padding: 8px 0 8px 19px; color: #ecddc7; }
.rule-lines li::before { content: ''; position: absolute; width: 4px; height: 4px; left: 0; top: 19px; background: #d7ab6b; border-radius: 50%; }
.help-copy { margin-top: 23px; padding-top: 20px; border-top: 1px solid #c49b6330; }
.info-detail { border: 0; padding: 0; }
.info-detail summary { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; padding: 11px 0; color: #e9bf84; cursor: pointer; list-style: none; font: 500 14px/1.4 'Saira', sans-serif; }
.info-detail summary::-webkit-details-marker { display: none; }
.info-detail summary::after { content: '+'; margin-left: 12px; }
.info-detail[open] summary::after { content: '−'; }
.ui-ready .info-detail summary.ui-button { max-width: 100%; white-space: normal; font-size: 13px; }
.ui-ready .info-detail summary.ui-button .ui-label::after { content: '+'; margin-left: 6px; }
.ui-ready .info-detail[open] summary.ui-button .ui-label::after { content: '−'; }
.info-detail > p { margin: 10px 0 0; font-size: 14px; }
.info-help-actions { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 18px; }
.info-help-actions a { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: #e9bf84; font-family: 'Saira', sans-serif; }
.info-footer { display: flex; flex-wrap: wrap; gap: 12px 25px; margin: 0 0 25px 172px; padding-top: 17px; border-top: 1px solid #c49b6330; font-size: 12px; color: #bda994; }
.info-footer > span { margin-right: auto; }
@media (min-width: 960px) {
  .info-ready .rank-copy { position: absolute; top: 3px; left: 193px; right: 0; padding: 6px 0 0; }
  .info-ready .rank-photo { position: absolute; bottom: 0; left: 214px; right: 0; margin: 0; }
  .info-ready .info-rank:first-child { border-bottom: 1px solid #c49b6330; max-width: 147px; }
}
@media (max-width: 1050px) {
  .info-start { grid-template-columns: 1fr 1fr; gap: 23px; align-items: start; }
  .info-photo > img { height: 275px; }
  .info-ready .rank-copy { left: 164px; }
  .info-ready .rank-photo { left: 185px; }
}
@media (max-width: 959px) {
  .info-layout { display: block; }
  .info-opening { gap: 30px; grid-template-columns: minmax(0, 1fr) 260px; }
  .info-index { position: static; margin-bottom: 22px; }
  .info-index summary { display: inline-flex !important; min-height: 44px; padding: 10px 17px; width: fit-content; list-style: none; color: #e9bf84; font-family: 'Saira', sans-serif; cursor: pointer; }
  .info-index summary::-webkit-details-marker { display: none; }
  .info-index summary .ui-label::after { content: '+'; margin-left: 7px; }
  .info-index details[open] summary .ui-label::after { content: '−'; }
  .info-index nav { flex-direction: row; flex-wrap: wrap; gap: 0 17px; margin-top: 9px; }
  .info-index nav a { min-width: 125px; }
  .info-ready .rank-copy, .info-ready .rank-photo { position: static; }
  .rank-copy { padding: 11px 0 20px 18px; }
  .rank-photo { max-width: 580px; margin-top: 20px !important; }
  .rank-photo img { height: auto; aspect-ratio: 2.15; }
  .info-footer { margin-left: 0; }
}
@media (max-width: 640px) {
  .info-document:not(.ui-ready) .store-header { position: relative; }
  .info-document:not(.ui-ready) .header-nav { flex-basis: 100%; }
  .header-inner, .ui-ready .ui-header, .info-shell { width: calc(100% - 36px); }
  .info-opening { grid-template-columns: 1fr; gap: 18px; padding: 23px 0 24px; }
  .info-opening h1 { font-size: 38px; }
  .info-intro { font-size: 15px; }
  .info-connection { padding-left: 14px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
  .connection-label { grid-column: 1 / -1; margin-bottom: 0; }
  #serverAddress { font-size: 18px; grid-column: 1 / -1; }
  #copyAddress, .ui-ready #copyAddress { grid-column: 1; justify-self: start; margin-top: 4px; }
  .info-status { left: 14px; }
  .info-section { margin-bottom: 34px; }
  .info-section h2 { font-size: 28px; margin-bottom: 15px; }
  .info-start { grid-template-columns: 1fr; gap: 19px; }
  .info-photo > img { height: auto; aspect-ratio: 1.8; }
  .info-photo { max-width: 500px; }
  .info-section .rank-copy h3 { font-size: 27px; }
  .ui-ready .info-rank > summary.ui-button { min-width: 112px; }
  .money-notes > div { grid-template-columns: 64px minmax(0, 1fr); gap: 15px; padding-block: 13px; }
  .money-notes dt { font-size: 21px; }
  .money-notes dd { font-size: 14px; }
  .ward-note, .info-section .related-link { margin-left: 0; }
  .ward-note { margin-top: 18px; }
  .info-cells { grid-template-columns: 1fr; gap: 17px; }
  .cell-figure { width: min(100%, 420px); }
  .cell-figure figcaption { padding-left: 13px; }
  .world-notes { grid-template-columns: 1fr; gap: 20px; }
  .outlands-note { border: 0; padding: 0; }
  .zone-key { margin-top: 16px; }
  .gang-note { margin-top: 18px; padding-top: 17px; }
  .info-footer { gap: 10px 20px; }
  .info-footer > span { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { html.info-document { scroll-behavior: auto; } }