@font-face { font-family: Qaz; src: url('../assets/fonts/Qaz-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
    :root { color-scheme: dark; --ink: #101512; --text: #f7f4e9; --muted: #c1bcae; --gold: #e6c788; --level: #ffc34d; --xp: #cbb0f6; --line: #78694c; font-family: Qaz, Georgia, serif; font-synthesis: none; background: var(--ink); color: var(--text); }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    body { margin: 0; }
    button, input, select { font: inherit; color: inherit; }
    button, select { cursor: pointer; }
    a { color: var(--gold); }
    button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #fff0ba; outline-offset: 4px; }
    button { touch-action: manipulation; }
    button:disabled { cursor: default; opacity: .45; }
    .stage { min-height: calc(100vh - 78px); position: relative; isolation: isolate; padding: 30px 28px 24px; }
    .stage::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(#09110ed9, #101611f0 75%), url('../assets/gameplay-poster.webp') center 35% / cover; }
    .stage::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: repeating-conic-gradient(#0000001c 0% 25%, transparent 0% 50%) 0 0 / 4px 4px; }
    .site-heading { max-width: 1056px; margin: 0 auto 22px; display: flex; align-items: center; gap: 28px; }
    .site-heading img { width: 134px; height: auto; }
    .site-heading h1 { font-weight: 400; color: #f6ebcb; font-size: 40px; margin: 0; }
    .home-link { margin-left: auto; font-size: 15px; text-underline-offset: 5px; white-space: nowrap; }
    /* The frame has a transparent inner edge. Paint behind it, as on /supporters/. */
    .scores-window { position: relative; max-width: 1056px; margin: 0 auto; border: 24px solid transparent; border-image: url('../assets/highscores/panel-frame.png') 32 32 31 32 / 24px / 0 repeat; background: #302e22 url('../assets/highscores/panel-background.png') repeat; background-clip: border-box; box-shadow: 0 18px 60px #0008; }
    .window-body { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 22px; }
    .rail { border-right: 1px solid #7b715049; padding: 4px 18px 0 0; }
    .plate { border: 8px solid transparent; border-image: url('../assets/highscores/button.png') 8 7 7 8 fill / 8px / 0 repeat; background: transparent; color: #faf6e9; min-height: 36px; padding: 3px 8px; text-align: center; }
    .plate:hover:not(:disabled) { filter: brightness(1.18); }
    .plate:active:not(:disabled) { filter: brightness(.85); }
    .category { width: 100%; display: flex; align-items: center; text-align: left; gap: 8px; margin-bottom: 6px; font-size: 16px; }
    .category[aria-pressed="true"] { color: var(--level); outline: 1px solid #dcc27b; outline-offset: -3px; }
    .category-mark { display: inline-flex; width: 23px; justify-content: center; font-size: 20px; color: #c6bea7; }
    .category-mark img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
    .skill-rail { margin-top: 16px; }
    .skill-rail label { display: block; font-size: 13px; color: #d6caae; margin-bottom: 8px; }
    .skill-rail select { width: 100%; background: #24251d; border: 1px solid #8b7850; border-radius: 0; padding: 8px 4px; font-size: 14px; }
    .results { min-width: 0; }
    .board-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 2px 0 6px; }
    .board-heading h2 { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 28px; margin: 0; color: #f1dfb5; }
    .board-heading img { width: 32px; height: 32px; image-rendering: pixelated; }
    .era { white-space: nowrap; color: #c7b98f; font-size: 13px; }
    .board-rule { color: #cec4ae; font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
    .search-row { display: flex; align-items: end; gap: 10px; margin-bottom: 16px; }
    .search-field { flex: 1; min-width: 0; }
    .search-field label { display: block; font-size: 12px; color: #cfc6b3; margin-bottom: 5px; }
    .search-field input { width: 100%; border: 8px solid transparent; border-image: url('../assets/highscores/input.png') 8 fill / 8px / 0 repeat; background: #1b211b; padding: 3px 8px; min-height: 40px; font-size: 16px; border-radius: 0; }
    .search-field input::placeholder { color: #c6c0afa6; }
    .order-switch { display: flex; gap: 4px; flex-wrap: wrap; }
    .order-switch button { font-size: 14px; min-height: 40px; }
    .order-switch button[aria-pressed="true"] { color: var(--level); box-shadow: inset 0 -1px #ccb068; }
    .table-panel { border: 8px solid transparent; border-image: url('../assets/highscores/inner-panel.png') 7 6 fill / 8px / 0 repeat; min-height: 390px; padding: 4px 8px; }
    table { border-collapse: collapse; width: 100%; table-layout: auto; font-size: 16px; }
    th { text-align: left; color: #bfb49a; font-weight: 400; font-size: 13px; padding: 10px 8px 11px; border-bottom: 1px solid #81704b88; }
    td { padding: 11px 8px; border-bottom: 1px solid #86724733; vertical-align: middle; }
    tr:last-child td { border-bottom: 0; }
    tbody tr:hover { background: #d4c3900a; }
    .rank-col { width: 55px; }
    .score-col { width: 112px; }
    .secondary-col { width: 144px; }
    .number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .rank { color: #b8ad96; font-variant-numeric: tabular-nums; }
    .rank-1 { color: #ffd576; }
    .rank-2 { color: #d0dce5; }
    .rank-3 { color: #dca87d; }
    .player-button { padding: 0; border: 0; background: transparent; text-align: left; color: #f5f0df; max-width: 100%; overflow-wrap: anywhere; text-underline-offset: 4px; }
    .player-button:hover { text-decoration: underline; }
    .own-row { background: #afaa5420; box-shadow: inset 3px 0 #bda764; }
    .you-tag { font-size: 12px; color: #d7ca9a; margin-left: 8px; }
    .score-level, .score-gold { color: var(--level); }
    .score-xp { color: var(--xp); }
    .score-quests { color: #d9e1ad; }
    .mobile-secondary { display: none; }
    .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: #c6bca5; font-size: 13px; }
    .pager-controls { display: flex; align-items: center; gap: 10px; }
    .pager-controls button { min-width: 38px; }
    .freshness { border-top: 1px solid #82725255; margin-top: 16px; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; color: #beb6a4; font-size: 12px; }
    .freshness details { max-width: 430px; }
    .freshness summary { cursor: pointer; text-underline-offset: 3px; text-decoration: underline; }
    .freshness p { margin: 8px 0 0; line-height: 1.5; }
    .state-message { padding: 54px 20px; text-align: center; line-height: 1.6; }
    .state-message h3 { font-size: 24px; color: #f0ddb2; font-weight: 400; margin: 0 0 12px; }
    .state-message p { color: #c6bda7; max-width: 300px; margin: 0 auto 18px; }
    .stale-notice { color: #efcf8c; padding: 10px 0; font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .back-button { font-size: 14px; margin: 0 0 12px; }
    .profile-name { font-size: 32px; font-weight: 400; color: #f1dfb5; margin: 0; overflow-wrap: anywhere; }
    .profile-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 0 0 20px; }
    .profile-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid #82725255; font-size: 14px; }
    .profile-total dt { color: #c8bda7; }
    .profile-total dd { margin: 0; text-align: right; color: var(--level); }
    .profile-total small { display: block; color: #bdb39c; font-size: 12px; margin-top: 4px; }
    .profile-skills { max-height: 370px; overflow-y: auto; scrollbar-color: #80714e #282b20; }
    .profile-skill { display: grid; grid-template-columns: 32px 1fr 44px 116px; gap: 10px; align-items: center; width: 100%; background: transparent; border: 0; border-bottom: 1px solid #82725244; padding: 8px; font-size: 16px; text-align: left; }
    .profile-skill:hover { background: #fff1; }
    .profile-skill img { width: 32px; height: 32px; image-rendering: pixelated; }
    .profile-skills h3 { font-size: 12px; color: #c8ba94; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; margin: 14px 8px 6px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .stage { min-height: 100vh; }
    .table-panel { overflow-x: auto; }
    .player-button { text-decoration: none; }
    .score-col { width: 140px; }
    .score-feats { color: #e6c788; }
    .profile-name { margin-bottom: 16px; }
    .profile-skills { max-height: none; overflow: visible; }
    .update-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; color: #efcf8c; font-size: 14px; }
    .update-notice .plate, .stale-notice .plate { font-size: 14px; }
    .site-footer, .no-script { max-width: 1056px; margin: 20px auto 0; color: #aaa995; font-size: 13px; text-align: center; }
    .skip-link { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 12px; background: #131914; transform: translateY(-180%); }
    .skip-link:focus { transform: none; }
    @media (max-width: 660px) {
      .stage { padding: 20px 12px; }
      .site-heading { gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
      .site-heading img { width: 84px; }
      .site-heading h1 { font-size: 28px; }
      .home-link { margin-left: auto; font-size: 14px; }
      .scores-window { border-width: 12px; border-image-width: 12px; }
      .window-body { display: block; }
      .rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; border: 0; }
      .category-mark { display: none; }
      .category { flex: 1 1 auto; width: auto; margin: 0; font-size: 15px; padding: 4px 0; justify-content: center; }
      .skill-rail { flex-basis: 100%; margin-top: 8px; }
      .skill-rail select { font-size: 16px; }
      .search-row { flex-wrap: wrap; }
      .search-field, .order-switch { flex-basis: 100%; }
      .board-heading h2 { font-size: 24px; }
      .table-panel { padding: 2px; }
      .rank-col { width: 34px; }
      .score-col { width: 110px; }
      .secondary-col, .secondary-cell { display: none; }
      .mobile-secondary { display: block; font-size: 12px; margin-top: 4px; }
      th, td { padding: 11px 4px; }
      .profile-totals { grid-template-columns: 1fr; }
      .profile-skill { grid-template-columns: 26px 1fr 36px; gap: 8px; }
      .profile-skill img { width: 26px; height: 26px; }
      .profile-skill .score-xp { grid-column: 2 / -1; font-size: 13px; }
      .freshness { line-height: 1.6; }
    }
    @media (pointer: coarse) { button, .player-button { min-height: 44px; } .player-button { display: inline-flex; align-items: center; } .profile-skill { min-height: 52px; } }