:root { --accent: #71e3c0; --admin-accent: #d5a84e; --background: #0c141b; }
:root {
  color-scheme: dark;
  --accent: #bd963f;
  --accent-strong: #dfc16d;
  --background: #0c141b;
  --text: #e9f0f1;
  --muted: #a9b8c3;
  --border: #293740;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.site-header {
  max-width: 1200px;
  margin: auto;
  padding: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: .14em; }
nav { display: flex; gap: 24px; color: var(--muted); }
nav a:hover { color: var(--accent); }
main { max-width: 1200px; margin: auto; padding: 28px; }
.hero { padding: 70px 0 90px; max-width: 860px; }
.eyebrow { color: var(--accent); letter-spacing: .2em; font-size: .8rem; font-weight: 700; }
h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.08; letter-spacing: -.045em; margin: 22px 0; }
.intro { color: var(--muted); font-size: 1.15rem; max-width: 680px; }
.notice { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 30px; }
.status-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--border); padding: 36px 0; }
.index { color: var(--accent); font-size: .85rem; }
h2 { font-size: 1.3rem; }
article p { color: var(--muted); }
footer { max-width: 1200px; margin: auto; padding: 28px; color: var(--muted); border-top: 1px solid var(--border); }
@media (max-width: 700px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  nav { flex-wrap: wrap; }
  .hero { padding: 42px 0 58px; }
  .details { grid-template-columns: 1fr; gap: 16px; }
}

[hidden] { display: none !important; }
.account-panel { border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 42px; }
.account-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.action { display: inline-flex; padding: 12px 20px; border: 1px solid rgba(229,199,115,.72); border-radius: 8px; background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #241707; font: inherit; font-weight: 650; cursor: pointer; box-shadow: 0 4px 14px rgba(194,151,50,.14); }
.action.secondary { background: transparent; color: var(--text); border-color: var(--border); }
.action:hover { filter: brightness(1.12); }
.action:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.rules-content { white-space: pre-wrap; overflow-wrap: anywhere; margin: 24px 0; }
#rules-consent-label { display: block; margin: 18px 0; }
#rules-editor { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 20px; }
#rules-editor label { display: block; margin: 18px 0; }
.vault-items { list-style: none; padding: 0; }
.vault-items li { padding: 18px 0; border-top: 1px solid var(--border); }
.vault-items p { color: var(--muted); margin-bottom: 0; }
.benefits-items {
  list-style: none;
  padding: 0;
}
.benefits-items li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.benefits-items strong {
  text-align: right;
}
#rules-editor input, #rules-editor textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  font: inherit;
}

.language-picker {
  position: fixed;
  bottom: 12px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #0f1917;
  color: #f4efe4;
  border: 1px solid #253631;
  border-radius: 6px;
}
.language-picker select {
  background: #0f1917;
  color: #f4efe4;
}


.live-notification {
  position: fixed;
  right: 16px;
  top: 90px;
  bottom: auto;
  z-index: 100;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 12px 16px;
  background: #10201bf2;
  color: #f1f5ee;
  border: 1px solid #416451;
  border-left: 4px solid #83dfb8;
  border-radius: 8px;
  box-shadow: 0 12px 40px #0007;
  font-size: 14px;
  line-height: 1.45;
}

.live-notification[hidden] {
  display: none;
}

.live-notification p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.live-notification strong {
  display: block;
  margin-bottom: 4px;
  color: #83dfb8;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.live-notification a {
  color: #71e3c0;
  text-decoration: underline;
  font-size: inherit;
}

.live-notification .action {
  margin: 8px 0 0 12px;
  padding: 4px 8px;
  font-size: 12px;
}
.support-upload { margin: 24px 0; padding: 20px; border: 1px solid #2b463d; background: #101b17; }
.support-upload label, .support-download { display: flex; align-items: center; gap: 10px; }
.support-upload input { display: block; margin-top: 16px; width: 100%; }
.support-upload progress { width: 100%; height: 20px; accent-color: #71e3c0; }
.support-download img { filter: invert(1); }
.support-evidence { margin: 18px 0; padding: 16px; border: 1px solid #2b463d; }
.support-upload code { display: inline-block; padding: 8px 10px; overflow-wrap: anywhere; color: #71e3c0; }
.support-existing-upload { display: block; margin: 18px 0 12px; }
.support-existing-upload input { display: block; margin: 10px 0; max-width: 100%; }
.support-evidence progress { display: block; width: 100%; margin: 14px 0; accent-color: #71e3c0; }
.support-evidence progress[hidden] { display: none; }
.support-upload-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.support-upload #support-replay[hidden] { display: none; }
.support-replay-drop { margin-top: 18px; border: 2px dashed #345d50; padding: 30px 20px; text-align: center; background: #0b1511; }
.support-replay-drop p { margin: 0 0 8px; font-weight: 700; }
.support-replay-drop span { color: #9cab9d; }
.support-replay-drop.drag-active { border-color: #71e3c0; background: #16392a; }
.support-review-panel, .support-ticket-notices { padding: 20px; margin: 20px 0; border: 1px solid #2b463d; }
.support-review-panel label { display: block; margin: 16px 0; }
.support-review-panel select, .support-review-panel textarea { display: block; width: 100%; margin-top: 8px; }
.support-notification { top: 160px; }
.support-replay-selection { display: flex; align-items: center; gap: 12px; }
.support-replay-selection p { overflow-wrap: anywhere; }
#support-replay-remove { flex: 0 0 auto; font-size: 22px; padding: 6px 12px; }
/* Support case presentation: consistent cards, evidence and single response workspace. */
#support-items { display: grid; gap: 18px; list-style: none; padding: 0; }
.support-ticket-card { padding: 22px; border: 1px solid #284039; background: #0c1713; }
.support-ticket-card > h3 { margin: 0 0 8px; color: #f3eee1; font-size: 20px; }
.support-ticket-card > p { color: #a8b9af; margin: 0 0 16px; font-size: 13px; }
.support-ticket-dossier > summary { cursor: pointer; color: #83dfb8; font-weight: 700; padding: 12px 0; }
.support-ticket-dossier > p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.support-ticket-author { font-size: 18px; font-weight: 700; }
.support-ticket-identities { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 8px 16px; padding: 16px; border: 1px solid #284039; }
.support-ticket-identities dt { color: #9ab1a3; }
.support-ticket-identities dd { margin: 0; overflow-wrap: anywhere; }
.support-ticket-dossier .action { margin: 6px 8px 6px 0; }
.support-review-panel form { display: grid; grid-template-columns: minmax(150px,1fr) auto; align-items: end; gap: 16px; }
.support-review-panel form[hidden] { display: none; }
.support-review-panel label { margin: 0; }
.support-review-panel ul { list-style: none; padding: 0; color: #a8b9af; font-size: 13px; }
#support-message-items { list-style: none; padding: 0; }
#support-message-items > li { margin: 12px 0; padding: 16px 20px; background: #11231b; border-left: 3px solid #83dfb8; }
#support-reply label, #support-claim label, #support-close label { display: block; margin: 14px 0; }
#support-reply textarea { display: block; width: 100%; min-height: 170px; margin-top: 8px; padding: 14px; resize: vertical; color: #eeeadd; background: #0a1410; border: 1px solid #365244; }
@media (max-width: 650px) { .support-review-panel form { grid-template-columns: 1fr; } .support-ticket-identities { grid-template-columns: 1fr; } }
.support-management { padding: 24px; margin-top: 24px; border: 1px solid #365244; background: #0e1d16; }
.support-management[hidden] { display: none; }
.support-conversation { margin-top: 24px; padding-top: 20px; border-top: 1px solid #284039; }
.support-conversation h4 { margin: 0 0 16px; font-size: 18px; }
.support-chat-messages { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0 0 16px; max-height: 480px; min-height: 70px; overflow-y: auto; background: transparent; }
.support-chat-message,.support-chat-message.from-staff,.support-chat-message.from-player { align-self: stretch; max-width: none; padding: 10px 0; border: 0; border-left: 0; border-radius: 0; background: transparent; text-align: left; }
.support-chat-message + .support-chat-message { border-top: 1px solid rgba(54,82,68,.48); }
.support-chat-message strong { display: inline; color: var(--support-author-color, #87dbb6); font-size: 13px; }
.support-chat-message .richTextContent { display: block; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 4px 0 0; }
.support-chat-message .richTextContent > :first-child { margin-top: 0; }
.support-chat-message .richTextContent > :last-child { margin-bottom: 0; }
.support-chat-message time { display: inline; margin-left: 8px; font-size: 11px; color: #a1b5a8; }
.support-conversation form label { display: block; }
.support-conversation textarea { display: block; width: 100%; padding: 14px; margin: 8px 0; resize: vertical; min-height: 90px; color: #f3eee1; background: #09120e; border: 1px solid #365244; }
.support-conversation form[hidden] { display: none; }
.support-audit-details { margin-top: 24px; border-top: 1px solid #284039; padding-top: 16px; }
.support-audit-details summary { cursor: pointer; color: #a1b5a8; }

.vault-items { list-style: none; padding: 0; display: grid; gap: 1rem; }
.vaultSnapshotCard { border: 1px solid rgba(142,236,200,.18); padding: 1rem; background: rgba(255,255,255,.025); }
.vaultSnapshotCard p { line-height: 1.5; overflow-wrap: anywhere; }
.vaultSnapshotCard summary { cursor: pointer; padding: .65rem 0; font-weight: 700; }
.support-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-left: .4rem; border-radius: 999px; background: #83dfb8; color: #10231d; font-size: .7rem; font-weight: 800; vertical-align: middle; }
.support-unread-badge[hidden] { display: none; }
.support-notification { pointer-events: none; }
.support-notification-settings { padding: 1rem; margin: 1rem 0; border: 1px solid #284038; }
.support-notification-settings label { display: grid; gap: .4rem; margin: .75rem 0; }

.support-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 14px; padding: 14px; background: #0b1711; border: 1px solid #294135; }
.support-chat-composer label { margin: 0; }
.support-chat-composer textarea { width: 100%; min-height: 76px; resize: vertical; }
.support-chat-composer .support-chat-hint { grid-column: 1 / -1; margin: 0; color: #a1b5a8; font-size: 12px; }
@media (max-width: 600px) { .support-chat-composer { grid-template-columns: 1fr; } }

.support-chat-message { border-left: 0; }
.support-chat-message.from-staff { background: transparent; border-color: rgba(54,82,68,.48); }
.support-chat-message strong { color: var(--support-author-color, #87dbb6); }
.support-delete-form { display: flex; align-items: center; gap: 12px; padding-top: 16px; }
.support-delete-form input { flex: 1; min-width: 0; }

.support-chat-message,.support-chat-message.from-staff { background: transparent; }
.support-chat-role-settings fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
@media (max-width: 600px) { .support-chat-role-settings fieldset { grid-template-columns: 1fr; } }

.support-ticket-message-badge { margin-left: .6rem; vertical-align: middle; }
.support-staff-create { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--line, #294037); background: #0b1713; }
.support-staff-create summary { cursor: pointer; font-weight: 700; color: #80dfbb; }
.support-staff-create form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.support-staff-create label { display: grid; gap: .5rem; }
.support-staff-create input, .support-staff-create select, .support-staff-create textarea { width: 100%; box-sizing: border-box; padding: .8rem; background: #08100d; border: 1px solid #294037; color: #ebe9df; }
.support-staff-create textarea { resize: vertical; min-height: 10rem; }
.support-staff-create button { justify-self: start; }
.support-ticket-author { color: #83ddbc; font-weight: 700; margin-bottom: .35rem; }
.support-ticket-card > .support-ticket-origin { display: inline-block; width: fit-content; padding: .45rem .75rem; border: 1px solid #60716a; font-size: .85rem; font-weight: 700; margin: .35rem 0 .75rem; color: #c8d0cb; }
.support-ticket-card > .support-ticket-origin-staff { color: #f3cf8c; border-color: #997640; background: #3c2d1655; }
.support-ticket-card > .support-ticket-origin-player { color: #8de0be; border-color: #39735c; background: #123b2a55; }

.support-history-tabs { display: flex; gap: 10px; margin: 20px 0 12px; border-bottom: 1px solid var(--border, #294039); padding-bottom: 12px; }
.support-history-tabs button[aria-pressed="true"] { border-color: #80dbbb; background: #163b30; color: #d9fff0; }
#support-history-help { color: #a3b4ac; font-size: .9rem; }
#support-items > [hidden] { display: none; }

.support-archive-search { border: 1px solid #294039; background: #0c1915; padding: 22px; margin: 18px 0; }
.support-archive-search[hidden] { display: none; }
.support-archive-search label { display: grid; gap: 8px; font-weight: 600; }
.support-archive-search input, .support-archive-search select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; background: #08110e; color: #e6eee8; border: 1px solid #355147; }
.support-archive-filters { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-top: 18px; }
.support-archive-date-help { color: #a3b4ac; font-size: .85rem; }
@media (max-width: 700px) { .support-archive-filters { grid-template-columns: 1fr; } }

.sanction-template-panel { margin-top: 32px; border-top: 1px solid #294039; padding-top: 24px; }
.sanction-template-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; list-style: none; padding: 0; }
.sanction-template-items > li, .sanction-template-editor { border: 1px solid #294039; background: #0c1915; padding: 22px; }
.sanction-template-editor[hidden], .sanction-template-panel[hidden] { display: none; }
.sanction-template-editor label { display: grid; gap: 8px; margin-bottom: 16px; }
.sanction-template-editor input:not([type=checkbox]), .sanction-template-editor select, .sanction-template-editor textarea { box-sizing: border-box; width: 100%; padding: 12px; background: #08110e; color: #e6eee8; border: 1px solid #355147; }
.appeals-admin { margin-top: 32px; }
.appeals-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin: 20px 0; }
.appeal-card, .appeals-detail { border: 1px solid #294039; background: #0c1915; padding: 22px; }
.appeal-card h3 { margin-top: 0; }
.appeal-reference { overflow-wrap: anywhere; color: #94aea2; font-size: 12px; }
.appeal-state { display: inline-block; padding: 5px 10px; border: 1px solid #456355; font-size: 12px; }
.appeal-state-reviewing { color: #f5d27e; border-color: #927947; }
.appeal-state-accepted { color: #80dfb2; }
.appeal-state-rejected { color: #efaaa4; border-color: #955b56; }
.appeals-detail[hidden] { display: none; }
.appeals-history { list-style: none; padding: 0; }
.appeals-history li { padding: 16px 0; border-bottom: 1px solid #294039; }
.appeals-history p, #appeals-detail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#appeals-review label { display: grid; gap: 8px; margin: 18px 0; }
#appeals-review textarea, #appeals-review select, #appeals-query { background: #08110e; color: #e6eee8; padding: 12px; border: 1px solid #355147; box-sizing: border-box; width: 100%; }
.appeal-notification { top: auto; bottom: 24px; }

.appeals-chat { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border, #283b33); }
.appeals-chat label { display: grid; gap: 8px; }
.appeals-chat textarea { width: 100%; min-height: 96px; resize: vertical; }
.appeal-chat-event { border-left: 3px solid #68c9a6; padding: 12px 16px; background: rgba(104,201,166,.05); }
.appeal-chat-staff { border-left-color: #e0b35c; background: rgba(224,179,92,.06); }
.appeal-chat-event p { white-space: pre-wrap; overflow-wrap: anywhere; }
.appeals-history { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }

.player-picker-list { max-height: 260px; overflow-y: auto; border: 1px solid #294038; background: #09120f; border-radius: 3px; margin: 8px 0; }
.player-picker-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.player-picker-heading > label { margin: 0; }
@media (max-width: 680px) { .player-picker-heading { grid-template-columns: 1fr; } }
.player-picker-option { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 52px; text-align: left; padding: 7px 12px; color: #efece2; background: transparent; border: 0; border-bottom: 1px solid #20372e; cursor: pointer; }
.player-picker-option span { font-size: 11px; color: #a7b6ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.player-picker-option:hover,.player-picker-option:focus-visible,.player-picker-option[aria-selected=true] { background: #163a2e; outline-offset: -2px; }
.player-picker-status { font-size: 12px; color: #a7b6ab; }
.player-directory-select { width: 100%; min-height: 190px; margin-top: 8px; background: #09120f; color: #efece2; border: 1px solid #294038; padding: 6px; }
.player-directory-select option { padding: 9px 10px; border-bottom: 1px solid #20372e; }
.personal-navigation-toolbar { display: grid; gap: 8px; padding: 8px 0; }
.personal-navigation-toolbar p { font-size: 11px; color: #a7b6ab; }
.navigation-sort-row { display: flex; align-items: center; gap: 3px; }
.navigation-sort-row > a { flex: 1; min-width: 0; }
.navigation-group h2 { display: flex; justify-content: space-between; align-items: center; }
.navigation-sort-controls { display: inline-flex; gap: 3px; flex-shrink: 0; }
.navigation-sort-controls button { background: #142a21; color: #a9d4c2; border: 1px solid #304b3e; width: 24px; height: 26px; cursor: pointer; }
.navigation-sort-row[draggable=true],.navigation-group[draggable=true] > h2 { cursor: grab; }
.player-picker-option strong { font-size: 14px; line-height: 18px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-picker-option span { line-height: 16px; }