/* Inter 4.1, served from this site. One variable file covers every weight,
   so nothing here asks for a second download to go bold. */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Relative on purpose. Served from /static it resolves there, and a
     mockup opened straight off disk resolves it beside the stylesheet. */
  src: url("inter-4.1.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --deepest: #1e1f22;
  --secondary: #2b2d31;
  --main: #313338;
  --raised: #383a40;
  --border: #3f4147;
  --heading: #f2f3f5;
  --text: #dbdee1;
  --muted: #b5bac1;
  --faint: #949ba4;
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --brand-active: #3c45a5;
  --selected: #404249;
  --hover: #35373c;
  --user-area: #232428;
  --green: #23a55a;
  --red: #da373c;
  --yellow: #f0b132;
  --link: #00a8fc;
}

* {
  box-sizing: border-box;
}


body {
  margin: 0;
  background: var(--main);
  color: var(--text);
  /* gg sans is Discord's and not distributed, so this is their stack with
     Inter standing in for it: much nearer gg sans than Helvetica is. */
  font-family: "gg sans", InterVariable, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 1.5;
}

button, input {
  font: inherit;
}

button, a, input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: var(--link);
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  color: var(--heading);
  line-height: 1.25;
}

h1 {
  font-size: 28px;
  font-weight: 700;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}


:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--brand);
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.button:hover {
  background: var(--brand-hover);
}

.button:active {
  background: var(--brand-active);
}

.button-secondary {
  background: var(--secondary);
  border-color: var(--border);
}

.button-secondary:hover {
  background: var(--raised);
}

.button-secondary:active {
  background: var(--deepest);
}

.button:disabled {
  color: var(--faint);
  background: var(--secondary);
  cursor: not-allowed;
}


.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 240px;
  background: var(--secondary);
}
.site-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 57px;
  padding: 0 16px;
  border-bottom: 1px solid var(--deepest);
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
}
.site-name svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.channel-nav {
  padding: 24px 8px;
}

.nav-label {
  padding: 0 8px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* A heading after a group of links starts a new group, so it sits clear of the
   link above and close to its own. Without this "Your coins" was 13px under
   KICK and 18px over History, and read as part of the group above it. */
.channel-nav a + .nav-label {
  margin-top: 18px;
}
.channel-nav a {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  margin-bottom: 3px;
  padding: 6px 12px;
  border-radius: 3px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.channel-nav a:hover {
  background: var(--hover);
  color: var(--heading);
}

.channel-nav a[aria-current="page"] {
  background: var(--selected);
  color: var(--heading);
}

.channel-nav a[aria-current="page"] .nav-name {
  font-weight: 600;
}

/* Kick writes its own name in capitals, so it is set that way everywhere it
   appears rather than only on its own page. The mark itself is a square and
   stays one: it is a square logo. */
.channel-nav a[href="/kick"] .nav-name {
  text-transform: uppercase;
  letter-spacing: .02em;
}

.nav-name {
  font-size: 15px;
}

.member {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 12px;
  background: var(--user-area);
}
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--heading);
  font-weight: 700;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

.avatar::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 3px solid var(--user-area);
  border-radius: 50%;
  background: var(--green);
  content: "";
}
.member-name {
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.member-status {
  color: var(--muted);
  font-size: 11px;
}

.member form {
  margin-left: auto;
}


.workspace {
  min-height: 100vh;
  margin-left: 240px;
}

.channel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 57px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
}
.channel-title {
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
}

.channel-topic {
  padding-left: 16px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 32px 48px;
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.page-heading p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: 16px;
}

.section-heading p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}


.item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.item-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 226px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--secondary);
}

.item-card:hover {
  border-color: var(--brand);
  background: var(--raised);
}
.item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}

.item-icon {
  font-size: 30px;
  line-height: 1.2;
}

.item-icon img {
  display: block;
  width: 36px;
  height: 36px;
}

.quantity {
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--secondary);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.item-card p {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.item-card .button {
  min-width: 72px;
}

.item-note {
  margin-top: auto;
  color: var(--faint);
  font-size: 12px;
}

.empty-note {
  padding: 20px 0;
  color: var(--faint);
  font-size: 13px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.pagination p {
  color: var(--muted);
  font-size: 13px;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-number {
  min-width: 36px;
  padding-inline: 8px;
}


.login-page {
  padding: 40px 20px;
}

.login-state {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 80px);
}

.login-state + .login-state {
  margin-top: 64px;
}

.login-card {
  width: 100%;
  max-width: 460px;
  padding: 36px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--secondary);
}

.login-site {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.login-card h1, .login-card h2 {
  font-size: 24px;
  text-align: center;
}

.login-instruction {
  margin: 10px 0 28px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

code {
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--deepest);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: .95em;
}

.login-card label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.code-input {
  width: 100%;
  height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--deepest);
  color: var(--heading);
  font-family: Consolas, "Courier New", monospace;
  font-size: 22px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.code-input::placeholder {
  color: var(--faint);
  opacity: 1;
}

.code-input[aria-invalid="true"] {
  border-color: var(--red);
}

.input-error {
  margin-top: 8px;
  color: var(--red);
  font-size: 13px;
}

.login-card .button {
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
}


/* The open dialog is a static preview. Closing it also removes the scrim. */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--deepest);
  opacity: .8;
}

body:has(.confirmation[open]) .modal-backdrop {
  display: block;
}

.confirmation {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: min(440px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--main);
  color: var(--text);
}

.confirmation::backdrop {
  background: transparent;
}

.dialog-copy {
  padding: 28px 24px;
}

.dialog-copy h2 {
  margin-bottom: 14px;
}

.dialog-copy p {
  font-size: 16px;
  line-height: 1.5;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  background: var(--secondary);
}


@media (max-width: 1100px) {
  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* The channel list becomes a compact top bar so content fits narrow screens. */
@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: 100%;
  }

  .site-name {
    height: 52px;
  }

  .channel-nav {
    display: flex;
    gap: 4px;
    padding: 8px;
  }

  .nav-label, .member {
    display: none;
  }

  .channel-nav a {
    flex: 1;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 6px;
  }

  .workspace {
    margin-left: 0;
  }

  .channel-header {
    min-height: 49px;
    padding: 12px 20px;
  }

  .channel-topic {
    display: none;
  }

  .content {
    padding: 28px 20px 36px;
  }

  .page-heading {
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
  }

}

@media (max-width: 480px) {
  .item-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .item-card {
    min-height: 210px;
  }

  .pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination-buttons {
    width: 100%;
  }

  .pagination-buttons .button:not(.page-number) {
    flex: 1;
  }

  .login-card {
    padding: 28px 24px;
  }

  h1 {
    font-size: 24px;
  }

}


/* The coin balance, and the price on each card. The coin art is a file rather
   than an icon font so it can be swapped by replacing the image. */
.balance-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.coin {
  border-radius: 50%;
  flex-shrink: 0;
}

.balance-label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.balance-amount {
  margin: 0;
  color: var(--brand);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.balance-amount span {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

/* The price and the button below it are one block pinned to the bottom of the
   card. `auto` here eats whatever space the description left over, so a long
   description, a short one or none at all moves the text above and never these
   two: the button lands in the same place on every card. */
.item-card .price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 12px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.item-card .price img {
  border-radius: 50%;
}

.button[disabled] {
  background: var(--raised);
  color: var(--faint);
  cursor: not-allowed;
}


/* Omar's platform icons: beside each name in the list, and beside the name in
   the header of the page it opens. */
.nav-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.header-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}


/* Sign out is a form button so that signing out cannot happen by following a
   link somebody was sent. It has to look like the link it replaced. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.linklike:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Said once after buying something, or after failing to. */
.notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 4px;
  color: var(--text);
}

/* The watch time in the top right of the channel header.
 *
 * `margin-left: auto` is the whole trick: the header is already a flex row, so
 * this pushes itself to the far end without the title or topic knowing about
 * it. Muted like the topic beside it, because it is a fact rather than a call
 * to action. */
.watch-corner {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.watch-name {
  color: var(--heading);
  font-weight: 600;
}

/* The history list. Description left, what it moved right. */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.history-row:last-child {
  border-bottom: none;
}
.history-what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--heading);
  font-size: 15px;
  min-width: 0;
}
.history-when {
  color: var(--muted);
  font-size: 13px;
}
.history-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.history-coin {
  display: block;
}
.history-amount.earned {
  color: #3ba55d;
}
.history-amount.spent {
  color: #ed4245;
}

@media (max-width: 768px) {
  .watch-corner {
    display: none;
  }
}

/* The noun in a history line, drawn bold.
 *
 * A real element rather than asterisks: the description is a text node and is
 * escaped as one, so the only markup on that line is the tag we put there. */
.history-item {
  font-weight: 700;
}

/* The item's icon in front of its name, the way Discord puts one before an
   item. Lifted a little so the picture centres on the text rather than
   sitting on its baseline. */
.history-item-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: -4px;
}
.history-item-emoji {
  margin-right: 5px;
}

/* The language button, top right: عربي with the Saudi flag, or ENG with the UK
 * flag in Arabic. Omar's, 30 September 2026. In the header it sits after the
 * watch time, which keeps `margin-left: auto` and so moves left by exactly the
 * button's width; where there is no watch time the button pushes itself right.
 * Pages without a header float it in the corner instead. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--secondary);
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--raised);
}
.lang-toggle img {
  display: block;
  width: 20px;
  height: 20px;
}
.watch-corner + .lang-toggle {
  margin-left: 4px;
}
.lang-toggle.floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* Arabic reads right to left, inside the same Discord layout, which is Omar's
 * choice: nothing moves, the words just run the other way. `plaintext` takes
 * each line's direction from its own words, so a line still waiting for its
 * Arabic stays English and left to right beside the Arabic ones. */
html:lang(ar) :is(h1, h2, h3, p, li, label, .site-name, .nav-name, .nav-label, .channel-title,
    .channel-topic, .member-name, .member-status, .history-line, .history-when, .watch-corner) {
  unicode-bidi: plaintext;
}