/* Shared Althea components. Keep the original logo and world artwork in style.css. */
:root {
  color-scheme: dark;
  --bg-danger: #321923;
  --color-danger: #ffb3c0;
  --border-danger: #713344;
  --bg-warning: #302719;
  --color-warning: #f3d395;
  --border-warning: #685232;
  --bg-info: #142738;
  --color-info: #b6e4ff;
  --border-info: #315b76;
  --bg-success: #142c27;
  --color-success: #a4e4c2;
  --border-success: #32614e;
}

/* Let the hero grow with its contents instead of overlapping the page below. */
.main { width: min(1480px, calc(100% - 48px)); }
.page_home .banner { height: auto; min-height: 600px; padding: 28px 0 36px; }
.siteFrame { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
.feedContainer { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; margin-top: 0; }
.siteNav { margin-top: 0; scrollbar-width: thin; scrollbar-color: #34516b transparent; }
.mainContentPanel > .leftPane { padding: 24px; }
.mainContentPanelHeader { gap: 12px; min-height: 58px; padding-inline: 22px; }
.mainContentPanelHeader .panelIcon { width: 24px; height: 24px; flex: none; color: #8bd9f5; }
.panelIcon, .stateIcon, .resourceCard > svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.panelContext { margin-left: auto; color: #a5b4c9; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.leftPane { font-size: 14px; line-height: 1.7; }
.leftPane h1 { margin: 0 0 20px; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.2; }
.leftPane h2 { margin: 26px 0 14px; font-size: 21px; line-height: 1.35; }
.leftPane h3 { line-height: 1.4; }
.leftPane p { margin: 0 0 16px; }
.leftPane > h1 { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.leftPane > h1::after { content: ""; display: block; width: 88px; height: 8px; margin-top: 14px; background: url('../img/ui/rune-divider.svg') center / contain no-repeat; }
.leftPane > h2:first-child { margin-top: 0; }
.leftPane > .well { padding: 22px; margin-bottom: 20px; }
.leftPane .pageIntro { padding: 24px; margin-bottom: 22px; border-radius: 12px; }
.leftPane .pageIntro h1 { margin-bottom: 12px; }
.leftPane .pageIntro p:last-child { margin-bottom: 0; color: #aebbd0; }
.leftPane .pageIntro .eyebrow { color: #98dbf4; font-size: 10px; }
.leftPane .body > p:last-child { margin-bottom: 0; }
.leftPane hr { margin-block: 24px; }
.leftPane blockquote { margin: 16px 0; padding: 16px 20px; border-left: 3px solid #428cad; border-radius: 0 8px 8px 0; background: rgba(47, 105, 139, .1); }
.leftPane pre { max-width: 100%; padding: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: #080e17; }
.leftPane :is(ul, ol):not([class]) { padding-left: 22px; }
.leftPane :is(ul, ol):not([class]) > li { margin-block: 5px; }

/* Forms retain their existing field names and submission behavior. */
.leftPane > form { padding: 20px; margin: 0 0 22px; }
.leftPane form > ul { margin: 0; padding: 0 !important; list-style: none; }
.leftPane form > ul > li { margin: 0 0 18px !important; }
.leftPane form > ul > li:last-child { margin-bottom: 0 !important; }
.leftPane form > ul > li > :is(input:not([type='submit']):not([type='checkbox']):not([type='radio']), select, textarea) { width: min(100%, 480px); }
.leftPane label { color: #dce7f3; font-size: 13px; font-weight: 600; }
.leftPane form > ul label, .stackForm > label { display: block; margin-bottom: 7px; }
.leftPane .stackForm > :is(input, select, textarea) { display: block; width: min(100%, 480px); margin-bottom: 18px; }
.leftPane .stackForm > [type='submit'] { width: auto; margin: 20px 0 0; }
.stackForm > br { display: none; }
.leftPane textarea { width: 100%; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #8292a8; opacity: 1; }
input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; min-height: 0; padding: 0; vertical-align: middle; accent-color: #51b9ed; box-shadow: none; }
input[type='file'] { width: 100%; padding: 8px; }
input::file-selector-button { padding: 8px 12px; margin-right: 12px; border: 1px solid var(--border-strong); border-radius: 5px; color: #eaf6ff; background: #1b344f; cursor: pointer; }
button, .btn, input[type='submit'] { gap: 8px; line-height: 1.35; transition: background-color .16s, border-color .16s, box-shadow .16s; }
button:hover, .btn:hover, input[type='submit']:hover { transform: none; }
:is(button, input, select, textarea):disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
:focus-visible { outline: 2px solid #82d8ff; outline-offset: 3px; }
.filterBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filterBar > :is(input:not([type='submit']), select) { flex: 1 1 140px; min-width: 0; margin: 0; }
.filterBar > [type='submit'] { margin: 0; }
.formHelp { display: block; margin: 8px 0 16px; color: #9eacc0; font-size: 12px; }
.formRules { padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,.15); }
.leftPane .formRules h2 { margin-top: 0; font-size: 18px; }
.leftPane .formRules p { font-size: 13px; margin-bottom: 10px; }
.page_register .leftPane > form > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.page_register .leftPane > form > ul > li { min-width: 0; margin: 0 !important; }
.page_register .leftPane > form > ul > li:nth-child(n+5) { grid-column: 1 / -1; }
.actionRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.navGroupLinks a[aria-current='page'] { color: #c4efff; border-radius: 6px; background: linear-gradient(90deg, rgba(38, 136, 182, .22), rgba(38,136,182,.035)); box-shadow: inset 2px 0 #6bd4f5; }
.navGroupLinks a[aria-current='page'] i { color: #6bd4f5; }
.navAccountEntry { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Wide data tables scroll inside their panel; the page itself stays in place. */
.leftPane > table, .tableScroll { margin: 0 0 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tableScroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #375a74 #0a101a; }
.tableScroll > table { width: 100%; margin: 0; border: 0; border-radius: 0; }
.tableScroll.isScrollable::before { content: 'Scroll to see all columns'; display: block; width: max-content; padding: 8px 12px; color: #a3c3d7; font-size: 11px; }
.leftPane th, .leftPane td { padding: 12px; font-size: 13px; line-height: 1.5; }
.leftPane :is(thead th, tr.yellow > th, tr.yellow > td) { padding-block: 13px; color: #c2d9ed; font-size: 10px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.leftPane tr:last-child > td { border-bottom: 0; }
.leftPane td form { margin: 0; }
.leftPane td :is(button, input[type='submit']) { font-size: 10px; padding: 9px 12px; }
.leftPane td h3 { margin: 5px 0; }
.leftPane td h1 { margin-bottom: 10px; }
.tableScroll #highscoresTable { min-width: 590px; }
.leftPane font[color='red'], .leftPane [style='color: red;'] { color: #ff9cae !important; }
.leftPane font[color='green'] { color: #8dddaf; }
.leftPane font[color='black'] { color: var(--font-color); }
.leftPane font[color='orange'] { color: #e6c477; }
.leftPane > font[color='red'], .leftPane > .alert-box { display: block; padding: 16px 18px; margin-bottom: 20px; border: 1px solid var(--border-danger); border-radius: 8px; background: var(--bg-danger); }
.leftPane > .alert-box { border-color: var(--border); background: var(--surface-raised); }
.leftPane .alert-danger { border-color: var(--border-danger); background: var(--bg-danger); color: var(--color-danger); }
.leftPane .alert-success { border-color: var(--border-success); background: var(--bg-success); color: var(--color-success); }
.leftPane .alert-warning { border-color: var(--border-warning); background: var(--bg-warning); color: var(--color-warning); }
.leftPane .alert-info { border-color: var(--border-info); background: var(--bg-info); color: var(--color-info); }

.leftPane .emptyState { margin-bottom: 20px; padding: 32px 24px; border-style: solid; background: radial-gradient(ellipse at top, rgba(32,101,149,.13), transparent 70%), #0b111c; }
.stateIcon { display: block; width: 64px; height: 64px; margin: 0 auto 18px; color: #79cbe9; }
.leftPane .emptyState h1, .leftPane .emptyState h2 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 27px; }
.leftPane .emptyState p { max-width: 480px; margin: 0 auto 18px; color: #aab8cc; }
.emptyState .actionRow { justify-content: center; }
.resourceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 20px; }
.resourceCard { display: flex; min-width: 0; flex-direction: column; padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, #131d2b, #0a111c); }
.resourceCard > svg { width: 34px; height: 34px; color: #78cfe9; margin-bottom: 18px; }
.leftPane .resourceCard h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 22px; }
.leftPane .resourceCard p { color: #a7b7ca; font-size: 13px; }
.resourceCard > a { margin-top: auto; font-size: 13px; font-weight: 600; }
.downloadPanelBody { grid-template-columns: 1fr; padding: 6px; gap: 24px; }
.downloadPrimary { min-width: 0; width: 100%; }
.downloadPanelInfo { align-items: flex-start; }
.leftPane .downloadPanelCopy h2 { margin-top: 0; }
.downloadBenefits { gap: 12px; font-size: 11px; }
.downloadUnavailable { padding: 18px; border: 1px solid var(--border-warning); border-radius: 10px; background: var(--bg-warning); }
.downloadUnavailable .downloadPlatform { color: var(--color-warning); }
.leftPane .downloadUnavailable p { margin: 5px 0 0; font-size: 13px; }
.achievementGrade { display: inline-flex; gap: 3px; color: #e6c477; font-size: 11px; }
.page_credits .contribution { flex-wrap: wrap; border-color: var(--border); border-radius: 10px; background: var(--surface); }
.page_guilds #guildsTable form { display: inline-block; margin: 4px; }
.page_guilds #btnspace { margin-left: 8px; }
.rightPane .header { margin: -7px -7px 10px; }
.bannerExploreLinks small { color: #9cacc0; font-size: 11px; }
.topPlayerIdentity small { color: #9caabe; font-size: 10px; }
footer.well { margin-top: 24px; padding: 22px; }
.footerLinks { gap: 12px 18px; }

@media (max-width: 1280px) {
  .feedContainer { grid-template-columns: minmax(0, 1fr); }
  .rightPane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .rightPane > * { min-width: 0; }
}
@media (max-width: 920px) {
  .main { width: calc(100% - 32px); }
  .siteFrame { display: block; }
  .siteNav { top: 8px; z-index: 100; margin-bottom: 18px; max-height: calc(100svh - 16px); overflow-y: auto; }
  .page_home .banner { min-height: 0; padding: 18px 0 30px; }
  .bannerExploreLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bannerExploreLinks a:nth-child(odd) { border-right: 1px solid var(--border); }
  .bannerExploreLinks a:nth-child(even) { border-right: 0; }
  .bannerExploreLinks a:nth-child(n+3) { border-top: 1px solid var(--border); }
  .mainContentPanel { scroll-margin-top: 90px; }
  footer.well { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .main { width: calc(100% - 24px); }
  .mainContentPanel > .leftPane { padding: 16px; overflow: visible; }
  .mainContentPanelHeader { padding-inline: 16px; }
  .panelContext { display: none; }
  .leftPane .pageIntro, .leftPane > .well, .leftPane > form { padding: 18px; }
  .leftPane h1 { font-size: 28px; }
  .leftPane .pageIntro h1 { font-size: 28px; }
  .page_register .leftPane > form > ul { grid-template-columns: 1fr; }
  .rightPane, .resourceGrid { grid-template-columns: 1fr; }
  .tableScroll > table, .leftPane form .tableScroll > table { display: table; max-width: none; overflow: visible; }
  .leftPane th, .leftPane td { padding: 10px; }
  .leftPane .actionRow > .btn { width: 100%; }
  .leftPane .filterBar { display: grid; grid-template-columns: 1fr; }
  .leftPane .filterBar > * { width: 100%; margin: 0; }
  .leftPane .stackForm > [type='submit'] { width: 100%; }
  .downloadPanelInfo { flex-direction: column; gap: 14px; }
  .heroLogin { margin-top: 16px; }
  .bannerExploreLinks small { font-size: 10px; }
  .bannerExploreLinks a:first-child > i { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}