@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; }
    /* Dungeons (docs/DUNGEON_LEADERBOARD_PLAN.md section 6): the same plates, panels and colours. */
    .size-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 14px; }
    .size-switch button { font-size: 14px; min-height: 40px; min-width: 52px; }
    .size-switch button[aria-pressed="true"] { color: var(--level); box-shadow: inset 0 -1px #ccb068; }
    .time-col { width: 92px; }
    .deaths-col { width: 112px; }
    .date-col { width: 118px; }
    .clear-time { color: var(--level); font-variant-numeric: tabular-nums; }
    .party { display: flex; flex-wrap: wrap; gap: 6px; }
    .member-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 5px; border: 1px solid #86724777; background: #0000002b; color: #f5f0df; font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
    .member-chip:hover { text-decoration: underline; text-underline-offset: 4px; border-color: #c2a76a; }
    .member-chip img { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }
    .member-chip.absent { color: #aaa392; border-style: dashed; background: transparent; }
    .deathless-badge { display: inline-block; padding: 1px 7px; border: 1px solid #9fc28566; color: #c9e6ab; font-size: 13px; white-space: nowrap; }
    .death-count { color: #dcae98; font-size: 14px; white-space: nowrap; }
    .dungeon-table td { vertical-align: top; }
    .dungeon-table .rank, .dungeon-table .number { padding-top: 14px; }
    .dungeon-table td:nth-child(4), .dungeon-table td.date-cell { padding-top: 14px; color: #cfc6b3; font-size: 14px; }
    .section-heading { font-size: 12px; color: #c8ba94; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; margin: 24px 0 10px; }
    .recent-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 8px 0 2px; color: #cfc6b3; font-size: 14px; }
    .quiet { color: #bdb39c; font-size: 14px; margin: 0; }
    .recent-clears { list-style: none; margin: 0; padding: 0; }
    .recent-clear { padding: 10px 0; border-bottom: 1px solid #86724733; }
    .recent-clear:last-child { border-bottom: 0; }
    .profile-dungeons { margin: 0 0 8px; }
    .profile-dungeons .section-heading { margin-top: 4px; }
    .profile-dungeon h4 { font-weight: 400; font-size: 18px; color: #f1dfb5; margin: 0 0 4px; }
    .profile-dungeon .quiet { margin-bottom: 6px; }
    .profile-best { display: grid; grid-template-columns: 1fr 90px 90px; 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-best:hover { background: #fff1; }
    .profile-best .clear-time, .profile-best .number { text-align: right; }
    @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; }
      .size-switch button { flex: 1 1 0; min-width: 0; }
      #period-switch { flex-basis: 100%; }
      #period-switch button { flex: 1 1 0; }
      /* Each clear becomes a two-line card: rank, time and deaths, then the party at full width. */
      .dungeon-table, .dungeon-table tbody { display: block; }
      .dungeon-table colgroup, .dungeon-table .date-cell { display: none; }
      .dungeon-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
      .dungeon-table tr { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid #86724733; }
      .dungeon-table tr:last-child { border-bottom: 0; }
      .dungeon-table td, .dungeon-table .rank, .dungeon-table .number, .dungeon-table td:nth-child(4) { display: block; padding: 0; border: 0; }
      .dungeon-table td.number { text-align: left; }
      .dungeon-table td.number .mobile-secondary { display: inline; margin: 0 0 0 10px; color: #cfc6b3; }
      .dungeon-table td:nth-child(3) { grid-row: 2; grid-column: 1 / -1; }
      .dungeon-table td:nth-child(4) { grid-row: 1; grid-column: 3; text-align: right; }
      .member-chip { font-size: 14px; padding: 2px 7px 2px 4px; }
      .death-count, .deathless-badge { font-size: 12px; }
      .profile-best { grid-template-columns: 1fr 70px 70px; }
    }
    @media (pointer: coarse) { button, .player-button { min-height: 44px; } .player-button { display: inline-flex; align-items: center; } .profile-skill { min-height: 52px; } .member-chip { min-height: 36px; } .profile-best { min-height: 48px; } }