/* 1kamas: homepage hero test, "games in the hero" version (Eldorado-like): the site's hero with
   flat surfaces, no blur and no purple glow, the background image faded well back into a muted violet.
   Left: label, H1, sentence and the payment methods. Right: the four games as tiles, and under
   them a quick-order bar. Bottom strip: the three promises on one line. The "Populaires" row under the hero is hidden (its games are
   in the hero); on the French homepage an "Aussi sur Dofus" row takes its place. Tiles, strip
   items, payment row and that row are added by 1k-hero.js.
   Below 1024px the text and the tiles stack; on phones (under 640px) the strip is hidden as
   before, and the chips stay instead.
   Selectors are prefixed with `html` to win over the per-page inlined CSS. Remove the
   <link data-1k-hero> tag (and the 1k-hero.js script) to undo. */

/* No large drop shadow under the hero box. Background: a muted violet (#4A3C6A, halfway between
   the image's own average purple #765BB0 and charcoal), so the brightest purple is the quick
   order's "Acheter" */
html .hp-hero { box-shadow: none; background-color: #4a3c6a; }
/* Dark mode: one step lighter (#4E406E), so the hero still stands out from the dark page */
html[data-theme="dark"] .hp-hero { background-color: #4e406e; }

/* On a computer, the room of the tiles, the quick order and (in French) the "Aussi sur Dofus" row
   is kept from the first paint: 1k-hero.js builds them a moment after the page shows, and the
   title and the text under the hero used to move down then. The hero's grid gets the height of
   the tiles column (so the title is centred where it will stay) and the block around it the
   finished blocks' height (the smallest at each width, so no gap is left). To update if the
   hero's layout changes */
@media (min-width: 1024px) {
  html .hp-hero:not(:has(.k1-qbar)) .grid.items-center { min-height: 404px; }
  html:is([lang="en"], [lang="pt"]) body main > .home-first:not(:has(.k1-qbar)) { min-height: 564px; }
  html[lang="es"] body main > .home-first:not(:has(.k1-qbar)) { min-height: 582px; }
  html[lang="fr"] body main > .home-first:not(:has(.k1-more)) { min-height: 897px; }
}
@media (min-width: 1280px) {
  html[lang="fr"] body main > .home-first:not(:has(.k1-more)) { min-height: 780px; }
}
/* From about 1404px the quick order fits on one line (its own container query) and the blocks
   are 50px shorter */
@media (min-width: 1404px) {
  html .hp-hero:not(:has(.k1-qbar)) .grid.items-center { min-height: 354px; }
  html:is([lang="en"], [lang="pt"], [lang="es"]) body main > .home-first:not(:has(.k1-qbar)) { min-height: 514px; }
  html[lang="fr"] body main > .home-first:not(:has(.k1-more)) { min-height: 730px; }
}
/* Tablets (640 to 1023px, the tiles under the text): the same, block by block, since the text's
   height changes with the width: the tiles column (the quick order on one line from 760px), the
   promises strip and the French row */
@media (min-width: 640px) and (max-width: 1023px) {
  html .hp-hero:not(:has(.k1-qbar)) .grid > div.hidden { min-height: 404px; }
  html .hp-hero:not(:has(.k1-qbar)) div[class~="py-3.5"] { min-height: 89px; }
  html[lang="fr"] body main > .home-first:not(:has(.k1-more)) > section:first-child { margin-bottom: 373px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  html .hp-hero:not(:has(.k1-qbar)) .grid > div.hidden { min-height: 354px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  html[lang="fr"] body main > .home-first:not(:has(.k1-more)) > section:first-child { margin-bottom: 333px; }
}

/* Background image: half desaturated, faded into the violet and dissolving toward the edges, so
   the emblem reads as a backdrop behind the text and tiles; the site's dark scrims on top are
   unchanged */
html .hp-hero > img {
  opacity: .25; filter: grayscale(.5);
  -webkit-mask: radial-gradient(ellipse 60% 85% at 62% 50%, #000 25%, transparent 80%);
  mask: radial-gradient(ellipse 60% 85% at 62% 50%, #000 25%, transparent 80%);
}

/* The purple radial tint layer over the image becomes a light dark gradient instead: clear at the
   top left, slightly darker toward the bottom right, where it meets the strip */
html .hp-hero > [class*="radial-gradient"] {
  background: linear-gradient(160deg, rgba(10, 8, 17, 0) 25%, rgba(10, 8, 17, .32) 100%); opacity: 1;
}
/* The site's plum wash (bg-plum/35) and its blue-black legibility scrims, lighter and less blue:
   made for the bright purple base, at full strength they turn the muted violet near-black */
html .hp-hero > .bg-plum\/35 { background-color: rgba(16, 1, 16, .28); }
html .hp-hero > .bg-hero-overlay { background-image: linear-gradient(90deg, rgba(5, 3, 11, .56), rgba(5, 3, 11, .08) 50%, rgba(5, 3, 11, .56)); }
html .hp-hero > [class*="linear-gradient(0deg"] { background-image: linear-gradient(0deg, rgba(5, 3, 11, .48), transparent); }
html .hp-hero > [class*="linear-gradient(90deg"] {
  background-image: linear-gradient(90deg, rgba(5, 3, 11, .44) 0%, rgba(5, 3, 11, .31) 38%, rgba(5, 3, 11, .14) 70%, rgba(5, 3, 11, .06) 100%);
}

/* No glow behind the label and the H1 */
html .hp-hero .eyebrow, html .hp-hero h1 { filter: none; --tw-drop-shadow: none; }

/* Slightly shorter: 32px top and bottom instead of 40px */
html .hp-hero .container-1k.py-10 { padding-top: 32px; padding-bottom: 32px; }

/* Chips: flat, 6px corners instead of blurred pills. Phones only: from 640px their promises are
   in the bottom strip */
html .hp-hero ul > li {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16);
  border-radius: 6px; font-size: 12px; padding: 4px 10px;
}
@media (min-width: 640px) {
  html .hp-hero .grid > div.text-white > ul { display: none; }
}

/* ---------- Layout: text, then the tiles; side by side from 1024px ---------- */
html .hp-hero .grid.items-center { grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) {
  html .hp-hero .grid.items-center { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
}
/* Right column, at every width: the three boxes give way to the tiles (their text is in the strip) */
html .hp-hero .grid > div.hidden { display: block; }
html .hp-hero .grid > div.hidden > div.rounded-card { display: none; }

/* Payment methods under the sentence (the footer's logos), from 640px */
.k1-pay { display: none; }
@media (min-width: 640px) {
  .k1-pay {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 28px;
    color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 18px; font-weight: 500;
  }
}

/* ---------- Game tiles: game picture muted and darkened, logo on the right, name bottom left ---------- */
.k1-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.k1-tiles__label { grid-column: 1 / -1; margin: 0 0 -2px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 20px; font-weight: 600; }
.k1-tile {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  height: 120px; padding: 12px 14px; overflow: hidden; isolation: isolate;
  border-radius: 8px; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.k1-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 12, 19, .3) 0%, rgba(14, 12, 19, .88) 100%), var(--k1-bg) center / cover no-repeat, #1e1226;
  filter: saturate(.45);
}
.k1-tile:hover { box-shadow: inset 0 0 0 2px #b8a4ee; }
.k1-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.k1-tile__logo {
  position: absolute; top: 10px; right: 14px; bottom: 10px; width: 46%;
  background: var(--k1-logo) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.k1-tile__text { position: relative; max-width: 52%; }
.k1-tile__text strong { display: block; font-size: 16px; line-height: 22px; font-weight: 700; }
.k1-tile__text small { display: block; color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 18px; }
.k1-tile > svg { position: relative; flex: none; margin-bottom: 2px; color: #b8a4ee; }
/* Hovering a tile puts its arrow in a lavender square (the quick order's "Acheter" colour): the
   square's padding is always there, cancelled by negative margins, so the arrow doesn't move */
.k1-tile > svg { box-sizing: content-box; padding: 9px; margin: -9px -9px -7px; border-radius: 6px; transition: background-color .15s, color .15s; }
.k1-tile:hover > svg, .k1-tile:focus-visible > svg { background: #b8a4ee; color: #16151c; }
/* Phones: smaller tiles, logo on top, name underneath */
@media (max-width: 639px) {
  .k1-tiles { gap: 8px; }
  .k1-tiles__label { font-size: 13px; }
  .k1-tile { height: 108px; padding: 8px 10px; }
  .k1-tile__logo { top: 8px; left: 8px; right: 8px; bottom: 38px; width: auto; }
  .k1-tile__text { max-width: none; }
  .k1-tile__text strong { font-size: 14px; line-height: 18px; }
  .k1-tile__text small { font-size: 12px; line-height: 16px; }
  .k1-tile > svg { display: none; }
}

/* Tiles a little shorter from 640px, to leave room for the quick-order bar */
@media (min-width: 640px) { .k1-tile { height: 100px; } }

/* ---------- Quick-order bar under the tiles: game, server, quantity, total, buy ----------
   One line when the bar is 640px wide or more (container query); otherwise two rows (game,
   server, quantity / total, buy); on phones, two columns. Fields are site surfaces (white / dark),
   the total and button sit on the hero's violet. */
.k1-qbar {
  margin-top: 14px; padding: 12px; border-radius: 10px; container-type: inline-size;
  background: rgba(7, 3, 13, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Purchase block: the full purple brand comes back inside the quick order and its lists (field
   focus rings, the chosen game / server), while the rest of the page uses the muted violet */
.k1-qbar, .k1-dd__panel { --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251; }
html[data-theme="dark"] .k1-qbar, html[data-theme="dark"] .k1-dd__panel { --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56; }
.k1-qbar__label { margin: 0 0 8px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 20px; font-weight: 600; }
.k1-qbar__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.k1-qbar__total { grid-column: 1 / 3; display: flex; align-items: baseline; gap: 8px; padding: 0 4px; color: #fff; }
.k1-qbar__buy { grid-column: 3; }
@container (min-width: 640px) {
  .k1-qbar__fields { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
  .k1-qbar__total { grid-column: auto; display: block; padding: 0 6px; }
  .k1-qbar__total small { display: none; }
  .k1-qbar__buy { grid-column: auto; }
}
@container (max-width: 419px) {
  .k1-qbar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k1-qbar__total { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 0; }
  .k1-qbar__buy { grid-column: 1 / -1; }
}
.k1-qbar__total strong { font-size: 20px; line-height: 26px; font-weight: 700; white-space: nowrap; }
.k1-qbar__total small { color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 18px; white-space: nowrap; }

/* Game and server: a field-like button (site surface, 42px) with the game's logo for the game,
   the choice and a chevron that turns when the list is open */
.k1-qbar__select { display: block; min-width: 0; }
.k1-dd__btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; padding: 0 10px 0 12px; cursor: pointer; text-align: left;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface));
  color: rgb(var(--ink)); font: inherit; font-size: 14px; font-weight: 500;
}
.k1-dd__btn:hover { border-color: rgb(var(--brand) / .5); }
.k1-dd__btn:focus-visible, .k1-dd__btn[aria-expanded="true"] { outline: none; border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .25); }
.k1-dd__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k1-dd__btn > svg { flex: none; color: rgb(var(--muted)); transition: transform .15s ease; }
.k1-dd__btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.k1-dd__logo { flex: none; width: 30px; height: 22px; background: center / contain no-repeat; }
.k1-dd__logo[hidden] { display: none; }

/* The list (placed in <body> by 1k-hero.js): site surface, soft border and shadow, rounded rows;
   group names small and muted; the choice in purple with a check; out of stock in grey */
.k1-dd__panel {
  position: absolute; z-index: 80; overflow: auto; padding: 6px; box-sizing: border-box; outline: none;
  border: 1px solid rgb(var(--line)); border-radius: 10px; background: rgb(var(--surface));
  box-shadow: 0 16px 40px rgb(13 11 21 / .22); scrollbar-width: thin; scrollbar-color: rgb(var(--line)) transparent;
  color: rgb(var(--ink)); font-size: 14px; line-height: 20px; text-align: left;
}
html[data-theme="dark"] .k1-dd__panel { box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
.k1-dd__group { padding: 10px 10px 4px; color: rgb(var(--muted)); font-size: 12px; line-height: 16px; font-weight: 600; }
.k1-dd__panel > [role="group"]:first-child .k1-dd__group { padding-top: 4px; }
.k1-dd__opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 6px; cursor: pointer; }
.k1-dd__opt.is-active { background: rgb(var(--brand) / .1); }
.k1-dd__opt-logo { flex: none; width: 36px; height: 26px; background: center / contain no-repeat; }
.k1-dd__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k1-dd__opt-meta { flex: none; color: rgb(var(--muted)); font-size: 13px; font-weight: 400; }
.k1-dd__check { flex: none; color: rgb(var(--brand)); visibility: hidden; }
.k1-dd__opt[aria-selected="true"] { color: rgb(var(--brand)); font-weight: 600; }
.k1-dd__opt[aria-selected="true"] .k1-dd__check { visibility: visible; }
.k1-dd__opt.is-out .k1-dd__opt-name { color: rgb(var(--muted)); }

/* Quantity: − 10 M + */
.k1-qbar__qty {
  display: flex; align-items: center; height: 42px; min-width: 0; overflow: hidden;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface));
}
.k1-qbar__qty:focus-within { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .25); }
.k1-qbar__qty button { flex: none; width: 34px; height: 100%; padding: 0; border: 0; background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 18px; cursor: pointer; }
.k1-qbar__qty button:hover:not(:disabled) { background: rgb(var(--ink) / .06); }
.k1-qbar__qty button:disabled { color: rgb(var(--muted)); opacity: .5; cursor: default; }
html .k1-qbar__qty input {
  flex: 0 1 auto; width: 5ch; min-width: 0; height: 100%; margin-left: auto; padding: 0; border: 0; border-radius: 0;
  box-shadow: none; outline: none; background: transparent;
  color: rgb(var(--ink)); font: inherit; font-size: 15px; font-weight: 600; text-align: right;
}
.k1-qbar__unit { flex: none; margin-right: auto; padding-left: 4px; color: rgb(var(--muted)); font-size: 15px; font-weight: 600; }

/* Buy: the buy box's purple with white text, as every "Acheter"; the bar's main action, so a
   little taller and wider than the fields (46px, 150px at least) */
.k1-qbar__buy {
  height: 46px; min-width: 150px; padding: 0 28px; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: #8b74d0; color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
/* A shield with a check before "Acheter" (secure payment), like the product pages' buy button */
.k1-qbar__buy::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;
}
.k1-qbar__buy:disabled::before { display: none; }
.k1-qbar__buy:hover { background: #7c64c4; }
.k1-qbar__buy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.k1-qbar__buy:disabled { background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6); cursor: default; }
/* While the live price is fetched (a moment): still the buy button, only waiting */
.k1-qbar__buy[aria-busy="true"]:disabled { background: #8b74d0; color: #fff; cursor: progress; }
.k1-qbar__buy[aria-busy="true"]:disabled::before { display: block; }

/* Icons: soft purple square, no glow */
html .hp-hero span.rounded-card.bg-brand { box-shadow: none; background: rgba(220, 210, 246, .12); color: rgba(220, 210, 246, .86); }

/* ---------- Bottom strip: the three promises on one line, in the hero's own plum ---------- */
html .hp-hero div.border-t.backdrop-blur-md {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(7, 3, 13, .36); border-color: rgba(255, 255, 255, .1);
}
html .hp-hero div.border-t .container-1k { padding-top: 16px; padding-bottom: 16px; }
html .hp-hero div.border-t .container-1k > p { display: none; }
.k1-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.k1-trust__item { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; }
html .hp-hero .k1-trust__item > span.rounded-card { width: 36px; height: 36px; }
.k1-trust__item p { margin: 0; }
.k1-trust__item p.font-semibold { font-size: 15px; line-height: 20px; }
.k1-trust__item p.text-sm { margin-top: 1px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .72); }
@media (max-width: 1023px) {
  .k1-trust { gap: 16px; }
  .k1-trust__item { gap: 10px; }
}

/* ---------- Under the hero: "Populaires" hidden (its games are in the hero) ---------- */
html body section.hp-aura { display: none; }

/* "Aussi sur Dofus" (French homepage): the items and accounts pages, with their icons */
.k1-more { padding-top: 32px; }
.k1-more h2 { margin: 0 0 16px; color: rgb(var(--ink)); font-size: 18px; line-height: 27px; font-weight: 700; }
.k1-more__grid { display: grid; gap: 16px; }
@media (min-width: 1280px) { .k1-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.k1-more__card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px;
  border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); text-decoration: none;
}
.k1-more__card:hover { border-color: rgb(var(--brand) / .45); }
.k1-more__card:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
.k1-more__card h3 { margin: 0; color: rgb(var(--ink)); font-size: 18px; line-height: 24px; font-weight: 600; }
.k1-more__card p { margin: 4px 0 0; color: rgb(var(--body)); font-size: 14px; line-height: 20px; }
/* "Acheter des items / des comptes →": purchase links, so the purchase purple (lavender in dark mode) */
.k1-more__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: rgb(var(--cta)); font-size: 14px; line-height: 20px; font-weight: 600; }
html[data-theme="dark"] .k1-more__link { color: #b8a4ee; }
.k1-more__icons { display: flex; flex: none; gap: 8px; }
.k1-more__icons span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: #1d072a; }
.k1-more__icons img { width: 40px; height: 40px; object-fit: contain; }
.k1-more__icons--classes img { width: 36px; height: 36px; }
/* Phones: the icons go under the text */
@media (max-width: 639px) {
  .k1-more__card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .k1-more__icons { gap: 6px; }
  .k1-more__icons span { width: 44px; height: 44px; }
  .k1-more__icons img { width: 34px; height: 34px; }
  .k1-more__icons--classes img { width: 30px; height: 30px; }
}