/* 1kamas: header test (Eldorado-style): official purple logo tile, a search that runs up to one
   "Se connecter" button in the logo's purple (see 1k-header.js), all 44px tall; a category bar one
   step lighter than the top bar, so both read as one plum block in light and dark mode; from
   1024px the language and theme controls sit on the right of the category bar, the category
   bar holds game menus with panels (servers and prices), and the top bar gets a cart (end of
   this file, with 1k-header.js).
   Selectors are prefixed with `html header` to win over the per-page inlined CSS.
   `header > .bg-header-plum` is the top bar only: the phone menu, also inside <header>, has plum
   blocks of its own (theme and language switches) that these rules must not restyle.
   Remove the <link data-1k-header> tag to undo. */

/* Every page at 1420px of content (1468px with the 24px gutters), like the homepage: header,
   footer and page content keep the same width when moving from one page to another */
html .container-1k { max-width: 1468px; }

/* Bar: flat plum (was a gradient), 64px */
html header > .bg-header-plum { background-image: none; background-color: #230a29; position: relative; }
html header > .bg-header-plum > div { height: 64px; gap: 16px; }

/* Tagline: hidden, the search takes its place */
html header > .bg-header-plum > div > div > span { display: none; }

/* Logo: the site's purple app tile (brand/logo-mark.webp) instead of the white outline mark,
   then "1Kamas" in bold, at Eldorado's proportions (44px tile, 24px name). Never shrinks. */
html header > .bg-header-plum > div > a:first-child { flex-shrink: 0; gap: 12px; }
html header > .bg-header-plum > div > a:first-child > img { display: none; }
html header > .bg-header-plum > div > a:first-child::before {
  content: ""; flex: none; width: 44px; height: 44px; background: url(/brand/logo-mark.webp) center / contain no-repeat;
}
/* Name: a title face like Eldorado's wordmark: Rajdhani 700, the squared display font the site
   already self-hosts (its old headings), so no new download. Rajdhani runs small, hence 30px */
html header > .bg-header-plum > div > a:first-child > span {
  font-family: var(--font-rajdhani), var(--font-inter), system-ui, sans-serif;
  font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: 0;
}

/* Theme toggle: 36px square, 8px corners */
html header .theme-toggle-btn { width: 36px; height: 36px; border-radius: 8px; }
html header .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, .08); }

/* Language: ghost button instead of a white pill */
html header .inline-flex.antialiased > div > button {
  height: 36px; padding: 0 10px; background-color: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); font-weight: 500;
}
html header .inline-flex.antialiased > div > button:hover { background-color: rgba(255, 255, 255, .08); }

/* Account: one "Se connecter" button in the logo tile's purple (#765EB8, white text 5.1:1), as tall
   as the tile and the search. "S'enregistrer" is hidden here; registration stays available from
   the login page. */
html header > .bg-header-plum .rounded-btn.bg-white { background: none; box-shadow: none; padding: 0; gap: 0; }
html header > .bg-header-plum .rounded-btn.bg-white > span,
html header > .bg-header-plum .rounded-btn.bg-white > a:last-of-type { display: none; }
html header > .bg-header-plum .rounded-btn.bg-white > a:first-of-type {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 8px;
  background-color: #765eb8; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
html header > .bg-header-plum .rounded-btn.bg-white > a:first-of-type:hover { background-color: #6a51ad; }

/* Category bar: 40px instead of 48px, one step lighter than the top bar (#230A29) in both themes,
   so the two bars read as one block; labels light on plum at weight 500 (links and text unchanged) */
html header nav.bg-surface { background-color: #33193a; border-bottom-color: rgba(255, 255, 255, .06); }
html header nav ul.flex { padding-top: 3px; padding-bottom: 3px; }
html header nav .nav-pill { padding: 6px 12px; color: rgba(255, 255, 255, .72); font-weight: 500; }
html header nav .nav-pill:hover,
html header nav .nav-pill:focus-visible,
html header nav .nav-pill-active,
html header nav .nav-pill-active:hover { color: #fff; }
html header nav .nav-pill::after { background: #b8a4ee; }

/* Search: right after the logo, filling the bar up to the button (32px before it), 44px tall */
.k1-search { position: relative; flex: 1 1 auto; min-width: 0; margin-right: 16px; }
.k1-search__field {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6);
}
.k1-search__field:focus-within { background: rgba(255, 255, 255, .12); border-color: #b8a4ee; }
.k1-search__field svg { flex: none; }
.k1-search__input {
  flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0;
  color: #fff; font: inherit; font-size: 14px;
}
.k1-search__input::placeholder { color: rgba(255, 255, 255, .6); }
.k1-search__input::-webkit-search-cancel-button { display: none; }
.k1-search__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid #e4e4e9; border-radius: 8px; box-shadow: 0 8px 24px rgba(22, 21, 28, .12);
}
.k1-search__list[hidden] { display: none; }
.k1-search__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 6px; color: #16151c; font-size: 14px; line-height: 21px; cursor: pointer; text-decoration: none;
}
.k1-search__item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k1-search__kind { flex: none; font-size: 12px; color: #6b6977; }
.k1-search__item[aria-selected="true"], .k1-search__item:hover { background: #efeff2; }
.k1-search__empty { padding: 8px 10px; font-size: 14px; color: #6b6977; }
[data-theme=dark] .k1-search__list { background: #201a2d; border-color: #382f4a; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
[data-theme=dark] .k1-search__item { color: #f4f1fa; }
[data-theme=dark] .k1-search__item[aria-selected="true"], [data-theme=dark] .k1-search__item:hover { background: #3a3552; }
[data-theme=dark] .k1-search__kind, [data-theme=dark] .k1-search__empty { color: #a095ba; }

/* Below 1024px: search gets its own row under the bar, aligned with the logo; space is
   reserved up front so nothing jumps */
@media (max-width: 1023px) {
  html header > .bg-header-plum { padding-bottom: 52px; }
  .k1-search { position: absolute; left: 16px; right: 16px; bottom: 10px; max-width: none; margin: 0; }
  .k1-search__field { height: 40px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .k1-search { left: 24px; right: 24px; }
}

/* From 1024px: language and theme move to the right of the category bar (Eldorado-style),
   categories align left. The controls are positioned from the plum bar, so the site's own
   dropdown menus keep working and open right under them. Logged in, the notifications bell and
   the account button stay in the top row, where "Se connecter" is when logged out. */
@media (min-width: 1024px) {
  html header nav ul.flex { justify-content: flex-start; }

  html header > .bg-header-plum .inline-flex.antialiased {
    position: absolute; top: calc(100% + 4px); right: calc(max(24px, (100% - 1420px) / 2) + 40px); z-index: 2;
  }
  html header > .bg-header-plum .sm\:flex > div.relative:has(> .theme-toggle-btn) {
    position: absolute; top: calc(100% + 4px); right: max(24px, calc((100% - 1420px) / 2)); z-index: 2;
  }

  /* Theme: small icon, light on the plum category bar */
  html header > .bg-header-plum .theme-toggle-btn { width: 32px; height: 32px; border-radius: 6px; color: rgba(255, 255, 255, .72); }
  html header > .bg-header-plum .theme-toggle-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

  /* Language: discreet link (globe, name, chevron) instead of a bordered button with a flag */
  html header > .bg-header-plum .inline-flex.antialiased > div > button {
    height: 32px; padding: 0 8px; gap: 6px; border: 0; border-radius: 6px; background: transparent;
    color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500;
  }
  html header > .bg-header-plum .inline-flex.antialiased > div > button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  html header > .bg-header-plum .inline-flex.antialiased > div > button > span:first-child { display: none; }
  html header > .bg-header-plum .inline-flex.antialiased > div > button::before,
  html header > .bg-header-plum .inline-flex.antialiased > div > button::after {
    content: ""; flex: none; background: currentColor;
    -webkit-mask: var(--k1-icon) center / contain no-repeat; mask: var(--k1-icon) center / contain no-repeat;
  }
  html header > .bg-header-plum .inline-flex.antialiased > div > button::before {
    width: 16px; height: 16px;
    --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E");
  }
  html header > .bg-header-plum .inline-flex.antialiased > div > button::after {
    width: 14px; height: 14px; order: 3;
    --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ---------- Game menus and first-row actions (1k-header.js), from 1024px ----------
   First row: search up to 480px, 80px after the logo, then the cart (count when not empty) before "Se connecter". Category row: the site's links are replaced by "Dofus ▾ …" menus and
   the Blog / Fidélité / Aide links; each game opens a panel over the page (the open game as a
   folder tab joined to it): what to buy, the servers with their price per million, and the game's
   picture. Below 1024px nothing changes. */
.k1-actions, .k1-menu, .k1-panel { display: none; }
/* Below 1024px: the cart bag before the menu button (44px, the menu button's touch size) */
.k1-mcart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; color: #fff; }
.k1-mcart svg { width: 26px; height: 26px; }
.k1-mcart .k1-actions__count {
  position: absolute; top: 4px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #b8a4ee; color: #16151c; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center;
}
.k1-mcart .k1-actions__count[hidden] { display: none; }
@media (min-width: 1024px) {
  .k1-actions__cart.k1-mcart { display: none; }
  html header .k1-search { flex: 0 1 480px; margin-left: 64px; margin-right: auto; }

  .k1-actions { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
  .k1-actions__cart { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: rgba(255, 255, 255, .8); }
  .k1-actions__cart:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .k1-actions__count {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #b8a4ee; color: #16151c; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center;
  }
  .k1-actions__count[hidden] { display: none; }

  /* Category row: our menu instead of the site's links (kept in the page) */
  html header nav.k1-has-menu ul.flex:not(.k1-menu) { display: none; }
  html header nav .container-1k { position: relative; }
  .k1-menu { display: flex; align-items: center; gap: 2px; height: 39px; margin: 0; padding: 0; list-style: none; }
  .k1-menu__link {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; white-space: nowrap;
    color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 500; text-decoration: none;
  }
  .k1-menu__link:hover, .k1-menu__link[aria-expanded="true"], .k1-menu__link.is-current { background: rgba(255, 255, 255, .08); color: #fff; }
  .k1-menu__link:focus-visible { outline: 2px solid #b8a4ee; outline-offset: 1px; }
  .k1-menu__link svg { color: rgba(255, 255, 255, .6); transition: transform .15s ease; }
  .k1-menu__link[aria-expanded="true"] svg { transform: rotate(180deg); }
  .k1-menu__item--first { margin-left: 8px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .16); }

  /* The open game is a folder tab joined to its panel (which starts right under the row): the
     panel's colour, rounded top corners, reaching 1px into the panel over its top border, and two
     small concave corners joining it to the panel's top edge. The first game sits on the panel's
     left edge: the panel's corner is square there and there is no left join */
  .k1-menu__link[aria-expanded="true"] {
    position: relative; z-index: 71; height: 37px; margin-top: 3px; border-radius: 10px 10px 0 0;
    background: rgb(var(--surface)); color: rgb(var(--ink));
  }
  .k1-menu__link[aria-expanded="true"] svg { color: rgb(var(--brand)); }
  .k1-menu__link[aria-expanded="true"]::before, .k1-menu__link[aria-expanded="true"]::after {
    content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; background: rgb(var(--surface)); pointer-events: none;
  }
  .k1-menu__link[aria-expanded="true"]::before {
    left: -10px;
    -webkit-mask: radial-gradient(circle 10px at 0 0, transparent 98%, #000 100%); mask: radial-gradient(circle 10px at 0 0, transparent 98%, #000 100%);
  }
  .k1-menu__link[aria-expanded="true"]::after {
    right: -10px;
    -webkit-mask: radial-gradient(circle 10px at 100% 0, transparent 98%, #000 100%); mask: radial-gradient(circle 10px at 100% 0, transparent 98%, #000 100%);
  }
  .k1-menu__item:first-child > .k1-menu__link[aria-expanded="true"]::before { display: none; }
  html header nav .container-1k:has(.k1-menu__item:first-child > [aria-expanded="true"]) > .k1-panel { border-top-left-radius: 0; }

  /* Panel: site surface over the page, three columns */
  .k1-panel {
    position: absolute; left: 24px; right: 24px; top: 100%; z-index: 70;
    display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 28px; min-height: 200px; padding: 20px;
    border: 1px solid rgb(var(--line)); border-radius: 12px; background: rgb(var(--surface));
    box-shadow: 0 20px 48px rgb(10 6 22 / .25); color: rgb(var(--ink)); text-align: left;
  }
  html[data-theme="dark"] .k1-panel { box-shadow: 0 20px 48px rgb(0 0 0 / .5); }
  .k1-panel[hidden] { display: none; }
  .k1-panel__title { margin: 0 0 8px; padding: 0 10px; color: rgb(var(--muted)); font-size: 12px; line-height: 16px; font-weight: 600; }
  .k1-panel a { color: rgb(var(--ink)); text-decoration: none; }
  .k1-panel a:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 1px; }
  .k1-panel__buy { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; }
  .k1-panel__buy:hover { background: rgb(var(--brand) / .08); }
  .k1-panel__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 8px; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
  .k1-panel__buy strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
  .k1-panel__buy small { display: block; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
  .k1-panel__servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .k1-panel__servers a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 20px; }
  .k1-panel__servers a:hover { background: rgb(var(--brand) / .08); }
  .k1-panel__servers span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k1-panel__servers small { flex: none; color: rgb(var(--muted)); font-size: 13px; }
  html header .k1-panel a.k1-panel__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 10px; color: rgb(var(--brand)); font-size: 14px; font-weight: 600; }
  html header .k1-panel a.k1-panel__promo {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 200px; padding: 16px;
    overflow: hidden; isolation: isolate; border-radius: 10px; color: #fff;
  }
  .k1-panel__promo::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14, 10, 22, .3), rgba(14, 10, 22, .9)), var(--k1-bg) center / cover no-repeat, #1d072a;
    filter: saturate(.45);
  }
  .k1-panel__logo { position: absolute; inset: 18px 24px 70px; background: var(--k1-logo) center / contain no-repeat; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
  .k1-panel__promo-text strong { display: block; font-size: 17px; line-height: 22px; font-weight: 700; }
  .k1-panel__promo-text small { display: block; color: rgba(255, 255, 255, .75); font-size: 13px; }
  .k1-panel__promo > svg { flex: none; color: #b8a4ee; }
}
/* Narrower desktops: the panel's picture goes, servers keep their room */
@media (min-width: 1024px) and (max-width: 1199px) {
  .k1-panel { grid-template-columns: 260px minmax(0, 1fr); }
  html header .k1-panel a.k1-panel__promo { display: none; }
}

/* ---------- Before our script has run (first load of a page) ----------
   The search, the cart and the game menus are added by 1k-header.js once React has
   finished loading the page, which can take a moment on a first visit. Until then the header
   shows look-alikes in the exact same places (the search field with its placeholder, the
   cart, the menu labels "Dofus ▾ …" and the Blog / Fidélité / Aide
   links), so the real ones replace them without anything moving or changing. Each look-alike
   disappears as soon as the real element is there. */
html header > .bg-header-plum > div > a:first-child { order: -1; }
html header > .bg-header-plum > div:not(:has(> .k1-search))::before {
  content: "Rechercher un jeu, un serveur, un article…"; order: 0; flex: 1 1 auto; min-width: 0; margin-right: 16px; box-sizing: border-box;
  height: 44px; padding: 0 12px 0 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
  color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[lang="en"] header > .bg-header-plum > div:not(:has(> .k1-search))::before { content: "Search a game, a server, an article…"; }
html[lang="es"] header > .bg-header-plum > div:not(:has(> .k1-search))::before { content: "Buscar un juego, un servidor, un artículo…"; }
html[lang="pt"] header > .bg-header-plum > div:not(:has(> .k1-search))::before { content: "Pesquisar um jogo, um servidor, um artigo…"; }
@media (max-width: 1023px) {
  html header > .bg-header-plum > div:not(:has(> .k1-search))::before { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 40px; margin: 0; line-height: 38px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  html header > .bg-header-plum > div:not(:has(> .k1-search))::before { left: 24px; right: 24px; }
}
@media (min-width: 1024px) {
  html header > .bg-header-plum > div:not(:has(> .k1-search))::before { flex: 0 1 480px; margin-left: 64px; margin-right: auto; }

  /* The cart, in front of the language / theme / login group */
  html header > .bg-header-plum > div > div.items-center:not(:has(> .k1-actions)) > * { order: 2; }
  html header > .bg-header-plum > div > div.items-center:not(:has(> .k1-actions))::after {
    content: ""; order: 1; width: 40px; height: 40px; margin: 0 8px 0 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgba(255,255,255,0.8)'%3E%3Cpath fill-rule='evenodd' d='M6.2 10.4h19.6l-1.2 15.4a2.2 2.2 0 0 1-2.2 2H9.6a2.2 2.2 0 0 1-2.2-2zM10.3 10.4V8.6a5.7 5.7 0 0 1 11.4 0v1.8h-2.4V8.6a3.3 3.3 0 0 0-6.6 0v1.8zM11.5 12.9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3zM20.5 12.9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'/%3E%3C/svg%3E") center / 24px no-repeat;
  }

  /* Category row: the site's links shown like the game menus ("Dofus ▾"), then the page links */
  html header nav.bg-surface:not(.k1-has-menu) ul.flex { flex-wrap: nowrap; gap: 2px; height: 39px; padding: 0; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill {
    display: inline-flex; align-items: center; gap: 0; height: 32px; padding: 0 12px; border-radius: 6px;
    font-size: 0; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .78);
  }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill-active { background: rgba(255, 255, 255, .08); color: #fff; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill::before { content: "Dofus"; font-size: 14px; line-height: 20px; font-weight: 500; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill[href*="retro"]::before { content: "Dofus Retro"; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill[href*="touch"]::before { content: "Dofus Touch"; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill[href*="wakfu"]::before { content: "Wakfu"; }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex .nav-pill::after {
    content: ""; position: static; inset: auto; display: block; flex: none; width: 14px; height: 14px; margin-left: 6px; border-radius: 0; opacity: 1; transform: none;
    background: rgba(255, 255, 255, .6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html header nav.bg-surface:not(.k1-has-menu) ul.flex::after {
    content: "Blog Fidélité Aide"; display: block; height: 32px; margin-left: 8px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 32px; font-weight: 500; word-spacing: 22px; white-space: nowrap;
  }
  html[lang="en"] header nav.bg-surface:not(.k1-has-menu) ul.flex::after { content: "Loyalty Help"; }
  html[lang="es"] header nav.bg-surface:not(.k1-has-menu) ul.flex::after { content: "Fidelidad Ayuda"; }
  html[lang="pt"] header nav.bg-surface:not(.k1-has-menu) ul.flex::after { content: "Fidelidade Ajuda"; }
}

/* Logged in, from 1024px: cart, notifications bell and avatar 8px apart, and the bell drawn like
   the cart: a filled icon, 24px, same colour and hover, same lavender count */
@media (min-width: 1024px) {
  html header > .bg-header-plum > div > div.items-center:has(button.bg-white.text-plum) > .k1-actions { margin-right: -8px; }
  html header > .bg-header-plum > div > div.items-center:not(:has(> .k1-actions)):has(button.bg-white.text-plum)::after { margin-right: -8px; }

  html header > .bg-header-plum .sm\:flex > div.relative > button:not(.theme-toggle-btn):not(.bg-white) {
    width: 40px; height: 40px; border-radius: 8px; color: rgba(255, 255, 255, .8);
  }
  html header > .bg-header-plum .sm\:flex > div.relative > button:not(.theme-toggle-btn):not(.bg-white):hover { background: rgba(255, 255, 255, .08); color: #fff; }
  html header > .bg-header-plum .sm\:flex > div.relative > button:not(.theme-toggle-btn):not(.bg-white) > svg { display: none; }
  html header > .bg-header-plum .sm\:flex > div.relative > button:not(.theme-toggle-btn):not(.bg-white)::before {
    content: ""; width: 24px; height: 24px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4a2 2 0 0 1 2 2v.6c3.5.9 6 4 6 7.7v4.9l2.3 3.3a1 1 0 0 1-.8 1.5H6.5a1 1 0 0 1-.8-1.5L8 19.2v-4.9c0-3.7 2.5-6.8 6-7.7V6a2 2 0 0 1 2-2zM12.5 26h7a3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4a2 2 0 0 1 2 2v.6c3.5.9 6 4 6 7.7v4.9l2.3 3.3a1 1 0 0 1-.8 1.5H6.5a1 1 0 0 1-.8-1.5L8 19.2v-4.9c0-3.7 2.5-6.8 6-7.7V6a2 2 0 0 1 2-2zM12.5 26h7a3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html header > .bg-header-plum .sm\:flex > div.relative > button:not(.theme-toggle-btn):not(.bg-white) > span {
    top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #b8a4ee; color: #16151c; font-size: 11px; line-height: 18px; font-weight: 700;
  }
}

/* Avatar letter (logged in): the first letter of the e-mail used to log in, set by 1k-header.js
   as --k1-initial, instead of the first letter of the name. The site's letter is kept in place
   but not painted, so every avatar keeps its size; the e-mail's letter is drawn over it, in the
   avatar's own colour and size. Header button, account menu, phone menu, profile page */
html[data-k1-initial] :is(
  header button.rounded-lg.bg-white.text-plum,
  header span.h-10.w-10.rounded-lg.bg-brand,
  span.h-11.w-11.rounded-card.bg-header-plum,
  span.h-9.w-9.rounded-lg.bg-header-plum,
  span.h-16.w-16.rounded-xl.bg-header-plum
) { position: relative; -webkit-text-fill-color: transparent; }
html[data-k1-initial] :is(
  header button.rounded-lg.bg-white.text-plum,
  header span.h-10.w-10.rounded-lg.bg-brand,
  span.h-11.w-11.rounded-card.bg-header-plum,
  span.h-9.w-9.rounded-lg.bg-header-plum,
  span.h-16.w-16.rounded-xl.bg-header-plum
)::before {
  content: var(--k1-initial); position: absolute; inset: 0; display: grid; place-items: center; -webkit-text-fill-color: currentColor;
}

/* ---------- Cart panel (1k-header.js): slides in from the right, over a dimmed page ---------- */
html.k1c-open { overflow: hidden; }
.k1c-overlay { position: fixed; inset: 0; z-index: 100; background: rgb(10 6 22 / .45); animation: k1c-fade .2s ease-out; }
.k1c-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100%);
  background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: -12px 0 32px rgb(10 6 22 / .18);
  animation: k1c-in .22s ease-out;
}
@keyframes k1c-fade { from { opacity: 0; } }
@keyframes k1c-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .k1c-overlay, .k1c-drawer { animation: none; } }
.k1c-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgb(var(--line)); }
.k1c-head h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.k1c-head h2 span { color: rgb(var(--muted)); font-weight: 500; }
.k1c-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--ink)); cursor: pointer; }
.k1c-x:hover { background: rgb(var(--ink) / .06); }

.k1c-lines { flex: 1; margin: 0; padding: 4px 20px; list-style: none; overflow-y: auto; }
.k1c-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgb(var(--line)); }
.k1c-line:last-child { border-bottom: 0; }
/* Game picture on the site's plum (the picture's own background) */
.k1c-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; background: #1d072a; overflow: hidden; }
.k1c-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Items and class symbols: the whole icon, as on their cards */
.k1c-thumb--icon img { padding: 6px; object-fit: contain; }
.k1c-qty button:disabled { color: rgb(var(--muted)); opacity: .5; cursor: default; }
.k1c-qty button:disabled:hover { background: transparent; }
.k1c-info { flex: 1; min-width: 0; }
.k1c-info p { margin: 2px 0 10px; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
.k1c-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k1c-row strong { min-width: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.k1c-row b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.k1c-row small { margin-right: auto; color: rgb(var(--muted)); font-size: 12px; white-space: nowrap; }
.k1c-qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid rgb(var(--line)); border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 600; }
.k1c-qty button { width: 30px; height: 100%; border: 0; background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 16px; cursor: pointer; }
.k1c-qty button:hover { background: rgb(var(--ink) / .06); }
.k1c-qty input {
  width: 40px; height: 100%; padding: 0; border: 0; background: transparent; color: rgb(var(--ink));
  font: inherit; text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.k1c-qty input::-webkit-inner-spin-button, .k1c-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.k1c-qty input:focus { outline: none; }
.k1c-qty:focus-within { border-color: rgb(var(--cta) / .6); }
.k1c-qty input + span { padding: 0 4px 0 3px; }
/* Under an item: its quantity is at the most available (the number itself is never shown) */
.k1c-info .k1c-cap { margin: 6px 0 0; color: rgb(var(--muted)); font-size: 12px; line-height: 16px; }
/* At the top of the panel: why nothing was added (10 lines at most) */
.k1c-note { margin: 12px 20px 0; padding: 10px 12px; border-radius: 8px; background: rgb(var(--ink) / .05); color: rgb(var(--ink)); font-size: 13px; line-height: 18px; }
.k1c-del { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--muted)); cursor: pointer; }
.k1c-del:hover { background: rgb(239 68 68 / .1); color: #dc2626; }

.k1c-foot { padding: 16px 20px 20px; border-top: 1px solid rgb(var(--line)); }
.k1c-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.k1c-total span { font-weight: 600; }
.k1c-total strong { font-size: 22px; font-weight: 700; }
/* Payer: the purchase purple with white text and the buy box's shield */
.k1c-pay {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 8px;
  background: rgb(var(--cta)); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
}
.k1c-pay:hover { background: rgb(var(--cta-hover)); color: #fff; }
.k1c-pay::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2 4.2 5.3v6.1c0 4.9 3.3 8.9 7.8 10.4 4.5-1.5 7.8-5.5 7.8-10.4V5.3zm4.1 7.6-5 5a1 1 0 0 1-1.4 0l-2.4-2.4 1.4-1.4 1.7 1.7 4.3-4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2 4.2 5.3v6.1c0 4.9 3.3 8.9 7.8 10.4 4.5-1.5 7.8-5.5 7.8-10.4V5.3zm4.1 7.6-5 5a1 1 0 0 1-1.4 0l-2.4-2.4 1.4-1.4 1.7 1.7 4.3-4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.k1c-safe { margin: 10px 0 0; text-align: center; color: rgb(var(--muted)); font-size: 12px; }
.k1c-more { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.k1c-more:hover { text-decoration: underline; }
:is(.k1c-x, .k1c-qty button, .k1c-del, .k1c-pay, .k1c-more, .k1c-empty__games a):focus-visible { outline: 2px solid rgb(var(--cta)); outline-offset: 2px; }

/* Empty cart: a short message and the four games */
.k1c-empty { display: flex; flex-direction: column; align-items: center; padding: 56px 24px; text-align: center; }
.k1c-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: rgb(var(--ink) / .06); color: rgb(var(--muted)); }
.k1c-empty strong { font-size: 16px; }
.k1c-empty p { margin: 6px 0 18px; color: rgb(var(--muted)); font-size: 14px; }
.k1c-empty__games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 320px; }
.k1c-empty__games a { padding: 10px; border: 1px solid rgb(var(--line)); border-radius: 8px; color: rgb(var(--ink)); font-size: 14px; font-weight: 500; text-decoration: none; }
.k1c-empty__games a:hover { border-color: rgb(var(--cta) / .6); }

/* Checkout with two lines or more (1k-header.js, "Checkout"): one compact list in place of the
   page's per-line cards, one character field per server, each article in the summary */
html.k1co-on .k4-main-in > .k4-card:not(.k1co-cart):has(> .k4-prod) { display: none; }
.k1co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px 4px; }
.k1co-head .k4-h2 span { color: rgb(var(--muted)); font-weight: 500; }
.k1co-edit { padding: 0; border: 0; background: none; color: rgb(var(--brand)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.k1co-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.k1co-list { margin: 0; padding: 4px 20px 6px; list-style: none; }
.k1co-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.k1co-row + .k1co-row { border-top: 1px solid rgb(var(--line)); }
.k1co-row[hidden] { display: none; }
.k1co-thumb { display: grid; flex: none; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 6px; background: #1d072a; }
.k1co-thumb img { width: 28px; height: 28px; object-fit: contain; }
.k1co-thumb--cover img { width: 100%; height: 100%; object-fit: cover; }
.k1co-row__txt { flex: 1; min-width: 0; }
.k1co-row__name { margin: 0; overflow: hidden; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.k1co-row__meta { margin: 0; color: rgb(var(--muted)); font-size: 12.5px; line-height: 18px; }
.k1co-tag { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px; vertical-align: 1px; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); font-size: 11px; line-height: 18px; font-weight: 600; }
.k1co-price { flex: none; color: rgb(var(--ink)); font-size: 14px; font-weight: 700; white-space: nowrap; }
.k1co-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 40px); height: 36px; margin: 0 20px 10px; border: 1px dashed rgb(var(--ink) / .2); border-radius: 8px; background: none; color: rgb(var(--brand)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.k1co-more svg { transition: transform .15s; }
.k1co-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.k1co-names { border-top: 1px solid rgb(var(--line)); }
.k1co-names .k4-char { align-items: center; }
.k1co-for { display: block; margin-top: 2px; color: rgb(var(--muted)); font-size: 12px; font-weight: 400; }
.k1co-note { display: flex; gap: 8px; margin: 0 20px 14px; padding: 10px 12px; border-radius: 8px; background: rgb(var(--ink) / .04); color: rgb(var(--body)); font-size: 12.5px; line-height: 18px; }
.k1co-note svg { flex: none; margin-top: 1px; color: rgb(var(--brand)); }
.k1co-items { padding-bottom: 8px; border-bottom: 1px solid rgb(var(--line)); }
.k1co-items dt { min-width: 0; overflow: hidden; color: rgb(var(--body)); white-space: nowrap; text-overflow: ellipsis; }
.k1co-eta { margin: 10px 0 0; color: rgb(var(--muted)); font-size: 12.5px; line-height: 18px; }
.k1co-eta b { color: rgb(var(--ink)); font-weight: 600; }
:is(.k1co-edit, .k1co-more):focus-visible { outline: 2px solid rgb(var(--cta)); outline-offset: 2px; }

/* Identity verification link (the site's own: gold or red gradient, shadow, shield, growing on hover): a
   flat brick-red warning (white text 5.3:1), as tall and round as "Se connecter", with a solid ID card
   in place of the shield. The "contact support" state after a rejected check has the same look. */
html body a:is([class*="from-[#fbe08a]"], [class*="from-[#f87171]"]) {
  align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; background-color: #bf3f3a; background-image: none; box-shadow: none;
  color: #fff; font-size: 14px; line-height: 20px; font-weight: 700;
}
html body a:is([class*="from-[#fbe08a]"], [class*="from-[#f87171]"]):hover { background-color: #a63530; color: #fff; transform: none; }
html body a:is([class*="from-[#fbe08a]"], [class*="from-[#f87171]"]) > svg { display: none; }
html body a:is([class*="from-[#fbe08a]"], [class*="from-[#f87171]"])::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--k1-id) center / contain no-repeat; mask: var(--k1-id) center / contain no-repeat;
  --k1-id: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 4.5h18a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2zM8 8a2.3 2.3 0 1 0 0 4.6A2.3 2.3 0 0 0 8 8zm-3.8 8.5h7.6c0-2-1.6-3.1-3.8-3.1s-3.8 1.1-3.8 3.1zM14 9v1.700h6V9zm0 4v1.700h6V13z'/%3E%3C/svg%3E");
}